WebPlus 9 Companion

©2004 Serif (Europe) Ltd. All rights reserved. No part of this site may be reproduced in any form without the express written permission of Serif (Europe) Ltd. All Serif product names are trademarks of Serif (Europe) Ltd. Microsoft, Windows and the Windows logo are registered trademarks of Microsoft Corporation. All other trademarks acknowledged. Serif WebPlus 9.0 © 2004 Serif (Europe) Ltd. Companies and names used in samples are fictitious. Clipart samples from Serif ArtPacks © Serif (Europe) Ltd. & Paul Harris Portions images ©1997-2002 Nova Development Corporation; ©1995 Expressions Computer Software; ©1996-98 CreatiCom, Inc.; ©1996 Cliptoart; ©1996-99 Hemera; ©1997 Multimedia Agency Corporation; ©1997-98 Seattle Support Group. Rights of all parties reserved. Digital image content© 1997-2003 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 rights reserved. THE PROXIMITY/COLLINS DATABASE® © 1990 William Collins Sons & Co. Ltd.; © 1990 Proximity Technology Inc. All rights reserved. THE PROXIMITY/MERRIAM-WEBSTER DATABASE® © 1990 Merriam-Webster Inc.; © 1990 Proximity 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 Agreement

This Software License Agreement (“License Agreement”) is a legal agreement between you (either an individual or a single entity) and Serif (Europe) Ltd. (“Serif”) for the accompanying software product, which includes computer software and may include associated media, printed materials, and “online” or electronic documentation (the “Software Product”). By installing, copying, or otherwise using the Software Product, you agree to be bound by the terms of this License Agreement. If you do not agree to the terms and conditions of this License Agreement, do not install or use the Software Product; 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 TO YOUR RIGHTS WITH RESPECT TO THE SOFTWARE PRODUCT. THE SOFTWARE PRODUCT IS PROTECTED BY COPYRIGHT LAWS AND INTERNATIONAL COPYRIGHT TREATIES, AS WELL AS OTHER INTELLECTUAL PROPERTY LAWS AND TREATIES. THE SOFTWARE PRODUCT IS LICENSED, NOT SOLD.

1. GRANT OF LICENSE Product in any manner that infringes the intellectual property or Serif hereby grants to Licensee a personal, non-exclusive, non- other rights of another party; or use the Software Product to transferable license (a "License") to use one (1) copy of the provide on-line or other database services to any other person. Software Product, including any updates thereto, and 5. RETENTION OF RIGHTS; TERMINATION accompanying documentation, if any, provided by Serif, This License Agreement does not constitute a sale. All title, according to the terms set forth below. If the Software Product trade secrets, copyrights, patents and other intellectual rights to is being provided to Licensee as an update or upgrade to the Software Product, its accompanying documentation and any software which Licensee has previously licensed (such software copy made by Licensee remain with Serif, and Licensee hereby referred to as the "Prior Software"), then Licensee agrees to agrees to preserve and acknowledges the foregoing. Licensee destroy all copies of the Prior Software within thirty (30) days further agrees and acknowledges that the Software Product and after opening this package except for one backup copy of the all copies thereof are Serif’s exclusive property and constitute a Prior Software. valuable trade secret of Serif. Licensee further agrees and acknowledges that unauthorized copying of the Software 2. SCOPE OF USE Product or the accompanying documentation, or failure to comply with any of the provisions hereof (each, a "Terminable You may install and use one copy of the Software Product, on a Event"), will result in automatic termination of this License. In single computer. The primary user of the computer on which the the event of a violation of this License by Licensee, Serif Software Product is installed may make a second copy for his or reserves and shall have available all legal remedies. her exclusive use on a portable computer. Licensee may also store or install a copy of the Software Product on a storage device, such as a network server, used only to install or run the 6. TERM OF LICENSE FOR TRIAL VERSION Software Product on other computers over an internal network; SOFTWARE however, you must acquire and dedicate a license for each The License pertaining to a trial version of the Software Product separate computer on which the Software Product is installed or (a "Trial Version") shall expire in accordance with the terms as run from the storage device. A license for the Software Product set forth in the installation process for the Trial Version along may not be shared or used concurrently on different computers. with the designated trial period as set forth in the trial program.

3. LICENSE PAK 7. LIMITED WARRANTY AND DISCLAIMER If you have acquired this LICENSE AGREEMENT in a Serif Serif warrants that, for a period of ninety (90) days after License Pak, you may make the number of additional copies of delivery, the diskettes or CD-ROMs on which the software the computer software portion of the Software Product as included in the Software Product is furnished will, under normal authorized in the Serif License Pak, and you may use each copy use, be free from defects that prevent Licensee from loading the in the manner specified above. You are also entitled to make a Software Product on a computer. Serif’s entire liability and corresponding number of secondary copies for portable Licensee’s exclusive remedy under this warranty will be, at computer use as specified above. Serif’s option, to (a) use reasonable commercial efforts to attempt to correct or work around errors, or (b) to replace the 4. PROHIBITIONS Software Product with functionally equivalent Software Product, on diskettes or CD-ROM, as applicable or (c) return You may not: modify, prepare derivative works from, translate, the price paid for the Software Product, in each case upon return reverse engineer, decompile, disassemble or otherwise derive of the Software Product to Serif together with a copy of your source code from the Software Product (except to the extent that receipt for the purchase thereof. This Limited Warranty is void such acts are expressly permitted by applicable law if failure of the Software Product or hardware has resulted from notwithstanding this limitation); copy the Software Product accident, abuse, or misapplication. Any replacement Software (except as provided above) or the accompanying Product will be warranted for the remainder of the original documentation; rent, transfer, disclose, make available or grant warranty period or thirty (30) days, whichever is longer. any rights in the Software Product (including any Outside the United States, neither these remedies nor any accompanying documentation) in any form to any person product support services offered by Serif are available without without the prior written consent of Serif; remove any proof of purchase from an authorized non-U.S. source. The proprietary notices, labels, or marks on the Software Product Software Product is licensed to you on an "as is" basis without (including any accompanying documentation); use the Software any warranty of any nature.

8. NO OTHER WARRANTIES 14. GUIDELINES FOR THE USE OF DIGITAL Except for the above express limited warranties, Serif and its CONTENT IMAGES suppliers make and licensee receives no warranties or conditions, or terms, express, implied, statutory, or in any This product contains numerous clipart and photo images and/or communication with licensee. To the maximum extent video and audio media files (collectively referred to as the permitted by applicable law, Serif and its suppliers disclaim all “Digital Content”) which are either owned by Serif or licensed other warranties and conditions, either express or implied, from a third party. As a user of this product you are free to use, including, but not limited to, implied warranties of modify, and publish the Digital Content as you wish subject to merchantability, fitness for a particular purpose, title and non- the restrictions set out below. If you are uncertain as to whether infringement, with regard to the software product and the your intended use complies with the guidelines set out below, provision of or failure to provide support services. Licensee we recommend that you seek the advice of your own attorney or shall be solely responsible for the selection, use, efficiency and legal counsel. suitability of the software product and serif shall have no liability therefor. Serif shall have no liability for, nor obligation A. YOU MAY, subject to any restrictions set out below: to indemnify licensee regarding actions alleging the 1. Incorporate any Digital Content into your own original work infringement of proprietary rights by the software product. Serif and publish, display, and distribute your work in any media. does not warrant that the operation of the software product will You may not, however, resell, sublicense, or otherwise make be uninterrupted or error free or that the software product will available the Digital Content for use or distribution separately meet licensee’s specific requirements. The Limited Warranty or detached from a product or Web page. For example, the gives you specific legal rights. You may have others, which Digital Content may be used as part of a Web page design, but vary from state/jurisdiction to state/jurisdiction. may not be made available for downloading separately or in a format designed or intended for permanent storage or reuse by 9. LIMITATION OF LIABILITY others. Similarly, clients may be provided with copies of the In no event will Serif or its suppliers be liable for loss of data, Digital Content (including digital files) as an integral part of a corruption, lost profits, cost of cover, or other special, work product, but may not be provided with the Digital Content incidental, punitive, consequential, or indirect damages arising or permitted to use the Digital Content separately or as part of from the use of the software product (including any any other product; accompanying documentation), however caused and on any 2. Make one (1) copy of the Digital Content for backup or theory of liability. This limitation will apply even if Serif or an archival purposes. authorized distributor has been advised of the possibility of such damage. In no event will Serif’s liability exceed the B. YOU MAY NOT: amount paid for the software product. Licensee acknowledges that the amounts paid by licensee for the software product 1. Create scandalous, obscene, defamatory, or immoral works reflect this allocation of risk. Some states or other jurisdictions using the Digital Content nor use the Digital Content for any do not allow the exclusion or limitation of liability for other purpose prohibited by law; incidental or consequential damages, so the above limitations 2. Use or permit the use of the Digital Content or any part and exclusions may not be applicable in certain instances. None thereof as a trademark or service mark, or claim any proprietary of the above affects the statutory rights of licensees residing in rights of any sort in the Digital Content or any part thereof; the United Kingdom. 3. Use the Digital Content in electronic format, on-line, or in multimedia applications unless (a) the Digital Content is 10. NOT FOR RESALE SOFTWARE incorporated for viewing purposes only and (b) no permission is If the Software Product is labeled “Not for Resale” or “NFR,” given to download and/or save the Digital Content for any then, notwithstanding section 1 of this License, your use of the reason; Software Product is limited to use for demonstration, test, or 4. Rent, lease, sublicense, or lend the Digital Content, or a copy evaluation purposes. thereof, to another person or legal entity. You may, however, transfer all your license to use the Digital Content to another 11. NO RENTAL; OTHER TRANSFERS person or legal entity, provided that (a) you transfer the Digital You may transfer this License to another computer or Content and this License, including all copies (except copies workstation only on a permanent basis (that is, with no intent to incorporated into your work product as permitted under this transfer again) provided the computer, workstation, or other License), to such person or entity, (b) that you retain no copies, digital electronic device from which you have transferred this including copies stored on a computer or other storage device, License no longer accesses or otherwise utilizes the Software and (c) the receiving party agrees to be bound by the terms and Product, and the Software Product is used in accordance with conditions of this License; the terms of this License Agreement. 5. Use any Digital Content except as expressly permitted by this License. 12. TERMINATION You may terminate this License Agreement at any time. Serif 15. MISCELLANEOUS may terminate this License Agreement if you fail to comply This Agreement shall not be governed by the 1980 U. N. with the terms and conditions of this License Agreement. In Convention on Contracts for the International Sale of Goods; either event, you must destroy all copies of the Software rather, this Agreement shall be governed by English law. This Product. Agreement constitutes the entire agreement between Serif and

13. UPGRADE Licensee and supersedes all prior agreements, understandings, communications, advertising, proposals or representations, oral If this License is an “Upgrade,” you must have a valid license or written, by either party. If any provision of this Agreement is for the Prior Software for this License Agreement to be valid, held invalid or unenforceable, such provision shall be revised to and this License Agreement must be used to replace such the extent necessary to cure the invalidity or non-enforceability, license for the Prior Software. The total number of license and the remainder of this Agreement shall continue in full force “Upgrades” you may acquire may not exceed the total number and effect. This Agreement shall be amended only by an of computers, workstations, or other digital electronic devices that were licensed to access or otherwise utilize the Software executed writing by authorized representatives of both parties. Product at the time you upgraded the Software Product. How to contact us Our main office (UK, Europe): The Software Centre PO Box 2000, Nottingham, NG11 7GW, UK Main (0115) 914 2000 Registration (0800) 376 1989 Sales (0800) 376 7070 Technical Support* (0115) 914 9090 Customer Service* (0115) 914 9090 General Fax (0115) 914 2020 *Local rate (UK only) (0845) 345 6770 Technical Support E-mail [email protected] American office: (USA, Canada) The Software Center 13 Columbia Drive, Suite 5, Amherst, NH 03031 Main (603) 889-8650 Registration (800) 794-6876 Single Unit Sales (800) 55-SERIF or 557-3743 Technical Support (603) 886-6642 Customer Service (800) 489-6720 General Fax (603) 889-1127 Technical Support E-mail [email protected] Online Visit us on the Web at http://www.serif.com Serif newsgroups news://news.serif.com International Please contact your local distributor/dealer. For further details please contact us at one of our phone numbers above.

Contents

1 ♦ Welcome 1 About the Companion ...... 3 The hands-on sequence ...... 3 Linking to additional help ...... 3 What’s new in Serif WebPlus 9...... 4 Registration and support...... 9 System requirements ...... 9 Installing WebPlus 9 ...... 10 How should I get started? ...... 10

2 ♦ Getting Started 11 Overview ...... 13 What is a Web site? ...... 13 How does WebPlus work? ...... 13 How do I publish my Web site? ...... 14 WebPlus Startup Wizard...... 15 Using a Web template… ...... 16 Take a look around ...... 18 For more help on the basics...... 23

3 ♦ Web Site Design and Construction 25 Pre-planning...... 27 Who’s it for? ...... 28 What have you got? ...... 28 Site structure...... 29 Navigation ...... 33 Pages and master pages ...... 35 Manipulating pages...... 37 Page layout considerations...... 39 Your Home page ...... 42 For more help on site construction...... 43

4 ♦ Working with Text 45 About text frames...... 47 Working with text frames...... 48 Editing text ...... 49 Importing text ...... 50 About artistic text ...... 51

About table text...... 52 Scheme colors and text ...... 52 Design tips ...... 53 For more help on working with text...... 54

5 ♦ Working with Graphics, Animation, & Multimedia 55 Graphics in WebPlus ...... 57 Importing a picture or animation ...... 58 Drawing lines and shapes...... 60 Manipulating objects ...... 63 Editing colors ...... 64 Color schemes revisited...... 64 Advanced effects ...... 65 Adding animations ...... 67 Adding sound and video ...... 68 Design tips ...... 69 Graphics...... 69 Multimedia...... 75 Suggested links...... 76 For more help on working with graphics, animation, and multimedia... . 77

6 ♦ Working with Hyperlinks and Interactivity 79 Hyperlinks and anchors ...... 81 Using hotspots and rollovers ...... 83 Navigation elements ...... 85 About HTML and Java ...... 86 Design tips ...... 87 Hyperlinks and anchors...... 87 Hypergraphics...... 88 Navigation elements...... 89 For more help on hyperlinks and interactivity ...... 90

7 ♦ Previewing, Publishing, and Maintaining the Site 91 Optimizing the site ...... 93 Previewing the site...... 93 Publishing to a local folder...... 95 Publishing to the World Wide Web ...... 96 Maintaining your site...... 98 Design tips ...... 99 For more help on publishing-related tasks...... 100 Where should I go from here? ...... 100

Welcome

Overview 3

About the Companion

The WebPlus 9 Companion has everything you need to get started, from the basics to tips for advanced users. Here’s a chapter summary:

1 Welcome. Reviews the program’s main features, requirements, and installation sequence. 2 Getting Started. A simple introduction to Web sites and a hands-on sequence introducing the WebPlus environment. 3 Web Site Design and Construction. Essential information on pre-planning, site structure, navigation, and page layout. 4 Working with Text. How to edit text, customize the text layout, and import text. 5 Working with Graphics, Animation, and Multimedia. How to insert/create your own images, animations, sound and video. 6 Working with Hyperlinks and Interactivity. How to link text or graphics to Web pages, e-mail, or files, and enhance pages with Java or HTML effects. 7 Previewing, Publishing, and Maintaining the Site. Covers “finishing touches” and the simple steps that will get your site onto the Web and help you maintain it.

The hands-on sequence

This symbol denotes the hands-on sequence that runs through the Companion. So grab your mouse and follow along, starting in Chapter 2 with a Web template and a brief tour of the WebPlus environment. In following chapters, we’ll tweak the template, explain basic concepts, and demonstrate how to customize the various elements of a Web site.

Linking to additional help

Throughout the Companion, use this symbol as your key to further ? information that’s available in WebPlus online Help. You’ll find a complete Visual Reference to the WebPlus interface, plus a comprehensive “How To” section covering goals and procedures. Press F1 or choose WebPlus Help from the Help menu.

4 Overview

What’s new in Serif WebPlus 9...

Welcome to Serif WebPlus 9—the easiest way ever to get your business, organization, or household on the World Wide Web! Among new WebPlus 9 features, you’ll find...

♦ Theme Graphics for Instant Flair Choose from an array of ready-made design elements in themed sets, on a new Studio tab... Swap sets and change the look of your site with a single click... Customize text, font, colors, and more. ♦ Site Structure Mapping for Logical Design The new Site Structure tree not only serves as a control center for manipulating pages, it helps you visually arrange your pages into a hierarchy of sections and levels... think like an architect as you design a sensible content layout! ♦ ‘Smart’ Navigation Elements for Ease of Use Intelligent theme graphics like navigation bars and Previous/Next buttons are programmed to reflect your site structure... adapt automatically as you rearrange pages. Effortlessly establish easy- to-follow pathways throughout your site! ♦ Improved Page Control and Versatility Browse pages quickly with the HintLine’s Page Locator. Easily customize a host of properties for individual pages: Length, background color, centering, file name, title, and more. Import HTML Web pages, even entire sites. ♦ Superior Text Editing and Unicode Support Import, paste, export in Unicode format... design with foreign- language or exotic/symbol fonts and characters. Use drag-and-drop editing in WritePlus. Clear formatting (revert to plain style) with a single keystroke. ♦ New Tabbed Interface, Multimode Preview Click tabs to switch between multiple project windows with ease. Use any window for an internal Internet Explorer preview of your site at settable page sizes... or view external previews using any browser installed on your system. Overview 5

♦ Page Anchors and Hyperlink Improvements Now you can insert anchors to target hyperlinks directly to any word or onscreen object... Automatically link downsized “thumbnail” images to full-sized versions on an empty page... Open links in a new window as needed... Include offsite links in your site structure... Convert hotspots to match selected shapes... Use the new QuickButton object for instant creativity. ♦ Picture Import and Editing Enhancements Import images at 96dpi screen resolution. Adjust brightness and contrast, size and resolution, apply coloration and view properties with the new Picture toolbar. Add any workspace color to the palette with a single click. ♦ Improved Table Support Use the convenient new Table Toolbar to enter text, apply preset or custom number formatting... Choose from a wide range of functions for spreadsheet calculations. ♦ A New Slant with Enveloping Apply a customizable mesh warp envelope to any object to add perspective, slant, bulge, and more. You can deform just the outline or include the object’s fill, with an optional grid revealing the geometry of your warp. ♦ Intelligent Bézier Curves and More Now simply “connect the dots” to trace around curved objects and pictures... the improved Curved Line tool features Smart segments that use automatic curve-fitting to connect each node! Use Crop to Shape to trim one object to another... Convert to Curves for node-and-segment control over all objects, including QuickShapes. ♦ Improved Line Drawing and Editing Employ a host of new line properties... Sketch using calligraphic lines with an adjustable pen angle. Add rounded corners (caps) when and where you need them. Customize your lines using dots and dashes... vary the join style of connected lines. ♦ Astounding 3D Lighting and Surface Effects Beyond our previous shadow, glow, bevel, and emboss, advanced algorithms now bring flat shapes to life! Choose one or more effects, then vary surface and source light properties. Start with a pattern or a function, adjust parameters for incredible surface contours, textures, fills— realistic-looking wood, water, skin, marble and much more.

6 Overview

♦ Speedy Soft Edges No more laborious transparency-tweaking... the Feathering filter effect adds a soft or blurry edge to any object. Great for blends, montages, vignetted photo borders, and much more. ♦ Dramatic Dimensionality Why settle for only two dimensions? Instant 3D adds realistic depth to ordinary objects and text. Use one master control panel to vary extrusion, rotation, bevel, lighting, texture, and more. ♦ Object Styles Transform with a Single Click Select any object (including text) and choose from a gallery of ready-made styles that combine a host of attributes such as 3D filter effects, fills, transparency, line styles, border—even font variations. Customize the preset styles or create your own! ♦ Artistic Text on a Path Artistic text is more powerful than ever with the new path text tools. Just select a tool, draw your line, and start typing... beautiful text flows along the path. You can edit the path as any line (altering the text flow accordingly) and still change the text properties at any time! ♦ Even More Multimedia and HTML Support Use Paste Special to insert formatted HTML directly from the Clipboard... Import Flash Shockwave (.SWF) animated movies or MP3 audio files! ♦ Streamlined Web Site Publishing Choose pages to publish to disk from a convenient tree view... Revamped FTP, better management of image resolution, and repeatable file name prediction when publishing to the Web mean smaller exported file sizes and faster upload times! ♦ As a Design Environment, Friendlier than Ever Always responsive to WebPlus users’ requests, we’ve added auto- naming of text objects... improved alignment controls...and mouse wheel support... text case settings... the ability to edit individual objects within groups without affecting group-wide settings... not to mention a host of “behind the scenes” enhancements! Overview 7

...on top of these established features:

♦ Easy Editing and Special Effects With WebPlus, it’s a snap to import your own text and graphics. You’ll find built-in modules like WritePlus, for integrated word processing, plus tools for creating text hyperlinks and hotspot graphics. Choose the color scheme that looks best... The Snapping feature and Dot Grid help you achieve a crisp layout. Everything’s wrapped into a friendly DTP-style environment with onscreen Tooltips, HintLine, and context-sensitive help! ♦ Versatile Web Feature Support WebPlus supports current HTML for better WYSIWYG page design. Add sound and video—even Java and HTML header/body code—to spice up your pages! The Layout Checker helps you fine-tune your site before it’s published. Then preview your site in your own Web browser and publish it to a local folder or a remote server. ♦ Animated GIFs and Marquees Add life to your Web pages! Choose from over 600 animated Animals, Cartoons, Dingbats, Logos, Objects, and more... Use a Wizard to custom-design your own varied and colorful multi-line text messages that scroll across the screen... Add your own responsive buttons with the multi-layered Rollover graphics option. ♦ Intelligent Color Schemes Choose from dozens of preset color schemes to change the overall appearance of your site with a single click. You can customize the scheme colors, create brand new schemes, and apply any scheme to a “from-scratch” site. ♦ On-screen Studio Combines Convenience with Functionality Floatable, dockable Studio tabs provide rapid drag-and-drop access to commonly-used controls such as fonts, line settings, and the color table. Use the Portfolio to store your favorite designs for use in any Web site... and tap the Gallery, with built-in mastheads, logos, and lots of other page elements you can customize to suit your needs!

8 Overview

♦ Professional Layout and Text Tools Intelligent text fitting. Movable rulers and guides. Precision placement, rotation, flipping, cropping, vertical alignment. The Replicate tool to multiply any object into a line or grid arrangement, with pinpoint control over offset and spacing. Text formatting with named styles. Multiple master pages for repeating background elements. Not to mention word count, search and replace, spell-checking with personal dictionary, thesaurus, and proof reader to ensure your site’s readability. ♦ Artistic Text Tool Complementing traditional text in frames, just click and type anywhere on the page, format with the customary tools, then apply colorful lines and fills directly at the character level. Scale it, rotate it, flip it... discover a host of new possibilities! ♦ Table Tool with Editable Calendars Create and edit tables right in your site, with no need for a separate utility. Choose from a range of preset formats or design your own by customizing lines, cells, rows, and columns. Powerful text manipulation features include AutoClear, AutoFill, and cell merge. Plus table-based calendars! ♦ Amazing Image Manipulation Import images inline as part of frame text flow, and create your own 32-bit anti-aliased TIFFs and PNGs. Convert to Picture allows instant, in-place format changes! Add borders to your imported images and shape art... even frame a text frame! Control imported metafiles and OLE options, maintain linked images... each export filter remembers its own settings. ♦ QuickShapes Long an exclusive feature of other Serif solutions, QuickShapes work like intelligent clipart... or the most powerful set of drawing tools you can imagine. Just choose a template shape, drag on the page... then adjust handles to customize each angle and dimension. ♦ Powerful Drawing Options An arsenal of drawing tools are at your command... Sketch freehand lines and curves. Extend existing lines with ease, define closed shapes. Apply line styles to all kinds of shapes—even add line endings like arrowheads and diamonds. Use the Curve Toolbar to fine-tune the contours of any line, closed shape, text wrap boundary or cropping edge. Overview 9

♦ Gradient and Bitmap Fills, Transparencies For sophisticated illustrations and impressive typographic effects, select from a wide variety of Linear, Radial, and Conical fills and transparencies... and a multi-faceted Studio gallery of picture- based effects. Both solid and variable transparency let you add new depth to your print and Web creations. Use the interactive Fill and Transparency tools for drag-and-drop updating. ♦ Striking Shadow, Glow, and Bevel Effects One dialog serves as your “creation station,” where you can select and preview a spectacular range of special effects for text or any object. Choose from soft-edged transparent Drop Shadow, Inner Shadow, Inner Glow, or Outer Glow, plus four Bevel and Emboss effects! ♦ Total Ease-of-Use Drag and drop objects from other applications. AutoScroll automatically adjusts your view as you move or resize. Compact ChangeBar with context sensitivity and popup sliders. Right-click menus, HintLine and context-sensitive cursors make WebPlus as friendly as a puppy!

Registration and support

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

System requirements

If you need help installing Windows or setting up peripherals, refer to Windows documentation and help. Minimum: ♦ IBM-compatible Pentium PC with CD-ROM drive and mouse (or other Microsoft-compatible pointing device) ♦ Microsoft Windows® 98, 98 SE, Me, 2000, or XP operating system ♦ 32MB RAM (Windows 98), see manufacturer’s requirements for other operating systems

10 Overview

♦ 80MB (minimum), 200MB (recommended) free hard disk space ♦ SVGA (800x600 resolution, 16-bit color) display or higher ♦ Internet account and connection for Web publishing Additional disk resources and memory are required when editing large or complex documents

Optional: ♦ Windows-compatible printer ♦ TWAIN-compatible scanner and/or digital camera ♦ Stylus or other input device

Installing WebPlus 9

To install the program, simply insert the WebPlus 9 Program CD-ROM into your CD-ROM drive. The AutoRun feature automatically starts the Setup process and all you need to do is select the WebPlus Install option and answer the onscreen questions. If AutoRun does not start the install, use the manual install instructions below. If you’ve obtained the WebPlus Resource CD-ROM, install it now following the same procedures you used for the Program CD. To reinstall the software or change any part of the installation at a later date, select Settings/Control Panel from the Windows Start menu and then double-click the Add/Remove Programs icon. Make sure the correct CD-ROM is inserted into your CD-ROM drive, click the Install… button, and follow the on-screen instructions. You’ll have the choice of removing or adding components, reinstalling components, or removing all components.

How should I get started?

You’ve already begun! Now, step through the chapters to learn how to create and then customize a basic Web site. Be sure to follow the instructions carefully. For support as you work, choose WebPlus Help from the Help menu, then click Help on Help in the Contents list. There, you’ll learn about the HintLine, the Visual Reference, and other built-in learning aids.

Getting Started

Getting Started 13

Overview What is a Web site? A Web site is a collection of files stored on a computer where users with special programs called Web browsers can view the files as pages. Browsers can read the common file format known as HTML that describes how the various elements of text, images, hyperlinks, and other elements are arranged on each Web page. Each Web site has a single Home Page—the first page a visitor sees—usually containing hyperlinks 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 content appears seamlessly linked. You just click on a link to display related information. The World Wide Web was conceived as a way of using the Internet— the global network that interconnects computers around the world—to share information stored as Web pages. But Web sites don’t depend on the Internet—they can be (and often are) accessed just as well over a local area network or private intranet. Remember, a Web site is just a collection of files. How does WebPlus work? WebPlus lets you assemble all the elements of your site-in-progress into one convenient, multi-page document that can be saved in a single step as a WebPlus project file. At any time—again with just one step— you can publish the project as a separate set of pages that comprise your Web site. WebPlus takes the pages you’ve laid out and converts them to HTML. Creating a Web site in WebPlus can be as simple as choosing and customizing a Web template... or you can start from scratch—it’s up to you. Web templates simplify things by providing you with a variety of starter layouts, professionally designed expressly for World Wide Web display. Either way, you’ll appreciate the ease with which WebPlus lets you revise text and graphics, and adjust the design of each page. Either way, the next step is to spend some time customizing the pages with your own text, graphics, and other content. The Companion will cover what you need to know.

14 Getting Started

For editing your site, WebPlus offers a set of intuitive tools and a straightforward workspace that resembles a desktop publishing (DTP) environment. You can easily import text or images, use the built-in word processor, create colorful graphic shapes, and add hyperlinks and hotspots 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 tools and Wizards to review and optimize the site before publishing it. You can preview one or more pages at any time, either within WebPlus (using a special window based on the Internet Explorer browser) or separately using any browser installed on your system. When you’re ready to publish, WebPlus takes the project’s pages and converts them to HTML, graphics (images) and other files. You never have to worry 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 project to files for the Web, and (2) copies the Web files to a location you specify—either a local hard disk or a Web host. To publish to a local folder, you don’t even need a connection to the Internet. 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 Web site—that is, disk space on a server connected to the Internet—so that others can access your site. You can also publish your site to the remote server using WebPlus or a separate FTP utility. You’ll find details in online help (see the topic “Publishing to the World Wide Web”). Getting Started 15

WebPlus Startup Wizard

Once WebPlus has been installed, you’ll be ready to start. Setup adds a Serif WebPlus 9.0 item to the Programs submenu of the Windows Start menu.

Use the Windows Start button to start WebPlus (or if WebPlus is already running, choose New from the File menu) to display the Startup Wizard (menu screen).

WebPlus launches, and you’ll see the Startup Wizard, which offers seven choices:

♦ Create Site from Template, to create an instant Web site ♦ Open Saved Site, to edit existing WebPlus project files ♦ Start New Site, to start out with a blank Home page ♦ View Sample Sites, to see professionally designed examples ♦ Import Web Pages, to convert existing HTML resources ♦ View Tutorials, to see introductory illustrated overviews ♦ Get Web Space, to learn about special Web Hosting offers

16 Getting Started

Whether you’re a new or returning WebPlus user, View Tutorials is a great place to begin learning about new features in WebPlus 9, and review basic concepts. If you’re just getting started, here are some other recommendations:
Follow along in the Companion as we take a hands-on, guided tour of WebPlus features.
To explore independently, click Create Site from Template or Start New Site from the Startup Wizard (For details on using templates, see the next section.)
At any time from the main WebPlus screen, you can press F1 or choose 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 icons in the Contents list to expand topics, and click a document icon to display a particular topic. Click directly on Visual Reference graphics to browse interface features like menus and toolbars. Click the Index tab to peruse the list of key terms, or the Search tab to look up specific terms using full-text search.
Beginners should click the Help on Help topic in the Contents list for some tips on how to proceed.

Using a Web template…

Web templates are predesigned sites that get you up and running quickly with a layout that meets your basic needs. Even if you intend to design your own site from scratch, we recommend that you begin with a template and “learn the ropes” by customizing it. If you follow along with the Companion’s hands-on sequence, you’ll emerge with the right balance of skills and confidence to embark on your own creations. For demonstration purposes, we will be working with a template from the “Business” category. So at least for now, pretend you’re the Webmaster 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 Create Site from Template. Getting Started 17

Notice that the Business category is initially selected, with thumbnails for the available templates displayed on the right (your selection of templates may differ). We’re going to use the Communications template, so click its picture to select it and then click Finish. WebPlus opens the template site and displays its Home page in the workspace. It’s actually quite a simple site with just five pages. If you look to the right of the layout you’ll see them listed under the “Site Structure” heading. More about all that in a moment... first, would you like to turn the project into a Web site?

On the top toolbar, click the down arrow on the HTML Preview button to display a submenu which offers several preview options, including any browsers you’ve installed on your system. Select Preview Site in Internet Explorer (or your browser of choice). In a few moments, after WebPlus generates the necessary temporary files, a new browser window opens displaying the site’s Home page.
Move the mouse pointer across the top navigation bar (which links to all five pages included in the template site) and you’ll see tooltips for each button. Click any button to navigate quickly between the five pages. When you’ve convinced yourself that this Web site really works, you can close the browser window and return to WebPlus.

18 Getting Started

Before proceeding, choose Save... from the File menu and save the project file, providing a file name of your choice (perhaps HANDSON.WPP, which is how we’ll be referring to this site throughout the Companion). Note that saving the WebPlus (.WPP) project file is not the same as publishing it as a Web site.

Take a look around

Let’s take a few moments to examine the site we created from the template. In the process, you’ll become familiar with some of the basic features of the WebPlus environment. Your screen will look something like this:

Standard, Arrange & View toolbars Text & Frame toolbars

Tools toolbar Studio (Site tab shown) Attributes toolbar

ChangeBar HintLine toolbar

The workspace consists of a page area (where you put the text, graphics, and other elements you want to appear on the final Web page) and a surrounding pasteboard area (where you can keep elements that are being prepared or waiting to be positioned on the page area).

Move the mouse pointer around the screen and you’ll see popup tooltips that identify toolbar buttons. Watch the HintLine toolbar at the bottom for capsule descriptions of each feature: helpful data and hints when there’s an object selected, and hints about buttons and menus at other times.
Try right-clicking any object or page region to bring up a context menu of functions... the choices probably seem overwhelming at this point! To access online help, you could press F1 or choose WebPlus Help from the Help menu—but for now, stick with the guided tour. Getting Started 19

Our brief foray into the browser proved that the site has five pages; now let’s visit them in WebPlus. There are lots of ways to get around, and the Page Locator is perhaps the most convenient. Of course, the first task is to locate the Page Locator! You’ll find it on the left side of the HintLine—assuming the Home page is displayed it will be showing the word “Home.”

Click the arrow on the Page Locator to pop up a “tree” depicting the site’s pages (and master pages, which we’ll get to in the next chapter). Click “About Us” and you’ll see the screen content update as WebPlus displays the page with this name. TIP: As long as the Page Locator is selected, you can press the left/right arrow keys on the keyboard to step between pages. Try it!
On the right side of the screen, click the Site tab to display another tree showing the pages in your site. As you change pages, notice that the “eye” icon in the Site Structure tree jumps between the various page entries to indicate which one is currently on view and ready for editing. The Site tab is just one of seven special-purpose tab windows collectively known as the WebPlus Studio. Let’s preview them in order. Click each tab’s name to display it...
Start by clicking the Attributes tab, which includes five separate panels (see illustration) that let you customize properties of on- screen elements. Click each panel’s name in turn: — 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 and shapes

20 Getting Started

Panels on the Studio’s Attributes tab
Click the Site tab for an overview of the pages and master pages in your site, and a control center for a host of constructive activities. In particular, the tab lets you arrange your site content in a logical, structured way and add navigation elements like the navbar in the template site.
Click the Themes tab. Here you’ll find a selection of theme graphics: ready-made WebPlus objects ranging from static “design elements” like bullets, rules, headings, and banners to interactive elements such as navbars. When you select any theme graphic on a page (try clicking a heading in the template site), the HintLine identifies both its type and the set (design group) to which it belongs.
Click the Schemes tab to display a gallery of color schemes that let you instantly revise colors in a site. Using this tab, you can customize scheme colors or create entirely new schemes. Let’s take a moment to see how color schemes work. Right-click any sample to see various context menu options. In WebPlus, each site 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 using five numbers for basic colors. Instead of assigning a specific color to an element, you can mark it with a scheme color number. Let’s experiment. Getting Started 21

In the Schemes tab gallery, click the “Apple” color scheme sample. Notice that much of the text on the Web page turns red. Now click the “Carrot” scheme and the text turns orange.
Look closely at the group of five colors to the right of each scheme name. Note that each time you switch schemes, it’s the first of these five colors that’s being applied to the text.

In WebPlus templates, body text is conventionally marked with “Scheme Color 1.” That means it takes on whichever color has been defined as Scheme Color 1 in the current scheme.
Keep clicking different color schemes and notice which other page elements change color. Can you identify which elements have been marked with Scheme Color 2? Scheme Color 3? Each color scheme sample also shows the unique hyperlink and page background colors associated with the scheme.
Before proceeding, restore the site’s original scheme by clicking “Science” in the gallery list.
Continuing our quick-click tour of the Studio, click the Object Styles tab, which offers another extensive gallery of choices. As with themes and schemes, there’s more going on here than meets the eye! You may be familiar with the concept of styles as applied to word processing. With object styles, each sample “object” is actually a cluster of attributes (line color, fill, border, etc.) that comprise a graphic style. You simply apply the style to any object and it takes on the defined appearance... if you update the style definition, any object using the style is also updated instantly!
If you mouse over each Object Styles thumbnail, you’ll notice a small down arrow. Left-clicking this arrow pops up a context menu identical to the thumbnail’s right-click menu. You’ll find this convenient feature available in several Studio galleries!

22 Getting Started

Click the Gallery tab to view a wide variety of predesigned elements—graphics that you can drag and drop, then customize or use as a starting point for your own designs.
Finally, click to open the Portfolio—a container for storing design objects (images, text blocks, and even unlinked text frames or HTML code fragments) you’d like to reuse in different sites. Looking around the rest of the WebPlus interface, you’ll note that toolbars and Studio tabs are initially arranged in a convenient layout around the perimeter of the work area. However, you have full control over this arrangement, and can customize the display any way you want—by showing or hiding toolbars and tabs, or repositioning them onscreen in a way that suits your style. You can even undock individual Studio tabs as floating “tab windows” and/or group them into different cluster arrangements which can either float or dock as toolbars at the left or right side of the workspace. WebPlus makes it easy to see exactly what you’re working on—from a wide view of multiple pages to a closeup view of a small region. For example, you can use the scrollbars at the right and bottom of the main window to move the page and pasteboard with respect to the main window. The AutoScroll feature means that the view recenters itself as you drag objects to the edge of the screen. The View toolbar at the top of the screen provides buttons that let you pan or zoom in and out so you can inspect and/or edit the page at different levels of detail. If you’re using a wheel mouse, spinning the wheel scrolls vertically. Shift-spin to scroll horizontally and Ctrl-spin to zoom in or out! If you accidentally make any changes that you don’t want to keep, here are some “emergency” options:

♦ To revert to the previously saved copy of your site, choose Revert from the File menu. It’s a good idea to save your work often! ♦ You can also reload any saved WebPlus site by choosing Open... from the File menu. You can open multiple sites and switch between edit windows if you like. ♦ To undo the most recent change, press Ctrl+Z. (WebPlus features multiple levels of Undo.)

Now that you’ve had a good look around the WebPlus interface, and have successfully opened and saved a template Web site, you’re ready to proceed to a more in-depth analysis in the next chapter. Getting Started 23

For more help on the basics...

You’ve seen how easy it is to create the basic structure of a Web site using a WebPlus template. And you know how to find your way around the workspace. When you’re ready to construct your actual Web site, you’ll no doubt want to learn about other options. See online help for additional details.

For help on... In WebPlus Help, Then... ? display... Starting, saving, Contents list See topics in section “How to closing sites Get Started”

Web site concepts Index Select “Web sites, getting (overview) started”

WebPlus menus and Visual Reference Click any menu or toolbar toolbars name

Setting up pages Contents list See topics in section “How to Setting view options Develop Sites and Pages” Using layout tools

Web Site Design and Construction

Web Site Design and Construction 27

If your experience with Web sites has been limited to browsing pages—or even if you’ve cobbled together a Web site using another authoring program—you’ll appreciate the fact that WebPlus lets you lay out your pages using a WYSIWYG approach. Simply place elements where you want them, and then What You See Is What You’ll Get in the published Web site. But creating a successful Web site is much more than arranging objects on a page! The goal should be to combine a consistent visual layout with a logical structure that’s easy to navigate. In this chapter, we’ll provide a road map of the design and construction process— emphasizing how unique WebPlus features like the Site Structure tree and master pages enable you, as the site designer, to seamlessly combine visual and structural elements. So don’t skip ahead... This chapter, more than any other, will help you get a maximum return on your investment in WebPlus!

Pre-planning

The advice in this chapter comes from some of the gurus who have set up Web sites to disseminate their particular design credos, as well as from first-hand experience developing user-friendly online environments. Almost all agree that good design begins not with the designer but with the user. Know the users; 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 your site 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 or editorial? An electronic business card? People’s past experience with print and pictures shapes their expectations for new forms, and a familiar concept or metaphor can help to draw users into your web, as it were. Don’t set out to overwhelm or overdesign. The simplest site may work best. What will succeed is the result of understanding who’s in your audience, and what they bring to what you have to offer.

28 Web Site Design and Construction

Who’s it for? Family, friends, neighbors, colleagues, co-workers, kids, adults, clients, prospective clients, prospective employers, fellow worm-farming enthusiasts—or “the world at large”? Chances are you already know at least a few of the folks you’d like to reach. Perhaps you’re already publishing print pieces that connect you to that audience. Part of the excitement in creating a Web site is knowing you’ll likely be reaching a great 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 your assumptions. Ideally, a Web site should constitute a dialog between creator and audience, more like a (very slow) theater event than a TV broadcast. If the dialog begins while the site is in its formative stage, so much the better. Do a bit of research among people (even just one person) representative of those you’ll be trying to reach. Poll your clients 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 they using? ♦ Use the Web itself to tap into surveys on Internet usage. ♦ What characteristics make your audience unique—different from the so-called average user?

Each point you can clarify will serve as a reality check on your initial concepts. And as time goes on, user feedback will help you develop your site in a way that keeps the visitors coming back for more. What have you got? That is, not just what do you want to say, but why should anyone listen? What have you got that users actually want? What are you starting out with as content, and what kinds of transformations will it need to go through to succeed on the Web? These are complex questions, but essential to address at the start of this kind of project. The answers will help you tailor your content to your intended audience in this new medium. Web Site Design and Construction 29

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

Site structure

It probably goes without saying (but we’ll say it anyway) that before starting a site from scratch, you should have mapped out on paper approximately how many pages you’ll need, what the basic composition will look like, and how the pages will be linked together. Unlike a magazine or newsletter, a Web site doesn’t depend on a linear page sequence. It makes more sense to think of your site in spatial terms, with a structure like that of a museum people will explore. You can generally assume that visitors will come in through the front door (the Home page)—but where they go after that depends on the links you’ve provided. These navigation pathways are like corridors that connect the various rooms of the museum. It’s up to you as the “architect” to develop a sensible arrangement of pages and links so that visitors can find their way around easily, without getting lost. Unlike the museum in our analogy, the “structure” of a Web site has nothing to do with its physical layout, or where pages are stored. Rather, it’s a way of logically arranging the content on the site so that visitors have an easier time navigating through it. One of the most useful organizing principles—which WebPlus strongly reinforces—is an “inverted tree” structure that starts with the Home page and then branches out to other pages. To the visitor navigating your site, this arrangement presents your content in a familiar, hierarchical way, structured into sections and levels.

30 Web Site Design and Construction

♦ A section is a content category, like “Company News,” “Products,” “People,” or “Links.” The various major sections are typically listed on the site’s Home page. Ideally, each page on the site belongs to a particular section. And unless there’s only one page in a given section, the section will have its own main page, which usually serves as a gateway to subsidiary pages. ♦ The level is the number of steps (i.e. jumps) a given page is removed from the Home page. The Home page will always reside at Level 1, while sectional main pages are typically Level 2. Pages one step “below” that are Level 3. We could diagram a typical site like this:

The illustration at the right shows how a similar structure might appear in the Site Structure tree on the Studio’s Site tab. The tree provides a visual aid that lets you organize the content on your site into sections and levels—in other words as a hierarchy of parent pages branching to child pages. Using the tree, it’s easy to visualize relationships between pages and lay out your site in a way that makes sense for the content you have to offer. Of course, a Web site is a truly an interconnected web of pages, and the tree structure don’t prevent you from installing links between any two pages. But it does expose the major pathways within your site— up, down, and sideways. Logical section/level design makes your site easier to navigate, and WebPlus Web Site Design and Construction 31 makes it a snap to create navigation bars (see below) that mirror your site structure and help guide your visitors along those “main roads.” Not only is the section/level model well-suited to most kinds of content likely to end up on the Web, but it particularly lends itself to graphical reinforcement (see “Navigation”). So there’s an excellent chance that you, as the site designer, will be able to organize your content and provide appropriate visual cues to prevent users from getting lost. Remember, each screen should provide cues as to which section the user is “in.” The top-level pages—the Home page and the various sectional main pages—are the key nodes in this structure. As a rule of thumb, keep the number of child pages per section between four and eight. When in doubt, increase the number of child pages before adding “grandchildren” (i.e. creating a new sublevel). Studies have shown that users prefer a few dense screens with many choices over thickly branched structures that require more clicks to navigate. No matter how simple your initial site concept, it needs to be clear to you before you can make it clear to your users. Sketch out a diagram of how you envision the various sections and levels. If you use one of the templates, you’ll begin with one Home Page linking to half a dozen other main pages, which may be at Level 2 or on the same (top) level as the Home page. Make sure these sectional main pages are named according to the content you’ll be offering.

Over time, you’ll be adding content. Single section pages will probably evolve into parent pages, with content migrating to newly-added child pages. You’ll be prepared for this growth if you’ve started out with a clear site structure.

32 Web Site Design and Construction

Let’s take a look at the site structure of our template document.
Use File/Open... (or the Startup Wizard’s Open Saved Site option) to bring up the HANDSON.WPP project you opened and saved in Chapter 2. Display the Studio’s Site tab. This template site starts with a simple, single-level structure: a Home page plus four section pages (also at the top level) which haven’t yet acquired any child pages. By the way, it’s up to the site designer as a matter of convenience whether to create the section pages as actual child pages of the Home page. In this case they are all on the same level. However, no site can do without a Home page—so whatever level the section pages are on, the Home page occupies a unique position at the “root” of the site tree: the portal to the site as a whole. In the last chapter you used the Page Locator to display specific pages. The Site Structure tree works in a similar way, but with a subtle difference.
Single-click the entry for the About Us page in the tree. Notice its entry turn dark blue and the entry title turn bold. Below the tree, notice that the Filename listed is “page2.html.” Now click the News page entry and you’ll see the file name update. Meanwhile, nothing has changed in the workspace... the Home page is still on display, with the “eye” icon (indicating the page on view) still shown in its entry.
Now double-click any page other than Home. When using the Site Structure tree, the first click on a page entry merely selects the page, which you might do for example if you were about to delete it. Properties of the selected page appear below the tree. To actually view the associated page or edit its design elements, you need to double-click its entry. This allows you to alter your site structure or set properties of any page independent of which page you’re currently editing in the workspace. The order in which pages appear in the Site Structure tree matters a lot if you choose to include navigation aids that let users browse the site in that same order. For example, the prominent navigation bar at the top of this template site includes buttons that link to each of the initial major pages. These navbar buttons mirror the Site Structure page sequence. As we’ll see in the next section, the concept of navigation is one that WebPlus strongly reinforces. Web Site Design and Construction 33

Navigation

Web sites present unique challenges that don’t arise in the world of print. (When was the last time you even thought of “navigating” through a book?) The parent/child “tree” organization, as visualized in the WebPlus Site Structure tree, is about as intuitive as any path system is likely to get. But with users coming in through side doors, or following hyperlinks that leapfrog from one part of the site to another, it’s up to you to ensure the tree doesn’t turn into a maze. Your design should provide visual cues on each page that convey: Which section am I in now? and Where am I in relation to the sectional main page? Text can help. It’s common sense to use page names or headlines that identify what’s on the page. By employing somewhat larger headline text for Level 2 (sectional main) page titles, smaller subheads for Level 3, and so on, you can reinforce the user’s sense of how far removed they are from the Home page. For communicating section identity, you can use a variety of techniques, preferably in combination. Sections can use color-coding, applied to headlines and/or graphic elements. You can incorporate the section name into the composition by placing it as a text element on the page, aligned with master page elements (as discussed later in the chapter). But the most effective approach, and one that deserves as much attention as the design of your Home page, involves incorporating a navigation bar or “navbar” that will serve as:

♦ An element of the site’s page composition ♦ A functional tool to enable jumps between sections of the site ♦ A visual reminder of where the user is

WebPlus provides a ready-made assortment of fully functional navigation bars as theme graphics on the Studio’s Themes tab. You simply select one from the gallery and WebPlus does the rest! Navbar theme graphics combine buttons with popup menus to facilitate movement between the various sections and levels of a site. For example, here’s a navbar we selected for the site illustrated several pages back. The buttons provide links to the Home page (Level 1) and the section pages (Level 2). Popup menus link to child pages (Level 3 in this case).

34 Web Site Design and Construction

You can create navbars using only text, or design graphical navbars by hand. The advantage of navbar theme graphics, along with other navigation elements (such as Previous/Next buttons) provided on the Themes tab, is that they’re pre-programmed to “understand” your site structure tree. That means you can easily customize which part(s) of the site structure they should link to—for example, to top-level pages, pages on the same level, child pages, etc. You can set specific pages to be included in navigation or not, as you see fit. And best of all, a navbar theme graphic updates dynamically if you subsequently alter page names or relationships, or cut/paste the navbar to another page. Let’s see how WebPlus theme graphic navbars adapt to changes in your site structure.
Click to select the entry for the Services page in the template site’s Site Structure tree.

Click the Move Page Up at Same Level button above the tree. The “Services” page, which was fourth in the top-level sequence, is now third—and the navbar instantly responds by reconfiguring its button order!
With the “Services” page selected, uncheck Include in Navigation at the bottom of the Site tab and notice what happens. Click again to select the setting. Switching off the Include page setting forces the navbar to ignore the “Services” page, and the “Services” button disappears. Switch it back on, and the button reappears. This provides a glimpse of the ease with which WebPlus lets you customize site structure and navigation elements.
Choose Site Structure... from the File menu. Note that this dialog provides yet another view of the Site Structure tree, with the same four buttons for moving pages. By the way, both here and on the Site tab, you can also use drag-and-drop to move page entries around in the tree! For now, close the dialog without making changes. Web Site Design and Construction 35

Wherever it’s placed—across the top, down the left or right side, or elsewhere—the navbar needs to be considered a fixture of the page layout. It must never disappear or wander off to another corner. One way to achieve this is to place the navbar on the master page layer (see the next section) so it appears in the same place on each page that shares that master page. If you’re not using a navigation bar, at least make sure that each page has a minimum of one or two hyperlinks, leading to the Home page and/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 them away from your site.

Pages and master pages

As you know, pages are the basic unit of Web site design. That’s true in WebPlus as well—but in a WebPlus project, each page has a “foreground” page layer and a “background” master page layer.

Master pages are part of the structure of your WebPlus project, and provide a flexible way to store background elements that you’d like to appear on more than one page—for example a logo, background, header/footer, border design, or even a navigation element (see the previous topic). The key concept here is that a particular master page is typically shared by multiple pages, as illustrated below. By placing a design element on a master page and then assigning several pages to use that master page, you ensure that all the pages incorporate that element. Of course, each individual page can have its own elements on the “foreground” layer.

36 Web Site Design and Construction

You can add as many master pages as you need, although in a basic Web site you may get by with just one master page. The template site we’ve been working with starts with two master pages.
In the HANDSON site, display the Home page and click the navigation bar at the top of the page. Notice that this doesn’t select the bar. Why not? To edit the elements on a master page, you need to switch the working view to that master page. You’ve probably noticed that master pages are represented as icons on the Site tab, and you can view and/or select them using the same techniques (Page Locator, Site tab, Site Structure dialog, etc.) described earlier for pages.
As a shortcut to switch between the master page and page layers

(for the current page), click the Page/Master Page button on the HintLine (or right-click and choose Master Page). Most of the visible text disappears, leaving decorative elements, a banner heading, and the navbar. The Page Locator informs us we’re viewing “Master 2,” and the corresponding icon at the top of the Site tab now has an “eye” icon as confirmation. You’ve probably noticed that each page entry in the Site Structure tree includes a numeral—now it should be clear that the number indicates which master page that particular page uses. Four of the five pages use Master 2, and one of them (“Services”) uses Master 1. What’s the difference between these two master pages?
Double-click back and forth between the Master 1 and Master 2 icons on the Site tab and you’ll see that Master 1 has an extended gray background region on the right side. If you inspect the layout of the “Services” page, you’ll see how this different background works with the page-layer elements. Web Site Design and Construction 37

In using WebPlus to design your site, take advantage of the master page/page distinction. Think of the background as a sheet of preprinted stationery with its own elements. For example, you can design a colorful background header—perhaps incorporating a main logo—on the master page, which will then repeat on each Web page. Individual pages can add “local” information such as a section name or page title, which will be visually merged with the background when the page is published. For more graphic design tips, see Chapter 5. Note that a navigation element on a master page is programmed to behave as if it’s on each page: its buttons and menus are relative to where each page sits in the overall site structure. So you can save a great deal of time by placing just one navbar on the master page layer rather than separate navbars on each individual page. Another tip to keep in mind is that the pasteboard region around the working area is a common area shared by all pages and master pages, so it’s useful for copying or moving objects between the two layers. Simply drag an object (or Ctrl-drag a copy) off to the pasteboard, switch to the other page, and drag the object onto it.

Manipulating pages

Even if you decide to construct a site without navigation elements, and with only a single master page, the Studio’s Site tab is going to prove useful. Not only does it provide an overview of every page in your site, but it serves as a control center for basic operations like adding, removing, and rearranging pages. Earlier, you used the tab to move the “Services” page to a different place in the hierarchy. Let’s return now to the template site and make a few other changes...
Display the Site tab and double-click the Services page entry (which should now be third in the sequence) to select and view the page. Notice that the Services page includes placeholder text describing two “service options.” We’re going to add a couple of child pages in the Services section of the site to describe these options.
Right-click the Services entry and choose Insert Page.... In the dialog, type “Option 1” as the Page name (instead of “Page 6”) and select Child of (instead of After). Leave the other settings the same, and click OK.

38 Web Site Design and Construction

A new page—using Master 1 elements but otherwise blank—appears in the workspace, with a corresponding entry nested under “Services” in the tree. This dialog approach for adding pages has several advantages. For example, you can insert a page anywhere in the site structure or duplicate design elements from a specified page. Here’s another method:

Click the Option 1 entry to select the page, then click the Insert Page button above the Site Structure section. The button automatically inserts a new page after the selected page, using the same master page and with a default name. It’s up to you whether to use the dialog or the button; see online help for even more ways to add pages! Also, note that there’s a Delete Page button for removing pages that have outlived its usefulness, and comparable buttons above the Master Pages section for operating on master pages.
To rename the new page, right-click its entry and choose Page Properties.... On the dialog’s Page tab, type “Option 2” as the Page name. While you have the dialog open, you might take a moment to review its various tabs to get an idea of page properties you can set (see the end-of-chapter list for help references). Click OK when you’re done. By right-clicking on a page entry, you can also add an offsite link to your site structure. Typically, this would be a page separate from your site that you wanted to include in your site’s navigation structure (for example, in a popup menu). Yet another option for adding pages is the Import Web Pages command on the File menu, which lets you import one or more pages from existing HTML Web sites. (By the way, you can set a page to use no master page, which is handy if you’ve imported an outside page and want to maintain its original design elements.) Page order, and parent/child page relationships, reinforce a logical site design that’s easier for the user to navigate and for you to manage. As your site’s content evolves over time, so will its organization. And that’s when you’ll really come to appreciate how simple WebPlus makes it to rearrange pages by moving them around within the “tree.” Let’s try an alternative to the four buttons on the Site tab (and in the Site Structure dialog as well) that let you rearrange pages:

Move Down Move Up Make Child Make Parent Web Site Design and Construction 39

Click the Services page entry and drag it down below News, dropping it when you see the cursor change to (Same Level); the alternative would be (Child). Notice that the child pages moved along with the parent “Services” page, which is now back in its original place in the top-level ordering.
Drag from the Master 2 icon in the Master Pages section and drop onto the Option 1 page entry. That’s how easy it is to assign a master page to a page! Do the same for Option 2.
As we’ve concluded the hands-on portion of the chapter, now would be a good time to save your work before moving on. Besides the Site tab, WebPlus offers a variety of other ways to manipulate pages: the Site Structure dialog, the Master Page Manager, and both standard and right-click (context) menus. You can learn about all of these in the help file—see the end-of-chapter links.

Page layout considerations

To conclude this chapter, we’ll offer some general comments about designing pages for the Web. Be sure to take advantage of WebPlus’s preview capabilities to examine how your site will look and feel to your visitors. (See Chapter 7 for details on both “internal window” and “external browser” preview options.) As long as people are still reading Web pages, as opposed to watching them or listening to them, everything you’ve been taught about editorial style and text organization has relevance—so don’t throw away that old style manual! Readers respond to good design and clear, concise writing. They’ll respect the fact that you understand the proper way to tell a story or convey an idea: the relation of headlines to body text, the use of subheads, and so on. Still, compared to a print site, the computer screen is a like a rectangular hole through which users must peer at information. Will users be inclined to scroll down and retrieve what has disappeared off the bottom? Reading skills like scanning headlines or skimming stories become less relevant when content is segmented into separate screenfuls. And even the most computer-literate first-time visitor to your Home page will have no idea how many pages there are or how the pages are organized.

40 Web Site Design and Construction

Browser Window (“safe area”)

Page

The Web page viewer initially sees only what’s displayed in the browser window (the so-called safe area), leaving unseen an indeterminate portion of the page below that. At 800x600 resolution, allowing for browser toolbars and such, the safe area may be around 400 vertical pixels of actual page height. Content in this region will be all the visitor sees at first. In fact, studies show that many Web users are not in the habit of scrolling pages before deciding to move on, so that leaves a fairly narrow strip and a short interval in which to grab their attention!

♦ Content. The safe area should convey essential information about the site and entice the visitor to scroll for more. ♦ Composition. Think of the safe area as a mini-page, and make sure that the elements within it work as a group.

In general, Web page headers and footers need to contain more information than those in a conventional site. The Web site title, which appears immediately in the browser’s title bar as the first page loads, should convey your site’s identity accurately, and even with a touch of wit. The top matter should include a logo or other identifying motif, as well as a page title (so users know they’ve come to the right place). Visual cues as to section and level can also be part of the top matter. The bottom of the page is a good place to include elements that help the page stand on its own as a self-contained unit. For example, it’s good practice to include a date stamp so users know how current the contents are (use Insert/Information/Date or Time... and uncheck Update Automatically). Web Site Design and Construction 41

If you don’t have a separate “Reply” or “Feedback” page, consider placing a return hyperlink with your own e-mail address at the bottom of each page. It’s not a bad idea to spell out the page’s URL as well, once you’re sure what it is. That way, if a visitor saves a page as a text file, 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 your Home page, sectional main pages, or any other pages. It will help you build in a page-to-page consistency that respects the way people view Web sites. In general, consistency is good: if you choose a graphic theme, by all means use it throughout your site. But too much of this good thing can lead to blandness, and you should also work on differentiating the various levels of your site from each other. In other words, the Home page should appear unique, and sectional main pages should resemble each other, while looking distinct from pages at other levels. Besides adding interest, these variations also serve as navigational cues. Default site property settings for Width and Height determine the dimensions of master pages, and each master page in turn determines the size of pages that use it. A default site property setting for alignment (either Left or Centered) determines how page content lines up in a browser. One of the first things you may want to do, when creating a new site from scratch, is to decide if the default dimensions are reasonable. If there’s a chance you’ll be including pages with a lot of content, requiring users to scroll down, you can increase the height value for the page to give yourself some extra room for the layout. You don’t have to fill all the space (WebPlus will truncate automatically at the bottom element when publishing), and it’s easier to change the value at the outset than after you’ve developed the site. One of the simplest things you can do to improve your site’s appearance is to set rather wide left and right margins. Extra space on both left and right helps to set off your content from the edge of the browser window, and gives an uncluttered appearance just as it would on a printed page. It’s also easier to view: studies show that at normal reading 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 time experimenting with different placements of the main frame on your very first page, previewing each layout until you find your own preferences. Then duplicate the first page to create the other pages, so the layout will be consistent on the other pages in the site.

42 Web Site Design and Construction

Your Home page On the Home page, you can break a few rules. For example, although you’re generally trying to reduce the time it takes each page to load, it’s OK to include larger or more numerous graphics on the Home page. Most visitors’ attention span will stretch a bit in anticipation of seeing what 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 the graphics will be cached and instantly available next time. On the other hand, all the guidelines mentioned above work to your advantage. The Home page, and particularly its safe area, are your only chance to make a first impression (unless someone enters through one of the “side doors” we alluded to). Decide what kind of impression you want to make—“cool,” “hot,” “intriguing,” “professional,” or all of the above—and go for it. Make the safe area interesting enough to hold the visitor’s attention while the rest of the page loads. Text loads first, then graphics. A composition of free text blocks will load quickly and, with the right choice of text and background colors, can be stunningly effective. A pithy quotation or unusual symbol will serve to engage the mind’s eye and 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 magazine cover, an advertisement, and a main menu for the rest of your site. There’s no question that well-rendered graphics add interest, but don’t feel obligated to illustrate every single section link with its own GIF! Finally, it’s a good idea to provide titles (tooltip text) and/or alternate text (captions) for each graphic, using the Web Export Manager on the Tools menu. You can use this function on individual graphics or as a Wizard to review the entire site. (Format/Web Export Options... also works for single pictures.) The text will hold attention as the graphics load, and convey the essence of the image for the text-only user. Blind users with special software can hear the text (via synthesized speech), and so will not completely miss the pictorial content. Web Site Design and Construction 43

For more help on site construction...

You’ve seen how easy it is to create the basic structure of a Web site using a WebPlus template. And you know how to find your way around the workspace. When you’re ready to construct your actual Web site, you’ll no doubt want to learn about other options. See online help for additional details.

For help on... In WebPlus Help, Then... ? display... Viewing pages Contents list See topics in section Manipulating pages “How to Develop Sites and Pages” Setting page and site Index Select “properties, setting properties, such as: for page and site” - Page/file names - File extension - Page size, alignment - Master page - Adjunct scheme colors - Search descriptors - Picture export options - Background sound

Theme graphics Index Select “theme graphics”

Navigation elements Index Select “navigation elements”

Working with Text

Working with Text 47

Now that you’ve seen the “big picture”—how WebPlus integrates pages and master pages into an overall site structure—it’s time to shift focus to the tools and elements that you’ll use to design each page. In this chapter we’ll look at how to add standard text and change the layout of text on the page. It’s really not complicated at all! Typically, text in WebPlus goes into text frames, which work equally well as containers for single words, standalone paragraphs, or multi- page articles or chapter text. You can also use artistic text for standalone text with special effects, or table text for row-and-column displays.

About text frames

Most ordinary text in WebPlus fits into text frames. Frames work equally well as containers for single words or standalone paragraphs. Two or more frames can be linked together so the enclosed text flows from the first frame to the second, and so on—like a newspaper article with multiple columns. Whether there’s a single frame or more than one in series, the enclosed frame text is called a story. Our hands-on sequence will thread continuously through this chapter. Let’s begin by investigating how our template site employs frame text.
Display the Home page of the HANDSON.WPP project and adjust the screen view if necessary so you can read the page text.

Using the Pointer tool—the default tool for selecting, moving, and resizing objects, including the boxes that contain text—click the block of text below the heading “Welcome to Our Company.”
Now click the text block to the right of the first one, starting with the words “Be sure to explore...”

In each case, clicking selects a text frame, displayed as a rectangle with a gray bounding box and small gray “handles.”

48 Working with Text

Notice the gray Link button on the selected frame’s bottom edge. The button’s icon tells you about the frame and the story text it contains: A square (as on the name/address frame) indicates a frame with all its text displayed—either a standalone frame or the last frame in a linked sequence. A plus sign (as on the “Here’s the place” frame) shows there’s more text in the story than the frame can display. Extra text is stored in an invisible overflow area. You can either make the frame larger or shorten the story. A down arrow shows that the frame’s text continues into a following linked frame.

Working with text frames

It’s easy to move or resize a text frame. The appearance of the cursor over the selected frame tells you what will happen if you click and drag at that point.
Select the first text frame (“Insert your own text...”). 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 Pointer tool.

Now position the pointer over the frame’s gray bounding box and notice the “Move” cursor appear. Click and drag to move the frame a short distance, then press Ctrl+Z to undo the move.
Click one of the frame’s corner or edge handles and drag to resize the frame. If you adjust the bottom edge up and down, you’ll see the Link button change state to reflect whether all the text is revealed. Again, undo any 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 page area (scroll over if necessary), then click and drag out a marquee where you want the new frame to go. When you release the mouse button, an empty frame appears.

Note that the Pointer tool was automatically selected after you created the new frame. Type a few words into the frame. Working with Text 49

Editing text

Web Plus lets you edit text directly on the page, or with WritePlus, the built-in text editor. Using the Pointer tool, you can type into any paragraph, drag to select characters, and use the formatting controls on the top Text toolbar. As with a word processor, double-clicking selects a word, and triple-clicking selects a paragraph.
Select part of the text you typed into the new frame, then try changing its font and pointsize using the controls on the top toolbar.

To work with a more substantial amount of text, let’s switch to the “Insert your own text” body text frame on the page. Right-click this frame and choose Edit Story from the context menu to launch WritePlus.

WritePlus opens in a separate window that shares many of the standard WebPlus menus and toolbars. You can move the mouse pointer around to view tooltips and hint text for the various buttons. Because WritePlus displays the full text of a given story, it’s ideal for viewing and editing the full text of a story that may span several frames or pages. You can view the text in draft mode (without formatting), export story text, and employ the Word Count and Spell Checker functions. Obviously, the original text in this story is simply a placeholder for the text you’ll be adding to your Home page. You can type over the sample text, or select it all, delete, and begin with an empty frame, as you wish.

To update WebPlus with any changes, click the Finish button. To abandon changes, click the window’s Close button.

Click the header text “Welcome to Our Company” to select the object. Although this might look like a text frame, notice that the HintLine identifies it as a Theme Graphic.

Theme graphics are special group objects with their own built-in rules, which as we’ve noted make them instantly updatable via the Studio’s Themes tab. You can ungroup theme graphics, but then they’ll lose their special properties. Fortunately, you can edit the text of a theme graphic without ungrouping it.

50 Working with Text

Double-click the theme graphic. A dialog appears with several tabs that let you enter your own text and/or update the font or text fill color. After exploring the tabs, click Cancel.

Importing text

Besides typing text into a frame or creating a story using WritePlus, you can use your current word processor (such as Microsoft Word) to create source files for your site. Then you can cut and paste using the Windows Clipboard or import the text directly. It’s easy to import text from a file into an existing frame. Let’s try it!
Using the Pointer tool, right-click the “Insert your text here” frame.
Choose Select All from the Edit menu (shortcut Ctrl+A) and press Delete to clear the frame.
Right-click the frame choose Text File.... Using the file selection dialog, open SAMPLE.DOC in the PROGRAM FILES/SERIF/WEBPLUS/9.0/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 the overflow text. We won’t be needing the feature in this case.
Press Ctrl+E as a shortcut to launch WritePlus, and briefly inspect the new sample text. (Items underscored in red are unfamiliar words identified by the AutoCorrect function.) You might try applying some font, size, or style changes. Working with Text 51

About artistic text

Artistic text is standalone text you type directly onto a page. Just as with frame text, you can alter artistic text’s character and paragraph formatting, apply text styles, attach hyperlinks, and use WritePlus to edit the object. You can also apply a gradient fill and/or an outline to artistic text—for example, to create attractive Web buttons—but note that artistic text with these properties is published as a separate graphic rather than as a block of HTML text. Artistic text has some limitations. For example, you can paste from the Clipboard 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 the page for an insertion point using a default point size, 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 a graphic. (To maintain it as text, change its point size via the Text toolbar.)
See if you can spot some artistic text objects already in use on the template site’s Home page. Try creating your own sample of artistic text, either on an empty part of the page or on the pasteboard.

That concludes the “scripted” portion of the hands-on sequence (for this chapter at least), but feel free to create a brand new site at this point (File/New) and experiment with both frame and artistic text.

By the way, “ordinary” straight-line artistic text is far from ordinary— but you can extend its creative possibilities even further by flowing it along a curved path. The resulting object has all the properties of artistic text, plus its path is a Bézier curve that you can edit with the Pointer tool as easily as any other line! (See the end-of-chapter help topic reference for “text on a path.”)

52 Working with Text

About table text

Tables are ideal for presenting text and data in a variety of easily customizable row-and-column formats, with built-in spreadsheet capabilities. Each cell in a table behaves like a mini-frame. As with frame text, you can alter table text’s character and paragraph formatting, apply text styles, and attach hyperlinks. However, you can’t use WritePlus to edit table text or import text from a file. Tables have a number of unique features (detailed in online help) like AutoFormat, QuickClear, and QuickFill for rapid editing and revision.

To create a table, choose Insert Table from the Tools toolbar and click on the page or pasteboard, or drag to set the table’s dimensions. The Create Table dialog appears with a selection of preset layouts. You can either select a preset or choose Default to start with a plain table, then click OK. Once you’ve created a table, you can select, move, resize, delete, and copy it as an object, just as you would with a text frame. Other operations 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 a range of text. You can also drag to select multiple cells, rows, or columns, which in effect selects all the text in that region. Once you’ve made a selection, you can edit text in the table and modify the structure and appearance of the table and/or its components.

Scheme colors and text

To round out this chapter, a brief reprise on the subject of scheme colors. When we introduced the Studio’s Schemes tab in Chapter 2, we mentioned that “Scheme Color 1” (as displayed in the Attributes tab’s Color gallery, and elsewhere) is conventionally applied to text in WebPlus template sites. This isn’t a hard and fast rule—you can apply any color you like to any kind of text. Working with Text 53

However, even if you don’t apply a scheme color to your text, if you add a hyperlink to any text you’ll notice that it takes on a color... and after that hyperlink is clicked in a browser, the text turns yet another color. Where do these colors come from? They’re two of the three so- called adjunct colors associated with each site’s color scheme, and included as part of each sample in the Schemes tab gallery:

♦ The Hyperlink color applies to hyperlinked text before it’s been clicked on. ♦ The same text after a Web visitor has clicked to “follow” the link takes on the Followed Hyperlink color.

In the next chapter, we’ll resume the discussion of scheme colors and explain how you can customize individual colors (including the adjunct colors) or create your own schemes from scratch.

Design tips

Here are some points to keep in mind when working with text (see also the suggested links at the end of Chapter 5):

♦ Hardly anyone actually prefers reading computer text over traditional print. Try to make your text inviting, at least. As a rule, users should be able to view each text block in the browser window without scrolling. Use short, newspaper-style paragraphs, not flowing, book-length ones. The “inverted pyramid” style of writing found in journalism works well on Web pages, too: use a strong lead-in and place essential information up front. ♦ There’s plain text, and then there’s hypertext (linked text). As a Web author, writing well is only part of your job. Adding hyperlinks that enhance access to your key ideas is an equally vital task. ♦ Headlines and subheadlines are useful devices to facilitate scanning (scrolling) and to break up the monotony of longer stories. Use left aligned rather than centered heads. Avoid headline text larger than 24pt, which looks amateurish, and all-uppercase headlines, which can be hard to read. For variety, you can color the heads and subheads differently from body text—just don’t overdo it!

54 Working with Text

♦ In general, it’s not a good idea to use more than one column for story text. On a Web page, no one wants to scroll to the bottom of one column and then back to the top of the next. You may see sophisticated Web pages that use tables and frames to demarcate different kinds of content, and you may be able to emulate these effects, but they work best with short text blocks and hyperlinked lists, rarely for the presentation of longer material. ♦ To avoid registration problems, make sure text is on top, not behind images.

For more help on working with text...

In this chapter, you’ve examined the placeholder text in the template site and learned how to create, edit, and import standard text. You know enough now to begin replacing the placeholder text with your own content. As you work on your actual Web site, you’ll benefit from learning how to link frames together, set defaults for new text, use shortcuts, insert returns and special characters, and work with the various proofing tools. For details on these and other text options, see online help.

For help on... In WebPlus Help, Then... ? display... Overview of WebPlus Index Select “text, overview” text

Importing text Contents list See topics in section “How to Working with frame Work with Text” text, artistic text, frame text

Setting text properties Contents list See topics in section “How to Using templates and Format Characters and named styles Paragraphs”

Tables Contents list See topics in section “How to Work with Tables”

Text on a path Index Select “path text”

Setting defaults Index Select “default properties”

Using proofing tools Index Select from “proofing tools”

Working with Graphics, Animation, and Multimedia

Working with Graphics, Animation, and Multimedia 57

In this chapter, we’ll continue the hands-on sequence, examining the pages the Web template provided—this time looking at images and graphic objects. The focus will be on how to replace the placeholder images with your own images, and how to create new graphic elements.

Graphics in WebPlus

Web template sites may include several different types of graphic objects. You can use the Pointer tool to select, move, and resize them, just as with text objects.
On the Home page of the HANDSON.WPP template site, click with the Pointer tool on the photo on the right. (The Picture toolbar will pop up.) Try resizing the photo by dragging from one corner. Now click in the center and drag it around the page... notice that it appears behind some objects and in front of others. TIP: Watch the HintLine as you drag an object, and it will tell you the object’s properties.
Drag the photo so it slightly overlaps one of the lemon-shaped bitmaps near the “Service Offer” text frames. Click in the region of overlap once, then click again in the same place. Notice how the selection switches between one object and the other. As a general rule, when two or more objects overlap at a particular point, your first click at that point selects the uppermost object— typically the one most recently created. Your second click selects the object below the first, and so on. If one of the objects happens to be a text frame, use Alt-click to override the text edit cursor.
Reposition the photo if necessary so it’s overlapped by one of the “Service Offer” text frames, and try clicking several times in the region of overlap. All you’ll see is a blinking text edit cursor. Try clicking again, this time with the Alt key held down. Now you can successfully switch between the two objects. TIP: You can also employ Alt-click anytime to drag a text frame from its center.

58 Working with Graphics, Animation, and Multimedia

Importing a picture or animation

You’ll have no difficulty importing such items as metafile clipart, bitmap photos, or animated GIFs. WebPlus can handle all the standard formats. You have wide-ranging control over import and export options, using the Graphics tab of the File/Site Properties... dialog. The regular settings result in most imported images being embedded in the WebPlus project file and then exported as .PNG bitmaps when you publish the site. Let’s try importing...
Click on a blank part of the page to deselect any objects. For future reference, note that the import function is sensitive to the current selection. If you preselect a picture, WebPlus assumes you want to replace it. If you have a selection point in text, you’ll be given the option of inserting the new image inline. This time we just want to bring in a standalone photo.

Click the Import Picture button on the left toolbar.
Using the file selection dialog, open PHOTO1.BMP in the PROGRAM FILES/SERIF/WEBPLUS/9.0/SAMPLES/ folder.

When you see the special cursor, you have two choices. You can either drag out a box region on the page to set the size of the imported picture, or simply click to insert the picture at a default size. Pick either one. The sample picture (of a lion) will appear, and you can always resize it later by dragging its handles.

You can use the Picture toolbar to improve the appearance of an image by adjusting contrast, brightness, color, size, and other properties. You can also access global and local settings that let you control the format of each image when it’s ultimately displayed on your published Web site. Working with Graphics, Animation, and Multimedia 59

With the lion photo selected, click the Picture Effects button on the toolbar, and then click a medium gray color swatch to produce a monochrome image using the Recolor option. Try experimenting with other options if you like. As a shortcut to replace an existing image—for example, a placeholder in a template—you can just double-click it to bring up the file selection dialog. You can also drag and drop an image file icon into WebPlus, and of course paste objects from other applications via the Windows Clipboard. The Convert to Picture command lets you combine several separate elements (as a multiple selection) into one picture for easier manipulation. It’s also great for changing an embedded picture from one format to another, saving you the trouble of making changes in an external editor. By the way, the WebPlus 9 Resource CD-ROM includes a bonus collection of 20,000 WebArt images, including arrows, bullets/buttons, icons, lines, and animations as well as pictorial Web graphics. You can peruse the collection using your Web browser, then drag and drop images directly into WebPlus. To choose animations, use Insert/Media>Animated GIF.... Note that the time it takes a visitor to load one of your Web pages is directly related to the size of the page’s HTML file plus any accompanying graphic files. Graphics require larger file sizes, and hence slow down loading time. And even in compressed form, bitmap files like the photo we’ve just imported tend to be much larger than simple 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.

60 Working with Graphics, Animation, and Multimedia

Drawing lines and shapes

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

Freehand Line Straight Line Curved Line With them, you can add both functional and decorative layout elements—for example, clickable buttons or page dividers. To draw a straight or freehand line, select the appropriate tool, then click and drag. To extend an existing line, begin drawing from one of the line’s end nodes. To close the line, creating a shape with a fillable interior region, simply connect the line back to its starting point. Curved lines allow you to adjust the curvature of each line segment with precision. After choosing the Curved Line tool, use the Curve Creation toolbar to select which kind of segment you’ll draw next: Straight, Bézier, or Smart. Each Bézier segment has control handles that act like “magnets,” pulling the curve into shape. Click to place a starting node (1), then click again (2) where you want the segment to end, and adjust the handles to tweak the segment’s curvature. As with the other line tools, you can extend the line repeatedly. To end a curved line without closing the shape, press Esc or double-click (or simply choose another tool).

Smart segments are similar, but they appear without visible control handles and use automatic curve-fitting to connect each node. They’re especially useful when tracing around curved objects and pictures. 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 line object or the outline of a closed shape. Simply select the line and drag its 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’s control handles to change the profile of the adjacent segment(s). The Curve toolbar appears when you select a line or closed shape, and provides a variety of adjustment controls for adding or deleting nodes, closing or breaking curves, and changing node types, as detailed in online help. Working with Graphics, Animation, and Multimedia 61

The QuickShape flyout lets you select pre-designed objects that you can instantly add to your page, then adjust and vary using control handles. The QuickShape flyout contains a wide variety of commonly used shapes, including boxes, ovals, arrows, polygons and stars. The unique QuickButton (indicated below) lets you draw a range of common button shapes... then you can add hyperlinks or hotspots to make your shapes clickable!

Try it! Click the QuickShape button, then select a box shape from the flyout. Click and drag out a small box on the screen. The new box displays a sliding adjustment handle, used to control corner shape. Most QuickShapes have multiple adjustment sliders.
Drag the slider up for concave corners, down for convex. Note that the tool has reverted to the Pointer, and you can also use it to move or resize the box. Initially, the box will have a black line border and a clear fill. The easiest way to change the object’s line and fill properties is to use the Studio.
Display the Line panel of the Studio’s Attributes tab. Try adjusting the Weight slider to give the box a thicker border, and click various Type samples for a different line. Advanced options include corner joins and end caps.
Now display the Attributes tab’s Color panel. Try changing the box’s line or fill color and/or shade by first right-clicking a solid color sample, then choosing either Apply to Line or Apply to Fill. (Left-clicking a sample applies the solid color or shade to the selected object’s fill.).

62 Working with Graphics, Animation, and Multimedia

The Color panel also features Fill, Text, and Line buttons that let you preselect which attribute your color selection will affect. For each base color you select, you can drag the Shade/Tint slider below the tab gallery to adjust the lightness of the applied color, for infinite variety.

The adjacent Color Picker Tool lets you define a free color (shown as the second sample in the color gallery). You can choose the tool and click anywhere in the workspace to “pick up” the color under the cursor. (Left-clicking with the tool magnifies pixels under the cursor for surgical precision.) Note: You can achieve great results using just solid colors, but for even more impressive effects explore the Transparency panel on the Attributes tab. Using the samples in conjunction with the Transparency tool, you can create highlights, 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 of predefined color fills in several categories: Linear, Radial, and Conical. Try applying some of the thumbnails to get a feel for the wide range of possibilities. If you want to switch back to a clear fill, click None in the drop-down list.
In passing, right-click on the box object itself and note the available Line..., Fill..., and Transparency... options that let you adjust all these properties.

As a mini-project, you might try creating your own Home Page button by overlaying a text frame on an unfilled shape. Select both objects, then click the little Group button to join them temporarily. Grouping lets you move or edit a bunch of objects as if they were one object; you can still edit individual component objects by Ctrl- clicking it. To separate (ungroup) the objects, click the button again. In the next chapter we’ll see how to add a hyperlink!

Working with Graphics, Animation, and Multimedia 63

Manipulating objects

You already know how to select, move, resize, and group objects. Here are some additional tricks you can carry out on selected objects. You might try them out on your sample photo and box graphics!

♦ Use the Rotate tool to rotate an object around its top left handle. Select the object, then drag one of its handles. (To switch quickly to the Rotate tool, position the cursor over an object’s handle and press the Alt key.)

♦ Use the Crop tool to crop (or trim) objects. Select the object, then drag one of its handles inward. You can also overlap a shape on the object, select both objects, and use Tools/Crop to Shape ♦ 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 begin dragging the object. To draw a shape with constrained dimensions—for example, a square or circle—hold down the Shift key while drawing or resizing it. ♦ To add more than one object to a selection, hold down the Shift key while selecting additional objects. This is handy for moving a cluster of objects while keeping them aligned with each other. ♦ To duplicate an object, select it, then press and hold the Ctrl key and drag out a copy. ♦ Use the WebPlus layout tools—including rulers, guides, the dot grid, and the Snapping button—to position and align items with precision for a professional appearance.

64 Working with Graphics, Animation, and Multimedia

Editing colors

By now you’ve had a chance to apply colors from the Studio’s Attributes tab to various kinds of objects. We’ve also described how you can employ scheme colors as a “paint-by-numbers” system that allows you to quickly swap one set of colors for another throughout your site. WebPlus gives you a large assortment of gallery colors to start with, and a wide variety of built-in color schemes... but it should come as no surprise that you can easily edit the colors, add new ones, and store custom colors and schemes for later use. Each WebPlus site has a particular set of solid colors, known as a palette, which appears as a set of gallery swatches in the Attributes tab’s Color panel. However, a site can also include colors that aren’t part of its palette, and hence don’t appear in the Color panel gallery. For example, you might apply a gallery color to an object and then modify its shade/tint value, creating a unique color. To add a custom color to the site’s palette (so it appears in the gallery), right-click any sample in the Color panel gallery and choose Add..., or (to add an object’s solid fill color) right-click the object and choose Add Fill to Studio. To edit a specific palette color, right-click it and choose Edit.... In each case, the Color Selector dialog appears. You can choose a preferred color model (RGB, HSL, or CMYK), mix a new color, then click Add to Palette or OK to update the site. Color schemes revisited In Chapter 4 we mentioned that each color scheme includes three adjunct colors. Two of these apply to Hyperlinks and Followed Hyperlinks; the third defines the page Background color. You have the option of defining a tiled (repeated) picture, usually a bitmap pattern, which works just like desktop “wallpaper”—so a small bitmap can go a long way. The color scheme sample shows if it uses a tiled bitmap. Note that even in this case, the defined Background color is still active and will show through transparent regions (if any) in the bitmap. To modify or create a color scheme, choose Scheme Manager... from the Tools menu (or after right-clicking any color scheme sample). The Scheme Manager appears, with the current scheme colors shown on the Edit tab. Working with Graphics, Animation, and Multimedia 65

Each of the scheme colors has its own drop-down list, showing available colors in the WebPlus palette, with access to the Color Selector (see above) for defining new colors. To select a different scheme for editing, switch to the dialog’s Schemes tab and pick one from the scrolling list. When you’re done editing colors, you have two independent options. You can click Save Scheme... if you want to store the modified scheme in the Studio’s Schemes tab gallery, and/or click OK to apply the scheme to the current site. Note that you can override the Scheme Manager settings for adjunct colors. Individual hyperlinks can specify their own color, and master pages (or even pages) can use a custom background. See online help for details.

Advanced effects

With WebPlus, you don’t have to be an artist to achieve amazing special effects with text, photos, lines, and shapes! Here’s a short list of techniques you can explore: WebPlus provides a variety of filter effects that you can use to transform any object. Choose Filter Effects... from the Format menu and use the dialog to apply one or more effects to the same object.

♦ 2D effects include shadows (for example, drop shadows), glow, bevel, and emboss.

66 Working with Graphics, Animation, and Multimedia

♦ 3D effects go beyond 2D to create the impression of a textured surface on the object itself. Bump Maps superimpose depth information for a bumpy, peak-and-valley effect, while Pattern Maps contribute color variations using a choice of blend modes and opacity, for realistic (or otherworldly!) depictions of wood grain, marbling, and blotches or striations of all kinds.

♦ Feathering is a filter effect that adds a soft or blurry edge to any object. It’s great for blending single objects into a composition, vignetted borders on photos, and much more.

Instant 3D isn’t a filter, but a separate command that lets you quickly transform flat shapes and text into three-dimensional objects, with precise control over settings like extrusion, rotation, lighting, and texture!

The Studio’s Object Styles tab includes multiple galleries of predesigned styles that you can apply to any object. Each object style can include settings for up to seven object attributes: line color, line style, fill, transparency, filter effect, font, and border. The freedom to include or exclude certain attributes, and the nearly unlimited range of choices for each attribute, makes this a powerful tool in the designer’s arsenal. To modify an object style, simply right-click its gallery thumbnail and choose Edit.... To create a new style based on an existing object’s attributes, right-click the object and choose Object Style>Create. If you’re looking for a way to create fanciful geometric forms or unique typographic effects, don’t overlook the Mesh Warp tool, with a fully- loaded flyout of preset envelopes for distorting shapes and text, and its own special toolbar for editing the “mesh” or grid that controls the imposed curvature: Working with Graphics, Animation, and Multimedia 67

And don’t forget that there are several ways to put artistic text on a path. For example, you can start with a line or shape object and use the regular Artistic Text tool to add text along it. Or select both an artistic text object and a separate line/shape object and use Tools/Fit Text to Curve to combine the two. Yet another method is to select some text, then click the Path flyout on the Text toolbar and choose a preset path for the text to flow along:

Adding animations

WebPlus lets you add several varieties of eye-catching animation effects to any Web page: animated marquees (scrolling text banners), GIF animations, and Shockwave Flash (.SWF) files. Using Wizards, you can preview the animation and/or customize the effect. Once placed into your Web site, the animations appear static, but they will spring to life once the site has been exported and a visitor views your page in a Web browser. Let’s see how easy it is to add an animated GIF.
On the left toolbar, click to expand the Web Objects flyout and click the Insert Animated GIF button. The Animated GIF Wizard appears.
Click Next and select an animation category. We’ll leave you on your own to browse through the collection. Just click a title on the list, and watch the animation in the window.

68 Working with Graphics, Animation, and Multimedia

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

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

You may wish to try the animated marquee effect, too—click the Insert Animated Marquee button on the left toolbar.
Before continuing to the next chapter, remember to save your work.

Adding sound and video

WebPlus lets you augment your Web pages with sound and video files in a variety of standard formats, including both non-streaming and streaming media. As noted above, it also supports Flash animation, a movie format in its own right. You can include linked sound or video, triggered by a mouse click (for example on an icon or hyperlinked object. In addition, you can define background sounds where a sound loads and plays automatically when a specific page is first displayed in the visitor’s Web browser. Working with Graphics, Animation, and Multimedia 69

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

Clicking the Insert Sound Clip or Insert Video Clip button on the Tools toolbar’s Web Objects flyout lets you choose whether to link the clip from a standard icon (supplied by WebPlus), from an external picture file of your choice, or via an inline media “player” (again supplied by WebPlus). With the third option, a marker appears on your page where the player will be shown after the page is published. Using any of these approaches, you can select or deselect the Embed option. When you publish your site, WebPlus takes care of exporting and copying both embedded and non-embedded files. Note that you won’t be able to play back or edit sound or video files in WebPlus; you’ll need to use an external media editor.

Design tips

Graphics You can obtain pictorial content in lots of ways: scanning, grabbing screen images, using clip art, creating from scratch. No matter where you get an image, you’ll need to modify it in some way: cropping or enhancing it, adding text, applying a special effect, combining it with another image. For these tasks, you don’t have to be a great artist, but you do need to know your way around a paint program like Serif PhotoPlus. Make sure you’ve got a package that can save to the .GIF format. Whichever program you’re using, the information and advice in this section will help you use it effectively with WebPlus. Before moving on to some more technical aspects of enhancing Web graphics, let’s review a few visual design precepts with special relevance for Web pages in general. As in other sections of this chapter, we’re interested in respecting the way people actually experience Web pages.

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

70 Working with Graphics, Animation, and Multimedia

♦ 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 a dozen per page, including background, body text, links, and graphics, is about right to lend your site a professional appearance. Using a color scheme is an excellent way to keep things in check. (Plain white or light backgrounds are favored.) Pick no more than two dominant colors per page; the further any other color is from these “dominants,” the less space it should occupy. ♦ Elements with similar form or function (for example, all section heads or horizontal rules) should share the same color. ♦ Try varying the artistic forms you use. Throw in a photograph or two—even if they have no special relevance to your site, they’ll enhance its visual appeal on a decorative level as long as they blend into a compositional scheme. Think about using a clip art photo 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 page look closed, static, and amateurish. Rounder and softer-edged images tend to open up the page. ♦ Include graphic effects that combine hard-edge and soft-edge; drop shadows are a good example. The soft-edge effect known as anti-aliasing is one of the basic tricks of the computer graphics artist. The effect gets rid of “jaggies” along edges by subtly applying intermediate colors. To the human eye, anti- aliased text on-screen (especially at larger point sizes) appears of higher quality than text without the effect. In general, always use anti- aliasing for your graphics and headline text, unless the image contains only straight lines, edges, and outlines. As shown in the simple sketch below, your design can include page elements that blend with master page elements. These might include portions of a logo, header, navigation bar, and so on. You’ll need to zoom in closely and adjust the objects on one or both layers to achieve precise registration.

Working with Graphics, Animation, and Multimedia 71

Choosing the proper format and settings for Web images is vital. WebPlus relies on global settings to determine how each type of picture should be exported when you publish the site. By default, any image you inserted as a GIF, JPEG, or PNG is exported as the original file, using its original file name. All other graphics are converted to PNGs. If you wish, you can alter these global settings (on the Graphics tab of File/Site Properties...), and you can always use the Web Export Manager Wizard (Web Export Manager... from the Tools menu) to change the export settings for individual images. The Wizard lets you check just one selected image, a range of pages, or the whole site. For each image, you can specify the output format: .GIF, .JPG, .PNG, or the default site settings.

Here’s some very general advice on which Web image formats to use when importing. There’s more detail on formats and conversion options in online help.

♦ Use the Import Picture button (or Insert/Picture... command) to bring images into WebPlus, rather than pasting them via the Clipboard. The fewer filter transformations an image has to undergo, the better. ♦ The .GIF format is good for low-color, non-photographic images with sharp edges—for example charts or screen-capture text. The format is limited to 256 colors, so it’s fine for grayscale photos as well. ♦ For photographic images and high-color, soft-edged graphics, .PNG or .JPG rather than .GIF are preferred formats.

72 Working with Graphics, Animation, and Multimedia

♦ With JPEGs, image quality goes down (along with file size) as the compression setting increases. With high compression, some images may still look fine, but photographs in particular will visibly degrade. Preview your site, and let your own eye be the judge. You can adjust the global or local settings for .JPG compression as required. ♦ For images using variable transparency, use the .PNG format.

Low-color systems Note: If you’re quite sure all your intended visitors can display more than 256 colors, the following section isn’t required reading. On the other hand, the knowledge is likely to prove useful when working with any on-screen graphics, just as knowing basic color theory serves you in the realm of printed sites. Bear in mind that not all your visitors’ computers will match your own for graphic display. Like the .GIF format, some monitors are still limited to 256 colors. It’s generally a good idea to switch your display to 256 colors and test the page in a browser before finally publishing it. This will ensure you’re using colors in a way that won’t present problems when displayed on average systems. The more you know about color palettes and image formats, the fewer display problems are likely to creep in. A major constraint imposed by 256-color systems is that not all systems use the same 256 colors. The operating system reserves a certain number of palette slots for “system colors,” and system palettes differ, for example, between Windows and Macintosh computers. Applications, including Web browsers, declare their own palettes and use 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 say you’ve created a graphic with some solid color areas, but the user’s browser can’t display one of those colors. So the browser dithers the color, resulting in a mottled and degraded image. If the solid color happened to include text, the text becomes less legible. Working with Graphics, Animation, and Multimedia 73

To prevent display of this kind, Web designers often use a Web-safe palette of 216 colors that don’t dither in Web browsers operating in 256-color environments. The safe palette is actually a 6x6x6 RGB “color cube” using evenly-spaced red, green, and blue values from 0 to 255 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. To create Web-safe colors in a paint program, define new colors using RGB values that are either 0 or divisible by 51. For your convenience, WebPlus includes two swatch panels incorporating the Web-safe colors. (Look for WEBSAFE1.GIF and WEBSAFE2.GIF in the /WEBPLUS/9.0/SAMPLES folder.) You can paste either one into your paint program’s “canvas” area and pick colors from it using the program’s eye dropper tool. Or you can load the supplied WEBSAFE.PAL palette so it’s used in the color selection table. It’s especially important when anti-aliasing graphics to ensure that the edge colors the program applies come from the safe palette. (You can also select the palette for use in a site via Tools/Palettes>WebSafe.plt.) As a rule, if you’re concerned with 256-color display, save low-color bitmap images created in your paint program in the .GIF format using the safe palette. Avoid using a unique palette per image; if you have multiple GIFs per Web page, different palettes may clash and all images will suffer. Performance “Performance” may seem like an odd aspect of graphic design, but it’s actually one of the key factors in how users will judge your Web site. As with colors, not all your users will have systems that match yours for speed. Technically, performance means load time: how long it takes for your whole page, including text and graphics, to display completely in a Web browser. In practice, it’s hard to measure, and subjective factors intrude. Connection bandwidth, server speed, and modem rating all play a part. As discussed earlier, it’s always wise to design the safe area of each page to give visitors something to look at, read, and/or think about, and thus offset the perception of delay while the rest of the page loads. Load time is a function of the total size of all the page objects that need to load; and graphics usually take up the lion’s share. That’s why we can talk about the “performance” of your page as a function of the total file size of its graphics.

74 Working with Graphics, Animation, and Multimedia

If you’re being considerate of users with dial-up modem connections you can work out your own rule of thumb. Assuming these users are willing to wait up to 20 seconds (because they’re probably accustomed to waiting) you can multiply that by 4K bytes per second, the throughput of a 1995-vintage modem. By that logic, if your pages exceed about 80KB in size you will start to alienate some fraction of your intended visitors. For comparison, a high-speed connection is about ten times as fast.
You can determine the actual size of your files by publishing one page at a time to a local folder (using File/Publish Site/Publish to Disk Folder...), then using Windows Explorer to examine the contents of the folder. View the files by date and Shift-select the most recent batch, then right-click and choose Properties to see the aggregate 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 make them no larger than they need to be to get your point across. Since file size increases as the square of each dimension, shrinking both height and width by 50% reduces the file size by 75%. Try to use the correct dpi setting for images before importing, rather than scaling large images down on the page. You can use the Size and Resolution dialog (accessible from the Picture toolbar) after importing to scale pictures and/or resample them so excessive dpi doesn’t waste bytes. Avoid large regions of transparency if possible. If you save graphics as GIFs (see above), you can take advantage of the fact that GIFs, unlike most other 256-color (8-bits-per-pixel “bit depth”) formats, don’t insist on using 8-bit pixels. If the number of colors in the image is 128, GIFs will encode using 7 bits; with 64 colors, 6 bits, and so on. As an experiment, we tried starting with a small image (some anti-aliased text) that only used 14 colors. With the paint program set for 256 colors, we saved as a .GIF, yielding a file size of 1204 bytes. After reducing the number of colors displayed in the paint 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 a dozen or more small GIFs per page, those little savings can really add up! Paint programs handle color reduction in various ways. Some let you set the image to either 16 or 256 colors, but not to 64 or 128; that’s still a help if your images require 16 or fewer. Ideally, you can save with an arbitrary number of colors, and the program will attempt to optimize the 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: Working with Graphics, Animation, and Multimedia 75

To reduce file size, reduce the number of colors in each image, and save as a .GIF file using the lowest acceptable bit depth your paint program will allow. If all this talk about image formats and bit depth has landed somewhere slightly over your head, we have two suggestions: (1) Spend some time with a good paint program and experiment with the techniques introduced here. (2) Point your Web browser to the suggested links at the end of the chapter. You’ll find a wealth of advice and examples to draw upon. Multimedia Considering all the cautionary advice here about reducing file sizes to achieve acceptable load time on home-based Web browsers, a foray into multimedia is clearly not for the faint of heart! Although WebPlus 9 allows you to insert both audio and video files—and will even embed the files in the original site to facilitate your efforts—from a design standpoint this feature should be regarded as rather experimental. WebPlus can incorporate a wide variety of audio and video files such as QuickTime, MPEG, RealAudio, and RealVideo, besides the “generic” Windows media types (.WAV for audio and .AVI for video). There are actually two sound playback options—background sound, where a sound loads and plays automatically when a specific page is first displayed in the visitor’s Web browser, and linked sound, triggered by a mouse click (for example on an icon or hyperlinked object). Linked video works like linked sound. These days, chances are your target visitors will be able to play media in any of the supported formats. But unless you’re sure they’ll have high-speed connections, file size is still a significant barrier. For example, a .WAV file for speech content consumes about 10K per second, and a compressed .AVI file for a postage-stamp-sized, 10 frame-per-second movie video without sound uses at least 35K per second. If you want an audio track along with your movie, add the two numbers together. MPEG compression can reduce file size significantly, but many Web visitors will still have to wait before that ten-second video clip knocks their socks off. If you (and/or your Web visitors) are on a local network or have extremely fast Internet access, however, the fact that audio and video are basically file downloads should not pose a problem.

76 Working with Graphics, Animation, and Multimedia

WebPlus, of course, doesn’t handle either audio or video natively—it cannot edit or play them back—so unless you rely on borrowed or clip media, be prepared to master a media editing application or know someone who can. (Any teenagers in the family?) The good news is that just because multimedia is a bit of a creative leap you can still have a lot of fun experimenting! For example, with Serif MoviePlus (and a digital video capture card or camcorder), you can produce your own digital movies and integrate them with your Web site. And don’t overlook the possibilities of creative audio. You can add entertainment value and interest with well-selected, short audio clips like single words or phrases, themes, sound effects, and the like. Or consider background theme music that loops while visitors peruse your home page. For longer clips, we suggest you use the inline option, which provides a small on-screen player. Visitors who don’t care for the audio will appreciate being able to click the stop button! In sum, while we wouldn’t recommend making non-streaming audio a centerpiece of your Web site, it’s certainly another way of introducing welcome variety to your pages. The constraints are real at this stage— but let your creativity rise to the challenge. Suggested links
www.webstyleguide.com Web Style Guide, 2nd ed. by Patrick Lynch and Sarah Horton of Yale’s Center for Advanced Instructional Media. Illustrated, annotated dissertation on all facets of Web interface design. Also available in book form.
www.efuse.com Attractively presented sequence of informational pages on planning, design, building, publishing.
www.serif.com Forums, updates, and tips for users of all Serif products. Online Glossary lets you browse the full version of our Desktop Publishing QuickReference.
www.sun.com/980713/webwriting/ Writing for the Web. Authored by Jakob Nielsen et al. (see Print resources), research-based guidelines 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, including Web Design A-Z. Working with Graphics, Animation, and Multimedia 77

www.webpagesthatsuck.com Vincent Flanders’ guided tour through examples of, ah, poor design. The site became one book, then a second, and (unfortunately) never seems to run out of fresh material.
www.webreference.com Comprehensive developer’s site, includes Developer’s Corner with how-to articles, sections on Graphics and Design. Part of internet.com’s WebDev network. Look for graphics tutorials by Wendy Peck and Dan Giordan, and Dmitry Kirsanov’s archived “Design Lab” columns.

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

For help on... Choose from the Then... ? Help menu... Aligning Contents list See topics in section “How to Grouping Edit Objects on the Page” Exporting Cropping Layering Other object actions

Lines and shapes Contents list See topics in section “How to Gallery and Portfolio Work with Lines, Shapes, Advanced effects and Effects”

Importing images Index Select “importing”

Optimizing images Index Select “pictures: optimizing” (Picture toolbar)

Setting image Index Select “Web sites, setting publishing options picture display options”

Animation Index Select “animation effects”

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

Color schemes Index Select “color: using color schemes”

Colors, fills, and Contents list See topics in section “How to transparency Work with Colors, Fills, and Transparency”

78 Working with Graphics, Animation, and Multimedia

Working with Hyperlinks and Interactivity

Working with Hyperlinks and Interactivity 81

In this chapter we’ll look at various ways you can enhance your WebPlus pages to improve the quality and variety of the visitor’s experience. If your site has more than one page, hyperlinking is essential—it’s what enables visitors to navigate through your site—and it’s easily accomplished. Hyperlinked text is common, but you can also create “hypergraphics” using not only hyperlinks but hotspots or rollovers. We’ll discuss how to integrate WebPlus navigation elements—and even improve on them a bit! Adding Java and HTML is somewhat more challenging, but if you’re technically inclined, WebPlus stands ready to support your efforts. Hyperlinking an object such as a word, a shape, or a picture means that a visitor to your Web site can click on the object to trigger an event. This event might be:

♦ A jump to a Web page (either on your site or somewhere else on the Web) ♦ The appearance of an E-mail composition window ♦ The display of a graphic or text file ♦ A fullsize version of a scaled-down (thumbnail) image

Hyperlinks and anchors

Let’s begin by experimenting with hyperlinks in your template-based site.
Open the HANDSON.WPP project again and zoom in on the upper half of the page.
Click for a text edit cursor at the start of the central text field (just below “Our Company”), type “About Us,” and press Return—just to give you something specific to work with.
Now drag over the text you typed to select it, then right-click it and

choose Hyperlink.... (You could also click the Hyperlink button on the Attributes toolbar, or choose the command from the Insert menu.) The Hyperlinks dialog appears, with a choice of possible link destinations. Right now “No hyperlink” is selected (you could use this choice later on if you wanted to remove a link from an object).

82 Working with Hyperlinks and Interactivity

Select A page in your site and more options become available at the bottom of the dialog. Click to expand the Page name list and choose the second page, “About Us.” Then click OK. The text you selected is now hyperlinked, and appears underlined by default, using the electric blue color defined for Hyperlinks as part of the site’s color scheme.
If you want to test the link right away, you can preview the site in an internal window (choose File/Preview Site>Preview in Window, or click the HTML Preview flyout on the Standard toolbar and choose the command). Note that the Page Locator on the HintLine is still available, so you can conveniently navigate from one page to another. That’s all there is to it! Now let’s consider linking to an anchor—a specific location on a page that’s intended to serve as the target for a hyperlink. Invisible to the Web page visitor, it typically marks a point within some text (such as the start of a particular section) or an image partway down a page. With pages as short as those in this particular template site, anchors won’t prove very useful, but we can at least see how they work... Logically, the anchor needs to exist before you can link to it, so your design process entails working backwards from the link’s target to the link itself. Working with Hyperlinks and Interactivity 83

Use the Page Locator (or any other method) to display the “News” page, and select the last word (“Samples”) of the frame at the lower right. Right-click it and the Anchor dialog pops up, asking for a name. The default name “Anchor1” is fine, so just click OK. This time there’s no visible change on the page, but WebPlus is keeping track.
Redisplay the Home page and this time right-click on one of the lemon-shaped graphics. Choose Hyperlink... and this time select An anchor in your site. In the Page name list, choose “News.” As you can see, the Anchors list lets you select your target from any anchor on the designated page. Since there’s just the one, go ahead and click OK.
Again, you can test the link in preview mode. If you set the display to 640x480 (using the floating Preview toolbar), you’ll be able to see how the browser window zeroes in on the actual anchor location when the page is displayed. If you tried the examples above, you learned that hyperlinking a graphic was just as easy as hyperlinking text. (Of course, linking from a meaningless graphic to a random word made no particular sense... but at least it proved the point!) Now that you’ve seen one way of creating a “hypergraphic” by linking the entire object, we’ll look at two other methods.

Using hotspots and rollovers

A hotspot is a transparent hyperlink region on a Web page. Usually placed on top of bitmap images, hotspots act like buttons that respond when clicked in a Web browser. They are especially useful if you want the visitor to be able to click on different parts of a picture (such as a graphical “menu” or map of your site). To give you an idea of how they work, we’ll need to create one.

Click the Insert Hotspot button (the first on the Tools toolbar’s Web Objects flyout). The cursor changes to a cross. Let’s place a hotspot over the lion’s face in the photo. (If your site doesn’t include the lion photo from the last chapter, just use one of the placeholder graphics.)

84 Working with Hyperlinks and Interactivity

Click slightly to the upper left of the lion, then drag down and right to draw a box. (You can adjust it later.) When you release the mouse button, the familiar Hyperlinks dialog appears, waiting for you to provide a target.
Select A page in your site and designate “Contact Us” in the drop-down list. Click OK.

Another approach to creating hotspots is to match a hotspot to an existing shape. Simply create the shape (see Chapter 5) and draw a hotspot as explained above. Then select both objects and choose Fit Hotspot to Shape from the Tools menu. The hotspot instantly conforms to the shape! The two objects will still be separate, so you can easily delete the shape if it’s no longer needed. 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 can use. You can also add extra nodes to a hotspot, allowing it to be fit into any irregular region; there’s more on this in online help. Rollover graphics combine several images with HTML code in such a way that a different image appears (or some other event is triggered) depending on how the user’s mouse “rolls over” the object. For example, a rollover button might appear “down” or “up” depending on whether the user’s mouse was over it. A number of theme graphics exhibit rollover behavior.

To create your own rollovers in WebPlus, you’ll first need to import a layered graphic created in a separate graphics program, such as Serif DrawPlus. Each layer will contain a separate picture for a particular “state” of the button object. WebPlus then lets you define the rollover behavior, automatically generating the necessary event-trapping code for the states you define. For details, consult online help. Working with Hyperlinks and Interactivity 85

Navigation elements

If you’ve used the WebPlus Site Structure tree to develop a logical arrangement of sections and levels for your site, there’s no reason not to install a navigation bar (introduced back in Chapter 3). In addition to this valuable basic component, the structure of your site may call for other kinds of navigational links. For example, suppose several pages comprise a natural sequence. Perhaps a long story or report has been broken into several parts, or directory listings are arranged alphabetically. In such situations, you can create a browse sequence using a mini-navigation bar that lets the user step forward or backward through the series. Previous and Next buttons can accomplish this nicely, by linking between adjacent “sibling” pages on the same level. The Studio’s Themes tab provides a ready-made assortment of these and other navigation elements as theme graphics. Chapter 3 outlined the advantages of using theme graphics for navigation: they automatically adapt to changes in your site structure, they’re easy to customize, you can instantly switch to a different design set, and so on. As with anything that’s “free,” however, theme-based navigation elements come with a few limitations. Fortunately, with a little extra effort (still far less than if you had to construct everything from scratch!) you can address these minor shortcomings and achieve superior results. Ideally, a navigation bar should do more than look pretty and enable users to get around the site. It should also provide locational feedback within the site, so users know where they are. For example, when the user jumps to the “About Us” section of the site, the “About Us” button should highlight or change color—something to indicate the current location. Theme graphic navbars don’t (as yet) provide this kind of visual feedback—their buttons are programmed to respond to mouse events, but other attributes such as color are fixed. If you were to develop a navigation bar from scratch, you could prepare a unique set of buttons for each section of the site, using a different color or font style for the button representing the “current” section. Or you could place a basic navbar on the master page layer and overlay the current section’s button with a single, different button on each page. The extra effort would be worth it, considering you’d undertaken to build the navbar in the first place. But with theme graphic navbars available, there’s simply no sane reason to build one by hand. Instead, consider this “best of both worlds” approach...

86 Working with Hyperlinks and Interactivity

(1) Start by selecting a navigation bar from the Themes tab, then customize it to include the necessary buttons and to look the way you want. (2) Incorporate it on the pages of your site, preferably on the master page layer. (3) Design a bullet, pointer, or some other graphic (one that complements the color and design of your navbar buttons) and paste it on the page layer in the correct place to denote the current site location. Make sure this “indicator” doesn’t overlap the button underneath. Here’s a simple sketch:

Providing you wait until your page layout (i.e. the placement of the navbar) is final before placing these indicators, one pass through your pages, pasting as you go, will suffice—and will greatly enhance your site’s navigability.

About HTML and Java

HTML, of course, is the language “behind” basic Web pages—the actual descriptive code that tells a browser what to display and where to display it. While WebPlus doesn’t support full-fledged HTML editing, it does allow you to add extra HTML code to a page. Using this approach, you can include HTML and JavaScript fragments generated by another application, copied from another Web page, or perhaps that you’ve written yourself. To insert HTML, choose Web Objects... from the Insert menu and select HTML... from the submenu (or use the Tools toolbar button). Then use the dialog to enter the HTML code. WebPlus inserts a marker into your site at the site where the code will run. Since you won’t be able to see the effect of the HTML until you preview the exported site, be careful to position the marker correctly. (Tip: You can store HTML code fragments in the Portfolio.) Working with Hyperlinks and Interactivity 87

Java is a cross-platform, object-oriented programming language used to create mini-applications called applets that can be attached to Web pages and that run when the page is viewed in a Web browser. WebPlus lets you add Java applets to your Web sites. You don’t have to write your own! Plenty of applets are available online—for example animation, interface components, live information updating, two-way interaction, graphics rendering, live updating, streaming audio and video, games, and many more. To insert a Java applet, choose Web Objects... from the Insert menu and select Java Applet... from the submenu (again, there’s a button on the Tools toolbar). In the dialog, list the applet’s component files as well as any necessary parameters (as described in the applet’s documentation) that specify exactly how the applet should run. You don’t necessarily need to understand the underlying 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 site at the site where the code will run. The marker’s dimensions probably won’t correspond exactly to those of the applet when it’s running, so plan your page layout accordingly, and the more preview tests you can run (using various versions of different browsers), the better.

Design tips

Hyperlinks and anchors The World Wide Web has finally popularized the concept of hypertext, which has been around for a couple of decades. We’re now accustomed to clicking ‘round the world in a matter of seconds! Yet the skill of authoring effective hypertext documents is still not widespread. Here are several tips for linking:

♦ Use links in text sparingly: quality, not quantity, matters. If you want readers to finish reading your paragraph, don’t fill it full of invitations to jump elsewhere. ♦ Don’t let links in text disrupt the flow of your writing. Avoid sentences like: “Click here to learn about linking text.” An improvement would be: “Linking text can greatly enhance your Web site.”

88 Working with Hyperlinks and Interactivity

♦ If you have more than a couple of links to related material, consider listing them separately (e.g. as a See Also list), perhaps with a bit of graphic embellishment. ♦ If your site has a group of interrelated topics, it may be more efficient to cluster them into a section or sub-section, with its own main page, rather than creating lots of sideways links between the topics themselves. ♦ For sequential material, you can create a browse sequence e.g. using Previous/Next buttons or a special navbar. ♦ As you’re building your Web site, you can use Tools/Hyperlink Manager... to get a overview of all the links in your site. You can see the destinations at a glance, check URLs, and display any hyperlink for closer inspection. The Anchor Manager, also on the Tools menu, provides similar renaming and removal functions for anchors.

Hypergraphics

♦ You can have fun designing your own buttons using combinations of objects and hyperlinks. As for the buttons themselves, they can have a traditional box or oval shape, or any shape you want. The QuickShapes flyout features lots of possible shapes (including a “QuickButton”), and Artistic text works fine. Remember that whenever the browser’s mouse pointer rolls over a hyperlink, it will change to a hand. If the object looks like a button, users will find it and know what to do with it. You can accentuate button labels by separating them from each other (e.g. with lines or borders); adding bullets or triangles; or using a filter effect on the text, such as a drop shadow or emboss. ♦ Hotspots, which are themselves graphic elements, are not recommended for use over text blocks. They force the text to be converted to a graphic when the page is published, which aliases and often distorts the characters. On the other hand, hotspots over a picture don’t trigger conversion. So if you want clean lettering as part of your hypergraphic, create it in your paint program. (In general, use the .GIF format for all non-photographic images you create for WebPlus Web sites, and work in 256-color mode. See the tips in the “Graphics” chapter.) Working with Hyperlinks and Interactivity 89

♦ Hypergraphics give you an alternative to using hyperlinked text, which is best reserved for use within body text. For example, if you had a set of pages arranged alphabetically, you might like to create an alphabet users could click on to jump to a particular page. This could be done with a string of 26 hyperlinked text characters, but a creative alphabet graphic with hotspots over each letter would undoubtedly end up looking better. ♦ You can use hypergraphics to create fanciful pictorial menus, visual indexes, maps, diagrams, and other clickable previews of the content on your site. As we said, they’re fun. Use them!

Navigation elements

♦ If you’re just starting to develop your site, make sure the overall structure is clear before you design a navigation bar. Decide what your sections will be, then choose a concise button label for each section. Sketch some designs on paper. If there’s a chance you may add more sections in the future, allow room for the navbar to accommodate a new button or two. ♦ Provide links to the Home page as well as to the various sectional main pages. ♦ Users should perceive the navigation bar as a fixed component of the page background throughout the site, keep it in the same position from one section to another. ♦ Finally, while we don’t encourage long pages that force the user to scroll on and on, it’s handy to know that a hyperlink to the current page will force the browser to redisplay the top of the page. So in situations that seem to call for it, you can include a TOP button (typically with a small 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 them climb all the way back up?

90 Working with Hyperlinks and Interactivity

For more help on hyperlinks and interactivity

The fact is, you now know almost all there is to know about hyperlinking and hotspots! For additional details, see online help.

For help on... Choose from the Then... ? Help menu... Creating hyperlinks Index Select “hyperlinks” or and anchors “anchors”

Setting hyperlink color Index Select “hyperlinks, setting color of”

Creating and editing Index Select “hotspots” hotspots

Adding rollovers Index Select “rollover buttons”

Hyperlink Manager Index Select “hyperlinks, using the Hyperlink Manager”

Navigation elements Index Select “navigation elements”

Adding Java Index Select “Java applets”

Adding HTML Index Select “HTML, adding code to Web pages”

Previewing, Publishing, and Maintaining the Site

92 Previewing, Publishing, and Maintaining the Site

Previewing, Publishing, and Maintaining the Site 93

It’s time to rehearse the final phase of preparing your Web site! In this previewing and publishing phase, as we’ve mentioned, WebPlus takes the project‘s pages and converts them to HTML and graphics (images) so that a Web browser can display them. You can publish either to a local folder or to an Internet-based Web host. Previewing is similar to publishing locally, except that the exported files are temporary, intended for immediate viewing in your own Web browser.

Optimizing the site

Before you preview or publish, it’s wise to take advantage of built-in WebPlus tools for checking your site’s content and structure. You can run the Spelling Checker Wizard, Proof Reader Wizard, and Thesaurus to inspect and improve your text. The Text Manager displays a list of all the text stories and free text used in your site, and the Layout Checker Wizard can locate problems like orphaned pages, invalid anchors, overflowing text frames, or nonstandard fonts. You’ll find full details on these features in online help (see the table at the end of the chapter).

Previewing the site

Previewing the site at least once before actually publishing it is essential. Only by viewing the pages in a Web browser can you make sure that headlines and body text appear the way you intended, page elements fit properly, animations play at the right speed, and links between pages make sense. If you’ve been following the hands-on sequence, you’ve had several opportunities to try previewing the template-based site, both in an external browser and in an internal WebPlus window. Internal preview means that WebPlus must re-export each page whenever it’s displayed, in case any page elements have been updated. For a closer simulation of the user’s actual experience, you can preview the site in an external browser, which can be any browser installed on your system.

94 Previewing, Publishing, and Maintaining the Site

Open your HANDSON.WPP project and expand the HTML Preview flyout on the Standard toolbar, then choose Preview Site in Internet Explorer from the submenu. We’ll assume you have IE installed; otherwise, select your browser of choice. If you have more than one browser installed, you can choose Browser Preview List... to customize which are displayed on the submenu. Also, note that there’s a Preview Page command for single pages. The WebPlus site is exported to a temporary folder, and your Web browser launches, displaying the site’s Home page. (If your system tries to connect to the Internet as the browser launches, you can dismiss the connection dialog. No Web connection is required for previewing.) If you previously saved the animated GIF on the Home page, you’ll see it come alive now!

As you move the mouse pointer over hyperlinks or hotspots, you’ll see the cursor change to the familiar “hand.” Click the hotspot you placed over the photo (notice that its border line is now invisible), and you’ll jump to the “Contact” page.

Previewing gives you a chance to see the site the way your visitors will experience it. Keep track of how fast your pages display in the browser, and remember that the Web will slow them down somewhat! Check out each page and take notes on any problems, then go back to WebPlus and make any necessary corrections. Using the Preview Page command lets you preview just one page instead of all the pages. Note that all previous temporary files are deleted each time you preview. This means, for example, that if you’ve already previewed the whole site, and then choose to preview just one page (say, to check revisions), the previously exported pages will no longer be available. If this is inconvenient, you may wish to use the Publish to Disk Folder method, described next. Previewing, Publishing, and Maintaining the Site 95

Publishing to a local folder

This option, like previewing, exports your project’s pages to HTML and graphics files. The key differences are:

♦ You designate exactly where the files should go, instead of having them written out to temporary files, which are not really under your control. As noted above, each time you use Preview, even if you’re only previewing one page, your previous set of temporary files disappears. ♦ You can publish selected pages, rather than just (as when previewing) all or one. ♦ Your Web browser doesn’t launch automatically. Instead, you’re given the option of launching it. If it’s already open, simply decline the option, then switch to your browser’s window and use its Reload or Refresh command to display the updated page.

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

Click the Publish Site to Disk Folder button on the top toolbar. In the dialog, locate the folder where you wish to store the output files, or create a new folder.
In the Page Range tree, select which page(s) to publish, then click OK.
Once the publishing process is completed, accept or decline the option to launch your Web browser.

96 Previewing, Publishing, and Maintaining the Site

Publishing to the World Wide Web

WebPlus makes publishing to the World Wide Web almost as simple as publishing to a local folder! The process uses a built-in FTP (File Transfer Protocol) routine that connects with the remote server and then uploads your files. WebPlus lets you set up multiple publishing accounts—for example, if you have more than one service provider, or want to publish to more than one folder location on a server. Before publishing for the first time, you’ll need to gather some basic login information from the service provider (as detailed 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. If this is your first time publishing to the Web, the Account Details dialog will appear; otherwise you’ll see Publish to Web. You’ll need to set up at least one account before you can proceed.

To define a new account, enter the information you’ve gathered:  The Account name can be any name of your choice. You’ll use it to identify this account in WebPlus (in case you have more than one).  The FTP address of your Web host will be a specific URL starting with “ftp://” as supplied by your service provider.  You’ll also need a Username and Password as pre-assigned by the provider. Most likely these will correspond to e-mail login settings. Be sure to enter the password exactly as given to you, using correct upper- and lower-case spelling, or the host server may not recognize it. Check Save password to record the Previewing, Publishing, and Maintaining the Site 97

password on your computer, if you don’t want to be bothered re- entering it with each upload.  Unless directed by your provider, you can leave the Port number set at “21.”  Leave the Folder box blank unless directed by your provider, or if you want to publish to a specific subfolder of your root directory.  Click OK to close Account Details. Once you’ve set up at least one account, the Publish to Web dialog appears. This lets you manage multiple accounts and give the go-ahead to publish files.

Select the account you want to use (if you’ve more than one). You can also use the dialog at this point to Add another account, Edit a selected account (for example, enter a new username or folder location), or Delete an account.
Make sure your Username and Password are correct, then click Upload. WebPlus seeks an Internet connection or establishes a new one, and connects to the remote server. Only pages that have been updated since the last “publish” are transferred. You’ll see a message when all files have been successfully copied.
Now you’ll be able to see your page(s) “live” on the Web. Point your Web browser to the URL that includes the path to the host server plus the subfolder (if any) to which you published.
Congratulate yourself!

98 Previewing, Publishing, and Maintaining the Site

Maintaining your site

Once you’ve published your site to the World Wide Web (see the previous section), you’ll need to maintain the pages on your site by updating content periodically: adding or changing text, images, and links, then republishing one or more pages. Making the content changes is easy enough, as all the originals are right there in your site! When you republish pages into the same folder, duplicate .HTML file names are always overwritten. Nevertheless, over time you may find that unused files have proliferated, and you’ll need to do some housekeeping. Within local folders, one method is to sort your Explorer or My Computer window contents by date, then use the “Modified” attribute to determine which files to keep (i.e., the set most recently published). For thorough cleanup, periodically publish the whole site to a new folder and delete the old one. To perform “housekeeping” tasks like file/folder deletion and renaming on your published Web site, you can use the WebPlus Site Maintenance feature. Choose Publish Site from the File menu and select Maintain Web Site... from the submenu. The Specify Account Details dialog appears. Select the FTP account and confirm the details (as when publishing the site), and click OK. Once the connection is made, the Maintain Web Site window appears.

Previewing, Publishing, and Maintaining the Site 99

In the window, you can use standard Windows Explorer conventions to perform maintenance tasks. Click on the column headers to change the current sort, or drag to change the column width. The top row of buttons lets you view up one level, create a new folder, delete a selected item, or choose the view setting. To rename a file or folder, click its name twice and then type, or right-click it and choose Rename. You can Ctrl-click to select multiple files or Shift-click to select a range of files. Click the top-row Delete button or right-click an item and choose Delete. To move one or more selected files, drag them into the destination folder. When you’re done, click the window’s Close button to terminate the FTP connection and return to WebPlus.

Design tips

The question of how frequently to update gets to the heart of “site maintenance.” Having spent days or weeks designing and then publishing an attractive site with intuitive navigation and palatable content, you’ve only just begun. The cycle is completed when visitors start arriving, and their feedback is critical. Be direct about asking for comments, and make sure you’ve included an e-mail return link. Challenge your users to respond! Give them some specific choices to make (“Would you rather see A, B, or C on this page?”). Let them feel they’re contributing. For you, there will be an enormous difference between operating in a void and receiving even one or two responses. Think of your site as a newsletter with site deadlines. As a rule of thumb, don’t let more than two weeks go by without making visible changes. The changes don’t have to be dramatic; the main thing is to reinforce the perception that your site is dynamic, not static. The Home page should change most often: add new links, or replace old graphics with 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 you expected. As a rule, keep the background and section organization intact so as not to confuse repeat visitors. Sections that began as a single page will require a sectional main page as soon as a few new pages have been added. If you’ve got a navigation bar with a button already linked to the original page, turn that target page into the main page to keep the link intact. It’s usually easier to migrate content to a new page than to rewire existing links. (You can see the content, but you can’t easily see the links.)

100 Previewing, Publishing, and Maintaining the Site

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

For more help on publishing-related tasks...

Before publishing your actual Web site, you’ll probably want to review the WebPlus proofing options mentioned above, and learn about adding search engine descriptors. Or you may want details on publishing to an alternate Web server.

For help on... Choose from the Then... ? Help menu... Printing Contents list See topics in section “How to Previewing Print, Preview, and Publish to Publishing the Web” Maintaining

Using proofing tools Index Select from “proofing tools”

Adding search engine Index Select “search engines” descriptors

Gathering WWW Index Select “publishing Web sites, server information to World Wide Web” and consult note on “Gathering server information”

Where should I go from here?

The answer should be self-evident: Get straight back to work with WebPlus! Your own experience will be your best teacher. We’re proud of WebPlus, and hope you enjoy using it to develop a Web site you can be proud of, too. Thanks for joining the Serif product family... and here’s hoping we see you online soon!

Index

2D and 3D effects, 65 E A editing text, 49 alternate text, 42 effects, 65 Anchor Manager, 88 anchors, 81 F animations, 67 anti-aliasing, 70 feathering, 66 artistic text, 47, 51, 67, 88 fill property, 61 Attributes tab, 51, 61 filter effects, 65 Fit Hotspot to Shape command, 84 B Fit Text to Curve command, 67 Followed Hyperlink color, 53 Background color, 64 Frame tool, 48 browse sequence, 85, 88 frames, 47 browsers, 13 Freehand Line tool, 59 FTP, 96 C G caps (line ends), 61 child pages, 30 GIF, 69, 71, 74, 88 Clipboard, 71 gradient fill, 51 color, 61 grouping objects, 62 color palettes, 72 guides, 63 color schemes, 20, 52, 64 contrast, 58 H Convert to Picture, 59 copyright notice, 41 Help on Help, 16 Crop to Shape command, 63 HintLine, 18 Crop tool, 63 Home page, 13, 42 Curve Creation toolbar, 60 hotspots, 69, 83 Curve toolbar, 60 HTML, inserting code, 86 Curved Line tool, 59 hypergraphics, 83, 88 Hyperlink color, 53 D Hyperlink Manager, 88 hyperlinks, 69, 81 design hypertext, 87 page layout, 39 pre-planning, 27 I site structure and navigation, 29 tips, 53, 69, 87, 99 images. See pictures dithering, 72 importing dot grid, 63 pictures, 71 drop shadow effect, 65 text, 50

installation, 10 parent and child, 30 Instant 3D, 66 rearranging, 34, 37 safe area, 40 J width, 41 parent pages, 30 Java, inserting applets, 87 path text, 51 joins (line corners), 61 Picture toolbar, 74 JPEG, 71 pictures alternate text, 42 anti-aliasing, 70 L brightness and contrast, 58 color palettes, 72 Layout Checker Wizard, 93 Convert to Picture, 59 layout grid, 63 dithering, 72 line (outline) property, 51, 61 GIF format, 69, 71, 74, 88 lines, drawing, 60 hotspots, 83 Link button (text frames), 48 See importing, 71 links. hyperlinks JPEG format, 71 Picture Effects, 59 M Picture toolbar, 58 PNG format, 71 maintaining Web sites, 98 recoloring, 59 marquees, animated, 67 rollover graphics, 84 master pages, 35, 37 size, 58 mesh warping, 66 title text, 42 Web Export Manager, 42, 71 N Web-safe palette, 73 PNG, 71 navigation Pointer tool, 47, 57, 60, 61, 84 bar, 31, 32, 33, 85, 99 pre-planning, 27 browse sequence, 85, 88 previewing pages and sites, 17, 82, 93 concept, 33 project file, 13, 93 elements, 20, 33, 85, 89 Proof Reader Wizard, 93 site structure, 29 Publish Site to Disk Folder command, 74, 95 Publish Site to Web command, 96 O publishing Web sites, 14, 95, 96 object styles, 21 offsite links, 38 Q outline (line) property, 51, 61 QuickShapes, 61, 88 P R Page Locator, 19, 36, 82 pages Registration Wizard, 9 adding and deleting, 37 Revert command, 22 height, 41 rollover graphics, 84 Home page, 13, 42 Rotate tool, 63 layout and design, 39 ruler guides, 63 master page, 35, 37

editing, 49 S importing, 50 Insert Date or Time, 40 safe area, 40 on a path, 51 Scheme Manager, 64 tables, 47, 52 section/level model, 29 text frames, 47 shadow effect, 65 Text Manager, 93 shapes theme graphics, 20, 33, 49, 84, 85 cropping to, 63 Thesaurus, 93 drawing, 60 title (of site), 40 Site Structure tree, 19, 30, 32, 34, 36, title text (pictures), 42 85 toolbars site structure, concept, 29 customizing, 22 sites tools Home Page, 13, 42 Artistic Text, 51, 67 maintaining, 98 Crop, 63 pre-planning, 27 Curved Line, 59 publishing, 14, 95, 96 Frame, 48 Site Properties, 58 Freehand Line, 59 structural design, 29 Insert Table, 52 title, 40 Mesh Warp, 66 size, 58 Pointer, 47, 57, 60, 61, 84 Size and Resolution, 74 QuickShape, 61 snapping, 63 Rotate, 63 sound clips, 68, 75 Straight Line, 59 Spelling Checker Wizard, 49, 93 Transparency, 62 starting WebPlus, 15 transparency, 62 Startup Wizard, 15 Straight Line tool, 59 V Studio Attributes tab, 51, 61 video clips, 68, 75 customizing tabs, 22 view options, 22 Object Styles tab, 66 warping, 66 overview, 19 system requirements, 9 W T Web Export Manager, 42, 71 Web templates, 13, 16 tables, 47, 52 Web-safe palette, 73 templates, 13, 16 Word Count, 49 text World Wide Web, 13 artistic text, 47, 51, 67, 88 WritePlus, 49