html5 & css 7 th edition

Chapter 5

Creating an Image Map

HTML5 & CSS

7th Edition

• 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

Chapter 5: Creating an Image Map 2

Chapter Objectives

• Describe how the x- and y-coordinates relate to vertical and horizontal alignment

• Open an image in Paint and use Paint to locate the image map coordinates

• Create a home page• Create a navigation bar of text links• Insert an image onto a Web page that is used as

an image map and use the usemap attribute to define an image map

Chapter 5: Creating an Image Map 3

Chapter Objectives

• Insert special characters into a Web page• 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• Create an external style sheet for styles used

across the Web site

Chapter 5: Creating an Image Map 4

Chapter Objectives

• Plan the Web site• Analyze the need• Choose the image• Determine what areas of the image map to use as

links• Establish what other links are necessary• Create the Web page, image map, and links• Test all Web pages within the Web site

Chapter 5: Creating an Image Map 5

Plan Ahead

• Click the Start button on the taskbar• Click All Programs on the Start menu, click

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

Chapter 5: Creating an Image Map 6

Starting Paint

Chapter 5: Creating an Image Map 7

Starting Paint

• With a USB drive plugged into your computer, click the Paint button and then click Open

• Navigate to the location of the image you wish to open

• Click the image, and then click the Open button in the Open dialog box to display the image that will be used for image mapping

Chapter 5: Creating an Image Map 8

Opening an Image File in Paint

Chapter 5: Creating an Image Map 9

Opening an Image File in Paint

• If necessary, click the Pencil button in the Tools group• Move the mouse pointer to the top-left corner of the word Home in the image

and note the x- and y-coordinates for that point, as indicated in the status bar. Move the mouse until the coordinates read (195,63)(Do not click the mouse button.)

• Move the mouse pointer to the bottom-right corner of the word Home. The coordinates should read (247,82) (your coordinates may differ slightly), as indicated on the status bar. (Do not click the mouse button.) The four coordinates to be used for this rectangular hotspot are 195,63,247,82

• Move the mouse pointer to the top-left and bottom-right corners of the four other words that are used as hotspots for navigation (Skiing, Boating, and Dining) in the image. Locate the corresponding x- and y-coordinates

• After you have finished, click the Close button on the right side of the title bar. If prompted, do not save any changes to the file

Chapter 5: Creating an Image Map 10

Locating X- and Y-Coordinates of an Image

Chapter 5: Creating an Image Map 11

Locating X- and Y-Coordinates of an Image

• Click the Start button on the Windows taskbar to display the Start menu

• Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list

• Click the Notepad++ folder in the All Programs list• Click the Notepad++ icon in the list to display the Notepad++

window. Maximize the Notepad++ window if necessary• Click View on the menu bar. If the word wrap command does not

have a check mark next to it, click word wrap

Chapter 5: Creating an Image Map 12

Starting Notepad ++

Chapter 5: Creating an Image Map 13

Entering Initial HTML Tags to Define the Web Page Structure

• Click File on the menu bar, click Save, and then type tahanna.html in the File name text box (do not press ENTER)

• Navigate to the storage device and folder (Chapter05\ChapterFiles) where you save your Data Files and then click the Save button in the Save As dialog box to save the file

Chapter 5: Creating an Image Map 14

Saving an HTML File

• If necessary, click line 14• Type <div style=”text-align: center”>

and then press the ENTER key• Press the TAB key once and type <img src=”tahanna.jpg” width=”774” height=”434” alt=”Lake Tahanna” usemap= ”#menubar” /> and then press the ENTER key

• Press SHIFT+TAB to move back to the left margin, type </div>, and then press the ENTER key twice

Chapter 5: Creating an Image Map 15

Inserting an Image to Use as an Image Map

Chapter 5: Creating an Image Map 16

Inserting an Image to Use as an Image Map

Chapter 5: Creating an Image Map 17

Adding a Paragraph of Text

• Position the insertion point to the right of the > in the second </span> tag on line 18 and type &reg; and then press the SPACEBAR

Chapter 5: Creating an Image Map 18

Inserting a Special Character

Chapter 5: Creating an Image Map 19

Creating a Horizontal Menu Bar with Text Links

Chapter 5: Creating an Image Map 20

Creating an Image Map

• Click the Save icon on the Notepad++ tool bar to save the most recent version of tahanna.html on the same storage device and in the same folder as the last time you saved it

Chapter 5: Creating an Image Map 21

Saving the HTML File

• Open Internet Explorer, navigate to the Web site validator.w3.org, and then click the Validate by File Upload tab

• Click the Browse button• Locate the tahanna.html file on your storage

device, click the filename, and then click the Open button in the Choose File to Upload dialog box

• Click the Check button to validate the file

Chapter 5: Creating an Image Map 22

Validating a Web Page

• In Internet Explorer, click the Address bar to select the URL on the Address bar

• Type G:\Chapter05\ChapterFiles\tahanna.html on the Address bar of your browser and press enter to display the Web page

Chapter 5: Creating an Image Map 23

Viewing a Web Page

Chapter 5: Creating an Image Map 24

Viewing a Web Page

• With the USB flash drive in drive G, click the Skiing link from the home page just created. Click back to the Home page from there, using either the image map or the text link. Next, click the other links to test the additional Web pages provided in the Data Files for Students (boating.html and dining.html). Test the links back to the Home page from those Web pages

Chapter 5: Creating an Image Map 25

Testing Links on a Web Page

• Click the Notepad++ button on the taskbar to activate the Notepad++ window

• Click the Print Now button on the toolbar to print a hard copy of the HTML code

Chapter 5: Creating an Image Map 26

Printing an HTML File

Chapter 5: Creating an Image Map 27

Printing an HTML File

Chapter 5: Creating an Image Map 28

Creating an External Style Sheet

• With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type stylesch5.css in the File name text box

• Navigate to the location to save the file. Click the Save button in the Save As dialog box.

• Click File on the menu bar and then click Print Now toolbar

Chapter 5: Creating an Image Map 29

Saving and Printing the CSS File

Chapter 5: Creating an Image Map 30

Saving and Printing the CSS File

• Click the Internet Explorer button on the taskbar• Click the Skiing area on the navigation bar image

map to display the Skiing Web page

Chapter 5: Creating an Image Map 31

Viewing the Web Page

Chapter 5: Creating an Image Map 32

Viewing the Web Page

• Click the Home link (either text or from the image map) on the Skiing Web page

• Click the Print button on the Command bar to print the Web page. If the Command bar is not visible, right-click the toolbar and click Command bar on the shortcut menu

• Test the links, both those in the image map and those in the text navigation bar. If any of the links do not work correctly, return to Notepad++ to modify the HTML code, save the changes, and then retest the links in the browser

Chapter 5: Creating an Image Map 33

Testing and Printing the Web Page

• In Notepad++, click the File menu, then Close All• Click the Close button on the Notepad++ title bar• Click the Close button on the browser title bar. If

necessary, click the Close all tabs button

Chapter 5: Creating an Image Map 34

Quitting Notepad++ and a Browser

• 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

Chapter 5: Creating an Image Map 35

Chapter Summary

• Describe how the x- and y-coordinates relate to vertical and horizontal alignment

• Open an image in Paint and use Paint to locate the image map coordinates

• Create a home page• Create a navigation bar of text links• Insert an image onto a Web page that is used as

an image map and use the usemap attribute to define an image map

Chapter 5: Creating an Image Map 36

Chapter Summary

• Insert special characters into a Web page• 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• Create an external style sheet for styles used

across the Web site

Chapter 5: Creating an Image Map 37

Chapter Summary

Chapter 5 Complete

HTML7th Edition