Subtitles of the Movie

Previously, I covered how to use AP DIV tags to format your Dreamweaver elements. You can also create page layouts manually by inserting plain DIV tags. Where as with AP DIV tags Dreamweaver applies CSS positioning automatically with plain DIV tags you need to apply CSS positioning styles to them manually. A Div tag is a tag that defines logical divisions within the content of a web page. You can use these DIV tags to center blocks of content create column effects, create different areas of color and much, much more. One potentially confusing point I need to make here is Dreamweaver will treat all DIV tags that have been positioned with CSS as an AP element themselves. AP stands for absolutely positioned elements. Even if you didn't create those DIV tags using the AP DIV drawing tool that's the tool right here in the layout tab of the insert menu. You're gonna create your DIV tags or insert them using this button here, insert DIV tag. When you do so you'll get the insert DIV tag dialog here. First you can select the location of the DIV tag either at the insertion point where the cursor is or before or after the current tag. The class setting here, displays the class style currently applied to the tag if you've attached a style sheet like I have done here. Class is defined in that style sheet appear in the list and that's what I have right here. Can use this pop up menu then to do any of the following I can select the style I want to apply to the tag. One that I have predefined in my style sheet. I can select none to remove the currently selected style. Or I can select attach style sheets to open a dialog box that will let me attach an external style sheet. In this case I only have the options of the styles I have already since I haven't applied a style yet to this DIV tag. I've also got a DIV ID here. This lets me change the name used to identify the DIV tag. If you attached a style sheet like I've done the Ids here defined in that style sheet appear in the list. Ids for blocks that are already in your document are not listed so let's go ahead and style this with content two. And take my class and delete the one that I have there so when I press Ok, Dreamweaver will go ahead and style and position that DIV tag according to my content two, positioning attributes. So if we look at those by scrolling down my list of CSS styles here to content two, I'm going to double click on it and if we go to the positioning category you can see that the width is 209 pixels, the height is 300 pixels, its 170 pixels from the top. And 327 pixels from the left edge of the document. So let's go ahead and click OK and then move this out of the way so you can see that's where it is positioned that DIV tag, so at this point I should reiterate that because I just styled this DIV tag using CSS positioning. Dreamweaver will now treat this exactly the same as an AP DIV tag. So now they are identical. Also notice that if I bring up my window AP elements there is my AP DIV tag right there, content two. Started life out as a simple DIV tag but since I applied CSS positioning to it Dreamweaver treats it just like an AP DIV tag and Dreamweaver includes it here in my AP elements panel under the name content two. And that will conclude this section of the tutorial on laying out pages and positioning page elements using cascading style sheets. In this section you've learned about CSS positioning, you've learned all about AP Elements and some of the underlining HTML code for these elements. You've learned how to insert and work with AP DIV elements as well as all the various CSS positioning properties. And this section concluded with a short review on working with DIV tags.