1. Dreamweaver CS3 Concepts and Techniques Chapter 6 Layers, Image Maps, and Navigation Bars

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

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

4. Chapter 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 Computer Double-click Local Disk (C:) and then navigate to the location of the data files for Chapter 6 Double-click the DataFiles folder and then double-click the Chap06 folder Double-click the parks folder and then double- click the images folder Click the first image file in the list, hold down the SHIFT key, and then click the last image file in the list

5. Chapter 6: Layers, Image Maps, and Navigation Bars 5 Copying Data Files to the Parks Web Site Right-click the selected files to display the context menu Click the Copy command and then click the 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 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 Chap06 parks folder. Double-click the parks folder

6. Chapter 6: Layers, Image Maps, and Navigation Bars 6 Copying Data Files to the Parks Web Site Click the colorado_attractions.htm file, and then right-click it to display the context menu 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 Computer window

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

8. Chapter 6: Layers, Image Maps, and Navigation Bars 8 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, and then click Adobe Dreamweaver CS3 on the All Programs 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

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

10. Chapter 6: Layers, Image Maps, and Navigation Bars 10 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

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

12. Chapter 6: Layers, Image Maps, and Navigation Bars 12 Creating and Selecting a Layer for the Colorado Map Image If necessary, display the Insert bar and then select the Layout tab Click at the end of the last line of text in the Document window, and then press ENTER Click the ruler-origin icon and drag it to the insertion point, and then press ENTER Click the Draw AP Div button on the Insert bar Layout tab and then move the pointer to the insertion point

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

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

15. Chapter 6: Layers, Image Maps, and Navigation Bars 15 Displaying the Layers Panel Press the F2 key to display the AP Elements panel. If necessary, move the mouse pointer over the bottom of the AP Elements panel until the mouse pointer changes to a two-headed arrow. Drag the border of the AP Elements panel down about two inches or so

16. Chapter 6: Layers, Image Maps, and Navigation Bars 16 Displaying the Layers Panel

17. Chapter 6: Layers, Image Maps, and Navigation Bars 17 Naming the Layer and Adjusting Layer Properties Double-click the CSS-P Element ID text box in the Property inspector and then type col_map as the element 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 If necessary, click the Vis box arrow and then click visible Press the TAB key

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

19. Chapter 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 element. Scroll down if necessary to display the entire map Click the Image ID box in the Property inspector and type colorado_map as the entry. Click the Alt text box and type Colorado Map as the entry. Press the TAB key

20. Chapter 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

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

22. Chapter 6: Layers, Image Maps, and Navigation Bars 22 Creating Stacked Elements 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 element Click the Draw AP Div button on the Layout tab, and then use the rulers as a visual guide to draw an AP element measuring approximately 440px in width and 350px in height to the right of the col_map element Right-click anywhere on the rulers and then click Reset Origin on the context menu If necessary, move the mouse pointer over any border of the AP element outline and then click the border

23. Chapter 6: Layers, Image Maps, and Navigation Bars 23 Creating Stacked Elements Click the CSS-P Element text box and then type northern_colorado as the CSS-P Element. 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 AP element. Click to deselect the element Click the Draw AP Div button on the Layout tab and then draw a second AP element directly on top of the northern_colorado element Select the AP element. Add and modify the following properties in the Property inspector: CSS-P Element – central_colorado, W – 440px, H – 350px, and Vis – hidden

24. Chapter 6: Layers, Image Maps, and Navigation Bars 24 Creating Stacked Elements Press the TAB key Scroll up if necessary and click anywhere on the page to deselect the AP element. Click the Draw AP Div button on the Layout tab and then draw a third element on top of the central_colorado element Select the AP element. Add and modify the followingattributes in the Property inspector: CSS-P Element ID – southern_colorado, W – 440px, H – 350px, and Vis – hidden Press the TAB key

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

26. Chapter 6: Layers, Image Maps, and Navigation Bars 26 Selecting AP Elements 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 AP element Click the Image ID box and type so_col as the entry Click the Alt text box and type Southern Colorado Features as the entry. Press the TAB key

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

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

29. Chapter 6: Layers, Image Maps, and Navigation Bars 29 Selecting AP Elements and Adding Images

30. Chapter 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 AP element. Click the map2.gif image in the col_map element Click the Rectangular Hotspot tool and then move the crosshair pointer to the upper-left corner of the map2.gif image

31. Chapter 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 crosshair 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 crosshair pointer, and then, if necessary, scroll down

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

33. Chapter 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 Elements Click Show-Hide Elements. If necessary, click div “col_map” in the Elements list in the Show-Hide Elements dialog box to select it

34. Chapter 6: Layers, Image Maps, and Navigation Bars 34 Adding the Show-Hide Layers Action to the Image Map Hotspots Click the Show button. Click div “northern_colorado” and then click the Show button Click div “central_colorado” and then click the Hide button Click div “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 Elements on the Actions pop-up menu

35. Chapter 6: Layers, Image Maps, and Navigation Bars 35 Adding the Show-Hide Layers Action to the Image Map Hotspots If necessary, click div “col_map” and then click the Show button. Click div “northern_colorado” and then click the Hide button. Click div “central_colorado” and then click the Show button. Click div “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 Elements on the Actions pop-up menu

36. Chapter 6: Layers, Image Maps, and Navigation Bars 36 Adding the Show-Hide Layers Action to the Image Map Hotspots If necessary, click div “col_map” and then click the Show button. Click div “northern_colorado” and then click the Hide button. Click div “central_colorado” and then click the Hide button. Click div “southern_colorado” and then click the Show button 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

37. Chapter 6: Layers, Image Maps, and Navigation Bars 37 Adding the Show-Hide Layers Action to the Image Map Hotspots If necessary, maximize the browser window. (Allow blocked content, if necessary.) Move the mouse pointer over the hotspots on the map2.gif image to display each of the hidden elements Close the browser window and return to Dreamweaver

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

39. Chapter 6: Layers, Image Maps, and Navigation Bars 39 Adjusting Layer Placement Display the Property inspector. If necessary, click col_map in the AP Elements panel and then, if necessary, scroll up in the Document window to display the top of the col_map element Double-click the T text box in the Property inspector and if necessary, type 205px as the pixel number Press the TAB key and then click anywhere in the Document window

40. Chapter 6: Layers, Image Maps, and Navigation Bars 40 Adjusting Layer Placement Press the F12 key to view the Web page in your browser. If an Internet Explorer security message is displayed, click "Click here for options...“ then click Allow Blocked Content on the drop-down menu. If a Security Warning is displayed, click the Yes button. Verify that none of the text is covered and that the image is positioned nicely within the Web page. Move the mouse pointer over the map to display the different images Close the browser to return to Dreamweaver Make any necessary adjustments in the Document window to adjust the placement of the col_map AP element Click the Save button

41. Chapter 6: Layers, Image Maps, and Navigation Bars 41 Adjusting Layer Placement

42. Chapter 6: Layers, Image Maps, and Navigation Bars 42 Selecting and Aligning Multiple Layers Select the southern_colorado element in the AP Elements panel. Hold down the SHIFT key and then select the central_colorado, northern_colorado, and col_map elements 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 AP Elements panel Click Modify on the menu bar, point to Arrange, and then click Align Left on the Arrange submenu

43. Chapter 6: Layers, Image Maps, and Navigation Bars 43 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. Allow blocked content, if necessary. 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

44. Chapter 6: Layers, Image Maps, and Navigation Bars 44 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 panel group and then press SHIFT+F4 to collapse the Tag Inspector panel group If necessary, press F8 to display the Files panel. 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

45. Chapter 6: Layers, Image Maps, and Navigation Bars 45 Selecting and Aligning Multiple Layers

46. Chapter 6: Layers, Image Maps, and Navigation Bars 46 Setting the Netscape Resize Fix Click Edit on the menu bar and then click Preferences Click the AP Elements category and then click the Add resize fix when inserting AP element check box to select it. If necessary, click the Nest when created within an AP div 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

47. Chapter 6: Layers, Image Maps, and Navigation Bars 47 Setting the Netscape Resize Fix

48. Chapter 6: Layers, Image Maps, and Navigation Bars 48 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

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

50. Chapter 6: Layers, Image Maps, and Navigation Bars 50 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 e-mail address link and then press the DELETE key

51. Chapter 6: Layers, Image Maps, and Navigation Bars 51 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

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

53. Chapter 6: Layers, Image Maps, and Navigation Bars 53 Creating the Navigation Bar Scroll up to the top of the page in the Document window and then click below the heading. If necessary, click the Center button. 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

54. Chapter 6: Layers, Image Maps, and Navigation Bars 54 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

55. Chapter 6: Layers, Image Maps, and Navigation Bars 55 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

56. Chapter 6: Layers, Image Maps, and Navigation Bars 56 Creating the Navigation Bar Repeat Steps 3 through 13 to add the other four buttons, using the data shown in Table 6-1 on DW 535 If necessary, display the Property inspector Click the Table ID box, type nav_bar and then press the ENTER key If necessary, click the tag in the tag selector and center the table that contains the navigation bar Double-click the CellPad text box and type 4 as the entry. Press the TAB key

57. Chapter 6: Layers, Image Maps, and Navigation Bars 57 Creating the Navigation Bar Press the F12 key to view the navigation bar in your browser, and test each of the links Close the browser and then click the Save All button on the Standard toolbar

58. Chapter 6: Layers, Image Maps, and Navigation Bars 58 Creating the Navigation Bar

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

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

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

62. Dreamweaver CS3 Concepts and Techniques Chapter 6 Complete Layers, Image Maps, and Navigation Bars