Navagation and Subject Matter

Step 1:
To Begin Copy the Sketch from below and use it to create a navigation and map of your website. When you plan your design in detail you will save time in the long run.

Step 2: Copy the sketch and add any ideas or information regarding your theme for your website Hand in Sketch and get teacher approval. The theme for your website will be determined and discussed by your teacher in class.
1. Create a folder in your documents folder called "website". BE SURE ALL YOUR WORK, EVERY PICTURE, EVERY FONT, AND ALL YOUR FILES ARE IN THIS FOLDER!
2. Set up three files in Photoshop, each 800 x 600 pixels, resolution, 72 and contents white. Begin collecting information and designing your webpages in Photoshop. Be sure to name the home page "index" and the next two pages "page one" and "Page two".

3. Design all three pages in Photoshop BEFORE you make any leap into ImageReady. You should have a link on page one and page two which takes the viewer back to the index page and two links on the index page, one to page one and one for page two. (refer to diagram above)

4. Set up the links as rollovers in your layers palette.
For example, if you want your link to glow and have a drop shadow when you roll over it, create the effect on a separate layer to be used later as the rollover on the website.

5. a. With the Index page open in photoshop, go to file / jump to / image Ready. Your file will open in the program where you can create the rollover effects.
b. Set up your desktop with the image to the left and then the rollover palette next to the layers palette. Close all other palettes. This will simplify the process.

c. Select the slice tool (it looks like a knife). Make a slice over the area in which you wish to make the rollover. You will see a new "sub layer" in the rollover palette.

d. While the slice is selected, turn on or off any effects you wish to have visible when the mouse is over the sliced area. Only layers which are on or off WHILE THE SLICE IS SELECTED will work when viewing on the web browser.

6. To see the rollover, go to File / Preview in web browser / internet Explorer. (disable any pop ups)
Go back to Image ready and make the next slice repeating step 5.c and 5.d.

Repeat this process for all the slices in the work.

Create the links from page to page. Follow the steps below to create the links from the index to page one and the index to page two and back again. In this section you will use the slice palette. If you do not see the slice palette, go to window / slice.

1. Target the link to page one in the rollover palette, in the UrL area of the slice palette type pageone.html (no caps and no spaces.

2. Target the link to page two in the rollover palette, in the UrL area of the slice palette type pagetwo.html (no caps and no spaces)

3. Open each of the other two pages and follow step 1 for the link back to the index page except you will index.html in the slice palette.

Now you are ready to export and optimize the work so you can see the three linked pages in the web browser.

1. Follow the steps for EACH Page!
Go to file Save optimized as: and type in the name of each page just like this:
pageone.html, pagetwo.html and index.html

2. After you optomize , go to file / preview in / Internet Explorer to check the links.

IF SOMETHING DOES NOT WORK AND YOU GO BACK TO MAKE CHANGES YOU MUST GO TO FILE/OPTiMIZE AS: EACH TIME YOU MAKE A CHANGE!

when you are finished with the trial page, go on and complete the web design project you have been assigned to in class.