Page Structuring Using Cascading Style Sheets / Page 3
Page Structuring Using Cascading Style Sheets: Part 1
Inserting Content into AP Elements
Inserting content into an AP Element is just as easy as it is to insert content into the cell of a table. To demonstrate this, I'll insert text into the first AP Element (the one at the top-left of the page) and insert an image into the second AP Element (the one on the center of the page that we just drew). To insert text into the first AP Element, place your cursor into the AP Element and start typing the text Ada the Admin Assistant. Now let's insert Ada's headshot photograph into the second AP Element. To do this, drag the
head_adatheadminassistant.gif image (located in the Images folder of our defined site in the Files panel) into the AP Element. When you've finished, the page will resemble Figure 7.4.
Notice that the text and the image are slightly undersized compared to the size of the AP Elements. To resize the AP Elements to correspond with their content, click, hold, and drag the resize handle located in the bottom-right of each AP Element to resize the AP Element to the size of the content within it. Finally, move the AP Element that contains the headshot photograph and place it just underneath the text AP Element. The result looks like Figure 7.5.
Figure 7.4 Add text to the first AP Element and drag an image into the second AP Element.
Figure 7.5 Resize the AP Elements so they match the size of the content within them and drag the headshot AP Element so that it sits just above the text AP Element.
You'll begin to notice the flexibility that AP Elements reveal: Adding them to the page is easy, moving them is easy, and resizing them respective to the content within them is easy. In the next few sections, we'll discuss the various properties you can set using the Property inspector and the AP Elements panel.
Modifying AP Element Properties with the Property Inspector
Like every feature in Dreamweaver, AP Elements have properties you can customize using the Property inspector. If you haven't noticed, the AP Elements Property inspector becomes available when you select an AP Element. As you can see in Figure 7.6, the Property inspector outlines properties that uniquely identify the AP Element, set the dimensions of the AP Element, set the stacking order or z-index of the AP Element, and so on. Also notice that moving your cursor just over the AP Element displays properties already set for the AP Element within a yellow ToolTip.
Figure 7.6 The AP Element-based Property inspector outlines numerous customizable properties.
A complete list of customizable properties outlined includes the following:
Figure 7.7 AP Elements with higher Z-Indexes appear above AP Elements with lower Z-Indexes.
As you'll see throughout the chapter, an AP Element is nothing more than a
<span> tag complete with a unique ID and a document-wide style rule (by default). Modifying properties in the Property inspector changes the document-wide style rule accordingly. To demonstrate this, switch to Code view. As you can see from Figure 7.8, each AP Element is nothing more than a
<div> tag with an ID and a document-wide style rule.
You're probably thinking that document-wide styles aren't the best way of manipulating properties for AP Elements. If that's what you're thinking, you're right! Assuming that you were developing your site entirely in AP Elements, changing all the AP Element's properties in your site would be a nightmare if all the styles were developed within individual pages. A much better alternative is to create an ID within a style sheet that defines AP Element properties globally. When you want to make property adjustments (such as positioning properties), you make them once in the style sheet and instantly those changes are propagated to all of the pages that make use of the style properties. We'll demonstrate this process later in the chapter.
Figure 7.8 AP Elements are nothing more than a or tag complete with a unique ID and an inline style rule.
Printed with permission from Pearson Education from the book Adobe Dreamweaver CS3 Unleashed written by Zak Ruvalcaba.