.

At Your Service

My name is Tom Marquette. One of the many hats I wear is the College Instructor's hat. I have been showing students how to build WebPages since 1997. In 2008 I added a CSS element to the class and while googling the net I found the Zen Garden of CSS Design. Like many of the web designers of the mid 90s I used piles of nested tables to get page layout just right. CSS wasn't widely support so like most of the cool code web fixes I mulled over a number of books (still on my shelf) and hoped for a time when a wide number of browsers got on the CSS band wagon.

Enter Blog Space with 100s of templates generated with CSS, enter FireFox kicking Microsoft in its collective ass. The time was right to make sure my students had a working knowledge of CSS code if for nothing more than to be able to tweak the code under the hood. When I sent the class to the Zen Garden page it had a profound effect on how there collectively looked at design. I picked up Dave Shea and Molly Holzschlag's companion book for the site. After a third read through I decide to update my home page which has not been structurally changes since 1995.

The central element and thematic unifying graphic on the site harken's back to my original site where I used a heavily pop art rendering of the Goodyear blimp with my name proudly emblazon in it. I liked the idea of the airship metaphor, but this time I wanted something more subtle, but at the same time larger that life. Fortunately, I found a png image of the Graf Zeppelin. One of the cool effects I found at the Zen Garden: Fixed Positioning. This effect is used with universe disdain at MySpace were the background remains stationary while the text scrolls....YUCK.

Fixed Position works well when graphics are used as background in the html holder tags DIV and SPAN. Further, each of these virtual layers can have their stacking order changed so one layer can scroll beneath one held static on the page as the one you are currently viewing. The ability of placing images and text pixel precise and effortless overlapping frees the designer from lateral layout and opens up dynamic diagonals and curvilinear flows. On the next page we'll look at how transparence has gone from a single gif color to a true Alfa channel in PNG

The List

.

My Stuff

.

Resources

Next Page