Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.
-
Upload
ethel-knight -
Category
Documents
-
view
221 -
download
0
Transcript of Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.
![Page 1: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/1.jpg)
Project 5
Templates and Style Sheets
Dreamweaver MX 2004Concepts and Techniques
![Page 2: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/2.jpg)
Project 5: Templates and Style Sheets 2
Project Objectives
• Describe a template• Create a template• Describe the different types of style sheets• Create a Cascading Style Sheet
![Page 3: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/3.jpg)
Project 5: Templates and Style Sheets 3
Project Objectives
• Apply Cascading Style Sheet attributes to a template
• Create a Web page from a template• Describe and use the Assets panel
![Page 4: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/4.jpg)
Project 5: Templates and Style Sheets 4
Copying Data Files to the Parks Web Site
• Click the Start button on the Windows taskbar and then click My Computer
• Double-click Local Disk (C:) and then navigate to the location of the data files for Project 5
• Double-click the DataFiles folder and then double-click the Proj05 folder
• Double-click the parks folder and then double-click the images folder
![Page 5: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/5.jpg)
Project 5: Templates and Style Sheets 5
Copying Data Files to the Parks Web Site
• Click the first image file in the list, hold down the SHIFT key, and then click the last image file in the list
• Right-click the selected files to display the context menu
• Click the Copy command and then click the My Computer 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
![Page 6: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/6.jpg)
Project 5: Templates and Style Sheets 6
Copying Data Files to the Parks Web Site
• 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
![Page 7: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/7.jpg)
Project 5: Templates and Style Sheets 7
Starting Dreamweaver and Opening the Florida 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 Macromedia Dreamweaver MX 2004 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 Florida Parks on the Files pop-up menu
• Click Florida Parks
![Page 8: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/8.jpg)
Project 5: Templates and Style Sheets 8
Starting Dreamweaver and Opening the Florida Parks Web Site
![Page 9: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/9.jpg)
Project 5: Templates and Style Sheets 9
Creating a New Template Document
• Click New on the File menu• Click Template page in the Category list and then
click HTML template in the Template page list• Click the Create button
![Page 10: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/10.jpg)
Project 5: Templates and Style Sheets 10
Creating a New Template Document
![Page 11: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/11.jpg)
Project 5: Templates and Style Sheets 11
Saving the Web Page as a Template
• Click File on the menu bar and then click Save• Click OK• Type spotlight_parks in the Save as text box• Click the Save button• Click the plus sign to the left of the Templates
folder
![Page 12: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/12.jpg)
Project 5: Templates and Style Sheets 12
Saving the Web Page as a Template
![Page 13: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/13.jpg)
Project 5: Templates and Style Sheets 13
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
![Page 14: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/14.jpg)
Project 5: Templates and Style Sheets 14
Adding a Background Image and Title to the Template Page
• Click the OK button in the Page Properties dialog box
• Click the Title text box, delete Untitled Document, and type Spotlight on Florida Parks as the entry
• Press the ENTER key and then click the Document window
![Page 15: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/15.jpg)
Project 5: Templates and Style Sheets 15
Adding a Background Image and Title to the Template Page
![Page 16: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/16.jpg)
Project 5: Templates and Style Sheets 16
Adding the Logo Image to the Template
• Click the Assets tab in the panel groups. If necessary, click the Images icon. Scroll down 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 and type Florida Parks logo as the entry
• Click to the right of the image to deselect it and then press the ENTER key two times
![Page 17: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/17.jpg)
Project 5: Templates and Style Sheets 17
Adding the Logo Image to the Template
![Page 18: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/18.jpg)
Project 5: Templates and Style Sheets 18
Adding the Park Name and Park Description Prompts for the First Two Editable Regions
• Collapse the panel groups• Type Spotlight on [name of state park] as the heading prompt
• Click the Format box arrow in the Property inspector and apply Heading 2 to the spotlight prompt
• Press the ENTER key• Type Add short description of park as
the prompt for the second editable region and then press the ENTER key
![Page 19: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/19.jpg)
Project 5: Templates and Style Sheets 19
Adding the Park Name and Park Description Prompts for the First Two Editable Regions
![Page 20: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/20.jpg)
Project 5: Templates and Style Sheets 20
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 Insert Table dialog box: 1 for Rows, 2 for Columns, 70 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 0 for Cell spacing. Type Spotlight on Florida Parks 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
![Page 21: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/21.jpg)
Project 5: Templates and Style Sheets 21
Adding and Centering a Table as the Third Editable Region
• Click the Horz box arrow in the Property inspector and then click Center. Click the Vert box 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 description of image to each cell in the table as the prompt.
• Click the right cell. Click Insert on the menu bar, point to Image Objects, and then point to Image Placeholder
• Click Image Placeholder
![Page 22: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/22.jpg)
Project 5: Templates and Style Sheets 22
Adding and Centering a Table as the Third Editable Region
• When the Image Placeholder dialog box is displayed, type add_image in the Name text box as the prompt
• Press the TAB key. Type 64 for the Width• Press the TAB key two times, type #006600 for the
Color, and then press the TAB key• Click the OK button• Click to the right of the table and then press the
ENTER key two times
![Page 23: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/23.jpg)
Project 5: Templates and Style Sheets 23
Adding and Centering a Table as the Third Editable Region
![Page 24: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/24.jpg)
Project 5: Templates and Style Sheets 24
Adding and Centering a Table as the Fourth Editable Region
• Click Insert on the menu bar and then click Table to display the Insert 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 box arrow in the Property inspector, and then center the table
![Page 25: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/25.jpg)
Project 5: Templates and Style Sheets 25
Adding and Centering a Table as the Fourth Editable Region
• Click the left cell and then drag to select both cells in the table
• Click the Horz box arrow in the Property inspector and then click Center. Click the Vert box arrow and then click Middle
• Click the left cell and then type Add additional columns as necessary for links as the prompt. Press CTRL+S to save the file. If a Dreamweaver warning box appears, click the OK button
![Page 26: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/26.jpg)
Project 5: Templates and Style Sheets 26
Adding and Centering a Table as the Fourth Editable Region
![Page 27: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/27.jpg)
Project 5: Templates and Style Sheets 27
Displaying the Insert Bar and Common Category
• If necessary, click Window on the menu bar and then click Insert
• If the Common category is not displayed, click the arrow to the right of the displayed category on the Insert bar and then click Common on the Insert bar pop-up menu
• Click the Property inspector expand/collapse arrow to hide the Property inspector
![Page 28: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/28.jpg)
Project 5: Templates and Style Sheets 28
Displaying the Insert Bar and Common Category
![Page 29: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/29.jpg)
Project 5: Templates and Style Sheets 29
Creating the First Editable Region
• If necessary, scroll to the top and then click to the left of the heading prompt
• Click the <h2> tag in the Tag selector• Click the Templates pop-up menu and point to
Editable Region
![Page 30: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/30.jpg)
Project 5: Templates and Style Sheets 30
Creating the First Editable Region
• Click Editable Region• Type park_name in the Name text box• Click the OK button
![Page 31: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/31.jpg)
Project 5: Templates and Style Sheets 31
Creating the First Editable Region
![Page 32: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/32.jpg)
Project 5: Templates and Style Sheets 32
Creating the Second Editable Region
• Click to the left of the prompt, Add short description of park, in the Document window
• Click the <p> tag in the tag selector. Click the Templates pop-up menu and then click Editable Region
• Type park_description in the Name text box and then click the OK button
![Page 33: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/33.jpg)
Project 5: Templates and Style Sheets 33
Creating the Second Editable Region
![Page 34: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/34.jpg)
Project 5: Templates and Style Sheets 34
Creating the Third and Fourth Editable Regions
• Click in the left cell of the first table and then click the <table> tag in the tag selector
• Click the Editable Region command on the Templates pop-up menu
• Type parks_images in the Name text box, and then click the OK button
![Page 35: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/35.jpg)
Project 5: Templates and Style Sheets 35
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 <table> 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
• Click the Save button
![Page 36: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/36.jpg)
Project 5: Templates and Style Sheets 36
Creating the Third and Fourth Editable Regions
![Page 37: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/37.jpg)
Project 5: Templates and Style Sheets 37
Displaying the Design Panel Group
• Scroll up in the Document window. Click the expand/collapse arrow to expand the panel groups
• Click the Design panel expand/collapse arrow. If necessary, click the CSS Styles tab
![Page 38: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/38.jpg)
Project 5: Templates and Style Sheets 38
Adding a Style and Saving the Style Sheet
• Click the Files panel tab• Click to the left of the text, Spotlight on [name of
state park], in the park_name editable region and then click the <h2> tag in the tag selector
• Click the New CSS Style button• 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
![Page 39: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/39.jpg)
Project 5: Templates and Style Sheets 39
Adding a Style and Saving the Style Sheet
• Verify that (New Style Sheet File) is selected in the Define in: section
• Click the OK button• 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
![Page 40: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/40.jpg)
Project 5: Templates and Style Sheets 40
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 #0029DE, and then
press the TAB key• Click the OK button and then click anywhere in
an editable region on the page to deselect the heading prompt
![Page 41: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/41.jpg)
Project 5: Templates and Style Sheets 41
Adding a Style and Saving the Style Sheet
![Page 42: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/42.jpg)
Project 5: Templates and Style Sheets 42
Creating a Style for the Paragraph Text
• Click to the left of the prompt, Add short description of park, and then click the <p> tag in the tag selector
• Click the New CSS Style 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
![Page 43: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/43.jpg)
Project 5: Templates and Style Sheets 43
Creating a Style for the Paragraph Text
• Click the Weight box arrow and then click bold• Click the Color text box and then type #0029DE
for the color. Press the TAB key• Click the OK button• Click to the right of the paragraph to deselect it
![Page 44: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/44.jpg)
Project 5: Templates and Style Sheets 44
Creating a Style for the Paragraph Text
![Page 45: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/45.jpg)
Project 5: Templates and Style Sheets 45
Adding a Background, Border, and Text Color to a Table
• Click in the first cell of the parks_images table• Click the <table> tag in the tag selector• Click the New CSS Style button in the CSS Styles
panel• Click the OK button
• Click the Font box arrow and then click Arial, Helvetica, sans-serif
![Page 46: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/46.jpg)
Project 5: Templates and Style Sheets 46
Adding a Background, Border, and Text Color to a Table
• 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 #000099 as the color and then press the TAB key
• Click Border in the Category list• Verify that the Same for all check boxes are
selected for Style, Width, and Color
![Page 47: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/47.jpg)
Project 5: Templates and Style Sheets 47
Adding a Background, Border, and Text Color to a Table
• 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 #9CCE9C 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
![Page 48: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/48.jpg)
Project 5: Templates and Style Sheets 48
Adding a Background, Border, and Text Color to a Table
![Page 49: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/49.jpg)
Project 5: Templates and Style Sheets 49
Modifying the A:Link Attribute
• Select the links table• Click the New CSS Style button in the CSS Styles
panel• Click the Advanced (IDs, contextual selectors,
etc) radio button• Click the Selector box arrow, and then point to
a:link• Click a:link
![Page 50: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/50.jpg)
Project 5: Templates and Style Sheets 50
Modifying the A:Link Attribute
• Click the OK button• Click none to select the none Decoration attribute• Click the Color text box, type #FFFFFF, press the
TAB key• Click the OK button
![Page 51: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/51.jpg)
Project 5: Templates and Style Sheets 51
Modifying the A:Link Attribute
![Page 52: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/52.jpg)
Project 5: Templates and Style Sheets 52
Adding the A:Visited Attribute
• Verify that the links table is selected• Click the New CSS Style button in the CSS Styles
panel to display the New CSS Style dialog box• Click the Advanced (IDs, contextual selectors,
etc) radio button• Click the Selector box arrow and then click
a:visited
![Page 53: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/53.jpg)
Project 5: Templates and Style Sheets 53
Adding the A:Visited Attribute
• Click the OK button to display the CSS Style Definition for a:visited in spotlight.css dialog box
• Click the none check box to select the none Decoration attribute
• Type #FFFF00 in the Color text box and then press the TAB key
• Click the OK button
![Page 54: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/54.jpg)
Project 5: Templates and Style Sheets 54
Adding the A:Visited Attribute
![Page 55: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/55.jpg)
Project 5: Templates and Style Sheets 55
Adding the A:Hover Attribute
• Verify that the links table is selected• Click the New CSS Style button in the CSS Styles
panel to display the New CSS Style dialog box• If necessary, click the Advanced (IDs, contextual
selectors, etc) radio button• Click the Selector box arrow and then click
a:hover• Click the OK button to display the CSS Style
Definition for a:hover in spotlight.css dialog box
![Page 56: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/56.jpg)
Project 5: Templates and Style Sheets 56
Adding the A:Hover Attribute
• Type #FFFF00 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 appears, click No. At this point, the template is not attached to any documents
• Close the spotlight_parks template• Click the Save button on the spotlight.css
document and then close the style sheet
![Page 57: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/57.jpg)
Project 5: Templates and Style Sheets 57
Adding the A:Hover Attribute
![Page 58: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/58.jpg)
Project 5: Templates and Style Sheets 58
Creating the Bahia Honda State Park Spotlight Web Page
• Click the Design panel expand/collapse arrow to collapse the panel
• Click File on the menu bar and then click New• Click Basic Page in the New Document dialog
box and then click the Create button• Click the Save button on the Standard toolbar
and then save the page in the parks folder. Use bahia_park.htm as the file name
![Page 59: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/59.jpg)
Project 5: Templates and Style Sheets 59
Creating the Bahia Honda State Park Spotlight Web Page
![Page 60: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/60.jpg)
Project 5: Templates and Style Sheets 60
Applying a Template to the Bahia Honda State Park Web page
• Click the Assets panel tab in the Files group panel
• If necessary, click the Templates icon in the Assets panel
• Click spotlight_parks• Click the Apply button• Collapse the panel groups
![Page 61: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/61.jpg)
Project 5: Templates and Style Sheets 61
Applying a Template to the Bahia Honda State Park Web page
![Page 62: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/62.jpg)
Project 5: Templates and Style Sheets 62
Adding the Park Name and Park Description to the Bahia Honda State Park Web Page
• Select the text and brackets, [name of state park], in the park_name editable region
• Type Bahia Honda State Park as the park name• Select the prompt, Add short description of park, in the
park_description editable region. Type the following text: Bahia Honda, located on Big Pine Key, is unique among other islands in the Keys. The island consists of white, sandy coastline and deep, crystal-clear waters for excellent swimming and snorkeling. Other activities include boating, fishing, camping, and bird-watching.
![Page 63: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/63.jpg)
Project 5: Templates and Style Sheets 63
Adding the Park Name and Park Description to the Bahia Honda State Park Web Page
![Page 64: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/64.jpg)
Project 5: Templates and Style Sheets 64
Adding Rows to the Parks_Images Table
• Click in the left cell of the parks_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
![Page 65: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/65.jpg)
Project 5: Templates and Style Sheets 65
Adding Rows to the Parks_Images Table
![Page 66: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/66.jpg)
Project 5: Templates and Style Sheets 66
Adding Images to the Parks_Images Table
• Select the text in row 1, column 1 of the parks_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 displays, read the information and then click the OK button
• Display the panel groups• Click the Assets tab in the panel groups, and then
click the Images icon
![Page 67: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/67.jpg)
Project 5: Templates and Style Sheets 67
Adding Images to the Parks_Images Table
• Drag the calusa_beach01.jpg image to row 1, column 1 of the parks_images table
• Click to the right of the image• Hold down the SHIFT key and then press the
ENTER key• Type Calusa Beach as the description• Press the TAB key to move the insertion point to
row 1, column 2
![Page 68: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/68.jpg)
Project 5: Templates and Style Sheets 68
Adding Images to the Parks_Images Table
• Press the DELETE key to delete the image placeholder and then drag the calusa_beach02.jpg image to the cell
• Click to the right of the image• Hold down the SHIFT key and then press the
ENTER key• Type Another view of Calusa Beach as
the description
![Page 69: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/69.jpg)
Project 5: Templates and Style Sheets 69
Adding Images to the Parks_Images Table
• Add the four other images and descriptions to the parks_images table as indicated in Table 5-2 on page DW 431
• 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
![Page 70: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/70.jpg)
Project 5: Templates and Style Sheets 70
Adding Images to the Parks_Images Table
• Hide the panel groups• Display the Property inspector• Select the first image in the table and type Bahia Honda Calusa Beach as the Alt text
• Select the second image in the table and type Another view of Bahia Honda Calusa Beach as the Alt text
• Use the Alt Text column in Table 5-2 on page DW 431 to add the Alt text for the other four images
![Page 71: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/71.jpg)
Project 5: Templates and Style Sheets 71
Adding Images to the Parks_Images Table
![Page 72: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/72.jpg)
Project 5: Templates and Style Sheets 72
Adding the Links to the Links Table
• 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 text, and then press the TAB key
• Click the right cell in the links table. Type Bahia Honda State Park as the text for the link and then select the text
![Page 73: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/73.jpg)
Project 5: Templates and Style Sheets 73
Adding the Links to the Links Table
• Click the Link text box in the Property inspector and then type http://www.floridastateparks.org/bahiahonda as the link text
• Click the Target box arrow and select _blank• Click the Save button on the Standard toolbar
![Page 74: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/74.jpg)
Project 5: Templates and Style Sheets 74
Adding the Links to the Links Table
![Page 75: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/75.jpg)
Project 5: Templates and Style Sheets 75
Adding a Link from the State Parks Page to the Bahia Honda State Park Page
• Expand the panel groups and open the state_parks page. If necessary, click the Files tab
• 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 Park as the link text
![Page 76: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/76.jpg)
Project 5: Templates and Style Sheets 76
Adding a Link from the State Parks Page to the Bahia Honda State Park Page
• Select the text and then drag bahia_park.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 state_parks.htm
page in your browser. Scroll down and then click the Featured Park link to view the Bahia Honda State Park Web page
• Verify that the Bahia Honda State Park Web page links work
![Page 77: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/77.jpg)
Project 5: Templates and Style Sheets 77
Adding a Link from the State Parks Page to the Bahia Honda State Park Page
• If instructed to do so, print a copy of the Bahia Honda State Park Web page and hand it in 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
![Page 78: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/78.jpg)
Project 5: Templates and Style Sheets 78
Closing the Web Site and Quitting Dreamweaver
• Click the Close button on the upper-right corner of the Dreamweaver title bar
![Page 79: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/79.jpg)
Project 5: Templates and Style Sheets 79
Project Summary
• Describe a template• Create a template• Describe the different types of style sheets• Create a Cascading Style Sheet
![Page 80: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/80.jpg)
Project 5: Templates and Style Sheets 80
Project Summary
• Apply Cascading Style Sheet attributes to a template
• Create a Web page from a template• Describe and use the Assets panel
![Page 81: Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.](https://reader030.fdocuments.us/reader030/viewer/2022020921/56649e7e5503460f94b8108e/html5/thumbnails/81.jpg)
Project 5 Complete
Templates and Style Sheets
Dreamweaver MX 2004Concepts and Techniques