Previous Page TOC Next Page



Chapter 10


Using Microsoft FrontPage


by Rob McGregor

Creating and maintaining Web sites used to be a tedious and mind-numbing process, especially when the sites grew large and unwieldy. But Microsoft's FrontPage is changing all that. Although the version 1.1 release isn't yet a complete Web site solution, it's very close. By using its excellent Web creation and maintenance tools, you can be a Web master in no time.

What Is FrontPage?


Microsoft FrontPage was created to assist you in the design and management of Web sites. FrontPage isn't just about creating personal Web sites, though; it's about creating exciting, interactive sites that can represent your company. FrontPage helps take the tedium out of managing your Web site, and it saves you a lot of time in the initial development process. FrontPage enables you to spend your time being creative by providing you with a WYSIWYG HTML editor and a visual, hierarchical representation of your entire Web site (or in FrontPage terms: your "web").

Adding new pages to your web is as simple as a few clicks of the mouse. FrontPage automatically links new pages to existing pages, and it provides you with a plethora of templates and wizards so that you don't have to start from scratch (another valuable time saver). Even if you're a diehard HTML author whose favorite editor is Notepad, you'll see just how much time and effort you can save after just a few minutes using the FrontPage Web Editor.

The FrontPage Explorer, Editor, and Personal Web Server


FrontPage combines the power of a Web explorer, a WYSIWYG HTML editor, and a personal Web server so that you can whip out a professional-looking site in no time. Take a look at these amazing tools, starting with the FrontPage Explorer.

The FrontPage Explorer


The FrontPage Explorer is a Web site management utility that is one of FrontPage's major assets. Using this tool, you can maintain an incredibly complex Web site easily. Figure 10.1 shows the main window of the FrontPage Explorer, with an outline view in the left pane and a graphical hierarchy of Web site links in the right pane. As items in the outline view are selected, the corresponding site links are displayed in the link view. The FrontPage Explorer makes locating pages and keeping track of documents and links incredibly easy.

Note


The right pane can also display a Summary View, a detailed listing of all files used in a web. Access the Summary View by choosing the View, Summary View menu command.

Figure 10.1. The FrontPage Explorer.

By clicking through the various items in the outline view, you can see the relationships and links among the documents that make up a site.

Consistent, Automatic Styles


Setting or changing an overall style for a Web site is quick and easy with FrontPage. You can easily edit the colors, navigation links, and company logo for each page in a site from a single location.

The tree view in the outline pane shows the internal links used by each page for these common items. For instance, instead of using a company logo image on each page that needs it, the image is simply referenced from a logo page. Changing the logo on that one page updates the image throughout the Web site, wherever the logo image is referenced. Similarly, colors and navigation links are each referenced by their respective master pages. This makes setting or changing an overall Web site style quick and easy.

Double-clicking a page icon in the link view launches the FrontPage Editor to allow visual editing of the source file for the selected page. (See the section "The FrontPage Editor.")

Managing Your Web


The ability to effectively manage a large Web site is crucial, and the FrontPage Explorer's menus offer many useful commands for performing Web creation and maintenance. This section examines these menus to get an overview of the tools the FrontPage Explorer provides.

The File Menu

The File menu provides commands that you use to manage entire Web sites. Table 10.1 describes the available commands.

Table 10.1. FrontPage Explorer File menu commands.

Menu Command Enables You To New Web Create a new web from existing templates and wizards Open Web Open an existing web Close Web Close a web currently open in the FrontPage Explorer Copy Web Copy an existing web to a new location Delete Web Delete an existing web Import Import files into an existing web Export Selected Export the currently selected image or HTML file from the web to a specified location

The Edit Menu

The Edit menu provides commands to edit Web files, pages, images, documents, tasks, and properties. Table 10.2 describes the available commands.

Table 10.2. FrontPage Explorer Edit menu commands.

Menu Command Enables You To Delete Delete the currently selected page or file from a Web. Add To Do Task Add a task to the current web's To Do list, linking the task to the active page. Open Open a selected page or file in either the outline view or the link view. This is the same result as double-clicking an item in the FrontPage Explorer. Open With Open the currently selected file with any editor associated with various file types (by using the Tools|Configure Editors menu command). Properties View and edit the properties of the currently selected page, such as: title and URL of the currently selected page, author, comments, and notes.

The View Menu

The View menu provides commands to control user-interface elements like toolbars. Table 10.3 describes the available commands.

Table 10.3. FrontPage Explorer View menu commands.

Menu Command Enables You To Toolbar Display or hide the toolbar Status Bar Display or hide the status bar Split Move the vertical bar that divides the FrontPage Explorer's left and right panes Link View View a web as a graphical hierarchy of links Summary View View a web as a detailed list of files used in the web Links to Images Display or hide all links to images in a web Repeated Links Display or hide multiple links from one page to another page Links Inside Page Display or hide any links within a page targeting anchors that lie within that same page Refresh Update all views within the FrontPage Explorer

The Tools Menu

The Tools menu provides commands to configure settings for various web elements. Table 10.4 describes the available commands.

Table 10.4. FrontPage Explorer Tools menu commands.

Menu Command Enables You To Web Settings Get information about the current web or set advanced features for the web. Permissions Set permissions for administrators, authors, and end users of a web. Administrators have full reign over a web, its pages, and security. Authors can only create and delete pages. End users can only read pages, or they can be denied access to a web either partially or altogether. Configure Editors Associate an editor with a file type. Change Password Change a password. Proxies Register a proxy server name, if used by your local network, and register all hosts located within your firewall. Verify Links Verify internal and external links in a web and repair broken or dubious links. Recalculate Links Update the search text index (created by a Search bot) and regenerate dependencies. Stop Cancel a request that has been sent to a server. Show FrontPage Editor Launch or display the FrontPage Editor. Show To Do List Display the To Do List for the current web.

That completes this overview of the FrontPage Explorer, a sophisticated and powerful Web site management tool. Next up is the FrontPage Editor.

The FrontPage Editor


The FrontPage Editor is a full-featured HTML word processor and page layout program that gives you full WYSIWYG editing of HTML documents, as you can see in Figure 10.2. The FrontPage Editor provides you with a clean environment where you can create professional Web pages in a fraction of the time it would take using a lesser editor (like Notepad).

Figure 10.2. The FrontPage Editor gives you full WYSIWYG editing of HTML documents.

Note


The FrontPage Editor uses ActiveX objects called bots to enable dynamic evaluation and execution of data that is typically saved as HTML when a page is saved to the server.


Editing Your HTML Files


The FrontPage Editor provides an abundance of tools for creating advanced HTML files, with fancy layouts, difficult tables, and easy frames. Take a look at the menu commands the Editor provides.

The File Menu

The File menu provides commands that enable you to work with files and to set page properties and print options. Table 10.5 describes the available commands.

Table 10.5. FrontPage Editor File menu commands.

Menu Command Enables You to New Create a new page using an existing page template or page wizard in the New Page dialog box Open File Open a text (TXT), rich text format (RTF), or HTML (HTM or HTML) file for editing Open from Web Open a page from the current web Open Location Open a page or other file, directly from the World Wide Web, for editing Close Close the active page Save Save the active page Save As Save the active page to a new page in the current web, or to a file, or create a page template from the active page Save All Save all open pages in HTML format simultaneously Page Properties Set properties for the appearance of the active page, edit the page title, and assign a base URL Page Setup Set header, footer, and margin information for the active page Print Preview Preview the active page onscreen as it would appear when printed Print Print the active page Exit Close the FrontPage Editor

Setting page properties is easy with the File|Page Properties menu command, which calls up the dialog box shown in Figure 10.3.

Figure 10.3. The Page Properties dialog box.

The Edit Menu

The Edit menu provides the standard Edit menu commands typical of a word processor, plus the specialized commands described in Table 10.6.

Table 10.6. FrontPage Editor Edit menu commands.

Menu Command Enables You To Add To Do Task Add a task to the current web's To Do list, linking the task to the active page Bookmark Create a bookmark (a link target or anchor) for any currently selected text Link Create or modify a link, using selected text, to a URL in the current web or in the World Wide Web Unlink Remove a link from selected text without deleting the text characters Properties Open a Properties dialog box for a selected object, including bookmarks, bots, characters, form fields, entire forms, horizontal lines, hotspots, images, links, paragraphs, table cells, and entire tables

The View Menu

The View menu provides commands to display or hide the various toolbars used by the Editor and to display or hide the status bar. The View menu also enables you to display or hide format marks. These are normally invisible page elements like hard returns, bookmarks, and form outlines.

The Insert Menu

The Insert menu provides commands to insert various standard HTML tags into a page at the insertion point specified by the current cursor location. Table 10.7 describes the available commands.

Table 10.7. FrontPage Editor Insert menu commands.

Menu Command Enables You To Heading Insert any of six heading paragraph sizes, from <H1> to <H6>. List Insert any of four types of lists: bulleted, numbered, directory, or menu. Definition Insert any of three types of definition formatting: list, term, and definition. Form Field Insert named form fields with parameters set by dialog boxes. The available fields are single-line text box, multiple-line text box, check box, radio button, drop-down menu, pushbutton, and image. Paragraph Insert three types of paragraph tags: normal, formatted, and address. Horizontal Line Insert a horizontal line tag <HR>. Line Break Insert one of four types of line breaks: standard line break, clear left margin, clear right margin, and clear both margins. Image Insert an image file in any of the following formats: GIF, JPEG, BMP (Windows and OS/2), TIFF, MAC, MSP, PCD, RAS, WPG, EPS, PCX, and WMF. Bot Insert any of the following types of bots: Annotation bot, Confirmation Field bot, HTML Markup bot, Include bot, Scheduled Image bot, Scheduled Include bot, Search bot, Substitution bot, Table of Contents bot, Timestamp bot. Special Character Insert any of the special characters shown in Figure 10.4 into a page at the insertion point. File Insert a copy of a specified RTF, HTML, or text file at the insertion point.

Figure 10.4. Special characters available for insertion with the Insert|Special Characters menu.

The Format Menu

The Format menu provides commands to select various formatting options for selected characters or paragraphs or to remove formatting from selected characters.

The Format|Character menu command invokes the dialog box shown in Figure 10.5, which lets you choose character styles, font size, color, and position.

Figure 10.5. The Character Styles dialog box.

The Format|Paragraph menu command enables you to choose any available formatting styles from a list box. These options are also available on the Format toolbar.

The Format|Remove Formatting menu command removes formatting from any selected characters, returning character formatting to the default style.

The Tools Menu

The Tools menu provides a spell-checker, as well as standard browser commands for navigating URLs, bookmarks, and so on. The available browser commands are as follows:

You can also call up the To Do List dialog box and FrontPage Explorer from the Tools menu.

The Table Menu

The Table menu provides commands to create and edit HTML tables, and Table 10.8 describes the available menu commands.

Table 10.8. FrontPage Editor Table menu commands.

Menu Command Enables You To Insert Table Insert a table designed to your specifications with the Insert Table dialog box. (See Figure 10.6.) Insert Rows or Columns Insert a specified number of rows or columns at the insertion point. Insert Cell Insert a new cell at the insertion point. Insert Caption Insert a caption above a table. Merge Cells Merge selected cells into a single cell. Split Cells Split selected cells into a specified number of cells. Select Cell Select the cell at the insertion point. Select Row Select an entire row of cells. Select Column Select an entire column of cells. Select Table Select an entire table. Table Properties Adjust table properties with a trimmed-down version of the Insert Table dialog box. (See Figure 10.6.)

Figure 10.6. The Insert Table dialog box.

Some Caveats


The FrontPage Editor is great for developing frames and tables quickly and almost effortlessly, but be careful about editing existing HTML files containing Java applets, JavaScript, or VBScript. The Editor has a tendency to replace certain important scripting characters with equivalent HTML symbols.

For example, the double-quotes (") in the following JavaScript expression are replaced with their HTML equivalent (&quot;):


document.write ("Howdy.")

That gives you this unusable code:


document.write (&quot;Howdy.&quot;)

The Editor also has a tendency to "scrunch up" nicely formatted code into a mass of illegible code. For example, the nicely formatted code in Listing 10.1 becomes the mangled code in Listing 10.2.

Caution


Don't retire Notepad just yet. Version 1.1 of the FrontPage Editor doesn't support Netscape bullet styles, Java applets, JavaScript, or VBScript directly. In fact, the editor is oblivious to scripting and can change existing script code such that it won't run without editing by hand. You'll probably still need your trusty Notepad to do some final tweaking.

Listing 10.1. An HTML file as it appears before importing into the FrontPage Editor.


<html>

<head>

<title>My Title</title>

</head>

<body>

<h2>

Sample Scruncher Page

</h2>

<hr>

<h3>This page is formatted with lots of white space: </h3><p>

 <li> White space lets us understand the code better.<br>

 <li> Code with lots of white space is aesthetically pleasing.<p>

For this example page, the following Java applet should be spaced

 out with one item per line:

<p>

<applet

   codebase = "../java/SomeApplet"

   code     = SomeApplet.class

   id       = SomeApplet

   width    = 160

   height   = 120>

   <param name = "Param1"  value = "10">

</applet>

<hr>

<a href="SomeApplet.java"><b>The source</b></a>

</body>

</html>

Listing 10.2. The HTML file from Listing 10.1 as it appears after importing into the FrontPage Editor and saving.


<.DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<head>

<title>My Title</title>

<meta name="GENERATOR" content="Microsoft FrontPage 1.1">

</head>

<body>

<h2>Sample Scruncher Page </h2>

<hr>

<h3>This page is formatted with lots of white space: </h3>

<p>White space lets us understand the code better.<br>

Code with lots of white space is aesthetically pleasing.</p>

<p>For this example page, the following Java applet should be

spaced out with one item per line: </p>

<p><applet codebase="../java/SomeApplet" code="SomeApplet.class"

id="SomeApplet" width="160" height="120"> <param name="Param1"

value="10"> </applet> </p>

<hr>

<p><a href="SomeApplet.java"><b>The source</b></a> </p>

</body>

</html>

All these little idiosyncrasies aside, this really is one of the best HTML editors on the market today. The revisions for the upcoming release of FrontPage 97 (slated to be included with Microsoft Office 97) should fix these little problems and add a lot of ActiveX scripting and control support. Getting used to FrontPage now will put you that much further ahead of the pack later. Next, let's take a quick look at the FrontPage Personal Web Server.

The FrontPage Personal Web Server


The FrontPage Personal Web Server doesn't offer a lot of interactivity, just a File|Exit menu command and a Help|About menu command. Although it may not look like much, as you can see in Figure 10.7, there's a lot of power lurking behind its minimal user interface.

Figure 10.7. The Personal Web Server.

The Personal Web Server is really just that, a personal Web server. The FrontPage Explorer expects to be connected to a Web server when creating and editing webs, and the Personal Web Server provides the connectivity you need to simulate Web server functions when you're not connected to a real server.

The Personal Web Server was designed to allow site builders to test their Web sites thoroughly before putting the site online. But don't get the wrong impression. The Personal Web Server has the capability to actually function as a real, if somewhat limited, Web server for the World Wide Web. By simply connecting a desktop PC to the outside world with a modem, you can run your FrontPage webs right from a stand-alone machine. Of course, there's a catch. You'll need to obtain a permanent Internet Protocol (IP) address by registering your site. Then the entire world can find and browse your site. Your Web server can be configured using the FrontPage Server Administrator program that ships with FrontPage. (See Figure 10.8.)

Note


If you use a dedicated server machine running a network operating system (NOS), such as Windows NT Server, use the FrontPage Server Administrator in conjunction with the NOS Web server configuration utilities supplied with that machine.

Figure 10.8. The FrontPage Server Administrator controls server configurations.

Web Templates and Wizards


FrontPage comes equipped with web templates and web wizards suitable for many common types of Web sites. The templates simply provide a predefined layout for a page. The wizards actually walk you, step by step, through the process of creating a complete Web site (with all of the trimmings).

Using a FrontPage Wizard


Wizards are a big help in breaking down complex tasks into simple steps, and the FrontPage wizards do a tremendous job. The most astounding and comprehensive of the wizards included with FrontPage is the Corporate Presence Web Wizard. This excellent tool walks you through the many steps needed to create a basic corporate Web site, complete with navigation tools and example text.

The Corporate Presence Web Wizard contains several pages that you must step through, supplying the appropriate information each step of the way. Figure 10.9 shows the first step, where you decide which pages to include in your web.

Figure 10.9. The first step of the Corporate Presence Web Wizard.

You must also decide which items to include on your corporate home page as seen in Figure 10.10. This gives you a good starting point for your new Web site.

Figure 10.10. Deciding which items to include on your corporate home page.

Each page selected for the site in the first step has its own choice of content selections. Figure 10.11 shows the options for the What's New Page.

Figure 10.11. Choosing What's New items.

The Feedback Form provides a means of getting feedback from people that visit your site, and the options in the wizard pages shown in Figured 10.12 through 10.15 make it easy to set up the information you'd like to get from your visitors.

Figure 10.12. Deciding which feedback items to request from users of your web.

Figure 10.13. Choosing items common to each Web page, such as company logo, e-mail address, and copyright information.

Figure 10.14. Choosing a graphics style for the Web site, such as conservative, flashy, or cool.

Figure 10.15. Picking custom or default link colors and background for the Web site.

Providing users of your site with quick access to contact information is another important item. Setting up contact information is done through the wizard's contact page, as seen in Figure 10.16. Here you can specify phone and FAX numbers, as well as e-mail addresses.

Figure 10.16. Specifying important company contact information.

After all of the wizard's steps are completed, the FrontPage Explorer creates a new corporate web for you, generating all the starter files you selected and filling in the styles and information you specified in the wizard. Once the web is ready, a To Do List is displayed, as shown in Figure 10.17. The To Do List makes it easy to finish up your new web's look by replacing the generic logo with your company logo and inserting the proper text and graphics as needed.

Figure 10.17. The To Do List reminds you of tasks yet to be completed.

Once your To Do List is completed, your Web site should be ready for a test drive, some customization, and finishing touches.

Note


In Chapter 14, "Advanced Web Page Creation," you'll see how to achieve a small, complete Web site that's ready for prime time.


FrontPage Tables


FrontPage makes quick work of tables. Tables are easily created and modified using the Table menu commands discussed earlier, in the section "The FrontPage Editor." This section reviews the steps needed to create and modify a table.

Creating and Modifying a Table


To begin, open the FrontPage Editor and select the File|New menu command, and accept the default "Normal Page" template from the dialog box that appears. Next, select the Table|Insert Table menu command. Set the Insert Table controls to the values in Table 10.9.

Table 10.9. Values for the Insert Table dialog box controls.

Control Value Rows 5 Columns 4 Alignment Center Border Size 1 Cell Padding 1 Cell Spacing 1 Specify Width 75%

After you choose the OK button, your page should look like Figure 10.18. Now add a caption for the table by selecting the Table|Insert Caption menu command and then type the following caption: A FrontPage Table.

Figure 10.18. The new page with the empty, raised border table.

Next, format the caption by selecting the entire text and clicking the Bold and Italic buttons on the Format toolbar (the toolbar's tooltips will reveal which tool buttons these are). Follow this by clicking the Increase Text Size Formatting toolbar button twice. The caption should now look like the one in Figure 10.19.

Figure 10.19. The table with a caption.

Click the left-middle cell to position the insertion point and choose the Table|Select Row menu command, followed immediately by the Table|Merge Cells menu command. This merges the middle row of cells into a single cell as you can see in Figure 10.20. It couldn't be much easier.

Figure 10.20. The modified table with a single cell in the third row.

Filling the Table

After adding some text and a few images to the table, you should have a good feel for creating and modifying tables. To add text to a cell, simply click the cell and type. The WYSIWYG Editor makes it easy. You can add images to cells by selecting the Insert|Image command and choosing the desired image from a URL or a file. After the text and image are in place, select the entire table and click the Center tool button on the Format toolbar. Depending on the text and image inserted into the cells, you get a table similar to the one shown in Figure 10.21.

Figure 10.21. The Finished table with text and an image in the cells.

The HTML Source for the Table


To appreciate what FrontPage is doing behind the scenes, take a look at Listing 10.3, which gives the source code for the completed page.

Listing 10.3. The HTML source for the table.


<.DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<head>

<title>Untitled Normal Page</title>

<meta name="GENERATOR" content="Microsoft FrontPage 1.1">

</head>

<body>

<div align=center><center>

<table border=1 width=75%>

<caption align=top><font size=5><em><strong>A FrontPage Table

</strong></em></font></caption>

<tr><td width=25%><p align=center><font size=5><strong>

<tt>Putting</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Text</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>In</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Cells</tt></strong></font></p>

</td></tr>

<tr><td width=25%><p align=center><font size=5><strong>

<tt>Is</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>An</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Easy</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Task.</tt></strong></font></p>

</td></tr>

<tr><td colspan=4 width=100%><p align=center>

<img src="fountain.gif" align=bottom width=560 height=225></p>

</td></tr>

<tr><td width=25%><p align=center><font size=5><strong>

<tt>Putting</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Images</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>In</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Cells</tt></strong></font></p>

</td></tr>

<tr><td width=25%><p align=center><font size=5><strong>

<tt>Is</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Also</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Very</tt></strong></font></p>

</td><td width=25%><p align=center><font size=5><strong>

<tt>Easy.</tt></strong></font></p>

</td></tr>

</table>

</center></div>

</body>

</html>

Summary


Overall, FrontPage is an excellent Web site creation, administration, and maintenance package that provides you with all the tools you need for a complete, professional Web site. The combination of the FrontPage Explorer, the FrontPage Editor, the FrontPage Personal Web Server, and the FrontPage Server Administrator all perform quite well and produce great results.

Although the FrontPage WebBots give you some degree of interactivity, many additional interactive elements can be added to further enhance your site once pages are laid out and finished in FrontPage. To this end, the next chapter turns your attention to adding ActiveX controls and scripts to Web pages with the ActiveX Control Pad. In Chapter 14, you'll learn to develop a complete set of pages that utilize many of the tools discussed in this book to create a truly interactive and exciting (if small) Web site.

Previous Page Page Top TOC Next Page