Lesson 8 – Using a Template
Assigning Page Titles and File Names
1. Start Dreamweaver or click File>New to see the Dreamweaver Start page.
2. In the Start page, under Create New, click the More folder.
3. In the New Document dialog box, click the Templates tab. Under Templates for, select you Language Club site. Under site, select Language_Main. Click Create to open the template.
4. At the top of the page, in the Title box, select Language Main. Key: Language Club-Home Page. Press Enter.
5. Choose Filet>Save As. Name the file index.html. Browse for the Templates folder. Click Save.
6. Choose File>New to display the New from Template dialog box. Follow steps 4-5 to create three additional Web pages. Use the page titles and file names shown below to create these new pages.
Page Title / File NameLanguage Club-About Us / about_us.html
Language Club-Events / events.html
Language Club-Contact Us / contact_us.html
7. When complete, you file list should resemble the list shown. Save your work.
Organize the Site’s File Structure
8. In the File panel, right click your Language Club Web site’s index.html file. In the options menu, select Set as Home Page. Right click Site – Language Club and choose New Folder from the menu. Name the new folder: pages.
9. Select the about_us page, then hold the Shift key down and select the contact_us and events pages. Drag the files into the pages folder. In the Update Links dialog box, click Update.
10. Your Files panel should look similar to the illustration on the right. In the Files panel select Map view and click Expand/Collapse to view the site’s navigation map. Click Expand/Collapse again to return to Local view.
11. Preview your site in a browser. If you have any broken links, trouble shoot using the Dreamweaver help menu.
Insert Page Headers
12. In the Files panel, double-click index.html to open it.
13. Double-click the header editable region. Press Delete to remove any text that may be in the section.
14. Choose Insert>Image. Locate the image hdr_welcome.gif in DataFiles/Lesson8/Images folder.
15. Double click the image file. If necessary, click Yes. Save the file in your Web site’s images folder.
16. The header graphic is inserted into the home page, as shown below.
17. Be sure the image is still selected. In the Properties inspector, in the Alt box, key: Language Club Web Site. Press Enter.
18. Choose File>Save to save the page.
19. Repeat steps 1-7 for the subpages About Us, Events, and Contact Us. For each page insert the header graphic and alternative text shown below. Make sure you save each page’s graphic file in your Web site’s images folder. Be careful to insert the correct graphic file into each page.
File Name / Graphic / Alternative Textabout_us.html / hdr_aboutus.gif / About Us
events.html / hdr_events.gif / Events
contact_us.html / hrd_contactus.gif / Contact Us
20. When finished, select File>Close All. Save your changes if prompted to do so.
You have now completed the basic framework of the Language club site.
Add Content and Color to the Home Page
21. In the Templates folder, double-click Language_Main.dwt to open the template.
22. Click in the word content in the content editable region. In the Properties inspector, click the Bg drop-down arrow and select white. The hexadecimal value #FFFFFF display in the box. In the Properties inspector, click the Vert drop-down arrow and select Top.
23. With the insertion point still in the content region, choose Modify>Table>Split Cell. In the Split Cell dialog box, under Split Cell Info, select Columns. Set the number of columns to 2. Click OK.
24. Click inside the new table cell and choose Insert>Template Objects>Editable Region. In the dialog box, in the Name box, key: bodytext. Click OK.
25. Save your template file. When asked to update all the files dependent on this template. Click update. Click Close. Close the template file.
26. Open index.html and double-click on the content editable region. Press delete to remove any text.
27. Choose Insert>Image. Browse to the DataFiles/lesson8/images folder and double-click photo_members.jpg. Save the file in the images folder.
28. In the Properties inspector, click Align Center. In the Alt box, key: Club Members. Your screen should like similar to the illustration below.
29. Place the insertion point to the left of the photo. Press Shift + Enter to insert space above the photo.
30. Position the insertion point in the space above the photo and key: Hello! Hola! Bonjour!
31. Double-click the body text editable region. Press Delete to remove any text. Key: Here is a group photo of our club members at this year’s kick-off meeting. It is never too late to join in and explore new languages and cultures from around the world!
32. Your page should look similar to the illustration below. Save your file.
Format Text
33. Open the Language Club Web site’s index.html page.
34. Select the Hello! Hola! Bonjour! text above the photo. In the Properties
35. inspector, click the Font drop-down arrow and select Arial, Helvetica, sans-serif.
36. In the size box, key: 20. Click the Bold style option.
37. In the Text color box, key #3300FF to change the text’s colr to blue.
38. Select the text in the bodytext editable region. Change the Font to Verdana,
Arial, Helvetica, sans-serif.
39. Change the font size to 18.
40. If necessary, click align center to center the text.
41. Your home page should look similar to the illustration below.
1