webplus 8 - serif

WebPlus 8.0 Companion

©2002 Serif (Europe) Ltd. All rights reserved. No part of this publication may be reproduced in anyform without the express written permission of Serif, Inc.

All Serif product names are trademarks of Serif (Europe) Ltd. Microsoft, Windows and the Windowslogo are registered trademarks of Microsoft Corporation. All other trademarks acknowledged.

Serif WebPlus 8.0 © 2002 Serif (Europe) Ltd.

Companies and names used in samples are fictitious.

Clipart samples from Serif ArtPacks © Serif (Europe) Ltd. & Paul Harris

Portions images © 1997-2001 Nova Development Corporation; © 1996-99 Cliptoart; © 1996-99Focus Designs; © 1996-99 Hemera Technologies Inc.; © 1997-98 Seattle Support Group; © 1995Expressions Computer Software

Portions digital image content © 1997-2001 Hemera Technologies Inc. All rights reserved.

TrueType font samples from Serif FontPacks © Serif (Europe) Ltd.

Portions graphics import/export technology © AccuSoft Corp. & Eastman Kodak Company &LEAD Technologies, Inc.

THE PROXIMITY HYPHENATION SYSTEM 1989 Proximity Technology Inc. All rightsreserved.

THE PROXIMITY/COLLINS DATABASE 1990 William Collins Sons & Co. Ltd.; 1990Proximity Technology Inc. All rights reserved.

THE PROXIMITY/MERRIAM-WEBSTER DATABASE 1990 Merriam-Webster Inc.; 1990Proximity Technology Inc. All rights reserved.

The Sentry Spelling-Checker Engine © 2000 Wintertree Software Inc.

The ThesDB Thesaurus Engine © 1993-97 Wintertree Software Inc.

WGrammar Grammar-Checker Engine © 1998 Wintertree Software Inc.

Software License AgreementThis Software License Agreement (“License Agreement”) is a legal agreement between you (eitheran individual or a single entity) and Serif (Europe) Ltd. (“Serif”) for the accompanying softwareproduct, which includes computer software and may include associated media, printed materials, and“online” or electronic documentation (the “Software Product”). By installing, copying, or otherwiseusing the Software Product, you agree to be bound by the terms of this License Agreement. If you donot agree to the terms and conditions of this License Agreement, do not install or use the SoftwareProduct; you may, however, return it to your place of purchase for a full refund.

THANK YOU FOR LICENSING THE USE OF THE SOFTWARE PRODUCT. IT IS IMPORTANT THAT YOU (THE"LICENSEE") READ THIS NOTICE CAREFULLY. THESE ARE THE ONLY TERMS AND CONDITIONS APPLICABLE TOYOUR RIGHTS WITH RESPECT TO THE SOFTWARE PRODUCT. THE SOFTWARE PRODUCT IS PROTECTED BYCOPYRIGHT LAWS AND INTERNATIONAL COPYRIGHT TREATIES, AS WELL AS OTHER INTELLECTUAL PROPERTYLAWS AND TREATIES. THE SOFTWARE PRODUCT IS LICENSED, NOT SOLD.

1. GRANT OF LICENSESerif hereby grants to Licensee a personal, non-exclusive, non-transferable license (a "License") to use one (1) copy of theSoftware Product, including any updates thereto, andaccompanying documentation, if any, provided by Serif,according to the terms set forth below. If the Software Productis being provided to Licensee as an update or upgrade tosoftware which Licensee has previously licensed (such softwarereferred to as the "Prior Software"), then Licensee agrees todestroy all copies of the Prior Software within thirty (30) daysafter opening this package except for one backup copy of thePrior Software.

2. SCOPE OF USEYou may install and use one copy of the Software Product, on asingle computer. The primary user of the computer on which theSoftware Product is installed may make a second copy for his orher exclusive use on a portable computer. Licensee may alsostore or install a copy of the Software Product on a storagedevice, such as a network server, used only to install or run theSoftware Product on other computers over an internal network;however, you must acquire and dedicate a license for eachseparate computer on which the Software Product is installed orrun from the storage device. A license for the Software Productmay not be shared or used concurrently on different computers.

3. LICENSE PAKIf you have acquired this LICENSE AGREEMENT in a SerifLicense Pak, you may make the number of additional copies ofthe computer software portion of the Software Product asauthorized in the Serif License Pak, and you may use each copyin the manner specified above. You are also entitled to make acorresponding number of secondary copies for portablecomputer use as specified above.

4. PROHIBITIONSYou may not: modify, prepare derivative works from, translate,reverse engineer, decompile, disassemble or otherwise derivesource code from the Software Product (except to the extent thatsuch acts are expressly permitted by applicable lawnotwithstanding this limitation); copy the Software Product(except as provided above) or the accompanyingdocumentation; rent, transfer, disclose, make available or grantany rights in the Software Product (including anyaccompanying documentation) in any form to any personwithout the prior written consent of Serif; remove anyproprietary notices, labels, or marks on the Software Product(including any accompanying documentation); use the Software

Product in any manner that infringes the intellectual property orother rights of another party; or use the Software Product toprovide on-line or other database services to any other person.

5. RETENTION OF RIGHTS; TERMINATIONThis License Agreement does not constitute a sale. All title,trade secrets, copyrights, patents and other intellectual rights tothe Software Product, its accompanying documentation and anycopy made by Licensee remain with Serif, and Licensee herebyagrees to preserve and acknowledges the foregoing. Licenseefurther agrees and acknowledges that the Software Product andall copies thereof are Serif’s exclusive property and constitute avaluable trade secret of Serif. Licensee further agrees andacknowledges that unauthorized copying of the SoftwareProduct or the accompanying documentation, or failure tocomply with any of the provisions hereof (each, a "TerminableEvent"), will result in automatic termination of this License. Inthe event of a violation of this License by Licensee, Serifreserves and shall have available all legal remedies.

6. TERM OF LICENSE FOR TRIAL VERSIONSOFTWAREThe License pertaining to a trial version of the Software Product(a "Trial Version") shall expire in accordance with the terms asset forth in the installation process for the Trial Version alongwith the designated trial period as set forth in the trial program.

7. LIMITED WARRANTY AND DISCLAIMERSerif warrants that, for a period of ninety (90) days afterdelivery, the diskettes or CD-ROMs on which the softwareincluded in the Software Product is furnished will, under normaluse, be free from defects that prevent Licensee from loading theSoftware Product on a computer. Serif’s entire liability andLicensee’s exclusive remedy under this warranty will be, atSerif’s option, to (a) use reasonable commercial efforts toattempt to correct or work around errors, or (b) to replace theSoftware Product with functionally equivalent SoftwareProduct, on diskettes or CD-ROM, as applicable or (c) returnthe price paid for the Software Product, in each case upon returnof the Software Product to Serif together with a copy of yourreceipt for the purchase thereof. This Limited Warranty is voidif failure of the Software Product or hardware has resulted fromaccident, abuse, or misapplication. Any replacement SoftwareProduct will be warranted for the remainder of the originalwarranty period or thirty (30) days, whichever is longer.Outside the United States, neither these remedies nor anyproduct support services offered by Serif are available withoutproof of purchase from an authorized non-U.S. source. TheSoftware Product is licensed to you on an "as is" basis withoutany warranty of any nature.

8. NO OTHER WARRANTIESExcept for the above express limited warranties, Serif and itssuppliers make and licensee receives no warranties orconditions, or terms, express, implied, statutory, or in anycommunication with licensee. To the maximum extentpermitted by applicable law, Serif and its suppliers disclaim allother warranties and conditions, either express or implied,including, but not limited to, implied warranties ofmerchantability, fitness for a particular purpose, title and non-infringement, with regard to the software product and theprovision of or failure to provide support services. Licenseeshall be solely responsible for the selection, use, efficiency andsuitability of the software product and serif shall have noliability therefor. Serif shall have no liability for, nor obligationto indemnify licensee regarding actions alleging theinfringement of proprietary rights by the software product. Serifdoes not warrant that the operation of the software product willbe uninterrupted or error free or that the software product willmeet licensee’s specific requirements. The Limited Warrantygives you specific legal rights. You may have others, whichvary from state/jurisdiction to state/jurisdiction.

9. LIMITATION OF LIABILITYIn no event will Serif or its suppliers be liable for loss of data,corruption, lost profits, cost of cover, or other special,incidental, punitive, consequential, or indirect damages arisingfrom the use of the software product (including anyaccompanying documentation), however caused and on anytheory of liability. This limitation will apply even if Serif or anauthorized distributor has been advised of the possibility ofsuch damage. In no event will Serif’s liability exceed theamount paid for the software product. Licensee acknowledgesthat the amounts paid by licensee for the software productreflect this allocation of risk. Some states or other jurisdictionsdo not allow the exclusion or limitation of liability forincidental or consequential damages, so the above limitationsand exclusions may not be applicable in certain instances. Noneof the above affects the statutory rights of licensees residing inthe United Kingdom.

10. NOT FOR RESALE SOFTWAREIf the Software Product is labeled “Not for Resale” or “NFR,”then, notwithstanding section 1 of this License, your use of theSoftware Product is limited to use for demonstration, test, orevaluation purposes.

11. NO RENTAL; OTHER TRANSFERSYou may transfer this License to another computer orworkstation only on a permanent basis (that is, with no intent totransfer again) provided the computer, workstation, or otherdigital electronic device from which you have transferred thisLicense no longer accesses or otherwise utilizes the SoftwareProduct, and the Software Product is used in accordance withthe terms of this License Agreement.

12. TERMINATIONYou may terminate this License Agreement at any time. Serifmay terminate this License Agreement if you fail to complywith the terms and conditions of this License Agreement. Ineither event, you must destroy all copies of the SoftwareProduct.

13. UPGRADEIf this License is an “Upgrade,” you must have a valid licensefor the Prior Software for this License Agreement to be valid,and this License Agreement must be used to replace suchlicense for the Prior Software. The total number of license“Upgrades” you may acquire may not exceed the total number

of computers, workstations, or other digital electronic devicesthat were licensed to access or otherwise utilize the SoftwareProduct at the time you upgraded the Software Product.

14. GUIDELINES FOR THE USE OF DIGITALCONTENT IMAGESThis product contains numerous clipart and photo images(collectively referred to as the “Images”) which are eitherowned by SERIF or licensed from a third party. As a user ofthis product you are free to use, modify, and publish the Imagesas you wish subject to the restrictions set out below. If you areuncertain as to whether your intended use complies with theguidelines set out below, we recommend that you seek theadvice of your own attorney or legal counsel.

A. YOU MAY, subject to any restrictions set out below:1. Incorporate any Image(s) into your own original work andpublish, display, and distribute your work in any media. Youmay not, however, resell, sublicense, or otherwise makeavailable the Image(s) for use or distribution separately ordetached from a product or Web page. For example, theImage(s) may be used as part of a Web page design, but maynot be made available for downloading separately or in a formatdesigned or intended for permanent storage or reuse by others.Similarly, clients may be provided with copies of the Image(s)(including digital files) as an integral part of a work product, butmay not be provided with the Image(s) or permitted to use theImage(s) separately or as part of any other product;2. Make one (1) copy of the Image(s) for backup or archivalpurposes.

B. YOU MAY NOT:1. Create scandalous, obscene, defamatory, or immoral worksusing the Image(s) nor use the Image(s) for any other purposeprohibited by law;2. Use or permit the use of the Image(s) or any part thereof as atrademark or service mark, or claim any proprietary rights ofany sort in the Image(s) or any part thereof;3. Use the Image(s) in electronic format, on-line, or inmultimedia applications unless (a) the Image(s) are incorporatedfor viewing purposes only and (b) no permission is given todownload and/or save the Image(s) for any reason;4. Rent, lease, sublicense, or lend the Image(s), or a copythereof, to another person or legal entity. You may, however,transfer all your license to use the Image(s) to another person orlegal entity, provided that (a) you transfer the Image(s) and thisLicense, including all copies (except copies incorporated intoyour work product as permitted under this License), to suchperson or entity, (b) that you retain no copies, including copiesstored on a computer or other storage device, and (c) thereceiving party agrees to be bound by the terms and conditionsof this License;5. Use any Image(s) except as expressly permitted by thisLicense.

15. MISCELLANEOUS

This Agreement shall not be governed by the 1980 U. N.Convention on Contracts for the International Sale of Goods;rather, this Agreement shall be governed by English law. ThisAgreement constitutes the entire agreement between Serif andLicensee and supersedes all prior agreements, understandings,communications, advertising, proposals or representations, oralor written, by either party. If any provision of this Agreement isheld invalid or unenforceable, such provision shall be revised tothe extent necessary to cure the invalidity or non-enforceability,and the remainder of this Agreement shall continue in full forceand effect. This Agreement shall be amended only by anexecuted writing by authorized representatives of both parties.

How to contact us

Our main office (USA, Canada):The Software Center13 Hampshire Drive, Suite 12, Hudson NH 03051

Main (603) 889-8650Registration (800) 794-6876Single Unit Sales (800) 55-SERIF or 557-3743Technical Support (603) 886-6642Customer Service (800) 489-6720General Fax (603) 889-1127

Technical Support E-mail [email protected]

European office (UK, Europe):The Software CentrePO Box 2000, Nottingham, NG11 7GW, UK

Main (0115) 914 2000Registration (0500) 454 645Sales (0800) 376 7070Technical Support* (0115) 914 9090Customer Service* (0115) 914 9090General Fax (0115) 914 2020

*Local rate (UK only) (0845) 345 6770

Technical Support E-mail [email protected]

OnlineVisit us on the Web at http://www.serif.com

InternationalPlease contact your local distributor/dealer. For further details pleasecontact us at one of our phone numbers above.

Contents

Welcome 1

About the Companion .............................................................................. 3Linking to additional help ......................................................................... 3What’s new in Serif WebPlus 8.0... .......................................................... 4...on top of these established features: .................................................... 6Registration and support .......................................................................... 8System requirements ............................................................................... 8Installing WebPlus 8.0 ............................................................................. 9

Overview 11

What is a Web site? ............................................................................... 13How does WebPlus work? ..................................................................... 13How do I publish my Web site?.............................................................. 14How should I get started? ...................................................................... 14

Getting Started 15

WebPlus Startup Wizard........................................................................ 17Using a Web Wizard…........................................................................... 18Take a look around ................................................................................ 21For more help on the basics................................................................... 25

Working with Text 27

About text frames................................................................................... 29Objects on the master page level........................................................... 30Working with text frames........................................................................ 31Editing text ............................................................................................. 31Importing text ......................................................................................... 33About artistic text ................................................................................... 33About table text ...................................................................................... 34Changing the ‘Web colors’ ..................................................................... 35Design Tips ............................................................................................ 36For more help on working with text... ..................................................... 38

Working with Graphics, Animation & Multimedia 39

Graphics in WebPlus ............................................................................. 41Importing a picture or animation............................................................. 42

Drawing lines and shapes...................................................................... 43Other tools and techniques.................................................................... 46Adding animations ................................................................................. 47Adding sound and video ........................................................................ 48Design Tips............................................................................................ 49

Graphics......................................................................................... 49Multimedia...................................................................................... 55

For more help on working with graphics, animation, and multimedia... . 56

Working with Hyperlinks and Interactivity 57

Hyperlinking text .................................................................................... 59Hyperlinking graphics ............................................................................ 60Using hotspots and rollovers ................................................................. 61About HTML and Java ........................................................................... 62Design Tips............................................................................................ 63

Hyperlinks ...................................................................................... 63Navigation buttons ......................................................................... 64Hypergraphics................................................................................ 67

For more help on hyperlinks and interactivity ........................................ 68

Previewing, Publishing, and Maintaining the Site 69

Optimizing the publication...................................................................... 71Previewing the site................................................................................. 71Publishing to a local folder ..................................................................... 73Publishing to the World Wide Web ........................................................ 74Maintaining your site.............................................................................. 75Design Tips............................................................................................ 76For more help on publishing-related tasks............................................. 77

Web Design from Scratch 79

Pre-planning .......................................................................................... 81Who’s it for? ................................................................................... 82What have you got? ....................................................................... 83

Site Structure ......................................................................................... 83Navigation ...................................................................................... 85

Page Layout........................................................................................... 87Your Home page............................................................................ 90

A Design Checklist................................................................................. 91Suggested Resources ........................................................................... 93

Print................................................................................................ 93Links............................................................................................... 93

Where should I go from here? ............................................................... 94

Welcome

Welcome 3

About the CompanionThe WebPlus 8.0 Companion provides everything you need to get up tospeed, from the basics to tips and tricks for advanced users. Here’s abrief chapter summary:

1 Welcome. Reviews the program’s main features, requirements,and installation sequence.

2 Overview. Offers a simple introduction to Web sites—and howWebPlus helps you create and publish your own.

3 Getting Started. Introduces Web Wizards—our built-in designassistants—and the WebPlus environment.

4 Working with Text. Describes how to edit the Web Wizard’splaceholder text, customize the text layout, and import text.

5 Working with Graphics, Animation, and Multimedia.Examines how to insert or create your own images, animations,sound and video files.

6 Working with Hyperlinks and Interactivity. Shows you howto link text or graphics to Web pages, e-mail, or files, andenhance pages with Java or HTML effects.

7 Previewing, Publishing, and Maintaining the Site. Covers“finishing touches” and the simple steps that will get yourpublication onto the Web and help you maintain it.

8 Web Design from Scratch. Provides proven tips on pre-planning, site structure, and page layout, plus a list of onlineresources to improve your site.

Linking to additional helpThroughout the Companion, use this symbol as your key to furtherinformation that’s available in WebPlus online Help. You’ll find acomplete Visual Reference to the WebPlus interface, plus acomprehensive “How To” section covering goals and procedures.

Press F1 or choose WebPlus 8 Help from the Help menu.

?

4 Welcome

What’s new in Serif WebPlus 8.0...Welcome to Serif WebPlus 8.0—the easiest way ever to get yourbusiness, organization, or household on the World Wide Web!

Among new WebPlus 8.0 features, you’ll find...

♦ Enhanced Web Page CreationWebPlus 8.0 adds new power to its unparalleled ease-of-use indesigning Web sites! Add your own responsive buttons with themulti-layered Rollover graphics option. Select from expandedformat and compression choices for picture export. Insert header aswell as body HTML code, optimize overlapping objects, andoptionally maintain original image filenames.

♦ Artistic Text ToolAn entirely new text tool to complement traditional text inframes. Just click and type anywhere on the page, format with thecustomary tools, then apply colorful lines and fills directly at thecharacter level. Scale it, rotate it, flip it... discover a host of newpossibilities!

♦ Table Tool with Editable CalendarsNow you can create and edit tables right in your publication,with no need for a separate utility. Choose from a range of presetformats or design your own by customizing lines, cells, rows, andcolumns. Powerful text manipulation features include AutoClear,AutoFill, and cell merge. And calendars are now table-based forenhanced functionality!

♦ Multipage ViewA brand-new working mode option that lets you see an array ofpages, not just one at a time. Easily manipulate the viewdimensions, drag objects from one page to another, and get the“big picture” of your Web site’s layout.

♦ Multiple Master PagesFor complex sites, you can now design as many separatebackground templates as you need. Break through the single-background barrier!

Welcome 5

♦ Enhanced Studio Bar with Page ManagerMore convenient and powerful than ever, the Studio’s tabs cannow be floated, redocked, shown or hidden individually. It’s easierto select gallery categories, assign text, line, and fill colors, andvary shading. Plus the all-new Pages tab provides a graphicaloverview that lets you drag and drop to add or subtract pages andassign master pages, with instant access to the Page Manager fortotal control over page content.

♦ Bitmap Fills and TransparenciesChoose from a multi-faceted Studio gallery of picture-basedeffects, ready to work their magic on shapes or artistic text. Youcan even import your own images as bitmap fills!

♦ Curved Line Tool and Freehand ShapesQuickShapes are still superb, but now you can “have it all”... Justchoose a line tool (including a new one specifically for curves),draw a line... connect other segments if you wish... then justconnect the end points to create any shape you like! Customizethe line and fill, apply transparency, even freely edit the outline.

♦ Precise Editing of Lines, Shapes, Wrap and Crop OutlinesTry the new Curve Toolbar to fine-tune the contours of any line,closed shape, text wrap boundary or cropping edge. Simply dragthe curve’s segments or edit its Bézier nodes to achieve exactly theresult you want.

♦ Striking Shadow, Glow, and Bevel EffectsOne dialog serves as your “creation station,” where you can selectand preview a spectacular range of special effects for text or anyobject. Choose from soft-edged transparent Drop Shadow, InnerShadow, Inner Glow, or Outer Glow, plus four Bevel and Embosseffects!

♦ Replicate ToolInstantly multiply any object into a line or grid arrangement,with pinpoint control over offset and spacing.. Ideal for perfectlyaligned montages! Add rotation, skew, or resizing for eye-catchingtransformations.

♦ BordersHere’s an elegant new way to add picture frames to yourimported images and shape art... even frame a text frame! Simplypick from the preset choices, then customize corner style.

6 Welcome

♦ Improved Text HandlingBehind the scenes, our text engine works faster and better thanever—with secondary font caching and better handling of defaulttext styles. We’ve added vertical alignment options for frame,table, and artistic text, and now you can add or remove words fromyour personal spell-check dictionary.

♦ More Amazing Image ManipulationImport images inline as part of frame text flow, and create yourown 32-bit anti-aliased TIFFs and PNGs. Convert to Picture allowsinstant, in-place format changes! There’s more control overimported metafiles and OLE options. Linked images are easier tomaintain... and each export filter now remembers its own settings.

♦ Our Interface... An Old Friend, Now Even FriendlierNow you can drag and drop objects into WebPlus from otherapplications. AutoScroll automatically adjusts your view as youmove or resize. The revised ChangeBar features contextsensitivity and popup sliders to save screen space. MDI (MultipleDocument Interface) provides better window control. It’s detailslike these that have made the difference in WebPlus’ engineering,version after version!

...on top of these established features:

♦ Web Wizards for Instant Web SitesJust pick the type of publication you want to produce and answer afew simple questions. WebPlus does the rest! Revisit your colorscheme and text selections at any time as you continue to workwith a publication. You can customize the scheme colors, createbrand new schemes, and apply any scheme to a “from-scratch”Web site. Basic user details are stored for automatic reuse.

♦ Easy Editing and Special EffectsWith WebPlus, it’s a snap to import your own text and graphics toreplace the Wizard samples. You’ll find built-in modules likeWritePlus, for integrated word processing, plus tools for creatingtext hyperlinks and hotspot graphics. Choose the color scheme thatlooks best... The Snapping feature and Dot Grid help you achieve acrisp layout. Everything’s wrapped into a friendly DTPenvironment with onscreen Tooltips, HintLine, and context-sensitive help!

Welcome 7

♦ Versatile Web Feature SupportWebPlus supports HTML 4.0 for better WYSIWYG page design.Add sound and video—even Java and HTML code—to spice upyour pages! The Layout Checker helps you fine-tune your sitebefore it’s published. Then preview your site in your own Webbrowser and publish it to a local folder or a remote server.

♦ Animated GIFs and MarqueesAdd life to your Web pages! Choose from over 600 animatedAnimals, Cartoons, Dingbats, Logos, Objects, and more... Use aWizard to custom-design your own varied and colorful multi-linetext messages that scroll across the screen...

♦ Intelligent Color SchemesChoose from dozens of preset color schemes to change the overallappearance of your Page Wizard publications with a single click.You can customize the scheme colors, create brand new schemes,and apply any scheme to a “from-scratch” publication.

♦ On-screen Studio Combines Convenience with FunctionalityThe Studio’s tabs provide rapid drag-and-drop access tocommonly-used controls such as fonts, line settings, and the colortable. Use the Portfolio to store your favorite designs for use in anyWeb site... and tap the Gallery, with built-in mastheads, logos, andlots of other page elements you can customize to suit your needs!

♦ Professional Layout and Text ToolsIntelligent text fitting. Movable rulers and guides. Precisionplacement, rotation, flipping, and cropping. Text formatting withnamed styles. Master page for repeating background elements. Notto mention word count, search and replace, spell-checking,thesaurus, and proof reader to ensure your site’s readability.

♦ QuickShapesLong an exclusive feature of other Serif solutions, QuickShapeswork like intelligent clipart... or the most powerful set of drawingtools you can imagine. Just choose a template shape, drag on thepage... then adjust handles to customize each angle and dimension.

♦ Powerful Drawing OptionsAn arsenal of new drawing tools are at your command... Sketchfreehand lines and curves. Extend existing lines with ease. Applyline styles to all kinds of shapes—even add line endings likearrowheads and diamonds.

8 Welcome

♦ Gradient FillsFor sophisticated illustrations and impressive typographic effects,select from a wide variety of Linear, Radial, and Conical fills. Usethe interactive fill tool for drag-and-drop updating of fill nodes andcolors.

♦ Transparency EffectsBoth solid and variable transparency let you add new depth to yourprint and Web creations. Apply transparency directly from theStudio, then edit nodes and opacity with the interactive tool.

♦ Integrated Calendar WizardChoose from a wide variety of sizes and design options, then justclick and drag to fit your calendar to a column or a whole page!

♦ Total Ease-of-UseRight-click menus. Illustrated QuickTours to smooth the learningcurve. Plus HintLine, Wizards, and context-sensitive cursors tomake WebPlus as friendly as a puppy!

Registration and supportIf you see the Registration Wizard when you launch WebPlus, pleasetake a moment to complete the registration process. Just call Serif toll-free and provide the installation number and code shown. We’ll giveyou a personalized registration number in return. Remember, if youneed technical support please contact us. We aim to provide fast,friendly service and knowledgeable help.

System requirementsIf you need help installing Windows or setting up peripherals, refer toWindows documentation and help.

Minimum:♦ IBM-compatible Pentium PC with CD-ROM drive and mouse (or

other Microsoft-compatible pointing device)

♦ Microsoft Windows® 95, 98, 98 SE, Me, 2000, NT® 4.0, or XPoperating system

♦ 32MB RAM (Windows 95/98), see manufacturer’s requirementsfor other operating systems

♦ 60MB (minimum), 155MB (recommended) free hard disk space

♦ SVGA (800x600 resolution, 16-bit color) display or higher

Welcome 9

♦ Internet account and connection for Web publishing

Additional disk resources and memory are required when editing largeor complex documents

Optional:♦ Windows-compatible printer

♦ TWAIN-compatible scanner and/or digital camera

♦ Stylus or other input device

Installing WebPlus 8.0To install the program, simply insert the WebPlus 8.0 CD-ROM intoyour CD-ROM drive. The AutoRun feature automatically starts theSetup process and all you need to do is answer the onscreen questions.If AutoRun does not start the install, use the manual install instructionsbelow.

To reinstall the software or change any part of the installation at a laterdate, select Settings/Control Panel from the Windows Start menu andthen double-click the Add/Remove Programs icon. Make sure thecorrect CD-ROM is inserted into your CD-ROM drive, click theInstall… button, and follow the on-screen instructions. To install justone component, choose the Custom option and check only thatcomponent.

Overview

Overview 13

What is a Web site?A Web site is a collection of files stored on a computer where userswith special programs called Web browsers can view the files aspages. Browsers can read the common file format known as HTMLthat describes how the various elements of text, images, hyperlinks, andother elements are arranged on each Web page. Each Web site has asingle Home Page—the first page a visitor sees—usually containinghyperlinks to other pages on the site, which in turn have links to others.To the person using a browser to access the Web site, the contentappears seamlessly linked. You just click on a link to display relatedinformation.

The World Wide Web was conceived as a way of using the Internet—the global network that interconnects computers around the world—toshare information stored as Web pages. But Web sites don’t depend onthe Internet—they can be (and often are) accessed just as well over alocal area network or private intranet. Remember, a Web site is just acollection of files.

How does WebPlus work?You’ll first compose your pages as a publication in WebPlus, thenpublish the pages as a Web site.

Whether you’re looking for a business, organization, or personal Website, you’ll probably want to begin by exploring the Web Wizards thatcome with WebPlus. Click through the Wizard screens, make a fewselections, and enter some basic information—and the Wizard gets youstarted with a set of ready-to-publish Web pages. If you prefer, you canstart a new publication from scratch. Either way, the next step is tospend some time customizing the pages with your own text, graphics,and other content. The Companion will cover what you need to know.

For editing your publication, WebPlus offers a set of intuitive tools anda straightforward workspace that resembles a desktop publishing (DTP)environment. You can easily import text or images, use the built-inword processor, create colorful graphic shapes, and add hyperlinks andhotspots that users can click to access other Web pages or send e-mail.Once your content is in place, you can use a variety of proofing toolsand the Layout Checker Wizard to optimize the site before publishingit.

WebPlus gives you the option of previewing the site in your own Webbrowser before publishing it to the Web.

14 Overview

When you’re ready to publish, WebPlus takes the publication’s pagesand converts them to HTML and graphics (images). You never have toworry about the HTML code itself.

How do I publish my Web site?Publishing a site using WebPlus is a one-step operation that:

(1) converts your publication to files for the Web, and

(2) copies the Web files to a location you specify—either a local harddisk or a Web host.

To publish to a local folder, you don’t even need a connection to theInternet. Of course, you’ll need a Web browser to view your site.

To publish to the World Wide Web, you’ll need a host for your Website—that is, disk space on a server connected to the Internet—so thatothers can access your site. You can also publish your site to the remoteserver using WebPlus or a separate FTP utility. You’ll find details inonline help (see the topic “Publishing to the World Wide Web”).

How should I get started?You’ve already begun! Now, step through the chapters to learn how tocreate and then customize a basic Web site. Be sure to follow theinstructions carefully. For support as you work, choose WebPlus Helpfrom the Help menu, then click Help on Help in the Contents list.There, you’ll learn about the HintLine, the Visual Reference, and otherbuilt-in learning aids.

Getting Started

Getting Started 17

Once WebPlus has been installed, you’ll be ready to start. Setup adds aSerif WebPlus 8.0 item to the Programs submenu of the WindowsStart menu.

� Use the Windows Start button to start WebPlus (or if WebPlus isalready running, choose New from the File menu) to display theStartup Wizard (menu screen).

WebPlus launches, and you’ll see the Startup Wizard.

WebPlus Startup WizardNow you can see the normal starting screen. The Startup Wizardpresents four choices:

♦ Use a Web Wizard, to create an instant publication

♦ Start from Scratch, to get a blank page to work on

♦ Open a Publication, to edit your own WebPlus files

♦ View a QuickTour, to see an introductory overview

18 Getting Started

Whether you’re an old hand, or just getting started with WebPlus 8.0,here’s a recommended sequence:

� From the Startup Wizard, choose View a QuickTour to see anillustrated overview of WebPlus fundamentals. From the firstscreen, click the Next button to step forward. Use the Previousbutton to step back or the Begin button to return to the first screen.Click Cancel to exit the QuickTour.

� When you’re ready to continue, click Web Wizard or Start from Scratch from the Startup Wizard (For details on using a WebWizard, see the next section.)

� At any time from the main WebPlus screen, you can press F1 orchoose WebPlus Help from the Help menu to access online help.The help window initially displays its Contents pane on the left,and the Visual Reference menu on the right. Click the book iconsin the Contents list to expand topics, and click a document icon todisplay a particular topic. Click directly on Visual Referencegraphics to browse interface features like menus and toolbars.Click the Index tab to peruse the list of key terms, or the Searchtab to look up specific terms using full-text search.

� Beginners should click the Help on Help topic in the Contents listfor some tips on how to proceed.

Using a Web Wizard…Web Wizards are built-in design assistants that speed you through theprocess of creating professional Web sites. In this chapter, you’ll use aWeb Wizard and take a brief tour of the WebPlus environment. Then inthe following chapters, we’ll explain how to customize the variouselements of a Web site. The final chapter covers points you’ll need toknow if you literally start from scratch, with a “clean slate.” (Even ifthat’s your preference, you should work through the Wizard-basedexamples to get up to speed.)

For demonstration purposes, we will be working with a Wizard fromthe “Business” category. So at least for now, pretend you’re theWebmaster for a small business—it’s OK to use your imagination!

� Launch WebPlus or choose New... from the File menu.

� You’ll see the Startup Wizard. Select Use a Web Wizard.

Getting Started 19

� Notice that the Business category is initially selected, withthumbnails for the available Wizards displayed on the right. We’regoing to use the second one (Arch), so click its picture to select it,then click Finish.

WebPlus retrieves the Wizard and displays it in Wizard Preview mode.Here’s where you can initially add your own information to the design.

� The upper section of the Wizard lists several categories that youcan customize, with “Business Details” selected.

� Further down are boxes where you can review and/or re-enter thesample “answer text” in the category. Type into the fields toreplace the sample text with your own: in this case, enter afictitious (or real) company name, address, etc.

As you enter information, you’ll see the publication update to reflectyour choices. You can change as much or as little as you like at thispoint—it’s always possible to revisit the choices later!

� When you’re done, click the Web Site Details category. Here youcan alter Web page titles shown in the Wizard if you wish.

� Next, click the Color Scheme category. This panel lets you clickvarious thumbnails to sample different color schemes for the site.

In WebPlus, each publication has one color scheme assigned to it.Color schemes are great time-savers and help to ensure consistent,coordinated results. They work like a paint-by-numbers system usingfive numbers. Instead of assigning a specific color to an element, youcan mark it with a scheme color number. Let’s experiment.

20 Getting Started

� Scroll down and click the “Carrot” color scheme sample. Noticethat much of the text on the Web page turns orange. Now click the“Cuba” scheme and the text turns green.

� Look closely at the top portion of each scheme sample, and you’llsee a group of five colors to the right of the scheme name. Notethat each time you switch schemes, it’s the first of the five schemecolors that’s being applied to the text.

In Web Wizard publications, body text is conventionally marked with“Scheme Color 1”. That means it takes on whichever color has beendefined as Scheme Color 1 in the current scheme.

� Keep clicking different color schemes and notice which pageelements change color. Can you see which elements have beenmarked with Scheme Color 2? Scheme Color 3?

The bottom portion of each color scheme sample includes the hyperlinkand other Web colors, which are independent of the five scheme colorsand will be discussed in the next chapter.

� Choose Save... from the File menu and save the untitledpublication, using the folder and file name of your choice.

Getting Started 21

Take a look aroundLet’s take a few moments to examine the publication that the Wizardhas created. In the process, you’ll become familiar with some of thebasic features of the WebPlus environment.

� Move the mouse pointer around the screen and you’ll see popuptooltips that identify many items. Watch the HintLine window atthe bottom for capsule descriptions of each feature.

� To access online help and resources, choose WebPlus Help fromthe Help menu.

� Right-clicking any toolbar, object, or page region brings up acontext menu of functions.

The controls to the left of the HintLine let you set the page view andother display options, and navigate through the publication.

� Move the mouse pointer over the buttons on the HintLine toolbar,noting the various controls for zooming, panning, and display.

� Use these buttons to adjust the display until you can read the pagetext. The workspace will appear approximately as shown above.

Note that WebPlus displays one page of the six-page publication at atime.

On the right side of the WebPlus window, you’ll see the Studio—actually a cluster of six special-purpose tab windows. Let’s previewthem in sequence. Click each tab’s name to display it...

Standard, Arrange& View toolbars

HintLine toolbar

Page Area

Studio(Wizard panelshown)

ChangeBar

Pasteboard Area

Tools toolbar

Text & Frame toolbars

22 Getting Started

� The Attributes tab (see illustration) includes five separate panelsthat let you customize properties of on-screen elements. Thesepanels include:

— The Color panel, for applying solid color and/or shading

— The Fill panel, for applying a gradient or Bitmap fill

— The Transparency panel, for applying a transparency effect

— The Font panel, for changing the font of existing text objects

— The Line panel, for setting the weight and type of lines andshapes

Panels on the Studio’s Attributes tab

� The Schemes tab displays a list of the available color schemes that(as you’ve seen) let you instantly revise colors in a Web Wizardpublication. Using this tab, you can customize scheme colors orcreate entirely new schemes. Right-click any sample to see variouscontext menu options.

� The Pages tab helps you navigate within the publication andmanipulate pages and master (background) pages.

� The Gallery includes a wide variety of predesigned elements—graphics that you can drag and drop, then customize or use as astarting point for your own designs.

� The Portfolio is a container for storing design objects (images, textblocks, and even unlinked text frames or HTML code fragments)you’d like to reuse in different publications.

� The Wizard panel lets you revisit choices you made when creatinga publication using a Web Wizard. It’s simply a matter of retypingyour information or selecting a different color scheme.

Getting Started 23

Toolbars and Studio tabs are initially arranged in a convenient layoutaround the perimeter of the work area. However, you have full controlover this arrangement, and can customize the display any way youwant—by showing or hiding toolbars and tabs, or repositioning themonscreen in a way that suits your style. You can even undock individualStudio tabs as floating “tab windows” and/or group them into differentcluster arrangements which can either float or dock as toolbars at theleft or right side of the workspace.

WebPlus makes it easy to see exactly what you’re working on—from awide view of multiple pages to a closeup view of a small region. Forexample, you can use the scrollbars at the right and bottom of the mainwindow to move the page and pasteboard with respect to the mainwindow. The AutoScroll feature means that the view recenters itself asyou drag objects to the edge of the screen. The View toolbar at the topof the screen provides buttons that let you pan or zoom in and out soyou can inspect and/or edit the page at different levels of detail. Inaddition, you can switch between two viewing modes: Normal view,which displays one page at a time, and Multipage view, which displaysa number of pages at a time in the workspace.

� Click the Next Page button on the HintLine several times toview the following pages. You can use the scrollbar at the right toview more of a page. Note that the Wizard has inserted theinformation you provided, and the rest of the text serves as a“placeholder,” awaiting further changes.

Tip: You can double-click the Previous Page button todisplay your first (Home) page, or the Next Page button todisplay the last page.

You can click the Insert Page or Delete Page button on theStudio’s Pages tab to change the page count. You can also click the

tab’s Page Manager button (or the button on the HintLine) foradditional options like copying pages. When the time comes to buildyour actual Web site, you can use these controls if you want more (orfewer) pages than the Wizard provided. For now, leave the page countat six. However, if you want to experiment with the Pages tab—or ifyou accidentally make any changes that you don’t want to keep—hereare some “emergency” options:

24 Getting Started

� To revert to the previously saved copy of your publication, chooseRevert from the File menu. It’s a good idea to save your workoften!

� You can also reload any saved WebPlus publication by choosingNew from the File menu and selecting the Open a Publicationoption. You can open multiple publications and switch betweenedit windows if you like.

To undo the most recent change, press Ctrl+Z. (Note that you can’tundo a page addition or deletion.)

Click the Multipage button on the toptoolbar and choose the third item in the secondrow of the array for a 2x3 page display. Now youcan see all six of your pages at a glance! InMultipage view, it’s especially easy to move orcopy objects between pages using drag-and-drop.

To return to single page view, click Normal View on the Multipagearray selector (or choose Normal from the View menu).

Now that you’ve had a good look around the WebPlus interface, andhave successfully created and customized a Web Wizard publication,you’re ready to proceed to the kinds of projects you have in mind.

Getting Started 25

For more help on the basics...You’ve seen how easy it is to create the basic structure of a Web siteusing a WebPlus Wizard. And you know how to find your way aroundthe workspace.

When you’re ready to construct your actual Web site, you’ll no doubtwant to learn about other options. See online help for additional details.

For help on... In WebPlus Help,display...

Then...

Starting, saving,closing publications

Contents list See topics in section “How toWork with WebPlusPublications”

Overview of Website concepts

Index Select “Web sites, gettingstarted”

WebPlus menus andtoolbars

Visual Reference Click any menu or toolbarname

Setting up pagesSetting view optionsUsing layout tools

Contents list See topics in section “How toWork with Pages”

?

Working with Text


Now that you’ve reviewed the pages the Web Wizard provided, andhad a chance to revise Wizard “answer text” using the Studio, it’s timeto look at how to add standard text and change the layout of text on thepage. It’s really not complicated at all.

Typically, text in WebPlus goes into text frames, which work equallywell as containers for single words, standalone paragraphs, ormultipage articles or chapter text. You can also use artistic text forstandalone text with special effects, or table text for row-and-columndisplays.

About text framesMost ordinary text in WebPlus fits into text frames. Frames workequally well as containers for single words or standalone paragraphs.Two or more frames can be linked together so the enclosed text flowsfrom the first frame to the second, and soon—like a newspaper article with multiplecolumns. Whether there’s a single frame ormore than one in series, the enclosed frametext is called a story.

Let’s begin by seeing how the Web Wizard has utilized frame text inthe “Arch” example you created in the previous chapter.

� Display your Home page (double-click the Previous Pagebutton if necessary), and adjust the screen view so you can read thepage text.

� Click the button at the top of the left toolbar.

You’ve just selected the Pointer tool—the basic tool for selecting,moving, and resizing objects, including the boxes that contain text.

� Using the Pointer tool, click the “Home Page” text at the far rightedge of the page.

� Now click the paragraph starting with “Here’s the place...” on thelower part of the page.

In each case, clicking selects a text frame, displayed as a rectangle witha blue outline and small black “handles.”

30 Working with Text

Notice the gray Link button on the selected frame’s bottom edge. Thebutton’s icon tells you about the frame and the story text it contains:

A square (as on the name/address frame) indicates aframe with all its text displayed—either a standaloneframe or the last frame in a linked sequence.

A plus sign (as on the “Here’s the place” frame) showsthere’s more text in the story than the frame can display.Extra text is stored in an invisible overflow area. Youcan either make the frame larger or shorten the story.

A down arrow shows that the frame’s text continues intoa following linked frame.

Objects on the master page levelLet’s take a brief detour to review a key WebPlus concept...

� Click the company name heading text at the top of the page.

Nothing happens! Why not?

� Click (once) on the Current Page box atthe lower left. The screen display changes and the box nowindicates you’re working on the master page level.

You can think of a master page as a background that’s shared betweenvarious pages of your site. Every publication has a background masterpage level and every page has a specific master page assigned to it. (Inthis particular publication, all the pages share the same master page.)When you switch to the master page, objects on the page level vanish,leaving only background objects. In this case, that includes the headerand footer, address information, various graphic elements, and textlinks to other sections of the site. These are the common elements thedesigner of this particular Wizard has determined should appear oneach page of the site.

� You can use the Studio’s Pages tab to rearrange publication pagesusing drag-and-drop, assign master pages to pages, and add ordelete either pages or master pages without having to switch to aparticular level first.

� Now click the Current Page box again (once only) to return to thepage layer.


Working with text framesIt’s easy to move or resize a text frame. The appearance of the cursorover the selected frame tells you what will happen if you click and dragat that point.

� Using the Pointer tool, select the “Here’s the place” text frame.

Notice the blinking insertion point in the frame’s text. In this mode,you can type directly into the frame, and edit the text with the Pointertool.

� Now position the pointer over the frame’s gray bounding boxand notice the “Move” cursor appear. Click and drag to move theframe a short distance, then press Ctrl+Z to undo the move.

� Click one of the frame’s corner or edge handles and drag to resizethe frame. If you drag the bottom edge down, you’ll see thatthere’s more text visible in the frame. Again, undo the changes.

Here’s how easy it is to create a new frame.

� Click the button on the left toolbar to select the Frame tool.Now locate some empty space on the pasteboard (outside the pagearea), then click and drag out a marquee where you want the newframe to go. When you release the mouse button, an empty frameappears.

� Note that the Pointer tool was automatically selected afteryou created the new frame. Type a few words into the frame.

Editing textWeb Plus lets you edit text directly on the page, or with WritePlus, thebuilt-in text editor. Using the Pointer tool, you can type into anyparagraph, drag to select characters, and use the formatting controls onthe top Text toolbar. As with a word processor, double-clicking selectsa word, and triple-clicking selects a paragraph.

� Select part of the text you typed into the new frame, then trychanging its font and pointsize using the controls on the toptoolbar.


� To work with a more substantial amount of text, let’s switch to the“Here’s the place” body text frame on the page. Right-click thisframe and choose Edit Story from the context menu to launchWritePlus.

WritePlus opens in a separate window that shares many of the standardWebPlus menus and toolbars. You can move the mouse pointer aroundto view tooltips and hint text for the various buttons. BecauseWritePlus displays the full text of a given story, it’s ideal for viewingand editing the full text of a story that may span several frames orpages. You can view the text in draft mode (without formatting), exportstory text, and employ the Word Count function.

Obviously, the original text in this story is simply a placeholder for thetext you’ll be adding to your Home page. You can type over the sampletext, or select it all, delete, and begin with an empty frame, as you wish.

� To update WebPlus with any changes, click the Accept

button. To abandon changes, click Cancel.

By the way, you may be wondering about the difference betweenediting standard text and Web Wizard “answer” text. The key point isthat if you want to preserve answer fields, you should use the Wizardtab to edit their text, as explained in the previous chapter.

� Click the Current Page box at the lower left to switch to theMaster Page level. Now try to select just part of the company nametext. You can’t! Only the entire block of text can be highlighted.

Answer text is stored in fields, and when you select one of them (thecompany name in this case) the whole field highlights—a sure sign thatyou’re not dealing with standard text! You cannot select only part of ananswer text field. However, you can use the usual text editing functionsto change the field’s character or paragraph properties, orcut/copy/paste answer text fields within the document if necessary.

Again, a reminder: If you retype over answer text, you’ll effectivelydestroy the field. The new text you enter at that location will beordinary text and can no longer be updated via the Wizard panel.


Importing textBesides typing text into a frame or creating a story using WritePlus,you can use your current word processor (such as Microsoft Word) tocreate source files for your publication. Then you can cut-and-pasteusing the Windows Clipboard or import the text directly. It’s easy toimport text from a file into an existing frame. Let’s try it!

� Using the Pointer tool, right-click the “Here’s the place” frame.

� Choose Select All from the Edit menu (shortcut Ctrl+A) and pressDelete to clear the frame.

� Right-click the frame choose Text File.... Using the file selectiondialog, open SAMPLE.DOC in the SERIF/WP80/SAMPLES/ folder,either in your main Program Files folder or on your WebPlus CD.WebPlus imports the file and places it in the frame.Note: When prompted, click No to decline the AutoFlow option,which would create additional pages and text frames for theoverflow text. We won’t be needing the feature in this case.

� Press Ctrl+E as a shortcut to launch WritePlus, and briefly inspectthe new sample text. (Items in red are unfamiliar words identifiedby the AutoCorrect function.) You might try applying some font,size, or style changes.

About artistic textArtistic text is standalone text you type directly onto a page. Just aswith frame text, you can alter artistic text’s character and paragraphformatting, apply text styles, attach hyperlinks, and use WritePlus toedit the object. You can also apply a gradient fill and/or an outline toartistic text—for example, to create attractive Web buttons—but notethat artistic text with these properties is published as a separate graphicrather than as a block of HTML text.

Artistic text has some limitations. For example, you can paste from theClipboard to an artistic text object but cannot import text from a file.And because artistic text doesn't flow or link the way frame text does;the Frame toolbar’s text-fitting functions aren’t applicable.

To create artistic text, choose the Artistic Text Tool from the Tools toolbar. Click anywhere on thepage for an insertion point using a default pointsize, or drag to specify a particular size.


Set initial text properties (font, style, etc.) as needed before typing,using the Text toolbar, Format menu, right-click menu (choose Text Format), and/or Attributes tab. Then just type normally to enter text.

Once you’ve created an artistic text object, you can select, move,resize, delete, and copy it just as you would with a text frame. Note,however, that artistic text you’ve dragged to resize is published as agraphic. (To maintain it as text, change its point size via the Texttoolbar.)

� Try creating a sample of artistic text, either on an empty part of thepage or on the pasteboard.

About table textTables are ideal for presenting text and data in a variety of easilycustomizable row-and-column formats. Each cell in a table behaveslike a mini-frame. As with frame text, you can alter table text’scharacter and paragraph formatting, apply text styles, and attachhyperlinks. However, you can’t use WritePlus to edit table text. Youcan paste delimited text into a table, but cannot import text from a file.

Tables have a number of unique features (detailed in online help) likeAutoFormat, QuickClear, and QuickFill for rapid editing and revision.

To create a table, choose the Table Tool from the Tools toolbarand click on the page or pasteboard, or drag to set the table'sdimensions. The Create Table dialog appears with a selection of presetlayouts. You can either select a preset or choose Default to start with aplain table, then click OK.


Once you’ve created a table, you can select, move, resize, delete, andcopy it as an object, just as you would with a text frame. Otheroperations involve selecting text within the table, or parts of the table.Within each cell, you can click for an insertion point or drag to select arange of text. You can also drag to select multiple cells, rows, orcolumns, which in effect selects all the text in that region. Once you’vemade a selection, you can edit text in the table and modify the structureand appearance of the table and/or its components.

Changing the ‘Web colors’When you stepped through the Wizard to create the sample site we’vebeen working with, you chose one of several alternate color schemes.In the previous chapter, we used a paint-by-numbers analogy to explainabout the five numbers you can use to mark elements in WebPlus, andhow each scheme includes five colors, which get applied to elementswith the corresponding number.

By convention, body text in Web Wizard publications is marked with“Scheme Color 1.” That means it takes on whichever color has beendefined as Scheme Color 1 in the current scheme (the first of the fivecolors shown at the top of the sample). In addition, each publication’scolor scheme also includes these special Web color settings:

♦ The Hyperlink color applies to hyperlinked text before it’s beenclicked on, while the same text after a Web visitor has clicked to“follow” the link takes on the Followed Hyperlink color. (TheWebPlus sample displays these colors, but you’ll need to view thepublished site in a browser to preview the actual effect.)


♦ A Web site’s Background, which is applied to every page, can beeither a solid color or a tiled (repeated) picture, usually a bitmappattern. The tiled picture option works just like desktop“wallpaper”—so a small bitmap can go a long way. The color

scheme sample shows if the scheme uses a tiled bitmap.

You can modify the basic colors(and Web colors) in a scheme, orset a different background bitmap,using the Scheme Manager, in thesame way that you’d modify thescheme’s five basic colors. Todisplay it, right-click the schemename (or click the Tools menu)and choose Scheme Manager....

� Before continuing to the next chapter, you may wish to save yourwork.

Design TipsYou’ll find general advice on text usage interspersed throughout the“Web Design from Scratch” chapter. Rather than recap what’s saidthere, we’ll just make a few special points:

♦ Hardly anyone actually prefers reading computer text overtraditional print. Try to make your text inviting, at least. As a rule,users should be able to view each text block in the browserwindow without scrolling. Use short, newspaper-style paragraphs,not flowing, book-length ones. The “inverted pyramid” style ofwriting found in journalism works well on Web pages, too: use astrong lead-in and place essential information up front.

♦ There’s plain text, and then there’s hypertext (linked text). As aWeb author, writing well is only part of your job. Addinghyperlinks that enhance access to your key ideas is an equally vitaltask.


♦ Headlines and subheadlines are useful devices to facilitatescanning (scrolling) and to break up the monotony of longerstories. Use left aligned rather than centered heads. Avoid headlinetext larger than 24pt, which looks amateurish, and all-uppercaseheadlines, which can be hard to read. For variety, you can color theheads and subheads differently from body text—just don’t overdoit!

♦ In general, it’s not a good idea to use more than one column forstory text. On a Web page, no one wants to scroll to the bottom ofone column and then back to the top of the next. You may seesophisticated Web pages that use tables and frames to demarcatedifferent kinds of content, and you may be able to emulate theseeffects, but they work best with short text blocks and menu pages,rarely for the presentation of longer material.

♦ To avoid registration problems, make sure text is on top, notbehind images.


For more help on working with text...In this chapter, you’ve examined the placeholder text provided by theWeb Wizard and learned how to create, edit, and import standard text.You know enough now to begin replacing the placeholder text withyour own content. In addition, you should now have a grasp of how theWeb color components of color schemes apply to text.

As you work on your actual Web site, you’ll benefit from learning howto link frames together, set defaults for new text, use shortcuts, insertreturns and special characters, and work with the various proofingtools. For details on these and other text options, see online help.

For help on... In WebPlus Help,display...

Then...

Overview ofWebPlus text

Index Select “text, overview”

Import textWork with frametext, artistic text,frame text

Contents list See topics in section “How toWork with Text”

Set text propertiesUse templates andnamed styles

Contents list See topics in section “How toFormat Characters andParagraphs”

Master pages Index Select “master pages”

Set defaults Index Select “default properties”

Use proofing tools Index Select from “proofing tools”

Color schemes Index Select “color: using colorschemes”

?

Working withGraphics, Animation &Multimedia

Working with Graphics, Animation, and Multimedia 41

In this chapter, we’ll continue exploring the pages the Web Wizardprovided—this time looking at images and graphic objects. The focuswill be on how to replace the placeholder images the Wizard installedwith your own images, and how to create new graphic elements.

Graphics in WebPlusWeb Wizards may incorporate several different types of graphic objectsinto your publication. You can use the Pointer tool to select, move, andresize them, just as with text objects.

� On the Home page, click with the Pointer tool on the photo. Tryresizing it by dragging from one corner. Press Ctrl-Z to undo. Nowclick in the center and drag it off to one side. Press Ctrl-Z again.

TIP: Watch the HintLine as you drag an object, and it will tell you theobject’s properties.

� Drag the photo to the right so it partially overlaps the “HomePage” frame. Now click on the photo where it overlaps the frame,and a blinking cursor appears in the frame. Click again in the sameplace—the text edit cursor remains. Now hold down the Alt keyand click. This time, you’ve selected the photo again.

As a general rule, when two or more objects overlap at a particularpoint, your first click at that point selects the uppermost object—typically the one most recently created. Your second click selects theobject below the first, and so on. If one of the objects happens to be atext frame, use Alt-click to override the text edit cursor.

TIP: You can also employ Alt-click anytime to drag a text frame fromits center.

42 Working with Graphics, Animation, and Multimedia

Importing a picture or animationYou’ll have no difficulty importing such items as metafile clipart,bitmap photos, or animated GIFs. WebPlus can handle all the standardformats. After being imported, each image is stored in the WebPluspublication until you publish the site, at which time it’s exported usingone of the standard bitmap formats (GIF or JPG) that Web browsersrecognize. Let’s try importing.

� Click the Import Picture button on the left toolbar.

� Using the file selection dialog, open PHOTO1.BMP in theSERIF/WP80/SAMPLES/ folder.

� Now you have two choices. You can either drag out a box regionon the page to set the size of the imported picture, or simply clickto insert the picture at a default size. Pick either one. The samplepicture (of a lion) will appear, and you can always resize it later bydragging its handles.

To replace an existing image—for example, a placeholder pictureincluded by a Web Wizard—just double-click it to bring up the fileselection dialog. You can also drag and drop an image file icon intoWebPlus, and of course paste objects from other applications via theWindows Clipboard.

The Convert to Picture command lets you combine several separateelements (as a multiple selection) into one picture for easiermanipulation. It’s also great for changing an embedded picture fromone format to another, saving you the trouble of making changes in anexternal editor.


By the way, the WebPlus 8.0 Resource CD-ROM includes a bonuscollection of 20,000 WebArt images, including arrows, bullets/buttons,icons, lines, and animations as well as pictorial Web graphics. You canperuse the collection using your Web browser, then drag and dropimages directly into WebPlus. To choose animations, use Insert/Web Object/Animated GIF.... For details, search for “WebArt” in theonline help index.

Note that the time it takes a visitor to load one of your Web pages isdirectly related to the size of the page’s HTML file plus anyaccompanying graphic files. Graphics require larger file sizes, andhence slow down loading time. And even in compressed form, bitmapfiles like the photo we’ve just imported tend to be much larger thansimple line or shape graphics (see below)—so use them sparingly!Keep picture dimensions to the minimum needed to convey your point.It’s always wise to plan your layouts so as to avoid large graphic areas.

Drawing lines and shapesWebPlus provides several easy-to-use drawing tools. The three line-drawing tools are located on a Tools toolbar flyout:

Straight Line Freehand Line Curved Line

With them, you can add both functional and decorative layoutelements—for example, clickable buttons or page dividers. To draw astraight or freehand line, select the appropriate tool, then click anddrag. To extend an existing line, begin drawing from one of the line’send nodes. To close the line, creating a shape with a fillable interiorregion, simply connect the line back to its starting point.

Curved lines allow you to adjust the curvature of each line segmentwith precision. To use the Curved Line tool, click where you want theline to start, then either click again (for a straight line segment) or clickand drag to create a control handle for the initial point. These handlesact like magnets, pulling the curve into shape! Click again where youwant the segment to end. As with the other line tools, you can extendthe line repeatedly. To end a curved line without closing the shape,press Esc or double-click (or simply choose another tool).


You can use the Pointer tool to adjust lines once you’ve drawn them.The techniques are the same whether you’re editing a separate lineobject or the outline of a closed shape. Simply select the line and dragits bounding box to move or resize it. Drag a line segment to reshape it,or select an individual node and drag to move it, or adjust the node’scontrol handles to change the profile of the adjacent segment(s).

The Curve toolbar appears when you select a line or closed shape, andprovides a variety of adjustment controls for adding or deleting nodes,closing or breaking curves, and changing node types, as detailed inonline help.

The QuickShape flyout lets you select pre-designed objects thatyou can instantly add to your page, then adjust and vary using controlhandles. The QuickShape flyout contains a wide variety of commonlyused shapes, including boxes, ovals, arrows, polygons and stars.

� Try it! Click the QuickShape button, then select a box shape fromthe flyout. Click and drag out a small box on the screen.

The new box displays a sliding adjustment handle, used to controlcorner shape. Most QuickShapes have multiple adjustment sliders.

� Drag the slider up for concave corners, down for convex. Note thatthe tool has reverted to the Pointer, and you can also use it to moveor resize the box.

Initially, the box will have a black line border and a clear fill. Theeasiest way to change the object’s line and fill properties is to use theStudio.

� Display the Line panel of the Studio’s Attributes tab. Try applyinga higher Weight value to give the box a thicker border, and clickvarious Type samples for a different line.


� Now display the Attributes tab’s Color panel. You can easilychange the box’s line or fill color and/or shade by first right-clicking a solid color sample, then choosing either Apply to Lineor Apply to Fill. (Left-clicking a sample applies the solid color orshade to the selected object’s fill.). The panel also features Fill,Text, and Line buttons that let you preselect which attribute yourcolor selection will affect. For each base color you select, you canpick from multiple shades of that color displayed in the Shadesgroup.

Note: You can achieve great results using just solid colors, but for evenmore impressive effects in conjunction with the .PNG graphic format,explore the Transparency panel on the Attributes tab. Using thesamples in conjunction with the Transparency tool, you can createhighlights, shading and shadows, and simulate “rendered” realism.You’ll find full details in online help, as noted at the end of the chapter.

� Now click to display the Fill panel. Here you’ll find an array ofpredefined color fills in several categories: Linear, Radial, andConical. Try applying some of the thumbnails to get a feel for thewide range of possibilities. If you want to switch back to a clearfill, click None in the drop-down list.

� In passing, right-click on the box object itself and note theavailable Line..., Fill..., and Transparency... options that let youadjust all these properties.

As a mini-project, you might try creating aHome Page button by overlaying a text frameon an unfilled shape. Select both objects,then click the little Group button to linkthem. In the next chapter we’ll see how toadd a hyperlink!


Other tools and techniquesYou already know how to select, move, and resize objects. Here areseveral additional tricks you can carry out on selected objects. Try themout on your sample photo and box graphics!

� Use the Rotate tool to rotate an object around its top lefthandle. Select the object, then drag one of its handles. (To switchquickly to the Rotate tool, position the cursor over an object'shandle and press the Alt key.)

� Use the Crop tool to crop (or trim) objects. Select the object,then drag one of its handles inward.

� To draw a shape with constrained dimensions—for example, asquare or circle—hold down the Shift key while drawing orresizing it.

� To add more than one object to a selection, hold down the Shiftkey while selecting additional objects. This is handy for moving acluster of objects while keeping them aligned with each other.

� You can click the Group button that appears next to amultiple selection to lock the objects together temporarily. Thissaves you the trouble of having to select them all individually thenext time you want to do something to the whole group. Toseparate (ungroup) the objects, click the button again.

� To duplicate an object, select it, then press and hold the Ctrl keyand drag out a copy.

� To constrain the movement of an object to horizontal or vertical,use the keyboard arrow keys to nudge the selection up, down, left,or right. Alternatively, hold down the Shift key after you begindragging the object.

� Use the WebPlus layout tools—including rulers, guides, the dotgrid, and the Snapping button—to position and align items withprecision for a professional appearance.


Adding animationsWebPlus lets you add two varieties of eye-catching animation effects toany Web page: animated marquees (scrolling text banners) and GIFanimations. Using Wizards, you can preview the animation and/orcustomize the effect. Once placed into your Web publication, theanimations appear static, but they will spring to life once the site hasbeen exported and a visitor views your page in a Web browser. Let’ssee how easy it is to add an animated GIF.

� Click the Insert Animated GIF button on the left toolbar. TheAnimated GIF Wizard appears.

� Click Next and select an animation category. We’ll leave you onyour own to browse through the collection. Just click a title on thelist, and watch the animation in the window.

� As when importing images, either drag out a size region on thepage or simply click once to insert the GIF. For fastest imagedisplay, reduce the original image dimensions to the needed sizeprior to importing.

The animation won’t move on the WebPlus page, which only displaysthe first of the GIF’s multiple frames. But keep it on your page so it’savailable when it’s time to preview the Web site in your browser.

You may wish to try the animated marquee effect, too—click theInsert Animated Marquee button on the left toolbar.

� Before continuing to the next chapter, remember to save yourwork.


Adding sound and videoWebPlus lets you augment your Web pages with sound and video filesin a variety of standard formats, including both non-streaming andstreaming media. You can include linked sound or video, triggered bya mouse click (for example on an icon or hyperlinked object. Inaddition, you can define background sounds where a sound loads andplays automatically when a specific page is first displayed in thevisitor’s Web browser.

One way of including multimedia is to add a hyperlink or hotspot (seethe next chapter) that opens a specific media file. With this option, themedia file remains separate from the publication. WebPlus alsoprovides several ways of embedding the source file.

Clicking the Insert Sound Clip or Insert Video Clip buttonon the left toolbar lets you choose whether to link the clip from astandard icon (supplied by WebPlus), from an external picture file ofyour choice, or via an inline media “player” (again supplied byWebPlus). With the third option, a marker appears on your page wherethe player will be shown after the page is published. Using any of theseapproaches, you can select or deselect the Embed option.

When you publish your site, WebPlus takes care of exporting andcopying both embedded and non-embedded files. Note that you won’tbe able to play back or edit sound or video files in WebPlus; you’llneed to use an external media editor.


Design Tips

GraphicsYou can obtain pictorial content in lots of ways: scanning, grabbingscreen images, using clip art, creating from scratch. No matter whereyou get an image, you’ll need to modify it in some way: cropping orenhancing it, adding text, applying a special effect, combining it withanother image. For these tasks, you don’t have to be a great artist, butyou do need to know your way around a paint program like SerifPhotoPlus. Make sure you’ve got a package that can save to the .GIFformat. Whichever program you’re using, the information and advice inthis section will help you use it effectively with WebPlus.

Before moving on to some more technical aspects of enhancing Webgraphics, let’s review a few visual design precepts with specialrelevance for Web pages in general. As in other sections of this chapter,we’re interested in respecting the way people actually experience Webpages.

♦ If you’re using graphics as page elements, not just as background,then use small, significant elements throughout the page, not just atthe top and bottom. As users scroll, the page should preserve abalance of text, graphics, and white (background) space.

♦ At the same time, avoid insignificant adornments like rules,bullets, and icons unless they’re part of an overall scheme.

♦ Don’t use too many colors on the page or background. Half adozen per page, including background, body text, links, andgraphics, is about right to lend your site a professional appearance.(Plain white or light backgrounds are favored.) Pick no more thantwo dominant colors per page; the further any other color is fromthese “dominants,” the less space it should occupy.

♦ Elements with similar form or function (for example, all sectionheads or horizontal rules) should share the same color.

♦ Try varying the artistic forms you use. Throw in a photograph ortwo—even if they have no special relevance to your site, they’llenhance its visual appeal on a decorative level as long as theyblend into a compositional scheme. Think about using a clip artphoto as a background for a logo, text head, or navigation map.Don’t get stuck on using just one type of graphic.


♦ Avoid blocky, rectangular shapes, which tend to make the pagelook closed, static, and amateurish. Rounder and softer-edgedimages tend to open up the page.

♦ Include graphic effects that combine hard-edge and soft-edge; dropshadows are a good example.

The soft-edge effect known as anti-aliasing is one of the basic tricks ofthe computer graphics artist. The effect gets rid of “jaggies” alongedges by subtly applying intermediate colors. To the human eye, anti-aliased text on-screen (especially at larger point sizes) appears ofhigher quality than text without the effect. In general, always use anti-aliasing for your graphics and headline text, unless the image containsonly straight lines, edges, and outlines.

As shown in the illustration below, your design can include pageelements that blend with master page elements. These might includeportions of a logo, header, navigation bar, and so on. Fortunately, withHTML 4.0 you can overlay one object on top of another and not haveto worry about overlap. You’ll still need to zoom in closely and adjustthe objects on one or both layers to achieve precise registration.

Choosing the proper format and settings for Web images is vital.WebPlus relies on global settings to determine how each type of pictureshould be exported when you publish the site. By default, any imageyou inserted as a GIF or JPEG is exported as the original file, using itsoriginal file name. All other graphics are converted to JPEGs.

If you wish, you can alter these global settings (on the Graphics tab ofFile/Web Site Properties...), and you can always use the WebPicture Properties Wizard (Web Picture Manager from the Toolsmenu) to change the export settings for individual images. The Wizardlets you check just one selected image, a range of pages, or the wholepublication. For each image, you can specify the output format: .GIF,.JPG, .PNG, or Global Settings.


Here’s some very general advice on which Web image formats to usewhen importing. There’s a great deal more detail on formats andconversion options in online help—the topic referenced above is a“must read”!

♦ Use the Import Picture button (or Insert/Picture... command) tobring images into WebPlus, rather than pasting them via theClipboard. The fewer filter transformations an image has toundergo, the better.

♦ Use the .GIF format for low-color, non-photographic images withsharp edges—for example charts or screen-capture text. Theformat is limited to 256 colors, so it’s fine for grayscale photos aswell.

♦ For photographic images and high-color, soft-edged graphics,.JPG rather than .GIF is the preferred format.

♦ With JPEGs, image quality goes down (along with file size) as thecompression setting increases. With high compression, someimages may still look fine, but photographs in particular willvisibly degrade. Preview your site, and let your own eye be thejudge. You can adjust the global or local settings for .JPGcompression as required.


Bear in mind that not all your visitors’ computers will match your ownfor speed or graphic display. Like the .GIF format, some monitors arestill limited to 256 colors. It’s generally a good idea to switch yourdisplay to 256 colors and test the page in a browser before finallypublishing it. This will ensure you’re using colors in a way that won'tpresent problems when displayed on average systems. The more youknow about color palettes and image formats, the fewer displayproblems are likely to creep in.

Note: If you’re quite sure all your intended visitors can display morethan 256 colors, the following section isn’t required reading. On theother hand, the knowledge is likely to prove useful when working withany on-screen graphics, just as knowing basic color theory serves youin the realm of printed publications.

A major constraint imposed by 256-color systems is that not allsystems use the same 256 colors. The operating system reserves acertain number of palette slots for “system colors,” and system palettesdiffer, for example, between Windows and Macintosh computers.Applications, including Web browsers, declare their own palettes anduse dithering to approximate colors outside that palette. This means,for example, alternating pixels of red and blue (from within the palette)to approximate a purple color outside the palette.

If you’re not careful, dithering can ruin your best efforts. Let’s sayyou’ve created a graphic with some solid color areas, but the user’sbrowser can’t display one of those colors. So the browser dithers thecolor, resulting in a mottled and degraded image. If the solid colorhappened to include text, the text becomes less legible.

To prevent display of this kind, Web designers often use a Web-safepalette of 216 colors that don’t dither in Web browsers operating in256-color environments. The safe palette is actually a 6x6x6 RGB“color cube” using evenly-spaced red, green, and blue values from 0 to255 along its axes. 51 happens to be the interval in the series of values(0, 51, 102, 153, 204, 255). So, for example, the RGB definition“0,102,51” would be a safe color, while “0,102,52” would not. Tocreate Web-safe colors in a paint program, define new colors usingRGB values that are either 0 or divisible by 51.


For your convenience, WebPlus includes two swatch panelsincorporating the Web-safe colors. (Look for WEBSAFE1.GIF andWEBSAFE2.GIF in the /WP80/SAMPLES folder.) You can paste eitherone into your paint program’s “canvas” area and pick colors from itusing the program’s eye dropper tool. Or you can load the suppliedWEBSAFE.PAL palette so it’s used in the color selection table. It’sespecially important when anti-aliasing graphics to ensure that the edgecolors the program applies come from the safe palette.

As a rule, if you’re concerned with 256-color display, save low-colorbitmap images created in your paint program in the .GIF format usingthe safe palette. Avoid using a unique palette per image; if you havemultiple GIFs per Web page, different palettes may clash and allimages will suffer.

Performance“Performance” may seem like an odd aspect of graphic design, but it’sactually one of the key factors in how users will judge your Web site.Technically, performance means load time: how long it takes for yourwhole page, including text and graphics, to display completely in aWeb browser. In practice, it’s hard to measure, and subjective factorsintrude. Connection bandwidth, server speed, and modem rating allplay a part. As discussed earlier, it’s always wise to design the safe areaof each page to give visitors something to look at, read, and/or thinkabout, and thus offset the perception of delay while the rest of the pageloads.

Load time is a function of the total size of all the page objects that needto load; and graphics usually take up the lion’s share. That’s why wecan talk about the “performance” of your page as a function of the totalfile size of its graphics.

As a rule of thumb, use 60K bytes per page as a maximum. Assumingthat the average home user’s dial-up modem can download 3-5K bytesper second, that’s a load time of 12 to 20 seconds. Any longer than thatis asking for trouble.

� You can determine the actual size of your files by publishing onepage at a time to a local folder (using File/Publish Site/to Disk Folder...), then using Windows Explorer to examine the contentsof the folder. View the files by date and Shift-select the mostrecent batch, then right-click and choose Properties to see theaggregate byte count. Obviously, the lower the better.


Is there anything you can do to reduce the total size of your graphics,aside from using fewer graphics? An obvious suggestion is to makethem no larger than they need to be to get your point across. Since filesize increases as the square of each dimension, shrinking both heightand width by 50% reduces the file size by 75%.

If you save graphics as GIFs (see above), you can take advantage of thefact that GIFs, unlike most other 256-color (8-bits-per-pixel “bitdepth”) formats, don’t insist on using 8-bit pixels. If the number ofcolors in the image is 128, GIFs will encode using 7 bits; with 64colors, 6 bits, and so on. As an experiment, we tried starting with asmall image (some anti-aliased text) that only used 14 colors. With thepaint program set for 256 colors, we saved as a .GIF, yielding a file sizeof 1204 bytes. After reducing the number of colors displayed in thepaint program to 16—still sufficient to display all those in the image—we saved again, and the file size went down to 420. If you’ve got adozen or more small GIFs per page, those little savings can really addup!

Paint programs handle color reduction in various ways. Some let youset the image to either 16 or 256 colors, but not to 64 or 128; that’s stilla help if your images require 16 or fewer. Ideally, you can save with anarbitrary number of colors, and the program will attempt to optimizethe image using that value. So you can pick any intermediate bit depth,and find the one that works best for the specific image. To sum up:

� To reduce file size, reduce the number of colors in each image, andsave as a .GIF file using the lowest acceptable bit depth your paintprogram will allow.

If all this talk about image formats and bit depth has landed somewhereslightly over your head, we have two suggestions:(1) Spend some time with a good paint program and experiment withthe techniques introduced here.(2) Point your Web browser to the Suggested Links in the “Web Designfrom Scratch” chapter. You’ll find a wealth of advice and examples todraw upon.

Here are a few other tips for quicker pages: Avoid large regions oftransparency. Group small objects and set your options so they’reoutput as a single image. And use the correct dpi setting for imagesbefore importing, rather than scaling large images down on the page.


MultimediaConsidering all the cautionary advice here about reducing file sizes toachieve acceptable load time on home-based Web browsers, a forayinto multimedia is clearly not for the faint of heart! Although WebPlus8.0 allows you to insert both audio and video files—and will evenembed the files in the original publication to facilitate your efforts—from a design standpoint this feature should be regarded as ratherexperimental.

Although WebPlus will insert a wide variety of audio and video files(such as QuickTime, MPEG, RealAudio, and RealVideo), unless youknow your target visitors can play one of the special formats youshould stick with the “generic” Windows media types. These include.WAV for audio and .AVI for video. The main barrier, of as withgraphics, is file size. Typically, a .WAV file for speech contentconsumes about 10K per second, and a compressed .AVI file for apostage-stamp-sized, 10 frame-per-second movie video without sounduses at least 35K per second. If you want an audio track along withyour movie, add the two numbers together. While these rates are paltrywhen the source is a local hard disk, over a standard modem (using ourearlier estimate of 3-5K per second, and we’ll let you do the math) yourWeb visitors will have a painfully long wait before that five-secondvideo clip knocks their socks off. And unless you opt for streamingmedia, which entails technical issues well beyond this chapter, there’sjust no other choice.

Another obvious barrier to using audio or video is obtaining orproducing the content. WebPlus, of course, doesn’t handle eitherformat natively—it cannot edit or play them back—so unless you relyon borrowed or clip media, you’ll have to master a media editingapplication or know someone who can. (Any teenagers in the family?)

The good news is that just because multimedia capabilities are“experimental” in WebPlus doesn’t mean you can’t have a lot of funexperimenting! If you (and/or your Web visitors) are on a local networkor have extremely fast Internet access, the fact that audio and video arebasically file downloads should not be a barrier. The limited supportthat WebPlus offers may be exactly what you need to include thatspecial bit of digitized home movie footage, or some background thememusic that loops while visitors peruse your home page.


And while video on the Web may be “not quite ready for prime time,”don’t overlook the possibilities of creative audio. You can addentertainment value and interest with well-selected, short audio clipslike single words or phrases, themes, sound effects, and the like. Forlonger clips, we suggest you use the inline option, which provides asmall on-screen player. Visitors who don’t care for the audio willappreciate being able to click the stop button!

In sum, while we wouldn’t recommend making non-streaming audio acenterpiece of your Web site, it’s certainly another way of introducingwelcome variety to your pages. The constraints are real at this stage—but let your creativity rise to the challenge.

For more help on working with graphics,

animation, and multimedia...

For help on... Choose from theHelp menu...

Then...

AligningGroupingExportingCroppingLayeringOther object actions

Contents list See topics in section “How toEdit Objects on the Page”

Lines and shapesGallery and Portfolio

Contents list See topics in section “How toWork with Graphics,Animation, and Multimedia”

Importing images Index Select “importing”

Setting imagepublishing options

Index Select “Web sites, settingpicture display options”

Animation Index Select “animation effects”

Sound and video Index Select “sound” or “video”

Working with colors,fills, andtransparency

Contents list See topics in section “How toWork with Colors, Fills, andTransparency”

?

Working withHyperlinks andInteractivity


In this chapter we’ll look at several ways you can enhance yourWebPlus pages to improve the quality and variety of the visitor’sexperience. If your site has more than one page, hyperlinking isessential—it’s what enables visitors to navigate through your site—andit’s easily accomplished. Adding Java and HTML is somewhat morechallenging, but if you’re technically inclined, WebPlus stands ready tosupport your efforts.

Hyperlinking an object such as a shape, a word, or a picture means thata visitor to your Web site can click on the object to trigger an event.The event might be:

♦ A jump to a Web page (either on your site or somewhere else onthe Web);

♦ The appearance of an E-mail composition window; or

♦ The display of a graphic or text file.

You can also place hyperlinked hotspots over parts of the page. Let’sbegin by taking a look at hyperlinks in your Wizard-based publication.

Hyperlinking textAs a visual cue, hyperlinked words on Web pages are underlined.

� Open the “Arch” sample file again and zoom in on the upper halfof the page.

� Click the Current Page box to switch tothe Master Page layer.

� Click on the words “About Us.” Because this is an “answer text”field, you’ll see an insertion point just before or after the words.

� Click the Insert Hyperlink button on the Tools toolbar.

The Hyperlinks dialog appears, and the words “About Us” arehighlighted because they already include a hyperlink. In the dialog, youcan see that the link’s destination is “A page in your publication”—page 2 to be precise.

� Click the drop-down list and inspect the other possible linkdestinations. Note the Remove button that you could use to unlinkthe selected text (if you wanted to), then click Cancel.

60 Working with Hyperlinks and Interactivity

To create a new hyperlink in existing text, you would first select therange of text you wanted to link, then click the Hyperlink button. Thesame dialog would appear, and then linking would be simply a matterof choosing the destination and clicking OK.

From a design standpoint, it makes sense to include a navigationbar—a cluster of links to the various key pages on your site. Put it onthe master page, so the same links will appear on each page. Instead ofusing separate text frames, as in the Web Wizard publication, youmight use a single frame across the top of your page, with the linkscentered—for example:

However you design it, consider your navigation bar an essentialelement. Users will expect it to be there to help them get around yoursite. Again, it makes sense to plan your basic layouts ahead of time.

Hyperlinking graphicsOnly a few additional words are required here, because the procedurefor linking graphic objects is the same as that for linking text. You justselect the object to be linked and click the Hyperlink button.

� Click the Current Page box to switch back to the page layer.

� With the Pointer tool, click on a photo to select it, then click theHyperlink button.

Again, you’ll see the Hyperlinks dialog. This is the technique you’d useto hyperlink an entire object. Compare this with the hotspot method,explained below.


Using hotspots and rolloversA hotspot is a transparent hyperlink region on a Web page. Usuallyplaced on top of bitmap images, hotspots act like buttons that respondwhen clicked in a Web browser. They are especially useful if you wantthe visitor to be able to click on different parts of a picture (such as agraphic “menu” or map of your site). To give you an idea of how theywork, we’ll need to create one.

� Click the Insert Hotspot button on the left toolbar. Thecursor changes to a cross.

Let’s place a hotspot over the butterfly in the photo.

� Click slightly to the upper left of the butterfly, then drag down andright to draw a box. (You canadjust it later.)

When you release the mousebutton, the familiar Hyperlinksdialog appears. This time, it’swaiting for you to provide adestination.

� Select “A page in your publication” and designate page 2 in thedrop-down list. Click OK.

If necessary, you can use the Pointer tool to move or resize a hotspot,like any graphic. There’s no limit to the number of hotspots you canuse. You can also add extra nodes to a hotspot, allowing it to be fit intoany irregular region; there’s more on this in online help.

Rollover graphics combine several images with HTML code in such away that a different image appears (or some other event is triggered)depending on how the user’s mouse “rolls over” the object. Forexample, a rollover button might appear “down” or “up” depending onwhether the user’s mouse was over it.


WebPlus lets you add rollover graphics to your Web publications; thenecessary event-trapping code is generated for you automatically.Adding rollovers is basically a matter of deciding which rolloverstate(s) you’ll want to define for a particular object (Normal, Over,Down, and/or Down+Over), then specifying an image for each state.For details, consult online help.

About HTML and JavaHTML, of course, is the language “behind” basic Web pages—theactual descriptive code that tells a browser what to display and where todisplay it. While WebPlus doesn’t support full-fledged HTML editing,it does allow you to add extra HTML code to a page. Using thisapproach, you can include HTML and JavaScript fragments generatedby another application, copied from another Web page, or perhaps thatyou’ve written yourself.

To insert HTML, choose Web Object... from the Insert menu andselect HTML... from the submenu. Then use the dialog to enter theHTML code. WebPlus inserts a marker into your publication at the sitewhere the code will run. Since you won’t be able to see the effect of theHTML until you preview the exported site, be careful to position themarker correctly. You’ll definitely want to check your Web page in abrowser! (Tip: You can store HTML code fragments in the Portfolio.)

Java is a cross-platform, object-oriented programming language usedto create mini-applications called applets that can be attached to Webpages and that run when the page is viewed in a Web browser.WebPlus lets you add Java applets to your Web publications. You don’thave to write your own! Plenty of applets are available online—forexample animation, interface components, live information updating,two-way interaction, graphics rendering, live updating, streaming audioand video, games, and many more.

To insert a Java applet, choose Web Object... from the Insert menuand select Java Applet... from the submenu. In the dialog, list theapplet’s component files as well as any necessary parameters (asdescribed in the applet’s documentation) that specify exactly how theapplet should run. You don’t necessarily need to understand theunderlying code, but it’s essential to make sense of any “Read Me”documentation that comes with the applet.


As with HTML, WebPlus inserts a marker into your publication at thesite where the code will run. The marker’s dimensions probably won’tcorrespond exactly to those of the applet when it’s running, so planyour page layout accordingly, and the more preview tests you can run(using various versions of different browsers), the better.

Design TipsIn this section, we’ll look more closely at how linking elements canhelp your site succeed both aesthetically and functionally. Thedifference is in the details.

HyperlinksThe World Wide Web has finally popularized the concept of hypertext,which has been around for at least a decade. Formerly limited prettymuch to clicking our way through CD-ROMs, we’re now accustomedto clicking ’round the world in a matter of seconds! Yet the skill ofauthoring effective hypertext documents is still not widespread. Hereare several style tips for linking:

♦ Use links in text sparingly: quality, not quantity, matters. If youwant readers to finish reading your paragraph, don’t fill it full ofinvitations to jump elsewhere.

♦ Don’t let links in text disrupt the flow of your writing. Avoidsentences like: “Click here to learn more about placing links intext.” An improvement would be: “Web links are powerful, butmay cause problems if overused.”

♦ If you have more than a couple of links to related material,consider listing them separately (like a See Also list), perhaps witha bit of graphic embellishment.

♦ If your site has a group of interrelated topics, it may be moreefficient to cluster them into a section or sub-section, with its ownmenu page, rather than creating lots of sideways links between thetopics themselves.

♦ For sequential material, you can create a browse sequence (seebelow).


Navigation buttonsAs we’ve mentioned, a navigation bar is a valuable basic layoutelement. Besides using hyperlinked text, you can employ buttonscreated as hypergraphics: images with hyperlinks or hotspots applied.

If your site adheres to the basic section/level model (as detailed in the“Web Design from Scratch” chapter), then you’ll want to provide linksto the Home page as well as to the various section menu pages. Ifyou’re just starting to develop your site, make sure the overall structureis clear before you design a navigation bar. Decide what your sectionswill be, then choose a concise button label for each section. Sketchsome designs on paper. If there’s a chance you may add more sectionsin the future, allow room for the navbar to accommodate a new buttonor two.

Resist the temptation to design individual icons for the various buttons.You might purloin some decent clip art, but developing a set oforiginal, decipherable icons is a fine art in itself, and a supreme time-waster.

As for the buttons themselves, they needn’t look rectangular andbeveled, like lozenges. Artistic text works fine. Remember thatwhenever the browser’s mouse pointer rolls over a hyperlink, it willchange to a hand. If the assemblage looks anything like a navigationbar, users will find it and know what to do with it. You can accentuatebutton labels by separating them from each other (e.g. with lines orborders); adding bullets or triangles; or using a filter effect on the text,such as a drop shadow or emboss. Of course, if you like, you can createmore traditional box or oval buttons using QuickShapes.

Another option for buttons is to use rollover graphics—objects whoseappearance changes through image-swapping in response to mouseevents. Adding rollovers in WebPlus is simply a matter of decidingwhich rollover state(s) you’ll want to define for a particular object, thenspecifying an image for each state, and a hyperlink target for thebutton. The necessary event-trapping code is generated for youautomatically.

Users should perceive the navigation bar as a fixed component of thepage background throughout the site. The simplest solution is toposition the bar on the master page so it appears on every page.


To aid navigation, you can vary the bar’s appearance from section tosection, with the button for the current section appearing emphasized orhighlighted in some way. Perhaps the most economical solutioncombines a basic set of buttons on the master page with a bullet orpointer graphic on the page level to denote the current section. Thisapproach works especially well with a vertical list, e.g. section names:

Placing a pointer-type graphic on each page entails a lot of pasting, butit’s worth the effort. Make sure pointer alignment is consistent frompage to page.

To achieve a highlighting effect, you can use a paint program like SerifPhotoPlus to customize the navigation bar graphic for the varioussections of the site.

� Begin with a graphic that includes a full set of neutral(unhighlighted) buttons.

� Make as many copies of the graphic as there are buttons.

� Modify one button in each copy, applying a highlighting effectsuch as a different color or font style. Keep the rest of the graphicthe same.

This gives you a unique button graphic for each section.

� Paste each graphic onto all pages of the appropriate section, in thesame position. (Work at high magnification and use the ChangeBarto view the selected object’s pixel position. Better yet, place acouple of ruler guides and turn Snapping on.)

The effect will be that of a single navigation bar with highlighting thatchanges from section to section. By the way, an advantage of using thepage level (rather than the master page) for your button bar is that youcan include a duplicate bar at the foot of each page as an addedconvenience to the user. Since your pages are likely to vary in length(that is, distance to the bottom object), you can vary the placement ofthe bottom bar as needed. If it were on the master page, its positionwould have to remain static.


The navigation bar is tremendously useful, but the structure of your sitemay call for other kinds of navigational links. For example, supposeseveral pages comprise a natural sequence. Perhaps a long story orreport has been broken into several sections, or directory listings arearranged alphabetically. In such situations, create a browse sequenceusing a mini-navigation bar that lets the user step forward or backwardthrough the series. One way is to provide Previous and Next buttons,using fairly standard arrow graphics:

The problem with Previous/Next buttons is that you’ll have to custom-link each button to a specific target page, with a different pair of linkson every page in the series. A more economical (and functional)browse sequence bar looks like this...

...where the five dots represent a five-page sequence. The square centershows the current page. To get to any one of the five pages, the usersimply clicks the corresponding dot. If you use a set of five hotspots“hard-wired” to the correct pages, you can duplicate the hotspot set onall five pages, and simply place a different graphic on each page.

Finally, while we don’t encourage long pages that force the user toscroll on and on, it’s handy to know that a hyperlink to the current pagewill force the browser to redisplay the top of the page. So in situationsthat seem to call for it, you can include a TOP button (typically with asmall up-arrow) at the bottom of your page, linked to the current page.After all, the user worked hard to get to the bottom—why make themclimb all the way back up?


HypergraphicsHypergraphics in WebPlus come in two flavors: graphic objects towhich a hyperlink has been attached (using Insert/Hyperlink...) andthose with one or more hotspots superimposed using the Hotspot tool.The choice is usually obvious. If you’re creating a button bar usingseparate shapes for buttons, use individual links for each graphic (orrollovers, discussed above). If your bar consists of a single graphic, usehotspots.

Hotspots, which are themselves graphic elements, are notrecommended for use over text blocks. They force the text to beconverted to a graphic when the page is published, which aliases andoften distorts the characters. On the other hand, hotspots over a picturedon’t trigger conversion. So if you want clean lettering as part of yourhypergraphic, create it in your paint program. (In general, use the .GIFformat for all non-photographic images you create for WebPlus Webpublications, and work in 256-color mode. See the tips in the“Graphics” chapter.)

The five-dot browse sequence bar depicted above is a good example ofa simple, useful hypergraphic. The hotspots themselves comprise agroup that can be copied and pasted to various pages, while theunderlying graphic changes.

Hypergraphics give you an alternative to using hyperlinked text, whichis best reserved for use within body text. For example, if you had a setof pages arranged alphabetically, you might like to create an alphabetusers could click on to jump to a particular page. This could be donewith a string of 26 hyperlinked text characters, but a creative alphabetgraphic with hotspots over each letter would undoubtedly end uplooking better.

You can use hypergraphics to create fanciful pictorial menus, visualindexes, maps, diagrams, and other clickable previews of the content onyour site. In short, they’re fun. Use them!


For more help on hyperlinks and interactivityThe fact is, you now know almost all there is to know abouthyperlinking and hotspots! When you’re building your Web site,however, you may wish to use Tools/Hyperlink Manager... to get aoverview of all the links in your publication. You can see thedestinations at a glance, check URLs, and display any hyperlink forcloser inspection. For additional details, see online help.


Then...

Creating hyperlinks Index Select “hyperlinks, adding toWeb page”

Setting hyperlink color Index Select “hyperlinks, settingcolor of”

Creating and editinghotspots

Index Select “hotspots”

Adding rollovers Index Select “rollover buttons”

Hyperlink Manager Index Select “hyperlinks, using theHyperlink Manager”

Adding Java Index Select “Java applets”

Adding HTML Index Select “HTML, adding code toWeb pages”

?

Previewing, Publishing,and Maintaining the Site


It’s time to rehearse the final phase of preparing your Web site! In thispreviewing and publishing phase, as we’ve mentioned, WebPlus takesthe publication’s pages and converts them to HTML and graphics(images) so that a Web browser can display them. You can publisheither to a local folder or to an Internet-based Web host. Previewing issimilar to publishing locally, except that the exported files aretemporary, intended for immediate viewing in your own Web browser.

Optimizing the publicationBefore you preview or publish, it’s wise totake advantage of built-in WebPlus toolsfor checking your publication’s contentand structure. You can run the SpellingChecker Wizard, Proof Reader Wizard,and Thesaurus to inspect and improveyour text. The Text Manager displays alist of all the text stories and free text usedin your publication, and the LayoutChecker Wizard can locate (and oftencorrect) problems like objects off the page,empty frames, or overlapping objects.You’ll find full details on these features inonline help (see the note at the end of the chapter).

Previewing the sitePreviewing the site at least once before actually publishing it isessential. Only by viewing the pages in a Web browser can you makesure that headlines and body text appear the way you intended, pageelements fit properly, animations play at the right speed, and linksbetween pages make sense.

Although your Wizard-based publication probably still has a lot of itsoriginal placeholder text and graphics, let’s try previewing it. (We’llassume you have a Web browser installed.)

� Click the Preview Site in Browser button on the top toolbar.

� In the dialog, check “All” as the page range, and click OK.

72 Previewing, Publishing, and Maintaining the Site

The WebPlus publication is exported to a temporary folder, and yourWeb browser launches, displaying the site’s Home page. (If yoursystem tries to connect to the Internet as the browser launches, you candismiss the connection dialog. No Web connection is required forpreviewing.)

If you saved the animated GIF on the Home page, you’ll see it comealive now!

� As you move the mouse pointer over hyperlinks or hotspots, you’llsee the cursor change to the familiar “hand.” Click the hotspot youplaced over the butterfly in the photo (notice that its border line isnow invisible), and you’ll jump to page 2.

Previewing gives you a chance to see the site the way your visitors willexperience it. Keep track of how fast your pages display in the browser,and remember that the Web will certainly slow them down! Check outeach page and take notes on any problems, then go back to WebPlusand make any necessary corrections.

You can preview just one page (or a range of pages) instead of all thepages, by changing the setting in the Preview dialog. All previoustemporary files are deleted each time you preview. This means, forexample, that if you’ve already previewed the whole site, and thenchoose to preview just one page (say, to check revisions), thepreviously exported pages will no longer be available. If this isinconvenient, you may wish to use the Publish to Folder method,described next.


Publishing to a local folderThis option, like previewing, exports your publication pages to HTMLand graphics files. The key differences are:

♦ You designate where the files should go, instead of having themwritten out to temporary files, which are not really under yourcontrol. As noted above, each time you run Preview Web Site,even if you’re only previewing one page, your previous set oftemporary files disappears. Using the Graphics tab of File/Web Site Properties..., you can specify whether images are assignednew file names or overwrite the old ones when published into thesame folder (HTML file names are overwritten). Your site as awhole remains intact.

♦ Your Web browser doesn’t launch automatically. Instead, you’regiven the option of launching it. If it’s already open, simplydecline the option, then switch to your browser’s window and useits Reload or Refresh command to display the updated page.

Publishing to a local folder is another way of previewing your Website, and is also the way to share your site with others on a local areanetwork. You don’t need to try it right now, but here are the stepsinvolved in publishing to a local folder:

� Click the Publish to Folder button on the top toolbar. In thedialog, locate the folder where you wish to store the output files, orclick New Folder... to create a new folder.

� As for previewing, you can publish just one page or a range ofpages.

� Accept or decline the option to launch your Web browser.


Publishing to the World Wide WebWebPlus makes publishing to the World Wide Web almost as simple aspublishing to a local folder! Before publishing for the first time, you’llneed to gather some basic information from the service provider (asdetailed in online help—see the note at the end of the chapter).

When you’re ready to publish your Web site, here are the steps to take:

� Click the Publish to Web button on the top toolbar to displaythe Web Publishing Options dialog.

� Specify the number of pages to publish and click OK. WebPlusexports the page(s) to temporary files, and then the AccountDetails dialog appears.

� Choose an FTP Account you previouslydefined, or to define a new account,enter the FTP Address of your Web hostand your pre-assigned Username andPassword. Be sure to enter thepassword exactly as given to you, usingcorrect upper- and lower-case spelling,or the host server may not recognize it.For most Web servers you can leave the Folder box blank;otherwise enter the name of the publishing folder. Click OK.

� WebPlus seeks an Internet connection or establishes a new one,and connects to the remote server. Sometimes (for example withonline services such as AOL) you’ll need to use the service’sproprietary log-on software to establish a connection. You’ll see amessage when all files have been successfully copied.

� Now you’ll be able to see your page(s) “live” on the Web. Pointyour Web browser to the URL that includes the path to the hostserver plus the folder to which you published.

� Congratulate yourself!


Maintaining your siteOnce you’ve published your site to the World Wide Web (see theprevious topic), you’ll need to maintain the pages on your site byupdating content periodically: adding or changing text, images, andlinks, then republishing one or more pages. Making the content changesis easy enough, as all the originals are right there in your publication!

When you republish pages into the same folder, duplicate .HTML filenames are always overwritten. The Graphics tab of File/Web Site Properties... lets you set whether or not to overwrite existing images(i.e. use the same file names). Nevertheless, over time you may findthat unused files have proliferated, and you’ll need to do somehousekeeping.

Within local folders, one method is to sort your Explorer or MyComputer window contents by date, then use the “Modified” attributeto determine which files to keep (i.e., the set most recently published).For thorough cleanup, periodically publish the whole site to a newfolder and delete the old one.

To perform “housekeeping” tasks like file/folder deletion and renamingon your published Web site, you can use the WebPlus SiteMaintenance feature. Choose Publish Site from the File menu andselect Maintain Web Site... from the submenu. The Specify AccountDetails dialog appears. Select the FTP account or enter the details (aswhen publishing the site), and click OK. Once the connection is made,the Maintain Web Site window appears.


In the window, you can use standard Windows Explorer conventions toperform maintenance tasks. Click on the column headers to change thecurrent sort, or drag to change the column width. The top row ofbuttons lets you view up one level, create a new folder, delete aselected item, or choose the view setting. To rename a file or folder,click its name twice and then type, or right-click it and chooseRename. You can Ctrl-click to select multiple files or Shift-click toselect a range of files. Click the top-row Delete button or right-click anitem and choose Delete. To move one or more selected files, drag theminto the destination folder.

When you’re done, click the window’s Close button to terminate theFTP connection and return to WebPlus.

Design TipsThe question of how frequently to update gets to the heart of “sitemaintenance.” Having spent days or weeks designing and thenpublishing an attractive site with intuitive navigation and palatablecontent, you’ve only just begun. The cycle is completed when visitorsstart arriving, and their feedback is critical. Be direct about asking forcomments, and make sure you’ve included an e-mail return link.Challenge your users to respond! Give them some specific choices tomake (“Would you rather see A, B, or C on this page?”). Let them feelthey’re contributing. For you, there will be an enormous differencebetween operating in a void and receiving even one or two responses.

Think of your site as a newsletter with publication deadlines. As a ruleof thumb, don’t let more than two weeks go by without making visiblechanges. The changes don’t have to be dramatic; the main thing is toreinforce the perception that your site is dynamic, not static. The Homepage should change most often: add new links, or replace old graphicswith new ones. Add a new page or two, expanding the original sections.(Be sure to post notice of the NEW! features on the Home page.)Revise the design of any pages that aren’t working the way youexpected.

As a rule, keep the background and section organization intact so as notto confuse repeat visitors. Sections that began as a single page willrequire a section menu as soon as a few new pages have been added. Ifyou’ve got a navigation bar with a button already linked to the originalpage, turn that target page into the menu page to keep the link intact.It’s usually easier to migrate content to a new page than to rewireexisting links. (You can see the content, but you can’t easily see thelinks.)


Finally, feel free to break the above rules and overhaul your site if itbecomes clear your users are getting lost or frustrated, or if you’vediscovered a better way to organize your content. In this fledglingmedium, it’s not at all uncommon for sites to undergo metamorphosis.On the World Wide Web, change is a constant—and now, you’re partof it.

For more help on publishing-related

tasks...Before publishing your actual Web site, you’ll probably want to reviewthe WebPlus proofing options mentioned above, and learn about addingsearch engine descriptors. Or you may want details on publishing to analternate Web server.


Then...

PrintingPreviewingPublishingMaintaining

Contents list See topics in section “How toPrint, Preview, and Publish tothe Web”

Using proofing tools Index Select from “proofing tools”

Adding search enginedescriptors

Index Select “search engines”

Gathering WWWserver information

Index Select “publishing Web sites,to World Wide Web” andconsult note on “Gatheringserver information”

?

Web Designfrom Scratch


We’ll assume that by now, you’ve worked through the Wizard-basedexamples in the preceding chapters and have a preliminary knowledgeof WebPlus tools and techniques—although probably not too muchhands-on experience. You’ve seen that there are lots of ways tocustomize the Wizard-based publications, and that approach may suityour needs perfectly.

But don’t forget that besides offering a variety of Web Wizards,WebPlus gives you the option of starting from scratch and composingeach page just as you want it. You may decide to take a hybridapproach: study the Wizard layouts, learn from them, and then applywhat you’ve learned to a brand-new site of your own design.

If you’d like to start from scratch, here are the steps:

� From the Startup Wizard, select the Start from Scratch option.(From within the program, choose New... from the File menu or

click the New button on the top toolbar to access the StartupWizard.) The new publication will open with a blank page.

� Choose Page Setup... from the File menu to change the page size.You can select either Standard or Wide, or define a custom size byentering new values for Width and/or Height.

Obviously, there’s no single formula for coming up with a successfulWeb site. It may help to have a plan of attack, however, so thefollowing sections provide a brief outline of the process, along withsome suggestions to guide your efforts.

Pre-planningThe advice in this chapter comes from some of the gurus who have setup Web sites to disseminate their particular design credos, as well asfrom first-hand experience developing user-friendly onlineenvironments. Almost all agree that good design begins not with thedesigner but with the user. Know the user; put yourself in their place.Learn from your own experience as a consumer of online information.

When you’re starting out, it’s worthwhile trying to conceptualize yoursite as if it were a more traditional form. Is it a “billboard in the sky”?Is it basically a greeting card, a photo album? An Open Letter oreditorial? An electronic business card? People’s past experience withprint and pictures shapes their expectations for new forms, and afamiliar concept or metaphor can help to draw users into your web, as itwere.

82 Web Design from Scratch

Don’t set out to overwhelm or overdesign. The simplest site may workbest. What will succeed is the result of understanding who’s in youraudience, and what they bring to what you have to offer.

Who’s it for?Family, friends, neighbors, colleagues, co-workers, kids, adults, clients,prospective clients, prospective employers, fellow worm-farmingenthusiasts—or “the world at large”? Chances are you already know atleast a few of the folks you’d like to reach. Perhaps you’re alreadypublishing print pieces that connect you to that audience. Part of theexcitement in creating a Web site is knowing you’ll likely be reaching agreat many folks you couldn’t reach before.

Use yourself, and your own experience on the Web, as a starting point.But be prepared to be surprised that many users don’t share yourassumptions. Ideally, a Web site should constitute a dialog betweencreator and audience, more like a (very slow) theater event than a TVbroadcast. If the dialog begins while the site is in its formative stage, somuch the better. Do a bit of research among people (even just oneperson) representative of those you’ll be trying to reach. Poll yourclients or newsletter subscribers.

♦ Ask them what they like and dislike about Web sites.

♦ What’s their level of expertise?

♦ What kind of hardware, software, and Internet connection are theyusing?

♦ Use the Web itself to tap into surveys on Internet usage.

♦ What characteristics make your audience unique—different fromthe so-called average user?

Each point you can clarify will serve as a reality check on your initialconcepts. And as time goes on (see the Design Tips in the previouschapter), user feedback will help you develop your site in a way thatkeeps the visitors coming back for more.

What have you got?That is, not just what do you want to say, but why should anyonelisten? What have you got that users actually want? What are youstarting out with as content, and what kinds of transformations will itneed to go through to succeed on the Web? These are complexquestions, but essential to address at the start of this kind of project.The answers will help you tailor your content to your intended audiencein this new medium.


Don’t assume that your existing content is going to satisfy Web visitorsbefore it’s been enhanced in various ways. Quite often, traditionalcontent needs to be “massaged” in order to translate successfully to thecomputer screen. It’s a lot like adding motivational bells and whistlesto an instructional program for reluctant learners. In the early days ofthe Internet, text and hypertext links were sufficient to keep scientist-users entertained and enlightened. While one can certainly still designelegant screens to display text-only material, one can’t turn back theclock. Today, users expect to see pictures (or at least graphic elements),colors, buttons, and other interface attributes. They certainly don’t wantto become bored or get lost. Your goal should be to minimize anynegative first reactions to your site, while maximizing the rewards foreach user.

Site StructureIt probably goes without saying (but we’ll say it anyway) that beforestarting a site from scratch, you should have mapped out on paperexactly how many pages you’ll need, what the basic composition willlook like, and how the pages will be linked together.

Unlike a magazine or newsletter, a Web site doesn’t depend on a linearpage sequence. It makes more sense to think of your site in spatialterms, like a house that people will explore. You can generally assumethat visitors will come in through the front door (the Home page)—butwhere they go after that depends on the links you’ve provided. Theseare the corridors that connect the various rooms (sections) of the site.Each room might have a few side doors, but don’t let the visitors getlost! Graphic aids like a navigation bar, or clear labeling and/or color-coding for the various sections of the site, can help immeasurably, butonly if you include them in your design scheme.

As you draw up the blueprints for your site-to-be, here’s one usefulapproach to mapping the content you plan to put on the site to thephysical pages that will contain and display it. It’s called thesection/level model.

♦ A section is a category, like “Company News,” “Products,”“People,” or “Links.” The various sections are typically listed onthe site’s Home page. Each page on the site belongs to a particularsection. And unless there’s only one page in a given section, thesection has its own menu page.


♦ The level is the number of steps (i.e. jumps) a given page isremoved from the Home page. Considering the Home page asLevel 1, then, section menu pages are Level 2. Pages one step“below” the section menu are Level 3.

This is basically a “hierarchical” or “tree” model, based on the conceptof one Home page as a root or point of entry, with other pagesbranching away from it. (Of course, nothing prevents you from alsoinstalling sideways links, as opposed to just up-down links betweenlevels.)

Not only is the section/level model well-suited to most kinds of contentlikely to end up on the Web, but it particularly lends itself to graphicalreinforcement (see “Navigation”). So there’s an excellent chance thatyou, as the site designer, will be able to organize your content andprovide appropriate visual cues to prevent users from getting lost.Remember, each screen should provide cues as to which section theuser is “in.”

The menu and submenu pages—the Home page and the various sectionmenu pages—are the key nodes in this structure. As a rule of thumb,keep the number of menu items per page between four and eight. Whenin doubt, increase the number of menu choices before you create a newsubmenu page (i.e. a new level). Studies have shown that users prefer afew dense screens of choices over many layers of simplified menus.

No matter how simple your initial site concept, it needs to be clear toyou before you can make it clear to your users. Sketch out a diagram ofhow you envision the various sections and levels. If you use one of thePage Wizards, you’ll begin with one Home Page linking to half a dozenLevel 2 (section) pages; make sure these sections are named accordingto the content you’ll be offering.


Over time, you’ll be adding content. The section pages will probablyevolve into menu pages, with content migrating to newly-added Level 3pages. You’ll be prepared for this growth if you’ve started out with aclear model of your site’s structure.

NavigationWeb sites present unique challenges that don’t arise in the world ofprint. (When was the last time you even thought of “navigating”through a book?) The section/level model we’ve been using provides asuitable framework—assuming it works with your content—becausethe basic form of a “tree” is about as intuitive as any path system islikely to get. But with users coming in through side doors, or traversinghyperlinks that leapfrog from one part of the site to another, it’s up toyou to ensure the tree doesn’t turn into a maze.

Unless your site is extremely simple, don’t expect sequential pagenumbering to serve a visitor’s needs. In fact, the only person whoshould have to contend with page numbers is you—because WebPlusrequires you to supply a page number each time you define a page-to-page hyperlink. That means you’ll need to maintain a separate listing ofyour site’s page numbers (corresponding to pages in the originalpublication).

Rather than page numbers, what’s needed are visual cues on each pagethat convey: Which section am I in now? and Where am I in relation tothe section menu?

Text can help. It’s common sense to use page titles or headlines thatidentify what’s on the page. By using somewhat larger headline text forLevel 2 (section menu) page titles, smaller subheads for Level 3, and soon, you can reinforce the user’s sense of how far removed they arefrom the Home page.

For communicating section identity, you can use a variety oftechniques, preferably in combination. Sections can use color-coding,applied to headlines and/or graphic elements. You can incorporate thesection name into the composition by placing it as free text on the page,aligned with background elements.


But the most effective approach, and one that deserves as muchattention as the design of your Home page, involves designing anavigation bar or “navbar” that will serve as:

♦ An element of the site’s page composition;

♦ A visual reminder of where the user is;

♦ A functional tool to enable jumps between sections of the site.

Wherever it’s placed—across the top, down the left or right side, orelsewhere—the navbar needs to be considered a fixture of the pagelayout. It must never disappear or wander off to another corner. Atypical navbar provides buttons linked to the Home page and thevarious section menu pages:

The navbar’s appearance can vary in a meaningful way. For example,on pages within a particular section, that section’s button could appearhighlighted (using a different color, font style, etc.). As the user enterseach new section, the otherwise fixed navbar will appear to changestate, signaling the transition.

It’s not difficult to create navigation bars using only text, and in factpages created with the WebPlus Wizards use these to good effect. But awell-designed graphical navbar will reward your efforts and set yoursite a notch above the others. For further advice, see the Design Tips inthe chapter on hyperlinking.

If you’re not using a navigation bar, at least make sure that each pagehas a minimum of one or two hyperlinks, leading to the Home pageand/or related pages. Dead ends force users to rely on their browser’s“Back” button to retrace steps, and that can all too quickly lead themaway from your site.

The advantage of using a navigation bar is that links to key nodes inyour site structure are built in, and you don’t have to worry so muchabout users getting lost. You can devote more of your time to addinghypertext links (see below) that enhance both your content and theuser’s experience.


Page LayoutAs long as people are still reading Web pages, as opposed to watchingthem or listening to them, everything you’ve been taught about editorialstyle and text organization has relevance—so don’t throw away that oldstyle manual! Readers respond to good design and clear, concisewriting. They’ll respect the fact that you understand the proper way totell a story or convey an idea: the relation of headlines to body text, theuse of subheads, and so on.

Still, compared to a print publication, the computer screen is a like arectangular hole through which users must peer at information. Willusers be inclined to scroll down and retrieve what has disappeared offthe bottom? Reading skills like scanning headlines or skimming storiesbecome less relevant when content is segmented into separatescreenfuls. And even the most computer-literate first-time visitor toyour Home page will have no idea how many pages there are or howthe pages are organized.

Browser Window

(“safe area”)

Page

The Web page viewer initially sees only what’s displayed in thebrowser window (the safe area, after the television concept of a “safetitle” area), leaving unseen an indeterminate portion of the page belowthat. At 800x600 resolution, the safe area may be around 400 verticalpixels of actual page height. Content in this region may be all thevisitor sees for several seconds as various graphics load onto the page.In fact, studies show that many Web users are not in the habit ofscrolling pages before deciding to move on, so that leaves a fairlynarrow strip and a short interval in which to grab their attention!

♦ Content. The safe area should convey essential information aboutthe site and entice the visitor to scroll for more.

♦ Composition. Think of the safe area as a mini-page, and makesure that the elements within it work as a group.


In general, Web page headers and footers need to contain moreinformation than those in a conventional publication. The Web sitetitle, which appears immediately in the browser’s title bar as the firstpage loads, should convey your site’s identity accurately, and even witha touch of wit. The top matter should include a logo or otheridentifying motif, as well as a page title (so users know they’ve come tothe right place). Visual cues as to section and level can also be part ofthe top matter.

The bottom of the page is a good place to include elements that help thepage stand on its own as a self-contained unit. For example, it’s goodpractice to include a date stamp so users know how current thecontents are (use Insert/Information/Date or Time... and uncheckUpdate Automatically). If you don’t have a separate “Reply” or“Feedback” page, consider placing a return hyperlink with your owne-mail address at the bottom of each page. It’s not a bad idea to spellout the page’s URL as well. That way, if a visitor saves a page as a textfile, or prints it out, they’ll have a record of where the page originated.A copyright notice isn’t out of the question, either.

The above advice on top and bottom matter applies equally to yourHome page, section menu pages, or any other pages. It will help youbuild in a page-to-page consistency that respects the way people viewWeb sites.

In general, consistency is good: if you choose a graphic theme, by allmeans use it throughout your site. But too much of this good thing canlead to blandness, and you should also work on differentiating thevarious levels of your site from each other. In other words, the Homepage should appear unique, and section menu pages should resembleeach other, while looking distinct from pages at other levels. Besidesadding interest, these variations also serve as navigational cues.

In using WebPlus to design the publication, take advantage of themaster page/page distinction. Think of the background as a sheet ofpreprinted stationery with its own elements. For example, you candesign a colorful background header—perhaps incorporating a mainlogo—on the master page, which will then repeat on each Web page.Individual pages can add “local” information such as a section name orpage title, which will be visually merged with the background when thepage is published. (See the tips in the “Graphics” chapter on combiningforeground and background elements.)


WebPlus includes two default Web page sizes: Standard for VGAmonitors, Wide for SVGA. The latter (800x600) option is fine for mostusers. The bottom of the WebPlus page is fixed, too, but a Webbrowser will only display as far as the bottom object on each page. Ifthere’s a chance you’ll be including pages with a lot of text, requiringusers to scroll down, you can increase the height value for the page togive yourself some extra room. You don’t have to fill all the space, andit’s easier to change the value at the outset than after you’ve developedthe site.

One of the simplest things you can do to improve your site’sappearance is to set rather wide left and right margins. Extra space onboth left and right helps to set off your content from the edge of thebrowser window, and gives an uncluttered appearance just as it wouldon a printed page. It’s also easier to view: studies show that at normalreading distances, the eye’s span of view is only about 8 cm (3 inches)wide; longer lines of text require extra effort. So spend some timeexperimenting with different placements of the main frame on yourvery first page, previewing in your browser until you find your ownpreferences. Then duplicate the first page to create the other pages, sothe layout will be consistent on the other pages in the site.

Your Home pageOn the Home page, you can break a few rules. For example, althoughyou’re generally trying to reduce the time it takes each page to load, it’sOK to include larger or more numerous graphics on the Home page.Most visitors’ attention span will stretch a bit in anticipation of seeingwhat your site has to offer, and they’ll make allowances. In addition,they’ll only have to wait the first time they visit the page, as thegraphics will be cached and instantly available next time.

On the other hand, all the guidelines mentioned above work to youradvantage. The Home page, and particularly its safe area, are your onlychance to make a first impression (unless someone enters through oneof the “side doors” we alluded to). Decide what kind of impression youwant to make—“cool,” “hot,” “intriguing,” “professional,” or all of theabove—and go for it.

Make the safe area interesting enough to hold the visitor’s attentionwhile the rest of the page loads. Text loads first, then graphics. Acomposition of free text blocks will load quickly and, with the rightchoice of text and background colors, can be stunningly effective. Apithy quotation or unusual symbol will serve to engage the mind’s eyeand arrest the web-surfer’s impulse to “click and get on with it.”


The Home page can be a cross between a greeting card, a magazinecover, an advertisement, and a main menu for the rest of your site.There’s no question that well-rendered graphics add interest, but don’tfeel obligated to illustrate every single section link with its own GIF.Remember that some users still turn off graphic loading when browsingWeb sites, in order to speed up access to textual info and skipadvertising. These users will never see your images; make sure yourtext hooks them.

For these as well as other visitors, make sure you provide alternatetext captions for each graphic, using the Web Picture Manager dialog(on the Tools menu). You can select individual graphics and then runthe Wizard to set individual captions. The captions will hold attentionas the graphics load, and convey the essence of the image for the text-only user. Blind users with special software can hear the alternate text(via synthesized speech), and so will not completely miss the pictorialcontent.

Large graphics have their place, particularly if they double ashypergraphics (see below), but you certainly don’t want more than acouple of 50K graphics per page. And anything that’s going to take aminute or two to load had better be worth it!

A Design ChecklistBefore starting out, you should ask yourself these basic questions:

� How many pages will you need?

� What basic composition will you use?

� Where will the navigation bar go, and what will it look like? Doyou want to use a text-based navigation “header” or “footer”?

� What font will you use for headlines, body text, and captions?

� Which color scheme will you use, and will you customize its basiccolors or Web colors? (In Web Wizards, body text is marked withScheme Color 1, but you can depart from that convention.)

The success of your site probably depends more on high-qualitycontent than on any other single factor. As a rule, people will bevisiting your Web site because they’re interested in what you can tellthem or offer them. Your job is to make that reward as accessible aspossible, and make the site’s design quality integral to the experience.You don’t want any elements that throw up barriers to access, or standout like sore thumbs to detract from the visitors’ positive response.


Make sure you’ve reviewed the mechanics of working with text,graphics, sound and video (if applicable), and hyperlinks beforefocusing on these questions:

� Given your basic page composition, how will you vary the layoutof each page?

� Where will your graphics come from? Will you be using anyphotographs? Do you need to create line or QuickShape graphicsin WebPlus?

� In addition to hyperlinks for your navigation bar and/or footer,where else could you place links for users’ convenience? (Gothrough your content once it’s on pages and place links to relatedcontent.)

� How might you use animated GIFs and marquees to add interest(especially on the Home page)?

Before publishing your site to the Web—in effect, throwing open thefront door and inviting the world—you’ll want to brush the cobwebsfrom every corner. Review the advice in the previous chapter, andconsider these points:

� Have you used the WebPlus proofing tools to enhance the qualityof your text?

� Have you run the Layout Checker to inspect for possibleproblems?

� Have you specified a Web site title and added search enginedescriptors (in File/Web Site Properties...)?

� Have you previewed your site in a Web browser—preferably inseveral different browsers?

� Have you reduced graphic file sizes to a minimum to improve loadtime?


Suggested Resources

Print� Nielsen, J., and Tahir, M. 2001. Homepage usability: 50 Websites

deconstructed. Indianapolis, IN: New Riders Publishing. Criticalanalysis of popular Web home pages, with well-researched designinsights.

� Siegel, D. 2002. Creating killer web sites. 3rd ed. Indianapolis, IN:New Riders Publishing. Proven resource; past editions graphicallyover the top, but technically rich.

� Strunk, W., and White, E.B. 1999. The elements of style. 4th ed.Boston: Allyn & Bacon. Classic writer’s handbook.

� Rosenfeld, L., and Morville, P. Information architecture for theWorld Wide Web. 1998. Cambridge, MA: O’Reilly & Associates.Highly regarded overview of information design concepts.

� Tufte, E.R. 1990. Envisioning information. Cheshire, CT: GraphicsPress. Superb textbook on visual literacy.

� University of Chicago Press. 1993. The Chicago manual of style.14th ed. Chicago: University of Chicago Press. Definitivereference source.

� Weinman, L. 1996. Designing Web graphics.3. 3rd ed.Indianapolis, IN: New Riders Publishing. Excellent introduction toWeb graphic issues.

� Zinsser, W. K. 2001. On writing well. 25th anniversary ed. NewYork: Harper Resource. Tips for nonfiction writers.

Links� www.desktopPublishing.com/open.htm Thousands of pages,

including sections on Design, Graphic Sites, Web Designer’sParadise. Extensive links to DTP resources.

� www.efuse.com/Start/ Attractively presented sequence ofinformational pages on planning, design, building, publishing.

� www.ippa.org/main.html Internet Professional Publisher’sAssociation site, “saluting the finest examples of design forcommercial applications through the Internet.” Elegant example ofsite design, with interesting Essays section.


� www.serif.com Forums, updates, and tips for users of all Serifproducts. Online Glossary lets you browse the full version of ourDesktop Publishing QuickReference (see Chapter 6).

� www.sun.com/980713/webwriting/ Writing for the Web. Authoredby Jakob Nielsen et al. (see Print resources), classic research-basedguidelines to improve usability.

� www.wdvl.com Web Developer’s Virtual Library (WDVL).Supersite contains dozens of sections for both novices and experts,including /graphics/, /multimedia/, and /authoring/design/.

� webdesign.about.com Collection of links and features, includingGetting Started, Animation, Site of the Week.

� www.webpagesthatsuck.com Vincent Flanders’ guided tourthrough examples of, ah, poor design. The site became one book,then a second, and (unfortunately) never runs out of material.

� www.webreference.com Comprehensive developer’s site, includesDeveloper’s Corner with how-to articles, sections on Graphics andDesign. Part of internet.com’s WebDev network.

� www.webreference.com/dlab Archive of Dmitry Kirsanov’s“Design Lab” columns—advice you can use. See Dmitry’s currentsite at www.kirsanov.com.

� www.webreference.com/graphics Another WebReference feature,with a slew of tutorials and contributions from Wendy Peck andDan Giordan.

� www.webstyleguide.com Yale CAIM Style Guide, 2nd ed., byPatrick Lynch and Sarah Horton of Yale’s Center for AdvancedInstructional Media. Illustrated, annotated dissertation on all facetsof Web interface design. Also available in book form. First editionstill online at info.med.yale.edu/caim/manual/index.html.

Where should I go from here?The answer should be self-evident: Get straight back to work withWebPlus! Your own experience will be your best teacher. We’re proudof WebPlus, and hope you enjoy using it to develop a Web site you canbe proud of, too.

Thanks for joining the Serif product family... and here’s hoping we seeyou online soon!

Index

Aalternate text, 90animations, 47anti-aliasing, 50artistic text, 29, 33, 64Attributes tab, 34, 44

BBackground color, 36browse sequence, 63, 66browsers, 13

CChangeBar, 65Clipboard, 51color, 45color palettes, 52color schemes, 19, 35Convert to Picture, 42copyright notice, 89Crop tool, 46Curve toolbar, 44Curved Line tool, 43

Ddesign

checklist, 91page layout, 87pre-planning, 81site structure and navigation, 83tips, 36, 49, 63, 76

dithering, 52dot grid, 46

Eediting text, 31

Ffill property, 45Followed Hyperlink color, 35Frame tool, 31frames, 29Freehand Line tool, 43FTP, 74

GGIF, 49, 51, 54, 67gradient fill, 33grouping objects, 45guides, 46

HHelp on Help, 18HintLine, 21Home page, 13, 90hotspots, 48, 61, 67HTML, inserting code, 62hypergraphics, 60, 64, 67Hyperlink color, 35Hyperlink Manager, 68hyperlinks, 48, 59, 63, 67hypertext, 63

Iimages

alternate text, 90anti-aliasing, 50color palettes, 52Convert to Picture, 42dithering, 52GIF format, 49, 51, 54, 67hotspots, 61hypergraphics, 60, 67importing, 51JPEG format, 51rollover graphics, 61, 64Web Picture Manager, 50, 90Web-safe palette, 52

importingimages, 51text, 33

installation, 9

JJava, inserting applets, 62JPEG, 51

LLayout Checker Wizard, 71layout grid, 46line (outline) property, 33, 44lines, drawing, 43Link button (text frames), 30links. See hyperlinks

Mmaintaining Web sites, 75marquees, animated, 47master pages, 30, 60, 89Multipage view, 23

Nnavigation

browse sequence, 63, 66site structure, 83

navigation bar, 60, 64, 86Normal view, 23

Ooutline (line) property, 33, 44

Ppages

height, 89Home page, 13, 90layout and design, 87master page, 30, 60, 89safe area, 88size, 89

Pages tab, 23pictures. See images

Pointer tool, 29, 41, 44, 60, 61pre-planning, 81Preview Site in Browser command, 71Proof Reader Wizard, 71Publish Site to Disk Folder command,

53, 73Publish Site to Web command, 74publishing Web sites, 14, 73, 74

QQuickShapes, 44, 64

RRegistration Wizard, 8resources, 93Revert command, 24rollover graphics, 61, 64Rotate tool, 46ruler guides, 46

Ssafe area, 88Scheme Manager, 36section/level model, 84shapes, drawing, 43sites

Home Page, 13, 90maintaining, 75pre-planning, 81publishing, 14, 73, 74structural design, 83title, 88

snapping, 46sound clips, 48, 55Spelling Checker Wizard, 71starting WebPlus, 17Startup Wizard, 17, 81Straight Line tool, 43Studio

Attributes tab, 34, 44customizing tabs, 23overview, 21Pages tab, 23Wizard tab, 32

suggested resources, 93system requirements, 8

Ttables, 29, 34text

artistic text, 29, 33, 64editing, 31importing, 33Insert Date or Time, 88tables, 29, 34text frames, 29

Text Manager, 71Thesaurus, 71title (of site), 88toolbars

customizing, 23tools

Artistic Text, 33Crop, 46Curved Line, 43Frame, 31Freehand Line, 43Pointer, 29, 41, 44, 60, 61QuickShape, 44

Rotate, 46Straight Line, 43Table, 34Transparency, 45

transparency, 45

Vvideo clips, 48, 55view options, 23

WWeb color settings, 35Web Picture Manager, 50, 90Web Wizards, 13, 18

customizing, 42Web-safe palette, 52Wizard tab, 32Word Count, 32World Wide Web, 13WritePlus, 31

webplus 8 - serif

Documents