Post on 30-Dec-2015
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 2: Adding Web Pages, Links, and Images 3
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 2: Adding Web Pages, Links, and Images 4
Project Objectives
• Edit and delete links• Describe and display the Site Map• Describe Code view, Split view, and Design view• View Code view
Project 2: Adding Web Pages, Links, and Images 5
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
Project 2: Adding Web Pages, Links, and Images 6
Copying Data Files to the Parks Web Site
• 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
Project 2: Adding Web Pages, Links, and Images 7
Copying Data Files to the Parks Web Site
• 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
Project 2: Adding Web Pages, Links, and Images 9
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
Project 2: Adding Web Pages, Links, and Images 10
Starting Dreamweaver and Opening the Parks Web Site
Project 2: Adding Web Pages, Links, and Images 11
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
Project 2: Adding Web Pages, Links, and Images 12
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
Project 2: Adding Web Pages, Links, and Images 13
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
Project 2: Adding Web Pages, Links, and Images 14
Opening a New Document Window
• Click the Save button on the Standard toolbar
• Type national for the file name
• Click the Save button
Project 2: Adding Web Pages, Links, and Images 15
Preparing the Workspace
• Click the expand/collapse arrow on the panel groups vertical bar
• Click the Property inspector expander arrow
Project 2: Adding Web Pages, Links, and Images 16
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
Project 2: Adding Web Pages, Links, and Images 19
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
Project 2: Adding Web Pages, Links, and Images 20
Formatting the Florida National Parks Page
• 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
Project 2: Adding Web Pages, Links, and Images 22
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• Save the Web page as state_parks.htm in the
parks folder
Project 2: Adding Web Pages, Links, and Images 24
Creating the State Parks Web Page
• Type the text of the Web page as shown below:
Project 2: Adding Web Pages, Links, and Images 26
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
Project 2: Adding Web Pages, Links, and Images 27
Formatting the Florida State Parks Page
• 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
Project 2: Adding Web Pages, Links, and Images 29
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
Project 2: Adding Web Pages, Links, and Images 30
Adding a Background Image to the National Parks Web Page
• 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 Save button on the Standard toolbar
Project 2: Adding Web Pages, Links, and Images 31
Adding a Background Image to the National Parks Web Page
Project 2: Adding Web Pages, Links, and Images 32
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
Project 2: Adding Web Pages, Links, and Images 33
Adding a Background Image to the State Parks Web Page
• 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 Save button on the Standard toolbar
Project 2: Adding Web Pages, Links, and Images 34
Adding a Background Image to the State Parks Web Page
Project 2: Adding Web Pages, Links, and Images 35
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
Project 2: Adding Web Pages, Links, and Images 36
Set Invisible Element Preferences and Turn on Visual Aids
• Click the OK button• Click View on the menu bar, point to Visual Aids,
and then point to Invisible Elements• Click Invisible Elements
Project 2: Adding Web Pages, Links, and Images 37
Set Invisible Element Preferences and Turn on Visual Aids
Project 2: Adding Web Pages, Links, and Images 38
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
Project 2: Adding Web Pages, Links, and Images 39
Inserting an Image into the Index Page
• 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
Project 2: Adding Web Pages, Links, and Images 41
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
Project 2: Adding Web Pages, Links, and Images 42
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
Project 2: Adding Web Pages, Links, and Images 44
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
Project 2: Adding Web Pages, Links, and Images 46
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
Project 2: Adding Web Pages, Links, and Images 47
Inserting the Sailboat Image
• 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
Project 2: Adding Web Pages, Links, and Images 48
Inserting the Sailboat Image
• 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
Project 2: Adding Web Pages, Links, and Images 50
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
Project 2: Adding Web Pages, Links, and Images 51
Inserting and Aligning an Image in the National Parks Web Page
• 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
Project 2: Adding Web Pages, Links, and Images 52
Inserting and Aligning an Image in the National Parks Web Page
• Press the ENTER key• Click the Save button on the Standard toolbar• Press the F12 key• Close the browser to return to Dreamweaver
Project 2: Adding Web Pages, Links, and Images 53
Inserting and Aligning an Image in the National Parks Web Page
Project 2: Adding Web Pages, Links, and Images 54
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
Project 2: Adding Web Pages, Links, and Images 55
Inserting and Aligning Images in the State Parks Web Page
• 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
Project 2: Adding Web Pages, Links, and Images 56
Inserting and Aligning Images in the State Parks Web Page
• Click the Align box arrow and then click Right on the Align pop-up menu
• Click the V Space box and then type 6 as the vertical space
• Click the H Space box and then type 12 as the horizontal space
• 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
Project 2: Adding Web Pages, Links, and Images 57
Inserting and Aligning Images in the State Parks Web Page
• 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 V Space box and then type 8 as the vertical space
• Click the H Space box and then type 12 as the horizontal space
• Click the Alt box, type Falling Waters State Park as the alternate text, and then press the ENTER key
Project 2: Adding Web Pages, Links, and Images 58
Inserting and Aligning Images in the State Parks Web Page
• Click anywhere on the page to deselect the image
• Click the Save button on the Standard toolbar• Press the F12 key• Close the browser
Project 2: Adding Web Pages, Links, and Images 59
Inserting and Aligning Images in the State Parks Web Page
Project 2: Adding Web Pages, Links, and Images 60
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
Project 2: Adding Web Pages, Links, and Images 61
Cropping and Modifying Brightness/Contrast of an Image
• 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
Project 2: Adding Web Pages, Links, and Images 62
Cropping and Modifying Brightness/Contrast of an Image
• 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
Project 2: Adding Web Pages, Links, and Images 63
Cropping and Modifying Brightness/Contrast of an Image
Project 2: Adding Web Pages, Links, and Images 64
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
Project 2: Adding Web Pages, Links, and Images 65
Adding Text for Relative Links
• 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
Project 2: Adding Web Pages, Links, and Images 67
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
Project 2: Adding Web Pages, Links, and Images 69
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
• Click the Save button on the Standard toolbar
Project 2: Adding Web Pages, Links, and Images 70
Creating a Relative Link Using the Context Menu
• 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
Project 2: Adding Web Pages, Links, and Images 72
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
Project 2: Adding Web Pages, Links, and Images 73
Creating a Relative Link to the Home Page
• 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
Project 2: Adding Web Pages, Links, and Images 74
Creating a Relative Link to the Home Page
• 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
Project 2: Adding Web Pages, Links, and Images 76
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
Project 2: Adding Web Pages, Links, and Images 77
Creating an Absolute 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
Project 2: Adding Web Pages, Links, and Images 79
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
Project 2: Adding Web Pages, Links, and Images 80
Adding an E-Mail Link
• 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
Project 2: Adding Web Pages, Links, and Images 82
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
Project 2: Adding Web Pages, Links, and Images 83
Displaying the Site Map and Local Files List
• 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
Project 2: Adding Web Pages, Links, and Images 85
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
Project 2: Adding Web Pages, Links, and Images 87
Closing the Web Site and Quitting Dreamweaver
• Click the Close button on the right corner of the Dreamweaver title bar
Project 2: Adding Web Pages, Links, and Images 88
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 2: Adding Web Pages, Links, and Images 89
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 2: Adding Web Pages, Links, and Images 90
Project Summary
• Edit and delete links• Describe and display the Site Map• Describe Code view, Split view, and Design view• View Code view