Layout pt 3 Assignment Explained

Listed below are the steps you need to follow to complete the layout parts 3 assignments.

1. Read the second part of Chapter 5 "Basic Page Layout" (pgs 159-173). The author explains how to create faux columns with images. This is important since browsers will only display background color or images behind the content of a column. If you have 3 columns which contain uneven amounts of content, the background color or image will not display all the way down to the bottom of each column.
   
   By enclosing the 3 uneven columns in a div tag and placing a background image in that enclosing div tag, all 3 columns show color or background.
   
   in the final part of the chapter the author demonstrated a 3 column layout using absolute positioning. Since we did that in an earlier lesson I am not requiring it for this lesson.
   
2. Open the DVD > css-part2 > start-here.html > layout [pt 3] lesson. Here is a list of what you need to watch for the first 2 assignments.
   # background basics
   # faux column page
   # faux column image
   # faux center fixed
   # faux center fluid
   # make columns for fluid
   
3. Create a sample page that has a header, 3 fixed columns and a footer. Enclose the 3 center columns with a div tag (mine has an id or "contentarea") and create a background image which is inserted into the "contentarea" div. The background image has 3 areas of color which will flow down the entire length of the 3 columns. Save the file as ""3col-fixed.html" and place it, and the background image, in the "samples" folder.
4. The next homework assignment asks you to create a 3 column header footer layout where the left and right columns are fixed and the center column stretches and shrinks to accommodate the size of the browser window. This will require you to use 2 enclosing div tags, one that holds the left column image, and another that holds the right column image. Follow the model of the page found at layout [pt 3] lesson >
   faux center fluid and make columns for fluid. Save the file as "3col-fluid.html" and place it in the "samples" folder along with the 2 background images you created.
   
5. If you have extra time try creating a page where the content is written on the HTML page in one order, and displayed on the screen in another. Follow the model of the page found at layout [pt 3 ] lesson >order of content. This is not part of the required homework, however many students find it an interesting exercise. If at some point in the future you inherit a web site which has content entered into many pages in an order that does not match your design, you can use these tricks to display the content out of order.
6. The final part of the lesson involves creating images and CSS code to create faux columns for the live site. On the DVD > layout [pt 3] lesson # live site pt 1
   # live site pt 2
   # live site pt 3
   
   Save the "live.html" page, the "live.css" and the background images in the live folder.
   
7. Now open the "homework.html" page and activate the links for the layout pt 3 lesson. This will require you to create a link to these files:
   
   3 column fixed layout
   3 column fixed sides and fluid center
   
   Live Site - create links to the HTML, CSS and images you used in the background of the div tags.
8. These files will be placed in the folders indicated below
   
   sample folder
   
   "3col-fluid.html" and background image
   "3col-fluid.html" and 2 background images
   
   live folder
   the "live-site.html" page and the "live.css" file and the background images which you created.
   
9. Please upload the files (including your modified homework page) onto "student". Use a Web browser to view your homework page and click on the links to make sure the homework page links to the new files you have created.
10. I will use the "student work" page to grade your work.