Constructing a Simple Web Page with FrontPage 2003
Before starting this exercise, please download (save) the “Lake for class” jpeg photo from the BUS class webpage!!
Start Microsoft FrontPage
1. Begin with a blank page (with split view) in FrontPage 2003 (FILE / NEW/ BLANK PAGE / SPLIT). Note: 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.)
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. 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.
Webpages are most often created with multiple columns and the easiest way to accomplish this is to insert a TABLE. To do so, 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.
The default table may have a border. When using a table as a means of formatting on a web page, the border should be made invisibleMove your mouse to the inside of the table and right click. From the resulting menu (as shown at right), 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 set to "100%.". Click OK. The borders will disappear and be replaced with simple dotted lines that will not show up on the actual web page.
************ /
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 (i.e. type a line of text and then press the ENTER key which will separate the lines into what Frontpage calls paragraphs). Include at least enough text to make three 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.
**************
Now shrink the size of the cell containing your paragraphs by “grabbing and dragging” the double dotted line at the right size of the cell and drag the line to at left.
Note :At this point it is a good idea to save the emerging web page document.Let’s save this code on the DESKTOP. 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. A 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. Since we downloaded the Lake jpeg to the desktop earlier, we can proceed. Click on the second cell of the table. Then press the Insert Picture From File button and browse to locate the Lake image. Press OK and see the image in the cell. Obviously the image is too large for our cell. This happens quite often when inserting a picture. Let’s resize our image. Right click on the picture and select “picture properties”. Locate the “Size” area in the dialog box and then specify a different size – in our case enter a width of 600.
******************
Resave the page and preview it in a browser.
6. Use a Bulleted List
Try redesigning your three paragraphs into bulleted lists. Select all the lines in the cell in which the text now exists. Follow this by pressing the Bulleted List button. Let’s make the lists more proportional to the image.Highlight the three paragraphs again if necessary. Then choose the Format menu and the Font option. Change the text font size (choose 6) and place a space between each paragraph.
*****************
7. Change Text Color.
To change the color of text (such as the heading and the paragraphs), highlight the appropriate text and then select the Format menu and the Font option. In the Font dialog box select the drop-down menu options under the Color box. Let’s use Green for the Heading and Red for the paragraphs.
***************
8. Add Background Color to a Table or to the Page as a Whole.
Sometimes the web author may wish to add color to a given cell. To do this, right click in the cell containing our paragraphs and select Cell Properties. In the resulting dialogue box, choose the background color (Yellow) from the list of possibilities and click OK.
Resave the page and preview in a browser.
*******************
9. Include the Author's Name and the Date of Creation.
Take the time to add your name and the date of creation to 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 and an Automatic Email Link.
Let’s add a hyperlink that enables the user to email the author. 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). Notice that 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 on the next line and type the COMPLETE URL you want the link to take the user to. Leave a space on either side of the address. This text will be automatically converted to a link to that web site.
Resave the page and preview it again in a browser
11. Add an “Interactive Button”
From the Insert Menu select Add Interactive Button. Then replace the button’s default text with the appropriate name you want the button to display and type in the COMPLETE URL address of where you want this button to “send” the user.
13. "Publish It!"
When the web page contains the information you want it to, and it looks good when viewed using a browser' preview, 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 OR subscribing to an online Web Publishing service.