Computer Tutoring Logo
Est. 2002
Menu Button

Using Divs and CSS to layout a web page - Dreamweaver Tutoring Part 3


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 InsertDiv 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 InsertDiv 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

There are no exercise files for this training video all you need is a copy of Dreamweaver CC - preferably 2015. Although should you want to see the completed file you can download them from here.