For the last two years, most of my web work has been deploying Cascading Style Sheets (one CSS styles several hundred web pages across our main Zeldman and Meyers to take the leap. Eventually.
This site I have been working on is still under wraps for the last bits of development, but I recently undertook what has turned out to be my first pure XHTML, no tables for layout, validate-able, web standards site.
The American College Dance Festival is a regional dance festival being hosted by one of our colleges. I took it on as part of our Fine Arts projects, originally to develop the online registration system (which turned out to be too complex to do in a short time frame). But here are some things that got tossed into the new site….
The draft of the site was provided on a CD, and I was ratther dismayed to find it was something likely laid out in PhotoShop, and then sliced and diced to a web page with about 5 deep nested HTML tables and something like 30 images per page. It was swiss cheese with extra holes. In fact, on some pages there was no text at all.
First of all, on the re-designed site there is only one template, a PHP file, with the content sections organized by the right side links as external files, displayed by PHP include statements where needed. Updates to main site structure are done via this template.
Secondly, with the penultimate guide to CSS and HTML lists, the Listamatic (providing the first time I really “got” how to deploy HTML lists in a modern fashion). I actually pretty much took ProjectSeven’s Uberlist method for this project, and actually even “borrowed” their graphics since they matched my color scheme.
(This “Uberlist” method shows you how to take an HTML plain old <ul> list and use CSS to turn it into graphical buttons with rollover effects).
However, I do not like that the “uber” link (the page in view) used the same graphic as the rollover, so I photoshopped to make a new “uber” link and a different color for the rollover effect.
Where the current page has the orange button (with check mark), the “hover” button (the one under the mouse) is blue, and the buttons not activated yet are grey.
Again, the beauty of this is that this is rendered from a plain old HTML list:
<ul>
<li id="uberlink"><a href="index2.php?sect=0" onClick="return false;">About</a></li>
<li><a href="index2.php?sect=1">Register</a></li>
<li><a href="index2.php?sect=2">Adjudicators</a></li>
<li><a href="index2.php?sect=3">Guest Company</a></li>
...
</ul>
The other feature, for randomness sake, is a background graphic of dancers or dance themes. There is a directory of images, named “1.jpg”, “2.jpg”, and again, PHP comes to the resucue by allowing me to have a dynamic CSS in the template that randomly makes this the background graphic:
<?php
# number of background images
$bg_count = 8;
# seed random stuff and get file name for random image
mt_srand( (double) microtime() * 1000000);
$randy = mt_rand(1, $bg_count);
?>
<style type="text/css" media="Screen">
/* random background image */
body {
background: #fff url(/arts/events/acdf04/style/bg/<?php echo $randy?>.jpg) no-repeat; background-position: 40px 50px;
}
</style>
Thjis has been both fun and aggravating as I stomped through changes that sometimes tossed it all amuck. Then there was doing whatever possible to make at least the site navigable on NetScape 4 (it is hard to believe people use 1998 software to access the web in 2003, but it is a factor in our system because of our email system- a long story better told over a campfire).
In the end, I am looking forward to doing more pure CSS / XHTML designs, and where possible, yanking content and formatting as far apart as I can.
