Divs and CSS to layout a web page - Dreamweaver Tutoring Part 3
Looking at a blank index.html page your inspirational juices ought to be flowing. But if they're not then let's get the ball rolling. We'll use divs to create a layout for the page. This will include a wrapper, or container that would control the width of the other divs. Just a quick note that if you are following this using an older version of Dreamweaver then certain things may be different however stick with it and watch the video and hopefully you can adapt it to your own version.
In the index.html file from the Menu bar click on Insert - Div.
In the Insert Div box Click on the New CSS rule button.
In the New CSS Rule box click on the Selector Type drop down menu and choose ID (applies to only one HTML element).
In the Selector Name box enter the text #main_wrapper.
In the Rule Definition section, at the bottom click the drop down list that currently says (This document only) and choose (New Style Sheet File).
Click OK top right.
In the Save style sheet file as box create a new folder called css.
Within the newly created css folder save the stylesheet file as main_style.css.
In the CSS Rule Definition box from the Category list on the left click on Box.
In the width text box/drop down list type 1000 and ensure that the units are px (pixels).
From the Margin section, ensure that Same for all is ticked then from the drop down list below select Auto.
Click OK at the bottom, then click OK in the Insert Div box.
(The placeholder text that is inserted will remain in place for now. We will delete all of the place holder text at the end.)
To insert the banner div at the top click on Insert – Div again.
In the Insert Div box from the Insert drop down menu select After start of tag. From the drop down menu to the right of that select <div id=”main_wrapper”> (This will place the #banner tag inside the #main_wrapper tag.)
Click New CSS Rule
Choose ID from the Selector Type drop down menu
In the Selector name box type #banner
From the Rule Definition menu choose main_style.css.
(This is the name of the style sheet we created earlier).
In the CSS Rule Definition box just click on OK.
(A little tip for CSS is that the more flexible that you want the code to be, the less instructions you need to put in to control the layout. Try to keep in simple).
Click OK then OK again in the Insert Div box.
Click Insert – Div again.
From the Insert menus choose After tag and choose <div id=”banner”>.
Click on New CSS Rule
Create an ID called #navbar inside the main_style.css.
Click OK and the OK.
In the Insert Div box click on OK.
Create Another Div after the #navbar div called #main_content but don't set a width or change any of the options within the definition box.
OK out of the relevant boxes.
Create a new Div called #footer and place it after the #main_content. Again don’t set a width.
Delete the text for the main_wrapper
Note that at the top left of the page is a main_styel.css style sheet file. Now you have 2 files laying out your page one is the index.html file and the other is main_style.css.
To save both pages from the menu bar click File - Save All