Windows NT Internet and Intranet Development

To learn more about author Sanjaya Hettihewa, please visit the author's homepage.

Previous chapterNext chapterContents


- 7 -

Developing Web Pages with Microsoft FrontPage


FrontPage is a powerful Web-site development tool. Not only can you use it to edit Web pages, you can also use it to manage your Web site. The next few sections demonstrate how FrontPage can develop and manage the contents of a Web site. More information about FrontPage can be obtained from the Microsoft FrontPage Web site.


URL:The Microsoft FrontPage Web site can be found at

http://www.microsoft.com/frontpage/default.htm

Installing FrontPage

Install FrontPage by inserting the FrontPage distribution CD-ROM into your CD-ROM drive. If you do not have the FrontPage distribution CD-ROM, you can download the program from Microsoft's Web site. However, the version of FrontPage available at Microsoft's Web site is set to expire after a certain time period. Before you install FrontPage, I recommend that you install Microsoft Internet Explorer and Microsoft Internet Information Server. If you are using Windows NT Workstation, install the Windows NT Workstation Peer Web Server. When the FrontPage installation program is executed, it displays a dialog box similar to the one shown in Figure 7.1. Certain FrontPage components can be installed using this dialog box. Click the FrontPage 97 Installation button to install FrontPage 97.

Figure 7.1. The Microsoft FrontPage 97 with Bonus Pack installation dialog box.

The FrontPage installation program requires you to temporarily stop Internet Information Server (IIS) to ensure that the FrontPage server extensions are properly installed. FrontPage server extensions are used by FrontPage to manage the contents of a Web site. If IIS is running on your computer, you will see the dialog box shown in Figure 7.2. Click the Yes button to stop IIS and continue to install FrontPage 97.

Figure 7.2. IIS must be temporarily stopped.

As advised in the dialog box shown in Figure 7.3, exit all Windows applications before continuing the installation of FrontPage 97. FrontPage 97 might not function properly if the FrontPage Setup application is unable to copy over certain shared .dll files. If you receive error messages while installing FrontPage and you are unable to use FrontPage after it is installed, temporarily remove all applications from the Windows NT Startup folder, reboot Windows NT, and reinstall FrontPage 97.

Figure 7.3. Exit all Windows applications before installing FrontPage 97.

Use the dialog box shown in Figure 7.4 to enter registration information. The information you provide is registered in the FrontPage 97 About dialog box. Type your name and company, and click the Next button to proceed to the dialog box shown in Figure 7.5.

Figure 7.4. Provide FrontPage 97 registration information.

Use the dialog box shown in Figure 7.5 to specify the directory in which FrontPage should be installed. If you have installed a previous version of FrontPage, FrontPage 97 must be installed in the same directory. To install FrontPage 97 in a different directory, you must first uninstall the previous version of FrontPage.

Figure 7.5. Provide the destination path of FrontPage 97.

Use the dialog box shown in Figure 7.6 to select the type of setup you prefer. Custom setup gives you more control over the FrontPage 97 installation. For the purpose of this exercise, Custom is selected.

Figure 7.6. Custom setup gives you more control over the FrontPage 97 installation.

Use the dialog box shown in Figure 7.7 to select FrontPage 97 components. Make sure the Client Software component (which consists of the FrontPage Explorer and Editor) is checked; if this component is not selected, you will not be able to use the FrontPage Explorer or Editor. I do not recommend that you select to install the Personal Web Server component on a computer running Windows NT. IIS (included with Windows NT Server) and the Windows NT Peer Web Server (included with Windows NT Workstation) are far more powerful and scalable than the Personal Web Server included with FrontPage 97. Select to install the FrontPage Personal Web Server component if you are installing FrontPage on a computer running Windows 95.

Figure 7.7. Select FrontPage 97 components.

The dialog box shown in Figure 7.8 lists the Web servers installed on your computer. Select the Web servers on which you want to install FrontPage 97 server extensions. You won't be able to use the powerful features of FrontPage Explorer if FrontPage server extensions are not installed. FrontPage server extensions are compatible with IIS, WebSite Server, Netscape Server (Enterprise, Commerce, Communications, and so on), and Web servers that run on certain flavors of the UNIX operating system. Visit the FrontPage Web site for the most up-to-date list of Web servers supported by FrontPage server extensions.

Figure 7.8. Select the Web servers on which you want to install FrontPage 97 server extensions.

The FrontPage Setup application is now ready to copy files and install FrontPage 97 on your system. The dialog box shown in Figure 7.9 displays the installation settings you have selected. Use the Back button to make changes to the installation settings. Click the Next button to begin the installation process.

When all files are copied, the installation program displays the dialog box shown in Figure 7.10. FrontPage is now installed on your system. At this point, you can start the FrontPage Explorer by enabling the check box shown in Figure 7.10.

Figure 7.9. Use the Back button to review installation settings.

Figure 7.10. The Setup Complete dialog.

FrontPage consists of several separate programs. Depending on which components you select to install, the FrontPage installation program installs various FrontPage applications and inserts them into a Start Menu folder (as shown in Figure 7.11).

Figure 7.11. FrontPage 97 application icons.

Before you proceed, make sure the World Wide Web Publishing Service of IIS is running (if you are using IIS). You can invoke the Internet Service Manager by selecting Start | Programs | Microsoft Internet Server | Internet Service Manager from the Windows NT Start menu. If the WWW Publishing Service is stopped, as it is in Figure 7.12, select the WWW Publishing Service, and select Properties | Start Service from the menu bar. Proceed to the section of this chapter called "FrontPage Explorer" if you do not want to install server extensions for any additional Web servers.

Figure 7.12. Make sure the WWW Publishing Service is running.


FrontPage Server Administrator

The FrontPage Server Administrator is used to manage server extensions installed on Web servers managed using FrontPage Explorer. The Server Administrator can also make sure Web server extensions are installed properly, and can enable and disable authoring on a server. The next few sections discuss how the FrontPage Server Administrator can manage and administer FrontPage server extensions.

When it is invoked, the FrontPage Server Administrator dialog box lists Web servers that can be authored with FrontPage (as shown in Figure 7.13). Select to install the FrontPage server extensions for IIS if they are not already installed. You can then use FrontPage Explorer to manage information published using IIS. As shown in the section titled "FrontPage Explorer," it is easy to manage and author the contents of a Web site using FrontPage Explorer.

Figure 7.13. The FrontPage Server Administrator.

Installing Server Extensions

It is easy to install server extensions for additional Web servers, as long as they are supported by FrontPage. Click the Install button in the dialog box shown in Figure 7.13 to install server extensions for an existing Web server. You are presented with a dialog box similar to the one shown in Figure 7.14. Use this dialog box to select the type of Web server and click OK to continue. For the purpose of this exercise, FrontPage server extensions are installed on a WebSite Web server that is configured to run on port 2000. When using more than one Web server on different TCP/IP ports, always use a port number above 1024 for the secondary Web server to avoid conflicts with other Internet services.

Figure 7.14. The Configure Server Type dialog.

FrontPage then gathers information about your Web server and displays a confirmation dialog box similar to the one shown in Figure 7.15. Simply click OK to continue, and FrontPage installs server extensions for the Web server you selected. If you are installing FrontPage server extensions on a WebSite Web server and have it configured for multiple domain names, enter multiple domain name information when prompted. Otherwise, leave the dialog box asking for multiple domain name information blank and click OK to continue.

Figure 7.15. The Confirmation Dialog box.

The dialog box shown in Figure 7.16 obtains the user name and password to be used to administer FrontPage webs. Specify a user name and password, and click OK.

Figure 7.16. Specify the user name and password to be used to administer FrontPage webs.

After server extensions are installed for the new Web server, its port is added to the FrontPage Server Administrator dialog box (as shown in Figure 7.17). Server extensions and authoring settings of each server can then be configured by selecting the server port you want to administer and following the directions given in the next section.

Figure 7.17. The FrontPage Server Administrator dialog box after server extensions for an additional Web server are installed.


Managing Server Extensions

Click the Upgrade button of the dialog box shown in Figures 7.13 and 7.17 to up-grade server extensions of a Web server to the server extensions of the current version of FrontPage. This feature is particularly useful after you upgrade to a newer version of FrontPage. When the Install button is clicked, the dialog box shown in Figure 7.18 asks for confirmation to upgrade the server extensions of the selected Web server.

Figure 7.18. The server extensions upgrade dialog box.

Use the Uninstall button to uninstall server extensions from a Web server. When the Uninstall button is clicked, the dialog box shown in Figure 7.19 asks for con-firmation before uninstalling server extensions from the selected Web server. This action does not delete the contents of a Web site; only FrontPage server extensions are removed. Uninstall FrontPage server extensions from a Web server if you no longer want to use FrontPage Explorer to manage that Web server.

Figure 7.19. The server extensions uninstall dialog.

The Check button of the FrontPage Server Administrator dialog box shown in Figure 7.13 verifies whether server extensions for a Web server have been installed properly. If a dialog identical to the one shown in Figure 7.20 is not displayed when the Check button is clicked, the server extensions have not been installed properly. In that case, you must reinstall FrontPage server extensions using the Install button.

Figure 7.20. The Check button of the FrontPage Server Administrator checks the status of server extensions installed on a Web server.

The Authoring button of the FrontPage Server Administrator dialog box in Figure 7.13 can control whether a Web server's content can be authored using FrontPage. When the Authoring button is clicked, a dialog box similar to the one shown in Figure 7.21 confirms that you want to change authoring settings on the selected Web server. If Secure Sockets Layer (SSL) is configured on your Web server, select the SSL check box.

Figure 7.21. The Enable/Disable Authoring dialog box.

The Security button is used to administer various security settings of FrontPage server extensions. It assigns a password to a web of documents managed by FrontPage, and limits which computers can manage a Web site using FrontPage server extensions.

When the Security button is clicked, a dialog box similar to the one shown in Figure 7.22 is displayed. This dialog box specifies a user name and a password that can be used to author a Web site managed with FrontPage.

Figure 7.22. A user name and password can be used to make sure unauthorized persons do not make changes to your Web site using FrontPage.

The Advanced button in the dialog box shown in Figure 7.22 specifies which computers can use FrontPage to manage the contents of a Web site. If your Web site is managed only by computers in your own domain, change the default setting to match your domain name's IP address. Note that this dialog box accepts numeric Internet IP addresses. Your IP address can be found by executing the FrontPage TCP_IP Test icon. This icon is found in the FrontPage Start Menu folder, shown in Figure 7.11. When this icon is executed, it displays your IP address (as shown in Figure 7.23).

Figure 7.23. The FrontPage TCP/IP Test application finds the IP address of your computer.

To make sure no other computers can make modifications to your Web site using FrontPage, enter your IP address in the dialog box shown in Figure 7.24. Note that even if you do not specify an IP address, FrontPage still requests a user name and a password before users are allowed to make changes to your Web site. You must specify your IP address as a numeric IP address that has four numbers (1-256) separated by periods. A wildcard character (*) can be used instead of a digit. For example, 128.*.*.* allows all computers whose IP addresses begin with 128 to administer a FrontPage web.

Figure 7.24. The Internet address restriction dialog box.

FrontPage Explorer

FrontPage Explorer is a powerful utility that can be used to view your Web site from a different perspective. Although it is possible to view the content of a Web site using File Manager or Windows NT Explorer, these applications were not designed for that purpose. For example, when you look at your document root directory using a utility such as Windows NT Explorer, you most likely see several directories and files. However, you cannot glean information about those directories and files, such as what they are, what is in them, or whether they have any URLs that point to your Web site or other Web sites. Most importantly, there is no way to find out whether hyperlinks at your Web site actually work without checking them individually.

FrontPage Explorer solves all these problems by enabling Web-site developers to look at Web sites they create from a new perspective. This section demonstrates how FrontPage Explorer can be used to effortlessly manage the contents of a Web site. When it is invoked, FrontPage Explorer displays the dialog box shown in Figure 7.25, which is used to open your FrontPage Web.

Figure 7.25. Open your FrontPage web.

FrontPage Explorer then extracts information about the web selected in Figure 7.25 and displays the information graphically (as shown in Figure 7.26). The left pane lists Web pages, and the right pane graphically displays URLs that are connected to the Web page selected in the left pane. If you want to edit a Web page shown in Link View, simply double-click it. You can then edit it using FrontPage Editor. Note the plus and minus buttons that appear in the upper-left corner of some Web pages. If a Web page has a plus sign in its upper-left corner, that document contains URLs that link to other Web pages. If you click the plus sign, it changes into a minus sign, and you can see all the URLs in that page (as shown in Figure 7.26).

Although the graphical view shown in Figure 7.26 is useful for viewing how Web pages in a Web site are connected to each other, it does not give much information about the files at a Web site. More detailed information about a Web site can be obtained by selecting View | Folder View from the FrontPage Explorer menu bar. As you can see in Figure 7.27, Folder View is ideal for obtaining detailed information about a Web site. Columns of data in Folder View can be sorted by clicking the description label at the top of each column. This feature is powerful. For example, certain Web pages at your Web site might use graphic files that are too large to be transferred over a slow modem link during a reasonable period of time. Such graphics files can be easily singled out by clicking the Size column and sorting files based on their file size.

Figure 7.26. FrontPage Explorer can be used to graphically view the contents of a Web site.

Figure 7.27. Folder View can obtain detailed information about files at a Web site.

As you can see in Figures 7.26 and 7.27, FrontPage Explorer is a powerful tool that can graphically manage the contents of a Web site. FrontPage Explorer can exploit capabilities of FrontPage because it is integrated with components of FrontPage, such as the To Do List and the program that verifies URLs of Web pages.

The FrontPage To Do List

The FrontPage To Do List keeps track of tasks that must be performed, as shown in Figure 7.28. Because it is integrated with other components of FrontPage, such as the program that checks for broken links, the FrontPage To Do List is ideal for keeping track of tasks that must be performed to maintain a Web site. Invoke the FrontPage To Do List by selecting Tools | Show To Do List from the main menu. The Linked To column displays the name of the Web page to which a task in the FrontPage To Do List is linked. For example, if you detect a broken URL using FrontPage Explorer, you can add the Web page with the broken URL to the FrontPage To Do List. The title of the broken URL is displayed in the FrontPage To Do List Linked To column.

Figure 7.28. The FrontPage To Do List.

Add new tasks to the To Do List by clicking the Add button. When the Add button is clicked, a dialog box similar to the one shown in Figure 7.29 is displayed to gather information about the task being added to the To Do List. Type the name and description of the task, along with its level of priority.

Figure 7.29. Adding a task to the FrontPage To Do List.

Verifying Links

At some point, the Web pages you set up are going to have broken URLs for objects that no longer exist. It is important that you check your Web site periodically for broken links. An application that verifies links is included with FrontPage. This utility is invoked by selecting Tools | Verify Hyperlinks from the main menu. Click the Verify button to locate broken URLs at your Web site. As you can see in Figure 7.30, the Verify Hyperlinks utility locates invalid URLs of a Web site, as well as Web pages that contain them.

Figure 7.30. FrontPage can be used to verify URLs of a Web page.

You can add a broken link to the To Do List so you can take care of it another time. Invalid URLs can be added to the To Do List by clicking the Add Task button seen in Figure 7.30. Or, you can immediately correct broken links by clicking the Edit Link button and correcting the URL (as shown in Figure 7.31). Also, the Edit Page button seen in Figure 7.30 can edit the Web page containing the broken URL.

Figure 7.31. FrontPage can be used to edit broken URLs of a Web page.


FrontPage Editor

The FrontPage Editor is a powerful WYSIWYG HTML editor that can create Web pages with tables, frames, ActiveX controls, and client-side Web applications (using VBScript and JavaScript). The purpose of this section is not to comprehensively cover all aspects of the FrontPage Editor. However, a few key features of it are discussed to provide you with an overview of its capabilities.

If you have Microsoft Office installed on your system, you will be happy to know that FrontPage is integrated with Microsoft Office. When developing content for your Web site, use Microsoft Office to convert existing Office documents to HTML.

Designing Web Pages Using the FrontPage Editor

The FrontPage Editor is a powerful HTML editor that can create and edit Web pages. Although it is possible to invoke the FrontPage Editor as a standalone application or through the FrontPage Explorer, it is recommended that you first open an existing web and then open the FrontPage Explorer. This enables you to use features of FrontPage Explorer to create and edit Web pages. FrontPage Explorer can be used to view Web pages at a Web site in a more natural manner, and you can edit Web pages by simply double-clicking them. The next few sections will help you get started with FrontPage. Before you proceed, invoke FrontPage Explorer, select a web, and select Tools | Show FrontPage Editor from the main menu. Doing this enables you to save Web documents edited with FrontPage into an existing web.

Document Attributes

Certain document-formatting attributes of a Web page can be defined using the FrontPage Editor. For example, when creating a new document, you might want to assign colors to elements of the Web page. This can be done by selecting File | Page Properties from the FrontPage Editor menu bar. You are then presented with the tabbed dialog box shown in Figure 7.32. Use this dialog box to assign a title to the Web page and customize its appearance.

Figure 7.32. The Page Properties dialog box.

Text in a Web page can be formatted by selecting the text using the mouse and selecting Format | Font from the FrontPage Editor menu bar. By using the dialog box shown in Figure 7.33, you can then format the text you selected. Use the Color pull-down list to change the color of the selected text. This feature is handy for emphasizing a paragraph or heading. After you select text-formatting options, click OK to format the selected text.

Figure 7.33. The Font dialog box.


Frames

When used properly, frames make a Web site easier and more interesting to navigate. It's easy to create a multiframe Web page with FrontPage. To create a Web page with frames, select File | New from the main menu. You are then presented with the dialog box shown in Figure 7.34. Use the scroll-down list in this dialog box to select the Frames wizard, as shown in Figure 7.34, and click OK to continue.

Figure 7.34. Use the Frames wizard to create a Web page with frames.

Use the next dialog box, shown in Figure 7.35, to create a multiframe Web page using a custom grid or frames template. Generally, you should select to create a multiframe Web page using a custom grid if you are familiar with frames and have an unusual frameset in mind. If not, select to create a Web page using a frames template. After selecting the Pick a template radio button, click the Next button.

You then see a dialog box similar to the one shown in Figure 7.36. Use this dialog box to select the layout of the frames on your Web page. Select a layout you like and click OK to continue. When selecting the layout of frames, be considerate toward users browsing your Web site with 640*480 resolution monitors. After you create a frame set, resize your Web-browser window to 640*480 pixels and check the frame- set to make sure everything is legible.

Figure 7.35. The Frames Wizard-Choose Technique dialog box.

Figure 7.36. The Frames Wizard-Pick Template Layout dialog box.

Be aware that some Web browsers do not support frames. Although the percentage of users utilizing technologically challenged Web browsers is on the wane, you should make sure a user viewing your Web site with an older browser can still view your site's contents. Specify an alternate Web page to be shown to users whose browsers do not support frames using the dialog box shown in Figure 7.37.

Figure 7.37. The alternate content page URL for Web browsers that do not support frames.

FrontPage asks you for the title of your multiframe Web page and its filename, as shown in Figure 7.38. Fill in the information requested and click the Finish button to continue. FrontPage then creates your multiframe Web page.

Figure 7.38. The Frames Wizard-Save Page dialog box.

If you return to FrontPage Explorer, you will see the multiframe Web page that was just created (as shown in Figure 7.39). Note how it is broken into three separate Web pages. Each holds the contents of a frame. A frame can be edited by double clicking the corresponding file in the Link View pane of FrontPage Explorer.

Figure 7.39. The multiframe document viewed with FrontPage Explorer. Edit frames by double- clicking them.


Tables

Use the Table menu option to add tables to a Web page. Select Table | Insert Table to insert a table into a Web page. You then see a dialog box similar to the one shown in Figure 7.40. Use this dialog box to specify, among other attributes, the number of columns and rows in the table.

Figure 7.40. The Insert Table dialog box.

After a table is created, text and images can be inserted into cells the same way text and images are inserted into a regular Web page. Images can be inserted by selecting Insert | Image from the main menu.

By default, a two-column table has equal width. This can be changed by placing the mouse pointer on a column and clicking the right mouse button. You then see a pop-up menu. Select Cell Properties to change the width of the selected column.

FrontPage Scripts

FrontPage scripts effortlessly add CGI programs to a Web site. For example, if you want to set up a guest book at your Web site, you can do so in just a few minutes using FrontPage. Setting up a guest book is as simple as selecting File | New from the main menu and selecting the Guest Book option (as shown in Figure 7.41).

Figure 7.41. Selecting the Guest Book template.

The Guest Book template is then loaded into the FrontPage Editor (as shown in Figure 7.42). Edit the guest book, change the font, and add a few images, then select File | Save from the main menu to save the guest book Web page.

Figure 7.42. Editing the guest book Web page.


Creating Web Pages Using Templates

Web pages can also be created using predefined document templates. To create a document using a predefined template, select File | New from the main menu and select a template that best resembles the page you want to create. Experiment with FrontPage templates and become more familiar with using them. You can save time by using templates to create routine Web pages.

Summary

FrontPage is a powerful, easy-to-use Web-page development application. Unlike other Web-page development applications, FrontPage can edit Web pages, as well as manage the contents of a site. Web-site management capabilities of FrontPage are used to detect broken links in Web pages and to examine how Web pages are interconnected. FrontPage 97 allows you to create interactive Web pages without writing CGI programs or worrying about HTML.


Previous chapterNext chapterContents


© Copyright, Macmillan Computer Publishing. All rights reserved.