Introduction to Templates
Presenting a consistent appearance in a web site is important even when there are many people supplying information to a web site. The use of a template or master web page becomes a valuable tool in maintaing this consistancy. A good example for using templates would be in teacher web pages. The school provides a template that includes links to the main school page, the school logo and the color scheme of the site. Each teacher then provides the information that will fill the page but they do not have to worry about the overall page design, that is taken care of by the template. The result are pages developed by many different teachers but all with the same design and layout.Before you begin try a few of these keys to see what happens.
1. Open Dreamweaver and press the F4 key. What happens? Why is this view helpful?
2. Press the F8 key. What happens?
3. Click Ctrl + J. What happens?
4. If necessary use the View menu to display the Standard toolbar and the Window menu to display the property inspector.
Now onto templates.
A template is a predesigned page that has all of the setting you desire for all other pages. It is then used as a master page upon which all other pages are developed. In Dreamweaver a template is a special HTML document that contains editable regions. A page created based on a template is a template instance. In the template instance only the editable regions of the page can be changed, all other aspects of the page are controlled by the template. If the template is changed all pages based on that template get updated automatically and thus the power of templates. In this exercise you will create a template that will be used to highlight a different park each month but keep the same consistant style.
1. Open a new page and give it a title of Florida Parks and apply a background image of background.jpg found in the project 05 images folder.
2. Place the cursor at the top of the page and add the logo.gif image (this is the same image you used on the Parks page previously)
3. On the File menu choose Save As Template and name the file spotlight_parks. Click Save. Go to the site panel and look for a new folder called Templates. What is the file extension that was added to your spotlight_parks file? What does this indicate? This folder is automatically created by Dreamweaver and should not be modified or deleted as long as you are using templates. All templates you create will be stored in this folder automatically.
4. Just below the logo.gif key in "Spotlight on [name of state park]". Apply a heading 2 format. Hit enter and type in "Add short description here" on the next line.
5. Hit enter to move to the next line and insert a table with the following properties:
1 Row, 2 Columns, Cell Padding 5, Cell Spacing 0, 70% for width, 0 for Border. Center the table.6. Select both cells in the table and make the horizontal position center and the vertical position middle.
7. In the left cell type "Add additional columns and rows as necessary. Add images and short description of image."
8. In the right hand cell place an image placeholder. From the menu bar select Insert > Image Placeholder. When the Image Placeholder dialogue box opens add the following information: Name = add_image, width = 64 then hit OK. Move to the right of the table and hit enter two times to move the cursor below the table.
9. Add a second table with the following properties:
1 Row, 2 Columns, Cell Padding 5, Cell Spacing 0, 50% for width, 0 for Border. Center the table. In the left cell type in "Add additional columns as necessary for links." Save your template.Adding Editable Regions
Intro to Templates | Adding Editable Regions | Using a Template to Create a Web Page