Download presentation
Presentation is loading. Please wait.
1
Project 5 Creating an Image 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
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
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
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
6
Starting Paint
7
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
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
9
Opening an Image File in Paint
10
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
11
Locating X- and Y- Coordinates of an Image
12
Starting Notepad and Entering Initial HTML Tags
13
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
14
Creating a Table
15
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
16
Inserting an Image in a Table
17
Adding Text to a Table Cell
Enter the following HTML beginning on line 13
18
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
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
20
Creating a Horizontal Menu Bar with Text Links
Enter the following HTML beginning on line 33
21
Creating an Image Map Enter the following HTML beginning on line 44
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
23
Changing Link Colors
24
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 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
25
Saving and Printing the HTML File
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 a:\Project05\ProjectFiles\ hometour.htm in the Address box and then press the ENTER key Click the Print button on the Standard Buttons toolbar
27
Viewing and Printing the Web Page Using a Browser
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
29
Copying and Pasting HTML Code to a New File
30
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
31
Changing the Title
32
Adding a Heading Enter the following HTML beginning on line 11
33
Adding Paragraphs of Text
Enter the following HTML beginning on line 17
34
Adding an Image Enter the following HTML beginning on line 26
35
Creating a Horizontal Menu Bar
Enter the following HTML beginning on line 32
36
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 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
37
Saving and Printing the HTML File
38
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
39
Viewing and Printing the Web Page
40
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
41
Testing the Links
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
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
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
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
46
Project 5 Complete
Similar presentations
