This document discusses templates and style sheets in Adobe Dreamweaver CS5. It describes how to create a template, add a banner image, and specify editable and non-editable regions. It also covers creating and applying cascading style sheets to templates, formatting links, and using templates to create web pages. The objectives are to learn how to create and work with templates, understand different types of style sheets, and apply styles using the CSS Styles panel.

1. AdobeDreamweaver CS5 Chapter 4 Templates and Style Sheets

2. Describe a template Create a template Add a banner image to a template Specify editable and noneditable regions in a template Describe different types of style sheets Display the CSS Styles panel Objectives Templates and Style Sheets 2

3. Create a Cascading Style Sheet Apply Cascading Style Sheet attributes to a template Use Expanded Tables mode Create a Web page from a template Specify links targets Describe CSS style properties Templates and Style Sheets 3 Objectives

4. Templates and Style Sheets 4 Project – Adding a Template and Applying Styles

5. Plan the template and Web pages Create a template Identify editable and noneditable regions Design the template Set styles for links Templates and Style Sheets 5 General Project Guidelines

6. Click File on the Application bar and then click New to display the New Document dialog box If necessary, click Blank Template and then click HTML template in the Template Type column to select the document type If necessary, click <none> in the Layout column to specify no particular layout Click the Create button to display a new untitled template page Click File on the Application bar and then click Save as Template to display the Save As Template dialog box Templates and Style Sheets 6 Creating and Saving a Template

7. Type the desired description in the Description text box Type the desired file name in the Save as text box Click the Save button to save the template in the Templates folder Templates and Style Sheets 7 Creating and Saving a Template

8. Templates and Style Sheets 8 Creating and Saving a Template

9. If necessary, click the upper-left corner of the page to display the insertion point Click the Assets tab in the panel groups to display images and other assets If necessary, click the Site option button to display the assets for this site Click the banner image file to select it If necessary, click the banner image to select it and then press CTRL+ALT+SHIFT+C to center the image Click below the banner image to deselect the image Templates and Style Sheets 9 Adding a Banner Image to the Template

10. Templates and Style Sheets 10 Adding a Banner Image to the Template

11. Editable region Repeating region Optional region Editable tag Templates and Style Sheets 11 Specifying Editable and Noneditable Regions

12. Type the heading prompt below the banner Apply the desired format to the heading prompt Templates and Style Sheets 12 Adding the Prompts for the Editable Regions

13. Click Insert on the Application bar, point to Image Objects and then point to Image Placeholder to prepare for inserting an image placeholder Click Image Placeholder to display the Image Placeholder dialog box Type the desired text for the prompt in the name text box Enter the desired width and height in the Width and Height text boxes Click the OK button to add the placeholder Templates and Style Sheets 13 Adding an Image Placeholder

14. Templates and Style Sheets 14 Adding an Image Placeholder

15. If necessary, click the Common tab on the Insert bar to display the Common category Click to the left of the heading prompt to prepare for selecting the prompt Click the tag for the prompt in the tag selector to select the prompt On the Insert tab, click the Templates button arrow to display the Templates pop-up menu Templates and Style Sheets 15 Creating an Editable Region

16. Click Editable Region to display the New Editable Region dialog box Type the desired name for the editable region in the Name text box Click the OK button to designate the selected text as an editable region Templates and Style Sheets 16 Creating an Editable Region

17. Cascading Style Sheets, also called CSS and style sheets, are a collection of formatting rules that control the appearance of content in a Web page You can define the following types of styles in Dreamweaver: Class Tag Advanced Templates and Style Sheets 17 Cascading Style Sheets

18. The term cascading refers to the capability of applying multiple style sheets to the same Web page An external style sheet is a single style sheet that is used to create uniform formatting and contains no HTML code An internal style sheet, or embedded style sheet, contains styles that apply to a specific page A specified element within a page can have its own style Templates and Style Sheets 18 Conflicting Styles

19. Templates and Style Sheets 19 The CSS Styles Panel

20. Click the Expand Panels button to expand the panel groups Click the CSS Styles tab to display the CSS Styles panel Templates and Style Sheets 20 Displaying the CSS Styles Panel

21. Templates and Style Sheets 21 Defining Style Attributes

22. Select the tag in the tag selector to which you want to apply the style Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box Click the Selector Type button and then point to Tag (redefines an HTML element) to prepare for selecting that type Click Tag (redefines an HTML element) to select that selector type Click the Selector Name text box and type the desired selector name, if necessary Templates and Style Sheets 22 Adding a Style and Saving the Style Sheet

23. Click the Rule Definition button 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 desired save location Click the File name text box and then type the desired name for the style sheet Templates and Style Sheets 23 Adding a Style and Saving the Style Sheet

24. 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 the selector If necessary, click Type in the Category list to display the properties for type Set the desired settings for the style Click the OK button to finish creating the new style Templates and Style Sheets 24 Adding a Style and Saving the Style Sheet

25. Templates and Style Sheets 25 Adding a Style and Saving the Style Sheet

26. Click in the first cell in the table Click the table tag in the tag selector to select the table Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box Click the Selector Type button and then click Tag (redefines an HTML element) If necessary, type table in the Selector Name text box Click the OK button to display the CSS Rule definition for table dialog box Verify that the Type category is selected to prepare for setting Type properties Templates and Style Sheets 26 Adding a Background, Border, and Text Color to a Table

27. Click the Font-family box arrow and then click the desired font family Click the Color text box, type the value for the desired text color and then press the TAB key to display the selected color Click Background in the Category list to display the Background properties Click the Background-color text box, type the value for the desired background color Click Border in the Category list to display the Border properties Templates and Style Sheets 27 Adding a Background, Border, and Text Color to a Table

28. Verify that the Same for all check boxes are selected for Style, Width, and Color to set the same properties to the top, right, bottom, and left borders of tables Click the Top box arrow under Style and then select the desired border style Click the first Width box arrow and then click the desired width Click the first text box in the Color column and then type the value for the desired border color Click the OK button to finish creating the CSS rule definition for the table style Templates and Style Sheets 28 Adding a Background, Border, and Text Color to a Table

29. Templates and Style Sheets 29 Adding a Background, Border, and Text Color to a Table

30. Click the Page Properties button in the Property inspector to open the Page Properties dialog box Click the Links (CSS) category to display the options for formatting link text Click the Link color button to display a color palette for unvisited link text Click the desired color for unvisited link text Repeat the previous two steps to set colors for Visited links, Rollover links and Active links Click the OK button to add the links attributes to the template Templates and Style Sheets 30 Formatting Link Text

31. Templates and Style Sheets 31 Formatting Link Text

32. Templates and Style Sheets 32 Maintaining Style Sheets

33. Open the Web page to which you wish to apply the template Click the Assets tab in the Files group panel to display the assets for the Web site Click the Templates icon in the Assets panel to display the templates for the site Click the desired template Click the Apply button to apply the template Templates and Style Sheets 33 Applying a Template to a Web Page

34. Templates and Style Sheets 34 Applying a Template to a Web Page

35. Move the mouse pointer over the page and note that in the noneditable sections, the pointer changes to a circle with a line through the middle Select the text in an editable region Type the replacement text Templates and Style Sheets 35 Editing an Editable Region

36. Templates and Style Sheets 36 Editing an Editable Region

37. Click the Layout tab on the Insert bar and then click the Expanded button to switch to Expanded Tables mode Drag the image file from the Assets panel to the location in the table to display the image Templates and Style Sheets 37 Adding an Image to a Table in Expanded Tables Mode

38. Templates and Style Sheets 38 Adding an Image to a Table in Expanded Tables Mode

39. Templates and Style Sheets 39 Specifying Link Targets

40. Type the desired link text and then select the text Click the Link text box in the Property inspector and then type the desired relative link Click the Target box arrow and then select the desired target Click the desired image to which you want to add a border Click the Border box in the Property inspector and type the desired value Templates and Style Sheets 40 Adding Targeted Links and Adding Image Borders

41. Templates and Style Sheets 41 Adding Targeted Links and Adding Image Borders

42. Templates and Style Sheets 42 Adding Targeted Links and Adding Image Borders

43. Templates and Style Sheets 43 CSS Style Definition Category Descriptions

44. Templates and Style Sheets 44 CSS Style Definition Category Descriptions

45. Templates and Style Sheets 45 CSS Style Definition Category Descriptions

46. Templates and Style Sheets 46 CSS Style Definition Category Descriptions

47. Templates and Style Sheets 47 CSS Style Definition Category Descriptions

48. Templates and Style Sheets 48 CSS Style Definition Category Descriptions

49. Templates and Style Sheets 49 CSS Style Definition Category Descriptions

50. Templates and Style Sheets 50 CSS Style Definition Category Descriptions

51. Describe a template Create a template Add a banner image to a template Specify editable and noneditable regions in a template Describe different types of style sheets Display the CSS Styles panel Chapter Summary Templates and Style Sheets 51

52. Create a Cascading Style Sheet Apply Cascading Style Sheet attributes to a template Use Expanded Tables mode Create a Web page from a template Specify links targets Describe CSS style properties Templates and Style Sheets 52 Chapter Summary

53. Chapter 4 Complete Adobe Dreamweaver CS5