Layout pt 1 & 2 Assignment Explained

Listed below are the steps you need to follow to complete the layout (parts 1 and 2) assignments. You have 2 weeks to complete these assignments.

1. Read the first part of Chapter 5 "Basic Page Layout" (pgs 136-158). The author presents a number of basic layouts that can be used as a basis for most of the designs currently found on the Web. These layouts are; 2 column fixed, 2 column fluid, 3 column fixed, and 3 column fluid. The author also discusses min and max width, and the issue of float vs absolute.
   
   The Aslett clearing method is discussed on page 119, and is demonstrated on the DVD in the layout pt 1 lessons. I recommend you review that page of the text as well.
   
   In this lesson the textbook and the DVD are not closely related. In the earlier version of the textbook the author presented absolute positioned layout and floated layout in equal amounts. In the current version of the text, most of the layouts are floated.
   
   Students often wrote to me that they appreciated learning about absolute positioning, so I have kept those demonstrations on the DVD even though they are no longer in the textbook.
   
2. I recommend you tackle the DVD in 2 stages. Open the DVD > css-part2 > start-here.html > layout [pt 1] lesson. Here is a list of what you need to watch in week 1.
   * 2 column absolute
   * 3 column absolute
   * 3 column header
   * 3 column header float-clear
   * aslettt clearing
   * files used in this lesson
3. The 2 column absolute page will have a fixed width for the first column and a fluid width that adjusts to the browser window in the second column. This is not exactly what the text book demonstrates, however I have found this layout to be extremely popular and wanted students to create it. Follow the model of the page found at layout [pt 1] lesson > 2 column absolute.
   Save the file as "2col-absolute.html" and place it in the "samples" folder.
4. The next homework assignment asks you to create a 3 column layout where the left and right columns are fixed and the center column stretches and shrinks to accommodate the size of the browser window. Follow the model of the page found at layout [pt 1] lesson > 3 column absolute.
   Save the file as "3col-absolute.html" and place it in the "samples" folder.
   
5. Now we will switch from using absolute positioning to using float and clear properties to establish a 3 column layout with a header and footer. Follow the model of the page found at layout [pt 1] lesson > 3 column header float-clear.
   Save the file as ""3col-head-foot.html"" and place it in the "samples" folder.
   
6. The final sample you will make this week a Web page with uses the
   Aslett Clearing method discussed on page 119 of your text and expanded upon at www.www.positioniseverything.net/easyclearing.html.
   
   Div tags do not register that they have content, if the items within them are floated. This is a wacky rule, but it exists and we need to work around it.
   
   The Aslett method inserts a period to the end of a div tag that holds all the floated items by using the :after pseudo class. This period is not floated and since it is at the end of the floated elements the div tag makes room for the floated items and the period.
   
   Then for the final piece of magic, the css style sets the period to have a display value of none. The browser sees the period, and registers that the div tag has a non floated period at the end of the content, but the visitor to the site never sees the period. How tricky is that?
   
7. During the second week you need to apply the concepts of layout to the "live" site. Access the DVD > layout pt 2 and review these lessons:
   # live site pt 1
   # live site pt 2
   # live site pt 3
   # live site pt 4
   # live site pt 5
   # live site pt 6
   # live site pt 7
8. In this demonstration I used float to position the columns at the "live" site. You may choose either float or absolute positioning. Save the "live.html" page and the "live.css" files in the live folder.
   
9. Now open the "homework.html" page and activate the links for the layout lesson. This will require you to create a link to these files:
   
   2 column layout using absolute positioning
   3 column layout using absolute positioning
   3 column with a header and footer using float and clear
   page which uses Aslett Clearing Method
   
   Live Site -which has a 2 - 3 column layout, a header and footer, and uses either absolute positioning or float and clear.
10. These files will be placed in the folders indicated below
    
    sample folder
    
    "2col-absolute.html"
    "3col-absolute.html"
    "3col-head-foot.html"
    "aslett.html"
    
    live folder
    the "live-site.html" page and the "live.css" file
    
11. 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.
12. I will use the "student work" page to grade your work.