Adobe Creative Suite 6 Design and Web Premium All-in-One For Dummies (2012)
Book VI
Dreamweaver CS6
Chapter 8: Creating CSS Layouts
In This Chapter
Getting started with CSS starter pages
Modifying layouts
Positioning content with the AP Div tool
Using behaviors with DIVs
Using the new CSS Transitions
Creating a proper page layout often requires more precision than standard HTML tags are capable of. Although most elements (such as lists and tables) have some level of layout control, creating real page layouts requires the use of CSS. Not just for text, CSS rules have the power to position elements on the page, set width and height properties, and so much more.
Creating CSS rules for layouts is done in very much the same way as those for text and image formatting (as discussed in Chapter 5 of this minibook). However, you have some new properties to explore that are more relevant to this task. We discuss those in this chapter.
Dreamweaver provides you with an extensive gallery of CSS-based layouts to help you get started, or you can build your own using the Insert panel’s Layout tools, including the Insert DIV and AP Div objects.
Using CSS Starter Pages
Dreamweaver provides you with a library of sample pages with CSS-based layouts as an alternative to starting from scratch. These CSS sample pages feature useful and common layout ideas, and because they’re created with CSS positioning, they’re highly flexible. You can modify them directly from the CSS Styles panel or the Property inspector. Just add your content and go!
Follow these steps to create a new document from a CSS starter page:
1. Choose File⇒New.
The New Document panel appears.
2. Choose Blank Page from the left, select a layout from the Layout column on the right (for example, the 2 Column Fixed, Left Sidebar, Header and Footer layout, as shown in Figure 8-1), and click Create.
Figure 8-1:Create a CSS-based layout using the built-in CSS Starter pages.
A new, untitled page opens, based on the layout you chose.
By default, new CSS starter pages place all of their CSS rules in an embedded style sheet. To use an external (linked) style sheet instead, choose Create New File from the Layout CSS drop-down list on the New Document dialog box. You’ll be prompted to save the file in your site’s root directory.
3. Choose File⇒Save to name and save the document.
4. Replace the placeholder text in each column with your own content, as shown in Figure 8-2.
Figure 8-2:Use a CSS starter page as a guide for creating CSS-based layouts.
Modifying a New Layout
A CSS layout, as its name indicates, is controlled completely by style sheet rules, so you can modify the look and feel of the page directly from the CSS Styles panel and the Property inspector. Each column, box, and space on your new page is positioned and sized using CSS rules and properties, all of which you can adjust from either the Property inspector (on the CSS Styles panel) or the CSS Rule Definition panel.
You can modify the layout by following these steps:
1. If the CSS Styles panel isn’t already open, choose Window⇒CSS Styles to open it.
2. Select the All tab to display the style sheet and its rules.
The internal style sheet is shown as <style> at the top. Click the arrow to its left to expand it and show all the rules it contains. Note: Layouts using an attached (external) style sheet display the style sheet name (such as styles.css) instead of the <style> tag.
3. Select the body rule.
This tag-based style controls the general formatting of the entire page (everything inside the <body> tag).
4. Click the field next to the background-color rule to edit it; rather than keep the #4E5869 (medium gray) setting, type a hexadecimal color (such as #CC0000 for red) to change the page’s background color.
5. Click the swatch next to the color rule to open the Swatches panel; pick a new default type color for the text on your page.
6. At the top of the CSS Styles panel, select another style (for example, the .twoColElstHdr #container style) to view its properties.
The .twoColHybLtHdr #container style controls the size and appearance of the main layout container on the page.
7. In the Property inspector, edit the properties to change the appearance of the style.
For example, you can change the width of the rule by entering a new number in the Width Rule text box. If you enter 95%, for example, you make the entire layout wider.
Controlling Elements with ID Styles
Each column and section that comprises your layout is controlled by one of the ID styles listed in the CSS Styles panel. Most every ID style features a width property you can use to change the size of different areas on the page.
Continue to modify different styles listed in the CSS Styles panel and see how they affect different elements on your page. Try changing the type color, font family, and other properties, such as padding and background color.
To figure out exactly which ID controls which column or section, click within the page area and look at the tag selector at the bottom of the Document window. The last <div> tag at the end of the chain shows you which container you’re in and its corresponding ID in the CSS Styles panel (for example, <div#mainBox>).
Creating AP (Absolute-Positioned) Divs
Dreamweaver uses CSS-controlled virtual containers, or boxes, created by the DIV tag to freely position content on a page. The DIV tag is a basic tag used to create areas for content on your page. You can create DIV tags from several places in Dreamweaver, including the Layout section of the Insert panel. Each DIV tag can have a unique ID style assigned to it to control its position, appearance, and size. The process of placing content often requires two steps: creating the DIV tag and then creating its corresponding style.
Dreamweaver makes this task easy with the AP Div tool, which enables you to draw boxes freely on the page and place content inside.
AP Div is short for absolute-positioned DIV; an item with an absolute position is fixed at a specific location on the page. When you draw an AP Div, its position is commonly set using the top and left CSS properties, with the top-left corner of the page as its reference point.
If you’ve worked with text frames in Adobe InDesign or Adobe Illustrator, you may find some similarities with AP Divs in Dreamweaver. However, AP Divs can contain mixed content of any kind, including other DIVs, text, images, and tables.
CSS treats most container elements on a page as boxes; this approach, referred to as the CSS Box model, enables these elements to share uniform properties such as padding, margins, width, height, and borders. Although CSS can regard most any containing element on a page as a box (such as a table or a list), DIV tags are most commonly used to create virtual boxes that you can use to position text, images, and even nested boxes.
Each box can have its own width, height, position (via the top and left properties), border, margins, and padding; each one is set using the appropriate CSS properties.
To create AP Divs, follow these steps:
1. Create a new page or open an existing page from your site.
2. On the Insert panel, select the Layout category.
3. Select the Draw AP Div tool.
The cursor appears as a cross hair when you move it back over the page.
4. Click anywhere on the page and drag to draw a new AP Div, as shown at the left in Figure 8-3; release the mouse button.
Figure 8-3:Click and drag on the page with the Draw AP Div tool to draw a new box.
5. Move the mouse pointer over the edge of the box until it changes to a 4-way arrow; click once and handles appear on all sides.
6. Click and drag any of these handles to resize the box vertically or horizontally.
7. To move the box, click and drag it by the tab that sits on its top-left edge and place the box where you want it on the page.
Take a look at the Property inspector, and you see the name as well as many DIV properties listed.
8. If the CSS Styles panel isn’t open, choose Window⇒CSS Styles to open it; under the All panel, click to the left of the style sheet (<style>) to expand it.
You see a new #apDiv1 ID style (as shown in Figure 8-4) that’s attached to the new AP Div you created. For each new DIV created, Dreamweaver assigns apDiv with a corresponding number in order of creation.
9. Click inside the new box to type, paste, or insert new content.
When you draw an AP Div on the page, two things occur: Dreamweaver inserts a tag to create the box and creates a CSS ID selector that stores the DIV’s position, width, height, and other properties. After you create an AP Div, you can type, paste, or insert content directly inside it. You can also assign a class rule to any DIV from the Property inspector — most often for handling content formatting, leaving the ID selector to control positioning and dimensions.
Figure 8-4:Each new box drawn with the AP Div tool is attached to a unique ID style that controls its position, width, and height.
Each AP Div you draw is listed automatically in the AP Elements panel (choose Window⇒AP Elements to display it), as shown in Figure 8-5. The AP Elements panel can help you select, hide, and show any AP Divs on the page. This panel is handy when you have lots of AP Divs on the page and want to navigate among them accurately. Most of all, because you can modify the properties for any AP Div from its corresponding ID style, the panel helps you figure out which ID style belongs to an AP Div.
Figure 8-5:Use the AP Elements panel to select, hide, and rearrange AP Divs in your page.
The AP Elements panel is often grouped with the CSS Styles panel, just in case you’re looking for it.
To modify a box (AP Div), follow these steps:
1. Choose Window⇒AP Elements to open the AP Elements panel.
2. In the panel (refer to Figure 8-5), locate and select apDiv1 to highlight it on the page.
The Property inspector displays its size and position in addition to other properties.
3. Using the text boxes in the Property inspector, change the box width by entering a number into the W field and change the box height by entering a number in the H field.
4. Click the swatch next to Bg Color and choose a color from the pop-up Swatches panel to set a background color for the box.
For additional properties, such as border or padding, add them in the CSS Styles panel.
5. If the CSS Styles panel isn’t already visible, open it by choosing Window⇒CSS Styles.
6. Double-click the #apDiv1 ID style that controls the box.
The CSS Rule Definition dialog box appears, as shown in Figure 8-6.
Figure 8-6:Add CSS properties across a variety of categories to build rules.
7. Select the Border category from the left to change the border.
8. In the Style column, use the Top drop-down list to set a border style (such as Solid) to all four sides.
Use the Top drop-down list under the Width category to select a border thickness (for example, medium) for all four sides. Use the topmost Color Picker under the Color column to assign a border color to all four sides.
To assign different values to any or all sides for style, width, or color, deselect the Same for All check box under their respective columns.
9. In the Box category on the left, under Padding, set the padding for all four sides of the box to the thickness you want (for example, enter 5 px in the text boxes).
10. Click OK to exit the panel and apply the changes.
You see how the CSS properties you applied affect the apDiv1 box on the page.
To hide a box shown under the AP Elements panel, click the column to the left of its name (under the Eye icon) until a closed Eye icon appears. To make the box reappear, click the Eye icon until the box opens again.
You may notice the Prevent Overlaps check box, deselected by default, at the top of the AP Elements panel. Because AP Divs can easily overlap each other, selecting this check box overrides that behavior by forcing boxes next to each other and preventing the creation of new boxes on top of each other.
Creating Relatively Positioned DIVs
The precision and to-the-pixel positioning of AP Divs can be quite liberating for designers, especially those who like the flexibility of print-based layouts. However, on certain occasions, you may want boxes to flow inline with other content on the page. AP Divs literally float above other elements, so shifting other page content has no effect on their position, which can be a good or a bad thing.
For more traditional inline behavior, you can create DIVs that use relative positioning. This allows an element to be shifted along with content surrounding it, making for a more liquid layout. This type of positioning is important for nested content or any situation where items should fall in line with other page content. For this task, use the Insert Div Tag tool, which you can find within the Insert panel’s Common and Layout categories.
Follow these steps to create a relatively positioned DIV:
1. Click within your page to position the cursor within an existing AP Div and then click the Insert Div Tag tool under the Insert panel’s Common and Layout categories.
2. When the Insert Div Tag dialog box appears, fine-tune the location of your new DIV by selecting a location from the Insert drop-down list, shown in Figure 8-7.
For example, choose After Start of Tag to place it within an existing DIV tag in your page.
You can also use the Insert Div Tag dialog box’s drop-down list to place the DIV before, after, or inside existing elements on the page. Leave the Insert drop-down list set to At Insertion Point to leave the box where you drew it or choose another location where you want the DIV created.
Figure 8-7:Choose a specific location to create and place the new DIV. Create a new ID style to control its position and appearance.
3. If you have an existing class selector you want to apply, select it from the Class drop-down list; otherwise, leave it blank.
4. If an existing ID isn’t available, enter a new name in the ID field and click the New CSS Rule button to create one. (Refer to Figure 8-7.)
5. When the New CSS Rule dialog box appears, be sure that your new selector is set to ID and that the name has a pound sign (#) in front of it. Click OK.
6. When the CSS Rule Definition dialog box appears, click and select Positioning from the Category list on the left to view CSS positioning properties.
7. In the Positioning area, select Relative from the Position menu, enter a width and height value in the Width and Height text boxes, and enter a Top and Left value under the Positioning properties. Click OK.
8. Click OK to close the Insert Div Tag dialog box.
A new, relatively positioned DIV appears with placeholder text, as shown in Figure 8-8.
Figure 8-8: You can create a new relatively positioned DIV within an AP Div.
The Top and Left values behave slightly differently for absolute versus relatively positioned DIVs. In the case of relative positioning, these values indicate an offset from surrounding content, as opposed to a set position within the page.
Using Behaviors with Boxes
To add cool effects and interactivity, you can use the built-in Dreamweaver behaviors, a collection of ready-to-use scripts that you can apply to nearly any element on a page. When used with DIVs or other containers, behaviors can enhance them with special effects or mouse interaction (such as clicks and rollovers) to make the page more exciting.
The Behaviors panel features a whole new set of effects, such as Fade/Appear, Shrink, Highlight, Slide, and more — all of which you can apply to the AP Divs you create.
You can add behaviors by following these steps:
1. Choose Window⇒Behaviors to open the Behaviors panel.
2. Select a DIV by using the AP Elements panel or select an element directly on the page.
3. In the Behaviors panel, click the plus sign.
The menu of available behaviors appears.
4. From the menu, choose the behavior you want to apply.
For example, to apply a fade effect, choose Effects⇒Appear/Fade, as shown in Figure 8-9.
The Appear/Fade dialog box opens.
Figure 8-9:Add a cool Appear/Fade effect to a DIV on your page.
5. Make sure the effect is set to Fade and select the Toggle Effect check box to make sure the box reappears when it’s clicked a second time. Then click OK.
The behavior is added to the list. The phrase onClick to its left indicates that this action occurs when the box is clicked.
6. Choose File⇒Save to save the page.
To see the effect in action, preview the page in a browser.
7. Choose File⇒Preview in Browser and pick a browser to launch the page.
When you test the page, clicking the box makes it disappear or reappear — lots of fun for you and highly interactive for users!
If your browser is restricting the web page from running scripts or ActiveX controls, click the message at the top of the browser window and select Allow Blocked Content to properly test the new behaviors.
When effects behaviors are used, Dreamweaver needs to copy to your local site several files that make the effects possible.
Using CSS Transitions
You can use the new CSS Transitions in Dreamweaver as a JavaScript-free alternative to Behaviors. Much like Behaviors, CSS Transitions allow you to add cool interactive behavior to elements on your page. However, CSS Transitions use only the power of new CSS3 properties to create these effects.
To apply a CSS Transition, follow these steps:
1. Select an element on the page (preferably a DIV) that you’d like to apply a transition to.
2. Open the CSS Transitions panel by choosing Window⇒ CSS Transitions.
3. Click the New (plus sign) button to open the New Transition dialog box.
Here you can set the element (by ID) duration and property you want to create a transition on. For instance, to create a fade in or fade out, you could set a transition on the opacity property as shown in Figure 8-10.
Figure 8-10:Create pure CSS Transition effects using CSS properties such as width, opacity, and background-color.
4. From the Target Rule drop-down list, select the ID of an element you’d like to create a transition on.
5. From the Transition On drop-down list, select the action (such as active or hover) that triggers the transition.
6. Set values for Duration, Delay, and Timing Function.
For example, set Duration at 1 second, Delay at 0, and the Timing Function to Ease-out.
7. Use the plus sign at the bottom to add a CSS property to the list.
This is the property you will transition, or change the value of, over time. For example, select opacity. Set the end value (for example, 0 for a full fade out).
8. Click Create Transition.
9. Preview the page in a browser or using Live view to see the animation in action!