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 Video. In your local_root/212practice folder, create a folder named css_layout. 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 div.
  6. Set box2 to 200 pixels wide, float right. What happens to the flow of information on the page?
  7. Save and upload. Test in Internet Explorer and Firefox.

page2: 1column.html

  1. Select File -> New to create a new file with a Dreamweaver CSS layout. Choose a 1-column liquid layout.
  2. Save as layout_1column.html.
  3. Type "1 column liquid layout" at the top of the page.
  4. Add some text into each of the divs and preview in Firefox and IE browsers.
  5. Save and upload. Test in Internet Explorer and Firefox. What happens when you resize the browser window?

page3: 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. logoIn the Header div on top, delete the logo image placeholder in the upper left and type in a title ("2 column fixed layout" or make up your own) into the header div. Format as Header 1. If you wish, you can insert a title or logo image set to align right or left. Feel free to use the logo image shown on the right.
  4. Change the background colors for each div and for the nav and nav hover.
  5. Delete the placeholder text in maincontent div and sidebar div and add some of your own text in the maincontent div.
  6. Save and upload. Test in Internet Explorer and Firefox. How does this layout behave when you resize the browser window?

page 4: 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. Delete the placeholder logo in the header div and type "3 column fixed layout" into the header div.
  4. Create links to the other pages in this lab in the left sidebar.
  5. Copy and paste content into each of the divs and preview in a browser.
  6. Change the background colors for each div and for the navigation.
  7. Save and upload. Test in Internet Explorer and Firefox.

 

Try out some other layouts. What's the difference between liquid & fixed layouts?

 

Turning this in

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