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%)

Modifying the page width and background color

Modifying the page width and background color

Before you convert this file into the project template, let’s tighten up the formatting and the placeholder content. For example, the overall width has to be modified to match the banner image. Before you can adjust the width, you’ll first have to identify the CSS rule that controls the page width.

  1. Select View > Rulers > Show or press Alt-Ctrl-R/Opt-Cmd-R to display the rulers in the Design window.
  2. You can use the rulers to measure the width and height of HTML elements or images. The orientation of the rulers defaults to the upper-left corner of the Design window. To make it easier to use, you can set this zero point anywhere in the Design window.

  3. Position the cursor over the axis point of the horizontal and vertical rulers. Drag the crosshairs to the upper-left corner of the header element in the current layout. Note the width of the layout.
  4. Using the ruler, you can see that the layout is between 960 and 970 pixels wide.

  5. Insert the cursor into any content area of the layout.
  6. Observe the tag selector display to locate any elements that may control the width of the entire page; it would have to be an element that contains all the other elements. The only elements that fit this criterion are <body> and <div.container>.

  7. Click the Code Navigator () icon, or right-click in the sidebar and select Code Navigator from the context menu.
  8. The Code Navigator window opens, displaying all CSS rule names that may affect the selected element.

  9. Move the cursor over the body and .container rules to locate the specification that may control the page width.
  10. Can you identify the rule that controls the width of the entire page? The .container rule contains the declaration width: 960px. By now you should be getting good at CSS forensics using the tag selector interface and the Code Navigator.

  11. Double-click the .container rule in the CSS Styles panel.
  12. In the Box category, change the width to 950 px. Click OK.
  13. The <div.container> element now matches the width of the banner image, but you may have experienced an unintended consequence when you changed the overall width. In our example, the main content area shifted down below the sidebar. To understand what happened, you’ll have to do a quick investigation.

  14. In the CSS Styles panel, click the .content rule and check its properties. Note its width: 780 pixels.
  15. Click the .sidebar1 rule and check its width: 180 pixels.
  16. Combined, the two <div> elements total 960 pixels, the same as the original layout width. The elements are too wide to sit side by side in the main container and thereby prompted the unexpected shift. This type of error is common in web design and is easily fixed by adjusting the width of either of the two child elements.

  17. Click the .content rule in the CSS Styles panel. In the Properties section of the panel, change the width to 770 px.
  18. The <div.content> element returns to its intended position. This was a good reminder that the size, placement, and specifications of page elements have important interactions that can affect the final design and display of your elements and of the entire page.

    The current background color of the page detracts from the overall design. Let’s remove it.

  19. Double-click the body rule. In the Background category, change the Background-color to #FFF. Click OK.
  20. Note that the absence of the background color gives the impression that the page’s content area drifts off into the wide expanse. You could give <div.content> its own background color, or you could simply add a border to give the page a definitive edge. For this application, a thin border makes the most sense.

  21. Double-click the .container rule. In the Border category, select the Same For All check box and enter the following values for all border fields: solid, 2px, and #060. Click OK.
  22. A dark green border appears around the page edge.

  23. Save the file.