2. Explain the concept of AP elements Insert, select, resize, and move an AP element Display the AP Elements panel Name an AP element Align AP elements Add an image to an AP element Objectives Absolute Positioning, Image Maps, the History Panel, and Date Objects 2
3. Create and select stacked AP elements Describe an image map Create an image map Add and edit behaviors Use the History panel Insert a Date object Absolute Positioning, Image Maps, the History Panel, and Date Objects 3 Objectives
4. Absolute Positioning, Image Maps, the History Panel, and Date Objects 4 Project – Using AP Elements, Image Maps, the History Panel, and Date Objects
5. Absolute Positioning, Image Maps, the History Panel, and Date Objects 5 Project – Using AP Elements, Image Maps, the History Panel, and Date Objects
6. Absolute Positioning, Image Maps, the History Panel, and Date Objects 6 Project – Using AP Elements, Image Maps, the History Panel, and Date Objects
7. Determine whether to use AP elements to lay out a page Decide where AP elements should appear on a page Consider using an image map Plan behaviors for AP elements Decide where to use the Date object Absolute Positioning, Image Maps, the History Panel, and Date Objects 7 General Project Guidelines
9. If necessary, display the Insert bar and then select the Layout tab to display the buttons for working with AP elements Move the insertion point to the location for the AP div Click the ruler-origin icon and drag it to the insertion point to position the ruler 0 point where you will begin to draw the AP element Click the Draw AP Div button on the Layout tab to prepare for drawing an AP element Move the pointer to the insertion point so that the AP element pointer is at the 0, 0 point on the rulers Absolute Positioning, Image Maps, the History Panel, and Date Objects 9 Creating and Selecting an AP Element
10. Using the rulers as a guide, draw an AP element Click the AP element to select it If necessary, make changes to the size and position in the CSS-P Element Property inspector Right-click anywhere on the rulers and click Reset Origin on the context menu to reset the origin to the upper-left corner of the Document window Absolute Positioning, Image Maps, the History Panel, and Date Objects 10 Creating and Selecting an AP Element
11. Absolute Positioning, Image Maps, the History Panel, and Date Objects 11 Creating and Selecting an AP Element
12. Click Window on the Application bar and then click AP Elements to display the AP Elements panel If necessary to view the complete AP Elements panel, move the mouse pointer over the bottom of the AP Elements panel until the pointer changes to a two-headed arrow If necessary, drag the border of the AP Elements panel up or down so that it is displayed fully Absolute Positioning, Image Maps, the History Panel, and Date Objects 12 Displaying the AP Elements Panel
14. Click the CSS-P Element text box in the Property inspector Type the desired element name Press the ENTER key to make the change in the Property inspector Absolute Positioning, Image Maps, the History Panel, and Date Objects 14 Naming the AP Element
16. In the Files panel, locate and click the desired image Drag the image onto the AP element Change the width and height as desired Click the image ID box in the Property inspector and then type the desired name for the image Click the Alt text box and type the desired alternate text Click the Save button on the Standard toolbar to save your work Absolute Positioning, Image Maps, the History Panel, and Date Objects 16 Adding an Image to an AP Element
18. Draw an AP element in the desired position at the desired size Set the ID, width, and height for the element Set the Vis property to hidden Draw a second AP element directly on top of the previous element, and set the properties so that it is in the same location and at the same size as the previous element. Set the Vis property to hidden Repeat the previous step for each additional stacked element Absolute Positioning, Image Maps, the History Panel, and Date Objects 18 Creating Stacked Elements
20. Use the eye icon in the AP Elements panel to hide and display each element Drag the desired image from the Files panel onto the desired AP element that is displayed Absolute Positioning, Image Maps, the History Panel, and Date Objects 20 Selecting AP Elements and Adding Images
21. Absolute Positioning, Image Maps, the History Panel, and Date Objects 21 Selecting AP Elements and Adding Images
22. An image map is an image that has one or more hotspots placed on top of it A hotspot is a designated area on an image map that the user clicks to cause an action to occur Rectangular Circle Polygon Absolute Positioning, Image Maps, the History Panel, and Date Objects 22 Image Maps
24. Click the image to which you wish to add the hotspot Click the desired hotspot tool Drag to draw the hotspot in the desired location Click anywhere in the window to cancel the crosshair pointer Absolute Positioning, Image Maps, the History Panel, and Date Objects 24 Creating Hotspots on an Image
27. Click the hotspot in the image map to which you want to add the action 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 Click Show-Hide Elements to open the Show-Hide Elements dialog box Click each element and then click the Show button or Hide button Click the OK button to accept the setting for the hotspot Absolute Positioning, Image Maps, the History Panel, and Date Objects 27 Adding the Show-Hide Elements Action to the Image Map Hotspots
28. Absolute Positioning, Image Maps, the History Panel, and Date Objects 28 Adding the Show-Hide Elements Action to the Image Map Hotspots
29. Hold down the SHIFT key and then click each element to select Click Modify on the Application bar, point to Arrange, and then click the desired alignment command 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 Absolute Positioning, Image Maps, the History Panel, and Date Objects 29 Selecting and Aligning Multiple AP Elements
30. Absolute Positioning, Image Maps, the History Panel, and Date Objects 30 Selecting and Aligning Multiple AP Elements
31. Click Window on the Application bar and then click History to display the History panel Drag the slider bar up as much as necessary to undo the desired number of commands Click the Close button on the History panel title bar to close the History panel Absolute Positioning, Image Maps, the History Panel, and Date Objects 31 Using the History Panel
33. 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, which includes a list of date formats Click the Update automatically on save check box to have Dreamweaver display the current date when the page is saved Click the OK button to display the current date in the default format Absolute Positioning, Image Maps, the History Panel, and Date Objects 33 Inserting the Date Object
35. Explain the concept of AP elements Insert, select, resize, and move an AP element Display the AP Elements panel Name an AP element Align AP elements Add an image to an AP element Chapter Summary Absolute Positioning, Image Maps, the History Panel, and Date Objects 35
36. Create and select stacked AP elements Describe an image map Create an image map Add and edit behaviors Use the History panel Insert a Date object Absolute Positioning, Image Maps, the History Panel, and Date Objects 36 Chapter Summary
