AdobeDreamweaver CS5<br />Chapter 4<br />Templates and Style Sheets<br />
Describe a template<br />Create a template<br />Add a banner image to a template<br />Specify editable and noneditable reg...
Create a Cascading Style Sheet<br />Apply Cascading Style Sheet attributes to a template<br />Use Expanded Tables mode<br ...
Templates and Style Sheets<br />4<br />Project – Adding a Template and Applying Styles<br />
Plan the template and Web pages<br />Create a template<br />Identify editable and noneditable regions<br />Design the temp...
Click File on the Application bar and then click New to display the New  Document dialog box<br />If necessary, click Blan...
Type the desired description in the Description text box<br />Type the desired file name in the Save as text box<br />Clic...
Templates and Style Sheets<br />8<br />Creating and Saving a Template<br />
If necessary, click the upper-left corner of the page to display the insertion point<br />Click the Assets tab in the pane...
Templates and Style Sheets<br />10<br />Adding a Banner Image to the Template<br />
Editable region<br />Repeating region<br />Optional region<br />Editable tag<br />Templates and Style Sheets<br />11<br />...
Type the heading prompt below the banner<br />Apply the desired format to the heading prompt<br />Templates and Style Shee...
Click Insert on the Application bar, point to Image Objects and then point to Image Placeholder to prepare for inserting a...
Templates and Style Sheets<br />14<br />Adding an Image Placeholder<br />
If necessary, click the Common tab on the Insert bar to display the Common category<br />Click to the left of the heading ...
Click Editable Region to display the New Editable Region dialog box<br />Type the desired name for the editable region in ...
Cascading Style Sheets, also called CSS and style sheets, are a collection of formatting rules that control the appearance...
The term cascading refers to the capability of applying multiple style sheets to the same Web page<br />An external style ...
Templates and Style Sheets<br />19<br />The CSS Styles Panel<br />
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 />21<br />Defining Style Attributes<br />
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 Styl...
Click the Rule Definition button and then click (New Style Sheet File) to specify that you want to create an external styl...
Click the Save as type arrow and select Style Sheet Files (*.css), if necessary<br />Click the Save button to display the ...
Templates and Style Sheets<br />25<br />Adding a Style and Saving the Style Sheet<br />
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 C...
Click the Font-family box arrow and then click the desired font family<br />Click the Color text box, type the value for t...
Verify that the Same for all check boxes are  selected for Style, Width, and Color to set the same properties to the top, ...
Templates and Style Sheets<br />29<br />Adding a Background, Border, and Text Color to a Table<br />
Click the Page Properties button in the Property inspector to open the Page Properties dialog box<br />Click the Links (CS...
Templates and Style Sheets<br />31<br />Formatting Link Text<br />
Templates and Style Sheets<br />32<br />Maintaining Style Sheets<br />
Open the Web page to which you wish to apply the template<br />Click the Assets tab in the Files group panel to display th...
Templates and Style Sheets<br />34<br />Applying a Template to a Web Page<br />
Move the mouse pointer over the page and note that in the noneditable sections, the pointer changes to a circle with a lin...
Templates and Style Sheets<br />36<br />Editing an Editable Region<br />
Click the Layout tab on the Insert bar and then click the Expanded button to switch to Expanded Tables mode<br />Drag the ...
Templates and Style Sheets<br />38<br />Adding an Image to a Table in Expanded Tables Mode<br />
Templates and Style Sheets<br />39<br />Specifying Link Targets<br />
Type the desired link text and then select the text<br />Click the Link text box in the Property inspector and then type t...
Templates and Style Sheets<br />41<br />Adding Targeted Links and Adding Image Borders<br />
Templates and Style Sheets<br />42<br />Adding Targeted Links and Adding Image Borders<br />
Templates and Style Sheets<br />43<br />CSS Style Definition Category Descriptions<br />
Templates and Style Sheets<br />44<br />CSS Style Definition Category Descriptions<br />
Templates and Style Sheets<br />45<br />CSS Style Definition Category Descriptions<br />
Templates and Style Sheets<br />46<br />CSS Style Definition Category Descriptions<br />
Templates and Style Sheets<br />47<br />CSS Style Definition Category Descriptions<br />
Templates and Style Sheets<br />48<br />CSS Style Definition Category Descriptions<br />
Templates and Style Sheets<br />49<br />CSS Style Definition Category Descriptions<br />
Templates and Style Sheets<br />50<br />CSS Style Definition Category Descriptions<br />
Describe a template<br />Create a template<br />Add a banner image to a template<br />Specify editable and noneditable reg...
Create a Cascading Style Sheet<br />Apply Cascading Style Sheet attributes to a template<br />Use Expanded Tables mode<br ...
Chapter 4 Complete<br />Adobe Dreamweaver CS5<br />
Upcoming SlideShare
Loading in …5
×

CBIS 327 ~ Chapter 04

1,683 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,683
On SlideShare
0
From Embeds
0
Number of Embeds
6
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 />

×