Adobe Dreamweaver Tutorial: Creating Page Layouts with CSS in Dreamweaver

Now that you’ve used Cascading Style Sheets, you’ve seen how powerful they can be for styling a page. CSS is equally powerful as a layout tool, allowing you to freely position page content in ways not possible with HTML alone.

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” in the Starting Up section of this book.

You will work with several files from the dw05lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from the supplied DVD. See “Loading lesson files” in the Starting Up section of this book.

Before you begin, you need to create site settings that point to the dw05lessons folder from the included DVD that contains resources you need for these lessons. Go to Site > New Site, or, for details on creating a site, refer to Lesson 2, “Setting Up a New Site.”

The CSS Box model in Dreamweaver

CSS positions elements within a page using the Box model, which refers to rectangular virtual boxes used to hold and place content within a document. Each box can act as a container for text, images, media, and tables and takes up a certain area on the page determined by its width and height. Additionally, each box can have its own optional padding, margin, and border settings (described in detail shortly). In reference to the display of items on a page, CSS regards almost every element on a page as a box.

Toward the end of Lesson 4, “Styling Your Pages with CSS,” you began to explore page structure through the use of the HTML <div> element. The Box model in CSS applies to all elements in CSS but is often paired with <div> tags. The <div> element, in conjunction with CSS rules, can be freely positioned, formatted, and even told how to interact with other boxes adjacent to it. You can also stack and overlap <div> containers, opening the door to flexible and creative layouts that are not possible with HTML alone.

This lesson dives deeper into the many uses of the <div> element. If you have jumped directly to this lesson, it is highly recommended that you understand the basic concepts in Lesson 4, “Styling Your Pages with CSS,” before starting this one.

The basics of CSS margins, padding, and borders in Dreamweaver

The Box model allows each element on a page to have unique margin, padding, and border settings.

Margins refer to the transparent area surrounding the box, which you set using the margin group of CSS properties. Margins can play an essential role in creating distance between a box and the content surrounding it (such as other boxes), or the boundaries of the page itself. You can set margins for all sides at once or uniquely for each side.

Padding is the distance between the inside edge of the box and its contents; by setting padding, you create space between the box and any text, images, or other content that it contains. You set padding using the padding group of CSS properties, and, like margins, you can set padding for all four sides of a box at once or for each side individually.

The border of a box is transparent by default, but you can add width, color, and a border style for decoration or definition around boxes. Borders sit directly between margins and padding, and define the actual boundaries of the box. You set borders using the border group of CSS properties and, like margins and padding, you can define borders for all four sides at once or for each side individually.

You can incorporate each property into any style rule and attach it to a box, similar to the way you’ve attached classes to paragraphs and tables in previous lessons.

Reviewing the <div> element in Dreamweaver

As mentioned earlier, when exploring and creating page layouts with CSS, you will frequently encounter and use the <div> element. The <div> element creates areas or divisions within an HTML document; you can place page content such as text and images directly within sets of <div> tags. Dreamweaver enables you to create CSS-driven page layouts using the Insert Div Tag and Draw AP Div buttons in the Insert panel; both of which utilize <div> tags to create boxes that you can place precisely within your pages and style with CSS rules.

Reviewing the ID selector in Dreamweaver

In Lesson 4, “Styling Your Pages with CSS,” you learned about the different selector types in CSS: classes, tags, pseudo-class selectors, and IDs. In this lesson, IDs take center stage and become an essential part of working with CSS boxes and positioning. An ID is a special selector type created for a unique element using the same name within a page, and it’s meant for one-time use only. ID rules appear within a style sheet and are preceded by a pound sign (#), in contrast to classes, which are preceded by a period character (.).

Because IDs can be used only once per page, they are ideal for setting properties that need to be specific to a single element, such as positioning information. In other words, page elements such as headers or columns occupy a specific position on the page, such as top, right, left, and so on. When creating layouts using the Insert Div Tag button, Dreamweaver requires you to create or assign an ID rule for each box created. When drawing boxes with the Draw AP Div button, Dreamweaver automatically creates a unique ID rule that contains positioning, width, and height information for that specific box.

Because the <div> element has no display attributes, it is given its properties by either an ID or a class, or both. Think of an ID as a set of instructions that give a <div> its unique appearance and behavior (as DNA does to a human being). An ID rule is matched to a <div> using the tag’s ID attribute.

Tables or CSS for layout?

A long-standing debate has existed within the web design community about the best approach to creating page layouts. The argument went something like this: Many designers felt like tables were the wrong tool for the job and CSS boxes were adopted as the primary method for positioning page content. Designers in favor of tables asserted that tables are more reliable in older browsers and easier and quicker to build. It’s not quite accurate to say that the argument has been completely resolved, but it’s clear that layout with CSS is here to stay and more and more people are adopting it every year.

Here is a brief overview of what you need to know:

Tables: Although fewer and fewer sites are being built from scratch in tables these days, there remain countless websites that were built with them and are still on the web being updated and maintained. Designers who finds themselves having to maintain a tables-based site would do well to understand their behavior. Also, HTML email often relies on the use of tables due to the limited capabilities of email readers.

Tables’ limitations include the following: You are restricted to its cell-based structure, and to achieve more complex layouts, you need to nest several levels of tables. Tables also add extraneous code to pages and can present difficulties in accessibility for devices such as screen readers.

Boxes: CSS positioning has been around for many years. However different browsers have chosen to support it at varying and inconsistent levels. At this point, though, most CSS 2.1 positioning properties and practices are supported consistently across the latest browsers. If you need your sites to work reliably in older browsers, testing is still necessary to expose potential inconsistencies.

The CSS Advisor and Browser Compatibility Check features in Dreamweaver CS5 are huge benefits to designers who want to use CSS more extensively. These tools flag and help troubleshoot any CSS-related items that may be incompatible or inconsistent in commonly used browsers. The CSS Advisor and Browser Compatibility Check are discussed in detail in Lesson 14, “Managing Your Website: Reports, Optimization, and Maintenance.”

Continue to the next Dreamweaver Tutorial: Creating a centered container for your page in Dreamweaver >