Chapter 8. Creating CSS Layouts

In This Chapter

  • Getting started with CSS pages

  • Modifying layouts

  • Positioning content with the new AP Div tool

  • Using behaviors with DIV tags

Creating a page layout sometimes requires more precision than what 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
    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 Elastic, Left Sidebar, Header and Footer layout), and click Create.

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

  3. Choose FileSave to name and ...

Get Adobe® Creative Suite® 4 Design Premium All-in-One for Dummies® now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.