Transcript Project 5

HTML
Concepts and Techniques
Fourth Edition
Project 5
Creating an
Image Map
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
2
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
3
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
4
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
5
Starting Paint
Project 5: Creating an Image Map
6
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
7
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
8
Opening an Image File in Paint
Project 5: Creating an Image Map
9
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
10
Locating X- and Y- Coordinates
of an Image
Project 5: Creating an Image Map
11
Starting Notepad
and Entering Initial HTML Tags
Project 5: Creating an Image Map
12
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
13
Creating a Table
Project 5: Creating an Image Map
14
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
15
Inserting an Image in a Table
Project 5: Creating an Image Map
16
Adding Text to a Table Cell
• Enter the following HTML beginning on line 13
Project 5: Creating an Image Map
17
Creating a Horizontal Menu Bar
with Text Links
• Enter the following HTML beginning on line 26
Project 5: Creating an Image Map
18
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
19
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
20
Creating an Image Map
• Enter the following HTML beginning on line 39
Project 5: Creating an Image Map
21
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
22
Changing Link Colors
Project 5: Creating an Image Map
23
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
24
Saving and Printing the HTML File
Project 5: Creating an Image Map
25
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
26
Viewing and Printing the Web Page
Using a Browser
Project 5: Creating an Image Map
27
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
28
Copying and Pasting HTML Code to a
New File
Project 5: Creating an Image Map
29
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
30
Changing the Title
Project 5: Creating an Image Map
31
Adding a Heading
• Enter the following HTML beginning on line 11
Project 5: Creating an Image Map
32
Adding Paragraphs of Text
• Enter the following HTML beginning on line 17
Project 5: Creating an Image Map
33
Adding an Image
• Enter the following HTML beginning on line 26
Project 5: Creating an Image Map
34
Creating a Horizontal Menu Bar
• Enter the following HTML beginning on line 32
Project 5: Creating an Image Map
35
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
36
Saving and Printing the HTML File
Project 5: Creating an Image Map
37
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
38
Viewing and Printing the Web Page
Project 5: Creating an Image Map
39
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
40
Testing the Links
Project 5: Creating an Image Map
41
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
42
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
43
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
44
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
45
HTML
Concepts and Techniques
Fourth Edition
Project 5 Complete
Creating an
Image Map