presented by linda hemenway
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.
- Read the first part of Chapter 5 "Basic Page Layout". 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.
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.
The Aslett clearing method is discussed on page 119, and is demonstrated on the DVD in the layout pt 2 lessons. I recommend you review that page of the text as well.
- 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 overview
* 2 col. fixed left
* column color
* 2 col. fixed right
* 1 column fluid
* 2 column fluid
* files used in this lesson - The "2 column fixed left" demo has the most thorough explanation of the code. If you can understand the HTML and CSS for that page then the remaining pages will seem easy. Follow the examples found in each lesson, however I would expect the page color and column width to vary, I am not expecting an exact duplicate of my samples. You have 1 week to complete the 2 column layouts.
Save each sample with a unique name, suggested titles are: "2col-fixed.html",
"2col-fixed-right.html", "2col-fluid.html" and "1col-fluid.html" place files in the "samples" folder. - There is an above and beyond 2 column lesson you may want to explore if you have the time.
- The next lesson is "layout pt2" which covers the 3 column layout using float and clear. Here is a list of what you need to watch in week 2.
* 3 col overview
* 3 col fixed
* 3 col fluid
* 3 col fluid center
* background basics
* aslett code
* fixed - faux col. code
* fixed - faux col. image
* fixed - centered
* fluid - faux col. code
* fluid - faux col. image
* files used in this lesson - The assignment requires you to create 3 column layouts using float and clear. If you understood the 2 column layout, this 3 column layout should be fairly straightforward. I recommend you use the "faux column" trick on the fixed width sample and Javascript for background color on other 2 samples, however it is up to you.
- The "faux column" technique requires that you use the "Aslett clearing method", which is discussed on page 119 of your text and expanded upon at http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/.
Browsers have a rule that when a div tags have items within them that are floated the browser reads that div tag as being empty and will not show a background image or color. 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 it is at the end of the div tag. The browser sees the div tag as having content all the way at the end and displays background color or images all the way down to the floated 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?
- Save each sample with a unique name, suggested titles are: "3col-fixed.html",
"3col-fluid.html", "3col-fluid-center.html" . Place files in the "samples" folder - 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:
4 samples of 2 column layout
3 samples of 3 column layout - These files will be placed in the folders indicated below
sample folder
"2col-fixed.html"
"2col-fixed-right.html"
"2col-fluid.html"
"1col-fluid.html"
"3col-fixed.html"
"3col-fluid.html"
"3col-fluid-center.html"
Also include any images or Javascript files that you reference in your code - 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.
- I will use the "student work" page to grade your work.
