Presentation Transcript

1. AdobeDreamweaver CS5

   Chapter 4 Templates and Style Sheets
2. Objectives 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 Templates and Style Sheets
3. Objectives 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
4. Project – Adding a Template and Applying Styles Templates and Style Sheets
5. General Project Guidelines 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
6. Creating and Saving a Template 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
7. Creating and Saving a Template 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
8. Creating and Saving a Template Templates and Style Sheets
9. Adding a Banner Image to the Template 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
10. Adding a Banner Image to the Template Templates and Style Sheets
11. Specifying Editable and Noneditable Regions Editable region Repeating region Optional region Editable tag Templates and Style Sheets
12. Adding the Prompts for the Editable Regions Type the heading prompt below the banner Apply the desired format to the heading prompt Templates and Style Sheets
13. Adding an Image Placeholder 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
14. Adding an Image Placeholder Templates and Style Sheets
15. Creating an Editable Region 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
16. Creating an Editable Region 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
17. Cascading Style Sheets 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
18. Conflicting Styles 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
19. The CSS Styles Panel Templates and Style Sheets
20. Displaying the CSS Styles Panel 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
21. Defining Style Attributes Templates and Style Sheets
22. Adding a Style and Saving the Style Sheet 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
23. Adding a Style and Saving the Style Sheet 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
24. Adding a Style and Saving the Style Sheet 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
25. Adding a Style and Saving the Style Sheet Templates and Style Sheets
26. Adding a Background, Border, and Text Color to a Table 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
27. Adding a Background, Border, and Text Color to a Table 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
28. Adding a Background, Border, and Text Color to a Table 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
29. Adding a Background, Border, and Text Color to a Table Templates and Style Sheets
30. Formatting Link Text 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
31. Formatting Link Text Templates and Style Sheets
32. Maintaining Style Sheets Templates and Style Sheets
33. Applying a Template to a Web Page 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
34. Applying a Template to a Web Page Templates and Style Sheets
35. Editing an Editable Region 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
36. Editing an Editable Region Templates and Style Sheets
37. Adding an Image to a Table in Expanded Tables Mode 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
38. Adding an Image to a Table in Expanded Tables Mode Templates and Style Sheets
39. Specifying Link Targets Templates and Style Sheets
40. Adding Targeted Links and Adding Image Borders 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
41. Adding Targeted Links and Adding Image Borders Templates and Style Sheets
42. Adding Targeted Links and Adding Image Borders Templates and Style Sheets
43. CSS Style Definition Category Descriptions Templates and Style Sheets
44. CSS Style Definition Category Descriptions Templates and Style Sheets
45. CSS Style Definition Category Descriptions Templates and Style Sheets
46. CSS Style Definition Category Descriptions Templates and Style Sheets
47. CSS Style Definition Category Descriptions Templates and Style Sheets
48. CSS Style Definition Category Descriptions Templates and Style Sheets
49. CSS Style Definition Category Descriptions Templates and Style Sheets
50. CSS Style Definition Category Descriptions Templates and Style Sheets
51. Chapter Summary 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 Templates and Style Sheets
52. Chapter Summary 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

53. Adobe Dreamweaver CS5

    Chapter 4 Complete