WebPlus 8.0 Companion
©2002 Serif (Europe) Ltd. All rights reserved. No part of this publication may be reproduced in any form without the express written permission of Serif, Inc. 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 8.0 © 2002 Serif (Europe) Ltd. Companies and names used in samples are fictitious. Clipart samples from Serif ArtPacks © Serif (Europe) Ltd. & Paul Harris Portions images © 1997-2001 Nova Development Corporation; © 1996-99 Cliptoart; © 1996-99 Focus Designs; © 1996-99 Hemera Technologies Inc.; © 1997-98 Seattle Support Group; © 1995 Expressions Computer Software Portions digital image content © 1997-2001 Hemera Technologies Inc. All rights reserved. TrueType font samples from Serif FontPacks © Serif (Europe) Ltd. Portions graphics import/export technology © AccuSoft Corp. & Eastman Kodak Company & LEAD Technologies, Inc. THE PROXIMITY HYPHENATION SYSTEM 1989 Proximity Technology Inc. All rights reserved. THE PROXIMITY/COLLINS DATABASE1990 William Collins Sons & Co. Ltd.; 1990 Proximity Technology Inc. All rights reserved. THE PROXIMITY/MERRIAM-WEBSTER DATABASE1990 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 Software Product with functionally equivalent Software 4. PROHIBITIONS 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 of computers, workstations, or other digital electronic devices Except for the above express limited warranties, Serif and its that were licensed to access or otherwise utilize the Software suppliers make and licensee receives no warranties or Product at the time you upgraded the Software Product. conditions, or terms, express, implied, statutory, or in any communication with licensee. To the maximum extent 14. GUIDELINES FOR THE USE OF DIGITAL permitted by applicable law, Serif and its suppliers disclaim all CONTENT IMAGES other warranties and conditions, either express or implied, This product contains numerous clipart and photo images including, but not limited to, implied warranties of (collectively referred to as the “Images”) which are either merchantability, fitness for a particular purpose, title and non- owned by SERIF or licensed from a third party. As a user of infringement, with regard to the software product and the this product you are free to use, modify, and publish the Images provision of or failure to provide support services. Licensee as you wish subject to the restrictions set out below. If you are shall be solely responsible for the selection, use, efficiency and uncertain as to whether your intended use complies with the suitability of the software product and serif shall have no guidelines set out below, we recommend that you seek the liability therefor. Serif shall have no liability for, nor obligation advice of your own attorney or legal counsel. to indemnify licensee regarding actions alleging the infringement of proprietary rights by the software product. Serif A. YOU MAY, subject to any restrictions set out below: does not warrant that the operation of the software product will 1. Incorporate any Image(s) into your own original work and be uninterrupted or error free or that the software product will publish, display, and distribute your work in any media. You meet licensee’s specific requirements. The Limited Warranty may not, however, resell, sublicense, or otherwise make gives you specific legal rights. You may have others, which available the Image(s) for use or distribution separately or vary from state/jurisdiction to state/jurisdiction. detached from a product or Web page. For example, the Image(s) may be used as part of a Web page design, but may 9. LIMITATION OF LIABILITY not be made available for downloading separately or in a format designed or intended for permanent storage or reuse by others. In no event will Serif or its suppliers be liable for loss of data, Similarly, clients may be provided with copies of the Image(s) corruption, lost profits, cost of cover, or other special, (including digital files) as an integral part of a work product, but incidental, punitive, consequential, or indirect damages arising may not be provided with the Image(s) or permitted to use the from the use of the software product (including any Image(s) separately or as part of any other product; accompanying documentation), however caused and on any 2. Make one (1) copy of the Image(s) for backup or archival theory of liability. This limitation will apply even if Serif or an 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 1. Create scandalous, obscene, defamatory, or immoral works that the amounts paid by licensee for the software product using the Image(s) nor use the Image(s) for any other purpose reflect this allocation of risk. Some states or other jurisdictions prohibited by law; do not allow the exclusion or limitation of liability for 2. Use or permit the use of the Image(s) or any part thereof as a incidental or consequential damages, so the above limitations trademark or service mark, or claim any proprietary rights of and exclusions may not be applicable in certain instances. None any sort in the Image(s) or any part thereof; of the above affects the statutory rights of licensees residing in 3. Use the Image(s) in electronic format, on-line, or in the United Kingdom. multimedia applications unless (a) the Image(s) are incorporated for viewing purposes only and (b) no permission is given to 10. NOT FOR RESALE SOFTWARE download and/or save the Image(s) for any reason; If the Software Product is labeled “Not for Resale” or “NFR,” 4. Rent, lease, sublicense, or lend the Image(s), or a copy then, notwithstanding section 1 of this License, your use of the thereof, to another person or legal entity. You may, however, Software Product is limited to use for demonstration, test, or transfer all your license to use the Image(s) to another person or evaluation purposes. legal entity, provided that (a) you transfer the Image(s) and this License, including all copies (except copies incorporated into 11. NO RENTAL; OTHER TRANSFERS your work product as permitted under this License), to such You may transfer this License to another computer or person or entity, (b) that you retain no copies, including copies workstation only on a permanent basis (that is, with no intent to stored on a computer or other storage device, and (c) the transfer again) provided the computer, workstation, or other receiving party agrees to be bound by the terms and conditions digital electronic device from which you have transferred this of this License; License no longer accesses or otherwise utilizes the Software 5. Use any Image(s) except as expressly permitted by this Product, and the Software Product is used in accordance with License. the terms of this License Agreement. 15. MISCELLANEOUS 12. TERMINATION This Agreement shall not be governed by the 1980 U. N. You may terminate this License Agreement at any time. Serif Convention on Contracts for the International Sale of Goods; may terminate this License Agreement if you fail to comply rather, this Agreement shall be governed by English law. This with the terms and conditions of this License Agreement. In Agreement constitutes the entire agreement between Serif and either event, you must destroy all copies of the Software Licensee and supersedes all prior agreements, understandings, Product. communications, advertising, proposals or representations, oral or written, by either party. If any provision of this Agreement is 13. UPGRADE held invalid or unenforceable, such provision shall be revised to If this License is an “Upgrade,” you must have a valid license the extent necessary to cure the invalidity or non-enforceability, for the Prior Software for this License Agreement to be valid, and the remainder of this Agreement shall continue in full force and this License Agreement must be used to replace such and effect. This Agreement shall be amended only by an license for the Prior Software. The total number of license executed writing by authorized representatives of both parties. “Upgrades” you may acquire may not exceed the total number How to contact us Our main office (USA, Canada): The Software Center 13 Hampshire Drive, Suite 12, Hudson NH 03051 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]
European office (UK, Europe): The Software Centre PO Box 2000, Nottingham, NG11 7GW, UK Main (0115) 914 2000 Registration (0500) 454 645 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] Online Visit us on the Web at http://www.serif.com International Please contact your local distributor/dealer. For further details please contact us at one of our phone numbers above. Contents
Welcome 1 About the Companion ...... 3 Linking to additional help ...... 3 What’s new in Serif WebPlus 8.0...... 4 ...on top of these established features: ...... 6 Registration and support...... 8 System requirements ...... 8 Installing WebPlus 8.0 ...... 9
Overview 11 What is a Web site? ...... 13 How does WebPlus work? ...... 13 How do I publish my Web site?...... 14 How should I get started? ...... 14
Getting Started 15 WebPlus Startup Wizard...... 17 Using a Web Wizard…...... 18 Take a look around ...... 21 For more help on the basics...... 25
Working with Text 27 About text frames...... 29 Objects on the master page level...... 30 Working with text frames...... 31 Editing text ...... 31 Importing text ...... 33 About artistic text ...... 33 About table text ...... 34 Changing the ‘Web colors’ ...... 35 Design Tips ...... 36 For more help on working with text...... 38
Working with Graphics, Animation & Multimedia 39 Graphics in WebPlus ...... 41 Importing a picture or animation...... 42 Drawing lines and shapes...... 43 Other tools and techniques...... 46 Adding animations ...... 47 Adding sound and video ...... 48 Design Tips...... 49 Graphics...... 49 Multimedia...... 55 For more help on working with graphics, animation, and multimedia... . 56
Working with Hyperlinks and Interactivity 57 Hyperlinking text ...... 59 Hyperlinking graphics ...... 60 Using hotspots and rollovers ...... 61 About HTML and Java ...... 62 Design Tips...... 63 Hyperlinks ...... 63 Navigation buttons ...... 64 Hypergraphics...... 67 For more help on hyperlinks and interactivity ...... 68
Previewing, Publishing, and Maintaining the Site 69 Optimizing the publication...... 71 Previewing the site...... 71 Publishing to a local folder...... 73 Publishing to the World Wide Web ...... 74 Maintaining your site...... 75 Design Tips...... 76 For more help on publishing-related tasks...... 77
Web Design from Scratch 79 Pre-planning ...... 81 Who’s it for? ...... 82 What have you got? ...... 83 Site Structure ...... 83 Navigation ...... 85 Page Layout...... 87 Your Home page...... 90 A Design Checklist...... 91 Suggested Resources ...... 93 Print...... 93 Links...... 93 Where should I go from here? ...... 94 Welcome
Welcome 3
About the Companion The WebPlus 8.0 Companion provides everything you need to get up to speed, from the basics to tips and tricks for advanced users. Here’s a brief chapter summary:
1 Welcome. Reviews the program’s main features, requirements, and installation sequence. 2 Overview. Offers a simple introduction to Web sites—and how WebPlus helps you create and publish your own. 3 Getting Started. Introduces Web Wizards—our built-in design assistants—and the WebPlus environment. 4 Working with Text. Describes how to edit the Web Wizard’s placeholder text, customize the text layout, and import text. 5 Working with Graphics, Animation, and Multimedia. Examines how to insert or create your own images, animations, sound and video files. 6 Working with Hyperlinks and Interactivity. Shows you 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 publication onto the Web and help you maintain it. 8 Web Design from Scratch. Provides proven tips on pre- planning, site structure, and page layout, plus a list of online resources to improve your 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 8 Help from the Help menu. 4Welcome
What’s new in Serif WebPlus 8.0... Welcome to Serif WebPlus 8.0—the easiest way ever to get your business, organization, or household on the World Wide Web! Among new WebPlus 8.0 features, you’ll find...
♦ Enhanced Web Page Creation WebPlus 8.0 adds new power to its unparalleled ease-of-use in designing Web sites! Add your own responsive buttons with the multi-layered Rollover graphics option. Select from expanded format and compression choices for picture export. Insert header as well as body HTML code, optimize overlapping objects, and optionally maintain original image filenames. ♦ Artistic Text Tool An entirely new text tool to complement 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 Now you can create and edit tables right in your publication, 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. And calendars are now table-based for enhanced functionality! ♦ Multipage View A brand-new working mode option that lets you see an array of pages, not just one at a time. Easily manipulate the view dimensions, drag objects from one page to another, and get the “big picture” of your Web site’s layout. ♦ Multiple Master Pages For complex sites, you can now design as many separate background templates as you need. Break through the single- background barrier! Welcome 5
♦ Enhanced Studio Bar with Page Manager More convenient and powerful than ever, the Studio’s tabs can now be floated, redocked, shown or hidden individually. It’s easier to select gallery categories, assign text, line, and fill colors, and vary shading. Plus the all-new Pages tab provides a graphical overview that lets you drag and drop to add or subtract pages and assign master pages, with instant access to the Page Manager for total control over page content. ♦ Bitmap Fills and Transparencies Choose from a multi-faceted Studio gallery of picture-based effects, ready to work their magic on shapes or artistic text. You can even import your own images as bitmap fills! ♦ Curved Line Tool and Freehand Shapes QuickShapes are still superb, but now you can “have it all”... Just choose a line tool (including a new one specifically for curves), draw a line... connect other segments if you wish... then just connect the end points to create any shape you like!Customize the line and fill, apply transparency, even freely edit the outline. ♦ Precise Editing of Lines, Shapes, Wrap and Crop Outlines Try the new Curve Toolbar to fine-tune the contours of any line, closed shape, text wrap boundary or cropping edge. Simply drag the curve’s segments or edit its Bézier nodes to achieve exactly the result you want. ♦ 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 fortextorany object. Choose from soft-edged transparent Drop Shadow, Inner Shadow, Inner Glow, or Outer Glow, plus four Bevel and Emboss effects! ♦ Replicate Tool Instantly multiply any object into a line or grid arrangement, with pinpoint control over offset and spacing.. Ideal for perfectly aligned montages! Add rotation, skew, or resizing for eye-catching transformations. ♦ Borders Here’s an elegant new way to add picture frames to your imported images and shape art... even frame a text frame! Simply pick from the preset choices, then customize corner style. 6Welcome
♦ Improved Text Handling Behind the scenes, our text engine works faster and better than ever—with secondary font caching and better handling of default text styles. We’ve added vertical alignment options for frame, table, and artistic text, and now you can add or remove words from your personal spell-check dictionary. ♦ More 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! There’s more control over imported metafiles and OLE options. Linked images are easier to maintain... and each export filter now remembers its own settings. ♦ Our Interface... An Old Friend, Now Even Friendlier Now you can drag and drop objects into WebPlus from other applications. AutoScroll automatically adjusts your view as you move or resize. The revised ChangeBar features context sensitivity and popup sliders to save screen space. MDI (Multiple Document Interface) provides better window control. It’s details like these that have made the difference in WebPlus’ engineering, version after version!
...on top of these established features:
♦ Web Wizards for Instant Web Sites Just pick the type of publication you want to produce and answer a few simple questions. WebPlus does the rest! Revisit your color scheme and text selections at any time as you continue to work with a publication. You can customize the scheme colors, create brand new schemes, and apply any scheme to a “from-scratch” Web site. Basic user details are stored for automatic reuse. ♦ Easy Editing and Special Effects With WebPlus, it’s a snap to import your own text and graphics to replace the Wizard samples. 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 environment with onscreen Tooltips, HintLine, and context- sensitive help! Welcome 7
♦ Versatile Web Feature Support WebPlus supports HTML 4.0 for better WYSIWYG page design. Add sound and video—even Java and HTML 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... ♦ Intelligent Color Schemes Choose from dozens of preset color schemes to change the overall appearance of your Page Wizard publications with a single click. You can customize the scheme colors, create brand new schemes, and apply any scheme to a “from-scratch” publication. ♦ On-screen Studio Combines Convenience with Functionality The Studio’s 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! ♦ Professional Layout and Text Tools Intelligent text fitting. Movable rulers and guides. Precision placement, rotation, flipping, and cropping. Text formatting with named styles. Master page for repeating background elements. Not to mention word count, search and replace, spell-checking, thesaurus, and proof reader to ensure your site’s readability. ♦ 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 new drawing tools are at your command... Sketch freehand lines and curves. Extend existing lines with ease. Apply line styles to all kinds of shapes—even add line endings like arrowheads and diamonds. 8Welcome
♦ Gradient Fills For sophisticated illustrations and impressive typographic effects, select from a wide variety of Linear, Radial, and Conical fills. Use the interactive fill tool for drag-and-drop updating of fill nodes and colors. ♦ Transparency Effects Both solid and variable transparency let you add new depth to your print and Web creations. Apply transparency directly from the Studio, then edit nodes and opacity with the interactive tool. ♦ Integrated Calendar Wizard Choose from a wide variety of sizes and design options, then just click and drag to fit your calendar to a column or a whole page! ♦ Total Ease-of-Use Right-click menus. Illustrated QuickTours to smooth the learning curve. Plus HintLine, Wizards, and context-sensitive cursors to 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® 95, 98, 98 SE, Me, 2000, NT® 4.0, or XP operating system ♦ 32MB RAM (Windows 95/98), see manufacturer’s requirements for other operating systems ♦ 60MB (minimum), 155MB (recommended) free hard disk space ♦ SVGA (800x600 resolution, 16-bit color) display or higher Welcome 9
♦ Internet account and connection for Web publishing Additional disk resources and memory are required when editing large or complex documents
Optional: ♦ Windows-compatible printer ♦ TWAIN-compatible scanner and/or digital camera ♦ Stylus or other input device
Installing WebPlus 8.0 To install the program, simply insert the WebPlus 8.0 CD-ROM into your CD-ROM drive. The AutoRun feature automatically starts the Setup process and all you need to do is answer the onscreen questions. If AutoRun does not start the install, use the manual install instructions below. 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. To install just one component, choose the Custom option and check only that component. Overview
Overview 13
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? You’ll first compose your pages as a publication in WebPlus, then publish the pages as a Web site. Whether you’re looking for a business, organization, or personal Web site, you’ll probably want to begin by exploring the Web Wizards that come with WebPlus. Click through the Wizard screens, make a few selections, and enter some basic information—and the Wizard gets you started with a set of ready-to-publish Web pages. If you prefer, you can start a new publication from scratch. 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. For editing your publication, 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 the Layout Checker Wizard to optimize the site before publishing it. WebPlus gives you the option of previewing the site in your own Web browser before publishing it to the Web. 14 Overview
When you’re ready to publish, WebPlus takes the publication’s pages and converts them to HTML and graphics (images). 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 publication 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”).
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 17
Once WebPlus has been installed, you’ll be ready to start. Setup adds a Serif WebPlus 8.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.
WebPlus Startup Wizard Now you can see the normal starting screen. The Startup Wizard presents four choices:
♦ Use a Web Wizard, to create an instant publication ♦ Start from Scratch, to get a blank page to work on ♦ Open a Publication, to edit your own WebPlus files ♦ View a QuickTour, to see an introductory overview 18 Getting Started
Whether you’re an old hand, or just getting started with WebPlus 8.0, here’s a recommended sequence: From the Startup Wizard, choose View a QuickTour to see an illustrated overview of WebPlus fundamentals. From the first screen, click the Next button to step forward. Use the Previous button to step back or the Begin button to return to the first screen. Click Cancel to exit the QuickTour.
When you’re ready to continue, click Web Wizard or Start from Scratch from the Startup Wizard (For details on using a Web Wizard, 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 Wizard… Web Wizards are built-in design assistants that speed you through the process of creating professional Web sites. In this chapter, you’ll use a Web Wizard and take a brief tour of the WebPlus environment. Then in the following chapters, we’ll explain how to customize the various elements of a Web site. The final chapter covers points you’ll need to know if you literally start from scratch, with a “clean slate.” (Even if that’s your preference, you should work through the Wizard-based examples to get up to speed.) For demonstration purposes, we will be working with a Wizard 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 Use a Web Wizard. Getting Started 19
Notice that the Business category is initially selected, with thumbnails for the available Wizards displayed on the right. We’re going to use the second one (Arch), so click its picture to select it, then click Finish. WebPlus retrieves the Wizard and displays it in Wizard Preview mode. Here’s where you can initially add your own information to the design. The upper section of the Wizard lists several categories that you can customize, with “Business Details” selected. Further down are boxes where you can review and/or re-enter the sample “answer text” in the category. Type into the fields to replace the sample text with your own: in this case, enter a fictitious (or real) company name, address, etc.
As you enter information, you’ll see the publication update to reflect your choices. You can change as much or as little as you like at this point—it’s always possible to revisit the choices later! When you’re done, click the Web Site Details category. Here you can alter Web page titles shown in the Wizard if you wish. Next, click the Color Scheme category. This panel lets you click various thumbnails to sample different color schemes for the site.
In WebPlus, each publication has one color scheme assigned to it. Color schemes are great time-savers and help to ensure consistent, coordinated results. They work like a paint-by-numbers system using five numbers. Instead of assigning a specific color to an element, you can mark it with a scheme color number. Let’s experiment. 20 Getting Started
Scroll down and click the “Carrot” color scheme sample. Notice that much of the text on the Web page turns orange. Now click the “Cuba” scheme and the text turns green. Look closely at the top portion of each scheme sample, and you’ll see a group of five colors to the right of the scheme name. Note that each time you switch schemes, it’s the first of the five scheme colors that’s being applied to the text.
In Web Wizard publications, body text is conventionally marked with “Scheme Color 1”. That means it takes on whichever color has been defined as Scheme Color 1 in the current scheme.
Keep clicking different color schemes and notice which page elements change color. Can you see which elements have been marked with Scheme Color 2? Scheme Color 3?
The bottom portion of each color scheme sample includes the hyperlink and other Web colors, which are independent of the five scheme colors and will be discussed in the next chapter. Choose Save... from the File menu and save the untitled publication, using the folder and file name of your choice. Getting Started 21
Take a look around Let’s take a few moments to examine the publication that the Wizard has created. In the process, you’ll become familiar with some of the basic features of the WebPlus environment.
Standard, Arrange & View toolbars Text & Frame toolbars Studio Tools toolbar (Wizard panel shown)
Page Area Pasteboard Area
ChangeBar HintLine toolbar
Move the mouse pointer around the screen and you’ll see popup tooltips that identify many items. Watch the HintLine window at the bottom for capsule descriptions of each feature. To access online help and resources, choose WebPlus Help from the Help menu. Right-clicking any toolbar, object, or page region brings up a context menu of functions. The controls to the left of the HintLine let you set the page view and other display options, and navigate through the publication. Move the mouse pointer over the buttons on the HintLine toolbar, noting the various controls for zooming, panning, and display. Use these buttons to adjust the display until you can read the page text. The workspace will appear approximately as shown above.
Note that WebPlus displays one page of the six-page publication at a time. On the right side of the WebPlus window, you’ll see the Studio— actually a cluster of six special-purpose tab windows. Let’s preview them in sequence. Click each tab’s name to display it... 22 Getting Started
The Attributes tab (see illustration) includes five separate panels that let you customize properties of on-screen elements. These panels include: —TheColor panel, for applying solid color and/or shading —TheFill panel, for applying a gradient or Bitmap fill —TheTransparency panel, for applying a transparency effect —TheFont panel, for changing the font of existing text objects —TheLine panel, for setting the weight and type of lines and shapes
Panels on the Studio’s Attributes tab The Schemes tab displays a list of the available color schemes that (as you’ve seen) let you instantly revise colors in a Web Wizard publication. Using this tab, you can customize scheme colors or create entirely new schemes. Right-click any sample to see various context menu options. The Pages tab helps you navigate within the publication and manipulate pages and master (background) pages. The Gallery includes a wide variety of predesigned elements— graphics that you can drag and drop, then customize or use as a starting point for your own designs. The Portfolio is 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 publications. The Wizard panel lets you revisit choices you made when creating a publication using a Web Wizard. It’s simply a matter of retyping your information or selecting a different color scheme. Getting Started 23
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. In addition, you can switch between two viewing modes: Normal view, which displays one page at a time, and Multipage view, which displays a number of pages at a time in the workspace.
Click the Next Page button on the HintLine several times to view the following pages. You can use the scrollbar at the right to view more of a page. Note that the Wizard has inserted the information you provided, and the rest of the text serves as a “placeholder,” awaiting further changes. Tip: You can double-click the Previous Page button to display your first (Home) page, or the Next Page button to display the last page.
You can click the Insert Page or Delete Page button on the Studio’s Pages tab to change the page count. You can also click the tab’s Page Manager button (or the button on the HintLine) for additional options like copying pages. When the time comes to build your actual Web site, you can use these controls if you want more (or fewer) pages than the Wizard provided. For now, leave the page count at six. However, if you want to experiment with the Pages tab—or if you accidentally make any changes that you don’t want to keep—here are some “emergency” options: 24 Getting Started
To revert to the previously saved copy of your publication, choose Revert from the File menu. It’s a good idea to save your work often! You can also reload any saved WebPlus publication by choosing New from the File menu and selecting the Open a Publication option. You can open multiple publications and switch between edit windows if you like.
To undo the most recent change, press Ctrl+Z. (Note that you can’t undo a page addition or deletion.)
Click the Multipage button on the top toolbar and choose the third item in the second row of the array for a 2x3 page display. Now you can see all six of your pages at a glance! In Multipage view, it’s especially easy to move or copy objects between pages using drag-and-drop. To return to single page view, click Normal View on the Multipage array selector (or choose Normal from the View menu). Now that you’ve had a good look around the WebPlus interface, and have successfully created and customized a Web Wizard publication, you’re ready to proceed to the kinds of projects you have in mind. Getting Started 25
For more help on the basics... You’ve seen how easy it is to create the basic structure of a Web site using a WebPlus Wizard. 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 publications Work with WebPlus Publications”
Overview of Web Index Select “Web sites, getting site concepts 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 Work with Pages” Using layout tools Working with Text
WorkingwithText 29
Now that you’ve reviewed the pages the Web Wizard provided, and had a chance to revise Wizard “answer text” using the Studio, it’s time to 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 multipage 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.Frameswork 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. Let’s begin by seeing how the Web Wizard has utilized frame text in the “Arch” example you created in the previous chapter.
Display your Home page (double-click the Previous Page button if necessary), and adjust the screen view so you can read the page text.
Click the button at the top of the left toolbar.
You’ve just selected the Pointer tool—the basic tool for selecting, moving, and resizing objects, including the boxes that contain text. Using the Pointer tool, click the “Home Page” text at the far right edge of the page. Now click the paragraph starting with “Here’s the place...” on the lowerpartofthepage.
In each case, clicking selects a text frame, displayed as a rectangle with a blue outline and small black “handles.” 30 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.
Objects on the master page level Let’s take a brief detour to review a key WebPlus concept...
Click the company name heading text at the top of the page.
Nothing happens! Why not?
Click (once) on the Current Page box at the lower left. The screen display changes and the box now indicates you’re working on the master page level.
You can think of a master page as a background that’s shared between various pages of your site. Every publication has a background master page level and every page has a specific master page assigned to it. (In this particular publication, all the pages share the same master page.) When you switch to the master page, objects on the page level vanish, leaving only background objects. In this case, that includes the header and footer, address information, various graphic elements, and text links to other sections of the site. These are the common elements the designer of this particular Wizard has determined should appear on each page of the site.
You can use the Studio’s Pages tab to rearrange publication pages using drag-and-drop, assign master pages to pages, and add or delete either pages or master pages without having to switch to a particular level first. Now click the Current Page box again (once only) to return to the page layer. WorkingwithText 31
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. Using the Pointer tool, select the “Here’s the place” text frame. Notice the blinking insertion point in the frame’s text. In this mode, you can type directly into the frame, and edit the text with the 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 drag the bottom edge down, you’ll see that there’s more text visible in the frame. Again, undo the changes. Here’s how easy it is to create a new frame.
Click the button on the left toolbar to select the Frame tool. Now locate some empty space on the pasteboard (outside the page area), 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.
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. 32 Working with Text
To work with a more substantial amount of text, let’s switch to the “Here’s the place” body text frame on the page. Right-click 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 storytext,andemploytheWord Count function. 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 Accept button. To abandon changes, click Cancel.
By the way, you may be wondering about the difference between editing standard text and Web Wizard “answer” text. The key point is that if you want to preserve answer fields, you should use the Wizard tab to edit their text, as explained in the previous chapter.
Click the Current Page box at the lower left to switch to the Master Page level. Now try to select just part of the company name text. You can’t! Only the entire block of text can be highlighted.
Answer text is stored in fields, and when you select one of them (the company name in this case) the whole field highlights—a sure sign that you’re not dealing with standard text! You cannot select only part of an answer text field. However, you can use the usual text editing functions to change the field’s character or paragraph properties, or cut/copy/paste answer text fields within the document if necessary. Again, a reminder: If you retype over answer text, you’ll effectively destroy the field. The new text you enter at that location will be ordinary text and can no longer be updated via the Wizard panel. WorkingwithText 33
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 publication. 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 “Here’s the place” 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 SERIF/WP80/SAMPLES/ folder, either in your main Program Files folder or on your WebPlus CD. WebPlus imports the file and places it in the frame. Note: When prompted, click No to decline the AutoFlow option, which would create additional pages and text frames for 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 in red are unfamiliar words identified by the AutoCorrect function.) You might try applying some font, size, or style changes.
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. 34 Working with Text
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.) Try creating a sample of artistic text, either on an empty part of the page or on the pasteboard.
About table text Tables are ideal for presenting text and data in a variety of easily customizable row-and-column formats. 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. You can paste delimited text into a table, but cannot 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 the Table Tool 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. WorkingwithText 35
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.
Changing the ‘Web colors’ When you stepped through the Wizard to create the sample site we’ve been working with, you chose one of several alternate color schemes. In the previous chapter, we used a paint-by-numbers analogy to explain about the five numbers you can use to mark elements in WebPlus, and how each scheme includes five colors, which get applied to elements with the corresponding number. By convention, body text in Web Wizard publications is marked with “Scheme Color 1.” That means it takes on whichever color has been defined as Scheme Color 1 in the current scheme (the first of the five colors shown at the top of the sample). In addition, each publication’s color scheme also includes these special Web color settings:
♦ The Hyperlink color applies to hyperlinked text before it’s been clicked on, while the same text after a Web visitor has clicked to “follow” the link takes on the Followed Hyperlink color. (The WebPlus sample displays these colors, but you’ll need to view the published site in a browser to preview the actual effect.) 36 Working with Text
♦ A Web site’s Background, which is applied to every page, can be either a solid color or a tiled (repeated) picture, usually a bitmap pattern. The tiled picture option works just like desktop “wallpaper”—so a small bitmap can go a long way. The color scheme sample shows if the scheme uses a tiled bitmap.
You can modify the basic colors (and Web colors) in a scheme, or set a different background bitmap, using the Scheme Manager,inthe same way that you’d modify the scheme’s five basic colors. To display it, right-click the scheme name (or click the Tools menu) and choose Scheme Manager....
Before continuing to the next chapter, you may wish to save your work.
Design Tips You’ll find general advice on text usage interspersed throughout the “Web Design from Scratch” chapter. Rather than recap what’s said there, we’ll just make a few special points:
♦ 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. WorkingwithText 37
♦ 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! ♦ 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 menu pages, rarely for the presentation of longer material. ♦ To avoid registration problems, make sure text is on top, not behind images. 38 Working with Text
For more help on working with text... In this chapter, you’ve examined the placeholder text provided by the Web Wizard and learned how to create, edit, and import standard text. You know enough now to begin replacing the placeholder text with your own content. In addition, you should now have a grasp of how the Web color components of color schemes apply to text. 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 Index Select “text, overview” WebPlus text
Import text Contents list See topics in section “How to Work with frame Work with Text” text, artistic text, frame text
Set text properties Contents list See topics in section “How to Use templates and Format Characters and named styles Paragraphs”
Master pages Index Select “master pages”
Set defaults Index Select “default properties”
Use proofing tools Index Select from “proofing tools”
Color schemes Index Select “color: using color schemes” Working with Graphics, Animation & Multimedia
Working with Graphics, Animation, and Multimedia 41
In this chapter, we’ll continue exploring the pages the Web Wizard provided—this time looking at images and graphic objects. The focus will be on how to replace the placeholder images the Wizard installed with your own images, and how to create new graphic elements.
Graphics in WebPlus Web Wizards may incorporate several different types of graphic objects into your publication. You can use the Pointer tool to select, move, and resize them, just as with text objects. On the Home page, click with the Pointer tool on the photo. Try resizing it by dragging from one corner. Press Ctrl-Z to undo. Now click in the center and drag it off to one side. Press Ctrl-Z again. TIP: Watch the HintLine as you drag an object, and it will tell you the object’s properties. Drag the photo to the right so it partially overlaps the “Home Page” frame. Now click on the photo where it overlaps the frame, and a blinking cursor appears in the frame. Click again in the same place—the text edit cursor remains. Now hold down the Alt key and click. This time, you’ve selected the photo again. 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. TIP: You can also employ Alt-click anytime to drag a text frame from its center. 42 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. After being imported, each image is stored in the WebPlus publication until you publish the site, at which time it’s exported using one of the standard bitmap formats (GIF or JPG) that Web browsers recognize. Let’s try importing.
Click the Import Picture button on the left toolbar.
Using the file selection dialog, open PHOTO1.BMP in the SERIF/WP80/SAMPLES/ folder. Now 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.
To replace an existing image—for example, a placeholder picture included by a Web Wizard—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. Working with Graphics, Animation, and Multimedia 43
By the way, the WebPlus 8.0 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/Web Object/Animated GIF.... For details, search for “WebArt” in the online help index. 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.
Drawing lines and shapes WebPlus provides several easy-to-use drawing tools. The three line- drawing tools are located on a Tools toolbar flyout:
Straight Line Freehand Line Curved Line With them, you can add both functional and decorative 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. To use the Curved Line tool, click where you want the line to start, then either click again (for a straight line segment) or click and drag to create a control handle for the initial point. These handles act like magnets, pulling the curve into shape! Click again where you want the segment to end. 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). 44 Working with Graphics, Animation, and Multimedia
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.
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.
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 applying a higher Weight value to give the box a thicker border, and click various Type samples for a different line. Working with Graphics, Animation, and Multimedia 45
Now display the Attributes tab’s Color panel. You can easily change 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.). The panel also features Fill, Text,andLine buttons that let you preselect which attribute your color selection will affect. For each base color you select, you can pick from multiple shades of that color displayed in the Shades group. Note: You can achieve great results using just solid colors, but for even more impressive effects in conjunction with the .PNG graphic format, 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...,andTransparency... options that let you adjust all these properties.
As a mini-project, you might try creating a Home Page button by overlaying a text frame on an unfilled shape. Select both objects, then click the little Group button to link them. In the next chapter we’ll see how to add a hyperlink! 46 Working with Graphics, Animation, and Multimedia
Other tools and techniques You already know how to select, move, and resize objects. Here are several additional tricks you can carry out on selected objects. 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. 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.
You can click the Group button that appears next to a multiple selection to lock the objects together temporarily. This saves you the trouble of having to select them all individually the next time you want to do something to the whole group. To separate (ungroup) the objects, click the button again. To duplicate an object, select it, then press and hold the Ctrl key and drag out a copy. To constrain the movement of an object to horizontal or vertical, use the keyboard arrow keys to nudge the selection up, down, left, or right. Alternatively, hold down the Shift key after you begin dragging the object. 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. Working with Graphics, Animation, and Multimedia 47
Adding animations WebPlus lets you add two varieties of eye-catching animation effects to any Web page: animated marquees (scrolling text banners) and GIF animations. Using Wizards, you can preview the animation and/or customize the effect. Once placed into your Web publication, 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.
Click the Insert Animated GIF button on the left toolbar. 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.
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 in your browser.
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. 48 Working with Graphics, Animation, and Multimedia
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. 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. 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 publication. WebPlus also provides several ways of embedding the source file.
Clicking the Insert Sound Clip or Insert Video Clip button on the left toolbar 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. Working with Graphics, Animation, and Multimedia 49
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. ♦ 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. (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. 50 Working with Graphics, Animation, and Multimedia
♦ 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 illustration 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. Fortunately, with HTML 4.0 you can overlay one object on top of another and not have to worry about overlap. You’ll still need to zoom in closely and adjust the objects on one or both layers to achieve precise registration.
Choosing the proper format and settings for Web images is vital. WebPlus relies on global settings to determine how each type of picture should be exported when you publish the site. By default, any image you inserted as a GIF or JPEG is exported as the original file, using its original file name. All other graphics are converted to JPEGs. If you wish, you can alter these global settings (on the Graphics tab of File/Web Site Properties...), and you can always use the Web Picture Properties Wizard (Web Picture 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 publication. For each image, you can specify the output format: .GIF, .JPG, .PNG, or Global Settings. Working with Graphics, Animation, and Multimedia 51
Here’s some very general advice on which Web image formats to use when importing. There’s a great deal more detail on formats and conversion options in online help—the topic referenced above is a “must read”!
♦ 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. ♦ Use the .GIF format 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, .JPG rather than .GIF is the preferred format. ♦ 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. 52 Working with Graphics, Animation, and Multimedia
Bear in mind that not all your visitors’ computers will match your own for speed or 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. 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 publications. 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. 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. Working with Graphics, Animation, and Multimedia 53
For your convenience, WebPlus includes two swatch panels incorporating the Web-safe colors. (Look for WEBSAFE1.GIF and WEBSAFE2.GIF in the /WP80/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. 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. 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. Asaruleofthumb,use 60K bytes per page as a maximum.Assuming that the average home user’s dial-up modem can download 3-5K bytes per second, that’s a load time of 12 to 20 seconds. Any longer than that is asking for trouble. You can determine the actual size of your files by publishing one page at a time to a local folder (using File/Publish Site/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. 54 Working with Graphics, Animation, and Multimedia
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%. 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: 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 in the “Web Design from Scratch” chapter. You’ll find a wealth of advice and examples to draw upon. Here are a few other tips for quicker pages: Avoid large regions of transparency. Group small objects and set your options so they’re output as a single image. And use the correct dpi setting for images before importing, rather than scaling large images down on the page. Working with Graphics, Animation, and Multimedia 55
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 8.0 allows you to insert both audio and video files—and will even embed the files in the original publication to facilitate your efforts— from a design standpoint this feature should be regarded as rather experimental. Although WebPlus will insert a wide variety of audio and video files (such as QuickTime, MPEG, RealAudio, and RealVideo), unless you know your target visitors can play one of the special formats you should stick with the “generic” Windows media types. These include .WAV for audio and .AVI for video. The main barrier, of as with graphics, is file size. Typically, 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. While these rates are paltry when the source is a local hard disk, over a standard modem (using our earlier estimate of 3-5K per second, and we’ll let you do the math) your Web visitors will have a painfully long wait before that five-second video clip knocks their socks off. And unless you opt for streaming media, which entails technical issues well beyond this chapter, there’s just no other choice. Another obvious barrier to using audio or video is obtaining or producing the content. WebPlus, of course, doesn’t handle either format natively—it cannot edit or play them back—so unless you rely on borrowed or clip media, you’ll have to master a media editing application or know someone who can. (Any teenagers in the family?) The good news is that just because multimedia capabilities are “experimental” in WebPlus doesn’t mean you can’t have a lot of fun experimenting! If you (and/or your Web visitors) are on a local network or have extremely fast Internet access, the fact that audio and video are basically file downloads should not be a barrier. The limited support that WebPlus offers may be exactly what you need to include that special bit of digitized home movie footage, or some background theme music that loops while visitors peruse your home page. 56 Working with Graphics, Animation, and Multimedia
And while video on the Web may be “not quite ready for prime time,” 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. 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.
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 Graphics, Animation, and Multimedia”
Importing images Index Select “importing”
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”
Working with colors, Contents list See topics in section “How to fills, and Work with Colors, Fills, and transparency Transparency” Working with Hyperlinks and Interactivity
Working with Hyperlinks and Interactivity 59
In this chapter we’ll look at several 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. 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 shape, a word, or a picture means that a visitor to your Web site can click on the object to trigger an event. The event might be:
♦ A jump to a Web page (either on your site or somewhere else on the Web); ♦ The appearance of an E-mail composition window; or ♦ The display of a graphic or text file.
You can also place hyperlinked hotspots over parts of the page. Let’s begin by taking a look at hyperlinks in your Wizard-based publication.
Hyperlinking text As a visual cue, hyperlinked words on Web pages are underlined. Open the “Arch” sample file again and zoom in on the upper half of the page.
Click the Current Page box to switch to the Master Page layer. Click on the words “About Us.” Because this is an “answer text” field, you’ll see an insertion point just before or after the words.
Click the Insert Hyperlink button on the Tools toolbar.
The Hyperlinks dialog appears, and the words “About Us” are highlighted because they already include a hyperlink. In the dialog, you can see that the link’s destination is “A page in your publication”— page 2 to be precise. Click the drop-down list and inspect the other possible link destinations. Note the Remove button that you could use to unlink the selected text (if you wanted to), then click Cancel. 60 Working with Hyperlinks and Interactivity
To create a new hyperlink in existing text, you would first select the range of text you wanted to link, then click the Hyperlink button. The same dialog would appear, and then linking would be simply a matter of choosing the destination and clicking OK. From a design standpoint, it makes sense to include a navigation bar—a cluster of links to the various key pages on your site. Put it on the master page, so the same links will appear on each page. Instead of using separate text frames, as in the Web Wizard publication, you might use a single frame across the top of your page, with the links centered—for example:
However you design it, consider your navigation bar an essential element. Users will expect it to be there to help them get around your site. Again, it makes sense to plan your basic layouts ahead of time.
Hyperlinking graphics Only a few additional words are required here, because the procedure for linking graphic objects is the same as that for linking text. You just select the object to be linked and click the Hyperlink button. Click the Current Page box to switch back to the page layer. With the Pointer tool, click on a photo to select it, then click the Hyperlink button. Again, you’ll see the Hyperlinks dialog. This is the technique you’d use to hyperlink an entire object. Compare this with the hotspot method, explained below. Working with Hyperlinks and Interactivity 61
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 graphic “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 on the left toolbar. The cursor changes to a cross. Let’s place a hotspot over the butterfly in the photo. Click slightly to the upper left of the butterfly, then drag down and right to draw a box. (You can adjust it later.) When you release the mouse button, the familiar Hyperlinks dialog appears. This time, it’s waiting for you to provide a destination. Select “A page in your publication” and designate page 2 in the drop-down list. Click OK.
If necessary, you can use the Pointer tool to move or resize a hotspot, like any graphic. There’s no limit to the number of hotspots you 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. 62 Working with Hyperlinks and Interactivity
WebPlus lets you add rollover graphics to your Web publications; the necessary event-trapping code is generated for you automatically. Adding rollovers is basically a matter of deciding which rollover state(s) you’ll want to define for a particular object (Normal, Over, Down, and/or Down+Over), then specifying an image for each state. For details, consult online help.
About HTML and 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 Object... from the Insert menu and select HTML... from the submenu. Then use the dialog to enter the HTML code. WebPlus inserts a marker into your publication 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. You’ll definitely want to check your Web page in a browser! (Tip: You can store HTML code fragments in the Portfolio.) 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 publications. 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 Object... from the Insert menu and select Java Applet... from the submenu. 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. Working with Hyperlinks and Interactivity 63
As with HTML, WebPlus inserts a marker into your publication 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 In this section, we’ll look more closely at how linking elements can help your site succeed both aesthetically and functionally. The difference is in the details. Hyperlinks The World Wide Web has finally popularized the concept of hypertext, which has been around for at least a decade. Formerly limited pretty much to clicking our way through CD-ROMs, 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 style 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 more about placing links in text.” An improvement would be: “Web links are powerful, but may cause problems if overused.” ♦ If you have more than a couple of links to related material, consider listing them separately (like a See Also list), perhaps 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 menu page, rather than creating lots of sideways links between the topics themselves. ♦ For sequential material, you can create a browse sequence (see below). 64 Working with Hyperlinks and Interactivity
Navigation buttons As we’ve mentioned, a navigation bar is a valuable basic layout element. Besides using hyperlinked text, you can employ buttons created as hypergraphics: images with hyperlinks or hotspots applied. If your site adheres to the basic section/level model (as detailed in the “Web Design from Scratch” chapter), then you’ll want to provide links to the Home page as well as to the various section menu pages. 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. Resist the temptation to design individual icons for the various buttons. You might purloin some decent clip art, but developing a set of original, decipherable icons is a fine art in itself, and a supreme time- waster. As for the buttons themselves, they needn’t look rectangular and beveled, like lozenges. Artistic text works fine. Remember that whenever the browser’s mouse pointer rolls over a hyperlink, it will change to a hand. If the assemblage looks anything like a navigation bar, 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. Of course, if you like, you can create more traditional box or oval buttons using QuickShapes. Another option for buttons is to use rollover graphics—objects whose appearance changes through image-swapping in response to mouse events. Adding rollovers in WebPlus is simply a matter of deciding which rollover state(s) you’ll want to define for a particular object, then specifying an image for each state, and a hyperlink target for the button. The necessary event-trapping code is generated for you automatically. Users should perceive the navigation bar as a fixed component of the page background throughout the site. The simplest solution is to position the bar on the master page so it appears on every page. Working with Hyperlinks and Interactivity 65
To aid navigation, you can vary the bar’s appearance from section to section, with the button for the current section appearing emphasized or highlighted in some way. Perhaps the most economical solution combines a basic set of buttons on the master page with a bullet or pointer graphic on the page level to denote the current section. This approach works especially well with a vertical list, e.g. section names:
Placing a pointer-type graphic on each page entails a lot of pasting, but it’s worth the effort. Make sure pointer alignment is consistent from page to page. To achieve a highlighting effect, you can use a paint program like Serif PhotoPlus to customize the navigation bar graphic for the various sections of the site. Begin with a graphic that includes a full set of neutral (unhighlighted) buttons. Make as many copies of the graphic as there are buttons. Modify one button in each copy, applying a highlighting effect such as a different color or font style. Keep the rest of the graphic the same. This gives you a unique button graphic for each section. Paste each graphic onto all pages of the appropriate section, in the same position. (Work at high magnification and use the ChangeBar to view the selected object’s pixel position. Better yet, place a couple of ruler guides and turn Snapping on.) The effect will be that of a single navigation bar with highlighting that changes from section to section. By the way, an advantage of using the page level (rather than the master page) for your button bar is that you can include a duplicate bar at the foot of each page as an added convenience to the user. Since your pages are likely to vary in length (that is, distance to the bottom object), you can vary the placement of the bottom bar as needed. If it were on the master page, its position would have to remain static. 66 Working with Hyperlinks and Interactivity
The navigation bar is tremendously useful, but 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 sections, or directory listings are arranged alphabetically. In such situations, create a browse sequence using a mini-navigation bar that lets the user step forward or backward through the series. One way is to provide Previous and Next buttons, using fairly standard arrow graphics:
The problem with Previous/Next buttons is that you’ll have to custom- link each button to a specific target page, with a different pair of links on every page in the series. A more economical (and functional) browse sequence bar looks like this...
...where the five dots represent a five-page sequence. The square center shows the current page. To get to any one of the five pages, the user simply clicks the corresponding dot. If you use a set of five hotspots “hard-wired” to the correct pages, you can duplicate the hotspot set on all five pages, and simply place a different graphic on each page. 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? Working with Hyperlinks and Interactivity 67
Hypergraphics Hypergraphics in WebPlus come in two flavors: graphic objects to which a hyperlink has been attached (using Insert/Hyperlink...)and those with one or more hotspots superimposed using the Hotspot tool. The choice is usually obvious. If you’re creating a button bar using separate shapes for buttons, use individual links for each graphic (or rollovers, discussed above). If your bar consists of a single graphic, use hotspots. 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 publications, and work in 256-color mode. See the tips in the “Graphics” chapter.) The five-dot browse sequence bar depicted above is a good example of a simple, useful hypergraphic. The hotspots themselves comprise a group that can be copied and pasted to various pages, while the underlying graphic changes. 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. In short, they’re fun. Use them! 68 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! When you’re building your Web site, however, you may wish to use Tools/Hyperlink Manager... to get a overview of all the links in your publication. You can see the destinations at a glance, check URLs, and display any hyperlink for closer inspection. For additional details, see online help.
For help on... Choose from the Then... ? Help menu... Creating hyperlinks Index Select “hyperlinks, adding to Web page”
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”
Adding Java Index Select “Java applets”
Adding HTML Index Select “HTML, adding code to Web pages” Previewing, Publishing, and Maintaining the Site
Previewing, Publishing, and Maintaining the Site 71
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 publication’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 publication Before you preview or publish, it’s wise to take advantage of built-in WebPlus tools for checking your publication’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 publication, and the Layout Checker Wizard can locate (and often correct) problems like objects off the page, empty frames, or overlapping objects. You’ll find full details on these features in online help (see the note 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. Although your Wizard-based publication probably still has a lot of its original placeholder text and graphics, let’s try previewing it. (We’ll assume you have a Web browser installed.)
Click the Preview Site in Browser button on the top toolbar. In the dialog, check “All” as the page range, and click OK. 72 Previewing, Publishing, and Maintaining the Site
The WebPlus publication is exported to a temporary folder, and 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 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 butterfly in the photo (notice that its border line is now invisible), and you’ll jump to page 2.
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 certainly slow them down! Check out each page and take notes on any problems, then go back to WebPlus and make any necessary corrections. You can preview just one page (or a range of pages) instead of all the pages, by changing the setting in the Preview dialog. 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 Folder method, described next. Previewing, Publishing, and Maintaining the Site 73
Publishing to a local folder This option, like previewing, exports your publication pages to HTML and graphics files. The key differences are:
♦ You designate 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 run Preview Web Site, even if you’re only previewing one page, your previous set of temporary files disappears. Using the Graphics tab of File/Web Site Properties..., you can specify whether images are assigned new file names or overwrite the old ones when published into the same folder (HTML file names are overwritten). Your site as a whole remains intact. ♦ 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 to Folder button on the top toolbar. In the dialog, locate the folder where you wish to store the output files, or click New Folder... to create a new folder. As for previewing, you can publish just one page or a range of pages. Accept or decline the option to launch your Web browser. 74 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! Before publishing for the first time, you’ll need to gather some basic 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 to display the Web Publishing Options dialog. Specify the number of pages to publish and click OK.WebPlus exports the page(s) to temporary files, and then the Account Details dialog appears. Choose an FTP Account you previously defined, or to define a new account, enter the FTP Address of your Web host and your pre-assigned Username and Password.Besuretoenterthe password exactly as given to you, using correct upper- and lower-case spelling, or the host server may not recognize it. For most Web servers you can leave the Folder box blank; otherwise enter the name of the publishing folder. Click OK. WebPlus seeks an Internet connection or establishes a new one, and connects to the remote server. Sometimes (for example with online services such as AOL) you’ll need to use the service’s proprietary log-on software to establish a connection. 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 folder to which you published. Congratulate yourself! Previewing, Publishing, and Maintaining the Site 75
Maintaining your site Once you’ve published your site to the World Wide Web (see the previous topic), 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 publication! When you republish pages into the same folder, duplicate .HTML file names are always overwritten. The Graphics tab of File/Web Site Properties... lets you set whether or not to overwrite existing images (i.e. use the same file names). Nevertheless, over time you may 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 or enter the details (as when publishing the site), and click OK. Once the connection is made, the Maintain Web Site window appears. 76 Previewing, Publishing, and Maintaining the Site
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 publication 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 section menu 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 menu 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.) Previewing, Publishing, and Maintaining the Site 77
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” Web Design from Scratch
Web Design from Scratch 81
We’ll assume that by now, you’ve worked through the Wizard-based examples in the preceding chapters and have a preliminary knowledge of WebPlus tools and techniques—although probably not too much hands-on experience. You’ve seen that there are lots of ways to customize the Wizard-based publications, and that approach may suit your needs perfectly. But don’t forget that besides offering a variety of Web Wizards, WebPlus gives you the option of starting from scratch and composing each page just as you want it. You may decide to take a hybrid approach: study the Wizard layouts, learn from them, and then apply what you’ve learned to a brand-new site of your own design. If you’d like to start from scratch, here are the steps: From the Startup Wizard, select the Start from Scratch option. (From within the program, choose New... from the File menu or click the New button on the top toolbar to access the Startup Wizard.) The new publication will open with a blank page. Choose Page Setup... from the File menu to change the page size. You can select either Standard or Wide, or define a custom size by entering new values for Width and/or Height. Obviously, there’s no single formula for coming up with a successful Web site. It may help to have a plan of attack, however, so the following sections provide a brief outline of the process, along with some suggestions to guide your efforts.
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 user; put yourself in their place. Learn from your own experience as a consumer of online information. When you’re starting out, it’s worthwhile trying to conceptualize 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. 82 Web Design from Scratch
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. 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 (see the Design Tips in the previous chapter), 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 Design from Scratch 83
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 exactly 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, like a house that 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 are the corridors that connect the various rooms (sections) of the site. Each room might have a few side doors, but don’t let the visitors get lost! Graphic aids like a navigation bar, or clear labeling and/or color- coding for the various sections of the site, can help immeasurably, but only if you include them in your design scheme. As you draw up the blueprints for your site-to-be, here’s one useful approach to mapping the content you plan to put on the site to the physical pages that will contain and display it. It’s called the section/level model.
♦ A section is a category, like “Company News,” “Products,” “People,” or “Links.” The various sections are typically listed on the site’s Home page. Each page on the site belongs to a particular section. And unless there’s only one page in a given section, the section has its own menu page. 84 Web Design from Scratch
♦ The level is the number of steps (i.e. jumps) a given page is removed from the Home page. Considering the Home page as Level 1, then, section menu pages are Level 2. Pages one step “below” the section menu are Level 3.
This is basically a “hierarchical” or “tree” model, based on the concept of one Home page as a root or point of entry, with other pages branching away from it. (Of course, nothing prevents you from also installing sideways links, as opposed to just up-down links between levels.) 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 menu and submenu pages—the Home page and the various section menu pages—are the key nodes in this structure. As a rule of thumb, keep the number of menu items per page between four and eight. When in doubt, increase the number of menu choices before you create a new submenu page (i.e. a new level). Studies have shown that users prefer a few dense screens of choices over many layers of simplified menus. 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 Page Wizards, you’ll begin with one Home Page linking to half a dozen Level 2 (section) pages; make sure these sections are named according to the content you’ll be offering. Web Design from Scratch 85
Over time, you’ll be adding content. The section pages will probably evolve into menu pages, with content migrating to newly-added Level 3 pages. You’ll be prepared for this growth if you’ve started out with a clear model of your site’s structure. 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 section/level model we’ve been using provides a suitable framework—assuming it works with your content—because the basic form of a “tree” is about as intuitive as any path system is likely to get. But with users coming in through side doors, or traversing 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. Unless your site is extremely simple, don’t expect sequential page numbering to serve a visitor’s needs. In fact, the only person who should have to contend with page numbers is you—because WebPlus requires you to supply a page number each time you define a page-to- page hyperlink. That means you’ll need to maintain a separate listing of your site’s page numbers (corresponding to pages in the original publication). Rather than page numbers, what’s needed are visual cues on each page that convey: Which section am I in now? and Where am I in relation to the section menu? Text can help. It’s common sense to use page titles or headlines that identify what’s on the page. By using somewhat larger headline text for Level 2 (section menu) 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 free text on the page, aligned with background elements. 86 Web Design from Scratch
But the most effective approach, and one that deserves as much attention as the design of your Home page, involves designing a navigation bar or “navbar” that will serve as:
♦ An element of the site’s page composition; ♦ A visual reminder of where the user is; ♦ A functional tool to enable jumps between sections of the site.
Wherever it’s placed—across the top, down the left or right side, or elsewhere—the navbar needs to be considered a fixture of the page layout. It must never disappear or wander off to another corner. A typical navbar provides buttons linked to the Home page and the various section menu pages:
The navbar’s appearance can vary in a meaningful way. For example, on pages within a particular section, that section’s button could appear highlighted (using a different color, font style, etc.). As the user enters each new section, the otherwise fixed navbar will appear to change state, signaling the transition.
It’s not difficult to create navigation bars using only text, and in fact pages created with the WebPlus Wizards use these to good effect. But a well-designed graphical navbar will reward your efforts and set your site a notch above the others. For further advice, see the Design Tips in the chapter on hyperlinking. 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. The advantage of using a navigation bar is that links to key nodes in your site structure are built in, and you don’t have to worry so much about users getting lost. You can devote more of your time to adding hypertext links (see below) that enhance both your content and the user’s experience. Web Design from Scratch 87
Page Layout 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 publication, 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.
Browser Window (“safe area”)
Page
The Web page viewer initially sees only what’s displayed in the browser window (the safe area, after the television concept of a “safe title” area), leaving unseen an indeterminate portion of the page below that. At 800x600 resolution, the safe area may be around 400 vertical pixels of actual page height. Content in this region may be all the visitor sees for several seconds as various graphics load onto the page. 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. 88 Web Design from Scratch
In general, Web page headers and footers need to contain more information than those in a conventional publication. 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). 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. 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, section menu 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 section menu pages should resemble each other, while looking distinct from pages at other levels. Besides adding interest, these variations also serve as navigational cues. In using WebPlus to design the publication, 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. (See the tips in the “Graphics” chapter on combining foreground and background elements.) Web Design from Scratch 89
WebPlus includes two default Web page sizes: Standard for VGA monitors, Wide for SVGA. The latter (800x600) option is fine for most users. The bottom of the WebPlus page is fixed, too, but a Web browser will only display as far as the bottom object on each page. If there’s a chance you’ll be including pages with a lot of text, requiring users to scroll down, you can increase the height valueforthepageto give yourself some extra room. You don’t have to fill all the space, 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 in your browser 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. 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.” 90 Web Design from Scratch
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. Remember that some users still turn off graphic loading when browsing Web sites, in order to speed up access to textual info and skip advertising. These users will never see your images; make sure your text hooks them. For these as well as other visitors, make sure you provide alternate text captions for each graphic, using the Web Picture Manager dialog (on the Tools menu). You can select individual graphics and then run the Wizard to set individual captions. The captions 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 alternate text (via synthesized speech), and so will not completely miss the pictorial content. Large graphics have their place, particularly if they double as hypergraphics (see below), but you certainly don’t want more than a couple of 50K graphics per page. And anything that’s going to take a minute or two to load had better be worth it!
A Design Checklist Before starting out, you should ask yourself these basic questions: How many pages will you need? What basic composition will you use? Where will the navigation bar go, and what will it look like? Do you want to use a text-based navigation “header” or “footer”? What font will you use for headlines, body text, and captions? Which color scheme will you use, and will you customize its basic colors or Web colors? (In Web Wizards, body text is marked with Scheme Color 1, but you can depart from that convention.)
The success of your site probably depends more on high-quality content than on any other single factor. As a rule, people will be visiting your Web site because they’re interested in what you can tell them or offer them. Your job is to make that reward as accessible as possible, and make the site’s design quality integral to the experience. You don’t want any elements that throw up barriers to access, or stand out like sore thumbs to detract from the visitors’ positive response. Web Design from Scratch 91
Make sure you’ve reviewed the mechanics of working with text, graphics, sound and video (if applicable), and hyperlinks before focusing on these questions: Given your basic page composition, how will you vary the layout of each page? Where will your graphics come from? Will you be using any photographs? Do you need to create line or QuickShape graphics in WebPlus? In addition to hyperlinks for your navigation bar and/or footer, where else could you place links for users’ convenience? (Go through your content once it’s on pages and place links to related content.) How might you use animated GIFs and marquees to add interest (especially on the Home page)?
Before publishing your site to the Web—in effect, throwing open the front door and inviting the world—you’ll want to brush the cobwebs from every corner. Review the advice in the previous chapter, and consider these points: Have you used the WebPlus proofing tools to enhance the quality of your text? Have you run the Layout Checker to inspect for possible problems? Have you specified a Web site title and added search engine descriptors (in File/Web Site Properties...)? Have you previewed your site in a Web browser—preferably in several different browsers? Have you reduced graphic file sizes to a minimum to improve load time? 92 Web Design from Scratch
Suggested Resources Print Nielsen, J., and Tahir, M. 2001. Homepage usability: 50 Websites deconstructed. Indianapolis, IN: New Riders Publishing. Critical analysis of popular Web home pages, with well-researched design insights. Siegel, D. 2002. Creating killer web sites. 3rd ed. Indianapolis, IN: New Riders Publishing. Proven resource; past editions graphically over the top, but technically rich. Strunk, W., and White, E.B. 1999. The elements of style. 4th ed. Boston: Allyn & Bacon. Classic writer’s handbook. Rosenfeld, L., and Morville, P. Information architecture for the World Wide Web. 1998. Cambridge, MA: O’Reilly & Associates. Highly regarded overview of information design concepts. Tufte, E.R. 1990. Envisioning information. Cheshire, CT: Graphics Press. Superb textbook on visual literacy. University of Chicago Press. 1993. The Chicago manual of style. 14th ed. Chicago: University of Chicago Press. Definitive reference source. Weinman, L. 1996. Designing Web graphics.3. 3rd ed. Indianapolis, IN: New Riders Publishing. Excellent introduction to Web graphic issues. Zinsser, W. K. 2001. On writing well. 25th anniversary ed. New York: Harper Resource. Tips for nonfiction writers.
Links www.desktopPublishing.com/open.htm Thousands of pages, including sections on Design, Graphic Sites, Web Designer’s Paradise. Extensive links to DTP resources. www.efuse.com/Start/ Attractively presented sequence of informational pages on planning, design, building, publishing. www.ippa.org/main.html Internet Professional Publisher’s Association site, “saluting the finest examples of design for commercial applications through the Internet.” Elegant example of site design, with interesting Essays section. Web Design from Scratch 93
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 (see Chapter 6). www.sun.com/980713/webwriting/ Writing for the Web. Authored by Jakob Nielsen et al. (see Print resources), classic 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 Getting Started, Animation, Site of the Week. www.webpagesthatsuck.com Vincent Flanders’ guided tour through examples of, ah, poor design. The site became one book, then a second, and (unfortunately) never runs out of material. www.webreference.com Comprehensive developer’s site, includes Developer’s Corner with how-to articles, sections on Graphics and Design. Part of internet.com’s WebDev network. www.webreference.com/dlab Archive of Dmitry Kirsanov’s “Design Lab” columns—advice you can use. See Dmitry’s current site at www.kirsanov.com. www.webreference.com/graphics Another WebReference feature, with a slew of tutorials and contributions from Wendy Peck and Dan Giordan. www.webstyleguide.com Yale CAIM 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. First edition still online at info.med.yale.edu/caim/manual/index.html.
Where should I go from here? The answer should be self-evident: Get straight back to work 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
A F alternate text, 90 fill property, 45 animations, 47 Followed Hyperlink color, 35 anti-aliasing, 50 Frame tool, 31 artistic text, 29, 33, 64 frames, 29 Attributes tab, 34, 44 Freehand Line tool, 43 FTP,74 B G Background color, 36 browse sequence, 63, 66 GIF, 49, 51, 54, 67 browsers, 13 gradient fill, 33 grouping objects, 45 C guides, 46 ChangeBar, 65 H Clipboard, 51 color, 45 Help on Help, 18 color palettes, 52 HintLine, 21 color schemes, 19, 35 Home page, 13, 90 Convert to Picture, 42 hotspots, 48, 61, 67 copyright notice, 89 HTML,insertingcode,62 Crop tool, 46 hypergraphics, 60, 64, 67 Curve toolbar, 44 Hyperlink color, 35 Curved Line tool, 43 Hyperlink Manager, 68 hyperlinks, 48, 59, 63, 67 D hypertext, 63 design I checklist, 91 page layout, 87 images pre-planning, 81 alternate text, 90 site structure and navigation, 83 anti-aliasing, 50 tips, 36, 49, 63, 76 color palettes, 52 dithering, 52 Convert to Picture, 42 dot grid, 46 dithering, 52 GIF format, 49, 51, 54, 67 hotspots, 61 E hypergraphics, 60, 67 editing text, 31 importing, 51 JPEG format, 51 rollover graphics, 61, 64 Web Picture Manager, 50, 90 Web-safe palette, 52
importing Pointer tool, 29, 41, 44, 60, 61 images, 51 pre-planning, 81 text, 33 Preview Site in Browser command, 71 installation, 9 Proof Reader Wizard, 71 Publish Site to Disk Folder command, 53, 73 J Publish Site to Web command, 74 Java, inserting applets, 62 publishing Web sites, 14, 73, 74 JPEG, 51 Q L QuickShapes, 44, 64 Layout Checker Wizard, 71 layout grid, 46 R line (outline) property, 33, 44 lines, drawing, 43 Registration Wizard, 8 Link button (text frames), 30 resources, 93 links. See hyperlinks Revert command, 24 rollover graphics, 61, 64 Rotate tool, 46 M ruler guides, 46 maintaining Web sites, 75 marquees, animated, 47 S master pages, 30, 60, 89 Multipage view, 23 safe area, 88 Scheme Manager, 36 section/level model, 84 N shapes, drawing, 43 navigation sites browse sequence, 63, 66 Home Page, 13, 90 site structure, 83 maintaining, 75 navigation bar, 60, 64, 86 pre-planning, 81 Normal view, 23 publishing, 14, 73, 74 structural design, 83 title, 88 O snapping, 46 sound clips, 48, 55 outline (line) property, 33, 44 Spelling Checker Wizard, 71 starting WebPlus, 17 P Startup Wizard, 17, 81 Straight Line tool, 43 pages Studio height, 89 Attributes tab, 34, 44 Home page, 13, 90 customizing tabs, 23 layout and design, 87 overview, 21 master page, 30, 60, 89 Pages tab, 23 safe area, 88 Wizard tab, 32 size, 89 suggested resources, 93 Pages tab, 23 system requirements, 8 pictures. See images T Rotate, 46 Straight Line, 43 tables, 29, 34 Table, 34 text Transparency, 45 artistic text, 29, 33, 64 transparency, 45 editing, 31 importing, 33 Insert Date or Time, 88 V tables, 29, 34 video clips, 48, 55 text frames, 29 view options, 23 Text Manager, 71 Thesaurus, 71 title (of site), 88 W toolbars Web color settings, 35 customizing, 23 Web Picture Manager, 50, 90 tools Web Wizards, 13, 18 Artistic Text, 33 customizing, 42 Crop, 46 Web-safe palette, 52 Curved Line, 43 Wizard tab, 32 Frame, 31 Word Count, 32 Freehand Line, 43 World Wide Web, 13 Pointer, 29, 41, 44, 60, 61 WritePlus, 31 QuickShape, 44