Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

Templates Web Project

1. Define a new site...call it Web_Templates
2. Create an images folder within the site
3. Create an index.htm page. You need to do the following for your index page.
   1. Make it a pretty page.
      1. How to make a pretty page if you have not yet, otherwise do you own thing.
         1. You can use one of the linear gradients below as your background image
         2. Use the hexadecimal number in the cell above the gradient as your background color
         3. Insert a table and use it as a layout tool
         4. Align the table center
         5. Create a color scheme ...start by using one of the vertical linear gradient bars below. You will need to download one of the bars into your the images folder of your site.
         6. Fill the cells of the table with a color so that it is compatible with your page background image. Your goal is to create a home page similar to the image below (note: this image is a Design mode view and so the table padding and spaces show.)
         7. Above the table create a title and format it H1
         8. Under the title create the following: Home | Page1 | Page2 | Page3 | Page4 | Page5
4. Create five more pages and name them: Page1.htm, Page2.htm, Page3.htm, Page4.htm, and Page5.htm
   1. Copy some text and pull down some images onto each page. Give each page a both types of titles: H1 and HTML Tag. DO NOT FORMAT THE PAGE.
5. Go back to your index.htm page and link each menu item: Home | Page1 | Page2 | Page3 | Page4 | Page5 to its respective page.
6. Once you have created a nice index.htm page...try to put a little text and an image in it, then you want to save it.
7. Now we are going to use the index.htm as the body for a template. You will need to do several things.
   1. Remove the content/body of your index page and place the cursor at the top of the cell...where you would like some text to go
   2. Go to File -> Save As Template...it may give you an error about an Editable Region. Just ignore the warning like we always do.
   3. Go to Insert -> Template Objects -> Editable Region
   4. Name it: Body
   5. Now, you may want to change the colors of this page a little bit and mix things up just for fun. In other words, you want it to be a little different from your index page.
8. Spell Check every page on your site.
9. Clean Up XHTML every page on your site.
10. Apply Source Formatting every page on your site.
11. Now we want to apply a template to every page on your site, but the index.htm
    1. Go to the page you want to apply the template to
    2. Go to Modify -> Templates -> Apply Template to Page
    3. You only have one template to choose from so select it
    4. With the next dialog box you want to select Document Body and assign it to Body in the Move Content to Region drop-down
12. Apply the template to the remaining pages.
13. Make some changes on the template to see what happens. You want to update all pages when prompted to do so.
14. Look at the code of one of the pages that has had the template applied to it. Notice how some is grayed out...this is template code and you cannot modify it from within the page. Also notice how a new Templates folder was created.
15. Preview and test all links

Home | Audio | DIY | Guitar | iPods | Music | Links | Site Map | Contact

Top