Download kuroski.net

HTML5 & CSS
th
7 Edition
Chapter 5
Creating an Image Map
Chapter 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
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
Plan Ahead
•
•
•
•
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
Starting Paint
• 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
Opening an Image File in 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
Locating X- and Y-Coordinates
of an Image
• 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
Starting Notepad ++
• 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
Entering Initial HTML Tags to Define the
Web Page Structure
Chapter 5: Creating an Image Map
13
Saving an HTML File
• 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
Inserting an Image to Use as an Image
Map
• 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
Adding a Paragraph of Text
Chapter 5: Creating an Image Map
17
Inserting a Special Character
• 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
Creating a Horizontal Menu Bar with Text
Links
Chapter 5: Creating an Image Map
19
Creating an Image Map
Chapter 5: Creating an Image Map
20
Saving the HTML File
• 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
Validating a Web Page
• 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
Viewing 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
Testing Links on 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
Printing an HTML File
• 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
Creating an External Style Sheet
Chapter 5: Creating an Image Map
28
Saving and Printing the CSS File
• 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
Viewing the Web Page
• 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
Testing and Printing 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
Quitting Notepad++ and a Browser
• 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
Chapter 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
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
HTML
th
7 Edition
Chapter 5 Complete