web


Introduction

CSS Divs are the preferred way to do page layout. In this lab, you will create several pages that demonstrate use of CSS for layout.

Instructions

If you have not already done so, browse CSS notes and watch the CSS Layout Screencast. In your local_root folder, create a folder named css_layout_lab. In this folder, You will create 4 files.

page 1: divs.html

  1. Create a new file divs.html and type in "Creating and Styling div tags" at the top of the page. Format this as Heading 1.
  2. Create 3 divs with id’s box1, box2, and box3.  Add some text to each div and change the background color for each div.
  3. Adjust the padding for each div.
  4. Adjust the margins for each div.
  5. Set the border for at least one box.
  6. Set box2 to 200 pixels wide, float right. What happens to the flow of information on the page?

page2: layout_1column.html

  1. Select File -> New to create a new file with a Dreamweaver CSS layout. Choose a 1-column elastic layout.
  2. Save as layout_1column.html.
  3. Type "1 column elastic layout" into the header div.
  4. Copy and paste content into each of the divs and preview in a browser.
  5. Save and upload.

page3: layout_2column.html

  1. Select File -> New to create a new file with a Dreamweaver CSS layout. Choose a 2-column fixed, left sidebar, header and footer.
  2. Save as layout_2column.html.
  3. Type "2 column fixed layout" into the header div.
  4. Copy and paste content into each of the divs and preview in a browser. How does this layout behave when you resize the browser window?
  5. Change the background colors for each id selector.
  6. Change the width of the container id to 600 pixels.
  7. Save and upload.

page 3: layout_3column.html

  1. Select File -> New to create a new file with a Dreamweaver CSS layout. Choose a 3-column fixed, header and footer.
  2. Save as layout_3column.html.
  3. Type "3 column fixed layout" into the header div.
  4. Create links to the other pages in this lab in the left or right sidebar.
  5. Copy and paste content into each of the divs and preview in a browser.
  6. Change the background colors for each id selector.
  7. Change the width of the container id to 900 pixels and preview in a browser. What happens when you resize the browser window smaller than 900 pixels wide?
  8. Save and upload.

 

Turning this in

Test your work on the server and link to layout_3column.html from 212portfolio.htm. This will be graded at the end of the semester.