Join James Williamson for an in-depth discussion in this video Understanding starter page structures, part of Dreamweaver CS3 with CSS Essential Training.
While it's doubtful that any of the starter pages will offer you exactly what you need for your CSS-based layouts, they do offer an easy way to jump-start your own designs. Now that we've looked at our possible page layout options, let's start customizing a page by choosing a layout and examining how the code and styles are structured, in preparation for creating our own custom layout. We'll start by opening up a new starter page. So I'll go to File, and choose New. Once again the New Document dialog box comes up, and remember we're choosing Blank Page, HTML. In the Layout view, we're going to find the one that we were looking at earlier, 2 column fixed, left sidebar, header and footer. So I'll select that. We'll leave the document type declaration, the placement of the CSS, we'll just leave that at its defaults, and we'll choose Create.
That makes a new page for us. Go ahead and save that, we'll save this page, and we'll save it in the 0203, so if you're following along in the exercise files with me, we'll save it in the 0203 folder. We'll give it a real descriptive name, call it 2col_layout.htm go ahead and choose Save. And there's our starter page. I'll open up the CSS Styles panel so I can take a quick look at all the styles that have been added and expand the embedded styles. As you can see we really don't have a lot of styles here. The styles are limited to just the selectors necessary to choose a layout and nothing else, so they're very economical.
Now, one of the things that you might be noticing is that you see this class name a lot in our descendent selectors. Two column fixed, left header, you can see the abbreviations for that. Well if I click anywhere inside the document, go ahead and do that, take a look in your tag selector. In your tag selector, on the very far left-hand side, you'll see that the body tag actually has the 2 col, fixed, left header style applied to it, and it's a class obviously. That is a really neat layout technique and what that allows you to do is have multiple layouts and change the layout of a page quickly and easily by simply changing the class that's applied to the body tag. So in this instance, this has the 2 column, fixed, left header. If you want to change it to a 3 column design or a right header, you can just go ahead and switch the class attribute of the body tag and the entire layout would change based on how your CSS is written. So it's a very smart way of working with multiple layouts.
Now, I'll switch over to Code View because if we're examining the structure we really need to take a look at how the code is structured. I'll scroll down just little bit so that we can see what's going on inside of our body tag. So you can see that inside the body tag, we have a div tag called "container" and that his pretty much wrapping all the content inside the body tag, it's going to allow us to center our content on the page and give it a defined width. Directly inside that you'll see a header element and then a sidebar element. If we scroll down a bit further we can see an element div with an ID of main content, and then finally at the very bottom of our content, another div tag with an ID of footer and of course those are all wrapped within the container div tag. So again, very simple page structure, its focus specifically on the layout itself.
Scroll up to the CSS. Since we're using embedded styles, everything's in the same document so go ahead and scroll up inside the head of your code. On about line 8 you'll find the body tag selector. What we want to do now is we want to break down exactly how this layout is working. So if I scroll down through the code I can see, here is the 2 column fixed left header #container selector, so that's targeting the container when it's found within this layout. Again, notice that it's targeting a width of 780 pixels, so we're targeting 800 x 600 pixel screen resolution. We've got some background colors going on here, and margins of zero and auto that's centering the layout as well.
The main focus of the layout is on the sidebar and the main content. And if I scroll down to find the sidebar 1, notice that it is floating to the left and has a fixed width of 200 pixels. The main content, which shows up just underneath that, has a left margin of 250 pixels. So what's happening is that our main sidebar is floating to left. It has a fixed width of 200 pixels. The main content is going to move up to occupy that space and the left margin of 250 pixels is giving us enough empty space for our sidebar to appear. Directly underneath that main content, there is a clear, and we can see that we have a class of clearfloat that's clearing those floats.
If you're not familiar with this layout terminology, we do have a chapter on layouts that's going to focus on these technique. So if this is something that you're not terribly familiar with right now, don't worry, we will talk about this later on. Just to show you where our content is being cleared in the code, if I scroll back down, into our code, you see that just in front of the footer we have a line break that has the clearfloat applied to it, which is going to clear that float and allow the footer to be continually pushed down. Well everything looks pretty good, we could modify the width of it if we were targeting a larger screen resolution.
The only thing that I really want to change right now is our sidebar's ID. Currently the ID of the sidebar is sidebar 1, and that indicates that we have the ability to have multiple sidebars. In our layout we're only going to have one sidebar, so we don't really need multiple sidebars. So leaving it as sidebar 1 really wouldn't hurt anything, but contextually it might send the wrong message to somebody coming along later on that the possibility exists there that our layouts have more than one sidebar. So I just need to change this in a couple places, and it's just as easy to do this in Design View as it is Code View. So I'll switch back to Design View to make this change.
The first thing I am going to change is the style itself. So, go over to the CSS Styles panel, and I will highlight the 2 column, fixed, left header, sidebar 1. Again, if you click that once and then just pause for a second and click again it'll highlight and let you rename it. So I'll click right after the 1, remove the 1, and just leave sidebar and hit return. When I do that my layout's going to go kind of screwy, and the reason for that is that now that rule is no longer driving any element on the page. Our sidebar still has the old ID of sidebar 1.
So I'll scroll up and find our sidebar content, which is no longer floating, and click inside that. We can use the tag selector to quickly select elements on the page, s o by clicking inside the sidebar, you'll notice that the tag selector at the bottom of the document window, the first element that has an ID would be your div#sidebar1. So I'll select that by clicking on that in the tag selector. Cmd + T or Ctrl + T will bring up your Quick Tag Editor. Up comes the div tag ID = sidebar 1. I can simply edit that, remove the 1.
Once you start editing it you'll get a list that comes up of all available IDs. If it was a drastic change I would probably use this pull-down menu as a means of not having to type quite as much, but really we're just removing the 1 so we didn't need to do all of that. We'll hit Enter so that it renames as sidebar. You may need to hit Enter one more time to clear the Quick Tag Editor and we're finished with that. Now that we've examined our page structure, and we know where everything is, we're now free to modify our styles to better fit our desired layout. In our next movie, we'll examine some of the ways that Dreamweaver makes editing styles globally a snap.
- Understanding how Dreamweaver manages CSS
- Working with Starter Pages and Typography
- Designing with CSS in mind
- Separating structure from presentation
- Controlling background properties
- Styling tables and forms
- Building navigation
- Building print style sheets
- Testing and deploying CSS