Over the next three days, I’m working with Year 10 students from Bilston High School on a web design project. During the project, students will learn how to create a website using HTML for structure and CSS for styling. A presentation, links and ideas from the sessions can be found in the “Web Design Resources” post.
Below are the student instructions for the sessions:
Day 1 - 6th November - An Introduction to Web Design
Here are the tasks for Day 1:
Task 1 - Reviewing websites
Using the tools from Diigo.com, you will review one website from the following list. Review the site based on the following criteria - usability, accessibility, use of images, quality of text / content and navigation. Highlight sections of the page that you wish to comment upon, and add sticky notes using the Diigo toolbar to record your opinions.
The sites to choose from are:
- Wolverhampton City Learning Centre
- Wolverhampton Wanderers
- BVS Performance Systems
- Tally Ho Uniforms
- Oceanside High School Class of 1960
(added 06/11/07) Here is an image from Diigo showing student comments added to the Tally Ho Uniforms site:
Now
You will choose one of the following (fictional!) organisations, and will design a simple four-page site for them. You will use a template given to you by the CLC for this task. You will change the CSS (stylesheet) for this template to make changes to colours and fonts. Here are the organisations you can choose from:
- The Royal Society for the Protection Of Lemmings
- McDougall’s Fast Food Restaurant - the cheapest food in the West Midlands
- JJC Sports - sports equipment suppliers
Task 2 - Designing a logo
Using Fireworks MX2004 you will design a logo for your chosen company.
Task 3 - Setting up Dreamweaver
You will now set-up Dreamweaver, telling the software whereabouts the files for your site will live. Here is a screencast talking you through the process of setting this up (opens in a new window):
- Setting up a site in Dreamweaver (Jing screencast)
Task 4 - Modifying the stylesheet
The next task is for you to modify the CSS stylesheet for the website. This allows you to achieve a consistent design between pages. Think about the colour combinations you want to use. Try to select three main colours only. Here is a website that may help you:
Task 5 - Adding content
Your final task today is to add content into the pages of the site. Be default, your site has four pages - you can add more as required. You should try to add, as a minimum, the following elements:
- A link to an external website
- 3 new links to internal pages
- At least 3 images
- A table to position an image to the right/left of a block of text
- A mailto: link for an email address
Use Clusty.com to find images to insert into your site.
Tomorrow, you will start to create your own site from scratch . . . .
