Dreamweaver CS3
Concepts and Techniques
Chapter 5
Templates and Style Sheets
Chapter Objectives
• Describe a template
• Create a template
• Describe the different types of style sheets
Chapter 5: Templates and Style Sheets
2
Chapter Objectives
• 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
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 doubleclick 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
Chapter 5: Templates and Style Sheets
4
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
Chapter 5: Templates and Style Sheets
5
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
Chapter 5: Templates and Style Sheets
6
Starting Dreamweaver and Opening the
Colorado Parks Web Site
Chapter 5: Templates and Style Sheets
7
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
Chapter 5: Templates and Style Sheets
8
Creating a New Template Document
Chapter 5: Templates and Style Sheets
9
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
Chapter 5: Templates and Style Sheets
10
Saving the Web Page as a Template
Chapter 5: Templates and Style Sheets
11
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
Chapter 5: Templates and Style Sheets
12
Adding a Background Image and Title to
the Template Page
Chapter 5: Templates and Style Sheets
13
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
Chapter 5: Templates and Style Sheets
14
Adding the Logo Image
to the Template
Chapter 5: Templates and Style Sheets
15
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
Chapter 5: Templates and Style Sheets
16
Adding the Monument Name and Monument Description Prompts
for the First Two Editable Regions
Chapter 5: Templates and Style Sheets
17
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
Chapter 5: Templates and Style Sheets
18
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
Chapter 5: Templates and Style Sheets
19
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 <table> 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
Chapter 5: Templates and Style Sheets
20
Adding and Centering a Table
as the Third Editable Region
Chapter 5: Templates and Style Sheets
21
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
Chapter 5: Templates and Style Sheets
22
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
23
Adding and Centering a Table as the
Fourth Editable Region
Chapter 5: Templates and Style Sheets
24
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 <h2> tag in the Tag selector
Chapter 5: Templates and Style Sheets
25
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
Chapter 5: Templates and Style Sheets
26
Creating the First Editable Region
Chapter 5: Templates and Style Sheets
27
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. 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
Chapter 5: Templates and Style Sheets
28
Creating the Second Editable Region
Chapter 5: Templates and Style Sheets
29
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
• 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
Chapter 5: Templates and Style Sheets
30
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#links> 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
Chapter 5: Templates and Style Sheets
31
Creating the Third and Fourth Editable
Regions
Chapter 5: Templates and Style Sheets
32
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
Chapter 5: Templates and Style Sheets
33
Displaying the Design Panel Group
Chapter 5: Templates and Style Sheets
34
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 <h2> 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
Chapter 5: Templates and Style Sheets
35
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
Chapter 5: Templates and Style Sheets
36
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
Chapter 5: Templates and Style Sheets
37
Adding a Style
and Saving the Style Sheet
Chapter 5: Templates and Style Sheets
38
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
• 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
Chapter 5: Templates and Style Sheets
39
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
Chapter 5: Templates and Style Sheets
40
Creating a Style
for the Paragraph Text
Chapter 5: Templates and Style Sheets
41
Adding a Background, Border, and Text
Color to a Table
• Click in the first cell of the monument_images
table
• Click the <table#spotlight> 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
Chapter 5: Templates and Style Sheets
42
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
Chapter 5: Templates and Style Sheets
43
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
Chapter 5: Templates and Style Sheets
44
Adding a Background, Border, and Text
Color to a Table
Chapter 5: Templates and Style Sheets
45
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
Chapter 5: Templates and Style Sheets
46
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
Chapter 5: Templates and Style Sheets
47
Modifying the A:Link Attribute
Chapter 5: Templates and Style Sheets
48
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, pseudoclass selectors) radio button
• Verify that the Define in spotlight.css radio button
is selected
• Click the Selector box arrow and then click
a:visited
Chapter 5: Templates and Style Sheets
49
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
Chapter 5: Templates and Style Sheets
50
Adding the A:Visited Attribute
Chapter 5: Templates and Style Sheets
51
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, pseudoclass 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
Chapter 5: Templates and Style Sheets
52
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
Chapter 5: Templates and Style Sheets
53
Adding the A:Hover Attribute
Chapter 5: Templates and Style Sheets
54
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
Chapter 5: Templates and Style Sheets
55
Creating the Dinosaur National Monument
Spotlight Web Page
Chapter 5: Templates and Style Sheets
56
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
Chapter 5: Templates and Style Sheets
57
Applying a Template to the Dinosaur
National Monument Web page
Chapter 5: Templates and Style Sheets
58
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
Chapter 5: Templates and Style Sheets
59
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
Chapter 5: Templates and Style Sheets
60
Adding the Monument Name and Monument Description to
the Dinosaur National
Monument Web Page
Chapter 5: Templates and Style Sheets
61
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
Chapter 5: Templates and Style Sheets
62
Adding Rows to the
Monument_images Table
Chapter 5: Templates and Style Sheets
63
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
Chapter 5: Templates and Style Sheets
64
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
Chapter 5: Templates and Style Sheets
65
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
Chapter 5: Templates and Style Sheets
66
Adding Images
to the Monument_images Table
• Add the four other images and descriptions to the
monument_images table as indicated in Table 52. 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
Chapter 5: Templates and Style Sheets
67
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
Chapter 5: Templates and Style Sheets
68
Adding Images
to the Monument_images Table
Chapter 5: Templates and Style Sheets
69
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
Chapter 5: Templates and Style Sheets
70
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
Chapter 5: Templates and Style Sheets
71
Adding the Links to the Links Table
Chapter 5: Templates and Style Sheets
72
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
Chapter 5: Templates and Style Sheets
73
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
Chapter 5: Templates and Style Sheets
74
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
Chapter 5: Templates and Style Sheets
75
Adding a Link from the Monuments Page to the
Dinosaur National Monument Page
Chapter 5: Templates and Style Sheets
76
Closing the Web Site
and Quitting Dreamweaver
• Click the Close button on the upper-right corner
of the Dreamweaver title bar
Chapter 5: Templates and Style Sheets
77
Chapter Summary
• Describe a template
• Create a template
• Describe the different types of style sheets
Chapter 5: Templates and Style Sheets
78
Chapter Summary
• 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
79
Dreamweaver CS3
Concepts and Techniques
Chapter 5 Complete
Templates and Style Sheets