Dreamweaver Tutorials

DIV Tutorial

In the tutorial below we will create a dummy web page for a company called the Moose Lodge. Click here to see the example page. While in class the files in step one are loaded onto the desktop for you. If you decide to try the tutorial again as practice. You will need to click on each link individually then save the gif's into a folder on your desktop.

Step One - Download Files Right click on the following and save them to your desktop.
Top
Left Side
Right Side
Bottom
Text

Step Two - Setting up Open a new document with the following properties:
Font - Ariel
Size - Medium
Text Color - #222200
Background Color - #666600
Click here for a picture of the dialogue box

Step three - The title box

1. From the Insert menu select Layout Objects>Div Tag. In the dialogue box choose Insert - Insert at insertion point and in the ID box title it "banner".
2. A box with a dotted line will appear. Click the dotted line and in the properties box at the bottom choose the Edit CSS button.
3. The CSS window will appear in the upper right. Choose the button that looks like a page with a plus, this is the add a New CSS Rule button.
4. Make sure the selector is titled banner, and the rule is defined in this document only. (Click here for image of window).
5. Choose OK
6. In the window that appears, sSet the positioning properties as follows: width 800px, height 142px, top 0, left 0. (see picture here).
7. On the Insert menu choose image. Navigate to your desktop and insert the file named top that you downloaded.
8. Highlight the default text and Choose insert. (ignore any errors that may pop up from your site not being defined and just click ok until it inserts.)

Step Four - Left side

1. From the Insert menu select Layout Objects>Div Tag. In the dialogue box choose Insert - Insert at insertion point and in the ID box title it "leftside".
2. A box with a dotted line will appear. Choose the button that looks like a page with a plus, the New CSS Rule button, in the upper right window.
3. Make sure the selector is titled leftside, and the rule is defined in this document only.
4. Choose OK
5. In the window that appears, Set the positioning properties as follows: Type Absolute, width 28px, height 300px, top 142, left 0.
6. On the background tab set the background image to the file on your desktop titled left.gif. (ignore any errors that may pop up from your site not being defined and just click ok until it inserts.)

Step Five - The middle

1. From the Insert menu select Layout Objects>Div Tag. In the dialogue box choose Insert - Insert at insertion point and in the ID box title it "center".
2. A box with a dotted line will appear. Choose the button that looks like a page with a plus, the New CSS Rule button, in the upper right window.
3. Make sure the selector is titled center, and the rule is defined in this document only.
4. Choose OK
5. In the window that appears, Set the positioning properties as follows: Type Absolute, width 734px, height 300px, top 142, left 28.
6. On the background tab set the background color to #FFFFCC
7. Open the text file you downloaded and copy and paste the text into the div.

Step Six - Right Side

1. From the Insert menu select Layout Objects>Div Tag. In the dialogue box choose Insert - After tag.
2. Select the div id ="center" in the button that opens to the right
3. Finally, in the ID box title it "rightside".
4. A box with the dotted line may appear behind. Select it towards the right if necessary.
5. Choose the button that looks like a page with a plus, the New CSS Rule button, in the upper right window.
6. Make sure the selector is titled rightside, and the rule is defined in this document only.
7. Choose OK
8. In the window that appears, Set the positioning properties as follows: Type Absolute, width 38px, height 300px, top 142px, left 876px.
9. On the background tab set the background image to the file on your desktop titled right.gif. (ignore any errors that may pop up from your site not being defined and just click ok until it inserts.)
10. Delete any default text.

Step Seven - the bottom

1. From the Insert menu select Layout Objects>Div Tag. In the dialogue box choose Insert - After tag.
2. Select the div id ="rightside" in the button that opens to the right
3. Finally, in the ID box title it "bottom".
4. A box with the dotted line may appear behind. Select it towards the right if necessary.
5. Choose the button that looks like a page with a plus, the New CSS Rule button, in the upper right window.
6. Make sure the selector is titled bottom, and the rule is defined in this document only.
7. Choose OK
8. In the window that appears, Set the positioning properties as follows: Type Absolute, width 800px, height 50px, top 442px, left 0px.
9. On the background tab set the background image to the file on your desktop titled bottom.gif. (ignore any errors that may pop up from your site not being defined and just click ok until it inserts.)
10. Delete any default text.