1 / 75

Chapter 5

Chapter 5. Templates and Style Sheets. 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.

helki
Télécharger la présentation

Chapter 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 Chapter 5: Templates and Style Sheets

  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

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

  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 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 Chapter 5: Templates and Style Sheets

  7. Copying Data Files to the Parks Web Site 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 Chapter 5: Templates and Style Sheets

  9. Creating a New Template Document 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 Chapter 5: Templates and Style Sheets

  11. Saving the Web Page as a Template 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 Chapter 5: Templates and Style Sheets

  13. Adding a Background Image and Title to the Template Page 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 Chapter 5: Templates and Style Sheets

  15. Adding the Logo Image to the Template 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 Chapter 5: Templates and Style Sheets

  17. Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions 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 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 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 <table> 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 Chapter 5: Templates and Style Sheets

  21. Adding and Centering a Table as the Third Editable Region 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 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 Chapter 5: Templates and Style Sheets

  24. Adding and Centering a Table as the Fourth Editable Region 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 <h2> tag in the Tag selector to select the prompt for the title 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 Chapter 5: Templates and Style Sheets

  27. Creating the First Editable Region 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 <p> 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 Chapter 5: Templates and Style Sheets

  29. Creating the Second Editable Region 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 <table#spotlight> 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 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 <table#links> 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 Chapter 5: Templates and Style Sheets

  32. Creating the Third and Fourth Editable Regions 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 Chapter 5: Templates and Style Sheets

  34. Displaying the CSS Styles Panel 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 <h2> 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 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 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 Chapter 5: Templates and Style Sheets

  38. Adding a Style and Saving the Style Sheet 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 <p> 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) 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 Chapter 5: Templates and Style Sheets

  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

  42. Creating a Style for the Paragraph Text 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 <table#spotlight> 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 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 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 Chapter 5: Templates and Style Sheets

  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 <table#spotlight> 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

  47. Adding a Background, Border, and Text Color to a Table 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 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 Chapter 5: Templates and Style Sheets

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

More Related