Wolverhampton City Learning Centre (CLC)

Instructions to students

During Day 3, the final day of the project, you will continue to refine your template using HTML and CSS. You will learn the following:

• How to use CSS to add borders, padding, and to change text alignment of parts of your design.
• How to add page titles and why they are important (for search engines etc.)
• How to use the a:hover attribute to affect the appearance of links when the mouse rolls over them.
• How to control typography - font, line-height, and paragraph spacing - using CSS.

Generating dummy text (lorem ipsum) from lipsum.com will be useful in seeing how your design will look.

Once your template is complete, you will begin the process of adding content to the pages of your site. We will talk about writing style for the web. We will also look at optimising jpeg and gif images for the web.

Finally, we will create a contact form into the site using the free service at Emailmeform.com

Screencasts (added after the session: 08/11/07)

Here are the Jing screencasts I recorded during the session today:

• Styling the navigation bar
• The a:hover attribute - styling link roll-overs
• Adding borders to page elements
• Typography - styling headings and paragraphs
• Resizing images for the web
• Using the float property to make text around images
• Adding a contact form using Emailmeform.com

Screenshot taken from a student-created website 

What the teacher said about the project

The Centre had good resources. Short tasks helped my students throughout the project. I now have some great tools from the CLC which I can use with other year groups.

Overall: An outstanding learning experience for pupils.