POWINSI^ Practical

^n-ROM •CREATE CUSTOMISED TOOLS ViU_nMl » .EXTRACT MEDIA FROMSEARCH SWF FILES
• PHOTOSHOP & CSS VI DEO TUTORIALS

fj- PC AND MAC COMPATIBLE J|

o

elping you build better web^

svealed: 20 musMiave free programs ^
id online tools for authoring, graphics, 1

)ntent management and more M

• Password

protect pages ir

Dreamweavei

.!»

THIS MONTH

U N B E ATA B L E
HOSTING OFFER
T U R N Y O U R D I G I TA L P I C T U R E S I N T O A B E A U T I F U L P H O T O B O O K
1&1, the UK's No.l Web Host, offers comprehensive yet affordable Web Hosting packages. These packages enable both home users and small businesses to create websites, use high-level e-mail, register their own 1 & 1 H O M E PA C K A G E

domain name with anti-spam & virus scanning included. Exclusively from 1&1, every Shared Hosting package comes with a completely free Photo Book which is stylishly designed and created from your uploaded digital images,
(rrp. £54.85).
Best OF the •

^4

.99

£5.86 PER MONTH inc. VAT

.net

INCLUDES 1 FREE .CO.UK DOMAIN The 1 &1 Home Package offers everything you need to create an attractive Internet presence for your family or hobby vi/ebsites. With inclusive domains, e-mail, web space and tonnes of tools, you've got all you need to get started.

A w a r d s

E 0 0 5

1 free .co.uk domain

800 MB web space
300 e-mail accounts

10 GB monthly traffic
Also included

■ Free printed Photo Book ■ New Dynamic Content
■ 1&1 WebsiteBuilder

■ 1&1 Online Photo Gallery ■ 5 Symantec® Virus Scans ■ Spam filtering for all accounts ■ 24/7 Express Support
... and much more.

free photo book
With all 1&1 shared
'"''wL-is HUB 0. mpa.,«

o fe re n d s2 9 "A u g u s t2 0 0 5
For more information please visit www.1and1.co.uk

www.1and1.co.uk
0 8 7 0 2 4 11 2 4 7

1&1

Welcome
o

Practical

Helping you build better websites

Welcome.
O c q u n r igh tes s k lio tc r e a e t
talents to their fullest.

Our promise
We're dedicated to bringing you the best magazine

awe-inspiring websites is vital,

but without the right tools in your web design arsenal, you're never going to be able to display your design

Community
Get involved-this

is your magazine We're not just here to show you how to build great sites - we want to see what you can do, too. As part of our dedication to community, we feature sections where we print your sites for all to enjoy

With this in mind, we've brought you a selection of the best design tools for both the Mac and PC, and we've even put them on the CD for you. Elsewhere in this issue, you'll find our usual generous selection of great CSS, Flash, Dreamweaver and PHP tutorials to get your
teeth into.

Finally, it's time for a couple of goodbyes. Firstly, Practical Web Design's Art Editor Chris Bates is moving over to .net magazine (www.netmag.co.uk). Having done a brilliant job

of redesigning Practical Web Design at the start of the year,
Chris will be wielding his Crayons of Power on behalf of the .net community. And the last goodbye, well, that belongs to yours truly Having had a great time relaunching Practical Web Design, I'll be joining Chris on .net as Editor. We'd both like to take this last opportunity to thank you for your continued support over the last 10 months. It's been
a blast... O

instruction
Bringing you the best projects, by the best At Practical Web Design, we appreciate that there's a lot to learn to become an expert in web design, so we ensure that our tutorials are written by the best
designers out there.

Inspiration
Helping you take the next step in design Editor clan.oliver@futurenet.co.uk By showcasing the very best sites, and by picking the brains of the best web designers, we hope to inspire
you to create better websites.

Craig Grannell
Craig's love for CSS is unconditional, unless he's talking about conditional

Gary Marshall
As usual, Gary's nose for a good news

comments, that is (page 60)

story has come up trumps, though the
smell is bloomin' horrendous!

Karl Hodge
For this issue's feature on open source web tools, Karl blagged loads of free
software, Erm ...

Rachel Andrew
what Rachel doesn't know about CSS

Keep up to date with the magazine at www,pwdmagxo.uk

isn't a surreal bag of those melt-in-

the-mouth flying saucer things.

Practical Web Design 3

Contents
The best place to find the latest regulars, tutorials, resources and features in your favourite magazine
On the cover
A quick guide to this month's cover
ROM >CR(ATICL»STOMIS{C>S €ARCHTOOLS nwivi ^ .ixTRAaMUMHIOMSW^ MU5

SUBSCRIBE...
TURN TO PAGE 47 A N D S AV E 3 5 % O F F THE COVER PRICE

Build your site ^

forfree! tf

^CSS
'VTOOCS I QtXSIlONSANSWEKD I

Make money now! p78
With Zen Cart and a little PHP magic, you could be

making a fortune by selling stuff on your website

Better tables with CSS p72
Transform your HTML tables into something with a little more pizzazz with the power of CSS

Password protection p50
Use Dreamweaver to password-protect your website from prying eyes

i i M

Load images with Flash p66
How to load content into a Flash movie, with

progress reports for added interactivity

This month p8
Is video really choking the Internet, or are ISPs looking for an excuse to make more money?

In just a little over half an hour, you could be the proud producer of a perfect podcast

Perfect podcasts p56

Internet TV p84
Software for video editing and encoding, and even a

complete publishing system that costs you nothing Our expert gives another reader's site the makeover
treatment and shows how to create a great logo

Improve your site p27

We reveal 20 of

4 Practical Web Design

Contents Summer 2006
c

Features
Where we let web design loose on the masses

Tutorials
The best projects, from the best designers

27 Reader's site makeover A boys' toys hobbyist site receives treatment 34 Cover feature The web designer's open source toolkit 40 Site build-off
I Ml I

iw

Access Denied

50 Password-protect pages
with Dreamweaver
Protect sensitive web pages from prying eyes

Four top designers get to grips with listings
TIMMBMMMMWBMWr

These are the bits you get every month

Regulars
5 Letters

Sort out your podcastwith
PodServe
Set up and publicize a podcast feed without stretching bandwidth

The cost of enhanced email services

3 This month Are ISPs increasing prices

because of video?

O

Ta b l e s

for

data

_

<

60 Use conditional comments
witness
Clean up your CSS by separating out the hacks

)Co»bK' UlCooUes' :f;iFornH* tmogM* Olnfo

12 Site challenge The competition among readers is hotting up
AntOlFranco LiRI« RasCc Casfle

13 Ask the experts

Semltonic Fe«4lng Strangely Rne Tfiaa Otimore -me LIpttlcK Consplracie*

gg Load images dynamically
with Flash
How to load content into a Flash movie

Advice on image editing, CSS and DOM

72
An opportunity to get 35% off the cover price

; With free delivery to your door

65 Overseas subscriptions
an issue? Find it here

72 Design attractive data
tables in CSS
Tr a n s f o r m H T M L t a b l e s i n t o u s a b l e f e a t u r e s

I 111 Back issues
f'. Missed

114 Next month Is your website as accessible

78 Sell from your site with
Zen Cart
as it should be?

Create a PHP-powered shopping cart

aaBWMMWM«MMMiW ' I HI II I mill IIII III I III llimi III

Resource
Everything you need, in one handy place

34 Software reviews A selection of video software under scrutiny 33 Book reviews New books about DOM scripting, Ajax and CSS 9 3 The e nvy best-designed
sites from around the world

FREE!
Subscribe to our

On your
We've got software, tutorial | Software
and Search Engine Studio

podcasts for free! Every two weeks,
we broadcast fresh

CD^'^ ,
V

files, and great video training! I
Full versions of Flash Decompiler ^
60 minutes of video
Sort out your navigation with Photoshop, ^
and improve your know/ledge of CSS

9 8 Two full programs, plus video tutorials 102 Builder's bookmarks A handy list of over 140 web design sites 108 Hosting If you're looking for a web host, start here
112 Glossary
Helpful A-Z reference for web building jargon

news, reviews, tips and features p32

Great podcasts
Links to our latest free audio editions

Tutorial files
Code and resources to help you complete every project

Practical Web Design 5

Practical

Helping you build great websites

This is the he page page where you get your our ch chance
to wax lyrical lyrical ab about pretty much anyth
Cover controversy

Letters
O v e 'e r y a lle n o jy e de ra d n igy o u r
magazine over the past year, but I
think the cover is getting more and

WRITE

AND

If you have any thoughts about the magazine, what you'd like us to cover, or how we could improve it, drop us an email, or even a letter, to; Letters, Practical Web Design, Future Publishing, 30 Monmouth St, Bath BA1 2BW

WIN!

pwdletters@futurenet.co.uk
Invaluable tips and pointers every Issue (It's on page 27 this month).

Where do I start?

• Sure It's a sexy

more ridiculous. Why do we have to have a
woman on the front of every cover who pouts at us over her laptop? It's not quite soft porn, but I haven't bought the magazine for staring
at beautiful women. I'm a married man and

O v e rh tep a s ts e v e a rly e a s r v ,e 'I b t u li
up my company website, www. spruceindustrles.com, from strictly
Informative to a full-blown ecommerce site. I've

Skip adtro?

laptop, but soft pom's
a bit strong isn't it?!

been hard pressed to get better positioning on
the various search engines, but I do understand

that this takes patience and a lot of tweaking of keywords. I'm more concerned that I started
updating the site so long ago that the look and ' feel might be outdated. I tried not to do anything too fancy because 1 wanted it to be compatible with all the different browsers. In your expert opinion, should I update the look and feel? Do you have suggestions as to what I

o
^1^

've been reading PWD for about seven I months and look forward to each new
i issue. : It's been a great tool for me as

far as increasing my knowledge and skill. Also, the new CD packaging is great, and I can

find the covers of the magazine unhelpful. My wife doesn't like them either. I had to get a big marker pen over the last cover! OK, maybe I'm alone In thinking this, but could we please have

understand your choice of cover images (using a model for consistency). I have to say, though, that I was annoyed with the 16-page advert for 1&1 in the August Issue. I know you have to
pay the bills, but it was rather tedious thumbing through all the pages of this ad to get to the rest of the excellent content in the

a change from the 'beautiful woman' cover
from time to time? On another note, please do

carry on with Paul Boag's podcast - I find it
really informative and a great addition to the magazine. Ian A Gray As a rule, covers with beautiful
women attract the attention of

should start with: navigation, graphics or type?
; Daniel Josephs Personally, we'd always start with the site structure, which then naturally decides your navigation. If you have a simple structure, a straightforward links bar will do the job, while a complex architecture may require tabs or

mag. Can you split the ad up across the mag
instead, or just move it to the end with ail the other ads? That way, we can get on with grabbing the info that we purchase PWD for.
Winston Oubidad

casual readers (of both sexes!) far

more than other Images do. Also,
the model covers are well established

pop-up submenus and so on. Combine your
navigation requirements with your corporate identity (logo, corporate colour palette and so I on) and you've got your basic look and feel

How could you not be fascinated by the details of l&l's hosting packages? But thanks for your comments anyway Anyone else have any opinions? We'd like to reassure you that those
16 pages were in addition to our usual ' page count and none of our normal content
was sacrificed.

as a style for the magazine, which helps regular readers recognise It on the newsstands, but that's not to say It can't be changed If
there's a reason to do so. Tell us what you think!

right there. As for the details, our regular
Makeover section will provide you with

K
It's not a tax

TOi

[H®
Doug Carr

I J

S i

STAR PRIZE!
! «■

delivery; rather, it's an opportunity to upgrade your

IVI

yVMJfe

imal

O o u rm a g a n z i e s iw o h t re v e y rp e n n y .

However, I was disappointed to see your short article on DearAOL, a website that is

delivery for a small fee. With phishing and spam so J who cares if that heFding Is nonsense? Y ou've prevalent in the email industry , I'm surprised that folk ^ just bagged yourself this COOl calibration tool
are fighting this enhancement to email.

pushing misinformation. [We reported in PWD28 on
the petition at wvvw2.dearAOL.com/letter against AOL's proposal to charge businesses for 'premium'

We're not opposed to enhancements, just sceptical about the long-term Implications of 'tiered' email

email delivery.] I would recommend that you fully investigate and disclose both sides of an argument before pushing a one-sided message to the public. I'm employed by ExactTarget (www.exacttarget.
com), a proponent of this solution, but this solution is not a tax at all; a tax would have implications across all emails sent. This does no such thing. A comparison would be sending a package by regular mail vs

services. If AGL profits from providing a 'premium'
service, this gives it an incentive to entice customers to use that service and a disincentive to improve any
other services. We're also concerned that AOL's scheme

Isn't In users' interest. If mass marketers can bypass AOL's spam filters by paying to do so, this doesn't mean I'll receive less spam, but AOL stands to make

overnight freight. There's no 'degrading' of your

money when I do. What do other readers think? O

V
6 Practical Web Design

M 1 0 5
(for e-mail users)
IGb bandwidth

H 2 5
(for home users)
2.5Gb bandwidth

P 5 5
(for professionals)
5Gb bandwidth

R 2 5
(for resellers)
lOGb bandwidth

128Mb webspace
Centos 4.3 Plesk Control Panel 10 mailboxes POP3/IMAP4 access Webmail included

512Mb webspace
Centos 4.3 Plesk Control Panel 10 mailboxes POP3/IMAP4 access Webmail included

1Gb webspace
Centos 4.3 Plesk Control Panel

1Gb webspace
Centos 4.3 Plesk Control Panel

Multi-site (up to 3 sites)
25 mailboxes POP3/IMAP4 access

Manage 10 domains
100 mailboxes

Spam protection PHP, Peri, & Python
25 databases Un'ltd sub-domains

Spam protection Auto-responders Mailman mailing list
Un'ltd aliases & redirects

Spam protection CGI, PHP, Peri & Python SSH & SCP support MySQiyPostgreSQL DB Sub-domain support

Spam protection CGI, PHP, Perl, Python To m c a t s u p p o r t e d MySQU/PostgreSOL DBs Secure site support

Un'ltd auto-responders Secure site support

Frontpage extensions

just

'1.05

just

1.65

from

'2.90

:

1

from

'6.45

r e g i s t e r y o u r d o m a i n t o d a y. . .
•com, .co.uk,
•eu

.net,

.org,

.us,

.info,

.biz, .org.uk

.name

£7.25 £10.75
£14.95

.me.uk,

c
set your

free
. ^yisit us , , call us free on

jaDwebsolutions.co.uk osoo 043 0 b3

©2006. Prices include VAT (unless marked t) & are per month for hosting packages, or per year for domains (unless mari^ed t, which are for two years). Prices marlced • or t are rxjt available on nv>nth!y contracts (prices show are an approximate equivalent for comparison). See our website for more details. All major CreditA3et«t Cards & PayPal welcome. T&C Apply. e&OE

all hosting plans come with a 28-day money-back guarantee

This month
Keep on top of the latest web design happenings with our roundup of all the relevant news, views and schmooze

•Killer
ISPs claim video is choking

tiie Internet, but are they exaggerating the problenn so they can increase prices?

O a r m S a r 'tW a s rK d o 't i
video, and the most talked-about
sites are video services such as Yo u T u b e . B u t t e l e c o m s fi r m s

angry Japanese commuters,
some of the most talkedabout online content is

are warning that the demand for video could bring the net to its knees.
US firms Verizon, BellSouth, AT&T and their CNN's Tim Folger (wvvw.cnn.eom/2006/TECH/ internet/05/25/the.web.toll), the firms "want household watches TV each day - Kafka claims that the cost rockets to $112 (£51) per person per month. Internet video still represents a tiny

rivals are lobbying the US Congress to block proposed new Internet legislation. According to

to charge websites for the speedy delivery of
streaming video, television, movies and other

high-bandwidth data to their customers" - but
Congress may pass legislation to stop what

percentage of online traffic, but even if usage
grows, it seems that Kafka is being alarmist:

Folger describes as "a two-tiered Internet, with
a fast lane for websites able to afford it and a

his own figures indicate that five TV-quality downloads per person per month - which is
much more than the current average - would

slow lane for everyone else."

Jtl

©

Rising bandwidth bills are clearly a concern, not just in the US but in the UK, too. Verizon lobbyist Tom Tauke says: "The plain truth is that
today's backbone networks simply do not have the capacity to deliver all that customers

boost ISPs' monthly bandwidth bills to around
$4.50 (£2.45), which is still a fraction of what they charge consumers. The Inquirer (www. theinquirer.net/?article=31700) agrees, arguing: "US comms companies have been massively overcharging for ages, and fear that video telly
w i l l b u t c h e r t h e i r c a s h c o w. "

expect." Bellsouth chief architect Henry Kafka claims that typical Internet access of around 2GB a month currently costs the firm about $1 (55p) per person per month, with the rest of the fee used for marketing, support and other costs. But
if people watch eight hours of Internet video

Could a two-tier Internet happen here? It

already exists: some ISPs already limit or block P2P usage, and most cheap broadband packages have monthly data transfer limits. As more of us
turn to online video sites, the amount of data we transfer will also increase - and if your broadband is capped, that could mean a nasty

per day - the same amount of time that a US • The growing availability of video in services
such as the iTunes Music Store is placing a growing burden on Internet connections

and expensive surprise. O

8 Practical Web Design

This month Summer 200^
- c

Retail therapy
Actinic unveils its designer-friendly new direction

Smllllon
domains registered as of May 2006. The
five millionth was

Ajax-tastic
Adobe offers Ajax
tools for free

O h ek w n o lw e lne c o m m e c e rm fi r
brand new product aimed squarely at site
system, the new Actinic Designer enables the necessary software to take care of their business without mucking up your

related product listings, best-seller listings, email marketing and Amazon-style 'also

hosepipebanbuster.co.uk
(Source: Nominet)

Actinic Is making big changes to its
online store applications, with a

bought' listings. Catalog 8 will cost £379 and
s h o u l d b e a v a i l a b l e t h i s s u m m e r. V i s i t w w w.

designers. Instead of a one-size-fits-all shop designers to create sites in Dreamweaver, add ecommerce features and provide clients with

actinic.co.uk for more details. O

O h e a e t l s tfi m ro ta c m lb e ra b o a d rh t e
Web 2.0 bandwagon is Adobe,

whose Spry framework for Ajax is

available for free download from http;//labs.

adobe.com/technologies/spry. Spry is a JavaScript library for designers that enables you
to use XML data in HTML pages. Because it's written in JavaScript, you can use it in almost any web editor, not just Adobe's own GoLive
and Dreamweaver tools. It's the result of

masterpiece. Designer will cost £350, and client licences for the shop software (which can be

discussions with web designers in which Adobe

co-branded with your own logo) will be £200 for Catalog Client and £450 for Business Client.
In addition to Its Designer product. Actinic has also revamped its Catalog shop-in-a-box. New point-and-click design features make it much easier to change the design of your site, while added shop features include new and • Actinic has completely revamped its product range to give designers more control

found that people wanted to experiment with
Ajax, but weren't sure how to get started. Adobe promises that Spry is "easy to

?| eo

implement for users with basic knowledge of HTML, CSS and JavaScript", that "markup is simple" and "JavaScript is minimal". It's provided a range of documentation, how-to

II II

go) OS

guides and example applications, including an
RSS reader, a photo gallery and an interactive product table.

Hack attack
Turkish hacker pulls off the biggest site attack in the world

Although you can download Spry now,
Adobe isn't finished with it. The version

currently available is a preview build, and Adobe is asking for your feedback to help

O n u s jto n ed a y ,aT s u h k r ih a c k e rw h o
calls himself Iskorpitx managed to
deface a number of websites in a

it continue development. O

single attempt - and when we say 'number', we
mean 21,549. Iskorpitx first appeared on the hacking scene in 2003 and was the first Turkish site-defacer, wreaking havoc on some 117,000
sites between 2003 and 2006.

IQ £

However, he outdid himself with his latest

effort, which used an ASP script to replace his targets' front pages. You can find out how he
did it - and whether your own website is

vulnerable to similar hacks - at vvww.zoneh.org/
news/read/id=206009. O

• This is the result of Iskorpitx's mass defacement. It doesn't really seem to be worth the effort

CO E I

p £ a

i i • Adobe's Spry framework is designed to make Ajax easy. The firm's also provided handy demos

I Celebrate the web's most creative time-wasters

^ BUS UNCLE
remonstrating
- with a bus

LAPTOP REVENGE www.amirtofangsazan.blogspot.com ; If you're selling a laptop on eBay, you might want to get rid of the foot fetish pics,
dodgy porn and frankly creepy camera phone
shots of women's

TIME TO SHINE
www.time-to-shine.com

nMtube.com/watch?v=RSHziqJWYcM " This year's 'All Your Base' - a clip of an angry man

This month's footy-themed viral comes courtesy
of Finish, Vanish,

■ passenger. It's spawned
7 ■ remixes and even an online

Cillit Bang,
Calgon and Air Wick, and it's a dull kicker. Why
can't we kick

T-shirt shop. All . together now; too loudly! 1

legs first - or see them appear
online here.

Cillit Bang's Barry
Scott around instead?

Practical Web Design 9

This month Summer 2006

Incoming InDesign

r&

It's looking good, but you can't get it until 2007

with...
Jakob Nielsen

This month

and Hoa Loranger

G e rv a i e tS e u ti 3 s i n t'd u eo u tu l n it
2007, but that hasn't stopped Adobe from offering a sneal< peeic
at its sweet suite. The firm has offered a

-A f Liquid Light (www.liquidlight.co.uk)
M ▲ 6

glimpse of publishing package InDesign CS3's new features, and ifs impressive stuff. There

Prioritizing We b U s a b i l i t y

Finn Taylor co-founded Liquid Light (www.liquidliglit.co.uk) in the days before Internet Explorer, and launched MSN Europe. His client list is a who's who of business, from snnall but nimble operations to giant multinationals such as BT, IBM and EMI

are Photoshop-style effects for objects, vastly improved control over transparencies and the ability to work with multiple objects at once. If you're on a Mac, you'll be pleased to know that InDesign and the rest of the suite will be
Universal Binary, which means they'll run on
both Intel Macs and older PowerPC models.

Prioritizing Web Usability
Jakob Nielsen The usability guru
returns with 400

QY o u r e 'a n o n it e dK n i go ft h eI n t e r n e t .
What design crimes get people placed in the dungeons?

Finn says... Here are a few: gratuitous use of Flash and long Flash intro sequences that get in the way of actually finding the content you're looking for; making text too small to
read - yes, all designers, including myself, are guilty of this one, but if I wanted to squint I'd

CS3 is an important release for Adobe, as It's

the first version of the package since it acquired
Macromedia. But why has the firm spilled the beans on InDesign so early? We suspect it's a

pages of provocative design advice, although Amazon won't let you see
Inside the book on its

site. Why? Because the
whole volume is

sit further away from the screen; and using
tables to build a site after 2003. Get with

.Finn Taylor says Liquid Light started in the days when "interactive design was about creating CD-ROMs to send by post"

spoiler: Adobe just happened to unveil InDesign
the week before its arch rival QuarkXPress 7 went on sale. Keep an eye on wvvw.adobe.com

printed in 2pt Wme green type on a bright ( red background. No, ^ not r e a l l y. f

proper CSS layouts!

for developments. O

Q W e b2 0 .:s i tih tes a m eo d lw e bw h ti
nicer typography? Finn says... Web 2.0 is far more than some

nice typography. However, it's probably one
of the most misrepresented terms. I would

Q D oy o uh a v ea n yn u g g e s to fh a r d these simple lessons that I'd suggest you commit to memory:

earned wisdom you'd lil<e to share?

Finn says... A lot of people seem to overlook

Picture tiiis
IVlicrosoft unveils a

loosely define Web 2.0 as being about the replacement of desktop applications with
web-based applications - tools like Flickr, Writely, Meebo, Odeo, MSN Live, BaseCamp and Netvibes are good examples.

a) Remember, design is there to communicate brand and a message. As designers, we should remember we are not trying to show off our

potential JPEG killer

c - n
Under the Iron Sea
Keane
T h e Te s c o - Va l u e

design prowess. An interface should not
overshadow the content.

O a n c ya o o lka tF o r n P ta g s e '

replacement? Microsoft has released Community Preview 1 of Expression

Web Designer, which you can download for
free (it's unfinished software, so you do so

Coldplay have a new

Q D oa n yc u r e n tw e br e tn d sm a k e
standards-compliant HTML with table-less layouts is great. Blogs are very cool - it's

at your own risk). EWD promises to build
standards-compliant sites using CSS and XHTML, and it runs on Windows XP SP2,
Windows Server 2003 and Windows Vista.
I

album, and we hope they spent more money In the studio than they did on the
artwork. It'll sell

you do a happy dance? Finn says... The happy dance? I'm not sure I would go that far, but I think the push for

b) Never underestimate a client's sense of bad taste. Never show a design you're not happy with, because that will be the one that they'll probably choose, c) Always keep a sense of humour Web design can be a thankless task, where only your
mistakes are remembered.

squllllons, of course. i

always great to see all the wackos out there and podcasts are great.

d) Always over-deliver.
MMv-ptMh vtmon

In addition to its web designer program, Microsoft has unveiled a rival to the JPEG file format, called Windows Media Photo (WMP).

It's technically impressive, offering much better quality than JPEG when images are compressed, but technological superiority doesn't necessarily
mean much in the wider world. If it did, we'd

LandSecurities
RetaMeri undersUnd customer) - W« understand retailers
H o m e

I

I

.-1

l^lkObiKt

Existing Centres
Gentret

Samsung
Q30-SSD
Yes, it's a laptop, but
this Is no ordinary

have dumped JPEG for JPEG2000 years ago. O

Recaliosrta

ftOire R«t«) t)ev»iopments Opportirtoei NewsB^tedU About T«fk CMreet ij>cator About und Sccuntio RetatI Parks

portable computer.
With 32G8 of flash

memory instead of a
traditional hard disk, the Q30-5SD reads
data 300% faster than traditional diskbased machines. It's

ContictUs

Wewstetter

also largely shockproof, ultra-light and spooklly silent - but
for now, it's only
available in South Korea. Bah.
Suteotehcre

Comtn.rci.l L.ifi

Cod. of Pr.ctic.

•Microsoft in compliance shocker; Expression Web

Designer creates standards-friendly sites using CSS

\.Liquid Light builds complex sites for small businesses, multinationals and FTSE 100 firms

10 Practical Web Design

This month Summer 200^
c

WORD
The tastiest titbits of net news
Saying 'Web 2.0' could be dangerous: when the IT@Cork site publicised Its Web 2.0 conference. It received a nastygram from O'Reilly Publishing and CMP Media's lawyers. CMP has registered Web 2.0 as a trademark, which means that nobody else can use
i t . T h e r e a c t i o n ? Te c h C r u n c h ' s M i c h a e l

Crunch t
TrAdemarkScandat

next is lots of cash for us, because we're going to trademark 'Web 3.0'. Mwah
hah hah.

• Michael Arrlngton of TechCrunch predicts
that "a lynching is about to appear In the

•Sarky industry blog Valleywag is doing its

Ryan Block of Engadget has been in a bit of a fracas, too. It's all rather messy:
Block attended a Microsoft media meet,

best to wind up Engadget's Ryan Block after
he asked a rival to remove video footage breastfeeding women on LiveJournal,

blogosphere" over Web 2.0 usage
Gear Live. Block emailed Edwards to say

which was filmed by Andru Edwards and the footage posted on rival site

that he hadn't "consented to being filmed ... and would appreciate being
removed and not named", and Block's

and user Arianamama's default profile
pic is a shot of her breastfeeding her baby - a shot that LiveJournal's onthe-ball abuse team reckons breaks the

Arrlngton said: "I sense that a lynching Is about to occur In the blogosphere, and
Tim O'Reilly Is going to be the person lynched. Bloggers aren't going to trouble
themselves with the fact that this letter

boss Jason Calcanis weighed In; "Why

Is from CMP, not O'Reilly." Elsewhere the move was described as a "scandal", with

Valleywag.com dubbing the whole thing
a "shitstorm".

B

would you run that video without our consent?" The fight made its way to

rules. The Boob Nazis are having none of It though, and they're preparing to pack up and leave LiveJournal; the L) abuse team has apologised, although it's still adamant that the default pic must be changed. The Boob Nazis have dubbed

m
" Z ' L -

Digg.com, at which point (according to
Valleywag), Block suggested his fellow

bloggers anti-Digg the story to make It disappear - or as Valleywag put it: "Help
Ryan Block hush up a story." Oh dear.

the whole sorry affair 'Nipplegate' - but unlike us, they're far too nice to suggest that the U abuse team is simply making
a tit of itself. O

Never mind, though: one of the topics at this year's Web 2.0 conference was "Defining Web 3.0: What's Next?" What's

For us, though, the big story this •The LiveJournal team is dealing with "Nipplegate" after It upset breastfeeders
month was about Nazis: Boob Nazis, to be precise. The Boob Nazis are pro-

WEB HOSTING
F E AT U R E R I C H PA C K A G E S
storage Space
2 5 0 M B 5 2 G B 5 0 0 M B 1 0 2 0 0 0 M B 1 0 0 3 0 0 0 M B 2 0 0 3 0 G B 5 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ 2 0 0 0 M B 2 0 0 2 0 G B 1 0 Unlimited* Unlimited* 3 0 G B 5 0 ✓ ✓ ✓

FREE SET UP - NO CONTRACT FREE DOMAIN NAME* F R E E A D VA N C E D W E B T O O L S

POP3 Email Accounts

Monthly Bandwidth MySQL Databases
SSL Certificate

5GB
2 ✓ ✓ ✓ ✓

20GB

✓ ✓ ✓ ✓
✓ ✓ ✓ ✓

PHP & ASP (Chitllsoft) FrontPage Extensions
E-commerce Software V i r u s & S PA M F i l t e r s Powerful Webmail
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

Auto Responders
Control Panel Network Monitoring
Visitor Statistics

Snio^
^
✓ ✓ ✓

per month All-inclusive pricing includes: ✓ Comprehensive control panel ✓ FREE expert advice and support
✓ Powerful web based email


✓ ✓ ✓ ✓ ✓

CGI Perl, SSI

Firewall Security FREE Web Tools & Scripts
SMTP Server

Daily Backups

perMonth £4.99 £7.99 £15^ £18^ £19,39 £39.99
Pay Per Annum £49.99 £89.99 £169.99 £199.99 £229.99 £459.99 Pay 2 Years SAVE 15% £89.99 £159.99 £319.99 £379.99 £379.99 £899.99

z c X

8

Mffp'

f

BROADBAND inc VAT per month
D O M A I N
R E G I S T R AT I O N

v v w w. n a m e s . c o . u k | s a l e s @ n a m e s . c o . u l i
Call us on

£4 99
per annum

s

w

4 NAMESCQ
A WORLD A PA RT

Sffer applies to co.uk, .me.uk arid brg.uk domains only. 'Subject to availability and compatability of BT line onnection fee. maximum 3p per minute within the UK from a BT landhne Other rtetwofk call rales may var 38ter WR3 7GD. Pnces quoted exclude VAT at 17.5%. Cheques and major credit/debit cards accepl«

As part of our Site Challenge, we've teamed up with Fasthosts to provide some cracking prizes. Entering the Site Challenge is simple: send us your URL, we'll tell you what we think, and you'll be in with a chance of winning one of two fantastic prizes.

Monthly prize

The BIG prize
At the end of 2006, we'll present prizes to the top 20 websites, with the number one site bagging a fantastic PC and hosting combo. The winner will not only achieve the plaudits and respect of their peers, but will also get their hands on a DS 200 dedicated server for a year (worth £700), with their choice of operating system (Windows or Linux). See www.fasthosts.
co.uk/DedicatedServers/windows2003/ds200

Each month, we'll provide the winner of our 'Reader site of the month' with a professional, shared hosting account for a year (worth £96). With this package, you'll enjoy professional web hosting with the UK's largest web host; your web
site will be hosted in Fasthosts' secure and reliable data centres, with lightning-

fast response times and full redundancy. There are plenty of tools included with the package, and you can find out more by visiting vvww.fasthosts.co.uk/ hosting/windows2003/windowsprofessional. The highest-scoring sites will make it into our Top 20 (see page 17). And as you make improvements, we want you to resubmit your sites so that you can move your way up the chart - hopefully!

for more details. As well as this top hosting
package, the best site will win its owner a high-spec PC.

WORTH

£700

ENTER NOW! Show off your site-building successes here. Well give you feedback, and you could win a prize! Email your site to pwdsite@futurenet.co.uk

12 Practical Web Design

Site challenge in association with
'/ ' -F

? ;- ^i." ^ V' l .
.

The Home of Jon
Name: Jon Haywood
URL:

w w w. t h e h o m e o f j o n . n e t
when designing my personal site, I wanted to
achieve a look that was a

good balance between practical and
creative. I wanted to think a bit

outside the box, but not so much as
to make the site look so esoteric that

it didn't look professional.

Home » Images > Fantasy Gallery

I built all of the images and
planned the layout with Photoshop.

Fa n ta sy Ga l l e ry
This is a gallery for fantasy art! I call it 'fantasy* only because it addresses 'fantastic' ideas - ideas that we normally do not encounter in everyday life. Here is where most of the 'fine art' is located. If anyone would tike a print of a picture I do those as well.

The most challenging thing was using
just XHTML for the structure; the content is separated completely from the display, and all visual elements are

view ; pie 3 Sort by ; | Date added '*^1 Descending tjo ]

handled with CSS. The site provides a way to change style sheets on-the-fly,
so everything looks different, while the content is the same. I'm really pleased with the outcome. Each page

I see the Light spirit of the Void Angel zulu Beastmerter

is straightforward and easy to
navigate, yet fun to look at.

Dragon Elf Polemistis Angkel^ Light From Heaven Banished Angel

WINNER!
★ ★★★★
Angels and Demons
The War

The gallery looks very professional, but Jon's copy remains accessible and down to earth

I

Change your Skin Version jSWJTCH!

Menu

uoouif

[ The Honr>e of Jon - Wctcomc Home

•Jon shares his prolific collection of stuff -

The Home of Jon - Welcome Home
You have reached the personal website which I^ Jon^ call home! Here you'll find all sorts of tilings that I am interested in - hopefully tiiey
will be of interest to others also. The reason this is 'version 2' is

thoughts, images, poems, essays, short stories

^ designverdict
Neatly designed and easy to use - it's hard to

because I had an older site - but I completely re-did it, making it look a little more pro, and added cooler and easier navigation. Ho-yeah! This site keeps evolving - hopefully it's getting better and not worse, =«=) - but I will have ail know, when the site is mature and full-grown, all shall look on in wonder and awe at all its
digital glory!!

fault Jon's site, except that the chrome effect
is starting to loolc quite dated. It sometimes feels a little sterile, which clashes with the personal, warm approach to the content

Note: You can search this site by clicking on the search tab located directly to your left! Also you can know at anytime where you are in ttie site by looking on the navigation bar on the top of the page!

RATINGS
DESIGN USABILITY ACCESSIBILITY CONTENT TO TA L 19/25 22/25 24/25 18/25 83/100.

Such clean design has the potential to feel sterile, but Jon's choice of imagery adds depth and texture

Practical Web Design 13

Site challenge in association with fastnosts

L

Spiritual Wisdom
Name: Alan Misson

URL: www.spiritualwisdom.org.uk
I developed this site with the aim of providing an introduction to the spiritual insights contained In the writings of Emanuel Swedenborg, the 18th century Swedish scientist and theologian. The particular aim of Spiritual Wisdom Is to
offer simple articles to those seeking spiritual insight on life. Thus, the main objective Is

Spiritual Wisdon
There is a universal spirituality which can be expressed in many ways, but this site uses the insights of Emanuel Swedenborg to help explain the meaning of our lives. These words of spiritual wisdom
add to the ancient wisdom

for the site to be open, friendly, nonjudgemental and welcoming, and to cover a wide range of spiritual topics.
I studied computing back in the late 1960s, so this site has been a challenge In

bringing my skills up to date. The site was built using FrontPage, but without any standard layouts. I've also used JavaScript and have recently started to Introduce some Flash. The greatest challenge has been striving to achieve a good search engine ranking
for the homepage and the Individual topic pages.

of the world and are in

harmony with many spiritual insights of the new age.

Spiritual Living

Practical

designverdict

Saaed Scripture Click below to review the key Spiritual Principles underlying
the content of this site.

This site is striking, but not for the right
reasons. Its a dated look and, with a different

Spiritual Principles
Click on any of the rainbow headings to discover more exciting wisdom to help make sense of your life and to support your personal spiritual growth.

navigation on each page, its consistency lies in its inconsistency. The lower pages in the site
s t r u c t u r e w o r k t o g e t h e r, b u t n o n e o f t h e m

seem to belong with the homepage.

RATINGS
DESIGN USABILITY ACCESSIBILITY CONTENT 10/25 10/25 13/25 15/25

T h e H o p e f u l Ye a r E m a n u e t S w e d e n b o r g L i n k s S i t e M a p C o n t a c t V i s i t o r ^ B o o k

Alan's had a lot of fun with his navigation schemes; each page uses a different one. What's missing, however, is consistency

. T O TA L

48/100^

•The rainbow navigation scheme idea works well, though it would be easier to use if the
pictures, rather than the bars, were 'clickable'

Faith Design
Name: Heinrich Ferreira URL: oraphtc
photo

www.faithdesign.co.uk
I created the website as a

w^bfaittxleagn

graphic
photo

portfolio for my digital
artwork. I've used a

hello!
tomytfigitaU

minimalist design so that a visitor's
attention will be focused on the work

faithdesign

and not be distracted by the website. Using scanned imagery was fun; It > From the start, the look of this site is

helped to create a handmade feel to
the site, which was what I was aiming
for The site Itself was built with

playful, minimal and individual

Photoshop and Dreamweaver. I find updating the site very tedious at the moment, so I've been learning how to use Dreamweaver's template system and CSS, which I'll be Implementing In the future to help Improve how the gallery Is viewed.
j l M D
I T T K
t -'--r

Info: Wsbrtte itmfo far Premier Perfbmars. The de«gn wm unu«d
IiiUi;N/A

Heinrich has managed to say everything he needs while pretending to keep his Identity a secret

The web portfolio page is simple, quick and easy to use, and shows the work off realty well, but there are some unexplained missing links

14 Practical Web Design

Site challenge in association with

Viridian Graphics
Name; Dave Rottino

URL: http://viridian-graphics.com
With my Viridian Graphics

website, I basically wanted
people to come and see

everything I have to offer design-wise.
More explicitly, I wanted them to know

clearly what the function and purpose of the site was and to be able to navigate the
site with ease.

My main medium was, and usually is, good or Photoshop, and for coding, I used
Notepad. HTML, JavaScript and a little

Flash were all used at some point throughout the project, too.
Flash was a new tool for me. What I

ultimately set out to do within this site is to make the Flash totally interactive, and make the work pop off the page, but it proved too large a task for me. I suppose what I'm most pleased with is
the overall aesthetic and colour scheme; it's got a real 'back woods' kind of feel.

Find out why we are one of the fastest

freev iftuQlservew the home of free web hosting
> FREE Easy to Use Downloadable Website Builder

growing web hosting providers in the UK

^ FREE Professional Website Templates & Design Tips

^ FREE Flash Tutorials, Detailed FAQ's & Knowledge Base
^ Feature Packed Hosting Packages from £1.50 a month ^ Monthly Prize Draws with 2 Chances to Win an iPOD! ^ £100's Worth of Software Free with every package.

FREE

PERSONAL HOSTING

HOSTING
FROM

^ 24/7 Online Helpdesk, Active Forums & Regular Backups

.00| £1.50 0 ^^ HF R O M _^^
WEBSITE DESIGN
FROM

FOR LIFE I PER MONTH

20,000 Customers

DOMAIN
NAMES
FROM

and Counting!
Join them today:
w w w. f r e e v i r t u a l s e r v e r s . c o m
0871 750 2474
Part of Easy Internet Solutions Ltd

t

0-99
PPRYFAR

0-00
FOR LIFE

All prices exclude VAT - Terms & Conditions Apply

Site challenge in association with fasthosts

Inside Looking Out
Name: Kim Neal U R L : w w w. n i c o l e m a c a n d r e w. c o m My friend Nicole asked if I could develop a site for her. She was producing a short film and wanted an online representation of her worl<. I asked for a list
of links she'd like to include on the site, and she supplied me with all of this
\

Photos

wonderful content, along with CDs full of photos of the production, the cast and crew. My first attempt at the website was aesthetically good, and Nicole was pleased. I later learned about cascading style sheets and XHTML. I immediately wanted to put this knowledge into practice and redesigned Nicole's site the 'correct way'. I constantly ran the code though the validation test at http://valldator.w3.org to check that my coding was OK. Coding that complies with the World Wide Web Consortium standards entitles the website to display the W3C logo. I'm looking forward to learning a lot more about web design, as I'd love to build a career doing something I find so enjoyable.

odesign verdict
Kim has concentrated on getting the important things right, and the resulting site works well. There are a few problems with its rendering in Firefox, and the Photo page is a tad bewildering, but she has presented the information well in an easily accessible format.

R AT I N G S
DESIGN USABILITY ACCESSIBILITY CONTENT 18/25 19/25 17/25 17/25 71/100

•The clean and simple homepage bears its

W3C logo - the mark of an approved site

\\^TAL

There are a lot of images on this page. Putting them into some logical order, or supplying more information, would help visitors to make more sense of them

Be Seen Web Design
Name: Alicia Harper URL: www.beseenwebdesign.com

TBtV I needed a place for my
online portfolio as a web

J rmM designer while I worked
my way through school, and then I wanted to market my site for the search engines, so I would have a
better chance of it showing up in the

Be

Web ami LVvelejiwot

SERP. My website has since become my part-time job. Originally, I never thought I would get any business through my website, but I've done
quite well! I used Dreamweaver 8, Fireworks,
About us...

We are a jmafl Web Desiga Company based in Vancouver. B C. We are dedicated to coanectiDg jrou with your customers affordable web solutions. Be Seen Web Desiga is llie ideal company to 1^ your business start generatmg on-ttne leads and aw««ness for your business teou^ an mtefactrre
and user &iend^ website

Newest Article: How to ohoc$« i wab

design company can b- a daunting task.
Latest Projects: 11w Holistic Co»ch

^ Navigation could do with being more prominent, and made to render consistently across the site

Photoshop 7, Flash 8 and Windows Media Encoder. For languages, I used
CSS and XHTML. I'm now learning JavaScript, which I hope to add soon.

Why you need a w^slte... To make money, vAtf else? A website can connect you wi& customen Nowadays eveiyone and tiieir dog has a website A website connects you wA easing clients, new clients, and potential cbents. It shows them where you are
located, vrtiat you are seSmg and Aey should choose you over your

The biggest challenge of the build was making it visually pleasing, while still packing it full of information. I was really pleased to see it all come together. I was so excited when I watched my page rank change from
zero to four. Also, watching my stats:

con^etitioa "What a yeat opportunity ffyou aren't domg atleast soom ^your business over &e Web. your nussmg out on a huge opportum^ The Web is now a key part of doing business What we can do for you.... We can provide you with a user-friendly, eye-catching and mteractive \4>d«ted website. Ever get lost in ^ confusion of some sites? You can never figure otA where you are or «^ere you need to go to find die mformabon on a website? Well not with us We bke to keep it clean and fresh. We make sure your business wiU BE SEENl For a coiiq>lete list of our services, check out Our
Services p^e.

r^TtsisfkCnMcA

'odesign verdict
The site is both accessible and striking.

The navigation is letting Alicia down a little,
h o w e v e r. I t ' s w e l l - p l a n n e d a n d e a s y t o u s e ,

m
Bambcc B Records

but renders inconsistently. Spelling and grammar mistakes are undermining her image - a shame when they're so easy to fix.

RATINGS
DESIGN USABILITY ACCESSIBILITY CONTENT 19/25 17/25 18/25 17/25

1F1

my number of visitors has already surpassed my goal for the year! •A really strong, fresh, clean homepage enhances the accessible tone of this site

k^TOTAL

71/100^

16 Practical Web Design

Va n i l l a t o w n
Name: Mike Mesa URL: www.vanillatown.com

out of 100

83
81
of

The Home of Jon
Name: Jon Haywood URL: www.thehomeofjon.net

Cleanly designed, easy to use - It's hard to fault Jon's site, except that the chrome effect is starting to look
quite dated. It's also a little sterile.

Va n i l l a t o w n
Name: Mike Mesa

The site looks coo) and conveys the
vitality of the Vanillatown act well.

Building tPiis new site was
a challenge from the very

owl

m

URL: www.vanillatown.com

It's well organised, yet feels endearingly chaotic

start. I had a few goals in mind when I began: firstly, the site had to be usable; the navigation had to be easy enough for anyone to use.
Secondly, the site needed good artistic content. I ended up using a lot of the artistic content I stockpiled in the

' 0i

RandomBMX Name: Andrew Browning
URL: www.randombmx.com

This is a fantastic site; it's well

designed, with some great content, top-notch photography and great Flash video clips. This Finnish backyard-wrestling site has sweet visuals, great design, and Flash video clips.
Brilliant stuff!

Hominidi Wrestling
Name: Jouko Virkkunen

URL: http://hominidl-wrestnng.lnfo

splash page. It's become a graveyard for 'interesting enough' pictures!
For the rest of the site, I used the

MK: mastering
Name: Rob McKenzte Kitchen

The site makes a good job of
conveying the vitality and fun of
Va n i l l a t o w n ' s a c t s

URL: www.mkma$tering.co.uk

This site has a simple design and a simple message. It's a breath of fresh air compared to some of our more confusing entries.
This is a brilliant showcase that

GoLive interface to tal<e care of my
programming. The components in

Brown Bag
Name: Kimberiy McCauley URL: www.brownbagideas.com

GoLive made up the navigation for the site. I used a combination of inline frames, embedded media and CSS to get away with centering the layers in the pages, including the search and displaying the calendar. I'm happy with the results.

presents Kim and Kyle's photography In a colourful, fun
and accessible manner.

Live2nite

This is such a great idea for a site,
and well executed, too. There's a

Nj . .m r e: k www.llve2nite.com Dave . ga Boni t hla e sr &eScott d iBri ngnano o n whol e h e heap a n dof y useful pla content ce. URL:
1^55 Feed PodCatt Subsc

Search j

German Genealogy
Name: Jerry Frank URL: www.sggee.org

ierry has taken the great content
he inherited and created a site that makes it a breeze to access

THE'
b i o
downtoads

and a great resource. Many web designers discount accessibility, but it's good to see that Terry's site passes the W3C priority 1 checklist. This site passes W3C site validation and priority 1 accessibility guidelines. Clean design and thoughtful use of white space. If we lived in Antwerp, we'd join
this club. Like the website, it

shoves
aoents ontv

media
e store

schedule
site lnd«x

BlueDepth
Name: Terry Gooding URL: www.bluedepth.co.uk

Welcome to the V a n i l l a t o w n

Home

of

Astereostudio
C h e c k o u t s o m e o f t h e n e w Tr e a t s Thank you for have stuff
Our Index will

Name; Andrew Clemente
U R L : w w w. a s t e r e o s t u d t o . c o m

stopping In. We (ot of cool new hs(p
aU

a to

Te n n i s c l u b L i n k e r o e v e r

you
new

navigate
Site

Va n i l l a t o w n . c o m .

help you find what you need. If you already know what files you need from Va n i l l a t o w n ,
check out the

F-TOO f

N a m e : J o h a n Va n G r i e k e n URL: www.tclo.be

looks like an accessible, organised
and fun place to be.

Liam Mullone Comedian
Name: liam Mullone

Downloads that's just beginning.

oaee. the

And

out of 100

URL: www.muHone.co.uk

Copy and paste 1$ your friend! Despite little know-how, the site features excellent design and plenty of laughs.
This site has had a fair bit of investment, and it shows. Clean

.1

^ HouseProfessionals
Name: Lee McGarrical

New for Agents
New season, for we the have

the
site.

Ag.n^s
of This

Only
our section

' M I
O f fi c i a t Va n i l l a t o w n M e r c h a n d i s e Yo u heard it here first. Visit the official

URL: www.houseprofesslonals.com

design, good content and clear navigation are all present. served you well. You've created a site that iooks very professional and Inviting. Great stuff! Having a live demo on the front page is not such a good idea, though, when people are
swearing In it.

Urban Address Real Estate That class in web development
Name: Roger Crandall
URL: www.theurbdnaddress.com

section

contains specific

only to

i n f o r m a t i o n

SayBox
Name: Benedict Wilson

'For a well-organised site. It has a surprisingly chaotic feel!

URL: www.saybox.co.uk

"^odesign verdict"^
The site looks cool and does a good job conveying the vitality of the Vanillatown act. fonts and menus are not styled in a way that leads you through the site. Your body copy is
often hard to read, too. It's well-organised, yet it feels chaotic because

My Classes
Name: Jason Leveille

URL: www.my-classes.org Solace
Name: Ian Evans

This Is a really great resource, showcase and point of contact for your students. Navigation Is a little confusing, however.
This is a well-presented site, with

RATINGS
DESIGN USABILITY ACCESSIBILITY CONTENT 19/25 20/25 20/25 22/25

U R L ; w w w. s o l a c e w e b s i t e . c o . u k

some quality content. However, your logo is unfortunately obscured
by your picture.

QuizPuzz
Name: Howard Kovach

Once you're past the homepage,
this site becomes a whole lot of

URL; www.qui2puzz.co.uk

fun - but why wait until then
to start?

•The gallery works really well, but
It's quite slow to load

J O TA L

81/100^

Faith Design
Name: Hetnrich Ferreira

URL: www.www.faithdesign.co.uk Good News Network
. Name: Averan Gale

Very Individual, and the perfect way to show off your work. The only glitches are accessibility and some
browser Inconsistencies.

mSS

URL: www.goodnewsnetwork.org

Clean design, easy navigation and great content. There are some layout glitches, however, and we've penalised you for using templates.

WEB CODING

The

experts
Phil Hoskins

How can I include Chinese characters in my site?
characters on the web, and what software

Q lw a n to tb d u liw e b e t s in ib o h t
Chinese and English. What do I

mUHI Bie_ g*

need in order to publish Chinese

^ ® O ® |[I3http;/A«code!^

"3 OGofl^
(•e(to5ck|5iieMdp|^Mch
Th« Ut^«ocI« Standard
• Start Here • Latest Version • Code Charts

m
• •

Unicode Home Page

will let me type Chinese characters and
New to Unteod*?

As a systems architect and web designer, Phil has designed and
delivered over 3,000 web applications to commercial and public sector organisations.

display them in multiple web browsers?
Mr Phillips

• What is tmicode? HowtoU$ethisSfte FAQ

• Glossary oT Unicode Terms

• Unicode Character Database • Unman Database

Phil Hfiskins says...
You need to start by making sure your pages

Qtncral information • Where is my Character? • Dtsplay Prooiems''
• Useful Resources • Unicode Enabled Products • Mail Usts

are encoded using Unicode. This is achieved
in XHTML by declaring

Q«t InvolvAdl Join Conferences
Som» of Our Mtmborc

• • • • • Donate

K*y Sp«elficatlont Unicode Collation (UCA) Bidirecttonal Aigonthm (Bidl) Normalization (NFC, NFD, Locale Data (CLDR) Script Codes (ISO 15924)

Th*

ConsortliiM

• Who we are

Paul Hoskins

<?xml version="1.0" encoding="UTF-8"?>

Our

Members

To e h o l e a l P u b l i c a t i o n s • Technical Reports & Standards
• Te c h n i c a l Online Notes • D a t a Ta b l e s

• Job Postings (2006.05.10)
• Press Info • Poiictes a Positions

at the start of your web document, or by setting the following metatag in HTI\/IL4:
<meta http-equiv="content-type"
Pa u l i s a se a so n e d

• Contact Us

DEtHl 13^
A n n o u n e « m » n t t

• updates S En'ata Work In Progrts* • Calendar of Meetings • proposals for Public Review
• U n i c o d e Te c h n i c a l C o m m i t t e e

For M*inb«rs Only
• Member Resources

■ Working Documents

AcknoiWkda»d in th» Unicodt Standard 5.0 (2006 05 25} WchoUi Noflfoponf to Giv Koynot« at mC30 (2008 05 00) Tht Unicod» Guid« newav»i!sbi«i (2006 02 28)
UTS »37 l<t»00faphk Va r t a t t o n Databas* now

• UTC Meeting Minutes • Proposed Characters • Submitting Proposals
• C L D R Te c h n i c a l C o m m i t t e e

content="text/html; charset=UTF-8"> Unicode (www.unicode.org) attempts to

designer and web master, working for
one of the software

available (2006 02 02) Public R»v>»v.':

provide as many characters from as many alphabets as possible in one character set. The advantage is that you can easily mix simplified
and traditional Chinese characters.

industry's major

• Unicode is becoming an Important factor when developing localised websites in other languages symbols using a conventional keyboard.
M i c r o s o f t o ff e r o n e a t v w v w. m i c r o s o f t . c o m / windows/ie/ie6/downloads/recommended/

players. He's also a
Photoshop addict.

the 'Install on Demand' option selected under
Tools > Internet Options > Advanced, and Chinese is selected under View > Encoding. Alternatively, grab the international language

To input Chinese characters, you should Alex Haylock
download an Input Method Editor. IMEs allow

you to enter nonstandard characters and

ime/install.mspx. Once installed, change the

H Chinese Bopomofo IME Keyboard Layout - 0!
Alex has been

language to Chinese and start typing! For you to be able to display the pages, you
need a Chinese font installed. Internet Explorer

pack, which will install the fonts for you. Again, this is available from Microsoft at www.
microsoft.eom/technet/prodtechnol/ie/reskit/6/

will take care of this for your users if they have
developing websites
since the mid-1990s. He now works for a

part7/z01 ie6rk.mspx?mfr=true

major IT consultancy

company as an Oracle
and Unix developer.

•An IME provides a method of Inputting
nonstandard characters with a QWERTY keyboard

language to Chinese and start typing I

O n c et h eI M Ei si n s t a le d ,c h a n g et h e^

18 Practical Web Design

Ask the expert!
ft
. r _ . , V- A / l S j j - . - V .

1 _ . ■■^ ■? ? ■" -■

WEB CODING

The differences between markup languages
and XiVIL. Are they the same thing?
Peter Noble </htnnl>

Q m 'l n o te r y a llu po ts p e e dw h ti
I'm a bit confused with XHTIVIL

xhtml 1-transitional.dtd">

XML is a parent language to HTML and also uses tags, but it's more powerful. It has strict

the latest coding languages, and

<html xmlns="http://vvww.w3.org/1999/xhtml"> (Your XHTML page content goes here)

W H O ' S W AT C H I N G ? According to the Connputer Industry
AInnanac, the Worldwide

rules about what types of data can appear between the tags, and the tags provide
additional information about the data

Internet Population in 2005 was approximately
934 million users, and

Paul Hoskins says...
The short answer is no. Essentially, XHTML is a refined version of HTML for presentation, whereas XML is designed for data.
XHTML stands for Extensible HyperText

enclosed. XHTML is effectively an XML
representation of HTML 4.0. If you use XHTML, you're creating HTML documents that are wellformed in terms of XML. Still confused? Check out wvvw.w3c.org for further info.

projections suggest this will increase by 45% to 1.35 billion by 2007. The
UK currently has about
3 3 . 11 m i l l i o n I n t e r n e t u s e r s

The future of web publishing will use XHTML, so if you're starting out in web design, it's a
good idea to learn this new standard.

according to the OA
World Factbook.

Markup Language, and is a stricter and cleaner version of HTML. XHTML 1.0 closely follows the strict rules of XML and is intended to replace HTML in order to force correct coding and
improve the consistency of the markup.

a.

E*

»>«

loot

M

0-*

-

o

a

li

e

0-

^

H

ii

-a
3 0 =

I [III http;//Www.w3.oro/)MLf Gocgfete.

3

6 Bloohn«te- geuntad Architecture
L lAciiyity Statgrngnt

There aren't too many differences between
HTML and XHTML, but the differences are important. You need to remember that tags and attribute names must be lower case, attribute values must be enclosed in quotes,

W5 r domnin Extensible Markup Language (XML)
1. Introduction
2. Working Groups 3. Other Resourcag

and tags must have a closing value. If a tag doesn't have a matching closing tag, a forward
slash is the last character before the '>' in the

4 Conlaot

Neaitv iKML Specifications! and Translations of them introduction Extensible Ivlarkup Language (XML) Is a simple, very flexible text fomnat derived from SGIvIL (ISO 8879) Onglnally designed to meet the challenges of large-scale electronic publishing. X1*(L is also playing an increasingly important role in the exchange of a wide variely of data on ttie Web and elsewhere This page describes the ¥yori< being done at VV3C within the XML Activity, and how it is structured Wori< at VV3C takes place in WbrJtmg Groups. Ttie Working Groups within the XML Activity are listed below. •Visit www.w3c.org for comprehensive information about markup languages

tag (for example, <img src="my_image.jpg" />
or <br />

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3a/DTD XHTML 1 . 0 Tr a n s i t i o n a l / / E N "

"http://wvvw.w3.org/TR/xhtml1/DTD/

tooetherwithlinkstotheirindividualwebDaaes ^

BROWSERS

Browser compatibility with CSS
Firefox or Netscape. After successfully rebuilding
the site for both, I checked on a IVIac and it worlcs

Q v e 'l b e e nd e v e o lp n igam s ip e le t s iu n s ig
in internet Explorer on a PC, but not in
a :

I'm seriously at my wits' end with this! Come back, tables, all is forgiven. Richard Hague

with CSS and the reason why some developers are
still trying to resist using it.

CSS rather than tables. The site was fine

The reason this happens is because CSS is just a
standard, and the actual innplennentation is left to the

Alex Haylock says...
Ahh, the joys of CSS. This is the most frustrating thing

browser developers. Browsers such as Opera and Firefox are very standards-centric and tend to follow closely
with what's prescribed by the W3C. Microsoft tends to

in Safari, but is broken in IE. What's going on?

feel less constrained by standards due to lE's dominance,
^CSSVaBda and often adapts standards to meet its own needs (even extending them with IE-specific properties). While this can create extra features, it does mean that sites don't
m r n t

Cascading Styie Sheets, level 2 revision 1 CSS 2.1 Specification
W3C Drafl 11 2006

always behave as expected between browsers.

So, what can you do about it? First, make sure you
Your Styte ShMt

only use CSS tags that are defined by the W3C, and
validate regularly. Second, make yourself familiar with

J "
■ i t ( c s s } n c s 2 t « « '

the common stumbling blocks. Fortunately, there are
loads of resources on these incompatibilities and how to overcome the problems: www.mezzoblue.com/css/

cribsheet, www.positioniseverythlng.net and
w w w. a r t y p a p e r 5 . c o m / c s s h e l p p i l e / c a t e g o r y. p h p 7 2 While it's tempting to just go back to tables, it's

worth persevering with CSS. It gives you greater •The CSS standards are maintained by the W3C and can be viewed online at www.wB.org/Style/CSS/ttspecs • The W3C also offers a validation tool to check that your
CSS is compliant: http://jlgsaw.w3.org/css-validator

flexibility and scope in terms of design, as well as
future-proofing your site.

Practical Web Design 19

Ask the experts

Adobe GoForth
COLOUR VALUES^ Are you regularly finding colours on other
websites, software -- or

Adobe's acquisition of Macromedia suggests that maybe 1it's the end of the
line 1 for GoLive. Watch

even your desktop - that you want to use in your own designs but can't get the right RGB or HEX
value? If so, this free

to this application now that Adobe has acquired Macromedia, and should I
make the switch to Dreamweaver?

Q lc u e ry n ltu s eG o L v e io tb d u li
and develop websites. Do you know what's going to happen

this space...

download will probably be of interest to you:
www.colorschemercom/

Vincente Rodrigues

Phil H<»skins says...
Following the acquisition, Adobe issued a
statement confirming that it will discontinue Macromedia FreeHand and its own GoLive web

colorpix_info.php. Color
Schemer ColorPix enables

you to point at any pixel on your screen and get the corresponding
numerical value. Nice!

design product. Adobe's marketing department has said that the company would abandon development of
the GoLive application in favour of the popular Dreamweaver. Incidentally, the next release of Dreamweaver is expected to be part of Adobe Creative Suite 3, which is rumoured to

be available early in 2007, and will feature an updated interface to integrate with other applications included in the range.
However, don't panic if you've recently

Suite 3 provides Adobe with an opportunity to produce a refined Dreamweaver release that also caters for GoLive users. In the meantime,

Got a question?
If you have a web-related query, we'll do our best to answer your question within these pages. Simply drop us an email at;

you can download a 30-day trial of
Dreamweaver 8 by visiting vvvvw.adobe.com/ downloads and start practising!

purchased GoLive CS2, as Adobe still plans to continue to support and develop the existing
products based on customers' needs. On the other hand, if you want to stay on

pwdexperts@futurenet.co.uk

top of the game, it will soon be time to put GoLive to bed and get to grips with
Dreamweaver. On the plus side, it shouldn't

Adobe plans to continue to support ^

take long to get up to speed, as the interface is very similar. And the forthcoming Creative

and develop existing products 55 J

WEB CODING

Updating multiple instances of one web page

Q lh a v em e p l it u v le o s r n iso fo n ew e bp a g e .
Is there a way to combine the differences without working through line by line?
Matt Nimmo

Alex Haylock says...
There are plenty of tools out there that take the
headache out of comparing and merging source code files, and I recommend that every developer keeps one

in their toolbox. My preference is WinMerge, which is open source and free to download. Let's take a quick look at its main features and see how it can speed up your web development.

tair4»c<«>

eltr

« >■

j1

oltjr

rMigr

t

j
< « M c r >

Si^WK4kW

^

J

C O M PA R E Y O U R F I L E S
Download and install WinMerge from http://

winmerge.sourceforge.net. During installation, you may be prompted for a 7-zip plug-in. Don't worry about this unless you want archive support. Launch WinMerge and open two files you want to compare.

0

SEE THE DIFFERENCES

Notice that the differences in your files have been highlighted with various colours, which makes it easier to spot changes. You can step through all

0

MERGE YOUR CHANGES

the differences using the vertical arrows on the toolbar.
The active difference is highlighted in red.

To merge a change, right-click on it and select Copy to Left or Copy to Right to update the other file. To transfer all changes from one file to the other, use the icons on the far right of the toolbar.

20 Practical Web Design

No bandwidth bills?
All NEW dedicated servers
B No bandwidth bills
Your own dedicated data line - never receive a bandwidth bill!

Wot?

B Your own private LAN
Set up multiple servers on your own secure private network, in our purpose built UK data centre.

13 Full remote control
Never be locked out - take control of your
dedicated server.

B 24x7 support and service
Experience the difference: UK based dedicated server

• Permanent keyboard, video and mouse control. • Full BIOS configuration access.
• Hardware reset.

experts, with direct access to your hardware.

B Easy to use control panel
Direct control of your account, with OS rebuilds,
additional IP addresses and much more!

• Telnet, SSH,RDC and VNC.

B Unbeatable value
Full range of servers from just £49 per month.

B Instant online setup
Unique: instant deployment infrastructure -

set up as many servers as you need immediately

B Database integration options
• Pre-lnstall MS SQL Server.

• Install your own MS SQL or MySQL database on • Alternatively, integrate with our shared
secure database hosting. your dedicated server.

Find it at Fasthosts

Domain names • Web hosting • Dedicated servers • Exchange 2003 email • Broadband • Reseller solution
Instant online setup at

fasthosts.co.uk/servers
0870 888 3354

Ask the experts

IMAGE EDITING

Affordable alternatives to Photoshop

Q m 'I o lo n k igo frs o m eg a rp h c s i
create and edit JPG, PNG and Photoshop but it's too expensive. Can you recommend any alternatives?
Bruno Rossini

application was specifically designed as a Photoshop alternative and is freely available for creating and manipulating images. It even includes many of the features you would find in a high-end program, such as layers, channels, paths, and a host of painting tools. Early versions of GIMP were clunky and fell well short of Photoshop, However, recent releases have improved greatly. The latest

software tiiat will allow me to

GIF files and create GIF animations. I like

Quick-fire
with... Alex

Paul Hoskins says...
One particular application springs to mind; the unusual-sounding open source favourite,
GIMP, which stands for GNU Image Manipulation Program, distributed under licensing terms defined by the GNU Project. Sometimes referred to as The Gimp, this

version has a revamped user interface, making
the application simpler and more flexible to use and, in turn, a more legitimate player in the world of mainstream image editors. (Install GIMP from this issue's CD, p98), Another option worth checking out is Paint,NET - an image and photo manipulation • Paint,NET - intended as a free replacement for the MS Paint application, it has grown into a powerful tool for photo and image editing

Haylock
Where

Q lw a n to th a v e
should I sUrt?

a crack at using Ruby on Rails.

than £60) are viable options if you're willing
to spend a small amount of cash for a commercial option.

application designed for Windows, Like GIMP,

Wai-man Cheung Try the tutorial at ONLamp (www.onlamp. com/pub/a/onlamp/
2005/01/20/rails.html) to

It includes a

it supports layers and includes a variety of

useful and powerful tools. Download at
w w w. e e c s . w s u . e d u / p a i n t . n e t Some people argue that applications such as GIMP or Paint.NET can't compete with the likes of Adobe Photoshop, With this in mind, Adobe Photoshop Elements 2 and Corel's Paint

variety of useful

get you started in Ruby on Rails development, then buy yourself a copy of 'Agile Web Development with Rails' by Dave
Thomas and David Heinemeier Hansson

anapowerful editing tools

@ fly o uh a v eaw e b e a r e ltdq u e y r ,w ld e lo '
our best to answer your question within these pages. Simply drop us a line at;

55

pwdexperts@futurenet.co.uk

Shop Pro 9 (both of which are available for less

(ISBN: 097669400X) if you find that you like Ruby on
Rails and want to take

things further

Q s lh te e r as p e c a il
method of

finding more
about

information

what technologies
other websites use?

David Travis There is indeed. Check out
wvvw.netcraft.com to

discover more information

about a particular
website, such as the

operating system employed and the webserver it uses, plus how long since it was
last rebooted and its

geographical location.

problem with my favicon.ico. It displays in Firefox but I can't get it to
display in Internet E x p l o r e r. A m I m i s s i n g anything or doing something wrong?

Q h la v ea

Chris Wright Unfortunately, Internet Explorer is designed to display favicons only when a page is
bookmarked, whereas

Firefox will display a favicon when you simply
browse a website (if one

is actually available).

•GIMP is a freely distributed program especially useful for such tasks as photo retouching, image composition and general image manipulation (see p34)

22 Practical Web Design

Professional Web Hosting!
from a host you can trust
V

Starter Plan
Ideal for small web site £19.99/yr
• 400MB UltraFast UK Web Space /
• • • 10 Web Mail Site Web Boxes Statistics Mail /

Manased Dedicated Servers

• Easy to Use Web-Based Control Panel/
/ /

NEW Server Hardware

/

Free upgrade every 12 months
Full Control over server Firewall Protected 2 IP Addresses Instant Reboots

/
/ / / /

• Outgoing (SMTP) Mail Support /
One-off Setup £9.95

Windows 2003 Reseller
Be a reseller without limitations

Plesk 8 Control Panel supporting
UNLIMITED domains
/ / / /

all at a truely flat fee £50/mth
• UNLIMITED Web Space /
• Host Unlimited Domains MX /

Server and Port Monitoring
Your Own Name Servers


ASRPHP&ASPNET
ColdFusion

/
/

• Free Secure Server Space / • UNLIMITED MySQL Databases /
• FREE 5 MS SQL Databases (limited Period) / • Regular Backups /
• No Hidden Costs /

Security Updates Service Level Agreement Assigned Project Manager Additional options include
Stand-by server

/
/

Load Balancing
MS SQL Server From £99.99/mth

Thousands of web sites hosted in our secure data centre based in Nottingham, UK.
Backed by 24/7 friendly in-house expert technical support who are committed and
dedicated to meet and exceed your expectations.

w w w. c w c s . c o . u k

0845 203 1000
info@cwcs.co.uk
MANAGED
Prices Exicude VAT Major Credit Cards Accepted.

HOSTING

WEB CODING

Processing XML data - DOM or SAX?
come across two ways of doing this using either DOIVI or SAX. Which is t h e p r e f e r r e d method to use? Jayne Beresford

Q lu r nas p o s t rw e b e t s ia n d m 'I

folders, subfolders
and files. DOM

trying to create a web application that processes XIVIL data. I've

(Document Object Model) is a treebased parser, and provides you with
an API to access the individual

9

X

[IriSiSS'
i | s 11 ! ii OTOVSdMM

AT h eA g e n c y
RrstName NIki

<7xmi

MUs:xal-'*bt«p://m.«3.»t«/1999/XSb/TEVi«e«D ]
)aliw:K*»'>het9] //wnr.«3. oio/SOOl/MasctMu"

I wc«wiin«

I
I ttuibuu I bwe-uii

Alex Haylock says...
The short answer, Jayne, is that it really depends on what l<ind of XML data you're actually processing. There are two types of parser for XML: tree-based parsers and event-based parsers. A tree-based parser commits your entire XML file into memory and creates a hierarchical tree structure of the content. To picture this, think of a directory tree: you have a hierarchy of

t M

elements within the tree structure. Event-based

SlgMKMiy

Last Mame D«vgood Titio Sptci^ Agent n d « v 9 o o d Q x m l s p y. n

) by
ict «• t* 4oer'UtA9«nt«.»U'')//»9«nt
t«C IB

IC M C
) CMC
1 chii4

I <eiE*t in
ac4«t by
c c c u s n

J eollMlM
e a a * « K u e u « &

parsers, such as SAX (Simple API for XML) reads your XML data as
a stream rather than the entire document in one hit. Each time SAX
comes across a

Phon» 007036 2334 ^ a
CJearance L«ver jTopStcrt
Photo W:

I

rraTi

-

4tcUK«

de*(en««At'Oi'

&

-j Idtntttic

node or data, it reports the event
back for

Sywpsis 11 asset; poised In any opt beNnd the information; ad languages and dialects; ak

processing. This
means that SAX has no awareness

Bwcw!.-*

8'Wa*w-a»

of parent or child elements, unlike DOM, and you can't go back to a node once it has
been read.

larger files because it uses less memory. You should use DOM for processing more complex data - articles or books, for example as you can deal with elements in context of

•Speed up your XML development by using an IDE such as XMLSpy
f r o m w w w. a l t o v a . c o m

If all you want to do is read data and act on •The Microsoft XML parser bundled with Internet Explorer has DOM and SAX capabilities it, then SAX is the best answer It's also quicker and easier to code than DOM, and can handle

the rest of the document and jump between
various elements.

PHOTOSHOP

Replacing colours with Photoshop
useful tips for using this?
Matthew Holt

Q v e 'l n c o e itdaR e p a lc eC o lru fn o c in t
to work properly. Do you have any

Paul Hoskins says...
Photoshop's excellent Replace Color adjustment tool

In the following three-step walkthrough, we'll use our example close-up photograph of some flowers and change the colour of the petals from a subtle pink hue to a more dramatic and visually eye-catching bright blue.

in Photoshop, yet can't seem to get it

offers a quick and efficient method for changing specific colours within a photo or graphic, and will
save you messing around with additional layers.

SELECTING A NEW COLOUR
Go to Image > Adjustments > Replace Color Click in the Image, selecting the colour to

replace, and look for the deepest part of the colour
Adjust the sliders to create the colour you want.

0 E Y E D R O P P N IG

Next, choose the eyedropper with the plus

sign to add to the selection. Tap on any areas of pink to change them to blue. If you click an area you didn't want to change, use Ctrl+Z to undo.

0 S A V EA SN E WF L IE
you don't overwrite the original. O

When you've finished selecting all the pink that needs to be changed, click the OK button. Save the image under a different filename to ensure

24 Practical Web Design

I ne weo aoesn t

get any easier!

■reg.co.uk

INSTANTSITEJ
with every
domain

FREE

OVER

1 MILLION'
domains

Domain

Registration

instant Site

FOR ONE MONTH

Webspace Registered
' . m

NEW & EXCLUSIVE

Sign up now,
or transfer for free!
Yo u r o w n e m a i l a d d r e s s

Build a unique, professional
site in minutes > No technical knowledge required! Share thoughts & photos or sell your products in 5 easy steps

Join our400,000-tcustomers

, Easy online account management
With full FTP access

EG: sophle@sophle-site.co.uk Full DNS management Unlimited web forwarding
Bulk discounts available

> Up to 500 MB webspace Free webmail and up to
40 mailboxes

^ Easy to use - just choose a look and
feel & click to create content!

Wide range of domain extensions

Includes: photo gallery, blog, forum, e-shop and more

^ Free graphical web stats,
and much more

from

£2.59

total price

per year*

.99,

from

£ 1 . 5 9 per month*

FREE ^ 8 free DVD rentals from for every ^
customer k ^5 off at
For all your domain and

SCREErj'^sELECT

web hosting solutions visit: www.123-reg.co.uk
123 reg.CO.uk is part of the Pipex Group. *lhe minimum term forall domains is 2 years, paid for in advance (except .eu domains -1 year) ** Monthly fee must be paid annualty , in advance.

Visit us online now!

Visit us online now!
Want to find out what's going on at

the magazine? Want to keep up to
date with the latest web design news?
Wa n t t o c h a t w i t h o t h e r r e a d e r s ? T h e n

why not visit our website today!
You'll be able to read regular posts from the Practical Web Design team, and our new forums are a great place to talk about your latest designs.

Visit today! www.pwdmag.co.uk

26 Practical Web Design

i^t/ieov^r ^'9 Boys T oys Unlimitec

Big Boys Toys Unlimited W W W .bigb o ) / s t o ) / snm. C Om
We add professional flair to a hobbyist website that's raged out of all control

O e m f e lo p y le dh o b b y s t o r e o w n e r To m

Site background
O w j n e r ' s n a m e : To m A G a r c i a

'thumbnails' were using the exact same huge files!" Determined to improve his site, Tom learned through a process of trial and error, with feedback from visitors helping to guide him. Unsurprisingly, his preferred tools have changed as his knowledge has improved. "I've used Netscape, FrontPage and Fusion,
and now work with Dreamweaver for

A Garcia runs Big

Location: Albuquerque, New Mexico, USA
Tom A Garcia's website, Big Boys Toys Unlimited, is a truly homegrown effort that started in basic form back in 1996. It's expandedand ever since Tom discovers new technologies and ' applications, the site as now boasts customers from all over

Boys Toys Unlimited,

providing a web-based outlet for numerous radio-controlled devices, die-cast kits, train sets and accessories. The site's genesis goes way back to 1996, as Tom explains: "I had a student attempt to sell me a website, in return for me trading

the world. In the site's favour, it's easy enough to use and it has plenty of
content. Negative aspects include the ropey layout, lots of broken links and lack of imagery.

new websites," he explains. "The "It was hosted by one of those free web hosts that had pop-up ads, and I received hate mail as a result!" Tom also learned through various angry emails that his thumbnail images were causing the site to slow to a crawl. "I'd just dilemma with Big Boys Toys is that the site is huge. I cringe at the thought of transferring it all to Dreamweaver." Tom says that, some day,

him a remote-control plane. I told him, sure, but said he must not only make me a website,
but also show me how it's done."

And so Tom and the student spent the next

he'll learn PHP in order to start making the
website a dynamic, database-driven affair.

couple of days beavering away in his office, and
Tom learned how to create tables, insert images and add text, all using Netscape. "The website was horrible for a couple of years," recalls Tom.

made them smaller by grabbing drag handles
and moving the pictures around the page," laughs Tom. "Of course, this meant the

"But until then, I'll keep reading and learning." Along with improving the site's content,
design and usability, Tom's also found the site's reach growing over time. "The site started as a

l U t H o C w t K i l

great tool for locals, but I soon began receiving
emails from all over the USA," says Tom. "One day, I discovered PayPal's shopping cart feature, which I rapidly took advantage of. Now the
store sells worldwide."

»me to Big Boys Toys online hobby store. We have been serving hobby enthusiasts

! 1993, and on the internet since 1996. We specialize in remote control cars, planes,
: tters, boats, plastic & die cast models and slot cars. We're hobby enthusiasts with over

Tom tends to update the site weekly, notably the 'used goodies' page, and, as mentioned earlier, all page content is entered manually The frequent updates should go some way to
keeping customers (and potential customers) ReyeUBig'T' happy, and Tom reckons feedback in general has improved throughout the site's life. "My local visitors say this site's better than the local
Llat Price: $100.00

^ y«ars of of hard collective experience. Please taice yourthousands time browsing through extensive "lection to find kits and accessories. With of goodies inour $tocl( and
to be shipped immediately, we're sare you witi find what you're looking for and get
the service you deserve)
rccmiA toniHiw

Featured Products"
E-Flite Blade CX RTF Hectric Coaxial Heli List Price: S649.99 List Price: $279.99

Our Price: $499^
Yo u S a v t $ 1 5 0 . 0 0 !

Our Price: $189i»9
Yo u S a v e $ 9 0 M !

OurPric: $84.99
Yo u S a v t $ISM

competition. Nationally, people report that they like the site. And every day, I receive that

beautiful email from PayPal that states 'you've
got money'," says Tom. Furthermore, Tom
"Frae Shipping' The most sUble electric heU!

Boat Bargains!
Hobbyzofte Firebird Scout 'Ready To Flv' Llit Price: $99.99 LbtPrke: $69.99 Ult Price; $159.99

wisely avoids tactics employed by the more monolithic online stores out there, and ensures that customers can always contact him via other means: "I often get phone calls from all over the world, as customers want the human You'll find the revamped home page, plus code and assets, in the
Makeover Files folder

Our Price; $54.99
Yo u S a v t U 5 . 0 0 !

OwPric; $49J»9
foil Saw t20M!

OurPria: $129 i>9

Practical Web Design 27

Big Boys Toys Unlimited

Before —
Before we start the makeover, take a look at what works (and what doesn't) on Tom's site /•V INTRODUCTORY
Too many online stores these
LMrtfcr. SM9.W LUMcc OHM

to M9^»»V»T>vonane hobby <Dfe.W hive bt«ft«efv>f>Qhftbbventhuri.«t«

-n, bolljitic & die cest (nodete end iM cars. We*re hobby enthustMtt wtt) over
the service you deservel

1993, Mernet since 1996. We spedsltze )n remote controt c»c», pl»nes»

ir» of expertence. Ptease Uke your time browsing through our exteroive Boa of herd to find tdts end eeeessohes, WKh thousands of goodies in stodc end to be shipped knmediite^, we're sure you wl find what you're looUng foe and get

Q)^TEXT

" Featured Products"

days make assumptions about their visitors, assuming it's obvious what they offer. That's rarely the case, so It's good to see that Tom has included some introductory text, which may increase the site's standing in search engines. OwPriec $499.99
msm ilMMl

OarPrkc: $189^
Yo u S m tMM!

F E AT U R E D

Q Q r 3P R O D U C T S

IBBoaUUaiiMtJtoi
LW r r t a $ « . » 9

Successful online stores

O, Price $4959
rwSm SMM

use 'draws' on the homepage, with the aim of getting you to delve deeper into the website. Tom's use of short phrases to accompany each item adds personality to these elements, differentiating his store from the competition.

PROMINENT

(roraoFFERs

The main reason online

stores are taking business from their high street equivalents is because they offer a cheaper way of sourcing goods, especially niche products. Presenting 'list price', 'our price' and 'you save' figures is a good way to get potential
customers interested.

X-v OVERBEARING

^NAVIGATION

^f^^^TINY IMAGES f 1^^The homepage has
tiny, ineffective product images, none of which makes you want
to click on them to discover more about

B L A N D L AY O U T

BROKEN LINKS

It's just so confusing: at the top of the homepage are drop-down menus with two levels (which don't work well cross-browser); on the lefthand side is a column of standard links; and at the foot of the page are two more blocks of links. Clearly, the site's navigation needs streamlining.

^iThe site sells exciting,
fun products, but you'd never guess this from the way everything's presented. The huge amount of white space and numerous tiny images combine to make a dull

^8 If there's one thing that
makes a site seem

unprofessional, it's broken links, and Tom

has plenty on his site. Unfortunately, a number of them are found in the drop down navigation - hardly the best way to make potential buyers feel confident about using your site to spend their hard-earned money.

the item. Tom's previous experience with images actually slowing down
his site seems to have led him to

whole. And although the logo is kind of fun, it takes up space that would be better used for other things.

overcompensate, making his product
shots far too small.

J
element, and to make certain the item they
want is in stock."

right elements - an introduction, a section on 'featured products' - and he's wisely ensured that savings are clearly displayed next to the price of each item. What the site lacks is visual appeal and a professional edge. Many of the items Tom sells are dynamic, visually striking objects, but you wouldn't know it from the homepage, where the logo dominates. Also, as Tom's up against the entire world (as far as the competition goes), he needs to make his site feel like it was created recently, rather than looking like something from the 1990s.
•The bottom of
Order/Info line: S05-298-I02S r o u r / i U i u b a B I g B o y s To y s «

Although the site's doing well sales-wise, Tom still thinks that it's missing something. "It could do with a more professional look and better navigation," he says. "The aim of the site is sales, and an ultra-professional site is more likely to make potential buyers feel confident enough
to click on that 'add to cart' button."

We think Tom's dead right about this. The site has plenty of content, and is reasonably well-structured. His homepage has most of the

the page is littered with links, three of which point to the
exact same 'Used

Goods' page

28 Practical Web Design

^'9 Boys Toys Unlimitec

After
A more grown-up look and punchy photography give you more confidence to buy
BRAND NEW LOGO AND MASTHEAD
The old logo took up far too much space, wasn't legible and felt a bit childish. The new effort is more rugged, i M t o T t T- l M , . *
•othMMli t993. Md OM »it inMwMk Hn € » «M wtniiat im r«mat* cmM MW wwwtw. Wi* Hiewwi* «#♦**»! m iteN* ewt www* le b* s#*»iwd imnwi*He<v,

fitting the nature of the store's stock.
The toned-down red colour also helps to make the site look more professional.

Esi.'TirsifS.

SIMPLIFIED n a v i g a t i o n
The old navigation was all over the place. We've used 'pull navigation' in the masthead to draw attention to the six most important links, and simple list-based navigation on the left to provide access to the site's other pages.

^ ^ M O pR E r o m i n e n t
'OPENING HOURS'TEXT
Some of the most important information - the store's opening hours and phone
number - were buried at the bottom of

the old design. We've now placed this information next to the logo.

(2)0
you need to.

i m p r o v e d TYPOGRAPHY
The text styles on the

USE OF IMAGERY
The old site looked

old site weren't particularly consistent. For the makeover, we've used two sansserif fonts, and the result is a more unified and professional appearance. As

(2)0

MORE ACCESS TO SALES ITEMS

quite dull, which Is the opposite of
w h a t To m w a n t e d . W e ' v e e n s u r e d

Dead stock is something a store always wants rid of, and sales items are what buyers tend to crave. Therefore, under
the featured items is a dedicated 'sale

(S0

BETTER C O M PAT I B I L I T Y
Unlike the old site, this

makeover works fine in all currently shipping web browsers. Potential
customers don't want to be told which browser to use. The site's structure is

the homepage includes strong images to make visitors more likely to click through to pages and buy goods.
The use of cropped images makes the overall appearance more dynamic.

the text is styled using CSS, it's easy to
update the defined styles whenever

items' section, including a text-based list and two highlighted items with images and descriptions.

simplified, too, so it should prove much easier for Tom to update and
maintain in the future.

Tom tells us what he thinks of the revamped site
Yo u ' v e h i t t h e m a r k - t h e

Owner's verdict
makeover has a professional,

N

truck. Speaking of photos, your close cropping
of products is very well done! I really like the placement of the featured

TURN OVERTO

LEARN (
Create a stamp

.

polished edge. I like the design's
restricted width and the links on

HOWTO...>

products and clearance items. With my design,
you're forced to scroll down quite a bit, and

the left (which will be great for

search engines), and the pull navigation is
tasteful and well-placed. I would never have

there's too much white space. Your design
contains all the elements needed, in a format that's easier to read, view and navigate.

thought of putting this over the photo of the

style logo in Photoshop

r

Practical Web Design 29

Big Boys Toys Unlimited

Details
Intermediate

Create a logo
We show you how we put together the new logo for the site makeover

Photoshop

O e g s n ig ia o r s n tg o g lo s i
whole design doesn't do justice to the

essential for any website, but it's particularly important for an

before - and it's legible! In the layout, we've scaled down the logo's size relative to the
homepage, but its simplicity means that it still carries impact. In the walkthrough below, we show you how to put the logo together yourself.
KAIMO CONTROL

online store. Tom's existing logo

is problematic in several ways. It takes up far red; the 'Unlimited' isn't easy to read; and the

too much space; it's coloured in an eye-searing

Although the design decisions may seem
rather specific to Tom's site, much of the
▶ RCIHi-nrit^fi
i > R C C a n t T n j e >

W « i c e m « t o B i g B o y * To y * o n l i n e h o b b y
enthuMtC* tine* 1993, and on the Internet tmc« 1996. helicopter*, bo*t*, ptoittc ft die ca*t model* end «lot of coJiectrve aKperience. Ptca** teke your tlma browtin kits end eccettoHe*. With thou«*nd« goodie* (n ttod

professionalism of Tom's service. As you will have seen on the previous page, we decided to create a new logo, which uses a
more mature black and a dark red for its

methodology can be used for other designs. For example, the first four steps show you how to fashion a handy 'stamp' image that
can be reused elsewhere, with whatever base

colour scheme. The logo's style is also more in keeping with the nature of the site's stock than

you choose. We also provide other handy hints for working with text in Photoshop,

•A strong logo can make your site more memorable and appear more professional

J"**

B.4

J

l*»J«

hI Untitled 1 ^ lOr/

UnilffllTED
TYPE SOME TEXT
Create a new document, 900 pixels wide and 300 pixels high. Choose 'Dark Red' from the Swatches palette and then use the Text tool to type your stamp's text. Use a chunky font and a large font size; our choice is Bauhaus 93, included in Creative Suite, at a size of ISOpt. Ensure the antialiasing menu is set to Smooth.

uniimiTED

ADD SOME BARS
Create a new layer and use the Marquee tool to add a bar above and below

the text. The bar's height in each case should be roughly the same thickness as the '1' character, and they should be placed about half that distance from the text,
as shown. Use guides to ensure the width of the bars is the same as that of the text.

0
I ^ I CjoI "
i^Unlitkidl 100^. (bars. RGB/8)

^

H1^
m ( !□

JRV

V

J .

A / .

umifl
BREAK UP THE IMAGE
In the Layers palette, select the two layers you've created, but not the Background layer, by Ctrl-clicking them, and then press CtrkE to merge them. Press D to reset the toolbar colours. Select Filter > Brush Strokes > Spatter. Set Spray Radius to 20 and Smoothness to 5, then click OK.

O

A

UflliffllTiD

A P P LY M O R E E F F E C T S Press Ctrl+F to reapply the filter Select Dark Red as your foreground colour
and select Filter > Sketch > Stamp. Set Light/Dark Balance to 25 and

Smoothness to 2. Use the Magic Wand tool (Tolerance set to 1, Anti-alias ticked and Contiguous unticked) to select and delete the white areas of the top layer.

30 Practical Web Design

^tM'of'er B'9 Boys T oys Unlimitec
T ' II j jj^;;
T' ^ ji t** m i a 32^£&S!A m X G itiii irgiTiiiwiii-]^

m

I^UntUled-1 i 100V (BigBoy^ royt.KGR/SJ

Big Boys T oys

Quick tip
^.9.
^ . J k

4.
T.

^.LJ. J./.
-3 ^

BnBiiy8[]iiv8

MAKE MORE

IMAGES VIBRANT

A commonly used trick
in print media is to

make photographic
images more saturated

than they would be if standard lighting and
levels were used. In

: j a
s a i l

Photoshop, this effect Is

easy to achieve: select Image > Adjustment > Levels and drag the two

0C R E A T E A B A S ET E X TL A Y E R
case letters to 120pt.

outermost

handles

Save your existing image as a PSD file. Create a new image that's a similar width to the first,

inwards, until the image
looks more powerful -

but about twice as high. With the foreground colour set to Black, type the site's name, using Impact (again, part of the Creative Suite package) as the font and 150pt as
the size. Use selections to reduce the size of the lower

0T W E A KT H ET E X T
rt m

The automatic kerning (letter spacing) of characters sometimes doesn't look correct, but it can be edited. For example, select the 'T' character and press Alt+left arrow to reduce the kerning, moving subsequent letters leftwards so that there's more of an overlap with the 'o'. Continue to edit other characters, judging things by what looks good to your eye.

but don't overdo itl

6
P A

^Untitted-l « (bar«,RC8/8)
I

3. A

BtaBoysToys iintimiTCP
D imnnBiTtp
A D D T H E S TA M P

BtaBoysTovs

E M P H A S I S E T H E S TA M P
The stamp needs to be more prominent. With the stamp layer selected, select

^WM Copy and paste the 'Unlimited' stamp completed earlier on to a new layer .

Use the Free Transform tool (Ctrl+T) to reduce the size of the stamp and to rotate it. Note that to reduce the size of the stamp proportionately, you must hold down the Shift key while dragging a corner handle.
Untitled 1 100 r (Order/infu line; 500 296-1023 .

Layer > Layer Style > Stroke. Set Size to 2 and change the Color setting to White. This will add a white line around the edge of the stamp. Assuming you deleted the white areas earlier, this line will follow the uneven edges of the stamp.

BaBmisTi 'ffBHiBmisTB
unuffiSB r^'^" ^ynumiTtP

I

JfoLBiiysTfvBH^^ unmiSB "HonumigB ™HS
Irft <1 {> K>

Using the Type tool, add the opening hours and telephone number underneath the logo. We've used Arial for the font: the first line is in bold at 22pt, while the subsequent lines are sized at 20pt. Once you're done, use the Crop tool to remove excess white space around the logo.

© A D DM O R ET E X T

S AV E A N D E X P O R T T H E I M A G E Save the image as a native Photoshop PSD file, so that you can edit its separate layers in the future. For the web, the image needs to be smaller, so flatten it (Layer > Flatten Image), reduce its size (Image > Image Size) and use File

> Save for Web to export it. O

Practical Web Design 31

Podcast

Get your free podcast now!

In the new Practical Web Design podcast - freely available online every two weeks - we provide news, site reviews, cool

tips and features. And you can subscribe for free - today! The easiest way to subscribe is to simply
search for'web design'in the Podcasts section

of iTunes. If you don't have iTunes, then visit us
at www.pwdmag.co.uk and go to
our Podcast section.

S u b s c r i b e v i a i Tu n e s o r v i s i t

w w w. p w d m a g . c o . u k

• Correct at time of going to press

32 Practical Web Design

Thought
processor...

A/®/*?

PCPkis, . reinvented
On Sale Now
Subscribe today
and save 35%

myfavourlte magazines.co.uk

www.myfavouritemagazines.co.uk/ppd/p021

the I'the ^

Web designer's toolkit

Building websites on a tight budget? Get maximum bang for

toolkit
information wants to be free.

your buck with open source tools. Karl Hodge picks 20 of the best
uilding a toolkit for web design

and build the kind of software they want to use
themselves. In other circumstances, commercial developers make cut-down versions of their

E2 can be a costly undertaking.
Applications such as Dreamweaver, Flash and Photoshop can be expensive, to say the least. If you bought them all in one fell swoop, you certainly wouldn't have much change left from a grand. Fortunately, as the saying goes,

applications available for free. Either way,
you're the one that benefits.
We've chosen 10 of the web's best free

programs for web designers. Where possible, we've picked programs that work on Windows,
Mac OS X and Linux. In cases where this isn't

Open source software is one of the Internet's

feasible, we offer alternatives that are every bit as useful as their counterparts on other platforms. Into this mix, we've included 10 online tools that can speed up your workflow, help you out with design decisions and even help to publish your website. The resulting

great success stories. The Internet makes it easy for teams of talented volunteers to get together

bundle of 20 applications (even more when you
count the alternative packages we've cited in some cases) amounts to a comprehensive toolkit of open source offerings that commercial companies would find hard to top.

Open source isn't just free software; it's a whole philosophy. The programs aren't just free to use, they're free to amend and expand. As
a result, one of the greatest benefits of using

open source tools is that they're often
extendable via plug-ins, or can be customised with templates. The feature sets in open source software expand according to the . d e m a n d s o f t h e u s e r, a n d u p d a t e s c o m e

\ thick and fast.
\ We wanted to cover all bases in our

.ONTHECD

\ o s n e i, c l t a s e m n g ib las e to o f s o tl
that designers might use every day. Of course, we recommend replacement applications for the

big three web 'essentials' -

\ Dreamweaver, Flash and

\ Photoshop - but we also look at
\ less obvious applications. You'll

\ wonder how you lived without
It:

\ one or two of the extensions

-..Mm ^
1.,

and programs we've picked

Everything in this list is tried and tested. They do

exactly what they're supposed
to and come with the backing of a community of satisfied users in each and every case. Let's begin our countdown ...

34 Practical Web Design

Featu Web designer's toolkit

-.1

Nvu 1.0
w w w . n v u . c o m

Based on Mozilla code, drag-and-drop authoring
tool Nvu is the open source Dreamweaver-beater
Pronounced 'enview', Nvu is a drag-and-drop site authoring tool based on the same code as IVIozilla Editor, which, in turn, is based on Netscape Composer. Using these as a starting point, the Nvu team has added extensive CSS support, with layers for layout, site management tools, coding views and document navigation aids. In operation, it's similar to support for more current web standards, such as XHTML. Like Dreamweaver, it's extensible,

and there's a growing throng of add-ons available from http://nvuext.mozdev.org. Nvu is in its first full version, but you'll be
surprised at how slick and efficient it is. There are support pages and tutorials at www.nvu. com, and a user forum can be found at forum. nvudev.org. For Windows, Linux and Mac OS X.
Nvu Is based on

earlier versions of Dreamweaver, yet with

open source code from Mozilla, and includes advanced CSS layout components

DESIGN MODES hierarchical HTML Tags window (useful for composing semantic structures); a source window, which is a straightforward code listing; and Preview, which reveals how your page will look in a browser.
Advanced Property Editor
Currenlattributesfori <div>

U I Nvu has four modes: a normal drag-and-drop window; a

CSS L AY E R S The program enables you to create layer-based CSS layouts. The tools are a little difficult to find, though. You'll find the

'Layer' icon next to the 'Choose a Font' drop-down menu. Click the icon

to add a new layer, then drag and drop it into position onscreen. You can then drag the handles of the layer object to resize it in the document.

IE.--

Prooarty position top

Value absolute 31px 300px 40px 600px
Shwtsandnies Sinternai stylesheet .bodytext

PWWfffl rWTBIFWiH!!! Hffl
Fort family:

(* unspecified C predefined;

height
left
wkth

I Afici, HeJveWca, sans-«r#
C Use custom fort family:

|unspec#ied

ASgrment: | unspedHed ^
Fort size:

"3^

Te x t d e c o r a t i o n s :

r~ Overine

r None

Line height:

r Line-through
r UnderSne

Cfck on an item above to edit its vdue Property: Va l u e :

Remove

P Blinking

The quick brown fox Jumps over the lazy dog

]
C O D E AT T R I B U T E S

Unkdt. I StY»i!<*. | Riie |
Caned

Help

P Expertmode

EXTERNAL STYLES
Nvu also has a built-in, menu-driven CSS editor that's similar to the one in Dreamweaver.

where you can choose to display advanced properties for that item. Some attributes may already be filled in. You can add further HTML attributes by choosing the attribute from a drop-down menu before
typing in the value in the text box next to it.

U J Right-clicking on any HTML element brings up a contextual menu

Go to Tools > CSS Editor to launch it. Click 'Style elf, then give the new style sheet a name. Click 'Create Stylesheet', then 'Rule', to create a new rule based on HTML elements, or a new, named style. Use the tabs to edit the style. "

Practical Web Design 35

Web designer's toolkit

Firefox Web Developer Extension
http://chrispederick.com/work/webdeveloper

Web Developer transforms your humble Firefox
browser into a must-have design tool
One of the best things about Firefox is its extensibility. The Web Developer Extension will transform your web browser into a kind of web page analysis and editing suite, enabling you to delve deep into the structure of any page
w i t h i n t h e b r o w s e r w i n d o w. This useful extension adds a new toolbar

AA I
QSWd I

information in pages, see form information and validate code on-the-fly. The most useful
tools reveal the structure of the page you're

^ S l l

working on, and can be found in the CSS and
Info menus. Here, you can toggle-on object information, see ID and Class names, or get an outline of every block element. We've employed Web Developer side by side with an HTML editor; a combination

under your address box, with a list of commands readily accessible. You can disable features for testing purposes, such as JavaScript or even page colours. You can also view cookie

that renders drag-and-drop authoring tools
virtually redundant. Ttlis essential extension is the work of one man, Chris Pederick. You can find full documentation at his website, http://chrispederlck.com

|y• « a y ^ [£ IStOlMUr- CooMK^
, CSS' ''

sZl
/ bMQW I*

o

1^
wNle hopped ~
And now we've

Fomw

^ Outtne- O Resw © TooJsJ Wa drew theie In th« pub, my W«nds •nd I,
t up on Wobbly Bob «nd eontr»b«nd poinutj.

10ONLINETOOLS
1 T H E C O L O R C O O R D I N AT O R
Without design training or an artistic eye, it's not always easy to pick colour schemes that are complementary Fortunately, The Color Coordinator does it all for you:
w w w. c o l o r c o o r d i n a t o r. c o m
1

D l f p ( i y £ 3 S 6 y H « « a Ty p »

m
Monday, April 17.

CbHSMft+C II ri n ^UMrStyteShMt...
F d . K » C r 5 S £

^ ^ h o Q D L E S

J put them on t'Intemrt. If you cMck the Imn
I become endorsed wttb pbelt.

they will

art4-Shft4«

ID O O D L E S

UM Border Sox Hodd

I Mech« Jimmy the Douchnut ■ Jtmmy the Doughnut I A r e Yo u M y M u m m y ? ' VoteforMe... I More Vltsnrfn C then »n Onnge • No Arms NevlUe

S_m1

Mecha Jimmy the Doughnut

I Whit Citi Think
• I t W k A ( ( Ye U o w

I Firt PropeUed Self Portntt
' Ch-ch-eUo...

2 MYIMAGER Need to convert, crop or colour an image for the web? _ J —mylmager is a free online application that offers Sozens of
tools and filters for editing images: www.myimager.com

; ARCHIVES
• M*reh 2006

I ApHiaXK

1 UNKS
I The All New Lucky Boys
I C o l n e Va l l e y C h « o $

3 . H TA C C E S S TO O L S -htaccess files ^aje invisible text documents that contain
commands that configure Apache webservers for local
folders. This site contains several tools to automate the

! Mr Twtin

process: www.htaccesstools.com
Jimmy the Doughnut
These stupid pictures are Ucensed under » Creative ommons Attribution-NonCommerclal-NoOeriM 2.5 License.

4 e s s L AY O U T G E N E R ATO R
Part of CSS Creator, a site that offers hints and tips on building CSS-powered pages, this form-based tool helps you to create CSS-powered, three-column layouts:
www.csscreator.com

S T Y L E I N F O R M AT I O N

0JY ou can edit an external style sheet manually using the Web Developer Extension, with a
Firefox, then choose CSS > View Style Information from the Web Developer toolbar.

5 W 3 C VA L I D AT O R S
The World Wide Web Consortium has a collection of CSS and HTML validators. You can input code directly into them, or link to files already online: www.w3.org

live update in your browser. Here's how to do it; navigate to the page you want to edit in

6 G O O G L E A N A LY T I C S
The latest free Google tool for web designers is'Google
Analytics, a remotely hosted traffic statistics system that's easy to install on any page within your site: http://analytics.google.com

7 BLOGGER
Blogger is a full, free online content management system. You can host pages in your own web space or on Blogger's own BlogSpot servers; www.blogger.com

8 NICHEBOT EDIT CSS
Select CSS > Edit CSS. This displays the current style sheet in a separate pane

Nic^OT

MAKE

CHANGES

Tweak your site content for maximum search engine visibility with NicheBOT, which features keyword suggestion and analysis tools: www.nichebot.com

Switch back to the main tab to find the classes in your external CSS file and

on the left. Hover over any element you wish to
edit to see a list of CSS classes that affect it in

make any edits you wish to make. When you've finished editing the CSS file manually, you can
click the Save icon on the toolbar of the Edit CSS

9W3SCHOOLS
Not so much an online tool as an indispensable resource.
The CSS and XHTML references are essential for hand c o d e r s : w w w. w 3 s c h o o l s . c o m

the status bar Alternatively, click on an element to see a list of styles that apply to the selection.

lir I morguepije

pane, then upload the amended file to your
webserver Refresh the page in your browser to see the changes applied.

10MORGUEFILE
You won't find any 80s office shots here, as this extensive

archive is freshly stocked and frequently topped up with the] 36 Practical Web Design
cutting edge worl< of young, new photographers. Free for non-profit use: www.morguefile.com

Web designer's toolkit

Coppermine Photo Gallery 1.4
h t t p : / / c o p p e r m i n e - g a l l e r y. n e t

S Audacity 1.2
h t t p : / / a u d a c i t y. s o u r c e f o r g e . n e t

A dynamic photo album you can customise at will to fit in with any website
There are several decent photo album and gallery tools available as open source. The PHPpov\/ered Gallery 2 (http://gallery,menalto.com)

Get wired for sound with Audacity, the podcasters'favourite recorder
On the broadband web, no web designer's toolkit is complete without one comprehensive free sound recording and editing tool for creating podcasts. Audacity is it. It's a critically acclaimed audio editing system for
Windows, Mac and Linux. It can also be used to convert audio files to

In fact, the default template for Coppermine
is based on the phpBB layout. Some of Coppermine's unique features

WAV or the open source Ogg Vorbis format; or you can use it to record your own chart-topping CD. Aside from being a useful sound sample editing tool, it's a fully functional multitrack recorder. Tracks, in this case, are separate audio channels that can be played back simultaneously For example, you might put some stereo on track
one, a few sound effects on track two and a voiceover on track three.

is a popular favourite, as is the remotely hosted
Flickr {www.flickr.com), which, in recent months, has enjoyed a massive upturn in popularity. When choosing one tool for this particular

include batch upload, image rotation, a slideshow viewer, shared user management with
various nnessage board systems, and random

feature, though, Coppermine Photo Gallery was our first pick. Like Gallery 2, it's a PHP script with
a MySQL back-end. Though both have standout features, Coppermine is easier to use and customise, and is more extensible. It also integrates well with another open source

picture display. It also has all the features you should expect from any online photo album, such as user comments and private galleries,
category and album creation, automatic picture

You can then mix each track individually, placing them at different points in the stereo field, changing their volume and adding effects. The result can then be mixed down to a single stereo file and saved in a format that's ready for the web and for registering with iTunes. Any budding musicians may want to take note that this is exactly
the same basic process that professional sound studios use to record

resizing, thumbnails and automatic generation
of gallery navigation.

favourite: message board application phpBB.

Chief among Coppermine's features are extensive tools for customising the look of your site with the use of themes. As they're CSSstyled, there's a lot you can do without actually
altering any HTML. There are alternate themes

the pop hits of the day. Remember this before you splash the cash for a hardware recording system. For podcasting, you'll need the LAME Encoder (http://lame. sourceforge.net) to save in MP3 format. Unfortunately, it's illegal for us to distribute it to you because of licensing issues. Find out more at
http://tinyurl.com/bka3e

available for download at Coppermine's
SourceForge page at http://sourceforge.net/ projects/coppermine/.

Like Gallery 2, many of the image manipulation functions are dependent on PHP plug-ins ImageMagick and GD Library. Most web hosts will support these, but you can only install them if you're running your own webserver, as they're part of the PHP configuration. t| Fte El* vtow ProlBrt Cenarate Effect flnalyw Hotp

Mi"

-

>n iirt« c»pp«ftnln*,rtt

Coppermine Photo Gallery (Stable)

CopRermjne
Animals

Demo for cpgl.4^.K Home :; Register;: FAQ :: Login Forum :; Album list:: Last uploads i: Last comments :: Most viewed :; Top rated ;; My Favorites :;
Search

Choonithtmt jjj Ch»«M youi Ijnguig* ^

Plants

4ifll«*.)«ton«444td«nJ4n10.200e NOB 12 fllM. lul en* iddtd «n Jin 17. 2006

m

Bi

E l
Hetwet4(<hl* 1271 t wtmw P V A P

AK«UphtM MMMuiokd*

Last additions • Nature

K 4
rmbn4Kk««d-yeu? Bright .yM 277.vi«». «n<(«d*ft

W

chri.4ni«*

SiMpy

lin
puppy

2 4 t l v. ^

P«««r*d by Ctpptrmint Phste 0*lttry

Coppermine Gallery's customisation and integration features make it a safe choice for all kinds of websites

•This professional-standard recording and audio editing program can be used to create button sounds, soundtracks for Flash movies and podcasts

Practical Web Design 37

Web designer's toolkit

w w w. g i m p . o r g

Gimp 2.2
saves table data in HTML format, for example, and there are built-in plug-ins for generating
buttons and banners. If a feature you need appears to be missing, you may be able to

The Gimp is the open source Photoshop: it's powerful and stable, yet it's completely free
If there were prizes for the most loved Linux applications, GIMP (or The Gimp) would have a full trophy cabinet to boast about. The GNU Image Manipulation Program is, essentially, a free alternative to industry heavyweight Photoshop, All of your favourite features are present and correct: powerful painting tools, support for massive image files using a tiled memory system, layers, transformations, web animation, and support for all the web's most important file formats. It can also open Adobe PDFs and save Photoshop format files. Naturally,
it's able to save work In JPEG, PNG and GIF

plug it in using one of many useful plug-ins
available from around the web. For example, you can generate JavaScript rollovers or static web galleries using free plug-ins from http;// r e g i s t r y. g l m p . o r g .

The Gimp may have many of Photoshop's
basic features, but the workflow is quite different. It's modular and menu-driven, so new users may find that it takes some time

formats, and enables you to work with websmart colour palettes. Starting life on Linux only, it's now available in versions for Windows
and Mac OS X.

to navigate around its 'alternative' interface. Fortunately, there's a thriving community of users ready to take care of you, and the work
undertaken on recent versions has focused on

There are several features that are of
rtar+iriilar irv+oroct inr \A/ekK Hoclnnisrc TKa fiimn

The Gimp may be free, but it still beats many commercial image editing applications when it comes to the features on offer

cleaning up the general clutter. Head to http://

gug.sunsite.dk for tutorials and forums aplenty.

GMail Drive/gDisk
www.viksoe.dk/code/gmail.htm (Windows)
littp;//gdisk.sourceforge.net (Mac)

NoteTab Ught 4.95/CreaText
www.notetab.com (Windows), http://creatext.sourceforge.net (Mac)

2GB of online Storage for free?
That's what GMail gives you

Hand coders sometimes need a bit of help. This is where NoteTab and CreaText come in handy...

Fie Edt Search Vtow Modify

Dooment Favortes Tools Hot'

\a a a »t s
GMail Drive shell extension
HTML
e

R o a d m e . M^R e a d m o o ti 'W h a W w i . b i t1

__e ta i <1! M w M; 1ft e ^
REXDHE.TZT lor N o t e Ta b Light" 4.95 (Freevare version)

S'T'-o r
*1

X


^ Q«l

C - i r. x .
-A, .X

. X ;JC."
t m j . p m

HTML Terrplale i NewWebpage Document Elements ) Bate i Basefont

Velcone The

to

N o t e Ta b free

Light! replacestent and a capable HTHL editor.

1 Bod^ 9 HTMLbegr
! HTMLerxj

ultimate

Notepad

I f y o u a r e r e a d i n g t h i s fi l e i r o n y o u r n e w N o t e Ta b p r o g r a m , o p e n t h e
fi l e

t Last updated...
I Link i Meta i Styte ) TUe Anchor Elements i Bookmark

Readme.otl to quickly discover some of its most original features. If
you are

not familiar vlth technical terms, you vill find help by viewing the G l o s s a r y. o t l fi l e t h a t c a n b e a c c e s s e d f r o m t h e B e l p m e n u . S e e t h e
V h a t s N e v . t x t

lh« creates a virtual fitesystem aroufid your (5oogte Gmal accoiM, aloMtng you to us9&meil as a storage medium
GMaM Or>v« ts a Sh«l Namespa

GMa) Dnv» awtts a virtuaf fliesystem on ttp of your Google Gma»( account and enabtes you to saw and retneve dies stored on your Gmail accetrt directVfrom inside WliKtowB E*ptofer GMail Dnve Irteca#/ adds a new dfPrt to your computer under Ihe n, co.»ut.r totder, *»nereyO(j can create new lowers, copy and dragWdropftlesto

» Hyperink ) H>^wrfink - description } Hyperfrk to bookmark i Hyperink with image
1 M^o Block Formatting i Address i Blockquote 1 Center i Drv » Font i Lriebre^

file Tip: open

for put it

information

on

the

most

recent

changes

made

to

the

program.

the cursor on any of these file names and hit the T7 function )cey to
inntedlately.

•GMail Drive can be accessed on your computer like any other storage
device. Files are saved as mail attachments

C o n t e n t s

GMail's great and, of course, free - which makes the 2GB of storage space it provides in order to save email even more generous. At one time, the site was super-exclusive, with new members able to join by invitation only. You still need an invite to sign up with GMail, but with so many users, each one of them with 99 invites to send, it's relatively
easy to get an account.

1.

Introduction

Every web designer needs at least one good text editor, and preferably one that makes HTML markup easier to place. We've always been fans
of HTML-Kit, available for download from www.chami.com. Yet, for the purposes of this list, we've decided to opt for NoteTab Light. While HTML-Kit has its own charm and unique features, NoteTab Light comes with FTP, a library

NoteTab Light is more than a replacement for Notepad, with advanced text and code features
NoteTab is for Windows only, so we've chosen CreaText for Mac OS X. It's a straightforward HTML editing tool with great features, such as tag colour coding, a colour chooser and menu-

And when you've got a GMail account, you can send a second invite

to yourself, getting a second account to use for online storage. GMail
Drive for Windows (or gDisk for the Mac) allows you to add a GMail account to your machine as a virtual hard drive, so you can drag and drop files to and from the account. It's an ideal way to share large
files between members of your design team.

of sample code, and HTML markup tools. It also integrates with TopStyle Lite for CSS editing.

based CSS editing. You can preview your code in multiple browsers, with buttons displayed
for each browser installed on your system.

38 Practical Web Design

Web designer's toolkit

Rico/Prototype
w w w. o p e n r i c o . o r g , h t t p ; / / p r o t o t y p e . c o n t o . n e t

Inkscape
w w w. i n k s c a p e . o r g

Ajax Libraries make coding Web 2.0 interfaces
much easier, but which do you choose?

An open source challenger to the vector features found in Flash

Build online widgets that update using dynamic data with Rico's generous
library of Ajax interface components Ajax (Asynchronous JavaScript and XML) has been around for quite some

Inkscape's SVG output is becoming more important as users turn away from Internet Explorer

time, but a recent upsurge in use has been accompanied by a slew of new tools. Microsoft is currently beta testing Atlas, a suite of scripts that helps you build Ajax-enhanced pages in ASP.NET 2.0. Adobe weighs in with Spry,
which is a similar framework of user interface controls and code snippets. Even Google has got in on the act. The Ajax framework we recommend has a longer history of use and is actually based on two technologies. First, there's Prototype, a library of bespoke 'classes' for file, form and external data handling. Rico is a library

Inkscape is a vector drawing package in the
mould of Adobe Illustrator that lets you output your images in a variety of web formats. It also supports a range of standard scripting formats such as CSS, XML and SVG (or Scalable Vector Graphics), which is the W3C's XML-based
standard for static and animated vector

Inkscape's drawing tools also make it ideal for creating web images, including all manner of buttons, banners and logos. You can even use it on prototype and web page layouts. Documentation is mature and readily

available, and it's popular enough to have its
own WikI (wiki.inkscape.org), where you'll discover a full user manual and some basic, yet helpful, tutorials, plus galleries full of Inkscape art. Versions are available for Mac OS X, Linux
and Windows.

of ready-made interface components, effects and interactive elements
built on Prototype's extended classes. Rico and Prototype are not for beginners, but together they make the programming of Ajax interfaces
a lot easier.

illustration. There's native support for SVG in Firefox, Opera and Apple's Safari browser, but Internet Explorer users need a helper

application to view files.

ContrfcutB

Downioatte

Fofum

Web

Resources

flwGeeklog 1.4
w w w. g e e k t o g . n e t

v^eeklog
L . welcome to Qeektoa

The i.ltmate Webiog Sysi.^

Geeklog is a content management system packed

with powerful features for building dynamic sites
Pitched somewhere between the simplicity of blog application
WordPress and the multiple bells and whistles of full-blown content

saarrh i TKfsday. Xrw 06 2006 O 06:31 AM

Who's

Onlne

Guest Users; 23

Qetttig started
* OownioadGeakioQ

Geeklog 1.4.0sr3 and 1.3.11sr6
Sunday, May 28 2006 • 11; 15 AM EOT ConbtmindbyiQii
Vi e w : 1 , 0 5 5

Who's

New

♦ ^..Dqcs..
Support ♦ ffiQ

emosmack thelsivsrwdf

♦ DemoSitel

management portal PHP-Nuke, Geeklog is a powerful foundation for all kinds of websites. It can easily handle daily news updates, blogs,
brochures, fan portals, documentation sites and more besides.

The Seojlty Science Researchers Institute Of Iran (KAPDA.r) has reported the fotowTig saortty issues n Geeklog: 1. Posstile SQL Injection and authentication bypass
2. Posslile XSS A S u a

What Is Geeklog? Geeldog is a PHP/MySQL based appfcation for manajng dyrwrmc web
content,

* Maing Lists

3. Pathdsdosureh the iw«»i«.>»ofsofT» themes,e.g. theProfessiorwItheme Addtlonaly, an nterrwl code revtew has revealed another possfaie SQL mjectlon m the story suiDfrtoion.

Geeklog and PHP-Nuke look quite similar, yet Geeklog is a more streamlined application. Still, Geeklog is modular and extensible, so if the default installation lacks any features you feel you really need, you may find a plug-in online. It also integrates with a range of existing offthe-shelf open source applications. Want to add a message board to
your site? Geeklog integrates directly with phpBB. How about a photo

♦ P|LignPgv9tQPff';<iirlR ♦ (as

We are therefore robas^Tg Qeeklog 1.4J)sr3 (cofrplete tarb^. utaorade arcl-we) and Ocofcfcig U.llsr6 {upgrade active, combo update) to adc^ess these Issues and woiid suggest that you hstal these as soon as posstte.
Read on fcr more Nbrmation ...

Sections Home Geekl0Q(lB4) GeektoQ2f2B) read more (376 wds) Post a corrrnent Comments fl5) Trackbadcs fn

"Out of the bo*', it is a Wg engrie, or a ^ with suppoit for comments, t[ad(bKl<% miittte syrflcatton formats, spam protection, and al the othe
vrtalfeatiresofsucha

system. The core Gootteg
dbtrtutian can esly be

fifmccensDis (196)
Pluans(22) Server (24)

Latest Fbr\«n Posts

gallery? Simply plug in Gallery 2 using the bridging application GL_ Gallery 2 (http://snipurl.com/glgallery2). More modules can be found at http;//5nlpurl.com/galleryintegration.
Geeklog enthusiasts claim that the software is more secure than

General He^
Instalatlon

Whjt CMS shaidlpftk? Need h„.
Can't Log In do not use spaces
rwip Iriari nnt-hirn

Scan (7)
UserRnctions

*Q (K/WAK 06)09

QenerdHet
InsUtiton GenerdHefe)

extended by the many community developed plu^is to radcaly after Its functionalty. Avalable
Dluaris hdude fanms. Inaa

gata'ioi, and many mere.

Help troubteshootinq Ltserfet...

its rivals in the Nuke family It was originally built for Security Geeks
(http://schmoo.com), so this makes a lot of sense.

be all things to everybody, and come crammed with extra features that not every site will need. On the other hand, Geeklog lacks the community support that the Nuke family portals enjoy, providing users with fewer plug-ins, hacks and extensions to play with, and

•We cliose Geeklog
for its balanced

These same enthusiasts also point to Geeklog's focus on content management and blogging as core features, complete with commenting and trackback URLs, such as WordPress. PHP-Nuke and PostNuke try to

approacli to content management

it faces stiff competition from tools such as Joomlal O

V- " ■ ■ ' ■ .a.-.

' ■ - jt - ■"' I. ■
. i J i' ?. .. • P .1''

Website build-off Listings site

II The weB Site
Our four web design experts apply their copious

WflP - Off
let their individual design styles inspire you in your own website builds.

design skills to the humble listings site
It's all very well enjoying the whole gamut of Internet eye-candy at our disposal, but I think
we all admit that one of the net's more practical functions is for finding things, such as a good

restaurant, a decent price for a lawnmower, or a second home in Gibraltar.
Our four experts - Andres Rojas, David Foreman, Paul Wyatt and Marc Peter - have once again " come up with the goods when it comes to designing something quite different from the usual

staid listings site. Now you can choose from the features they've used, and

THIS

MONTH'S

BRIEF:

* ■

Create a functional, user-friendly (yet funky) listings site.

xi to RUMPLE

Let s cetReaOy Paul wyatt

40 Practical Web Design

Website build-off Listings site
o

I

'H'he information provided and the results displayed depend on the mood you select. You never know what you need until you see it'
Andres Roias
lllumina Digita 1 www.illumina.co.uk

About me:
As a lead designer and design team leader, I've worked across a wide

Key features

About the site
To follow the brief, I

range of projects, from learning to entertainment. I developed the characters and backgrounds for two large productions for the BBC iBAFTA nominee 'Digger & the Gang', and the
BIMA-awarded Tobu Learn Japanese',
which won the Best Use of Broadband in 2002. Other online credits include

C D

T O P N AV I G AT I O N

wanted to design a listings
site than not only looked more pleasing to the eye

Directory-

companies, services, etc. Features - galleries, comments, suggestions
that follow the theme

than a conventional listings
site, but offered an improved, personalised search experience. This is a site that attempts to adjust itself to people's expectations and moods. The site provides results that are not only relevant to a specific search, but are
also related to the mood of

100 Welsh Heroes, the iBAFTAwinning Careers Wales, and the Tribe

of the week. Top 10 -

refers to the best things
you can do according to category or mood.

Community for the Sanctuary Group.
W H AT I ' V E B E E N DOING THIS MONTH:

I've been working on a couple of projects for the BBC, including a
science website and an online interactive drama. I've also worked

ijgv THE MOOD
M E T E R

This is the search tool

on a brand new web project for a publishing house,
THE SITES I'VE BEEN VISITING:

for specifying the mood
you're in. Depending on the mood you've chosen, the colour scheme of the top area will change.

users and perhaps to what

time of day it actually is. You may be searching for heavy metal bands, but why
not have a look at dark

wvvw.barbican.org.uk Great use of colours, lovely rollovers,
easy to use.
w w w. a t h l e t e . m u

clothing if you're in that
sort of mood?

Cm not such a fan of the band itself,
but the website's urban feel and

T E M P E R AT U R E , DATE & CITY

The functionality of the site is based on the type of mood you select. There are four categories: sad (I need a tissue), angry (grrrrrl), neutral (whatever) and

innovative interactivity has been an inspiration for me.
w w w. c s s z e n g a r d e n . c o m Not so much for the looks, but for the

Depending on the city you've selected, and perhaps the temperature, the top

overall message and approach to CSS, I've been recommending this site to beginner- and advanced-level web
designers alike.

landscape will change along with the background colour. The colour scheme alteration will take place if you haven't chosen a mood with your search tool.
L E F T N AV I G AT I O N

great! This feature could be expanded further to incorporate a more
varied range of emotions.

IVIy research included visiting listing sites that are related to going
out, eating, dancing, and so on, as well as weather sites and air

WHAT I'VE BEEN WATCHING:
Tropicalta
A celebration of Brazilian culture at

the Barbican, including an exhibition, and concerts by Brazilian and British musicians. Tropicalla Is the name
of the cultural revolution that has

(J) Where you can access categorised Information.
MAIN F E AT U R E

conditioning companies. You might be asking 'what does the weather and air conditioning have to do with
listings?' Well, the mood idea came from an

interactive tool for an American air conditioning company, where, depending on the temperature
you choose, the colour scheme of the

changed Brazilian art, politics, music
and fashion since the 1960s.

The theme of the week, featuring useful info as well as tips and tricks.

'The Last Picture Show'. I've always liked 70s cinema, and this film always strikes a chord with me. 1 like the pace
of this bittersweet tale of life in a

interface changes accordingly. This isW a feature © B O O KN O F O R that keeps you up to date with forthcoming events, so that you can book
well in advance.

I thought that this could be effectively applied to our listings site not only in
terms of the colour scheme, but also in terms of the information provided and the results displayed. The result is a site that's

bleak, disintegrating town in the
middle of nowhere.

'Brick'. I found this film most

NEED DIRECTIONS?

useful and fun; you never know what you might need until you see it in front of you.
The rest of the site elements are add-ons to this particular concept. When searching for specific information, users are presented with relevant

enjoyable. It's an Ingenious attempt
to use film noir in an otherwise trivial

A handy map, so that you don't get lost
on the way to your new adventure!

high school tale.
W H AT I ' V E B E E N L I S T E N I N G TO THIS MONTH: Boards of Canada - music that never

information that other people (who happen to be
in the same mood) also recommend. This turns an

fails to soothe me while I'm working.

ordinary listings site into something more dynamic.

Practical Web Design 41

Website build-off Listings site

Early portal sites were generally chock-full of links on their opening pages. There was
no enticement^ no content and no colour^^

( (

Paul Wyatt
Lycos www.lycos.co.uk
About me:
As head of design for entertainment portal Lycos. I'm responsible for how the site looks, the way specials are designed and our online and print campaigns. I've worked in the industry for eight years and have produced sites and animations for the likes of Sony Pictures, Canal Plus and Carlton Television. View my work at wvvw.paulvvyatt.co.uk.
W H AT I ' V E B E E N

Key features
S T Y L E , T O N E a L AY O U T

About the site
The brief this month called for a listings site. Now what does that instantly make you think of? Gigs, venues, pubs and restaurants?

A very calming tone to this site, as it's easy on the

Yes, there are certainly plenty of these kinds of website all over the
web, so I decided to break away from the norm for

eye and reflects the ,
subject matter well.
It's important to do this with your designs. For instance, it wouldn't be a good
idea to have

£COaST 02
£(vJVlfiOM € WrAL C0«£
flOMt 6flE£N issues A6€MC1€S CDf«-€iieMC£S l«C!fCLIN6 DWECTOW

my project. After browsing for a while, I noticed that there's

an amazing variety of
high-quality information
available on the web about
fOCUSONLM^RE, RESERVES UPCOMING ENVIRONMElfrAL i M E l f TA l EVENTS
12X>«300fi; The NacycHnf 4 Wart* Maoaga ment ashitoitton, }2-14 September i006 NEC nature reserves in the UK. We lirtthcmeH! eOT9l,ISTf^$>>

DOING THIS MONTH:
As usual, we've been busy creating

some rather smashing new areas of the Lycos site. We've also been working with Nintendo on its Nintendogs product, producing a very cool microsite with the all-important 'Rate My Pooch' section - priceless! THE SITES I'VE BEEN VISITING:

designed this site in pillar-box red.

n

the environment. I decided

Birmingharrj, b the etserHial annual eyertt for the
industry. The event showrcases the latest produas and services from ower 400 top quality companies,

I

to pool this info to create
the Ecolist website.

indudtng the highlyMlttr outdoor exhibition
featuring vehicle dcmorutratton

FONT CHOICE
FOCUS ON: RECYCUNG

At the heart of Ecolist, you'll find a listings site

Akbar was
ivtydng titei where end

used for the Ecolist h e a d e r. T h i s w o r k s

to recydi. We've got llftt
e of where you an retyde cant, paper and textiles
G O T O I J 5 T « l < ; S »

The specialised ised senff^msstons sei^Wssto are free of charge an6 offer you access to the top industry experts talking sense about the hot issues that affert your btfinets. This year's sK.. Tue, t3 Jun200« 0«.00:12
GMT Waste 2006 {Stratford upon Avon, UIO laOSOMS; Th« Fourth tiennial International

with a wide variety of
information at your

well with the

Confaranc* provtdingwastemanasemcnt professiorvis with a forum to debate the managemern
and regulation of controlled wastes. Waste 2006 follovirs the tradition established sinu

fingertips, from green
issues and upcoming events to local rallies and tips on

subject matter and
helps to set the
tone of the site.
contervatkoa use. m ettoration and devetepment of the inland waterways M T O l B T M G S »

Wa s t e 2 0 0 0 o f a b i e n n i a l I n t e r i u t i o n a l C o n f e r e n n

which debates the latest strategic planning A regu latory guidance, the best applied research and the shCMKasingof practical and cost-effective solutions

recycling. You'll find it all
listed here.

Always use a font that's appropriate;
don't enter the font hall of shame

E N V I R O N M E N TA L E D U C AT I O N

Links counesy ofygggr/iatgrtnet.net nesy e^i^puiatgrtne
XhP9»»eti

Tht€;H*»1iSnf9r l>r«l»m<Li«5SP<i#nd prciect - involved in environmental education in Scotland' This orte's for yoa The Assodation for Herttaoe Interpreut^ - used to be StBH. Look up the articles from the Journal, there are

The page I've designed is the gateway to this listings site, and is hopefully more interesting than a plain old

t • to/|Ti Schools

wvinA/.nlntendogs.co.uk I've been working with these guys this month and I'm getting a little bit
addicted to these virtual pups! w w w. fi n d a p r o p e r t y. c o m

with some poorly
chosen serif.

^^( for li gt^»Ovrc»se, urces a J^iN>hf-orier . . very good asc ttudks
ViFtytlfisiitegrk Orid £fwiron{nfnUj Centra: The National Grid run aset of weli^nown andver) well resourced education centres around the

k>adi of good ones In their archive.
The Institute for Earth tducatloft (U.K.) fr»e!}4t«ftoi.»rth

Coastal explorer proiect from Kent with an online
book. Ideal for teachers and students rteeding coastal

Ceo^aphy resources at Key Stage 2.
M 0 R E »

directory-style front page. If you like, you can always
access these pages directly from the top drop-down navigation bar. However, the gateway page should be a little more 'involving', and should encourage the visitor to delve deeper.

ccHXitry. This Kst wi* show you tha nearest to you.

I'm looking for a flat! Very much in
the theme of this month's brief. Find a

© T O P C IA L
Hook your

CAREERS ft TRAINING

^ J K J f S
Find the right Erwironmer^al

LISTINGS

If your looking for a career inMolving the
enwirorwTtent then you should start

Agertcy to help you. We have

looking here. We have listings of all the
relevant recruiters to help you in yo<* search.

full listings of all International

agencies and o^nisationt that
cart help you with all your envi ronmental concerns.

Property is a listings site for anyone looking to buy or rent a new home. www.drawright.com I've started a drawing course at Saint Martin's College of Art and Design. I thought it was high time I got back to basics! Betty Edwards has a brilliant method of teaching, and it works. Give it a try - release your inner artist,
W H AT I ' V E B E E N WAT C H I N G :

audience. Promote

GQTOUSTJHeW

from the homepage

your most topical
links in the main

promotional spot.
A C L E A R PA G E H I E R A R C H Y

Take a lesson from the early portal sites, which

were generally chock-full of links on their

O ;Structure your pages. Don't have uneven content
boxes floating around the page. When it comes to

opening pages; there was no enticement, no content and no colour. The design of Ecolist is such that it initially looks like an environmental portal bursting with content. Well, it is, but the content is found on the links to the events and

I went to see 'Ziggy Stardust and the Spiders from Mars' at the National
Film Theatre. This was Bowie's last

content, it's important to have this information on a
consistent modular grid.

outing as Ziggy from a concert at the Hammersmith Odeon iri 1973. Mad, bonkers and very colourful. Loved it. WHAT I'VE BEEN LISTENING
TO THIS MONTH:

CLEAR TOP-LEVEL ACCESS POINTS

info it provides. It just makes it that more interesting and informative for the visitor. When designing a site such as this, it's a good idea to keep it clear and as
accessible as possible. Make sure you

>4^ This top navigation bar is clear and wellstructured. Think carefully about your categories and
menu bar choices. Don't overwhelm the visitor - keep
it clear and concise.

I've bought myself an iPod! Cm not used to carrying my whole music collection on one tiny device. Hence,
I've been listening to EVERYTHING!

promote event-driven listings to add a topical flavour, and keep the site
regularly updated.

42 Practical Web Design

Website build-off Listings site
o

concentrated on keeping the front page fairly busy^ with plenty of links that take you straight into the content of the site
David Foreman
T oast Design www.toastdesign.co.uk
About me:
I'm Director at Toast Design, a web and graphic design agency founded in
1997. I've worked on countless web

Key features
n o
>T4

design projects of all shapes and sizes,
from small brochure-style static sites

(3)

H E A D E R

AMI

>«i

( 3 >

Bold navigation and a

to large content-managed monsters. As a creative working with a wide range of clients (and budgets), I have quite a bit of experience in dealing with different types of websites and
content requirements. W H AT I ' V E B E E N DOING THIS MONTH:

strong use of colour serve to provide easy navigation and strong branding.

I I B S I I

©
Mark Jenkins •I have quite a defined style - a sort of mish mash of images'...mora Marcus Perkins

©:

P R O F I L E S

A random selection of
Ben Hawkes 'I'm surrounded by junk when at my desk - the more, the better'...mora Marcus Perkins London-bM«d phototographcr
Marcus Perkint t*lls us about his

...My approach is always flWme; take
time to understand the subj«ct so that I Marcus Perkins ...My approach is aiways ^e same; take time to understand the subject so that I Marcus Perkins

li&L

the newest listings on the site, complete with thumbnails for quick reference of style/content.

Working on a large site for a laser
manufacturer, a promotional microsite

humanitarian photography work. ...My approach Is always the same: take time to understand the subject so that I can do it justice. 1 believe in not hiding b e h i n d t e c h n o l o g y, b u t h a v i n g t h e patience and perseverance to capture the essential dignity of subjects...mora ...My approach is always the same; take time to understand the subject so that I Marcus Perkins ...My approach Is always the same: take time to understand the subject so that I Marcus Perkins ...My approach is always the same: take time to understand the subject so that t

for a national charity, and some initial 'look and feel' developments for a national pub chain.
THE SITES I'VE BEEN VISITING:

Vincent Chor>g

© F O C U S

A more detailed listings

'I think I've finally found my calling. Well, for now anyway',..mora

option for selected content. This
area would feature a creative

freelancer, perhaps, and provide them with free exposure. If
"T W » 20/40

C a r o l Ye h 'I use nature as my inspiration; I'm very influenced by Japanese
c u l t u r e ' . . . m o r a

(J)
Welcome to our virtual tsle. Mightylsland.
Yo u are here.

the site was charging people for listings, this would be premium space.
Mike Price
'Plumbers salaries are

[ Mightylsland Information [ Friends of Mightylsland [ Eteck Issues
This months

now looking healthy'
. . . m o r a

Welcome to our island, a creative paradise.
. . . m o r a

I J

©

http://istockphoto.com
I've heard it referred to as "the

designer's dirty little secret", and this
isn't far from accurate. Often with

© ;Something for the site
owners - a space to promote discussion among the listed
members and visitors. Content

COMMENT

Kirstie Reynolds
'I have become less

Covar.

sculptural, more
functional' ...mora

July's cover comes courtesy of Mark (f you would like to featured in a forth-comir>g is«u«, cilck hera.
Williams C h e e r s . of To a s t ,

tight budgets, imagery suffers, but this site offers stacks of royalty-free images for less than the price of a pint. www.myfonts.com/WhatTheFont This site is incredibly useful, and I use it quite a lot if t need a hand in identifying fonts, simply by uploading an image of the font I want to use.
Clever stuff.

that changes and encourages
interaction and return visits.

About the site
Listings websites are generally useful, providing quick and simple

© L N IK F E E D

reference material if you happen to be looking for something specific,
like an upcoming event, or a good local restaurant. This month, conversely, we decided to approach our task from the creative angle

A section that allows registered users to submit

their own news and links. This encourages potential
sign-ups and the overall popularity of the site.

and have a look at a listings site for creative people that could act as both a mini portfolio site for the creative freelancer, and also as a pool of potential talent for the rest of us to plunder. Our first thoughts regarded the branding of the site. A quick search on Google provided a vast selection of creative listings sites, some
plain, some strongly branded. We opted for the latter approach for our own project, feeling that a well-designed site with a bold, visible personality would make a memorable impact. We've concentrated on keeping the front page fairly busy, with plenty of links that take you straight into the content of the site; not wasting bandwidth (or time) on nonessential eye-candy (listings sites

© M E N UL S IT S
links into the site

Here, we can provide

without eating into screen space. It
http://threadless.com It's worth checking out this site when could be a list of

they have a $10 sale - great T-shirts! WHAT I'VE BEEN WATCHING: I've hardly watched anything over the
last month. I have far too much to do!

'premium' members, other sites or pages within the listings
site itself.

can get busy, so if we have to present a lot of information, we figured it should be for the content rather than the overuse of images).
With this in mind, the layout we've opted for is straightforward, and we've used the careful placement of colour, and a well-planned overall structure, to differentiate the page sections. In order to avoid a huge, vertically scrolling homepage, we've added a weighty portion of subpage links into pop-up navigation.

W H AT I ' V E B E E N L I S T E N I N G TO THIS MONTH:

The usual mix as supplied by 6 Music,
Ye a h Ye a h Ye a h s a n d T h e F u t u r e h e a d s

at the Carling Academy, Birmingham.

Practical Web Design 43

Website build-off Listings site

f
r \
About me:
After studying typography, I freelanced for five years as a graphic and web designer. I co-founded onIDLE in 1999 while completing an MA
in Interactive Media. I'm a council

new entry is a good starting point for debate
(even if if s not a new book)^ and there ^s an

opportunity to gather opinion by voting^^
Marc Peter
^ On-IDLE www.on-idle.com
Key features

© C A T E G O R S IE DN A V G IA T O IN

Borrowed Books - the inspiration for

the site. Top-line essential, yet out of the way buttons for Home and Contact. The book categories double as navigation buttons, giving one-click access to a specific list (or directory). This caters for future site growth, as categories can be added easily.

member of the International Society of Typographic Designers. I've published two books on Flash, and
I lecture at Online Labor and the

University of Art and Design in Zurich. W H AT I ' V E B E E N DOING THIS MONTH:

;Pepper - an existing client - wrote a story chronicling the life of a
football fan. It was such a success

© C L C IKT OV O T E

Offers an opportunity for user

that it was published for the World Cup in book form. I designed the book, cover and layout (you can order it from www.pepper.ch). I've also
helped to launch interactive

interactivity. I collect the votes in a MySQL database and, once there are enough, each book will have its rating revealed.
NEW BOOKS

calculators for the retail banking site
for the Saudi British Bank, and learned

that remote working has its limitations when factoring in a
three-hour time difference, Arabic
characters and Islamic weekends

Constantly updated information keeps the listings (and the site) alive. The information is clear and essential: thumbnail cover, title and author.

About the site
I like this month's topic. I'm a collector, and the brunt of many in-house jokes about my boxes of books, flyers, menus and mags. I'm precious about my books, which is fast approaching library proportions, but I'm also forever trying to work out who's borrowed what. 1 don't mind lending them, it's just that sometimes they don't come back. A place to keep a list of who's borrowed what would solve this problem, and I'm
even toying with the idea of a 'hall of shame'.

(Thursday and Friday).
THE SITES I'VE BEEN VISITING:

www.google.com/analytics I finally got an account and wow ~ what a great tool! I'm now spending mornings working out how it works and setting up client websites,
w w w . b o x . n e t

© A D DY O U RT A G S
text description.

The tags describing and categorising the books

are displayed. Visitors are invited to add their own tags, providing a more balanced opinion. The way the tags are displayed is visually more interesting than a

I'm actually going to build this site as a personal project: my personal book list. By putting all of my books In an online directory, I can
BOOKS

During research for a new client project, I came across this free 1GB virtual online storage facility.
w w w. t h i n k v i t a m i n . c o m

0

FAV O U R I T E

These are determined by the number of tags and

the level of popularity of specific tags. This serves as a technical showcase, but also reveals which books and terms are popular. The thumbnail cover

actually see what I've got. I can now blog or chat to other designers and friends about them. Taking inspiration from Del.icio.us tagging would be perfect for this site. I can then add interactivity and
motivate visitors to keep coming back by inviting them to

A very nice portal for designers talking to designers. Worth a visit every day, http://dei.icio.us
For inspiration on context-sensitive

image and essential information adds a visual
element to keep the site interface engaging.

input their own tags, too; even voting to get favourites, bringing life to what could be a boring A to Z.
I made a list of categories and tested that I can fit every book on the shelf into one: Typography,

tagging for this article.
W H AT r V E B E E N WAT C H I N G :

Ever the sucker for a freebie, I buy the Sunday Tjmes for the free DVDs.
Watched the Fritz Lang classic 'Metropolis'. It's quite frightening if you see how people saw 'our time' when the film was produced in 1927.
Also watched Kate Winslet's 'Hideous

© N IF O R M A T O IN

Each category has a necessary

Graphic Design, Branding, Art & Literature and Comics. I moved the other books to my wife's shelves (the London A-Z or Pasta Recipes has no

subdivision that's used in place of a search button: by author, by publisher, by designer and by year. The basic information (title and author) is displayed for each book.

place on this site). Further drilling down would
help me find a specific book through author, publisher, designer and year. A listing can quickly become stagnant if it's not updated regularly A new entry is a good starting point for debate (even it's not a new book as such), and there's an opportunity to gather opinion by voting. I was trying to work out how to design the listing without being cluttered, not so simple that it's boring, and reflecting my own personality. I settled on a grid that allocates specific positions for content/site functions: information, features, interaction, new, navigation and imagery. One thing became clear; this wouldn't

Kinky' and was glad I didn't fork out
to see it at the cinema. I'M A DESIGNER

W H AT r V E B E E N L I S T E N I N G TO THIS MONTH:

Vat I like beautiful images and, even on
a listings page, I'll find a space for them. The category image is different and relevant to every category, and gives the page a designed feel without diverting attention away from the actual content.

A friend gave me an Italian language course CD box-set. I'm making an
effort, but I find that I'm more
interested in Italian food than

Italian language.

be a typical search-engine-style listings page. O

44 Practical Web Design

WHO'S W WEBSITE?
Whatever size of business you are, you want your online presence to be effortless to set up and manage. And who you choose to help you do that makes the difference between peace of mind or
total frustration.

Hostway fulfil the Shared, Dedicated and Network hosting requirements of thousands of businesses around the world, based on our comprehensive range of Dell® Servers. Check out Hostway's range of services for business websites just like yours. After all, who's behind your websites is just as important as what you have on them!

/ T

A d v a n c e d

Web Hosting
from £l 8.95 / month*
Developers depend on our tried and trusted hosting architecture to
deliver a consistent service to their
customers.

Dedicated

-

Hosting
from £149 / month
Root Access Servers -

Enterprise Hosting
As one of the Top 5 hosting companies in the world, our Enterprise customers use us regularly for larger, more complex projects. Typically, these involve firewall, load-balancing or database clustering requirements, as well as more specific needs like Storage Area Networks (SAN), Virtual

A Flexible solution for power users Full control of your own server through Root access. • • • • Latest software/hardware specs Protected by managed firewall Add options as you see fit Full control over your server

Linux ■ Build and deploy powerful linux web applications and services with up-to-date support for PHP, MySQL, PHPMyAdmin & Python. Windows® - Next generation Windows® tools & applications such as ASP.Net, MS SQL™,
MS SharePoint Services™, MS

Private Networks (VPN), and highbandwidth hosting
Services include:

• Powerful solution without limits

• Flexible pricing Managed Servers easy as shared hosting We take care of full security updates, technical support and maintenance. But you still have full
admin-access.

Exchange™ are changing the way
organisations work.
* Gotd Plus Plan indudes choice of Standard POP3 email or

MS Exchange™, MySQL and PHP5 (Unux^ or ASP, Net and MS SQL (Windows), Urchin Advanced Analytics, FREE |:^one support 24 hours a day, and SiteControi - our powerful admin control panel. 30-day money back guarantee.

• • • • •

Managed Hosting Local/global load balancing Database Clustering Database Management Server and Application Monitoring

• Hardware

call US FREE on 0808 180 1880 * sales(ghostway.co.uk ■ www.hostway.co.uk
DNR • Email Hosting • Web Hosting • Ecommerce • Resellers • Dedicated Sen/ers • Enterprise Solutions

THE

h o s t w / v y :
HOSTING C O M PA N Y

^H O WT OS H O O TI T Pro techniques explained in plain
English - it's easy when you know how

'

Y-

"iU.

*

^P O S T S H O O TE D I T S Improve your shots with step-bystep tutorials on horizons, colour and more

hlf
^ S T U N N I N G S U N S E T S ^ Get amazing results with our guide
to bracl<eting, white balance and aperture

A great new monthly from the makers of...

Shoot great S AV E £ 1 landscapes!
Photography Focus Guides - Issue 1 or 2
b the customer: This coupon can be used in part payment against Photography Focus luides issue 1 or 2 (on sale 28/06/2005,25/07/2005) One coupon per item purchased, 'lease do not attempt to redeem this against any other product or issue as refusal to ccept may cause embarrassment. Voucher expires 03/08/2006 Offer subject to vailability b the retailer; Please accept this £1.00 coupon as payment towards a copy of 'holography Focus Guides issue 1 or 2 (on sale 28/05/2005,26/07/2005). One coupon er item purchased. Marketforce (UK) reserves the right to refuse payment against tcorrectly redeemed coupons. Claims to your Marketforce wholesaler must be made by 8/09/2006 A 2p handling allowance is credited for each coupon redeemed. upermarkets and Multiple retail groups: lease submit coupons to; NCFI Department 030, Corby, Northants, NNl 71NN y 09/11/2006 Coupon value OOOl p.
IFFERS VALID IN THE UK ONLY.

Your complete guide to better photographs...
The secrets of stunning depth and colour

Get exposure right first time, every time
Master the tricks of pin-sharp focusing Coasts, mountains, rural, urban & more Includes CD-ROM packed with software

Available at

WTHSmith
9 9 4 571 1 2 >

oupon value 0.001 p.
ICHNO; 110314442

Subscribe UK

UK SUBSCRIPTION OFFER

Only £12.49 everyS months when

Save 35
■ O

you subscribe by Direct Debit
Practical!

webdesign
•FREE delivery to your door
•Pay only £3.85 per issue if you subscribe*

•CD packed with great software every issue
•Never miss an issue

•60-day money-back
guarantee** - we'll refund

unmailed issues if you're not entirely satisfied
*UK only. Based on buying 13 issues on UK newsstand and subscribing by Direct Debit for 13 issues. We publish 13 issues of Practical Web Design a year. ^•Minimum subscription term is 12 months. If, at any time during the first 60 days, you are dissatisfied in any way, please notify us in writing and we will refund you for all unmailed issues.

GET THE LATEST PRACTICAL WEBDESIGN DELIVERED TO YOUR DOORSTEP NOW!

CALL 0870 837 4722
QUOTING OFFER CODE P015

OR VISIT www.myfavouritemagazines.co.uk/pwp/pOI S
OFFER ENDS 31 AUGUST 2006
Practical Web Design 47

design trends/cutting knowledge/creative inspiration/web
culture how to

redesign a site/pro
v i e w s
develop discover design M

fdesign develop discover
Tlie UK's number one web include the web's finest

net
help you keep on top of search engine optimisation, web careers plus advice on marketing and strategy.
Don't miss the new look

★The

redesign
issue

magazine iias undergone
a radical transformation.

designers, developers, technologists and innovators,
and revitalised content to

in-depth look at how best to manage website redesigns
and showcase some of the

After twelve years as the leading magazine for web enthusiasts, .net is moving
into a new era with a fresh

new lool(, an impressive array of contributors that

help you build great-looking websites using contemporary styles and technologies. For the first issue, we take an

hottest trends right now. There's also tons of practical advice on improving your site building skills with CSS, PHP, JavaScript and more.
Brand new sections will

>Hot Ik

issue - you'll find a special subscription offer inside.

styles for your site

friday 30 june

Practical

Tutorials

Helping you build better websites

Tu t o r i a l s
The best web-building projects, delivered with crystal clarity by the best web designers
might have changed editors in mid stream s t r e a m (palace ( o a i a c e coup? c o u d ? No, N o . just i u s t Dan Dan seizing the opportunity to move to our 'big sister' mag, .net), but we've still got our usual step-by-step guides, written by experts in their fields, to help you build
the best websites ever!

This month
50 Password-protect pages
with Dreamweaver
Protect sensitive web pages from prying eyes

O o n t'p a n c i!P a rc ia tlW e bD e s g in
Among the tutorials this

Sort out your
podcast with
PodServe
Set up and publicize a podcast feed without stretching bandwidth

month, we show you how to load images dynamically in
Flash, style data tables, add a

powerful PHP shopping cart, and keep your CSS neat while simultaneously catering for the quirks of Internet Explorer
using conditional comments.

60 Use conditional comments
witness
Clean up your CSS by separating out the hacl<s

Look out for our 'On the CD' logo for source files that can help you. Get stuck in!

Load images dynamically
with Flash
How to load content into a Flash movie

I ^ I Alex Summersby, editor O

72 Design attractive data
tables in CSS
style up and present tabular data using CSS

78 S^ll ^''om your site with
Zen Cart
Create a PHP-powered shopping cart

Your experts

r
Karl Hodge
A veteran journalist and expert in creativity

Craig Grannell
Craig Grannell is a writer and web designer who's been messing around with the internet for a decade.
Head over to www. snubcommunications.com to read more about him.

Kris Hadlock Kris is a designer, writer and contract programmer specialising in Flash ActionScript for clients such as Ted Airlines, IKEA
and Pfizer Check him out at www.krishadlock.com

Rob Buckley
Rob is a journalist and

Paul Boag
Paul is a founding partner
at web design agency Headscape. He hosts his own podcast and also
hosts the Practical Web

Rachel Andrew
Rachel is a director of

editor who's been working
on the web since before

web solutions provider edgeofmyseat.com. She bases her teaching on
common sense and the

software, Karl Hodge has been using Dreannweaver
since version one. He also regularly contributes to Computer Arts and .net.

even Netscape 1.0 came out. He's a regular contributor to MacFormat, .net and Computer Arts.

Design podcast, which is
now available on iTunes.

experiences she has in her own company every day.

Practical Web Design 49

T U T O R I A L : D RE A M W EAVE: r
Password-protect pages
Details
SKILL LEVEL
Advanced

Dreamweaver 8,

phpMyAdmin, PHP, MySQL and Apache

Dreamweaver 8.02

Updater This update is a must-have if you use
Dreamweaver to create server-side code or insert Flash movies. www.adobe.com/

support/dreamweaver/ downloads updaters.
html PHP Database

Security Updates If you use Dreamweaver
MX or MX 2004 to build

database-driven pages, the updater mentioned above won't help You need to manually update your server behaviours.
www.adobe.com/

go/30037473
Email Lost Passwords

Tutorial covering how to automatically email lost passwords to your
site's users. www.adobe.com/ devnet/dreamweaver/ articles/email

Password-protect pages

password.html

Dave McFarland shows you how to use a combination of Dreamweaver, PHP and MySQL to protect sensitive web pages from prying eyes

O c m ew e bp a g e s u s t jt a e r n '
suitable for public viewing. For example, you don't want strangers stumbling across the product catalogue; and your long-term career

lowercase and capital letters, such as 'A59gkdi00' or '7u57uaOI'.

general public to view the 'members only' i pages. The answer is to create an 'access level' for each user; something like 'admin', 'member' and 'guest'. With these in place,

web pages you use to update your company's prospects will be better served if your online
photos of last year's Christmas party are hidden from your boss. Fortunately, Dreamweaver provides the tools for keeping uninvited eyeballs from viewing your most secret web pages. To begin with, the first thing you need to
do is create a database of those users who

Additionally, you should assign different levels of access for your users. You may only have a few pages that you want to protect at
first - perhaps administrative pages used to

Dreamweaver enables you to limit page access to an authorised user who only has a particular
access level.

After the database is set up, you need to

As your site
grows, you may
want to limit
access to areas
update databases on your web server. But, as your site grows in complexity, you may want to limit access to other areas of the site, such as a 'members only' section. In this case, you won't want those people to view your database administration pages, and you don't want the

create a form that allows users to log in, and
add a Dreamweaver server behavior that

, handles the password val«lat.iicm procedure. To i password-protect a page, you apply another server behavior (this should be done for each page you wish to protect). You don't need to ; add a password to every page on your site, but

are actually allowed access to your site. The minimum information required is a username and password for each person. Usually, a simple email address will suffice as the username, The files you need to complete this tutorial
are available on the CD in the Dreamweaver Tutorial folder. and a random series of numbers and letters

the ones you do wish to keep secret have to be dynamic, server-side pages (filenames should
end in .php, .asp, .cfm, .jsp or .aspx). For this tutorial, you'll be using PHP.

is used as a password. The more complex the password, the more difficult it is to crack, so opt for a series of numbers and a mix of

Finally, you should be familiar with building
pages with Dreamweaver, and have access to a web server that supports PHP and MySQL.

50 Practical Web Design

Tutorial Password-protect page?

XAMPP for MacOS X
pt^i4<jAamin
Welcome to XAHPP for Mac OS X 0.5 !

Welcome to phpMyAdmIn 2.6.4'pl3
MyML «n loeathMt •• filOlacalh—t

phpMi
')& «**<» a ^ L«ngu«»»
MySQL UTF4 Unk«d« <uM)

Now you can start using Apache and Co. Firstty you should try »Status« on the left navlgatkvt to make sure everything works fine.
CO Co»ection

After testing you may take a look at the examples betow the test tink. If you want to start pro^p^mming PHP or Perl (or whatever;) please take a took at the XAMPP manual first and get nwe Information about your XAMPP lr>staUatk>n.
Goodhjck, K r i s t i a n H a r t r o f t . F t o r l a n P o l H n l & Te a m

Biorhythm
Cu«st Book Insunt Art

«(i>—'Bw^riiiwi q
SS Show PHP tntomaten

I*

,

Rash Art

phptnfeO
Phone Book To o l s

{Ch.09.L0gl

IC«]

^1

phpMyAdmm p^pSQLJteA<lmtn
web«ti2ef

Languages Er»gJish
0«utsth

I N S TA L L T E S T I N G S E R V E R A N D L O A D F I L E S
To begin, Install a testing server on your computer with a fully functioning

webserver, application server and database server (Apache, MySQL and PHP).
See 'Installing a Testing Server' on p53. Copy the 'password' folder from the

0C R E A T EAN E WD A T A B A S E

phpiVlyAdmin is a common way of managing MySQL databases. Most ISPs have

it, and many installations of Apache/PHP/WIySQL include it. If you used the instructions in the 'Installing a Testing Server' box, launch a browser and type: http:// localhost/phpmyadmin/. Name your database in the text field and click 'Create'.

Dreamweaver folder into the testing server's document root folder.
y loealhMt ^ ^ ••crvioe

Oatabas* ••cr*(OB ha« b««rt cr««t»d.

l a s P Q
Oat«t)Bse:

C^T^T ABASE MCfMCS :
]Ed«]{Cniata PHP Cod*) BtW Typ*®
Lan9«iWattM**
( M t o t l o n 1 OmhuMT

t

MCTMMM

Hh
N o t a b i t s f o u o d i n ( l a t s b a w.

vtmttD 1 WT
V A K H A K

_■

1 i»

i 1

L

,Pr ; no.™- -SI'
Wt{
T » W. t y » « ; ' MylSMil

' Mo.incnmMt M e 0 0 O □

IE ® S3 ~ [35

M c n t o a

J»l"
JB

IL.
(_

#1^ notnutJ

i i
< n

■ » o o o » o
o o o 9 □

tJ iww tibl« «n database tacraOB:
No tables foutMl tn ctatatose.

:pmMioid .1 VAMCHW

Nanw;

juMf*
14 (

j
Cff )

|aocaM 11 VMCHM J B 1 5
Ta b t o ocmRwntt:

IC
m

jiC

h

*1:0

o

o

©

NuirtbefofBaWa:

0

C R E AT E A N E W TA B L E The information for controlling who has valid access to a password-protected

page is kept in a table inside the database. Type 'users' in the Name field, type '4' in the Number of fields box, and then click the 'Go' button to add a new table to
the database.

(J)
"

A D D F I E L D S T O T H E TA B L E
Type the name of each field in the Field column: 'userlD', 'username',

'password' and 'access'. In the Type column, set the 'userlD' value to INT, and type '32' in the Length/Values boxes for the last three fields. For the 'userlD' field,
ensure autojncrement is set in the Extra menu, and also the primary key radio button.

^toeaWiMt A "

1

1

ftftp riinltt t o s q g
DaubBse:

^ Add a n«wUMr
U M r n a n . : H - - :

ilu~~
SERVER IN

Quick tip
SYNCH

KEEP YOUR TESTING
t M

PMwmd.

|||

M

c

r

M

M

t r i
. . . . . . . . . . . .

e
J BI t = i uMn

If you already have a
MySQL database at a

web hosting company,

Oletol pi1va*fM
T*»# 1

f

M

^ v.tu. ^

use the same database,
MnMatatfon

U M M

)

tiTD

!

1

ChMkAl Otm tk^krm

UndtMhM

table and database

^

mm unxr

0 Q Q

CMBH Aiani

0 Q

wdw

usernames for the

t m m

(if

version of MySQL
running on your local testing server.

1

ia> QfMH •nre □

WWX p nm Q

IMCm ulorj

0 nu □ cum nwow»T nnn Q sopnow iMto
MtK doDiiui m am >4

Q

Q mi9 tMRMSU uttt mun 0»«»KHCI» □ mam

A D D A U S E R T O T H E TA B L E

mz »iMu nit MOk ^0

li/O Click the Insert link for the newly created table.
Add values for a new record in the database; leave the 'userlD' field's Value box empty (the database

C R E AT E A N E W D ATA B A S E U S E R

fills this in automatically), type 'bigCheese' for the
username, 'openSesame' for the password, and 'admin' for the access field. Click the 'Go' button.

lliO Click the Localhost link at the top of the page; click the 'privileges' link, then
select 'Add a new User'. Type a name in the User name field, 'localhost' in the Host field, and the same password in the Password and Re-type fields. Check the Select,

Insert, Update and Delete boxes and press the 'Go' button at the bottom of the page.

p'-.-

f Practical Web Design 51

Tutorial Password-protect pages

Welcome to phpMyAdmin 2.6.4-pl3
MySQL S.r«S «mWng on tocatfiMl rootOtoMlttMt %SQ1. raloadMl

( 3 s q q

M c n i t D *

S t>M> (1 UMrt

StMW MySOL runhrm aifonnitiDn

SbOwMySOLayatoniwwMila* 0 ShowpmoaMS ®
ChMCtw Sate and ColitiDft*

^ Tlwiw / Style; _aygy| Q pIvWyAAnindwui
SQ 8^owPWMcMllwb

Skmg*

EnfliMS

R»loxt Ms^QL ®
P w i t g * .
O a « « b M « »

f5J Offid*) phpMyAdmn Hon
{C»>«nfl*Lofl] fCVSl

Alport

R E L O A D T H E D ATA B A S E P R I V I L E G E S
Click the Localhost link at the top of the screen to return to the main phplVlyAdmin page. In order for the new database user to have access to the database, you need to reload the database privileges. Clicking the Reload MySQL link gets the job done.

DEFINE A NEW SITE
In Dreamweaver, choose Site > New Site. Make sure the Advanced tab is selected. Type 'Password' in the Site name field, then click the folder icon to

the right of the Local root folder field and select the 'password' folder you copied into
your testing server's root folder.

0D E F N IET H ET E S T N IGS E R V E R
Click OK to close the window and create the site.

Select the 'Testing Server' category of the Site Definition window. Select
PHP MySQL from the Server Model menu, Local/Network from the Access

0S T A R TD A T A B A S EC O N N E C T O IN
Preferences Category
CeneraJ

menu, then click the folder icon to the right of the Testing server folder field and select the same folder from step 01. In the URL Prefix box, type: http;//localhost/password/.

Open the file 'login.php' from the Files panel. Choose Window > Databases to open the Databases panel in the Application panel group - Dreamweaver's control centre for adding dynamic, database-driven features to your web pages. Click the 'plus' icon at the top-left of the Databases panel and select MySQL Connection. This opens the MySQL Connection window.

^ Quick tip
A LWAY S ACCESS USE LEVELS
Conncctton tv

Accessibility

MySQL Connection IW; <MwSKi«toi~

Code Coloring
Code Format Code Hints

Show attributes when inserting:

Make sure you have at
least two levels of

Code Rewriting
MySQL Mfwr: ktamasi
Usernj Password: DaubAst: sccmOt

access, 'admin' and

133"

'member', so that you can limit access to your
ultra-secret pages to an
even smaller list of users.

Copy/Paste CSS Styles File Compare File Types / Editors
Fonts

^ Form objeas ^ Frames ^McdU 0 Images

Highlighting
Invisible Elements

Layers Layout Mode
New Document Preview in Browser Srte Status Bar Va l i d a t o r

D ATA B A S E C O N N E C T I O N
Type a name in the Connection name box: use any name you like, but don't add spaces or non-

alphanumeric characters. Type 'localhost' in the MySQL
server field. Type the name and password you entered in step 06, then type the database's name in the last box.
Click the OK button.

0 S E TU PF O R MP R E F E R E N C E S

Choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac) to

open the Preferences window. Click the Accessiblity category and make sure the Form objects tickbox is checked. This will make it easy to add labels to the form fields you'll be adding in the next section of this tutorial.

52 Practical Web Design

Tutorial Password-protect pages
——— 0

k b g : e 9 e : a B i 8 S o i B Q BSlaisJala'* BUILD A LOGIN FORM ■ 3# »t »1 0 a a.

Login Required
N O ! « « ^ 4 i B

i t

INSERT FORM On the 'login.php' page, click beneath the 'Login Required' headline. Insert a form by either selecting the Form category from the Insert Bar and clicking the Insert Form button, or by choosing Insert > Form > Form. Use the Property Inspector
to name the form 'login'.

ADDAUSERNAMEFIELD Add a text field to the form by clicking the Text Field button, or choose Insert > Form > Text Field. Type 'Username' in the Label field, and check the 'Wrap with label tag' and 'Before form item' buttons. Click OK. Click your text field and,
in Property Inspector, type 'username' in the TextField box.

i

ra..

!5r-

1 M: * 1 <5 B. la.

O Installing a Testing Server
The simple way to install a powerful webserver on your desktop A testing server lets you run a
Windows or Mac desktop computer. Your best solution is an all-in-one package to install the required software. XAMPP is a cross-platform solution (Windows, Mac and Linux) that's quite popular and works well. Download
the installer from the XAMPP site, and double-click to install the server components on your

^ Login Required

full-blown webserver, application server and database server right
VNct'tAiX

on your desktop. This is a great
way to develop dynamic, database-driven web applications. Because you can build and test these complex pages right on your own computer, you won't suffer the delay associated with sending

I;« o * * ft a

files halfway around the world
to your web hosting company's

computer. The installer places all of the required files in one location on your system (C:\XAMPP on Windows, or Applications:xampp on Mac), so your system isn't
cluttered with thousands of files

0A D DT H EP A S S W O R DF E IL D

Now you need to place an empty paragraph below the field. Either click the
<label> tag in the tag selector at the bottom status bar of the document

server for testing. Even though the Apache webserver, PHP programming language and MySQL database server are industrial-strength technologies capable of running the most demanding web applications, they're not very

window, or choose Edit > Select Parent tag. Press the right arrow key and hit return to create a new paragraph. Repeat step 06: use the label 'Password' and name the field 'password.' Click the Password radio button in the Property Inspector.

scattered wildly about. The best
news of all is that XAMPP is

absolutely free. Visit www. apachefriends.org/en/xampp.
html for more information.

difficult to set up on a regular

Login Required

Support XAMPP, Make A DonattonI

m

.% O ^ ♦ a' 4 i B
■r y »u • PtHMi4 iltKMtasti HD' » 1^ '

If you enjoy using XAMPP and would like to help in carrying some of the financial burden of the project, we would greatly appreciate your voluntary support payment. Please note that this is nc^ considered a tax-deductible
donation.

D O N W T C

□ XAMPP
ADD A SUBMIT BUTTON
Do the same as in the last step to add an empty paragraph below the password

form field. Insert a 'Submit' button by choosing Insert > Form > Button. Select the 'No label tag' radio button in the 'Input Tag Accessibility Attributes' window and click OK. Use the Property Inspector to change the Value of the button to 'Login'.

Many people know from their own experience that It's not easy to install an Apache web server and it gets harder If you want to add MySQL, PHP and Perl.

XAMPP is an easy to install Apache <fetribution containing MySQL, ^ XAMPP offers an all-in-one, simple to implement cross-platform solution

Practical Web Design 53

Tutorial Password-protect pages

© A D DT H EL O G N IB E H A V O IR

RESTRICT ACCESS TO A PAGE
Open the file 'secret.php' - this is the page you'll add a password to. Bear in mind that Dreamweaver can only password-protect dynamic pages (those that end in .php, .asp, .jsp and so on), not regular web page files ending in .html. From the Server Behaviors panel, choose User Authentication>Restrict Access To Page.

In the Application panel group, click the Server Behaviors tab. Click the 'plus' icon and select User Authentication>Log In User. The first three options should

already be set; choose the name of the connection you created for the 'Validate using connection' menu. The other options should match the above image.

Restrict Access To Page
: o K '

R«stria based on; Q Usemame and password @ Username, password, and access tevel
Select level(s): i ( Define... ^

( Cancel ) ( Help )

(JBi
Duisaulamt blandtt Lofam . tinoduotut

T O P S E E C R E T: F O R Y O U R E Y E S O N LY

Lonm ipsum dolor «ft amet, consecletuer adlpisdng elK. sect diai «ncKhint ut laoreet dolore magna alk^uam erat volutpaL Ut wtsi«

nortrudew

Lo»Outui.r

n ad minim veniam, quit

L^outwlwn 9 UnkcM

m s m :

If access denied, go to:

J ( Browse -. ^

n o a ^ e x a Duis tllumdokKa

btandii prai ~ U)wn ipaum dotor srt amet consactetuer adlpisctng alit »ed diam nonunvny nibh aulsmod tuKidunt ut taorset dokm magna aliquam ara( volulpat. Ut wiai anim ad mtnim vaniam, quis noatrud axerci tation ullamcofper susdptt fobortis nisi ut aliqulp ax aa commodo consaquat
HiiK MiMtm

<*'>

wAl

Mim

Imim

«

Wninrin

hAWfmrit

«u.«u

In

vulniitn*)

uaI

»

-(t-

JTGI

r m n m i ]
T>

DEFINE AN ACCESS LEVEL

1 1^4 in Restrict Access T o Page, check the second radio button and click 'Define'.
in the database table's 'access' field. Click the browse button and locate 'login.php'.

The Define Access Levels window appears. Type 'admin' in the name box and click OK. This defines who can access the page: the value 'admin' must match the value

0A D DAL O G O U TL N IK

On the web page, click after the word 'Only' in the headline. From the Server Behaviors panel, click the 'plus' icon and select User Authentication>Log Out

User. In the Log Out User window, ensure the first radio button is selected; click 'Browse'

and locate and select the file 'login.php'. Click the OK button to apply the behavior

f Mr ore info
NEED MORE HELP? Setting up your system

4i- o ^ #hnp://127.0.0.1/passwDrd/TMP2s72zabkv.php
lAlCooldM* M^C5S^ QForms- Omforrrwtkin* l^MtcdUneoui•

"©'Kf

-

(JP

T O H S E C R E T; F O R Y O U R E Y E S O N LY

Lorem Ipsum Dolor Sat
Lorem ipsum dotor sit amet consectetuer adipiscing eiit sed diam nonummy nibh euismod tirKidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit iobortis nisi ut aiiquip ex ea commodo consequat. Duls autem vel eum iriure dolor in hendrerit in vutputate velit esse molesde consequat vet ilium dolore eu feugiat nulia ^dlisis at vero eros et accumsan et iusto odio dignissim qui btandit praesent luptatum zzril delenit a Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam t^onummy nibh euismod bncidunt ut taoreet dotore magna aliquam erat votutpat. Ut wisi enim ad minim veniam, quis nostmd exerci tation ullamcorper suscipit Iobortis nisi ut aiiquip ex ea commodo consequat Duis autem vel eum inure dotor in hendrerit in vutputate velit esse molestie consequat vet ilium dolore eu feugiat nutia facilisis at vero eros et accumsan et iusto odio dignissim qui btandit praesent luptatum zzril deienit a Lorem ipsum dolor sit a
ut laoreet dotore ma

for working with serverside web pages isn't a

walk in the park. If you find you need more help
setting up a testing server, and getting
Dreamweaver to talk to

it, get a free PDF tutorial

discussing the process at;
www.sawmac.com/

pwd/php

ing elit sed diam nonummy nibh euismod tincidunt It votutpat Ut wisi enim ad minim veniam, quis nostmd exerci tation ullamcorper suscipit Iobortis nist ut aiiquip ex ea commodo consequat Duis autem vet eum iriure dolor in hendrerit in vutputate velit esse molestie consequat vet ilium dolore eu feugiat nulla fecilisis at vero eros et accunrtsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a

PREVIEW AND LOGIN
Save the page. Press the F12 key (Windows) or Ctrl+F12 (Mac) to preview the page. You won't see the 'top secret' page - instead, you'll be taken to the login screen. Type 'bigCheese' in the Username field, and 'openSesame' in the Password field. Click the 'Login' button.

0L O G O U T

Once logged in, you'll see the 'top secret' page. In fact, you could, at this

point, access any other password-protected page on the site. To make sure no one else gains unauthorised access to password-protected pages after you leave, click the 'Log Out' button. This returns you to the login screen. O

54 Practical Web Design

Iynda.com

Online Training Library
Great for visual learners

Video-based tutorials that provide

software training on products from Adobe, Apple, Macromedia,
Microsoft and more.

New tutorials published every month
Unlimited access to over 14,000

W

-V

kH:

^

\

'

tutorials on hundreds of subjects.
No long term commitment

Subscriptions start at just $25 a month.

Try it for FREE today!
www.lynda.com/freepass/PracticalWebDesign/0706

T U T O R I A L : PODCAST" N G
Sort out your podcast with PodServe
BPodServe
ft 6ia IN JrtFflH

Details
Beginner iTunes, and any modern browser capable of supporting Ajax

TOOl

my podcMts

podserve

directory

about

faq

blog

logout

create new podcast * social podcasts * public podcasts

a
ALPHA VERSION!

Practical Web Design is the UK's l>est magazine for web building tutorials and advKe (covering the likes of HTML, CSS, PHP, MySQL, Dreamweaver, Flash, fireworks, an Photoshop).

Yo u a r e p a r t i c i p a t i n g in l^e alpha testing of PodServe. Help us by submitting bugs
and win a t*«hirtl

edit I invite contrttxitors j edit podcast mles | delete | Invite listeners | add a new show | re<fuest a podcall

m s s n ^ s m i ^
Wikipedia Just about everything you
could ever want to know BIG IN JAPAN TOOLS

Qi Practical Web Design tells all (1 subscribers) by Practical Web Design ( 1 show) Q
Typa: Sodal Podcast (l contrtbotore) Category: Entertainment Tagged as: podcast webiog Social: add to delJdo.us | digg it | add to ma.grtolla ( report podcast
ElfURL InstantFeed

about podcasting, from history to standards spec. http://en.wikipedia. org/wiki/Podcast podCast 411 Tutorials, resources and linl<s to alternative sites, plus interviews with other
broadcasters about

i

PodServe FrankenFeed

How to use PodS«rve to create a podcast artd share It with others

SocialMail Show titi*

Description Learn how to use Pod5«rve to add podcasts to your site.

F e e d Va u t t MailFeed

podcasting. www.podcast411 .com Apple
The home of iTunes and the iTunes Music Store.

Q Getting to grip with

Show added on 06/08/2006 by Rob Buckley. Total time of this podcast: 00:18:51 I ASTFSl KhVIKW

podc^fs 8

QwikPing
FoneFeed S t a t s To o l

Sells GarageBand as well, which includes a 'podcast recording studio'. www.apple.com

Sort out your podcast
with PodServe

• PodServe provides a simple way to manage a feed and publicize It

Rob Buckley demonstrates how to set up and publicize a podcast feed without stretching your bandwidth limitations

© e w s p a p s e rd o ,T tV Is h o w sd o ,tI
even educated ninja do It (and It isn't falling In love). Podcasting
has become a massive success

For any podcast, you need what's known as

necessary for all your subscribers to download
those files and it soon becomes clear that

a 'feed'. This is an XML file that obeys a modified version of the RSS standard, and goes
on to list all the shows available to download.

i podcasting can be quite an expensive pastime.

because It's such a simple Idea, ifs like Sky+ for Internet radio: you look through the programme guide for an Interesting show,

A podcast application needs this feed so that it

Then there's formatting the feed to make it look good in a podcasting application, formatting the podcasts themselves,
and publicising the feed to attract more

titi I

and if you find something, you simply click
on the big Subscribe button. Each time a new programme becomes available, your humble podcasting application downloads it ready for you to listen to it whenever you want; and, if you have an MP3 player, wherever you happen to be. So, if you have something to say or something to play (if you're musical) and you expect there will be more to come, a podcast is an ideal method of providing more for your users, and will give your site extra oomph. The mechanics behind podcasting are more complicated than they may first appear, but in this brief tutorial, we're going to make it as simple as we can by using an online service
called PodServe,

If you have something to
podcast IS ideal
can find out where to download files from, these together isn't such as easy task unless you have an application to do all the hard work for you. You also have to find somewhere to store your podcast files. Most podcasts use the MP3 file format, which, at a few megabytes each, won't take long to fill your server quotient. Figure in the bandwidth

subscribers (and visitors) to your website. There's no escaping the fact that this takes a lot of effort and technical expertise.
The great news is that PodServe takes care

say or play, a

of almost all of these issues. All you have to do
is tell it about your podcast, upload all of your

55

i 'broadcasts' and it generates the feed for you.
You'll find yourself listed in directories, and PodServe will also help you publicise the podcast, clean up your podcasts and allow others to collaborate with you by uploading their own podcasts to your feed. It's free, and all you need in order to be able to use it is a
h u m b l e w e b b r o w s e r.

what their titles are, and so on. Putting one of

You can listen to our very own Practical Web Design podcast by visiting www.pwdmag. co.uk, and you can find us on iTunes, too.

56 Practical Web Design

IS uSisaa qaM |e3!J3eid

s^seDpod ppe jo aiaiap 'Aj.!poLU oj ,mol|S Mau e ppe, pue ,0j0|0p, ',i!p0, SB L|Dns suo!;do 0sn os|b ubd noA •06ed Sjn; oi >|3eq auj03 noA j0A0U0L|m p01.epdn 0q ||!m s|!B}0p snouBA :06Bd lunoMB jnoA uo jeadde a^ou p|noL|s p00^ jnoA •0Aj0spO(j oj b;bp am i]ujqns 's6bi jnoA paja^ua aA.noA ajuQ

Luaijj :isa66ns-ojnB ||!AA aAjaspoj ';sjxa ApBaj|B Aaqi j.! SBLULUOD Aq paiBJedas 'a>|!| noA SB Aublu sb ja;ua uej noA

■s6bi 3!^pads asoqi joj. saqDjBas u] jeaddB o; paa^ jnoA
MO||B asaqi isBDpod jnoA jo^ s6bi aiuos jajua pinoqs

3IAIIi9Nia33d

noA 'AjBuiujns E euua^ua Aq puB '(Ajopaj]p s.aAjaspoj u] euueaddB iSBDpod a^i juaAajd ||!AA uogdo
isa; aqi) suojido jaqjo Aue 6u!>|3aqD Jayv

3fneA(>»»d

DVi

D N I AV I d

l t e w { » p o s p M j j u B j s u r

•paiMBis ia5
o; n^Dpod >I>!P 11 ^ 3
SKXU NVdVr Kl 9(8 MtAB WtM u uags ptw wipod • aw ,

auoi|d jno/^ pjo:)aj jj|M %] pue noA ){e:> aAjaspo<J
ueD noA 'umo jnoA

8 {smoMs 0 ) u6is»a q»M Aq (u»qM>sanK 0} lie sim u^s»q q»M icattau,

luaiudmbd 6u|pjOD3J Aue DAey l,uop noA

K

,

U|M

{HI*

» dfCH •»*4»s{»d io cqdi* »m U) 6ufl»<t!3{>Jtd »Jt n«A He uns »q wm pt9) a^u. -jsnpod sim) )fwqe qjoiq c pp« oi aj»u )pio iNOtSMAW«nV

E L
t H o < $ ) a A < n w w

NOdyWMOiNI ISTHMd

*jswpod 3tiqn<t . q»wp«f |«i»s > }s*>p«l m

■suojpnjjsu! jaqunj. BujuiBjuoj nBLua UB aAjaDaj ||,noA mq 'qDnuu op i.uoaa .saunn, 6u{){3|q suojido ,U! isp, aqi 6u|sn Aq u| pa;s|| )a6 ||,noA sauopajip q^iqAA aujiuja^ap

sauo 6u!;sajaiu! aqi oi ;a6 oi s;sBDpod ^ueAaiajjj q6nojq} apBAA oi SABq l,uop
sauopajjp 6u!SM0jq a|doad jBqi os Ajo63;b3 b >|D!d oj paau ||,noA nuauj Ajo6aie3

UBD noA Ajopajja D!Sn|/\| saunn aqj uj puB ai]s aAjaspoj aqj uo AB|ds!p
IIIAA }eqAA Sj Sjqi .'paaj. jnoA joj. uooj ub >|3!d noA sia| uounq yy JBao^ aqi

S i D V d 3 H i i s n r
j o o X W S PMulMOd 6UW>|IM{>

(J)

uAAop-||nd aqj eujsn Aq oj 6u]pB0|dn aq ||,noA Ajo6a;BD ;bl|aa aAjaspod ||ai uaqi 'paa^ jnoA joj. aiuBu b ja»ua 'uaajjs uojiBuijo^ui ;sB3pod aqj uq 310HN039ld
( O e ^ q O S p j W d M O d

V

OINIII
V tuWH

ONIllId

0

luiNsAs 6u(ieMda M M V O S .

»J*K»5 UMlQ i m p o j .

p e a j | < * W

pMjItaw Vi#AP»^

p a a j i u n s u i

MR i» m }ou aMjtcsi« ${ isnpod sim O <i)cr>p«d ;<r>PV □ :suOHdo
i t i n i i a p M j u a ) | u c i j

l Y i f v a

»initN

Y

Muat>s

(WW| 6oipnpui) aj9tjMAuv i.uoo ~

•AJ*$P04 ^

»onii 0 ,u! u6is»a gsM ir>tl*Jd;

09P0^

rxxu NV4vr n« oia

. STOOJ. NV^ Nl 0I«

«

»tM

put

lit snai u6(S»o q»M l»3iWid
• Mr« pu* sO<iq 6uf»|u<C|nf Aq »fl (t)«H •WSSPOd JO Suitwn K» Wfl w

(It «|}»J u6»$ao q»M lesiPe-M
IN0IS*3A VHdTV

N0lJ.rW«)iN1

ISYDOOd

6iJ!}«t|3Ri«» uc noA

NOiXVWUOJNI ISVDQOd

CI
stsffspod Stnnd . s(*opod i«i70f . ttnpod m»u a)«»j3

{NCHsnA yH<m.

stjqnd . s)»e?po<l |«i»o« . )««3P«d mm

f fi H
auoAjaAa o) uado s| :^SE:}pod Djjqnd e ajiqAA ':^SB3pod |B|Dos B oi ppB UBD paiiAui aA.noA a|doad A|uo 'j.usaop jse^pod jbujjou, b anqAA Ajopajjp aAjaspod aq). u{ a^jsqaAn jnoA aiooiojd o) pasn aq ue:> '>{U!| a)|sqaA/\ jnoA puB 'sBbiu! poo6 V ino ya| aq ub3 sijBiap |Buosjad inq 'ssajppB nBLua ub apjAOjd

'paa^ jnoA oj siSBDpod pBO|dn sjaq;o s}a| jsBDpod piiqnd, b jo ,|Bpos, b :adAi B >|D!d oi paau noA paa^ ;sB3pod ;sj!j. jnoA aiBajj ubd noA 'uo]iEJiS!6aj jayv BdAllSVDaOd V)IDId

o; aABq noA snBiap jnoA jajua puB dnuBjs/jasn/uioi nBBiq'SAjaspod
//:duq o} og aAjaspod uo paa^ iSEDpod b aiBajD oj lunoDDB ue paau ||,noA

3Nn

9NllSV3aOd

3H1N0

N9IS

n o o i N v ^ v r w M i

««»«(kowuaqm «n <«

S»CT3pOd r»POS

Ei

)

——

SAJsspOcj L|1!M iseDpod jnoA mo jjos leMO^nx

Tutorial Sort out your podcast with PodServe

I intrp««CMt* I
« podost ' MO*! podcMtj • pubHc po4cHts m po<lc«t • MC(«t poctcara < public iMdutts

Invite contributors to join your Social Podcast.
S«ci«l PodCMB tvptcaily con»M sf two or more cantributort «ho witi InMrt shows WO »DW (KK»tasti. Ywj c»n Q)«tr shows or allow lh»m to post wrBwut

ALPHA

VStSKWI

To g

»rt

partMpatlrtq

lnth««lph»tMtin« of F'QtfScrve, H«tp ^ by submitbog bugs

CHdc hen to add a blurb about tnis podcast. The text wUI be seen by al
u s e r s .

ALPHA VCKSIONf V»u are parbapattog in the alpha of PodSarve. Maip ui by tubmlttlr>g bugs and nrtnat-ahlrtt

o o o

Salcct a social podcact: BIG IN JAPAN TOOLS

■I C I N J A PA M r o O l ^

|dan.olive'r@^tur^
Come and contribute to the new Praaicdl Web Design podcast

Practical Web Deaign telii aR (o subscrilMrt) bV Practical Wab Dasign ( o abows) g}
EirUAL

Hm to UM PMServe to ottbe a podcast and share n tvftti oQiars
F r a n k a n F a a d

S0(l*IMltil F««dV«uft K«i«rcctf

t i t e f w v : e n t a r t a m m e r t Ta t a « d a t a t digs It I add to ma.gnotla t t«port pi

E i n m i .

I n s t a n t f e a d

S o c t a l M a l l

<lwlkP»09

F e e t f Va u l t
H a i > F « * d

QwlkPIng

D ' YA WA N N A B E I N M Y G A N G ?

^WM If you have a social podcast, you can use 'Invite contributors' to ask others to
join you in uploading podcasts to your feed. They may refuse, but there's no harm in asking. If you've decided to change your podcast to a social podcast, you can
use the 'edit' option on your account page to alter the settings accordingly.

0S E L L N IGY O U R S E L F

Before you begin publicizing your podcast, you need to provide a description of it. At the top of the screen, move your cursor to the text that's inviting you to click it, replace the default text with a description of your podcast, then click OK. This text will appear in PodServe and the ITunes Music Store.

ALPHA

VERSION!

Praoical Web Design i» the UlCs best magazine Iter web buiWmg tutorials artd MMoe (coMring the Rkes of HTML, CSS, PHP, MySQU Dreamweaver, Flath, nreivonu, an Photoshop).

BIG (H JAPAN TOOLS

Practical Wab Daslftn taUs aR (l subscrlbera) by Practical Wab Design (1 show) T

I Gvtting to gnp DfKh odcarts t

»

ute

PgdStrv*

to

add

psecMCt

u

H a t t F M d

Qw1k?w<9
F « n * f c a d

LASTEST REVIEW

0O NW T I HT H ES H O W

From the account page, click 'add a new show'. In the dialog box that

appears, you can select the MP3 file you want to upload, give it a title and description, and tag it appropriately so that it will appear separately in directory and category searches. Click Submit when you've finished.

Provi ded th ere' s nothing wrong with it, the podcast wil now appear in the a Ky P O D P E O P L E

^ main feed list. You can delete or play it by clicking on the appropriate icons. It

won't have any reviews yet, but once people have started listening to it, you'll be able to scroll down and read any comments other PodServe users might have made.

m — ' ^ Quick tip
PODCAST RULES RULE!

A t M A V B t S K M t

If you're creating a
social or public podcast that other people can contribute to. don't

forget to let
contributors know what

Op«n)m«9(*nNcwW»fMlM' O p « n < m « 9 « i n N « w Ta b Sm image to *tM«mlaads' Add lm«9t to IPhoco Ubrvy Copy Mrw9e AMt««s Copvlma9r LASTEST REView C«py Link HTML Tag

they can and can't do using 'Podcast Rules'.

THE MISSING LINK

HHI Adding this podcast feed to your website is
straightforward. The standard orange RS5 symbol has a link to the feed, which you can copy and link to by using any text or visual element on your pages. You should also provide an easy way for someone to copy the URL from your web pages, so that they can paste it into their podcasting application.

MAKING IT WORK WELL WITH ITUNES
Things can be made easier if you think most of your users will have iTunes. Even though they could paste the URL into ITunes' 'Subscribe to podcast'

dialog, if you change the URL's protocol from 'http: //' to 'pcast://', clicking on the linked element will open iTunes and subscribe them without them having to do anything.

58 Practical Web Design

Tutorial Sort out your podcast with PodServe

[ill PODCAST DIRECTORY

GO TO THE

There's only one way to add a podcast to the

iTunes Music Store and that's by manually using ITunes,
Click on Music Store in the source list, then look down

the left-hand side of the main page until you see Podcasts, Click on that. On the next page, in more or
less the same place, you'll find Submit a Podcast.

O Enhancing podcasts
Sound good and look good - it's all in the details All MP3 files have metadata tags. These provide information about the MP3 file, including the artist, album, lyrics and composer, but they also have an album artwork field. Most podcast players will use these metadata tags, so unless you fill them in somehow, your podcast will look poor when it's actually played.

The easiest way to change these fields and add artwork is by utilising
iTunes, which is available as a free download for PCs (Windows) and Macs. Before uploading your podcast, simply import it into iTunes, select Get Info from the File menu, then fill in all the fields. Don't forget to add some artwork; you'll need something that's square, and preferably
IDENTIFY YOURSELF This is why PodServe can't automatically submit your feed to the iTunes Music Store. To prevent spamming, Apple requires you to enter an Apple ID to submit a podcast. You can get one of these for free if you haven't already got one (it's the same one you use to buy things from the Apple Store or from the iTunes
Music Store).

at least 150x150 pixels.

Alas, if you want to enhance your podcasts even further with chapters and hyperlinks, you'll need to use the AAC format that Apple uses, but PodServe doesn't support this yet. iTunes is free and very useful anyway, so it's a good all-round choice as an MP3 tag editor and media manager.

IpagglnBassEHsail

(2) Review Podcast
i WirTepltMed
RtuntlyMavtd

i|Te»2$Met(l1(v*4
Store i t t c l U t e d

C«nn9 to gfip wUh podc«»ts Summjirv into - Option* lyrtcs Artwork

Namt

Wtb

Oc«^

t«Hi

111

rtr Added M0ltP1*y«d

to'sHp
Aftltt
Practical Web Design

"
~ "
V M T

AMhof' KoMMfctey SKirtOtKrtpnon How tc UM fttdSifvc re cfM* a | Ung Detcrtption H«w to us* fodS«fvt to crcjic < 1

2006
Track Nv

M

and

thtrt

wtth

othtn

Atetiffi

Practical W«b Design letls alf
M tnd ihirt K wtth athm

!t«h»ci*len

Mi " i n

Eng«ih How to use PodServe to create a podcast and share ft with others. In this
t t c k a i i

podcast. we look at the categories PodServe uses. Ccnr* _
P o d c a s t

'8 Cfatof.
( C»>al ^ wai

REVIEW THE DETAILS Apple will now grab your podcast's details and verify that everything's all right.
You need to choose a category and subcategory for your feed, so that it can be

filed in the podcast directory. Once you click Submit, you have to wait while Apple reviews your podcast, but if it's approved, it will appear in the directory fairly quickly O

• Metadata tags will ensure that your podcast looks good and is informative

Practical Web Design 59

TUTORIAL: CSS
Use conditional connments with CSS Details
SKILL LEVEL
Intermediate

fite;Wtocalhost/Y;/Desktop/PWD31%2... Fie Eitt View Boo)lITl^rks Tools Help

9

HEADING
Lorem ipsum dolor sit amet, consectetuer adipisdng elit. Morbi commodo; ipsum sed pharetra gravida, ord magna rhoncus neque^ id pulvinar odio lorem non turpis. Nuilam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
fadlisi. Nulla libero. Vivamus

ypen Surf the full Web with your mobile phone

a Y;\Desktop\PWD31 codeVfor the a)\con... - 0 <}>Back ' ^ ®

i4ini I Get Opera Mini from http:/^mini.opera.com

A text editor or your
HTML editor's code

Q

New page

^Search

»; J Address " 3

1

^ ^ Search • »

view; Photoshop

HEADING Lorem ipsum dolor sit amet, consectetuer adipisdng elit. Morbi cDmmodo^ ipsum sed pharetra gravida^ ord magna rhoncus neque^ id pulvinar odio lorem non turpis. Nuilam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Altquam erat volutpat. Sed quis velit. Nulla
fadlisi. Nulla libero. Vivamus

pharetra posuere sapien. Nam
consectetuer.

HEADING Lorem ipsum dolor sit amet, consectetuer adipisdng elit. Morbi commodo, ipsum sed pharetra gravida, ord magna rhoncus neque, id pulvinar odio lorem non turpis. Nuilam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat, Sed quis velit. Nulla
fadlisi, Nulla libero. Vivamus

Mozilla

Firefox

0 ® ®

Edt Sew So Bookmarks loots Uelp O O
□ fi«///V;/DMlct_nt/«»eb_pageJitml X Q

W3Schools CSS

A thorough CSS section that helps you learn how various CSS property values affect your designs.
w w w. w 3 s c h o o l s . c o m /
C S S

pharetra posuere sapien. Nam
c o n s e c t e t u e r.

pharetra posuere sapien. Nam
c o n s e c t e t u e r .

HEADING Lorem ipsum dolor sit amet, consectetuer adipisdng elit. Morbi

jfseaity
A List Apart A regular web magazine that explores CSS layout
and other web-oriented

commodo, ipsum sed pharetra gravida, ord magna rhoncus neque, id pulvinar odio lorem non turpis. Nuilam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
fadlisi. Nulla libero. Vivamus

z\ i]| Done
Internet

design tasks. www.alistapart.com
W 3 C C S S Va l i d a t i o n Service

•You can get
CSS-driven

Check that your CSS is valid and tagged correctly http://validator.w3.org

Use conditional comments with CSS
Craig Grannell presents a way to ensure that your CSS rennains clean by separating out the hacks used to cater for buggy browsers

layouts to work
In Internet

Explorer without hacking your
main CSS file

© e ba s n td a d r se v o e lo s w ly lb u t
surely as changes are made to
the backbone of the Internet. the recommendations that form

screwing up many CSS layouts. Thankfully, usage of IE5 has dropped significantly of late;
even though you should still test that content is accessible with it, it's arguably acceptable to

■ entirely clean CSS if you use it. Also, there's

another version of IE on the horizon that may
come with its own set of problems, although it , will fix many existing issues. Soon enough, you'll be adding hacks for versions 5.5, 6

Over time, we've seen tags and technologies come and go. Browsers evolve, too, but they have an unfortunate tendency to not keep pace with the rapid and ongoing changes to
web technologies.

now class this seven-year-old relic as obsolete, and avoid tearing your hair out attempting to
hack sites to work in it.

and 7, and trying to juggle them all from
within a single style sheet. With all of this in mind, it now makes sense to create a style sheet that works in standards-

However, even IE6 - while superior to

previous versions - still trips up when it comes
to some elements of CSS. For example, it

The nnost notable case Is Microsoft's Internet

compliant browsers (and will probably work,
i more or less, with IE7), and separate out the hacks. It's possible to do this by using conditional comments. Here, we show you
what conditional comments are and how to

Explorer, which tends to be the bugbear of every web designer thanks to each version having fairly major bugs that cause layouts to
not work as intended. Most of the other big

ignores the 'fixed' value for the CSS 'position' property; and unless you're willing to dabble in complex proprietary code, Microsoft's browser
cannot deal with PNG images that contain true

players, including Opera, Safari and Firefox, tend to play ball, but they're used by less than
a fifth of the web's total audience. Ultimately,

transparency. (It instead fades the image to a solid background colour.) As you may have seen from various tutorials
in previous issues, there are workarounds that

use them in your own style sheets. By the end of this tutorial, you should feel confident about
creating future-proof, standards-based CSS ! websites that cater for ageing and buggy browsers as well as modern, efficient releases.

you have no choice but to deal with Internet Explorer and its bugs. Sadly, users of Microsoft's browser are also the least likely to regularly upgrade. While Firefox and Opera users eagerly download
each new version as it arrives, many IE users

deal with many of these problems. Perhaps the
most common is Tantek ^elik's box model hack, which uses a couple of lines of CSS to trick lES.x into terminating a rule, thereby enabling you to define property values for that browser and then a second set of property values for more compliant browsers. (See www.tantek.com/

U l

IE tends to be

stick with ageing versions of the browser, only moving to a new version when they purchase an entirely new PC. This explains why so many
In the CSSl folder, you'll
find all of the files created

CSS/Examples/boxmodelhack.html for more
information about the box model hack and

for this feature, including in-progress examples.

people still surf the web with IE 5.5, a browser that fails to deal correctly with fundamental rules concerning the box model, thereby

the bugbear of every web
designer

how to implement it.) Although this hack
works well, it does mean you never have

60 Practical Web Design

Tutorial Use conditional connnnents with CS.

O Apply conditional comments
Create a separate syle sheet to deal with flaws in Internet Explorer
Two of the most common problems in Internet Explorer 5 - problems that almost every web designer will come up against at some point are its inability to deal correctly with the box model and its incorrect mapping of CSS fontsize keywords. Both require explanation if you're to understand the various elements
c o v e r e d l a t e r.

id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam
consectetuer. </p>
heading
sit am«t, consectetuer

Lorem ipsum ddor

E*

ao

»>ahnari<s

look

o

o

'

-

jg

O

@

Qa.

adtpisdng elit. Morbl commodo, Ipsum sed pharetra gravida, ord magna rtroncus neque, Id pulvinar odio lorem non turpis, NuHam
sit amet enim. H E A D I N G Lorem ipjum dolor sit «m«t, consectetuer edipisdng elit. Morbi commotio, ipsum sed ph«r«tr% grevide, ord megne rhoncus rteque, id pulviner odio lorem non turpis. NuHam sit emet enim. Suspendisse id yelit vitM Kgule votutpet condimentum. Aliquem erat ^ ^ ««lik. Multe facilisi. Nulle libero. Viverr»ws pheretra posuere sapien. Nam
c o n s e c t e t u e r .

In CSS, every element is considered to be

within its own box. For any of these boxes, you can define its width and height, and then add padding, borders and margins, either globally or to each individual side. According to the CSS specification as defined by the W3C (www. w3c.org), padding, borders and margins are
added to a box's defined dimensions. Therefore, if you set the width of a CSS box

© Z E R OP A D D N IGA N DM A R G N IS
Add the following rule to 'style_sheet. CSS' to remove padding and margins from all
elements, so you have a clean sheet to start:

Suspendisse id velit vltae llgula volutpat
condimentum.

Allqusm erat volutpat. Sed quis
velit. Nulla fedlisi. Nulla libero. Vivamus

pharetra posuere sapien. Nam
consecteixier.

(such as a div) to 200px and its height to
lOOpx, then set padding to BOpx, the total

space this element should take up is 260px in width and 160px in height. IE5 for Windows gets this wrong, though, placing padding and
borders within the defined dimensions. This

© S T Y L ET H EB O D YE L E M E N T
page edges):

• Compliant browsers render two values, separated by a forward slash,

our box and text^s expected,
but IE5 makes a number of

Add the following rule, which defines

define the heading's font-size and line-height. Finally, the standard paragraph's format fontsize and line-height property values are both

the font size and family for the page, the default font colour and the padding around your page content (so that it doesn't hug the

errors, as shown to the left

defined under 'p':

means that, in the aforementioned example, the CSS box would remain 200px wide and lOOpx high in Internet Explorer, reducing the amount of space available for content. Clearly,
this causes problems for cross-browser consistency, especially when you consider that

tii{

^

:

body{
lant: small Verdana AriaL sans-serif: Mor:#OOOOOQi patadir^tOpg "-''.'.'Mi

tHj-transforrr}: u|p|(-ca^^

ilwt bold 120%/lem AHaTsans-serifj

)
lint-size: 85^

^^

the later IE6 gets the box model right. Then there's fontsize. You're probably aware that you can define font sizes using keywords. Typically, this is done in the 'body' rule, with a
keyword such as 'small' used as a baseline size. Percentages and ems can then be used to size STYLE THE BOX

Add the following rule to style the 'box' div. Its width is set to 200px, and the padding ensures the div's content doesn't hug its edges. The 'background' and 'border' property values add some shades of grey, differentiating the region from the page's white background.
Remember how we said the box model worked

You can find the completed files so far in the 'box_model_compliant' folder on the CD. Try it
out in standards-compliant browsers such as

text for specific elements. Unfortunately, IE5 incorrectly maps the keywords to Netscape's 'font size' tags, which results in text appearing one keyword size larger than it should. For our example page, we're going to look at how lES's issues affect a simple page design, which will consist of a single centred div that
contains some text. The fact that the div is

Firefox and you'll see the grey box positioned
horizontally at the centre of the browser

earlier: this box now effectively has a width of 250px in compliant browsers (200px from the 'width' property value, 20px of padding on each side, and a 5px border on each side: 200-i-20+20+5-i-5=250). The 'margin' value is shorthand, setting the vertical margins to zero and the horizontal ones to 'auto', thereby
centring the div in compliant browsers. #box{

window. Open it up in IE5, however, and you'll find several errors: the box's width is wrong,
due to the aforementioned box-model

centred will highlight another of lES's problems: its inability to correctly position elements where the 'margin' property has
been set to 'auto'.

. problems; the text is too large, due to the I keyword-sizing issue mentioned earlier; the
box isn't centred in the browser window,

' because IE5 doesn't deal properly with 'margin: auto'; and the heading isn't in uppercase, due to a bug where that property is sometimes
ignored if line-height is defined within the
same rule.

^^ u i c k t i p
USE FIREFOX Firefox is a compliant, c r o s s - p l a t f o r m b r o w s e r, so get into the habit of using it as the basis for

® A D DS O M EW E BP A G EC O N T E N T
Start with a copy of the files in the 'boilerplates' folder within the CSS1 folder on

the CD. Add the following to the 'body' section of 'web_page.htmr (you can use your choice of text in place of our 'lorem ipsum' copy): )rt>id="box"> H|1>hea"diiM</h1> "1 i

piKldlhsf: Dund: feeeeee;

Two of the problems - the incorrect box

' width and text size — can be dealt with by I using the box model hack, which enables you J to define values for lES.x and separate values for compliant browsers. The centring issue can , be fixed by centring the whole page and then adding an override to the 'box' div. Finally, the text-transform issue can be fixed by placing
> that property/value pair in a rule of its own.

your site development
rather than the eccentric

tWtijr: SM'solid #dddddd;

iiiiinro auto;
}

Internet Explorer.

^

STYLE THE FONTS This final rule styles the font elements

<p>Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

added to our HTML page in step 01. The <h1> heading is set to bold Arial in uppercase; the

i Doing all of this results in the following CSS:

Practical Web Design 61

Tutorial Use conditional comments with CSS

O Mac hack
The Mac version of Internet Explorer also has numerous bugs
The Mac version of Internet Explorer is one of its market share is tiny, there are rare occasions

those sad riches-to-rags tales. When first released, it was undoubtedly the most compliant browser on the market, giving the Windows version a severe kicking in that area. Unfortunately, years of neglect and Apple's decision to create the Konqueror-based Safari (vwvw.apple.com/safari)
led to the Mac version of IE effectively being mothballed. Version 5.2 eventually arrived, but soon after, Microsoft canned the browser. The

where you may have to deal with its annoying quirks and foibles. For example, you might be designing an intranet for a company that uses the
Mac version of IE, or creating a site for a primarily Mac-based audience, many of whom have chosen
to stick with IE or can't run Safari or Firefox on

their old Mac. Usefully, a MacEdition article ( w w w. m a c e d i t i o n . c o m / c b / i e 5 m a c b u g s ) d e t a i l s the vast majority of problems with the browser, enabling you to work around them.
• Canned and obsolete, but in some cases, you may still have to ensure your sites work with the Mac version of Internet Explorer

thing is that some people still use it, so although
V C Sisardi - -Si iO

^ 1392 btactod j ^ Check -

stays in place, and you add a comment to your
HTML file to add a separate CSS file:

OMozilla Firefox

HEADING
Lorem ipsum dolor sit amet, consectetuer adipisdng elit. Morbi commodo, ipsum sed pharetra gravida, ord magna rhoncus neque, id puivinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
fadlisi. Nulla Itbero. Vivamus

^ View Sp QDoimarks lock O
Ble:///¥:/Deslrt_nt/wcb_paQeiitmi X Q

E I lSt^-tV ansVorm: l|P|F|I1
IjTadd code here..

^![endif]->
You can set version numbers by replacing [if IE] with something like '[if IE 5]'; define a more

HEADING
Lorem ipsum dolor sit «met> consectetuer «dip<sc)ng elit. Morbi commodo, ipsum sed pharetrd gravida, ord magna rhoncus neque, id puivinar odio lor«m non turpis. NuHam sit smet «nim> Suspendtsse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis veht. Nulla fadUsi. Nulla iibero. Vivamus pharetra posuere sapten. Nam
consectetuer.

pharetra posuere sapien. Nam
consectetuer.

specific version ('[if IE 5.5]'); or target versions
released before a certain milestone ('[if It IE 6]',

As you can see, the CSS Is now more complex
and has various hacks littering the previously clean code. The 'body' rule now has a largely redundant 'text-align' property, overridden in the '#box' rule. Only IE5 needs these. The 'voice-family' lines are the box-model hack, used twice here: once in the 'body' rule to deal with the font-size issue, and then in the '#box' rule for the box's width. Furthermore, there

where 'It' means 'less than'). The last of these is

useful now: IE6 is fairly well-behaved, so we want to target earlier versions of the browser
and provide these with a style sheet where the styles override those in the 'clean' CSS created prior to the box-model hack section. Using the files from the 'box_modeL compliant' folder as a starting point, add the following code after the end of the 'style'

•Using the box-model hack and other fixes, or

are now two 'hi' rules to ensure IE5 applies the 'text-transform' value. Of course, the mess

element in the 'head' section of the web page:

separate CSS files and

conditional comments, you can get your sites

caused by such fixes gets worse when the
number of rules expands. Conditional comments are a neater method of hacking your CSS. Your original CSS code

jggf It IE gfc
<link rel="stylesheet" type="text/css" href=
"ieSJiacks.css" />

looking as they should
in Internet Explorer 5

iiil|e.ndatr»..

CREATE VIRTUAL
MACHINES

Id

"

E

£

%'

Multiple versions of
Internet Explorer on

^t: small Verdana, Xrial, sans-serif;
ttttov

your PC won't deal with
conditional comments as

expected - they'll all
behave the same as the latest version you have
installed. Get around

p a c M ^ ^
round: #eeeeee; - -

this by using the likes of
Parallels Workstation/

border: 5px solid #ddd(|ck^
n: 0 autoi

Desktop (www.parallels.
com) to run virtual machines, each with its
own IE Install.

i n

I

voice-famiir

.

voice-famiferliwite

•Opera (above) and Firefox are updated more often than Internet Explorer, so they're more current than
i bold 120%/lem Arial. sans-serifj Microsoft's browser when it comes to web technologies and standards compliance

62 Practical Web Design

Tutorial Use conditional comments with CS[
c

Virtual PC from Microsoft. Also, because the box-model hack works fine with the standalone

0^1 ^ Quick tip
EST AND VALIDATE

IE builds available from http://browsers.evolt.
org/?ie/32bit/standalone, you can work up a version of your CSS that includes hacks. Once
OMart»)etai(>d»>g hwothot of jm. Aarian fttaan far wtfwit fcr thouft trf whn wi* w>» ar an »» meUng HtX h* erevkUd the wchtve * we# * *s support through hb ewT^any, 6hB0gh[iD,ay$lak rou e»n lee more
lft»»meoori M hte erehive inrwuirvMrftefit.

you've tested everything, move the hacks to a separate file, effectively following the
workflow explored here. With IE7 due for final release over the next

Even though your IEspecific style sheets are targeted solely at
Microsoft's browser, it

lASEtb M that cwoK^ itarr a
Mecwit Chemee lo Um Ardihr* ^ [ z o M - i o - a i ] AdAtd fiDr unux, Mac 06 X WMt wtr«do«n t300S-01-2l}

still pays to keep them
valid (if possible), to

ensure ease of updating
and maintenance.

MM alee nrabinl and Phoenix, and Canwa. aka CMmera; added ^ f>*fi ?.a tar Windows «>d
Mac; added Qia. Hula arm tfoia fat UMIX/Unux; Brtwwea.a (or AmiaB { 2 0 0 4 - t 0 - l S ] 1^. Mr ft .« s.oisn, 5.SSM. fe.Q^ eourteaf Mi iMt «» «* Arttm* mey t>h» - M fteum t» leecft mtow mat. ftvan

few months, it's even more important to master conditional comments. IE7 will finally support PNG transparency. You may end up occasionally using this in designs for compliant browsers, using a conditional comment to override such images (replacing them or
turning them off) for versions 6 and below of

Validate all of your style sheets at http://jigsaw.
w 3 . o r g / c s s - v a l i d a t o r.

bro".vs*»:r M fi M k
Sciena TUvelir Intemadonai scry*m. M o a a t c S w ^

IE ('[if It IE7]'), then using a set of hacks for IE5,
a s o u t l i n e d e a r l i e r.

MultiWftb

VlawT

You may be wondering if we're heading back to the days when designers used to code
separate sites for each browser. This isn't what

M v B f o w r StetMTtBradM

Wivlqttw

•Get into the habit of not relying on the latest release of IE when creating and testing websites. Evolt (http://browsers.evolt.org) enables you to download current and old releases of almost any browser
Then, create a new style sheet called 'ie5_ hacks.css', and populate it with the overrides that address lE's deficiencies in rendering the box-model specifications correctly: Non-Microsoft browsers ignore the conditional
comment. IE6 and above see it, but don't link

we're advocating here. Best practice assumes no changes to the HTML at any point, and only
the most essential of CSS fixes to tailor the site for the various IE releases. Full-scale CSS

replacement is unnecessary.

to the style sheet. Releases of Internet Explorer
before version 6 will access the 'ie5_hacks.css' style sheet and use its rules to override those from 'style_sheet.css'. Your main CSS remains

tW-alj^: center;
fant: x-small Verdana, Arial, sans-serif:

clean and easier to use and maintain, and is

hvri'^

■fli'' iliir ■

more future-proof because most hacks are based on bugs that are sometimes fixed (and all of your hacks and fixes are in one place).
See the 'box.modeLconditional' folder on

the CD for the completed files.
The downside to this method is that it's difficult to test without several PCs, each with
•The Centricle.com

a different version of IE installed. However,

website provides an
overview of CSS hacks for all web browsers at

EI]
tttrt-transforn-i:'

there are pieces of software available that

enable virtualisation, so you can run several instances of Windows at the same time: try

http;//centricle.com/ref/
css/filters

O Create a PNG in Photoshop

How to make the transparent badge we'll use overleaf

SET UP THE IMAGE
new layer, select the Polygon tool. In the Options bar, set Sides to 20; in the bar's drop-down menu, tick Star and set Indent Sides By to 15%. Draw a star shape. Duplicate

ADD TEXT AND EFFECTS
Select the top star layer. Go to Layer > Layer Style > Stroke. Set Size to 1 px. Position to Inside and Color to Black. Set this layer's mode to Multiply in the Layers palette. Select the bottom star layer, go to Layer > Layer Style > Drop Shadow. Set
Angle to 120°. Add centred text in a sans-serif font.

fl ^ lC r e a t e aO lO p xm ia g e .D e e lt et h eB a c k g r o u n d layer. Set the foreground colour to White, On a
the layer and set the bottom layer's opacity to 50%.

F L AT T E N A N D E X P O R T
Save your image as a PSD file so you can edit it later. Select one of the non-text layers, then go
to Layer > Merge Visible. Use Edit > Free Transform to

rotate the image anti-clockwise slightly, and then go to File > Save for Web. In the dialog box, choose PNG-24 as your format and ensure Transparency Is ticked.

Practical Web Design 63

Tutorial Use conditional connments with CSS

C Manage PNG transparency
Use a transparent image in modern browsers and a solid image in IE
Web graphics are limited in many ways.

Most designers stick to GIFs for line art and
JPEGs for images with continuous tones. A variation on GIF enables you to remove one or more colours for a kind of transparency effect, but unless the 'hole' is entirely straight-

|a

;

Q

Go

Google

edged, the messy result is a long way from the kind of effect you see in Photoshop.
The PNG format enables full transparency effects, but IE doesn't render them properly.

This will reportedly be fixed in the next major release, but if you opt to use PNG effects, you
still need to cater for older versions of IE.

In this tutorial, you'll create a page with CD
cover art and overlay an 'on sale now' sign. Because the sign is a PNG with transparency,

the div's background, the image and the image's border will be seen through the sign.

© C R E A T ET H EW E BP A G E
be added later using CSS.

Use the 'png_start_here' folder from

filssi

the CD as the basis for this tutorial. Add the

following code to 'sign.html' to add the cover
art inside a div with a class value of 'artwork'

• From left to right: how a transparent PNG looks by default in Internet Explorer; the PNG swapped for a different image with an IE hack; and proprietary code that adds transparency to a PNG in IE
The 'ie_hacks.css' style sheet is accessed by all versions of IE lower than 7 (which will probably

and set up a blank div for the sign, which will

have full PNG transparency support). Bliv class="artworlc"> »ali» class="sHn "></div> <img src="cd_artwork.jpg" ait="Cover art" Wi € ^''300''hei|iti.''300;'></div> . „ The following rule defines styles for the 'sign' div. The 'background', 'width' and 'height' settings define 'on_sale_now.png' as the background and set the div's dimensions to those of the image. Using 'position: absolute'
removes the div from the document flow

© U S EA NA L T E R N A T E M IA G E
add this rule:

Copy 'on_sale_now_ie.gif' from the

'png_ie_swap' folder on the CD to the folder where your web files are. Create the style sheet 'ie_hacks.css', place it in the same folder and

© A D DT H EC S S

Open 'sign.css' and add the styles

below. The first rule removes padding and

margins from all elements; the 'body' rule adds 20 pixels of padding to the web page.

(placing it over the 'artwork' div), while the 'margin' definition moves the div (and the image) slightly down and to the right.

ifflC
iprgtn: lOpx 0 0 lOpx, v HlgHtrWpx,

Nr
pc^lon:

{

I

.

Pkkground: url(on_sale_now_ie gifif;^i'
n . T';;'
Load the web page into IE to see that the star

n*rgin:>i|^ 0 0 m gickground: url(on_sale_now.phg|;
Add the following rules to style the 'artwork' div and images within. The '.artwork' rule
makes the div's dimensions 50 pixels larger

shape has been replaced by a rectangular GIF.

© H A C KF O R E I

© U S EP R O P R E IT A R YC O D E
'.sign' rule in 'ie_hacks.css' with:

An alternative option is to replace the

Everything works in compliant

than the BOOpx image's, and sets the

browsers, but IE gives the PNG a background
colour, so we need an IE-specific hack. Using conditional comments to attach a style sheet for IE enables the hack to be contained. Work

More info
If you'd like more
details on conditional comments and related

background to light grey. The '.artwork img' rule sets margins around the image's edges and also defines a dark grey image border

ilter:progid:DXImageTransform.Microsoft.
iSJphalmageLoader(src='on_sale_now.png',

topics, visit the
following page on
Microsoft's MSDN

with a copy of your files and add the following to 'sign.html', under the 'style' element:

|izi||^ethpd^^iift_
Liiiirourvi;
}

noisIZ^

;

3!

website: http.7/msdn.
microsoft.com/

i^ght: 350px;

This uses the PNG image and displays it with

workshop/author/
dhtml/overview/

BS^cground: #ddc33^

Sclink rel="stylesheet" type="text/css" href="

ieJiacks.css" />
TBiffr;

transparency. The filter property doesn't
validate, but this is less of a problem if you

c c o m m e n t . o v w. a s p

separate your IE hacks from your main CSS. O

64 Practical Web Design

Subscribe Overseas
o

OVERSEAS SUBSCRIPTION OFFER
^$!i53n5Hr
B laitT mac compatible m •CREATE CUSTOMISED SEARCH TOOLS •EXTRACT MEDIA FROM SWF FILES • PHOTOSHOP & CSS VIDEO TUTORIALS

Practical

o

%*/

Helping you build better wel

Build your site
Revealed: 20 must-have free programs and online tools for authoring, graphics,
content management and more
MOW TO..

for free!
Make
money now! ^

6 6
• Password-

PA G E S O F

EXPERT ADVICE
protect pages in
Dreamweaver

for only

Receive 13 issues

I

• Load images dynamically using Flash

THIS MONTH

Is video killing
the Internet?

€ 105
u
• FREE delivery to your door •CD packed with great software every issue
• Never miss an issue

. .Perfect -

Podcastsinjustl

s$155

•60-day money-back guarantee*** - we'll refund unmailed issues if you're not entirely satisfied
' Payment will be debited in Pounds Sterling (Europe, £72) •• Payment will be debited in Pounds Sterling (USA, £84)

■■ (tSfi

Exchange rates correct at time of going to press, June 2006. Payment by credit card only *** Minimum subscription term is 12 months. If, at any time during the first 60 days, you are dissatisfied in any way, please notify us in writing and we will refund you for all unmailed issues.

GET THE LATES PRACTICAL WEB DESIGN DELIVERED O YOUR DOORSTEP NOW!

CALL+44 1858 438794
QUOTING OFFER CODE P015

OR VISIT www.myfavouritemaqazines.co.uk/pwp/p015
OFFER ENDS 30 SEPTEMBER 2006

Practical Web Design 65

TUTORIAL; FLASH
Load images dynamically with Flash
Details

Flash Team Weblog
Information about Flash, direct from the source.

http://weblogs.
tnacromedia.com/ flashteam

MovieClipLoader 6 An open source version of MovieClipLoader that's compatible with Flash Player 6. http://osflash.org/ moviecliploader6?s= moviecliploader6 MovieClipLoader
documentation This documentation is

extremely helpful in providing you with all of
the events and methods

of the MovieClipLoader. http://livedocs.
macromedia.com/ flash/8/main/ 00002S38.html

Load images dynamically
with Flash
Kris Hadlock shows you how to load content into a Flash movie, with progress reports and error messages to add interactivity
for much more flexibility and control over the
process. Functions such as creating progress bars or applying actions to images and other

O a s h lh a sc o m ea o n g lw a y n c e s i
its mid-1990s debut - dynamic data and loading images didn't

longer a worry. This object contains all the
methods that Flash developers were always

having to find hacks for, so that they could
work around the issues. MovieClipLoader enables you to load an image, then use an event listener to check its progress. The listener
can receive notification about different states

even exist back then. Nowadays,

dynamic data has become the norm, as it should be, and loading images is something that every Flash designer or developer should
more ambitious than basic animations. Flash 5 was the first version of Flash that

functionality, which were tricky to achieve and unreliable in practice, are now easy to Include in your projects, thanks to the events that
MovieClipLoader manages.

understand if they plan on creating something

of the loading progress, such as when it starts.

This tutorial will teach you how to use
MovieClipLoader \.o a vwage

4fii

loader with a dynamic progress bar and error handling. We will cover the inner workings of the MovieClipLoader and all of its events and
the events parameters, as well as the basics of dynamic loading. You'll create a container

had functionality to load an image dynamically, using the Movie clip method loadMovie. This
method was very exciting when it came out: it

Functions that

enabled you to load images from a local disk or from a server, so that you could finally integrate Flash with other dynamic content
and add those fancy animations that are not

were tricky to
achieve are now

object before using ActionScript to add intelligent monitoring features to it.
Yo u w i l l a l s o fi n d o u t h o w t o a d d a l i s t e n e r

otherwise possible. There were issues with showing loading progress, calculating when an image was loaded so that you could apply
actions to it, and understanding what went The finished script and working SWF file are in
the Flash Tutorial folder on the CD.

easy to include
when it is complete and when it is ready to
be modified - all conditions you can exploit in the behaviour of your Flash project.

V

to the movie to receive the events during the

loading process, then discover how to handle and use these events to your advantage when they are fired. MovieClipLoader is quite powerful and can provide some extraordinary possibilities: it's all up to you and how you put
it to use.

wrong if there was a load error.
With the release of the MovieClipLoader

MovieClipLoader is a huge improvement to

object in Flash MX 2004, these issues were no

the practices of loading images, and it allows

66 Practical Web Design

Tutorial Load images dynamically with Flash

MOVIE

CLIP

I N H E R I TA N C E Because we're loading an image Into a Movie

clip, the image wilt inherit the Movie clip properties by default.

I M A G E

C R E AT E A D O C U M E N T start by opening Flash and choosing the Size button in the Properties panel. If you don't have the Properties panel open already, select the menu
option Window > Properties > Properties. Change the

INSERT A NEW SYMBOL
Select Insert > New Symbol, which will prompt you with a dialog box. Name this symbol 'container' and make its type a Movie clip. The new Movie clip

width to lOOpx and the height to lOOpx. We must start
by creating a new symbol we can load an image Into.

symbol provides us with a container to hold our dynamic image - the only supported
way to load an image into Flash.

A D D A N D I D E N T I F Y T H E C O N TA I N E R
Now you can return to the main timeline by selecting the blue arrow above the timeline. Add the Movie clip by dragging it from the Library to your Stage area. To target the new symbol with code, we must give it a name in the Properties panel. For this tutorial, we will name this instance 'container'.

THE MOVIECLIPLOADER OBJECT

^^9 MovieClipLoader is an object that enables developers to add listeners which
trigger callback events. The callback events can then tell us information
about the status of the loaded image. You can see the full details using Flash's built-in Help system.

ii
B ▶ Dobugger
▼ Actions - Frame

»Hi!ip

^

aKwiir
▼ Actions Frame ' "

^

ft iS © V S © sf.

I jS e V 1 (g 8C>.
itvar mcLottderrHovieClipLoader - new HovieClipLoadei: () ;
2!mcLoader.addListenec(this);

l^var iBcLoader:KovieClipLoader - new MovieClipLoader (} ;

I N S TA N T I AT E A M O V I E C L I P L O A D E R O B J E C T

ADD A LISTENER

li/y T o begi n using the MovieClipLoader to dynamically load our images, we must first create an instance of it. Before we write any other code, we'll
create an instance of the object by simply declaring a new MovieClipLoader. Make

IIIO To prepare our file to receive events from MovieClipLoader, we must add
a listener. In this example, we will be adding the listener to 'this', which represents the current file. This means our events can fire as root functions and not

sure you've selected the frame in the left-hand list before starting this ActionScript.

have

to

be

attached

to

any

objects.

5/

Practical Web Design 67

Tutorial Load images dynamically with Flash

▶ Hetp ▶ Debuggw H ▼ Acthmf ' Frame
□ / 1 % p A

^

I

(^8^1
new HovieClipLoader();

o a ✓ ✓

1 var aicLoaderiHovieClipLoader ' 2 iDcLoader.addLlst.ener (this); 3 incLoader.loadCllpCiinage.jPa'',

i

LOAD AN IMAGE

1 1^^ Now the part we've been waiting for; loading the image. In this example, we're loading 'image.jpg', which should reside in the same directory as the
final SWF file. This is loaded into the 'container' Movie clip we created earlier, by specifying 'container' as the second parameter of the loadClip method.

0 T H EB A S C ISO FL O A D N IG
registration point of the Movie clip.
> Debuggsr
V Actions Frame

One important thing to know about dynamically loaded images is the placement of the image within the Movie clip. When we dynamically load an image into a Movie clip, the image's top-left corner will be placed at the

PA R T TWO
C R E AT E L O A D I N G STATES

■f e e V 1 © 8 1 5
.
2: 3: 4

var

iDcLoader:HovieClipLoader

-

nev

HovieClipLoader

();

iBcLoader.addLi9tener(Chis) ; ncLoader.ioadClipC'iiDageopg''/ container);

5 f u n c t i o n o n L o a d P r o g r e s s ( » c i H o v i e C l i p , b y t e s L o a d e d ; N u « b e r, b y t e s To t a l z N u e o b e r )
6 (

v a r l o a d P e r c e n t a g e t N u i B b e r - H a t h . r o u n d ( ( b y t e s L o a d e d / b y t e s To t a l ) * 1 0 0 ) ;
prelo«uier.txtrieid.text loadPercentage

H: 17.6 .vt 41-6 J ^

J[1

^□A U o k a m

C R E AT E A P R E L O A D T E X T F I E L D

IJ^ Now create a text field, which wil show the progress of our loading image. To dynamically display text inside it, choose the Dynamic Text option from
the Properties panel for that text field. Next, click the Embed button and select the

0T R A C KT H EL O A DP E R C E N T A G E
»[>sbug9ar
Actions Frame

The onLoadProgress event provides us with two values: bytesLoaded and

bytesTotal. As the image is loading, this event is continually fired. We can take the values and divide bytesLoaded by bytesTotal, then multiply them by 100 to get our load percentage. We can then add the figure to the preloader text field.

options from Uppercase through to Punctuation to get the font to render correctly.

P — tip ^ ^ Quick
IMAGE FILE C O M PAT I B I L I T Y MovieClipLoader recognises SWR JPEG,
GIF and PNG files - but

«

«

.io t \ « 4

-

o

q

4

©
var

V

1

O

80.
nev HovieClipLoader(); ;

ncLoader:HovieClipLoader

BicLoader.addListener(thia)

mcLoader. loadClip ("unage. jPCf"/ container) ;

you should note that releases of Flash Player
before version 8 can't use GIF or PNG.

R

f u n c t i o n o n L o a d P r o g r e s s ( w e : H o v i e C l i p , b 7 t e s L o a d e d : N u i n b e r , b y t e s To t a l i N u n b e r )

var

loadPercentagezNunber -

-

H a t h . r o u n d n b y t e s L o a d e d / b y t e s To t a l )

100);

preloader.txtField.text preloader.bar._»idth

loadPercentage (loadPercentage/2);

.

"

:

/ expertance / tha ^ m revolution
m a c f o m a d u *

C R E AT I N G A P R E L O A D B A R

f|JC4 Showing a visual beside a text percentage is a
fairly common practice. To achieve this, create a line 50 pixels long. Convert the line into a Movie clip by choosing Modify > Convert to Symbol and setting the registration point to the middle-left. This sets up the

FLASH-Player 8

opportunity to make the graphic progressively grow
from the registration point in order to enhance the visual, but there's a little ActionScript work required to make this happen.

C A L C U L AT E T H E P R E L O A D W I D T H We'll make the 'preload' Movie clip grow in a similar way to how we're displaying the percentage in the text field. The only difference is that we must take the loadPercentage that we calculate and divide it by two: our final Movie clip size is only 50 pixels, and we don't want its width to grow beyond that.

68 Practical Web Design

Tutorial Load images dynamically with Flash

^Heip

r> Mxjgoer
A c b o n s SS a ft H lt> !■ 4 M <4 :tt!

Siun:

^
2

i ^ V i
ncLoader.addLiscener(this);

1 var TtcLoadet;MovieCllpLo«der - new HovieClipLoader ();
3 xncLoader. loadClip ("image, jpg", container);

■ M., ia» ai Hi)' •*

f u n c t i o n o n L o a d P r o g r e s s ( » c : M o v i e C l i p , b y t e s L o a d e d : N u i B b e r , b y t e s To t a l : N t i i r t o e r ) •34
t i B I I

{

7 ' v a r l o a d P e r c e n t a g e : N u i t t o e E - M a t h . r o u n d ( ( b y t e s L o a d e d / b y t e s To t a i ) • 1 0 0 ) ;
! <^9!-.

l | p r e l o a d e r. t x t r i e l d . t e x t " l o a d P e r c e n t a g e
9 ; p re l o a d e r.b a r._ vl d th - tl o a d Pe rce n ta g e /2 );

lo' >
1 1

function

onLoadlnit(mc:HovieClip)

trace

("onLoadlnit:

"

+hic);

D I S P L AY T H E P R E L O A D

li/»J Now that we've completed all the pieces of the preloader, we will combine
it all into one Movie clip, which we'll appropriately name 'preloader'. We've anticipated the naming of this component in the script we've already written, so
there's no need to go back and add the name to the target paths.
TSraST
^ Actions Frame

0T H EL O A DN IT IS T A T E
▼ AettoM-Frimw

The onLoadlnit event is the last event in the sequence of MovieClipLoader

events. It's fired when the actions of the first frame of the container clip have been executed. This isn't relevant here, because we don't have any actions In our container's first frame, but it can provide a lot of flexibility in other situations.

I jS 0 v' 1 (5 8P
var acLoadertBovleClipLoaciec addLlstener (this); container); new HovleClipLoader (); lecLoader. KcLoader.loadCllp("iwage.jpg",

■f e P e V 1 f ? 8 0 ,
var »i;l.oader:HovleCilpLoader I HovleCllpLoadeEO; aeloftdec. Addl, iatener (cbia); BcLoadeE. loadCllp ("uaoge. ipg",

function

onLoadProgress

(aic:

HovleCllp,

bytesLoaded:Nuaber,

b y t e s To t a l s N u R i i e r )

letion

ottLosdProgresslneilovleCllp,

bytesLosiled:Hug±ier,

b 7 t e a To c a l : N u i i l > e E )

6H
v a r l o a d P e r c e n t a g e z N u K b e c ' n a t b . r o u n d ( ( b y t e s L o a d e d / b y t e s To t a l ) * 1 0 0 ) ; preloader.txtTield.text - loadPercentage preloader.bar._«ldth * (lDadPercentage/2); 10' }
11 12.function onLoadlntt(merBovieCllp)

v a r X o « d P e c c e a t a g e : N u a * ) e i : • H a t h . r o u n d C ( b T C e s L o a d e d / b y t e s To t a l ) • 1 0 0 ) ; preloadec.txtrield.text loadPercentage

p r e l o a d e r. b a r. _ v l d t h • ( l o a d P e r e e n t a g e / Z ) ;

function {

onLoadlnit

(zaciHovieCllp)

traceConioadlnit;

"

*

sic);

13[ (

14j trace("onLoadlnit: " + wc);
isf) 16^ 17j function onLoadStart (inc:HovleCllp) le; ( isf trace("onLoadSteurt: " + mc);
20 ]

)

function

onLoadStart

(aicsBovieClip)

trace("onLoadStarc:

"

+

bc)

;

function onLoadCcnBplete(iBc;HovieClip)

traceConLosdConplete:

"

- «■

bb);

T H E L O A D S TA R T S TAT E

^¥M The onLoadStart event is fired when the image that we're loading has
image into.

begun to download. In this event, as in all of the others, we receive a Movie

clip parameter by default, which is the target Movie clip that we are loading the

0 T H EL O A DC O M P L E T ES T A T E

The onLoadComplete event is the first event that's fired once the image has

completely downloaded and appeared in the Movie clip. This is a good place to begin other functionality, such as adding actions to the image. onLoadComplete can optionally report the HTTP status of the server delivering the image.

O Apply a dynamic action
!fr^ Help > Debuggor
Actions • Frame

Take care to get the timing right

▶ Hetp

▶ Debugger
Actions Frame

bebu^
F r a m e

^ © V J (S 8<5
11 f u n c t i o n o n L o a d C o m p l e t e ( )

■fe ,0 © V s (S? 8P

jS> e V I
l!function onLoadComplete(mciHovieClip)

"ij function onLoadComplete (mcrMovieClip)

2, i
3' )

2|(
3!>

2| <
3 '

mc.onPress
<

function()

4 ;

trace('The

usage

has

been

pressed');

PAT I E N C E B R I N G S R E WA R D S
To apply actions to a dynamically loaded image, you must make sure you don't try to trigger an action too soon. To get the timing right, we must first wait for the onLoadComplete event to fire before we try to do anything else in ths script.

TA R G E T T H E M O V I E C L I P
The onLoadComplete event will contain the target Movie clip we're using in our project as a parameter, therefore all we have to do is catch it. The precise name of the parameter depends on the labelling conventions you're using.

0

ADD AN ACTION
receiving the any action the newly monitor for

Now that we have waited and are Movie clip parameter, we can apply that we like to the Movie clip that contains loaded image. Here, we're using onPress to the user clicking the image.

Practical Web Design 69

Tutorial Load images dynamically with Flash
o

L
* p ® V1 e 86:
:sKovuCiipl.<radet ■ w ■o v i c C l t p l o a d s r O /

r

t:

acleadcr .utdLliccDCt t KLoadct. IrMdCllpr^iMgeopV"

3r
ft

tuBetto&

eDlo*ctPra9r«sj

|Bc:

bn«»''Oaate>tUvttibet,

b r t e s To c « i i N < a * > e i : |

USING ERROR DETECTION

t e t h . c o u i u i | ( b 7 t e « L o w l e d / b 7 t e s To e a l | * 1 0 0 ) ; IPereeat«a«/2);

i.
2 fultedoB onLoadlBit CaetM

a;

ODLoadStwe

CBesllov^cCl.lpt

I
ecftceCIrcoi: C«4*: "

RovieClip,

crrac<M*;3

*

•rrorCode);

ERROR HANDLING

llll Error handling begins with the onLoadError event: this fires when there
are issues with the load process. It also provides details such as the target
Movie dip, the error code and the HTTP status to help us determine what went wrong with the load.

0C R E A T EA NE R R O RT E X TF E IL D

We'll create a new text field the same as we did for the preload text. This field will be placed in a new layer above the content, so that if an error occurs, it's the top element that is displayed. If you get the layers the wrong way around, your user may never see the error report.

^IWI More info
ActionScript.org (www. actionscript.org) is a welcoming forum for anyone looking for
answers to Interactive

Flash and scripting issues, with a community of helpful folk on hand.

C R E AT E A N E R R O R M O V I E C L I P
Now that we have a text field, we'll create a Movie clip that combines the text field with a background, which will hide all the content behind it whenever an error message is presented.

/yK DISPLAYING ERRORS 1 ^ ^ ^W e c a nd s ip a l yt h ee r r o ra n yw a yt h a tw ep e la s e .I nt h s ie x a m p e l ,w e r 'e simply writing the error code and the HTTP status to the text field. To
provide more details about the error, we could create a switch statement that

checks for the different codes and provides the meaning of each error

PA RT FOUR
CLEANING UP
b r t * « Te t « l s N u . t k . r e u n d ( ( b i r t t * L o M l e i l / b r t M Ta e a l ) • i

24't«aetln

oiiLaadCaavKtc(aBiaovietlli)

UNLOADING AN IMAGE
We'll now add unloadClip code to the loaded image's onPress action. This unloads the clip when the image is pressed. As you can see, this code has to be

placed within the onLoadComplete method, because the image needs to be fully loaded before we can unload it. If we try to unload the image sooner, we'll get an error.

REMOVE YOUR LISTENERS If you plan on not using the listener that you added any further, it's a good idea to remove it from memory. We can do this by simply calling the removeListener method just as we did the addListener, referring to the same object and using the same MovieClipLoader instance as before. O

0

70 Practical Web Design

Back in black!
Full review of Apple's new iBook replacement

The July issue of MacFormat magazine is on sale now
> Get more ^
Apple Mxfiook Pro 17'in(h

from your Iviac

I F O R M AT i K w h w i i e

_ kApple's®

GET MORE FROM

YOUR
m

MAC

-

NeverpayforaMacprogramag^n! W
OiscwerlhebestHtEEatefnadves... ¥

A N DT H E Y R ' EA lO Ny O U R D V l HI

Mac questions answered The best reviews
Fun tutorials and practical advice All the latest Mac kit on test

TUTORIAL; CSS
Design attractive data tables in CSS
Details
Beginner

^ THE 86TH PGA CHAMPIONSHIP
August $-15, io64 • WhisUing Straits
Kohfer. WJtcotisiii USA
PfiA more PGA

P<iA.coni's coverage

sponsored by CADILLAC

B E
Any text or HTML editor

H O M E N E W S S C O R I N G P L AY E R S E V E N T I N F O C O U R S E H I S T O R Y M U LT I M E D I A S T O R E

SCORING
S C O R I N G TO PA R PCS P L AY E R T O D AY I Can't 1 * 2 2
4

ROUNDS TO TA L 1
1

' Final Summary
' Leaderboard Cource Statistics 4 7 6 7 1 7S 7 3 7 3 280 280 280 281 281

THRU F F F F F

T O TA L - 8 - 8 - 8 - 7 - 7

2 6 8 70 6 9 70 70

3 69 71 70 72 69

' Player Scorecards
67 68 66 66 69

A gallery of table styles for inspiration. You can even submit your own design. http.7/icant.co.uky csstablegallery Web Page Design for Designers This comprehensive CSS tutorial for beginners
contains a section all

Vljay Singh
♦ 6 Chris DIMarco Justin ♦1
♦ 1

-t-4

Prize Money Breakdown P a i r i n g s & Te e Ti m e s

-1 + 3 - H + 1

Leonard

Ernia Els

4

Chris Riley

pOMtredby

r--

'AS

about styling data tables. w w w. w p d f d . c o m /
editorial/basics/ index.html 6

% Book your, next golf trip on PGA .com Expedia.COm
*12 -fr 19 K.J.Choi Paul McGlnlev -2 -3 f F -6 -6 68 69 71 74 73 70 70 69 282 282

There's no better place for official gear than the PGA C h a m p i o n s h i p S t o r e . Vo u ' l l firxj hats, shirts, accessories, books awJ
m o r e '

Somacon Weblog Play with CSS table styles,
then ask the site to

6

generate the CSS for you.
w w w. s o m a c o n . c o m /

p141.php

data tables in CSS
You can use CSS to transform HTML tables into attractive and

Design attractive
press in the last few years. With

•When you have complex information to present, a table makes it easy to read and styling helps even more

usable features of your site. Rachel Andrew shows you how

O a e b s lh a v e e r v c e d ia y t p e r t b a d
people describing site layout
using CSS rather than tables as "table-free site design", you would be excused

display on your site that would be right at home in a spreadsheet with rows and columns, then you probably have tabular data; and

some of the different ways that you can go
about designing a table.

The first table style we'll create takes advantage of the fact that table borders can be
collapsing or non-collapsing, to create a style that leaves space between the different table cells. You can clearly see the borders between each cell, and the header is visually distinctive
from the table contents.

(X)HTML gives you elements to mark it up so
that it can be understood easily. Some examples of tabular data Include: financial data, such as publishing accounts on the web;
a table of site users and their Information in an

for thinking that tables were not advisable under any circumstances. But tables are in fact
an important part of the HTML specification

designed to be used to display tabular data.
The HTML 4.01 recommendation (www.

administration section; or a table of events, with information about where and when they are to take place. Where tables are not advisable is actually where they have been

The second design uses a tiled image to make the header section more fancy and demonstrates how you can use background images in your table designs to create
attractive effects. This doesn't make the table

w3.org/TR/htm I401/struct/tables.html#h-11.1)
states: "The HTML table model allows authors

to arrange data - text, preformatted text, images, links, forms, form fields, other tables,
e t c - i n t o r o w s a n d c o l u m n s o f c e l l s . Ta b l e s

most used - for site layout. You're advised to
use CSS positioning rather than table cells to position your layout in the browser. In this tutorial, we will be creating a basic data table that contains no presentational markup, which would immediately tie the way the table looks to its structure. This markup
will create a table that's accessible to screen-

any less accessible, because the style is always
divorced from the content in the table.

should not be used purely as a means to layout document content, as this may present

problems when rendering to non-visual media. Additionally when used with graphics, these
tables may force users to scroll horizontally to view a table designed on a system with a

Tables are an

reader users, but has no borders or any other styling that could make it hard to quickly read
i n a b r o w s e r.

III

I

M

larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."
Ta b u l a r d a t a i s c o n t e n t t h a t c a n b e d e s c r i b e d

importantpart
oftheKTML

The code and image file you need for this tutorial
are in the CSS2 folder on

Once we have our basic table, we can start to look at how to style it using CSS. We'll create two different table styles to look at

your CD.

best within a table. If you have information to

specification

72 Practical Web Design

Tutorial Design attractive data tables in CSS
c

O Build and style your table
Store your data in the table and leave the design to your CSS code
BUILD THE TA B L E

<td>Feeling Strangely Fine</td>
I </tr> I <tr> i <td>Generation Y?</td>

&

.

afwna-

TA« ^ hop.//CSS
0)nfofm«)on* QRMIM* © To ® h ' tvi^Sourt*'

We need to start with a simple table of data. In this example, we'll mark up a playlist of songs as our sample data. All of the

MlCeoUM-

Itets browMrt titpport chMi
Windows Macintosh Netscape 17.1 Y M Y M Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s MoHlta 1.4 Ye s Ye s Y m Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Opera 7 . 11 Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s
Y e s

1

c

1

IE 5.2 Ye s Ye s Ye s Ye s Ye s Ye s
Y e s

M u l l l a

1.4 Ye s Ye s Ye s Ye s Ye s Ye s Ye e Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s
Y e s

Opera e.o Ye s Ye s Ye s
Y e s

Satan 1.0 Ye s Ye s Ye s Ye s
Y e s

following code can be found on the cover CD.
(X)HTML does contain several presentational
table elements and attributes. These include

I <td>Thea Gilmore</td>
</tr>
<tr>

SlmDlatet Shrmlfl liar lauani bitUMR

UilnqimMwfOfbtffltt
b u t e t g

Y M Ye s

border, alignment attributes, cellpadding and

Ye s Ye s Ye s
Y e s

Ye s Ye s Ye s Ye s Ye s Ye s Ye s

cellspacing. Most are deprecated - flagged for
removal - from future versions of (X)HTML. Instead of using these deprecated elements that tie the look of our table to its structure,

<td>lnstead Of Hf Saints</td>
I <td>Thea Gilmore</td>

jYes
Erie Mftvarg PanaHaa

Ye s Ye s Ye s
Y e s

Y

«

Ye s

R o l t a w l l M t

M | v «
SS
Y e s

Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s

<td>Burning Dorothy</td>
</tr>

A 1 tat Tftpflhfl Mil PrwttSgvtn'8 Ufrerysi
Birtcf Batata's H«
Vertcal bmtons

NO NO 1 Y es Ye s m m m m y Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s

Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s

Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s Ye s

Ye s Ye s Ye s

Ye s ,
Ye s Ye s Ye s Ye s Ye s

we use CSS to change the look of our table.
So the table we create will be simple, just using

</tbody> I <ftable> We start the table with an opening table tag
with no attributes. Then comes the head

Y e s

aiLimfioy m bhrt
□o u b l a bofOar

Ye s

Ye s Ye s Ye s Ye s

structural elements to mark up the information
as rows and columns.


Ye s Ye s

ijY es
Ye s Ye s

CoDonocooona'8 Pcm Pad Ust

lEHACKtof-ErtcMav^s

Ye s

Ye s

Ye s

<table> I

<thead>

—I

section of the table with our table headings. This section can be placed inside <thead></ thead> tags. We use the 'th' element to mark up the header text. This helps screen readers to understand that these are table headings with a specfic relationship to the rest of the table. The attribute 'scope', with a value of 'col', explains the relationship between the 'th' element and the rest of the data; these are column headers, so we use a scope of 'col'. If property to 'no-collapse', because we want space between the table cells for this table design. Give the table a background colour and text colour, and set the font for the data within
the table. We've used ems to set the font: 1 em

•The Listamatic site (http://csi maxdeslgn.com.au/listamatic browser-support.htm) marks every other row with a CSS class to get a dark background

I
<th

<tr>
<th scope="col">Song</th>
col">Artist</th> col">Album</th>

"1

I

<th

I </tr>
</thead>l

is the default size of the text in your user's
browser, so 0.8 ems is going to give a slightly smaller size than the default. Using ems means that the text will resize depending on the settings your user has in their browser, which means they can easily enlarge the text if it's
too small for them.

<td>Second lntermission</td> <td>Ani DiFranco</td> <td>Evolve<ftd> </tr>
< t r >

you had headers down the left-hand side of the table to describe the rows, you could give a value of 'row' to explain their role. Close the 'thead' element and open 'tbody'. The main content of the table goes inside this element. After completing all of the rows of the table, close the 'tbody' and 'table' elements and your table is complete. If you view it in your browser at this point, you'll see that it isn't very easy to read, and it doesn't have any borders or visual styling to help you to
read the data.

Wsh</td> <td>Ani DiFranco</td> <td>Little Plastic Castle<rtd> </tr>
< t r >

© T H EH E A D E RS E C T O IN

If you apply styling to the 'th' element,

the built-in style sheet of most browsers will

display it centred, and in bold to distinguish it
from the rest of the table. We can use CSS, however, to distinguish the headers in any way we like. You could obviously use CSS to remove
the difference between the table headers and

<td>Another Place to Fall</td> <td>KT Tunstall<ftd>

<td>Eye to the Telescope</td>
</tr>
< t r >

the main body of the table, but this might lead

© S T Y L ET H ET A B L E
to the opening <table> tag.

to confusion for anyone trying to understand
the data.

We can now use CSS to change the way

<td>Closil^Timp.r/tri^
<td>Semisonic<rtd>

our table looks. The code can be in an existing
style sheet or attached in a brand new one.

fcitfe-itiiistthl
backaround-color: #507EA1j color: #fff^

zill.;

rr.;

Create a CSS rule for 'table.playlist' - this applies to any table with a class of 'playlist', so
Choos* a plan A variety of plans to fit everyone's

go back to your table and add 'class="playlist'"

I border-bottom: 11 solid #406480; I border-left: 11 solid #406480;

. uiNG SPIECIFIC

needs. You can cftange plans at any
time so there's no wrong answer

i iWiiii: 0-,5An3A2emJ.5e^
fcble.^ist|
: border: T solid #CFDCE&

m

t

Unless you only have one table style throughout your site,
make life easier by creating specific styles, as we have here by

hordpr-rollap^: no-COll^
m mm mopq \ backMBMit-color: color: #000; font: 0.8em Arial, Verdana, Helvetica, . #fff; We've given the header a background colour,
and added a darker bottom and left border to

addressing the style to

'table.playlist'.
— f ! n

give a slight 3D impression. We've also given
the table header cell padding to make it larger, and set the text-align property to 'left' to align
the text within the cell.

sans-serifj j-;::;

•This price table at www.basecamphq.com/ signup.php highlights the most important options

The CSS for the table element adds a one-pixel solid border. We've set the border-collapse

As our table already has a class of 'playlist', we don't need to add anything else to the

Practical Web Design 73

Tutorial Design attractive data tables in CSS

O Striped rows with dynamic data
Use your server-side scripts to calculate which rows in a table should be striped
If you have built your table using a server-side scripting language such as PHP, you'll need to use that scripting language to apply the class 'evens' to every other table row if you want to create the striped tables effect. In PHP, this can be done

E

H

foreach($result as $row) { jtheclass = ($n++ % M ? 'evens':'

! echo '<tr class="'. Stheclass.
I //build the rest of
table row here

quite s i m p l y. } First you need to set a counter to 0 and then start a loop analysing your table rows. Inside the When the table is displayed in HTML, you will

loop, check to see if each row number can be find that odd rows will have an empty class
divided by 2. If it can, then the variable 'Stheclass' attribute ('<tr class="">'), and even rows will
should be set to 'evens'; otherwise, set it to ". have '<tr class="evens">'.

•If you create tables In PHP, you also need to use the language to check which rows are odd and which are
even, so that you can apply the correct CSS class

e

o

o

Ta b l e s f o r d a t a

C D

0 O O

Ta b l e s

for

data

O

)(Disable^ j^Cookies" £^CSS' flPorms* i?>lmages* 0>nforma
Song
Second Intermission Artist Album

^Disable ^ lAjCookies' £ l i C S S ' i j f ' I m a g e s ' © I n f o r r r i a t
Artist
Second Intermission Ani DiFranco Ani DiFranco KTTunstall Semisonic Thea Gilmore Thea Gilmore
1

Ani DiFranco Ani DiFranco

Evolve Little Plastic Castle

Evolve Little Plastic Castle

Deep Dish

Deep Dish
Another Race to Fall

Another Place to Fall K T T u n s t a l l

Eye to the Telesmpe Feeling Strangely Fine
The Lipstick Conspiracies

Eye to the Telescope Feeling Strangely Fine The Lipstick Conspiracies Burning Dorothy

Closing Time
Generation Y?

Semisonlc

Closing Time
Generation Y?

Thea Gilmore Thea Gilmore

Instead Of My Saints

Burning Dorothy

Instead Of My
Saints

Done

•The first table style
that we create for our

HTML table nnarkup to get these styles to take effect, because the rule is addressing any 'th' element in a table with a class of 'playlist'. The

In the shorthand version, the order of the values starts at the top and moves around clockwise; top, right, bottom, left. You can use the shorthand way of writing out values for the margin on an element as well as padding.

•Using the same markup and changing the CSS code, we create a style using an image gradient

playlist uses light
colours and a 3D effect on the headers

styles you create here won't change the look of
any other tables you might have on your site -

table headers. To make this rule function, you need to apply the class 'evens' to the <tr> tag of every other row in the table. View the

only those that have a class of 'playlist'.

© T H ET A B L EB O D Y
m — • ^ Quick tip
ALIGNMENT To align text within table cells, you can use the text-align property set to 'left', 'right' or

© C R E A T N IGA L E fR N A T E L Y
STRIPED ROWS

page in a browser to see the completed, styled
table and check your HTML markup. A DIFFERENT STYLE

With the table header styled, we

Your table should be starting to look a lot

can turn our attention to the body of the table, creating a rule that applies to all 'td' elements in tables with a class of 'playlist'.

nicer, with the data spaced out properly and an
attractive header. One way to create distinction between the rows without adding a border to every cell or row is to create alternately striped

One of the great things about CSS is that you don't need to change your markup to change the look of elements in your design. If
you had several tables in your site using the same look and wanted to change them all, editing the style sheet would change the look

tiiibieiiwiist^i\ i MddiM: 0^^ 0.2em_0.5em O.Jem;
) This rule gives the 'td' element the same padding as the 'th' element. The shorthand

^

table rows.

HblejlMLst tr.eyens td f
backround-color:

of every table without you needing to find
and update each one individually. We've added very little markup and few
classes to our HTML table to create our look.

i border-bottrmr solid #CCCCCC; |
' } This rule addresses any 'td' inside a 'tr' element that has a class of 'evens', and that's within a table element that has a class of 'playlist'. It simply adds a background colour to each affected table cell, plus a border to give a 3D
effect similar to the one we created for the

border-left:

T

solid

#CCCCCC;

\

'center'. To align vertically within the cell,
use ve/ticai-aiign 'top'
or 'bottom'.

format is the equivalent of this longhand rule:

tablejlMlist td I ; _
padding-top: O.Sem;

Using classes sparingly is a good aim. A lot of the time, when you choose to use a class, there's already an element in the markup you can address to create the look you want, which saves adding superfluous markup to the table. We can now create a completely different look for our table. Edit the class name applied

patkfiltShrtBht: 0.2em; paddlrtg-bottom: O.Sem; pa«Wing-left: 0.2em;

74 Practical Web Design

Tutorial Design attractive data tables in CSS
o

to the opening table element to 'playlist2', then create a set of CSS rules for the newly
named selector table.

First, we give the 'th' element the same border colour as the main table, and a background colour of #AAAAAA (a midtone grey). The border that we apply to the main table in each of these examples will simply wrap a border

TA B L E

ROWS

^ Quick tip
COLOR SCHEMED

Finally for this new table design, we can style the table rows. In the previous table,
we needed to address the 'td' elements within

the table rows when creating our striped table effect. This was because we wanted to keep the spacing between our cells white. This time, we have no spacing between the cells, so we can simply add the background colour to the
'tr' element.

I border: T solid #737A80:

around the outside of the table. It will not

' faorder-collaWli collaBllit
} Here, we've given the table a one-pixel border and also set the border-collapse property to 'collapse'. This collapses the borders between cells, so if you add a one-pixel border to the 'td' element, you won't end up with a twopixel border where the 'table.playlist2' and
'td' borders meet.

create borders around the table heading or data cells (you need to add these borders when you style the cells). We can then add our background image. This is a four-pixel-wide image with a gradient applied, which we want to tile over the
e n t i r e a r e a o f t h e ' t h ' e l e m e n t . To c a u s e t h e

If you're having trouble selecting colours for your tables, the Color Schemer tool at http;// wellstyled.com/tools/
colorscheme2/jndex-

en.html is really useful, helping you to pick
complementary and

contrasting colours.

ist2 tr (

MirtaroTrnd-color:"#EFEFEF;

image to tile, you set 'background-repeat' to repeat along the x coordinate and position it
bottom-left.

&blejliliiist2 tr.e
i: backaround-color: #CECECE,*

Finally, we set the font to a large serif style,

® T H EH E A D N IGO FP L A Y L S IT 2

add some padding and set the colour to white
('#fff'), so that we can see the text on top of the gradient background.

We can now style the headers for the

playlist2 class. For this table design, we are
going to use an image in the background to apply a gradient effect to the header. You can

The first rule styles all 'tr' elements, giving them a background colour of #EFEFEF - a very
light grey. If you view the table now, all rows apart from the header (which has a more specific style applied to the 'th' elements themselves) will be that light grey.
The second rule addresses the rows that

tTHE TD ELEMENT
Moving to the table data cells themselves, we're going to keep these quite

use background images in your tables, just as
you would in any other element. Careful use

of images can create some really nice effects, although overuse can make the data in the
tables hard to read.

simple. We've created a fancy heading style, and we don't want the design fighting itself.

have a class of 'evens' applied to the 'tr'

H^Ie.'pfaylistJ td {
Ite!ej«ist2j^£ I hnrrler- Ipa tnlirl #737A80;
background-color: #AAAAAA; background-image: url(playlist2-header.gif); background-repeat: repeat-x; background-position: bottom left;
We've made the font sans-serif and set it at a

element, making them a slightly darker grey
and creating our striped table effect. It overrides our light grey rule in those cells. Save your files and view your work in a browser. To change between the two different table styles that we've created, just change the class name applied to the 'table' element in your HTML between 'playlist' and 'playlist2'. The two table styles we created should give you an understanding of how to style tables,

I font: 0.9em Aria! Verdana, sans-seritT"
padding: 0.2em; ! border: 11 solid #737A80;

font: lem Georgia, "Times New Roman"
Times, serif:
0.2em;

smaller size than the headings, then given the
cell some padding. We've also added the same
border used for the main 'table' and 'th' elements. This means that the table and each

f color: #f^

and you can now create attractive table styles
that fit into your own sites.

cell will have a uniform one-pixel border.

O CSS shorthand rules
Save typing and use the connpact way to define CSS values During the main tutorial, we've looked briefly at the use of shorthand formats to specify
padding in a table cell. There are several CSS properties that may be written in a shorthand
} maM'n: 0.2emi.

styte&.CM

O

1 rF<>™«T*T^
bo.^ { f o n t : • . 9 e i ^ . 6 e i v e rd a n o , o r i e l , h e l v e t i c a , p o k t i r q : » . $ «■ 9 , 2 m t . S a i }

S ii
»$-$eKf;

'

way, which can help to trim down your style sheets and save you some typing! Padding and margin can be written longhand, writing out the values for margin or padding
top, right, bottom and left as separate properties and values. Alternatively, you can write these out in a single property;
td{ ■in: 0.2em 0.4em 0.2em 0.4em; }

There are other properties that can be combined

• Keep your CSS code trim with shorthand definitions

in a shorthand manner. When specifying a font, for example, you would normally write:
body {

This only works if you're going to specify both the font size and the font style, otherwise you will need to use the longhand rules. You can also add the values for font-weight, font-variant and
font-style to this rule: body {
font: 0.9em/1.6em bold italic smai sans^serifj verdana, ariel i )

r font-famUr verdana. ariel, Helvetica, sans-serifj ~~|
I } font-size: line-helBht: 1.6em: 0.9em;

Alternatively, you could use: body{ ■i :

}

These rules are written out in the order top, right, bottom, left - clockwise from the top. If you want all four to have the same value, you
can simply use;

■ ' font: 0.9em/1.6em verdana, ariel, Helvetica,

If you don't specify the line-height, font-weight, font-variant and font-style values, they will default to normal. Once again, there are no
commas between the different values.

sans-serif;

■& .

■■■

Practical Web Design 75

Tutorial Design attractive data tables in CSS

C Add a hover effect
Make your table more interactive with automatic highlighting
One way to enahnce a table style is to
introduce a hover effect on the table rows:

when the user is moving across the table with their mouse pointer, the current row they are on will change colour. This is something that you frequently see in interface cJesign perhaps when the table is part of a form and you have to click checkboxes within a table cell

© O ©

Ta b l e s f o r d a t a

CZ>

^Disable* j^Cookies'' ^CSS* j^Forms' ii^lmages' Oinformati Song
Second Intermission

Artist
An! DiFranco Evolve

Album

to indicate which items in the table you wish
to work with. Highlighting the current row that the user is on helps them to see where

:>
Ani DiFranco KT Tunstall Semisonic
Thea

Deep Dish
Another Place to
Fall

Little Plastic Castle

they are in the data, especially if the table is
large or complex, and so adds an additional level of usability

Eye to the Telescope Feeling Strangely Fine The Lipstick Conspiracies Burning Dorothy

HOVER

IN

MOZILLA

Closing Time
Generation Y?

Creating a hover effect on a table row would be a really simple thing to do if we only
had to concern ourselves with Mozilla-based

Gilmore
Thea

browsers, such as Firefox. They support the 'rhover' dynamic pseudo-class on elements other than links, but Internet Explorer 6

Instead Of My
Saints

Gilmore

supports this rule only on links. We will first
find out how to create this effect in all the

browsers that support ':hover' on other elements, then will move on to a method that will enable you to support this effect in Internet Explorer 6 as well. To get your row hover effect in the newer browsers, add the following to your style sheet:

Done

• Because pages that use CSS layouts tend to have simple underlying structures, it's often straightforward
to rework them in mere minutes without having to touch your HTML code

rowspl.onmouseover = functionQ {

this.className += ' hilite'; ilblejafartist2 tr:hover I ' background-color:
['color: #FFFFFF: }

}
fhilite', 1

~
this.className = this.className.replace

though it's generally not a good idea to change elements such as font size or padding.
This will cause the table to appear to jiggle around as the user runs their mouse over it, which isn't a very pleasant effect. Other ways in which you could use this technique on a table would be to higWight Individual cells by

rawiflonmouseout = functionBi

© H O V E R N IN IT E R N E TE X P L O R E R
a M o z i l l a - b a s e d b r o w s e r . Yo u s h o u l d n o w s e e

E E
m
If you save your page and then view it in
Internet Explorer 6, you should find that your table row highlighting works in that browser
as well as Firefox.

switching the ':hover' class to apply to a 'td'
element instead of 'tr'. In the JavaScript code, you would also need to change the 'tr'
reference in the second line to 'td'.

Save the code and reload your page in

the rows changing colour as you move your
mouse pointer over the table.

You could also change the JavaScript code to activate 'onclick' - for example, when a user clicks into a form field in a table row, you could highlight the row that is being completed.

To get this to work in Internet Explorer, we
will need to use a bit of JavaScript. There are a few ways to do this, but the method we're

The script works by finding all of the 'tr' elements in your table and responding to the mouse cursor. When you mouse over a row, the 'onmouseover' dynamically applies the class

using here is a simple approach. First, edit the
CSS rule so that it looks like this:

There are lots of subtle ways in which careful usage of JavaScript, along with CSS, can really
enhance your users' experience of your site. Just always make sure first that the site
facilities are still usable if the user doesn't have

table.playlist2 trihover, table.p1aylist2Tt^ite {
i i backround-coior: color: #AAAAAA; j I #FFFFFF;

'hilite', and when you move the mouse pointer again, the 'onmouseout' function removes the class, or rather replaces the class with no class. This is an example of using JavaScript to plug the holes in browser support for CSS. The most important job, however, is to make your table usable without the highlighting. That way, it doesn't matter to your users if they don't get the highlighting effect, which will still be the case if they have JavaScript turned off in Internet Explorer 6. You could change any design feature of the table rows when using this type of effect.

JavaScript turned on. O

More info
Another approach to

}

creating striped table
rows is to apply the stripes using JavaScript.

© C R E A T EAJ A V A S C R P ITH O V E R
After the table in your HTML document, add the following JavaScript code:

One way to
enhance a table is to introduce

It's useful for existing sites, because you don't
need to add the class to

«K)rij«1WJ«!«ft«StiS«V#script"> ^
I var rows = document.getElementsByTagName

every second row. Learn the JavaScript technique
a t w w w. a l l s t a p a r t . c o m /
articles/zebratables

bti
for(var i = 0; i < royys.||n8M( i++) { ,

a hover effect

w

76 Practical Web Design

ON SALE NOW

COMPUTER ARTS 125
VISIT WWW.COMPUTERARTS.CO.UK OR

CALL +44 (0)870 837 4722 TO ORDER YOUR COPY

TUTORIAL; PHP
Sell from your site with Zer^ Cart
My Account

Details
Intermediate

Smelly

c s i i n m a H i
Zen Cart 1.3

Stuff k
Bath
H o m e

time

Search

Bathtime-> All Products ... RESOURCES
Zen Cart

I Enter search keywords h Hello Karl! Would you like to see our newest
additions?

Search |
Advanced Search

On Zen Cart's homepage, you'll find documentation, templates, examples and the latest patches.
www.zen-cart.coin

There are currently no

Only the best in smelly stuff...
If you're looking for:

Have you seen

product reviews,

th0 Oft of

zencart

PayPal
Zen Cart works with a

Information

PayPal merchant account,
which is no more difficult

shipping & Returns Privacy Notice
Conditions of Use Contact Us

. Cabbage scented soap
. Cheese flavoured deodorant

Languages

to set up than a standard personal account, www.paypal.com Gallery 2 Integrate older versions of Zen Cart with popular online image album Gallery 2, http://codex.gallery2. org/index.php/ Gallery2;Modules:
z e n c a r t

. Donkey dropping face packs
. Creosote molsturlser

Site Map Gift Certificate FAQ Discount Coupons
Nev\/sletter Unsubscribe

. Chocolate curling tongs
. TbArn ,Kn>i I cawio if.oll,

C u r r e n c i e s

Sell from your
site with Zen Cart
open source econnnnerce application Zen Cart 1.3

•Even if you're selling stuff that stinks, Zen Cart is the answer

Karl Hodge shows you how to create a PHP-powered shopping cart with
requirements to get everything functioning
correctly. It runs on most webservers and their

O e nC t a 3 1 r .p h s e ly o u d l b u a i
complete with full descriptions. In turn,

case of clicking a couple of buttons on your
control panel. Make sure you take note of the username, password and database name, as you'll need them during the installation. Another system requirement point of order: Zen Cart can be run on a secure server using SSL. This will encrypt data about transactions, giving your customers (and yourself) an extra layer of security. To use this option, you'll need

PHP-powered website, with all

the features you'd expect from
a commercial online shopping

platforms, from IIS on Windows to Apache on
Linux or Mac. Whether you're installing it locally to test the system or building a site on a remote server, you'll also need PHP and MySQL support. Zen Cart works with PHP 4.1 or later

system. It has brochure-style features that enable you to create a database of products, those products and categories can be further
arranged into genre or product types. Zen Cart doesn't skimp on functionality just because it's free: there are featured products,

U l

You need to

to have the CURL PHP module that's installed to make secure connections via HTTPS. Don't

a news system, inventory systems and a built-in search engine. You can change the look of your site easily by using commercial templates,
or by editing the CSS files they're shipped with. You can even give your site a full makeover

pay attention to the security
suggestions
and MySQL 3.2 or later. If your host is running
MySQL 5, you may get a recognition warning during installation, but don't worry; the software should still work. However, if you can switch to an earlier version of MySQL, we suggest you do so. Zen Cart doesn't create a new database, so you'll need to make one in MySQL before you start. On most hosting systems, this is usually a

worry if you don't have this, though. You don't
actually process payments with Zen, so it's entirely optional. You do, however, need to pay attention to the security suggestions the developers make. Reset write permissions at
the end of installation and remove the default

and build your own template in your favourite
authoring program. Of course, no shopping cart is complete

install directory. In our walkthrough, we'll take you from installation to a working shopping cart. When the software is safely installed, we'll add products to the database and customise the

without payment options, and Zen Cart doesn't
skimp here either. You can opt to connect your

Zen Cart to PayPal, or configure the credit card processing features to work with just about
The full version of Zen Cart 1.3 is included on the CD this issue

layout, formatting the appearance of your pages. No one need ever know that you're
using free software to launch your ecommerce empire. Now let's take a look at the features...

any merchant system. With such a sophisticated script, it's understandable that there's a quite a list of

78 Practical Web Design

Favorkes Toots Help

t j ^ Search Folders j

Itctftbk- i4l Codaw' a CSS- ^ Fermr- £ 1
Set Permissions on folders

^ f ^ O J U n r □t o g * ' ( t j

:d<3'"ia

a
lasEi

O
cache

i J
docs

a
download

O
emal

uJ
extras

a
hbnlarea

Now, ctiange the permissions on the following drectodes to 777 (read/wnte/execute).
/cataOoq/eacbe /cmtaIog/iM9«c /cat«lo9/lM;l<id»«/J

s /etigXlsb/htad^ lacludea

uJ
Images Includes

uJ
medb

CI
pub

LJ
zc.hstal hdex.php

0
lnstal.b;t

.•'=«taJj>g/«cdl» /c*t*log/j>ub t: /cat«Xog/*dBxei/b«c-kup>

j{ /eataXe>g/«chKls/> ' Mi9e9/9rttpb9
V Note: open the catalog/images directory and change all of the siJt>dlrectortes and their subdlrectohes to 777 as well. For example (this Is a partial list):
/catalog/iai^jea/^etclbwte# !■ / c a e f t l ^ / i M g e s / ^ t v d

0
ipnjnain.h,,.
lcense.txt

41
nd±ic,hbnJ

pagejwtJ...

*' /catalog/uM^eB/lmc^ ■' -atiOog^iaagfeB/Jar^e/civd

n/c at alog/iM^es/Mdiw
/cataXoq/mogea/wpload

ji NOTE: If you miss any of the Images directories and subdlrectorK

/iwages and try to use i: them later, you will get an error message that you cannot write to these drectones. As for other folders and flies, they can be CHMOD 644, or 444, depending on your webserver conftguratton.

Before Running the Instaile

EXTRACT FILES start by moving the Zen Cart ZIP file to your hard drive from the CD and extract all the files. It's a good idea to rename the main folder (the one

containing the application scripts) to 'zen'. Upload this folder and its contents to your
webserver using Windows' built-in FTP client.
jH

0S E T T N IGF L IEP E R M S IS O IN S
j M&<m //19Z. I6e.:.4/»n»didw/

The Zen Cart script needs write access to your server. The file 'l.readme^ installation.html' in /zen/docs/ sets out a full list of the files and folders you'l need to amend in the section 'Set Permissions on Folders'. Study it carefully to make sure you identify the right ones.

I

uJ

U
desses

u f
e*tra_cart„.

i J

a
h

O
M b m

o

o

a

a

J
Locabon;

F
^/pobXcjTtmiy

R m m t M s f c a m M o v a t l t t t m

axtre_ca#l... axtra.data,..

Mexjfters Mtjndudas lan^jagai mxUat

Q Copvthktm Ty p e : FA e P o l d e r

a
temtriatas

i
WPluban..,

VPkabon... autolMdJ...

i

i
ctiinter.ptv

k k k k < l « U b a s e J . , . j ^ ^ | ^ ^ J t o n « n M . [ < pf a n » _ ( t i e d ..

0
Modified; 06 Mwch 2006, 15;59 Q MyDoonants Write Execute ^ MyltabwrfcPUct;
0«ienl.)s
lr)dax,htid iMln.cart..,,

sptd*rs.bt

Permisstons:
O w r w

Read

B B B B B

B B B

Group
Al Users

0F N ID N IGF O L D E RP R O P E R T E IS

To change the permissions on remote folders and files using Windows FTP,

R E N A M I N G C O N F I G U R AT I O N F I L E S
Locate the file '/zen/includes/dist-configure.php' on your remote server.
Right-click and choose Rename from the menu, then rename the file to

right-click on the target in Network Places and choose Properties. You'll see a grid with three columns and three rows: tick all the boxes to set permissions to
'777'. This allows read, write and execute access for that folder to all users.

'contribute.php'. Set permissions for the file to '777' (as you did earlier). Find the file '/zen/admin/includes/dist-configure.php' - rename and set permissions.

Welcome To Ze n C a rt'" - Th e Art o f E-C o mme rce

; Zen Cart™ Setup - System Inspection
Take a moment to check whether you webserver supports the features required for Zen Ca-t**" to operate. Ptease resolve any errors or waminQs before conthung. Then dck on to continue,
- System lr>spectint RestJts

m Cart" truly is the art of a-eammaica; « frea, usar-fhandly, open source shop owners, programmers, designers, end J be, and should be, done Afterenttv.

shopping cart system. Tha software is bair>g developed l»v group of like-mmded

uMt need to directly edit a couple of PHP files
to remove the "Sales

Webserver - Apache/2,2.0 (Win32) DAV/2 mod_sst/2,2.0 OpenSSL/0.9.8a
and shoppers

mod_autoindex color PHP/5,1,2
HTTP Host192,168.2.4
IT

Message Here" and " C o n g r a t u l a t i o n s ! Yo u

Simderty, other programs are nearly impossible tc

jse

without

an

Path_TransUted - C:/Program Fles/Web

Oev/xampp/ht±cs/ien/zc_instal/inde*,p^(SCRIPT_FIL0WiNC) PHP 0/S - WINNT
PHP API Mode - apache2handter PHP Max Execution Time per page « 60

have successfully installed..." messages.
Yo u ' l l fi n d t h e m a t V z e n /

Copyr*!^ 0 2003-2006 ?an Cart""

START THE INSTALLER

Mly When you've finished with the configuration files, you're ready to steam ahead with
configuring your shopping cart. Open your web browser

^ Register Oobak - OFf ^ MySQL Support - ON CD MySQl Vemon CBck here for more irrf^ ^ PHP Version-5,1,2 ^ PHP Safe Mode - OFF ^ PHP open^a^edir restrictions -

Includes/languages/
englishydassic/header. php' and 7zen/includes/

languages/english/index. php' respectively.

and go to 'http://[yourdomain]/zen/zc_install/index.php',
or simply go to 'http://[yourdomain]/zen/' instead. You should be confronted by the generic Zen Cart welcome
page for the installer.

jyK SERVER SYSTEM SETTINGS liy Accept Zen Cart's terms and conditions to proceed to the next page, which will examine your system. Any problems will be highlighted with an
exclamation mark. These are generally associated with PHP modules that Zen Cart uses. Any problems will have a link next to them that says "click for more info".

Practical Web Design 79

Tutorial Sell from your site with Zen Cart

c art^
f r - c e m m e r e t

;; Zen Cart™ Setii(5 - System Setup
We yJ now setup the Zen Carf*" System environment. Please carefuly review each settmo, and chaige If necessary to suit your drectory layout. Thendck on Ssva System Settings to axttlnje, - Server Settings Physical Path Physical Path to your Zen Cart directory, Leave no trailing slash, more Info...
Virtual HTTP Path

;; Zen Cart™ Setup - Database Setup
Next Vi^e need to know some Information on your database settings. Please carefuly enter each setting h ttv appropriate box and press Sst^e Dstibase Settings to continue.'

IC^ogrom Files/vVeb Dev/yampp/htdow/zen

Database Type Choose the database type to be ised. more Info...

I MySQL *1

Store Identifier ( Ta b l e - P r e fi K ) , What is the prefix you would ice used for database tables? Example: un_ i
Leave empty If no prefb( is needed.

Virtual Path to your Zen Cart drectory. Leave no traing slash, more info...
Virtual HTTP8 Server

|h«p;//192.166.2.4/!en

You can use prefixes to alow more than one store to share the same database, more Info...
Database Host

What is the datab

? The database host can be m the form of a jlocalhosl
Username -

host name, such as 'dbl.myservw.com', or as an IP-address, such as '192.168.0.1'. more Info...

Virtual server for your secure Zen Cart directory.

|h«ps://n92.168.2.'l

Database

What Is the usemame used to connect to the database? An example root

jiWfi na vana itetii iwmi titBi.i

R U N T H E I N S TA L L E R Click 'Install' to continue. On the next page, the installation paths for your set-up should have been automatically filled in, but check carefully that they're right. Only enable SSL if your PHP installation supports it through the OpenSSL and CURL PHP modules. Click 'Save System Settings' to go to the next page.

0P O P U L A T EY O U RD A T A B A S E

Skip the next page by clicking 'Save phpBB Settings' and go to Database Setup. Here, you'll enter the database, host and user names for the database you created on your webserver. Don't install the demo data, as we'll add our own. The installer will connect to your database and write the table structure for your cart.

; Zm Cart'" Selu|D Finished

This section of the Zai Cart"" setup tool wH help you begin setting up your basic store setthgs. You wl be able to change any of these settings later using the administration tod. Enter each value carefJy
and press Sive Store Settivf^ continue,
"* Store Informatior ^

CofTgratulatior«!
You have successfulv Instaled Zen Cart'*' on your system!
NEXT STEPS

What is the name of your Zen Cart store? more Info... jSpodgod's Smelly Stuff
Store Osimer Wholstheovfli Store Owner

For secunty, you wi need to reset your configure^ihp fles located m tfie /admln/includes/ and /Includes/ folders bade to read^vily mode before alowing people to access you store, AddKlonaly, youl want to remove or rename the /zc_lnstal folder so that someone cant re-mstal your shop again and wipe out your database! Warnings wl appear until the folder has been removed a

r of your Zen Cart store? more Info... ISpodgod
|bieh®mQdeupaddressliere.com

renimed,
CONFIGURATION

Email

What Is the Zen Cart store owners email address? more
Info...

We encourage you to begin by readbig the FAQ's In our online support forums for usefiJ

Store Country What country is your Zen Cart store located in? more Info...

j United Kingdom

H

informaticn to assist with conftguring arvl customizkng your orine shop the way you wish It to look and operate, If you have qjestlons, this is the first place to look! If you're sturrcied, feel free to post a questioni We have a helpful, friendly, knowledgeable community who welcomes you.

© A D DY O U RD E T A L I S
m — ' ^ Quick tip
CURRENCY ISSUES During the configuration stage, Zen Cart offers only dollars or euros as currency options. If
you w/ant to set your

We're entering the home straight now. Add your details to the final form,

■ ly Before you can start adding stuff to your cart, you'l need to set up an
Administrator. Enter a name, password and email address and then save the settings. You'll be taken to a final page with some important security information, and
links to both your (empty) shopping cart and the administration section.

YOU'RE THE BOSS

giving the name of your shop, your own name and email details. Choose 'United Kingdom' from the Store Country menu, but ignore the menu that asks you to select a region (we'll do this later). Similarly, ignore the Currency menu for now.

PA RT TWO
ADDING CONTENT

DEFtNE Pages EOfTOR FORI tNGtlSH

fseiSTfleinSr" 3 TEXT Editor | HTMLm jfe|
r a n t t e m p t a t o o v e r H d a d i r e c t o r y. E

--tano Mn P»gt Sanqila Uxk ..

g

ft 7

e m

Iht Mcboo of tot It fr«m the De&e P«ge« Editor located uoder Tools n Ifae A<ltxiia. To remove liu lectoo c^the test, delete it from the De&ie ?4ge« Edttor Hu fie IS loctfedn /laoguaocv/anallah/htal^lacludas/clMSlc/ NOTE; Ahnys barknp tha filat in
i««Wffaa/an«liah/htal_lnolwlaa/roar_ttavXate

currency to sterling,
go to Locali2ation>
Currencies in the Admin section. Click 'new

currency' and enter

'Sterling' as the title
and 'GBP' as the code.

You can get the current
dollar value of the

pound from
w w w . x e . c o m

CHANGE THE FRONT PAGE

f|¥B To edit the default content within the cart's

i lU*

L

JL

JLcwi^

RLc

pages, start by defining an HTML editor in the Configuration section. Go to Configuration>My Store and select HTMLAREA as your HTML editor. If you're sawy, and used to using a different server-side editor
(such as FCKeditor, for example), you can install and
choose that instead.

0C H O O S ET H ER G IH TF L I E

1

Go to Tools>Define Pages Editor. From the menu, select 'define_main_page. php'. You should see the content of the file appear in the editor. You may get a message telling you that you need to set permissions to '777' on the file to edit it. Go to your remote server in Network Places and change permissions on the file listed.

80 Practical Web Design

Tutorial Sell from your site with Zen Cart

A a 7 ii « «. «•i ®
~«»an<> g ? 03

Only the best In smelly stuff...
ir you're looking for;

.xlhsifl

J

ii^gs

" . «■

i&jte

« Cabbage scented soap|
« Cheese flavoured deodorant

• Donkey dropping tace packs
• Creosote motsturlser

• Chocolate curling tongs Then you come to the wrong place • we only sell the very best herel None of the Spodgod's Smelly Stuff is tested on children or vegetattes

0W H A TY O US E E ..

The HTMLAREA editor works like a word processor. You can format text using

A D D I N G N E W C AT E G O R I E S
To populate your cart's database with products, you should define categories and subcategories to list them under, then add the products themselves. Go to

the icons along the top of the document windows. These are translated into HTML and written to the PHP file when you click Save. You'll need to edit the 'index, php' file manually to remove the remaining text.

Catalog>Categories/Products and click the New Category button. Type in Category
Name 'Bathtime' (you can change this later).

O Create a template
How to design your own custom templates for an easier life
T.ME4IM. iHTMLaM^ CM*«MMi/Pf»4i>ctDi*H*vOr4Mi |C4lagaaMSatOKt(i,Cil«)ainN«M J C AT t G o w e s / P r o d u c t s - To p
QMMttty I'-JSathtMie Ustwf

I

" 2
Swt

0

of

0

•c»i*e

0

0

ooSi

To create a new template, go to your remote server and find the folder '/zen/ includes/templates/'. Create a new folder inside called 'custom', then a folder inside that called 'images'.

I

You'll need to copy some files to your new 'custom' folder. Open the original Zen
archive file on your local machine. Copy the folder 'ess' and its contents from '/zen/
TSencart
E-CMMMfn EKtbM c*»vrt«l>t« 2003 Zen Cert~

includes/templates/template_defaults/' to the 'custom' folder on your web host.
In the same way, copy over the file 'template^info.php' to the custom folder.

You'll need to edit this file in a text or script editor so that the line '$template_name = 'Default Theme" now reads '$template_name = 'Custom Theme". To start using the new template, go to Admin in Zen Cart and go to Tools>Template Selection. Choose Custom Theme from the available options. To change the look of this new theme, edit the CSS file that you placed in the folder '/zen/includes/templates/
custom/css/stylesheet.css'.

0D E S C R B I N IGN E WC A T E G O R E IS

Below the Category name box, you'll find a Description box, which allows you to enter HTML-formatted content, including links and images. For now, we'll just type in 'Soaps, bath gel and bath oils' just to get the ball rolling. You can also upload an image to represent the category if you wish. Click Save when you're done.

© C R E A T N IGN E WP R O D U C T S

When you've finished, click on the new category. At this point, you can create as many new categories within the first as you need, and make categories within them if necessary, as you can see in our screenshot. For now, we'll add our first product by selecting a subcategory and clicking the 'New Product' button.

• Because Zen Cart templates are simple CSS layouts, you're not stuck with default layouts

Practical Web Design 81

" zencart tka wt vf
Product in Catscorv: 'Bathtimf > Cm a Rope"

S t < ^ O NU < i V * d ^ « 4 « c t
Product Matter C a H e a r r :

M«u

0*{IA«4I

10# 7 On a Rope

NOTE: Na<t«r Category i< u*ed for pricing purposef where Wie p r o d u c t c a t e g o r y a ff e c t * t h e p r i c i n g o n U n i t e d p r o d u c t s , e M a m p t e : S a l e s

CATccoRies / Products - Batktime
Product* Statue

^ InStoc*

f Out of Stock

Date

Available:

( * v v y - M M - D W

[2006'06-16

«C3 Edible «DN«v«lty 7C)o«alUM
O o f O M b v *

Products

Manufacturer:

B SB — n j FK V— mM y Ye s r
r

0

e<

0

«ebv«

Product •* Free: Product is CeM for Pr«ce

^
N o » .

Yo s

Product Priced bT
Attnbutos:

Ta x

Class: Price

Products

Products Price (Gross):

l-nonalis, 1"
Required

.li
E'C*i»in*rc<

"zencart
Eitllo* *200$ Z*l>

Product»

Virtual:

^ Yes, Skip Shipping Address No, Shipping Address

FILL IN THE FORM
The New Product form is complex, reflecting the variety of purchase options

POSTPRODUCTION EDITING
Categories and products can be edited, deleted or moved (to a new category)

that are available, the need to track inventory, and so on. Worl< your way through the form, adding an example product and leaving the taxation option set to 'none'. You can preview how the product page will look before you save it.

by clicking on the 'e', 'x' or'm' icons in the Action column of the Categories/
Products section of the cart's Catalog page. You can also disable a category or product temporarily by clicking the green Status icon in the Status column.

More info
ZEN CART FORUMS
The bundled

PA RT THREE
CUSTOMISE YOUR CART
Vou have soccessfuUy lied your Zen Cart'*' E-Conwtierce

nl Jtasjn ™»;r
• HaiQ CSS Stylesheet ' 8p«cka9e teaplateS;sce»

^

I
'

f
^css

OH

!
id
. . . . . .

▶ gcopytight Copyright 2003-2005 Zen C«t De7eiop*ent ' 6copYti9bt Potcions Copyzighc 2003 osCcmierce » S i i c e n s e h t t p : / / w n r. 2 e n - c a t t . c o » / l l c e n s e / 2 _ 0 . t x t G N V ^ 07et:sioQ $Id: scylesbeet.css 3215 2006-03-20 06:0S:5

"ess Styles

[current

w

w

m

No CSS properties onily to tiw current selection. Please

documentation, found in the 'Docs' folder of

select 4 styW element to see Mhch CSS properties apply . Only the best In smelly stuff...
; ; Shtpptng coftd*ion« 6 fiatums of ust

*r

( Migln: 0: verdane, 62.5%; ariai, helvetica, aana-aeciC;

the installation, is fairly comprehensive. For the really tricky stuff, turn
to the Zen Cart

; Pnv»cy Nobca
> C o n t « t U «

iryoi/ra looking for: . Csbbsg* sc«nt*d soap
> Chtes* flavour«d dftodorant

«ont-Ca»ily: font-alse: coloc:

[Sim Map icACvroriCMeFAQ : Otscount Coupons
; N « w s l M » r

#000000;

. Oonkty dropping Tbc* packs
. Crsosot* molsturlsar

community. You'll find lots of helpful stuff in
Zen's forums - from >8O!4

Q P
Al n = r - a
SM

TSfSl
No property Is currentf^ selected above.
)

>

. Ctioeolat* curling tongs Then you cam* to tha wrong piaca • wa only sail tha vary bast harai

'

a

lag

(bocdec;

none;

» r e t e M i w r e r ' M Tul li t c«Ax

a:link,

fnavGZPagesTOC i3300rr;

color;

font-fafnly

_ #000000 Verdana, artal, helvetica, sans-serif
62.5%

beginners' tutorials to
more advanced hacks:
www.zen-cart.com/

, Font-SBe
none; fMrgin

text-decocation: £M

ADD A NEW LOGO

A

|a:visited {
coloc: I3300n-; none; taxt-decocatloo:

modules/ipb/

(MlB The default logo image that says 'Powered by
Zen Cart' can easily be replaced by going to '/includes/templatesftemplate_default/images/' and switching 'logo.gif with your own image. Make sure you back up the original file before replacing it, and then refresh your cart to see the result.

0C H A N G EC S SS T Y L E S
fzencart
m m
COI.UMN Boxes classic
ocs/ttn/iridudvi/moduie!/

All the cart's layout and formatting is stored in the custom template's style sheet. To change the look of this new theme, we can edit the default CSS file bundled with Zen in '/zen/includes/templates/template_default/css/stylesheet.css'. Open it in any code or text editor and change colour and text values, but back it up first!
|ChacKtoUpda»»l

I the qft of ««commefc«

Sencart

TagLine Here

aeKB* Path: C:/Pro«ram Fit»$/W«

...

L f F u m w r coIimN

LSFT

or

U C H T C O L U M N l £ F T

0 ▶ Bom Detail*:

A ^ frox Name; order_hrttory.php

Congra^lations! You have successfully installed your Zen Cart^ E-Commerce Solution.
Hello Karl! Would you like to see our newest
; additions?

Shipping (i Returns Privacy Notice Conditions of Use
Contact Us Site Map

tKlabox«</docum*nt_c«ttg«n«t .php

LSFT LEFT

V Location: (Sin^la Column i^nara* thit

X ^ LtfVRight Column Status: OFF

(tdabo]i«>/wiiats_nt«.ph» sidabox«iM*r>ufaetur«rs .ph{
»KM>ox»s/r*vwwf «hp

LEFT

0 (D lattms) LEFT Q (D Calumn Sort Or<lar; 0
0 ^ $tn9l« C«lumo Statui: OFT ®

Gift Certificate FAQ Discount Coupons
Newsletter Unsubscribe

LEFT LEFT

tid»box*«f*afa>r*d .php

Thi* tacUon of text it from the Define Page* Editor located under Toolf In
«id«boztf/tann«i-_taflx.»hp

0 ( D 0 ( D 0 0 0 0 )

a t h i s s e c t i o n o f t h e t e x t , d e l a t e i t f r o m t h a D e fi n e P a g e s E d i t o r.

I Page 2
iPage

sidabaxat/*zpa«*s .php fl4eboxet/r*eerd_ceinpam«».php

0<C
0 ( C 0 0 0 0 0 0 0 0

1 Page 4

3

N E W T E M P L AT E S Because Zen Cart is template-based, you can make quite extensive changes to

the appearance of the cart without changing the core code. Alternatively, you
can download and install custom templates to change the look of your shop. You'll find a selection to get you started at http://snipurl.com/zentemplates.

(J)

C O N T R O L L AY O U T B O X E S You can edit the look of your shop easily by going to Tools>Layout Boxes
Controller in the Admin section of Zen Cart. Select a listed box and click 'Edit'.

You can select whether the selected box appears on the left Of tight, cw itwieed whether

it appears at all. Click 'Update' to make your changes stick. O

82 Practical Web Design

We've brought together all the web building advice

you could wish for into one jam-packed section
elcome to Practical Web Design's

yy Ultimate Resource section, packed full of
useful reference materials, design
inspiration and expert reviews. This issue, we have something of a video

This issue:
84 Software
Video-related applications are given a thorough going over by IVIark Penfold

theme going on, with no less than four strong
video-centric software applications under the

scrutiny of Mark Penfold (page 84). There's even more software on the CD, including Flash Decompiler and Search Engine Studio (page 98).
There's also our regular information sources,

88 Books
DOM Scripting explained, plus Ajax, and building HTML and CSS sites

with a glossary to refer to while you're reading
the magazine, and details of dozens of firms that can help you get your website online.
Fk* Up your own Unux

93 Site envy
The new sites and redesigns, including a snazzy CSS-designed food website

98 On your CD
Flash Decompiler and Search Engine
Studio, plus videos and tutorial files

Shaun Weston

Production Editor O

102 Builder's bookmarks
Essential links to help you enhance your site-building and design skills

108 Hosting 102
Dozens of web hosting firms surveyed - choose the one that's best for you

112 Glossary
TESTS YOU CAN R E A L LY T R U S T
These awards are given to the
best software and sites that we feature each month.

PRICING USING THE I N F O R M AT I O N S C O R I N G S Y S T E M
We provide you with the most up to date information on all of the sites, software and services
that we feature in Practical Web

★ ★★★★ When we give it five, it rocks! ★ It's good, but could be better
★ * * Middle of the road ** Substandard fare ★ STINKER! Avoid at all costs

1

All the key terms of web building explained in a handy reference format

Plus:

111 Back issues
Limited stocks available

■e d i t o s s t a r v e
***** *****

Design magazine.

Practical Web Design 83

Reviews Video software

Details

Broadcast Machine
A free video publishing tool with a superb support network

0771
Publisher

Participatory Culture
Foundation

Telephone + 1 508 756 7496 (USA)
Website

e n t© t n irP H P ,B o r a d c a s tM a c n h e i
provides you with a rapid and widely compatible method for publishing your videos so that

you can become part of the Internet TV

www.getdemocracy.conn

phenomenon. The burgeoning audience
of users of video iPod and other devices

means that this technology is going to be massive. Broadcast Machine enables you to get involved; whether your content is any good remains to be seen.
THE PRINCIPLE

Internet TV sounds like a high-maintenance

concept, and without the intervention of The
Participatory Culture Foundation, it probably would be. However, its open source solution is end-to-end simplicity. There are three further components that work alongside Broadcast Machine, together forming an entire system. Democracy Player is a desktop tool for watching Internet TV. Available for Windows, Mac or Linux, it's episode one is now available for download. Compression is important, as are lighting and

• Part of the Broadcast Machine ecosystem, Democracy Player has a central role In the process of getting your Internet TV out to a wide audience. It's via this application that viewers subscribe and view content

plugged into the whole network of online programming. It also features a handy channel
guide, the second key element. Third is Video Bomb (www.videobomb. com), a central point of contact. In effect, you

You can either host the videos directly on your
own server or you can arrange the transfers as torrents to minimise your bandwidth woes.

sound. Get it wrong, and people might not be

watching you for the reasons you'd hoped. O

TEETHING

TROUBLES

create your own personalised TV channel that you can enjoy and others can subscribe to.
UPLOAD AND DOWNLOAD

Broadcast Machine is based on PHP, so it should have wide web host compatibility. But there are bugs, and the system doesn't work everywhere. Thanks to the choice of PHP as a foundation stone, this is fixable, but for now,

v/ebdes^nverdict
Broadcast Machine is a crucial part of a complete system, all free. Even as a simple video player, it's

fun, and as a platform for public access IPTV, it could be significant as long as those bugs get fixed.

RATINGS
F E AT U R E S PERFORMANCE EASE OF USE VA L U E F O R W O N E Y TOTAL
* * * ★

Creating your own channel is easy. Just upload
the Broadcast Machine folder to your web

it pays to just check the package works before
spending hours preparing videos to upload. There's also a lot more to producing videos
t h a n s e e m s o b v i o u s t o t h e c a s u a l d o w n l o a d e r.

★ ★ ★ ★ ★ ★★★★★

server and call it up in a browser window. Find Broadcast Machine I in tine Tutorials section I of the CD. ■ Create a new account, then upload your file, add whatever detailing you feel like, and

Key features

LOG INTO YOUR ACCOUNT

|tj|§ Possibly Broadcast Machine's greatest selling

point is its ease of use. PHP is all it takes. That means pretty much every host will be able to support it, and you don't need to go through crazy MySQL set-ups either. Just log in and upload the files.

0

PUBLISH YOUR VIDEO Once you've created your admin account and produced a video, it's time to start publishing.

Create a channel with push-button simplicity, then

0 B O M B

upload a file (if you're not planning to torrent it), fill
in the details and hit Publish.

The final part of the system is getting others to watch your content. This is helped by the Video Bomb website, where you can publicise your channels for free to an audience that simply subscribe through Democracy Player. It's all very civilised.

84 Practical Web Design

Reviews Video software
o

Details

QuickTime 7 Pro
Apple's video converter delivers encoding that's streets ahead

PC Windows 2000/XP 400MHz Pentium 128MB RAM
M a c

Mac 05 X 103.9 or later 400MHz PowerPC G3 128MB RAM

O s p e p 'lQ c u k m T ie d v e ios y e s m t
is popular, powerful and well-

designed. If you're doing the basic yet essential tasks of

online video, it's an important ally, encoding effectively and quickly while also providing some fundamental editing options.
This Is an end-to-end solution. Connect

Publisher

Apple Computer Telephone
0800 0391010 Website

your DV camera up to your PC or Mac and QuickTime Pro enables you to record your footage directly. You can then edit It, apply

www.apple,com/uk

effects and output your various download
options. The comparatively new H.264 codec Is also making QuickTime a popular choice, improving noticeably on MPEG4 alternatives. GET IT ON QuickTime seems to be cleaning up on the web thanks to Its broad appeal. The free player Is arguably the nicest-looking media viewer around: It opens multiple clips, can •QuickTime Pro is versatile enough to enable simple editing like Trim To Selection. Using simple sliders, you select the piece of footage you're after, then either copy and paste or trim down

handle a broad range of file types without
crashing, and Is the only act In town when it comes to Apple's newly developed codecs. This means previewing your work In QuickTime Pro Is a pleasure. Even at full screen, the player just keeps things flowing. negligible effect on file size. The inclusion of music and volce-speclfic codecs with the package Is also a genuine advantage. So it sounds good and the video looks great, but what about custom players? Apple has come up with an answer to this problem, Including Flash, but Windows Media and DIvX are not among them. So as good as it Is, It's not an across-the-board solution. o

Hit Export to bring up a clearly lald-out Save
screen. There's no option to create your own

enabling designers to use pretty much any
visual concoction as a custom skin for

\^designverdict
QuickTime is popular and flexible, and the Pro upgrade is inexpensive. The reach this package has, combined with its simplicity, makes it a must-have tool for video recording, encoding and optimisation.

presets or batch process facility, but the software does offer to reuse previous settings.
SOUNDS GOOD Audio is also well catered for In QuickTime Pro. Minute control over your audio track's pitch, volume, equalisation and balance are important factors, all the more so for their

QuickTime. There's a bit of messing about to go through, but there are plenty of stepby-step tutorials out there. NO WINDOWS MEDIA

R AT I N G S
F E AT U R E S PERFORMANCE EASE OF USE VA L U E F O R M O N E Y TO TA L

•k-k-k-k-k

QuickTime Pro uses a container technology that supports many different media types.

Key features

EXPORT OPTIONS
There may be formats that QuickTime cannot

MPEG4 EXPORT
MPEG4 is popular because it meets web users'

AUDIO CONTROLS
The audio component of any compression solution Is crucial to the final user experience. QuickTime doesn't have huge numbers of bells and whistles, but it does have nice controls, as well as AIFF and specialised export formats.

reach, but the ones It does support cover a terrifically broad spectrum. The controls are of superior design, and the package, on both Mac and PC, performs without a hitch every time.

need for quality while also being acceptable In terms of file size and download time. Apple's H.264
codec Is the latest and greatest MPEG4 encoder and,

like its forebears, provides fine control.

Practical Web Design 85

Reviews Video software

Details

Flix Pro 8.5
An extremely accessible Flash Video encoder with creative credentials

P C

Windows 98/Me/2000/XP 233MH2 Pentium II 128MB RAM

Internet Explorer 6
M a c

Mac OS XI 0,3 or later

Flix Pro is a package you would be wise to

O

the developer of the VP6 codec used to create Flash Video has produced a first-rate piece of

software for encoding. On2's

PowerPC G4 or later; Intel processors not supported
128MB RAM Safari 2 or IE 5

consider if your target is Flash Video.
Not content with delivering a codec that

s s s n s a m m
Publisher

produces superior quality video, On2 has added creative tools, including chroma keying and vector video, alongside the labour-saving essential batch processing.
C L E A R A S C R Y S TA L

On2 Technologies Telephone
+1 646 292 3533 (USA) Website w w w. o n 2 . c o m
•CurrerKy conversion

The VP6.2 codec upon which Flix is built really
delivers the goods, producing obviously smoother and more watchable footage than MPEG4, though not always better than Apple's H.264. Particularly at lower bandwidths, VP6
stands head and shoulders above the rest.

Encoding times are fast too, even from
pure, unsullied DV. Crunching 256MB down to 1.9MB in just over three minutes is a reasonable figure. But if you have several items to encode in the same fashion, that's

•Top of the extras tree is the addition of chroma keying. With just a few attempts, this option gives you some great results. Your blue wall can quickly be transformed into any location you like
can under the right circunnstances offer a

dramatic improvement in overall quality.
USERS

The full, standalone application gives you all the Flix Pro tools, two-pass encoding and a series of interesting creative options, such as
Vector translation. Meanwhile, the Flix

when you begin to feel the benefit of the Flix
batch processor (and your stress levels will

If you're working with Flash 8 anyway, then
you'll be using this codec in its full two-pass glory. Yet, outside of that application, Flix is the only show in town. There's several flavours to choose from, though, each aimed at a different market, so it's important to make sure you study what's on offer.

begin to drop).
The addition of several simple filters such as noise reduction, brightness and contrast means that you have the power to correct any minor

Exporter brings the VP6 codec to any QuickTime application so that you can plug it
into the likes of Final Cut or After Effects.

There's also a Flix Standard, but when the
On2 sales blurb notes that this is for "small

problems with lighting or motion artifacts. This
doesn't always deliver pin-sharp results, but it

businesses who don't require the high video
quality", you know it's not going to cut the mustard. Of the three options, the Pro version
offers the most added value.

Flix Pro interface
Flix offers a simple interface for some fundamental, yet often complex, video calculations

ADDED

VA L U E

Aside from some top-notch video encoding,

;L]; : M [A »; w X: m ^ imT
QUICK ACCESS
Flix Pro's main panel manages to
cram a lot of information into a
SWF Audto VM«o Ciw VKtof VW2 '

ENCODE
Find your

Flix Pro delivers a number of creative features that should be of interest to most video users. Chroma key tools open up the almost

original media
and determine its final destination as

( tfowx ) ( W«y )
Output /Umtj/i 1 ? K B r o a d b a n d V h k o ( F U s h g f LV )

small space without becoming over-crowded. This icon bar gives

( trww) ( Wy)
Movt* T»f9M

unlimited world of compositing without going to any ridiculous expense. Similarly, the Flix
Pro Vectorisation option turns video frames into smoothly rendered vector animation.

you rapid access to pretty much
the entire application.

g Link

' 8

well as its title.

Once everything's

in place, just hit
_ HT»«l a Export vidM

Encode and watch the

These features, though not entirely 'pro' in nature, will offer the seasoned designer some interesting avenues to explore. O

OUTPUT SETTINGS
Click between the various settings panes to ensure that your output is up to scratch. There's lots of sliders and boxes to be ticked, so that you

. Eim ' □ iMfram* _ KKf>o^ttar _ WnPr.mw

ifowrt*

' Cna»lilS«VF 9FUth«aV ; CMxnw Q Ot«Fiv Q

sparks fly!
O

t^<M«
a Export

'Z

can tailor your encoding as closely
as possible to your requirements.

vt^ebdesignverdict
comparable to MPEG4 and sometimes even better

Flash Video offers a way of enhancing the capabilities of Flash player, delivering high-quality video playback to the masses. Flix Pro is capable of producing results

INTERACTIVITY PRESETS
In most circumstances, you won't need to change the settings, as Flix has a huge range of presets, all accessed from this drop-down menu. It could be as simple as finding a file and choosing a preset. You may want to add some interactivity in the shape of a hyperlink to your movie, or perhaps you want to control how linking will occur. This is where it all happens.

CHOICES
Flix is all about Flash Video, FLV and SWF The big advantage of FLVs is that they don't have the 16,000
frames limit that SWFs suffer with.

RATINGS
F E AT U R E S PERFORMANCE EASE OF USE VA L U E F O R M O N E Y TO TA L

This area gives you a rapid summary of what you're about to do.

86 Practical Web Design

Reviews Video software
o

Details
U i l W
$599 (£329*) REQUIRES
M a c

Autodesk Cleaner 6.5
The industry standard compression tool adds to its impressive feature set
hen it comes to video

Mac OS X 10,3 or later PowerPC G4 128MB RAM

35MB hard disk space 1,024x768 16-bit display

A T 1 * A optimisation and encoding.
Cleaner is the leader of the pack

for good reason. Capable of
handling input of virtually any format, and producing output in any other, it's the only true one-stop solution if you want to ensure

Publisher Autodesk

Telephone
01252 456600 Website w w w. a u t o d e s k . c o . u k
•Currency conversion

maximum penetration for your files.
Although QuickTime Pro is a much cheaper option. Cleaner remains the most promising encoding package. Stable, easy to use and

highly flexible, it has developed over time to
become an industry standard. (Autodesk also offers a separate product for Windows, Cleaner XL 1.5, for the same price.)

IN/OUT

Cleaner can encode to more than 60 different formats. With MP4 output on the Mac

hamstrung by an untraced bug that arrived with QuickTime 7.1, it highlights another benefit of using Cleaner - namely that
Autodesk won't just shrug its shoulders at the

• It's a huge advantage be able to split your Project window's screen in half and preview the A/B difference your choice of settings has made before you commit to processing your footage

everything to multiple formats. Cleaner has

you're unsure of which formats you'll be
needing, at least Cleaner is a safe bet because

problem. It will devote resources to fixing it. The latest media types are also catered for:
3GP and Sony MQV for handheld devices,

this side of things stitched up. You can quickly batch process your files by dragging them to
the main window, use the A/B preview mode to ensure you have the right settings, and publish directly to video servers.

it covers them all, and does it well. o

Kinoma for Palm OS and two-pass Flash Video.
SHAKE IT ALL ABOUT Cleaner has two basic windows and a third

wefadesignverdict
Cleaner offers the last word in video compression and optimisation for the web. You can be sure to hit pretty much every video viewer on the planet but for this luxury, you pay a premium price.

ALL-ROUNDER

monitor pane. The first is the file management or Batch pane. It's here that you drag and drop base media files, determine their output
destination and access the next, more

While Cleaner is a flexible and wide-ranging application than wouldn't look out of place in a well-equipped editing suite, it may not be the right choice for everyone. With the
accessibility of QuickTime and Flash Video, the

R AT I N G S
F E AT U R E S PERFORMANCE EASE OF USE VA L U E F O R M O N E Y ★★★★

significant settings module. Of course, speed is essential, particularly if you find yourself needing to encode

majority of web users can be reached easily
without recourse to Cleaner. That said, if

Key features
9 OUMT M. Ml liM.

j
0^ J
S 1 *•«««.,

MtMtol

« > |1 r1 liM li
OMW

MM

B AT C H E N C O D I N G The main point of entry for most encoding jobs will probably be the batch encoding window. Getting started is simple: drag and drop files into the frame. A right-click gives access to each file's settings, while the green play button activates the crunching.

MEDIA Cleaner is capable of handling an array of
media, from FLVs to 3G media for mobile devices. Thankfully, for the novice, each of these

possibilities has a well-tuned selection of presets waiting
to be used as is, or edited to suit.

PROJECT WINDOW The project window allows you to preview your footage before you commit, and provides direct access to all of those underlying settings in case you don't like what you see. This window is where you'll probably spend most of your time when using Cleaner.

Practical Web Design 87

Reviews The newest web-related books, hot off the press

Web design wisdom!
Shaun Weston brings you the best
of this month's books
hen Brett McLaughlin's 'Head Rush Ajax' book dropped on my desk this month, I was delighted in the way only a true web design obsessive can be: unusually so.

Yet, Ajax isn't the only web concept I need to get
my head around, with DOM scripting, HMTL and CSS occupying my time in equal measure.

If you have a book you would like us to feature,
drop me a line at shaun.weston@futurenet.co.uk

DOM Scripting
Publisher: friends of ED

Author; Jeremy Keith

A programming book that's aimed squarely at web designers is never a bad thing, especially when it's compiled in such a way that even
script-o-phobes will sleep easily. The author

has a tendency to overstate examples of DOM scripting, yet this should do nothing to deter the uninitiated from getting their hands dirty with a bit of code for a change. Available at
www.amazon.co.uk Price; £15.83

Head Rush Ajax
Publisher: O'Reilly Author; Brett McLaughlin

Like many of our loyal readers, I'm new to Ajax, so I was keen to find out more from the reputable publisher of the Head Rush series. Despite not being a coffee drinker, its 'caffeinated learning style' was just what I
needed! Available at wvvw.amazon.co.uk
Price: £18.81

Build Your Own Web

Site the Right Way Using HTML & CSS
Publisher; SitePoint

Author; Ian Lloyd

The prescriptivist in me recoiled in horror
at the number of typos in this tome, yet it would be unfair of me to harshly judge

what is actually a well-structured book simply because I'm a grammar geek.
Available from www.amazon.co.uk Price: £13.85

88 Practical Web Design

Web Directory
To advertise here, please call Practkaii ■ o

Stuart Oashwood on 01225 822873 WBDClGSIQn
or email: stuart.dashwood@futurenet.co.uk Heiping>„„bu,idb.t.,web»,es 9
V

/ Win an Olympus MJU 700 Free entry online, no purchase necessary, closing date August 10th 2006
_ SACK YOUR BOSS!

^INK

FACTORS

www.inkfactory.com

^M o ww o u l dy o ul i k et oe a r nt h o u s a n d so f£ £ £ s '
financial freedom that you want and desire?

DV using your PC and copying this idea to create the So that you can finally SACK YOUR BOSS? Hi I Ii I mm com to find out how!

All makes and models supplied^^*^
Original & Compatible Inkjet, Laser & Fax Cartridges

10,000 UK visitors to your website for just £60.00 - Guaranteed.

w w w Tr a f R c - U K . c o m
If we provide the traffic, can you deliver the sales?

Guaranteed
Te l : 0870 0 11 2005

Lowest
Fax:

Prices
0 8 7 0 0 11 2 0 0 6

box-shift.co.uk
S E A R C H

easywebstore
• Simple to use instant online shop • Secure credit card processing
• No hidden costs and no minimum contract

www.shopping.net www.shopping.co.uk
monthly

• Free promotion of your website with Froogie • Fully integrated shopping cart • Standalone solution or adds to your website • Free search engine submission

Q u a l i t y We b S p a c e ^ ^
Easy to use Web Site Builder 24/7 Support via email

mOut

ians start at £1.69 per month

We accept all major
credit & debit cards
-

www.easywebstore.co.uk or call 08456 44 93 64 today

1w w w . f a s t e r s p a c e . n e t
Does losing for
a G Host

with a FREE Domain Name

Building an online shop

isnt as difficult as you think

Mm ©M 50mb Hosting Plan
A d v a n c e d C p a n e l P H P, C G I a n d S S I P 0 P 3 M a i l b o x F R E E Te c h S u p p o r t

^ S ^ p C A / v e r s h o p :n oa s s e m b l yr e q u i r e d
evorything you need for Just

d

o

t

h

t

o

you?

only

^

pm
py

Domain

Names

£■

I

«

It dT%esn'''t
have to
I I
exclude
17.5%

from
Reseller

FREE Web / Email Forwarding FREE Parking Registry Fee

iniiiiii, X
.
call our sales hotline

I II I

D
BT -Pttk 7 Sippfi

Accounts

only
1GB of Webspace
Unlimited Users Host and

pm
20 lots Domains more...

^

Att

prices
«

0870 013 0626

try oar free online demo at

- m

V. A . T

ekmpowershop.co.uk

For more info or to order please call 0 8 7 1 2 2 0 5 1 2 1 o r v i s i t w w w. c o m p l l a . c o m
Ci"» ed Cai<t to non 9T wst'» ^a-.

ALL OUR HOSTING PLANS INCLUDE
P E R S O N A L

40mb disk space

FREE .co.uk domain name
Unlimited Email Addresses Web Based Control Panel We b S i t e S t a t s Unlimited FTP Access

i

1,000 MB Data Transfer Per Month £29.95 per year
B U S I N E S S

250nib disk space 2,000 MB Data Transfer Per Month £49.95 per year
BUSINESS PLUS

FrontPage Extensions Customised Error Pages Free Email Technical Support 24/7
Plus lots more.

Single Site Hosting
•3GB UK Web Space
■ 3GB Premium Bandwidth

> Unlimited MySQL Databases
■ Unlimited POPS

SOOmb disk space 5,000 MB Data Transfer Per Month £79.95 per year R E S E L L E R PA C K A G E S A L S O AVA I L A B L E

■PHP4, CGI, Peri, FrontPage

£99,
New Updated Packages
2 Months FREE

WWW.PURPLE-PAW.COM

Multi Site Hosting • 10GB UK Web Space ^
■ 5GB Premium Bandwidth

. Host Unlimited Sites I 1
» Host Unlimited Domains " * Vpm

' (£2^

Virus & Spam Protection 99.99% Uptime

rji HAISQFT
WEB HOSTING
¥IMt uj/*; ••

f I
DOMAIN NAMES

»A d v a n c e dD o m a n iP o n it n i gS y s t e m Vo r£ 2 0 0 p a)
Reseller Hosting
■ Unlimited UK Web Space
• Unmetered Premium Bandwidth

www.haisoftxo,uk
CAILSALBS OM;

■ Unlimited Spam & Virus Protection/
• Unlimited MuKi Site Accounts ■ Reseller Control Centre • Custom Control Panel • Personal Name Servers

F R O * *£ 4 . 9 9P E R t a
.CO.UK' .COM - .NET - ORG - .INFO - .BIZ

£30J

orC300pa )

0 11 5 8 7 } 8 7 4 6
HAISOFTPERSO
FROM

HAISQFT PRO
FROM

MULTI-DOMAIN
FROM

100 Mb

£ 1 . 4 9

Spaa IGbMonthlyTransfer
PteskContrd Panel

Ptii MONTH M,9TOUpime

£4.16

PER MONTH 99.99% Uptime

£8.33
ptsMowm

1.5 Gb Storage Space
25 Ooinains Plesk Control Panel

15 GB Monthly T ransfer

^i^WWW.BPWEB.NET Multi-Domain Hosting Specialists
Call NOW 08707424474
3P per minute from BT Landlines, prices may vary from other providers. AD prices shown exclude VAT @ 17,S%.

HMSOn-No S347«2«>R«»offic*:M«rcufyHo«it«-No(1hG«t.Noting NG7 7m-AlprtcM art jnauMVorVA-

To advertise here,

please call
Stuart Oashwood on
01225 822873

Windows or Linux

FA S T U K S E RV E R S
Ltd INCLUSIVE Firewall protection
INCLUSIVE Site control Panel

INCLUSIVE Graphical Statistics

or

email:

L

INCLUSIVE Password protected directories

stuart.dashwood@futurenet.co.uk 1
J
Practical

UNE CONTROL PANEL
We give vou control!

Our control panel will provide you with all the tools to make life as easy as possible for you.

T ^ AJL Jl. *

All

this

and

more

^

available

£2.49 per month!
There are NO CHARGES for transfering setup charges!

from

just

A U domains to or from InterHost, and no

MySQl I PHP4 j PERL | AUTO-RKPONDERS j EMAIL FORWARDING | ASP + .NET | GRAPHICAL ST A TISnCS | FREE SUPPORT

Helping you build better web sites

www.InterHost.co.uk
I N T E R H O S T 0870 3212222 <! !

A web partner
cut from a different cloth.
Looking for a better choice of Internet solutions provider? Then look no further than Web Tapestry. We offer:

unleash
Interactive Media:

yourr creative
potential
ih&SwS-:

Web Design + Development BA (Hons) Multimedia Arts Film Making:

Computer Graphics:
3D Animatior

♦ Web Hosting from £29.99 per year ♦ Domains from only £1.98 per year
And all backed by superior standards of service and technical support.
All prices exclude VAT

Call 0800 0151718 Click: www.webtapestry.net Mail info@webtapestry.net

SAE Institute s a Itile dfegrt to the a^e:^ cdle^NA^ specrise in the creali^ indslriest gvirg )oj the ec^ v^(hen it oarnes Id edication and pcrtibfo developmert Interactive Media cou'ses combre ptfesscrd web des^ and London 0207 609 2653

devetepmart

other

terfrcteges

Film Making bnr^ out the hdden prtxiuosr dt^tor h >cu Or if >aj dream h three drrenscns, the 3D Animation diploma 6 Sy >ouVtst the vveb^ ncvv to ordsr a bfodxre. Over 40 schools woridwide

Liverpool 0151 255 1313 Glasgow 0141 429 1551

w w w . s a e u k . c o m

Established in 1976 ^ ~= ^= = State ofthe art equipment Hands-on training IndiN^dual practical time
I N S T I T U T E

CHEAPEST PRICES IN THE UK

DIYDating.com

All from only £8.85!
# Secure your .eu domain now

co.uk
. c o m

.co.uk/.org.uk/.me.uk

£2.59.. fel
doma*"

.com/.nety.org/.lnfo
.biz/.name

£8.99p, ,
FREE templates

tv/.cc
The web doesn't

£30.95pa|wwo«£i
-reg.co.uk

□ Web based contrcri panel
[ ] Huge database of contacts

□ Full Site stats

get any easier!

100% Free to set-up
For more information go to:
or phone:

Price per year inclusive of all fees. Some domains are payable 2-yearly, visit 123-reg.co.uk for more info. Prices exclude VAT @ 175%. 123-feg.co.uk is part of the Pipex Group.

w w w. d i y - d a t i n g . c o m

0 1 9 2 2 7 11 2 11

THE ONLY POKER MAG THAT PUTS YOU AT
THE TABLE
ie biggest prizes ie hottest games The best players We're ail in - are you?

On sale now

YOUR FIRST

3 ISSUES FREE!
Sign up at www.wptmag.com

iPakef
1—1 THE OFFICIAL WORLD POKEB TOUR MAGAZINE MEET WISE MANCHAN
game's oriental king

STRIKING IT RICH...
How to keep your
cooi after a brg wir

. Poker pearls from the

' Homega^sc^.v^ e ▶ to pfay- podcet F^es

Site envy Projects to inspire you
o

Submit a site!

@ H a v ey o us e e na e t s ih t a td e s e v r e so u r
attention? Have you found a perfect

page? If you have, then we want to hear about it, and we want to hear about it now!

We shouldn't covet our neighbour's site, but sometinnes we just can't help ourselves!

Just pop the URL in an email, and send it to:

pwdeditor@futurenet.co.uk

Chowhound
C R E AT E D B Y: I n - h o u s e U R L : w w w. c h o w h o u n d . c o m Manhattan's best burgers and other topics are discussed at length on a message board for avowed foodies. The slideshow graphic on the homepage highlights several articles without distracting from the main business of the ongoing discussions. The Digest page picks the best messages posted, a real convenience for anyone without time to
browse. Newcomers are made welcome Boards | F«atiif«s t Digest j my CHOW | Getting Started CHOW

h o w h o u h d . c o m

t N L AT E

with a page explaining how you can use the site, preventing Chowhound from becoming a clique.
L AT E S T P O S T S F R O M T H E B O A R D S

CHOWHOUilD

web

STAR SITE
* * * * *

• In Chowhound, the best ongoing message board discussions are highlighted with magazine-style headlines and photography

•The message boards themselves are easy to read, with indented areas showing you which messages are replies to earlier comments

•To stop your own message board becoming a closed shop, emulate

Chowhound by welcoming new visitors with advice for getting started

Practical Web Design 93

Site envy Projects to inspire you

Slate

Thursday, June 29, 2006
F R I D AY S AT / S U N M O N D AY T U E S D AY

IABOI'TUS
MAKE v S L AT E MY ItOME PA C F.

W E D N E S D AY

T H U R S D AY

T O D A Y ' S

TO D AV S
D O O N E S B I H Y

BRIEFING CARTOONS

P R I N T

p
m

D I S C V S S

K

MAIL

i

N E W 5 L E T T K B S

RS.S PODt^ASTlNG

BLOGS
PRESS BOX

+
NEWS & A AR RIIS S I I H E NEWS & ARTS & LIKE ARTS & LIFE

P r o j e c t i l e Vo t i n g
K A U S F 1 L K 5

Four

Levels

of

p o L i T i C N S hS oh co kc in The e 1 10 000 M M oo ss t t A Love Letter kg ing poi.tru ib le CC h rh tr s it s ia t ri a n I n sI p i inr g W h y Y o u B iBb le n isrp ing to Lois Lane S h o u l d n ' t D iO sc o v e r y C o n s e r v a t i v e s M o v i e s E v e r ? iscoveryt Conserv L e a v e Y o u r W What's h a t ' s R Really e Abanctonthe o n Moses' Moses' GOP Mor>eytoYour on
Kkls Ta b t e t s .

Kosota!
THE HAS-tEEN

HERE'S

TO
• Glide your mouse over the section headings
to view the latest contents

Dead

Men

S l J D E S i l O W

Talking

LethemtoGehry: Harxto Off Brooklyn!

B E E R
ASupreme Court Conversation
Partsanshp was the only thing, potted Jun. 20. 2006 Oilng** and
Oflhk* LihMCli •iMWMwnlitnr.kK

Slate

EGYPT'S NEW TOMB REVEALED

b Wal-Mart Good for the

•Slate s new homepage is packed, leavmg you in no doubt that there s plenty to read, yet the day s best stones remain prominent

The popular The popular online online magazine's magazine's 10th10th- i provide access to to section provide access section con contents, and a n n i v e r s a r yrefit r e fihas t ha s was o n much a s m u c h 1 f o r for t h ethe d adaily i l v h homepage omeoaae a archive rch along the anniversary won
C R E AT E D BY:

panning as praise thanks chiefly to the
number of ads stuffed on every page. But the homepage is worth studying, both
for its adventurous use of rollovers to

Helicopter www.hellochopper.com
U R L : w w w. s l a t e . c o m

top. The articles themselves are models of how to make long text pieces readable, and many are available in audio, as well as written form, via podcasts. • Previous homepage conten accessible via the top menu

Academy
C R E AT E D B Y: F a l l o n w w w. f a l l o n . c o m

URL: www.brawnyacademy.com
A kitchen towel aimed at he-men

needs all the clever promotion it can

get. Flash dominates this site, with playful, discreet animation on the homepage and a series of embedded
videos to watch. Illustration and careful font choices

at " jlyfr

establish a rugged, outdoor tone that suits the brand to a tee. The designers

cleverly allow different elements to
move to accommodate your browser
window width.

•Tongue-in-cheek videos are presented in Flash, with a choice of resolutions to suit

•The welcome page adjusts its side elements to suit the size of your browser window

94 Practical Web Design

Site envy Projects to inspire you
o

5pieces.com
C R E AT E D B Y: I n - h o u s e

thepixelage
C R E AT E D B Y: I n - h o u s e

URL: www.5pieces.com John Henry Donovan's personal blog covers design, movies and more. The homepage fits in a lot of content without feeling crowded, while article pages offer attractive touches such as a small calendar icon that shows the date off clearly. Sections focused on tutorials and portfolio work extend the blog structure to make the site's scope much broader, though the logo takes up a lot of space on each page.

URL: www.thepixelage.com This Singapore agency's redesigned site
looks lovely, with drop shadows and

subtle textures softening the look.
The familiar scribbled note illustration

suggests creativity, and case studies of recent projects are made obvious. But

the homepage's welcome introduction

n

n

M

describing the company up-front is undermined by marketing gobbledegook. It's a shame the simplicity of the language lags behind that of the design.

IQQQ ^0211 CS33 fOQUl ^S3 ^331

; 'nwbrtrfwMtHttmpk.dnaiBdecnrtoiuivigittF

y M j fl fT t"
II MMtfUcwtErtm
a» rr*c(MK . ,

OOiOJOJgl" Ml o CTJOIIjjp WM

. weh«tefDrMi«BH«batrSaiHi«C-feb ttatn

' )Qtr{(nrtF«MiliOKmutoipnKn<nwitIiKitpm(i4j*
£»»»«.

we adopt a 'listen, fotrnulate, realise"

philosophy...
• U» *»

«

OR

M/)W»

MS

j.acowevMce

Case
IT@Cort Web 2.0 Conference Cofk
; tatlra<Mth«nMlipMbkaw<tW<>bs.»iM(f-<Uy > conftiFSceteCat, Irrtwd. I'mjekltiiiivthe

14»aa*

tempts

VVi are a proviuof of .3 .-iiitions >-"th creative de^ian blfcnc' id inj. > it.
Wt *r« hcf« te het^ your bi wtgetthcffiwleul
I mnowliw tdMB n w i d u h i t t a n t .

I n o n U - t f c W - Vo

i i«i dUn't mrn^dow the went e*(.*pt far
; tbeodd<rii>p.

tyrW41,^ tin

A

*4

• Clearly designated areas, a prominent navigation bar and careful use of space keep what
could be a busy homepage feeling well-organised
Recent blog entries
RtvtRQt Ttiarapy

Tattered Fly
CREATED BY: Thin Slice http://thinslice.net
URL: www.tatteredfly.com

Sit* upditt tip *3: Mak* yourttif htanf

Vi
WWt ttic TWW tooiK we dKMM wMtad to diMge tlw tcp» gf mt mtMlta. We tt* witMtt* » not only ihMNiuM ew *tn*c*a, tMt stw t« tend * human voK« t« tiie mbMt. And tenee. tNs Hot MM torn.

Proit

w

OK

des^n
portfolio

Dan Bachman's blog lovingly covers fly-fishing and the outdoor way of life that goes with it. Thin Slice's design evokes a strong rural feel through a well-considered colour scheme, while the structure points you to recent and popular articles and external links,

• if your own web design is looking too stark, try thepixelage's approach of soft-focus
graphics to take the edge off

all without taking you down the page. The Google text adverts are surely too brief to
generate any interest, though. For your own site, think carefully about whether it's more important to find an audience or make money, then design accordingly.
t h l i n l i p
conptny »trvic*i«tx»tto)ic cttestu<bn tsica

\

\

less is more

more often than never.

R v F i i H i n a F I v F i t h i n n t e fl f o i i i Tr o u

A FLY FISHING SHORT STORY
« OttHf • i ,t T

L - h«(«h«rr h»K» KCCP REAOINO 0

•This fly-fishing blog makes you feel like you're outside, and the structure is excellent. We love the big 'Keep reading' icons, making it clear that there's more to read

• Portfolio pages are a combination of clear navigation and prominent example images,
but you can leave out the meaningless marketing-speak

Practical Web Design 95

£

w w w. p u r e - c o m m u n i c a t i o n . b e
U R L : w w w. f r i e k e . c o m

Driven by Flash, this photography portfolio opens with one of the most uncompromising homepages you're lil<ely to see: a small logo, a mass of pixels forming a vague image, and a clickable
menu button that reveals the few

JANSSENS

•it

navigation options. The portfolio itself uses a plain brown colour scheme to support the pictures, while thumbnails

Hom« Speakers Podcast Buttons Contact

ililBlPiM
J.Cbno\roct

9am-S:30pm, 8th Sep Brighton Corn Exchange

IJ.1
^

dCenstruct is an affordable, ont-<Uy confertnc* aimed at those building the latest generatron of web-based applications. The event discusses how new lechnologv Is uinsrorming the web from a document deHvery system into an application platform.

Sponsors
If you rtMd lo Qct your m«su9C to web (l«s«9ntr», toftMrt developers,

creattvet. tnfluennal Mog9«rs or welt
he«)«d tr>Qhto(i residents, then

Registration Open Soon!
Last year d.Construct sold out in under half an hour, so make sure you're among the first to know when tickets go on sate.
O &«9nuptO(heClt«M)ftSScv*msf*ed

tponsorinf) d.Construct iwotjid b« a
«m*rt MY to do tt. dtht

F o r n

ft would have been even better if

Last year saw the inaugural event, the first of its kind in the UK and possibly in Europe. Internationally renowned speakers from organisations including Yahoo),
the BSC and the Eiectronk Frontier Federation discussed hot topics such as web

madgex^
backstage .bbc .co .uk

the organisers provided a date

•Any questions? The d.Construct conference website is a textbook example of how to
communicate information succinctly and effectively

96 Practical Web Design

Site envy Projects to inspire you

Kineda Magazine
C R E AT E D B Y: I n - h o u s e U R L : w w w. k i n e d a . c o m

A frothy celebration of Asian American pop culture, Kineda has made a dramatic switch

F O R E
• Less is more on the Kineda homepage, with the designer resisting the temptation to smother us with links and emphasising
what's new instead

from austere white to chocolate brown in Its redesign. The homepage successfully breaks the standard blog template, though it's certainly still there underneath. While
the use of light text on a dark background isn't something we would recommend for wordier sites, in this instance it serves to highlight the model photos that are the main
purpose of the site.

»

J.

Jarah Mariano Models for Victoria's Secret

»

X

%

Looking for a Japanese Gtrlfriend?

• A luxurious colour scheme doesn't compete
with the photos, while clever use of

All packages quote PWIO
Web-100 - 750MB disk space. lOGB

gradients to define areas on the page stops
things becoming monotonous

monthly bandwidth, Linux (Fedora Core 4)/'*
Windows 2003, 200 POP3 accounts

£47.99 year

Design Observer
C R E AT E D B Y: I n - h o u s e

Web-2S0 - 1.5GB disk space, 20GB

monthly bandwidth, Linux (Fedora Core A)l
Windows 2003, 400 POP3 accounts

URL; www.deslgnobserver.com After two years, the well-known design blog moves from a standard Movable Type template to its own precise look. The key
change is a welcome shift from reversed-

£8.99

mth

£89.99

y r

Web-SOO - 3GB disk space, 40GB monthly bandwidth, Linux (Fedora Core 4)/
Windows 2003, 800 POP3 accounts

£16.69 mth £ 166.99 y
Web-1100 - 3GB disk space, 80GB monthly bandwidth, Linux (Fedora Core A Windows 2003, 1600 POP3 accounts

out type, making the intelligent writing more pleasant to read. The logo on the
right emphasises the articles further. But you have to scroll down to see the list of recent entries, and the green links are attracting a lot of criticism for their lack of

£29.99 mth £299.99 y
For *** further 0870 050 information: 0080

contrast, so points are lost for accessibility.

practicai@xcaiibre.co.uk

w w w. x c a i i b r e . c o . u i c / p r a c t i c a l

All prices ex VAT, terms & conditions apph
* Only available using discount code *♦ Windows 2003 available for an extra cos BT customers pay up to Sp a min, otiier companies may vary. •The weekly Observed column of links

Is now on every page, though the poor contrast makes them difficult to spot

•The Design Observer redesign uses a tight grid. The 'Observer' in the logo, the subhead below and the text In the right-hand column are all the same width, for example O

COMMUNtCATlC

On your CD Web designer's toolkit, and much more

On your CD
It's true - there are things in life better than raspberry Angel Delight, and here's our latest jam-packed CD to prove it
re we spoiling you? Yes, probably, but we love packing

If it's search functionality you're looking for, try Xtreeme Search Engine Studio (www.xtreeme.com). This will enable you to generate a search facility for your own website and is a great alternative to installing a generic Google box. This month's training videos focus on designing various navigation elements with the ubiquitous Adobe Photoshop,
and we've also thrown in a selection of

j We've taken all of the ! links from the Builder's Bookmarks section and put : them on the CD, so there's no

loads of great stuff onto
our CD, and this issue's two full packages

need to type them in by hand. You'll also find the project files , for following this issue's tutorials.
To access the content, place your

are testament to our generosity. Eltima's Flash Decompiler (www.eltitna.com), for instance, offers a fantastic opportunity for novice Flash users to study Flash elements from the web by deconstructing them and turning SWF files into native FLA.

CD into your PC or Mac. From the front page, you'll be able to access everything on the CD in three clicks or less! O

videos to help you hone your CSS skills.

Navigating your interface
VIDEOS

Watch an hour-long introduction to image editing for web builders, including projects and exercise files courtesy of Lynda.com,
PODCASTS

Now that all of our podcasts are online,

there's no need to put them on the CD. However, if you want quick access to them, we provide all the links here.
Each issue, we provide two companion

podcasts for the magazine, where we go into more depth on specific issues.
SOFTWARE

This issue, we've included full versions of Eltima Flash Decompiler and Xtreeme

Search Engine Studio; two great applications for taking your web developments skills even further. More
information available at www.eltlma. com and www.xtreeme.com respectively TUTORIAL FILES

Access all the files you need to follow
the tutorials in the magazine.

ESSENTIALS

Whether you need a browser, a'
firewall, antivirus software or an image editing«package, we provide

Having any problems?
README

the top tools that cover all the bases. CD icon), open the appropriate sub-folder, and double-click on the SWF file you want to watch.
DISC SUPPORT DIRECTORY

If you're having any problems using this cover CD, here are
some simple steps to try first;

We've put all the Builder's
Bookmarks links on the CDI

If you have problems playing any video files, and restarting your computer doesn't help, you may need to download the
Shockwave player from www.adobe.com, then try running them without the interface. Navigate to the Video Tutorials
folder on the CD (on a Windows PC, open the My Computer window and select the CD drive; on a Mac, double-click the

Still no luck? It's unlikely, but your disc may be damaged. Email

support@futurenet.co.uk, or telephone 01225 822743, and
explain the problems you've had. Our staff will do everything

they can to assist. If your disc is physically damaged, see the
back of the CD envelope for how to get a free replacement.

98 Practical Web Design

On your CD Web designer's toolkit, and much more
o

We've teamed up with the leading provider of video lessons

_ynda.com videos.
O h e s ea r n tigu t o a t s i r l
from Lynda.com will show you how to get Helping you build better web sites Videos
We've Beamed up witft Lyixla • the leading online resource for web (tesigf^ trainirig videos - to bring youa 60-[T*r»u» axjrse on getting started with navigation in Adobe Photoshop and manipuJatir^g links in
CSS2, OeiAILS:

to bring you the web builder's guide to image editing and CSS
properties of links, rollovers, hidden some simple projects if you own the software or download the trial from
www.adobe.com. LET'S GET TH IS PARTY STARTED

CSS, dealing with IE importing, CSS in
different media (including print) and

Once you have loaded and started running your CD, select Videos from the
left-hand section menu. You will then be

to grips with Photoshop

CS2, including the creation of

general troubleshooting. Before you start, check that you have
QuickTime installed (you can download it

M O R E G R E AT V I D E O S

taken to a screen that provides more info
on this month's projects. Click the Watch Videos button at the bottom-right to

navigational buttons and Smart Objects.
We'll also explore coding with CSS2,

If you enjoy the projects, and want access
to more than 10,000 videos, pay a visit to wvvw.lynda.com today!

concluding our series with a look at the

at www.quicktime.com). As part of the Photoshop overview, you can follow

enjoy the first clip.

vSebdesign
Directory Stock tmages These training tutorials will sach you how to get id pips with PhotoShop CS2, including the cieation of navigational buttons and Smart Objects Well also look at axjing with CSS2, concluding our
series with a look at links, importing and troubleshooting CETSTARItO:

lynda.com

first you must have the QuickTime Player installed (you can download it at www.(|uicktime.com). Now hit the Watch Videos button in the bottom-ftght of this scneen. then select the video you'd li)£ to watch To access nxxe than 1 aOOO training videos, why not pay a visit to www.lynda.cofn todayl

o n l i n e n o w ! w v f w. m y f a v o u r i t s m a g a z i n « s . c o . u k L E T ' S G E T I T S TA R T E D
Make sure you have QuickTime 7 installed on your system, then run
t h e C D i n t e r f a c e a n d e n t e r t h e Vi d e o s s e c t i o n . C l i c k t h e Wa t c h

0A C C E S SC H A P T E R S

Once you're in the main Videos section, you'll see a list of chapters. All you have to do is select the video you want to watch and it will

Videos button at the bottom-right to continue.

automatically open in your installed QuickTime software.

OPEN FOLDER To open a folder containing all of the videos in that particular chapter, simply dick, on the bold chapter title. You will be swiftly taken to the folder that contains all of the videos you'd like to view.

SIT BACK AND ENJOY
Now you can sit back and enjoy 60-odd minutes of Photoshop image

editing and CSS coding enlightenment. It's recommended that you
watch these videos in the right order (to prevent brain-ache).

Practical Web Design 99

On your CD Web designer's toolkit, and much more

•ull Products
Create online search tools in minutes, and learn Flash the easy way

Xtreeme Search Engine Studio

O e r e m ts e 'S e a c h rE n g e i
Studio enables a customlsable search

site, create something that feels more

This clever application Includes a handy wizard to get you started, and will
generate search bars via code (which can

added to a website and referred to as

professional and individual. The program is extremely powerful and, although it can seem daunting at first if you're not afraid of a trial and error approach, you'll
be creating search tools in no time.

the 'search page'. But the best thing about
Search Engine Studio is that it can be used

function to be added to a

be pasted into any web page), templates (selecting Dreamweaver pages and search bar position), or blank pages that can be

website in a matter of minutes. Rather

to produce HTML code to drop a search bar into any existing web page, or to enable search functionality on a CD-ROM.

than adding a Google search bar to your

FIRST THINGS FIRST Using the pop-up wizard, follow the onscreen
instructions to select HTTP mode (for an online

search tool, your URL, PHP or CGI script output), how and
where the search files are to be saved, and how you want to administer the search tool into your site.

0G E N E R A T ES E A R C HP A G E

In this example, we've selected 'No frames or

template file' in order to generate the blank search page to drop into our website. The next step is to take all the files (SDB, PHP etc.) that were generated by

0U P L O A DA N DC U S T O M S IE

Upload the search files to your web space using
FTP You can now visit the page on the Internet

Search Engine Studio and save them to our root folder

and use it to search through your site. The final stage is to customise the page by opening it in a page editor and adding graphics, Intro text, navigation, and so on.

Eltima Flash Decompiler

m O lts a l'F a s lhD e c o m e r l p i
is an amazing tool for those of us wanting to

split it into its component parts,

find out! Although it's possible to use this tool for nefarious purposes, it's at its most powerful when used to offer you a step-

analyse their ActionScript instances to get

get into Flash design but

providing easy access to scripts, sprites, graphics and audio files. If you've ever seen a Flash element on someone's homepage and wondered
'How did they do that?', now you can

to grips with how the professionals do it. As with any decompiler, make sure you seek permission before you use other
people's code or media objects in any project of your own.

up to the next level in Flash design.
The following tutorial will show you
how to access files from the web and

finding ActionScript a real obstacle. The decompiler will take any SWF file and

SETTING UP

DECOMPILING
In Flash Decompiler, open the same file and

EXPORTING
Use the tree to select the code or media object you're interested in and click 'Export'. Once

liJI View a site that contains a Flash object. Go to
your temporary Internet files (eg C:\Documents and Settings\user\Local SettingsVTemporary Internet Files\ Example.swf) and copy this file to your desktop.

you'll see the SWF play in the main view. On the right-hand side, you'll see a 'tree' of all the components that go into making that SWF.

you've selected a location for your exported files (and the

format), you can start to explore the assets in Flash. O

100 Practical Web Design

iDisital

The best photography competition of the year is now open for entries! This is tine leading competition for anyone with a passion for digital photography and is open to both amateur and professional photographers of any nationality. There are fantastic prizes to be won in each of the six

categories, plus the overall winner bags a pair of
a r o u n d - t h e - w o r l d t i c k e t s f r o m Tr a i l fi n d e r s w o r t h

of the Year 2

£15,000! Full details on our website...

Enter now at http://poty2006.dcmag.co.uk

Win a £15,000 photography holiday of a lifetime!

r

Enter your pics at: http://poty2006.dcmag.co.uk
Official Partner

Sponsored by

TRAILFISDERS&
Capital Gold

.3l'4jS. Royal

Photographic
Society

Aperture

Builder's bookmarks Essential online resources for all web designers
ON THE CD
Builder's bookmarks are also on our CD

All the sites you need!
We've scoured the

Internet to bring you
details of the best websites dedicated

Blogs and dally
reading
A List Apart
w w w. a l i s t a p a r t . c o m The definitive web design blog for pros.

Mezzoblue.com
www.mezzobiue.com Dave Shea, creator of the influential CSS

Stylegala
w w w. s t y l e g a l a . c o m
News, features and resources on

Zen Garden, writes on all things web, and provides links to other topical articles.

standards-compliant web design.

to web design and development

Blogging tools
WordPress

Digital Web Magazine
w w w. d i g i t a l - w e b . c o m

Oh s e r 'aw h e ta lo f
web designers. colour, creativity, graphics and

% E:
r r

knowledge, tools and resources out there, and
much of it is available for

Every week, a new in-depth article on a topical subject, plus Indexed archives going back to 1999,

w w w. w o r d p r e s s . c o m WordPress has a great interface with
powerful features, and it's free.

free. It's all just waiting to

be used, as long as you know where to look. To save you time and effort, we've searched long and hard on the Internet
to whittle out the most useful sites for

Meyerweb.com
w w w. m e y e r w e b . c o m CSS and HTML expert Eric Meyer shares
his thoughts, tips and tools.

TypePad
w w w. t y p e p a d . c o m
Three levels of service and customisable

Sitepoint
w w w. s i t e p o i n t . c o m This publisher's homepage is a great
source of articles and comment, and

templates that support content beyond simple blog postings, and produce some good-looking, easy to navigate blog sites,

And to help you even further, we've organised the sites into the following categories so that you can quickly find what you want; blogs, blogging tools,

The Web

Standards Project
w w w. w e b s t a n d a r d s . o r g
The latest on methods that will allow

there are daily blogs from a variety of
experts. The articles pages include a current feature, recent articles
and access to archives

MSN Spaces
http://spaces.msn.com A simple to use blogging tool, but it offers limited opportunities for customising, so
results can be rather dull.

your site to function across browsers
and Internet devices.

multimedia, online tools, online tutorials, publishing tools, search engines, site showcases, software sites, reference, web authoring and site design, website usability and accessibility, and CSS. Happy designing!

o of previous articles. ^ Yo u c a n s u b s c r i b e

Clagnut
w w w. c l a g n u t . c o m Richard Rutter shares his life along with
his thoughts on web development.

STAR SITE to Sitepoint
'ic'if "if if "ic newsletters and

M o v a b l e Ty p e
www.sixapart.com/movabletype
A popular PHP-based weblog platform for people who have their own web hosting

I

get help on its very active forum.

Colour
Slayeroffice
http://slayeroffice.com/tools/color palette
Enter a hexadecimal colour value and this handy tool will give you 10 shades of the base colour at varying opacities.

CSS Color Chart
w w w. s o m a c o n . c o m / p 1 4 2 . p h p Click on a colour code to select it, then simply copy
and paste it into your code.

ColorBlender
h t t p : / / c o l o r b l e n d e r. c o m This handy tool for colour matching and palette design allows you to save the blends you concoct.
You choose a base colour and ColorBlender makes

KaliberlOOOO
w w w. k 1 0 k . n e t / f r a m e s . a s p x ? section=pattern5
Gazillions of groovy pattern backgrounds here.

up the rest of the palette. You can then save the
palette as a named blend or save it out as a small file

Color Palette Generator
w w w. d e g r a e v e . c o m / c o l o r - p a l e t t e
This site creates a colour palette to match any image that you specify, enabling you to harmonise your page colour scheme with your visuals.

Squidfingers
w w w. s q u i d fi n g e r s . c o m / p a t t e r n s
Background patterns from art director Travis

Beckham, free to use on your site.

100 Random Colors
w w w. r a q u e d a n . c o m / r a n d o m 1 0 O . p h p
Got web designer's block? Pay a visit to this site for some random colour inspiration, plus all the shades'
hexadecimal values.

The Inspiration Gallery
w w w. t h e i n s p i r a t i o n g a l l e r y. c o m / w a l l p a p e r
Bit of a classic look to these backgrounds - definitely inspired by nature, the Arts and Crafts movement and designer William Morris.

Chromoweb
w w w. s m a r t p i x e l . n e t / c h r o m o w e b / u k s / indexgb.html
Check out the Chromoflash, which simulates a web page with up to five colours of your choice, and even take a look at the colour palette that inspired Matisse.

Colorcombos.com
www.colorcombos.com This is a great facility for grabbing colour palettes from other websites. The Combo Tester shows you how well your own choice of colours work onscreen.

102 Practical Web Design

Builder's bookmarks Essential online resources for all web designers
o

account. Requires some technical skills to
install and run.

Yahoo!360
http://360.yahoo.com
This is a simple WYSIWYG blog with very little customisation available, but it does

Creativity
Design Directory
h t t p : / / d i r e c t o r y. d e s i g n e r. a m This directory - "made by designers, for designers" - is packed with loads of
inspirational resources.

dictionary will help you find them
and will explore related concepts.

Ail Known Idea Generation Methods
w w w. i d e a g e n e r a t i o n
methods.com Quite a claim, but they really do seem to have covered everything.

m m M

enable you to pull in elements from the
Ya h o o ! n e t w o r k .

Design Snacic
e Blogger
www.designsnack.com
Serving up fresh new servings of design inspiration every day. You can also submit your own recommendations.

Kaliber 10000 Creative Word
www.k10k.net
There are two reasons it takes a

Dictionary
http://extelligence.co.uk/
dictionary Want your content to make you sound
intelligent? You'll find plenty of obscure words (plus their definitions)
on this site.

while to unravel this site: first,

they've weasled lots of content on
to it; second, the font's so damn small. Lots of uber-cool design inspiration: exhibitions of desktops and patterns, images from design

Scott Berkun
www.scottberkun.com/ ca;

essays/essay38.htm
Scott Berkun essays, including how to generate and pitch ideas.

Blogger
w w w. b l o g g e r. c o m
Free and easy-to-use weblog service

Gaping Void
w w w. g a p i n g v o i d . c o m / M o v e a b l e _ Ty p e /
archives/001760.html
Wanna be creative? Cartoonist

web events, a major CTAD project every D I AhCITP ill t week, listings ★ ★★★★ and a
collaborator m a t c h m a k e r.

OneLool< Reverse

now owned by Google. It's perfect for beginner bloggers and is one of the
most popular hosting services around. With its quick sign-up process and

Dictionary
www.onelook.com/

r e v e r s e - d i c t i o n a r y. s h t m l
Ever stuck for words? This reverse

Hugh McLeod tells you how with a mere 12,000 words.

set-up, you can launch yourself in
minutes with a ready-made blog template. It's simple to use and ideal
for those who don't want to bother

Goodfonts.org
w w w. g o o d f o n t s . o r g
300 free TrueType fonts, plus tips on calligraphy and logo design.

acquiring technical know-how. Photo hosting and blogging are supported
by Picasa's Hello.
interface enables

Sound effects

and loops
Partners in Rhyme
w w w. p a r t n e r s i n r h y m e . c o m / p i r /
PIRsfx.html Free and royalty-free sound effects.

WhatTlierent?!

WBb . *

Fontleech
www.fontleech.com Insider font tips and discussion, plus
links to free font sites.

users to post by email, and it also supports
RSS feeds and

STAR SITE
★★★★★

Sound Effects Fonts for the Web
w w w. a n g e l fi r e . c o m / a l 4 / r c o l l i n s / style/fonts.html
Want to know which fonts will work best

group blogs.

www.stonewashed.net/ sfx.html Links you to various sources of free sound effects from a comprehensive selection, including animal sounds, TV sounds, explosions and guns.

I
rl^l MyFonts
w w w. m y f o n t s . c o m With a staggering 45,599 fonts to choose from, it's just as well they've
made it a doddle to search this font

I

Graphics and
multimedia
Fonts

on the web? Find answers here.

SearchFreeFonts.com
www.searchfreefonts.com Free fonts, font tools and links to font-

Shockwave-sound.com
www.shockwave-sound.com Royalty-free tracks, loops and sounds.

database. You can search for fonts by

related articles that provide a great

Web Type Primer
www.efuse.com/Design/web_
fonts_basics.html
Daniel Will-Harris's website is a great

resource of other font sites.

The Evolution

Stock

category, foundry, using descriptive keywords and even popularity. Search for more elusive fonts using the Detailed Search mode. If you know
what you want, yet haven't a clue what it's called, use the WhatTheFont?!

of Type
www.mediumbold.com/

introduction to the art of using typefaces
correctly on a web page. He also offers lots of other excellent advice on building the perfect site, from getting the content right to creating eye-catching graphics.

photography
MorgueFile
w w w. m o r g u e fi l e . c o m
Free raw photo materials.

04_thinking/type
Good introduction to type and how to maximise control over type on your site. Includes samples of type layout and pedigree font resources.

recognition system, which enables you ,
to upload a scanned font sample, or supply the URL where the file can be found, then survey the closest

Identifont
www.identifont.com

Istockphoto
w w w. i s t o c k p h o t o . c o m Affordable image library.

SimplytheBest Fonts
w w w. s i m p l y t h e b e s t . n e t / f o n t s
Large collection of mostly free fonts, which you can browse by name or by

matches SJAR SITE
the MyFonts
database.

Helps you to identify fonts via a simple series of questions - ideal if you want to find out the name of a font you've seen
in a publication.

Design Packs
w w w. d e s i g n p a c k s . c o m Free image collections for designers.

* * ★ ★ ★

category. Each font has a preview page.

Practical Web Design 103

Builder's bookmarks Essential online resources for all web designers

Stock.xchng
www.sxc.hu

More than 100,000 free stock photos.

Online tools
A n y B r o w s e r. c o m
w w w. a n y b r o w s e r. c o m
This site offers a screen size test, metatag creator, site viewer, HTML

1-Hit.com
www.1-hit.com/all-in-one/tool.

Deja Vu
w w w. d e j a v u . o r g
Using the Deja Vu site's Emulator, you can take a trip back in time to see just what your site would look

loading-time-checl<er.htm

Image After
w w w. i i n a g e a f t e r. c o m
Large online collection of free photos
and textures.

A website load time checker that adds

up all the files included in your page, then assumes an average rate to calculate how long it will take to load.

like through the eyes of an ancient browser - and then say a little thank you for being alive and web building now!

Unprofound.com
w w w. u n p r o f o u n d . c o m Small library of free images with quirky style.

validation, and a link check - plus a useful resource directory.

Delorie.com
www.delorie.com/web/

SnipURL
http://snipurl.com Shorten ridiculously long web addresses into small, user friendly
versions quickly and easily.

w p b c v. h t m l A web page backward compatibility viewer that lets you specify features you want browsers to display.

ility nj ,res m

"b' ■ Practically speaking,
of course, it allows

Yo t o P h o t o
http://yotophoto.com Search engine for free stock imagery.

* your site will appear
to those with old

you to check how

Online image Splitter
Ti n y U R L . c o m
http://tinyurl.com Another site dedicated to making
long URLs usable. www.chami.com/html-lcit/ services/is

browser versions.

Blue Vertigo
w w w. b l u e v e r t i g o . c o m . a r / bluevertigo.htm
Links to lots and lots of stock

Also part of the Deja Vu time warp
experience is the Timeline: a look at the history and the future of the web.

This tool slices large images into smaller parts so that they load, or appear to
load, more quickly.

photography, divided into cheap, commercial and specialised. There are links to clipart and fonts, too.

Ocawa
www.ocawa.com/Home_7_en/ Single-page accessibility auditor.

A c c e s s i f y. c o m
w w w. a c c e s s i f y. c o m / t o o l s - a n d wizards/default.asp Not a legit word, but Accessify is
certainly a useful site. Access five free accessibility tools, plus even more general web developer tools.

Online tutorials
WebSite 101
http://website101 .com Everything you need to consider if you're
a business looking to expand your presence on the web.

Onlinetools.org
w w w. o n l i n e t o o l s . o r g
Collection of scripts, tools and software
add-ons from Christian Heilmann.

Links to all kind of tutorials available

Phireworx
w w w. p h i r e w o r x . c o m
A rich vein of Fireworks and Flash tutorials

icant.co.uk
www.icant.co.ul<
Christian Heilmann's articles about

across the web, plus a lively forum where you can share all your web design issues.

Pixel2Life.com
w w w. p i x e l 2 l i f e . c o m

for web designers.

web development.

Virtual Clues
www.virtualclues.com Tutorials for Fireworks, Flash, Photoshop
a n d I l l u s t r a t o r.

JavaScript Kit
http://wsabstract.com General tutorial site, with a leaning
towards JavaScript.

D e v G u r u w w w. d e v g u r u . c o m Under the Features menu heading, you'll find a long list of useful tutorials to assist
your site building.

Computer Based
Training Cafe
www.cbtcafe.com Web-based tutorials covering the most popular web design and graphics software applications.

Flashguru
w w w. fl a s h g u r u . c o . u k
All things Flash, plus links to even more things Flash.

Zvon.org
http://zvon.org
News, tutorials and reference material for XML-based technologies (XSL, HTML, CSS).

D r e a m w e a v e r

Tutorialized.com
www.tutorialized.com You will be by the time you've got

Spoono
www.spoono.com

Support Centre
w w w. a d o b e . c o m / s u p p o r t / dreamweaver/tutoriaL
index.html

O'Reilly WebDev Center
w w w. o r e i l l y n e t . c o m / j a v a s c r i p t
Large selection of free articles on web development, online web development courses, plus a very handy book store where you can view a chapter of a book before you make your purchase.

This playground and lively forum is
also a classroom.

through this lot - all 7,073 tutorials. Actually, the pickings for web builders
are a fraction of the total, but there's plenty here to make it a useful link. The great thing about this site is that all the tutorials are submitted, and rated, by registered users. So, you can share your own skills and tips as much as you can

Straight from the horse's mouth.

Webmonkey
w w w. w e b m o n l < e y. c o m
Tutorials to suit designers at all levels, from beginners to all-conquering masters
of the web universe.

Content with Style
w w w. c o n t e n t w i t h s t y i e . c o . u k /
articles Articles that aim to solve day to day problems encountered by web designers, and get jobs done to deadline.

PHP Manual
w w w. p h p . n e t / m a n u a l / e n
It's all here. Look no further

web ' gain from others',
rxAnCITC which all adds to

SmartWebby
w w w. s m a r t w e b b y. c o m /
resources.asp The Free Web Development Resources pages of this web design enterprise offer a range of free articles, tutorials
and tools.

STAR SITE
★★★★★

W3 Schools
www.w3schools.com Huge resource of free tutorials, examples, references and quizzes from the World
Wide Web Consortium.

MySQL 5.0 Reference
Manual
h t t p : / / d e v. m y s q l . c o m / d o c /
refman/5.0/en/index.html All the answers to your MySQL 5.0 queries and problems.

the fun, and this extends to posting
on the active forum.

Builder's bookmarks Essential online resources for all web designers
o

Search engines
Stepforth
w w w. n e w s . s t e p f o r t h . c o m A generous, up to date helping of search engine news, tips, articles and
white papers.

Ranks.nl
www.ranks.nl/tools/

Devtooolz.com
www.devtoolz.com This website offers handy network development tools, including Google

SearchBliss
www.searchbliss.com

s p i d e r. h t m l Keyword density analyser with many
wonderful bells and whistles, plus links
to other tools.

Comprehensive palette of services that
includes search engine optimisation tools
and tutorials.

page rank lookup, link popularity checker,
and domain availability.

The Web Link Hounds
www.linkhounds.com/ hub-finder Part of a broader link-building resource. Hub Finder is an open source link analysis tool that looks for co-occurring backlinks.

Search

Robots Pages
w w w. r o b o t s t x t . o r g / w c /
robots.html Get to know the web robots, crawlers, wanderers and spiders that search engines use.

Engine Guide
w w w. s e a r c h e n g i n e g u i d e . c o m Great guide to search engines, their optimisation and marketing. If you're a beginner, this is a great place to come for an understanding of how to steer traffic
to your site.

Seomoz.org
www.5eomoz.org

Free search engine optimisation tools,
services, articles and news.

Crawler Alert
www.crawler-alert.com Does what it says on the tin: you get an email when a search engine crawler is scanning your site.

SEOBook
http://tools.seobook.com/ backlink-analyzer
Download this free beta version of the

S e a r c h E n g i n e Wa t c h
http://searchenginewatch.com
A lorra lorra information about search

WebWorkshop
w w w. w e b w o r k s h o p . n e t / p a g e r a n k ^ c a l c u l a t o r. p h p 3
Use this calculator to predict the ranking Google will apply to your pages.

engines. In fact, everything you could
ever want to know, including all the
latest news and trends.

Backlink Analyzer link popularity software
to find out what anchor text is linking into a page or website.

Digital Point Solutions
w w w. d i g i t a l p o i n t . c o m / t o o l s
This keyword suggestion tool will determine which phrases are searched for most often and give a keyword ranking monitor.

Siteometrics S E O To o l s
w w w . s e o c o m p a n y. c a / t o o l /
seo-tools.html Links to the best search engine optimisation tools on the Internet.

Poodle Predictor
w w w. g r i t e c h n o l o g i e s . c o m / t o o l s / s p i d e r. g o
Check to see what your site will look like in search engine results.

www.siteometrlcs.com Keep an eye on how your website is

ranking in all of the top search engines from this single site, with tools for Google
PageRank and other systems.

GoogEdit
w w w. g o o g e d i t . c o m Software that cleans up a keywords list and applies Google keyword rules to maximise its effectiveness in a Google AdWords campaign.

Publishing tools
FreeWebSubmission.com
www.freewebsubmission.com

Free submission to Alexa.com's highest-ranking free
Internet search engines, plus other online tools for measuring your site's web presence.

Web Announcer www.weballey.net/webannouncer
Weballey's Web Announcer allows you to submit your site to about 70 search engines, including Google, Lycos and AltaVista, in one fell swoop.

Nameboy
w w w. n a m e b o y. c o m This is a clearly designed site that not only allows
you to register your domain name, but

Tr a f fi c Z a p
w w w. t r a f fi c z a p . c o m

Marketleap Search Engine Marketing Tools
www.marketteap.com/verify
San Francisco Internet marketing firm
Marketleap offers some useful tools on

Free search engine submission, optimisation and
traffic builders.

generates available domain names VKeb ^
and also gives appraisals of names

(for a price). These appraisals STAR SITE
SelfPromotion.com
w w w. s e l f p r o m o t i o n . c o m All the information and tools you need to promote your own website - and do it properly! measure the popularity and demand
for words, phrases and markets on the Internet, and check for search

its site. The keyword verification, search engine saturation, and link popularity
checkers are a

frequency, Internet frequency and search term and keyword advertising values. Price per word depends on the number of words you submit for appraisal.

Whois.Net
www.whois.net

breeze to use,

which makes it web °
surpnsing that

all the more SJAR SITE
Marketleap ★ ★ ★ ★ ★
doesn't always
achieve the

Search for available domains, search through available deleted domains or look up registration data for
existing domains.

D N F o r u m . c o m
www.dnforum.com

It's not just talk here - you can get feedback on domain

Domainit
www.domainit.com An easy to use domain registration and research site, plus plenty of other tools on offer.

names, read the latest domain news or research the legal
issues relating to them. You can also buy, sell, broker or

coveted placement within the top three pages of search results itself. It's still

auction domain names, and follow tutorials covering web design, SEO, marketing, web hosting and more.

a useful boost to your site presence.

Practical Web Design 105

Builder's bookmarks Essential online resources for all web designers

Software sites

Nonags
www.nonags.com Large list of freeware and shareware,

torrentspy
w w w. t o r r e n t s p y. c o m There's lots of legal (and illegal beware!) software, music, movies and games available for

Zvon.org References
w w w. z v o n . o r g / i n d e x . p h p ? n a v
id=references Comprehensive reference site for all things XML.

and applications
Download.com
www.download.com CNET's trusty download site for PC and Mac, featuring user ratings, number of

with well-considered ratings.

Freshmeat.net
http://freshmeat.net
A great place to look for open source

downloading here. To download
them, you'll need to install the BitTorrent cooperative distribution

Devx.com vvww.devx.com/projectcoot
Project Cool: Web Development Basics is the title of this reference resource. There's

downloads and some editor ratings to
help you pick the best.

software and tools, particularly tools
for Linux and Unix.

lots of help here if you're getting started
in web design.

Tu c o w s
w w w . t u c o w s . c o m

5

Star

www.5star-shareware.com Loads of software, plus ratings, reviews, top picks and tips.

The bovine arbiters of good software
lend their likenesses to the software

Stylemaster CSS Podguide
w w w. w e s t c i v. c o m / n e w s /

that they favour, but also supply a

podguide.html ZD Net UK
Install Westciv's Complete CSS Guide on your iPod for a handy portable reference

user popularity rating.

Newfreeware.com
h t t p : / / w e b m a s t e r.
newfreeware.com

http://downloads.zdnet.co.uk One of the largest collections of free
and trial software to download. The

source, wherever you're coding.

user ratings and downloads listed are

Helpfully organised site with software
rated and download statistics listed.

a dead giveaway of how useful a piece
of software really is.

!
My SEO Tips
w w w. m y s e o t i p s . c o m An informative blog on how to optimise your website for search engines. full advantage of standards-based
development techniques.

Wellvetted.com
www.wellvetted.com A fine list of very handsome sites, A

CSSBeauty
w w w. c s s b e a u t y. c o m
A pristine showcase for the best websites designed using Cascading Style Sheets, plus CSS news, announcements and

visit here won't fail to inspire you.

Site showcases
Plasticpilots
w w w. p l a s t i c p i l o t s . c o m / pilots.php Enjoy the sites that Plasticpilots have
awarded for excellent design - and

Reference
CSS Property Index
w w w. b l o o b e r r y. c o m / i n d e x d o t / css/propi ndex/a 11. htm
An alphabetical listing of CSS syntax and properties, from accelerator and
azimuth to z-index and zoom.

W3C Schools CSS Reference
w w w. w 3 s c h o o l s . c o m / c s s / c s s _ reference.asp
The W3C Schools e-learning portal is completely free and a fantastic resource for training materials. Whatever aspect

plenty of tutorials.

of web building you want to learn
about, they cover it, and their tutorials are recommended reading at over 100

submit your own for consideration.

universities and high schools around

Zen Garden
w w w. c s s z e n g a r d e n . c o m
Zen Garden allows you to apply different

WBSSiib'sm
a *

ess Guide for

the world. So it's not surprising that their CSS reference pages are the most comprehensive you'll • find anywhere. In addition, you'll

the Unglued
m i
www.thenoodleincident.com/ tutoriais/css/index.html As the author writes, "this is not not a

CSS style sheets to a single page - the code stays, the page is transformed, but only the external CSS file changes.

Favorite Website Awards
www.thefwa .com

complete resource: this is a fast resource". This list presents links with answers to

STAR SITE find plenty more
help on their very
active forum.

VisualDesigner
w w w. v i s u a l d e s i g n e r. n e t i This showcase categorises featured sites by subject areas and by CSS and DHTML,

most of the coding questions you'll have.

Feast your eyes on some of the best design around over the last six years.
This site showcase is a particularly great

Stylegala CSS Reference
w w w. s t y l e g a l a . c o m / f e a t u r e s /
css-reference Alphabetical listing of Cascading Style Sheet syntax and properties, including examples, browser support, possible
values and more.

^ Flash, animation, audio and sound. Best Flash V2
I www.bestflashanimation slte.com/vote

resource if you're looking for Flash
inspiration. In addition to linking to

Web authoring and site design
The Link Exchange
w n ATw. l i n k - e x c h a n g e . w s
Free link exchange directory with categorised listing of sites that actively exchange links.

cutting edge sites, you can read Interviews with these creative genii, link
to their sites and read their profiles. If

Nestling in this ample resource of Flash

you're feeling bold and you
y w u 11

L resources are the sites voted as Best Flash
* Sites for the current week, plus the
i archives of previous weeks.

it reckon you've got what

Cheatsheet Roundup
w w w. p e t e f r e i t a g . c o m / i t e m /
455.cfm i More than 30 quick-reference sheets for web developers, whether you're coding in CSS or XHTML, or developing a database
with PHP or ColdFusion.

web it takes, you could

IT h eW e e k y lS t a n d a r d s
w w w. w e e k i y s t a n d a r d s . c o m i Highlighting websites that take

,ITf^
★ ★★★★

also submit your
own website for consideration. Let us

Evolt.org
w w w. e v o l t . o r g
Created and maintained by volunteers, Evolt's ad-free pages collect the latest

know if you win!

; 106 Practical Web Design

Builder's bookmarks Essential online resources for all web designers
o

Usability and
accessibility
Webusability
Accessibility and Usability Services
w w w. u s a b i l i t y. c o m . a u /
resources/tables.cfm

Eyetrack III researches results on web users' eye-tracking patterns across a web page.

iiaivicr

The Interaction

Designer's

Coffee Break
w w w. g u u u i . c o m / i s s u e s / 01 OS.php
This page from an irregular using on interactive design features discussion and tips on users' navigation blindness.

WcbDesigners
Bookmarks
w w w. w e b d e s i g n e r s
bookmarks.com The simple desire to l<eep web designers updated with great current
resources available on the Internet is the motivation behind this site.

This is a great resource for

understanding and creating accessible
data tables.

Webxact http://webxact.
watchfire.com
This site offers a free service that

Accessibility Matters
w w w. n i l s . o r g . a u / a i s / w e b /
resources/toolbar Accessibility discussion, links and resources aplenty.

Useit.com
www.useit.com/alertbox/ sizeiimits.htmi

tests single pages for quality,

accessibility and privacy issues.
Advanced options include
Section 508 and W3C WCAG

Size limits for web pages to allow
desired loading times at various connection speeds.

On its cleanly designed, easy to navigate pages, you'll find links to a variety of excellent resources tailored to website designers, grouped into helpful categories - much as we've done for you in this
bookmarks section.

compliance levels, collecting code fragments for accessibility issues and scanning for broken links.
Webxact's help pages are there
to make sense of

J*fly
h t t p : / / j fl y. i a m . u - t o k y o . ac.jp/color
Understand how to design for
colour-blind users.

R o b e r t ' s Ta l k
w w w. r o b e r t n y m a n . com/2005/06/14/whyaccessibility
Robert Nyman explodes some

Yo Yo u ud o d n't oe nv'etn
have to type
out the URLs

even web °

they report back to you.

web

°

STAR SITE
★★★★★

Eyetrack III
w w w. p o y n t e r e x t r a . o r g / eyetrack2004/main.htm

STAR SITE
* ★ ★ ★ ★

popular (and no to popular) myths
and exposes accessibility charlatans he's come across. ^

you make the
ost of them.

yourself-just click and go!

news and the most technical advice for

Web*?jastersChannel.
c o . n

Real World Style
http://realworldstyle.com
CSS layout, tips and techniques for the

developers and designers. There are articles and tutorials and great web
resources. There's also the Browser

www. webmasterschannt^' com
6,500 links to web design and maintenance resources, listed in categories that include design, programming,
marketing and ecommerce.

CSS oii^sessed, or even beginners!

Archive, the largest archive anywhere for testing sites for browser compatibility.

CSS Play
http;//cssplay.co.uk
Experiments in what can be achieved with pure, unadulterated CSS, with sections covering menus, transparencies and layouts, as well as more ambitious
interactive demonstrations.

W e b m a s t e r To o l s Central
www.webmastertools central.com On a mission to gather the best services

The Web Masters Den
www.webmastersden.com

This listings site offers a comprehensive,
searchable database of Internet resources, with a diverse, well-balanced outlook.

C S S Va u l t
http://cssvault.conn/ resources.php
The aim of this site is to be both

on the web for designers. Webmaster
To o l s C e n t r a l i s l i k e a m i n i - Ya h o o ! f o r w e b

Ta n f a
www.tanfa.co.uk

design, breaking its links into categories to help you find what you need.

CSS
Web Standards Software

CSS design, style, fun and articles presented clearly and concisely by
Claire 'Suzy' Campbell.

inspirational and a fantastic resource. To that end, there are articles, scripts,

FreeSticky
www.freesticky.com/stickyweb
Great resource of free content and web

layouts and a gallery of great websites that are built upon every month. Many of these sites are suggested by visitors
to the site via the 'submit a link'
I M B D

and Learning
w w w . w e s t c i v. c o m / s t y l e ^ m a s t e r / academy/css_tutoria l/i ndex. htm I
An extensive guide to every aspect of

CBEL Style Sheets
w w w. c b e l . c o m / s t y l e _ s h e e t s
Links you to a generous 195 CSS-related

design tools for your website.

The SiteExperts Community
w w w. s i t e e x p e r t s . c o m
Lively forum and tutorials, with

page - you could ""

websites. If it ain't here, it ain't anywhere
else, mister.

Cascading Style Sheets. A more complete
edition, with information on browser support of different CSS rules. Is available to buy and download.

even suggest STAR SITE yourown! *****
In addition

The Noodle Incident
www.thenoodleincident.com
The Noodle Incident is home to the

there's a great set
of links to CSS

demonstrations covering building, designing and maintaining websites.

reference guides. If you can't find what you're looking for here, you surely
won't find it anywhere else on the
Internet. There are also XML feeds to

CSS Shark

Big Webmaster
w w w. b i g w e b m a s t e r. c o m There are scripts galore in any language
you care to think of at this web designer's
resource site.

www.mako4css.com

indispensable CSS Panic Guide, and a comprehensive list of links to CSS resources. It includes an insight into the

This CSS know-how site answers your FAQs and explains the basics, though a prominent section on Netscape Navigator
betrays its age.

effects of different font sizing options,
plus everything you need to know about

update you as news, websites and resources are posted.

creating boxes with CSS. O

Practical Web Design 107

Hosting All the latest hosting deals available to you

Choose a site host
Your web host holds the key to a consistent web presence, but do you want the basics or something more?
The question we get asked the most at price, or perhaps you're gagging for Practical Web Design is: 'Where can I get some MySQL hosting. Whatever your the best hosting?'. Unfortunately, there's , requirements, over the next three
no magic solution to this question, and pages, you'll find a host to suit you,

the answer is dependent on what your
needs are. Maybe you need a Unix account, maybe your main concern is

and the next time you feel the urge to ask someone 'that question', you'll
know where to go.

■ S
(Q

o t r

I
1
1
( 3
0 c

§.
5*S

a

a "i
• c

a

I
c

I I i l

3 S
E
X

s
c

E
( 0

o

J
V A" ^

X \

a a

8

Z

1
V

V
www.i^jreg.co.uK 1 & 1 l n t e r n e t w w w. o n e a n d o n e . c o . u k

V
0 9 0 0 2 2 1 11 2 3

V

V
✓ ✓

V
X ✓

V
X
✓ ✓

V
✓ ✓
✓ ✓

y j KJ

I
\ X ✓ i ✓

1
V

a

I
✓ ✓
X X ✓

V

V

S3

\ . ✓

£ 1 9 11 0 0 M B
POA £150 £49 £100 £200 £99 POA £34.95 £25 £24 £25 £35 POA £29.99 POA ' £30 POA POA £45 POA £99.95 . POA £29.99 POA '^ 500MB

087^^^305
0207556 1070
t o f • 0845 130 4503 0870 739 2020 0131 468 4684 0870 740 1619 0871 871 8891 020 8399 6675 0870 740 7555

X

1 0 0 P e r c e n t I T L t d w w w. l M i ^ M t ^ B
1 2 3 c o n n e c t w w w. 1 2 3 c o n n e c t . c o . u k 2 0 2 0 M e d i a w w w. 2 0 2 0 m e d i a . c o m 2 f 3 I n t e r n e t w w w. 2 f 3 . c o m 4 t h e N E T I n t e r n e t L t d w w w. 4 t h e n e t c o . u k

■ ✓
✓ ✓


X X

, ✓
✓ . ✓

,X

150MB
N/A lOOMn 1Gb 100M POA 10MB 20MB 40MB 10MB N/A N/A 500MB N/A 100MB SOOMB N/A 50M6 N/A 25MB
✓ ✓

' ✓
✓ . ✓
✓ ✓

✓ ✓ ✓
✓ ✓ ✓ ✓

✓ ✓
✓ ✓ ✓ ✓ ✓


✓ ✓ ✓ ✓ X ✓ X ✓

X
✓ ✓ X ✓


X ✓ X X X X

✓ ✓ ✓

' ✓
✓ ✓ ✓
X X

✓ ✓

V
X X ✓

I


✓ ✓ ✓ ✓ . ✓
✓ ✓


✓ ✓ ✓

■✓

✓ ✓

5 StarOM^wwwBlaillMgilll&co.uk
A WebttMMtwwwMMOMHnMr



✓ ✓


X X X X


X X X ✓ X X X ✓ X ✓ X

V



' ✓

✓ ✓ ✓

rXce Internet www.aceintemet.co.uk
I AGCC WoHd

07050 657322.
07092 175707 01279 306677 01254 504420 0 7 7 6 4 1 5 6 3 11 01653 573330

■ ✓
✓ X

✓ ✓ ✓ ✓ ✓ ✓


X

✓ ✓

✓ ✓
✓ X ✓

✓ ✓


X

1 AGUK-lnternei Solutions aiMl 1 AlC-Entanet www.aic.co.uk
i Airtime www.airtime.co.uk 1 Aiivewww Ltd. www.alivewww.com

✓ ✓
X

✓ ✓ ✓ ✓ . ✓
✓ ✓

X
✓ X ✓

.

✓ ✓
X

1x
X

. ✓

V

■x
X

1

' ✓


✓ ✓ ✓
✓ ✓ ✓


X

. ✓ ✓
✓ X ✓

. ✓ ✓ ✓ ✓ ✓
✓ X

'

IflBEHBBiLtd www.altohi^RaMM
Archltec^H^^V Solutions Ltd www.architecnetco.uk [ wwwdMMMMMKcom ASft Maintenance and Facilities wvm.dsrmaintenance.com Av i a t o r s N e t w o r k w w w. a v i a t o r s . n e t B u s i n e s s 1 s t v i w w. b - l s t c o m B u s i n e s s S e r v e I h w w w. b u s i n e s s s e f v e . c o . u k 1 AlHMLtd wwwAH^MAuk

✓ X


X



✓ ✓ ✓ ✓ ✓

6912 429^062
n/a

V
✓ ✓ ✓ ✓

,X
X

✓ ✓ X
X

,✓
✓ X ✓ X ✓ ✓ ✓

' x
✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓

✓ ✓

0161320'1918 ^ 07002 742867
0870 757 4141 0870 755 5565

n/a
X X ✓ ✓ X

✓ ✓ ✓

✓ . ✓


✓ X ✓


X X


X ✓


✓ ✓


✓ ✓ ✓ X ✓ ✓

X
X ✓


✓ ✓

0870 516 8160^
0845 355 2000

, ✓

N/A_
10MB N / A

' ✓


✓ ✓

V
✓ ✓

1 Ciara.net Ltd wv^.clara.net 1 Colt www.cott-teiecom.co.uk
1 ttMMLtd wwv\«MiAMM

✓ , X
✓ ✓

✓ ✓
✓ ✓ ✓ ✓ ✓ ✓



✓ ✓
X ✓

_p80[p 358_3p41
020 8289 3039 020 7537 6240 0870 703 1000 0151 227 4244 0800 085 0010 0870 746 1788 0870 012 6600 0845 272 0666 01204 650132 0800 195 8060 0870 741 1438 07092 358096


, ✓
X X ✓


X


X



✓ ✓ ✓


✓ ✓


✓ ✓

(50MB
POA £ 11 0 £100 £100 £185 POA £165 £30 £50 POA £89 POA 750MB 50MB
2 5 M B

1 Conxion www.conxion.net
C W C S w w w. c w c s . c o . u k ] BAHi internet wwwtflftHftco.uk



. ✓

, ✓ ✓
✓ ✓ ✓


✓ ✓


✓ ✓

' X

, ✓



X ✓

; ✓

, ✓
✓ ✓ X X ✓

, ✓
✓ ✓ ✓ X ✓ ✓ ✓ ✓

» x
X

, ✓
✓ ✓ ✓ ✓

V
✓ ✓ ✓


X

f DataNet www.data.net.uk
1 Oatex UK www.datexuk.co.uk
D e d i c a t e d S e r v e r s w w w. d e d i c a t e d - s e r v e r s . c o . u k D e m o n I n t e r n e t w w w. d e m o n . n e t


X


X X X X ✓ ✓


X ✓ ✓

■ ✓


., 3 0 0 M B N/A 50MB 50MB 50MB 50MB 100MB



✓ X

1*^
✓ ✓

✓ . X
X

✓ ✓


✓ ✓ ✓


X X X X


X ✓


. X ✓
✓ ✓

ipMMgn R Web Solutions www.designrweb,co.uk
S e r v e r s L t d w w w. d s v r. c o . u k D o m a i n B u s t e r w w w. d o m a i n b u s t e r. c o m

. ✓

■ ✓
✓ X X ✓ X

✓ ✓
X


✓ ✓


X X X

✓ ✓ ✓


DRS Ltd www.0'2000webhosting.co.uk

108 Practical Web Design

Hosting All the latest hosting deals available to you
o

a 3

£
■ o

■ o

g'
t
o O )

s
A

I

1
E
3 C o c o

I
• o

£
3

o

•oi
c

S
c £

<D

<

tr

( / >

s

S J
O ) c

S j

s.
S
o

?
a
. a

5
c

s
c X

2
p

■ g
c

' a

I
3 V
\ £85 £199 V ✓ ✓

v

■2|
1^3
✓ ✓ ✓ X ✓ X ✓ ✓ ✓

&
V
N .

S
\

V
f E Business Services Ltd www.ebjzs.net Easynet www.ea&ynet.net Eaiyspace www.easyspdce.com Edipse Networking www.eclipse.net.uk
0800 169 5867 n/a 0870 755 5088 01392 333302 07020 971262 020 8875 0200 0870 741 5898 0870 770 4996 0800 072 9160 0 1 3 2 5 3 0 3 111 01452 541260 0870 742 4282 01324 489448 0870 740 9223 0 1 7 2 7 8 11 5 3 0 0871 7502474 0 8 4 5 11 7 0 3 6 6 0845 601 1279 0845 641 0776 0870 740 7777 01992 303090 0800 027 4141 0800 083 2077 0870 200 3044 0870 758 9999 020 8883 0000 0161 223 9435 0 1 2 0 2 4 2 11 0 6 020 7231 7766 020 7486 9601 0870 765 1208 0870 012 1234 01782 667788 01224 333370 01847 892892 0800 316 3377 020 8941 9195 0870 122 2224 0800 061 2222 0845 272 0052 0870 744 7799 01473 403020 01539 724564 01274 220000

V
X

\ ✓
✓ X

\ ✓ ✓

V
✓ ✓ ✓
✓ ✓

\

V ✓
X ✓


✓ X ✓

X ✓

✓ ✓
X

75MB 50MB

✓ ✓ ✓
✓ ✓



X ✓

✓ ✓
X

✓ ✓


X ✓ X ✓ ✓ X


✓ X

, £23 1|60MB
£99 £131 £99 £49 POA £29.99 £85 25MB 50MB 50MB SOMB N/A 10MB SOMB


X ✓ X


✓ ✓ ✓


X X ✓

✓ X
✓ ✓


1 Efficient www.efficienthostiBco.uk
E l e c t r i c N a m e s w w w. e l e c t r i c n a m e s . c o . u k

✓ ✓ ✓ ✓ ✓ ✓ ✓

X


X

✓ ✓ ✓ ✓ ✓ ✓


✓ ✓ ✓
✓ X



✓ ✓ ✓

1 EliteUKServe.Net ||ia://eliteukserve.net
E n t a n e t w w w. e n t a . n e t E u r o f a $ t h o 5 t . c o m w w w. e u r o f a s t h o s t . c o m

✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓
X

✓ ✓ ✓
X ✓

✓ ✓ ✓
X


X

✓ ✓
X ✓ ✓ X

✓ ✓
X ✓

✓ ✓
X

✓ ✓ ✓
X ✓ ✓ ✓ X

iiylHl Ltd www.e^^^^t!l.com
1 Fasthosts www.fasthosts.co.uk
F a s t r a c k w w w. f a s t r a c k . c o . u k F i « t D i r e c t S o l u t i o n s L t d w w w. f i r s t d i r e c t s o l u t i o n s . c o . u k F i r e t - We b N e t w o r k S o l u t i o n L t d w w w. f j r s t - w e b . n e t


✓ ✓ ✓ ✓

✓ ✓
X


X X X


£19.991 100MB
£99 £39.99 POA £24 SOMB SOMB
N / A

^ ...
✓ X
✓ ✓

✓ ✓
✓ X ✓

✓ ✓
X

✓ ✓


X


✓ ✓ ✓ ✓



X


✓ ✓ ✓


X


X X


1 Freedom 2 Surf www.freedom2surf.net
F r e e Vi r t u a i S e r v e r s w w w. f r e e v i r t u a l s e r v e r s . c o m F r e e z o n e I n t e r n e t VA W W . f r e e z o n e . c o . u k F r o n t i e r I n t e r n e t S e r v i c e s L t d w w w. f r o n t i e r. n e t . u k

✓ ✓ ✓



X


X ✓ X

X ✓
✓ ✓ ✓ X ✓

SOMB


'

X

✓ ✓ ✓
✓ ✓

£15 ]tl50MB
£39.90 £50 £9.99 £199 £78 £99 £420 £49.99 £ 11 0 £100 £55 £50 £79.50 POA SOMB 5MB

✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓


X ✓ X


X X

✓ ✓ ✓ ✓ ✓ ✓ ✓
✓ ✓


✓ X

✓ ✓ ✓ ✓ ✓

✓ ✓
✓ X

✓ ✓ ✓ ✓ ✓
✓ ✓


j Future Internet Services WAVw.futurelnternetservices.com Gtacom World Networks www.giacom.net 1 Global (Sold Network Ltd wwwjtfobatallAro.iiic

✓ X ✓
X X X

✓ X ✓ ✓ ✓

|25MB
100MB SOMB 30M8 IGB 100M8 100MB
1 0 M B

✓ ✓ ✓ ✓
✓ ✓


✓ ✓

✓ ✓
X X X

✓ X
X

✓ ✓ ✓
✓ X


Globell Business Solutions Ltd www.globell.co.uk
Hariequlnd^atns www.hartequindomains.com Hocling UK www.hostinguk.net
H o t C h i l l i I n t e r n e t S o l u t i o n s v y w w. h o t c h i H i . c o m H o t l i n k s I n t e r n e t S e r v i c e s w w w. h o t l i n k s . c o . u k


✓ X

✓ ✓ ✓ ✓
X X ✓ ✓





✓ X



✓ X X

✓ ✓ X
X X


X X X

✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓


✓ ✓ ✓ ✓ ✓ X ✓
X ✓ X ✓

✓ ✓


✓ X


X X ✓


X X

1 HubNut Ltd www.hubnut.net Hyperactive Hosting Services wvvw.hostituk.com 1 IUhMwww.hHliiVuk.com interComputttf Technoiogy Ltd vtA^.inctech.com 1 Interhost www.jnterhost.co.uk Internet Advertising Corporation www.iaclnet 1 internet Central Limited www.netcentral.co.uk
Internet For Business Ltd wvm.ifb.net

✓ ✓ ✓ ✓

100MB 10MB 150MB N/A 100MB N/A 25M6

✓ ✓ ✓
✓ ✓

'✓ ""
✓ ✓
✓ ✓ ✓ ✓

✓ ✓ ✓

✓ ✓


✓ ✓ ✓ ✓

✓ ✓
✓ ✓


✓ X X ✓ X


✓ X ✓

✓ ✓

✓ ✓ ✓ ✓ ✓
X ✓ X

£60 "
POA


X ✓
X

✓ ✓ ✓
X X

✓ ✓

✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓
✓ ✓

✓ ✓ ✓ ✓ ✓ ✓


X

✓ ✓ ✓
✓ ✓

✓ ✓
X X ✓ ✓ ✓ X ✓ ✓

✓ ✓
✓ ✓ ✓

£300 £20 £70

SOMB

✓ ✓ ✓

1 Internet Promotions Ltd vmw.interne'MHrtfans.co.uk
I n t e r n e t t e r s L t d w v i w. i n t e r n e t t e r s . c o . u k I n t o n e t L t d w w w. j n t o n e t . c o . u k I n t r a l i n x I n t e r n e t S e r v i c e s w w w. i n t f a l i n x . n e t

✓ ✓ ✓ ✓

tlOMB
500MB

✓ ✓ ✓
✓ ✓ X


X


X X ✓


✓ ✓ ✓



X ✓

IjtiOMB
£60 POA 10MB N/A

X ✓ X


✓ ✓ ✓ ✓


1 3lnweb Networks www.inweb.co.uk
l o m a r t w w w. i o m a r t . c o m



X

X
X

1
✓ X X X X X X ✓


X


✓ ✓
X

^ £ 2 5 J1 5 0 0 M B
POA 1



! IZ3R Solutions www.izr.com
K e C o n n e c t w w w. k e c o n n e c t . c o . u k

✓ ✓




✓ X ✓

^ N / A

✓ ✓ ✓ ✓ ✓ ✓
✓ ✓

✓ ✓ ✓
X


X

1 Internet www.kencomBinet


✓ ✓ X
X X ✓ X


✓ X ✓ ✓

" £49
£96 £25 £49

£210

100MB 25MB 20MB 20M8 10MB
N / A

✓ ✓

✓ ✓ ✓ ✓ ✓


✓ ✓

✓ X ✓
✓ X

✓ ✓
✓ X

✓ ✓

LeSgend JSM Net www.le9endism.c0.uk
L u n a i n t e r n e t w w w. l u n a . c o . u k

0121 722 2040 0845 345 0175 n/a 0808 100 6200 0845 177 3445 0 11 5 8 4 7 8 1 4 6 020 8426 4446 01543 571200 0800 328 7253 0870 120 8888 0800 917 0142 0800 298 7214 0808 163 0000 0870 741 0902


✓ ✓

✓ ✓
✓ ✓ X


✓ ✓

X
✓ X ✓ X X X ✓

✓ ✓
✓ ✓ ✓

1 Lumison www.lumison.net



✓ X ✓ ✓ X ✓

POA £79.50 " £100 £49 £79
£ 9 5

tingle Moments wwwJiM^ic-moments.com
1 Mailbox Internet Ltd www.maiibox.net.uk

✓ ✓
✓ ✓ X ✓ ✓ ✓ ✓ ✓

✓ ✓
X

✓ ✓ ✓
✓ ✓

600MB 25MB 30M8 30MB 25MB N/A 100MB N/A 100MB 200MB N/A

✓ ✓ ✓ ✓


✓ X X ✓

✓ ✓ ✓ ✓ ✓
✓ ✓ X


X ✓ X ✓ X ✓ ✓ ✓


^ ✓ ✓ ✓

Mwcys Internet Solutions www.maxys.net
1 Metronet www.metronet.co.uk


X X X ✓ ✓ ✓ X


X X

✓ ✓ ✓


X


MidtandWeblliillpwww.midlandwebdesign.co.uk
1 Mistral Internet wv^w.mistral.co.uk
N a m e s c o v t ^ w w. n a m e s . c o . u k


X

✓ ✓
✓ ✓

✓ ✓ ✓ ✓ ✓

POA

✓ ✓
✓ ✓

✓ ✓ ✓ ✓ ✓ ✓

^
✓ ✓
✓ X

,


✓ ✓ ✓ ✓ ✓

✓ '
✓ ✓ ✓


X

✓ ✓

f NetBenefitwww.netbenefit.com
N e t c e t e r a L t d w w w. i n e t c . n e t

✓ ✓
X ✓

■ £99
£60 £60

£49.99


J

1 Netkonect Communications lit www.netkonect.net Netlink Solutions Ltd www.netlink.info


✓ ✓

✓ ✓

✓ ✓


✓ ✓

POA

Practical Web Design 109

Hosting All the latest hosting deals available to you

Net Magik www.netmagik.net
NetMatters www.netmatters.net

e m r n u e o b P h n g e d h s a i r x h U o t s n i? P a g o e n t F r o s f e r * M p e r a y iL o w t p r e s o n ? s e n ic v e t x s r n g ? t iu s p o r p C t m u G m ie r I o c i s h ? p a c u s lt p e h c o n N r in t o e r O ^ w a t n e c t a d ? W p a o ln 'e b r c h 2 ^ o 4 c a e u l r h n 't i
a t 'Z
01858 468681
✓ X X X

0870 745 6994 0800 028 1869 0800 072 0000 0800 731 8447 0845 355 4455 0800 026 0953 07092 222084 020 7767 3700 0870 444 0897 0845 771 5715 01253 740500 0800 389 1387 0 11 8 9 5 9 7 6 0 0 07069 903733 0871 871 1815 0870 990 8418 01455 828218 0870 600 4454

n g e d i h W a r s n d t o h w m ? c s A ie l g r L v n t ? iv e a ? S b le r a b l S n g e d h s o t l p a v a D c i e v t r a e s v r i d o n iU o a c g t B o e r la s i ta l' ? t a u c s l p o r e h E c n im t la i < e d s e l d r u p b ? a v c S ^ h a r e 'e s g b M a S Q y D S Q a ? ^ L

✓ X X


X

✓ ✓ ✓ ✓ ✓

X X

✓ ✓

£60

100MB 50MB 30MB 100MB 50MB

✓ ✓ ✓ ✓

✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓

X X

£20 J
£70 £324 £120 £23 POA £29 £109 £99 £50 POA £129 £20 £285 £47.88 £100 £99 £79.50 £90 £99 Free £60 £69.99 £40 £50 £60 £600 POA POA POA £49 £50 POA POA POA £47.50 POA £20 £62.50 £60


✓ ✓ ✓ ✓ ✓ ✓ ✓

N e t N a t i o n C o m m u n i c a t i o n s w w w. n e t n a t i o n . c o m N e t s c a / i b u r U K L t d w w w. n e t s c a l i b u r. c o . u k N e t s c a n U K w w w. n e t s c a n u k . c o m


✓ ✓ ✓



✓ ✓ ✓ X

✓ X X ✓ ✓ X



✓ ✓ ✓
X X

✓ ✓



X ✓


✓ ✓ X


✓ ✓ ✓


✓ ✓ ✓

✓ ✓
✓ ✓ ✓ ✓ ✓

✓ ✓
✓ X X ✓

NewNet pic www.newnet.co.uk Nildram www.nitdram.net. NSDesign Ltd www.nsdesign.co.uk
N T T / Ve r i o w w w. v e r i o . c o . u k

✓ ✓
X ✓ ✓ ✓

✓ X
X ✓ ✓ X ✓ ✓ ✓

200MB N/A 100MB 50MB 25MB 50MB 100MB 50MB 50MB 10MB 100MB 5MB N/A 600MB 3GB 10MB
1 5 M B


✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓
X

✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓


✓ ✓ ✓


X ✓ X ✓ X





✓ ✓

One Stop Hosts www.onestophosts.com Onyx lnternetwww.onyxnet.co.uk
O r b i t I n t e r n e t w w w. o r b i t - l n t e r n e t . c o m

✓ ✓




✓ ✓ ✓ ✓ X ✓


✓ ✓



✓ X

✓ ✓
✓ X ✓ ✓


✓ ✓

✓ ✓ ✓
✓ ✓ ✓

OrbitalNet Ltd www.orbital.net
O s c u r a L t d w w w. o s c u r a . c o . u k


✓ X


✓ ✓ X


✓ ✓ X ✓ ✓


✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓


X ✓ X ✓ ✓ X X ✓ ✓ ✓ ✓ ✓ X ✓ ✓ X


✓ ✓ ✓ ✓

Paradise Internet www.pins,co.uk Pay as you Host www.pay-as-you-host.com Pinnacle Internet www.pinnacle.netuk Pipemedia Business Communications www.pipemedia.net PIPEX lnternetwww.pipex.net PLANT hosting & co-location www.plant.nl Plugtn.co.uk Ltd www.ptugin.co.uk Portland Communications Ltd www.portland.co.uk Power internet Ltd www.powernet.co.uk Proweb (UK) www.proweb.co.uk PuqiitPaw Ltd www.purplt^)aw.co.uk Qawebhosting www.qawebhcsting.com Quik Internet www.Quikinternet.co.uk Rapidhost Ltd www.rapidhost.co.uk REDNET Ltd www.red.net SAQ Internet Ltd www.saqnet.co.uk
S c o t l a n d O n L i n e w w w. s c o t t a n d o n l i n e . c o . u k S e l r e t t o w w w. s e i r e t t o . c o m



X ✓


X X X


X ✓

✓ ✓


✓ X ✓


✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ X X ✓

X
✓ ✓ ✓ X ✓


✓ ✓

✓ ✓
✓ ✓ X ✓ ✓


X ✓

✓ ✓
✓ ✓ ✓ ✓




X ✓ X X ✓ ✓ X X


✓ ✓ X ✓ ✓ X X X

✓ ✓
✓ ✓

+31 205626626 0870 075 8446 0870 741 0994 01908 605188 0500 636343 n/a 01325 301879 01270 212199 01628 400650 01494 513333 0870 737 7700 0800 027 2027 07909 696840 01707 885800 01604 670500 01769 574457 0870 741 7226 n/a 0 8 7 0 7 5 4 1 0 11 01757 249342 0870 744 1607 n/a 0 8 7 0 7 5 7 11 4 0 02380 571300 01296 300 300 0845 458 4545 01772 908000 01527 502367 01753 776699
n / a


✓ X


✓ ✓


✓ ✓


✓ ✓
✓ ✓ ✓


✓ X X X


✓ ✓ X X ✓ ✓ ✓

10MB 50MB 25MB 150MB 20MB 50MB N/A 25MB 25MB 15MB 500MB 50MB
N / A


✓ ✓ ✓ ✓


✓ ✓ ✓


✓ ✓

✓ ✓
✓ ✓


X ✓ X ✓ ✓ ✓


✓ ✓ ✓ ✓ ✓ ✓ ✓ X ✓ ✓ ✓ X ✓ ✓ ✓ ✓ X ✓ ✓


✓ ✓ ✓ ✓ ✓

✓ ✓
✓ X ✓


✓ ✓ ✓


✓ ✓ ✓ ✓ ✓ ✓

✓ ✓


✓ X ✓ X ✓ ✓ ✓ ✓ X ✓ X X X X


✓ X ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓


✓ ✓ ✓ ✓ ✓ ✓


✓ ✓ ✓


✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓
X ✓ ✓ X X X X X X

✓ ✓
X

✓ ✓ ✓
✓ ✓ ✓ X ✓

✓ ✓ ✓
✓ ✓ ✓ ✓ ✓ ✓ ✓ X


X ✓


✓ ✓


✓ ✓ ✓ ✓


Shared Knowledge Ltd vyA^A^^.sharedkncMvlt(( J ^ , n e t
Smartways Internet www.smartways.net
S O S I n t e r n e t L t d w w w. s o s i . n e t S t u d i o Z O n i i n e w w w. s 2 o . c o . u k S u r f Z l t w w w. s u r f 2 i t . c o . u k Ta l k - 1 0 1 w w w, t a l k - 1 0 1 . c o m


✓ ✓ ✓ ✓


✓ ✓ X X

✓ ✓
✓ X



✓ ✓ ✓ ✓ ✓ ✓ X ✓ ✓ ✓ ✓ ✓


✓ X

N/A 10MB N/A 100MB 50MB 25MB


✓ ✓ ✓ ✓ ✓


✓ X ✓ X


✓ ✓ X ✓


✓ ✓ ✓ ✓

The Cyber Mill Ltd www.cybermill.co.uk The Host For You www.thehostforyou.co.uk
T h e N a m e w w w. t h e n a m e . c o . u k


X


✓ X X


✓ X ✓ ✓ ✓ ✓ X ✓ ✓ X ✓ ✓ X ✓ X ✓


✓ X ✓ ✓ X ✓ X ✓ ✓ X ✓ ✓ X ✓ ✓ ✓


✓ ✓ ✓


✓ ✓ X ✓


X X ✓ ✓ ✓ ✓ X ✓ ✓ ✓ ✓


X X ✓ ✓ ✓ X

Timewarp Internet Ltd www.timewarp.co.uk Total CormaclMty Providers Ltd www.tqi>.co.uk
Tr i n i t e L t d w w w. t r i n i t e . c o . u k

✓ ✓ ✓

£20
£99 £300 £199 £ 5 0 £50 £48

i

150MB 15MB 50MB 50MB 50MB No limit 10MB

✓ ✓
✓ ✓ ✓

✓ ✓
✓ X ✓ X X ✓ ✓ X ✓ ✓ X

✓ ✓
✓ ✓ X X X X ✓ X X X ✓ X ✓


✓ ✓ ✓ ✓ ✓ X ✓ ✓ ✓ ✓ ✓


✓ ✓ ✓ ✓ X ✓ ✓


✓ ✓ ✓ ✓


✓ ✓

UKFAST www.ukfast.net UKIP Ltd www.ukip.co.uk United Web Hosting www.unitedwebhosting.co.uk
UV Net w w w. u v. n e t

✓ ✓


✓ ✓


✓ ✓


✓ ✓ ✓ ✓


✓ X ✓ ✓ ✓ ✓ ✓


✓ ✓ ✓ ✓ ✓ ✓


X ✓ ✓ X X

Va l u e W e b H o s t s w v v w. v a l u e w e b h o s t s . c o m Ve l n e t w w w. v e l n e t . c o . u k Vi r t u a l I n t e r n e t w w w. v i . n e t V i s i o n I n t e r n e t S e r v i c e s w w w. v i s n . c o . u k


✓ ✓ ✓ ✓


✓ ✓ X ✓ ✓ ✓

£8.99 1 No limit
£29 £120 1 £149 £35 £99.95 £120 £39.95 £50 £50 20MB 25MB

0870 744 0151 0 8 0 0 11 7 7 4 4 0845 123 2694 0 8 7 0 0 11 6 6 2 1 0800 015 1718 0 11 5 9 1 7 0 0 0 0 07931 386455 0870 050 0080 0870 6000 971 0870 743 0565

✓ ✓ ✓
✓ ✓

25MB ^
100MB 10MB 1.5G8 N/A 50MB
5 0 M B 5 0 M B

C ✓ ✓ ✓
✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓

Web Age www.01webdesign.co.uk Web Tapestry Ltd www.webtapestry.co.uk
We b F u s i o n w v w. w e b f u s i o n . c o . u k _ We b s u r f U K w w w. w e b s u r f . c o . u k X c a l t b r e c o m m u n i c a t i o n s L t d w w w. x c a l i b r e . c o . u k


✓ ✓ ✓ ✓ ✓ X


✓ ✓ ✓
✓ X X

✓ ✓
✓ ✓ ✓


✓ ✓ ✓ X


✓ ✓ ✓ ✓


✓ ✓ ✓


✓ ✓ ✓



✓ X X


✓ X ✓

✓ ✓

Zen Internet www.zenwebhosting.com
Z e ^ e t S e r v i c e L t d w w w. z e t n e t . c o m

✓ ✓


110 Practical Web Design

Back issues

.Back
NOW INSIDE • AMA/INC. WEB ALBUM SOFTWARE VI/ n\/IVI . flash video lessons and more..
allthe tutorial files you need

issues
Issue 28 June 2006
■ Spice up your site
Discover the features

Practical S!

Helping you build better websites

NOW INSIDE •acclaimedecommercesofiware r n - R A tfUIVI M • ♦ " YCSSVIDEOPROJECTSANDMORfc... IU TORIAl FILE YOUIL NEED J j

Issue 29

July 2006
■ Show me the

that'll keep visitors

glued to your pages

Spice up Mm yoursite!|f J
w Discover Discoverthe the too to|>20 20 features features thatHdP that^

■ PLUS: Track your site

money Quick and easy ways to make money from your web site
■ PLUS; Create

6 6
.

visitors, animate
buttons with Flash and create attractive

PA G E S O F ESSENTIAL TUTORIALS

k &ADVICE

keep visitors glued to your pagpsi

pullquotes with CSS
■ TESTED; Search

moneyll
Earn a Earn am mint trtt from from Google Goodeadfr, ads^. J

Show me the.
10 great ways to make Mgi:^
Sell stuff from your siteasjr^

stunning lists with CSS, load Flickr photos into any site and earn a

mint from Google ads
■ TESTED; vBulletin, phpBB and two more
online forum

Google I
YOUR QUESTIONS^

Engine Composer, RSS
Feed Mix and 1&1

Analytics |
ANSWERED! ^1
livi'p<q>'in(v«vb buildiiw] tip\ ftiHTi

Dynamic Content
1^ ON THE CD;

' start setling today
■ A c t i nwithafuflcopyof ic Catalog25

^etfup

management tools

WebAlbum Lite, XP
Web Buttons and an

LCI IF ! 1

■ ON THE CD; Start

selling today with a full

hour of Flash training

copy of Actinic Catalog
25, plus CSS videos

WIN! A PC, WEB HOSTING, DOMAIN NAMES, AND MORE INSIDE...

WEB SITE BUILD-OFF! CSS BEAUTY TIPS FUCKR POWER!
CXHHMjfiwxkugnvnihiwyvuwtvtK Ci»A*itunn(igbsbwUiCSS^^ DiMPV«>«wlokMdHckiult3(Mnia

t9k«tOv-»rsv»J»tJVi«»«*temxt»tth idttt3l«y><Mr«t*ct>iK*iitiniry** »n>*<*v<*hth»pc«*o«;4v3S(<^

r\NOW (NSDL -EVERY TUTORIAL FILE YOU COULD NEED rn-ROM ♦ilSOOFDEVILISHLYGOODSOFTWARE J

WJ It • PHOTOSHOP VIDEOS AND MUCH MORE J

Issue 30

August 2006 ■ Seven deadly
design sins Tips to
overcome common

design mistakes
» PLUS; Embed

DEADLY I
A N D H O W T O B E AT T H B V I !

iSEVEN .
PA G E S OF S i Z Z U N G TUTORIALS A N D A D V I C E THIS MONTH

Yo u T u b e v i d e o i n

your site, create a Flash MP3 player, and use
PHP to create forms

Br If you've missed an issue, just pick up the phone and call;
Overseas

/> SINS

^houldcall Mic rosoft it a day,

■ TESTED; Fireworks 8, Xara Xtreme, Inkscape
and CorelDraw Suite ». ON THE CD; DTP

The hottest tutorials ever!
• tJwign site ii?tTipl,«« v/frti CSS • AcJd YojTt/lw video toymir 5W

with Serif PagePlus 8,
TwistedBrush, and

Photoshop technique
video tutorials

^Site

irbuild-off!
Seehowfburpro<l«$igners 9et to grips with cfeugning __ a site for a pub

If 1
PROBLEMS SOLVED!

UNITED KINGDOM - £7.99n EUROPE - £8.99

IMPROVE YOUR SITE

REST OF WORLD-£9^9^^

Visit our website today! www.pwdmag.co.uk
Practical Web Design 111

Glossary Avoid confusion with our handy description of design terms

Glossary
ACCESSIBILITY The physical and technological barriers to people with disabilities interacting with a web page or site. ALIASING Aliasing occurs when a computer monitor, printer, or graphics file does not have a high enough resolution to represent a smooth line of a graphic image or text. Aliased parts of an image appear to have jagged edges. A N I M AT E D G I F A GIF graphic file, consisting of two or more images in sequence, timed to give the effect of motion. ANTIALIASING A technique used by text processing and design software to smooth the jagged appearance of text and lines. A small program designed to run over
a network, such as the Internet. It's held on a server but works on your

typically define colours using RGB (red, green, blue). COMPRESSION A method of packing data in order to save disk storage space or download time. JPEGs are one example of compressed graphics files. CONTENT The words, images, pictures or sounds that mal<e up a website. COOKIE A cookie is a file, held on your computer, that's associated with a specific website. Cookies identify website visitors to the site, enabling you to customise web pages for them. Get consent from your visitor before you store a cookie on their machine. CRAWLER A program that visits websites to gather entries for a search engine. ENCRYPTION
Conversion of data from Its original form to one that cannot be

Short for weblog, a blog is a web page that has short, frequent updates made to it, such as an online diary, and is operated through a content management system to make archiving easier. BOOKMARK A link to a particular website, stored by a user for future use. BREADCRUMBS The path that traces a visitor's steps through your site. Site analysis software can show how your visitors
use your site.

understood by others. Only the sender and recipient have the key to convert the data back to its original form. The purpose of encryption is to prevent unauthorised people from viewing
data as it travels across the Internet.

The number of times a web object (a page or a picture within a page) has
been viewed or downloaded.

H O M E PA G E The main or first page of a website. HOSTING The act of storing and providing
information over the Internet.

EXPORT
To save a file in a different format, often one associated with another

Hosting companies offer hosting space for lease, enabling companies
or individuals to set up their own
websites or other Internet content.

program. For example, many Adobe Photoshop files can be exported to
become GIF or JPEG files.

Stands for electronic magazine and refers to websites modelled on print

BROWSER
Software that is used to interpret

magazines, or magazines that are only available online or via email.

Hypertext Markup Language. HTML is the language of the web. HTML is a set of tags that are used to define the content, layout and the formatting
of the web document. Web browsers

HTML commands and display web page content, thus enabling the user
to look at various kinds of Internet

use the HTML tags to define how to display the text. HTML EDITOR A software program for editing HTML pages. With an HTML editor you
can add elements like lists, tables,

resources. The two most widely used
browsers are Microsoft Internet

Cascading Style Sheets. A feature of HTML that enables designers to specify style Information, such as
fonts, size, and colour for a web page.

FIREWALL
Hardware or software that acts as a

Explorer (IE) and Mozilla Firefox.

CSS can also define the placement of
elements on a page.

security filter that can restrict types of
network communication. Most often used between an individual computer
and the Internet.

computer, typically inside a browser.
ARCHIVE A file that combines a number of other files into one for transfer. These A web browser feature, which stores

layout, font size and colours to an HTML document, just like using a word processor. An HTML editor can sometimes display the page being edited exactly as it will be displayed
on the web.

copies of regularly accessed files on a computer's hard disk to speed access. CASE-SENSITIVE Used to indicate that characters typed in will only be recognised if entered in
the correct case.

are often compressed to reduce size, or encrypted for security.

D E D I C AT E D L I N E A permanent connection to the Internet that's separate from a telephone line.

Vector graphic software from Macromedia that allows a single animation file to play on all browsers, as long as the Flash plug-in is installed. One of the advantages of Flash animations is their relatively fast
download time.

HTML TA G S Code that identifies the different

parts of a document so that a web
browser will know how to display it.

American Standard Code for

Information Interchange. A set of 128 alphanumeric and special control
characters used for computer storing

Common Gateway Interface. A set of
rules that define how a web server communicates with another piece of software on the same machine,

and printing of text. Used by HTML when transmitting data over the web.

Dynamic Hypertext Markup Language. An extension of HTML that enables web pages to react to a user's input, such as displaying a web page based on the type of browser or computer that end users are viewing a page with. DIRECTORY A directory such as Yahoo! (commonly mistaken for a search engine) is a subject guide, typically organised by major topics and subtopics. The main
difference between a search engine

FORMS HTML tags that define and label text-entry boxes, check boxes, radio
buttons and drop-down menus to create on-screen forms for collecting
i n f o r m a t i o n f r o m t h e s i t e v i s i t o r.

Hypertext Transfer Protocol. The protocol for moving hypertext files
across the Internet. Requires an

as well as how the other piece of Advanced Streaming Format. A multimedia streaming format. Developed by Microsoft for Windows.
software talks to the web server. When a user fills out a form on a

HTTP client program on one end, and an HTTP server program (such as Apache) on the other end. HYPERLINK

web page, the server passes the information to a small program that processes the information and may
send back a confirmation message. The CGI standard defines how

A single graphic image in an
animation sequence.

See Link.

Active Server Page. Dynamically created web page, generally using programming scripts and integrated with the HTML of a page. The ASP code is then compiled on-the-fly by the server and outputs standard
HTML. It's a server-side scripting

the data is passed back and forth
between server and application.

and a directory is that a directory does not make use of a spider or robot. DOMAIN NAME The main part of an Internet address that Is its unique identification, e.g. 'mysite.com' or 'flowers.co.uk'.
D O W N L O A D

FRAMES A website design method where two
or more HTML files are viewed as

HYPERMEDIA An extension to hypertext to include graphics and audio. HYPERTEXT
Text that is cross-linked to other

distinct areas within a single page.

C L I C K T H R O U G H R AT E
The number of times visitors click on a link (or advertisement) on a page, as

Usually one frame remains static, while the other changes. Often used as a website navigation method.
F R E E WA R E Software distributed free on the net.

documents in such a way that the
reader can read related documents

language, mostly used on Windows platforms for interactive functions. BANDWIDTH
The amount of data that can be transferred over the network during

a percentage of the number of times the page has been displayed.

by clicking on a highlighted word or symbol. A web page is the most
common example.

E s m

A computer or software program
that is used to contact and obtain

Transferring files or data from another computer to the one you are using. The opposite of upload.

File Transfer Protocol. Enables you

a fixed amount of time, usually expressed in bits per second (bps). A hosting server will usually allocate your site a fixed amount of bandwidth usage for a given period of time. A U T H E N T I C AT I O N
The method used to identify a user,

data from a server, typically across
the Internet or a network. Each client

program is designed to work with one or more specific kinds of server, and each server requires a specific kind
of client: a web server, for example,

Dots per inch. Specifies the resolution of an output device such as a printer or printing press. For input device
see ppi.

to copy or send files from one computer to another via the Internet. Anonymous FTP is a method for downloading files from an FTP server without using a logon account.

Breaking an image into smaller pieces to make it load into a web
browser faster INTERLACE

recognises only web browsers. Digital Subscriber Line. A fast Internet connection over a regular phone line. Content Management System. A program or script that automates the management of the material you add DYNAMIC A dynamic web page has elements
added to it between when it is

program or computer on the web.

Gigabyte, or 1,024 megabytes (MB), commonly rounded down to one billion bytes.

Storing partial data from a single graphic image in multiple sequences. The purpose of interlacing is to have a partial image initially appear onscreen, rather than having to wait for the image to appear in its entirety. INTERSTITIAL A web page, typically an advertisement, that appears in the same or a separate browser window
between the current and the target

B A N N E R

to your site.

A banner is a graphic image (static, animated or rich media) that is placed
on websites as an advertisement. Stands for the colours Cyan, Magenta,

requested and when it is downloaded by the end user. It usually has a file Yellow and Key (black). In print design, colours are defined as a percentage of each of these colours. For example, the CMYK abbreviation
for the colour black would be 0, 0, 0, extension of .php or .asp. Static pages are written in HTML and will appear

the same every time you load them.
DYNAMIC IP

A graphic image that's composed of a pattern of dots, or pixels. Also known as raster graphics. Common bitmap
formats include are GIF, JPEG and PNG.

100. In contrast, computer monitors

An IP address that changes each time you connect to the Internet.

Graphics Interchange Format. A lossless graphics format that's supported on the web. GIF images display up to 256 colours. GIFs are best used for line drawings, small text-based graphics and company logos, while photos are best saved in
the JPEG format.

web page, typically lasting 10 seconds or less and giving a courtesy skipthrough option to those who have no
interest in it.

112 Practical Web Design

Glossary Avoid confusion with our liandy description of design terms

Apple's computer music application,
now upgraded to include the world's largest downloadable music store.

MEGABIT One eighth of a megabyte. A
measurement unit most often used to define broadband and other network

resembles that of a legitimate
organisation. Emails are sent out

u

m

Each cell within a table can contain text, images or both.

speeds. Mbps is megabits per second. M E TA TA G A Specific kind of HTML tag that
contains information about the

requesting recipients to log on to the site. The aim of the exercise is to dupe people into revealing access codes
and passwords. POP-UP AD

Really Simple Syndication (formerly Rich Site Summary) Is a platform over which a webmaster can instantly
deliver summarised Information about

A series of posts, related to the same

Ads displayed in a new window.
POP-UNDER AD

A programming language designed
for the web. Java is similar to the C++

the latest, most important content on their site. This summary is usually a list of headlines and snippets displayed in an RSS reader or some RSS-compatible
web browsers.

subject, in a discussion group or forum.

I

I

WM

page itself. Typical uses of meta
tags are to include information for

Tagged Image File Format. A highquality image format.

language, but simpler. J AVA S C R I P T
JavaScript is no relation to Java,

search engines to help them better
categorise a page.

Displays In a new window behind the
current browser window.

D
SEARCH ENGINE
Software that searches online

An HTML tag that's used to define a website's header, appearing at the
top of a browser window.

n

a

z

i

n

K

K

despite the similarity of the names.
JavaScripts are used for rollovers, for

Multipurpose Internet eMail Extension. A standard used when a computer needs to communicate with

P O R TA L A web portal is a site that creates a
single point of access to information collected from different sources.

automatically changing a formatted date on a web page, for creating pop-up windows, and other simple functions. JavaScript code can be embedded in HTML pages and directly interpreted by the web
browser or client.

documents for specific content.

another program about the type of file being sent. Portable Network Graphics. A graphics format supported by the web, though not by all browsers. Stands for pixels per inch. Used to
describe screen resolution.

TRAFFIC The number of visitors to a given
website. It's measured with stats such

To maintain an exact copy of a file or files held on another server. Busy
download sites often make mirror arrangements to ease the demand on their own servers.

Search Engine Optimisation. The process of increasing visitors to a site by increasing a web page's relevance ranking on a search engine results
page.

as hits and page access.

A group of information pages on a
website.

Joint Photographic Experts Group
(the name of the committee that

SERVER
A computer that holds files on the

created this file format). A lossy file compression format designed to compress colour and greyscale continuous tone images, JPEG files are best used for photographs and
complex graphics.

MOUSEOVER A JavaScript element that triggers a change on an item (typically a graphic change, such as making an image or hyperlink appear) In a web page when the mouse pointer passes
over it.

PUBLISHING Uploading a website to a web host. PROTOCOL
A formal set of rules and formats that computers use to communicate with each other. FTP and HTTP are

Internet, ready for other computers or
clients to access.

A computer program - hidden in another program - that destroys
software or collects information

about the use of the computer. SHAREWARE A software package that's made available to be copied and shared.
Many are offered without the

examples of protocols used to transfer files between computers via the net. An abbreviation for kilobyte or 1,024 bytes.

complete functionality of the full software or expire after a trial period. S H O C K WAV E A plug-in that enables a web browser to display rich media content.

lillllllll—|i

The act of extracting files from
a zipped file or similar archive.

I

Kilobits per second - a measure of

bandwidth, particularly used with
modems and slower broadband lines.

N AV I G AT I O N STRUCTURE The hierarchical relationship between pages in a website, mapped out in a site diagram, which is then used to determine the links that will appear in each page's navigation bar. NETIOUETTE Acceptable behaviour online - for example, don't write emails entirely in capital letters, because many people
consider these uncomfortable to read.

The transfer of data from a computer
to an online destination, such as a
w e b s e r v e r.

c

UlCKTIME A format for video playback. A plug-in enables a browser to display
content saved in QuickTime format.

SHOPPING CART Software program that displays and sells goods online. Many
are database-driven for easier organisation and stock control.

Uniform Resource Locator, The unique
address for a file on the Internet,

KERNING The horizontal space between letters
in a word.

KEYWORD PHRASE The words and symbols used as an
input for a database search.

RECIPROCAL LINK A link exchange completed between
two websites.

S PA M B O T A robot that scours websites, looking
for email addresses, which the bot

owners then send spam to, or sell. S P L A S H PA G E A website's introduction page, usually using flashy graphics. SPIDER Software program sent out by search engines to find web content by following hyperlinks across the
Internet.

NOFRAMES An element commonly used on framed pages. This will be displayed if the browser does not support the use of frames and will supply the browser
with a clickable link.

REFERRALS
Referrals are tracked in website

VECTOR GRAPHIC A graphic image drawn in shapes and lines, called paths.

logs, showing where a site's visitors
originated from and the search words

they used to find it. R E L AT I V E L I N K A way of presenting a link to one of your own site's pages in an
HTML document. While an absolute link includes the whole address

A pointer to another document,

WEB PERFORMANCE The time it takes a page to load.

most often a pointer to another web
page. Hyperlink and hotlink are older synonyms for a link. Portable Document Format. PDF

Used to describe file compression
methods that discard file information in order to make a file smaller.

files can be viewed using Adobe's Acrobat cross-browser, cross-platform compatible text viewing software. A script programming language. Programs written for a CGI gateway
are often written in Perl.

(e.g. http://vvww.thisdomain. com/glossary/thls.page.html), a relative link shows only the path to the page from the position of the page in which the link is placed (e.g. /glossary/thls.page.html).

S TAT I C I P A D D R E S S A number that is assigned to a computer by an Internet service provider to be Its permanent address
on the Internet.

Microsoft's Web Embedding Font
Tool. It allows fonts created with a

web page to travel with the page,
regardless of fonts available in the browser used to view it.

STOP WORD Frequently used words such as you, for, with, etc. that are ignored by search engines. STREAMING Streaming Is the act of sending media, such as sound and video, in
compressed form over the Internet to

World Wide Web Consortium. The

group responsible for defining many major standards used in web design,
such as HTML and CSS.

Abbreviation of megabyte - a million bytes (strictly speaking 1,024 kilobytes).Most often used to define hard disk capacity.
M A S T H E A D

Red, green, blue - the colours used by display devices (monitors, TVs, etc)
to define colour. The six-character hexadecimal codes used to define

A graphic image positioned at the top of a web page to tell the visitor what page they're on. MAILING LIST A (usually automated) system that enables people to send email to one address, whereupon their message
is copied and sent to all of the other

PHP Hypertext Preprocessor is a scripting language often used to create dynamic web pages. A MySQL database holds the necessary information: PHP takes the required
information and sets it out as a web page on demand.

colours in HTML (e.g. #102AFF) use
two characters each to describe the

colour's R, G and B components. RICH MEDIA
Media with more than text and

be played as it arrives. The user does not have to wait to download a large file before they can play it. SUBMISSION The process of submitting a new site to a search engine for Inclusion in its database, so that it appears in listings.

XHTML Extensible Hypertext Markup Language. An XML/HTML hybrid. Extensible Markup Language. A format for defining pieces of information and how they relate to
each other within a set of documents.

PINGING
A basic form of contact between a client and server It's often used to test

images, using sound, video and special effects via programs such as Flash and Shockwave, and often some interactive capability.
R O L L O V E R A feedback cue that is activated when the mouse cursor is moved over a particular element or button on a

whether a connnection is working as
it should be.

subscribers on the mail list. In this way, a group of people using different kinds of email access can participate in discussions together.

PHISHING
A form of Internet fraud, where

a dummy website is created that

An HTML structure used to organise
web content into rows and columns.

web page.

Extensible Style Language. A specification for separating style from content when creating HTML or XML web pages. Similar to the layout functionality that CSS provides.

Practical Web Design 113

Practical

Next month

Helping you build better websites

Practical Web Design, Future Publishing,
30 Monmouth Street, Bath BA1 2BW, UK Tel: +44 (0)1225 442244 Fax: +44 (0)1225 732295
EDITORIAL

• Editors Dan Oliver (So long, Dan, and best of luck!) & Alex Summersby, alex,sunnmersby@futurenet,co.ul<
• Art editor Julian Jefferson • Production editor Shaun Weston shaun.weston@futurenet.co.uk • CD editor Sam Cavender sam.cavender@futurenet,co.uk • Selected contributors Rachel Andrew,

julian.jefferson@futurenet.co.uk

John McAllister, Tom Hughes, Rob Buckley, David Foreman, Craig Grannell, Alex Haylock, Richard Hill, Karl Hodge, Paul Hoskins, Phil Hoskins, Gary Marshall, Mark Penfold, Marc Peter, Andres Rojas, Paul Wyatt • Cover photographer Kath Lane-Sims • Cover stylist Ami Penfold
ADVERTISING

• Advertising manager Rosa Smith
rosa.smith@futurenet.co,uk

• Key account manager Giles Crosthwaite-Scott giles.crosthwaitescott@futurenet.co.uk • Display sales executive Helen Grossman
helen.crossman@futurenet.co.uk

• Classified sales executive Nejia Unal nejla.unal@futurenet.co.uk
PRODUCTION & C I R C U L AT I O N

• Production controller Mark Anson

• Ad production coordinator Tiffany Nicholas tiffanynicholas@futurenet.co.uk • Software copyright coordinator Sarah Williams • Circulation product manager Richard Jefferies richard.jefferies@futurenet.co.uk
M A N A G E M E N T

mark.anson@futurenet.co.uk

sarah.williams@futurenet.co.uk

• Publisher Kelley Corten
• Senior editor Nick Merritt

• Group art editor Ian Miller
SUBSCRIPTION ENQUIRIES

• To order, renew or check your subscription details you can go to www.myfavourltemagazines.co.uk. Alternatively, call our orderline +44 (0) 870 837 4722 or for general subscription enquiries,
call +44 (0) 870 837 4773. • Copyright © 2006 Future Publishing Ltd. • All contributions are submitted and accepted on the basis of non-exclusive worldwide licence to publish or license others to do so unless otherwise agreed in advance in writing. Practical Web Design recognises all copyrights and trademarks. Where possible, we have acknowledged the copyright holder. Contart us if we haven't credited your copyright and we will always correct any oversight. Distributed by Marketforce (UK) Ltd, 5th Floor, Low Rise Building, Kings Reach Tower, Stamford Street, London SEl 9LS Tel; 020 7633 3333. Overseas distribution by Future Publishing Ltd. Tel: 01225 442244. • Future Publishing Ltd is part of Future pic. Future produces carefully targeted special-interest magazines, websites and
events for people v^ho sfiare a passion. We aim to

PLUS!
Create killer forms in Dreamweaver

Use the flexibility of CSS to create tab-style navigation
Make text resizable with inline browser widgets Add PHP tools to your site with open source scripts
... and much, much more!

satisfy that passion by creating titles offering value
for money, reliable information, smart buying advice

and which are a pleasure to read or visit. Today we

C|JK|J|*0 publish more than 150 magazines, 65 websites and a
MEDIA WITH PASSIOH growing number of events in the UK, US, France and
Italy Over 100 international editions of our

magazines are also published in 30 other countries across the world. Future pic is a public company quoted on the London Stocl( Exchange
(symbol: FUTR),

• Non-executive Chairman: Roger Parry • Chief Executive: Stevie Spring • Group Finance Director: John Bowman Tel: +44 1225 442244 www.futureplc.com

The text paper in this magazine is totally chlorine free. The paper manufacturer and Future Publishing have been independently certified in accordance with the rules of the F S C
Mtx«d Sources

Forest Stewardship Council,

(Correct at time of going to press but subjea to change)

recycle

V^an yo« hov« finistwd w»rt» this mogazine plM$* r*c/cla rt.

114 Practical Web Design

DISCOVER BETTER HOSTING"
t's about time you joined our users, and discovered better hosting from SupaNames. With hosting from under £14 + VAT per year,
Deluding a free domain and risk free 30 day money back guarantee, you'd be crazy not to give us a try.
B E T T E R VA L U E

B E T T E R F E AT U R E S

Dhoose from our selection of Linux & Windows packages starting rem under £14 per year, with a free domain & free setup.
BETTER CARE FOR YOUR SITE

Useful features like SMS email alerts, webmail and an exclusive control panel included as standard.
BETTER SUPPORT

rriple daily backups & monthly offsite backups, plus a 39,9% money back uptime guarantee with all packages.

Unlimited support from real people, anytime. You're always given the name of the person you're dealing with.

www.supanames.com

SupaNames
■ DISCOVER BETTER HOSTING"

FREE P0P3 Mailboxes & 4 Page Website
+ r

Register your domain names with

freeQarking.co.uk
and get all these benefits and more:

•FREE 4 Page Website •FREE Web Forwarding
•FREE POPS Email 'FREE Webmail

H

/

r

FREE Email Forwarding
' F R E E O n l i n e D o m a i n To o l s

Modify your domain names quickly
and easily using our suite of industry leading online domain management tools. Use our Online DNS Manager to maintain your
o w n z o n e fi l e . Yo u w i l l n e v e r n e e d

to "transfer" a domain name again. Don't let your old host hold domain
name to ransom!

Accredited Registrars
CentralNic"
Accredled Regietrar

L9LIS
,

ACCREDITED R E G I S T R A R

BIKI

Tr a n s f e r i n . u k F R E E !
Transfer your Nominet. uk domain
names to us completly FREE OF
CHARGE!
A m ^ m b ^ o f

N o m i n e t . m A
UK iNTtRNt 1 O M G A M l S AT l O M

r e g i s t r a r

freefjja rking.co.uk
Freeparking Registrars Inc. (HostingFort) DE19810, USA

Trusted by thousands of
Internet Professionals

for over seven years

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.