<div><span>& layout assign. explained

For the next 2 weeks week we learn about divs and spans, and then arrange the div tags into 2 and 3 column layouts.

Preparation:

Week 1
Text: Chapter 11 - Advanced Web Construction: divs and spans

Note: This is a huge chapter, so be prepared to spend a good amount of time in reading and review. It's worth it though; your understanding of how CSS works will be vastly improved.

I will tape the lecture and put a link here
https://sas.elluminate.com/site/external/jwsdetect/playback.jnlp?psid=2009-03-31.1755.M.0952E3FB5CC338370C949C3103C0A3.vcr

CD (optional): View lesson 3.

Week 2
Text: Chapter 12 - Arranging Elements: Layouts and Positioning

This chapter is even longer that Chapter 11. Get out your yellow highlighter and dive in.

https://sas.elluminate.com/p.jnlp?psid=2009-04-07.1804.M.0952E3FB5CC338370C949C3103C0A3.vcr

CD (optional): View lesson 4.

Homework:

Week 1

1. Add divs tags to all the major sections of the longest web page at your site. All content needs to be inside a div tag with a unique ID. (20 points)
   
   
2. Use 2 spans tags which each have unique classes and style those classes.
   (10 points)
   
   

Use descendant selectors (pp. 451 - 455) to create rules in your .css file that style at least 2 tags that occur inside your divs. You must apply a different style to these tags than to the other same tags on the page, without using additional classes or ids. For example, your selector might select all <a>elements that are inside the "navigation" div, and make those div tags have a unique color and background. Read pp. 451 - 455 for more on this subject. (10 points)

The garden site perennial page has the div tags, the purple coneflower page has span tags

Here is the perennials page step by step

Page with no div tags

Page with div tags added (it will look the same on the screen)

Page with div tags colorized (not requied for homework)

Page with div tags styled, new navigation styling and a new div which displays images

Week 2:

Make a copy of the page with div tags and lots of content and make the following layouts.

1. Create a 2 columns layout (10 points) - garden site 2 column example
   
   
2. Using the "float" property and margin settings create a 3 column layout on one of your pages which has a "liquid" layout. Liquid layout has no size for one of the columns so it will stretch or shrink as the browser window changes. (10 points) - garden site 3 column liquid layout
   
   
3. Create a "frozen" version of the 2 or 3 column layout. Frozen layout has a size for all of the columns so it will remain exactly the same as the browser window changes. (10 points) - garden site 3 column frozen layout
   
   
4. Create a "jello" version of the 2 or 3 column layout. Jello layout has size for all of the columns, there is an extra div tag that holds the content and has fixed size. The left and right margins will stretch or shrink as the browser window changes. (10 points) garden site 3 column jello layout
   
   Special Note - In order to make various layouts for the same page I recommend you follow this naming convention
   "filename-liquid.html" and use a css file named "liquid.css"
   "filename-frozen.html" and use a css file named "frozen.css"
   "filename-jello.html" and use a css file named "jello.css"
   if needed you can also use the same page for the 2 column layout and call it "filename-2col.html" and "2col.css".
   
   

Each of your webpages must include a W3C validation icon for XHTML 1.0 Strict at the bottom. You should use the W3C validator to check your XHTML code and your CSS code. Note that points will be deducted from your score for each error in your XHTML or CSS code.

Upload your webpage and css file to the server. Upload them directly into your public_html folder, not into a sub folder. Then make links to these files from your homework page. View sample homework page

You do not need to submit a URL this week since the student work page has a link to yoru homework page, and I will grade your work from there.

http://www.santarosa.edu/~lhemenw/html2/student-work.html