(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:
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.
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.