Creating A 6 Page Template From Scratch

Part 3 -- Part 1 -- Part2

You will need to create rollovers and content for each of the pages. You can use this editor here by typing  in the content you want.

1. Rollovers:  Create the button rollovers by clicking one button at a time, and adding a rollover. On the rollover state, just remove the blending options from the layers panel for that word by removing the  eye in front of it.

2.Index page: Open the HTML editor here.

3. Select your Font as Times New Roman to match your template. (Sites should have not more then 2 or 3 different fonts.) Set the size to 48 pt,  Set the color to blue. Type in the title.

4. Hit enter and change the font to 24 pt and type in the slogan.

5. Hit enter and set the font to 16. Select bullets (unordered list) from the ordered list buttons and type in each line for the outline of service.


 

6. Click the <> button on the far right of the program to view the code.

7. Select the code with your cursor and Click the copy text button on the top.

 

8. Open your Canvas for your template in Image ready. This template has been prepared and sliced up.

9. Using your slice select tool to select your content slice that is all white.

10. Open your Slice palette in Image Ready. You have set this slice to no image. Click in the Text box and Right click and select paste to paste your HTML code. Make sure you check the box for HTML code.

11. Click File => save.

Click File=> Save optimized as. Save this as

• filename= index.html
• Save as type = HTML and images
• Settings = custom (we set them in previous tutorials)
• Slices = all slices

12. ABOUT: Click File=> save as. Save this as about.html.

• Click in the main content cell and erase what's in there.
• Turn off the KEYBOARD image layer by removing the eye on that layer, and turn on the KEY layer on the layers panel by adding an eye on that layer.
• Use the slice select tool to select the key slice. Rename the slice key
  
  
   
• Use the html editor again to produce the content for the about page.
• Copy the contents.
• Click back in your main content cell on your canvas in image ready.
• Paste the contents into this.
  
  
   
• Click File=> save.
• Click File=> Save optimized as. Set the file name to about.html. and save in same location as index.html. It will ask to Overwrite the images you already saved. Click yes.

13. PRODUCTS: Click File=> save as. Save this as products.html.

• Click in the main content cell and erase what's in there.
• Turn off the KEY image layer by removing the eye on that layer, and turn on the CD layer on the layers panel by adding an eye on that layer.
• Use the slice select tool to select the key slice. Rename the slice CD
  
  
   
• Use the html editor again to produce the content for the products page.
• Copy the contents.
• Click back in your main content cell on your canvas in image ready.
• Paste the contents into this.
  
  
   
• Click File=> save.
• Click File=> Save optimized as. Set the file name to products.html. and save in same location as index.html. It will ask to Overwrite the images you already saved. Click yes.

14. Follow this method to produce the rest of the pages, changing the image, renaming the image slice on the slice panel, inserting the page contents from an html editor, and saving it as a psd and then save optimized as the html for that page.

15. Your template will then look like this: Click here!

Good luck!