Introduction to Web Design - 15. MicroSoft Frontpage
15.1 Beginning Web Development with FrontPage | 15.2 Creating a New Web | 15.3 Making Your Pages Compatible with Internet Explorer and Netscape | 15.4 Viewing the HTML Code Generated by FrontPage | 15.5 Adding an Image to the Page | 15.6 Adding a Background Image | 15.7 HotSpots, Thumbnails and Other Interesting Stuff | 15.8 Adding a Table to a Page | 15.9 Adding a DHTML Effect upon Opening or Exiting a Page | 15.10 Adding a Hyperlink | 15.11 Changing the Title, Background Color, Link Color, etc. | 15.12 Adding Lists | 15.13 Creating a Form for User Input Using the Form Wizard | 15.14 Managing Your Web Site with FrontPage Views | 15.15 Collaborative Authoring | 15.16 Removing a Page from a Web, Deleting a Web Page or an Entire Web | 15.17 Publishing a Web
  1. Preface
  2. Markup Languages – A Definition and Some History
  3. Beginning HTML
  4. HTML Lists
  5. HTML Tables
  6. HTML - Color, Fonts and Special Characters
  7. HTML Links
  8. HTML Images
  9. HTML Frames
  10. Cascading Style Sheets
  11. MicroSoft PhotoDraw
  12. JavaScript
  13. HTML Forms and Form Handling
  14. VBScript
  15. MicroSoft FrontPage
  16. Active Server Pages
  17. Java Applets
  18. XML Meaning and More
  19. Macromedia Flash 5.0
  20. References
FrontPage is an application that allows you not only create webpages in a WYSIWYG environment, but also assists in the maintenance and administration of websites. It has a good deal of support and guidance for adding functionality to webpages without writing JavaScript or other code directly. Maintenance of websites is also assisted with FrontPage. For example, FrontPage can check your entire web site for hyperlinks that no longer work, so that they can be corrected. Administration of websites includes things such as setting permissions so that others can edit or add to the website.

To facilitate the tasks of writing, maintaining and administering a website, FrontPage offers different views of a “web”.

The Page view is a WYSIWYG (What You See Is What You Get) environment for creating and editing webpages. This is probably where you will spend most of your time and is similar to MSWord in a lot of ways.

The Folders view provides a Windows Explorer view of the folders and files that make up a web.

The Reports view provides the status of different components of a web.

The Navigation view provides a click-and-drag method of organizing the navigational structure of a web.

The Hyperlinks view provides a diagram of the links between the pages of a web as well as links to outside sources.

The Tasks view helps you to keep track of various tasks and indicates which are complete and which are incomplete.

15.1 Beginning Web Development with FrontPage

There are two basic ways of developing a web in FrontPage. The first way is to do “Disk based” development. This method is generally recommended so that the web is not publicly viewable until you have it completed the way you want it. The second way is to develop it directly on the server. The advantage to this method is that you can test the functionality of the pages right away, as they are being developed, rather than waiting for completion and publication of the pages on a server. The basic steps for beginning a web are the same whether you are doing disk-based or server-based development. Only when specifying the location of the new web is there a difference.

15.2 Creating a New Web

  1. In FrontPage, click on File/New. You will be presented with dialog box that asks for the location of the web. If you are doing disk-based development, select the folder in which you want to save the web. If you are doing server-based development, you should specify the URL of the new web (e.g., If the drive or directory you want is not in the drop down list provided, you will have to type in the drive and the directory you want. If the directory you specify does not exist, it will create it for you on the specified drive. You are also presented with a number of templates and wizard choices. For our purposes, we will usually be using the One Page Web, the Empty Web, the Personal Web, or possibly the Corporate Web Presence.

    The One Page Web provides you with one blank webpage called “index.htm”.

    The Empty Web choice simply sets up a number of directories for the web and lets you add the pages as desired.

    If you choose Personal Web, you will be provided with a homepage, a interests page, a photo album page and a favorites page, which all have a very basic theme style.

    Choosing Corporate Web Presence will furnish you several dialog boxes asking what you would like to be included in your web. The types of things available include some standard templates for pages such as “Corporate Mission” and “Products and Services”, information to be provided on each webpage, such as the webmaster’s email address, and asks you to decide on a theme or style. The themes provide pre-designed backgrounds, buttons, navigation bars and more that can give your pages a consistent style.

    For now, just select Empty Web. Then go to File/New/Page and open a Normal Page .

    Right-click on the page, or select File/Properties… . Type in a title for the page. The title will be displayed in the titlebar of the browser whenever the page is viewed by a user. It will also be what appears in the Favorites list of a browser if the user adds the page to Favorites list. Select the Background tab of the Page Properties window. Here, you can indicate a background image to use as well as a background color, text color and hyperlink colors. Please note that the Background tab will only be available if you have not selected one of the “Themes” available with FrontPage. Hyperlink Rollover effects are also available on this tab.

15.3 Making Your Pages Compatible with Internet Explorer and Netscape

  1. If you want your webpages to be compatible with Netscape or other versions of Internet Explorer, do the following when you have the page open in Page View. Choose Tools/Page Options and click the Compatibility tab. In the first pulldown list, select Both IE and Netscape. In the second pulldown list, choose the browser versions.
  2. You can add text to the page in much the same way you would in a word processor. Just begin typing. To create headings or lists, go to the first pulldown list under the toolbar at the top of the screen and choose a heading or list.

15.4 Viewing the HTML Code Generated by FrontPage and Adding Comments

You can view the HTML source code produced by FrontPage at any time, by choosing the HTML tab at the bottom of the Page View Window.

You can add comments to the HTML code in FrontPage without having to remember the codes for HTML comments. While in Page View, choose Insert/Comment. A dialog box will open in which you can type the comment. Your comment will appear in the Page View, but not in a browser. To change the comment later, right-click on the comment and choose the Comment Properties command. Please note, that anyone can see the comment if they choose to view the source of the web page. So, you may want to be careful about what you put in a comment.

15.5 Adding an Image to the Page

  1. Now, add an image to the page by selecting Insert/Picture/ClipArt. If you want, you can use another image that you have by choosing From File instead of ClipArt. To locate the directory or folder for the file, on the insert dialog box that appears, click on the button in the lower right corner that has a magnifying glass over a folder on it. If you are using ClipArt, select a picture and then click on the picture and then click on the Insert Clip icon. The image will appear at your cursor position on the page.
  2. Now, save your page. If you have used an image that is not ClipArt, you will see the Save Embedded Image dialog box. To save a copy of the image you inserted in the current web, select the file name (which will be in the dialog box) and choose Change Folder. A Change Folder dialog box will appear. Double-click on the Images folder to select it and click OK. Then, click on OK in the Save Embedded Image dialog box. You can left-justify, right-justify or center the picture by clicking the appropriate buttons on the toolbar, that do the same for text.
  3. You can position the picture, change the dimensions of the picture and change the way that the text flows around the picture, by right clicking on the picture and choosing Picture Properties. Choose the Appearance tab. Here you can change the dimensions of the picture, add a border, and control the way the text flows around the picture. In the pulldown Layout list at the top of the dialog box, there are a number of choices:
    1. Bottom, Middle or Top will position your cursor, and therefore, any text that follows at one of these positions.
    2. If you want to float an image with text wrapped around it, choose Left or Right from this list.
    3. The other choices are used less often. Texttop will align text with the top of the image, Absmiddle aligns the image with the middle of the current line, Absbottom aligns the image with the bottom of the current line, and Baseline aligns the image with the text baseline of the current line.
  4. You can create some distance between the text and the image by increasing the horizontal and vertical spacing.
  5. Add alternate text for the image using the General tab on the Picture Properties dialog box. In the Alternate Representations box, type the phrase you want to appear to stand in for the graphic and then choose OK.

15.6 Adding a Background Image

Go to the File menu and select Properties. A dialog box will appear. Check the Background Image box. When you click the Browse button, a file directory dialog box will appear. Select the file you want and then select OK.

15.7 HotSpots, Thumbnails and Other Interesting Stuff

  1. FrontPage lets you easily add hotspots to an image. Simply highlight the picture. In the Picture toolbar at the bottom of the page, choose one of the shape buttons. Position your cursor over the picture and it will appear like a crayon. Position the shape where you want it by dragging. A dialog box will appear for you to select the URL to link the hotspot to.

    NOTE: This is very convenient, but it will only work with servers that have FrontPage extensions installed. If you are planning to publish to a server that does not have these extensions installed, the hotspots will not work. You should follow the process described in section 8.5 Image Maps.

  2. Thumbnail images are small images that appear on a page that are linked to the full image. There is a button on the toolbar (with a picture overlapped with a smaller picture) (or use CTRL+t) that makes a smaller copy of the image, puts that image on the page and links it to the original image. Note that this button is not available for clipart pictures.

15.8 Adding a Table to a Page

As mentioned in the section on HTML, tables are useful not only for presenting information and data in an organized fashion, but can also be used to control the layout on a page. Adding a table in FrontPage is done in a fashion similar to the way it is done in MSWord.

  1. Choose Table/Draw Table from the menubar. The cursor will turn into a pencil. Click at the point you want to start the table and drag across the page to the size desired. This represents the outline of your table. A Table Drawing toolbar should appear somewhere on the screen. If it doesn’t, go to the View menu, choose Toolbars and click Table.
  2. To add more cells, click and drag the cursor from table or cell edge to another edge.
  3. To change the size of a cell, position the cursor directly over a cell border until it turns into a double-sided arrow and drag to the position desired.
  4. To remove a border, choose the Eraser icon on the Table Drawing toolbar that should have appeared when you chose to draw the table.
  5. To further adjust the table’s properties, select Table/Properties from the menubar. If the table is being used to control layout, you probably do not want the borders to be showing, so change the border size to zero.

15.9 Adding a DHTML Effect upon Opening or Exiting a Page

Effects similar to those that can be added to PowerPoint slides can be added to web pages with DHTML (Dynamic HTML). Adding such an effect is easy in FrontPage.
  1. To add an opening transition effect, go to Format/PageTransitions. Select the event to which you want to add the transition (e.g., on opening the page, exiting the page, entering the site, etc.). Then select the type of transition desired. Keep in mind that too much activity such as transitions, animations, blinking can be distracting and annoying.

15.10 Adding a Hyperlink

  1. To insert a hyperlink, highlight the text or image for the hyperlink and choose Insert/Hyperlink from the menubar. A dialog box will appear asking for the file or URL that you want to link to.
  2. To insert an internal link (a link to a section of the document you are currently in), you must first name the section. In FrontPage, this is done by choosing Bookmark from the Insert menu. You will be prompted for a name for the bookmark.If you look at the HTML code inserted, you will see that this choice adds an anchor tag with the name attribute, as described in the HTML Links section. You then add the hyperlink as describe above, but include the name of the bookmark in the "optional" section of the Hyperlink dialog box.

15.11 Changing the Title, Background Color, Link Color, etc.

  1. To change the color of the background, the link, visited link and active link colors, go to the File menu and choose Properties. A dialog box will appear. On the General tab, you can change the title of the page.
  2. Choose the Background tab to change the color of the background, or the links. You can also add a simple rollover effect here for the links. For example, you could have the link text change to bold face when the user’s cursor is over it.

15.12 Adding Lists

Adding bulleted (unordered) or numbered (ordered) lists to a web page is easy in FrontPage.
  1. To start a list, position your cursor within the page where you want the list to begin and choose the type of list you want from the Style pulldown list under the File menu. A bullet or number will appear on the page. Simply type in the text you want and hit Enter. The next bullet or number will appear.
  2. To end the list, go to the Style menu and choose Normal.
  3. To use an image instead of a bullet, or to change the bullet or numbering style, position your cursor within the list and select Format/Bullets and Numbering from the menubar. Changing to a different type of bullet or the numbering style is similar to the way it is done in MSWord. Choose the Plain Bullets tab and select the bullet style you want.
  4. To use an image, choose the Picture Bullets tab. If you have an image you want to use, either type the file name in or choose Browse to locate the file. If you want to use ClipArt, choose Browse and click on the ClipArt button at the bottom of the dialog box. ClipArt has a section entitled “Bullets”. Choose one you like and click on it. A pop-up menu will appear. Click on the first icon to insert the bullet type into the list.

15.13 Creating a Form for User Input Using the Form Wizard

The Form Wizard in FrontPage prompts you through the many of the details that need to be correct in order for a form to work properly, and generates code that, for example, can handle the emailing of the form input. However, the major caveat in using FrontPage to set up forms is that the form and code will only work if the server on which the page resides is running the FrontPage extensions.
  1. In FrontPage, select File/New. From the file formats that can be chosen, choose Form Page Wizard. Dialog boxes will appear to lead you through the process.
  2. The first dialog box that appears shows the questions that are on the form so far. The list is blank at this time. Click Add in order to add questions.
  3. Another dialog box appears with a selection list for the type of information you want to collect with the form. Select Contact Information.
  4. A description of what is included with that selection appears in the middle section of the dialog box. You can edit the prompt in the edit pane below the description. Then click Next.
  5. Another dialog box appears with a number of radio buttons and checkboxes so that you can select exactly what information you want on your form. The choice at the bottom that asks for the base name for this group of variables can usually be left as is. The base name becomes the pre-fix for all of the variables in the group. When you have made your choices, click Next. You will see the first dialog box again, but now the question list has one item in it.
  6. Add another question by clicking Add. This time select any of several options. Change the question to “Select any of the following languages and software that you have experience with:”. Click Next.
  7. The next dialog box will ask for a list of the items you want to ask about. Enter the following, with each entry on a separate line. HTML, DHTML, JavaScript, VBScript, ASP, Java, C++, Access Database. Click Next.
  8. The first dialog box appears again. Click Finish.
  9. The form will be displayed. Right-click on the form. From the pop-up menu that appears, select Page Properties. Change the title to “Application” in the dialog box that appears. Right-click on the form again. From the pop-up menu that appears, select Form Properties. We want to email the results, so fill in an email address in the second box. Then click on the Options button at the bottom of the dialog box.
  10. In the dialog box that appears, choose the Email Results tab so that we can check how the results will be sent. On the Email Results page, fill in “web application” on the subject line. Complete this box by clicking OK. Then click OK on the Form Properties dialog box.
  11. On the form itself, change the header at the top to “Application”. Below that, delete the line of text put there by FrontPage and add a line saying that the user can apply for the position online by filling out and submitting this form.
  12. Let’s change the label on the Submit Form button. Click on the button so that it is highlighted. Right-click for a pop-up menu. Select Form Field Properties from the menu. Change the label to “Submit application”. Follow the same procedure to change the label on the “reset form” button to “Clear Application”.
  13. Save the form as an HTML file. Make sure that the file is saved in its own directory on the Windows Server under your account.
  14. Because of the security permissions on our server, we need to change the security permissions on that folder ourselves. Go to My Computer on your desktop. Go to your W: drive and to the folder in which you saved your form file. Right-click on the background of the drive, not on the file. From the pop-up menu that appears, select Properties. On the dialog box that appears, choose the Security tab. In the list box, select Internet Guest Account (CISDEPT/IUSR_…). In the bottom pane, check the box under “Allow” and next to “Write”. This gives the form permission to write to this directory.

15.14 Managing Your Web Site with FrontPage Views

Many websites contain hundreds or even thousands of pages. In order to manage a web, FrontPage provides a number of useful utilities and views of the structure of your web. We have already used two views, the Folder view and the Page View. Now let’s examine some others.
15.14.1 Tasks
Even small websites have a number of tasks that need to be accomplished. FrontPage has a facility that lets you keep track of tasks that need to be done. Depending upon what type of web you choose when first creating a web, FrontPage may or may not have added tasks to the Tasks View. Let’s assume it hasn’t added any and go through the process of adding and editing tasks.
  1. To add a task that is associated with a specific page, in Page view, go to the Edit menu and choose Task (it is at the very bottom of the Edit menu). A dialog box will appear.
  2. Fill in a name for the task, such as “Add email address of webmaster”. You can assign a priority from “Low” to “High” and provide a longer description if needed. And then click on OK.
  3. Adding tasks can also be done from other views, like the Folder View or the Navigation view using a similar process. Simply highlight the file you want to associate with the task and right-click it. Then choose Add Task and continue as in the step above.
  4. You can also add a task that is not associated with any file by starting in Task View and proceeding as in step 1. Or just right click in the Task View pane and a pop-up menu will appear with Add Task as one of the choices.
  5. To edit a task, highlight the task in Task View and right-click on it. A pop-up menu will appear. If the task is associated with a particular file, you can choose Start Task and that file will be opened in Page View. You can mark a task as completed or delete a task from the same pop-up menu.
15.14.2 Reports View
Reports view displays a number of useful bits of information regarding your web. There are a number of different reports that can be obtained from this view, but the most commonly used one is the site summary which reports the number of files in the web, the number of images, the number of linked files, the number of unlinked files, the number of links and more. To obtain more specific information, while in the Reports view, go to the View menu, click on Reports and choose an item from the submenu.
15.14.3 Navigation View
The Navigation View allows you to create a hierarchical view of your website. If you are using FrontPage Navigation Bars, the Navigation Bars on your pages will display the changes that you perform in Navigation View. Otherwise, you can add to the structure yourself.

When you first create a web, you are provided with a home page at the very least. If you are doing disk-based development, the file will be named “index.htm”. If you are doing web-based development, it will be called “default.htm”. If you chose “One Page Web” or “Empty Web” when first starting your web, the home page will be the only one that appears in Navigation View and you will have to add the structure yourself.
  1. To add a page underneath another page, simply click on the file in the Folder View and drag it to the page you want it to be under.
  2. You can change the structure by dragging a file from one page to another.
  3. You can also change the titles of the pages in Navigation View. To do this, click on the page, pause and then click on it again. You will be able to type directly in the page with the Navigation view. Alternatively, you can right-click on the page and choose Properties from the pop-up menu that appears.
  4. Once you have the structure of the web site developed in Navigation View, you can add Navigation Bars in page view. Open the home page for your web in Page View. Right-click on the page and choose Shared Borders and Apply to All pages in the dialog box that appears. Next, add a Navigation Bar to each page by positioning your cursor at the top of a page and choosing Insert/Navigation Bar. A dialog box will appear that depicts a generic hierarchical structure. Choose the type of navigation that best suits what you want. The pages that will be linked will be highlighted in the hierarchical structure on the box. For the home page, choose Child Level and then click OK. The Navigation Bar will contain links to the child pages you designated in Navigation View. For the lower level pages, after inserting the navigation bar, you may want to choose Parent level which will add a link back to the home page.
15.14.4 Hyperlinks View
Hyperlink View provides all of the links into and out of any one page in the web. In Hyperlink View, simply click on a file from the Folder View. The links on this webpage are indicated by arrows going out of the file. Links to that page are indicated by arrows going into the page.
15.14.5 Other Management Tools Available
Other tools that are available in FrontPage include Global Spell Checking (available on the Tools menu), Global Find and Replace (available from the Edit menu), Verify Hyperlinks (available in Reports View as an icon on the Reports Toolbar) and Recalculate Hyperlinks (available on the Tools menu).
15.14.6 Administrative Tools
There are a number of more sophisticated tools available in FrontPage, if you have administrator rights on your server.

For example, in a large organization, you might have a number of users who are permitted to change the web pages for their own departments, but you wouldn’t want them to be able to edit pages of another department. Permissions can be set in FrontPage so that users can access only certain pages. You can even restrict the viewing of certain pages by anyone except certain users. This is done using the Security choice available under the Tools menu.

The permissions that are available in FrontPage are “browse”, “author” and “administer”. People with “administer” permissions can do anything on any page of the web or subweb. People with “administer” permission can browse, author, delete pages, add pages, to the webs or subwebs they have access to. “Author” permissions allow people to add or edit pages of a web in addition to viewing the pages. But they cannot add or delete webs. “Browse” permission is the lowest level and allows a user to view the pages only.

15.15 Collaborative Authoring

Collaborative Authoring is a tool that helps a group of people keep files current. For example, if more than one person has authoring rights to a web page, imagine what could happen if both open it to change it. Let’s say the first person wants to change his email address listed on the page, and the other person wants to update their picture with a newer more current one. Both person open the file. The first person changes his email address and saves the file. The second person changes the image to her new photo and saves the file. The second person has just overwritten the change the first person made to his email address. FrontPage includes a means of checking out and checking in files from webs. Using this option, when the first person opens the file to change it, it is “locked” and the second person can’t open it until the first person releases the lock.

15.16 Removing a Page from a Web, Deleting a Web Page or an Entire Web

Because FrontPage keeps track of information about the links in the web and other properties of the pages, it is important to keep the information consistent. Therefore, if you want to remove a page from a web, you should do so from within FrontPage. You should not simply delete the page using Windows Explorer.
  1. To delete a webpage from a web, simply go to the folder view, select the file you want to delete and hit the Delete key.
  2. To delete an entire web, in the folder view, highlight the top folder for the web and hit Delete Key. A dialog box will be displayed, asking if you want to delete the FrontPage attributes of this web or if you want to delete the entire web. Choosing to delete the entire web is a permanent action and cannot be reversed. But, doing this will remove all of the related files that are created for you by FrontPage. Choosing to delete the FrontPage attributes converts the web into a set of ordinary files and folders. You may want to do this if you are going to move a web that was developed on disk and move it to a non-MicroSoft server. Some aspects of FrontPage that you may have included, like image maps, will be deleted if this is chosen.
  3. To remove a page from a web, without totally deleting it, right-click on the file in the Folder view. A pop-up menu will appear. Choose Cut from the menu.

15.17 Publishing a Web

If you have been developing your web on a local disk rather than a server, when you are ready to put the pages online, you can “publish” the web. There are several ways to do this, and they depend on the type of access that you have to a server, and the type of server.

  1. Select File/Publish Web from the menubar.
  2. A dialog box will appear. In the location box at the top of the dialog box, you will enter the address of the server and any subdirectories needed. If your server uses the FrontPage extensions, you can publish your web site using HTTP. If it does not, you should use FTP, so delete the “http:” from the location box and type in “ftp:”. Follow the protocol with the address of the server and any subdirectories. E.g., “”.


  1. Plotkin, David (2001) How to do everything with FrontPage 2002. New York:Osborne/McGraw-Hill.
  2. Randall, N. and Jones, D. (1999) Using Microsoft FrontPage 2000: Special Edition. Indianapolis, IN: QUE.

Cynthia J. Martincic
CIS Department
Saint Vincent College
Latrobe, PA 15650