CBIS 327 ~ Chapter 04

1,622 views
1,589 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,622
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CBIS 327 ~ Chapter 04

  1. 1. AdobeDreamweaver CS5<br />Chapter 4<br />Templates and Style Sheets<br />
  2. 2. Describe a template<br />Create a template<br />Add a banner image to a template<br />Specify editable and noneditable regions in a template<br />Describe different types of style sheets<br />Display the CSS Styles panel<br />Objectives<br />Templates and Style Sheets<br />2<br />
  3. 3. Create a Cascading Style Sheet<br />Apply Cascading Style Sheet attributes to a template<br />Use Expanded Tables mode<br />Create a Web page from a template<br />Specify links targets<br />Describe CSS style properties<br />Templates and Style Sheets<br />3<br />Objectives<br />
  4. 4. Templates and Style Sheets<br />4<br />Project – Adding a Template and Applying Styles<br />
  5. 5. Plan the template and Web pages<br />Create a template<br />Identify editable and noneditable regions<br />Design the template<br />Set styles for links<br />Templates and Style Sheets<br />5<br />General Project Guidelines<br />
  6. 6. Click File on the Application bar and then click New to display the New Document dialog box<br />If necessary, click Blank Template and then click HTML template in the Template Type column to select the document type<br />If necessary, click <none> in the Layout column to specify no particular layout<br />Click the Create button to display a new untitled template page<br />Click File on the Application bar and then click Save as Template to display the Save As Template dialog box<br />Templates and Style Sheets<br />6<br />Creating and Saving a Template<br />
  7. 7. Type the desired description in the Description text box<br />Type the desired file name in the Save as text box<br />Click the Save button to save the template in the Templates folder<br />Templates and Style Sheets<br />7<br />Creating and Saving a Template<br />
  8. 8. Templates and Style Sheets<br />8<br />Creating and Saving a Template<br />
  9. 9. If necessary, click the upper-left corner of the page to display the insertion point<br />Click the Assets tab in the panel groups to display images and other assets<br />If necessary, click the Site option button to display the assets for this site<br />Click the banner image file to select it<br />If necessary, click the banner image to select it and then press CTRL+ALT+SHIFT+C to center the image<br />Click below the banner image to deselect the image<br />Templates and Style Sheets<br />9<br />Adding a Banner Image to the Template<br />
  10. 10. Templates and Style Sheets<br />10<br />Adding a Banner Image to the Template<br />
  11. 11. Editable region<br />Repeating region<br />Optional region<br />Editable tag<br />Templates and Style Sheets<br />11<br />Specifying Editable and Noneditable Regions<br />
  12. 12. Type the heading prompt below the banner<br />Apply the desired format to the heading prompt<br />Templates and Style Sheets<br />12<br />Adding the Prompts for the Editable Regions<br />
  13. 13. Click Insert on the Application bar, point to Image Objects and then point to Image Placeholder to prepare for inserting an image placeholder<br />Click Image Placeholder to display the Image Placeholder dialog box<br />Type the desired text for the prompt in the name text box<br />Enter the desired width and height in the Width and Height text boxes<br />Click the OK button to add the placeholder<br />Templates and Style Sheets<br />13<br />Adding an Image Placeholder<br />
  14. 14. Templates and Style Sheets<br />14<br />Adding an Image Placeholder<br />
  15. 15. If necessary, click the Common tab on the Insert bar to display the Common category<br />Click to the left of the heading prompt to prepare for selecting the prompt<br />Click the tag for the prompt in the tag selector to select the prompt<br />On the Insert tab, click the Templates button arrow to display the Templates pop-up menu<br />Templates and Style Sheets<br />15<br />Creating an Editable Region<br />
  16. 16. Click Editable Region to display the New Editable Region dialog box<br />Type the desired name for the editable region in the Name text box<br />Click the OK button to designate the selected text as an editable region<br />Templates and Style Sheets<br />16<br />Creating an Editable Region<br />
  17. 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<br />You can define the following types of styles in Dreamweaver:<br />Class<br />Tag<br />Advanced<br />Templates and Style Sheets<br />17<br />Cascading Style Sheets<br />
  18. 18. The term cascading refers to the capability of applying multiple style sheets to the same Web page<br />An external style sheet is a single style sheet that is used to create uniform formatting and contains no HTML code<br />An internal style sheet, or embedded style sheet, contains styles that apply to a specific page<br />A specified element within a page can have its own style<br />Templates and Style Sheets<br />18<br />Conflicting Styles<br />
  19. 19. Templates and Style Sheets<br />19<br />The CSS Styles Panel<br />
  20. 20. Click the Expand Panels button to expand the panel groups<br />Click the CSS Styles tab to display the CSS Styles panel<br />Templates and Style Sheets<br />20<br />Displaying the CSS Styles Panel<br />
  21. 21. Templates and Style Sheets<br />21<br />Defining Style Attributes<br />
  22. 22. Select the tag in the tag selector to which you want to apply the style<br />Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box<br />Click the Selector Type button and then point to Tag (redefines an HTML element) to prepare for selecting that type<br />Click Tag (redefines an HTML element) to select that selector type<br />Click the Selector Name text box and type the desired selector name, if necessary<br />Templates and Style Sheets<br />22<br />Adding a Style and Saving the Style Sheet<br />
  23. 23. Click the Rule Definition button and then click (New Style Sheet File) to specify that you want to create an external style sheet<br />Click the OK button to display the Save Style Sheet File As dialog box<br />If necessary, click the Save in box arrow and then click the desired save location<br />Click the File name text box and then type the desired name for the style sheet<br />Templates and Style Sheets<br />23<br />Adding a Style and Saving the Style Sheet<br />
  24. 24. Click the Save as type arrow and select Style Sheet Files (*.css), if necessary<br />Click the Save button to display the CSS Rule Definition for the selector<br />If necessary, click Type in the Category list to display the properties for type<br />Set the desired settings for the style<br />Click the OK button to finish creating the new style<br />Templates and Style Sheets<br />24<br />Adding a Style and Saving the Style Sheet<br />
  25. 25. Templates and Style Sheets<br />25<br />Adding a Style and Saving the Style Sheet<br />
  26. 26. Click in the first cell in the table<br />Click the table tag in the tag selector to select the table<br />Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box<br />Click the Selector Type button and then click Tag (redefines an HTML element)<br />If necessary, type table in the Selector Name text box<br />Click the OK button to display the CSS Rule definition for table dialog box<br />Verify that the Type category is selected to prepare for setting Type properties<br />Templates and Style Sheets<br />26<br />Adding a Background, Border, and Text Color to a Table<br />
  27. 27. Click the Font-family box arrow and then click the desired font family<br />Click the Color text box, type the value for the desired text color and then press the TAB key to display the selected color<br />Click Background in the Category list to display the Background properties<br />Click the Background-color text box, type the value for the desired background color<br />Click Border in the Category list to display the Border properties<br />Templates and Style Sheets<br />27<br />Adding a Background, Border, and Text Color to a Table<br />
  28. 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<br />Click the Top box arrow under Style and then select the desired border style<br />Click the first Width box arrow and then click the desired width<br />Click the first text box in the Color column and then type the value for the desired border color<br />Click the OK button to finish creating the CSS rule definition for the table style<br />Templates and Style Sheets<br />28<br />Adding a Background, Border, and Text Color to a Table<br />
  29. 29. Templates and Style Sheets<br />29<br />Adding a Background, Border, and Text Color to a Table<br />
  30. 30. Click the Page Properties button in the Property inspector to open the Page Properties dialog box<br />Click the Links (CSS) category to display the options for formatting link text<br />Click the Link color button to display a color palette for unvisited link text<br />Click the desired color for unvisited link text<br />Repeat the previous two steps to set colors for Visited links, Rollover links and Active links<br />Click the OK button to add the links attributes to the template<br />Templates and Style Sheets<br />30<br />Formatting Link Text<br />
  31. 31. Templates and Style Sheets<br />31<br />Formatting Link Text<br />
  32. 32. Templates and Style Sheets<br />32<br />Maintaining Style Sheets<br />
  33. 33. Open the Web page to which you wish to apply the template<br />Click the Assets tab in the Files group panel to display the assets for the Web site<br />Click the Templates icon in the Assets panel to display the templates for the site<br />Click the desired template<br />Click the Apply button to apply the template<br />Templates and Style Sheets<br />33<br />Applying a Template to a Web Page<br />
  34. 34. Templates and Style Sheets<br />34<br />Applying a Template to a Web Page<br />
  35. 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<br />Select the text in an editable region<br />Type the replacement text<br />Templates and Style Sheets<br />35<br />Editing an Editable Region<br />
  36. 36. Templates and Style Sheets<br />36<br />Editing an Editable Region<br />
  37. 37. Click the Layout tab on the Insert bar and then click the Expanded button to switch to Expanded Tables mode<br />Drag the image file from the Assets panel to the location in the table to display the image<br />Templates and Style Sheets<br />37<br />Adding an Image to a Table in Expanded Tables Mode<br />
  38. 38. Templates and Style Sheets<br />38<br />Adding an Image to a Table in Expanded Tables Mode<br />
  39. 39. Templates and Style Sheets<br />39<br />Specifying Link Targets<br />
  40. 40. Type the desired link text and then select the text<br />Click the Link text box in the Property inspector and then type the desired relative link<br />Click the Target box arrow and then select the desired target<br />Click the desired image to which you want to add a border<br />Click the Border box in the Property inspector and type the desired value<br />Templates and Style Sheets<br />40<br />Adding Targeted Links and Adding Image Borders<br />
  41. 41. Templates and Style Sheets<br />41<br />Adding Targeted Links and Adding Image Borders<br />
  42. 42. Templates and Style Sheets<br />42<br />Adding Targeted Links and Adding Image Borders<br />
  43. 43. Templates and Style Sheets<br />43<br />CSS Style Definition Category Descriptions<br />
  44. 44. Templates and Style Sheets<br />44<br />CSS Style Definition Category Descriptions<br />
  45. 45. Templates and Style Sheets<br />45<br />CSS Style Definition Category Descriptions<br />
  46. 46. Templates and Style Sheets<br />46<br />CSS Style Definition Category Descriptions<br />
  47. 47. Templates and Style Sheets<br />47<br />CSS Style Definition Category Descriptions<br />
  48. 48. Templates and Style Sheets<br />48<br />CSS Style Definition Category Descriptions<br />
  49. 49. Templates and Style Sheets<br />49<br />CSS Style Definition Category Descriptions<br />
  50. 50. Templates and Style Sheets<br />50<br />CSS Style Definition Category Descriptions<br />
  51. 51. Describe a template<br />Create a template<br />Add a banner image to a template<br />Specify editable and noneditable regions in a template<br />Describe different types of style sheets<br />Display the CSS Styles panel<br />Chapter Summary<br />Templates and Style Sheets<br />51<br />
  52. 52. Create a Cascading Style Sheet<br />Apply Cascading Style Sheet attributes to a template<br />Use Expanded Tables mode<br />Create a Web page from a template<br />Specify links targets<br />Describe CSS style properties<br />Templates and Style Sheets<br />52<br />Chapter Summary<br />
  53. 53. Chapter 4 Complete<br />Adobe Dreamweaver CS5<br />

×