Dreamweaver 

Lab Lesson 8

 

In this lesson, you will be setting up a DIV Tag two column page layout using the ICE and Liquid design techniques for the Joe’s Tiny Diner web site.


1. Setup a manage site.

2. Create a new HTML document.
3. Create an external cascading style sheet (CSS) and attach the file to the HTML document.
4. Insert a DIV tag layer containers.

5. Configure the layout and formatting style rules for the DIV tag layers.
6. Configure the background color, box dimensions (width & height) for the DIV tag layers.

7. Setup the page font and background color.

8. Readjust the DIV layer rulers to apply the Liquid design technique for banner and footer layers.

 

Desired Output:

Part 1: You will be creating a two column page layout using the ICE design technique where the page is fixed to the left margin

           Attached is the desired output for Lesson8Part1 sample page

Below is the wireframe:

 


Part 2: You will be creating a two column page layout using the Liquid design technique where the page expands filling the browser window.
           Attached is the desired output for Lesson8Part2 sample page

 

Below is the wireframe for Part 2:

 

Below are the hexadecimals values for the DIV tag layer colors:
1. Wrapper1:  #FFF

2.  Banner Layer:  #66CCFF

3. Wrapper2: #FF9900

4.  Navigation Layer: #FF9900

5. Content Layer: #FFF

6.  Footer Layer:  #66CCFF



Prerequisites:
1. Download AssignmentLesson8.zip on your desktop

2. Unzip the folder on your desktop and rename the site folder to Lesson8
3. Setup the manage site for Lesson 8.  Name to site as “Joe’s Tiny Diner”.

 

PART 1:   Two Column Page Layout using the ICE Design Technique (Fixed to the Left Margin)

A.  Create an external CSS file.

1. Create an external Cascading Style Sheet (CSS) file.  

2. Name the file as “mystyle1.css”.

3. Save and close the external style sheet.


B.  Create a new HTML document.

1.  Create a new HTML document.

2.  Add the title “Joe’s Tiny Diner” to the html page.

3.  Name and save the file as “layout1.html” page in the root of your Lesson8 folder.

4.  Attach the mystyle1.css style sheet to the layout1.html.html page

 

 

C.  Configure the page font and background color.

1.  Create a new CSS rule.

2.  Define the rule in the external CSS file- mystyle1.css.  Select mystyle.css from the Sources.

3.  Click the + sign to add the Selector Name, enter body.

4.  Select and verify the following rules in the category:

            font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans     
             font-size: 16px

            margin: 0px (all sides)

 

D.  Create the wrapper1 DIV tag layer.

1. Insert a DIV tag.  From the Insert Panel, select DIV

    Verify the cursor is blinking at the top of the page.

2. Insert a DIV tag at Insertion Point

3. Enter “wrapper1” as the ID.

4. Click on New CSS rule.

 

5. Define the rule in your external CSS file- mystyle1.css


6. Enter the following rules in the CSS Definition dialog box:

            background-color: #FFF

width: 860px

height: 640px

 

Note:  In the CSS Designer, if you click on Show Set (red arrow), only the rules you selected will display in the Properties window

                       

7. Delete the text placeholder in the DIV container you created before proceeding.

 

NOTE:  Before proceeding, you will need to delete any text placeholder in the wrapper1 DIV layer (see step D7).

E.  Create the banner DIV tag layer

1. Verify there is no text in the #wrapper1 layer and the cursor is blinking inside the container.

2. Insert a DIV tag at Insertion Point

3. Enter “banner” as the ID.

4. Click on New CSS rule.

 

 

5. Define the rule in your external CSS file- mystyle1.css

6. Enter the following rules in the CSS Definition dialog box:

background-color: #66CCFF

width: 860px
            height: 120px

Note:  If you click on Show Set (red arrow), only the rules you selected will display in the Properties window

 

Note:  In the CSS Designer, if you click on Show Set (red arrow), only the rules you selected will display in the Properties window

 

F.  Create the navmenu DIV tag layer.

1. Insert a DIV tag. 

2. For the Insert, select “After tag” <div id=”banner”>.

3. Enter “navmenu” as the ID.

4. Click on New CSS rule.

 

5. Define the rule in your external CSS file- mystyle1.css.

6. Enter the following rules in the CSS Definition dialog box:

            background-color: #FF9900      

width: 150px

height: 480px

            float: left          

 

Note:  In the CSS Designer, if you click on Show Set (red arrow), only the rules you selected will display in the Properties window

 

Note:  In the CSS Designer, if you click on Show Set (red arrow), only the rules you selected will display in the Properties window

 

 

G.  Create the content DIV tag layer.

1. Insert a DIV tag. 

2. For the Insert, select “After tag”  “<div id=”navmenu”>.

3. Enter “content” as the ID.

4. Click on New CSS rule.

 

5. Define the rule in your external CSS file- mystyle1.css.

6. Enter the following rules in the CSS Definition dialog box:

            background-color: #FFF

            width: 670px

height: 440px

float: right

            padding: 20px (all sides)

 

Note:  In the CSS Designer, if you click on Show Set (red arrow), only the rules you selected will display in the Properties window

 

H.  Create the footer DIV tag layer.

1. Insert a DIV tag. 

2. For the Insert, select “After tag”  “<div id=”content”>

3. Enter “footer” as the ID.

4. Click on New CSS rule.

5. Define the rule in your external CSS file- mystyle1.css.

6. Enter the following rules in the CSS Definition dialog box:

            font-size: 12px

            background-color: #66CCFF

            text-align: center

width: 860px

height: 30px

            clear: both

            padding-top: 5px

            padding-bottom: 5px

 

Note:  In the CSS Designer, if you click on Show Set (red arrow), only the rules you selected will display in the Properties window

 

I. Save and Test the layout1.html page:
1. Select File from the menu and then Save All.

2. Test your web page by clicking the Preview in Browser in the toolbar or pressing F12.

3. Verify your document is complete and that it closely matches the page layout below:

 

           

 

PART 2:   Two Column Page Layout using the Liquid design technique (Page expands filling the browser window)

A.  Create an external CSS file.

1. Create an external Cascading Style Sheet (CSS) file.  

2. Name the file as “mystyle2.css”.

3. Save and close the external style sheet.

 

B.  Create a new HTML document.

1.  Create a new HTML document.

2.  Add the title “Joe’s Tiny Diner” to the html page.

3.  Name and save the file as “layout2.html” page in the root of your Lesson7 folder.

4. Attach the mystyle2.css style sheet to the layout2.html.html page

 

C.  Configure the page font and background color.

1.  Create a new CSS rule.

2.  For the Selector Type, choose Tag

3.  For the Selector Name, enter the body

4.  Define the rule in the external CSS file- mystyle2.css

5.  Select and verify the following rules in the category

font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans     
             font-size: 16px

            margin: 0px (all sides)

 

D.  Create the wrapper1 DIV tag layer.

1. Verify the cursor is blinking at the top of the page.

2. Insert a DIV tag. 

3. Enter “wrapper1” as the ID.

4. Click on New CSS rule.

 

5. Define the rule in your external CSS file- mystyle2.css


6. Enter the following rules in the CSS Definition dialog box:

background-color: #FFF

width: 100%

height: auto

 

7.  In the CSS Styles panel, click on the Add Property link to enter the width and height values below:

Note: Select the properties from the pulldown menu.

            min-width: 860px

            min-height: 640px

 

          

           

 

8. Delete the text placeholder in the DIV container you created before proceeding.

 

NOTE:  Before proceeding, you will need to delete any text placeholder in the wrapper DIV layer (see step D8).

E.  Create the banner DIV tag layer.

1. Verify there is no text in the #wrapper1 layer and the cursor is blinking inside the container.

2. Insert a DIV tag at Insertion Point.

3. Enter “banner” as the ID.

4. Click on New CSS rule.

5. Define the rule in your external CSS file- mystyle2.css

6. Enter the following rules in the CSS Definition dialog box:

            background-color: #66CCFF

width: 100%

height: 120px

           

 

F.  Create the wrapper2 DIV tag layer
1. Insert a DIV tag. 

2. For the Insert, select “After tag”  “<div id=”banner”>

3. Enter “wrapper2” as the ID

4. Click on New CSS rule.

 

5. Define the rule in your external CSS file- mystyle2.css

6. Enter the following rules in the CSS Definition dialog box:

            background-color: #FF9900

width: auto

            height: auto

            float: left

 

7.  In the CSS Designer, click on Add Property More button to enter the minimum width and height values below:

 Note: Enter the properties from the pulldown menu.

min-width: 860px

            min-height: 480px

           

8. Delete the text placeholder in the DIV container you created before proceeding.

 

NOTE:  Before proceeding, you will need to delete any text placeholder in the wrapper DIV layer (see step F8).

 

G.  Create the navmenu DIV tag layer.

1. Verify there is no text in the #wrapper2 layer and the cursor is blinking inside the container.

2. Insert a DIV tag. 

3. Insert a DIV tag at Insertion Point.

4. Enter “navmenu” as the ID.

5. Click on New CSS rule.

 

6. Define the rule in your external CSS file- mystyle2.css

7. Enter the following rules in the CSS Definition dialog box:

            background-color: #FF9900

width: 150px

height: 480px

            float: left

 

H.  Create the content DIV tag layer.

1. Insert a DIV tag. 

2. For the Insert, select “After tag”  “<div id=”navmenu”>.

3. Enter “content” as the ID.

4. Click on New CSS rule.

 

5. Define the rule in your external CSS file- mystyle2.css.

6. Enter the following rules in the CSS Definition dialog box:

background-color: #FFF

width: 670px

            height: auto

float: left

            padding: 20px (all sides)


7.  In the CSS Styles panel, click on Add Property link to enter the minimum width and height values below:

Note: Select the properties from the pulldown menu

            min-height: 500px

 

Note:  In the CSS Designer, if you click on Show Set (red arrow), only the rules you selected will display in the Properties window

          

 

I.  Create the footer DIV tag layer.

1. Insert a DIV tag. 

2. For the Insert, select “After tag”  “<div id=”wrapper2”>.

3. Enter “footer” as the ID.

 

4. Click on New CSS rule.

5. Define the rule in your external CSS file- mystyle2.css.

6. Enter the following rules in the CSS Definition dialog box:

            font-size: 12px

            background-color: #66CCFF

            text-align: center

width: 100%

height: 30px

            clear: both

            padding-top: 5px

            padding-bottom: 5px     

 

Note:  In the CSS Designer, if you click on Show Set (red arrow), only the rules you selected will display in the Properties window

 

 

J. Save and Test the layout2.html page:
1. Select File from the menu and then Save All.

2. Test your web page by clicking the Preview in Browser in the toolbar or pressing F12.

3. Verify your document is complete and that it closely matches the page layout below.

 

  

Submit:

1. Zip up and compress your Lesson 8 folder.  
2. Upload the compressed folder into the Canvas Assignment page for Dreamweaver Lab Lesson 8 drop box.

 

Lesson 8 Topics

Points

1. Creating and attaching an external CSS

5

2. Insert a DIV tag layer containers

10

3. Configure the formatting and layout rules

10

4. Setup the page font and background color

5

Total

30