Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter we will explore using CSS to control the layout of elements on pages. First, we will take a look at Dreamweaver CS3's new pre-designed page layouts. Now if you are following along with me in Dreamweaver, just go to File and choose New and that will bring up our New Document dialog box. Now on the left hand side, this dialog box has been totally redesigned for CS3 and on the left hand side, notice that we have a Blank Page, a Blank Template. Starting out from like Blank Template, Page from a Template, and that sort of thing. Well, Blank Page doesn't necessarily mean totally empty. Now we have all these different types of pages, HTML, XML that sort of thing. I am going to choose HTML from the top of the list. Now on the middle panel here, we have a layout column, and as I scroll up and down that, you can see that we have sort of some preset page designs already setup for us and these were done by a friend of mine, Stephanie Sullivan, but if you select one of these layouts, you will actually see a preview on the right hand side of the layout. Now if you are not familiar with doing CSS layout, some of the icons are-- some of the things that you see over there in the preview might look a little confusing, so let's talk about those for just a moment. If I click on the Layout 2 column elastic, Left Side bar, you will notice that it has this sort of little curly symbol and then another line and several curly symbols on the right hand side and it's trying to show you you have a sidebar and a main content area. Anytime that you see this little curly symbol, that means that you have got something that's going to stretch as the browser resizes, so it's not a fixed size. When you see the characters em above that stretching symbol that means that that width is actually defined with ems and there's one down here that says, all widths in ems (so they scale with font size) go with left sidebar. An em is a relative unit of measurement. 1 em is equal to whatever the default size of the font for the element that it's defined in. So if you just go ahead and say body 1 em, it will use whatever the browser's default font size is for that particular size. So what we are doing here when we use ems for a width, you are actually making that section relative to the default text size, which is in neat for mobile devices and smaller things and layouts where they need to be incredibly flexible.
Notice that also we have some fixed. So if I click on 2 column fixed, left sidebar, you see the icon changes and there's a little padlock and that means there is going to be a fixed width for both the sidebar and for the main content area. And that's generally the way most sites are done. There are some flexible, there some hybrids, there are some mixtures. Speaking of hybrid, I am going to go find a 2-column hybrid, left sidebar, and we are going to open this one up. You will notice that this one has an em over the sidebar, indicating that sidebars are defined with the text, and our content area is defined via a percentage. So I am going to go ahead and click Create, but before I do that I want to point out one more thing too. Notice that for the layout CSS, it's actually asking us, do we want to embed that ahead of the document, do we want to create a new CSS files based off of those styles, or is there a file that we already have the styles defined in that we want to link to this? So you have all those options. We can even add other CSS files there that maybe aren't controlling layout, but maybe are controlling typography or things like that.
So we will just apply to the head of the document and we will click Create. So we get a page that comes up that has dummy text in it and you will notice that left column has a id of DIV Sidebar1, so the id is sidebar1, and if I click in the main content area, I can see that it has an id of main content. Now I am looking at this down here on my Tag Selector, so if you look at the bottom of the document window, your Tag Selector, when you click in a section, notice that it tells me I am in a paragraph, which is inside of a DIV, which is inside of another DIV, which is inside of a body tag that has a class style applied to it. So there is lot of behind the scenes stuff going on here with our CSS.
If I go to my CSS Styles palette and I open up the Style tag, I can see all the rules that are driving our layout right now. We have got a body selector, and then everything is being driven more or less by classes, and by that class attached to the actual body tag, and then the ids inside of it. So we have some fairly complex descendant selectors. If you switch over to code view, you can go up and see exactly what's going on with the CSS. Now one of the great things about these pre-designed page layouts is that Stephanie was really good about commenting out the CSS. So just from an instructional standpoint, if you want to learn how to do layout, these are excellent to just open up and sort of pick through.
You can see that the body tag, for example, has a font of 100%, which would mean the default browser size, whatever the browser would set at, it would use that font. Verdana and it has a great background and no margins, no padding, the text-align is aligned to the center, and the color is set to black. And so, if you are wondering why we are zeroing out the margins, notice that the comment line that says it's good practice to zero the margin and padding of the body element to account for different browser defaults, because each browser has a different default margin and it can cause your page to offset slightly to the right or to the left, depending on which browser you are in.
So by going ahead and doing those out, you're basically just telling the browser, "Now whatever default margin you have got, let's go and get rid of that." So this is a really good tool from an instructional standpoint. If you are looking to pick up a lot of tips and tricks for CSS, if you are brand new to layout and you are really curious about it, this not only gives you a great starting point, because you are free to go ahead and just replace the existing content on the page with your content, and just kind of go from there but it's a good instructional tool to learn from. For those of you that are brand new to doing CSS layout, I hope you will take advantage of the instructional nature of these pre-designed page layouts, especially in the commenting. And in our next video, we will explore structuring our pages with DIV tags and how that can help us as we begin to plan and prepare to style our own pages and lay those out.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.