- Web design basics
- Working with thumbnails and wireframes
- Defining a Dreamweaver site
- Using the Welcome screen
- Previewing your completed file
- Modifying an existing CSS layout
- Adding a background image to the header
- Inserting new components
- Changing element alignment
- Modifying the page width and background color
From the book
From the book
From the book
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.
- Select View > Rulers > Show or press Alt-Ctrl-R/Opt-Cmd-R to display the rulers in the Design window.
- 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.
- Insert the cursor into any content area of the layout.
- Click the Code Navigator (
)
icon, or right-click in the
sidebar and select Code Navigator
from the context menu. - Move the cursor over the body and .container rules to locate the specification that may control the page width.
- Double-click the .container rule in the CSS Styles panel.
- In the Box category, change the width to 950 px. Click OK.
- In the CSS Styles panel, click the .content rule and check its properties. Note its width: 780 pixels.
- Click the .sidebar1 rule and check its width: 180 pixels.
- Click the .content rule in the CSS Styles panel. In the Properties section of the panel, change the width to 770 px.
- Double-click the body rule. In the Background category, change the Background-color to #FFF. Click OK.
- 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.
- Save the file.
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.
){kind=small}
Using the ruler, you can see that the layout is between 960 and 970 pixels wide.
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>.
The Code Navigator window opens, displaying all CSS rule names that may affect the selected element.
)
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.
)
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.
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.
)
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.
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.
)
A dark green border appears around the page edge.