Win a copy of the Web Designer's Reference: An Integrated Approach to Web Design with XHTML and CSS
Just in time for the Christmas holidays, those very nice friends of Ed people have kindly provided us with 5 copies of their latest publication; Web Designer's Reference: An Integrated Approach to Web Design with XHTML and CSS, to give away to DMXzone members.
Written by friends of Ed regular Craig Grannell, the Web Designer's Reference promises to deliver accessible, usable, standards based web design insights to those seeking to upgrade their web design knowledge and take on board current approaches, as well as providing a handy reference guide to those currently working with XHTML and CSS.
The book takes the approach of looking at a specific aspect of web page development (such as working with text or obtaining input from a visitor) and examines the XHTML and CSS that can be applied. Practical examples will allow the newcomer to rapidly build up a body of knowledge they can use on site after site.
All you need to do to enter the competition is to read the short extract below from Chapter 5, which is all about creating effective navigation (a slightly longer sample from the book is available for download) and answer the following question:
- In what form is the navigation going to be marked up?
To be in the first DMXzone book draw of 2005, send your answer to this e-mail address before Wednesday 5th January 2005.
Good Luck!
Extract from Web Designer's Reference: An Integrated Approach to Web Design with XHTML and CSS, Craig Grannell, friends of Ed, ISBN 1-59059-430-4, 2004, by kind permission of friends of Ed. Extract taken from Chapter 5: Creating Navigation.
Graphical navigation with rollovers
The final exercise in this chapter concerns navigation with graphical rollovers. The following is a Photoshop mock-up of the navigation bar that we're going to build. (The vertical lines are Photoshop guides, showing the boundary of each button, and are not part of the design.)
By conventional methods, you'd export eight images from Photoshop—two for each link (twelve if you wanted to incorporate an active state). The rollovers would be applied using JavaScript. However, this process has several problems:
- Updating the rollover graphics requires a lot of work, creating and re-exporting up to a dozen new images.
- By default, there is a short pause on the hover and active states while the rollover graphic downloads.
- The hover state and active state pauses can be eradicated by using a preload script, but such scripts often don't work well with all browsers.
- Not everyone surfs the Web with JavaScript turned on.
Instead of using JavaScript, we'll use a little CSS and (drumroll) just one image, which is depicted below.
This image is a single transparent GIF that includes all three link states: link (the default), hover, and active.
(What's depicted is the final image, which should be exported in one piece; this should remain a single image file, and shouldn't be chopped into three different files.) What we can do is use this as a background image for navigation links, and use CSS to display the relevant portion of the image, depending on the link action taking place.
As with the majority of examples in this chapter, the navigation is marked up as an unordered list. No formatting of the links of any kind is required—that's all handled by the CSS. We've again placed the list within a div tag that has an id value of navigation, so we can create CSS rules that apply only to lists within that specific div.
Patrick Woldberg
Working as a developer creating Dreamweaver extensions and designing/programming for the community sites.