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

Teaching Notes for Chapter 4

If you are asking your students to answer the Test Questions in this chapter, please draw their attention to the error in the wording of question 7, which should begin "Write a pair of CSS rules..."

Download the end-of-chapter questions. (Zipped plain text files, UTF-8 encoded.)

In contemporary Web design, the material in this chapter is vital: CSS is the means by which visual design ideas are made real on the Web. For a design course in particular, this chapter must be studied in depth. Hopefully, once design students have adjusted to the idea of using a language to specify what they want to achieve, this material will appeal to them, since CSS gives a lot of control over typography, positioning, backgrounds and other central concerns of visual design. We recommend that design students start doing practical work with CSS as soon as possible, so that they can see the results for themselves. For students who have worked in print design, the hardest thing to swallow will be the fact that you cannot specify font families, you can only suggest them, and that most users will only be able to display a limited number of rather dull fonts. We can only sympathize – the inability to use our chosen fonts on Web pages is a source of frustration to many Web designers – but suggest you try to get the students thinking about why things must be so.

If appropriate, it would be possible to jump directly from this chapter to Chapter 10, in order to look at how CSS works in the context of visual communication straight away.

If you omitted tables from Chapter 3, you will need to omit the corresponding section from this chapter. This can be done without loss of any important material.

Computing students will probably not be familiar with some of the concepts in this chapter, such as fonts and the associated terms. Nor is it likely that many computing students will have much of a feel for what works in layout and design. Like most people, they will probably recognize the results of poor design, but they may have a harder time understanding what is wrong and putting it right. Try to get these students to think about the effect that style choices make on how the page is perceived. There is a likelihood that they will just play with CSS the way they might with a programming language, to see what they can do, without being concerned about the result. If students' main interest will be in the server-side aspects of Web development, they need to know the basics of CSS but it may not be necessary for them to be adept at using it for design, as they will probably end up working in situations where the visual aspects of page design are handled by specialists, so the developers only need to know what is possible, not how to do it. Nevertheless, they need to grasp CSS in as much depth as it is introduced here.

Don’t be tempted to simplify matters by just using element, class and id selectors. Contextual selectors are extremely powerful and usually allow styling to be specified while keeping the markup clean and simple, instead of wrapping div and span elements around everything in order to hang the styling on them.

Dreamweaver hides the CSS syntax, while still providing a means of specifying the values for all CSS properties, so here design students might be well served by using Dreamweaver’s CSS Styles palette – although they will still need to be able to write selectors by hand in the New CSS Rule dialogue for the more complicated cases. We recommend creating stylesheet rules in external files.

Validation and Tools

As with XHTML, validating can catch errors in stylesheets and help avoid wasting time trying to find why a rule does not have the expected effect. The W3C provides a CSS validation service that students should use on every stylesheet they create. For Mac users, Xylescope is a useful tool that allows you to see which rules are applied to any element in the page. Dreamweaver's CSS Styles palette's Current tab can be used for the same purpose. For Firefox users, the Web Developer Extension is a well-regarded tool that allows you to examine the CSS applied to a page, among many other functions.

Lorem Ipsum

For students who have never come across it before, you will have to explain about the use of Lorem Ipsum text in some of the examples in this and other chapters. It has long been traditional for designers to use placeholder text written in a sort of garbled Latin when designing pages. Ideally, the frequency of letters in the placeholder text should match that of the language the real text will eventually be written in. By filling the text blocks with such gibberish, it is possible to see how they will appear as visual elements, without being distracted by the meaning of the text. This is a useful traditional design aid when the final text is not available at the design stage.

Browser Quirks

CSS support is where browsers are least satisfactory. In particular, Microsoft Internet Explorer 6 for Windows has incomplete and buggy CSS support. Internet Explorer 7 was released at roughly the time Web Design was published, and has does a much better job of implementing CSS than its predecessor did. Still, IE6 is going to be around for a while, causing headaches and frustration for Web designers. You may choose to ignore it, concentrate on teaching the standards and get your students to use Firefox, on the grounds that by the time they graduate IE6 use will have declined, or you can take the view that as professionals they will have to create sites that work in all popular browsers, and force them to check that their sites work in IE6. We recommend that you keep an eye on browser usage statistics, to determine whether it is necessary to continue to take account of IE6.

In all cases, make sure that a doctype declaration is always included to force IE into strict mode, when it does at least try to implement the standards. The Position is Everything site provides a repository of IE bugs and workrounds for them.

We do not consider it worthwhile taking account of older browsers, such as Netscape 4 and Explorer 5, since the support for CSS in these is terrible, and Explorer updates are automatic by default, so we have not covered using @import to hide stylesheets from old browsers. The method is widely described elsewhere if you really think it is necessary to include it.