CSS Layout Assignment Explained

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

1. There is no reading assignment this week. These techniques are not included in our text but are very useful so I have included it in the DVD and in our assignment list. This lesson includes an example which has 3 columns that stretch or shrink depending on the size of the window, up until this point only the middle column has changed sizes. The lesson also includes a technique for centering that while confusing initially is very slick once you get the hang of it.
   
   Special Note - On the DVD and the homework page I mention fixed and fluid "flanks" that is just another word for columns.
   
2. Open the DVD > css-part2 > start-here.html > css layout lesson. Here is a list of what you need to watch for the CSS layout assignments.
   # 3 col fixed flank
   # 3 col fluid flank
   # 3 col. header/footer fixed
   # 3 col. header/footer fluid
   # fixed centered
   # fluid centered
   
   If you are using the "Business of Web" site as your "live" sample then watch the live demo lessons as well.
   
3. Create a sample page that has a layout of 3 columns with header and footer, and displays FIXED columns. Use the negative margin centering trick to center the contents of the page. (see DVD for code) Save the file as "3col-fixed-negative.html"and place it in the "samples" folder.
4. Create a sample page that has a layout of 3 columns with header and footer, and displays FLUID columns. Use the negative margin centering trick again. (see DVD for code) Save the file as "3col-fluid-negative.html" "and place it in the "samples" folder.
5. Use the page from the live site, and create either a fixed or fluid flanks centered layout to the page. Also include a link to the css file that controls this page.[10 pt]
   
   Special Note - my "live site" example does not have a background image. I changed the order I teach the lessons in and when I originally taught this lesson, students had not learned about background images. Since you have already created a background image for the live site, you can keep that image when you redesign the site this week.
6. If you have extra time try duplicating files found in the nested float lesson.
7. Now open the "homework.html" page and activate the links for the css layout lesson. This will require you to create a link to these files:
   
   3 column fixed centered
   3 column fluid centered
   live site with centering trick (it can be fixed or fluid, your choice)
8. These files will be placed in the folders indicated below
   
   sample folder
   
   "3col-fixed-negative.html"
   "3col-fluid-negative.html"
   
   live folder
   the "live-site.html" page and the "live.css" file. (you may either rename the file under a new name or just change the page from last week)
   
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.