1. Dreamweaver CS4 Concepts and Techniques Chapter 5 Templates and Style Sheets

2. Chapter 5: Templates and Style Sheets 2 Chapter Objectives Describe a template Create a template Describe different types of style sheets Create a Cascading Style Sheet Apply Cascading Style Sheet attributes to a template Create a Web page from a template

3. Starting Dreamweaver and Opening the Alaska Parks Web Site Click the Start button on the Windows taskbar Point to Adobe Dreamweaver CS4 on the Start menu or point to All Programs on the Start menu, and then point to Adobe Dreamweaver CS4 on the All Programs list Click Adobe Dreamweaver CS4 to start Dreamweaver If necessary, display the panel groups If the Alaska Parks Web site hierarchy is not displayed, click the Files panel arrow and then click Alaska Parks on the Files popup menu to display the Alaska Parks Web site hierarchy in the Files panel Chapter 5: Templates and Style Sheets 3

4. Starting Dreamweaver and Opening the Alaska Parks Web Site Chapter 5: Templates and Style Sheets 4

5. 5 Copying Data Files to the Parks Web Site Click the Files panel button, and then click the name of the drive containing your data files, such as Removable Disk (M:) If necessary, click the plus sign (+) next to the folder containing your data files to expand that folder, and then click the plus sign (+) next to the Chapter05 folder to expand it Expand the parks folder to display the data files Click the aniak01.jpg image file or the first file in the list to select it Hold down the Shift key and then click the logo.jpg image file, or the last file in the list. Press CTRL+C to copy the files

6. Chapter 5: Templates and Style Sheets 6 Copying Data Files to the Parks Web Site Hold down the Shift key and then click the logo.jpg image file, or the last file in the list. Press CTRL+C to copy the files If necessary, click the Files panel button, and then click the drive containing the Alaska Parks Web site. Expand the your name folder and the parks folder. Click the images folder to select it Press CTRL+V to paste the image files in the images folder

7. Chapter 5: Templates and Style Sheets 7 Copying Data Files to the Parks Web Site

8. Chapter 5: Templates and Style Sheets 8 Creating a New Template Document Click the Files panel arrow in the Files panel, and then click Alaska Parks, if necessary, to open the Alaska Parks Web site Click File on the Application bar, and then click New to display the New Document dialog box Click Blank Template and then click HTML template in the Template Type list In the Files panel, click the minus symbol (-) next to the images folder to collapse the folder Click the Create button to create the template document If the Insert bar is not displayed, click Window on the Application bar and then click Insert If the Common category is not selected, click the Common tab on the Insert bar

9. Chapter 5: Templates and Style Sheets 9 Creating a New Template Document

10. Chapter 5: Templates and Style Sheets 10 Saving the Web Page as a Template Click File on the Application bar and then click Save to display the Save As Template dialog box Type spotlight_monuments in the Save as text box to name the template Click the Save button to save the template in the Templates folder Click the plus sign to the left of the Templates folder to expand the folder and view the template file name with the.dwt extension

11. Chapter 5: Templates and Style Sheets 11 Saving the Web Page as a Template

12. Chapter 5: Templates and Style Sheets 12 Adding a Background Image and Title to the Template Page Click Modify on the menu bar and then click Page Properties to open the Page Properties dialog box Click Appearance (HTML) in the Category list, if necessary, and then click the Browse button to the right of the Background image box to open the Select Image Source dialog box If necessary, navigate to the images folder. Click parks_bkg.jpg and then click the OK button to select the background image Click the OK button in the Page Properties dialog box to add the background image to the template page Click the Title text box on the Document toolbar, delete Untitled Document, and type Spotlight on Alaska National Monuments as the entry Press the ENTER key. If necessary, click the document window

13. Chapter 5: Templates and Style Sheets 13 Adding a Background Image and Title to the Template Page

14. Chapter 5: Templates and Style Sheets 14 Adding the Logo Image to the Template Click the Assets tab in the panel groups. If necessary, click the Images icon. Scroll down, if necessary, and click the logo.jpg file to select it Drag the logo.jpg image to the upper-left corner of the document window to insert the logo image at the top of the page In the Property inspector, click the Alt text box, type Alaska National Monuments logo as the entry, and then press the Enter key Click anywhere on the page to deselect the image and then press the Enter key

15. Chapter 5: Templates and Style Sheets 15 Adding the Logo Image to the Template

16. Chapter 5: Templates and Style Sheets 16 Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions Collapse the panel groups, but leave the Property inspector open and expanded Type Spotlight on [name of national monument] as the heading prompt below the logo image Click the Format button arrow in the Property inspector and apply Heading 2 to the spotlight prompt Press the ENTER key to move the insertion point below the prompt Type Add short description of monument as the prompt for the second editable region. Bold the text, click at the end of the text to deselect it, and then press the ENTER key to move the insertion point below the description prompt

17. Chapter 5: Templates and Style Sheets 17 Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions

18. Chapter 5: Templates and Style Sheets 18 Adding and Centering a Table as the Third Editable Region Click Insert on the Application bar and then click Table Enter the following data in the Table dialog box: 1 for Rows, 2 for Columns, 70 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 5 for Cell spacing. Type Spotlight on Alaska national monuments as the Summary text Click the OK button to add the table to the template Click the Align button arrow in the Property inspector, and then click Center to center the table in the document window Click the left cell in the table and then drag to select both cells in the table

19. Chapter 5: Templates and Style Sheets 19 Adding and Centering a Table as the Third Editable Region Click the Horz button arrow in the Property inspector and then click Center Click the Vert button arrow and then click Middle to apply the specified attributes to the table cells Click the left cell in the table and then type Add additional columns and rows as necessary. Add images and short descriptions of image to each cell in the table. as the prompt, and then click the right cell Click Insert on the Application bar, point to Image Objects, and then point to Image Placeholder Click Image Placeholder to display the Image Placeholder dialog box Type add_image in the Name text box as the prompt

20. Chapter 5: Templates and Style Sheets 20 Adding and Centering a Table as the Third Editable Region Press the TAB key Type 64 for the Width Press the TAB key. If necessary, type 32 for the Height Click the OK button to add the placeholder to the table Click in the tag selector to select the table and type spotlight in the Table box to name the table Press the ENTER key Click to the right of the table and then press the Enter key two times to insert a blank line after the table

21. Chapter 5: Templates and Style Sheets 21 Adding and Centering a Table as the Third Editable Region

22. Chapter 5: Templates and Style Sheets 22 Adding and Centering a Table as the Fourth Editable Region Click Insert on the Application bar and then click Table to display the Table dialog box Enter the following data in the Insert Table dialog box: 1 for Rows, 2 for Columns, 50 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 0 for Cell spacing. Type Web site links as the Summary text. Click the OK button Click the Align button arrow in the Property inspector, and then center the table Click the left cell and then drag to select both cells in the table

23. Chapter 5: Templates and Style Sheets 23 Adding and Centering a Table as the Fourth Editable Region Click the Horz button arrow in the Property inspector and then click Center. Click the Vert button arrow and then click Middle Click the left cell and then type Add additional columns as necessary for links as the prompt Select the table and name it links. Press the ENTER key Press CTRL+S to save the file. If a Dreamweaver warning box is displayed, click the OK button

24. Chapter 5: Templates and Style Sheets 24 Adding and Centering a Table as the Fourth Editable Region

25. Chapter 5: Templates and Style Sheets 25 Creating the First Editable Region If necessary, click the Common tab on the Insert bar Click the Property inspector title bar to collapse the Property Inspector Click to the left of the heading prompt Click the tag in the Tag selector to select the prompt for the title

26. Chapter 5: Templates and Style Sheets 26 Creating the First Editable Region On the Common tab, click the Templates button arrow to open the Templates pop-up menu, and then point to Editable Region Click Editable Region to display the New Editable Region dialog box Type monument_name in the Name text box to provide a name for the new editable region Click the OK button to designate the selected text as an editable region

27. Chapter 5: Templates and Style Sheets 27 Creating the First Editable Region

28. Chapter 5: Templates and Style Sheets 28 Creating the Second Editable Region Click to the left of the prompt, Add short description of monument, in the Document window Click the tag in the tag selector to select the line Click the Templates button arrow and then click Editable Region to display the New Editable Region dialog box Type monument_description in the Name text box and then click the OK button to name the selected editable region

29. Chapter 5: Templates and Style Sheets 29 Creating the Second Editable Region

30. Chapter 5: Templates and Style Sheets 30 Creating the Third and Fourth Editable Regions Click in the left cell of the first table and then click the tag in the tag selector to select the table Click the Templates button arrow, and then click the Editable Region command Type monument_images in the Name text box, and then click the OK button to add the editable region name

31. Chapter 5: Templates and Style Sheets 31 Creating the Third and Fourth Editable Regions Click in the left cell of the second table, click the tag in the tag selector, and then click the Editable Region command on the Templates pop-up menu to display the New Editable Region dialog box Type links in the Name text box and then click the OK button to add links as the editable region name If necessary, display the Standard toolbar and then click the Save button

32. Chapter 5: Templates and Style Sheets 32 Creating the Third and Fourth Editable Regions

33. Chapter 5: Templates and Style Sheets 33 Displaying the CSS Styles Panel Click the Expand Panels button to expand the panel groups, and then click the Files tab, if necessary, to display the Alaska Parks Web site If necessary, click Window on the Application bar and then click CSS Styles to display the panel group containing the CSS Styles tab If necessary, click the CSS Styles tab to display the CSS Styles panel If necessary, click the Current button, and then click the Show information about selected property button on the About bar If necessary, drag the Properties bar in the CSS Styles panel up to display the Properties section

34. Chapter 5: Templates and Style Sheets 34 Displaying the CSS Styles Panel

35. Chapter 5: Templates and Style Sheets 35 Adding a Style and Saving the Style Sheet Click to the left of the text, Spotlight on [name of national monument], in the monument_name editable region, and then click the tag in the tag selector to select the heading prompt Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box Click the Selector Type arrow and then point to Tag (redefines an HTML element) Click Tag (redefines an HTML element) to select that selector type Click the Selector Name text box and type h2 as the selector name, if necessary

36. Chapter 5: Templates and Style Sheets 36 Adding a Style and Saving the Style Sheet Click the Rule Definition arrow, and then click (New Style Sheet File) to specify that you want to create an external style sheet Click the OK button to display the Save Style Sheet File As dialog box If necessary, click the Save in box arrow and then click the parks folder Click the File name text box and then type spotlight in the File name text box Click the Save as type arrow and select Style Sheet Files (*.css), if necessary Click the Save button to display the CSS Rule Definition for h2 in spotlight.css dialog box

37. Chapter 5: Templates and Style Sheets 37 Adding a Style and Saving the Style Sheet Click Type in the Category list, if necessary Click the Font-family box arrow, and then click Arial, Helvetica, sans-serif in the Font-family list Click the Font-size box arrow, and then click 24 in the Size list Click the Font-weight box arrow, and then click bolder Click the Color text box, type #000 for black text, and then press the TAB key to enter the style definitions Click the OK button and then click anywhere in the monument_name editable region to deselect the heading prompt, which displays the new style

38. Chapter 5: Templates and Style Sheets 38 Adding a Style and Saving the Style Sheet

39. Chapter 5: Templates and Style Sheets 39 Creating a Style for the Paragraph Text Click to the left of the prompt, Add short description of monument, and then click the tag in the tag selector to select the prompt Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box Click the Selector Type arrow and then select Tag (redefines an HTML element) Verify that the p tag is displayed in the Selector Name text box Click the Rule Definition arrow, and then click (This document only)

40. Chapter 5: Templates and Style Sheets 40 Creating a Style for the Paragraph Text Click the OK button to display the CSS Rule definition for p dialog box Verify that the Type category is selected Click the Font-family box arrow and then click Arial, Helvetica, sans-serif Click the Font-size box arrow and then click 12

41. Creating a Style for the Paragraph Text Click the Font-weight box arrow and then click bold Click the Color text box and then type #000 for the color. Press the TAB key to add the CSS Rule Definition Type attributes Click the OK button to apply the styles to the current paragraph Click to the right of the paragraph and observe the new attributes Click the Save button on the Standard toolbar Chapter 5: Templates and Style Sheets 41

42. Chapter 5: Templates and Style Sheets 42 Creating a Style for the Paragraph Text

43. Chapter 5: Templates and Style Sheets 43 Adding a Background, Border, and Text Color to a Table Click in the first cell of the monument_images table To select the table, click the tag in the tag Selector Click the New CSS Rule button in the CSS Styles panel to open the New CSS Rule dialog box Click the Selector Type arrow, and then click Tag (redefines an HTML element) If necessary, type table in the Selector name text box

44. Chapter 5: Templates and Style Sheets 44 Adding a Background, Border, and Text Color to a Table Click the OK button to display the CSS Rule dialog box Verify that the Type category is selected Click the Font-family box arrow and then click Arial, Helvetica, sans-serif Click the Color text box, type #000, and then press the TAB key to display the font and selected color Click Background in the Category list to display the Background properties Click the Background-color text box, type #546C8E as the color, and then press the TAB key to display the background color in the Background color box. Click the Apply button

45. Chapter 5: Templates and Style Sheets 45 Adding a Background, Border, and Text Color to a Table Click Border in the Category list to display the Border properties Verify that the Same for all check boxes are selected for Style, Width, and Color Click the Top box arrow and then click groove Click the first Width box arrow and then click thick Click the first text box in the Color area and then type #000 for the border color

46. Adding a Background, Border, and Text Color to a Table Press the TAB key to define the attributes Click the OK button and then click in the First table Click in the tag selector to select the spotlight table If necessary, drag the panels below the CSS Styles panel to display the Summary for Selection, the About “border” section, and the Properties for “table” section Click the Save button on the Standard toolbar Chapter 5: Templates and Style Sheets 46

47. Chapter 5: Templates and Style Sheets 47 Adding a Background, Border, and Text Color to a Table

48. Chapter 5: Templates and Style Sheets 48 Modifying the A:Link Attribute Collapse the panel groups to icons Click the title bar of the Property inspector to display it, click outside the spotlight table, and then click the CSS button in the Property inspector to display the CSS properties Scroll down, and then click anywhere in the links table Click the Page Properties button to open the Page Properties dialog box, and then click the Links (CSS) category Click the Link color box and then point to white (#FFF) Click white to add the color

49. Chapter 5: Templates and Style Sheets 49 Modifying the A:Link Attribute Click the Rollover links color box and then click yellow (#FF0) Click the Visited links color box and then click red (#F00) Click the Active links color box and then click white (#FFF) Click the Underline style arrow and select Hide underline on rollover Click the OK button to add the link attribute to the template Click the Save button on the Standard toolbar to save your changes

50. Chapter 5: Templates and Style Sheets 50 Modifying the A:Link Attribute

51. Chapter 5: Templates and Style Sheets 51 Creating the Aniakchak National Monument Spotlight Web Page Close the spotlight_monuments.dwt file. Expand the panel groups Click File on the Application bar and then click New Click Blank Page in the New Document dialog box, verify that HTML is selected in the Page Type column, and then click the Create button Click the Save button on the Standard toolbar and then save the page in the parks folder. Use aniakchak.htm as the file name

52. Chapter 5: Templates and Style Sheets 52 Creating the Aniakchak National Monument Spotlight Web Page

53. Chapter 5: Templates and Style Sheets 53 Applying a Template to the Aniakchak National Monument Web page Double-click the CSS Styles tab to collapse the panel Click the Assets panel tab in the Files group panel Click the Templates icon in the Assets panel Click spotlight_monuments to select the template Click the Apply button to apply the template Collapse the panel groups

54. Chapter 5: Templates and Style Sheets 54 Applying a Template to the Aniakchak National Monument Web page

55. Chapter 5: Templates and Style Sheets 55 Adding the Monument Name and Monument Description to the Aniakchak National Monument Web Page If necessary, click anywhere on the document. Move the mouse pointer over the page and note that in the non-editable sections, such as the logo image, the pointer changes to a circle with a line through the middle Select the text and brackets, [name of national monument], in the monument_name editable region Type Aniakchak National Monument as the monument name

56. Chapter 5: Templates and Style Sheets 56 Adding the Monument Name and Monument Description to the Aniakchak National Monument Web Page Select the prompt, Add short description of monument, in the monument_description editable region Type the following text: Aniakchak Caldera is six miles across and 3,000 feet deep. The area originally was a 7,000 foot mountain. The caldera was created by a volcanic eruption approximately 3,500 years ago, which caused the mountain to collapse

57. Chapter 5: Templates and Style Sheets 57 Adding the Monument Name and Monument Description to the Aniakchak National Monument Web Page

58. Chapter 5: Templates and Style Sheets 58 Adding Rows to the Monument_images Table Click in the left cell of the monument_images table Click Modify on the Application bar, point to Table, and then point to Insert Rows or Columns to highlight the command Click Insert Rows or Columns to display the Insert Rows or Columns dialog box Double-click the Number of rows text box and then type 2 for the number of rows Click the OK button to add the two rows to the monument_images table

59. Chapter 5: Templates and Style Sheets 59 Adding Rows to the Monument_images Table

60. Chapter 5: Templates and Style Sheets 60 Adding Images to the Monument_images Table Click the title bar on the Property inspector to collapse it Expand the panel groups to display the Assets tab Select the text in row 1, column 1 of the monument_ images table and then press the DELETE key to delete the placeholder text Click the Layout tab on the Insert bar, and then click the Expanded button to switch to Expanded Tables mode Click the Images icon in the Assets panel

61. Chapter 5: Templates and Style Sheets 61 Adding Images to the Monument_images Table Drag the aniak01.jpg file to row 1, column 1 of the monument_images table Click to the right of the image Hold down the SHIFT key and then press the ENTER key to insert a line break Type Smoky morning as the description Press the TAB key to move the insertion point to row 1, column 2 to select the image placeholder

62. Chapter 5: Templates and Style Sheets 62 Adding Images to the Monument_images Table Press the DELETE key to delete the image placeholder and then drag the aniak02.jpg file to the cell Click to the right of the image Hold down the shift key and then press the ENTER key to insert a line break Type Riverside as the description Add the four other images and descriptions to the monument_images table as indicated in Table 5– 2 on the next page

63. Chapter 5: Templates and Style Sheets 63 Adding Images to the Monument_images Table Collapse the panel groups, and then click the title bar of the Property inspector to expand it Click each image and add the Alt text for each image as listed in Table 5–3

64. Chapter 5: Templates and Style Sheets 64 Adding Images to the Monument_images Table

65. Chapter 5: Templates and Style Sheets 65 Adding the Links to the Links Table and Adding Image Borders If necessary, scroll down to display the links table. Select the text in the left cell of the links table and then press the DELETE key to delete all of the text from the cell Type Home as the text link in the left cell and then select the text In the Property inspector, click the HTML button and then click the Link text box Type index.htm as the link, and then press the tab key to add the link to the home page and center it in the cell Click anywhere in the Home link to deselect the text Click the right cell in the links table. Type Aniakchak National Monument as the text for the link and then select the text

66. Chapter 5: Templates and Style Sheets 66 Adding the Links to the Links Table and Adding Image Borders Click the Link text box in the Property inspector and then type http://www.nps.gov/ania/index.htm as the entry Click the Target box arrow and select _blank Click anywhere in the links table to deselect the text Exit the Expanded Tables mode Scroll to the top of the page and select the Smoky morning image Click the Border box in the Property inspector and type 4 to add a border Press the TAB key to apply the border, and then click anywhere in the monument images table to deselect the Smoky morning image

67. Chapter 5: Templates and Style Sheets 67 Adding the Links to the Links Table and Adding Image Borders Select each of the other images and apply a 4 pixel border, and then resize each image so it has a Width of 375 pixels and a Height of 285 pixels Click the Save button and then view the page in your browser Close the browser window

68. Adding the Links to the Links Table and Adding Image Borders Chapter 5: Templates and Style Sheets 68

69. Chapter 5: Templates and Style Sheets 69 Adding a Link from the Index Page to the Aniakchak National Monument Page Expand the panel groups and then click the Files tab Open the index.htm page Scroll down, and then click to the right of the Alaska National Historical Sites link in the links table, press the SPACEBAR, and then insert a vertical line Select the space and line you just typed, and then delete the historical_sites.htm text in the Link box if necessary, to make sure the previous link does not continue to the new one Insert a space after the vertical line, and then type Featured Monument as the link text

70. Chapter 5: Templates and Style Sheets 70 Adding a Link from the Index Page to the Aniakchak National Monument Page Select the text and then drag aniakchak.htm from the Files panel to the Property inspector Link text box Click the Save button on the Standard toolbar, and then press the right arrow key to deselect the text Press the F12 key to preview the index.htm page in your browser Scroll down and then click the Featured Monument link to view the Aniakchak National Monument Web page

71. Chapter 5: Templates and Style Sheets 71 Adding a Link from the Index Page to the Aniakchak National Monument Page Verify that the Aniakchak National Monument Web page links work. If instructed to do so, print a copy of the Aniakchak National Monument Web page and submit it to your instructor. If instructed to do so, upload your Web site to a remote server Close the browser

72. Chapter 5: Templates and Style Sheets 72 Adding a Link from the Index Page to the Aniakchak National Monument Page

73. Chapter 5: Templates and Style Sheets 73 Closing the Web Site and Quitting Dreamweaver Click the Close button on the upper-right corner of the Dreamweaver title bar to close the Dreamweaver window, the document window, and the Alaska National Parks Web site If you have unsaved changes, click the Yes button in response to the Dreamweaver prompt

74. Chapter 5: Templates and Style Sheets 74 Chapter Summary Describe a template Create a template Describe different types of style sheets Create a Cascading Style Sheet Apply Cascading Style Sheet attributes to a template Create a Web page from a template

75. Dreamweaver CS4 Concepts and Techniques Chapter 5 Complete Templates and Style Sheets