› Dreamweaver Tutorial: Creating Page Layouts with CSS in Dreamweaver

Dreamweaver Tutorial: Creating Page Layouts with CSS in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Understanding the CSS Box model
  • The basics of CSS margins, padding, and borders

This tutorial provides you with a foundation for working with Adobe Dreamweaver layouts. It is the fifth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

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.

Note

If you’ve worked with layout applications such as InDesign CS5, the idea of creating and positioning containers for page content should be very familiar to you. Boxes created with the <div> tag can be thought of as analogous to the text and image frames you create in InDesign.

Pages

These tutorials are created by and the team of expert instructors at American Graphics Institute.