Practical WebProjects issue 17

eb graphics Page layout D Dynamic databases D Flash designD eCommerc PHImm I liJVacticaL .AJbhPmiOrtC complete,I wlWlw jargon-free guide to...

1.1 1 V ^iV. original and best guide to Web creation software

iP T

Windows Mac)

earn how to create a stunning site from scratchXpert advice for layout, graphics and databasesrom start to finish - learn new skills as you build!

PROFESSIONALIPS REVEALEDlulate some of the Web's best designsth our expert Dreamweaver tricks

BiiPRoata

CD? Ask your newsagent for one now!

▶ 40 pages of expert projectsCREATE A BRILLIANT SITE IN24 HOURS WITH OUR ADVICE^ Every Dreamweaver MX feature explained^ Design stylish Web graphics in Photoshop^ Learn how to create elegant page layouts^ Eight-page dynamic database masterclassy Create interactive Web pages in Flash MX ^ Set up shop with our eCommerce£599 "excite, enthuse and inform"

HE NUMBER ONE WEB CREATIVITY TOOL 7 7 1 4 7 5 8 0 0 0X

H I G H B U R YP A R A G O N

S P E C I A L O F F E R S O NHewlett Packard,

Canon, Epson,L e x m a r k e t c .

■ I t . c o mUK's bes t dea ls f rom Europe 's no .1on- l ine supp l ie r fo r Ink je t car t r idges

F R E E U K D E L I V E R Y0 8 0 0 9 1 7 4 0 7 3

What our readers say aboutPraaical Web Projects:

"Great mag. It's the best money I've spentin a long time" Saul Hudson

"Without Praaical Web Projeas I wouldnever have been able to make my firstWeb Sittf Nick Hryciw

1 love your magazine"Dorrie Rifkin

1 ▶ The Practical Web Projects promisef

Quality projectsEvery issue of WPis packed with originalprojects that show you how to get the most outof each aspect of your software. All of the filescreated in our projects are included on yourfree CD-ROM so that you can easily follow thetechniques covered.

Comprehensive helpWhether you're an expert or a newbie, PWP isdedicated to bringing you as much in-depthhelp on every aspect of Web design as we can.Each issue has a four-page heipdeslc on thefeatured topic. You can contaa the helpdesl( byemailing [email protected]

Expert adviceEvery article in Practical Web Projects is writtenby a Web design expert. We go out of our wayto find specialists who can provide you withthe advice you read. This way you know thatthe articles we publish are never less than 100percent accurate.

▶ How to contact Praaical Web Projeas

General enquiriespv/p<Sparagon.coMkOUOl 299900

Customer [email protected]

Advertising [email protected]

CO [email protected] 2002S9

[email protected]

[email protected] 8 7 0 m 8 6 S 2

Webm m sHighbury - Paragon Ltd, Paragon HouseSt Peters Road, Bournemouth, Dorset BHl 2|STe l ; ^ 1202 299900Fax: +44 (0) 1202 299955Web site: www.paragon.co.uk

CUSTOMER SERVICESIf you have a query regarding a subscription or aback issue, or would like to place an order, pleasecontact the subscription hotline on 0870 444 86S2 oremail pwp@cisub$.co.uk For all other queries,including missing covermounts, please contact ourCustomer Services Department on 01202 200200,or email [email protected]

M A G A Z I N E T E A M

Managing Editor Paul NewmanDeputy Editor lames ThorntonSub Editor Thomas WoodgateGroup Art Editor Steve GotobedDesigner Sarah Bellman

THANKS TO:

Wendy Smith, Adrian Lambert, Sarah Mowattand Rekha Voralia

Practical Web Projects Vieltome

We comeelcome to the latest instalment of Praaical Web

Projects, where we show you how to create a] complete Web site using Dreamweaver.

Through our comprehensive step-by-step guides this issue,you'll learn how to construct a great looking site complete withdazzling interactive features, dynamic database content andeven an online store - all through the magic of Dreamweaver.

This represents something of a departure from our usualformat. Instead of giving you a series of unrelated projectsbased around a Web design application, our team ofDreamweaver experts have joined forces to fashion a stunningsite for an aspiring rocl band, describing every technique usedalong the way in plain English. By following this in-depth guidewith a copy of Dreamweaver and perhaps even a cup of tea infront of you, you will be the proud owner of your ownspectacular Web site within a few hours.

Before you thrust yourself headlong into this exciting project,find out what it takes to become a successful Webmaster, as wereveal the secrets of amazing Web design on page 6. If youalready know the basics, then why not dive into our 25 KillerDreamweaver tricks feature on page 12, where we lift the lid onthe techniques used by some of the world's greatest sites. Onceyou've bolted your Web pages together, discover how toshout it from the rooftops, with our guide to promoting yoursite on page 76.

Keep us posted on your site building exploits and wemay feature you in a forthcoming issue.

lames Thornton, Deputy [email protected]

COVER DISC SUPPORTIf you have any difficulty with your free CD, please referto the disc pages for contact information

COVER DISC PRODUCTIONDigital Projects Manager Lee GroombridgeMultimedia Editor Man Budd

ADVERTISING

Advertising Manager Leylah Honeyborne01202 200223 [email protected] Sales Executive Gemma Bell01202 200254 [email protected] Sales Executive Mark Rankine01202 209362 [email protected] Co-ordlnator jo SpickCopy Controllers Lorraine Troughton, Lauren Deans

PRODUCTION & DISTRIBUTIONProduction Manager Dave OsborneBureau Manager Chris ReesScanning/Prepress Wesley NeilCirculation Manager Tim HarrisTel: +44 (0) 1202 200200Fax; +44 (0) 1202 200217

INTERNATIONAL LICENSINGPractical Web Projects is available for licensingoverseas. For details, please contact:International Manager Cathy BlackmanTel; +44 (0) 1202 200205Fax; + 44 (0) 1202 200217Email; [email protected]

DIRECTORSEditorial Director Damian ButtProduction Director lane HawkinsCirculation & Marketing Director Kevin PetleyAdvertising Director Peter CleallArt Director Mark KendrickFinance Director Steven BoydManaging Director Mark Simpson

Printed by Garnett Dickinson,Eastwood Works, Fitzwilliam Road,Rotherham S651|U

Distributed by Seymour Ltd,1st Floor, 86 Newman Street, London WIP 3LDTel 020 7396 8000

PLEASE READ OUR SMALL PRINTAll text and layout remains the copyright of Highbury- Paragon Ltd. Praaical Web Projects cannot acceptresponsibility for any unsolicited material ortransparencies. Practical Web Projects is fullyindependent and its views are not those of anycompany mentioned herein. All copyrights andtrademarks are recognised and all images are usedfor the purpose of criticism and review only. No partof this magazine may be reproduced without thewritten permission of the publisher. Practical WebProjects can accept no responsibility for inaccuraciesor complaints arising from advertisements withinthe magazine.

( 2004 Highbury • Paragon LtdPractical Web Projects. ISSN (1475-1380)

DREAMWEAVERI PRACTICAL WEB PROIECTS \ 03

-rea.co.uk

fl T «

Ifj yj-Lu ji ^ i

www.123-reg.co.ukit's never been easier or ciieaper to have your own domain name

123-reg delivers a totally automated service with the lowest prices guaranteed!This exclusive package includes:

• Web based control panel • Online domain name management system• 100 email forwarding aliases • Catch-all e-mail forwarding• Unlimited web fonwarding • Manage name servers • Affiliate scheme• Home page site wizard • Manage your own DNS • No transfer out fee• Plus much, much more!

Tliere's no better place to liost your websiteS t a r t e r P l u s S t a r t e r P r o

° " ' y \ ° " ' y £ 2 ' p 9 H ° " ' y £ S ' X•100MB of web space•1500MB data transfer (bandwidth) per month•CGI/Perl Script enabled• On-line file manager and full FTP access•15 mail boxes (POPS) 'Free WebMail• Webalizer graphical web statistics•Add FrontPage Extensions for £25 per year•Unlimited e-mail fonwarding addresses

•250MB of web space• 3000MB data transfer (bandwidth) per month•CGI/Perl Script enabled• On-line file manager and full FTP access•25 mail boxes (P0P3) 'Free WebMail•Webalizer graphical web statistics•Add FrontPage Extensions for £25 per year• Unlimited e-mail forwarding addresses

• 500MB of web space• 5000MB data transfer (bandwidth) per month•CGI/Perl Script enabled• On-line file manager and full FTP access•35 mail boxes (POPS) • Free WebMail•Webalizer graphical web statistics•Add FrontPage Extensions for £25 per year• Unlimited e-mail forwarding addresses

•Plus registrar registration fee, see website for full details."Inclusive of NIC fees, renewal price £9.99 per year.^Monthly fee. must be paid annually and excludes one-off setup fee of £9.99.All prices exclude VAT. E&OE.

D 7 ^m n mm ■ r K M I O r i B C M

H o s tE u r o p e■ PDAI tB'Gmiir

Practical Web Projects Contents

Projects(P241 Dreamweaver uncoveredIP261 Design stylish graphics[P34] Build elegant Web pages[P44I Add a dynamic databaselP58] Create interactive contentIP681 eCommerce masterclass

Expertise

[P12] Find out hov^ to build Web pages like theprofessionals by follow/ing this collection of 25 red hottips for creating slick online content in Dreamweaver

r- VlfebPri^Contents06 Secrets of amazing Web designFind out exactly what goes into a successful Web site with this in-depth guide tobecoming a proficient Webmaster

12 25 Killer Dreamweaver tricksEmulate world-class sites by checking out these hot Dreamweaver techniques

23 Projects - Build a complete siteYour route to an amazing Web site starts here, as we demonstrate how to builda complete site in Dreamweaver through a series of five step-by-step projects

54 Dreamweaver galleryDiscover just what can be achieved with a copy of Macromedia's mammoth Webeditor as we tout some of the best Dreamweaver examples online

76 Prepare for lift offMake sure everybody knows about your Web site, as we spill the beans on thebest ways to build a successful online brand

80 SubscriptionsSave a packet on the world's leading Web design magazine by taking advantageof our unbelievable new subscription deal

82 Dreamweaver FAQResident mastermind Danny McAleer eases your Web design worries

86 Book rev iewsWe cast our eye over the pick of the latest Dreamweaver tomes

94 Back issuesMissed an issue of Practical Web Projects? Find out how you can get a copy

98 Next monthTake a look at what's in store for you in the next issue of PWP

Getting started...

^ W f e b d ^ . i a n -

I I ■ - - J —

" i — ~ ■>• " r . ' - r r r : .

How did theydo that?im Discover how Dreamweaver was used to create theglitzy official site of rock gods The Darkness. We speak tothe design guru behind the site, Robert Shaw, who revealsthe secrets of creating an interactive online experience

96 What's on the CDWe've got a bumper collection of Dreamweaver resourcesto help you build a stunning Web site todayThe CompleteDreamweaver Toolkit■ Dreamweaver MX 2004 (dual 30-day demo)■ 100 royalty-free Web graphics■ 32 powerful Dreamweaver extensions■ 25 free scripts to bring your site to life

Two full programs■ Add dynamic content with 40 6.8 (worth £229)■ Create interactive Web forms and surveys using

Ouask FormArtist Presto (worth £29)

DREAMWEAVER I PRACTICAL WEB PROIECTS I 05

Feature Secrets of amazing Web design

- JTyjie

HOME I HISTORY I PRODUCTS I SERVICES I MAP I CONTACT US

m i f t i i i f'ft., tfii I

I i PSecrets of amazihelM

Secrets of .

a m a z i n g

I hIHI !5|J 'i l l l l

I I S i : . « £IPi Pi

m

D i s c o v e r h o w t o b e c o m ea superstar Webmasteras we explore what as u c c e s s f u l We b s i t e i sm a d e o f a n d r e v e a l h o wto make a lasting impacton your visitors

reaitiweaver is without doubt the best tool around for creating•' stunning Web sites, but that doesn't mean you can just pick It

up twiddle a few knobs and produce the next eBay In anafternoon. After all, you wouldn't expect to beat Carl Lewis to the end ofyour road just because you splashed out on the most expensive pair oftrainers you could find.

Building a successful Web site requires bright ideas and a solid strategy,and a Webmaster needs to think about much more than just a colourscheme for their home page, or which font to use for the site's logo. Beforeyou even so much as look at Dreamweaver, you should develop a soundstrategy for your Web site and ask yourself what you want to achieve withthe site. Once you've got a clear vision of what you want to do with yoursite, you're ready to unleash Macromedia's mighty site development toolfrom the safety of its desktop icon in order to turn your dreams into reality

Although you won't find any hard and fast rules to making a hit Website, there are a series of generally-recognised, often common senseprinciples, which you can use to shape your site. Here, we explore the keyingredients of an effective Web site, explaining what you need to considerif you want to make a big noise online.


F e a t u r e ng Web desi

Formulate a planYou would never build a new product without layingdown a few blueprints first, so you're asking fortrouble if you fail to plan your Web site properly Ifyou try to churn out your ideas on the back of acigarette packet in the pub after a couple of beers,chances are things won't work out as fantastically asyou'd imagined.

It's important to take time to formulate yourobjectives before you do anything else, and work outwhere you want the site to go. Use search engines toresearch sites that are similar to the one you wish tobuild, and then work out how you can pitch yoursdifferently Think about who you're targeting the siteat and how you can appeal to this demographicgroup. What makes them tick? How can you exploittheir interests to draw their attention?

When it comes to mapping out your site, a penciland paper are still the best implements for the job.List every element that you want to put on your site,from pictures and text, to guestbooks and interactiveanimations, helping you balance the content acrossthe site, and make it easier to design the navigation.

Then sketch out each page of your site, including arepresentation of everything you intend to include.Once you've done this draw up a flowchart outlininghow all of the pages will interlink. If you find thingsgetting a little muddled here, then it's a good idea tochange the way pages link, because your visitors willbe just as confused when they come to navigate it.

graphics, logos, databases, text, downloadable files.Flash elements and anything else you wish to use totitillate your visitors.

Graphics and designAfter deliberating over the plan for your site, you'reready to start dirtying your fingers with its visualelements. While we've already stressed the

BeUnicpe

Many modem Web designers like to show off. using flashy navigationlike on The Buzbee Group site (www.thebuzbeegroup.com) However,it's always best to keep things simple

importance of planning a site, getting the design rightalso warrants plenty of thought. A well-designed setof pages will form a good first impression with thevisitor and will encourage them to linger andrummage through all that you have to offer. A shoddylooking home page is a sure-fire way of leaving avisitor-shaped hole in your site.

"Incredibly, more than 10 percent of the Web-usingpopulation has some form of disability, and it's importantyou don't neglect such a large proportion of your potentialf a n b a s e "

During the planning stages, it's also important toprepare page layouts for future updates. Make surethat the elements on each page can be easily edited,or updated when necessary. Once a water-tight planof every page has been formulated, along with theoverall structure of the site, you're ready to gather upall of the required elements and assets, including

Mapping out your Web site r eedri't require a powerful How-chartingapplication. In fact probably the best way to plan your structure isusing the good old-fashioned pencil and paper method

When thinking about the overall layout of yourpages, you should keep in mind the four keycomponents of a site, namely: content, form, functionand purpose. Strike the right balance between theseand you're off to a winner. For instance, you couldhave the juiciest content on the Web, but if it'simpossible to find (i.e. if the function is all wrong)then it's worthless.

Many modern Web designers like to challenge theboundaries of design and push the line of creativityfurther out. They will use crazy navigationalelements, tiny text or obscure graphics in an effort toimpress. If you're looking for mass appeal, however,it's best to keep things simple. After all, a site shouldbe built for its audience, rather than as a tool for itscreator to show off.

When sketching out your designs in the earlystages, it's worth looking at various forms of designwork to draw inspiration from. Spend time looking atartwork in different places, such as Web sites,magazines, graffiti, and art galleries, and soak up asmuch of this as you can.

Expert tip

ON Shaw, NOWWASHYOURHANDS• D E S I O N C O M P A N Y

i t e

OLI SHAW, SENIOR DEVELOPER AT NOWWASHYOURHANDS(WWW.NOWWASHYOURHANDS.COM), GIVES HIS ADVICE ONDESIGNING EFFECTIVE WEB PAGE NAVIGATION

■ "There are some fundamental questions that you shouldask yourself before you even start getting content ready orcoding the page. First off, you should decide what the site isfor - is it a personal page, or is it meant to inform or provide aservice? Then work out who will be using it, assessing whatusers will want to do on the pages. Possibly the most

important thing to think about is navigation. The threequestions you should be asking from a user's perspective are;where am I, where have I been, and where am I going? Thereshould always be something telling the user where they are ina site, and it's good practice to let the user know where they'vebeen on your site, using HTML text links to form a paper trail.The navigation should also dearly show the user where theycan go next."

Sites that got it right

Name of site: eBayURL: www.ebay.co.ukIf you're looking for stickiness then eBay is positively smeared withsupcrglue. It encourages users to hang around to peruse the weirdand wonderful auction items in the world's biggest onlinemarketplace, then return time and again to check on their bids.

08 1 PRACTICAL WEB PROIECTS t DREAMWEAVER

Secrets of amazing Web design Feature

Design restrictionsWhile this is a good practice to get into for hatchingideas, it's impossible to accurately re-create most ofthese styles online, due to the nature of the medium.

For starters, you need to pay attention to the sizeof your canvas. Bear in mind that your site could beviewed in a range of different sized monitors from aPDA to a jumbo 19" TFT display. Attempting to make asite look amazing on ail browsers at all resolutions ispractically impossible. One way around the problemis to use relative screen sizes using the < TABLEWIDTH="100%"> tag, which shrinks the text to fit thepage. If in doubt, try an online browser size checkersuch as www.applythis.com/browsersizer orwww.codo .com/browsero la

Another major difference between Web design andtraditional design is that you're limited by your colourpalette. In order for the colours to display correctly on

BTOwscrSizcrI Brows«rSlz«rv1.$ Released.

I BrowserSizer is a low-fat NOT in-your-face tool to help web aeveiopers ctieckI onscrMnresolut)onsof640x480,800x600.1024x768andWebTV ItcorrtrolsirI Navigator from an un-obtnjsive, sit in your tray, appltcaoon that provides an interI the standard screen resolubons Isn't it annoying to change your developnientnI people who havent figured out ttiat tfiey can change THEIR screen resolution?

I BrowterSlzer it

• Conlrots the window size of IniemetExplorer(3,4,5,6) Netscapev1 5>

• Provides accurate sizing of browser as wouM be when viewed futkscreen• Provides optons to account for size with Microsoft Windows TaskBar an.i• Quick hide/show to/from system tray on tray icon dout)le>click.

There's nothing more annoying than a Web s e that you can't see,ensure that your pes can be read at a variety of different screenresolutions by iostalling a program sugh'as BrowserSizer

s o

a PC or Mac you must stick to the 256 Web-safecolours. Luckily, programs like Dreamweaver comewith a Color Picker, helping you ensure that anycolours you choose will be displayed accurately

When using images and graphics on your site, themost crucial thing to remember is to keep them small,because users will soon get bored of waiting for aload of hefty pictures to load. Set yourself a file sizelimit of around 100Kb for each page, which is roughlyequivalent to 10 seconds of waiting time on a 56Kmodem. Always use compressed graphics in )PEG, GIFor PNG format, and try to reuse graphics whereverpossible to cut your visitor's modem some slack. Ifyou do need to use large images, then at least warnyour visitors, by adding a link to it outlining the totalfile size.

Usability and accessibilityBy making your images small enough to load quicklyand ensuring that pages display correctly in anybrowser, you've gone some way to achievingusability For the benefit of the uninitiated, this is thepractice of designing sites that are easy to use andnavigate, and available to people with differentbrowsing techniques. Other key practices that helpensure a site is truly usable include underlining links,providing contrast between text and backgrounds andeliminating, or at least reducing, horizontal andvertical scrolling. It's also about designing sitenavigation in a way that the users will be used to, sothey can come along and browse your pages easilyAs Dr )akob Neilsen's Law of the Web User

Experience puts it: "Users spend most of their time

Expert tip

Dr Jakob Nielsen, Useit.comutablt mformitiofl t«chn«to9v

u s e i t . c o m : J a k o b N i e l s e n ' s W e b s i t e

P e r m a n e n t C o n t e n t

.1*0(5'# column on W»b usabilltv

N e w s

i j C o n fOrlando, FL, MaoJi 1-5LOTKjOn, Mwxh 24-26CopwThapen, M»rch 29-A(

$ t t u r v i v t a r u th lMs San F ranc i sco , May >7««lectlon prontt tn thau$«r'» in-bo«. Diffarcntiatlng Mslboumt, May 17-21y o o r w o t i . t t « t h . i m o f m « ld M l Q n

S i t S l o m a : M a v 2 4 )

a from 1995 to 2003

tur by •mail whan a rtiM e B G o t t . r v i t o r

USABILITY ORACLE DR JAKOB NIELSEN EXPLAINS HOWYOU RISK LOSING FRIENDS IF YOU FAIL TO MAKE YOURPAGES AS EASY TO NEGOTIATE AS POSSIBLE

■ "If your site is hard to use, users will leave. Their searchresults list nine other sites that they'll check out instead. If yoursite doesn't follow the conventions people are used to, theywill leave. Users know much less about your site than you do,so they easify get confused or lost, then bang, they leave.Descriptions that you think are obvious often make no senseto users, this will make them leave as well. Your Web site willbe nothing but lost opportunrties unless you make usabilityyour driving concern - build what users want and get out oftheir way How do you know whether a design is simpleenough for your prospective customers? Two words - usertesting. This method is extremely easy and you can run simpletests in as little as three days. Just get hold of a handful ofrepresentative customers, ask them to do representative taskswith your site, and sit back and watch."

Name of s i te : RNIBURL: www.rnib.org.ukDesigned specifically to be accessible for people with visualimpairments, the RNIB site demonsuates how to make contentavailable to all. The site is optimised for screenreaders and users canchange the browser settings to alter the font, size, style and colour.

Name of site: GoogleURL: www.googlexo.ukFor the ultimate in simple site navigation you need to look nofurther than everyone's favourite search engine. Google's interface isa testament to why keeping navigation simple makes life so mucheasier for a site's users.

Name of site: Atom FilmsURL: http://dtomfitms.shockwdve.comBursting with interactivity. Atom Films represents a prime example ofhow lots of Flash elements and multimedia content can be used tolure visitors, in the form of a simple-to-navigate, bandwidth-friendlyWeb site.

i i lII > g i DREAMWEAVER I PRACTICAL WEB PROIECTS I 09III if

y

on other sites, so that's where they form theirexpectations of how the Web works." The termaccessibility has also become something of a buzzword among Web developers, though its meaning isstill regularly misinterpreted. It's a principle thatdeserves just as much thought as usability, and is allabout ensuring that sites are open to individuals withspecial requirements, sucli' as those with impairmentsor physical disabilities. Incredibly, over 10 percent ofthe Web-using population has some form ofdisability, and it's important that you don't neglectsuch a large proportion of your potential fan base.

"Flash is the daddy when itcomes to i n te rac t i vecontent and is great forconjuring up online games,a n i m a t i o n s a n dnavigational elements"

You should always make sure that the navigationand content on your site are as clear and simple aspossible. Use Alt tags to add descriptions of all yoursite's images and avoid over-reliance on visualelements. Visually impaired surfers often use specialscreenreading software or voice browsers to accessonline content, and these will ignore anything otherthan text on a Web page. It's also best to steer clearof troublesome colour schemes such as red andgreen to make viewing as easy as possible for colourblind visitors.

Of course, there's much more to making a siteaccessible than this, and there are a number of usefulsites that deal with the subject in great detail, jakobNielsen has dedicated his professional life toeducating site developers on the ins and outs ofusability and you can read more on his theories atwww.useit.com. Other sites worth checking outinclude http://usability.gov/guidlines andwww.usableweb.com

S t i c k i n e s sSo, you've now crafted a site that's well planned,looks great and is user-friendly job done, right? Well,no actually In order to keep you're visitors comingback time and again, you need to ensure that it's gotlongevity, or as it's referred to in Web circles'stickiness'. )ust as a good arcade game needsoriginal gameplay to ensure punters keep filing coinsinto the slot, a Web site must have content thatmakes visitors want to return.

Good examples of sticky sites include eBay(www.ebay.com) and Friends Reunited(www.friendsreunited.com), which encourage repeatvisits due to the unmissable nature of their content.In both cases, the site breeds loyalty among visitorsvia a registration procedure, then engages the visitor

by encouraging them to contribute to the sitethemselves. There are plenty of ways this can beachieved from the comfort of your own home,including the addition of guestbooks, chatrooms andonline forums, which promote a community feel toyour site, and make the user feel that they're part ofsomething special.

Add interactivityThe success of broadband has meant the Net is nowappearing in more homes than ever before.Interactive content such as games, multimedia andquizzes are always a winner to keep visitors on yoursite. Portals such as Blueyonder(www.blueyonder.co.uk) and BT Yahoo!(www.btyahoo.com) are the perfect exponents of thistype of content, using addictive online games andexclusive audio and video footage to squeeze anextra few minutes of the visitors' time.

You don't need a degree in multimedia productionto bring interactivity to your pages either. Simple

puzzles and quizzes can be built using DHTML orJavaScript, which can be based on existing scriptsdownloaded from the Web. Of course. Flash is the

daddy when it comes to adding interactivity and isgreat for conjuring up games, animations andnavigational elements that'll engage your visitors andkeep them amused. You'll find more details onworking with the program to build interactivity in theproject on page 58) or by visiting sites such asFlashkit (www.flashkit.com) or the rather wonderfulFlash Zone (http;//flashzone.org).

For all the fancy extras and crafty design gimmicksyou apply to your pages, never forget that the mostcrucial aspect of a Web site is its original content.Don't forget that the Internet was originally foundedas a place where people can share information, andthe quest for knowledge and enlightenment willalways be the major motivating factor behind asurfer's decision to visit a site. As a result, if you haveno noteworthy content on your site then peoplesimply won't bother with you, and not even a fancyWeb editing package like Dreamweaver is going tochange that. ■

Expert tip

Todd Yard, ego 7

TODD YARD LEADING FLASH PROGRAMMER AT EGO 7(WWW.EGOZCOM), SPILLS THE BEANS ON THEIMPORTANCE OF ADDING INTERACTIVITY TO YOUR PAGES

■ "User interactivity is at the heart of the Web. When initiallythe Web offered only text-based sites, the inclusion ofhyperlinks within the text took it a step further than its printcounterparts. With the multitude of multimedia options nowavailable, you can offer any number of ways for a user tointeract, explore and navigate through your content. Usegraphic feedback to inforni the user of interactive elements,like rollover states of buttons. Incorporate sounds as anadditional form of feedback to keep content from becoming

graphically duttered. It also pays to add animation to point outimportant elements, or to instruct in an engaging manner. TheWeb is a new medium that is unique because of this ability tointerart with the user and present information in myriad ways,so take advantage of this and think outside of the constraintsimposed by and learned from other mediums."

P r I r A

Cardinal sins of Web design

Five major Webmaster no-no's^ Avoid menu titles that are unclear. Steer clear of

ambiguous wording and always set text against acontrasting colour background

^ Never rely solely on Flash as a form of navigation. Alwaysinclude HTML alternatives to anytfiing you present that

requires a plug-in

^ Never cram a Web page full of massive images. They maylook nice, but large download times mean that visitors

won't hang around long enough to find out

pC Don't try and over-complicate the design. You may thinkyou're being dever or ironic, but users of your site willsoon get ticked off

^ Remember to keep your sfte updated constantly Don'tassume that just because your site looks good, visitors

will want to return time and again to view exactly the

s a m e c o n t e n t

i m s s s i s t i

If used properly. Flash can transform your site into- an interactive/ wonderland. The popularity of the format means there are plenty of

online resources available including Flash Kit iwww.ffashkitcom^

10 I PRACTICAL WEB PROjECTS 1 DREAMWEAVER

World class supportthat never closesEvery Fasthosts customer enjoys full access toXtreme support - a service that's totally unique inthe UK web-hosting marketplace.This fast and responsive service has been developedwith your help and valuable feedback.And we believe it's the best in the industry.

Xtreme Support means that you benefit fromunsurpassed customer service, faster turnaround fortechnical problems and an unparalleled level ofhelp and advice.• 24 X 7,365 telephone, email & online support• Xtreme support website - with Knowledge Base,

FAQ's and more• Service level promise• Trouble ticket system for faster technical response• Your own dedicated account manager• Regular email updates about exciting new features

M i c r o s o f t -

Stt Windows Server2003

r e d h a t .

'Your Support guys/gals areexcellent I can say withoutdoubt that they are thenicest support servicesdept that I have ever feltthe need to telephone."

Mary Green, QX Solutions

Best value & easy to useweb-hosting

All inclusive web-hosting, ideal for home users, dubs, communities andsmall businesses.The Home account comes with everything you needto establish your online presence - including an online websitebuilding tool and your own domain name.

Home account at a glance> Website

Your website is hosted on our uniqueenvisage Shared Hosting Architecture.With envisage, your site is hosted bymultiple web-servers ensuring it issuper-fast and always available.envisage is a technology, developedin-house, in partnership with Microsoft.It is only available from Fasthosts andoffers the most reliable platform forwebsite hosting.

> Web BuilderOur Web Builder allows you to create anattractive and compelling website.Choose from thousands of templates anddesigns and then simply point and clickto create your site. Web Builder createsstunning websites in minutes with notechnical knowledge required!

> Mtrtrix Web StatsFull, real-time information about yoursite's visitors is provided with Matrix Stats- a leading web based traffic reportingprogram. Dozens of reports are availableallowing you to accurately track visitorsto your site.

The power behind web hosting• Multiple Internet Connections• Xtreme Support 24 x 7,355 phone and email• Online FAQs, Knowledge Base and White Papers• State of the Art UK based Data Centre• UK's best value domain names at www.ukreg.com

E m a i lYour account includes 1 GO email addresses -which can be full POPS mail accounts orforwarders. We've also included web-mail so

you can read your mail on the move plus virusscanning, SMS alerts informing you when newmessages arrive and the option of spam filtering.

[:• ControiPanelOur award winning online control panel is theindustry leading tool for managing your account.You can control everything from the web -including setting up email accounts, buildingyour website and more!

> P/us...Full access via FTP

Dialup Internet AccessMany more features....

' ^ F R E E ^INSTANT SET UP

m «PER MONTH OR

^ £49 .99 PA ^

All your hosting needs' Business packages from £14.99• Developer packages from £19.99• Unlimited Reseller package from £50• Dedicated server solutions from £89• 30 Day Money Back Guarantee

T o s p e a k t o o u r S a l e s t e a m c a l l

For more details and to launch your service within minutes, visit www.fasthosts.co.uk w w w . f a s t h o s t s . C O . a k

FIND OUT HOW THEEXPERTS DO IT ASW E R E V E A L T H ET E C H N I Q U E S U S E DT O C R E AT E S O M EOF THE GREATESTSITES ON THE WEBAs a Web designer, stumbling across a greatsite is much like walking down the high streeton a Saturday afternoon, seeing somethingyou like in a shop window and thinking 'I'vegot to have that'.

How many times have you seen a slickpiece of navigation, a sparkling Flash animationor a thriving online forum, and wished youknew how to replicate It yourself? Many of thefeats of design you marvel at on the Web canbe produced In Dreamweaver without a greatdeal of headache. By tapping Into the latestversion of Macromedia's Web editor, you canre-create the stunning design work you see oncelebrated sites like the BBC, eBay and Googlewithout the need for an Immense knowledgeof hand-coding.

Follow our guide over the next four pages todiscover all the secrets of creating fantasticWeb pages in Dreamweaver.

12 I PRACTICAL WEB PROIECTS I DREAMWEAVIR

25 Killer Dreamweaver tricks Feature

1 Update colour schemes with CSSThe BBC home page (www.bbc.co.uk) is one of the most dynamic on theWeb, and the main image and colour schemes are updated every day

This can be achieved without too much hassle through the use of Cascading StyleSheets. Styles can be accessed in Dreamweaver by clicking on the CSS palette andchoosing New CSS Style. You'll need to fill in the properties in the BackgroundColor section of the CSS Style Definition menu before saving your style sheet andattaching it to your pages using the Attach Style Sheet command.

2 Add pagination to search resultseBay's Web site (www.ebay.co.uk) demonstrates how you can can hold avisitor's attention for hours on end. The auction site makes it easy for

users to peruse the listings without having to scroll through endless lists of items.Displaying all search results on one page can cripple your application, so it'simportant to split your results into different pages. You can add pagination tosearch results by setting a page limit in the Repeat Region behaviour. AddRecordset Paging behaviours or select the Recordset Navigation object found withinthe Application Object sub-menu, which you'll find in the Insert menu.

Managing premium contentIf you want to restrict access to certain parts of your site and reserve it forprivileged members only, in the way that Friends Reunited

(www.friendsreunited.com) only lets registered members access email addresses,then you'll need to set up some form of user-authentication. One of the simplestways of doing this is to create a login page using PHP scripting. If you're unfamiliarwith the scripting language you can use an extension to ease the load. Try the PHPUser Authentication extension, available from http://dynamlc.macromedia.com.Once you've set up the login page, you can use the MySQL Admin facility to createdifferent levels of access for your users.

4 Use Alt tags for accessibilityFew sites have done as much for accessibility as the Royal NationalInstitute of the Blind, at wvvw.rnib.org.uk. As well as championing

accessible design among the Web industry, the site has some neat tricks of itsown to make it easier for partially sighted people to access the content. By addingAlt tags to an image in Dreamweaver, you can add alternative text descriptions toyour images so that blind, or partially sighted visitors using screenreading softwaredon't miss out on the site's content. To add an Alt tag, select the image, chooseModify from the main menu and pick Selection Properties or hit 'Ctrl+Shift+)'. Thensimply type an appropriate description into the Alt tag box.

I^^DESESEfll K l

RNIB Help ing you l ive wi th t ight lo :

r u n d r j i i i r i Q

E o n t i

M l

i miniit* erf Mashtng «y«r>«ngl* d»« h* le» W)rKl wv j p»r tn l l» i :h i ldr«r> achMv* th* i r

tru* poMnOAl.

Gol|

p i e a M M i e c t ^ :3S11

V l fl e n C o n n a c t i o n

T « L « t h « o u t o f R l C ^ t: ( h o e i a i n g . e u Y c a r d i b o o k , « t t h « « * m t: w o t h * r g r « « t g i f t t c m l m * . t h # « » m « o n c * .

L > h u r « I n f f l c i j i

tor ri«opt*runnir>4 activiti** for blind*nd par t i i l yg r o u p * .

, f p s i 6 r « « a -: MJ

I 8«n>*» ( tory; hM * condthl• S t j r o j r d t ' * . I t

: pict.td gt '

DREAMWEAVER I PRACTICAL WEB PROjECTS 113

Feature 25 Killer Dreamweaver tricks

fi|mQg a hy

5 Get loadedEnsure that your site makes a grand entrancewith an animated text preloader, such as the

one used on the Worlcing Title Films site(www.workingtitlefilms.com). This can be achievedwith minimal knowledge of Flash MX, and there areplenty of tutorials on building preloaders at Flash Kit(www.flashkit.com). You can also build impressivetext fades and animations using Flash animationprograms like SWiSFI (www.swishzone.com) andCoffeeCup Firestarter (www.coffeecup.com).

6 Roll with itThe band may not be everyone's cup of teabut few could fault the stunning rollover

effects within Busted's (www.busted.com) navigationbars. Creating interactive rollovers in Dreamweaver isfairly easy, even if you're not familiar with lavaScript.Click on the Insert Rollover Image button under theCommon tab within the Insert panel. This will open adialog box that allows you to select a different imageto appear when a user rolls over the button. Click onthe Browse button and select the image.

7 Work with templatesYou can save time when designing your siteby using templates. This is especially useful if

you have to create lots of pages with the sameelements, like Amazon (www.amazon.co.uk).Templates also make it quicker to make changes tothe elements on your page, as you only make thechanges once to apply to the whole site. Aftercreating a template file in Dreamweaver, you canaccess it at any time by clicking on the Templates iconwithin the Assets panel.

D r e a m w e a v e r F o f u m s

~ 3 A

S « « r d l C « U « « r v ; ( < 0 ^ 1 0 1 1

E L

8 Add a forumEncourage users to return to your site byintroducing an online forum, like those at

Macromedia (http;//webforums.macromedia.com). Itneedn't be a tricky experience, because there areseveral Dreamweaver extensions that can help. Thewizard-based phpBB forum software will help youbuild messageboards using a database, which youcan include on your site to create an interactiveonline experience. You can download the opensource software free at www.phpbb.com

Exit pop-up windowExit pop-ups are great devices for temptingusers back to your site. By using JavaScript

behaviours you can call a pop-up window as soonas a visitor vacates your pages or closes their Webbrowser - a trick employed by Cricinfo(www.cricinfo.com). Create a pop-up by clicking theBehaviors tab in the Design panel, and choose OpenBrowser Window from the Actions list. SelectOnUnload from the Events list then create the pop-upwindow by editing the lavaScript in the Code view.

Support I M4(0SX

C i v i l B r a n d

T r » l H r - 1 : 3 0

^ Embed video footageVideo footage is a great way ofushering visitors into your site, just as

Apple has done with its QuickTime trailers section atwww.apple.com. Dreamweaver makes it easy toembed QuickTime content. Create a blank page, orleave space on a page, position the cursor where youwish to embed the file and choose Media, then

Plugin from the Insert menu before browsing to thefile you insert. Change the size in the PropertiesInspector and then click Play to test the movie.

^ ^ Add tool tipsA good way of improving the usability of a site is to create tool tips that display relevantinformation about text fields, within a form or a set of links. This effect can be found in action at

the blogging site NS Log (www.nslog.com). Your tool tips should sit inside a layer, which you should draw near toyour page link by choosing Insert, then Layer. Next, insert a tool tip graphic, or type directly into the layer and setthe layer's background visibility to Hidden using the Properties Inspector's Vis menu. Finally, assign behaviours foreach text field or link by clicking Window, Behaviors and then highlighting Show/Hide Layers. Choose your layerand click the Show button before clicking the event arrow and selecting onFocus. Repeat the process but clickHide and onBlur to close the tool tip when the cursor is moved away


a N E W | i K ' n . , | ; ' , f t i r G U E S T B O O K I

BI0GRwi7|l CONTACT us [| PfiESS j

^ You've been framedA Web site with frames is good for^ HhIb splitting up content on a site anddisplaying multiple pages within one window, whichyou'll see in action on the Darkness site(www.thedarknessrock.com). HTML doesn't link thepages that make up a frameset, meaning you can beleft with orphaned pages. Using the FrameStufferextension from http;//dynamjc.niacramedia.com,you can enable orphaned pages to detect theabsence of their parent frame and correct themselves.

^ ^ Accept credit cardsNow that digital assets such as songs,movies and software have become

extremely valuable, more businesses are turning tothe Web to sell digital downloads. This isn't too trickyas you can use PayPal's PayLoadz service, whichallows you to offer downloadable goods securely viaa credit card. The service has been used to sell MP3

singles on Madonna's site (vwvw.madonna.com), andis free provided you are under a monthly limit. Findout how to use PayLoadz at www.payloadz.com

^ JL Trace imagesEye-catching pages such as MotownRecords (www.motown.com) can be

created in Dreamweaver using its Tracing Imagefeature. Design your entire page in an image editorsuch as Photoshop and then save the design as animage, which represents your Web page. You can nowbreak It into smaller downloadable elements usingthe Tracing Image tool. This places the image behindyour page to use as a guide for drawing layers andtable cells in order to construct the Web page.

^ P Switch to ContributeIf you have a site with content thatneeds updating regularly by a team of

technophobes, Macromedia Contribute 2 could be foryou. The application allows users to create, updateand publish content to any HTML site without anytechnical background. The package is optimised for usewith Dreamweaver and supports templates for completecontrol over page updates. IT firm DevElements(www.develements.com) uses Contribute to allownon-technical users to perform regular site updates.

^ Design with layers■ f Layers in Dreamweaver remove the' need for messy tables and give you

pinpoint control over the layout, as you'll see at theofficial Star Wars Web site (www.starwars.com).While it's easy to draw your layers by hand using theDraw Layer button, a far more precise way is to insertlayers with CSS styles. Use the Style Definition dialogbox in the CSS Styles panel for placement and youcan position the layers so they appear in exactly thesame place on every page.

^ Create a slide showK A slide show, such as the one used onthe portfolio site for HW Photography

(www.hwphotography.com), provides a way ofparading images to your visitors. Insert an image intoa layer, and then select the Add Object to Timelineoption from the Timeline menu to create a DHTMLslide show. Insert a series of keyframes by choosingAdd Keyframe from the Timeline menu, every 10frames or so. Position the playhead over eachkeyframe and highlight the graphic for the slide show.

M Image mapsMultimap (www.multimap.com) has developed a reputation as one of the best online routefinders. The slick image map on the front page makes it easy for users to get the directions they

require by clicking on the appropriate area of Britain. From here visitors can narrow down their search by enteringthe relevant information, such as the street name or postcode. Once these results have been filtered, users canzoom in and out of the street map to get precise directions. Similar image maps can be constructed inDreamweaver by drawing a hotspot over a map using the Image Map tools in the corner of the PropertiesInspector. To add a link to the selected area, click on the Folder icon next to the Link text box and insert the HTMLfile you wish to link to.

DREAMWEAVER I PRACTICAL WEBPROjECTS I 15


4 Optimise Web graphicsIf your site is stuffed with images, youneed to ensure they're quicl^ to load.

Picture-heavy sites like Teamtalk(www.teamtalk.com) use image compressiontechniques to keep the file size to a minimum. TheOptimize Image in Fireworks command allows you tostreamline your graphics through the image editor'sExport module. It compresses the images to GIFs orIPEGs, and allows you to alter a picture's dimensions,by a percentage or by pixel, using the File menu.

Old School

Ctt'-toorvv i o t e r K S

-fhe

Flasil player controlsH H it's a good idea to give your visitors

wIm control over the playback of Flashmovies, as you'll see on Shockwave's AtomFilms site(www.atomfilms.com). Rather than using ActionScriptto apply playback controls within the movie file itself,you can use an extension called the JavaScriptIntegration Kit for Flash to assign controls viaDreamweaver. The utility, which can be downloadedfrom www.macrQmedia.com/exchange, contains aset of commands for adding controls to your movie.

Streaming audioif you intend to make audio files

mtM HHI available on your site, it's always bestto offer this in a streaming format to avoid lengthilydownloads. The BBC has mastered streaming mediathrough BBC News Online (www.news.bbc.co.uk)which you can replicate by inserting a RealAudiostreaming audio file. Select the image or link that youwant, then enter the path to the RealAudio metafile inthe Link text box. The metafile must have a valid .ramor .rpm extension.

Library itemsDreamweaver's Library Items feature isone of the most underrated tools in

the entire program, yet it can be one of the mostimportant ways to ensure consistency across yourWeb site. Select the Library symbol from the Assetspanel to .insert repeating items such as a navigationbar, a company logo, or a copyright notice into everypage you create. This is a great timesaving habit toget into, especially if you've got a series of pages asimmense as the Yahoo! site (www.yahoo.com).

Pop-under windowsPop-under windows, like those usedon soccer site Football 365

(www.football365.com), are a less Intrusive way ofdisplaying promotional content, with the newwindow launching behind the active one. To createone, open the pop-up launcher and click the<body> tag in the Tag Inspector. Click on the '+' signbutton in the Behaviors panel and select CallJavaScript, before entering: window.focusO to changefocus and move the pop-up behind the main window.

M Random image groupsSites such as ITV's (wwvw.itv.com)make i t t he i r bus iness to ensu re the

home page looks different every day If you don'thave the resources to update the pages manually itdoesn't mean your site can't look fresh on a dailybasis. The Random Images Extension, available fromwww.macromedia.com/exchange, allows you to adda pool of images to your site's home page, which canthen be displayed randomly or refreshed on a dailybasis for a fresh new look every day

0^ ^ Do you want source with that?Make friends and influence people by ensuring your site's source is openly available, especially ifyou've created something to be proud of in Dreamweaver. To create a link to open your source

code from your home page, you must first insert an image, or place text on your page. Then insert view-source:http:www.yoursite.com into the Link text field of the Properties palette. Now, whenever a guest clicks thelink, the View Source window of the opening page of your site will appear. It's also a good idea to check out thecode used by your rival sites to ensure that you're not missing a trick. There's nothing wrong with 'borrowing'snippets of code from other sites, especially as you're offering them the chance to see how your pages werefashioned by making your source code openly available. ■

Dependable Hostingfo r Un l im i t ed Webs i t es .

Scripting & Applications.Full support for ASP, ASP.NET, Perl, PHP,FrontPage and CGI at no extra charge meetsthe needs of the most demanding developer.

D a t a b a s e s .

Set-up and manage mySOL, Microsoft SOLServer & Access databases for use with yourw e b s i t e s .

E m a i l .Create unlimited mailboxes, forwarders andauto responders. Web browser based andPOP3/SMTP access for all your mailboxes.E x c l u s i v e C o n t r o l P a n e l .Our exclusive web based control panel putsyou in real time control of every aspect of yourhosting account.

E - C o m m e r c e .i28bit SSL & PGP encryption for securee - c o m m e r c e e n a b l e d w e b s i t e s .

C o n t r o l P a n e l F o r Yo u r C l i e n t s .Control panels for your customers at no extracharge. Your clients manage their account andseek technical support via their own web basedcontrol panel reducing your administrationo v e r h e a d s . Yo u h a v e t o t a l c o n t r o l o v e r t h eformat of your client's control panels forcomplete integration with your brand.

Host as many websites as you wish on your choice ofUNIX/Linux or Windows 2003 web servers. Quickly

set-up new sites and manage existing ones usingour industry leading control panel.

Define hosting plans for your 'c u s t o m e r s a n d c u s t o m i s e

their control panels withyour brand enabling youto offer high end,profitable hostingsolutions to your clients.

Graphical stats.View graphicalusage statistics foryour web sites, see howmany people are visitingyour sites, where they comefrom, what search keywordsthey use to find you and more.

P e r s o n a l S e r v e r N a m e s .S e r v e r h o s t n a m e s a n d n a m e s e r v e r s

personalised with your company domainpresent a professional image to yourc u s t o m e r s .

Exceptional Customer Support.We are committed to providing the best serviceand technical support for our customers.Our devoted team will solve your problems andtend to your needs by telephone and email forno extra charge.

Integrated Domain Management.Comprehensive domain name registration,renewal and management facilities areintegrated into your hosting control panel.Preferential pricing on domain names iso f f e r e d t o r e s e l l e r s .

Money Back Guarantee.We're so confident we will surpass yourexpectations that if you are unsatisfied youcan cancel your account and claim a fullr e f u n d .

1

V SIGN UP NOWSPECIAL OFFER!

Sign up NOW and enjoy / daysfree service.Simply enter the special code - PWS- at

w w w. d o n h o s t . c o . u kor call 084s 2265906

I N S T A N T 5 E T U PLogin ^nd start using the account straight

away whether you sign up online or over the telephone.

From £39.99 per month or£399-99 per year

No minimum contract,no set-up fee.

terminate at any time.

"Donhost was recommended to us here at Modelsport UK,and now provides all our internet services. I have beenextremely pleased with their level of service, and havealways found Donhost to be approachable, friendly andefficient. Contrary to our previous ISP experiences, anyproblems have always been dealt with speedily and withminimum fuss or disruption of service. Information iseasily accessed, and charges are very fairly andtransparently applied. I can thoroughly recommendDonhost to anyone looking for a truly professionaland competitive ISP."

Howard Cliff- Modelsport UKhttp://www. modelsport.co. uk

Call: 0845 226 5906 Or visit: www.donhost.co.uk

M i c r o s o f t .

. r i H t 'OCiscq"hj

d o n h o s t .power in your hands

Feature How did they do that?

How they built...

J

NOT CONTENT WITH RESURRECTING GLAM ROCK,S P A N D E X - C L A D R O C K E R S T H E D A R K N E S S A R E N O WMAKING A BIG NOISE ONLINE. WE SPEAK TO ROBERT SHAW,THE BRAINS BEHIND THE OFFICIAL SITE, WHO REVEALSHOW DREAMWEAVER WAS USED TO BRING IT TO L IFE

• ' I ^. - I t , \

ust when you thought squeaky-clean manufactured popacts had conquered the music industry, along come a bunch

IHH of grown men in tight-fitting cat suits wielding loud guitarsto ruffle a few feathers.

The Darkness burst onto the scene last year with a series of scream-along hits including 'Get Your Hands Off My Woman', 'I Believe In AThing Called Love' and 'Growing On Me', and won critical acclaim for itsmillion-selling debut album Permission to Land.

Not content with dragging rock and roll to the forefront of popularculture once more, the band has also transferred its manic energy tothe Internet in the shape of The Darkness' official site atwww.thedarknessrocks.com. The site allows fans to find out the latestnews about their shaggy-haired heroes, purchase the latest releasesand watch music videos online. It has been revered by the Netindustry, and was nominated in the Artist of the Year category at therecent BT Interactive Music Awards 2003.

The site was conceived by the band's front man, Justin Hawkins,who ran it on his own for two years until the pressures of rocksuperstardom took hold. He was forced to hand the reins over to Webdesign agency, Hungoverdrawn (www.hungovettlrawn.co.uk), in theearly part of 2002, which was when the site really took off.

"I can't say how much work Justin put into it, but when I initiallytook over I ran the site pretty much in my free time - perhaps aworking day a week," says Robert Shaw, founder-owner of Web designcompany Hungoverdrawn.

"Needless to say, given the phenomenal success the band hasachieved in the past 12 months it has now become a full time job,"Shaw continues.

Since he took over the site has undergone two complete re-skins,motivated by the need to make it more feature-rich while stillmaintaining a strong degree of usability

He says: "I feel that the site has a fairly irreverent tone which reflectsthe way that the band - while they're deadly serious about the musicthey make - don't take themselves too seriously

"I also hope that the site's look strikes the rightbalance between good looks and usability I, for one,am heartily sick of sites that over-use Flash, or haveno perceptible navigation."

D r e a m o nThe look that Shaw refers to has been achieved byslaving over a copy of Dreamweaver for the last fewyears. Ironically, the London-based designer used todespise WYSIWYG programs, and stuck do^edly totext editors to create pages using HTML.

He says: "Whenever I did use Dreamweaver I reallyresented the way it would re-write my code andsecond-guess everything I did, so I'd always end upgoing back to using a notepad.

( I " B i i S .

The popularity of The Darkness' site soared after their debut albumsold millions of copies and went to number one in the charts

"But by the time version four came around Ifigured the advantages in terms of ease-of-use andspeed outweighed the disadvantages and I've neverreally looked back" Since the band exploded intopublic consciousness with its leslWa^ appearances

18 I PRACTICAL WEB PRO|ECTS I DREAMWEAVER

How did they do that? Feature

The online shop gives fans of The Darl ness the opportunity topurchase -many official items, including their veiy own thong!

and number one album last summer, traffic on thesite has soared, peaking at 12 million hits duringOctober. The most popular sections of the site are theLive page, which features details of the band's latestshows; the Discography section, documenting its

"The mus ic indus t ry hasthe Internet and i t 's onlyapp rec i a t e t he po ten t i a lrecorded output; and the News page, which keepsvisitors in touch with the group's latest antics. Much ofthis content is updated on a daily basis and Shawbelieves this is where Dreamweaver really comes intoits own.

"The Site view that the program opens with isabsolutely essential for a site the size and scope ofthis one.

"It gives me a degree of organisation that commonFTP tools can't hope to match. Also, the code anddesign view of the pages, I feel, strikes the perfectbalance between a hands-on WYSIWYG text editorand the more GUI-based approach," he explains.

C o m m u n i t y s e r v i c eOne of the goals Robert and )ustin tried to achievewith the Darkness site was to develop a strong senseof community among the groups fanbase, and thesite's Guestbook section has been a roaring success,attracting more than B,000 regular users and providinga place where fans can hang out together and gossipabout the band.

Shaw points out: "The forum has gone through aseries of changes, from a basic guestbook systemfrom Alxnet (www.alxnet.com), to a hand-coded CGI-based board, to the current version which hasmultiple boards and threaded discussions.

"It came about after a fan of the band who worksfor a Web site tools company called PoppyDog(www.poppydog.com) suggested I use their system -and I liked it. We now have a thriving onlinecommunity of registered users, with an amazingdegree of message turnover."

Another popular area of the site is the online shop,which allows fans to snap up all manner of band-related merchandise, ranging from CDs and DVDs to aDarkness thong. The shop is run by RecordStore(www.recordstore.co.uk), which was chosen as it'sthe only company registered with The Official UK

Charts Company, so sales made online count towardsthe top 40. The firm also runs similar e-stores for thelikes of Feeder, Oasis and Robbie Williams. As Shaw

points out: "It's basically a flexible eCommercesolution which RecordStore customises to match therest of our site."

Deve lop ing t l i e s i teOne of the next chapters in the development of theDarkness site is a project code-named 'online streetteams'. It is being pioneered by the site'sPR/technology partners at Hyperlaunch(www.hyperlaunch.com) and will enable Darknesssuper-fans to take part in a series of Web-basedtasks in order to earn rewards, usually by promotingthe band in some way

This initiative is part of an overall plan to make thesite more interactive, and Shaw is keen to bring thefans closer to The Darkness.

been runn ing scared o frecent ly begun to

that it offers" Roben Shaw, sue designer"We'll shortly be creating the band's official fan

club and the site will profit from this. More bands arefinding that it's expensive to follow the traditionalroute of print and post, so we will be looking at whatwe can offer the fans through the evolving onlinemedium," he explains.

Plans are afoot to make the site more accessibleand ramp up the number of features, adding bettervalue for visitors. "We're also looking at making thesite more content-rich with paid-for downloads of live

Darkness die-hards can follow their band across the country with thegig listings contained within the site

recordings. For too long the music industry has beenrunning scared of the Internet and it's only recentlybegun to appreciate the potential that it offers," Shawconfidently explains.

This will be music to the ears of The Darkness'

army of fans, because keeping the Web site up-to-date and fresh ensures the band can continue tomake its presence felt even when it disappears intothe studio to pen its hotly-anticipated follow-upalbum to Permission to Land later this year.

The creator of the official Darknesssite reveals his advice forachieving online superstardomM a k e i t u s a b l e"I always attempt to make my sites easy on the eye, but aiso

easy to use - not as easy as it sounds."

P r o m o t e c o m m u n i t y s p i r i t"Tlie importance of the community element cannot beunderstated, and stiddness is crucial. Anything that keepspeople coming back to your site is a good thing."

S t a y u p - t o - d a t e"Regular updates are also hugely important. A goodWebmaster has to keep their site fresh."

P r a c t i c e m a k e s p e r f e c t"There's no right or wrong way to go about building a Website, whether it's for the nation's leading purveyors of rockularentertainment, or something alt(^ether more mundane. I'veleamed a lot of things by trial and error and in truth there's nosubstitute for experience."

The Darknesswww.thedarknessrocks.coni

■ Who designed tt?Hungoverdrawn (www.hungoverdrawn.com}

■ Number of people involved?Two - justin Hawkins (lead singer/guitarist of TheDarkness) and Robert Shaw (founder-owner ofHungoverdrawn)

■ S o f t w a r e u s e d ?

Dreamweaver MX used for the site, Photoshop 7 for the

graphics and PoppyDog for the forum

■ When was the s i te f i rs t launched?

Web design company Hungoverdrawn was drafted in to maintain thesite when lead singer lustin Hawkins could no longer run it

Number of re-designs since then?T h r e e

Number of v is i tors?

8 million hits per month (around 150,000 unique users)

DREAMWEAVER I PRACTICAL WEB PROjCCTS 119

1 - ^ 5

y

un ique customers - un ique i ios t ing

Domain Name Registration less than £4.50,Your own .co.uk, .me.uk, .org.uk - £8.95 for 2 yearsYour own .com, .net, .org, .info, .biz - £8.95 for 1 year

At Hostway we understand that every hosting customer has unique demands. But there are some thingsyou all agree on.

You want rock solid systems reliability so you can be confident your website is up first time, every time someonevisits. You want the highest quality support and customer service so whenever you need help or have a problem,there's someone with a solution on the other end of the line when you call. You also want innovative, easy-to-useadministration tools because your time is better spent creatively, or on managing your business. That's not allthough. You want support for the latest technologies, and the flexibility that will allow you to build your website andsustain it as it grows, with minimum hassle. And you want all of this at a competitive price.

To much to ask for? No, we don't think so either.

U n i v e r s a l F e a t u r e s | M — 1 ^ — — — —- No set-up fees and a 30-day money back guarantee- Professional support 24/7/365- 99.9% network uptime reliability

fi s y s t e m

- A S P 3 , M i c r o s o f t ® . N E T P H P 4 , X M L I • "- ColdFusion MX- MS Access, MS SQL2000, MySQL Featuring the Hostway SiteBuilder

Create your own customised web site in minutesA d d i t i o n a l O p t i o n s u s i n g t h e l a t e s t i n a u t o m a t e d w e b p a g e c r e a t i o n- NEW! Hostway Site Builder technology. Chose from a wide selection of page-UrchinAdvancedwebsiteanalytics- R e a l / W i n d o w s M e d i a S e r v e r w w w . h o s t w a y . c o . u k / s i t e b u i i d e r /- D e d i c a t e d S S L ^

P a r k & I V I a i l f r o m £ 2 9 . 9 5 p .Our Email-only plans feature a full P0P3/SMTP service,business holding page, domain forwarding and web-basedaccess wherever you are.

Windows® or Linux Shared Hosting

Silver Plan Hosting from £7.95 pcm100Mb web space, 1Gb Traffi c, 5 P0P3 email

Gold Plan Web Hosting £14.95 pcm200Mb web space, 4Gb Traffi c, 10 P0P3 email

NEW! ColdFusion MX Gold Plan £19.95 pcm200Mb web space, 4Gb Traffi c, 10 P0P3 email

Platinum Plan Business Hosting £49.95 pcm500Mb web space, 10Gb Traffi c, 50 P0P3 email

Hostway Dedicated Servers from £149,Managed or Unmanaged, our cost-effective range ofWindows® and Linux dedicated servers are built to satisfythe most exacfing of demands. Exceptional performance,scalability. And value for money, using premium Intelhardware, from Celeron to Xeon.Visit www.hostway.co.uk/dedlcated/ for further details.

H O S T W A Vcall us now on 0808 180 1880 • [email protected] • www.hostway.co.uk IVe h o'rf.; g c o» p *' vdomain registration • web hosting • resellers • e-commerce • dedicated servers j chicago • london • amsterdam • seoul • Sydney • Vancouver • tampa

( o k y o f s t U D I O M X2 0 0 4

Plus! Runner-upprizes of thelatest version ofDreamweaver

So you want to be a superstar Web designer? In that case, you're going to need some good ideas, abit of imagination and a top class Web-building tool. Unfortunately, we cant help you with the firsttwo ingredients, but we can do you a favour by offering you the chance to get hold of the best sitecreation program on the planet.

Studio MX 2004 contains everything you need to fashion brilliant Web sites. Not only does the suitecontain the brand new version of Dreamweaver, helping you to build stylish Web pages, but you alsoget Macromedia's complete range of site development tools. You can conjure up lively interactive gamesand animations in Flash MX 2004, bring your site's graphics to life in Fireworks MX 2004, and unleashyour creativity through the new version of Freehand MX. The Windows version of the suite alsoincludes ColdFusion MX 6.1, allowing you to improve your site's functionality by creating dynamic Web-based applications.

To be in with a chance of winning a copy of the new version of Studio MX, drop us a line with youranswer to the question below. If your name's not first out of the hat, then fear not as we've also gottwo copies of Dreamweaver MX 2004 to give away to two lucky runners-up.

Employees of Highbury ~ Paragon Ltd, Macromedia,their agents, wholesalers and relatives may notenter. Participants must be over 18 years of age andresident in the UK. The Editor's decision is final andno correspondence will be entered into. Proof ofpostage cannot be accepted as proof of receipt, andno responsibility can be accepted for lost, delayed ordamaged entries.

How many applications make upthe Windows version of Studio MX?

A TwoB ThreeC Five

After sussing out the answer to our teaser, email us at [email protected] with the subject header'Dreamweaver Competition'. Alternatively, post your entry to: Dreamweaver Competition, Practical WebProjects, Highbury - Paragon Ltd, Paragon Flouse, St Peter's Road, Bournemouth, Dorset, BHl 2|S, UK.Make sure you include your full name, address and a daytime phone number, so we can contact youwith the good news. The closing date for the competition is 19 February 2004.

DREAMWEAVER I PRACTICAL WEBPROIECTS I 21

"They laughed when I said I waswaiting for Broadband to be less

than £10 a month before I bought it.But guess who's laughing now?!"

Its finally here! Broadband prices that are affordable. We've been working hard to lowerthe prices of Broadband to help you jump onto the Broadband bandwagon without riskingpaying too much. We've worked hard for the last 3 years perfecting our services, makingthem cheaper, faster and helping our customers every step of the way. You can now getBroadband for less than the cost of dial-up and you can upgrade to faster Broadbandpackages at the click of a button! Make sure you visit our web site for the latest offers!

B r o a d b a n d 1 5 0Up to 3 times faster than a standard dial-up connection.Our cheapest Broadband ever! £9.95 for the first 3 monthsthen £15.95 after that. Suitable for 24/7 access, surfing,chat, emailing and downloads. You can upgrade yourpackage anytime after signing up!

p e rm o n t h

B r o a d b a n d 2 5 6Up to 5 times faster than a standard dial-upconnection. Great for online gaming, sending largeemails and downloading files faster.

B r o a d b a n d 5 0 0Up to 10 times faster than a standard dial-upconnection. This is the most popular package - 80% ofour Broadband customers sign-up to this package.

£

£B r o a d b a n d 1 0 0 0Up to 20 times faster than a standard dial-up ^connection. Twice the speed of your standard Broadband J*connection, yet cheaper than some ISP's 512k package!

1 71 92 9

9 5p e rm o n t h

9 5p e rm o n t h

9 5p e rm o n t h

B r o a d b a n d 2 0 0 0Up to 40 times faster than a standard dial-upconnection. This is strictly for the geeks! When you'vegot a 2mb Broadband line you know you're the man!

V i s i t w w w. G i o l n t e r n e t . c o mor Call 0870 922 4000 Now! i

Broadband availability subject to location. Terms and conditions apply

£ 3 9 "m o n t h

Dreamweaver project

Build a complete Web siteCreate a stunning site from scratch by following our comprehensivestep-by-step Dreamweaver projects

Discover how to produce this amazing Web site...

W e l c o m e t o C i r c a O n l i n e , t h e v i r t u a l h o m e o f o n e o f t h eSouth's most promising up-and-coming music acts.

Circa are a four piece alternative rock band based inBournemouth, Dorset. Here you can find out more about theband, discover where you can catch them next and purchaset h e i r r e c o r d s o n l i n e .

DREAMWEAVER INTERFACE

■y EXPLAINEDBefore getting started, take a tour of themighty features within Dreamweaver MX 2004. Weget under the bonnet of the program's interface,helping you find your way around its wealth oftools, palettes and panels.

mpm PART ONE: DESIGN STYLISHMm WEB GRAPHICS

We kick off our mighty guide bydemonstrating how to design the graphic elementsthat will form the basis of your site. Here you'lldiscover how Photoshop can be used to bring yourWeb graphics to life.

PART TWO: BUILD ELEGANTMM PAGE LAYOUTS

Once you've nailed the site's graphics, we'llshow you how to sew your pages togetherseamlessly in Dreamweaver. Chris Schmidt revealshow templates can be used to build amazing Webpages without putting your back out.

PART THREE: ADDING ADATABASEAfter designing your Web site, it's time to

add some dynamic content. Scripting guru RachelAndrew explains how to add a database to yourWeb site in order to manage content dynamically

PART FOUR: CREATEINTERACTIVE ELEMENTSEncouraging visitors to stick around is

never easy but with Flash you've got a chance. Findout how to wow the crowds with a dazzling Intropage, animation and an interactive platform game.

Check out the finished Web site at www.paragon.co.uk/pwpsite

PART FIVE: MAKE MONEYFROM YOUR SITEWe finish up by showing you how to set

up eCommerce facilities on your site. Aftercompleting the project you'll be the proud owner ofa site which you can parade to the whole world.


Photoshop project Get to grips with the latest version of Dreamweaver

Get to grips withtlie latest versionof DreamweaverDiscover how the powerful features of Dreamweaver MX 2004can help you fulfil all of your Web design dreams

treamweaver is the best way to craft elegantJ Web pages. Its popularity stems from thefact that it allows users to create

scintillating sites, whether they are experienced Webdesigners, or newcomers to the scene.

On the one hand, you'll find a wide selection ofdetailed options designed to allow high-end designersto get the most out of their site developmentexperience. On the other you'll find that the novicedesigner can understand Dreamweaver, and it isintuitive enough for anyone to pick up and create sitesin next to no t ime.

It allows you to switch seamlessly between Designand Code view, meaning you can tinker with the HTMLonce you've finished laying out the pages using thegraphical user interface. You'll find all the main toolsyou need close at hand at the front of the interface,plus many more hidden within the program's hugemenu system. The visual design environment iscompletely customisable, meaning you can set up thetoolbars and panels to suit the way you like to work.

Before we demonstrate how to put the program towork, take time to get acquainted with the intuitiveinterface in Dreamweaver MX 2004.

Properties Inspector

1 When you dick on an image in the Design view, you'llbe presented with a small thumbnail in the Properties Inspector

2 The image name allows you to keep track of where everything ison your page

3 It's imperative to keep your images small when designing Webpages and Dreamweaver provides this information here

4 The physical attributes of your image are shown here in widthand height format, measured in pixels

5 You can check the location of your image in the site folder, which islocated here

6 If the image in question is being used as a link, you can enter theURL here

7 This icon allows you to change images on a page by pointingto a different file in the site folder

8 Browse your hard drive for a file to either link to, or to be includedon the page

9 Essential for achieving accessible sites, the Alt tag lets you attachtextual information to an image

10 Click on the Fireworks logo to optimise your image in theapplication, or make changes with the new image editing tools

11 If you're using image maps on your page, the currently selectedone will appear here

12 Create rectangular hotspots to divide the page into clickable areas13 Generate oval hotspots using this button14 More precise image slices can be achieved by drawing polygonal

hotspots with this handy tool15 The area of the page that the hotspot covers is represented here

in the standard width and height format16 All hotspots must link to a particular destination, and this section

allows you to define how the link will open17 You can define the link itself by entering it here18 Give your Image slice a border using this setting19 Define the vertical alignment of the image In its housing space

using the drop-down menu contained here20 Align the image horizontally with the help of the justification

tools found here

wjio^..._i

j ▼ Properties j 3 j

P Image, 2K■mMap _ J V Space [s

SrJphics/cdgif_ g J1album cover

Link [Lir"Targe t

E d i t i s f ' o r AB o r d e r ®

1 4! Low Src

&(J o ''9n Default!-

C o d e v i e wCheck out the code behind

your site \Mth the help ofthis window. You can alsoenter your own code, anduse the Dreamweaver asan HTML ed i tor

Main menuM of the ma in funa ions o fthe program are tuckedaway inside this all-encompassing menusystem, much tike you seein other design apps

O Macrome dia Dreamweaver MX 2004 [circa (FINAL_SITE/|File Edit Vie y Insert Modify Text Commands Site Wwviow Hel|▼ Insert Common Layout | Forms 1 Text HTML Application

B ' P

page.htm

i^Code 5plit I Design Title; circa< t 1

< t i ¥ i d t h = " l S " S n b s p ; < / t d ><tc i col3pan="2"><a href="#" onI IouseOut»"HH_si i

I Image (' contactlgraphics/nav/oontact^^^J< t c l c o l s p a n = " 3 " & n b s p ; < / r >

< / t r >

|</table>I</body>

\ ▼ Properties

F o r m a t N o n e V StyleF o n t Default Font V S i z e

N o n e V B I

N o n e V C▶ Results

Is s tar t ^ Macromedia Dreamw...

24 I PRACTICAL WEB PROiECTS I DREAMWEAVER

Get to grips with the latest version of Dreamweaver Photoshop project

i n s e r t t a b sThese handy tabsallow you to nawgatevarious parts of yourpages includingtables, frames, formsand tex t

insert panelHere you'll find a bevy ofclickable options relating to theInsert tab you've seleaed. Thetools here can help you v\/ithanything from simple tablesthrough to dynamic content

P r e v i e w b u t t o nBefore you publishanydiing online, it'sessential to see how yourpage will display in a Webbrowser, which you can doby clicking this little button

D o c u m e n t t o o l b a rChange the viewingmode and access

important functionsquickly and easily usingthis toolbar located inthis region

Design paneiMX 2004 comes with a

host of new CSS

options, and this panelallows you to store allthe style sheets you'vecreated for your site

F a v o r i t e s

CSS Styles

)" onMouseOver="HH_siArapI i tLage ( 'homel ' / ' , ' graphics/nav/home2. gi f ' ,1) "ximg src="graig r a p h i c s / n a v / c o n t a c t l . g i f " a l t = " g e t i n t o u c h " n a m e = " c o n t a c t l " w i d t h = " S 8 " h e i g h t = " 3

i n g g .

:he highly anticipated new Circaiplete and is currently being mastereds by legendayr producer'Whispering'A release date has yet to be fixed butsting back catalogue for current

:he highly anticipated new Circaiplete and is currently being mastereds by legendayr producer'Whispering'A release date has yet to be fixed butsting back catalogue for current

;he highly anticipated new Circaiplete and is currently being mastereds by legendayr producer 'Whispering'A release date has yet to be fixed butsting back catalogue for current

? D a n a | r e i j o r o s

318 022)-'

S style.CSS A

body, p, td x-smal lV. . .. t i t le # C C C C . . .

. d a t e lOpx fo,.. ^ V

' i = _

Snippets

N a m e

S iQ Texta M e t a

f fl j a v a s j u p tffi 1^3 CommentsIB ^ NavigationB H e a d e r sr C ! r l a r v > o n h < -

< ■ 31

^ 1

I n s e r t

2,a a Q c

▶ ApplicationIt ▼ Tag <img>

S ^ DesktopB M y C o m p u t e rB My Network Places

& FTP &RDS ServersB 4^ Desktop items

1058 X 547 , 23K / 4 sec

Link

Target

Code panelHere you can store pieces of code usingthe Snippets tab included in is panel.Web design freshers can also find theirway around the whole gamut of HTMLcode using the Reference tab

Design viewThe tradit ional view in Dreamweavermakes full use of the WYSIWYG

hjnctionality of the application Here youcan place elements on Web pages inmuch the same way as you would with aDTP package

Application panelThis section is concerned with dynamicdata, allowing you to configure databasesand check that your sen/er-side scripting isup to scratch

Tag inspectorThe integrated Tag Inspeaor in the newversion of Dreamweaver lists everyavailable tag attribute that applies to thecurrent seleaion, helping you performcomprehensive edits in a flash

A s s e t s t a bRather like the Library in other MXprograms, tfj/s provides you with instantaccess to all of the elements you'vecreated. It will also let you insert newitems, should you wish to

Files panelThe Site tab sen/es as a completerundown of the structure and hierarchy ofyour site, and giving you an indication ofwhere you've saved the pages

Properties InspectorThe most significant section of the entireDreamweaver interface, e PropertiesInspeaor incorporates a range of pertinentoptions for the active element, which youcan read about on the opposite page

Page sizesThis drop-down menu holds a range ofpre-defined Web page sizes, allowing youto configure your site to work in a varietyof browser windov\ /s

DREAMWEAVER I PRACTICAL WEB PRO|ECTS I 25

Dreamweaver project Design the sites graphic elementsYour expert guide:

ChrisS c h m i d t

CHRIS SCHMIDT has been developing Web sites for nearly 10 years for clientsas diverse as The British Council to the Brodsky Quartet. Chris has bags ofexperience working with Web graphics applications, and sights Photoshop as histool of choice. To see more of his graphic wizardry, pop along to the BrodskyQuartet site at www.brodskyquartet.co.uk.

^esien the site'sgraphic elementsKick-Start your site by creating visually stunning page designs andwhipping your images into shape using Photoshop

The brief

Task; Design the homepage and generic pagelayout for a new site inPhotoshop and createindividual graphics

Difficulty: IntermediateTime I need: 1-2 hours

On the CD

All files for this project canbe found on the CD

Lingolevel ler

Technicalt e r m sbul ldozed■ AssetsWhen you develop a sitefor a client you need tohave a clear idea of wrfiat

material you have towork with. These are

referred to as assets and

contain everything fromthe copy the site will bebased around through toany images they want toinclude and even sound

or video dips, if these areat all relevant.

ack in the late Nineties, the thought of building a complete Web site onyour own would have probably brought you out in a cold sweat. In thosedays, Web design was considered something that geeky programmers

did to show off their robot-like knowledge of HTML to their friends, and wasinaccessible to all but the most dedicated boffin.

Since then, things have taken a turn for the better, and thanks to user-friendlyWYSWIG design programs anyone can create a great Web site, whether you'rebuilding an online portfolio, setting up shop on the Web, or merely making a site foryour pub darts team.

Over the next few pages, we'll show you how easy it is to put together acompelling Web site. We'll illustrate the process by demonstrating how to create adynamic site for an aspiring rock band called Circa. The group currently has a Website, at www.circa.org.uk but wanted something a little slicker to promote its newalbum and forthcoming gigs. A brief was provided, outlining the fact that the clientwanted separate sections for the latest news, profiles of the band members, and adiscography section, where visitors can purchase Circa's records. It was also keen toinclude interactive elements, such as Flash intros and games. The band provided aseries of images, most of which were being used on its existing site.

We'll move on to laying out the pages in Dreamweaver and implementingdynamic database content over the following parts of the project. However, we'llstart by planning the design structure of the site and creating an impressive lookinghome page using Photoshop.

d 1 ! £ J. ■B M . D J . ^ 1

H H B ^ O'! ^! w wJbonwtoourwet^ .)

i i' x .i r -

Designing to a briefThe first aspect to consider before even planning the colour scheme is to fully understand thebrief, content and assets that have been provided for the site. If a client has an existing sitethen include that also, as it will give you a good idea of the tone and feel you're trying toachieve. Extract as much information about the client's character, because you will be able tosuggest avenues for the site. Use your graphical judgement to visualise the site to the client.

{ Z v 2 —

(5L L -

l ± -

1 Plan of attackWith that understood we can plan the structure on paper.From the home page we've settled on four main areas forNews, The Band, Records and Contact. News and Contactare single pages while The Band and Records havesubsequent content spinning off from them.

4 Pinpoint placementAs the canvas is 750 pixels wide we want ta position this soit has exactly 25 pixels on either side. Choose the RegularMarquee Tool and select the Fixed Size style from theOptions bar setting a width of 25 pixels. Click on the canvasand drag the selection to the side.

7 Stroke it

Create a new layer then choose the Edit, Stroke option,defining a width of one-pixel, with a black fill and placingthe stroke inside the selection. We could have used theStroke Layer Style to achieve this but the top border wouldhave been too close to the subjects.

26 I PRACTICAL WEB PROIECTS I DREAMWEAVER

Design the sites graphic elements Dreamweaver project

Power users' tips

2 Graphic designWith such a simple structure we can plan on designing aunique home page then plan for a generic layout to containthe subsequent pages. With this in mind we'll need tocreate a new file in Photoshop setting this at 750 x 800pixels at a resolution of 72dpi.

5 Layout guidesBring the rulers into play via the View, Rulers option anddrag a guide to snap neatly into place on your activeselection. Use the same method to create another guide onthe right hand side and you'll be able to use these toaccurately centre the main image.

8 Set the imageRather than flatten the image and border completely, createa layer set, name it Image, and drag both layers into this sowe can select the set of images so they can be moved upand down the design. Use the guides as rails to help thedesign develop

3 Get startedAs the copy for the home page is quite brief we'llconcentrate on giving this more of a graphic feel. Dig outthe 'groupl.jpg' from the cover CD and reduce thedimensions to 700 pixels wide, making sure to constrain thedimensions and copy this to your currently blank file.

6 Self-containedAs the image appears a little chopped let's contain thiswithin a border Activate the image and snap another guideto the bottom of the picture. We can then use the bottom,left and right sides to snap a Marquee selection around theimage and best gauge the height to our preference.

9 Logo and navigationWe're going to keep the logo and navigation clean sochoose your preferred font and create individual layers forthe title and navigation. We've used the familiar pipecharacter to separate the navigation elements but you canuse whatever method you prefer

Useful tricks and shortcuts

■ The interfacePhotoshop's Save for Web tool is presented through an interfacethat displays your in^age in various ways. Use the tabs at tiiehead of tfie screen to choose from the methods, which includeoriginal or optimised views or the more useful 2-up or 4-upmethods, which allow comparison between the original andoptimised files.

Remember

0Tr«wp«-wcyNo Tr«n»p«rt-.' v] Amount: .X*□ W«bSiMp:'50»< jj]|

C X i m w S i f \

■ Extreme optimisationThe controls to the right allow you to configure the settings,which are reflected within the Display panes. Reducing thenumber of colours used In the GIF format is a good method ofdimming excess file size although reduction under eight colourson images that appear to be two-tone will lead to pixelation asantialiasing is removed.

>

J

■ Juicing jpegsThe )PEG options are more straightforward as you can often getaway with choosing one of the default quality options availableunder the Format drop-down menu. A high setting wrill createbetter quality although the file size will be larger. As a rule ofthumb the Medium setting should suffice for all of your Webgraphic needs.

DREAMWEAVER I PRACTICAL WEB PROJECTS I 27

Dreamweaver project Design the sites graphic elements

Lingo leveller

Technical terms bulldozed■ Site structureThe site structure repfesents much more than just the pageyour visitor sees. We've grouped the content according to thebrief and plan and this is reflected in the file and folderstructure. By keeping all the band information within a singlefolder, for example, vwe can reference the content through amore Ic^cal URL such as www.mysite.com/band

■ Button statesA button has a number of states it can be in. When there is nointeraction it is considered to be in a 'Normal' state while Wifhena mouse is passed over it transfers to an 'Over' state. Themouse button being clicked, released or even draped awaydefines other states that are more relevant to coding. Whencreating graphic buttons, however, you only need to imply thenormal and over states to give users a feel for its purpose.

10 Enhance the logoTo make more of the logo we have created a simple effectby stroking a circle and then extraaing a segment. This wasthen positioned and locked within the Circa text layer. Weused the guide as a method of lining it up as this was thebest way to ensure it was done neatly

11 Offset the textThe final element to be added to the page is the text,which we want to lay over the image. As this would makethings difficult to read we've created a new layer to providea contrasting background by filling a selection with whiteand reducing the opacity slightly

How does it work?

Slicing■ Photoshop allows you to take an image and apply slices soit can be converted to a design. The slices are used to definethe separation of the graphics on a Web page. The methodworks vwll in most instances, however, we chose not to usethis as our page design is intended for various purposes andwe can keep better control through a single design template.The metfiod also requires a good idea of the CSS before it canbe applied effertively, which our design is not ready for.

B z :P i t £ 4 * L * y * r S 4 N « ( f H w V t o w W M e w H « l | »

15 New guidelinesKeep the existing guides, as these will ensure a consistentlayout with the home page, and add new vertical ones at200, 215, 595 and 610 pixels to create the three requiredcolumns plus gutters. Use the Fixed Size Marquee tool toposition these accurately

16 Background colourChoose a complimentary Web-safe colour for the homepage and use this to fill a new layer leaving the headerarea clear. Fill the right hand column with a slightly darkershade of the same colour to provide a more subtledist inct ion between the columns.

>Nr«L .3 <**€%

20 Loose endsBefore we move onto the actual content lets tie up a fewloose ends. First take a look at the navigation, with theintroduction of our columns this falls awkwardly over the

gutter so move this into the central section. Change thecolour to match the scheme we're establishing.

21 Convert the logoWe can make similar changes to the logo by changing thetext colour To change the colour of the graphic element,lock the transparency of the layer and fill it with the newcolour Don't forget to make the same changes to the homepage design as well.

28 I PRACTICAL WEBPROIECTS I DREAMWEAVER

Design the site's graphic elements Dreamweaver projectEssent ia ltechnique

Filling objects with colour is a staple task in any graphics application. Master the keyboardshortcuts of 'Control/Command+Backspace' to fill a layer with the current foreground colour or'Control/Control+Backspace' to use the background colour. If you keep the transparency lockedthrough the Layer palette you'll find no seleaion is necessary, if you wanted to change theCirca logo from green to blue for example.

12 Add the textYou can then duplicate, re-size and shift this to add a littlemore interest and blend to the feature. This can be donesubtlety before placing and formatting the text over the top.Further adjustment of the background can then beperformed to make the text easier to read.

13 Add colourAs the black and white results might be a little uninspiringyou could try to colourise the image by filling layers at thetop of your layer stack with preferred colours and applyingthe Overlay Blending mode to give the greyscale images amore interesting tone.

14 The page designWith the home page laid out we can move onto thegeneric content of the page design. To save time, duplicatethe home page file and delete the Image set to leave theheader in place. We've decided on a three-column layoutso the first step is to revise our guides.

i( cd

■■ * 1 ^

1 U » « r l

1

17 Graphic interestOur design is dominated by Web-safe colours, which canbe rendered through code. We can afford the luxury of alarge image in the left hand column. Position the 1ive2.jpg'file from our assets into place, considering that it will onlybe visible in the left hand column.

18 The bigger pictureYou'll notice the image continues below the availablecanvas so enlarge the canvas to 830 pixels high. Crop theimage to ensure it fits in the left-hand column of the pageand expand the background colour so that it fills thecomplete background.

19 The page footerNotice how the image fails to reach the bottom of thecanvas? Don't worry we've planned for this to mark ourfooter Drag a guide to snap to the bottom of the image anddelete the filled area. We will need to create another whitearea to compliment the header area.

22 Building up contentWe can now bring in some content and start experimentingwith text formatting as we start to anticipate our eventualstyle sheet. Use a Web-friendly font such as Verdana as thiswill be rendered accurately in HTML. Use the Text tool todefine the area and minimise word wrapping irregularities.

1 «

T h « n

t ! 0 0 4

r d m g o f t h « h i g M v « n t ( d p « t « d n « « i C t r c a a l b u ml i n o » ( I « t

Thorr>ton. Af*t«*« h»» y«tte b* #i*«d but

• c o r d r n g o f h l f l h l y n t w C i f c ** w m p l d U I * o j K fi t n t i y * ti on by l «g *n ( t«y r p foduc* ' *Wh l»p«Mng '

23 Give it a titleAdd a title using the same font as the navigation and put itinto position using the guide below. We've left space to theright of the body text, and guides marking the top and righthand boundary will also help when we get round tobuilding the actual HTML page.

24 Related infoWe've left the right-hand column free to add informationrelated to the main page. This will change depending onthe main page content but we can mock up some ideas toget a feel for how this might appear once the page is built,using the guides already in place.


Dreamweaver project Design the site's graphic elements

25 The finishing touchesWith the layout complete we can tidy the design and addsome finishing touches. The completed layout illustratedhere shows the navigation copied to the footer, with theimage adjusted to bring out detail and the layer structureorganised to help when future assets are created.

26 Understand the tableTo create the graphic assets for our design we need tounderstand how it will be converted into an HTML table.

Open the 'home.psd' and 'page.psd' files from the cover CDto see the table structure clearly marked as a separate layer.Replicate this on your own version.

I t * r j i t i O i :

I t t a « i t < g mb y

. A « I « t « K a s b *

b i < i n < « l i i c ^ f » r c u r t r i t

| < I I c a n ' t r i t f v r r i a i f x M t t

ThemttMj » r«l«c h t e k < i u * 1

27 Identify the imagesThe HTML table can define much of the design and

background colours but remaining elements needconverting to graphics. We could use Photoshop slices to dothis but our design is a generic template and so we'll needto know how to do this manually

28 Cut the graphicsFrom the 'page.psd' file, crop around the logo using theHTML Table Guides layer and the page guides for accurateselection. Then hide the HTML Table Guides layer andchoose the Save for Web tool from the File menu to savethe image as a GIF within a graphics folder of your site.

29 Further graphicsOnce that's completed undo the crop to return to the fulldesign. Repeat the process for the various other graphicsavoiding the navigation for the moment. You can save timeby creating titles for the other key sections of the site at thesame t ime.

« O h c k x ' I t

■ f a F f > t

- i

>

>Ou»lc<MLi»«r

30 Flight of the navigatorThe navigation graphics are a little more complex so let'sturn them into a new file. Duplicate your layout and croparound the cell that will contain the graphics, before savingthe file. Now duplicate the text layer and turn the text withinit to solid black before hiding it.

i news (.Ihe tiatid | rutiotds I crtnt.iol

31 New guidesClear the guides other than the one underlying the text andget rid of any layers that fall outside the crop to make thefile more manageable. Drag the guide from the vertical rulerusing the pipe marks as a general location to contain eachof the words in turn.

32 Recycling assetsBefore we create the necessary graphics, crop away the tophalf of the canvas. We'll align the buttons to the bottom ofthe header navigation cell, and by doing this we'll be ableto reference the same graphics for the bottom navigation atthe same time.

33 Button statesWe can now create the graphics for the individual buttonsusing the guides in place, for accurate cropping. Convert theoriginal colour layer buttons naming these 'homelgif,'newsLgif for the five buttons. Repeat the process with theblack text layer naming them 'home2.gif' for the over state.


1 a n d 1 . c o . u k

R e a l - w o r l d S o l u t i o n s

Register&GoSimple and efficient domain name registrationat great prices - plus loads of FREE featuresNo wonder we're UK's No. 1Backed by 10 years' experience in delivering quality domain and hosting solutions,registering a domain with 1&1 has never been easier or more affordable.

THIS IS WHAT YOU GET FREE AT l&l...

FREE 50 EMAILADDRESSES

FREE U N L I M I T E DEMAIL FORWARDING

FREE W E B S I T EF O RWA R D I N G

FREE DOMAIN PARKING

FREE U N L I M I T E DEXPRESS SUPPORT

Set up addresses for people orsubjects e.g. [email protected] [email protected]

Divert emails received under yourdomain to an existing email address

Visitors to your domain name areforwarded to your website (domainremains in the address bar)

Your name is saved until you want touse it... no extra charges

Our experts are on hand to help you -by phone and email

Domain Mail PlusYOURNAME YOURDOMAIN

Buy a domain for email only - it'sso easy with Domain Mail Plusand it's less than 60p/month

r No probail Pius p

Check your name now all a n d l . c o . u k

. c o . u k ^£ 1 . 9 9

special offer

. c o m £g.99

. m e . u k £J.99. n e t £Q.99. b i z £Q.49. I n f o £Q.99

Total price per year, inclusive o1all registration fees + VAT

Want to move yourexisting domain name?

No worries, it's FREE to 1&1

I ^ %

^ ' e d l t e ^

A member of Nominet.w/rTHE UK INTERNET NAMES ORGANISATION

• B Afi l a sCo-founder & Accredited Registrar

One-Stop Shop for Web Solutions& All-inclusive Web Hosting from £1.99& New Microsoft .NET Web Hosting from £5.99& Turnkey eShops from £9.99& Innovative Dedicated Servers from £29& Upgrade to our compelling packages at any time& Visit 1and1.co.uk for more details

VlLt us now 1and1.co.ukOr call 08708 503305

The World's No. 1 Web Host& 4 Data Centres - £15 m investmenti Network powered by Cisco & Juniperi 1,100 employees1 100+ in-house developersI 12,000 MBit connectivityI 2,500 customers join 1&1 everyday

ON SALE NOW!ifitemet. Photoshop design. Flash interfaces • Dreamweaver MX > Fireworl<s > eCommerce

WebDesIgn^THE ULTIMATE RESOURCE FOR WEB DESIGNERS mmmiusi^lmncx^ sjo

2004'S MOSTINFLUENTIALDESIGNERS

l eet the designers who are transforming the WebDiscover new ways to use Flash and PhotoshopProfessional tips and tricks from the experts

- U K

F U P S H D E B I E n

PUMP UP THE VOLUMECrate a virtual mijing for wajrWcb sitein out exclusive fiv«-page Flash tuto«at

TWO ESSENTIAL FULLVERSIONS WORTH £2514D 6.8 (WORTH £229)Create databaw-dtivcn siics with this hSgh-cnd tool (fc «iy)WIKIWRITER (WORTH £22)D«ign cool Web sites with this beginnet-fiiendly package ik «*)

PLUS; OVER1400 RESOURCES

uBOOST YOUR SfFE RIGHT NOWVWTH OUR MUST-HAVE UTIUTIES»325 Photoshop laya Styles to powet up your graphicsHS8 oislomisdble Flash movies: improve your animalions»«royallv free sounds Oream«ra«textensions

STUDIO MX 2004-T7:r- C»e( y«our fwwh on tht>

j talv*;ttryoulsoflhoSv.v,.- ' ■'•I ••■f'-UPC&Mac). :»p WEAV«

^ » » F I R E W O R K S

■ r i N O R T H E R N^ EXPOSUREk WV Inside the world of^ Swedish Photoshop

/ guru Per Gustafsson

S99 "excite, enthuse and inform"

l u m D i u s ^ m R c FREE WITH PRACTICAL INTERNET WEB DESIGNER 89

More than 50 pages of in-depth Web design tutorials in every issueEssential advice from leading Web professionals and experts

Developer workshops to help you stretch your Web design skillsInspirational interviews and profiles with successful Web designers

To order call 0870 444 8682 or email [email protected]

Design the sites graphic elements Dreamweaver projectEssent ia ltechnique

Our logo makes use of a text and graphic layer to achieve its results. You could merge thelayers together to maintain their spatial relationship, although this will disable any editingqualities of the text layer. Turn instead to the Layers palette and select one of the layers, thenclick in the box to the left of the other layer, by the Eye icon, and a chain appears. Thisindicates the layers are linked and any movement to one will apply in the other.

34 Organise your graphicsYou should now have all the basic graphics needed to recreate the generic HTML page. As the site develops you'llfind more and more graphics being created, so storing yourimages in suitably named folders will help you locate themwhen you come to build the actual pages.

35 Save your workIt's also very important you save the design layouts alongthe way especially if they are complete with any guides youhave in place. Keep these design templates somewheresafe, because you'll be returning to these when theoccasion arises to create new titles.

36 The home pageDon't worry about converting graphics for the home pagefor the time being, as this is a unique page. We can convertthe necessary images from there as we build the page. Theimportant thing for the time being is to have the core pagegraphics so we can start making the template page.

The final design

i The navigation usesa simple yet familiarlogic that is intendedto change colour to astronger black whendie mouse passeso v e r i n d i v i d u a l w o r d s

I We created a simplelogo to match the siteand provide a moresophisticated feel forthe band. Keepingthe logo clean,simple andi d e n t i fi a b l e w a s t h e

key to its desigji

i The home page textwas offset against asemi-transparentbackground to retainlegibility withoutbreaking up the mainimage too much

The home page hasa unique design toact as the site's mainhon t end w i th a

welcoming messageand navigation linksleading into the site

The page design wascreated to be as

generic as possible,the layout will bereused fo r a l l

subsequent pageswith content that canbe freely amended

We were able to

experiment Vifith thesample content bythe basic formattingo f ^e s i t e con ten tand st^e sheet vvldtw h i c h w e l l c o m e t o

rely on later

HTML cou ld be usedto render b lockcolour to make thesite faster todovwi load as less

images are required


Dreamweaver project Create immaculate Web page layoutsCHRIS SCHMIDT has been developing Web sites for almost 10 years for clientsas diverse as The British Council to the Brodsky Quartet, and is skilled inDreamweaver MX. He is now a joint partner in his own Web design business, trackS(wwfw.trackS.co.uk), and regularly contributes to various Web and graphicdesign magazines

I ^ S i s i

Create immaculateWeb page layoutsWith our design established we can move onto building thepages and templates for our site, but first we need to definethe site in Dreamweaver

All files for this proiect canbe found on the CD

ftcr the previous tutorial you should have your home page laid out andready to use. If not, don't worry, you can always take the completedPhotoshop files from the cover CD Chome.psd' and 'page.psd') if you

want to jump in at this stage.We've already made some of the necessary graphics for our page, but we'll need

to keep referring to these files for additional headers and supporting imagery Beforewe create the basic template we need to configure Dreamweaver so it recognisesour new site and references it to a location on our hard drive. This is where the localversion of the site will be held and given all the information it needs to upload tot h e r e m o t e s e r v e r

We'll start with the home page, creating the images from the PSD file as we goalong, before moving onto the contents page. We'll make use of tables to lay out thepages. Cascading Style Sheets to format them and Dreamweaver templates toprocess the pages.

There's a lot to squeeze in over the next eight pages but by the end you'll have allthe knowledge you need to create your own templates to base your site around,complete the navigation with style, and link the contents page to other parts of thesite, resulting in your very own stunning Web site. If you've created sites in the pastand feel confident about the process it's important not to let complacency set in, sowe would still recommend you follow the tutorial because you'll almost certainlypick up some tips that you hadn't thought of before.

Find your way around the new Dreamweaver Start page

The Ovate Newsect ion makes i teasier to start

hand-coding inD r e a m w e a v e r

Macromedia Dreamweaver MX 2004

Open a Recent Item

You can select

recently usedWeb page filesthat appear here

New toD r e a m w e a v e r ?Tal(e a tour ofthe latest vers ion

by clicking here

■4 FINAL.SITE/page.hbnyt FINAl.SITE/home.htm4 FINAL.SITE/index.htmU DW Tutorial/index,htm# DW Tutorial/march,htm

• a DWTutorial/february.htm

^ DW Tutorial/january.htm^ DW Tutor»l/«dex2.htm% ESSNTIAL/INDEX.HTM^ ESSNTIAL/HARMAR.HTMQOpen...

Crea te New

^ HTML% ColdFusion# PHP

^ ASP JavaScript^ ASP VBScript^ ASP,NET C#^ ASP.NET VB

« 3SP

» CSS

sSfe Dreamweaver Site..,uJMore, , .

D^ate from Samples

Q CSS style Sheets.^Framesets

tJPage Designs (CSS)Page Designs

(J Page Deagns (Accessible)

E x t e n d

^ Dreamweaver Exdwge

I The new Stan

page v^ inD r e a m w e a v e rM X 2 0 0 4 m a k e sit easier to kickoff die site

building process

I Build pagesmore quicklyusing diesepreset designs

W - Take a Quick tour of Dreamwea'

Take a SsaBweavfirMsda!. (2?Qet the most out of Dreamw

I Here you canbolster the powerof d ie Web edi tor

by downloadinge x t e n s i o n s

Training, tips and tridcs, special offers anmae available at macromeda.com.

M a c r o m e d i a D r e a m w e a v e r M X 2 0 0 4

O p e n a R e c e n t I t e m i ? 1 C r e a t e f r o m S a m p

H T M . OCSSStyta Sheets

« DHrt f lp>>dex2.htw a, CotdPuMon

ttte/concert.hbn « P t v U>PageC)et ignt(C!

« l e ^ t a c t . h t n i # A S P > v t S c r t > t

U i O p e n . . . ASf»V«Scrvt

V M P. r e T C »A S P - r c r y B

E x t e n d

D r « a m . v M v c r E :

4 CSS

m» a u e t t t X T o f G « t m o f t 0 ( / t o f O r « j r

T r M w g , t c t t n b w e o ir r « f * e v t t e t e a t i w o m e c l *

1 Define the siteFrom Dreamweaver MX 2004's welcome screen choose theDreamweaver Site option from the Create New column. Ifthe screen isn't available or you're using a previous version,choose the corresponding option from the Site menu. Whenthe Interface appears click Advance to continue

File Edi View ln»ert Modtly Text Commands S«e Window" ^ ^ C c , i o n -

h i j Local view^ c T o fy ■m

Site-Circa Of: Vients^Circa^te)B ^ graphics

4 Up and runningThe remaining categories can be by-passed but make anyfurther changes If you like, otherwise hit the OK button andDreamweaver will have the Information required for the site.The Flies tab should now display the Circa site but makesure this is set to Local View to continue.

7 Rows and columns

Referring to the 'home.psd' file we can see, through theHTML Table Guides layer, that our home page will require atable comprising of five rows and five columns at a width of750 pixels each. Some cells span rows or columns butessentially, our table Is 5 x 5.

U I PRACTICAL WEBPROIECTS I DREAMWEAVER

Create immaculate Web page layouts Dreamweaver project

Power users' tipse a « f c : A d v a n c e d

C « t ^ v

C r M t e i n i M S

S > t t M B i b o n l o f C » c «- n

R e m o t e i n f t

T««ng S«rv«rO o t k r gDogn Note*S - t e H w U y o u tF S t w e » O j ( i « T i n s

C o r t f r t a j t e

S i t e n a m e :

Loal rwr t fbWer; y ;VS«nl5 l |CraVsi t» \

0 Sefr«h lo«d( fite ht sutomal5««v

0 « ^ t n 4 9 M ( o l d e r : Y: V M n t s V : i r c a

K T T P h t t p i / A v w H . O r e s . o r g . U k

C«che: Qgâblec«di«T h e C d d * m a n t w i s « « a n d a s s e t

nSxmabootiihest®. TVw* weed* up theAsset panel, k*. management, and SiteMapfea i t re* .

2 Local infoThe Local Info category is selected by default so enter adescriptive name for your site and locate the folder intowhich it will be contained. Create a graphics folder for thedefault images and enter the site's domain name in theHTTP address field.

£«• £cf» ii»w Ittsert Modify T«xt iommirtd» îie Wmrtow ti»l0

liai Circe 7^3% c \ t ^ i A \ m

Site-Crga(V!'dl«nt8V:ifM%rtt)lB O graphcs

O c d sa l a r w ve Id stdebar

^ im«geOl.jpg9 d s u b t t e sS & t i t e s

^ contact.gif^ news.gif^ records.gif^ (hîand.sif

5 Bring out the assetsLeave Dreamweaver for a moment and copy the contentsof the graphics folder from the cover CD into your localdirectory to add the images we created in the previoustutorial. Return to Dreamweaver and open the Graphicsfolder where you'll see that the content is now available.

n ?

R o w s ; S

Ta b t e ' A » d t h ; 7 5 0

Border thtdffieM: [o | pixelsCellp*idrig: 0

Celspaotifl; 0

8 Lay the tableBack in Dreamweaver, access the 'homehtm' file andchoose the Insert Table option or pick the relevant optionfrom the Common tab of the Insert panel. Configure thedialog to set the border, the cell padding and spacing to '0'and hit OK to create the base table

SAt Oe fcw t ioH fa r On»

CatwryLoca l In fc( t e m e l i a ATeiijng ServerCloalungOesgn NotesSite Map layoutNe Mew Columnsc o n f r i b u t e

'4.

Access: ,FTP

F T P h o s t fl p . o r a . o r j . u l c

Hos tdkec to ry : oobkc .h tn^

L O » n ; o r a

Password;

l3o»e passive FTP□ u>e bewail□ useSeoineFTPCSFTP)

1 3

I JB S a ^

[Wrewal S<t1)ng>...J

□ ^tomatxalv i«load fites to server <□ gnabte «e <Jied( ti and out

3 Remote infoChoose the Remote Info category and select the FTP optionfrom the Access options. You'll need to get the informationfor these fields from your hosting company because thisdetermines the server location. We've checked the UsePassive FTP option to work around a local firewall.

Fi le yi t v iew .msert Modify lext Eommands Ji le WMow H

C o m m o n ▼

v] [local view |"v |' fi l e s

Q| Circa

6 Your first pageChoose the HTML option from the Create New column or goto File, New to create your first page. Save this as'index.htm' in the root of your site. This will contain a splashscreen to the home page, which we'll create another file forlater Call this 'home.htm'.

Ôestgn Ttilt: lulled Doojment »». 6. t" 11,

♦ turn')

Font: OefWt FontJStyH|None g B / K 1 9 ■si»'None; Ji] ^ 1= ;s a arrôeWt 3**

Verti faljt J3 hI»f }w wctw can* usng Msnat

. NowrapQ eg

MeaderD Bg

9 Span cellsNow we've used the layout defined in the Photoshop filewe can re-create the spanned cells by clicking and draggingthem in Dreamweaver. Click the Merge Cells button found inthe Properties Inspector to get a layout that should looksomething like the above.

Align the table contents

■ Centre the pageYou'll find that by default the page design will gravitate towardsthe top and left boundaries of the border. Altiiough this mightbe what you want, if you want the page to centre horizontallyselect the main table you wish to define in the page layout, andchoose the Center option in the Align menu, which is part of theProperties window.

■ Align contentYou can use a similar approach for aligning the content of aparticular cell by selecting it and choosing the required resultfrom the Horz or Vert fields within the Properties Inspector. Thevertical alignment is particularly important because cell contentswill align to the centre by default, which can make positioningthe text rather awkward.

n»e '•eow^r^ Ngtvv »r*ioo«e<ii ' b u m w n o «I t P v t i t o h A i d k O *

• ! f t e w s ; l r ) 9 ( W H J I r e > ; i y c } « )

vlate:ecttable>

■ Tag locationThere are various methods of selecting tables, or their cells, inDreamweaver but one of the most reliable is between the pageand the Properties Inspector. The list of tags that are shownhere demonstrate the nested hierarchy the page relies on toreach the point at which the cursor is at. Click on the requiredtag to ensure accurate selection.


Dreamweaver profect Create immaculate Web page layouts

Lingo leveller

Technical terms bulldozed

■ Hex codeThe hex code is a six-digit number that refers to the RGB (red,green, blue) values of a number. HTML reads this hex code tore-create the colour for your text, links or HTML bacl unds.You can discover the hex code of a particular colour throughPhotoshop's Color palette..

■ Web safe coloursThere are a limited range of colours that will display across thevarious browser and platform combinations. Keep the Only WebColors option checked in Photoshop's Color palette because itwill help to achieve safe colour choices during your design.Recent developments with enhanced graphics cards mean thisis no longer such a strict issue, although it is still a good idea toadhere to tfie safe palette.

■ Web safe fontsThere are a certain range of fonts that Dreamweaver will allowyou access to for regular HTML text such as Verdana, TimesRoman and Courier. If you stray from these you risk your sitebeing viewed on other computers with default fonts, which willbe detrimental to your design.

How does it work?

Attach style sheets■ We ask you to associate the style sheet to the existing homepage and, because the template doesn't reference the'home.htm' file, we need to do this manually. Open the HTMLfile and turn to the CSS Styles panel choosing the Attach StyleSheet icon at the foot of the palette. A dialog box is thenpresented, wfhich allows you to locate the existing CSS file,which is then linked through a single line of code within yourHTML page. This will impose the definitions set by the CSS fileon the page and any HTML files relying on this will updatethemseh/es to any changes you make in future.

M t e h

."*] I »**«*- }

T .

. M l ) « c c < e « b . . .

d m .

A . . K C C C C C X ' .

I I r i l M i H

■

h - v ;

10 Add the imagesWe've already converted these images for you using similarmethods as we ran through with the contents page. You'llfind the necessary assets in the '/graphics/home' folder andyou can then piece together the jigsaw of the main pictureignoring the navigation for the moment.

11 Tidy it upDon't worry if things don't look quite right at this stage,because we have not defined the width of the outside

columns yet. Select each of the side columns in turn andset their width to 25 pixels and everything should now befalling into position.

14 Complete the navigationRepeat the process for the Band, Records and Contactbuttons to complete the navigation bat Amend any of theinformation where necessary, but l<,eep the links emptythrough the key Choose File, Preview in Browser to seehow the page looks and how the navigation will operate.

15 Cell backgroundThe only thing left to add is the text, but an image iscurrently in the relevant cell so we'll need to convert that tothe background. Remove the offending image, position thecursor in the empty cell and reference the same imagethrough the cell's Bg field.

TjW#Ta W e s i w '

R o w s ; 8

Tfbte width: 750

S o r d r t h i d n t w i 0

0

C<«sp«cng: 0

Columnj: 7

H««der

AoX99lb*tY

C«ptcn:

A t C I0

18 Table dimensions

Referring to the Photoshop design, we can see that weneed to specify a five row by seven column table using awidth of 750 pixels. The border, cell spacing and paddingshould be defined as '0'. Re-create the cell spanning to

duplicate that of the design.

19 Force dimensionsWe need to set the dimensions of the template so thecontent on our site is more secure. See how the Photoshop

design shows that the fourth row has no spannedcolumns? Use the dimensions here of 200,15, 318, 62,15,115and 25 pixels for each of the columns.

36 I PRACTICAL WEB PROjECTS I DREAMWEAVER

Essent ia ltechnique

Create immaculate Web page layouts Dreamweaver projectThe home page copy will, by default, wedge itself to the left of the table cell resulting in anawkward appearance. To get round this select the text and use the text indent option from theProperties panel to surround the text with a <blockquote> tag. However, when doing thisyou will need to make sure you select both paragraphs otherwise the tag will createu n w a n t e d l i n e b r e a k s .

« ] r t H f i p

common ^ % S! * | HT i l k :

.43, 0 031©._ lm«9«

% M T M L ^Ik N»vi9»ticfl e»r

tJ Of»w R*ct«n^ H9t»p9tX) 0v»IH9t»89lt? Pr»w

SP

Ut .

12 Rollover graphicsWe will install the navigation graphics as rollovers. Theassets can be found in the Vgraphics/hom/nav' folder withseparate names given for the normal and over states.Position the cursor in the cell to the right of the logo andchoose Rollover Image from the Common Insert Panel tab.

C t e « w » > f e w p w e t b « n d N i w l l aBmrewsmth DwMt

> 9 11 c « ' j v n ( D « * i i b p u l d t * b a n d < t U c « v < « r v i l m «c«B e«di tlH« nm «nd pwcim* dwy f^wdt 9

16 Add the textWe can now paste the text in place, don't worry about theformatting or the disturbed layout because we'll take care ofthat when creating the style sheet for the entire site. Savethe 'home.htm' file then close it so we can start building thecontent page.

V Prop«fli«»

N o n » StV+t fJont

Nontj j

^ Cfl Hon WWt w No wr9Q □ Bgn 3 t | v | H H w w w ' ) l

20 Background colourWe can now add the background colour using HTML.Sample the main background colour in Photoshop todiscover the hex code as '999966' while the right-handcolumn is '8C8C59'. Click and drag the corresponding cellsentering the codes directly into the Bg colour field.

II n M r t R o l l o v e r i m M t

Im»9f n#me:

gr#)?ho/hcmt,M#v/r(tws l.pif

Rolov«r im«9f;0 roHovr im#gf

Altrn«t« *tKt:

j| WHtn Co to UAl: *

13 Button configurationIn the dialog that appears set the name as 'News' andlocate the graphics using one as the original and the otheras the rollover Enter some text to display as an alternativeand create an empty link using the key, because wehave yet to create the subsequent pages for it to link to.

, 1 * 1 4 , ^ T « t S S £ W w r■ C»»™i » % S

c i 0 « jy 4 ! E- D I i * t ' O T M

• h e m t . h M

m m

f 9 r ^ I N d e n m

C«(Mddln|i

17 Build a templateWe're going to keep the layout of the content page fairlygeneric because this will be converted into a template.Create a new HTML document and save this as 'page.htm'within the root of the site. As with the home page, the firstthing we need in place is the layout table.

r . 0 i 1

• « « « . • * ^ < 0 e ,

' • . i T Z

G ' i ' . .1 W O f

21 Supporting imagesStarting with the logo, left-hand image and title plus themain title in the right-hand column, we can begin addingthe site's images. Add navigation to the header and footertoo by using the rollover methods we looked at previouslyaligning content of the header cell to the bottom.

Lingo leveller

Technical terms bulldozed■ Local/Remote locationsIf a file is held on your computer it is considered to be a Localfile while anything uploaded onto a server is referred to asRemote. This is an important distinction because there is nopoint in linking to local files because this is impossible forpeople to access through the site.

■ Absolute/Relative linksWhen you're creating links Dreamweaver will create a relativelink - that is, a link determined by the relationship of a file tothe current location. An absolute link is necessary whenreferring to external sites and can be identified through the'http://' prefix in the link location.

■ Site rootThe root of your site is the base folder in which your site iscontained. It is this location that Dreamweaver will use toupload your site content from any files or folders.

How does It work?

Create links■ There are various ways of creating links in Dreamweaver. Youcan type the relative or absolute address directly into the Linkfield or, more easily use the Folder icon to search tfirough thesite and reference the file. However, tfie most popular methodis to make use of the Crosshair icon within the Link field, whichallows you to selea text or an image that will act as the link. Itwill then drag the icon to the required file or location in the RIes

panel. This method will quickly and easily create links from onepage without having to worry about the coding.

, % s ®fl C r M

0 6 t ^ 4 i E» » ^


Dreamweaver project Create immdcu ate Web page layouts

Power users' tips

Positioning graphics

5 * * H « i R

Common * E3 AiS Hp#- 0 ©i

■ Regular graphicsThere are a vast array of graphic tools at your disposal inDreamweaver and we've used a variety of methods to positionour images in Dreamweaver. The Insert panel has been usedregularly for the graphics that feature as part of the page layoutand design. The tools here have assisted us in positioning theminto the correa position and adding dynamic properties.

■ Vertical spacingThe index page to the Band folder contains a table with multiplethumbnail images that has been aligned to the centre of thetable cells. We've also made use of the V Space option to addan invisible border to the top and bottom of the image, whichhas been defined by pixels. In the Properties window set the VSpace to 10 to create an acceptable border.

V S O M t

H S O M

S r c O u iI * * ® 0 i s r r

T « r g « t 9 2 1 2 2 - ^ —UwSfc I «.9ht

■ Inline positioningThe image needs to be embedded into the copy but this wouldresult in the text aligning after the image. This makes the layoutlook rather messy. To remedy this, we'll be embedding theimage as usual but will make use of the alignment options toshift it to the right. By doing this we will make the layout of thepage look a better.

22 Paste contentPlace the cursor in the main cell where the content will goand you'll notice it centres vertically Choose to align thisvertically to the top via the Properties Inspeaor and pastethe sample text from the 'templatecopytxt' file, from thecover CD, into the required section.

- T 7

r^--imL'Z'::7ZZ3__ .iti SciKinrTYpe; OSMi(an«xiiytoanY»Q}

Itobe&w C4<^<nc*d(I0j ,a»nta* i i i« l«(eci»rf ,«td

Oel neti:® jgigwS ShwtWi)

H Alil'M BEING .\USTEREDlirKordii f of tbe new Cin;«

his i)0«-c<»B|: aod ts cumtidv beioi■A at Paragoa studios b>')ef«»daNTp(odic«r ;

J m a e i T b o n t o e A d a t e h a sPto b« bit check out oar enstB; back

c w r c d i c « l e « s «

I d K f e c w d s ]

24 A new styleChoose the Tag Selector Type and the Body entry from theTag list. Set this to Define in a New Style Sheet File and hitOK. You will then be prompted to name and set a locationfor your new style sheet, call this 'style.css' and save it inthe root of your site.

26 As if by magic...After you have clicked on OK you'll notice the text within thepage template has transformed to the configuration wepreviously set. Also, the reduced font size has helped restorethe layout of the page because the text is no longer toolarge for the page design.

N g w C S S S t v l *

. . 3O 3»W (O" agi y to 4ny tog)© Tag tht took of a speoftc tog)O an<:nd QDs. omtexiual selectw;,

23 Get stylishDon't worry about the appearance of the table becausewe're about to fix that using style sheets. Save the'page.htm' file and head over to the CSS Styles tab withinthe Design panel, clicking the New CSS Style icon at its foot.This will prompt the initial dialog settings.

C 5 5 S t ^ D < a n i ( i f l i i b f b q « j v « H v t 8 r ^

: 1 M i M W . t t r n w t *

□ svieFfcn

C a l a r :

□ b M

25 Body definitionThe following interface allows you to configure the Bodytag, which acts as a container for the entire page. Set thefont as Verdana, x-small size, with the colour set to matchthat of our site design, which is '*333333'. This should helpus to resolve some of the formatting issues.

Nay. CSS Style

N a t n e ;

Selector Type: 0 class (can apply to any tag)O Tag (redefines the look of a spealk tag)O Advanced (lOSr contextual selectors, etc)

D e fi n e

O 'This document only

it Paragon studios by lagendayr producer 'Whispenng*bames Thon^ton. A release date has yet tc be fixed but

out our extsting back cataiogue for current^ t e a s e s . . _ . . . .

27 Classy stylesTo configure the heading we need to create a unique stylein the form of a class element. Click on the New Styles iconat the foot of the CSS Styles tab within the Design paneland configure it using the chosen settings, as above, beforeclicking OK.


£99.99 per month / £89.95 Setup ::■ 1U Rack Space in RedBus (Meridian Gate)- lOOmbps Switch Port■ 2 IP Addresses (More available on request)■ 50GB BGP-4 Data Transfer per Month• Backup Generators/UPS Power Supplies• 100% Availability Network SLA• Optional APC Sockets and NAS Space

C o l o O f f e r 2 ■£199.99 per month / £89.95 Setup• 2U Rack Space in RedBus (Meridian Gate)2x100mbps Switch Port4 IP Addresses (More available on request)100GB BGP-4 Data Transfer per MonthBackup Generators/UPS Power Supplies100% Availability Network SLAOptional APC Sockets and NAS Space

Co lo O f fe r 3 ■£299.99 per month / £89.95 Setup4U Rack Space in RedBus (Meridian Gate)4x100mbps Switch Port8 IP Addresses (More available on request)200GB BGP-4 Data Transfer per MonthBackup Generators/UPS Power Supplies100% Availability Network SLAOptional APC Sockets and NAS Space

fVII packages include:E m a i l & I M A l e r t s2 4 / 7 R e b o o t s

Optional APC Socket2 IP Addresses per U (More available on request)Detailed bandwidth MRTG reports showing;Current month usageHistoric usage (past months)Detailed graphs for day/week/month/yearPredicted usage this month

E x t r a s ; - ■ierver Specific Firewall:■150 per month

Enterprise Monitoring:'100 per montht S L C e r t i fi c a t e s :

■100 per year

Domain Registration:U K D o m a i n s :£5.80 every 2 yearsgTLD Domains:£8.80 every year

C o n t a c t u s o n : -Tel: 0845 166 8386Email: [email protected]

s s D E D I C AT E D S E RV E R S

Standard Fea tu res :LinuxRedHat9 / Online Control Panel for Administration / 100Mbit FEthernet Interface Full Administrator Access / APC Socket for RemcReboots / 2 IP Addresses (More available on request) Server MonitoriService / Network and Hardware SLA

Bronze Entry Server- P 4 1 . 8 G H z- 5 1 2 M B D D R 3 3 3

- 40GB 7200rpm HDD- Red Hat Linux 9- £200 Setup / FREE Setup if paid annually

100GB Bandwidth: -£130 per month - £1400 per year.200GB & 300GB also available.

S i l ver S tandard Server- P4 2.4GHz

- 1GB DDR333 RAM- 80GB 7200rpm HDD- RedHat Linux 9- £200 Setup / FREE Setup if paid annually100GB Bandwidth:-£150 per month - £1600 per year200GB & 300GB also available.

Go ld Power Server- P4 3GHz (Hyperthreading)- 2GB DDR333 RAM- 120GB 7200rpm HDD- RedHat Linux 9- £200 Setup / FREE Setup if paid annually100GB Bandwidth: -£260 per month - £2800 per year.200GB & 300GB also available.

Shared Hosting / Reseller HostinD e d i c a t e d S e r v e r s / C o l o c a t i o n

I Ext ras: -

Server Specific Firewall:£150 per month

Enterprise Monitoring:£100 per month

S S L C e r t i fi c a t e s :£100 per year

W i n d o w s 2 0 0 3 :£80 per month per servero r

£850 one-off per server

CPanel (Linux Only!):£30 per month per servero r

£399.99 per year per server

Helm (Windows Only!):£25 per month per servero r

£180 one-off per server

Dreamweaver profect Create immdcu ate Web page ayouts


Page titles are an essential feature of any Web site because they help to name marked pageswithin your site. Titles also help search engines identify your site and its content throughkeywords - these are words that are associated with the main content of your site. Thiselement is contained within the head of the code and isn't actually a visible part of the page,although you can enter Information through the title field if you need to.

Power users' tips

Edit style content

■ Edit by defaultThere are many ways of editing the site within Dreamweaver. Aswe were designing our page layout and style sheet content wemade use of the many default methods in Dreamweaver forediting the CSS content. You'll find that such modifications canbe achieved through CSS Styles and one of the new options,the CSS Properties panels.

: :

e e l e * . K S T X .

U Hand-codingAlthough this Is not for everyone, and hand-coding intimidatessome Web designers, another option is to open the style sheetwithin Dreamweaver where you'll be able to modify the codeyourself. By doing this you can get more efficient code in place,and remove the likelihood of errors creeping in. Of course, thiswill still give you access to the same panels.

CoikOJtorrgC o d f ^ « n n M

C o d t H n t I

. ) i . a

E « t c r n i l c s d t » i * t o r ;

s .cenAg.(«.W ,m .mc .mr .>4

{ « v t a n l « n h ; . P i w i v t

a

o m a C 0 p T / P « »

P r r / i C o n S r o v i M r

3 ^S d t t p r t

' X

■ External editingDespite the much-improved support for working with styles InDreamweaver AAX 2004, you may prefer to use an externaleditor. If you find this is the case wed recommend you headover to Dreamweaver's Preferences, via the Edit menu, andchoose the File Types / Editors category, specifying yourpreferred application from here.

28 Unique titlesWithin the Type category we've set the weight to Bold andthe colour to '*CCCCCC'. We've also set the Letter Spacing

option found in the Block category to one-pixel to spreadthe title a little. Click OK when you're happy with thechanges and save the CSS file

V 1 I W l = 5 * r S f f 5 E l ! l T 7 i r o s l ! -j s i f c o m i » r i - w c o f r . p ' « t « • r d « Ia t i t u d i M t » * l « a « f v j 4 v r ;^•m^Tho'nter- A reuse date K«» ret to bt tut •

a o t c u ' a t c x e a t s i o o u * ;

g o t t h t h i « N y C i r c st s n o * c P f n c J w r t * r « ( > s c u r r w i t l y b e n e :

^ ttudiOS by i^«ns»yr pn»4uc*'- "Wtustienna tr h o < T < t c f « . A - e i e a s e d a t « y « t u b e f . y e d ;

30 Over to youThe date needs another class created with a reduced sizeand italicised font. Create another class naming this Dateand set this to a smaller size with an italic style through thetype category Apply this to the relevant copy as wepreviously did with the titles.

32 Advanced stylesCreate another style, this time choosing the Advanced typeand the 'aJink' selector. Define the colour as '*666666' andthe Decoration to None. This will remove the underlineassociated with links. Repeat the process setting the colourto '*CCCCCC and then test it to see the rollover in action.

* O ' c *

' a < > » g t K > b yi « c T r t o m t a n , A d a t e n w y « t t o b < f < m i b u t

c h e c k c o t o u r b « k h ' - c o r r t n t

the 'ttcofdsj

K t o t o f a n l b u t* P r o p w t i e s

F o r m a t ' p » a y < i H S t v t e N o n eFont I Vtydana",

29 Apply classesYou need to target the titles to apply these values. Highlightone of the titles and choose the newly created 'Title' styleavailable in the Style options in the Properties InspectorRepeat the process for the other titles and your pageformatting should be starting to take shape.

t ^ 2 C 0 4

• T t i e r t e o f i i n g t h e b i g h i y o n b a p a t s t i n « i * O / ' c a5»lbiim i& rr»i complete ard k o^n-^rrty b«ng« Pa ra f l c r aud io f Ov p robuoa r " 'A rNaparmf tjlama* Tho^nto*^. A rai»a«e date ''at >'«t to be A/e4 but

out our «9ucbr^« b»ci( caUto^oe far ojfrvr<

H «3}3333 i= ;= £1 il Tv9etj w r a p Q 9 g

ieaisf D Bg B 999966 9t& £2O J I Page ProperJ

31 Style linksWe don't have anywhere to link to at present but we doneed to define the link styles at this point. Select the textintended as links and enter the hash symbol (*) to createan empty link. You'll see the element takes on the defaultblue, underlined appearance.

t w d y , p , t d (

; e n t - f n i l y : V e r d a n a , A r i a l , B e l v e t i e a , a a n a - i£ e & C ' « l z e - x - a M l l , -

e e l c t : # 3 3 3 3 ^ 3 ;

• s i t l e !

f c n t - w e l g f t t : b c l d ;c a l o c T ♦C C C C C C ;

l e t t e r - » p a c i f > a ; l p * r

u u Ii c n t - a l i a : a a a l l e r ;

f o n t - » t y l e ; i t a l i c ;

a : U n l r , a s v i a i t e d [e o l e r ;

t e * t - 4 <

a:hs\*t, atactl.-^ (c c l e t ; ( K X C C C C ;

33 Hand codingYou can complete the base style sheet by manually addingcode to the CSS file. Visited links take on the same attributeas regular links by adding 'arvisited'. Do the same to ensurethe paragraph and table cell contents remain compatiblewith our default text as illustrated.


unique customers - unique hosting

Domain Name Registration less than £4.50 paYour own .co.uk, .me.uk, .org.uk - £8.95 for 2 yearsYour own .com, .net, .org, .info, .biz - £8.95 for 1 year

At Hostway we understand that every hosting customer has unique demands. But there are some thingsyou all agree on.

You want rock solid systems reliability so you can be confident your website is up first time, every time someonevisits. You want the highest quality support and customer service so whenever you need help or have a problem,there's someone with a solution on the other end of the line when you call. You also want innovative, easy-to-useadministration tools because your time is better spent creatively, or on managing your business. That's not allthough. You want support for the latest technologies, and the flexibility that will allow you to build your website andsustain it as it grows, with minimum hassle. And you want all of this at a competitive price.

To much to asl< for? No, we don't think so either.

Universal Features- No set-up fees and a 30-day money back guarantee- Professional support 24/7/365- 99.9% network uptime reliability

fi s y s t e m- SiteControl 3.1 Control Panel

- ASP 3. Microsoft® .NET PHP 4, XML- ColdFusion MX- MS Access, MS SQL2000, MySQL Featuring the Hostway SiteBuilder

f \ • C r e a t e y o u r o w n c u s t o m i s e d w e b s i t e i n m i n u t e sAddi t iona l Opt ions us ing the la test in automated web page creat ion- NEW! Hostway Site Bui lder technology. Chose from a wide select ion of page- Urchin Advanced website analytics templates, images and styles to enhance your

n . . i « o n l i n e p r e s e n c e . F o r m o r e i n f o m i a t i o n , p l e a s e v i s i t- Real/Windows Media Server www.hostway.co.uk/sitebuiider/- D e d i c a t e d S S L V Z y

P a r k & I V I a i l f r o m £ 2 9 . 9 5 p aOur Email-only plans feature a full P0P3/SMTP service,business holding page, domain forwarding and web-basedaccess wherever you are.

Windows® or Linux Shared HostingSilver Plan Hosting from £7.95 pom100Mb web space, 1Gb Traffi c, 5 P0P3 email

Gold Plan Web Hosting £14.95 pcm200Mb web space, 4Gb Traffi c, 10 POPS email

NEW! ColdFusion MX Gold Plan £19.95 pcm200Mb web space, 4Gb Traffi c, 10 POPS email

Platinum Plan Business Hosting £49.95 pcm500Mb web space, 10Gb Traffi c, 50 POPS email

Hostway Dedicated Servers from £l 49,Managed or Unmanaged, our cost-effective range ofWindows® and Linux dedicated servers are built to satisfythe most exacting of demands. Exceptional performance,scalability. And value for money, using premium Intelhardware, from Celeron to Xeon,Visit wviw.hostway.co.uk/dedicated/ for further details.

call us now on 0808 180 1880 • [email protected] • www.hostwayco.ukdomain registration • web hosting • resellers • e-commerce • dedicated servers | chicago • london • amsterdam • seoul • Sydney • Vancouver • tampa

Dreamweaver profect Create immaculate Web page layouts

Online resources

Find out more the Web

Name of site: Dreamweaver FAQURL: www.dwfaq.comThe Dreamweaver FAQ site is an independently-run site thatoffers a variety of tutorials and addresses many commonquestions you may have for developing your own site.

1 » I " M i o ! ! • •

P V I I . .m s M ^

Tree Menu Msgk Relea»ed... iName of site: PVIIURL: www.pFojectseven.comif you want to extend the i pabiiities of Dreamweaver then thePVII site is worth a visit. It has free extensions and tutorials soyou'll soon discover new techniques.

How does it work?

Attach style sheets■ You can change the content within the invisible < head >tag of a page, although this can be awkward through theDesign view and you may need to duck into the code. But ifsuch an option is too daunting then activate the View HeadContent option and a bar of icons reflecting the head contentwill become available above your design. This will makeedits possible through the Properties panel.

c i r c a 1 int? nafi<j | rtjcotcls i

▼ Propertie*

a - ; Href style.CSS■ T i t t e ; I D

R d s t y l e s h e e t ' R e v

■ m k

Cp~,|

• • • ♦ . i

34 Finish off

See if you can finish the design and any additional stylecommands that may be necessary in the right-handcolumn. Use the Photoshop design as a guide after whichour page should be complete and ready to be turned into atemplate, which can then be used across the site.

F i l e V i e w j n t e r t M o d i f y l e x l i o m m w i d t S i e a fi n d o w H e l p

s 4

35 Test and tweakWe now need to test the file in our browser. Don't rely onDreamweaver to render the page as the browser would,because this isn't the most efficient method. See how it

looks first and make any necessary changes to the CSS fileusing the new Rule panel.

• ▼ F i l e s t ? .

le»Orca j v| Itocal view i v||C . 0 ♦ a' ft 1 EI

B Q a t e •Crca (y;\client8\Crca te) 1g r a p h i c s 1T e m p l a t e s 1

C o m m o n ▼

4 h o m e . h t j n

a n d e x . h t m

page,himB] stvte.css

36 Template conversionOnce you've completed the changes choose the File, Saveas Template option at which point Dreamweaver will promptyou for a name and ask whether to update the links. Enter'Page' as the name, and click OK to create the template. Itwill be stored as 'page.dwt' in the Templates folder.

37 Editable regionsBefore it can be used we need to define the areas that can

be changed. We'll also want to select the title, subtitle,content cell, image and right-hand column cell and use theInsert, Template Objects, Editable Region, to provide logicaldescriptions before saving and closing the file.

38 New from templateWe can now start to put our pages together using thetemplate. Choose File, New and select the Templates tab.Choose the Circa site and the page template becomesavailable to base a new page around. Click Create to open anew page.

39 Add the contentWe can now use the template to add the copy andsupporting images for the individual pages. When we areoverwriting the default content in the editable regions wewill be locked out of important aspects like navigation andgeneral layout.

M I PRACTICAL WEBPROIECTS I DREAMWEAVER

Create immaculate Web page layouts Dreamweaver project

C ^ ^ 4 T

* p . t m

m t a< a n M

«

0c,J-JJ .

u p a w t ! □y b i K Yi i w

ElSTtt^bg

t » t i l t n « :

J40 Template navigationOnce you've gone through the process of creating andsaving the individual pages you'll have your site structure inplace from which to reference the navigation links. Open the'page.dwt' file, amend the link locations and save the file toupdate the entire site.

41 Home page updateAt this point you can amend the home page Chome.htm')by associating the CSS file and updating the navigation. Thisis a unique page and the page template doesn't apply thechanges here so you'll need to perform all of thesechanges manually

42 Finish offWe've now gone through the site and manually added localnavigation into the Band and Records areas so users canjump from one title to another without having to return tothe index page. Make sure you check each link to see thatit works ok.

^The final design

I Re^ons outside thebordered a reas a relocked in place byfixing the layout andnavigation in place.T h i s m e t h o d m e a n swe can adapt thetemplate to applychanges to all pages

I When the site iscomplete you'll findaccess to your pagesand assets throughthe Fi les and Assets

panels. We've movedthese to the left sideo f ou r D reamweave rinterface to give themmore space

k The PropertiesInspector is locatedat the hot o f d ie

D r e a m w e a v e ri n te r f ace and a l l owscontextual optionsdepending on theseleaed object

I We made use ofCascading StyleSheets thmughDesign palette. Bycreating tile (SSfileaway from the pageand linking to it wecan then make ed i tsfrom a single file

IA template wascreated to providethe base page layoutfor the content areas.

Objects within theb l u e - b o r d e r e d a r e a sare ava i lab le fo r

adapting to suit thecontent o f the

n e c e s s a r y p a g e s

I For quicker editing ofCSS elements youcan turn to tiie CSS

Properties panel.Select a Tag or Classfrom the CSS Stylespanel and you canm a k e e d i t s w i t i i o u t

having to open tiierelated CSS file


Dreamweaver project Manage content with a database

Rachel Andrew is Director of Web solutions company edgeofmyseat.com(vvww.edgeofmyseat.com) and is an experienced Web developer across a range of technologiesand platforms. She is a member of the Web Standards Project (www.webstandards.ot ) on theDreamweaver Task Force, and is also a published author. She has recently worked as a co-authoron The Dreamweaver Developer's Instarit Troubleshooter published by APress


Lingoleve l le r

Technicalt e r m sbul ldozed

■ RecordsetA recordset is the

collection of records that

are returned when youmake a connection to the

database and use SQL torequest information. Arecordset might containall of the data from the

table, one or selectedrows, or data combinedfrom several tables.

Manage contentwith a databaseNow you've created the basic design of the site, find out how toadd a dynamic MySQL database to manage your content better

■ dding a database to a Web site can save you lots of heartache when itcomes to updating your pages. Dynamic, database-driven content ismuch easier to handle in the long-term than performing manual updates

all the time. However, there are several choices to be made when setting up adatabase. If you've explored the server-side capabilities of Dreamweaver beforeyou will have realised it supports a wide variety of scripting languages, whichhelp you communicate with the database. The program supports Classic ASRASPNET, PHR ColdFusion and |SP which can work with a variety of databases.

Choosing a server model to use can be as simple as finding out what yourexisting host supports, and then working in that. ASP and ASRNET are Microsofttechnologies and therefore will only run on Windows servers, PHR Coldfusion andjSP are cross-platform and can be found running on a whole range of servers. Acommon choice for shared hosting accounts is PHP and MySQL. Both of thesetechnologies are open source so the hosting companies don't have to pay a largeamount in licence fees to provide them.

The open source nature of these technologies, in addition to the fact you caninstall PHP and MySQL for free, makes it a good choice for many people. We will usethis to add a database to the Circa Web site. By the end of this tutorial you will havecreated a MySQL database and used PHP to communicate with it to remotely addnews and gig listings onto the site.

List the gigsIn the Databases panel you'll see the databases 'tbIGigs' and 'tbINews', plus the fields withinthem. These databases were created at the commandline in MySQL. Dreamweaver does notcreate databases itself but allows you to connect and work with them using a scriptinglanguage, in this case we will be using PHP The document displayed in Design view usesdatabase content from 'tbINews' to create a news listing and 'tblGigs' to show upcoming gigs.

C R E AT E D ATA B A S E c i r c a ;

U S E D A T A B A S E c i r c a

1 Create a MySQL databaseIn the MySQL monitor, or in your GUI, create a newdatabase named dbCirca". If you are working in the MySQLmonitor, use the command shown above to create the tablefor the news items. This is displayed in the 'news/index.php'page on the cover CD.

S t t e D e fi n i t i o n f o r C i r c a

A d v a n c e d

C s t e g o r yLocal i f t foPlemote Irtfo

t t M n s i V M rOMlgrtOD e a g n N o t MS t t e L a y o u tF i e V t e « v C o k m w

Cofttrfcute

Server mocM: PHPIitySQL '

Te r t n g s e r v e r f o l d e r : C : \ # p K h e . i i t e « V * i M \

Q Rfifreth remote ^ tet automatkc^

U R L p r e f b c h t « : / / Q r c a /

The URL Prefbc c the loutun of the »ce's

4 Configure your siteNow open Dreamweaver. If your site is configured for HTMLpages you'll need to reconfigure it for PHP and MySQL. PickSite, Manage Sites, Testing Server, Pick PHP/MySQL underServer model; Access: Local/Network. Browse to your testingserver folder The prefix URL is the local URL of the site.

7 The Databases panelYou should now be able to view the database in the

Databases panel. Expand 'connCirca', then the tables, where

you should see 'tbINews'. This will give you a view of thefields that we created in that table. If this works then youhave made a successful connection to the database.


Manage content with a database Dreamweaver project

Power users' tips

Essen t i a ltechnique

To view databases already created in MySQL use the command SHOW DATABASES'. To createa new database simply type CREATE DATABASE db_name'. To use this new database youneed to tell MySQL that you want to work on it, by using the code shown to the right. Tocreate new tables use CREATE TABLE table_name,' followed by instructions about the fieldsthat you want to create.

E t b i 6 i 9 t ( 9 1 9 1 0

C R E AT E TA B L E t b l N e w s (newsID INT NOT NULL AUTO_INCREMENTP R I M A R Y K E Y ,n e w s T i t l e VA R C H A R ( 2 5 5 ) ,n e w s D e s c T E X T ,n e w s L i n k VA R C H A R ( 2 5 5 ) ,n e w s D a t e D A T E ;

I N S E R T I N T O t b l N e w s ( n e w s T i t l e ,n e w s D e s c , n e w s L i n k , n e w s D a t e ) VA L U E S( ' t e s t i n g t i t l e t e s t i n g n e w si t e m ' , ' w w w . t e s t . c o m ' , C U R D A T E ( ) ) ;D o S E L E C T * F R O M t b l N e w s ;

2 News of the worldFirst off, we need to set the basic elements for ourdatabase. The coding shown in the above screenshot willcreate the table for the news items, in MySQL. This creates atable with a unique ID, plus a field for the title, the item, alink, and the date.

5 Make the news

Open 'news.htm', because we are going to make this pageinto a dynamic PHP page and it needs to have a PHPextension. Open the Databases pane of the ApplicationPanel Group and click Choose a Document Type. In thedialog select PHP This will rename the file 'news.php'.

'R«c^dset

N « m e : r s N e w s IConocction; jcorinOrea Hi Otfhe... 1 1 CMXt

'

TtWe: jtblnews H 1 Tes tColumns: © Al O Sstected: [Advaocet

1 HH>

F l t e r i j N o n e ^ -. - V ' t K

Sort: (newsDate j^#{|De$ceftdrtg IH

8 Create a Recordset

Open the Bindings pane of the Application panel. Click onthe V and select Recordset (Query). Fill in: Name: rsNews;Connection: connClrca; Table: tbINews; Columns: All; Filter:None; Sort: newsDate Descending. This will sort all thenews in the database with the newest item first. Click OK.

3 Add dataInsert some data into the table so that we have somethingto work with in Dreamweaver. The SQL statement used inthe above screenshot will insert some test data. Now youshould be able to view your newly inserted data and seehow it looks.

MySQL Connection

C o n n e c t i o n n a m e ; i connCirca

MySQL server; 1 localhostU s e r n a m e ; 1 USERNAME

Password; ; * * *

Database; 1Jb

6 Make your connectionTo connect to the database with Dreamweaver click on '+' in

the Databases pane and select MySQL Connection. EntertonnCirca' in the Connection dialog, MySQL Server as thelocalhost; and add your MySQL username and password.Click Select to choose the database 'circa'. Click OK.

9 Dynamic news itemsDelete all but the first of the HTML news items. Select the

date in this first item. With the date selected, choose'newsDate' in the Bindings panel and drag it over so that itreplaces the date on the page. Do the same with the fields'newsTitle' and 'newsDesc'.


M y S Q L : C R E AT E TA B L E t b l L o g i n { l o g i n I DINT NOT NULL AUTO^INCREMENT PRIMARY

K E Y, l o g i n U s e r VA R C H A R ( I O ) , l o g i n P a s sVA R C H A R { 1 0 ) ) ;

■ Secure your pagesOur admin area is currently open to anyone who might find it.As we want these pages to be secure we need to create a newtable by using the code shown in the above screenshot. Thenadd some user details; 'INSERT INTO tblLogin (loginUser,loginPass) VALUES ('admin';i234')'.

rLii..L.iiflii.i. k«r4>Ha 1 m 1 .■V ' i

m " " 1

1 — C MI J

■ Login pagesCreate a page called 'admin/login.php'. Add a form to it with thefields 'loginUser' and 'loginPass'. Use the User Authenticationserver behaviour 'login user', to make sure the fields match withthe correa values for username and password in the database.Test the login form by losing in at 'login.php'.

■ Restricting accessRnally, secure each admin page by opening the page inDreamweaver and applying the Restria Access to Pagebehaviour If access is denied send the user to 'login.php' where

they can login. If you now try to go to any admin page withoutlosing in you will redirected to 'login.php'.



Power users' tips


■ Formatting datesThe default date format from MySQL isn't a particularfy user-friendly format, displaying dates as yyyy-mm-dd (2003-12-04).To format dates we can use the PHP Server Fomiats, vl.Olextension. To find this extension search the Macromedia

Exchange (www.exchange.mdcromedia.a)m) for PHP Date andthen download the extension PHP Server Formats.

■ Correct the dateDownload and install the extension and restart Dreamweaver.

We need to edit and format that the date so open the Recordseton 'news/index.php', switch into Advanced view, and edit the

SQL: SELEQ newslD, newsTitle, newsDesc, newsUnk,UNIX_TIMESTAMP(newsDate) as newsDate FROMtblnewsORDER BY newsDate DESC.

■ Make a dateYou can now change the date format using the extension. Selectthe field 'rsNews.newsDate' in Design view, and in the Bindings

panel. With ^e field 'newsDate' selected, dick on the arowunder Format, select Date/Time format and then choose aformat - long date formats are less confusing to visitors.

10 Add a link

Drag the field 'newslink' over to replace the link as you didwith the other fields. Having done so, switch into Code viewin Dreamweaver and find the link: <a href="">l<?phpecho $row_rsNewsI'newsUnk'l; ?>l</a> Copy the partbetween and including the <? ?> tags into the HREF

14 Insert the news pageTo insert a news item create a form on a new pageCadmin/addnews-php"). The form will need the fields'newsTitle', 'newsDesc', and 'newslink'. Use the same fieldnames as you're using in the database as this will make iteasier when you come to add the Insert Record Behavior

18 Edit news itemsTo edit the news items we need to create a page that listsall of the items. We can then select one to edit. Save a new

page from your template as 'admin/editnews.php'. Create aRecordset from 'tbINews' in the same way as for the newspage on the site.

11 Repeat regionSelect all of the news items that we have added, makingsure to get the containing <p> tags. In the ServerBehaviors panel click the '+' and select Repeat Region.Check that the recordset 'rsNews' is selected in the dialogand selea Show 10 Records. Click OK to create.

Submit values from: [forml HConnection: IcomOrca |v|Insert table :|tblnews 1*1

'newsTitJe' Gets Value From TORM.newsTit le ' k Text '

|'newtf)e$c' Gets Value From •FORM.newiOesc' as Text'j 'newslink' Gets vaiue from 'FORM.neMLnk' as TextI 'nev sOate' Does Not Get a value.

value; {None

Submit as:

After nsertng, go to: mdex.php

J 3

15 Here is the newsIn the Insert Record dialog, select your table andDreamweaver should pick up the values 'newsTitle','newsDesc' and 'newslink'. For the After Inserting field,browse for 'admin/index.php'; and you will return there afterthe record is inserted.

19 Bind the newsAdd a form to the page Add a radio button named 'newsID'to the form. With this radio button selected, select the field'newsID' in the Bindings panel, then click the Bind button atthe bottom of this panel. This will mean that your radiobutton has the value of the field 'ne^wslO'.

46 1 PRACTICAL WEB PROIECTS I DREAMWEAVER

Manage content with a database Dreamweaver project

Lingo leveller

You can insert data into a table using an insert statement: INSERT INTO tbiGigs(gigDate,gigLocation) VALUES (7004-12-12MONOON: Astoria'); To update a record you liave to Icnowthe ID to be able to tell the database which record to update. Then call an Update statementusing that ID to identify the record. Update tbIGigs SET gigDate > 7004-12-20' WHERE gigID »1; To delete a record call a Delete statement. DELETE FROM tbIGigs WHERE gigID «1;

12 View your workYou can view your work in Dreamweaver by clicl<.ing the LiveData View button. To see the Repeat Region displaying morethan one row of data, add another row into your databaseas in step three. You can also view your page in a Webbrowser from your server.

13 Create an admin areaNow we're going to create some administration pages tomal<;e it easy for the band to add news items and othercontent to the site. Create a new page from the templateand save it in an Admin folder as 'index.php'. This will bethe administration index.

( " I N S E R T I N T O t b l N e w s a n d e d i t i t t o :

( " I N S E R T I N T O t b l n e w s ( n e w s T i t l e ,

n e w s D e s c , n e w s l i n k , n e w s D a t e ) VA L U E S

(%S, %S, %S, CURDATEO)

16 Insert the dateWe are adding the data using the MySQL functionCURDATEO', which adds the current date. To do this we willneed to add this into the code. In Code view, find therelevant section and add the scripting code as we haveshown you above.

17 Test the pageDreamweaver will probably throw a strange error when youtry to save the page (it doesn't like people editing it'sinserted code!) Ignore it, and test the insert page out inyour Web browser You should be able to enter data in theform, and then see it on 'news/index.php'.

s r

r - , - -

o » ♦ i a- 1

20 List the itemsDrag the field 'newsTitle' from the Bindings panel to displayalongside the radio button. Now select this whole line(including the containing <p></p> tags, and in theServer Behaviors Panel select Repeat Region. In the RepeatRegion dialog select Show All Records. Click OK to preview.

21 Submit the formAdd a Submit button to the form. Select the form and type'editnews2.php' in the Action field of the Properties Inspector,setting method to 'GET'. Create a new page named'admin/editnews2.php'. Now load 'editnews.php' in thebrowser, select a radio button, and hit Submit.


■ SQLStructured Query Language, or SQL is the language used to talkto databases. In Dreamweaver the recordset dialog can writebasic SQL to retrieve data. For more advanced queries you willneed to use the Advanced Recordset Dialog and understandmore of the SQL language.

■ DatabaseA database is a structure for storing information, using tablesand rows to make it easier to retrieve and sort that information.

Databases that you will come across are either file based (suchas Microsoft Access) where a file is the database and can be

uploaded it to your host, or server based like MySQL.

On l ine resources

Find out more on the Web

Name of site: Sitepoint PHP and MySQL tutorialURL: www.sitepoint.com/article/228Even if you don't follow the later stages of this tutorial, you willneed to install PHP and MySQL. This tutorial gives accurateinstallation instnjctions for Mac, Windows and Linux.

1 - 1

Name of site: Dreamweaver MX supportURL: vvvvw.dreamweavermxsupport.comThis Web site focuses on the PHP and MySQL support inDreamweaver MX, It provides helpful articles and tutorials forthose wanting to develop Web applications using this particularserver model.

DREAMWEAVER I PRACTICAL WEB PROJECTS 1 47


. : 3 I

22 Create a filtered RecordsetOn 'editnews2.php' add a form that's identical to the one on'addnews.php'. Name the fields in the same way. Create aRecordset but this time, in the Recordset dialog under Filterselect: 'newsID - URL Parameter newslD.' This Recordset will

contain the record with the 'newsID' from the OueryString.

23 Populate the formExpand the new Recordset in the Bindings panel. Drag'newsTitle' to the newsTitle form field, and do the samewith 'newsDesc' and 'newslink'. Create a hidden field in

your form named 'newsID', select it then choose 'newsID' inthe Bindings panel. Click Bind.

[ i24 Update the recordSelect the form on 'editnewsZphp'. Now pick Update Recordin the Server Behaviors panel. Select the connection andtable in the dialog. The fields should match as in InsertRecord, and 'newsID' selected as Primary Key Test the formin your browser by selecting and editing a news item.

25 Delete recordsCreate a new page named 'deletenews.php'. You shouldcreate this page the same as 'editnews.php', with a dynamiclist of news items, each with a radio button. This pageshould submit to 'deletenews2.php'. On 'deletenewsZ.php'create a Recordset filtering 'newsID' as in 'editnews2.php'.

26 Break a recordOn 'deletenews2.php' drag the fields 'newsTitle' and'newsDesc' onto the page. Add a form containing a hiddenfield named 'newsID' and then bind the value of 'newsID' to

this field. Add a Submit button. This screen gives the user achance to check that they are deleting the correct record.

27 Applying the behaviourSelect Delete Record in the Server Behaviors panel. In thedialog that appears, complete the form using the settingswe've used in the above screenshot. After deleting, go to'index.php', then click OK to apply the required behaviour tothe database.

28 Test the scriptsOpen 'admin/index.php' in Dreamweaver to add links to the'editnews.php' and 'deletenews.php' pages, testing youradmin pages from here. You can now add, edit and deletenews items and view the results on the page within theWeb site Your news item section is now complete!

C R E AT E TA B L E t b l G i g s ( g i g I D I N T N O T

NULL AUTO_INCREMENT PRIMARY KEY,

g i g D a t e D A T E , g i g L o c a t i o nVA R C H A R ( 1 5 0 ) ) ;

29 Gig listingsCirca's upcoming gigs appear in the sidebar of each page.We can add these to the database as we did the news

items, making them easier to update. Create a table named'tbIGigs' in MySOL. Use the code shown in the abovescreenshot to set the table.

I N S E R T I N T O t b l G i g s ( g i g D a t e ,

g i g L o c a t i o n ) V A L U E S ( ' 2 0 0 4 - 0 1 -

1 8 ' , ' L O N D O N : A s t o r i a ' ) ;

30 Insert some dataOnce again, insert some sample data to begin working with,use the coding shown above to do this. The format inwhich we enter the date into MySQL is important and itmust be yyyy-mm-dd. Dates inserted from pages must alsobe in this format to be recognised by MySOL.

48 I PRACTK^LWEBPROjECTS I DREAMWEAVER

seriously easy web hosting

S 0870 333 3746

<7.95■ PER MONTH

W e b F u s i o nEntry M

WebFusion Entry Package:• 600MB Lightning-Fast UK Web Space• 7GB Data Transfer (Bandwidth) per Month• MyServerWorld 10.0™ Control Panel• FREE and UNLIMITED 24/7/365 phone and E-mail support• Extensive On-line Help • Mailing Groups • MySQL• SSI • PHP4 • Site Access Package • 50 Sub-domains• Automatic Graphical Access Statistics • FTP Access• 3 0 0 P 0 P 3 E - M a i l A c c o u n t s • U n l i m i t e d A n n o u n c e m e n t L i s t s• Own CGI-BIN plus Pre-installed Scripts • MS Frontpage• Unlimited E-mail Addresses • Unlimited Autoresponders• Webmail • Spam filtering • Easy On-line Administration• S A M E H O U R S E T U P • 3 0 D AY M O N E Y B A C K G U A R A N T E E

fi W e b F u s i o nH o m e

P E R M O N T H

WebFusion Home Package;All of the above except:

1500MB Lightning-Fast UK Web Space

^^lOGB Data Transfer (Bandwidth) per Month• 500 POPS E-Ma i l Accoun ts• ASP, Miva and MYSQL Scripting Languages• Free use of Secure Server• Free MS FrontPage extensions• 1 5 0 S u b - d o m a i n s• 3 MySQL

S t a t e - o f - t h e - A r t D a t a C e n t r e

Our state-of-the-art data centre is located within our facility in

"With WebFusions' great new packages, there's aseriously easy hosting account to suit everyone."

P h i l i p p a F o r r e s t e rTV presenter and technology expert

The best control panel in the world!MyServerWorld™ 10.0 Control Panel• All Our Usual Features Improved!• New Web Site Statistics with Graphical Reports• Power fu l On- l i ne Ma i l C l i en t• Back Up your Web Site On-line• Manage MySQL Features On-line• Data Transfer Manager• Web S i t e L i nk Checke r and HTML Va l i da to r• Trace and Ping your Site• Automatic Script Execution• Many More New Features!

24 / 7 / 365 FREE Technical SupportAll WebFusion hosting packages come complete with

Nottingham. It houses our network of over 4000 servers. With 24/7/365 free telephone and e-mail technical support, plus anmultiple connections to the net, fire protection and backupgenerators, we are in a position to offer you the reliability andstability you have been dreaming of!

extensive online help and information system. Unlike ourcompetitors, we believe in providing the very best after salescare and technical support.

V I S A a <S)s

e - m a i l u s : o r d e r o n - l i n e : H o s t

[email protected],uk w w w . w e b f u s i o n . c o . u k


Lingo leveller


■ PHPPHP is an acronym for PHP; Hypertext Processor, which is ascripting language that is especially suited for use on the Web.It can be embedded into HTML documents, as we have seen inthis tutorial. Languages such as Peri are not embedded intoHTML, which means that if you want to include dynamiccontent when using such a language you have to write a scriptthat outputs HTML along with the dynamic content. With a

language like PHP you can create your HTML page as usual,give it a PHP file extension and then insert the bits of PHPnecessary to add to your dynamic content.

PHP code is executed on the server, all that the browsersees is straightfonward HTML. Because any dynamic content ispulled in before the page goes to the browser there are noadditional browser compatibility issues to worry about whenusing PHP

31 Create the listingThe gigs listing appears on each page, but let's work on'band/index.htm' to start with. Delete all but one of the

sample items. This page will now need to be a PHP pageso change the Document type to PHP Create a Recordset,named 'rsGigs' seleaing from 'tbIGigs'.

♦1-1I

32 Forthcoming gigsWe don't want to show gigs that have passed, so we cancreate our Recordset to only select those with today's dateor a date in the future. Switch into Advanced in the

Recordset dialog. After SELECT * FROM tbIGigs add:WHERE gigOate = CURDATEO. Click OK to create

How does i t work?

The Advanced Recordset dialog■ When we created a Recordset for the gigs we used theAdvanced Recordset dialog, which allows the creation of morecomplex Recordsets than the simple dialog. To switch into thisdialog, open the Simple Recordset dialog and select Advanced.In the Advanced Recordset dialog, name your Recordset andselect a database as usuaL You can then build up SQLstatements. The advantage of doing so in the dialog as

opposed to editing the SQL on the page is that you can giveDreamweaver default values to use in Live Data view for pagesthat require input, such as a page that uses a value passed onthe OueryString.

l i e *

a o ( » v

« p > i i M f t e n o

o r e 3 o * • ' f

0 i

i

\(

^ N . r « . w M i 1 1 ;

35 Create the IncludeCreate a new document by going to File, New, DynamicPage, PHP Delete the HTML markup within that new pageand paste in the copied 'ColumnRight' code. Save this pageas 'gigs.php' in a new directory named 'Inc'. You can nowdelete the contents of 'ColumnRight' from 'band/index.php'.

39 Gigs administration pageCreating pages to administer the gigs listing follows thesame process as the steps for creating news. Create a page'admin/addgig.php' and add a form to this page. This formneeds to contain a 'gigDate' field and a 'gigLocation field' tomatch the fields in the database table 'tbIGigs'.

36 Add the includeRemain in Code view in 'band/index.php'. Place your cursorin the area where you just deleted the gigs code and selectthe PHP tab of the Insert toolbar Click the Include button.Between the brackets type 'inc/gigs.php'. So the seaionlooks like: <?php include('../inc/gigs.php'); ?>.

A a

- e , B

" 3 a

' 9 F H P M y S 0 C D M U p M »

40 Insert datesWhen we created the table we mentioned that MySQLrequired dates in a certain format. There's a Dreamweaverextension, PHP MySQL Date Update, that helps ensure yourdates are formatted correctly Download it fromwww.dmxzone.com and instal l i t into Dreamweaver

50 I PRACTICAL WEB PRO|ECTS I DREAMWEAVER

Manage content with a database Dreamweaver projectYou may decide you need to add another field to an existing database. In this situation youneed to use an Alter statement. ALTER TABLE tbIGigs ADD gigTime VARCHAR(50); To view thetable use the command DESCRIBE table.name'. To remove a table altogether use thecommand DROP TABLE tabte_name' and to delete the entire database use DROP DATABASEdatdbase_name'. Remember, these actions can't be undone!

Power users' tips

o w : O

33 Display the dataDrag 'gigLocation' and 'gigDate' from the Bindings panel intotheir location. Select the entire area, including the containing<p></p> tags, and apply a Repeat Region from theServer Behaviors panel. Opt to show all records in thedialog, as our Recordset will expire old records.

< ? m y s q l _ » e X e c t _ a b ( t a t t > t * g e _ f t « a C l r e a , ( c H U t C x r c K ) ;- ' S E L E C T < M S R £ T i g S a t e > -

r i j i v - « y » q l _ 5 u e n - ( » a a e s s _ i ' » S i 3 » , » c i » a C i r c » ) o r• B y s q W e t c t i . M S O C f t i s e i s # ) :

t g t > m r w » _ j a 5 l 3 » • m ^ ' s q l _ 2 t i a _ r o v s ( t f > G l 3 S ) ; ' > >

< p x u D j 8 r o » " . . / a r » p i i l c 8 / c d j / i . g l f ' w i d i h » * 1 0 9 ' h e i g h S " * l l l * v s p a o e « " 5 * x / p >< p x i m a s r e - V . / 9 r * p b i c » / » u b t i t U » / 5 i g » . g i f - v i d t h . - l l S - f w i a h f - 3 5 - ><>ptv <K {

< p x s p « a t c h e ' x / t p s n x b r )< s p » n c l a f a » * t i t l e S t o l l ' X ? p b p e c h o » r e w _ « S i 9 » ( ' 5 i s L o c « t i » ' j ; ? X / » F a D X / F ><■> 1 * ^ ) ( » r o v _ r » S l 3 s - « y » q l _ f t i c l ) _ * M o e ( » r » S i 9 S ) ) j

37 Add the PHP codeWe need to add the PHP code that creates the Recordset to

gigs.php'. You'll find this at the top of the page'band/index.php'. Copy everything between the PHP tags,not including the Connection include at the very top of thedocument, and paste it above the existing code in 'gigs.php'.

41 Insert the recordOnce installed, the extension updates the defaultDreamweaver behaviour. To insert the gig into the databaseyou need to apply the Insert Record server behaviour asyou did for the news items. After saving the page, test outthe script by adding a gig from the page.

V s e e - ' , . / g i f s p h l e a / s f c c u i

. • X / d » T X z d >

34 Add gigs to every pageThe gigs appear on every page of the site. We could go anddo the above actions to every page, however this isunnecessary as we can make this section a PHP Include.Switch into Code view and copy all of the code within thetemplate editable region for 'CclumnRight'.

38 Add the include to the siteAdd the gig listing to each page by opening the page andchanging it to a PHP document. Add the Connection include(from the top of 'band/index.php') to the top of the page,and the 'gigs.php' to replace the HTML gigs listing in theeditable region ColumnRight.

42 Update the pageWe created an update page Ceditgig.php') by first creatingthe list of gigs held in the database (as on 'editnews.php'),creating a Recordset that selects the list of gigs from thedatabase; binding the 'gigID' to a radio button; before usinga Repeat Region to loop through and display them.


■ Create CSS classesIf you are creating a lot of forms it's wise to set up classes forthe overall look of the fields and buttons if. This can be

achieved with CSS classes. As with the admin section of this

site, create the first form and this will save you time, as youneed to apply the classes for each remaining fomi.

■ Set the stylesIt's easy to create GS classes in Dreamweaver. Click the NewCSS Style button in the CSS panel, name your class, then use theBox category to set the width, margins and padding. Use theBorder category for borders, and the Bacl round to give abackground colour and then use Type to set the font styles.

■ Edit the stylesOnce the classes are applied to your form fields, it makes itmuch easier to change the look of them. If you decide at a laterpoint in development that they need a different style, you canedit tiie styles in the stylesheet and all forms will then take onthe new look .



Lingo leveller


■ MySQLMySQL is an open source database server. As with PHP you donot need to pay for a licence to install MySQL on your computerin order to test out your Web site. MySQL is a Database

Management System, and besides being able to storeinformation in tables with columns and rows, a database

management system gives you the tools needed to work withthis data, to search and process it.

You can either wrork with MySQL by typing SQL queries atthe command line, as we have been doing to create the tablesin this article, or you can install a graphical user internee thatwill give you a more familiar, visual environment in which towork. The MySQL Control Centre, downloadable from the MySQLWeb site (www.mysql.com) is a decent, easy-to-use applicationwhich is open source, so it's free to download and use.

43 Update the gigSave the page 'editgig2.php'. Create a form with the samefields as 'addgig.php'. Create a Recordset that filters on gigIDthen bind the fields from the Recordset to the form fields.Don't forget to create a hidden field for 'gigiD'. Use theUpdate Record server behavior to update the record.

44 Delete pageThe page 'deletegig.php' is exactly the same as the pageeditgig.php". It contains the form with an ID and the recordslisted and uses a Repeat Region to loop through the recordson the page. Make sure that you name the radio button'gigID' and bind the value of 'gigID' to it.

How does it work?

Installing extensionsH There are many extensions available for Dreamweaver users,v^ich can add client-side and server-side functionality to your

pages. Many of these extensions are free to download and usein your sites, but otfiers are commercial. When you consider theamount of time tfiey save in coding the functionality yourself,the cost isn't usually bad at all! The best place to start whenlooking for an extension is the Macromedia Exchange(www.macromedia.com/exchar>ge). Here you can search forextensions, read about them and how they are used and seethe rating given » an individual extension by other users.

I t )

i . t t / " '

45 Delete the gigOn the 'deletegig2.php' page, create a Recordset that filterson 'gigID'. Now display the record that you are going todelete as a confirmation to the user. Add a form containinga hidden field with the value of 'gigID' and a Submit button.Apply the Delete Record server behavior to the form.

'J o ~ .

f / 'if. —

47 Test the siteNow you've completed the database and administrationpages, test he site by adding, editing and deleting somedata, then view the results on the pages of the site. You cansee the news page in the screenshot displaying news itemsand gig listings on one page.

46 The finished admin areaTo finish off open 'admin/index.php' in Dreamweaver andadd links to your gig administration pages; Add Gig('addgig.php'); Edit Gig ('editgig.php') and Delete Gig('deletegig.php'). Your administration area is now completedand you are able to navigate through the content.

2

3

<

s

«

7

fi

»

t o

[

f

c ^ p h p

- " l o c a l h e s c ' j

» d « t 4 l * M _ e o a n C i r e * - " c i r c a " ;- - r o o R _ u s t R N A M E * i

- "y00R_PXSSit(»D';l eo f t aC i re * - »y8q l_pconn«c t<»h6a t f tMM! „ee« iC i r f t * , »u» * r f tw«_cen

? >

48 Move to a live serverAt this stage of development you might be thinking ofmoving the site to your live server. To do so you will needto re-create your database on the server. Don't forget tochange the information in 'Connections/connCirca.php' to theusername and password provided by your host.

S2 I PRACTICAL WEB PROjECTS I DREAMWEAVER

Donhost means business.AN ADVANCED SERVICE FOR BUSINESS USERS AND RE-SELLERS

We provide high-performance, dependable B2B hosting, packed full of features and facilities tomake your site a formidable business asset. Our reputation for consistency, reliability and customer .service is emphasised by industry forum comments and customer feedback and testimonials.Whatever business you're in, whatever stage your business is at and whatever your level ofexperience, we can boost your online presence and add value to your operation, right now!Think of us as your Internet partner. Today, we're as important to your business success as yourother professional advisers.

W e b s i t e .Out servers support all frequently-used site technologies including ASP,ASP.NET, Access, SOL Server, Perl, PHP,mySOL, FrontPage and CGI enabling thecreation of dynamic, data driven web sites

E m a i l .Collect your mall from mailboxes on our servers, forwardit to your existing address or have it delivered to your corporatemail server. Auto responders enable you to reply quickly tocustomers or set-up out of office replies. Plus web browser-basedaccess to your mail when you are out of the office.

E - C o m m e Tc e .i28bit SSL & PGP encryption for secure e-commerce enabledw e b s i t e s .

Graphical Stats.View graphic usage statistics for your web sites, see how many peopleare visiting your sites, where they come from, what search keywords theyuse to find you, and more.

E x c l u s i v e C o n t r o l P a n e lOur exclusive web-based control panel puts you in real-time control ofevery aspect of your hosting account.

Exceptional Customer Support.We are committed to providing the best service and technical supportfor our customers. Our expert team will solve your problems and deliverinformed solutions by telephone or email for no extra charge.

Integrated Domain Management.Comprehensive domain name registration, renewal and managementfacilities are integrated into your hosting control panel. Preferentialpricing on domain names is offered to resellers.

Money Back Guarantee.We're so confident we will surpass your expectations that if you areunsatisfied you can cancel your account and claima f u l l r e f u n d .

"It is vital to the image of our own company that the hostingservices offered via Donhost are speedy, reliable and support awide range of facilities. This we have without a doubt, thanks toyour dedication to your customers' satisfaction. Thank you."Peter Lewis, Live Connections Ltd.

"Donhost provides a brilliant service which seems to be gettingbetter and better. A rare thing nowadays."V i c k i J o n e s , F l e x i H o s t . k' 4

V SIGN UP NOW ^SPECIAL OFFER!

Sign up NOW and enjoy / daysfree service.Simply enter the special code - at;^ w w w . d o T j h o s t c o . u k

or call 084s 226S907

m S T A N T S E T U PLogin and ststrt using the account straight

away whether you sign up online or over the telephone.

From £8.99 per month or£89.99 per year

> i i r v M j r r w t i c i i i e r

V-—m From £8\ 7 ^ N o r n

t e r m i i

No minimum contract,l i m u m c o n t iset-up fee.i t e a t a n y t i nterminate at any time.

Call: 0845 226 5907 Or visit: www.donhost.co.uk A t ' ♦ ;

M i c r o s o f t ,

. Q fi t t Ripe^ Amamoero,Nominet.w/r pow««<n.,wo..

N c c . . . . O C l S C O 'P o w M d b y F r e e B S D

d o n h o s t .power in your hands

The Dreamweaver gallery

m m m m r■ ■

I I \ j I I I k l L I I I

Find out what Dreamweaver's made of with our round-up ofsome of the best sites built with the program

I ou'd be hard pushed to find a designer whodoesn't agree that Dreamweaver is top dogwhen it comes to editing Web sites. Quite

simply, no other package delivers quite the samerange of tools and support than Macromedia'sflagship application.

If, for some reason, you're still having doubts overthe program's ability to create stunning pages, thenyou need look no further than the Web as a source ofinspiration. There are plenty of sites out there that big-up the work of Dreamweaver die-hards, including

Macromedia's own online showcase atwww.macromedia.com/showcase. Another goodplace to start looking for Dreamweaver-designed sitesis DMXZone (www.dmxzone.com), where you can alsofind tips and tricks placed there by experienced usersof the program.

We feature some of the finest examples ofDreamweaving that we've found in the last fewmonths. Feel free to write in and suggest yourfavourites, or even sites that you've crafted yourselfusing the program.

■■■■ ■ ■ ■■■ m m m r■ ■

I I I

■ BECKONSCOTwww.beckonscot .comThis inventive Web site proves that theworld's oldest model village is by nomeans behind the times. While the sitewas built over 75 years after theBuckinghamshire-based attraction, ithas already attracted its fair share ofvisitors, with people pouring in to readmore about the undersized village.Worthwhile ports of call include themultimedia section, which includespanoramic photos, e-cards anddownloads; and the excellent VirtualVillage where wannabe megalomaniacscan conjure up their own modelvillages then share them with the restof the online community

UTCHUP{R(ARm i m

D U T C H S U P E R C R R G H R L L E N 6 E

■ DUTCH SUPERCAR CHALLENGEwww.supercarchallenge.nlHolland isn't the first place youdassociate with fast cars, but this siteproves that the Dutch know a thing ortwo about burning rubber Built entirelyin Ultradev MX, the slick site was createdfor a super-charged race in theNetherlands, in a style based on the filmThe Fast and the Furious. Connected

with an access database and admininterface, Ultradev makes it easy toupdate information on a daily basis withrace results and details of each driveralso available. Every driver was alsogiven his own login where he candisplay his own news and photos fromthe race.

■ lORDACHEwww.jordache.comAs Eighties-chic continues to fall backinto favour, why not take a trip downmemory lane with a visit to thejordache home page? The site,designed using a combination ofDreamweaver and Flash, allows visitorsto download some of its famous jeanscommercials from the 1980s. Aftermarvelling at the big-haired Americanteens in their turn-ups and denimjackets, visitors can peruse jordache'srange of slacks via the site's mainmenu, which can be dragged anddropped anywhere on the page. Thesite includes a funky soundtrack,allowing the user to select the tunes as

54 I PRACTICAL WEBPROIECTS I DREAMWEAVER


■ ■ ■■ ■ ■ ■ ■■ ■■ ■ k . B H H B ■ ■■■■ ■■■■ ■ ■

■ CASINO MAGICwvvw.casinomagic-blloxi.comThe excitement of a good old-faslnionedUS casino is perhaps not the easiestthing for a Web site to get across to itsaudience. Yet this vibrant site manages toconvey the atmosphere of a night on theslots at this swanky American slot shacl(.The Casino Magic site was constructedentirely with Macromedia productsincluding Ultradev, Fireworks and Flash,and is used as a key promotional tool forthe casino to improve customer relationsand attract more punters. The site boastsstacks of dynamic functionality, includingfacilities that allow users to makebookings or enroll as a member with thecasino. This back-end system also allowsthe casino to run frequent special offers.

■ STIOHNSTONEFCwvvw.st johnstonefc.co.ukWhile Rangers and Celtic are allbu t un-ca tchab le in the Sco t t i sh

Premier League, it doesn't meanthe other clubs can't competewith the Old Firm on the Web.

St. johnstone's Ultradev-

developed site is a match forany of its rival team's onlinehomes. Graphics are kept to aminimum, making it easy toload pages and the navigationsystem makes it as easy to findyour way around as it is forCeltic to turn over its oppositionweek in week out. By usingMacromedia Ultradev, the site'sdevelopers are able to updatenews content in a flash.

EDEN D lSTRia COUNCIL

wvvw.eden.gov.uk jNestled among the breathtakingsurroundings of the LakeDistrict, Eden is just as beautiful jas the infamous biblical garden,only without the deviousserpents. The Web site ispicturesque, and is a testamentto the power of Dreamweaver.Despite being rammed withinformation on the town, thecounc i l and the loca l

communities, the site is wellorganised and information iseasy to find thanks to theintuitive manner in which thenavigation has been designed.

O u r V t u o n " I n f o

B U R G E R K I N G

■ BURGER KINGw w w . b k . c o m

The fun-packed online home of thismultinational cholesterol provider hasbeen brought to life thanks to theStudio MX suite. Not only does itfeature mouth-watering images of therestaurant chain's burgers, but users canset their stomach rumbling even moreby reading up on their succulentingredients. Designed with kids in mind,there's a series of burger-themedgames to keep young minds occupied.There's also a facility for joining theofficial BK club, where children can signup for free screensavers and a freeburger on their birthday

■ LAW SOCIETY OF SCOTLANDwww.lawscot.oig.ukIf you live north of the border andyou've got a problem with the law, thenvisiting the Law Society of Scotland siteis the next best thing to calling out theA-Team. The mammoth site, which wasassembled with Dreamweaver, shouldbe your first port of call for any gripesyou have where you feel your rightshave been infringed, or if you're lookingfor legal representation. It boasts a hugecontacts database of lawyers andsolicitors, which can be searched basedon the area of expertise, or simply bylocation. There's also a cracking Dial-a-law section, where users can accessinformation on legal matters rangingfrom bullying to unfair dismissal.

A b « « t t t i M L * w

W k a t i * S < « t > L « w

F i n t M * 1 e r M < h « «

M M t ^ D « U M <

u r i t f c .

M t c i t e n I

A t c r w H t a d

S v h c l t M * D * U H >

( M u f I k * S « r v k M » f *

U P D A T E

Ia-Hmm L«v»y*«« Craup

Dial-a-Law is tha Law Society of Scotland's information andreferral service. With 3 library of over 40 different legal topicsfrom family law to emplovment law, from making a will to

: choosing a solicitor, it gives you clear down-to-earthinformation about a wide variety of situations we come across■ in everyday life.

Simply choose a topic from the drop down list below, After/i-ju' vi read the script, you can choose to have details of asolicitor dealing with that category of work, or return to thispage or go to the Society's Firms and Branches database.

Ifaul+ygoqdsU M d R « l a «

C f t i i U c t f

L R U J S O C I E T S S O F S C O T L H N D

DREAMWEAVER I PRACTICAL WEB PROjECTS I 55


B E C K H R m i T I S

David Beckham and Michael Owen jump out of an Aeroplant

Michael Owen, Beckham has to stop and ask for directions

Why do posh and beck's wash their hair in the sink...?Cos thafs where your supposed to wash vegetables.How do you make Posh and Beck's laugh on Friday?Tell them a joke on Tuesday.What did Posh say to Beck's when she found out she was prAre you sure i fs mine David. . . .?

What 's the d i f fe rence between Dav id Beckham and a superThe trolley has a mind of it's own.

■ BECKHAMITISw w w . b e c k h a m i t i s . c o m

Old 'Goldenballs' may now be plying his trade on the otherside of the continent but that hasn't halted the British public'sinfatuation with the mop-haired dead ball specialist. ThisDreamweaver-built site is designed to satisfy anyone who'spining for England's skipper, delivering a range of facts, figuresand fun. There are complete sections devoted to Becks' hair,his tatooes and even a page on his wife's innermost secrets(not that they're very secret anymore). There's also a jokessection, which includes the classic: "What's the differencebetween David Beckham and a supermarket trolley? Thetrolley has a mind of its own." Boom boom!

■ DESTROY A TOYwww.desttoy-a-toy-land.co.ukDubbed as the place where 'bad things happen to bad toys', this inventive, if slightlydisturbing, site is perfect for anyone who's been let down by their Teletubby or CareBear. The site encourages visitors to send in photos or videos of themselvessmashing up their beloved toys. If you want to see teddy bears sent into space or aplastic dinosaur shot to bits then this site is for you. None of this insane japery wouldbe possible without Dreamweaver, which was used to build the pages.

fWT] NOWWASHYOURHANDS3. UNITEDKINGDOMV J D E S I G N C O M PA N Y

1 HOME tHFORMATION PORTFOUO DOWNLOADS N W Y H S H O I ^ C O N T A C T U S

■

1 NWYHPORTFOLIO

■ NOWWASHYOURHANDSwww.nowwashyou rhands .comNowwashyourhands is a design company with a difference. It was originallyconceived in 1999, with its creator, Tim Spear, using Dreamweaver to put together anonline portal for designers, highlighting examples of great Web design andproviding an outlet for his own creativity The site's popularity has blossomed overthe last few years and it's now become a regular haunt for designers across theworld. It's constantly updated with all the latest design news, and there's now evenan online goody bag, where visitors can download their own wallpapers andgames, plus take part in a unique online version of Slaps, which was developedespecially for the site.

M 1 PRACTICAL WEB PROIECTS I DREAMWEAVER

■ ■ ■■

■ ■■ ■ ■r

■ SATURNw w w . s a t u r n . c o m

Designed in Dreamweaver to promotethe latest range of luxury saloons fromthe distinguished American automobilemaker, Saturn's Web site oozes qualityand practicality, much like the vehiclesthemselves. The site, developed byGoodby Silverstein & Partners includes aseries of wonderful interactive Flashshowrooms for each car, which can beaccessed by clicking on the appropriatevehicle on the home page. You can thenrotate the car, and apply different colourschemes to customise it to your likingbefore arranging to take it for a spin bybooking a test drive online.

■ CIDAw w w . c i d a j n c . c o m

This clean, crisp site is used topromote Cida, a firm specialisingin architectural, civil andlandscape engineering. The sitewas built using the winningformu la o f Dreamweaver and

UltraDev and boasts a tightly-integrated database as well as ahighly intuitive navigation system.One of the nicest touches on

Cida's site is the 'Translate' featureat the bottom of the page, whichallows you to instantly convertthe text into the language of yourchoice. There's also a rather neat

facility for downloading PDFdocuments outlining the latestc o m p a n y n e w s .

The Dreamw ver gallery

■■ m m m r - ^ m m m

■ THE OPINION EXCHANGEwww.opinion-exchange.com IWe all have an opinion, whether Iit's who should run the country Io r w h i c h m e m b e r o f A t o m i c ]

Kitten looks the best in a shortskirt. The purpose of this site isto let people vent their opinionabout any subject. Createdusing Dreamweaver, Flash,Authorware, ColdFusion andContribute, advocates of freespeech will love the range offeatures, which includes opinionpolls, articles, discussion boardsand chat forums, allowing usersto get their point across clearly

/,QcftPfiClTY /f PERFOfiMfiHCE CJ TODAY'S HEflDLIHESV^ght th» n«w Saturn ION, may went to read this. Bscsusa

■ LIGHTBULBS DIRECTwww.lightbulbs-dlrect.comYou may not think that selling lightbulbs for a living will pay the rent, butsome bright spark has managed to tapinto a largely untouched market withthe launch of this mail order light bulbsservice. In its first fortnight of operation,the Dreamweaver-built site reportedglowing sales figures, attracting severalthousand pounds of orders. The cleanlydesigned site includes some smartproduct search capabilities, including aunique Bulb Finder, which lets you pickout the perfect light source for yourneeds because they all have differentpurposes you know!

0 1 4 9 4 7 2 3 2 8 6Yo u r ^ ^ Q p p i n q ' 5 c u r r e n t l y e m p t y

Customer Login | Reg

Home ; Atl About Lighting Bulb Finder My Account : Ordering Cc Delivery | Contact Us

P Site t

□ s a

( £ S p e c i a l O f f e r s l

C l i t k f o r l a t e s ts p e c i a l o f f e r s .

B u l b F i n d e rPlease choose a method by which to search the site...

Select a specific category which fits Select a specific technology which frtsy o u r b u l b s p e c i fi c a t i o n ; y o u r b u l b s p e c i fi c a t i o n .

d 52 I Comps« Huor«sc.t.l^ I n t e r a c t i v e To o l s

L I G H T B U L B S D i R E C T

Rld0« & 8nHTtin«r Priory T«» & Coffa* Strategic Solubis S«rvk;a*

- - - " • f ' , ^

Our obiective i« to provide the best possible serviceconsistently, lo every pen of me ccffee trade, growers,&hippars. supplieqi, roasters and processors

I t n B r e m l n e rM M t a a i n q D 4 r « l M

C O m P L E T E C O F F E E

■ COMPLETE COFFEEwww.completecoffee.comAs one of the main ingredients used inthe production of Practical Web Projects,coffee helps the editorial team ensurethat the magazine goes to the printingpresses on time, and this stylish site isdedicated to purveyors of our favouritebrew. Complete Coffee, provides visitorswith the chance to find out more aboutthe coffee industry through a series ofelegant online interfaces. The silkyimage transitions on the home pagegive the site an instant appeal andexcellent use is made of rollovereffects, making it a pleasure tonavigate. Highlights for caffeine freaksinclude a downloadable coffeescreensaver and an eye-catching worldcoffee production map.

DREAMWEAVER I PRACTICAL WEB PR0IECT5 I 57

Dreamweaver project Dazzle your guests with interactivityYour expert guide:

M a r kShu fflebo t tom

MARK SHUFLEBOTTOM is a regular contributor to Practical Web Proiects andteaches on the 6A Hons Interactive Media course at Bournemouth University.Mark has developed a love for designing Interfaces, and you can check outhis vy/ork on his online portfolio at wwv^.markjsb.co.uk. Regular readersmight find some of these creations very familiar!

dazzle your questswith interactivityMake a lasting impression on visitors by creating spectacularintro pages, animations and online games with Flash MX

The brief

Task: Add interactive

elements to the site,

including an intro page andplatform gameDifficulty: IntermediateTime I need; 2-3 hours

On the CD


ow that we've created the Web site and built a dynamic contentmanagement system, it's time to have some fun with Flash. Over thefollowing few pages we'll demonstrate how to keep visitors glued to your

site, by adding a series of slick interactive elements.First up, we'll explain how to build an impressive animated Intro page to welcome

visitors to the Circa site and give them a flavour of what's to come. By keeping thegraphics, fonts and colour scheme as close to our Web page design as possible, wecan enforce the Circa branding, and breed familiarity with specific design elements.We'll then go on to demonstrate how to make a glowing lava lamp style sphere,which will then be added to our Dreamweaver template and displayed at the top-right over every page. This piece of eye candy should help to give our layout anextra graphical edge, and because of the compressed nature of the SWF format Itwon't put any unnecessary strain on users with dial-up modems.

The final part of our Flash primer Is perhaps the most exciting, as we show youhow to make an action-packed, band-themed platform game using Flash MX. Onlinegames are great for making your site sticky, and the Circa platformer Is sure to havevisitors returning again and again. You'll find all the ActlonScrlpt files needed for thegame on the cover CD (note that these are labelled according to their position In thegame step-by-step rather than their step number). Once the game Is added to theBand section, we'll have a site crammed with out-of-this-world Interactive content.

Size is everythingThe animation created in the first part of this project will introduce the band and highlight keyareas of the Web site. It's designed to be short and snappy, as it's always best to avoidannoying, self-indulgent intros. For the benefit of regular visitors there will be a Continue buttonto zip them straight to the main content of the site. The final file size is only 18Kb, so it shouldsmall enough for the slowest of connections to handle without a problem.

CREATE A FLASH INTRO PAGE

1 Open FlashTo create the Intro sequence for the Web site you will firstneed to open Flash. On the cover CD is a starting file called'animation start.fia'. Press 'Ctrl g. L' to open the library whereyou will find all the content needed to create this specificanimation effect.

4 Scale the movie clipUse the Transform palette on the 'circa-back' movie dip toscale it to 150%. Create four new layers and place a

keyframe at Frame 8 for each layer. Rename the layers 'boxr to 'box 4' and drag the 'box' symbol to each layer fromthe library then align them using the Align palette.

7 Add a guideCreate a new layer and name it 'text layer', then create akeyframe at Frame 25. From the ruler at the top of thedocument drag a guide to just above the boxes. Drag the'chandra-text' symbol onto the left tiard side, align it usingthe guide, then add a keyframe at Frame 28.


Dazzle your guests with interactivity Dreamweaver project

2 Copy and pasteDouble-dick the 'circa' movie clip in the library to open it.Select the graphic on Frame 1, press 'Ctrl & C to copy it, andthen click on the Scene 1 tab to return to the main stage.Press 'Ctrl S. V and position to the left as shown, then selectFrame 4 and press F6 to add a keyframe.

5 Animate the boxesSelect Frame B of each of the box layers and add akeyframe using F6. Select the first keyframe at Frame 8 ofeach layer and select the box to change the Alpha value to20%. Choose a frame between the keyframes to add amotion tween and repeat this for each box layer.

8 Animate the text

Within the keyframe move the text so the 'C lines up withthe end of the first box, add another keyframe at Frame 37and align the 'C with the centre of the second box. Add afinal keyframe at Frame 40 and align the text to the righthand edge.

I AO □ ;

K

c3 Add a movie clipSelect Frame 1 and move the image so that it is off to theleft of the stage. Select a frame between the keyframesand add a motion tween in the Properties palette. Create anew layer and name it 'background', drag 'circa-back' fromthe library to the stage.

6 Change the positionSelect each of the boxes at keyframe 8 and move them tothe bottom of the screen so they will animate. Select thefirst keyframe of the box 2 layer and Shift-click the secondkeyframe to offset it on the timeline as shown. Repeat thisfor box 3 and 4 as shown above.

9 Motion tween and fade

Select the text at Frame 25 and change the alpha value to20%, and again at Frame 40 by changing the value in theProperties palette. Click any frame between Frame 25 and28 and then Shift-click any Frame between 37 and 40 toadd a motion tween from the Properties palette.

Power users' tips


: i r (

LoAdOtdst: Bottom 2I Optiom: Q&flnwat»a»i«po(i

□Efoteelhom impott□ Offlitliacaacliont□ Debugging PwniKwi!E) ConvMt Movie

P*Mword

JPEGQutMy: 50 (0-100)

Audio SbMm: MP3,18kbp»,Moiw

Audio£v». t : MP3.16kbp«,Mor«

Q Ovetnde tound totHngt

V e r « o n v |

O K i

GHD

'it**'

■ Export for the WebTo get your movie into your Web site you will need to export theFlash document as an SWF file. Go to tie File menu and choose

Export Movie. In the first pop-up window name the animationand in the next window set tiie version of Rash you wish toexport, and tfien click OK to save it.

mRows: [ CeiPadding; jo"" j

lolumns; [j Cell Spring: jo [ Cancel |Help J

B o r d e r ;

■ Back to DreamweaverNow you will need to open Dreamweaver to create a new HTMLpage. Add a table one Row by one Column with no pixels forthe border, cell padding and cell spacing. Make the table 100%wide and click on OK. Now make the table 100% high in theProperties palette.

u o • • - c a

■ Add to the HTML pageClick inside your table and then the Centre button in the

Properties palette. Qick the red Rash icon and browse to yourrequired SW file, before clicking OK. Now press F12 on thekeyboard to see your page in a Web browser with tfie Flashcontent centred on the page.

DREAMWEAVER I PRACTICAL WEBPRO)ECTS I 59

Dreamweaver project Dazzle your guests wit1 interactivity

10 The name gameSelect Frame 41 of the text layer and press F6 to add ablank keyframe. Add the symbol 'all-text' to the newkeyframe on the left of the screen. Add a new keyframe atFrame 44 and align the text with the middle of the first box.Add a keyframe at Frame 53 and 56 and align as before.

11 Animate the motion

Select the text at Frame 41 and change the alpha value to20% and do the same at Frame 56. Select any framebetween Frame 41 and 44, then Shift-click any Framebetween 53 and 56 to add a motion tween from theProperties palette.

12 A blank keyframeSelect Frame 57 of the text layer and press F6. Drag the 'jd-text' symbol from the library to the stage and align with theleft of the screen. Add a keyframe at Frame 60 and alignthe text with the middle of the first box, add another at 69and align with the middle of the second box.

I " i - B « « M »■ m m m m « „ j s l . j

15 Add the photosSelect Layer 1 naming it 'photos'. Add a keyframe at Frame28 and drag the 'chandra.png' to the stage and position itunder the first box. Select Frame 44 and add 'ali.png' belowthe second box, a keyframe at Frame 60 with 'jd.png' andthen a final keyframe at Frame 76 with 'james.png'.

16 Add the Circa symbolSelect Frame 96 of Layer 1 and press F6. Drag the 'circa'symbol to the stage and scale it to 150%. Position it thesame as the graphical border on the left-hand edge. SelectFrame 114 and add a keyframe, scaling the symbol to 120%and position it at 80.8 on the x-axis and -56.6 on the y-axis.

✓

t A

O □ '

D I» *

g

1 , *

" ,

1

1

1

'1 iijU'

1

17 A little motionSelect Frame 118 and change the alpha value to 20%. Shift-click Frame 116 to add a motion tween. Create a new layerand name it 'circa logo' then add a keyframe at Frame 114.Drag the 'circa logo' to the stage and position at 21.8 on thex-axis and 24.3 on the y-axis.

20 Repeat the animationRepeat steps 18 and 19 with the symbol 'hear' betweenFrames 142 and 59 on the same layer. Do the same for the'watch' symbol between Frames 160 and 178. Select Frame179 and press F7 to remove the contents from the stage,then add a keyframe to the layer at Frame 185

l-U. Jii " Ar

M . . P F . m . . . m m m m w s . . w * .

Rwww.circa.org.uk21 Emphasise the URLDrag the 'URL symbol from the library to the keyframe youcreated at Frame 185 and add a keyframe at Frame 197Change the alpha value to 20% at Frame 185 and motiontween between these keyframes. Selea Frame 25 andpress F9 then enter stopO; in the Action window.

—

I ,)S ft <S »■ » IPaetnULChone.hti^");

22 And finally...Add one last layer and drag the 'continue' symbol to thebottom right of the stage. Select it and then press F9 to addthe Actionscript as shown above Then save your file andpress 'Ctrl & Enter' to preview the animation in all it's gloryand make sure it runs smoothly



Onl ine resources

13 Motion tween the textAdd a keyframe at Frame 72 and align with the right of thescreen, changing the alpha value to 20%. Do the same atFrame 57 and change the Alpha to 20%. Motion tweenthese frames by selecting between the first and lasti<;eyframes and adding a tween from the Properties palette.

14 Home jamesNow add a blank keyframe at Frame 73 with the 'james-text', and add keyframes at Frame 76, 86 and 89. Position itthe same as other names, fading the Alpha value to 20% ateach end with the motion tween effect. Select Frame 90and press F7 to remove the 'james-text' from the stage.

* a % t

18 Blank it outSelect Frame 119 of Layer 1 and press F7 to remove thecontents from the stage. Create a new layer and name it'text2' malting sure this is the top layer in the document.Create a keyframe at Frame 124 then add the symbol 'meet'to the top of the document as shown.

19 More keyframesAdd a keyframe at Frame 127 and position the text justinside the background 'C. Add a keyframe at Frame 138 andposition the text a little further down the screen. Now addanother at 141 just above the photos. Fade the two endkeyframes to 20% alpha and motion tween between them.

ADD A LAVA LAMP EFFECT

/ P

4 AO □

ft?

^ O

23 Create a new documentIn Flash make the document 64 by 64 pixels, whichrepresents the space available in the header section of ourWeb page. Create a new movie clip symbol and name it'lava'. On the stage draw two circles as shown above andremove the stroke.

iMbUX-(UMtWH-l)iTMrt Modfy Tixt Cdntrol WMow

a e

X . . . " "

0

1 . . 1 '

i l U f f , i u i :

}

24 Shape tweenCreate a keyframe at Frame 30 and another at Frame 60Select Frame 30 and delete the circles in there. Draw twomore slightly different circles to the first, preferably joined atthe opposite side to the first, and then select all the framesbefore applying a shape tween.


Name of site: Flash KitURL: www.flaslilcit.comFlash Kit is a great starting point for anyone wanting to show offtheir work or brush up on Flash techniques. There are sorrw^eat forums and practical help is never fer away.

Name of site: Ultra ShockURL: www.ultrashocl(.comUltrashock is a fantastic site, with an in-depth forum, andinformation on a wide range of Flash issues. There are somegreat resources available, including lots of expert tutorials.

Lingo leveller


■ KeyframesKeyframes are the frames where graphics can be resized andchanged. Once they have been changed, the graphics can thenbe animated and the change takes place between the differentkeyframes you've specified.

■ Shape tweenThe shape tween does exactly wrhat it's name su^ests,changing the shape of two stage graphics between keyframes.A shape tween can only be applied to a stage graphic and notto a s^bol brought onto the stage from the library.

■ Motion tweenThe motion tween differs from the shape tween in thatgraphics must be instances from the library before you canapply a motion tween to them. You can only motion tween onesymbol per layer at any one time.

■ Movie clipA movie clip symbol is an animation in the library witii its ownunique timeline. Adding a movie clip to tfie stage will play rtsown animation at the same time as playing back on the maintimeline, giving you two animations simultaneously.


Dreamweaver project Dazzle your guests with interactivity

Power users' tips


A c t i o n s M o v w ?

AoHonf For pl«y»r (co4*Pl4y*r)

+ fl < j > ^ i ( 9o n C l l p E v e n t ( l o a d ) {

i n o v e S p e e d - 1 5 ;

r o o t . r e c o r d R i g h t . _ v i 8 i b l e * f a l a e ;^ r o o t . r e c o r d L e f t . ^ v i s i b l e - l a l s e . -r e c o r d C o u n c e r - l ;

i n a x R e c o r d s - 4 ;

d e p t h C o u n t e r - 1 ;\

m Shoot to killThe code applied on the player movie clip is broken into twoparts. The first turns the visibility of the lasers off and sets avariable to fite only four at a time, the other variables beingused to count and duplicate the lasers. They're called recordsbecause he was originally going to fire records!

■ Fire blanksThe code inside the enterFrame event handler checks if tiieSpace bar has been pressed and If the number of lasers fired isless than four. It also checks which way the player is feeing thenduplicates the relevant laser movie clip and adds one to thenumber of lasers currently on screen.

T T T W ^ T l 9 "( l e a d ) <

i C l l p l v a n t ( • n t a r r c w w ) '

t h l l . _ H - - E « c o c e U t o v « a p « e d ;i t ( t h l » . _ > « - 3 0 M

^ t o c t . . t t e o r d C o u n t « E — >t M i . n w o v a l l o v i e C X l p O ;

>

■ Travel through spaceThe code positions the laser next to the player and if fired itmoves tfie laser across the screen depending which way theman is facing. If the laser moves off the screen on the left orright the laser is removed. The laser also checks to see if itcol l ides with the enemies.

25 On the main stageClick on the Scene 1 tab to return to the main stage andname Layer 1, 'mask'. Draw a circle 64 by 64 pixels andremove the stroke placing exactly inside the document.Now create a new layer and name this 'laval'. Drag thesymbol to the stage and change the brightness to 20%.

» r i m H t o r

• a n 1 5 1 0 1 6 2 0

/ P \ □ m a s k • S ■ •

r l a v a s • S ■i A 1 7 l « v a 4 • □

n V I a v a 3 • A ■1 ' w ' i - j i .1 i

; y ' [ y i A V a l * • ■ J

iH 1? '\ 0 A\ / o \r" viw"""!! Q . ■' C o t e « o i % 1 [■ ; M 1 2 . 0 f p t

30 Apply the maskDrag the mask layer to the very top and either right-click orControl-click the layer and select Mask from the pop-upmenu. Lava 5 should now be in the Mask but the otherlayers will not be. Drag the other layers so that it applies tothem also.

CREATE A PLATFORM GAME

35 Start the gameOpen the file 'game-start.fia', from the cover CD, in Flash.This file contains a library with all the elements necessary tobuild the game. Rename the first layer 'background' anddrag the 'background.png' symbol from the library to thestage positioning at zero pixels on the x and y co-ordinates.

26 KeyframesAdd keyframes at Frame 30, 60 and 90. At Frame 30 and 60adjust the position and scale of the lava inside the circle onthe screen. You can even add a little rotation, then motiontween the whole layer Add four more layers and label them'lava Z to 'lava 5' respectively

1

j8 t • ' . * i ; w « • • • " <

" M

i

31A new layerCreate a new layer and name it 'big lava 1'. Drag the 'lava'symbol to the stage and change the size to 400% with anAlpha value of 20%. Add keyframes to Frame 35 and 90 AtFrame 35 scale it 200%, move the position on the screen,and then motion tween the layer

36 Add text to the stageCreate a new layer, name it 'control panel' then add text tothe stage as shown. From the library, and add the 'Circapick-up' symbol and place it next to the Collect CircaSymbols text. Add one of the trooper images from thePlayer folder in the library to the stage and resize it to 75%.

62 1 PRACTICAL WEB PROjECTS I DREAMWIAVER

Dazzle your guests with interactivity Dreamweaver projectEssen t i a ltechnique

In step 27 we discuss making the final keyframe the same as the first before amending thekeyframes in between. This is so the animation will automatically loop when it gets to theend of the timeline. This technique is invaluable for creating looping animation. The sametechnique was also applied to the Lava symbol in steps 23 and 24 with the shape tween sothe lava would continue to animate organically

9 S - *

27 Random lava

Again add the 'lava' symbol from the library to 'lava 7 andadd a 20% brightness. Now add random keyframes, scalingand rotating the lava symbol so that it moves around in arandom order Remember to add the keyframes first so thatthe last keyframe is the same as the first.

28 More lava

Add the lava symbol to the layer lava 3' but don't changethe brightness this time. As before, add random keyframes,scaling, rotating and moving the lava symbol around thestage before adding a motion tween. Add the 'lava' symbolagain to the 'lava 4' and 'lava 5' layers.

%:• ii;

29 Tint the lava

From the Properties palette add a tint of 20% to thesymbols. As before, add keyframes randomly in order toscale, rotate, move and even tint these symbols around thestage. Finally add motion tweens to these two layers toanimate the lava.

32 Last two layersAdd two more layers and name them 'big lava 2' and 'biglava ? respectively Again add the 'lava' symbol and changethe Alpha values to 20% then add random keyframes,changing the size and rotation, and then motion tween thelayers. Add these layers to the mask.

33 Test and ExportTo check the animation is working press 'Ctrl K Enter' on thekeyboard. If you need to modify any of the animation, doso before exporting. When you are happy with theanimation, go to the File menu and choose Export Movie.Name the animation 'lava.svrf'.

34 Add to the HTML pageOpen Dreamweaver and add the file 'pagedwt', which isthe template page for the site. Click inside the cell on thetop right of the page and click the centre icon in theProperties palette. Now click the Flash logo, browse for the'lava.swf', click OK and then save the template.

S A U E C I R C ABkrweh«tri«,«l(( (i XcKlcdtD«lesirirc« arnKesbWty Vou lwv« pursuM^ aUei i8 to homo pttwtte wm t: ■.O oa in your po«M*sion imjm to your rockat M that you can mate,

37 Add a game titleUse a suitable font and position it above your existing texton the screen. From the library drag the 'invisible button'symbol and position it over the Play Game text. Press F9 toopen the ActionScript editor and add the code as shown inthe above screenshot.

38 Extend the timelineSelect Frame 21 of the background layer and press F5 toextend the timeline. Select Frame 2 of the 'control panel'layer and press F7 to add a blank keyframe. Create a newlayer, name it 'actions', select the first frame Press F9 and astopO; command.

39 Keep scoreSelect Frame 2 of the 'control panel' layer and drag the'black' symbol from the library Size it to 150 pixels by 480pixels, positioning it at zero pixels for the x and y axis. Add atext box under the Score title and change the Propertiespalette to Score to display during the game.

DREAMWEAVER I PRACTICAL WEB PROjECTS I 6i


Lingo leveller


■ InstanceAn instance is a copy of an object found in the library whenapplied to the stage. It gets the name because it is an instanceof the original symbol. Many instances can be added to a Flashmovie while only increasing the file size by a fraction than Ifthey where totally new graphics.

■ Instance nameThe instance name allows you to name individual instancesdifferently so that you can either control them by code ordifferentiate between them if you are testing for collisiondetection. The instance names are crucial in controlling thecharacter and checking if the player is touching a platform.

■ Invisible buttonAn invisible button Is a standard button that does not have any

graphics on the up, down or over states of the button. Instead itjust has a 'hit' area, which represents the clickable area. Thisbutton appears as a semi-transparent green on tfie stage butwhen the Flash file is published it is invisible allowing anyobject that it is placed on to act like a button.

▶ How does it work?

Player movement■ You may wonder how the bulk of the games physics work toenable the player to jump, walk left, walk right and land on theplatforms. If you double-click on the player on the screen, youwill be taken inside the player movie clip. Here you will findaround 100 lines of code which powers all of the movement,checking if the player is jumping and allowing them to passthrough platforms on the way up but stopping them frompassing through platforms on the way down. It also checks thedistance they've have fellen, and if this is too fer then they willlose a life. This is a hefty section of code but if you have anyActionScript experience you will probably be able to figure outwhat is going on and when.

40 Get a lifeFrom the library drag the 'life' symbol to the stage and resizeit to 50%. Name it 'life' in the Properties pallete and positionit as shown in the above screenshot. From the Band foldercontained in the library drag objects 1 to 4 to the left handpanel of the stage.

" E r r ^

44 Name the platformsSelect each platform in turn and name them 'platforml'through to 'platformlO'. Select the 'bar' symbol from thelibrary and drag to the bottom of the stage, naming thisinstance 'platformO'. Scale with the Free Transform tool to fthe width of the screen.

48 Go get 'emDrag four copies of the 'circa-pick up' symbol to the stage asshown. Select the first one and add the code shown above.You should also add the same to the others, but make sureyou change the highlighted code from 'obiea4', 'objecB','object2' and 'objectl'.

41 Name the instancesSelect each of the band's heads, which are the symbols

'objectl' to 'objectA' from the library and name them as'objectl', 'object2', 'objec6' and 'object4' in the Propertiespalette Now select Frame 21 and press F5 to extend thetimeline once more.

r Actions - Movie Clip

45 Two more bars

Drag another bar from the library to the stage and resize thewidth to 150% in the Transform palette. Now rotate it 90degrees. Copy and paste the platform next to the originaland then select the left hand bar and press F9 to copy theActionScript above.

49 The enemyFrom the library drag three instances of the 'enemy' symboland place on the stage as shown. Scale to 75% and pressF9 with the first selected and add the code shown above.

Copy and paste this code to the remaining two enemies onthe stage.


Dazzle your guests with interactivity Dreamweaver project> Essentialtechnique

Creating characters for your games is one of the most difficult tasks, especially if you arecreating a walking motion. In the tutorial we have used a special animation program calledPoser, which makes walk cycles a breeze. Poser has generated eight images to create a walkcycle, which is saved as a series of PNG images. A movie clip was created in the library called'walk' and Flash imported all eight images and placed them in order on the timeline.

^ c o o t

t l 9 h t * c r u * ;

t i 9 h e b l d e > t t c l » < « l 9 e {

I f

42 Initialise the gameSelect Frame 2 of the code layer and press F6 to add akeyframe. Press F9 to open the ActionScript editor and addthe code as shown in the screenshot above. This turns thevisibility of the band's heads off In the control panel, andInitialises some game variables.

46 Code for the right barSelert the right bar and add the ActionScript as shown Inthe above screenshot. Drag more platform symbols from thelibrary and position them next to each other to fit over'platformO' at the bottom of the screen, so that It looks likethe others.

50 Three more enemiesAdd three more enemies to the stage, scaling to 75% andadd the code to the bottom left as shown above. Select thebottom right enemy and change the numbers highlighted to(x>550 11 x<400). Select the left enemy on the platformand change the numbers to (x>200 11 x<140).

Power users' tips

43 Add platformsSelect the background layer, create a new layer, naming this'platforms'. Add a keyframe at Frame 2, Frame 5, and thenselect Frame 2. From the library drag 10 platforms, as shownIn the above screenshot, and position them In variouspositions around the stage .

* t W

> t t

o a C l l p l w « a t (

n f t

t X » t t O I I {

47 A bit of roughFrom the library drag the symbol 'rough' onto the stage andposition it over the two vertical bars as shown above. Selectthe platform just above the symbol and add the ActionScriptas shown In the screenshot, which will move It back andforth across the screen.

51 Add the space rocketName each of the enemies on the stage so they have aname of 'enemyl' to 'enemyff Inside the Properties palette.Add the 'shipcllp' symbol from the library to the bottom rightof the stage, press F9 and then add the code shown aboveIn the screenshot.


■ Exporting the SWFOnce the game has been completed be sure to export themovie in the SWF format. Choose Export Movie from the Filemenu and name the file suitably, such as 'game.swrf'. Click OKand select the compression ratio on the next screen, before

clicking OK to save the file.

■ Open DreamweaverMove the file 'game.swf' inside the root folder of the bandWeb site and open Index.htm' from the band folder inDreamweaver. Position your cursor after the band's faces andadd the text 'Click here to play the game' before centering thetext and add '*" as the link.

[J Navt abon Toebw p Merw ear□ iwabon todbar Q ScrdbaKasFtoeded[Jstatuttw U RniRHandtes

VAhdowfitaina Oam«|

Z S Z D

■ A pop-up windowHighlight the text and choose the Open browser window fromthe Behavior palette. Fill the details as shown above. Create anew file and modify the page to have '0' for all of theborders then add the 'game.svirf' to this page and save thewhole thing as 'game.htm'.



; i i ( i C v « n « . ( X o A d ) <

r e c o E d K o v e S p e e d ' l O ;

t h l » , _ x - _ r o o e . p l « i y e r. _ x - 5 0 ;thl« ._y-_coot. p l^yer

o n C i i p E v e n t ( e a c e t r r m e ) (

i t ( th t« ._«w«e<> ' ' c *cor ( lLe£t ' ' )<thla._x-»cecordHoveSpeed;I f < t h t » . _ K < - 3 0 ) (

_ r o o t . p i f t Te r • c e c o r d C o t t t t t e r - - ;C b l a . r s B a 3 v e H o v l « C i i p ( ) ;

f o r ( i - i ; i < - 6 ; i + + » <

I f ( t b l s . h t t Te s t ( _ r o o t [ ' ' e n e « v ' ' + t l ) ) {r o o t t ' ' e n « w y ' ' + i ) . g o t o i n t J P l a y ( 2 ) ;

52 The first laserFrom the totv drag the 'shot' symbol to just off thebottom left of the stage and give it the instance name'recordLeft'. Press F9 and add the AaionScript as shown inthe screenshot, which you will find powers the laser to befired to the left.

+ 1 ( 5 ?o n C l i p E v e n t ( l o a d ) <

r e c o t d B o v e S p e e d - 4 0 1

t b l 8 . _ x - _ r o o t . p l a y e r . _ x + 5 0 ;t h i s . _ y - _ r o o t . p l a y e r . _ y - ^ 8 ;

o n C l i p E v e a t ( e n t e c F r a n e } (

I f ( t h l s . _ i i a i n e < > ' ' c e c o r d R l g h t * ' Ht b l s c e c o r d S o v e S p e e d ;

i t ( t b l s . _ x > B 3 0 ) {_ r o o t . p l a y e r . r e c o r d C o u n t e r — ;t h i s . r e m a v e H o v i e C l i p ( ) ;

}

t o e ( l - l ; l < - 6 ; i + + ) <

I f ( t h i s , b i t Te s t . { _ r o o t [ ' ' e n e » y ' ' + l ] ) ) {_ r o o t [ ' ' e t t e » y ' ' + l ] . o o t o l i w l P l a y ( 2 ) ;

53 Second shot

Again, drag another instance of 'shot' from the library andposition next to the first, naming the instance 'recordRight'.Press F9 and add the ActionScript shown above, which willshoot the laser towards the right when the player hits theSpace bar

54 Add a frame labelSelect Frame 3 of the Actions layer and press F6 to add akeyframe, which you'll label 'one' in the Properties palettePress F9 and add a stopO; command to the frame. Create anew layer naming it 'instruct' and a keyframe at Frame 3and 4.

55 Get readySelea Frame 3 of the Instruct layer and drag the 'game start'symbol ft'om the timeline onto the stage so that it iscentred. The playhead will pause on this frame while themovie clip plays, then it will tell the main timeline to moveto the next frame.

56 Add the playerSelect the Platforms layer and add a new layer, naming it'player'. Add a keyframe at Frame 4 and Frame 5. SelectFrame 4 and the CodePlayer symbol ft'om the Player folderin the library to the stage, scaling it to 6096 and adding theinstance name of 'player'.

O B C l l p t V « M t

i t ( b r . i M N m t K c r . s r ^ S ) h b o

_ceot. zMordL*! t, <tU4>l teMCtevicC

( ■ ' r « e a r d l l l 9 k t ' * * d * i

( _ t o o t . r n h t — t t « » U (

t i t e f t k C e i t m c a r M M x I t a c e i d s l (

57 Power the playerWith the 'codePlayer' symbol still selected on the stage,press F9 and add the code shown above As there is a lotyou probably won't be able to see it all so open 'step24txt'from the cover CD and copy and paste the code across soyou don't make any mistakes.

t I B• C f o n a * ' 0 ;

1 I B c b l * ) <

i ( C n x e t ( t v * l ( l ) J " "M x P U c f o c n a - f - f ;

« ■u b » t r l o g ( i , i , S ) - - " p i M f ) <

F T —

58 Check the platformsSelect Frame 4 of the Actions layer and press F6 to add akeyframe. Now press F9 to edit the ActionScript. Copy thecode as shown above as this checks the number of

platforms on the screen so that Flash knows how manyplatforms to check for landing on.

k k kC O N G R AT U L AT O H S

VOU HAUE WOH

VbU MANAGED TO SAUEA L L T H E C I R C A B A N D

M E M B E R S ,

59 Add a labelSelect Frame 10 of the Actions layer and press F6 to add akeyframe, and then add a frame label of 'Won' in theProperties palette. Select the Instruct layer and add akeyframe at Frame 10 and Frame U. Select Frame 10 andadd the text shown above.

60 An invisible button

Drag the 'invisible button' from the library onto the stageand position it over the 'Play Again' text on the screen. PressF9 to open the ActionScript editor and add the code shownabove to make the playhead jump back to Frame 2 torestart the game.




Don't be afraid to use a mixture of graphics created in both Flash and other imageapplications. The background image was originally created in a 3D package called Cinema 4D,which is very good at creating scenes that are impossible to photograph. The image couldeasily have been put together in Photoshop or Fireworks. You could darken a desertphotograph and then blend the image with a starlit sky to create a suitable sci-fi background.

61 Game Over screen

Select Frame 20 of the Actions layer and add the framelabel 'Dead' in the Properties palette. Select Frame 20 of theinstruct layer and press F6. Use the text tool from the toolbar to add text to the screen to display a 'game over'message as shown.

62 Play it again SamAs in step V, add the 'invisible button' symbol from thelibrary and add the relevant code. Alternatively, you couldjust copy the same button from Frame 10 over to thel eyframe at Frame 20, because this will keep the codeintact. This will enable the game to restart.

63 Final stepSelect Frame 21 of the Actions layer, press F6 to add akeyframe. Now press F9 to edit the ActionScript and add astopO; command. Finally, press 'Ctrl S. Enter' on the keyboardto test the game out and you should have a great platformgame to provide hours of amusement for your guests.

The finished platform game

I Collect spinning Grcalogos to save theb a n d m e m b e r s

MA I ffy counter wi l l

give the player direelives on the screen

Shoot at the aliens byhitting the Space bar

Band members tha t a rerescued are displayedon the screen

/Uiens are on most

platfonns so bewareof the moving ones

Control your characterthrough the cursorkeys on the keyboard

Pla t f o rms a l l ow t he

player to jumparound the sc reen


Dreamweaver project Add eCommerce facilities to the site

Rache l

A n d r e w

RACHEL ANDREW runs her own Web solutions firm at www,cdgcofmyseat.com and is a memberof the Web Standards Projert on the Dreamweaver Task Force, which is designed to promote bestpractices in the support and use of W3C Standards in Dreamweaver, When not developingdynamic applications using a wide range of scripting languages, Rachel enjoys nothing more thanspending time with her daughter and updating her Web log at vwvw.rachelandrew.to.uk

^dd eCommercefacilities to tlie siteWith the site constructed it's time to make some money. Wereveal how to add a payment gateway to sell digital downloads

The brief

Task: Add eCommercefacilfties to a Web site

Difficulty: IntermediateTime I need: 3 hours

On the CD

All files for this project canbe found on the CO

Lingoleve l le r

Technicalt e r m sbul ldozed■ eCommerceeCommerce is a term

used for paymenttransactions that take

place over the Web.eCommerce faci l i t ies

might be a simple click-through to a paymentgateway so that userscan make payment for asingle item or service, orelaborate shopping cartsystems as you'll find ona site like Amazon

( w w w . d m a 2 0 n . c o m )

s we reach the final stages of building our site we're going to add a wayfor visitors to pay for and download MPS files. Even small sites havesome form of eCommerce functionality, if only as a way to make enough

to pay for the running of the site.However, selling downloadable goods over the Internet brings Its own set of

problems. Normally, when you sell goods online, the visitor selects the item theywant, pays for it and you receive notification, at which point you would package theitems and ship them. With the purchase of an electronic item, such as a font, an e-book, stock photography or music file you need to offer the user a way to downloadtheir item after paying for it. If you are writing the code for this functionality yourselfyou'll need to link with the payment provider and pick up their authorised post backto your site when the payment is successful. You then need a way for the user toreceive their product, by clicking a link on a page or in an email.

Luckily, there are a number of options to make this process easier and we will belooking at a method which uses two third-party services, both of which are free tosign up with and offer a good introduction to the world of eCommerce. Theserepresent an excellent solution for a small site like ours, where developing a complexsystem would not be cost effective. At the end of the tutorial we'll add a contactform to the Web site, so that visitors can easily send the band a message. Finally wewill upload and test our site ready to launch it into the world.

O"* * ' O l i l

Let's go shoppingThe Record Store section of the Circa Web site works by using two third-party services - Paypalto take the payments, and Payloadz which provides functionality to allow the secure downloadof files - in this case MP3s. When a user clicks on one of the tracks to purchase it a newwindow launches, which contains a shopping cart hosted on Paypal, where the user can addmore tracks before proceeding to the payment screen.

1 Add eCommerce facilit iesWe will be adding eCommerce facilities to the Recordssection of the site. In this section each record is listed with

individual tracks. The idea is to offer these for download

from the Web site, where visitors can pay to download thewhole album or just individual tracks from it.

4 Find the Paypal IPN linkAfter you have signed up, log into your account. In order forPaypal to work with Payloadz you need to provide Paypalwith an IPN link that points to the Payloadz system and letsit know whether the payment was successful. Find this linkby clicking the Account tab

P r o d u c i I n f o r m a t k H >

» c . J

u ( e r y o v t > «

A t r i M t e I n f o r m a t i o n ( • « t w n « i )

7 Create a productClick the Selling tab in Payloadz, then on Click here to createa new product. We'll start with the album An EmotionalConstruaion Sef which is listed on the page'records/album.php' in our site Add the title, a code toidentify the product and a ptice, Ihen srtomil the form.


Add eCommerce fad ities to the site Dreamweaver projectEssent ia ltechnique

Power users' tips

If you are expecting people to pay you using a credit card then you need to make sure theyfeel comfortable with making the payment. If you have a merchant account then your bankwill have guidelines that you must follow, however if you use a third-party it's a good idea toexplain the payment process and explain who is actually taking their details, providing contactdetails in case of any problems with the order. B

s i g i L U e I L s a i o i M c

S i g n U p F o r a P a y P a l A c c o u n t

O t " ; • - C > » w « * C o y n t f v ■ '

'.SLtvtmm tni •• Ch9M« • Country • • ^

t I I I S h e e t

2 Sign up with PaypalTo use Paypal and Payloadz as your payment solution you'llfirst need to get a Paypal account from www.paypal.com.You will need to sign up for a business account if you wishto accept payments. Paypal allows you to hold onebusiness and one personal account on its system.

Instant Payment Not ificat ion Preferences

i P i l a o L P w r n t i H . t l f t l ' l i w l i v a a w oe i p « y i m n t N 9 t i A c « t > o n » • / » » ) p « y m « n t

y w j r b » C k ' « M e p « r » t w n » . C > » « l < t h i » b f l x » ♦€& ¥ » { «I m U B t N c t l f k i t w , t h f y « . » t w h i c h y « i i W 0 f « c « i v » t h f P f v m ^ n tn« t iAe>t i9R» Th i f URL fho iM ^ « U«L w ivc t i yov 9wn «nd wht«h you r«c« tv4

H e t « : K t < v » t m 9 I n « t « n t P i« n f u r 4 t h » t y w C * n t h t t > o t i f k * t i 9 n t y > t * m .

: I H t f t r r m l t I A b o u t i K [ ,

■ • a w g I W - i O O ? t M r i j h u r w y v t d

5 Set the IPN on PaypalFrom the Account screen on Payloadz there is a link toPaypal directly to the page, from where you can set your IPNLink.. Log in at Paypal and follow the on-screen instructions,

checking the box to turn the IPN on and pasting it in thePayloadz IPN link from your Payloadz account page.

jcGaass T ■ ! Wiwy i jjBjSfl j' coum i i esjH — ■ S e l e c t f H e L o c s t t o n

!;*« on* of tht (wo ovt>on» batow (0 pemt to whara you fHa «tocatad.

M m m n l o e t y o u r A t * 1 4 ( s l « « * 4 o n l y V « 4 0 X 4 • D t l O A ) '

O p t t a n a i : t t v r J o ' v o r

O e t * e i > l ^ p l o o d N o 1 0 O v $ 4 r v 4 r ( r i t u i r t i p r a m i t i m K c a u n t )

• • ' W 1 « i * • r , .

I X M M < > 4

H r L t t t c t k fi t

fl ' t t r i n i r n r f ^

M I *1« t Il<vi7< <t• «▶« » t f m o y • > « « < > « < ^ l

<■4 t v « > a i i n f i « u k « «

8 Add the download

Because we have a free account we need to upload the fileto our server and then provide a link to it. The best way todo this is to upload a test file to your hosting company (itdoesn't matter what file you use to test) and insert the linkto it here.

Horn* : I faivinfl ! I stitoo

C r e a t e N e w A c c o u n t

y w r t r f * m 4 « f y b y f * > * g P W t t N f o r m^ 4 m f U n t l Y « n 4 V 9 U w i l ^ y o u r { H X

e M a i lw t i n v w » • » " » " »

O a M W o r d ;

I , t r y t h * { t o rwwt r j t i co Qu« | t i 9n« o f { ^ ro lM«n i )

i j ' I " " » » • « < > » » ' w M O W l

B Get a Payloadz accountThe Payloadz system allows you to offer downloadableassets from your site, and provides an interface with Paypal.You can sign up for a free account with the service,although other accounts with more features are available.Sign up for the free account at www.payloadz.com

y v f ' W K O w m w i l l n o * m i M t ^ I t v * » n m » f y C r n » i l I f t » < / » » ! .

/ • f v I f y » y f l « 9 4 > » » • » » " » H r » * r I h o f i «

6 Other set-upsTo finish configuring Payloadz to work with Paypal click theAccount tab, then click Profile. The email address listed heremust be your primary Paypal email address. You can choosethe currency that your site will accept, then edit the emailthat will be sent to customers after a purchase.

I t a m I d : C I K C A - O O l

P r i c e : t S . M

A f f l l l a t a F e « : N « n t

D a t e C r e s t e d : W 7 / Z K )FHa Lecatton: http://ww»(.r»chel»ndr««.co.u<</<in;«/<lowntea<j*/cii

E d i t I O e t a t e I C o d e G « n » r a t o r I

O p t i o n d t P r o d u c t F e a t u r e s

; . i n C v n t t r M t w t

« " > « ! ' A u e t i M C e 4 e >

•»ftw«p< RafiMrvtten SyrtamI ' y e v i m > > 4 W f « r t ^ l t t r c t i q n 1 ( 4V»« mvft *lr**4y h«Y« « rtfiftrftign

P«Vlet4« aWara LlaUnf

9 Inserting a linkAfter adding the link and clicking Continue you are taken toa summary page about this product. The product is nowcreated on the Payloadz system, and the next step is to adda link or button to your site to allow people to select andpurchase this downloadable product.


Sit* Conriguration Error

> 4 y o v t n « 4 ^ K « t l l > « n o t I K V r « 4 t o 4 t n w 1 1 « H

t ' y o u * » t h « » * « n i » t r « t e f t S *

t r y o v n o t t N o f l ? « » w r t P W , (

I roffr to fln {>090 hr ^rthr

II net «on« ir*4 <on«t>y"

■ Incorrect permissionsIn the tutorial we mention that some UNIX hosts require you toset the file permissions for PHP scripts yourself to 755. This givesthe file execute permissions. If the file does not have corectexecute permissions and it contains PHP code then it will

display a 403 error.

■ Permission grantedIn an FTP application you can usually change file permissions.This funaionality may be listed as CHMOO, if you search for thisin the help. In WS-FTP Pro the file permissions are listed as partof the file properties. To change them check the boxes, or typein the number

w . n o t n ^ t . c o . u k P u T T Y

. • i - t j l ) : c d c i r c ae l e n d r e w ^ p i n k y " / w e b ' ^ c i r c a S I s' ' t i o n s a d « i n c o n t a c t p h pe r v e r S c r i p t s b a n d d o w n l o a d se s c i r c a s q l g r a p h i c se l a i j d r e w ® p i n k y : ' ^ / Ve b / c i r c a $ c d b a n d' l a n d r e w ^ p i n k y . ' ^ / w e b ' ' c i r c a / b a n d $ I se s a l l p h p C h a n d r a p h p i n d e x . p h p je i a n d r e w ^ p i n k y ~ / w e b / ' c i r c a / b a n d $ c h m o de l o n d r e w ' J p i n k y ' ^ / w e b - ^ c i r c a / b a n d S I s - 1

2 r a c h e i a1 r a c h e l a1 r a c h e l a1 r a c h e l a1 r a c h e l a1 r a c h e l a

r w x r - x r ~ x

r w - r — r —

w e b u s e r sw e b u s e r sv e b u s e r sw e b u s e r s

■ Change file permissionsYou can change permissions at the command line. Log in usingTelnet or SSH and change to the directory with the file in it. Atthe prompt type 'chmod 755 filename.php'. This will changepermissions on the file. To view what permissions files havetype this in the directory


Dreamweaver project Add eCommerce faci ities to the site

10 The Buy Now linkAt the bottom of the product detail page on Payloadz you'llfind the code needed to create 'Buy Now' links. We aregoing to use the shopping cart method, so customers canadd multiple items. Copy this link from the page, it will looklike: www.payloadz.com/go?id=36791

11 Add the link to our pageOpen the page 'records/album.php' in Dreamweaver Add asection to the bottom of that page to list the availabledownloads. List the album and insert the 'Add To Cart' link.In the Properties Inspector add the link copied fromPayioads, with a target of Paypal, to open a new window.

12 Test the linkSave the page and launch it in your browser Click on theAdd To Cart link. A new window should open, which is thePaypal shopping cart, you should see your productdisplayed there. If it doesn't work, check that you copied thelink correctly from Payloadz.

E d i t P r o d u c t

'

15 Edit the email

You can edit an email for an individual download by goingto the Product Details page and clicking Edit. If you changethe email here it will only be effective for people whodownload this product. The email sent for multipledownloads is the one you'll find in Account, Profile.

16 Get a reportReports of all activity can be found in Account, Overview.Here you'll see all transactions that have come through thePayloadz system, including paid and test transactions. Byclicking on a transaaion ID you can view further detailsincluding whether the downloads are still active.

17 Track listingNow work througfi the other downloads in the section andset them up on Payloadz. You will need to add the linkingURL just as you did for the album. It's a good idea to namethe downloads the same as the code you used onPayloadz to identify the product.

20 The formAdd form fields for Name, Email address and Comments -

you could add any additional fields to your form that youwould like the user to complete, but these are the basicones. Name the fields 'contactName', 'contactEmail','contactComments', and add a Submit button.

I - <*

21 Validate the form

People can be strange, and they will often enter randomcharacters into your form and submit it. To prevent this, youneed to add some form of validation. In the Behaviors Panelselect Validate Eorm and set each of the fields to 'Required'so you can specifically check for an email address.

22 The email scriptTo send the email we need to write a little bit of code forthe process. This is going to go at the top of the page andwe will post the page to itself to send the mail. Select theform, and set the method to Post and the action to'contact.php'.


Essen t i a ltechnique

Add eCommerce facilities to the site Dreamweaver projectIf you have created an SQL script by exporting your data using mysqidump you can edit thisscript before importing it into your new database. One thing you can do before importing datais to go through the file and delete and insert into the lines that contain test data from thedevelopment database. To edit the script simply open it up in Notepad or a similar text edit,make your changes and save it.

Lingo leveller

13 Test the downloadsYou can test that the download works by going to theProduct Details page on Payloads and clicl ing Test DeliveryAfter clicl ing on this link the system will send you an emailas if you were a visitor who has just made a purchase,check that the download link works.

18 Test ordersYou can't use your own account to pay yourself, so to testthe entire process you will either need to have a personalPaypal account set up as well, or get a friend to place anorder through the store. You can refund payments throughthe Paypal Web site afterwards.

< ? p h p

i f ( $ _ P O S T ) {$ n a i n e = $ _ P O S T [ ' c o n t a c t N a m e ' ] ;

$ e m a i l = $ _ P O S T [ ' c o n t a c t E m a i l ' ] ;

$ c o i i i i n e n t s =

$ _ P O S T [ ' c o n t a c t C o m m e n t s ' ] ;mai l ( " ine@rachelandrew. CO. uk" , "Ci rca

; C o n t a c t F o r m " , $ c o m m e n t s , " F r o m : "

. $ n a m e . " < " . $ e m a i l . " > " ) ;

}

23 Switch to Code viewAs stated in the previous step we are going to add somecode manually to perform this task. Switch to Code viewand add the listed code shown in the above screenshot.This code will be used if the form is posted and sends anemail to the address used.

A d d D o w n l o a d E M a KTNs pa9« aRowt you to «nabls <9 product download fof any «fnatl addre

Name ; A lbum - An Emo t i ona l Cons t ruc t i on Sa t

E m a H A d d r e s s

infe®adg»ofmy»»at com l("Su]ll

14 Send an emailSend the download email to another address, perhaps afriend, so it can be tested and checked to see if it worksand the email is clear Click Add Download Email, before

adding the email address that you want the message to besent to. Then click the Submit button to send the mail.

19 Add a contact formA contact form gives visitors an easy way to get in touchwith our band. It also means they don't have to publish anemail address if they don't want to, as that can attractunwanted spam. Open the page 'contact.php' inDreamweaver and start by adding a form to this page.

< ? p h p

i f ( $ _ P O S T ) { ? >

< p c l a s s = " t i t l e " > T H A N K Y O U < / p >< p > T h a n k y o u f o r g e t t i n g i n

t o u c h w i t h c CO A 13 V

< ? p h p

>? >

24 Thanks a millionIt is a good idea to send a thank you message to thecustomer because it builds good relationships with them. Atthe very top of the content area, add the above codingwhile in Code view. This message will only display if avisitor has sent the form, so they know that it has posted.


■ Payment gatewayA payment gateway is a third-party service that relayspayments to a merchant account. It deals with tiie processingof the payment, checking whether the card is valid and

ensuring money is available for the Uansaction. It returns adeclined response or authorised one, then send the details tothe merchant account so the store owner is credited with It.

■ Merchant accountA merchant account allows the owner to accept card paymentsin their own right. You need to be an established company andpass a credit check, which is why many small businesseschoose a third-party to process their payments.

■ Third-party payment providerA third-party such as Paypal processes and takes payments fora store owner, and take a cut of the money before paying thestore owner the rest. They offer an easy way to take paymentsbut can be expensive and often the user has to sign up beforethey can pay

How does i t work?

Add a secure certificate■ One option is to use a shared certificate that belongs to yourhosting company. Most companies offer this and you get thebenefit of the encryption, however, the certificate is registered tothe hosting company and not to you. To install your owncertificate, first check with your hosting company for theirrecommendations - some companies require you to follow aset process to get the certificate installed. Your hosting companymay help you in purchasing tfie actual certificate, otherwise youcan purchase a certificate from providers such as Verisign(www.verisign.co.uk). The certificate must be installed by yourhosting company


Dreamweaver project Add eCommerce facilities to the site

Lingo leveller


■ Secure serverA secure server is one with a certificate installed, that identifiesit to the company owning the certificate, so you lyiow who youare sending your card details to. It encrypts the data sent to itso that it cannot be intercepted and read during electronictransit. When you are on a secure server you will see that theURL begins with 'https://' instead of 'http://' and in mostbrowsers you will see a padlock icon. Double-clicking on thispadlock will launch the security certificate for the site. Thecertificate will tell you who the server is registered to and whosupplied it. If you handle credit cards or other sensitive data onyour server you need a secure certificate. If this is all beingdealt with by a third-party or payment gateway then you don'tneed the certificate.

25 Test the formIf your own computer is not configured to send mail thenyou may get an error when testing. Although it should workwhen uploaded to your hosting company, you may have touse your domain email address to receive the mail, ashosting companies have anti-spam policies in place.

26 Upload your siteThis site is built using PHP and MySQL, therefore you needto have support for these on your chosen Web host. Thenyou can upload your site to the Web and allow people toaccess it. If your existing account does not offer this youmay be able to upgrade.

Onl ine resources


LCO.uka j f a M J J Q t e . a U D M B . F fl r j r > i

C h . t t > n C « t » < « . o . a )

t u u

M a n y 0 i « r * » t » K o i r i e r t a k i n g t h t n w t o w r

g h a > n n C j r t 3 i « j m O M r e b t M t B r o A x t m < O i « Q n S t l

Name of site; CharonURL: www.charDn.co.ukIf you want to implement a full shopping cart on your site thenthe free cart extension for Dreamweaver available on this Website is a good place to start.

f f ' . fi l ' l

Name of site: UK Online for BusinessURL: www.electronic-payments.co.ukThis UK-based site gives helpful advice and explains the variousoptions available for taking payments online, which will helpyou to decide the best payment method for your onlinebusiness.

- B « t : t e c a l h M t o a c i b o * ; c f r c a

• • S « r v « r v « r s < o n a . o . n - n t

'■ r<ta1t scr iKtur* c a b i a r t t g t , , -

I w S r ra i g L o c u « o x w c l H r d

4 . a w t Q _ 1 n c r e e e i i c ,

.TO'"iefaMlt wax.

O u a p t n g O a t * f a r t J t

i S K S s s i i i i : : :t a b U i * n o g ( n '

fi t b u i i v K C T ( l O f W) T y * s ^ i s m ;

iuu. aico_1ncr«Mnt,1 * • * * -■ -

Du^)1ng data far tabta tbt toqfn '

i N S C k T i n r o v

29 Handling the dataOpen 'drca.sql' in Notepad or a similar text editor. You cansee in this script the Create Table statements and Insert Intostatements that were used to create the database initiallyand to insert the data. You can do this to export it to back

up data, as well as move it.

mysql DATABASE_NAME </ PAT H / T O / H O M E / c i r c a . s q l

- u s e r = U S E R N A M E

-password=PASSWORD

33 Bring in the databaseEnter the above coding at the Command prompt. If you aresuccessful nothing will appear to happen. You'll just bereturned to the command prompt. However, if you log intoMySQL and do Show Tables'. You should see your tablesand can select the data.

• PuTTYtawnlMdNft MailUa FkfWfilO i C M H M f t ) T P * a *

B i M A t l e s

I T i g l a t t r c n i i s a f t v t r z i a i t / V . J S i / a A ' b e a t s m l t e * : i i t e a a o i M U. ' f t d y i D « o ( f c w a E f w a i kp ( o U » a i * i h e b « W M 1h t r v ^ o M ^ l M nfeed ^ bag. TCfxaniog i t lo ar

F a r « 9 9 , . V t t , N T . X P • m U t t l t U

P n m - C o r b r F T ? ) ( P S A M - )

P s T T Y t e l aatvt^xt f o r b r F T P ) ( R S A a i i ) ( D S A M )

( c r b v F m f P S A M )

P S F T P o A j e w ( o r b v F T P l ( R S A u i ) f D S A n f )

P U p fc f cne ( o r b v F T i r ( R S A M ) ( D S A i k )

? » t ^ ( P S A m >

PvTTigem p > « h ' g e a C T t f o r b v F T P ) a > S A « K )

P B T T Y ( P S A M l

P o T T i ' r i p u l t v t d C T g f o r b v F T P ) ( R & A M ) ( T > S A s i )

P S C ? ( a b v F T P i ( U S A «■ ) ( D S A . 1 1

30 Import the databaseIf your host tells you to use SSH or Telnet to connect to thedatabase you need to import the data at the command line.You can get Telnet from the Windows Command Prompt. ForSSH you will need to use a client - a good choice is(wvw.chiark.greenend.org.uk/-sgtatham/putty/download)

34 Open PHPMyAdminIf your hosting company uses PHPMyAdmin you can import

your SQL script using the Web interface. Versions ofPHPMyAdmin vary as to where the import functionality islocated, but there will be a box where you can browse forthe location of the text file. This text sViouW be your SQL.

72 I PRACTICAL WEB PR0IECT5 I DREAMWEAVER

Add eCommerce facilities to the site Dreamweaver project

I C:\WINDOWS\System32\cmd.exeM i c r o s o f t W i n d o w s X P [ U e r s i o n 5 . 1 . 2 6 0 0 ]

j<C> Copyright 1985-2001 Microsoft Corp.

; C : \ > c d n y s q l / b i n

C:Nnys q Isb in >

27 Transfer the databaseTo move the site from your computer to a live Web serveryou will need to move the database. First, you'll need toexport your database and any added data from your localMySQL server. To do this, open a Windows CommandPrompt and the MySQL directory

PuTTY ConflguratfonCategay;

S e s s i o n

Te f m i n d

Keyboard- W w t o w

AppearanceT i a n s i a t i o n

S e l e c t i o n

C o l a # $

B C o n n e c t i o n

T e ^

S S H

6a»copbon$ for you PuTTY sessionSpecify your connection by host rwneH o s t N a m e

P i o t o c o t' Raw

P o r t

1 ^

Load, save or delete a stoied sessionS a v e d S e s s i o n s

Oefai i tSettngt

31 Putty in your handsThe executable you downloaded is Putty but there's nothingto install. Run the application and select SSH or Telnet. InHost Name enter the name or IP Address you have beengiven to connect. Then click Open, at the command promptbefore typing your username and password as requested.

s . - r O i D C i Q l g W D l S S

1 < ? p h p

S < h 9 9 S n a t t t _ c a t m C i r c a " ' l o c A l h o i t " ;

' Su#«tn«M_,ca!mCirca • j"r

9 S c o n n C i t c a - a y s q l _ p c c f t n e c t ( « h a a e M a e _ e o i i n C t c c « . ,

E . t i m _ E R a O R ) ;S i i C ' >

. o o l h s i w g e ;C<v»»s f l l e .a o j n e n t t v c * .

35 Edit the Connection includeYou need to use the correct connection information for yourlive database. Qpen 'Connections/connCirca.php'. Variable$database_connCirca is the database name;$username_connCirca is your username;$password_connCirca is your password.

C: mysq ldump c i r ca —user=USERNAME

— p a s s w o r d = PA S S W O R D > c : \ c i r c a . s q l

28 Create the SQL scriptIn the MySQL directory use the mysqldump utility to exportthe database. Use the coding above and this command willrun mysqldump and choose which database to use,passing the username and password to the server andgiving the location to save the file to

32 Upload the SQL scriptUpload the SQL script that you created with mysqldump toyour home directory on the server Check, the full path tothat file as you will need it next. Your hosting companyshould be able to tell you the path to your home directory,or you can check its help documentation.

isa r -—

36 Upload the filesYou can now upload all of the files to your site. Uploadingcan be done either by using Dreamweaver, in which caseyou would need to set your host up as the Remote Site, orusing a third party FTP client. Here we are using the FTPClient WS-FTP Pro.

Power users' tips


<?pi^ requir«_once{'Cronnectiona/coDBCirc«.php'); ?>< ? p h p

5 n « « » » _ P O S T { * c o n t a c t l t a i i e ' ] ;

$ e < u i l » S _ P 0 5 I ( * C 0 n t 4 C t E a « i l ' 1 ;

J c o M e n t a - $ _ P O S I t ' c

t t A i l C ^ l r a c h e l A n d i e w . c t

}

: a ; C o n t a c t r Q m ' ' , $ C Q B

< ! K X : T Y F E h t m l P O B L I : " - / / W 3 C / / 0 T D h t m l 4 . 0 1 T r a a a i t i O M l Z / E H

" h c t p ; / / w w w . w 3 . o r g / T R / h t a l 4 / l o o s e . d t d " >< h t i i i l > . . . .

< t l t l e > c i t c « < / t i t l e >

■ Send emails with PHPIn the tutorial we used PHP to send our contact form via email.

The PHP mail function requires the To Address, the Subject, the

Message and the From Address, to send a mail using thedefault mail program. We sent the contents of the fieldcontactComments as the message.

$ c o i n m e n t s = " N a i n e : " , $ n a ]

$ c o m m e n t s - $ c o i r a n e n t s .

" \ n E m a i l : " , $ e m a i l ;$ c o m m e n t s = $ c o m m e n t s .

" \ n C o i n i n e n t s : " .

$ _ P O S T [ ' c o n t a c t C o m m e n t s ' ] ;

■ Build your messageYou don't need to use a formulaic email because you can build

up your message before sending it, including details from moreform fields. For example, to send name and email along withthe message you should be able to use the code written in theabove screenshot .

To me@rachelandrewco ukSubject Circa Contact FormFrom: Rach&l <[email protected] uk>

N a m e R a c h e lEmail someone^rachelandrew co ukComments This emai l has b^r sent via the contact form

■ Adding the fieldsIn this way you can build up a string of emails that contain thecontent from a large form with a number of different fields thathave to be included. The \n character creates a new line so that

the email does not all njn together in one long line when it isreceived by your customer.


/ T H E \f CREATIVE \1 MAGAZINE I

switch to...GET STARTEDW t T H PA N T H E R

P O W E R B O O K G 4SrSSKJSii.TiaKSESi'S.SIf

O U T S I O E T H E B O XwoSflTwfiJnMActSroJB 'R^

DIGITAl. PHOTOGRAPH'

n : L * i fTO THRILLDiscovtr Kow to 9«t th* most from your digital cam*ra and digital images

i Image editing! excdlence

1 Expert adviceIforeveryiApp

« 9 « « t ! t . • •

Issue Four On Sale Now

Add eCommerce facilities to the site Dreamweaver profect

J * l 4 * c n

MrdKhim

a

• M a f l U f l f t U M

S K B S Q L

« B H I M .

1 K B C m c

e W H I M .

$ « •

T » »

/ w e b / D f c » A w w

F i t

1 o M « w . 7 . 3 K a ) i t M

O M

C o n t a w

0 7 / 1 2 / 2 0 0 3 M » n

(ra~ OnkiipptQ w w S i o u p

P 1 7 R M d

w i M : r W r i l t

f ? P E K M U U

j : < J IU S - T r w * e o i r e W t

M < : 4 n d > . 1 u ] 7 S 1 3 U fi t i U S : ) - 7 ( J p f ) k mt a « u c e w < M

1 1 t ^ 1

0 t M t a w t * i p « k a *

Q, _ Q . Q SF-:

Wanwi. Atttii ieatitotuter rtrMwAeM-gtoc^M' (Ua^ pttworA NO) it' « U t M / r ^ k * b a d r « « / w * b c k t a < - « w M i M i > / e < M C i r t » . | > k p « f e e 9

<r Acceu den ied for wer ' t« ;bc taD<ke« '2 l i» ( i lMt t ' p tuwod NO)«

37 Testing, testingYou should now be able to view your site on your hostingcompany Check each page of the site for any problems.Make sure that the gigs listing loads without an errormessage, that you can administer the database, and that allthe links between pages are working correctly

38 Correcting file permissionsIf things don't go smoothly. It is most likely to be somethingto do with the set up. If the site works locally Your host mayrequire you to change the file permissions on PHP scripts to755. You can change file permissions with your FTP client bylook for CHMOD.

39 Fixing database woesAnother error may occur If the pages cannot connect to thedatabase, most likely because you have not edited theConnection Include correctly or have used the wrongusername or password. Check these details very carefullyagainst the Information from your host.

The finished ar t ic le

I The stylish homepage was created inPhotoshop, and setthe tone for the restof the site

I Dynamic news itemspulled content fromthe database, whichis added in thea d m i n s e c t i o n

Templates werecreated InD r e a m w e a v e r t okeep the site'snawgadon consistent

I ' t i 'Mrrt I ' i f jws ) Ifirt 1 reC' [ ciy

n e w s

i f f O J ' X i ' O *

C h r l i t m M o flT K u r x d » y l i t h 0 « c « r T > b * r . T h i l t M h « t d » t o u r ) c r c « l .Th« C»r)tral in P*fk*ton«. Oort«t 8pm tit midnight. Th(«

mor* ot M p»rty th»r» ■ giQ, ■n4l v* •»(! oniv S* playingfor * tn»»mum 30 mini durt»>^ tti« rughk- T»iiia l s o t i m * r m o f fi c u H y s h c m o f f v i d e o t oth* )<m*s Song on big •cr*«n< Entry enly il, cct it *Xmu sftAf ali ra) * chandra

T h * h i g h l v • r t t l t l p a H i e j X m * 9 S o n g v i e l « o n a tb « « n e o m p i « t « d » o d i « a a w l t l n gformatbng proctdurcs. Online vwxton* oft* «vait«b)* forg«n*f»l downlead by th« iMHik«nd>im!I ^ tuppofting MP4. Quicktima and Straammg. Empc ^ * £ k ) n g b * c k O v e r n « K t d a y < a s « o o n a * t K epag« goat live •na'il po«t « n*<i« utory.

- , . . E F ! . - . 1 . , - ,T h a e o n t r e i y « r * l * | ^ i d a a t o C i f c a ' s S o r gatfrgl* (du« to b* r«(*a»*d m 0»c«mb«ri can no« b«do««^load«d m th« Vidaov i«<tton, Taka a p*«k and t*<!u * « i h « t y o u t h i n k t n t h « f o r u m * *

Tha muaie vidao #or our iiT<mtn«nt afngta Th* Chn»tma»Song' ha# baan aubmittad fi>f th* annual Landtrab f'linnP««tiv*). intilch takM p^aca thi« Sat £ D««. Wa'H lat youk n o n r i t » l f g o « » .

r«>TV9 I r*»ws ! Itv? bacwj I t OiJOtai^t

The Band section ishome to a zanyFlash-built plathrmgame where visitorsmus t rescue theb a n d m e m b e r s f r o mev i l a l i ens

The record storeallovirs visitors to payf o r a n d d o w n l o a dmusic using PayPaland Payloadz

The gig listing showupcoming gigs, againadded in the

a d m i n i s t r a d o nsection, which willexpire automatically

You can see the finished Web site in action by pointingyour browser to www.paragonxo.uk/pvt^ite


Feature Prepare for lift off

P r e p a r if o r

l i f t o f f .

76 I PRAaiCAL WEBPROIECTS I DREAMWEAVER

■ V J - \ L

M O W Y O U ' V E C R E A T E DA S T U I U n i i n i G W E B S I T E

I I M D R E A M W E A V E RI T ' S T I M E T O S H O W

I T O F F T O T H EW O R L D . W E R E V E A LT H E B E S T W A Y S T O

P R O M O T E Y O U RS I T E A N D P U L L l A I

T H E C R O W D S

Prepare for lift off Feature

Name: WhoisURL: www.whois.comThis free online sen/ice allows you to check tfieavaitabflity of a Web address. Type tfie riame youwant in the search box and it will tell you whether it's 'currently registered, and if so who owns it.

i Get your site seen

Name; Search Engine WatchURL: www.searchengjnewatch.comThis site is ideal for anyone interested in finding outwhat makes search en^nes tick, and contains acomprehensive guide to getting ranked as high as /possible with the major engines.

Name, Bring Me HitsURL: www.bringmehits.comBesides providing a wealth of advice on promoting

site with a catchy domain name, you can also

e tie site to download free sticky content, such asf forums, games and polls.

Name: Zeus Internet Marketing RobotURL www.cyber-robotics.comSwap links with similar Web sites and shoot straightto the t(^ of the search results page. This piece of kitautomates the process of trading links, helping you toreach large numbers of people with minimum effort.

ack in the late Nineties If you had even a basic grasp ofHTML you could persuade an investor to hurl ridiculousamounts of cash at you, such was the optimism within

the fledgling Internet industry.Like stockbrokers the decade before them. Web designers

became overnight superstars, commanding massive cash advancesfrom venture capitalists in return for a snippet of their coding know-how. Back then, it seemed like you could build a site about yourNan's dog and someone, somewhere would be prepared to offeryou millions to market the idea, in the belief that just because it wasbased online, ltd become a money-making machine.

Of course, things didn't quite pan out for these early starry-eyede-entrepreneurs, as they slowly began to realise that the Web wasn'tgoing to revolutionise the world's economy In fact, making a successof a Web site is much the same of building a thriving businessoffline. It takes a great deal of care and attention to ensure youcreate something that fulfils a need, and which people will beinterested in visiting.

If you've built yourself a site that's worth shouting about, then it'simportant to ensure it gets the hits it deserves by implementing astructured promotion strategy Here, we explain a few simplemeasures for ensuring that the fruits of your labour don't go unnoticed and reveal how to turn your site into a money-spinner.

Make a name for yourselfCreating a site in Dreamweaver is much like giving birth to a baby inthat after hours of painstaking labour, one of the first things youneed to do is decide upon a suitable name. A memorable domainname is a sure-fire way of attracting visitors to your site, so it'simportant that you choose wisely

One of the key things to make sure of when choosing a domainis that the name reflects your site or business. Naming a site afterits domain name is a clever way of ensuring that visitors rememberyour address. But what happens if the name you want is taken? Theanswer really depends on how committed you are to that name. Ifit's an existing brand name that's known to the public then it'sprobably best not to change it just because you couldn't get thedomain. In this case, you may wish to try and buy the domain fromits current owner, which you can check by looking up the 'Whols'information on a site such as GeekTools (www.geektools.com). Ifyou're just starting out though, it'll work out far cheaper for you toname your site after the domain name you've acquired instead ofbreaking the bank for a name which you've got no real loyalty to.

Of course, buying a domain name can be a painful act financially,especially if you insist upon a '.com' suffix. If you want to keepoverheads low, your best bet would be to look for a hostingpackage that offers a free domain, or visit a site such as


Feature Prepare for ift off

Shopping.net (www.shopping.net), which contains a usefulcomparison of some of the different prices and services offered by avariety of registrars.

C h o o s e a h o s tIt's important not to fall into the trap of settling for the free Webhosting dished out by your ISR because this often proves to beunreliable. It's worth investing a little more cash to hook up with afast host that provides secure payment facilities and support for thelatest dynamic scripting technologies.

WebFusion (www.webfusion.co.uk) is currently the UK's largesthosting company and offers packages from only £795 a month. Thefirm has a large range of deals to suit various needs, providingfeatures such as MySQL databases, eCommerce services, secureserver access, and Active Server Pages. Fasthosts(www.fasthosts.co.uk) is another big name in hosting, allowing youto set up your Web space instantly for as little as £1.99 a month.Unlike many of the free hosting deals you'll find, the company hostsites on Envisage Standard, meaning that your site is housed onmultiple servers for maximum reliability You can rest easily in theknowledge that your visitors won't be getting annoyed at not beingable to access the content on your site.

"Getting visitors to come to your site isone thing, getting them to come backagain is something quite different"

if you're worried about getting stuck with a sub-standard hostingpackage, then it's worth checking the contract before you sign up.Some hosts allow you to terminate the contract at any time,meaning you don't need to carry on forking out for a service you'renot happy with, l&l Internet (www.oneandone.co.uk) offers a 60-day money back guarantee, allowing you to pull the plug if you'renot completely satisfied, and recoup your outlay

Get ranked higherOnce you've settled upon a name and have a solid platform for yoursite it's time to start shouting it from the rooftops. The best place toget your site noticed on the Web is on a search engine, because thisis where people begin their quest for information online. By getting

your site listed as highly as possible on the most popular searchengines, you're more likely to win people's interest because yourcontent will be relevant to what they're looking for.

With billions of pages out there, you can't expect the likes ofGoogle, AltaVista and Ask jeeves to come and find your site and giveit maximum exposure. A query on a crawler-based search enginecan turn up millions of matches, and in many cases only the 10most relevant matches show up on the first page. It's important thatyou take time to optimise your site to ensure it appears as early aspossible in the search results, and there are a number of tactics youcan employ to achieve this.

One of the keys to getting your site noticed is to pick your targetkeywords carefully These are the words you imagine someonetyping into the search box to find your site. So if you've built a pageabout knitting patterns, any time a person types the term knittingpatterns into a search engine, you want your page to be in the top 10results. Target keywords should always be at least two words long, ortoo many sites will be relevant and you'll struggle to compete.

You should make use of Meta tags to insert your target keywordsstrategically in your Web pages, so the automated crawlers used bythe search engines pick them up. Once you've decided upon yourkeywords, these should appear in crucial locations on your pages.It's vital that you include your target keywords in your page's titleand build your titles around the top two or three phrases that the

LWehFiTsionihotlne0670 333 0250 sates#Aebfusion.c».uk

New Hosting PackagesE a c h p e c M g e r d u d M a M t n e e s s e n t i a l s f o r h o c l m g a n c r a a b v a w

seriouslye a s y

web hosting

TO'iSrysir

Your site will soon become a laughing stock if you settle for second-rate hosting. Makesure you host your pages with a reliable firm such as WebFusion (wvm.webfusion.com)

> Case study

Email marketing in action - E Botham & SonsName: Mike jarman

Company: E Botham & SonsURL: www.botham.co.uk

>

Mike jafman is what you might cali an internet veteran, and hisYorkshire bakery business has been online since 1995. He now sells150-200 items online and takes an average of 200 orders per iTionth.The catalogue is a carefully tasted collection of items such asalebration cakes, biscuits, presen/es, teas and coffees, along with arange of hampers containing selections of these goods.

Over the years he has found that his style of email marketing has^ success rate of around three percent, which can sometimes rise tofiveor 10 percent. He currently mails 2,000 existing customers fourtimes a war, for Mother's Day, Easter and twice for Christmas (an alertabout piabng overseas orders and then a reminder). But he warns;"Owi't overdo it or customers will start to ask to come off your mailinglist in their droves."


▶ Tips for the top

Follow this recipe for success and you'lf havea fighting chance of making your site fly

Avoid free hostingVisjiors will gel turned off if your site is load oi goes down for largeperiods of time, so make sure you fir d a rej)l;t3! hosting dijal

Listen to your visitorsThe purpose of your site should inft*m or excite your users-Gauge tfieir feedback to make suFf doing your job ptoperiy

0 Communicate effectivety\Vh»,viovt'f you approach vwliots/vr custornors via email, take care over howyou ctMistiLici youi eni.itjs, any mistakes will diinvage your cre<fibility

Oeate a mailing listMake sure you vi^itois to come back and view new content byifiiplrnioMtifWtjii emoH lunvslottof for your site

Doffl us^JTbshy adsNet ustts hate obuus'vo odvtMiis»r>y and unsolicited emails, so avoid this atS costs

Ma:iicting is keyYbii can have tfie best set of Web pages ever crt-afcjd but remember thatwithout promoting it pfoperiy. it never getting the aiieiuion it deserves

Prepare for lift off Feature

I 'M; i i .«as

r « i U n 9 » n t wi t fl n n 1 v i T - ^ > 1 p r i r

^1!I H I I

While you can choose to submit your site tosearch engines manually it's wise to use aprogram such as Axandra to do the job for you

i m n

= _ o

As its name suggests, I Make News allows you tospread the word about the latest content on yoursite, directly to your visitors' inboxes

site is based around. Titles sliould be short and catchy, much lil<e anewspaper headline, to grab the user's attention when they skimdown the search engine results page.

Most of the major search engines use link analysis as part oftheir ranking system because it gives them a useful means ofdeciding which pages are good for a particular topic. Pages linked toby highly ranked sites are more likely to be of interest to the visitor, sothe search engine looks favourably on them. Visit the major searchengines to perform a search for your target keywords and look at thepages that appear at the top of the results. Visit these pages and askthe site owners if they'll link to you. They will probably agree to this,especially if you agree to link to them in return.

In terms of the logistics of getting your site listed, you can eitherplump for a piece of manual submission software such as Axandra(www.axandra.com), TrafficSeeker (www.trafficseeker.com) orMetrics (www.netrics.com); or sign up with a company that will dothe job for you, such as www.businessnGt.freesavers.com. Withmany of the larger search engines like Lycos and Yahoo! you'll needto submit your pages manually by filling out details about your siteat the search engine itself It's also worth considering sponsoredlinks, such as Google's AdWords service (www.google.co.uk) whereyou pay to submit your page to a prominent section of the searchengine, on a pay-per-click basis.

Spread the newsGetting visitors to come to your site is one thing, getting them tocome back again is something quite different. Provided you have adynamic site that's regularly updated, you'll want your customers tocome back and see your new content. You could make use of Web-based advertising to strengthen awareness of your brand. However,

banners and pop-ups have a tendency to wind users up so it's bestto try and formulate original methods for reaching out to punters.

One way of getting your message across on a very targeted,personal level is to deliver content direct to your user's inboxthrough a commercial newsletter. This can be achieved by buildingup a database of visitors who tick a box on your site to say thatthey're interested in receiving the newsletter. You can then deliverfresh content from your site on a regular basis, with a link back toyour Web site of course. While it is possible to create HTML emailnewsletters in Dreamweaver, your best bet is to use a third-partyapplication to do the job. I Make News is a particularly effectiveprogram for this, and a free trial is available from the developer'sWeb site at www.imakenews.com

G e t s e t f o r s u c c e s sIt's important to talk to your customers on a regular basis to tellthem about your site and encourage them to spread the word totheir peers, join forums where potential customers are likely to hangout, and build a reputation for yourself by posting messages of helpand support, leaving a link to your site after every post. If it's athriving community then word will soon spread and you'll bebeating the visitors off.

Once you've become Mr Popular it's important not to letcomplacency set in. The key to a successful site lies in listening toyour customers and evolving your site with their changing needs,lust because you've built a great site in Dreamweaver, which seemsto be a hit with the public, don't assume it'll stay this way forever.Take the time to update your pages' content and design becausethis can make the difference between a one-hit wonder and alasting online success story

DREAMWEAVER I PRACTICAL WEBPRG/ECTS I 79

Subscriptions

Get three issues free!OPTION ONE

SAVE £20Web graphics D Page layout Dynamic databases Flash design IJeConnmerce PHP

(complete,■ I wlGVlw jargon-free guide to. . .

WHEN YOU SUBSCRIBE TOPRACTICAL WEB PROJECTS▶ 10 ISSUES FOR THE PRICE OF SEVEN▶ NEVER MISS AN ISSUE AGAIN▶ FREE PACKED CD EVERY TIME▶ FREE DELIVERY TO YOUR DOOR

SRaaSSjAVER6 S O M B O F W t B K E a « w ~ " ^, Dreamweaver MX 200«nowerful Dreamweaver MX extensions:«Cs?i.s.oenha,,cevou,Web▶ 100 royalty-free images and Web graphics

Learn how to create a stunning site from scratchExpert advice for layout, graphics and databasesFrom start to finish - learn new skills as you build!

PROFESSIONALTIPS REVEALEDEmulate some of the Web's best designswith our expert Dreamweaver tricks

O U R S

4TH DIMENSION 6.8ADO A DATABASE 0^TO YOUR SITE WITH —THIS TOP OUAUTY ,,DEVELOPER TOOL I(P tONLY) ■

quickly create suck -VONUNEWRMSAND " • "I SURVEYS WITH THS

UTILITY FROM QUASK J .-3(PC ONLY)

No CD? Ask your newsagent for one now!

▶ 40 pages of expert projectsCREATE A BRILLIANT SITE IN24 HOURS WITH OUR ADVICE▶ Every Dreamweaver MX feature explained▶ Design stylish Web graphics in Photoshop^ Learn how to create elegant page layouts^ Eigtit-page dynamk database masterclass▶ beate interactive Web pages in Flash MX▶ Set up shop witii our eCommerce primers i

enthuse and inform

THE NUMBER ONE ,WEB CREATIVITY TOOL U iiiiiii 7 5 " 1 3 8 0 0 0 " I

Subscribe to Practical Web Projects for just £39.90 a year - saving you 33 percent off the normal cover price

Call our subscription hotline now!0 8 7 0 4 4 4 8 6 8 2


Subscriptions

OPTION TWOSUBSCRIBE TO PWP & PRAaiCALINTERNET WEB DESIGNER mD...

SAVE £64▶ GET 13 ISSUES OF PRACTICAL INTERNET WEB

DESIGNER PLUS 10 ISSUES OF PWP AND SAVE £64

▶ PAY lUST £3.20 AN ISSUE. THAT'S A SAVING OFOVER £2 PER MAGAZINE!

The Number One Wb Creativity Tbol

Subscribe to Practical Web Projects and Practical InternetWeb Designer for only £73.42 a year - saving you over 40percent off the normal cover price

VfebPi^P E R S O N A L D E TA I L S

Youf name

Address

Post code Emai l

Phone number Date of Birth

SUBSCRIPTION AS A GIFT

N a m e

Address

P o s t c o d e Email

P h o n e n u m b e r Date of Birth

□ New subscription □ Renewal subscriptionPAY M E N T D E TA I L S1. Direct Debit

□ Option one UK only £9.97 every 3 months□ Option two UK only £18.35 every 3 nnontfis

I Media code: PWP0417A|I Media code: PWP0417B|

Instruction to your Bank orBuilding Society to pay by Direct Debit

Please fill in the form and send it to; Highbury - Paragon Ltd, FREEPOST NATW1809,(Customer Interface), SOMERTON, TA11 6ZA

lame and full postal address of your Bank or Building Sodcty Originatoi's identiftcalKXi NumberIc tfie rnanaget eank/Swkhng Society

I 5 MRefeteiKe Number

Name(s) ot account twWedil

histfuctiom to your Bank or eutkJmg society:Ptea« pay Pat agon PuWrthiog Ltd Direct DetKis tiom ttw accountdetailed m Ihis mstruclon subfect to the safeguards assured tiyihe Otiecl Debit guarantee I urtdeistand thai this instruction trwy■cmam with Paragon Publishing Ltd and,i( so, details w(l bepassed on electronKally to my Bank/Building soc«ty

Bank/Building society ac

Banks and buikJtng societies may not accept Direct Debit nstnjctnns for some types of account

2. Cheque/credit/debit card

Option one; 10 issues of PracticalWeb Projects□ U K £ 3 9 . 9 0□ Europe £49.00□ World £58.00

Option two; 10 issues of PWP 6 13issues of PIWD

□ U K £ 7 3 . 4 2□ Europe £90.40□ World £07,20

Media code: PWP0417A Media code: PWP0417B

□ Cheque (£'s sterling made payable to Highbury - Paragon)□ Visa □ Mastercard □ Annex □ Switch □ Delta

Card number: Expiry date:

Issue No:

Signed:

XPlease return this order form or a photocopy of it togetherwith your cheque/PO (if applicable) to the following address:Highbury - Paragon Ltd, FREEPOST NATW1809,

PARAGON (Customer Interface), SOMERTON, TA11 6ZAFrom time to time, Highbury - Paragon sends out news about exciting new productsand opportunities that are of interest to readers. If you do not wish to receive suchinformation, please tick this box □

Overseas; +44 870 444 8682F a x : 0 1 4 5 8 2 7 11 4 6

Email: [email protected] I PRACTICAL WEB PROJEQS 1 81

Dreamweaver FAQ

Dreamweaver F^0▶ Dreamweaver may be the best Web design software around, but that doesn't mean it alwaysruns smoothly Thankfully Danny McAleer is on call to answer all your Web editing questions

Stray bulletsQl have a bulleted list of items on my Web page,but t don't want to use the standard blobs. I

also don't like the amount of wasted space aroundthe text. Listed items add a paragraph break beforeand after tfie list, and a huge tab space for eachbullet, and it looks awful. I've tried making a list usingtables but it's a real pest, especially when I've seenon other sites that they have successfully customisedan unordered list without tables. But I can't work outhow they do it, someone must know?

Mark Stevens

The answer to all your list misery is to usestyle sheets. It's not as hard as you might

think. Rigfit-dick on the page and choose CSS Stylesfollowed by New CSS Style (in MX) or New (inMX2004). In the subsequent dialog box, select theRedefine HTML Tag option, and pick the unorderedlist <url> tag from the pull-down menu above.Finally, select This Document Only and press OK.

Another window will open where you can set upthe style for the unordered list. First of all, flick tothe List category to define how the blob will appear.Press the Browse button to load your own image touse as a bullet point, or use the Type pull-downmenu to choose one of the browser default shapes.The Position command controls where the dot

appears relative to the lines of text. If your list itemsgo over a line, it's best to set this to Outside so thatyou still get the text indent on each subsequent line.

Swap to the Box category and de-select theSame for All option in the Margin section. To removethe top and bottom spaces before and after the list,set the Top and Bottom margins to '0' pixels. Not allof these styles are rendered in the Dreamweaverdesign window, so do preview your page first.

Remote control

QI've just upgraded to MX 2004 fromDreamweaver 4.1 do a lot of offline content so Ireally have no need to see the remote site files. DW4let me turn off this pane, but in MX 2004 I have notbeen able to find this feature. I can make it narrower,but when I resize the Files window, it comes rightback to occupy half of that window. Is it possible toswitch off the Remote Files pane?

Liz Crossley

Alt certainly is, and it's remarkably easy to do,too. In the Files panel, where your local andremote site files are listed, are a number of buttons.If you push the Expand/Collapse button, the windowwill show only one column. Use the pull-downmenu to set the panel to Local View so it displaysthe files only on your hard drive.

m,\

• C »t i a m« | 3

» f a« O* s

n i

• t L U m 1

} 1< 1

If you don't need to see them, switch off the remote site filessection in the Files panel

Tormented by tables

Q Please help as Dreamweaver is driving me todespair I have created quite a complicatedtable structure in which to hold all the elements of mypage, but whenever I update any of the stuff inside,Dreamweaver starts changing the dimensions of eachcell and the layout gets pickled. How do I stop it fromdoing this?

Paul ine Dawson

A Tables are a marvellous way of building apage structure, but you're absolutely rightabout the fiddly nature of the fellows. The besttechnique when using tables is to carefully plan yourpage structure beforehand. An old-fashioned penciland paper always does the trick. That way you canbetter judge how many cells you need, and the sizesneeded to accommodate the page content. Try to

keep the main table as simple as you can, avoidingtoo many spanned rows or columns because thiswill cause confusion later.

Once you've planned the layout, insert the maintable on the page. Drag the cell borders around untilyou have an approximation of the layout you drewon the paper. With the table selected, use thebuttons in the Properties panel to convert the widthsand heights to pixels.

In order to fix the table, the exact pixel widthsand heights of each cell must be specified, ratherthan relying upon relative sizes (percentages) ornothing at all. The reason for this is that when atable is rendered in a browser, the cell dimensionstake precedence over any set for the overall table, orfor each individual row. These sizes must also takeinto account any cell spacing set for the overall table.For example, if a 400-pixel wide table has a cellspacing value of 10 pixels and four columns, thetotal cell column widths cannot exceed 3S0 pixels. Ifyou are using the latest version of Dreamweaver,you can consolidate the table widths by clicking onthe pixel width display underneath the table, andchoosing 'Make all widths consistent' from the popup menu. When you add content to each cell beaware that they will still stretch to accommodate anycontent. So don't try and cram a 200-pixel widepicture in a 180-pixel wide cell and not expect thelayout to go awry.

Another technique that you might like to exploreis using Dreamweaver's templates. Rather thanadding actual content to each cell in your layout,add editable regions instead (right-click and chooseTemplates followed by New Editable Region in thepop-up menu). Save the page as a template, andcreate a new page from it. Now you won't even beable to alter the table or cell properties accidentally.

Tables are incredibly useful for structuring your Web pages. Controllingthem in Dreamweaver, however, takes a little more patience

Dreamweaver FAQ

Online resources

Your expert guide:

DannyM c A l e e r 1

DANNY MCALEER is currently working as a designer and programmer for a NewMedia publishing company and has more than six years of designing andprogramming experience. As a former Editor of Web Pages Made Easy magazinethere's no doubt that he knows his onions. Danny's recent projects have included apost-conference site for the CCA (www.cca.ot .uk)

Random gallery


Name of site: Creative ProURL: www.cteativepro.com/software/featureAmong the many offerings on this site is a simple but effectiveprimer to using and editing layers in Dreamweaver. It clearlyexplains how they work, the difference between the variousmodes, and how layers interact with one another and otfierelements on the page.

Name of site: KaosweaverURL: www.lcaosweaver.comThere are hundreds of developers creating extensions forDreamweaver. One such site is Kaosweaver, which containsseveral very useful extensions, a handful of wfhich are

completely free to download. Also, don't forget to look atMacromedia's own Exchange {www.macromedia.com/exchange)

Preview pains

Ql have Internet Explorer and Netscape set up aspreview browsers in Dreamweaver. While I'vebeen able to force IE into opening the preview in thesame window, whenever I choose Preview inNetscape, a new window opens every time. This canbecome very annoying, especially when I previewWeb pages regularly, and have to repeatedly close oldpreview windows. How can I make Dreamweaver tellNetscape to use the same window every time toavoid this irritating problem?

Ian Heath

A The simple answer to this one Is not to keeppreviewing the page from withinDreamweaver, but merely refresh the page in thebrowser once you've made the changes. In order todo this you will need to set an option withinDreamweaver's Preferences so that it isn't using at e m p o r a r y p a g e t o p r e v i e w , ▶

Ql'm trying to create a Web page for my evening art class, and would like to add scans of the pupil'sartwork to the site. I've made a separate gallery page, but what I'd really like to do is have one ofthe pictures randomly selected and displayed on the home page each time it's loaded. Adding a picture iseasy enough, but I can't figure out how to make it choose a random image. I'm new to all this, so anyhelp would be most useful.

Mar ion For tcrof t

A Randomly displaying an image is something that javaScrlpt is particularly good at doing. Don'tworry because Dreamweaver has all the elements you need in its Code Snippets library. Followthe steps below to add one to your page (note that you will need to preview it in a Web browser).

First of all, switch Dreamweaver to the Code view so you can see the page's HTML. Open the Codepanel and click on the Snippets tab. Scroll down the list until you find the javaScrlpt folder. Open thisand the Images folder inside that. Click and drag the Random Image snippet onto the page.

» 4 ^ C m :

o n e t a h t t p - e q u i v - ' C o n t e n t - T y p e " i c h « r s « t M »c / h « « d .

« fel lew ng sni p^rt (

l a g S r c - y m ^ r { r ♦

S R C - ' t

s * t f r . i T M i r t » « V I 4 M n m

B AiB a- 4i- a <a|B- p

2 0 , ' ' < r t /

« i ^ c • i a 9 * r r ( r ♦ J j ;i B f i l . i « » « r r [ C r •

. > « » « r r [ ( r • J W J s

1 Define the arrayThe first line in the code is called an array and this isused to store the information about each picture(filename, width and height). Replace the examplefilenames with those of your own, ensuring you enter theright file path if the pictures are in a different folder

2 Add more imagesIt is possible to have more than three pictures in your

gallery lust mal<e sure you add a comma between eachentry in the array and that you include filename, widthand height details for each picture (in that order). Next,remove the two forward slashes from the beginning.

< / h e a d >

<body>

<5cr ipt l4Mn9ua9e»"3ava5cr ipt">

• 4rt/T»Dre. 3pg-, 100,60,' art/another, jpg', 200,200]);

f u n c t i o n 1

va r imgSrc , tmgW, imgH, r ;

iwgSrc = imgArrCr • 3 ] ;i r n ^ = ^ m 9 A r r [ ( r ' 3 ) + l ] ;i r i iBH = i i n9Ar r [ ( r • 3 )+2 ] ;

d o c u m e r r t .

}SRC«'-^'>»«QSrc+' WIDTH-'+nwJkh^' HEKHT«'+itH

< / s c n p t >

</body>

<scnp t 1a f )guage«" j4vasc r i p t ">

r a n d o m l m a g e C [ ' a r t / fi e l d s . j P 9 ' , 2 0 0 , 1 8 0 , ' a r t / p o r ^ r a i t o p g ' . 1 ^ . 2 2 0 ,' a r t / m o r e . j p g ' , 1 0 0 , 8 0 , ' a r t / a n o t h e r . j p g ' , 2 0 0 , 2 0 0 ] ) ;

fi m c t i o i t r a n < l c m l m a g e ( i i n 9 A r r )

r > randDiiMun6er(imgArr.1ength / 3}; |imgSrc = imgArr[r • 3|; ^i m g w - i M 9 A r r [ ( r ' 3 ) + l ] ;i i ngM = iB i9A r r [ ( r ' 3 )+2 ] ;

document.wnteCcIMG SRC-'+im9Src+' W1DTH«'h}

HElGHT-'+iBig

re tu rn Ma th .floo r (Ma th . r -a t i . i >5m( ) * l i i i n t ) z> l a

< / s c r i p t >

</body>

3 Tops and tailsMove the cursor up one line and add this marl<-up:<script language="iavascript">. This tells the browserthat the following has to be interpreted as lavaScript, ratherthan written on the page. Add a closing </script> tag tothe bottom of the function after closing the curly bracket.

4 R a n d o m i z e f u n c t i o n

Delete the -1 part so that the second line of the funaionreads: r=randomNumbet<imgArr.length/3): Only one morething to do now. Open the Randomizers folder in the CodeSnippets panel, and drag and drop the Random Numberonto the page underneath the randomlmageO function.

DREAMWEAVER ■ PRACTICAL WEB PROIEaS I S3

Dreamweaver FAQ

Dreamweaver FAQLingo leveller

Technical terms bulldozed■ javascriptA scripting language, specifically designed for the Web, JavaScriptis used to add interactive elements to your pages. Typical

lavaScript funrtions include rollover buttons, random imagegalleries, pop-up windows and other page navigation tools.

■ LayerLayers enable you to overlap elements on an HTML page, suchas overlaying text on a picture. Layers work much like a stack of

tracing paper sheets. For example, page elements on sheets inthe stack at the bottom will still be visible in the areas where

there aren't elements on the sheets above it.

■ CSSCascading Style Sheets provide a way of controlling theappearance of a Web page and the elements therein. With GSyou can style text, list items, borders, add backgrounds, createrollover effects, and position elements on the page as you wantthem with pixel accuracy.

▶ Power users' tip


I n d e n t : R j 2 j JT i b i t w :

LhabrMktypa: jCRLF (Windoon) 3

M«Jt«(trtiUt*C4««.' |lCN<MrC4M«'yAw' O v t r n d t C M C T: r T « o > r A t t r t U t M

Cantanng: UwDIVtao I t ia CENTER t*g

S a t l » » f o r m * r f r t t v u t n l t J n u n d M t r f c U m t i t h e T M t i y j t v e i t e n r .

■ Format your HTMLEven if you're quite a proficient HTML programmer, rummagingaround a huge wedge of code looking for one erroneous tag orattribute can be tricky to say the least. While Dreamweaverhelpfully colour-codes the mark up, it's much easier tounderstand, particularly with tables, when nested tags areproperly indented. To re-jig your code, select the Apply SourceFormatting option from the Commands menu, and your nestedtags will be washed of all impurities.

• •• •

■a •;>

BEBS^SC«t«gc«y

r s s s j "A c c * t t M yC«d»C4la f i vC o d * r « m « tC o d * H n t *

Cod» R«*(rtnBCSSSlylMf t o Ty c w t / E d i l o nf o n t

SKMMTt

I n v i t o

L i y t n

N e w D o c u m w *

r ExntvyB'owMP £«cood«y Bww

OfliSf* r" Prtv»wU»nsIme<*«yFi»CKding »M ection wJ c*

Switch Dreamweaver to use the actual page rather than a temporaryrendering when you preview, and you can just refresh the browserwhen changes have been made

^ Click on the Edit menu and choose Preferences. Inthe dialog box pick the Preview in Browser categoryand select Netscape from the list of installedbrowsers. Finally, remove the tick from the boxlabelled Preview Using Temporary File. Close thedialog box and push the Preview button to startNetscape with the page that you are currently editingin Dreamweaver. Now, when you make a change,save the page, flip over to Netscape, and just pushthe Refresh button.

Friendly pagesQi am building a site for our local communitycentre and have been given a Word file, which

contains detailed directions and a map of how to findus. I then made a directions page for the site.However, when you print this new page in a Webbrowser, because of the navigation bars and otherelements, it's too wide, and so is split across twosheets of paper. I don't want to re-format the Webpage, but it's really important to be able to print itproperly. Is there an easy solution?

Andy Stirling

A There is a feature that can redirect print pagecommands to a different document, ratherthan the page currently on view in Internet Explorer.Therefore, you could upload the original Word fileand print that instead when visitors want to print thedirections page. To do this, open the Code view foryour directions page in Dreamweaver, and then addthe following line into the <head> part: linkreUalternate medla^print href="niydoc.doc",replacing 'mydoc.doc' with the name of your Wordfile. Swap back to the Design view and add somet e x t o r a b u t t o n w i t h P r i n t D i r e c t i o n s o r a s i m i l a r

label. Then, in the Properties Inspector enter:javascript:window.print();. Now, when you click onthis link, rather than printing the actual page, it willtell the browser to print the document referenced inthe header. Unfortunately, this cool feature isn't

supported by Netscape, so it isn't a perfect solution.Therefore, you should create a second version ofyour directions page with just the map and text. Youcan always export the original Word document asHTML (since it's formatted ready for printing already),then load it into Dreamweaver to tidy up. Afterexporting the HTML from Word, open it inDreamweaver and choose Clean up Word HTM fromthe Commands menu. Switch the dialog to Detailedmode and make sure that everything is ticked. PushOK to get rid of all that Word nastiness for a nice,clean page. Once you've done that, add a Print Pagelink with the javaScript as described above. Finally,add a link on the first page called 'Printer FriendlyPage' or words to that effect, that links to thisconverted Word document.

If you want visitors to print information from your site, give them ahelping hand with a useful print link

Preserve site definitions

QI have six or seven Web sites all set up inDreamweaver MX, each of which has differentFTP settings and so on. I'd hate to lose thisinformation. Is there a way to back up the definitions?

Ha/ey Brooks

A There is actually a known issue with the firstrelease of Dreamweaver MX (6.0), which can,if the application crashes, cause you to lose all yoursite definitions. So before we get onto the matter ofbacking up, it's best to check that you have the up-to-date version. Start the program and note theversion number in the splash screen when it loads. Ifyou have an MX version older than 6.1, go towvwv.inacromedia.com/support/dreamweaver/downlaads_updater5 and click on Dreamweaver MX6.1Updater Page. Download the free update applicableto your operating system. However, before you runthe updater, you must disable all of your extensions,or they will not appear in the menus after the updateis installed. Use the Extension Manager to disablethem. Now that's all sorted out, we can concentrateon preserving your site definitions. For regular MX

84 1 PRACTICAL WEBPROIECTS I DREAMWEAVER

Dreamweaver FAQ

The joy of text

Ql have designed my Web pages usingFirewori^s, making a space in one of theslices to add the text later in Dreamweaver. The

problem is that the space isn't tall enough to fit inall the text I want to write without messing up therest of the table. I really don't want to make thearea any bigger, so I was wondering if there was atool in Dreamweaver that can make a text box fitthe space? It would have to be able to scroll up anddown independently of the browser Any ideas?

Claire Shortland

Poiitioning j Conttm | About j&Mtt «n 4b*olu«iy poitor^ Sc4ci*4bl^

Ctotit 1i

0 -

CiMtM r««ir«d t tybt . r«qM«d tonpl* HTML Slmntt .' - - w M t i o n ^ p l w w t n o r l o w i h i n d l w n t h a B w ^ T i g t o n l M ^

lV«K(OlW

PiMM tntu* that •fiw nmng thrt eoiwwid yM documtriie«<it<in* Ih* N*tte«p« RMtttrw.

DeNOT toUM dr«eind drop ta eh«n0*tht poMonof th« l«iwtttw ir^«•(tng obtwt. to lopoMtion th# odit th« «tyltdofnition*.

r>quii< tbt wreNng low to b«

Piii TopofScrotoMArM ^PiwILdftolScielltbloArilSr

1 Add a scrolling layerClick, on the Insert menu and choose AP Scrollable Area.In the first section you must set the position on thepage for the text to appear. Set the Pixel Top and Leftvalues to the same position on the page as the top lefthand corner of the area you made for the text box.

Awhile there are no tools built intoDreamweaver for creating scrolling textboxes, there is an extension that can be freelydownloaded from the Macromedia Exchange thatwill do just what you want. Log ontowww.macromedia.com/exchange and click on theSearch Exchanges link. Enter 'Scrollable Area' intothe search field. Change the All Exchanges pulldown menu so that it searches just theDreamweaver Exchange, and then push Search.Click on the Download button and save the HTML

pi c N n a a Hi if *1 o ^n

2 Fill it with textNext, enter the width and height of the text area, then setthe Scroll Speed to Fast using the pull-down menu at thebottom. Flip the tabs to view the Content section. Use thissection to add the text to the Web page. Notice you canadd HTML tags for formatting text or inserting images.

Scrollable Area extension to your desktop. Notethat you will need to sign in to download any files,but membership to the exchange is completely freeand only requires an email address.

When you've downloaded the file, double-clickon the icon. This will open the extension managerso that the auto-scroller can be installed intoDreamweaver. Press Accept when you're prompted.Now you've got it installed, close the window (ifit's open) and restart Dreamweaver. This shouldsolve any problems you previously had.

£4S«<liShM(.$ h w l

E»KKlSb4«$hMl

3 Add the scroll buttonsWhen you're done, press Create. If you like, you couldreplace the default up and down scroll links with graphicbuttons. However, if you need to change the scidl boxitself it must be done in the code. Edit the 'divContainer'and 'divContent' styles to reposition or resize the text area.

B4«c 1 Det4ll«d 1 f c « 1ClMn up MTM from | Word 2000/2002

R»mov» word »p«rf(c mariajp1 XML Prom <html> (tg

Word fTNrta «nd link tags from <h«dd>^ WordXMUrwkijp(«,g„ <oip></o:p>)

<l{;if ...]><lt»ndlf]> conditional t«gs »ndthtircontents17 Rtmevti empty paragrephs end margins Prom styles

Cancel |i 1i

1i

P Clear upCSS17 Remove Nine CSS styles when possible17 Remove any style attribute that starts with "mso"17 Remove any non-CSS styte declaration|7 Remove el CSS styies from taba rows and cells|7 Remove al unused style dePlnKtons i

You can tidy up pages generated by Word with Dreamweaver's handyClean Up Word HTML tool

users, there are a number of free utilities that do anadmirable job. For starters, there's a free back upand restore registry settings utility for Dreamweaver,w h i c h c a n b e d o w n l o a d e d a t

www.navbars.net/nav/resources/DWMXregutl. Aswell as enabling you to transfer, back up or restore

site definitions. It also saves all the other informationpertaining to Dreamweaver that's stored in theWindows Registry.

Another fantastic option for backing upDreamweaver program settings is DW-Exporter. Youcan download a free copy from www.joexx.de/DW-Exporter. This program can make copies ofinformation stored in the Registry, as well as SiteDefinitions, and even the Configuration folder set up.

Of course, if you're fortunate enough to have acopy of Dreamweaver MX2004, then there is a built-intool called Export Site Definition, which will save yoursite set up details to specially formatted XMLdocument, albeit only one at a time. To access thisfeature, click on the Site menu and choose ManageSites. Now pick the site you want to back up ortransfer to another computer, then press the Exportbutton. You will have to repeat the process for eachIndividual site, so you might want to use one of thefree utilities instead. That said, even backing up one

at time is a lot less laborious than having to re-input all the set up details if you lose them. Torestore a previously saved configuration, simplypress the Import button in the Manage Sites dialogand load the '*.ste' file pertaining to the site.

U i l l l J i l . l . i l l J l i B B W£ 1 . £ « » « H *

E-::;

D W - E X P O R T E REwl jlmpoal

P»»h«

M i l p a t h 1 ContaytatienfcMM£.\w9b\stueleMy^Dr8arr>weav«i KOAC

E: \web\)tvidioMXM:ontnbute E:^w•b^*tudicMX\Cor«ibUe^Conhgul«

<1 t

j Op t ion* - - • • - -i £r«amv«wav»r j $;ontrlbute j! r wlhogt hom r»airt^

«PubLofidon20C4MXFAQSHERLOCK

Back up your important Dreamweaver configuration data with thehandy DW Exporter utility


B o o k r e v i e w s

▶ Dreamweaver is the undisputed champion of Web design tools, but where can you turn to in yourhour need should you encounter problems? We review the latest books to help lighten the load

The Dreamweaver Developer's Instant TroubleshooterAUTHORS:' ISBN: l-59t59-233-« l O o V H M cM, MaMKy fiO. Kmh aUnlMa. air i Dnw McLtta PUBLISHER: JMk«SS

B U Y O N L I N E ? : V t e M iI PRICE:

espite being the most intuitive method ofbuilding first class Web pages,Dreamweaver can still baffle even the most

switched-on developer.Co-written by PIW contributor and site

development guru, Rachel Andrew, thistroubleshooting manual is designed to act as a handyreference for negotiating Macromedia's flagship Webeditor The no-nonsense guide is easy to pick up andunderstand, whether you're a first time Dreamweaveruser or a seasoned pro. The troubleshooter is neatlypackaged into different categories, which you can dipinto depending on the area of Web development thatyou're having problems with, or that you wish to

explore further It covers areas such as defining yoursite to working with server-based technologies likeASPNET and PHP The troubleshooter also helps youmaster the application though all the stages. Asidefrom covering the day-to-say usage of the program,there are pointers on Web standards and how to

apply them in DreamweaverThe book enlightens anyone who is mystified by

templates and CSS, while addressing commonproblems faced by Web designers. It is primarilyaimed at the experienced Web designer who hasencountered problems they cannot seem to fix. Theinformation on working with different server models isfirst rate, and because the book's been penned by a

variety of professional developers, with years ofexperience in managing dynamic sites, you know thatyou're getting the best possible advice.

However, probably the best thing about the book isthe ease at which you can learn new techniquesthrough it. Because of the way it's written andillustrated, with screenshots and sample code, you'llfind yourself understanding principles andtechnologies that previously would have sent ashudder down the very centre of your spine. If you'restill struggling, there's a complete section that providesanswers to a string of common (and not-so-common)problems, helping to unravel the mysteries behind theWeb's latest scripting technologies.


B o o k r e v i e w s

Dreamweaver MX 2004 for DummiesAUTHORS: lanine Warner & Susannah GardnerISBN: 0-7645-4342

PUBLISHER: Wiley I PRICE: £16.99B U Y O N L I N E ? : Ye s a t w w w. d u m n i i e $ . c o m

f you're serious about creating

professional quality Web pages thenyou'd be mad if you don't consider using

imweaver to help you get the job done.The latest version comes with stacks of new

tools to help you improve your pages andstreamline the way you shape your online

masterpieces. As is the norm with the For Dummiesrange, this book provides a jargon-free, no-

nonsense breakdown of the essential techniquesneeded to build pages in Dreamweaver. If youalready own the previous version of the publication,Dreamweaver MX hr Dummies, you'll bedisappointed to learn that little has changed in termsof content with this update.

For newcomers to the title, this Is no bad thing,as tiie guide Is packed with practical instructions onall areas of Web creation, including designing pages,

adding graphics and working with dynamic content.The chapter on Dreamweaver MX 2004 acts as a

good primer on the new features of the update,explaining the finer points of features like the newCSS tools and Dynamic Cross Browser Validation

If you've just bought the new version ofMacromedia's Web editor and you don't own a copyof the previous edition in this range, then this shouldbe a permanent fixture on your desktop.

Max Hits

▶AUTHOR: MikeSlocombeISBN:2-S8046-765-9

P U B L I S H E R : R o t o V i s i o nB U Y O N L I N E ? : Ye s a t w w w. r o t o v i s i o n . c o n i

I PRICE: £19.99

ax Hits provides an innovative, refreshinglook at ttie world of Web site construction.It is ideal for illiterate designers, as you

can learn just as much from looking at theinspirational pictures as you can reading the text.

That's not to say the prose is total garbage though,as It provides a series of palatable, insightful guidesto the processes involved with creating successfulsites. Penned by internationally respected Webdesigner, and the brains behind www.urban75.com,Mike Slocombe, the book covers everything from

planning and building a site, to marketing andpromotion. He provides a series of pointers, whichyou may not have considered before, as well ascommon sense principles that you should know.

The real beauty of Max Hits however, is itsartwork. The book is illustrated with case studies ofsome of the Web's most celebrated design work,including the likes of eBoy, Linkdup and FlipFlopFlyin.If the examples featured in the book don't inspire youto create great Web sites, then you may as well forgetthe whole thing and take up badminton instead.

Flash 3D Cheats Most WantedAUTHORS: Balkan, Dura, Eden, Monnone, Palmer, Tarbeil, YardP R I C E : £ 2 8 . 5 0 I I S B N : 1 - 5 9 0 5 9 - 2 2 1 - 2

PUBLISHER: Friends of EDB U Y O N L I N E ? : w w w. f r i e n d s o f e d . c o m

ho says you need a high-end applicationworth of thousands of pounds in order tocreate professional 3D graphics? People

that make high-end applications worth thousandsof pounds, that's who.

Fear not, because like most things in life, there'salways a way around it, as this book sets out toprove. The title proves that everything a 3D graphicssuite can do. Flash can do too. Even if you've nevercreated a 3D drawing before in your life, you'll soonbecome a whizz thanks to the understandable, plain

English manner in which the book is written. The titlecovers everything from an introduction to the conceptto text effects and the 3D slice engine. Each chapter ispresented in the form of a series of step-by-stepguides to blagging your way to impressive 3Dgraphics and is well illustrated with pictures of howyour creation should look at each stage. TheActionScripting involved in building the graphics isalso explained very well, helping you to understandexactly what's happening every step of the way Agreat read.

Dreamweaver MX Dynamic Applications▶ AUTHOR: ieffrey BardzellISBN: 0-3£L-16680-9

P U B L I S H E R : l A a c r o m e d i a P r e s sBUY ONLINE?: Yes at www.peathpit.coni

I PRICE: £33.99

reamweaver is more than just a tool formaking Web sites about your dog, orsharing your holiday photos with your fifth

c o u s i n i n A u s t r a l i a .

Over the last few years Macromedia has rampedup the power of its Web editor to such an extent thatit's now possible to build complete dynamicapplications with the program. Of course, managingdata using server-side languages like ASPNET, JSR PHPand ColdFusion isn't the sort of thing you can pick upfrom an episode of Tomorrow's World, though it's

becoming much easier to integrate these technologieswith Dreamweaver. The guide is formed of a series ofwell written lessons covering topics such as databasedesign, writing SQL queries, cascading style sheets,and XHTML. The guide makes for a well-structuredlearning tool, and the pace of the hands-on tutorialsmakes it easy for anyone new to server-side scriptingto have a go. Each chapter is rounded off with a 'Whatyou have learned' section, re-capping the topics alongthe way Because Macromedia produces the book, theadvice and information offered is of the highest order.


T H E W E B H O S T I N G S P E C I A L I S T SH l U B S l l l U J J

DedicatedServers AiiPncesExciudeVATEmail and SMS Alerts Setup Fee Only £99Online Bandwidth Reports Operating Systems:Online RebootingFree 24/7 SupportUnlimited IP Addresses

SilverGoldPlatinum

Intel C"1.7 Ghz2.4Ghz2.67Ghz

Red Hat Linux v9.0 - FreeWindows Server 2003 Web - £10/monfhWindows Server 2003 Stondard - £20/month

256/MB/80GB 5GB £59/month512MB/80GB 10GB £69/month1024MB/806B 20GB £89/month

ResellerPackagesWindows 2000 and 2003 ServersAnonymous DNS ServersControl PanelASP Perl, PHf;.HETASPJpeg, ASPUpload, ASPEmail

All Prices Exclude VAT

SMTP Server Wifh Spam & Virus FilteringUnlimited Email Forwarders/AliasesUnlimited Email AutorespondersDedicated Reseller Support TeamFree Setup & Money-Back Guarantee

Reseller 300: 350 Domains, 10GB Bandwidth, 5000 Email Boxes - £29.99/monthReseller 500: 500 Domains, 15GB Bandwidth, 10,000 Email Boxes ■ £49,99/monthReseller 1000: WOO Domains, 25GB Bandwidth, 20,000 Email Boxes - £69.99/Month

Call us on 0870 141 7149 or visit our website

www.webs>while>u<>wait.coiiiA feature rich, professional, e-commerce website in just 10 minutes?It's easy with the fantastic "web-in-a-box" from webs-while-u-wait.com

Everything you need to get your business online in one box.All for an amazing low price of just

• 10-page website• Shopping cart & e-commerce as standard• Un l im i ted s tock i t ems• D o m a i n N a m e i n c l u d e d• Hosting included• Choose from over 200 templates• POPS E-ma i l addresses inc luded• Use unlimited text, graphics and links• No sof tware to download or instal l• No web design skills needed

webs-wbile>u

wai t .com

4JKHostScom>order: http://www.ukhosts.com e-mail: [email protected] tcl; 0800 587 2409

domain hosting£ 6 0 !

I ♦VATp a

+ VATpa

f r e e d o m a i n

with hosting

VVin2000 & Linux: includes control panel, 10Omb webspace, web mail, unlimited POP3 & e-mail forwarding,ASP. PHP. CGI-BIN, FrontPage. Ready Made Scripts

. c o . u k £ 5 !* minimum 2 years

. c o m £ 1 0 !* register for up to 10 years

many other domains available

I +VATp a

no hidden extras - all prices include all fees - no transfer charges

v i s i t u k h o s t s . c o mf o r s p e c i a l o f f e r s

domain cloaking£ 2 !I +VAT

p a* cloaking to an existing domain* 5 e-mail forwardings + catch all e-mail* metadata - description & keywords

u k h o s t s . c o m" rea l peop le - no t r obo t s "

now in our 5 th year

order: http;//www.ukhosts.com e-mail: [email protected] tel: 0800 587 2409

E l E i H H H B fVeh Hosting Solutions

An amazing service at an amazing price.> web space (mb) 1 0 2 5 5 0 1 0 0 ?> pop3 mailtxDxes 1 0 2 5 5 0 1 0 0 ?> bandwidth (mb) 5 0 0 5 0 0 5 0 0 5 0 0 ?

Price per year £ 1 0 £ 2 5 £ 4 0 £ 7 0 A s k

> no set-up fees and domain transfer into and out of your account is free of charge> 24/7 access, ftp, frontpage, online knowledge base, control panel, remote web mail> virus protection, spam filtering, password protection, site stats & logs, uri submitter> cgi-bin, guest-book, wap, bulletin board, formmail, redirect, who-is, SSI, counter

Why pay more for [email protected], http://www.saffas.com, 0781-628-2991

Upgrade your account at any time; SSL, mySQL, bandwidth, web space, email and ecommerce.

W I N D O W S S I L V E R 1 0 0 1

W I N D O W S G O L D 2 0 0 4

W I N D O W S G O L D P L U S 2 0 0 6

5 Y e s Y e s N o

1 0 Y e s Y e s N o

3 0 Y e s Y e s Y e s

W I N D O W S P L A T I N U M 5 0 0 1 0 S O Y e s Y e s Y e s

W I N D O W S P U T I N U M P L U S 5 0 0 1 5 1 0 0 Y e s Y e s Y e s

0 £ 1 4 . 9 5

0 £ 1 9 . 9 5

1 £ 4 9 . 9 5

1 £ 8 9 . 9 5Plan details above are for Windows plans only, i * Monthly Fee (excl VAT), subject to ctlange

All plans include: SiteContro! 3 Control Panel, Web-based Mail Interface. Unlimited Aliases, E-mailForwarding, XML Support, Frontpage Extensions, Website Statistics.All plans come with a 30 day money-back guarantee.

call us now on 0808180 1880 • sales@ho5tway,co.uk • vwm,hostwayco.ukdomain registration • web hosting • resellers • e-commerce ♦ dedicated servers | chicago • london • amsterdam ♦ seoul • Sydney • vancouver • tamf

#more than just

CheapNamesweb hosting too

startup Startup Business Business Enterprise Enterpri !

W e b s p a c e M b 5 0 1 0 0 2 5 0 3 5 0 5 0 0 7 5 0

P 0 P 3 e m a i l b o x e s 5 1 0 2 5 5 0 1 0 0 2 0 0

D a t a t r a n s f e r p e r n 1 G B 2 G B 4 G B 6 6 B l O G B 1 5 G B

F R E E T E L E P H O N E A N D E M A I L T E C H N I C A L S U P P O RT

Honest, value for money domain registration, domainmanagement systems, email pacltages and fast, reliable

web hosting. Fully inclusive price with many morei n t e r n a t i o n a l d o m a i n s a v a i l a b l e .

£^!c<Milr E^Vcom

call us today on 0870 120 8888on l i ne www.cheapnames .co .uk

3 F R E E . c o . u kd o m a i n n a m ewith all new web hosting accounts

Account manager

Secure connection

MySQL, PHP, ASP

FrontPage 2002

Virus & Spam Filter

Firewall

Physical security

24/7 monitoring

Web-based email

Full FTP access

CGI Perl 5.8

SSI

Web site statistics

Control panel

25 visual tutorials

P e r M o n t h £ 4 . 9 9

P e r Y e a r £ 4 9 . 9 9

Names.co Internet pic. Est. 1996. Britannia Court, 5 Moor Street, Worcester, WR1 3DB.Prices quoted per annum unless othemiise stated and exclude VAT at 17.5%. Cheques and major credit/debit cards accepted.

£ 7 . 9 9 £ 1 3 . 9 9 £ 1 6 . 9 9 £ 2 1 . 9 9 £ 2 4 . 9 '

£ 8 9 . 9 9 £ 1 4 9 . 9 9 £ 1 8 9 . 9 9 £ 2 4 9 . 9 9 £ 2 8 9 . <

{ElMtrOR f

D i s c o u n tInk j e t Ca r t r i dges & Supp l i es T H y

Compat ib les HP Recycled Lexmark RecycledEpson 5 1 6 2 5 C o l £ 0 8 . 9 9 1 0 N 0 0 1 6 B I k £ 1 3 . 9 9

Non Chipped 5 1 6 2 6 B I k £ 0 6 . 9 9 1 0 N 0 0 2 6 C o l £ 1 4 . 9 9B l a c k £ 0 1 . 9 9 5 1 6 2 9 B I k £ 0 6 . 9 9 1 2 A 1 9 7 0 B l k £ 0 9 . 9 9C o l o u r £ 0 2 . 9 9 5 1 6 3 3 B I k £ 0 6 . 9 9 1 2 A 1 9 7 5 B I k £ 1 0 . 9 9Tw i n P a c k s £ 0 3 . 9 9 5 1 6 4 1 C o l £ 0 9 . 9 9 1 2 A 1 9 8 0 C o l £ 1 0 . 9 9

Ch ipped 5 1 6 4 5 B I k £ 0 6 . 9 9 1 2 A 1 9 8 5 C o l £ 1 1 . 9 9B l a c k £ 0 2 . 9 9 5 1 6 4 9 C o l £ 1 0 . 9 9 1 2 A 1 9 9 0 P h o t o £ 1 2 . 9 9C o l o u r £ 0 3 . 9 9 C I 8 2 3 C o l £ 1 0 . 9 9 1 3 6 1 9 H C C o l £ 1 0 . 9 9Tw i n P a c k s £ 0 6 . 9 9 C 4 8 4 4 B I k £ 1 1 . 9 9 1 3 4 0 0 H C B I k £ 0 9 . 9 9

BT Paperjet C 5 0 1 0 C o l £ 1 1 . 9 9 1 5 M 0 1 2 0 C o l £ 1 1 . 9 9P J 5 5 M B i k £ 2 4 . 9 9 C 5 0 11 B I k £ 0 8 . 9 9 1 5 M 0 1 2 5 C O I £ 1 2 9 9

C a n o n C 6 5 7 8 C o l £ 1 1 . 9 9 1 7 G 0 0 5 0 B I k £ 0 9 . 9 9B C I - 1 5 B l k £ 0 5 . 9 9 C 6 6 1 4 B I k £ 0 6 . 9 9 1 7 G 0 0 6 0 C o l £ 1 0 . 9 9B C I - 1 5 C o l £ 0 7 . 9 9 C 6 6 1 5 B l k £ 0 7 . 9 9 1 8 L 0 0 3 2 B I k £ 1 3 . 9 9BCI -15 B Ik /Co l £ 1 2 . 9 9 C 6 6 2 5 C o l £ 1 1 . 9 9 1 8 L 0 0 4 2 C o l £ 1 5 . 9 9BCI-3 BIk £ 0 1 . 9 9 C 6 6 2 8 B I k £ 1 1 . 9 9 T w i n P a c k sBCI-3 C, M or Y £ 0 1 . 9 9 C 6 6 5 6 B I k £ 0 8 . 9 9 1 0 N 0 0 1 6 / 2 6 £ 2 7 . 9 9BCI-6 BIk £ 0 1 . 9 9 C 6 6 5 7 C o l £ 1 3 . 9 9 1 2 A 1 9 7 0 / 8 0 £ 2 0 . 9 9BCI-6 C, M or Y £ 0 1 . 9 9 C 6 6 5 8 P h o t o £ 1 1 . 9 9 1 2 A 1 9 7 0 / 1 2 0 £ 2 0 . 9 9BCI-21 BIk £ 0 0 . 9 9 C 8 7 2 7 B I k £ 11 , 9 9 1 2 A 1 9 7 5 / 8 5 £ 2 1 . 9 9BCI -21 Co l £ 0 1 . 9 9 C 8 7 2 8 C o l £ 1 3 . 9 9 1 3 4 0 0 / 6 1 9 £ 2 3 . 9 9BCI-24 BIk £ 0 1 . 9 9 T w i n P a c k s 1 7 G 0 0 5 0 / 6 0 £ 1 9 . 9 9BCI -24 Co l £ 0 2 . 9 9 5 1 6 2 6 / 2 5 £ 1 4 . 9 9 1 8 L 0 0 3 2 / 4 2 £ 2 8 . 9 9BCI -24 B Ik /Co l £ 0 3 . 9 9 5 1 6 2 9 / 4 9 £ 1 6 . 9 9 I n k R e fi l l K i t sBC-01 BIk £ 0 5 . 9 9 5 1 6 4 5 / 4 1 £ 1 5 . 9 9 B l a c k + C o l o u r £ 0 7 9 9BC-02 BIk £ 0 5 . 9 9 5 1 6 4 5 / C 1 8 2 3 £ 1 6 . 9 9 B l a c k £ 0 3 9 9BC-05 Co l £ 0 8 . 9 9 5 1 6 4 5 / C 6 5 7 8 £ 1 7 . 9 9 C o l o u r £ 0 4 , 9 9B C - 0 2 / - 0 5 B I k / C o l £ 1 4 . 9 9 C 5 0 1 1 / 5 0 1 0 £ 1 9 . 9 9 P h o t o £ 0 3 . 9 9B C - 2 0 B I k £ 0 7 . 9 9 C 6 6 1 4 / 5 1 6 4 9 £ 1 6 . 9 9 Chip Setter £ 1 3 9 9

X e r o x C 6 6 1 5 / 1 8 2 3 £ 1 7 . 9 9 B u l k I n k s8 R 7 9 7 1 B I k £ 0 2 . 9 9 C 6 6 1 5 / 6 6 2 5 £ 1 8 . 9 9 6 0 m l B l a c k £ 0 2 , 9 98 R 7 9 7 2 C £ 0 1 . 9 9 C 6 6 1 5 / 6 5 7 8 £ 1 8 . 9 9 2 5 0 m l B l a c k £ 0 7 , 9 98 R 7 9 7 3 M £ 0 1 . 9 9 C 6 6 5 6 / 6 6 5 7 £ 2 1 . 9 9 60ml C, M or Y £ 0 2 , 9 98 R 7 9 7 4 Y £ 0 1 . 9 9 C 8 7 2 7 / 8 7 2 8 £ 2 4 . 9 9 250ml C,M orY £ 0 9 , 9 9

Free Delivery Online - No Minimum Order

mWeb Hosting

From £35 per year

R e s e l l e r A c c o u n t sFrom £25 per month

D e d i c a t e d s e r v e r sFrom £83 per month

C o l o c a t i o n5 locations across Europe

D o m a i n N a m e sWith no h idden ext ra costs

A D S L B r o a d b a n dAlways on Internet access

L e a s e d L i n e sHigh speed lines to your office

Dialup accessSubscription Free Internet Access

Network ConsultancyHelp with building your networks

Inkjet & Laser Cartridges available for all manufacturers from Apple to XeroxFor unbeatable deals on ALL printer consumables order online @

b o x - s h i f t . c o . u kor call 0870 Oil 2005 (12 lines open Mon - Fri)

All prices quoted are based upon purchasing multiple quantities and exclude vat @ 17.5%

Order Online at www.webtapestry.netP h o n e F r e e 0 8 0 0 0 1 5 1 7 1 8

e-mail [email protected] Tapestry is part of Axamba

■ a x a m b a

U K ^ s B e t t e r Va l u e D o m a i nN a m e R e g i s t r a t i o n S e r v i c e . . .T H E E U R O P E A N D O M A I N N A M E S P E C I A L I S T S . . .

F R E E U N L I M I T E D E M A I L F O R WA R D I N GSet Up To 100 Email AddressesF R E E W E B S I T E F O RWA R D I N GBanner Free Cloaked or Standard Forwarding

F R E E D O M A I N PA R K I N GReserve your Domain until you need to use itFREE EXPERT SUPPORTBy Email & TelephoneFREE ONLINE CONTROLExclusive Domain Management Tools

All domain prices per year - Mlntmum 2 Year Term + VAT A

FOR A FULL LIST OFA V A I L A B L E D O M A I N S

PLEASE VISIT:

W W W . S I M P L Y. C O M

.co.uk .me.uk .org.uk

£ 2 . 8 9p e r a n n u m

.com .net .org

£ 8 . 9 9p e r a n n u m

. b i z . i n f o . u s

£ 9 . 9 9H w w w . s i m p l y . c o m

s i m p l y . c o mT E L : - 1 - 4 4 [ 0 ] 1 6 8 4 8 9 3 0 2 0 s i m p l y " & s l m p l y n e f ' a r e r e g i s t e r e d t r a d e m a r k s o f S I m p l y . C o m L t dE M A I L : S A L E S @ S I M P L Y . C O M S I M P L Y. C O M L T D . E N I G M A C O M M E R C I A L C E N T R E . W R 1 4 I J J . U K

w w w . 4 S u r e H o s t m g . c o . u k ' 122 - 126 HighJLoadLondon; NW6

E m a i l , We b &Act in ic Hos t ing

The only web host to provideGeograph i ca l l y Sepa ra ted Load

Ba lanced Hos t i ng w i t h i n twoseparate Data Cent res , that

ALL can afford! - Coming Soon!

U K - L o n d o n L o c a t i o n s

Emai l Accounts f rom £14.99 p .a .Web Host Accounts f rom £25 p.a.

Act in ic Host Accounts f rom £25 p.a.

State of the art host ingfac i l i t ies , backed up by

geog raph i c l oad ba lancedh a r d w a r e t h a t e n s u r e s t h a t

your s i te never goes offl ine.Coming Soon !

W h o l e s a l e r a n d R e s e l l e rAccoun ts Coming Soon !

All Major Credit & UK Debit Cards Accepted

A C T I N I C

A c t i n i c E c o m m e r c e S o f t w a r e

C a t a l o g V 6 : —£294 (RRP 379) ^B u s i n e s s V 6 :

£630 (RRP 799)

D e v e l o p e r V 6 :

£1175 (RRP £1250)

Order Manager:

£140 (RRP £150)

D o m a i n N a m e s

<S>.WEtfOOMtflT

N o m i n e t U K D o m a i n s£8 - 2yr Regist rat ion.co .uk , me .uk , o rg .uk. l td .uk , p lc .uk , sch.uk

G l o b a l & A l t e r n a t e D o m a i n s£25 - 2yr Regis t ra t ion

.com, .biz, . info, .org, .net

f rom £20 - 2yr Regis t ra t ion

.gb .com, gb .ne t , uk .com

.uk .ne t , eu .com, us .com

Al l reg is t ry fees inc luded.Free web park ing.

N O R e l e a s e F e e s !

w w w. 4 S u r e H o s t i n g . c o . u ks a l e s @ 4 s u r e h o s t i n g . c o . u k

A l l P r i c e s E x c l u d e VAT @ 1 7 . 5 o / o

Te l : 0 8 0 0 6 9 8 3 7 3 7 - F a x : 0 8 0 0 1 9 7 3 7 4 3 Techno-Web Ltd (t/a 4SureHosting)Registered Office: 21 St. Tliomas Street,

Bristol, BSl 6JS - Co. # 4114416

WEBSITE HOSinternetters Web Hosting» reliable hosting since 1998» high-speed Internet connections» "hot standby" backup servers» robust highly reliable Sun & Windows webservers» helpful knowledgeable phone technical support» flexible hosting solutions (UNIX and Windows)» powerful VPOP email services (inci webmail)» CGI - PHP4 - SSI - SSL support MySQL ASP JSP» packages from £70 per year + VAT

i n t e r n e t t e r s D o m a i n N a m e s» FREE unlimited email forwarding» FREE web forwarding with NO Banners» NO "Release fees"

» NO Hidden charges» Easy online domain management» Registered with you as the registrant» Registered with you as the admin contact» Internetters is ICANN-accredited

r j m t e r n e t f e sFrustrated by companieswith no phone number?Phone In te rne t te r s now.

0800 316 33 77

w w w . i n t e r n e t t e r s . c o . u k

■ Digital Video ■ Digital Audio

■ D i g i t a l I m a g i n g ■ 3 D & A n i m a t i o n

A TA MAGAZINE FOR All DiGITAL CREATIVES

PHOTOSHOP • PREMIERE • FINAL CUT PRO • FLASH MX • FREEHAND • 3DS MAX • REASON • MAYA

C^hneAiteTHE MAGAZINE FOR CREATIVE COMPUTER USERS

P E R F E C TP O R T F O L I O S

Create a brilliant digital showcase for your artwork^ Presentation tips and tricks from top professionals51 Six-page Flash MX 2004 tutorial starts on page 42

DY MASTERCLASS \ ^Learn new video editing techniques with y our Final Cut Pro & Premiere Pro primers

TAKE IT TO THE MAXimprove your modelling skills with n»r ~

"cccTmAL CREATIVE

(^"Wndows ..Mac

C T l f I I l l l - i " n A S H M X 2 0 0 4

I L L U S T R AT I OE X C E L L E N CExpert advice for improving yourvector draw/ing skills in Freehand

£ 6 9 9 " e x c i t e e n t h u s e a n d i n f o r i

III7 7 1 4

0 7

O N S A I E N O WAvailable from all good newsagents, or call for a copy direct on 0870 444 8682

Practical

Your hands-on guide to the best Web creation software ■0, r^'.: ^

Issue UD r e a m w e a v e rWe turn our attention to Macromedia's splendid Web-editing package andshow you liow to push your Web design sidlls to the limit. There's 100pages of advice on a host of diverse subjects including how; to build acomplete site from scratch, conforming to usability guidelines, streamingaudio from your site, integrating with scripting technologies like PHP andbuilding content management systems with ASP You'll be a DreamweaverMX expert by the time you've finished with the magazine!

On the CD: You'll find a host ofuseful software and utilities onthis disc including a demo ofDreamweaver MX, a full versionof Web Protector to help youprotett your site from copyrighttheft and the final installment offree fonts from Larabie.com.Price: £6.99 (includes postageand packing)

tDREM«VVEJ»!fil\

di i

Issue 13Web DesignWe depart from our usual topics and bring you an all-encompassing lookat the tips, tricks and techniques that every Web designer needs. Includedare features on planning and executing the perfect site, tutorials on thelatest Photoshop, Dreamweaver, Flash and Fireworks techniques, and aprimer on designing Web content in 3D.

On The O): Another packedPractical Web Projects CD is proudto include demos ofDreamweaver, Flash, Rreworks,Photoshop (PC only). Swift 3Dprojea files for every tutorial inthe magazine and a host ofroyalty-free graphics, clip art,backgrounds and Flash fonts.Price: £6.99 (includes postageand packing)

Issue 15D r e a m w e a v e rWe revisit Dreamweaver to discover what delights lurk in the brand newversion of Macromedia's Web editing application. We get the inside trackon the best techniques by asking some top Web designers to spill thebeans on their favourite editing tips. There's also 50 pages of projensincluding guides to adding slick site navigation, setting up eCommercefacilities, implementing user-authentication, and your own online forum.

On The CD: We crammed demosof the brand new versions ofFlash, Dreamweaver andFireworks onto the disc, alongwith FreeHand MX andColdFusion MX. Also, 30 freeDreamweaver extensions, 75fonts, and a book chapter! Plusall the files you need to completethe projects.Price: £6.99 (includes postageand packing)

Issue 12Paint Shop ProA new topic for /Was we put Paint Shop Pro under the microscope.Discover how to create Web graphics that really work in our completeguide to creating visually rich sites, and get to grips with the latest versionof PSP - version 8 - as we show you how to clean up your images,create image maps, design logos for your site and master PSP's powerfulpainting tools.

On the CD: In a first for PracticalWeb Projects, we offer a fullversion of the software covered

by giving away a copy of PaintShop Pro 5 There's also a demoversion of the all-new Paint ShopPro 8 and a collection of plug-insfrom Flaming PearPrice: £6.99 (Includes postageand packing)

Issue 14Flash DesignTaking an in-depth look at the brand new version of Flash, we explain howto tap into its hot new features to bring your Web pages to life. Featuresinclude a guide to finding the tastiest Rash resources online, along with adetailed exploration of Flash MX 2004 and Flash MX Professional 2004Plus, we show you how to create a stylish preloader, build your own Flashmedia player and knock up an old-school Space Invaders game.

On The CD: The attion-packed CDon this month's issue is crammedwith resources to help youimprove your site with Flash.Along with a demo of Flash MX,you get a bumper collection ofquality Flash source files, fontsand a range of audio samples.Price: £6.99 (includes postageand packing)

FLASH DESIGH

I s s u e 1 6

PhotoshopWe uncover the secrets of Photoshop CS, explaining how it can be put towork to create even better Web graphics. We also take a look at plug-ins,revealing how they can be used to transform the way you manipulategraphics and add more power to Photoshop. Among the in-depth projectsin this issue are guides to creating pixel art icons, cool textures and a slicknavigation bar for your site.

On The CD; If you're looking toget involved with the new versionof Photoshop then our cover CDwill become your new best friend.The disc includes over an hour of

step-by-step video tutorials in theshape of Total Training for AdobePhotoshop CS. We also cram on acollection of essential Photoshopplug-ins, actions and fonts.Price: £6.99 (includes postageand packing)

CALL OURHOTLINENOW ON:0 8 7 0 4 4 4 8 6 8 2

YOUR DETAILS

Postcode:

Telephone No:

Email:

■ WOULD LIKE TO ORDER:

□ ISSUE 11 □ ISSUE 12 □ ISSUE 13□ ISSUE 14 □ ISSUE 15 □ ISSUE 16

All issues cost £6.99, including postage and packing, and aresubject to availability. Overseas prices available on request

METHOD OF PAYMENT (no cash please)

Please indicate your choice of method

□ CHEQUE Please make payable to Highbury - Paragon Ltd

□ CREDIT CARD

M - B T e t B□ Delta QVisa □ Mastercard □ SvwtchCard number :

□□□□ □□□□ □□□□ □□□□ I□ □

Ifapf^kable

Expiry date:□□ / □□Issue No. □□ (Switch only)

Signature:

Please return this order form or a photocopy of it together with yourcheque/postal order Of appiicat^e) to the following address. Hight)uty -ParagonUd, FREEPOSTNAm809. (CustomerInterface). SOfAERTON,TA116ZAIt vmn't cost you a penny in stamps if posted in the UK.Alternatively, call the subscription hotline on 0870 4448662, fax your orderon 01458 271146 or email us at [email protected]

□ From time to time. Highbury • Paragon sends out news about exciting neproducts and opportunities that are of interest to our readers. If you do notwish to receive such information, please tick this box

ON SALE NOWAvailable from all good newsagents, or call for a copy direct on 0870 444 8682

PHOTOSHOP • PREMIERE • FINAL CUT PRO • FLASH MX • FREEHAND • 3DS MAX • REASON • MAYA

CWiveAit iTHE MAGAZINE FOR CREATIVE COMPUTER USERS '^Windows

The magazine for creative computer usersDigital video, digital imaging, 3D and digital audioPacked with hardware and software reviewsN e w s , f e a t u r e s , i n t e r v i e w s , t u t o r i a l s a n d m o r e ! -

Dreamweaver What's on the disc

Look out forthe logo

Whenever you see this

logo in tfie magazine youcan be sure that the files

for the relevant project ora demo of the application

you need to complete theproject can be found onthe cover CD.

All files for this project canbe found on tfie CD

Find out how to get the most from your free CD!

What's on the disc4D Standard Edition 6.8Make your site work for you by constructing slickWeb applications with this mighty suite ofdevelopment tools

4th Dimension£229

dding a database to your Web site can open up a worldof new opportunities for you and your site. Web-basedapplications allow you to serve dynamic content to your

audience, improve the user experience, and collect data in order tomake money on the Web.

This needn't be hell thanks to 4th Dimension Standard Edition 6.8,which is included on this issue's cover CD. You can start with simpledatabase structures and use 4D's wizards to create automatic dataentry and report forms. When your needs grow, you can add custommethods to automate data entry, validation and reports.

The program offers a massive range of tools for handling data onyour existing Web site and offers a direct link between 4D andDreamweaver. Certain 40 database elements such as fields andtables can be integrated into HTML pages as tags, by dragging anddropping them into place.

I4D also delivers the power ofWeb services, acting as both aSOAP server (Simple ObjectAccess Protocol) and a SOAPclient. This allows you tointeract with other Webapplications, including .NET and )2EE. You can also export or importyour records directly in XML and manipulate and transfer XML data.

In order to use 40 6.8, you'll need to activate the software, whichcan be done free of charge by visiting www.4duk.com/webprojects.We're also offering all PWP readers the chance to upgrade to thelatest version of the application, 40 2003 at a special rate of £95(RRP £195) for the Standard Edition, or £295 (RRP £495) for theDeveloper Edition. To take advantage of this exclusive offer visitwww.4duk.com/store/offers, or call 01625 536178.

/ztra/zce

25 free Webscripts

I The free scripts onthe cover CD come

courtesy of Scriptles(www.bluwall.coml andallow you to add extrafunctionality andinteractivity to your site.This is simple to achievebecause you only needto drop the code into

your HTML. ThelavaScript and PERLscripts help you performeffects that will amaze

visitors to your Web site.

They each have theirown unique purpose oreffect and are definitelyworth using on your site.

They range fromlaunching incredible popup window^s to flashyrollovers for your site'smenus and navigation.

100 Free Web graphicsNo matter what anyone tellsyou looks are important, andthis also rings true when itcomes to creative Web design.

An effective way of grabbingyour visitor's attention whenthey visit your Web site is to useeye-catching graphics. Thecollection of free graphics fromElated (www.elated.com), whichcan be found on this month'scover disc, will help you spruceup your pages and turn headsonline. You'll find a multitude ofstylish graphics in the collectionincluding animations,backgrounds, bars, bullets,buttons and icons. There's evena large selection of royalty-freephotographs, which you can useto provide a striking backdrop toyour Web content.

96 I PRACTICAL WES PROIECTS I DREAMWEAVER

What's on the disc Dreamweaver

Help! What to do if you experience problems with the CDAre you having problems getting your CD to work with your CD-ROM drive? Are you experiencing difficulties getting some of theprograms or plug-ins to run? First of all, make sure you read any special instructions listed here or in the 'Read Me' file suppliedwith the application or utility causing the trouble. If this doesn't work, you can email our multimedia department for help [email protected]. Our disc editors also field calls from the public on Wednesdays between 2pm and 5pm. Please only callduring these hours for help.

Quask FormArtist PrestoGet feedback from visitors and improve your site's stayingpower by building interactive Web forms with this fullversion software

flRffrProject files

£29 ■©uasi^™ FormArtist

eb forms, polls and surveys are a great way of gettingfeedback from your visitors. However, building theseelements yourself can be a time consuming process.

FormArtist allows you to create great forms, polls and surveys inno time at all. The program is packed with features for designingand deploying your form, then gathering and analysing the data youcapture. Forms can be built from scratch, where you define all of thekey properties from predefined style sheets or libraries, and noHTML or javaScript knowledge is required.

Although a full version of FormArtist Presto is on the cover CD,we're giving PWP readers the chance to upgrade to the Standard orProfessional versions of the software at a discounted rate, of £89 for

the Standard Edition (RRP £129)and £299 for the ProfessionalEdition (RRP £549).

To get FormArtist at these greatprices, you'll need to activate thesoftware by getting a productlicence from the Quask Web site(www.quask.com/purchase). Click on the Purchase button for therequired product and enter 'PWPROjECTS' in the Coupon field. Aftercompleting the rest of the details you will be emailed the licence keyto unlock the program for full functionality This offer runs until 29February 2004.

All of the files used in our

guide to building a site inDreamweaver are included

on our cover CD. Any otherresources needed to

complete the projects arealso included. You'll find

demo versions of

Dreamweaver MX 2004,Flash MX 2004 and

Photoshop 7 (K only) onthe disc, and these are alsoneeded to construct the

Web site.

26-33 Create the graphics34-43 Build the site's pages44-52 Da tabase con ten t

58-67 Add interactivity68-75 Sell from the site

O BS i m f t i j ) 7 XM t t U

4

aj t .

r i d j )

s

H vir«4eorrMt«clMtlcfm.«»m 0i M u s i c Q u i z m

AetonB««on Ft»tr* font , Cotoi , Scnptng

D i ^ M ® X « x < 0 £ > c t u t *Stwt lh« Qua

S a n d B a c kR o M t r o m

HvpwI in t^ toURL

1 Create a formClick on Design in the main toolbar to startbuilding your form. You will need to begin byselecting the 'Using a ready-made form' optionbefore proceeding on. From the Embedded tab,pick Online Quiz then click OK. Now enter a namefor your form.

P«arr ie(«r P«g« N«me

H » n t g K « I K i I

2 Add objectsAll objects that appear on the form can bedragged and dropped around at will. Highlight anobject and hit F3 to change its properties. You canadd new pages and objects from the toolbar orthe Insert menu, then change the page at thebottom of the screen.

3 ScriptYou can set scripts to run certain events orfunctions, such as buttons pressed, boxes ticked,or pages displayed. Make sure no objects areselected and hit F3. Select the Scripting tab andcheck the box if this page will be displayed toopen the script editor

4 Deploy a formTo begin deploying your form, click on the Deploybutton, select your form and click Next. SelectOuask Testserver and hit Next twice. Now checkthe 'Send data to Email address' box and, ifenabled, the 'Store data on the server' box. Whenyou've taken these steps click Next.

5 Email responseYou can specify who the email response shouldbe sent to by defeult. Press 'Add Email to youraddress' here. It's is also possible to use scriptingfor this function. Click Next, then 'Start thedeployment', the form is now accessible byanyone on the Net using the URL shown.

6 Complete the formClick on the URL displayed at the end of thedeployment process and get other people toenter this in their browser. The Standard andProfessional Editions have full email notificationfeatures that link to mail clients and databases.You'll now receive emails when visitors respond.

D r e a m w e a v e rex tens ions

The collection of powerfulDreamweaver ex tens ions

on the CD lets you wow

your visitors without gettingyour hands dirty. There are32 extensions on the disc,

ranging from a SwapClassbehaviour for managingCSS class name changes, to

AniMagic - a plug-in thatallows you to orchestrate

complex javaScript layeran ima t ions w i th the

greatest of ease.


Next issue LCiTiins soof

I

• U ntime in issue 18

. , -V : ••

A PDiscover the art of designing gorgeous Web artwork

We show you how to:Get to grips with the new version of PhotoshopStreamline your graphics for the Web using FireworlcsMaster the features of Paint Shop Pro to create stunning digital artUnleash your creativity through FreeHand MXExplore the new vector drawing tools in Illustrator CS

Your hands-on guide to the best Web creation software

Out 19 February 2004 Available from all goocnewsagents or by calling 0870 kkk 868298 I PRACTICAL WEB PROIECTS I DREAMWEAVER

V 2 1 S T A N D A R D

4 H o u r c u t o f f 'you can redial straight away

Technical Supportat l ow Na t i ona l Ra te ca l l cos t s

\

I

I Support for modem; — r—^T I standards upto V90 & 64k ISDN— Online account management

v i a s e c u r e c o n t r o l p a n e l — —

i

VISIT: www.v21.co.uk or call the sign up hotline on:

0800 0^89 21 21

The UK's Better ValueDomain NameRegistration Service

11j ' ^ j

INCLUDED WITH EVERY DOMAIN AT NO EXTRA COST:

O FREE UNLIMITED EMAIL FORWARDINGSet Up To 100 Email Addresses

O FREE WEBSITE FORWARDINGBanner Free Cloaked or Standard Forwarding

O FREE DOMAIN PARKINGReserve your Domain until you need to use it

©FREE EXPERT SUPPORTBy Email & Telephone

O FREE ONLINE CONTROLExclusive Domain Management Tools

domain^r UIUHKvisit www.simply.comfgfull list available di

. c o . u l c . c o m . b j Z ;. m e . u k . i n f g.org.dk .orgg^^uf£2 .89 £8.laKl d.99

PERANNUJI PER ANNUA

mCLUDESTAHaREGISTRY FEEi

The European Domain Specialists" As usual, your service was

excellent and that's why Irecommend www.simply.com

to everyone who needshosting & domain names"

y> Sarah Baker, Success PR.

Quaiity Hosting - Great Prices!f (t>

European Domains""Svaiiableitrom:

P E RW N U M

prices per year- 2 Year Term + VAT Applies

O THE SIMPLY GUARANTEEFor Maximum Peace Of Mind

O ONLINE CONTROL PANELFor Complete Account Management

O FREE EXPERT SUPPORTByTelephone& Email

O POWERED BYTHESiMPLY.NET NETWORKFor Maximum Uptime

Email & Web Hosting Plans:

INKTOMI QUICKSUBMIT

125 search enginesevery 48 hours...

visit www.slmply.com for more

f r o m £ 3 . 9 9p/m

Multi-Domain Reseller Plans:

f r o m £ 1 9 . 9 9 p / m

All plans payable annually: Set-Up fee - £9.99 * VAT Applies

TEL: +44 [0] 1684 893020EMAIL: [email protected]

www.simply.com

L c o msimply*' & simplyner are registered trademarks of SImply.Com Ltd

SIMPLY.COM LTD . ENIGMA COMMERCIAL CENTRE . WR14 IJJ. UK

Practical WebProjects issue 17

Documents

Transcript of Practical WebProjects issue 17