This post is part of a series about the basics of creating a CSS layout in Dreamweaver. In the previous post we discussed how to create Div’s and change the sizes. When designing a website, one needs to create “nested Div’s” (which basically refers to a Div inside a Div) so that you have the layout you need for menu buttons, advertisement spaces and so forth. Once you’ve got the basics of CSS layouts, you can start to refine your site with nested Div’s.
We have already created the three Div’s (in our example they are called Header, Content and Footer – if you are unfamiliar with Dreamweaver, it would be a good idea to keep Dreamweaver open in front of you while reading this post).
Once you’ve checked out the Div’s in the browser, go to the CSS Styles panel at the top right-hand side of the page (if you don’t see the CSS Styles panel, go to your window menu – you might have to expand the styles button to see your three Div’s). Now that you can see the three Div’s, select the Header Div to see its various properties, such as the background colour, positioning values etc.
*Note: This is an important aspect of CSS layouts: As soon as you draw out a Div in Dreamweaver, the program will create the rules for you. If you double click on the Header Div, a dialogue box will pop up that says “CSS Rule definition for Header” – this dialogue box has all the different categories for the rules of this Div and this is where you can control the font, set a border etc.
If you click on the Positioning button in this dialogue box, you will get the Width, Height and other fixed values of the Div’s positioning. You will notice that the Type setting in this box is “absolute” – that’s what Dreamweaver means by calling the Div’s an “AP Div” – it stands for absolute positioning Div. If you have some time, explore the different options besides “absolute” to see what other creative aspects you can bring to your Div.
For our example, we are going to put a nested Div inside the Content (middle) Div that we have drawn. Click inside of the Content Div and then click on the Code button at the top left side of the page (this will show you the coding behind your Dreamweaver site).
Scroll towards bottom – you’ll see the three Div’s that Dreamweaver created for you:
Seeing as we clicked on the Content Div, the curser should be in this line of code: <div i.d=”Content”></div>.
A Div is html (the longer coding at the top of the page) but this line of coding is CSS – the CSS follows the rule that was created in html. Now, place your curser behind the line of coding (<div i.d=”Content”></div>) and hit Enter a few times so that you have a bit of space (white space doesn’t matter, so you can give yourself enough room to work).
Now we want to create another Div inside the Content div. Go to the Insert menu at the top of the page, click the Layout Objects on the drop down menu and then click on “Div Tag”. A dialogue box will pop up – click on New CSS Styles, which will open a second dialogue box. Make sure the Selector Type in this box is set to Advanced and change the Selector to #Menu, also check the “This document only” button in “Define in” (this means it will apply to this style sheet only) within this dialogue box. Press Okay.
Once you have pressed okay, you will see the CSS Rule definition for #Menu. Make sure the Type is Absolute and throw in the dimensions (Width = 100 px, Height = 450 px – this is the height of the main Content Div- Top = 0 and Left = 0). Change the background colour in this box to a different background colour and press OK.
When you now look at the code, you will see there’s a new Div called #Menu. Go back to the design view and see the second Div within the first Div (you will see that we have basically created a new Div on the left side of the middle Div – this is where we will put our navigation buttons). Check it inside your browser by clicking on the Globe icon.
You now have the general layout boxes for your website! You can continue to refine the Div’s and create more boxes for ads, menu buttons and so forth. This article is based on a video by Creativebits.org, an apple based design community). If you want to see the video, click here. In our next blog, we’re going to show you how to take the entire layout and centre it inside the web browser!