Fixed-width page layout in Dreamweaver CS5
We’ve been creating basic pages in Dreamweaver CS5, but haven’t spent much time yet learning to organize our page so that we have more control over how the content is displayed. Usually everything is either centered or left-aligned. You may have noticed that by default text will stretch all the way across the browser window, which can be difficult to read. It is also difficult to control how images are positioned in relation to text.
In HTML, “div” elements are used to organize content. A div is basically an invisible box which has content in it. We can then adjust the properties of the div to control how that content appears on the page. Dreamweaver allows us to easily create divs and adjust their properties using CSS.
Here is how to create a main div to use as a container for all of your web page content. We’ll create a div with a fixed width that is centered in the browser window. Here is a screenshot of what this looks like in Dreamweaver’s Design view:
Using divs to organize web page content.
First, start a new HTML file. Click Insert -> Layout Objects -> Div Tag. In the “Insert Div Tag” dialog box, fill in “page” in the ID box, and click OK. A box appears on the page with some default text in it.
We have given the div an ID so that we can adjust its properties using CSS. The ID could be any word, but you can think of this div as a sort of page to hold your content, so “page” is a good name. You can see your div in Dreamweaver’s Design view – it appears as a dotted-line box. Let’s use CSS to adjust the properties of this box.
Make sure you have clicked to place your cursor inside the box. At the bottom of the Dreamweaver window, you should see the Properties panel (if not, click Window->Properties). Click the CSS button on the left side of this panel, then click the “Edit Rule” button.
In the “New CSS Rule” dialog box, the Selector Type should already be “ID”, and the Selector Name should already be “#page”. Click OK. A new dialog box called “CSS Rule definition for #page” appears which allows you to adjust the properties of our “page” div. Here are the CSS properties we want to adjust for this div:
In the Positioning category:
• Position: relative
In the Box category:
• Width: 800px (I’d suggest a value between 400 and 1000px)
• Margin: Uncheck “Same for all”, then use Right: auto, Left: auto (this centers the div)
• Padding: With “Same for all” checked, use Top: 20px (this adds space around the inside edge of the div)
If you explore this dialog box you will find many other div properties that you can change – you can give the div a border or background colour, use a background image, and adjust how text appears in the div.
Click Apply or OK to see the changes to your div. Save your HTML file and Preview it in the browser. Adjust the width of the browser window and you’ll notice that your div stays centered in the middle of the window. This is a great basic structure for your web page. From here, you can insert content into the “page” div. If you want to go back and edit the “page” div’s properties again, click the “Edit Rule” button again, or double-click “#page” in the CSS Styles panel.
For even more control over your content, try inserting “AP Divs” into the “page” div. AP stands for “absolutely positioned”, and these divs are useful because you can drag them to position them wherever you want. They will always stay in position relative to your “page” div and will not be affected by other content on your page.