CSS PARTNERING

Someone pointed out that there is little point to doing the labs
in the friday session if I ask you to do them individually.  So,
mea culpa, I had always intended these to be done in pairs.  It's
just more fun to explore that way.  Especially since you've just realized
that Fridays are very optional (I think they are required, but I
recognize that if I don't record completed labs or lab attendance,
then they are de facto optional).

TASK

1.  Find a partner.  Since you all stagger your arrivals,
ask to join someone already in progress.

2.  Go to http://www.obama.senate.gov/speech/ where you can see
what a U.S. Senator does with his time.  Choose a speech and
copy the text to a blank web page.  

3.  Using just FONT SIZE, FAMILY, COLOR, P, and BR, try to
get this to look the best you can.  You might also try using
B, I, H1, H2, ..., CENTER.

4.  Now, on the original page, you see this senator's face and name
in a banner/logo with images of Abe Lincoln and Chicago.  Pretty fancy.
See if you can include it on your web page.  You are going to find
that it is not an IMG in the source of the page.  What?  Ha ha ha ha.
Welcome to the world of included css.  See if you can find something like
senate.css, and see if you can find something like bg_header.jpg
after that.  I'm not going to tell you the steps because I don't want 
to cheat you out of a very instructive treasure hunt.  There is always
Rebecca or Travis to help.

5.  Put this image on your web page using the IMG tag.

6.  Now we are going to try a little CSS.  Have a look at our CSS
master list:

http://www.cs.wustl.edu/~loui/104f05/1101/cssref.html

OR 

http://www.w3.org/TR/CSS21/propidx.html

and try adding a STYLE attribute to the FONT tag, then, in order:

try set the color:

the background-color:

the font-family:

the font-size:

the font-weight:

the letter-spacing:

the line-height:

the word-spacing:

the text-align:

the text-indent:

ok.

7. Try put a SPAN around each paragraph.  Now add STYLE to your span,
starting with 

background-color:

padding:

border-top-width:

border-left-width:

border-color:

8.  Now, coup de grace, copy the banner into Photoshop and copy a few of
the distinct subimages into new images.  Reduce their contrast and
saturation, and brighten them up a bit.  These are going to be
backgrounds.  Save each to a name such as bg1.jpg, bg2.jpg, ...

Can you make background-image:URL("bg1.jpg") work to put your first image
behind the first SPAN?  Try background-position: too.

Do the same with your other images.

9.  Use absolute positioning and z-index to get your paragraphs to
overlap a bit.  If you are good, you can add the OnMouseOver javascript
so that mousing over a span causes its z-index to rise, and OnMouseOut
causes the z-index of the span to fall.  You can use this to reveal
a paragraph so that it goes to the top and can be read.

If you say something like:

	OnMouseOver=span1.style.zindex=3;span2.style.visibility='hidden';span3.style.visibility='hidden'

you can even make the other spans disappear (then you don't really need the z-index stuff).

10.  That's about all we can do with css.  Let's try iframe.  Put each
paragraph in its own file, called p1.html, p2.html, etc.  Now in a page
called main.html, try putting each paragraph in its own iframe,
e.g., IFRAME SRC=p1.html.  You actually need to use /IFRAME to
end an iframe, but it's not clear that the browsers support putting text
in between the IFRAME and /IFRAME tags, which is why there is an end tag!

You are going to add some javascript to the page,
between SCRIPT and /SCRIPT tags, which sets the scrollbar properties.
Try something like document.body.style.scrollbarTrackColor='green'.

(BTW, if you want to give the body an id, such as BODY ID=foo
and say foo.style.scrollbarTrackColor='green', then you have
to put the script AFTER the body tag that declares the ID!)

Remember here is your reference manual:  
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties.asp

Apparently scrollbar-track-color is also a CSS property (it just wasn't
in our manual).  So we could have done STYLE=scrollbar-track-color:green.
But I want you to try out some javascript commands to alter the DOM 
(the "document object model" -- btw, I looked up DTD -- it stands for
document type declarations -- a sheet of specifications just as I said).
I always think scrollbar properties apply to frames, but they actually
apply to document bodies!  No wonder I am always confused.

Of course you can't leave until you try altering all the scrollbar
properties.  And you have to change the cursor, too.

We have just scratched the surface of CSS and will have to use it
in a more professional way soon.  But we're still in the try-it-out
mode, so I am happy to see you man-handle the man-ual and learn by
DOING.