Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Intermediate Projects

Most of these projects rely on JavaScript, but none of them requires any server-side computation. (That is, you need to have understood Chapter 7, but not necessarily Chapter 8.) All the sites must have navbars and use clear layout. Use your own choice of colours and make your own decisions about whether to use single or multiple column layouts for each project.

Create an image gallery, similar to the one in Chapter 7, but featuring a larger collection of images. For this project, use a fixed set of at least twenty images – for example, a set of photographs you have taken on a recent trip or at an event. Design a suitable structure for the site which allows a visitor to see any image without having to click on many links, but which does not clutter up each page with an excess of links or thumbnails. Each page should fit in a window that can be displayed on a 1024x768 monitor without scroll bars.

Although a blind person or someone with very little sight will not be able to see the image gallery you must nevertheless provide a clear description of both the purpose of the site and all of the images on it, to enable maximum accessibility. Note that in so doing you also make your images more “visible” to the bots of search engines like Google, and therefore increase potential visitor numbers.

Brochure Site

Create a brochure site for some kind of holiday accommodation, for example, a hotel or guest house, a youth hostel, or a self-catering cottage or chalet. The purpose of the site is to inform the potential visitor about all of the following topics: the nature of the accommodation and any other services provided, the cost (which may vary at different times of year) and methods of booking, any restrictions on times of arrival or departure, the owners/managers of the accommodation and their contact details for enquiries, the local area and its other attractions, how to find the accommodation (this could include a map or details about possible travel arrangements), and any special information relevant to disabled visitors. Try to base this project either on a real example known to you, or at least on a real place you know. This site must include some photographs, and must achieve at least level double-A conformance to WCAG 1.0.

An Improved JavaScript Calculator

Create a version of the repayment calculator application described in Chapter 7 which allows some aspects of the calculation to be specified in a configuration file on the server. For instance, a minimum requirement would be to allow an administrator to record the interest rate in the configuration file, instead of having the rate embedded in the code. Thus, the rate could be changed just by editing the file, without touching the code. JavaScript code in the calculator could fetch the configuration file, using XMLHttpRequest, and extract the interest rate from it. (It would therefore make sense to use XML as the format for the configuration file.)

Other aspects of the calculation, such as the different loan periods available, can also be specified as part of the configuration file. Try to make the calculator as flexible as possible, by putting as much information as you can in the configuration file, and as little as possible in the code.

Stylesheet Switching

In Chapter 7 we showed how to implement a simple stylesheet switcher, and in the exercises we invited you to implement an alternative version. (The answer to that exercise includes a pointer to a widely used style switching script.) Now make use of some version of a switcher to create a Web page or a complete site with switchable stylesheets. If you have done the brochure site project, that site would be a suitable one to start from. If not, build an informative site with relatively simple content around a single theme, for example an interesting place or visitor attraction, a national holiday or festival, or a cause that interests you. Create several alternative stylesheets for the site, which cater to people with different accessibility problems or just different aesthetic senses. Incorporate controls for switching styles in an obvious way that fits in with the design and does not require any explanation. That is, it should be immediately clear to any reasonably experienced visitor to the site that they can change its appearance, and how to do so. Try to make each of your styles visually compatible with the content of your site. For example, if you were creating a site about the work of an emergency service in a war zone it would probably not be appropriate to design a style full of decorative flourishes and festive colours. Similarly, if you are creating a brochure site for a client’s guest house it would not normally be appropriate to use a funereal or gothic style.

To get an idea of the extent to which switching stylesheets can alter the mood and appearance of a Web site, visit the CSS Zen Garden (but note that not all the designs work properly).


Create a multi-page site which advertises or describes a number of products of the same type – e.g. a range of different clothes, books, kitchen utensils, houses, furniture, guitars, etc. – with several pages built from one or more page templates, which provide a uniform appearance to the pages. Each of these pages will be devoted to one instance of your article (for example, one item of clothing) and each should display an image and a description of the article.

If you use Dreamweaver, you will need to use the commands on the Insert>Template Objects sub-menu to add fixed elements and editable regions when you create the template. You can then create pages based on the template and use the commands on the Modify>Templates to update pages if you need to change the template. In a similar way, if you use Nvu, you can create a blank template by selecting the appropriate option in the new file dialogue, and then use the Insert>Templates sub-menu to add editable regions. Once you have created the template, you can make new pages based on it, by selecting A new document based on a template in the new file dialogue. For either program, consult the manual for full details of how to create and use templates.

If you prefer to write all your code by hand, BBedit and TextMate both provide ‘persistent includes’, which can be used to incorporate re-usable elements in the templates that you can use as starting points for new files in those editors. The HTML helper mode for emacs is said to support templates. If you are using any other tools, consult the documentation to see how they implement templates.