BEGINNING TO USE FRONTPAGE 2003
TO EDIT WEB PAGES

Dr. Richard L. Bowman, Director
Academic Computing, Bridgewater College, Bridgewater, VA, USA 22812

I. Introduction

Want to create or edit a web page? There are several ways this can be done.

• Write "raw" HTML code.
• Use a word processor such as Microsoft Word.
• Utilize a WYSIWYG ("what you see is what you get") HTML editor such as FrontPage.

This tutorial is designed to enable you to learn how to use FrontPage 2003 to edit your web pages. FrontPage 2003 is very similar in action to a word processor with its easy use of the "cut and paste" technique, while being designed from the ground up to be a web editor.

Regardless of the method used for authoring web pages, the most important suggestion is to begin by doing. Simply write your first page and take it from there.

Web pages are always a "work in progress." Web pages need to be updated and revised regularly.

II. Start FrontPage 2003

1. Begin by clicking on the Windows "Start" button, selecting "Programs" and locating the link to FrontPage 2003. (Often it will be in a Microsoft Office folder, or it may be in a Multimedia folder.) Once FrontPage 2003 is running, a blank web page will appear ready for composing.

2. IMPORTANT: Set the options appropriately for generic web authoring. FrontPage 2003 has a number of default settings that add a number of different functionalities to web pages that are not compatible with all of the major browsers. The first step is to change these. From the "Tools" menu, select "Page Options." Click on the "Authoring" tab. Then set the "FrontPage and SharePoint technologies" to None (or it can be customized as shown below). Also in the "Browsers" section set it to "Custom" if that is not the option showing. Make certain that the only options selected in this section are "JavaScript," "Java applets," "CSS 1.0" and "CSS 2.0." These last two options allow for automatic generation of cascading style sheets, which in today's web world is mostly OK. The Internet Explorer 6.0 and Firefox 1.0 browsers both express cascading style sheets in similar fashions. However, be aware that some older browsers do not support this capability and not all of the newer browsers implement style sheets in the same way. So for the most certain compatibility with most browsers, do not leave "CSS 1.0" or "CSS 2.0" checked. Your "Page Options/Authoring" dialog box should now look like that shown here.

Also, from the "Tools" menu, select "Options" (not "Page Options" as done above). Then click on the "General" tab, if it is not already showing. Click the checkboxes as necessary to mark the options as shown below.

3. To create a webpage from scratch, begin by typing directly into this clean web page window, as seen below. To make more room for my work, I always close the "Getting Started" task pane to the righ-hand side of the working pane. To get the task pane back at anytime simply select "Task Pane" from the View menu.

To create a new web page while editing another page, simply click on the "Create a new normal page" button on the toolbar.

Caution 1: More options for creating new web sites can be found by clicking on the "File" menu and then selecting "New." A list of possible types of new web pages or even full sites will pop up. However, be very careful about using these design options. These options generate their own structure to a web site and may add features that are not what you may wish. So beginners (or even advanced web authors) would be well warned to stay away from using these options.

Caution 2: In addition to using the included templates and wizards with great caution, do not use the included themes for your web site. In many cases these make web sites with less than optimal readability and ease of editing due to the color and graphics choices and the overhead of HTML code that must be included to set the theme.

4. To edit a web page that already exists on your hard drive or your institution's web server, locate the file and double-click on it to display it in Internet Explorer. From the toolbar of Internet Explorer press the arrow beside the "Edit" button and select "Edit with Microsoft Office Front Page." If no "Edit" button exists or FrontPage is not available as an editor, one may first run FrontPage 2003 and then open the web page file from the "File" menu.

5. If FrontPage needs to be added to Internet Explorer as a web page editor and FrontPage is running on that computer, then check out the procedures below.

• Open FrontPage and from the Tools menu select Options. In the open dialog box, select the "Configure Editors" tab, and in the Extensions pane scroll to the htm and html line and click on it. If FrontPage is not listed in the associated Editors pane, then click the "New Editor" button above that pane and select FrontPage.
• To make FrontPage the default editor in Internet Explorer, run IE and from the "Tools..." menu select "Internet Options." Click on the Programs tab and then make certain that FrontPage is indicated as the HTML editor.
• If all else fails, contact your IT guru (at Bridgewater the IT Center's Help Desk).

III. Construct a Simple Web Page

Begin with a blank page in FrontPage 2003, and follow the tutorial below. (Note: When a button is referred to, it is usually a button on one of the toolbars at the top of FrontPage 2003. To view the label of any button on a toolbar, simply move the mouse pointer over that button and pause until a textbox appears with the action of that button.)

1. Before you begin, read this "word" about fonts. Every font that is used on a web page must be resident on the computer that the person viewing the web page is using. If a font is not there then the browser chooses the closest font in a list of available fonts and NOT the font that matches the font style the best! There are only two font families that are supported by essentially all computers: Times New Roman and Arial. These are the Windows names for these fonts, but Macs and Linux computers also have equivalent font styles.

If you feel you really must use a special font in a title or such special text, then use a paint program to make a graphic with the text in the special font and imbed the graphic in your web page.

2. Place a Headline at the Top of the Page.

With the cursor at the top of the page, press the button to center text. Change the Text Style box to Heading 1. Then type the heading you wish to give your web page. (If you do not have another project in mind, begin by entering your name as if you were working on a personal web page.) When you are finished entering the heading, simply press Enter and notice that the Text Style returns to Normal, but that the next line is still centered. Press the "Align Left" button to get the new line completely back to normal.

3. Use a Table to Facilitate Formatting.

Press the Insert Table button and then drag through two cells in the top row and release the mouse. A default empty table will appear below your main heading. Then from the Table menu choose Select Table and press the Center text button.

4. Enter some text.

If the cursor is not in the left most cell of the table, click once there. Begin typing some information in paragraph format. Include at least enough to make two paragraphs. Note that pressing the Enter key at the end of a paragraph produces a half space between paragraphs. So as not to place an extra blank line at the end of the last paragraph, DO NOT press Enter at the end of the last paragraph.

Note 1: There are times when that half space is not desirable after the end of a line. To place an HTML "break" as an ending for a line as opposed to a "new paragraph" command, hold down the Shift key while pressing the Enter key. A right-angled left-arrow will appear to indicate the "break" command, but it will not show up on the final web page. If you do not see the right-angled left-arrow, then move to the toolbar and press the "Show All" button which has a "paragraph mark" on it as a graphic.

Note 2: At this point it is a good idea to save the emerging web page document. Choose or create an appropriate folder under your account or on your computer. For the first (topmost) web page at any site, use the file name "index.html". This simplifies the URL (web address) for your web site since the file name "index.html" will not have to be part of the address, since the web server will automatically assume that is its name when no file name is given in the URL.

5. Insert a picture.

Images (pictures, charts, and other graphics) should be first saved in the folder in which the web page calling them is located on your computer. Once that is done, back in FrontPage 2003, click on the second cell of the table. Then press the Insert Image button and browse to locate the image in the folder from which you are editing your web page. Press OK and see the image show up on your emerging web page.

Caution: Do not browse into other folders on your computer to locate an image. First copy the image from its location into the folder into which you have saved your web pages.

6. Use a Bulleted List

One characteristic of web pages, that quickly becomes obvious to users when they stop to think about it, is that data is often best presented in "bite-sized" chunks. Under most circumstances, users will not read several paragraphs to obtain a few selected items of information. So try redesigning your two paragraphs into bulleted lists. Begin by placing the cursor at the beginning of the cell in which the text now exists. Follow this by pressing the Bulleted List button, and proceeding from there.

Note: If you change your mind about a particular editing activity, it can be reversed by going to the Edit menu and selecting "Undo Typing," or you may click on the Undo button on the toolbar.

7. Include the Author's Name and the Date of Creation.

Just as knowing the author and date of publication has some importance when reading or citing a book or article, so does knowing this same information for the web pages we read or create. Take the time to add your name, your email address (if possible, so readers may contact you) and the date of creation or modification of your web page. Begin by adding a horizontal line below the other info on your page. Go to the Insert menu and choose Horizontal Line. Then add your name and other information below that.

8. Insert a Hyperlink to Another Page or as an Automatic Email Link.

Adding a hyperlink that enables the user to email the author is straight forward. Locate where you wish to place this link, possibly after the author's name, and type in the email address (with spaces on either side), and FrontPage 2003 will automatically turn it into a "mailto" command and thus an active hyperlink.

Other hyperlinks can be constructed similarly using the full URL for the site. Place the cursor where the hyperlink is to be place and type the URL leaving a space on either side of the address. This will be automatically converted to a link to that web site.

To link to another page at your web site, enter the text (one or more words) or an image that you wish to become the hyperlink. Then highlight the text or image and select the "Insert Hyperlink" button. In the resulting dialogue box, delete the text, "http://" from the URL box if it is present, and simply type the file name of the web page to be linked. This should include the extension, e.g., next.html, of the web page file. It is important to know if you have used .htm or .html as the file extension in the file name. Either one is fine, but they are distinct extension names.

Caution: Remember, do not browse into other folders on your computer to locate a file or an image. First copy the file or image from its location into the folder into which you have saved your web pages.

9. Change Text Color.

To change the color of a section of text (such as the header), highlight the appropriate text; then select the Format menu and the Font option. As is usual, one can also simply right-click on the highlighted text and select the Font option from the resulting menu. This particular red color is a custom choice. In the Font dialog box select the drop-down menu options under the Color box. Any of the demonstrated colors can be selected. Or one may click on "More Colors," and a new dialog box opens. Then choose either a color from the color wheel (really a hexagon) or type in the RGB (red-gree-blue) color in hex notation (from 00 through FF for each of the three basic colors).

Caution: While different font styles may be selected in the Font dialogue box, remember to resist this temptation, please! Most users will not have all of the fonts on their computer that you have on yours, so a page that looks right for you may look much differently to others.

By now my sample web page (in FrontPage 2003) looks like the screen shot below. Your will probably be similar.

10. Add Background Color to a Table or to the Page as a Whole.

Some times the web author may wish to add color to a given cell or a whole table; to do this, right click in that cell or table and select either Cell Properties or Table Properties. In the resulting dialogue box, choose the background color you wish from the list of possibilities or make a custom color.

Do a similar right click on the web page and select Page Properties to obtain a dialogue box that allows choosing a background color for the page as a whole.

Note: The color of a table or cell overwrites the color of the background.

11. Enter a Title for the Web Page.

Search engines, as well as most browsers, use the title of a web page for various purposes. For examples, the title assigned to a page is the default name that will be used when users save your web page in their Favorites collection or Bookmark your web site. Thus begin with the most important word or idea and do not use such words as Home or Page (there are unnecessary). To change or add a title, from the File menu select Page Properties and enter the title in the appropriate box. Or simply do a right click on the web page and select Page Properties.

Note: Do not confuse the text you place at the top of a web page with a Heading style as the title for the page. The tile is the technical term described above and only shows up on the title bar at the very top of the browser.

12. Review Your New Web Page in a Web Browser.

Always take a look at your web page in a browser--in fact in more than one if you have access to more than one. (You have been saving your web page at intervals as you have progressed in your editing, haven't you?) Note anything you need or want to change, and then make those editing changes in FrontPage 2003. Finally go back and view the edited web page again. Remember to save the edited page and to press the Refresh or Reload button on your browser to view the newest version of your web page.

Here is how my sample page looks in a browser window (with the monitor set at a resolution of 800 X 600 pixels.

Note: While FrontPage 2003 will automatically check your spelling as you type, you may wish to do a spelling check after you are all finished. Go to the Tools menu and select Spelling to accomplish this task.

13. "Publish It!"

When the web page contains the information you want it to, and it looks good when viewed using a browser' then it is ready to be "published." This involves transferring all HTML files and graphics files into the appropriate directory on the computer acting as the web server for our college. This simply means copying all of the files from your X-drive to the W-drive, if they are your personal web pages or course-related pages. Some necessary links may have to be added to your departmental web page. Talk to your department's web master to have these links installed.

If you are responsible for departmental web pages, then the HTML and image files must be copied to the appropriate folder on the O-drive. If web pages for your department have not existed in the past, or if you want them linked to the main college pages in a different fashion, then contact the IT Center for assistance.

But don't rest yet! Your job is not complete until you view your web pages from a different computer and, if possible, from a different login account. Some image and hyperlink problems do not show up until a person who is not the author tries to access the web pages. So see what your web pages look like in your office and from home. Also, have other persons (students, family and friends) view your creations. Make whatever adjustments are necessary.

IV. In Conclusion

• Read and apply the Hints and Resources for effective webpage authoring that are part of this tutorial.
• Remember: Place solid content on your web page, make it easy to read, provide good additional resource links, and you will have a good web site!

Appendix A: Follow These Suggestions and Things to Remember

• Always Edit Your Web Page in FrontPage 2003 and Display It in Internet Explorer at the Same Time.

FrontPage 2003 attempts to display web pages as they would be viewed in a web browser, but to be certain of the look and feel of a web page, display it in a web browser. Note: Remember to save the file after making changes and to refresh the web page display in the browser to see what effect the changes have on how the page displays.

• Make Certain Your Web Page Has a Title.

To add or change a title of a web page, right click on the web page and select "Page Properties". This title is what will show up at the top of the browser when the page is viewed by a user. It will also be the name of its entry in the Favorites column, when it is added there, and it will be the name displayed by search engines that index your site.

• Place Your Name (as Author) and the Date of Creation or Modification at the Bottom of Your Web Page.

Just as a book should identify its author, so should web pages. Also, with the rapid changes in our world, placing the date of creation or modification on a web page is very important. If you have an email address, it is also a good idea to make a link from which persons can email you.

• Hyperlinks and Email Addresses Should Usually Be Shown as Full URLs.

While there are cases where making a special word or phrase a hyperlink to some other web resource, remember that the associated web address (URL) does not print out when the web page is printed by a user. Good web authoring practice would thus be to use the full URL as the hyperlink text. This is what has been done most often in this tutorial.

This also makes creating the hyperlink in FrontPage 2003 an easy experience. Simply type the URL, e.g., http://www.bridgewater.edu/~rbowman/ (with a space before and after the URL), and FrontPage 2003 will automatically convert it to a hyperlink. If the URL is an email address, then the appropriate "mailto" HTML code will be created, e.g., rbowman@bridgewater.edu .

• The Main Web Page of Your Site Should Have the Name "index.html".

On the Bridgewater College web server, as on many web servers, if the main page at any site is named "index.html," then it can be referenced in a hyperlink by giving the directory name only. For example, the main page of Bridgewater's Academic Computing site is named "index.html" and can be access by going to http://www.bridgewater.edu/cescc/acadcomp/ where the file name of "index.html" is provided implicitly by the server.

• Initially Edit and Save Your Web Pages on Your Hard Drive.

Web pages that are saved on any hard drive can be viewed by a browser by simply locating the file and double-clicking on its icon/name. It will be displayed automatically by the browser. Editing web pages off of the web server allows the user to make changes without displaying all of the construction process to the world.

• When You Are Ready to Show the World Your Creation, Save the Web Pages and Associated Files to the Web Server.

At Bridgewater, web pages can simply be saved to the W-drive to be visible to the world. Minor changes can also be made to a web page directly from the W-drive, as long as the file is saved back to the W-drive.

• Include Pictures or Graphics, but Keep Them Small with a Narrow Subject Focus.

Use the "Insert" menu or the "Insert Image" button to add a picture or graphic where the cursor is presently located. Images can add a lot to a web page; however, keep in mind that the larger the image file, the longer it will take to load on computers that are off-campus and using modems to connect to the Internet.

• Use Tables to Facilitate Layout of Text and Graphics.

Many times columns of text and graphics are desired on a web page, or the author wishes a graphic to be placed at a certain position on the page and for text to flow around it in a certain way. This can be accomplished by using tables. Hint: the border around a table can be set to zero, and it will not be displayed on the web page. Additional Hint: do not use the width parameter on your tables so that they will be sized automatically by whatever browser is displaying the web page. Horizontal scroll bars should be avoided at all costs!

• Learn to Use the Right Mouse Button to Get Menus that Facilitate Tailoring Particular Features on the Web Page.

FrontPage 2003 will present a context-specific menu when a web author right-clicks on a particular location or feature on the web page being edited. Learn to use this very valuable feature from your first day of web authoring.

• Utilize a Bite-sized Informational Style.

Internet users expect to find information in bulleted lists, short paragraphs, and hyperlinks to more information. Avoid long and wordy pages that are hard to read and that make it difficult for users to find exactly what they want. (Pages such as this tutorial are exceptions to this rule.)

• Avoid Using Animated Graphics, Dark Backgrounds, and General Clutter.

Remember that conveying information is what the Internet is all about. A glitzy web site that does not have much if any content is a worthless site. Dark backgrounds and light letters may look neat at first glance, but they are often difficult for sustained reading. Also, such pages do not print well. Black type prints faster than colored type on color printers and stands out well when printed. (White or yellow type on white paper is impossible to read. Also, use only the default fonts (plus italics and bold type) since someone else's computer may not have your favorite font available.

Appendix B: Resources

In addition to this tutorial, the reader will probably find several other resources helpful.

1. Internal Help in FrontPage 2003

From the Help menu select "Microsoft Office FrontPage Help" or simply click on the associated button on the toolbar. This button has a question mark in a blue circle. One can then choose to either search Microsoft Office Online, Office Help (with FrontPage itself), Clip Art and Media, or Office Marketplace.

2. Web Authoring Tutorials at Bridgewater College's Academic Computing Web Site
(Go to http://www.bridgewater.edu/cescc/acadcomp/ and select "Web Authoring: Tutorials & Templates".)

• "Effective Web Sites: Development & Evaluation" -
• Information on Effective Web Sites" - a list of sites emphasizing how to make web sites effective, usable, and accessible.
• "Converting Office Documents to Web Pages" - a guide to changing Word, Excel and PowerPoint files into web pages.
• "Writing Your First (Or Second Or...) Web Page" - gives a brief introduction to HTML. Every web author should try to write at least a simple web page in raw HTML using only a text editor such as Notepad. This tutorial leads you through the process.
• "Hints for Authoring Effective Web Sites"--a quick visual summary including a version with an audio track.

3. Other Tutorials

• "Microsoft FrontPage 2003" - a series of small online tutorials from the Learning and Technology Services at the University of Wisconsin-Eau Claire.
  [ http://www.uwec.edu/Help/fpage03.htm ]
• "Introduction to FrontPage 2003" - an online tutorial from the library of Wesleyan University.
  [ http://www.wesleyan.edu/libr/tut/frontpage/ ]
• FrontPage mini-tutorials in PDF format from the Web Centre at the University of Leicester.
  [http://www.le.ac.uk/webcentre/tutorials/index.html ]
• A few more advanced tutorials on using FrontPage particularly aimed at cleaning up code and using cascading style sheets. (Use cautiously.)
  [ http://accessfp.net/frontpage-2003/tutorials/ ]
• "How to make accessible Web content using FrontPage" - instruction on how to make web pages accessible to persons with various physical constraints.
  [ http://www.webaim.org/techniques/frontpage/ ]
• Other resources can be found by searching the web for "FrontPage 2003 tutorial."