Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts 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 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 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 8 Copying Data Files to the Parks Web Site

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 17 Creating the National Parks Web Page

Project 2: Adding Web Pages, Links, and Images 18 Creating the National Parks Web Page

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 21 Formatting the Florida National Parks Page

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 23 Opening a New Document Window

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 25 Creating the State Parks Web Page

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 28 Formatting the Florida State Parks Page

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 40 Inserting an Image into the Index Page

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 43 Adjusting the Horizontal and Vertical Space

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 45 Adding Alt Text

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 49 Inserting the Sailboat Image

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 66 Adding Text for Relative Links

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 68 Creating a Relative Link Using Drag-and-Drop

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 71 Creating a Relative Link Using the Context Menu

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 75 Creating a Relative Link to the Home Page

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 blackwaterriver/ as the link Drag to select the text, Ponce de Leon Spring State Park. Click the Link box and then type 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 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 78 Creating an Absolute Link

Project 2: Adding Web Pages, Links, and Images 79 Adding an 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 Link Click Link Click the 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 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 program and then close the browser

Project 2: Adding Web Pages, Links, and Images 81 Adding an Link

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 84 Displaying the Site Map and Local Files List

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 86 Viewing Design View and Code View Simultaneously

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

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