Chapter 6

Dreamweaver CS4Concepts and Techniques

Chapter 6

Absolute Positioning, Image Maps, and Navigation Bars

http://www.scseries.com/

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 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

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

4



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



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



Copying Data Files to the Parks Web Site



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



Opening the Alaska Attractions Page and Displaying the Rulers



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



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



Creating and Selecting an AP Element for the Alaska Map Image



Displaying the AP Elements 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



Displaying the AP Elements Panel



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



Naming the AP Element and Adjusting the AP Element Properties



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



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



Adding an Image to the alaska_map AP Element



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




• 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




• 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



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



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



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



Selecting AP Elements and Adding Images



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



Creating Hotspots on the Alaska Map Image



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



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



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



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



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



Adding the Show-Hide Elements Action to the Image Map Hotspots



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



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



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



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



Selecting and Aligning Multiple AP Elements



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




• 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



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




• 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




• 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




• 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


• 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




• 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


• In the Element name text box, type featured_park, and then press the tab key






• 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


49




• In the Element name text box, type wildlife_ education, and then press the tab key



• 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

50




• Click the OK button to insert the navigation bar• If necessary, select the table, click the Align

button in the Property inspector, and then click Center

• Click the OK button and then click the Save button on the Standard toolbar to save your work

• Press the F12 key to view the navigation bar in your browser, allow blocked content, and test each of the links

• Close the browser

51



Closing the Web Site and Quitting Dreamweaver• Click the Close button in the upper-right corner of

the Dreamweaver title bar to close the Dreamweaver window, the document window, and the Alaska Parks Web site



Chapter Summary

• 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 Summary

• Create an image map• Add and edit behaviors• Describe a navigation bar• Create a navigation bar• Insert a Date object


Dreamweaver CS4Concepts and Techniques

Chapter 6 Complete

Absolute Positioning, Image Maps, and Navigation Bars


Chapter 6

Documents

Transcript of Chapter 6