COMP249 Web Technology
Practical - Week 3
The aim of this practical is to give you some experience with CSS.
Cascading Stylesheets
For the following exercises, use the example web page from the lectures as a starting point.
- Include an image (eg. this one) before the first paragraph and use the float property to make the text flow around it.
- Add a short paragraph at the start of the document
(eg. this text) and give it a class attribute of
leftfloat, then use the float,
width and border attributes to align it
with the left margin with a box around it and make the main
text flow around it. Eg:
+-------+ Main text here |boxed | flows around the |text | boxed text on the +-------+ left sort of like it's an image or something.
- Add an image background to the h1 header in the document so that the image repeats across the header. Centre the heading text and use a margin around the header block to set it off from the main page. Set background and text colours on the remainder of the page to match the image.
- Without looking at the W3C stylesheet, try to emulate the look of one of the W3C core stylesheets illustrated in the example.
- Add a stylesheet to the webpages that you wrote last week. Reference the same stylesheet from each page to provide a consistent look and feel for the site.
Portfolio
You should begin uploading content to the Portfolio Server this week. As an exercise, take the HTML and CSS files that you wrote in one of the questions above and upload them to the Portfolio server. Add a comment about what the point of the exercise is. This can form the basis of your first portfolio item. Ask for help from your practical supervisor if you have problems uploading files or getting the server to work. If you experience problems, please mail Steve Cassidy with the details.
Some suggestions for how to develop your portfolio:
- Develop the above example into a showcase for CSS design elements. Use as many kinds of rules as you can to show of the capabilities of CSS.
- Take an ugly website and redesign it using your own CSS stylesheet. This would be good if you had some graphic design knowledge to call on. Alternately you could try to reproduce the look of a table based layout using CSS.