Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts and Techniques.

Project 2

Adding Web Pages, Links, and Images

Dreamweaver MX 2004Concepts and Techniques

Project 2: Adding Web Pages, Links, and Images 2

Project Objectives

• Define and set a home page• Add pages to a Web site• Describe Dreamweaver’s image accessibility

features• Describe image file formats


Project Objectives

• Insert, resize, and align images within a Web page

• Describe the different types of links• Create a relative, absolute, and e-mail link• Describe how to change the color of links


Project Objectives

• Edit and delete links• Describe and display the Site Map• Describe Code view, Split view, and Design view• View Code view


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 2

• Double-click the DataFiles folder and then double-click the Proj02 folder

• Double-click the parks folder and then double-click the images folder



• Click the alligator image file or the first file in the list

• Hold down the SHIFT key and then click the poncedeleon image file, or the last 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

• Right-click anywhere in the open window to display the context menu

• Click the Paste command• Click the images window Close button




Starting Dreamweaver and Opening the 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

• Click the Files panel box arrow and point to Florida Parks on the Files pop-up menu

• Click Florida Parks


Starting Dreamweaver and Opening the Parks Web Site


Opening a Web Page from a Local Web Site

• Double-click index.htm in the Files panel

• If necessary, click View on the menu bar, point to Toolbars, and then click Standard


Setting a Home Page

• Right-click the index.htm file name in the Files panel

• Point to Set as Home Page

• Click Set as Home Page on the context menu


Opening a New Document Window

• Click File on the menu bar and then point to New• Click New. If necessary, click the General tab and

then click Basic page in the Category list• If necessary, click HTML in the Basic page list• Click the Create button



• Click the Save button on the Standard toolbar

• Type national for the file name

• Click the Save button


Preparing the Workspace

• Click the expand/collapse arrow on the panel groups vertical bar

• Click the Property inspector expander arrow


Creating the National Parks Web Page

• Type the heading Florida National Parks as shown in the table on the next slide. Press the ENTER key

• Type the subheading Experience the Real Florida! As shown in the table on the next slide, and then press the ENTER key

• Type the rest of the text as shown in the table on the next slide. Press the ENTER key and insert line breaks as indicated in the instructions






Formatting the Florida National Parks Page

• If necessary, expand the Property inspector, scroll up to the top of the Web page, and then apply Heading 1 to the heading text

• Apply Heading 2 to the subheading text• Center the heading and subheading• Add bullets to the following three lines:

Everglades National Park, Biscayne National Park, and Dry Tortugas National Park



• Bold each of these three lines: Everglades National Park, Biscayne National Park, and Dry Tortugas National Park

• Add two line breaks after the text describing the Everglades National Park and two line breaks after the text describing the Biscayne National Park

• Type Florida National Parks as the Web page title

• Save the national.htm Web page• Press F12 to view the page in the browser and to

verify that the line spacing is correct, as shown in the figure on the following slide. Close the browser





• Click File on the menu bar and then point to New• Click New. If necessary, click the General tab and

then click Basic page in the Category list• If necessary, click HTML in the Basic page list• Click the Create button• Save the Web page as state_parks.htm in the

parks folder




Creating the State Parks Web Page

• Type the text of the Web page as shown below:


Creating the State Parks Web Page


Formatting the Florida State Parks Page

• If necessary, scroll to the top of the Web page and then apply Heading 1 to the heading

• Apply Heading 2 to the subheading• Center the heading and subheading• Bold the names of each of the three parks where

they are used as subtitles



• Type Florida State Parks - NW as the Web page title

• Click the Save button on the Standard toolbar• Press F12 to view the page in the browser and to

verify that the line spacing is correct, as shown in the figure on the following slide

• Close the browser




Adding a Background Image to the National Parks Web Page

• Click the national.htm tab• 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





Adding a Background Image to the State Parks Web Page

• Click the state_parks.htm tab• Click Modify on the menu bar and then click Page

Properties• Click the Browse button to the right of the

Background image box



• 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





Set Invisible Element Preferences and Turn on Visual Aids

• Click Edit on the menu bar and then click Preferences

• Click Invisible Elements in the Category list• Click the Anchor points for aligned elements

check box



• Click the OK button• Click View on the menu bar, point to Visual Aids,

and then point to Invisible Elements• Click Invisible Elements




Inserting an Image into the Index Page

• Click the index.htm page tab. If necessary, scroll to the top of the page

• Click the vertical bar expand/collapse arrow to display the panel groups

• If necessary, click the Assets panel tab. Verify that the Images icon is selected

• Click alligator.gif in the Assets panel



• If necessary, scroll to the top of the page in the index Document window

• Drag alligator.gif from the Assets panel to the left of the first line of the first paragraph. Do not release the mouse button

• Release the mouse button and then click the alligator image to select it if necessary




Aligning an Image

• If necessary, click the alligator image to select it and then click the Align box arrow in the Property inspector. Point to Right on the pop-up menu

• Click Right


Adjusting the Horizontal and Vertical Space

• Click the image to remove the highlighting• Click the V Space text box and type 6 as the

vertical space• Press the TAB key and type 12 as the horizontal

space. Press the TAB key


Adjusting the Horizontal and Vertical Space


Adding Alt Text

• If necessary, click the alligator image to select it. Click the Alt box and then type Florida alligator as the alternate text

• Press the TAB key• If necessary, click the image to deselect the

highlighting


Adding Alt Text


Inserting the Sailboat Image

• Scroll down and position the insertion point so it is to the left of the sentence introducing the bulleted list

• Click the boat image in the Assets panel and then drag the boat.gif image to the insertion point.

• Click the Align box arrow and then click Left in the Align pop-up menu

• Click the V Space box and type 6 as the vertical space

• Click the H Space box and type 20 as the horizontal space



• Press the TAB key• Click anywhere in the Document window to

deselect the image• Click the image to select it• Click the Alt box and type Sailboat as the

alternate text• Press the ENTER key



• Click the Save button on the Standard toolbar• Press the F12 key• Move the mouse point over the alligator and

sailboat images to display the Alt text• Close the browser to return to Dreamweaver




Inserting and Aligning an Image in the National Parks Web Page

• Click the national.htm Web page tab• If necessary, scroll to the top of the page.

Position the insertion point between the bullet and the text heading of the second bulleted item (Biscayne National Park)

• Drag the florida.gif file from the Assets panel to the insertion point and then, if necessary, click the image to select it

• Click the Align box arrow and then click Right



• Click the V Space box and type 8 as the vertical space

• Click the H Space box and type 10 as the horizontal space

• Click the Alt box and type Florida Map as the alternate text



• Press the ENTER key• Click the Save button on the Standard toolbar• Press the F12 key• Close the browser to return to Dreamweaver




Inserting and Aligning Images in the State Parks Web Page

• Click the state_parks.htm Web page tab• If necessary, scroll to the top of the document.

Position the insertion point to the left of Blackwater River State Park

• Drag the blackwater.gif file from the Assets panel to the insertion point

• If necessary, click the image to select it and then click the Align box arrow in the Property inspector

• Click Left on the Align pop-up menu



• Click the V Space box and then type 8 as the vertical space

• Click the H Space box and then type 10 as the horizontal space

• Click the Alt box, type Blackwater River State Park as the alternate text, and then press the ENTER key

• If necessary, scroll down and then position the insertion point to the right of the word, park, in the last line in the Ponce de Leon Spring State Park paragraph

• Drag the poncedeleon.gif image to the insertion point and then, if necessary, select the image



• Click the Align box arrow and then click Right on the Align pop-up menu



• Click the Alt box, type Ponce de Leon Spring State Park as the alternate text, and then press the ENTER key

• Position the insertion point to the left of the words, Falling Waters State Park



• Drag the falling_waters.gif image from the Assets panel to the insertion point and then, if necessary, select the image

• Click the Align box arrow and then click Left on the Align pop-up menu



• Click the Alt box, type Falling Waters State Park as the alternate text, and then press the ENTER key



• Click anywhere on the page to deselect the image

• Click the Save button on the Standard toolbar• Press the F12 key• Close the browser




Cropping and Modifying Brightness/Contrast of an Image

• If necessary, select the falling waters image• Click the Crop Tool icon in the Property inspector.

If a Dreamweaver MX 2004 caution dialog box displays, click the OK button

• Click the crop handle in the lower-right corner and adjust the handles until the bounding box surrounds the area of the image similar to that shown in Figure 2-58 on page DW 160

• Double-click inside the bounding box



• Click the image• Click the Brightness and Contrast tool. If a

Dreamweaver MX 2004 caution dialog box displays, click the OK button

• Drag the Brightness slider to the left and adjust the setting to -10

• Drag the Contrast slider to the right and adjust the setting to 20



• Click the OK button• Click the Save button on the Standard toolbar• Press the F12 key to view the cropped image in

your browser• Close the browser to return to the Dreamweaver

window




Adding Text for Relative Links

• Click the Files panel tab• Click the index.htm tab in the Document window.

If necessary, scroll to the top of the page and then position the insertion point at the end of the title, Discovering Scenic Florida

• Press the ENTER key



• If necessary, click the Text Color hexadecimal box, select the hexadecimal number, press the DELETE key, and then press the ENTER key

• Type National Parks and then press the SPACEBAR

• Hold down the SHIFT key and then press the vertical line key (|). Press the SPACEBAR and then type State Parks as the second link




Creating a Relative Link Using Drag-and-Drop

• Drag to select the text, National Parks• Drag the national.htm file from the Files panel to

the Link box in the Property inspector. Do not release the mouse button

• Release the mouse button. Click National Parks to display the linked text


Creating a Relative Link Using Drag-and-Drop


Creating a Relative Link Using the Context Menu

• Drag to select the text, State Parks, and right-click to display the context menu. Point to Make Link

• Click the Make Link command and click state_parks

• Click the OK button and then click the selected text, State Parks, to display the link




• Press the F12 key to view the index page in your browser

• Click the National Parks link and then click the browser Back button

• Click the State Parks link• Close the browser




Creating a Relative Link to the Home Page

• Click the national.htm tab and then scroll to the bottom of the page. Drag to select Home

• Drag the index.htm file name from the Files panel to the Link box

• Click the text, Home, to display the link• Click the Save button on the Standard toolbar• Press the F12 key to view the National Parks

page in your browser



• Click the Home link• Close the browser• Click the state_parks.htm tab. If necessary, scroll

to the end of the document and then drag to select the text, Home

• Drag the index.htm file name from the Files panel to the Link box

• Click the text, Home, to display the link



• Click the Save button on the Standard toolbar• Press the F12 key to view the State Parks page

in your browser• Click the Home link to verify that it works• Close the browser




Creating an Absolute Link

• If necessary, scroll to the top of the page. Drag to select the text, Blackwater River State Park

• Click the Link box and then type http://www.floridastateparks.org/blackwaterriver/ as the link

• Drag to select the text, Ponce de Leon Spring State Park. Click the Link box and then type http://www.floridastateparks.org/poncedeleonsprings/ as the link

• If necessary, scroll down and then drag to select the text, Falling Waters State Park. Click the Link box and then type http://www.floridastateparks.org/fallingwaters/ as the link



• Click the Save button on the Standard toolbar• Press the F12 key and then click each link to

verify that they work. Click the browser Back button after clicking each link

• Close the browser




Adding an E-Mail Link

• Click the index.htm tab, scroll down, and then drag to select your name. Click Insert on the menu bar and then point to Email Link

• Click Email Link• Click the E-Mail text box and then type your e-

mail address• Click the OK button• Click the expand/collapse arrow on the vertical

bar to hide the panel groups



• Click anywhere in the highlighted text your name• Click the Save button on the Standard toolbar• Press the F12 key to view the page in your

browser. Click your name• Close your e-mail program and then close the

browser




Displaying the Site Map and Local Files List

• If necessary, click the index.htm tab• Click the expand/collapse arrow on the panel

groups vertical bar to display the Files panel• Click the View box arrow and then point to Map

view in the View pop-up menu• Click Map view and then point to the

Expand/Collapse button on the Files panel toolbar

• Click the Expand/Collapse button. Point to the plus sign to the left of the national.htm icon



• Click the plus sign to the left of the national.htm icon

• Click the plus sign to the left of the state_parks.htm icon

• Click the Expand/Collapse button to hide the Site Map

• Click the View box arrow and then point to Local view in the View pop-up menu

• Click Local view




Viewing Design View and Code View Simultaneously

• Click the state_parks.htm tab• Hide the Files panel and collapse the Property

inspector• Position the insertion point to the left of the

heading, Florida State Parks. Point to the Split button on the Document toolbar

• Click the Split button. If necessary, click the View menu, point to Code View Options, and then click Line Numbers

• Click the Design button


Viewing Design View and Code View Simultaneously


Closing the Web Site and Quitting Dreamweaver

• Click the Close button on the right corner of the Dreamweaver title bar


Project Summary

• Define and set a home page• Add pages to a Web site• Describe Dreamweaver’s image accessibility

features• Describe image file formats


Project Summary

• Insert, resize, and align images within a Web page

• Describe the different types of links• Create a relative, absolute, and e-mail link• Describe how to change the color of links


Project Summary

• Edit and delete links• Describe and display the Site Map• Describe Code view, Split view, and Design view• View Code view

Project 2 Complete

Adding Web Pages, Links, and Images

Dreamweaver MX 2004Concepts and Techniques

Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts and Techniques.

Documents

web pages

web pagedescribe

parks web siteclick

parks web siteproject

parks web sitedouble

local web sitedouble

home pageadd pages

parks folder