Project 5 - Las Positas Collegelpc1.laspositascollege.edu/lpc/cdasilva/DW2-Proj5.pdfMacromedia on...

Dreamweaver 8

Project 5Project 5Project 5Project 5

Templates and Style Sheets

Project 5: Templates and Style Sheets 2

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 Macromedia Dreamweaver 8 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


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

• If the Insert bar is not displayed, click Window on

the Insert 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


Saving the Web Page as a Template

• Click File on the menu bar and then click Save

• 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


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

bg.jpg and then click the OK button in the Select

Image Source dialog box


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 Colorado National

Monuments as the entry

• Press the ENTER key. If necessary, click the

Document window


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 Colorado

National Monuments logo as the entry, and

then press the ENTER key

• Click to the right of the image to deselect it and

then press the ENTER key


Adding the Logo Image to the Template


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 box 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


Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions


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 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



• 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 descriptions 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• 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. If necessary, type 32 for the

Height


• 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


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



• 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

• Select the table and name it links. Press the ENTER

key

• Press CTRL+S to save the file. If a Dreamweaver warning

box appears, click the OK button




Creating the First Editable Region

• 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 expander arrow to

hide the Property inspector

• If necessary, scroll to the top and then click to the

left of the heading prompt


Creating the First Editable Region

• Click the <h2> tag in the Tag selector

• Click the Templates pop-up menu arrow and

point to Editable Region

• Click Editable Region

• Type monument_name in the Name text box



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 and then click Editable

Region

• Type monument_description in the Name text

box and then click the OK button


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



• 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





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

• Click Window on the menu bar and then click

CSS Styles


Displaying the Design Panel Group


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 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



• Verify that (New Style Sheet File) is selected in the Define in: section


• 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 Font box arrow, click Arial, Helvetica, sans-serif in the Font list, and then press the TAB key



• 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


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 Font box arrow and then click Arial,

Helvetica, sans-serif

• Click the Size box arrow and then click 12


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 to the right of the paragraph to deselect it


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


panel


• 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

• 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


Modifying the A:Link Attribute

• Select the links table


panel

• Click the Advanced (IDs, pseudo-class selectors)

radio button

• If necessary, click the Define in spotlight.css

radio button

• Click the Selector box arrow, and then point to

a:link



• Click a:link


• Click none to select the none Decoration attribute

• Click the Color text box, type #FFFFFF, and

press the TAB key

• Click the OK Button




Adding the A:Visited Attribute

• Verify that the links table is selected.


panel to display the New CSS Rule dialog box

• 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


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



Adding the A:Hover Attribute

• Verify that the links table is selected


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


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 appears, 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.cssdocument and then close the style sheet


Creating the Dinosaur National Monument Spotlight Web Page

• Click the CSS 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 Category 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


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


Applying a Template to the Dinosaur National Monument Web page


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


Adding the Monument Name and Monument Description to the Dinosaur National

Monument Web Page

• Type Dinosaur National Monument as the monument name

• 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.


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



Adding Images to the Monument_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

• If necessary, click the Assets tab



• 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 will not see the insertion point

until you begin typing

• Type Elephant Toes Mountain as the

description



• 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


ENTER key

• Type Fall cottonwoods along the river

as the description



• Add the four other images and descriptions to the

monument_images table as indicated in Table 5-

2 on page DW 457. 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



• Hide the panel groups

• Display the Property inspector

• Click each image and add the ALT Text as

indicated in Table 5-3 on page DW 457


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 Dinosaur National Monument as the text for the link and

then select the text


Adding the Links to the Links Table

• Click the Link text box in the Property inspector and then type http://www.nps.gov/dino

• Click the Target box arrow and select _blank



Adding a Link from the Monuments Page

to the Dinosaur National Monument Page

• Expand the panel groups and open the

monuments.htm 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


ENTER key

• Type Featured Monument as the link text




• Select the text and then drag dinosaur.htm from the Files panel to the Property inspector Link text box


• Press the F12 key to preview the dinosaur.htmpage 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 on page DW 461

• Verify that the Dinosaur National Monument Web page links work




• 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





Closing the Web Site and Quitting Dreamweaver

• Click the Close button on the upper-right corner

of the Dreamweaver title bar

Date post:	08-Sep-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

Project 5 - Las Positas Collegelpc1.laspositascollege.edu/lpc/cdasilva/DW2-Proj5.pdfMacromedia on...

Documents