Join Paul Trani for an in-depth discussion in this video Creating a CSS-based layout, part of Creating a First Web Site with Dreamweaver CS5.
The layout of a Web page is just as important as the colors and fonts being used. And in this case, I really wouldn't have a layout where the text extends the length of the page. A common design guideline is not to have the body copy, say, longer than a dollar bill. So what I want to do is I want to insert a box in the center of this page and put all of this text content into that box. And how I'm going to do that is I'm going to use an *absolute positioned Div.
So I'm going to go to Window > Select Insert, and I'm going to make sure Layout is selected. Now I'm going to insert an *absolute positioned Div, so all I need to do is select that and then I can go ahead and draw a box. I'll close that insert panel, and here we are. If I click on that *AP Div, as it's known, I can change its properties using the Properties panel down at the bottom. First off, I want to replace this generic name with the word "Content", since that's where all my content's going to go.
I then want to change the width. So I want to make it about, oh, about 700 pixels wide. And notice as I grab this control point in the upper left, I can move it and you can see the numbers change down here. So far, so good. In fact, I can go ahead and at this point select all of this text and click and drag it right into that box. There we are. Everything's positioned absolutely, so I'll just save this file and I will go ahead and preview it in a browser.
Remember, this is an *absolute positioned Div, so when I scale down the page or scale it up, that content stays in place. But what if you want a more flexible layout? What if you want the width to always be 700 pixels, but want to have equal spacing on either side, regardless of the size of your browser? So in essence I want to center that content. Well, I can do that with CSS. In fact, if I go to the CSS Styles panel, make sure All is selected, and then I'm just going to double-click on this *content rule definition to change it, and in this case I want to change the various Box model.
So the various Box parameters in here, I want to change the margin. I don't want to make it same for all. In fact, at the top I want to have about a hundred pixels from the top edge. The right side, I want to change that to Auto, because remember the width is 700 pixels wide, so I want to make it even on the right side, which means auto. The bottom I'll just type in zero. The left side is going to be auto as well. So always have equal spacing on either side. The next thing I need to do is I need to go to positioning.
Because again, I don't want this to be an *absolute positioned Div anymore. I can just delete Absolute there and select OK. Now it's ready to go. In fact, I will just save this and preview it in a browser one more time. Here's my content, and as I scrunch down and increase the size, you can see that now I have more flexible layout giving me more control over my content. The content is actually always visible to the user, and again, it's easier to read, and it's all allowed through using *AP Divs and then modifying the various CSS properties.
- Understanding Internet and Web site principles
- Adding content to a Web page
- Linking to Web sites and e-mail addresses
- Styling content with CSS
- Exploring Dreamweaver's pre-built layouts
- Inserting images
- Adding SWF content
- Uploading and testing a Web site