Adobe Creative Cloud Design Tools All-in-One For Dummies

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: ...