Advanced Template:

Step 2: Changing the template HTML Code

Before you begin, right click on the following links and save those images to your images directory that should be in the directory that your web page will be saved. (In Netscape, right click and select "Save Link As)

• sidenav_background.gif
• sidenav_bottom.gif
• sidenav_dark_gray_space.gif
• space.gif

Now lets begin:

1. Open Dreamweaver, or any other HTML Editor. (This example will make use of Macromedia Dreamweaver 4.0). Now click "View" on the menu bar and select "code".

2. Copy and paste the code below into a new page or site in Dreamweaver. Or you can download advanced_template.txt and save it as index.html, and then open that in Dreamweaver.

3. Your screen should now look like the example below.

4. Click on the "view" option on the menu bar, and select "Code View Options" and then select "Line Numbers".

5. Change the contents within the <title> tags on line 7 to the name of your section.

6. Between lines 29 and 36 is where your navigation is set up. For example:

<!-- start navigation -->

<a href="index.html"><img src="images/page1_white.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page2.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page3.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page4.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page5.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page6.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page7.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page8.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>

<!-- end navigation -->

each line refrences a button that you created in step one above, and it associated hypertext link. In the above example "page1_white.gif" is associated with the "index.html" link as this page is the index page and so the button is white and not grey. If this navigation was in the HTML code for page2.html, then we would expect to have the page1 button being refrenced for the index.html link be a grey one and the button for page2 to now be white. See below:

<!-- start navigation -->

<a href="index.html"><img src="images/page1.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page2.html"><img src="images/page2_white.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page3.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page4.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page5.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page6.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page7.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>
<a href="page8.html"><img src="images/button.gif" width=151 height=20 border=0 alt="Button"></a><br>

<!-- end navigation -->

7. Lines 47 and 48 are where the header image that you created is refrenced. You shouldn't need to change this if you named your header image header.gif, and saved it in the images directory. But if you didn't do this then change the path to the image you created. For example:

<!-- header image -->
<img src="images/header.gif" width=429 height=40 border=0 alt=""></td>

7. Line 59 is where you place your content. Ensure that all your content is between the <!-- start content --> and the <!-- end content --> comments.

8. Now save this file as your index.html page. And repeat the above steps for each page you need to create, and ensure that the navigation changes for each page to reflect that that is the currently loaded page.

NOTE: If you click on “view design” or “page preview” in Dreamweaver, you will not be able to see the header and footer you have just added. The changes will only be displayed when viewing the pages once they have been uploaded to the server.

Also please note that to get your page to look the best it can with the added header and footer, you should design your page to be 580 pixels wide, and centered on the page. (Putting the page content within a table with these properties can do this)

Finally, do not create images that are wider than 419 pixels to be placed in the content area, as this will force your tables in the page to change size.

« Go back to Step 1