As I’m working this week with a group of Year 10 students from Bilston High on a three day web design course, I thought I’d take the opportunity to collect together resources to support the teaching of web design to Key Stage 3/4 students (age 11 - 16).
My approach to teaching web design is basically this:
- The use of Cascading Style Sheets should be encouraged
- Using tables for layout as a starting point is OK (web design purists may argue with me on this one!)
- Focus on clear, simple design, with obvious navigational elements
- It is important to understand the basic principles of html, and to be able to interpret a limited number of html tags
Presentation
This presentation covers the basic principles of web design, including the history of web design
Here is a mindmap of some key discussion points (Open a larger version)
(added 08/11/07) Jing Screencasts
These screencasts were recorded using the Jing Project during the three day project with Bilston High School from 6th - 8th November 2007. They lead you through setting up a site in Dreamweaver, setting up a template, and styling page elements using CSS. The screencasts will open in a new browser window.
- Setting up a site in Dreamweaver
- Setting up template tables - part 1
- Setting up template tables - part 2
- Attaching a stylesheet and making some basic styles
- Editable regions and linking the pages together
- Styling the content area and links in the navbar
- 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
Web-links
Here are a collection of web-links that students may find useful. I have used these sites repeatedly, to illustrate key points in web design.
A good site to show, for all of the wrong reasons. Frankly, the design of this is a disaster. I have no idea whether the company that owns this is still a going concern, but the site has remained unchanged for at least 3 years.
The Wayback Machine is a time traveller through the history of the web. Enter the URL (web adress) for a site and you can see how that site looked at different times in the past. Answer questions like “How did the first version of the Google site look?”.
Here is the BBC site as it looked in 1997.
A slightly risque name for the site, but this is an entertaining look at all that is bad in web design. Visitors to the site submit badly designed sites, and Vince Flanders, the site’s webmaster, selects the “best” (i.e. worst) entries and shares his thoughts on them with the world. Sites that appear range from amateurish efforts from novice web designers to sites for major firms which suffer from usability problems or “Mystery Meat” navigation.
Accessibility to people with disabilities is a key consideration in modern web design. Jaws is a piece of software that reads the screen, so computer users with limited vision can still interact with websites. The full version of the software is very expensive, but a demo version, limited to 40 mins. of use per session, can illustrate some of the issues. Try visiting Frysteel.com (see above) using Jaws . . . . . . silence . . . . . the site is completely written in Flash, so Jaws can’t “read” it.
Web Design Inspiration - a photoset on Flickr
This is a great use for Flickr, collecting together images of superb web designs. Most of the designs are HTML / CSS based, rather than Flash-based.
The CSS Zen Garden is an illustration of the power of CSS to style webpages. Each link on the front page completely restyles the site by only changing the stylesheet i.e. the HTML remains the same. Some very talented artists have worked to create a series of stunning designs.
