Subtitles of the Movie

Let me close out this section of the tutorial on the basic building blocks of CSS with a very practical demonstration of the use of the Border property to help you plan your web pages. Applying simple borders to your divisions and other key elements is a great way of creating what's called a wireframe. Wireframing is a design planning tool used by web designers to help them understand how one element relates to another and to identify problems with alignments and juxtapositions and spacing. What I've done here is I've redefined my DIV Tag on just this page to provide dashed borders, thin borders around each of my DIV elements so you can see better spacing issues, juxtapositions and other potential problems that I have with this layout. Now, each of these DIV elements may or may not have their own border settings and I can always delete the DIV Tag setting that I've set here. Let me demonstrate that for you. If I open up my CSS window, notice that I have my three col left nav.css external style sheet with all of my DIV elements here. Everything that you see with a pound sign is a DIV element and they may or may not have border settings. Some do, some do not. But up here in the Styles section, this is embedded style applied only to this document. I've gone ahead and created a Tag Selector for DIV, for the DIV Tag and then on the border I've set up my dashed, same for all sides, thin. I can also make this thick, click Apply and notice that now I can really see the borders of my elements. That's probably a little bit too, too thick. In fact, I think probably even doing a value of one pixel in some cases may be better. There you can see the border regions. Also what you may want to do is on the background color, set up a light gray color like so and that'll also help you determine what your margin settings are, your padding, the positioning of each of the elements. So that's another trick and a way to use the Border property to help you with your planning by creating wireframes. So the way that you would use this is that you would apply that style and then when you're satisfied that your design is hanging together correctly and everything looks just right, you just remove the relevant selectors or the entire rule. In this case I could just click on the DIV and delete it. And now notice that everything gets styled back to the way that it was. So that DIV does have a border and it looks like it's a dashed border as well and a background. The way that you would create this is simply move this over, select New from the upper right-hand corner, take your Tag Selector here in Dreamweaver and find the DIV Tag down here under D, D-i-v. Well, let's go ahead and remove that. Let's create this as an embedded. I forgot to do that embedded in this document only. I don't want to mess up my external style sheet because I'm going to eventually delete that rule anyway. So go to the DIV Tag here, click OK. Notice that it's in this document only. Go ahead and set up your Border settings, dashed, thin, click OK and notice that that rule is now applied. Go ahead and adjust your positioning and then when you're done, simply remove that selector or modify properties for that selector. So in other words, turn off all the Border settings and there you have a nice, handy design and planning tool. So there you have it. That will conclude this very important section of the tutorial on the basic building blocks of CSS. In this section you learned about the all-important DIV Tags, how to draw AP DIVs in Dreamweaver, how to insert AP DIVs in Dreamweaver; two different methods of creating them. You've also learned about adding Child DIVs inside of a Parent DIV, how to use Contextual Selectors with DIV Tags, about DIV widths and heights and then the properties of margins, padding, how to reset browser default margins and padding and in this last section you learned about border, border width and color and how to use dashed borders to create wireframing documents to help you with your planning and the design of your page layouts.