So What is This About?
There is a continuing need to show the power of CSS
and to be taken seriously by all Internet Programmers. This site is a student version of the
famous css Zen Garden, whose site targets graphic
designers. This Learning Zone aims to excite, inspire, and encourage participation by students. To
begin, view some of the existing student designs in the list. Clicking on any (Sample #) will load
the style sheet into this very page. The HTML
remains the same, the only thing that has changed is the external CSS file. Yes, really.
CSS allows complete and total
control over the presentational aspects of a hypertext document. For you to truly appreciate the
power at your control, it is important that you see what is possible when
the CSS is the only part that
you have control over. You can then contrast what others have done with the same
structure/content. Note this exercise only illustrates a portion of the power that is available
when using CSS across your site; we can always push it further.
Internet Programming students only. You are modifying only the presentation of this
page, so strong CSS skills are necessary. Please
refer to our text
The Missing Manual (3rd ED) by David McFarland for a quick
refresher on working with CSS.
You may edit your style sheet in any way you wish, but not
the HTML. When your (external) .css is loaded, it
will not be from your HTML
file. To be clear, you do not have to write style rules for all of the
structure/id's/classes/elements in the HTML
file. The excessive amount of additional structure is there to provide as much flexibility as you
may want in your design. This may seem daunting at first if you’ve never worked this way
before, but will help to make you more aware of all the capabilities of CSS.
Download the sample html file to work on a copy locally. Once you have established a name
for your CSS file, and its location in your
account, send me and email with the full-path and name to your file. You do not
have to be finished at this point, but do not change the name or move the file until after they
are 'collected'. You are to have your completed masterpiece on gauss (our web server)
before class on the due date.
The only real requirements I have, are that your CSS
validates, and that you use absolute paths for any images that you use (I will not collect your images).
Of course all our previous discussions about the appropriate type of images, apply here
as well (keeping in mind that we are a Catholic-based liberal arts university).
Luckily, designing this way shows how well various browsers have
implemented CSS by now. When sticking to the guidelines
you should see fairly consistent results across most modern browsers. Due to the sheer number of
user agents on the web these days — especially when you factor in mobile —
pixel-perfect layouts may not be possible across every platform. That’s okay, for our CSS
Learning Zone your design should work in modern web browsers: Firefox, Chrome, Opera,
Safari, and IE9+ (these together represent over 90% of the population).
This is a learning exercise as well as a demonstration, so please take advantage of this last
class CSS assignment and learn all you can. Go beyond what we learned in class.
Bandwidth graciously donated by
the Department of Mathematics and Computer Systems
at Mercyhurst University in Erie,