CPSCI 105: Explorations in Computer Science

Lab 12

March 8, 2007

Instead of our usual Thursday quiz, today we'll work on independent lab assignments.

The point of this exercise is to expose everyone to the various aspects of CSS listed in the table below. Create a web page on warp explaining how to implement the topic appearing next to your name using CSS. Your page should explain clearly what the effect is and how you accomplish it, and it should give a few examples of your effect in action. Test the effect in both Firefox and Internet Explorer to see if it works in each; put a table at the bottom of the page reporting your results.

Note: Your file should be named lab12.html and it should be located in your labs directory. Put a link to the file on your homepage. I believe that this assignment can be completed during class on Thursday; in case you need more time, however, it is not due until 5 p.m. on Friday, March 9.

If your assigned topic is too easy (some of them are), feel free to also tackle one of the unassigned topics at the bottom of the table.

You'll give a brief demo of your page to the class when we meet again after spring break.

There are two kinds of topic listed below:

a layout effect

your job is to figure out how to do it

Hint: look for pages on the web that have the effect, and use the “view source” option in your web browser to see how it's done. (Note: if the effect is controlled by an external stylesheet, you can get the URL of the stylesheet from the <link> element. Enter the URL in the address bar of your browser, and it will display the contents of the stylesheet.)

To find pages, try Google—give it a short description of the effect and the term CSS.

For some of the more difficult effects, a link is given to a website explaining how to achieve it. So you'll have CSS code, but work through it so that you understand what's going on; explain how it works on your page (and include a link to the source). (The code isn't always perfect, so test it out and make changes if necessary.)

a CSS property

your job is to figure out something to do with it

Give a realistic use of the property—e.g., “This would be really useful in heading elements”. Feel free to mention more than one use—for many of these, there are probably multiple uses that will easily occur to you.

Hint: usually the textbook will give an example you can adapt. Alternatively, try Google—there's a web subculture of CSS aficionados who like to figure out how to do things with CSS and then post web pages explaining what they've done.

If you find your effect on the web, include a link to the page. Don't just copy the CSS, though—make sure you understand how it works and explain it on your page. (If you're not sure why it works, or if you are only speculating, say so on your page!)

Note: occasionally, you're going to come across something that works in IE but doesn't work in Firefox (or vice-versa). Try to find a workaround so that your effect will work in both browsers; if you can't, report that.

If you have a question about your topic, contact me.

For a sample of what I'm looking for, take the link to Jim Nasium's example webpage in the table below. (The other "Example" links—except for the unassigned topics—are links to the pages you will be creating for this assignment.)

[ Return to the CPSCI 105-01 homepage ]