Home / Articles / Adobe Dreamweaver / Creating a Page Layout with Adobe Dreamweaver CS6

Creating a Page Layout with Adobe Dreamweaver CS6

Article Description

In this lesson from Adobe Dreamweaver CS6 Classroom in a Book, you’ll learn the basics of webpage design, how to create design thumbnails and wireframes, insert and format new components into a predefined CSS layout, use Code Navigator to identify CSS formatting, and check for browser compatibility.

From the book

Adobe Dreamweaver CS6 Classroom in a Book

Adobe Dreamweaver CS6 Classroom in a Book

$43.99 (Save 20%)

Changing element alignment

Changing element alignment

The proposed design calls for the sidebar to appear on the left side of the layout, but this layout puts it on the right. Dreamweaver does offer HTML 4 layouts that match the design criteria much more closely, but it was hard to resist working with an HTML5 layout and all the new semantic elements. Besides, adjusting the layout is a lot easier than you may think.

  1. In Design view, insert the cursor anywhere in the right sidebar.
  2. Click the Code Navigator () icon, or right-click in the sidebar and select the Code Navigator option from the context menu.
  3. The Code Navigator window opens, displaying all CSS rule names that may affect the selected element.

  4. Identify the rule that aligns the sidebar to the right.
  5. The obvious culprit is the.sidebar1 rule, which contains the declaration float: right.

  6. In the CSS Styles panel, double-click the.sidebar1 rule to edit it.
  7. In the Box category, change the float property from right to left.
  8. Click Apply to preview the change.
  9. The sidebar moves to the left side of the layout.

  10. Save the file.
10. Modifying the page width and background color | Next Section Previous Section