William P. Craft

This Unit:

Reading Assignment:

This is it! The most important chapter in our textbook.


Highlights--Make sure you understand:

  1. How elements can be floated and how only inline elements respect the boundaries of the floated element (pp. 496-518)
  2. How Jello Layouts lock down the content area of the page (pp 518-519)
  3. How to use Absolute Positioning (pp.520-533)
  4. How to use the z-index (p. 529)
  5. Fixed Positioning (pp. 534-537)
  6. Relative Positioning (pp. 538-540)
  7. Optional, but Recommended: Three Column Layout (p. 541)

It is crucial that you do all the exercises in Chapter 12 of the book. You will really learn a lot by doing them step by step.

Discussion:

None this unit.

Quiz:

Take the quiz.

Assignment (10 pts):

Build a page with a "jello" layout. See page 499-519 in the textbook. Page 518 is key to the "jello part."

Your page will need to have:

  1. a <div> called: allcontent
  2. a <div> called: header
  3. a <div> called: main
  4. a <div> called: sidebar
  5. a <div> called: footer
  6. a css style sheet attached to control the placement and styling of all the divisions and the content in the divisions.
  7. you can follow the general plan of the textbook example; in particular copy the way they float "sidebar" to the right. But, put in your own pictures and words. Nothing elaborate. Just play a little with some of your own pictures and words. If you don't want to write your own words, use the Lorem Ipsum text generator.
  8. Change some of the dimensions in the style sheet a little to make sure you know what each one does. Make sure you really understand what you are doing with this exercise since the "jello" layout is used all over the net and you will need it. (Now that you know what it is, you will see it all the time. In fact the entire website of http://www.sdmesa.edu is "jello.")
  9. inside "footer" put the W3C links with their supporting code to allow the page to be checked automatically by W3C.

Don't forget the W3C Validators for XHTML and CSS are your best friends! They will give you unending feedback. Since they are computer based, they don't run out of time to help.

Make sure you limit yourself to the concepts covered so far in the book. You need to REALLY understand the concepts in the textbook before you try more advanced layouts that you will find discussed elsewhere.

From this point on, remember anything you submit to me for grade MUST PASS W3C XHTML-STRICT AND CSS 2.1 VALIDATION. Validation is a MINIMUM requirement for the rest of the course, not an extra nice-to-have feature. You must include the validation code links for XHTML 1 strict and CSS on all your work.

Post the webpage and the attached stylesheet that you made above to your Internet site and tell me the exact address in the comments section of the assignment tool in WebCT for Unit 12.

Due Date:

The due date for the assignment is listed on the homepage on the course.

For Your Planning:

  1. If you want to do the Optional Chapters, get instructions on the Home Page of the course under the Learning Modules named Chapter 13 and Chapter 14. If you do them both properly, you can add up to 15 points to your final score for the course.
  2. Starting next unit we will be going outside the textbook and going to some websites to get additional info that you need to know on css templates. Good part: this new stuff will make things quite a bit easier!

...Bill