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.
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.
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 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.
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.
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.")
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 provides commands that you use to manage entire Web sites. Table 10.1 describes the available commands.
The Edit menu provides commands to edit Web files, pages, images, documents, tasks, and properties. Table 10.2 describes the available commands.
The View menu provides commands to control user-interface elements like toolbars. Table 10.3 describes the available commands.
The Tools menu provides commands to configure settings for various web elements. Table 10.4 describes the available commands.
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 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.
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.
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 provides commands that enable you to work with files and to set page properties and print options. Table 10.5 describes the available commands.
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 provides the standard Edit menu commands typical of a word processor, plus the specialized commands described in Table 10.6.
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 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.
Figure 10.4. Special characters available for insertion with the Insert|Special Characters 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 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 provides commands to create and edit HTML tables, and Table 10.8 describes the available menu commands.
Figure 10.6. The Insert Table dialog box.
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 ("):
document.write ("Howdy.")
That gives you this unusable code:
document.write ("Howdy.")
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.
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 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.)
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.
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).
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.
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 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.
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.
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.
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.
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>
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.