Chapter 8. Creating CSS Layouts

In This Chapter

  • Getting started with CSS pages

  • Modifying layouts

  • Positioning content with the AP Div tool

  • Using behaviors with DIV tags

Creating a page layout sometimes requires more precision than tables or standard HTML tags are capable of. More designers are moving to the flexible and preferred method of Cascading Style Sheets (CSS) positioning to create innovative layouts without boundaries. Dreamweaver provides you with an extensive gallery of CSS-based layouts to 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 sample page:

  1. Choose File

    Using CSS Starter Pages

    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 Liquid, Left Sidebar, Header and Footer layout), and click Create.

    A new, untitled page opens, based on the layout you chose.

  3. Choose File

  4. Replace the placeholder text ...

Get Adobe® Creative Suite® 5 Design Premium all-in-one for Dummies® now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.