1. Layers, Image Maps, and Navigation Bars
Project 6
Layers, Image Maps, and Navigation Bars

2. Project Objectives Explain the concept of layers
Insert, select, resize, and move a layer
Name a layer
Align layers
Describe an image map
Project 6: Layers, Image Maps, and Navigation Bars

3. Project Objectives Create an image map Add and edit behaviors
Describe a navigation bar
Create a navigation bar
Insert a Date object
Project 6: Layers, Image Maps, and Navigation Bars

4. Copying Data Files to the Parks Web Site
Click the Start button on the Windows taskbar and then click My Computer
Double-click Local Disk (C:) and then navigate to the location of the data files for Project 6
Double-click the DataFiles folder and then double-click the Proj06 folder
Double-click the parks folder and then double-click the images folder
Project 6: Layers, Image Maps, and Navigation Bars

5. Copying Data Files to the Parks Web Site
Click the first image file in the list, hold down the SHIFT key, and then click the last image file in the list
Right-click the selected files to display the context menu
Click the Copy command and then click the My Computer Back button the number of times necessary to navigate to the your name folder
Double-click the your name folder, double-click the parks folder, and then double-click the images folder
Project 6: Layers, Image Maps, and Navigation Bars

6. Copying Data Files to the Parks Web Site
Right-click in the open window to display the context menu
Click the Paste command to paste the image files into the images folder
Navigate to the Proj06 parks folder. Double-click the parks folder.
Click the colorado_attractions.htm file, and then right-click to display the context menu
Project 6: Layers, Image Maps, and Navigation Bars

7. Copying Data Files to the Parks Web Site
Click the Copy command and then navigate to the your name folder
Double-click the your name folder, double-click the parks folder, and then right-click to display the context menu
Click the Paste command to paste the data file into the parks folder
Close the My Computer window
Project 6: Layers, Image Maps, and Navigation Bars

8. Copying Data Files to the Parks Web Site
Project 6: Layers, Image Maps, and Navigation Bars

9. Starting Dreamweaver and Opening the Colorado Parks Web Site
Click the Start button on the Windows taskbar
Point to All Programs on the Start menu, point to Macromedia on the All Programs submenu, and then click Macromedia Dreamweaver 8 on the Macromedia submenu
Click the Files panel box arrow and click Colorado Parks on the Files pop-up menu. If necessary, click the plus sign to open the site folder
Project 6: Layers, Image Maps, and Navigation Bars

10. Starting Dreamweaver and Opening the Colorado Parks Web Site
Project 6: Layers, Image Maps, and Navigation Bars

11. Opening the Colorado Attractions Page and Displaying the Rulers
Double-click the colorado_attractions.htm file
If necessary, click View on the menu bar, point to Rulers, and then point to Show on the Rulers submenu
Click Show
Project 6: Layers, Image Maps, and Navigation Bars

12. Opening the Colorado Attractions Page and Displaying the Rulers
Project 6: Layers, Image Maps, and Navigation Bars

13. Creating and Selecting a Layer for the Colorado Map Image
If necessary, display the Insert bar and then select the Layout category from the Insert bar pop-up menu
Click below the last line of text in the Document window
Click the ruler-origin icon and drag it to the insertion point
Click the Draw Layer button on the Insert bar Layout category and then move the pointer to the insertion point
Project 6: Layers, Image Maps, and Navigation Bars

14. Creating and Selecting a Layer for the Colorado Map Image
Using the rulers as a guide, draw a layer approximately 440 pixels wide and 350 pixels high. If the layer outline does not appear in the Document window, click View on the menu bar, point to Visual Aids, and then click Layer Outlines on the Visual Aids submenu
Scroll to the top of the Document window
Right-click anywhere on the rulers and select Reset Origin on the context menu
Click the layer outline to select it
If necessary, scroll to the top of the page. If the layer-code marker does not display, click Edit on the menu bar, select Preferences, and then click the Invisible Elements category. Click the Anchor points for layers check box and then click the OK button
Project 6: Layers, Image Maps, and Navigation Bars

15. Creating and Selecting a Layer for the Colorado Map Image
Project 6: Layers, Image Maps, and Navigation Bars

16. Displaying the Layers Panel
Press the F2 key to display the Layers Panel
Project 6: Layers, Image Maps, and Navigation Bars

17. Naming the Layer and Adjusting Layer Properties
Double-click the Layer ID text box in the Property inspector and then type col_map as the layer name. If necessary, double-click the W box and change the width to 440px. Then, if necessary, double-click the H box and change the height to 350px
Click the Vis box arrow and then click visible
Press the TAB key
Project 6: Layers, Image Maps, and Navigation Bars

18. Naming the Layer and Adjusting Layer Properties
Project 6: Layers, Image Maps, and Navigation Bars

19. Adding an Image to the Col_map Layer
Click the Assets panel tab and, if necessary, click the Images icon
Scroll to locate and click the map2.gif image. If the map2.gif file does not appear in the Assets panel, click the Refresh button
Drag the map2.gif image onto the layer
Click the Image ID box and type colorado_map. Click the Alt text box and type Colorado Map. Press the TAB key
Project 6: Layers, Image Maps, and Navigation Bars

20. Adding an Image to the Col_map Layer
Click the Save button on the Standard toolbar
Press F12 and view the Web page in your browser. Note the space between the text and the image
Close the browser
Project 6: Layers, Image Maps, and Navigation Bars

21. Adding an Image to the Col_map Layer
Project 6: Layers, Image Maps, and Navigation Bars

22. Creating Stacked Layers
Click the expander arrow to collapse the panel groups
Click the ruler-origin icon and drag it about 25 pixels to the right of the col_map layer
Click the Draw Layer button on the Insert bar and then use the rulers as a visual guide to draw a layer measuring approximately 440px in width and 350px in height to the right of the col_map layer
Right-click anywhere on the rulers and then click Reset Origin on the context menu
Move the mouse pointer over any border of the layer outline and then click the border
Project 6: Layers, Image Maps, and Navigation Bars

23. Creating Stacked Layers
Click the Layer ID text box and then type northern_colorado as the layer ID. If necessary, change the W to 440px and the H to 350px in the Property inspector. Click the Vis box arrow and then click hidden
Press the TAB key
If necessary, scroll up to see the top of the layer. Click anywhere on the page to deselect the layer
Click the Draw Layer button on the Insert bar and then draw a second layer directly on top of the northern_colorado layer
Select the layer. Add and modify the following properties in the Property inspector: Layer ID – central_colorado, W – 440px, H – 350px, and Vis – hidden
Project 6: Layers, Image Maps, and Navigation Bars

24. Creating Stacked Layers
Press the TAB key
Scroll up if necessary and click anywhere on the page to deselect the layer. Click the Draw Layer button on the Insert bar and then draw a third layer on top of the central_colorado layer
Select the layer. Add and modify the following attributes in the Property inspector: Layer ID –southern_colorado, W – 440px, H – 350px, and Vis – hidden
Project 6: Layers, Image Maps, and Navigation Bars

25. Creating Stacked Layers
Project 6: Layers, Image Maps, and Navigation Bars

26. Selecting Layers and Adding Images
Click the expander arrow to expand the panel groups
Scroll to the right in the Document window
Scroll in the Assets panel and locate the southern.jpg file. Drag the southern.jpg image onto the southern_colorado layer
Click the Image ID box and type so_col
Click the Alt text box and type Southern Colorado Features. Press the TAB key
Project 6: Layers, Image Maps, and Navigation Bars

27. Selecting Layers and Adding Images
Click central_colorado in the Layers panel
If necessary, scroll up in the Assets panel and locate the central.jpg file. Drag the central.jpg image into the central_colorado layer
Click the Image ID box and type cen_col
Click the Alt text box and type Central Colorado Features
Project 6: Layers, Image Maps, and Navigation Bars

28. Selecting Layers and Adding Images
Click northern_colorado in the Layers panel
Locate the northern.jpg image in the Assets panel and drag the image onto the northern_colorado layer
Click the Image ID box and type nor_col. Click the Alt text box and type Northern Colorado Features. Press the TAB key
Project 6: Layers, Image Maps, and Navigation Bars

29. Selecting Layers and Adding Images
Project 6: Layers, Image Maps, and Navigation Bars

30. Creating Hotspots on the Colorado Map Image
Collapse the panel groups
If necessary, scroll up to display the top of the col_map layer. Click the map2.gif image in the col_map layer
Click the Rectangular Hotspot Tool and then move the cross hair pointer to the upper-left corner of the map2.gif image
Project 6: Layers, Image Maps, and Navigation Bars

31. Creating Hotspots on the Colorado Map Image
Drag to draw a rectangle encompassing approximately the top third of the map2.gif image. If the rectangular hotspot does not appear, click View on the menu bar, point to Visual Aids, and then click Image Maps on the Visual Aids submenu
Draw two more hotspots on the map2.gif image by dragging the cross hair pointer over the middle third of the image and then over the lower third of the image
Click anywhere in the window to cancel the cross hair pointer, and then, if necessary, scroll down
Project 6: Layers, Image Maps, and Navigation Bars

32. Creating Hotspots on the Colorado Map Image
Project 6: Layers, Image Maps, and Navigation Bars

33. Adding the Show-Hide Layers Action to the Image Map Hotspots
Display the panel groups and collapse the Property inspector
Press SHIFT+F4 to display the Behaviors panel. If necessary, collapse the Files panel
If necessary, scroll up and then click the top rectangular hotspot on the map2.gif image
Click the Plus (+) button to display the Actions pop-up menu in the Behaviors panel. Point to Show-Hide Layers
Click Show-Hide Layers. If necessary, click layer “col_map” in the Named layers list in the Show-Hide Layers dialog box to select it
Project 6: Layers, Image Maps, and Navigation Bars

34. Adding the Show-Hide Layers Action to the Image Map Hotspots
Click the Show button. Click layer “northern_colorado” and then click the Show button
Click layer “central_colorado” and then click the Hide button.
Click layer “southern_colorado” and then click the Hide button
Click the OK button
Click the middle hotspot on the map2.gif image, click the Plus (+) button in the Behaviors panel, and then click Show-Hide Layers on the Actions pop-up menu
Project 6: Layers, Image Maps, and Navigation Bars

35. Adding the Show-Hide Layers Action to the Image Map Hotspots
If necessary, click layer “col_map” and then click the Show button. Click layer “cenfl” and then click the Show button. Click layer “northern_colorado” and then click the Hide button. Click layer “central_colorado” and then click the Show button. Click layer “southern_colorado” and then click the Hide button
Click the OK button
If necessary, scroll down in the Document window and then click the third hotspot on the map2.gif image
Click the Plus (+) button in the Behaviors panel, and then click Show-Hide Layers on the Actions pop-up menu
If necessary, click layer “col_map” and then click the Show button. Click layer “northern_colorado” and then click the Hide button. Click layer “central_colorado” and then click the Hide button. Click layer “southern_colorado” and then click the Show button
Project 6: Layers, Image Maps, and Navigation Bars

36. Adding the Show-Hide Layers Action to the Image Map Hotspots
Click the OK button
Click the Save button on the Standard toolbar and then press the F12 key to display the Web page in your browser
If necessary, maximize the browser window
Move the mouse pointer over the hotspots on the map2.gif image to display each of the hidden layers
Close the browser window and return to Dreamweaver
Project 6: Layers, Image Maps, and Navigation Bars

37. Adding the Show-Hide Layers Action to the Image Map Hotspots
Project 6: Layers, Image Maps, and Navigation Bars

38. Adjusting Layer Placement
Display the Property inspector. If necessary, click col_map in the Layers panel and then scroll up in the Document window to display the top of the col_map layer
Click the T text box in the Property inspector and type 205 as the pixel number
Press the TAB key and then click anywhere in the Document window
Project 6: Layers, Image Maps, and Navigation Bars

39. Adjusting Layer Placement
Press the F12 key to view the Web page in your browser. Verify that none of the text is covered and that the image is positioned nicely within the Web page
Close the browser to return to Dreamweaver
Make any necessary adjustments in the Document window to adjust the placement of the col_map layer
Click the Save button
Project 6: Layers, Image Maps, and Navigation Bars

40. Adjusting Layer Placement
Project 6: Layers, Image Maps, and Navigation Bars

41. Selecting and Aligning Multiple Layers
Select the southern_colorado layer in the Layers panel. Hold down the SHIFT key and then select the central_colorado, northern_colorado, and col_map layers
Click Modify on the menu bar, point to Arrange, and then point to Align Top on the Arrange submenu
Click Align Top. If necessary, scroll down in the Document window
Hold down the SHIFT key and then click col_map in the Layers panel
Click Modify on the menu bar, point to Arrange, and then click Align Left on the Arrange submenu
Project 6: Layers, Image Maps, and Navigation Bars

42. Selecting and Aligning Multiple Layers
Click Modify on the menu bar, point to Arrange, and then click Make Same Width on the Arrange submenu
Click Modify on the menu bar, point to Arrange, and then click Make Same Height on the Arrange submenu
Press the F12 key to view the Web page in your browser. Move the mouse pointer over the Colorado map to verify that the images are displayed and that they are aligned properly
Close the browser and return to Dreamweaver
Project 6: Layers, Image Maps, and Navigation Bars

43. Selecting and Aligning Multiple Layers
Click View on the menu bar, point to Rulers, and then click Show on the Rulers submenu to hide the rulers
Press F2 to collapse the CSS group and then press SHIFT+F4 to collapse the Tag Inspector group
Press F8 to display the Files pane. Open the natl_parks.htm file and scroll to the bottom of the page. Click to the right of the Colorado National Parks Hotel Reservations link and press SHIFT+ENTER. Type Colorado Attractions Map as the entry, create a link to the colorado_attractions.htm page, and then save the natl_parks.htm file
Press F12 to view the Web page and test the link. Close the browser and then close the natl_parks.htm page
Project 6: Layers, Image Maps, and Navigation Bars

44. Selecting and Aligning Multiple Layers
Project 6: Layers, Image Maps, and Navigation Bars

45. Setting the Netscape Resize Fix
Click Edit on the menu bar and then click Preferences
Click the Layers category and then click the Add resize fix when inserting layer check box to select it. If necessary, click the Nest when created within a layer check box to select it
Click the OK button. The Netscape Resize Fix source code is added. No visible changes are displayed in the Document window
If necessary, click the Save button on the Standard toolbar and then close the colorado_attractions.htm page
Project 6: Layers, Image Maps, and Navigation Bars

46. Setting the Netscape Resize Fix
Project 6: Layers, Image Maps, and Navigation Bars

47. Opening and Preparing the Index.htm Page
If necessary, click the Files panel tab
Double-click index.htm in the Files panel to open the index.htm file
Collapse the Property inspector and the panel groups
Project 6: Layers, Image Maps, and Navigation Bars

48. Opening and Preparing the Index.htm Page
Project 6: Layers, Image Maps, and Navigation Bars

49. Deleting Existing Links and Inserting the Date Object
Move the insertion point to the left of the two links at the top of the index.htm page and then drag to select the links
Press the DELETE key to remove the two links
Scroll to the bottom of the page
Select the date below your address link and then press the DELETE key
Project 6: Layers, Image Maps, and Navigation Bars

50. Deleting Existing Links and Inserting the Date Object
Click Insert on the menu bar and then point to Date
Click Date
Click the Update automatically on save check box
Click the OK button
Click the Save button on the Standard toolbar
Project 6: Layers, Image Maps, and Navigation Bars

51. Deleting Existing Links and Inserting the Date Object
Project 6: Layers, Image Maps, and Navigation Bars

52. Creating the Navigation Bar
Scroll up to the top of the page in the Document window and then click below the heading. Click Insert on the menu bar, point to Image Objects, and then point to Navigation Bar on the Image Objects submenu
Click Navigation Bar
Type colorado_parks in the Element name text box. If necessary, click the Use tables check box to select it and verify that Horizontally is selected in the Insert pop-up menu. Point to the Browse button for the Up image text box
Click the Browse button to the right of the Up image text box. If necessary, double-click the images folder in the Select image source dialog box
Click the button01a file
Project 6: Layers, Image Maps, and Navigation Bars

53. Creating the Navigation Bar
Click the OK button in the Select image source dialog box and then point to the Browse button to the right of the Over image text box
Click the Browse button to the right of the Over image text box and then click button01b
Click the OK button. Point to the Browse button to the right of the Down image text box
Click the Browse button to the right of the Down image text box. Click button01b, and then click the OK button
Project 6: Layers, Image Maps, and Navigation Bars

54. Creating the Navigation Bar
Click the Alternate text text box and then type Colorado Parks as the alternate text. Point to the Browse button to the right of the When clicked, Go to URL text box
Click the Browse button. If necessary, navigate to the parks folder. Click the natl_parks file and then point to the OK button in the Select HTML file dialog box
Click the OK button in the Select HTML file dialog box. Point to the Add Item button
Click the Add Item button
Project 6: Layers, Image Maps, and Navigation Bars

55. Creating the Navigation Bar
Repeat the previous steps to add the other four buttons, using the data shown in Table 6-1 on page DW 535
If necessary, display the Property inspector
Click the Table ID box, type nav_bar and then press the ENTER key
Click the <table#nav_bar> tag in the tag selector. Center the table that contains the navigation bar
Click the CellPad text box and type 4. Press the TAB key
Project 6: Layers, Image Maps, and Navigation Bars

56. Creating the Navigation Bar
Press the F12 key to view the navigation bar in your browser, and test each of the links
If instructed to do so, print a copy of the colorado_attractions.htm page and the revised index.htm page, hand them in to your instructor, and upload the revised Web pages to a server. Close the browser and then click the Save All button on the Standard toolbar
Project 6: Layers, Image Maps, and Navigation Bars

57. Creating the Navigation Bar
Project 6: Layers, Image Maps, and Navigation Bars

58. Closing the Web Site and Quitting Dreamweaver
Click the Close button on the upper-right corner of the Dreamweaver title bar
Project 6: Layers, Image Maps, and Navigation Bars

59. Project Summary Explain the concept of layers
Insert, select, resize, and move a layer
Name a layer
Align layers
Describe an image map
Project 6: Layers, Image Maps, and Navigation Bars

60. Project Summary Create an image map Add and edit behaviors
Describe a navigation bar
Create a navigation bar
Insert a Date object
Project 6: Layers, Image Maps, and Navigation Bars

61. Layers, Image Maps, and Navigation Bars
Project 6 Complete
Layers, Image Maps, and Navigation Bars