Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Part of understanding CSS based layouts is really having a full understanding of current and accepted Web standards that we are working with. So in this video, we are going to talk about those Web standards and we are going to talk about structuring our pages with DIVs, and we are going to explore site mockup that I put together for the cheek testing site, and talk about how looking at the mockup, we can sort of start to plan out what the structure of our page is going to look like. Now as a starting point, I am just going to open up another one of Stephanie's pre- designed page layouts. So I am going to go to File and choose New. And we had the 2-column hybrid, left sidebar last time, so why don't we explore something else? Maybe 3-column fixed layout, and we will get 3-column fixed with a header and a footer, because it's fairly common.
I will go ahead and click Create and that will open up our new page. Now we could come in replace the existing content with whatever we wanted to replace it with. But that's not really what we are focusing on here. What I want to focus on, I am going to switch over to Code view, and right after the Body tag, I want you to start noticing how the DIV tags are actually arranged. And using our Code toolbar here on the side, we can select our Parent tag so we can see that the header is sitting inside of a DIV tag called Header, which is in turn inside of a DIV tag called Container. Our sidebar is also contained within that Container. So we have a Container DIV tag that surrounds it.
Then we have the Header, a sidebar. We have a Sidebar2; remember we have a 3-column layout. We have a DIV tag for main content and we have another DIV tag down here at the bottom for footer. Now the DIV tag really doesn't have a pre-defined styling attribute in most of the browsers or rendering devices that would consume your content, but by using CSS properties, we can give our DIV tags dimensions, positioning and other attributes like borders, background graphics, background colors and that sort of things. So, for table-less Web layouts, the DIV tag serves as a very important container for our content.
It is not a non-semantic tag. It actually gives order and structure to our content. DIV means division, in fact, and so when we combine it with classes and ID attributes, as we see here in our sort of pre-designed layout, it further defines and gives meaning to the contained content. Our accepted Web standards tell us that our structure and our presentation should be totally removed from each other and that's why a lot of people when they first look at these DIV tags and they see "id=footer," and they know that that's going to be used to style this, they will say "Well, that's not really separating style and structure, is it? I mean that's presentation." But it's really not.
It's identifying the content contained within this DIV tag. So it's a way of structuring the DIV tag and saying the content contained herein is the footer of the page. So that's actually very structural and very sound. It also allows us through the use of CSS to tie into that and to format it. So when you start to lay your page out, one of the things that you'll want to do is to examine the content of your page and try to figure out the areas of content that are different, separate areas that you might begin to think about structuring in a DIV tag. So we are going to switch over to Photoshop, and we are going to open up a file that is a mockup of the site that we are going to laying out in just a little bit. We have opened Photoshop up and we have got the mockup.psd file open and you will find this file in the Chapter 3 Exercise Files in the Images directory. So it's again mockup.psd, if you are following along in the Exercise Files.
This is a mockup of the Cheek Chastain Gallery site that we are going to be creating and laying out very shortly, and what I do when I am designing my own sites is I'll do a mockup in either Photoshop or Fireworks. Illustrator. Whatever program you guys are most comfortable with, that's the program you probably should use. So I usually do most of my mockups in Photosho, and when I do the mockup, I am going to do it at the exact size that I am working on in my browser. So I have got this to the exact width that I want my website to be, and all my images are the size I need them. So I can slice the images up and actually export them all here, or crop them down and export them out that way, whichever way I like working, but another thing that it really allows me to do is to determine the structure of the actual webpage itself. Where do I need DIV tags? What type of DIV tags do I need to do? What type of content do I need to define? So I am going to do an exercise where we are determining where our DIV tags are needed to go and what type of structure our page is going to have.
So I am going to bring out my Layers panel, and I am going to click on my top layer folder and create a brand new layer and I am just going to rename this layer Structure. What I can do with this new layer is I can begin to create overlays and I will do that by just creating solid fills of colors over the areas that are specific areas of content. So I am going to turn my attention to the top of the page and you've noticed I have got some guidelines already on the page that help me to lay my content out, and these guidelines can go a long way to helping me to determine where my structure on my page is. When you are working at a smaller resolution, like I am working out here, we will probably need the hide and show panels occasionally. Let me just take you through a couple of keyboard shortcuts here. If you hit the Tab key, all of your panels are going to go away, and if you hit the Tab key again, they will come back.
If you hold the Shift key down and hit Tab, just your floating and your side panels will go away, and of course, Shift+Tab is a toggle that brings them back again. So, that can help us out. I am going to switch to my Marquee Selection tool and I am going to hit Shift+Tab to hide those side panels, and I am going to create a Marquee Selection around all the top content up here. Now this is going to be my header. So looking at this, this is definitely a distinct section of content on the page. I am just going to choose a color for my header, and it doesn't really matter what color you choose at this point.
I am just going to choose something that maybe has a little bit of contrast with the color underneath that. And I will grab my Paint Bucket tool and I will just click inside that to fill it. Now, that hides the content. So it's not a bad idea maybe to bring your layer back, and lower their Opacity down a little bit, maybe lower down about 40% or so. So that's my top content now. What's really nice about this is that even from a Page Layout standpoint, if you are planning your page out, I can look at my Info palette. Now I'll just open up my Info palette right here and you can see that I have a width and a height defined for that.
Now unfortunately, that's in inches. So I am going to bring out my rulers, View > Rulers, or I can hit the hot key for that, and I will just switch that to pixels real quick, because I am more interested in knowing where my pixel will set at. Now I know that my header is 900 pixels wide and 123 pixels tall, and if I were going for a fixed layout, I would be able to write those dimensions down and know exactly what my header was going to be set to. So I am just going to continue defining my main areas of content, and if I look on the right hand side, the sidebar is obviously a distinct section, so I will create another section around the sidebar and we will just scroll down to the very bottom of this. Now heights don't quite matter as much when you are doing Web design. It's the width that you are really concerned about. So I'll choose another color here from my sidebar, and I will go up and choose kind of a magenta or purple color there, switch to my Paint Bucket tool and click on that.
So, I am beginning to really define the major areas of content, and I will create another selection around my main content, choose a different color for that, maybe we will go into a blue. And then finally, down at the bottom, I can see that this page has a footer. So, I am going to want to go ahead and just draw selection around the footer, and if you are not really precise with your selection, it's not that big of a deal. Just make sure that when you are doing defining widths and if you have a defined height that you are precise with it, because you don't to be a couple of pixels off here and there because when you start doing your CSS, that can cause a chain reaction and cause other bad things to occur when you are trying to lay your pages out. So, we will just go ahead and drop that in. So, if I am looking at my page now, I can see that there are four distinct areas of content. There is my header, my main content, my sidebar and down at the bottom, we have our footer. So I know that I need at least those four DIV tags in order to make this work and I need to start really planning out what the structure of this is going to be. And one of the things that you want to do at this point is start looking at your areas of main content, your larger areas, and start thinking to yourself, is there a reason for me to actually add anymore structures in those areas? And one of the things I am looking at when I see the header is my navigation, and that tells me that maybe I should create another area of content for my navigation. So I am actually going to create another layer and on this other layer, I am going to go ahead-- and you have to be careful at double clicking that too fast.
I am going to go ahead and double-click the name and I am just going to call this Secondary Content. Interior Content would have worked there as well. And here I will just go ahead and draw another section for my navigation, maybe come up with a different color scheme. So, maybe this time I am going to use some neutral colors that are a little bit more desaturated, and we will click and once again I will probably lower the opacity of that down as well, just so I can see the content underneath it. Now as I begin to do this, I am going to go through each of these sections and my main content area, as a matter of fact, has three areas of content in it. There is a Featured Painting, a Current Show, and a Favorite Galleries, and probably that should be into your content as well.
So, I will just go through and select those and just go ahead and give them some colors as well. Now, notice that I am not being very precise when I select these because as I begin to position this using CSS, I am more concerned about the distance between them and how it looks visually on a page, and I will really make that more of a part of my CSS and probably go ahead and change this color out a little bit, so it is not exactly the same as the section above it. Now we have three very distinct areas. Now as we are planning this out, we have to determine whether or not these really deserve to be in a DIV tag and as I am looking at the Featured Painting and the Current Show, there is a lot of things in there. There are images, there are tags, there are headlines. There are specific type of tags like the acrylic detail on the left over here, which is going to require some individual styling.
So probably in that case, they deserve to be in their own division, their own DIV tag. When I look at the menu up here, now not everything needs to be in a DIV tag. When we go back and we look at our header up here, we have our navigation, and that's a secondary section of content, but whenever you are designing a navigation bar like this, we typically put them in an unordered list or an ordered list. Again, a personal choice. But if this is an unordered list, the unordered list actually offers us enough structure and allows us to assign an ID to it, to where we don't really have to have a DIV tag on it. So if there is an existing element that contains the content that you can use to style it and use to structure it and use to pass along information about what the content is, take advantage of that and don't necessarily always surround every little piece of content within a DIV tag. So, that's using a page mockup to determine site structuring. In our next video, we are going to review the box model so that we can prepare ourselves to actually go back, create these DIV tags, and then assign these properties to them.
Get unlimited access to all courses for just $25/month.Become a member