1 / 56

Chapter 6

Chapter 6. Absolute Positioning, Image Maps, and Navigation Bars. Chapter Objectives. Explain the concept of AP elements Insert, select, resize, and move an AP element Name an AP element Align AP elements Describe an image map. Chapter Objectives. Create an image map

dori
Download Presentation

Chapter 6

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Chapter 6 Absolute Positioning, Image Maps, and Navigation Bars

  2. Chapter Objectives • Explain the concept of AP elements • Insert, select, resize, and move an AP element • Name an AP element • Align AP elements • Describe an image map Chapter 6: Absolute Positioning, 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 Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  4. Starting Dreamweaver and Opening the Alaska Parks Web Site • Click the Start button on the Windows taskbar • Click Adobe Dreamweaver CS4 on the Start menu, or point to All Programs on the Start menu, and then click Adobe Dreamweaver CS4 to start Dreamweaver • If necessary, display the panel groups • If the Alaska Parks Web site hierarchy is not displayed, click the Files panel arrow and then click Alaska Parks on the Files pop-up menu to display the Alaska Parks Web site hierarchy in the Files panel Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  5. Copying Data Files to the Parks Web Site • Click the Files panel button, and then click the name of the drive containing your data files, such as Removable Disk (M:) • If necessary, click the plus sign (+) next to the folder containing your data files to expand that folder, and then click the plus sign (+) next to the Chapter06 folder to expand it • Expand the parks folder to display the data files • Click the alaska_attractions document to select it and then copy it to the parks folder Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  6. Copying Data Files to the Parks Web Site • Double-click the images folder. Click the button01a.jpg file or the first file in the list. Hold down the SHIFT key and then click the southern_alaska.jpg image file, or the last file in the list • Press CTRL+C to copy the files • If necessary, click the Files panel button, and then click the drive containing the Alaska Parks Web site. Expand the your name folder and the parks folder. Click the images folder to select it • Press CTRL+V to paste the image files in the images folder Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

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

  8. Opening the Alaska Attractions Page and Displaying the Rulers • Collapse the image folder, if necessary, in the Files panel, and then double-click the alaska_attractions.htm file to open the file and to display the insertion point at the top of the window • Click the Property inspector title bar to collapse the Property inspector • Click View on the Application bar, point to Rulers, and then point to Show to highlight the Show command on the Rulers submenu • If necessary, click Show to display the rulers in the document window and to display the ruler-origin icon in the upper-left corner Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  9. Opening the Alaska Attractions Page and Displaying the Rulers Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  10. Creating and Selecting an AP Element for the Alaska Map Image • If necessary, display the Insert bar and then select the Layout tab. Expand the Property inspector by clicking its title bar • 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, making sure that the insertion point is blinking below the last line of text in the document window and the vertical ruler 0 point is to the left of the insertion point • Click the Draw AP Div button on the Layout tab and then move the pointer to the insertion point so that the AP element pointer is displayed in the document window Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  11. Creating and Selecting an AP Element for the Alaska Map Image • Using the rulers as a guide, draw an AP element approximately 470 pixels wide and 375 pixels high • Click the AP element to select it, and then, if necessary, make the following changes in the CSS-P Element Property inspector: L – 3px, T – 200px, W – 470px, and H – 375px • Scroll to the top of the document window • Right-click anywhere on the rulers and click Reset Origin on the context menu Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  12. Creating and Selecting an AP Element for the Alaska Map Image Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  13. Displaying the AP Elements Panel • Press theF2 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 Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  14. Displaying the AP Elements Panel Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  15. Naming the AP Element and Adjusting the AP Element Properties • Click the CSS-P Element text box in the Property inspector and then type alaska_map as the element name. Press the ENTER key to make the change in the Property inspector Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  16. Naming the AP Element and Adjusting the AP Element Properties Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  17. Adding an Image to the alaska_map AP Element • In the Files panel, click the plus sign next to the images folder to expand the folder • Scroll to locate and click the map02.jpg image • Drag the map02.jpg image onto the element. Scroll down if necessary to display the entire map • Click the image ID box in the Property inspector and type map as the entry. Click the Alt text box and type Alaska Map as the entry. Press the tab key • Change the W to 470 and the H to 375 to resize the map image Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  18. Adding an Image to the alaska_map AP Element • Type Alaska Parks in the Title text box on the Document toolbar to title the page • Click the Save button on the Standard toolbar to save your work • Press F12 and view the Web page in your browser • Close the browser Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  19. Adding an Image to the alaska_map AP Element Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  20. Creating Stacked Elements • Click the ruler-origin icon and drag it about 50 pixels to the right of the alaska_map element to prepare for adding the stacked elements • Collapse the Panel groups so you have more room to work • 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 400px in width and 350px in height to the right of the alaska_map element • Move the mouse pointer over any border of the AP element outline and then click the border to select the element • Click the CSS-P Element text box and then type northern_alaska as the CSS-P Element. Enter the following properties: W – 400px, H – 350px, and Vis – hidden. If necessary, change L to 525px and T to 200px Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  21. Creating Stacked Elements • Press the tab key when you are finished entering the properties for the northern_alaska AP element • Right-click anywhere on the rulers and then click Reset Origin on the context menu • Scroll as necessary to display all of the northern_alaska element • Click the Draw AP Div button on the Layout tab and then draw a second AP element directly on top of the northern_alaska element • If necessary, select the AP element. Add and modify the following properties in the Property inspector: CSS-P Element – central_alaska, W – 400px, H – 350px, and Vis – hidden. If necessary, change L to 525px and T to 200px Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  22. Creating Stacked Elements • Press the tab key to add the modified properties for the central_alaska element • With the central_alaska AP element still selected, click the Draw AP Div button on the Layout tab and then draw a third element on top of the central_alaska element • If necessary, select the AP element. Add and modify the following attributes in the Property inspector: CSS-P Element ID – southern_alaska, W – 400px, H – 350px, L – 525px, T – 200px, and Vis – hidden • Press the tab key to add the properties for the southern_alaska element Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  23. Creating Stacked Elements Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  24. Selecting AP Elements and Adding Images • Expand the Panel groups • In the AP Elements panel, click the eye icons so that closed-eye icons are displayed to the left of the central_alaska and northern_ alaska elements. If necessary, click to display an open-eye icon appears next to the southern_alaska element. Then click the southern_alaska element to select it • If necessary, scroll to the right in the document window so that the entire AP element is displayed • Locate the southern_alaska.jpg file in the Files panel and drag the southern_alaska. jpg image onto the southern_alaska AP element • Click the image ID box and type so_alaska as the image ID • Click the Alt text box and type Southern Alaska Features as the entry. If necessary, press the tab key so that the southern_alaska.jpg image is displayed in the southern_alaska element Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  25. Selecting AP Elements and Adding Images • In the AP Elements panel, click the eye icon to the left of southern_alaska twice to close the eye • Click the eye icon next to central_alaska to display an open eye, and then click central_alaska to select it • If necessary, scroll up in the Files panel and locate the central_alaska.jpg file. Drag the central_alaska.jpg image onto the central_alaska AP element • Click the image ID box and type cen_alaska as the image ID. Click the Alt text box and type Central Alaska Features as the entry, and then press the tab key • In the AP Elements panel, click the eye icon to the left twice of central_alaska to close the eye Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  26. Selecting AP Elements and Adding Images • Click the eye icon to the left of northern_alaska to open the eye, and then click northern_alaska to select the element • Locate the northern_alaska.jpg image in the Files panel and drag the image onto the northern_alaska AP element • Click the image ID box and type nor_alaska as the entry • Click the Alt text box and type Northern Alaska Features as the entry, and then press the tab key • Save the alaska_attractions page Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  27. Selecting AP Elements and Adding Images Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  28. Creating Hotspots on the Alaska Map Image • Collapse the panel groups • If necessary, scroll to display the upper-left corner of the alaska_map AP element. Click the map image in the alaska_map element to select it • Click the Rectangle Hotspot tool in the Property inspector, and then move the crosshair pointer to the upper-left corner of the map02.jpg image • Drag to draw a rectangle encompassing approximately the top third of the map02.jpg image • Draw two more hotspots on the map02.jpg 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 to display the entire map02 image Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  29. Creating Hotspots on the Alaska Map Image Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  30. Adding the Show-Hide Elements Action to the Image Map Hotspots • Display the panel groups and collapse the Property inspector • Click the top rectangular hotspot on the map02.jpg image to select it • Click Window on the Application bar, and then click Behaviors to display the Behaviors panel • Click the Add behavior button to display the Actions pop-up menu in the Behaviors panel • Point to Show-Hide Elements Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  31. Adding the Show-Hide Elements Action to the Image Map Hotspots • Click Show-Hide Elements to open the Show-Hide Elements dialog box. If necessary, click div “alaska_map” in the Elements list to select it • Click the Show button to set the alaska_map element to display this element when the pointer is over the top rectangular hotspot • Click div “northern_alaska” and then click the Show button to display this element when the pointer is over the top rectangular hotspot • Click div “central_alaska” and then click the Hide button to hide the element when the pointer is over the top rectangular hotspot • Click div “southern_alaska” and then click the Hide button to complete adding the Show-Hide Elements behaviors Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  32. Adding the Show-Hide Elements Action to the Image Map Hotspots • Click the OK button • Click the middle hotspot on the map02.jpg image, click the Add behavior button in the Behaviors panel, and then click Show- Hide Elements on the Actions pop-up menu to display the Show-Hide Elements dialog box • If necessary, click div “alaska_map” and then click the Show button. Click div “northern_alaska” and then click the Hide button to hide the element when the pointer is over the middle rectangular hotspot. Click div “central_alaska” and then click the Show button to show the element when the pointer is over the middle rectangular hotspot. Click div “southern_alaska” and then click the Hide button to hide the element when the pointer is over the middle rectangular hotspot • Click the OK button Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  33. Adding the Show-Hide Elements Action to the Image Map Hotspots • If necessary, scroll down in the document window and then click the third hotspot on the map02.jpg image • Click the Add behavior button in the Behaviors panel, and then click Show-Hide Elements on the Actions pop-up menu to open the Show-Hide Elements dialog box • With div “alaska_map” selected, click the Show button. Click div “northern_alaska” and then click the Hide button. Click div “central_alaska” and then click the Hide button. Click div “southern_alaska” and then click the Show button to show the element when the pointer is over the bottom rectangular hotspot • Click the OK button Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  34. Adding the Show-Hide Elements Action to the Image Map Hotspots • 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. (Allow blocked content, if necessary.) • Move the mouse pointer over the hotspots on the map02.jpg image to display each of the hidden elements • Close the browser window and return to Dreamweaver Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  35. Adding the Show-Hide Elements Action to the Image Map Hotspots Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  36. Adjusting AP Element Placement • Display the Property inspector and the AP Elements panel. Click alaska_map in the AP Elements panel and then, if necessary, scroll up in the document window to display the top of the alaska_map element • If necessary, double-click the T text box in the Property inspector and type 205px as the T value • Press the tab key and then click anywhere in the document window • Click the Save button on the Standard toolbar to save any changes Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  37. Selecting and Aligning Multiple AP Elements • Select the southern_alaska element in the AP Elements panel. Hold down the shift key and then select the central_alaska, northern_alaska, and alaska_map elements so that all four elements are selected • Click Modify on the Application bar, point to Arrange, and then point to Align Top on the Arrange submenu to display the Modify menu and Arrange submenu • Click Align Top to align all four elements at the top. If necessary, scroll down in the document window • Hold down the shift key and then click alaska_map in the AP Elements panel to deselect it • Click Modify on the Application bar, point to Arrange, and then click Align Left on the Arrange submenu to align all elements to the left Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  38. Selecting and Aligning Multiple AP Elements • Click Modify on the Application bar, point to Arrange, and then click Make Same Width on the Arrange submenu to make all elements the same width • Click Modify on the Application bar, point to Arrange, and then click Make Same Height on the Arrange submenu to make all elements the same height • Click View on the Application bar, point to Rulers, and then click Show on the Rulers submenu to hide the rulers • Click the Save button on the Standard toolbar to save your work • Press the F12 key to view the Web page in your browser. Allow blocked content, if necessary. Move the mouse pointer over the Alaska map to verify that the images are displayed and that they are aligned properly Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  39. Selecting and Aligning Multiple AP Elements • Close the browser and return to Dreamweaver. Close the alaska_attractions page • Press F2 to collapse the AP Elements panel group and then press SHIFT+F4 twice to collapse the Tag Inspector panel group • In the Files panel, open the index.htm file and scroll to the bottom of the page. Click to the right of the Alaska National Parks Hotel Reservations link and press SHIFT+ENTER. Type Alaska Attractions Map as the entry, create a link to the alaska_attractions.htm page, and then save the index.htm file • Press F12 to view the Web page and test the link. Close the browser to return to Dreamweaver Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  40. Selecting and Aligning Multiple AP Elements Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  41. Preparing the Index Page by Inserting the Date Object and Deleting Existing Links • If necessary, collapse the Property inspector and the panel groups • At the bottom of the index.htm page, select the date and then press the Delete key to delete the date • Click Insert on the Application bar to display the Insert menu and then point to Date • Click Date to display the Insert Date dialog box and to display the dates and times available formats Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  42. Preparing the Index Page by Inserting the Date Object and Deleting Existing Links • Click the Update automatically on save check box to apply the default date format • Click the OK button to display the current date on the index page and then click anywhere on the page to deselect the date • Click the Save button on the Standard toolbar to save your work Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  43. Preparing the Index Page by Inserting the Date Object and Deleting Existing Links Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  44. Creating the Navigation Bar • Display the Property inspector • Scroll up to the top of the index.htm page in the document window and then insert a blank line below the heading. If necessary, click the Center button. Click Insert on the Application bar, point to Image Objects, and then point to Navigation Bar on the Image Objects submenu • Click Navigation Bar to display the Insert Navigation Bar dialog box • Type alaska_parks in the Element name text box and then press the tab key. 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. If necessary, click the View Menu button and select List. Verify that the Preview Images check box is selected Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  45. Creating the Navigation Bar • Click the button01a image • 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, click button01b to select the button, and then click OK • Click the Alternate text text box and then type Alaska Parks as the alternate text • Click the When clicked, Go to URL: text box. Click the Browse button and then click denali.htm. • Click OK to select the denali.htm file Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  46. Creating the Navigation Bar • Click the Plus button above the Nav bar elements box • In the Element name text box, type alaska_monuments • Click the Browse button to the right of the Up image text box • Click button02a and then click OK • Click the Browse button to the right of the Over image text box • Click button02b and then click OK Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  47. Creating the Navigation Bar • Click the Alternate text text box and then type Alaska Monuments as the alternate text • Click the Browse button for the When clicked, Go to URL: text box, select aniakchak.htm, and then click OK • Click the Plus button above the Nav bar elements box • In the Element name text box, type Hotels, and then press the tab key • Click the Browse button to the right of the Up image text box, click button03a, and then click OK Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  48. Creating the Navigation Bar • Click the Browse button to the right of the Over image text box, click button03b, and then click OK • Click the Alternate text text box and then type Hotels as the alternate text • Click the Browse button next to the When clicked, Go to URL: text box, click hotel_form.htm, and then click OK • Click the Plus button above the Nav bar elements box • In the Element name text box, type featured_park, and then press the tab key Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  49. Creating the Navigation Bar • Click the Browse button to the right of the Up image text box, click button04a, and then click OK • Click the Browse button to the right of the Over image text box, click button04b, and then click OK • Click the Alternate text text box and then type Featured Park as the alternate text • Click the Browse button next to the When clicked, Go to URL: text box, click alaska_attractions, and then click OK • Click the Plus button above the Nav bar elements box Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

  50. Creating the Navigation Bar • In the Element name text box, type wildlife_ education, and then press the tab key • Click the Browse button to the right of the Up image text box, click button05a, and then click OK • Click the Browse button to the right of the Over image text box, click button05b, and then click OK • Click the Alternate text text box, and then type Wildlife Education as the alternate text • Click the When clicked, Go to URL: text box, and then type http://www.nature.nps.gov Chapter 6: Absolute Positioning, Image Maps, and Navigation Bars

More Related