Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)
Book VI
Dreamweaver CC
Chapter 8: Creating CSS Layouts
In This Chapter
Getting started with CSS starter pages
Modifying layouts
Creating relatively positioned DIVs
Styling DIV elements
Using behaviors with DIVs
Using 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 tools, including the Insert DIV object.
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, Right 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 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 Designer panel, 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.
Open one of the CSS starter pages, as described in the preceding exercise. You can modify the layout by following these steps:
1. If the CSS Designer panel isn’t already open, choose Window⇒CSS Designer to open it.
2. Expand the Sources section to display the style sheet and its rules.
The internal style sheet is shown as <style> at the top, under All Sources. Look in the Selectors section to see 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 style.
This tag-based style controls the general formatting of the entire page (everything inside the <body> tag).
4. In the Properties section, click the field next to the color property in the Text section to edit it; rather than keep the #000 (black) setting, type a hexadecimal color (such as #CC0000 for red) to change the body text color.
Click the Text icon at the top of the Properties section to jump to Text properties.
5. In the Selectors section, select another style (for example, the .container style) to view its properties.
The .container style controls the size and appearance of the main layout container on the page.
6. In the Properties section, edit the properties to change the appearance of the style.
For example, you can change the width of the container by entering a new number in the width text box. If you enter 400px, for example, you make the entire layout narrower.
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 Designer 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 Designer 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 Designer panel (for example, <div#mainBox>).
Creating Relatively Positioned DIVs
Dreamweaver lets you 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 Structure categories.
Follow these steps to create a relatively positioned DIV:
1. Click within your page to position the cursor within existing content and then click the Div tool under the Insert panel’s Common or Structure categories.
2. When the Insert Div 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-3.
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-3: 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-3.)
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.
You can also choose other ways to position the DIV, such as Absolute or Fixed.
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-4.
Figure 8-4: You can create a new relatively positioned DIV within your content.
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.
Styling DIV Elements
After you have inserted a DIV element into a web page, you can use the CSS Designer panel to modify its properties. You have complete control over the background, spacing, text formatting and positioning, and much more. What’s even better is that you can edit these properties in a visual way.
You can also set up the styling for a DIV element when you insert it onto a page by creating a class and rules for it to follow. This can then be applied to other elements when you create them, or even elements already positioned on your web page.
Follow these steps to modify the properties of your DIV:
1. Click within your page to position the cursor within existing content and then click the Div tool under the Insert panel’s Common or Structure categories.
2. Enter a new name in the ID field and click the New CSS Rule button to create one.
3. When the New CSS Rule dialog box appears, be sure that your new selector is set to Class and enter a name for the selector. Click OK.
The CSS Rule Definition dialog opens.
4. Make style settings in the CSS Rule Definition dialog box.
These properties can be used for multiple DIV elements on your page.
5. Click OK when you are finished setting styles, then click OK again to insert the DIV into your page.
6. Click within the page to position the cursor in a new location, and then click the DIV tool in the Insert panel to open the Insert Div dialog box.
7. Select the class you created from the Class menu and click OK.
A new DIV element is created with the style settings you made previously. You can also apply the class to other selected DIV elements using the Class menu in the Property inspector.
You can modify these properties further using the CSS Designer panel. Find your selector in the Selectors section of the panel, and then use the Properties section to modify the values.
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 DIVs you create.
You can add behaviors by following these steps:
1. Choose Window⇒Behaviors to open the Behaviors panel.
2. Select a DIV 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 Shake effect, choose Effects⇒Shake, as shown in Figure 8-5.
The Shake dialog box opens.
Figure 8-5: Add a cool Shake effect to a DIV on your page.
5. Set how long you want the shaking to occur (in milliseconds), and which direction to shake in, how far the movement will occur in pixels, and how many times to shake. 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 shake — 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 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 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-6.
Figure 8-6: 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 5 seconds, Delay at 0 seconds, 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 use Live view to see the animation in action!