Presentation is loading. Please wait.

Presentation is loading. Please wait.

Dreamweaver CS3 Concepts and Techniques Chapter 5 Templates and Style Sheets.

Similar presentations


Presentation on theme: "Dreamweaver CS3 Concepts and Techniques Chapter 5 Templates and Style Sheets."— Presentation transcript:

1 Dreamweaver CS3 Concepts and Techniques Chapter 5 Templates and Style Sheets

2 Chapter 5: Templates and Style Sheets 2 Chapter Objectives Describe a template Create a template Describe the different types of style sheets

3 Chapter 5: Templates and Style Sheets 3 Chapter Objectives Create a Cascading Style Sheet Apply Cascading Style Sheet attributes to a template Create a Web page from a template

4 Chapter 5: Templates and Style Sheets 4 Copying Data Files to the Local Web Site Click the Start button on the Windows taskbar and then click Computer Double-click Local Disk (C:) and then navigate to the location of the data files for Chapter 5 Double-click the DataFiles folder and then double-click the Chap05 folder Double-click the parks folder and then double- click the images folder Click the first image file in the list, hold down the SHIFT key, and then click the last image file in the list

5 Chapter 5: Templates and Style Sheets 5 Copying Data Files to the Parks Web Site Right-click the selected files to display the context menu Click the Copy command and then click the Back button the number of times necessary to navigate to the your name folder Double-click the your name folder, double-click the parks folder, and then double-click the images folder Right-click in the open window to display the context menu Click the Paste command to paste the image files into the images folder Click the images window Close button

6 Chapter 5: Templates and Style Sheets 6 Starting Dreamweaver and Opening the Colorado Parks Web Site Click the Start button on the Windows taskbar Point to All Programs on the Start menu, point to Macromedia on the All Programs submenu, and then click Adobe Dreamweaver CS3 on the Macromedia submenu If necessary, display the panel groups and expand the Property inspector Click the Files panel box arrow and then point to Colorado Parks on the Files pop-up menu Click Colorado Parks

7 Chapter 5: Templates and Style Sheets 7 Starting Dreamweaver and Opening the Colorado Parks Web Site

8 Chapter 5: Templates and Style Sheets 8 Creating a Template Document Click New on the File menu Click Blank Template and then click HTML template in the Template Type list Click the Create button If the Insert bar is not displayed, click Window on the Insert bar and then click Insert If the Common category is not selected, click the Common category tab

9 Chapter 5: Templates and Style Sheets 9 Creating a New Template Document

10 Chapter 5: Templates and Style Sheets 10 Saving the Web Page as a Template Click File on the menu bar and then click Save. If a Dreamweaver Warning box is displayed, click OK Type spotlight_monuments in the Save as text box Click the Save button Click the plus sign to the left of the Templates folder

11 Chapter 5: Templates and Style Sheets 11 Saving the Web Page as a Template

12 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 Click the Browse button to the right of the Background image box If necessary, navigate to the images folder. Click parksbg.gif and then click the OK button in the Select Image Source dialog box Click the OK button in the Page Properties dialog box. Click the Title text box, delete Untitled Document, and type Spotlight on Colorado National Monuments as the entry Press the ENTER key. If necessary, click the Document window

13 Chapter 5: Templates and Style Sheets 13 Adding a Background Image and Title to the Template Page

14 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.gif file Drag the logo.gif image to the top-left corner of the Document window Click the Alt text box, type Colorado 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

15 Chapter 5: Templates and Style Sheets 15 Adding the Logo Image to the Template

16 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 Type Spotlight on [name of national monument] as the heading prompt Click the Format button arrow in the Property inspector and apply Heading 2 to the spotlight prompt Press the ENTER key Type Add short description of monument as the prompt for the second editable region. Bold the text and then press the ENTER key

17 Chapter 5: Templates and Style Sheets 17 Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions

18 Chapter 5: Templates and Style Sheets 18 Adding and Centering a Table as the Third Editable Region Click Insert on the menu 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 Colorado national monuments as the Summary text Click the OK button Click the Align box arrow in the Property inspector, and then click Center to center the table Click the left cell in the table and then drag to select both cells in the table

19 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 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 Click in the right cell. Click Insert on the menu bar, point to Image Objects, and then point to Image Placeholder Click Image Placeholder. In the Image Placeholder dialog box, type add_image in the Name text box as the prompt

20 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 Click in the tag selector and type spotlight in the Table Id box. Press the ENTER key Click to the right of the table and then press the ENTER key two times

21 Chapter 5: Templates and Style Sheets 21 Adding and Centering a Table as the Third Editable Region

22 Chapter 5: Templates and Style Sheets 22 Adding and Centering a Table as the Fourth Editable Region Click Insert on the menu 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

23 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

24 Chapter 5: Templates and Style Sheets 24 Adding and Centering a Table as the Fourth Editable Region

25 Chapter 5: Templates and Style Sheets 25 Creating the First Editable Region If necessary, click the Common tab Click the Property inspector expander arrow to hide the Property inspector If necessary, scroll to the top and then click to the left of the heading prompt Click the tag in the Tag selector

26 Chapter 5: Templates and Style Sheets 26 Creating the First Editable Region Click the Templates pop-up menu arrow and point to Editable Region Click Editable Region Type monument_name in the Name text box Click the OK button

27 Chapter 5: Templates and Style Sheets 27 Creating the First Editable Region

28 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 tag in the tag selector. Click the Templates pop-up menu arrow and then click Editable Region Type monument_description in the Name text box and then click the OK button

29 Chapter 5: Templates and Style Sheets 29 Creating the Second Editable Region

30 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 tag in the tag selector Click the Editable Region command on the Templates pop-up menu Type monument_images in the Name text box, and then click the OK button

31 Chapter 5: Templates and Style Sheets 31 Creating the Third and Fourth Editable Regions If necessary, scroll down to display the second table, click in the left cell of the second table, click the tag in the tag selector, and then click the Editable Region command on the Templates pop-up menu Type links in the Name text box and then click the OK button If necessary, display the Standard toolbar and then click the Save button

32 Chapter 5: Templates and Style Sheets 32 Creating the Third and Fourth Editable Regions

33 Chapter 5: Templates and Style Sheets 33 Displaying the Design Panel Group Click the expand/ collapse arrow to expand the panel groups Move the mouse pointer over the vertical bar until it turns to a two-headed arrow Drag the vertical bar about 1⁄2 inch to the left to increase the width of the panel groups If necessary, click Window on the menu bar and then click CSS Styles. Otherwise, click the CSS panel arrow

34 Chapter 5: Templates and Style Sheets 34 Displaying the Design Panel Group

35 Chapter 5: Templates and Style Sheets 35 Adding a Style and Saving the Style Sheet Click the Files panel tab Click to the left of the text, Spotlight on [name of national monument], in the monument_name editable region and then click the tag in the tag selector Click the New CSS Rule button If necessary, click the Tag (redefines the look of a specific tag) radio button to select it Click the Tag box and type h2 as the tag name

36 Chapter 5: Templates and Style Sheets 36 Adding a Style and Saving the Style Sheet If necessary, click the (New Style Sheet File) in the Define in: section Click the OK button If necessary, click the Save in box arrow and then click the parks folder name. Click the File name text box and then type spotlight as the style sheet name Click the Save button Click the Font box arrow; click Arial, Helvetica, sans-serif in the Font list; and then press the TAB key

37 Chapter 5: Templates and Style Sheets 37 Adding a Style and Saving the Style Sheet Click the Size box arrow, click 24 in the Size list, and then press the TAB key two times Click the Weight box arrow, click bolder, and then press the TAB key Click the Style box arrow and then click italic Click the Color text box, type #420000, and then press the TAB key Click the OK button and then click anywhere in the monument_name editable region to deselect the heading prompt

38 Chapter 5: Templates and Style Sheets 38 Adding a Style and Saving the Style Sheet

39 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 tag in the tag selector Click the New CSS Rule button in the CSS Styles panel Click the OK button Click the Font box arrow and then click Arial, Helvetica, sans-serif Click the Size box arrow and then click 12

40 Chapter 5: Templates and Style Sheets 40 Creating a Style for the Paragraph Text Click the Weight box arrow and then click bold Click the Color text box and then type #420000 for the color. Press the TAB key Click the OK button Click to the right of the paragraph to deselect it

41 Chapter 5: Templates and Style Sheets 41 Creating a Style for the Paragraph Text

42 Chapter 5: Templates and Style Sheets 42 Adding a Background, Border, and Text Color to a Table Click in the first cell of the monument_images table Click the tag in the tag selector Click the New CSS Rule button in the CSS Styles panel If necessary, click the Tag (redefines the look of a specific tag) radio button If necessary, select and delete the text #spotlight in the Tag box and then type table

43 Chapter 5: Templates and Style Sheets 43 Adding a Background, Border, and Text Color to a Table Click the OK button Click the Font box arrow and then click Arial, Helvetica, sans-serif Click the Color text box, type #FFFFFF, and then press the TAB key Click Background in the Category list Click the Background color text box, type #420000 as the color, and then press the TAB key

44 Chapter 5: Templates and Style Sheets 44 Adding a Background, Border, and Text Color to a Table Click Border in the Category list Verify that the Same for all check boxes are selected for Style, Width, and Color Click the Top box arrow and then click groove in the Top pop-up menu Click the Width box arrow and then click thick in the Width pop-up menu Click the top text box in the Color area and then type #CC9900 for the border color. Press the TAB key Click the OK button and then, if necessary, scroll down in the Document window to display both tables

45 Chapter 5: Templates and Style Sheets 45 Adding a Background, Border, and Text Color to a Table

46 Chapter 5: Templates and Style Sheets 46 Modifying the A:Link Attribute Select the links table Click the New CSS Rule button in the CSS Styles panel If necessary, click the Advanced (IDs, pseudoclass selectors) radio button If necessary, click the Define in spotlight.css radio button Click the Selector box arrow, and then point to a:link

47 Chapter 5: Templates and Style Sheets 47 Modifying the A:Link Attribute Click a:link Click the OK button Click the none check box to select the none Decoration attribute Click the Color text box, type #FFFFFF, and press the TAB key Click the OK button

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

49 Chapter 5: Templates and Style Sheets 49 Adding the A:Visited Attribute Verify that the links table is selected Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box If necessary, click the Advanced (IDs, pseudo- class selectors) radio button Verify that the Define in spotlight.css radio button is selected Click the Selector box arrow and then click a:visited

50 Chapter 5: Templates and Style Sheets 50 Adding the A:Visited Attribute Click the OK button to display the CSS Rule Definition dialog box Click the none check box to select the none Decoration attribute Type #CC9900 in the Color text box and then press the TAB key (Figure 5-68) Click the OK button

51 Chapter 5: Templates and Style Sheets 51 Adding the A:Visited Attribute

52 Chapter 5: Templates and Style Sheets 52 Adding the A:Hover Attribute Verify that the links table is selected Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box If necessary, click the Advanced (IDs, pseudo- class selectors) radio button Click the Selector box arrow and then click a:hover Click the OK button to display the CSS Rule Definition for a:hover in spotlight.css dialog box

53 Chapter 5: Templates and Style Sheets 53 Adding the A:Hover Attribute Type #FFCC66 in the Color text box and then press the TAB key. Click the none check box to select the none Decoration attribute Click the OK button and then click the Save button on the Standard toolbar If a Dreamweaver warning dialog box is displayed, click No. At this point, the template is not attached to any documents Close the spotlight_monuments template Click the Save button on the spotlight.css document and then close the style sheet

54 Chapter 5: Templates and Style Sheets 54 Adding the A:Hover Attribute

55 Chapter 5: Templates and Style Sheets 55 Creating the Dinosaur National Monument Spotlight Web Page Click the CSS panel expand/collapse arrow to collapse the panel. If necessary, click Files to expand the Files panel Click File on the menu bar and then click New Click Blank Page in the New Document dialog box, verify that HTML is selected in the Page Type column, and then click the Create button Click the Save button on the Standard toolbar and then save the page in the parks folder. Use dinosaur.htm as the file name If necessary, collapse the Property inspector

56 Chapter 5: Templates and Style Sheets 56 Creating the Dinosaur National Monument Spotlight Web Page

57 Chapter 5: Templates and Style Sheets 57 Applying a Template to the Dinosaur National Monument Web page Click the Assets panel tab in the Files group panel If necessary, click the Templates icon in the Assets panel Click spotlight_monuments Click the Apply button Collapse the panel groups

58 Chapter 5: Templates and Style Sheets 58 Applying a Template to the Dinosaur National Monument Web page

59 Chapter 5: Templates and Style Sheets 59 Adding the Monument Name and Monument Description to the Dinosaur National Monument Web Page If necessary, click anywhere on the document. Move the mouse pointer over the page and note that in the non-editable sections, the pointer changes to a circle with a line through the middle. This icon indicates that this is a non-editable area Select the text and brackets, [name of national monument], in the monument_name editable region Type Dinosaur National Monument as the monument name

60 Chapter 5: Templates and Style Sheets 60 Adding the Monument Name and Monument Description to the Dinosaur National Monument Web Page Select the prompt, Add short description of monument, in the monument_description editable region. Type the following text: Dinosaur National Monument spans the Colorado/Utah border in the northwest corner of Colorado. The Quarry Area contains a collection of some 1,600 fossilized dinosaur bones from 11 different dinosaur species. Visitors can view the bone displays by visiting the Douglas Quarry and Visitor Center. Program events and nature tours are available through the Center

61 Chapter 5: Templates and Style Sheets 61 Adding the Monument Name and Monument Description to the Dinosaur National Monument Web Page

62 Chapter 5: Templates and Style Sheets 62 Adding Rows to the Monument_images Table Click in the left cell of the monument_images table. Click Modify on the menu bar, point to Table, and then point to Insert Rows or Columns Click Insert Rows or Columns Double-click the Number of Rows text box and then type 2 for the number of rows Click the OK button

63 Chapter 5: Templates and Style Sheets 63 Adding Rows to the Monument_images Table

64 Chapter 5: Templates and Style Sheets 64 Adding Images to the Monument_images Table Select the text in row 1, column 1 of the monument_images table and then press the DELETE key Press the F6 key to switch to Expanded Tables mode If a Getting Started in Expanded Tables Mode dialog box is displayed, read the information and then click the OK button Display the panel groups If necessary, click the Assets tab

65 Chapter 5: Templates and Style Sheets 65 Adding Images to the Monument_images Table Click the Images icon in the Assets panel Drag the elephant_toes.jpg file to row 1, column 1 of the monument_images table Click to the right of the image Hold down the SHIFT key and then press the ENTER key. You may not see the insertion point until you begin typing Type Elephant Toes Mountain as the description

66 Chapter 5: Templates and Style Sheets 66 Adding Images to the Monument_images Table Press the TAB key to move the insertion point to row 1, column 2 Press the DELETE key to delete the image placeholder and then drag the fall_cottonwoods.jpg file to the cell Click to the right of the image Hold down the SHIFT key and then press the ENTER key Type Fall cottonwoods along the river as the description

67 Chapter 5: Templates and Style Sheets 67 Adding Images to the Monument_images Table Add the four other images and descriptions to the monument_images table as indicated in Table 5- 2. Scroll as necessary Drag each image to the appropriate table cell, click to the right of the image, hold down SHIFT and press the ENTER key, and then type the description Press the TAB key to move from cell to cell Press the F6 key to exit from Expanded Tables mode

68 Chapter 5: Templates and Style Sheets 68 Adding Images to the Monument_images Table Hide the panel groups Display the Property inspector Click each image and add the Alt text as indicated in Table 5-3

69 Chapter 5: Templates and Style Sheets 69 Adding Images to the Monument_images Table

70 Chapter 5: Templates and Style Sheets 70 Adding the Links to the Links Table If necessary, scroll down to display the links table. Select the text in the left cell of the links table and then press the DELETE key Type Home as the text link in the left cell and then select the text Click the Link text box in the Property inspector, type index.htm as the link, and then press the TAB key Click the right cell in the links table. Type Dinosaur National Monument as the text for the link and then select the text

71 Chapter 5: Templates and Style Sheets 71 Adding the Links to the Links Table Click the Link text box in the Property inspector and then type http://www.nps.gov/dino as the entry Click the Target box arrow and select _blank Click the Save button on the Standard toolbar

72 Chapter 5: Templates and Style Sheets 72 Adding the Links to the Links Table

73 Chapter 5: Templates and Style Sheets 73 Adding a Link from the Monuments Page to the Dinosaur National Monument Page Expand the panel groups and if necessary, click the Files tab. Open the monuments.htm page Scroll to the bottom of the page and then click to the right of the Home link. Press the END key Hold down the SHIFT key and then press the ENTER key Type Featured Monument as the link text

74 Chapter 5: Templates and Style Sheets 74 Adding a Link from the Monuments Page to the Dinosaur National Monument Page Select the text and then drag dinosaur.htm from the Files panel to the Property inspector Link text box Click the Save button on the Standard toolbar Press the F12 key to preview the monuments.htm page in your browser. Scroll down and then click the Featured Monument link to view the Dinosaur National Monument Web page, as shown in Figure 5-92 Verify that the Dinosaur National Monument Web page links work

75 Chapter 5: Templates and Style Sheets 75 Adding a Link from the Monuments Page to the Dinosaur National Monument Page If instructed to do so, print a copy of the Dinosaur National Monument Web page and submit it to your instructor If instructed to do so, upload your Web site to a remote server. Appendix C contains information on uploading to a remote server. A remote folder is required before you can upload to a remote server. Generally, the remote folder is defined by the Web server administrator or your instructor Close the browser

76 Chapter 5: Templates and Style Sheets 76 Adding a Link from the Monuments Page to the Dinosaur National Monument Page

77 Chapter 5: Templates and Style Sheets 77 Closing the Web Site and Quitting Dreamweaver Click the Close button on the upper-right corner of the Dreamweaver title bar

78 Chapter 5: Templates and Style Sheets 78 Chapter Summary Describe a template Create a template Describe the different types of style sheets

79 Chapter 5: Templates and Style Sheets 79 Chapter Summary Create a Cascading Style Sheet Apply Cascading Style Sheet attributes to a template Create a Web page from a template

80 Dreamweaver CS3 Concepts and Techniques Chapter 5 Complete Templates and Style Sheets


Download ppt "Dreamweaver CS3 Concepts and Techniques Chapter 5 Templates and Style Sheets."

Similar presentations


Ads by Google