Project 5

1. Project 5 Creating anImage 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 <map> </map> tags to start and end a map • Use the <area> 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 <table align="left“ border="0" cols="2“ rows=“1“ width="75%"> and then press the ENTER key • Type <tr valign=“top”> 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 <td><p><img src="ibrahimlogo.gif" width=“228“ height=“53" /></p> 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 <td> and then press the ENTER key • Type <p><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" /></p> and then press the ENTER key • Type </td> and then press the ENTER key • Type </tr> and then press the ENTER key twice • Type </table> 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 <body> 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 < in the <!DOCTYPE html tag on line 1. Drag through the <body link="navy" alink="navy" vlink="navy"> 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 <title> and </title> 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 </body> and then press the ENTER key • Type </html> 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 <map> </map> tags to start and end a map • Use the <area> tag to indicate the shape, coordinates, and URL for a mapped area • Change link colors Project 5: Creating an Image Map

46. Project 5 Complete Creating anImage Map