Today, I’m working with Year 11 students from Pendeford Business and Enterprise College 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 for the session can be found in the “Web Design Resources” post.
Below are the student instructions for the sessions:
An Introduction to Web Design
Here are the tasks for the day:
Task 1 - Reviewing websites
Review the site based on the following criteria - usability, accessibility, use of images, quality of text / content and navigation. The sites to choose from are:
- Wolverhampton City Learning Centre
- Wolverhampton Wanderers
- BVS Performance Systems
- Tally Ho Uniforms
- Oceanside High School Class of 1960
Now
You will create a portfolio site to hold your media work over the coming year.
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 . . . .
