Advanced Template:

Using this template requires two main steps. Initially we must create the images that are needed for the section. The header or name of the web section is an image. In addition, all of the navigation buttons down the left column of the page are images. Next we need to change the template HTML code to what we need to display.

Step 1: Creating the required images in Adobe Photoshop 6.0 (Note: These images and directions will only work in Adobe Photoshop 6.0)

Note: If you do not have Photoshop 6.0 download the otherfiles.zip archive which includes both the header and button template files in Photoshop 5.0 and Macromedia Fireworks 4.0 format. [Also note that the header template uses Time New Roman text at a size of 25 point, and the button template uses Univers text at a size of 12.5 point (12 point in the fireworks file due to limitations imposed by that program)]

Note: It is reccommended that you create an "images" directory within the folder that your section will be located, and that you save all images in that folder. To save the photoshop files listed below, click on the link and save the image to your "images" directory. (In Netscape, right click and select "Save Link As")

Header Image:

1. Open the "template_header.psd" file in Photoshop. You will now see the window below. (If you are a netscape user, you will need to download the template_header in zip format)

2. Select the Layer named "Header Image" (as shown above) and Edit the text to the name of your web section, for example "Demo Web Section". Your header image should now look similar to the example below.

3. Save the file as a gif named "header.gif".

Navigation Buttons:

There are two types of buttons. First there is the standard grey button which is used to signify a link to a page in the section. Second is the white button, which is used to signify that that is the current loaded page. The web section you are currently on is a good example of this.

Note: You should always create both a white and a grey button for every link you want on your navigation menu.

1. Open the "template_nav_buttons.psd" file in Photoshop. You will now see the window below. (If you are a Netscape user, you will need to download the template_nav_buttons in zip format)

2. Select the Layer named "Button Name" (as shown above) and edit the text to the name of the page that button will link to. For example "Page 1". Your button should now look similar to the example below.

3. Make sure that the "grey background" layer is made visible" and that the "white background" layer is not visible.

4. Now save the file as a gif. The filename can be anything you like, but it is good practice to name it the same as the text on the button, so we will save it in this example as "page1.gif".

5. Now make the "grey background" layer not visible and the "white backgroud" layer visible and save the file as the same name as above except append "_white" to it. So in this example it will be "page1_white.gif".

That's it, now repeat the steps above for every button you need to create. Be sure to create both a white and a grey version of each button.

Go to Step 2 »