USING FRONTPAGE EXPRESS TO EDIT WEB PAGES
I. Introduction
There are a number of ways to write web pages: using "raw" HTML codes, editing with a word processor such as Microsoft Word, or utilizing an exclusive HTML editor such as FrontPage Express. This tutorial is designed to enable you to learn how to use FrontPage Express. FrontPage Express is very similar in action to a word processor, such as easy use of the "cut and paste" technique, while being designed from the ground up to be a web editor. (For example, this tutorial was written and edited using FrontPage Express.)
In addition to this tutorial, the reader will probably find several other resources helpful.
Web Authoring Tutorials At Bridgewater
College's Academic Computing Web Site
(Go to http://www.bridgewater.edu/cescc/acadcomp/ and select "Web Authoring".)
Tutorials And Tips From Other Sites
Use these additional web resources as companions to this tutorial as you become proficient at using FrontPage Express.
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 Express
To begin from scratch, click on the Windows 95/98 "Start" button, select "Programs" and locate the link to FrontPage Express. (Sometimes it may be under "Accessories" and then in the folder "Internet Tools," or it may be in a Multimedia folder.) Once FrontPage Express is running, a blank web page will appear ready for composing.
If you do not want to start completely from scratch, click on the "File" menu in FrontPage Express, and click on the selection called "New" (not the "New" button on the toolbar). A list of possible "wizards" or default types of web pages will pop up. Select the one most appropriate to your need or simply begin with the "Personal Home Page Wizard."
If you want 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 FrontPage Editor. (If no "Edit" button exists or the FrontPage Editor is not available, contact the IT Center.) One may also first run FrontPage Express and open the web page file from the "File" menu.
III. Construct a Simple Web Page
Begin with a blank page in FrontPage Express, 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 Express. 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. 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.
2. 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. Your page might look like this.
The default table may have a border as shown. When using a table as a means of formatting on a web page, this border must be made invisible. Move your mouse to the inside of the table and right click. From the resulting menu, select Table Properties. In the resulting dialogue box, change the Border Size to "0", and while you are there, make certain that the Specify Width parameter is not checked. Finally click OK. The borders will disappear and be replaced with simple dotted lines that will not show up on the actual web page. Making sure that the width of the table is unspecified enables the table to fit totally in almost any size of web browser window regardless of resolution of the monitor. This is very important for satisfied viewers.
3. 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 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.
Note: 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 as the web server will automatically assume that is its name.
4. 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 Express, 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.
5. 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 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 is now existing. 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 ....
Your web page (in FrontPage Express) may look somewhat like the screen shot below.
6. 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 the the Insert menu and choose Horizontal Line. Then add your name and other information.
Note: Adding a hyperlink that enables the user to email the author is straight forward. Type in the email address (with spaces on either side), and FrontPage Express 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.
7. Add Background Colors to the Table and 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.
To change the color of a section of text, such as the header, highlight the text to be edited and then move to the Format menu and select Font. Caution: While different font styles may be selected in the resulting dialogue box, 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 less than that for others.
8. 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 a 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.
9. 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 Express. 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.
One deficit of FrontPage Express is that it has no spellchecker. To remedy this fault, close FrontPage Express and open your web page in Microsoft Word or another wordprocessor. Check the spelling there, BUT do not save the file from Word! (Word does generate acceptable HTML code, however, it often defines such things as the width of tables when they do not need to be set and its formatting of the underlying HTML code is not as neat.) Simply note the mistakes in spelling on a print out of your web page, close Word and then open the page again in FrontPage Express and make the necessary changes.
Here is how my sample page looks in a small browser window.
V. Follow These Suggestions and Things to Remember
FrontPage Express 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.
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 and will be the name of its entry in the Favorites column and that displayed by search engines that index your site..
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.
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 Express an easy experience. Simply type the URL, e.g., http://www.bridgewater.edu/~rbowman/ (with a space before and after the URL), and FrontPage Express 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 .
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.
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.
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.
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 large the image file, the longer it will take to load on computers that are off-campus and using modems to connect to the Internet.
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!
FrontPage Express will present a context-specific menu when the 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.
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.
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.
VI. In Conclusion
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!
-- (c) 2000-01, Richard L. Bowman (23-May-01)
