COMP1900 Lab Worksheet - Week 10 (Web site construction)

Introduction

This lab session is a preparation for the Web site construction assignment . During this session, you will learn to use the Web authoring tool Dreamweaver MX to construct a small site containing two web pages. As you build the site, you will be opening your pages in a web browser (Netscape Navigator and Internet Explorer are available) to see what the pages look like and to check your hyperlinks.

Like all web sites, your practice site will contain a home page with the standard file name index.html. In order to practice working with hyperlinks, your site will contain a second page with the file name page_two.html

Tasks to be completed

1. On your desk top, create a new folder called pilot_site_folder - you will be saving your web pages in this folder.
2. Launch Dreamweaver MX by clicking on its icon (a green disk) at the bottom of your screen. A blank web page will appear - this will eventually be your home page. Close the smaller window to its right - you won't be using it.
3. Before composing your home page, familiarise yourself with the Properties Inspector near the bottom of your screen. Practise using the Inspector to do the following:
   • Insert a suitable heading into your home page, and format it until you are satisfied with its appearance.
   • Insert a short bullet list (3 or 4 items)
   • Insert a short numbered list (3 or 4 items)
   • Insert a short table (3 or 4 rows and columns), then key some text into its cells.
4. Select File/Save As... to save your home page. Remember to save it as index.html in your pilot_site_folder.
5. To create a second web page, use File/New... to create a new Basic Page - a blank page will appear. Key in a suitable heading and format it until you are satisfied with its appearance. Add some more features to your second page, then save it as page_two.html in your pilot_site_folder.
6. You are now ready to insert some hyperlinks.
   • Try inserting a text hyperlink, with the text 'my second page', into your home page. The hyperlink is to take someone from your home page (index.html) to your second page (page_two.html).
     To do this, insert the text 'my second page' into your home page, select this text (with the mouse), then in the Properties Inspector's Link box, enter the file name page_two.html. (There are several ways of entering this name. One way is to type it in.) The text 'my second page' should now become a hyperlink (blue and underlined).
     To test your new hyperlink, save both pages, then open your home page in a browser (Select File/Open File...). When your page appears in the browser window, click on the hyperlink to see if it works.
   • When you have done this, see if you can insert a text hyperlink, 'Home', taking someone from your second page back to your home page. Save your second page, then test the hyperlink in a browser to see if it works.
   • Now try putting in a hyperlink taking you to another place on the same page. To do this, first make your second page fairly long (3 or 4 screens) by inserting some 'garbage' text or long tables - a long page will make the hyperlink easier to test. Choose two widely separated places in your page. One is the place where you want the hyperlink to take you when you click on it. The other is the place where you want the hyperlink to appear on the page.
     To mark the place where you want the hyperlink to take you, you must insert a so-called named anchor there by completing these steps.
     1. Position the cursor where you want the anchor to go.
     2. Select Insert/Named Anchor - a dialog box will appear.
     3. Key in a name (a short, single word will do) for the anchor - an anchor sign will appear, indicating the anchor's position in your page.
     To insert the text hyperlink taking you to this anchor, complete these steps.
     
     1. Select the hyperlink's text (You may need to key in some appropriate text).
     2. In the Properties Inspector's Link box, enter the symbol # immediately followed by the anchor's name - the selected text should now become a hyperlink (blue and underlined).
     Test the hyperlink in a browser to see if it works.
7. Practice inserting an image into your second page. First, find an image you like then copy it to your pilot_site_folder. To insert this copy into your second page, complete these steps.
   1. Position the cursor where you want the image to go.
   2. Click on the Image icon in the Insert Panel ( or select Insert/Image) - a Select Image Source dialog box will appear. Select the image copy in your pilot_site_folder then hit Choose - the image should appear in your page.
8. After quitting Dreamweaver, make sure that you save your pilot_site_folder in your USERS space - it may be useful when you come to work on the web site construction assignment.