HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map

Project 5: Creating an Image Map 2 Project Objectives Define terms relating to image mapping List the differences between server-side and client-side image maps Name the two components of an image map and describe the steps to implement an image map Distinguish between appropriate and inappropriate images for mapping Sketch hotspots on an image

Project 5: Creating an Image Map 3 Project Objectives Describe how the x- and y-coordinates relate to vertical and horizontal alignment Open an image in Paint and use Paint to map the coordinates of an image Create the home page and additional Web pages Create a table, insert an image into a table, and use the usemap attribute to define a map

Project 5: Creating an Image Map 4 Project Objectives Add text to a table cell and create a horizontal menu bar with text links Use the tags to start and end a map Use the tag to indicate the shape, coordinates, and URL for a mapped area Change link colors

Project 5: Creating an Image Map 5 Starting Paint Click the Start button on the taskbar Point to All Programs on the Start menu, point to Accessories on the All Programs submenu, and then point to Paint on the Accessories submenu Click Paint If necessary, click the Maximize button on the right side of the title bar to maximize the window

Project 5: Creating an Image Map 6 Starting Paint

Project 5: Creating an Image Map 7 Opening an Image File in Paint With a USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu If necessary, click the Look in box arrow and then click UDISK (G:) Double-click the Project05 folder and then double-click the ProjectFiles folder in the list of available folders

Project 5: Creating an Image Map 8 Opening an Image File in Paint If necessary, click the Files of type box arrow and select GIF (*.GIF) Click floorplan.gif in the list of files Click the Open button in the Open dialog box

Project 5: Creating an Image Map 9 Opening an Image File in Paint

Project 5: Creating an Image Map 10 Locating X- and Y- Coordinates of an Image If necessary, click the Pencil button in the toolbox Move the mouse pointer to coordinates (102,255) Move the mouse pointer to coordinates (142,279) Move the mouse pointer to points C through H to verify the x- and y- coordinates in Table 5-1 on page HTM 210 After you have finished, click the Close button on the right side of the title bar

Project 5: Creating an Image Map 11 Locating X- and Y- Coordinates of an Image

Project 5: Creating an Image Map 12 Starting Notepad and Entering Initial HTML Tags

Project 5: Creating an Image Map 13 Creating a Table With the insertion point on line 10, type and then press the ENTER key Type and then press the ENTER key

Project 5: Creating an Image Map 14 Creating a Table

Project 5: Creating an Image Map 15 Inserting an Image in a Table If necessary, click line 12 Type and then press the ENTER key

Project 5: Creating an Image Map 16 Inserting an Image in a Table

Project 5: Creating an Image Map 17 Adding Text to a Table Cell Enter the following HTML beginning on line 13

Project 5: Creating an Image Map 18 Creating a Horizontal Menu Bar with Text Links Enter the following HTML beginning on line 26

Project 5: Creating an Image Map 19 Adding an Image to Use as an Image Map If necessary, click line 32 Type and then press the ENTER key Type <img src="floorplan.gif“ width="367“ height=“436“ border="0“ hspace="20" and then press the ENTER key

Project 5: Creating an Image Map 20 Adding an Image to Use as an Image Map Type usemap="#tour" /> and then press the ENTER key Type and then press the ENTER key Type and then press the ENTER key twice

Project 5: Creating an Image Map 21 Creating an Image Map Enter the following HTML beginning on line 39

Project 5: Creating an Image Map 22 Changing Link Colors Click immediately to the right of the y in the tag on line 9 and then press the SPACEBAR Type link="navy“ alink="navy“ vlink="navy" for the link colors

Project 5: Creating an Image Map 23 Changing Link Colors

Project 5: Creating an Image Map 24 Saving and Printing the HTML File With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type hometour.html in the File name text box If necessary, click UDISK (G:) in the Save in list. Click the Project05 folder and then double-click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box Click File on the menu bar and then click Print on the File menu

Project 5: Creating an Image Map 25 Saving and Printing the HTML File

Project 5: Creating an Image Map 26 Viewing and Printing the Web Page Using a Browser Start the browser If necessary, click the Maximize button to maximize the browser window Type G:\Project05\ProjectFiles\ hometour.htm in the Address box and then press the ENTER key Click the Print button on the Standard Buttons toolbar

Project 5: Creating an Image Map 27 Viewing and Printing the Web Page Using a Browser

Project 5: Creating an Image Map 28 Copying and Pasting HTML Code to a New File Click the Notepad button on the taskbar When the hometour.htm file is displayed in the Notepad window, click immediately to the left of the tag on line 9 to highlight lines 1 through 9 Press CTRL+C to copy the selected lines to the Clipboard Click File on the menu bar and then click New Press CTRL+V to paste the contents of the Clipboard into a new file

Project 5: Creating an Image Map 29 Copying and Pasting HTML Code to a New File

Project 5: Creating an Image Map 30 Changing the Web Page Title Highlight the words, Home Tour Home Page, between the and tags on line 7. Type Entry as the title to delete the words, Home Tour Home Page, and replace them with the word Entry Click immediately to the right of the vlink="navy"> tag on line 9 and then press the ENTER key twice Type and then press the ENTER key Type and then click line 11

Project 5: Creating an Image Map 31 Changing the Title

Project 5: Creating an Image Map 32 Adding a Heading Enter the following HTML beginning on line 11

Project 5: Creating an Image Map 33 Adding Paragraphs of Text Enter the following HTML beginning on line 17

Project 5: Creating an Image Map 34 Adding an Image Enter the following HTML beginning on line 26

Project 5: Creating an Image Map 35 Creating a Horizontal Menu Bar Enter the following HTML beginning on line 32

Project 5: Creating an Image Map 36 Saving and Printing the HTML File With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type entry.html in the File name text box If necessary, click UDISK (G:) in the Save in list. Click the Project05 folder and then double-click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box Click File on the menu bar and then click Print on the File menu

Project 5: Creating an Image Map 37 Saving and Printing the HTML File

Project 5: Creating an Image Map 38 Viewing and Printing the Web Page Click the Internet Explorer button on the taskbar Click the Entry area on the floor plan image map Click the Print button on the Standard Buttons toolbar

Project 5: Creating an Image Map 39 Viewing and Printing the Web Page

Project 5: Creating an Image Map 40 Testing the Links Click the Home link on the Entry Web page Click the Backyard area on the image map on the home page Click the Living link on the Backyard Web page Click the Dining link on the Living Web page

Project 5: Creating an Image Map 41 Testing the Links

Project 5: Creating an Image Map 42 Quitting Notepad and a Browser Click the Close button on the browser title bar Click the Close button on the Notepad window title bar

Project 5: Creating an Image Map 43 Project Summary Define terms relating to image mapping List the differences between server-side and client-side image maps Name the two components of an image map and describe the steps to implement an image map Distinguish between appropriate and inappropriate images for mapping Sketch hotspots on an image

Project 5: Creating an Image Map 44 Project Summary Describe how the x- and y-coordinates relate to vertical and horizontal alignment Open an image in Paint and use Paint to map the coordinates of an image Create the home page and additional Web pages Create a table, insert an image into a table, and use the usemap attribute to define a map

Project 5: Creating an Image Map 45 Project Summary Add text to a table cell and create a horizontal menu bar with text links Use the tags to start and end a map Use the tag to indicate the shape, coordinates, and URL for a mapped area Change link colors

HTML Concepts and Techniques Fourth Edition Project 5 Complete Creating an Image Map