Transcript Project 5 - Northwestern High School

HTML
Comprehensive Concepts and Techniques
Third 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
HTML 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
HTML 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
HTML 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
HTML Project 5: Creating an Image Map
5
Starting Paint
HTML Project 5: Creating an Image Map
6
Opening an Image File in Paint
• With the HTML Data Disk in drive A, 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 31⁄2 Floppy (A:)
• Double-click the Project05 folder and then
double-click the ProjectFiles folder in the
list of available folders
HTML 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
HTML Project 5: Creating an Image Map
8
Opening an Image File in Paint
HTML Project 5: Creating an Image Map
9
Locating X- and Y- Coordinates
of an Image
• If necessary, click the Select button in the
toolbox
• Move the mouse pointer to coordinates (3,171)
• Move the mouse pointer to coordinates (77,310)
• Move the mouse pointer to points C through J 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
HTML Project 5: Creating an Image Map
10
Locating X- and Y- Coordinates
of an Image
HTML Project 5: Creating an Image Map
11
Starting Notepad
and Entering Initial HTML Tags
HTML 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="2“ width="75%">
and then press the ENTER key
• Type <tr valign=“top”> and then
press the ENTER key
HTML Project 5: Creating an Image Map
13
Creating a Table
HTML 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="320“ height="97" /></p>
and then press the ENTER key
HTML Project 5: Creating an Image Map
15
Inserting an Image in a Table
HTML Project 5: Creating an Image Map
16
Adding Text to a Table Cell
• Enter the following HTML beginning on
line 13
HTML Project 5: Creating an Image Map
17
Adding an Image to Use as an
Image Map
• If necessary, click line 27
• Type <td> and then press the ENTER key
• Type <p><imgsrc="floorplan.gif“
width="350“ height="389“
border="0“ hspace="20" and then
press the ENTER key
HTML Project 5: Creating an Image Map
18
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
HTML Project 5: Creating an Image Map
19
Creating a Horizontal Menu Bar
with Text Links
• Enter the following HTML beginning on
line 33
HTML Project 5: Creating an Image Map
20
Creating an Image Map
• Enter the following HTML beginning on
line 44
HTML 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
HTML Project 5: Creating an Image Map
22
Changing Link Colors
HTML Project 5: Creating an Image Map
23
Saving and Printing the HTML File
• With a floppy disk in drive A, click File on the
menu bar and then click Save As. Type
hometour.htm in the File name text box
• If necessary, click 31⁄2 Floppy (A:) in the Save in
list. Click the Project05 folder and then doubleclick 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
HTML Project 5: Creating an Image Map
24
Saving and Printing the HTML File
HTML 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 a:\Project05\ProjectFiles\
hometour.htm in the Address box and
then press the ENTER key
• Click the Print button on the Standard
Buttons toolbar
HTML Project 5: Creating an Image Map
26
Viewing and Printing the Web Page
Using a Browser
HTML 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
HTML Project 5: Creating an Image Map
28
Copying and Pasting HTML Code
to a New File
HTML Project 5: Creating an Image Map
29
Changing the Title
• Highlight the words, Home Tour Home Page,
between the <title> and </title> tags on line 7.
Type Kitchen as the title to delete the words,
Home Tour Home Page, and replace them with
the word Kitchen
• 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
HTML Project 5: Creating an Image Map
30
Changing the Title
HTML Project 5: Creating an Image Map
31
Adding a Heading
• Enter the following HTML beginning on
line 11
HTML Project 5: Creating an Image Map
32
Adding Paragraphs of Text
• Enter the following HTML beginning on
line 17
HTML Project 5: Creating an Image Map
33
Adding an Image
• Enter the following HTML beginning on
line 26
HTML Project 5: Creating an Image Map
34
Creating a Horizontal Menu Bar
• Enter the following HTML beginning on
line 32
HTML Project 5: Creating an Image Map
35
Saving and Printing the HTML File
• With a floppy disk in drive A, click File on the
menu bar and then click Save As. Type
kitchen.htm in the File name text box
• If necessary, click 31⁄2 Floppy (A:) in the Save in
list. Click the Project05 folder and then doubleclick 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
HTML Project 5: Creating an Image Map
36
Saving and Printing the HTML File
HTML Project 5: Creating an Image Map
37
Viewing and Printing the Web Page
• Click the Internet Explorer button on the
taskbar
• Click the Kitchen area on the floor plan
image map
• Click the Print button on the Standard
Buttons toolbar
HTML Project 5: Creating an Image Map
38
Viewing and Printing the Web Page
HTML Project 5: Creating an Image Map
39
Testing the Links
• Click the Home link on the Kitchen Web page
• Click the Master Bedroom area on the image
map on the home page
• Click the Living link on the Master Bedroom Web
page
• Click the Library link on the Living Room Web
page
• Click the Dining link on the Library Web page
HTML Project 5: Creating an Image Map
40
Testing the Links
HTML 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
HTML 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
HTML 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
HTML 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
HTML Project 5: Creating an Image Map
45
HTML
Comprehensive Concepts and Techniques
Third Edition
Project 5 Complete