Tutorial 6 – Creating a Page Template
Designing a Template
1. Start Dreamweaver. On the Start page, in the Create New column, select Dreamweaver Site. In the Site Definition dialog box, name you site Language Club. Click the Next button. Select No, I don not want to use a server technology. Click next.
2. Under How do you want to work with your files during development?, choose Edit local copies on my machine, then upload to server when ready (recommended). When you see Where on your computer do you want to store your files?, click the folder and navigate to documents. Create a new folder titled Template in your documents folder, click Choose then click Next.
3. Click the How do you connect to your remote server? Drop-down arrow and select None. Click Next. A summary of your settings will appear. Click Done. The site has been defined. On the Start page, under Create New, select HTML. (if necessary, select Design view).
4. Right click in the Document window and select Page Properties.
5. In the Page Properties dialog box, under Category, make sure Appearance is selected. Change the Page font as shown below. Key the hexadecimal values for text color and background color into the boxes as shown. Change the left margin and top margin to 0.
6. Next to the Background Image, click the Browse button. Browse to the Data Files/lesson3/images folder. Double-click the background_stripes.gif file.
7. If you see a dialog box with To make a document relative path, your document should be saved first, click OK. In the second dialog box, click Yes to have Dreamweaver copy the image file to the site folder.
8. In the Copy File as dialog box, click Create New Folder icon. Name the new folder images. Double-click the images folder and then click the Save button to save the image file in this folder. Under Category, click Title/Encoding. In the Title box, key Language Main, Click OK to close the Page Properties dialog box.
9. Choose File>Save as Template. In the dialog box, key: Language Main in the Save as box.
10. Click Save. Your screen should look like the illustration below. In the Document window, notice that file tab displays Language Main .dwt. The file extension dwt stands for Dreamweaver Template.
Add a Logo
11. Go to Insert in the Main Menu and select Image. Browse to the Lesson 3 Images folder. Double clik the lc_logo.jpg file. If necessary, in the dialog box, click Yes. Double-click the images folder and then click the Save button to save the image file to this folder.
12. Select the logo graphic. In the Alt box, key: The Language Club/ In the Link box, key: index.html). Your template should resemble the illustration below. Save you template file. In the dialog box that says This template doesn’t have any editable regions. Are you sure you want to continue? Click OK.
Tables
13. If necessary, open you Language_Main.dwt file. Click after the logo. Press Shift + Enter to move the Insertion point below the graphic.
14. On the Insert toolbar, click the Table button.
15. In the Table dialog box, key the settings shown below.
16. Move the mouse pointer over the downward-pointing arrow in the table’s first column. Click and choose Select Column. In the Properties inspector, click the Merges selected cells using spans button. The Three cells merge into one cell.
17. In the Properties inspector, click the Horz drop-down arrow. Choose Left. Click the Vert drop-down arrow and choose Top. This changes the horizontal and vertical alignment of object in the cell.
18. In the Properties inspector, in the W box, key 180 to modify the column’s width. Press Enter.
19. Click inside the top cell in the right-hand column. In the Properties inspector, in the H box, key 25 to modify the cell’s height. Press Enter.
20. Click inside the table’s top-right cell. Go to Insert in the Main Menu and select Template Objects, choose Editable Region. In the New Editable Region dialog box, in the Name box, key: header. Click OK.
21. Click in the middle cell of the right-hand column, Select Template Objects and Editable Regions again. In the name box, key: content. Click OK.
22. Your template should resemble the illustration below. Save your work.
Navigation Buttons
23. If necessary, open you Language_Main.dwt file. Click in the table’s left-hand column.
24. On the Insert toolbar, click the Image drop-down arrow. Choose Rollover Image. In the Insert Rollover Images dialog box, in the Image name box, key: Home.
25. Next to the Original image box, click Browse. Browse to the DataFiles/Lesson3/Images folder. Double-click nav_home_blue.gif. When asked if you would like to save the file, click Yes. Save the file in your images folder.
26. Next to the Rollover Image box, click Browse. Browse to the DataFiles/Lesson3/Images folder. Double click nav_home_red.gif file and save it in your Images folder.
27. In the Alternate text box, key: Home. In the When click, go to Url box, key: index.html. Click OK
28. Repeat steps 2 through 5 to create the About Use, Events, and Contact Use navigation buttons. Use the following information to create the buttons.
Image Name / Original Image / Rollover Image / Alternate Text / When clicked...About Us / nav_about_blue.gif / nav_about_red.gif / About Us / about_us.html
Events / nav_events_blue.gif / nav_events_red.gif / Events / events.html
Contact Us / nav_contact_blue.gif / nav_contact_red.gif / Contact Us / Contact_us.html
29. Your link bar should look like the illustration to the right. Save your work.
30. Preview your page in a browser. (Click OK if This template doesn’t have any editable regions. Are you sure you want to move? Appears) Move your mouse pointer over the buttons to see each one turn from blue to red.
Close your browser.
Footers
31. If necessary, open you Language_Main.dwt file. Click in the bottom cell of the right-hand column.
32. In the Properties inspector, click the Size drop-down arrow and select 12.
33. Key the text below, including the vertical line between each link. (To create the vertical line, press Shift + \ or the | key.) Place a space between each item you key.
Home | About Us | Events | Contact Us
34. In the Properties inspector, click the Horz drop-down arrow and select Center. Any text or objects placed in this cell will be centered.
35. Press Shift + Enter and key: Questions or comments about the Web site?.
36. Press Shift + Enter and key: Copyright 2008 – Language Club
37. Your screen should look like the illustration below. Save your work
Text Links
38. If necessary, open you Language_Main.dwt file.
39. In the page’s footer, select the word Home. In the properties inspector, in the Link box, key: index.html. Press Enter. The text changes color to indicate it is a link.
40. Repeat step 2 for the remaining About Us, Events, and Contact Us links. Use the information below to create the links.
Text / LinkAbout Us / about_us.html
Events / events.html
Contact Us / contact_us.html
41. Click a blank area of the page and select Page Properties. In the Page Properties dialog box, under Category, select links.
42. Use the values shown below to key the hexadecimal colors for Link color, Rollover links, Visited links, and Active links. It is standard to have links be blue, rollover links red, visited links purple, and active links red. Click OK and save your work. The 0 is zero not capital O.
An e-mail link creates a pop-up e-mail window that contains the Webmaster’s address. This feature allows visitors to send messages to the Webmaster.
43. Position the insertion point after Questions or comments about the Web site? Press the spacebar once.
44. Choose Insert>Email Link from the Main Menu. In the Email Link dialog box, in the Text box, key: E-mail the Webmaster.
45. Spell check and proofread your template. Save the page
46. Preview your template in several different browsers, and at several resolutions.
You have now created a template that will be the basis for each Language Club Web page.
1