CS1102 Lab 4 Part I

This week's work

(My thanks go to Dr. Kieran Herley for providing the materials for the this week's work.)

Put this week's work into a new folder cs1102\lab4. The lab gives you the chance to experiment with positioning in CSS.

The following JPEG files are provided:

Download these files and save them in your cs1102\lab4 folder.

In your lab4 folder, you must create an html file, bushkashi.html (all lowercase) and a CSS stylesheet, bushkashi.css. Use a copy of template.html from previously to start you off. Remember to validate both your XHTML and your CSS.

The goal is to create a web page for the ficticious UCC Bushkashi Club. Bushkashi is traditional sport originating in the steppes of central Asia. It is akin to a no-holds-barred form of rugby on horseback in which each team attempts to carry the "ball" over the opposing team's line. The "ball" is traditionally the carcass of a goat or sheep. You can obtain more information and images from the web, if you wish.

The rough layout of the page should be as follows:

[Diagram of the initial rough layout of the UCC Bushkashi Club web page.]

You'll be adding extra stuff to the page in Part II of this lab, next week.

Invent some text for the main body of the page. And invent some links for the menu on the left-hand side (e.g. What is Bushkashi?, Club Officers, Forthcoming Events, Picture Gallery, and so on.). These links need not be operational: I only want you to prepare one page.

Use absolute positioning for the pics, and fixed positioning for the menu of links. You can select whatever dimensions and coordinates you wish. (We covered absolute positioning in lectures, but only very briefly. You can find more information at, e.g., http://www.w3schools.com/css/ or, e.g., http://www.html.net/tutorials/css/.)

Make your page as attractive as you can. In particular, style the menu of links in an imaginative way.

This week's work is only Part I of this lab (Lab 4). Part II is next week's work. You will only hand-up the work after Part II is finished.

Challenge exercise

Once again: challenge exercises are always optional. They do not form part of your year's work and they are not worth any marks.

There's no particular goal in this week's challenge. It's more a question of exploration of some of the more advanced CSS features... Create another page - perhaps just a copy of bushkashi.html. Use it to explore the following CSS properties: position (e.g. try using relative instead of absolute); overflow, clip, visibility and z-index. You can find details on the web.