ptg 254 Chapter 10 AP Elements have several unique properties that let you design way beyond the static text and graphic Web pages of the past. You can show and hide AP elements to create effects. For example, you can create a drop-down menu, or you can display the larger version of an image when you point to, or rollover, the small thumbnail version. In this example, Dreamweaver shows or hides the AP elements with the dif- ferent images. Creating a Rollover Using AP Elements Create a Show/Hide Rollover Create a new Web page. Click the Layout tab on the Insert panel. Click the Draw AP Div button, and then create two AP elements. ◆ An AP element 60 by 60 pixels, which contains a small thumbnail graphic. Name the AP element in the Properties panel, Thumb. ◆ An AP element 300 by 300 pixels, which contains the larger image. Name this AP element, Main. Move the Thumb AP element to the left in the document window, and then move the Main AP element to the right. Drag an image to the Thumb AP element, and an image to the Main AP element (the images should have the same width and height as the AP elements). Open the Properties panel. Select the Main AP element and change the Visibility of the AP element to Hidden. Click the Window menu, and then click Behaviors to display the Behaviors panel. Select the Thumb AP element. 9 8 7 6 5 4 3 2 1 6 2 3 7 1 4 9 10 8 From the Library of Wow! eBook ptg Chapter 10 Creating Page Layouts Using CSS-P 255 Click the Add Behavior button, and then click Show-Hide Elements. Select div "Main" from the available elements. Click the Show button. Click OK. Click the Event list arrow, and then click onMouseOver. Click the Add Behavior button, and then click Show-Hide Elements. Select div "Main" from the available elements. Click the Hide button. Click OK. Click the Event list arrow, and then click onMouseOut. Click the File menu, point to Preview In Browser, and then select a browser. When the Web page displays, rolling over the smaller thumbnail of the image causes the larger image to display. When you roll out of the thumbnail AP element, the larger image disappears… like magic. 20 19 18 17 16 15 14 13 12 11 10 12 11 13 17 16 18 15 14 19 From the Library of Wow! eBook ptg 256 Chapter 10 While the advantage to designing with AP elements is the greater flexi- bility it affords, one of the greatest disadvantages of using AP elements is that they are viewable in only the most recent generation of browsers. Dreamweaver enables you to get the best of both worlds by making it possible for you to use AP elements to design complex page layouts, and then to transform those AP elements into tables that can be viewed in earlier browsers. For example, you might need to convert your AP elements to tables if you need to support browsers before ver- sion 4.0. Nevertheless, Dreamweaver's capability to convert AP ele- ments to tables enables you to create complex layouts with ease. Designing this way has some limitations—you can't, for example, over- lap AP element items on top of one another. If you have any overlap- ping AP elements within the document, Dreamweaver does its best to reposition the AP elements side by side. However, it's best if you make those corrections manually before performing the conversion. In addi- tion, instead of using tables or Layout mode to create a document, some Web designers prefer to work with AP elements. If you need to convert a table back to AP elements, you can do it in Dreamweaver. Converting AP Elements to Tables Convert AP Elements to a Table Open the Web page that contains AP elements you want to convert to a table. ◆ Make sure you don’t have any overlapping AP elements. Click the Modify menu, point to Convert, and then select AP Divs To Tables. Select from the following table layout options: ◆ Most Accurate. Attempts to convert the AP element document as close to the original as possible. ◆ Smallest. Choose to collapse smaller than a user-defined size. ◆ Use Transparent GIFs. Select this option to allow the use of transparent GIF files in empty cells. ◆ Center On Page. Select this option to center the table on the active Web page. 3 2 1 1 2 From the Library of Wow! eBook ptg Chapter 10 Creating Page Layouts Using CSS-P 257 Select from the following layout tools options: ◆ Prevent Overlaps. Select to prevent cells from overlapping. ◆ Show AP Elements Panel. Select to show the AP Elements panel (displays when you click the OK button). ◆ Show Grid. Select to display a grid in the document window. ◆ Snap To Grid. Select to force the newly created table to snap to the existing grid. Click OK. Convert Table to AP Elements Open the Web page that contains a table you want to convert to AP elements. Click the Modify menu, point to Convert, and then click Tables To AP Divs. Select from the following table layout options: ◆ Prevent Overlaps. Select to prevent AP elements from overlapping. ◆ Show AP Elements Panel. Select to show the AP Elements panel (displays when you click the OK button). ◆ Show Grid. Select to display a grid in the document window. ◆ Snap To Grid. Select to force the newly created table to snap to the existing grid. Click OK. 4 3 2 1 5 4 5 3 4 3 4 From the Library of Wow! eBook ptg This page intentionally left blank From the Library of Wow! eBook . convert a table back to AP elements, you can do it in Dreamweaver. Converting AP Elements to Tables Convert AP Elements to a Table Open the Web page that contains AP elements you want to convert. limitations—you can't, for example, over- lap AP element items on top of one another. If you have any overlap- ping AP elements within the document, Dreamweaver does its best to reposition the. greater flexi- bility it affords, one of the greatest disadvantages of using AP elements is that they are viewable in only the most recent generation of browsers. Dreamweaver enables you to get