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.. Chapter 10 Creating Page Layouts Using CS
Trang 1AP 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
9
10 8
Trang 2Chapter 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
Trang 3While 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 overover-lap- 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
3
2
Trang 4Chapter 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
3
4
3
4
Trang 5This page intentionally left blank