Download WebPlus 9 Companion

WebPlus 9
Companion
©2004 Serif (Europe) Ltd. All rights reserved. No part of this site may be reproduced in any form
without the express written permission of Serif (Europe) Ltd.
All Serif product names are trademarks of Serif (Europe) Ltd. Microsoft, Windows and the Windows
logo are registered trademarks of Microsoft Corporation. All other trademarks acknowledged.
Serif WebPlus 9.0 © 2004 Serif (Europe) Ltd.
Companies and names used in samples are fictitious.
Clipart samples from Serif ArtPacks © Serif (Europe) Ltd. & Paul Harris
Portions images ©1997-2002 Nova Development Corporation; ©1995 Expressions Computer
Software; ©1996-98 CreatiCom, Inc.; ©1996 Cliptoart; ©1996-99 Hemera; ©1997 Multimedia
Agency Corporation; ©1997-98 Seattle Support Group. Rights of all parties reserved.
Digital image content© 1997-2003 Hemera Technologies Inc. All Rights Reserved.
TrueType font samples from Serif FontPacks © Serif (Europe) Ltd.
Portions graphics import/export technology © AccuSoft Corp. & Eastman Kodak Company &
LEAD Technologies, Inc.
THE PROXIMITY HYPHENATION SYSTEM © 1989 Proximity Technology Inc. All rights
reserved.
THE PROXIMITY/COLLINS DATABASE® © 1990 William Collins Sons & Co. Ltd.; © 1990
Proximity Technology Inc. All rights reserved.
THE PROXIMITY/MERRIAM-WEBSTER DATABASE® © 1990 Merriam-Webster Inc.; © 1990
Proximity Technology Inc. All rights reserved.
The Sentry Spelling-Checker Engine © 2000 Wintertree Software Inc.
The ThesDB Thesaurus Engine © 1993-97 Wintertree Software Inc.
WGrammar Grammar-Checker Engine © 1998 Wintertree Software Inc.
Software License Agreement
This Software License Agreement (“License Agreement”) is a legal agreement between you (either
an individual or a single entity) and Serif (Europe) Ltd. (“Serif”) for the accompanying software
product, which includes computer software and may include associated media, printed materials, and
“online” or electronic documentation (the “Software Product”). By installing, copying, or otherwise
using the Software Product, you agree to be bound by the terms of this License Agreement. If you do
not agree to the terms and conditions of this License Agreement, do not install or use the Software
Product; you may, however, return it to your place of purchase for a full refund.
THANK YOU FOR LICENSING THE USE OF THE SOFTWARE PRODUCT. IT IS IMPORTANT THAT YOU (THE
"LICENSEE") READ THIS NOTICE CAREFULLY. THESE ARE THE ONLY TERMS AND CONDITIONS APPLICABLE TO
YOUR RIGHTS WITH RESPECT TO THE SOFTWARE PRODUCT. THE SOFTWARE PRODUCT IS PROTECTED BY
COPYRIGHT LAWS AND INTERNATIONAL COPYRIGHT TREATIES, AS WELL AS OTHER INTELLECTUAL PROPERTY
LAWS AND TREATIES. THE SOFTWARE PRODUCT IS LICENSED, NOT SOLD.
1. GRANT OF LICENSE
Serif hereby grants to Licensee a personal, non-exclusive, nontransferable license (a "License") to use one (1) copy of the
Software Product, including any updates thereto, and
accompanying documentation, if any, provided by Serif,
according to the terms set forth below. If the Software Product
is being provided to Licensee as an update or upgrade to
software which Licensee has previously licensed (such software
referred to as the "Prior Software"), then Licensee agrees to
destroy all copies of the Prior Software within thirty (30) days
after opening this package except for one backup copy of the
Prior Software.
2. SCOPE OF USE
You may install and use one copy of the Software Product, on a
single computer. The primary user of the computer on which the
Software Product is installed may make a second copy for his or
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
Software Product on other computers over an internal network;
however, you must acquire and dedicate a license for each
separate computer on which the Software Product is installed or
run from the storage device. A license for the Software Product
may not be shared or used concurrently on different computers.
3. LICENSE PAK
If you have acquired this LICENSE AGREEMENT in a Serif
License Pak, you may make the number of additional copies of
the computer software portion of the Software Product as
authorized in the Serif License Pak, and you may use each copy
in the manner specified above. You are also entitled to make a
corresponding number of secondary copies for portable
computer use as specified above.
4. PROHIBITIONS
You may not: modify, prepare derivative works from, translate,
reverse engineer, decompile, disassemble or otherwise derive
source code from the Software Product (except to the extent that
such acts are expressly permitted by applicable law
notwithstanding this limitation); copy the Software Product
(except as provided above) or the accompanying
documentation; rent, transfer, disclose, make available or grant
any rights in the Software Product (including any
accompanying documentation) in any form to any person
without the prior written consent of Serif; remove any
proprietary notices, labels, or marks on the Software Product
(including any accompanying documentation); use the Software
Product in any manner that infringes the intellectual property or
other rights of another party; or use the Software Product to
provide on-line or other database services to any other person.
5. RETENTION OF RIGHTS; TERMINATION
This License Agreement does not constitute a sale. All title,
trade secrets, copyrights, patents and other intellectual rights to
the Software Product, its accompanying documentation and any
copy made by Licensee remain with Serif, and Licensee hereby
agrees to preserve and acknowledges the foregoing. Licensee
further agrees and acknowledges that the Software Product and
all copies thereof are Serif’s exclusive property and constitute a
valuable trade secret of Serif. Licensee further agrees and
acknowledges that unauthorized copying of the Software
Product or the accompanying documentation, or failure to
comply with any of the provisions hereof (each, a "Terminable
Event"), will result in automatic termination of this License. In
the event of a violation of this License by Licensee, Serif
reserves and shall have available all legal remedies.
6. TERM OF LICENSE FOR TRIAL VERSION
SOFTWARE
The License pertaining to a trial version of the Software Product
(a "Trial Version") shall expire in accordance with the terms as
set forth in the installation process for the Trial Version along
with the designated trial period as set forth in the trial program.
7. LIMITED WARRANTY AND DISCLAIMER
Serif warrants that, for a period of ninety (90) days after
delivery, the diskettes or CD-ROMs on which the software
included in the Software Product is furnished will, under normal
use, be free from defects that prevent Licensee from loading the
Software Product on a computer. Serif’s entire liability and
Licensee’s exclusive remedy under this warranty will be, at
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
Product, on diskettes or CD-ROM, as applicable or (c) return
the price paid for the Software Product, in each case upon return
of the Software Product to Serif together with a copy of your
receipt for the purchase thereof. This Limited Warranty is void
if failure of the Software Product or hardware has resulted from
accident, abuse, or misapplication. Any replacement Software
Product will be warranted for the remainder of the original
warranty period or thirty (30) days, whichever is longer.
Outside the United States, neither these remedies nor any
product support services offered by Serif are available without
proof of purchase from an authorized non-U.S. source. The
Software Product is licensed to you on an "as is" basis without
any warranty of any nature.
8. NO OTHER WARRANTIES
Except for the above express limited warranties, Serif and its
suppliers make and licensee receives no warranties or
conditions, or terms, express, implied, statutory, or in any
communication with licensee. To the maximum extent
permitted by applicable law, Serif and its suppliers disclaim all
other warranties and conditions, either express or implied,
including, but not limited to, implied warranties of
merchantability, fitness for a particular purpose, title and noninfringement, with regard to the software product and the
provision of or failure to provide support services. Licensee
shall be solely responsible for the selection, use, efficiency and
suitability of the software product and serif shall have no
liability therefor. Serif shall have no liability for, nor obligation
to indemnify licensee regarding actions alleging the
infringement of proprietary rights by the software product. Serif
does not warrant that the operation of the software product will
be uninterrupted or error free or that the software product will
meet licensee’s specific requirements. The Limited Warranty
gives you specific legal rights. You may have others, which
vary from state/jurisdiction to state/jurisdiction.
9. LIMITATION OF LIABILITY
In no event will Serif or its suppliers be liable for loss of data,
corruption, lost profits, cost of cover, or other special,
incidental, punitive, consequential, or indirect damages arising
from the use of the software product (including any
accompanying documentation), however caused and on any
theory of liability. This limitation will apply even if Serif or an
authorized distributor has been advised of the possibility of
such damage. In no event will Serif’s liability exceed the
amount paid for the software product. Licensee acknowledges
that the amounts paid by licensee for the software product
reflect this allocation of risk. Some states or other jurisdictions
do not allow the exclusion or limitation of liability for
incidental or consequential damages, so the above limitations
and exclusions may not be applicable in certain instances. None
of the above affects the statutory rights of licensees residing in
the United Kingdom.
10. NOT FOR RESALE SOFTWARE
If the Software Product is labeled “Not for Resale” or “NFR,”
then, notwithstanding section 1 of this License, your use of the
Software Product is limited to use for demonstration, test, or
evaluation purposes.
11. NO RENTAL; OTHER TRANSFERS
You may transfer this License to another computer or
workstation only on a permanent basis (that is, with no intent to
transfer again) provided the computer, workstation, or other
digital electronic device from which you have transferred this
License no longer accesses or otherwise utilizes the Software
Product, and the Software Product is used in accordance with
the terms of this License Agreement.
12. TERMINATION
You may terminate this License Agreement at any time. Serif
may terminate this License Agreement if you fail to comply
with the terms and conditions of this License Agreement. In
either event, you must destroy all copies of the Software
Product.
13. UPGRADE
If this License is an “Upgrade,” you must have a valid license
for the Prior Software for this License Agreement to be valid,
and this License Agreement must be used to replace such
license for the Prior Software. The total number of license
“Upgrades” you may acquire may not exceed the total number
of computers, workstations, or other digital electronic devices
that were licensed to access or otherwise utilize the Software
Product at the time you upgraded the Software Product.
14. GUIDELINES FOR THE USE OF DIGITAL
CONTENT IMAGES
This product contains numerous clipart and photo images and/or
video and audio media files (collectively referred to as the
“Digital Content”) which are either owned by Serif or licensed
from a third party. As a user of this product you are free to use,
modify, and publish the Digital Content as you wish subject to
the restrictions set out below. If you are uncertain as to whether
your intended use complies with the guidelines set out below,
we recommend that you seek the advice of your own attorney or
legal counsel.
A. YOU MAY, subject to any restrictions set out below:
1. Incorporate any Digital Content into your own original work
and publish, display, and distribute your work in any media.
You may not, however, resell, sublicense, or otherwise make
available the Digital Content for use or distribution separately
or detached from a product or Web page. For example, the
Digital Content may be used as part of a Web page design, but
may not be made available for downloading separately or in a
format designed or intended for permanent storage or reuse by
others. Similarly, clients may be provided with copies of the
Digital Content (including digital files) as an integral part of a
work product, but may not be provided with the Digital Content
or permitted to use the Digital Content separately or as part of
any other product;
2. Make one (1) copy of the Digital Content for backup or
archival purposes.
B. YOU MAY NOT:
1. Create scandalous, obscene, defamatory, or immoral works
using the Digital Content nor use the Digital Content for any
other purpose prohibited by law;
2. Use or permit the use of the Digital Content or any part
thereof as a trademark or service mark, or claim any proprietary
rights of any sort in the Digital Content or any part thereof;
3. Use the Digital Content in electronic format, on-line, or in
multimedia applications unless (a) the Digital Content is
incorporated for viewing purposes only and (b) no permission is
given to download and/or save the Digital Content for any
reason;
4. Rent, lease, sublicense, or lend the Digital Content, or a copy
thereof, to another person or legal entity. You may, however,
transfer all your license to use the Digital Content to another
person or legal entity, provided that (a) you transfer the Digital
Content and this License, including all copies (except copies
incorporated into your work product as permitted under this
License), to such person or entity, (b) that you retain no copies,
including copies stored on a computer or other storage device,
and (c) the receiving party agrees to be bound by the terms and
conditions of this License;
5. Use any Digital Content except as expressly permitted by this
License.
15. MISCELLANEOUS
This Agreement shall not be governed by the 1980 U. N.
Convention on Contracts for the International Sale of Goods;
rather, this Agreement shall be governed by English law. This
Agreement constitutes the entire agreement between Serif and
Licensee and supersedes all prior agreements, understandings,
communications, advertising, proposals or representations, oral
or written, by either party. If any provision of this Agreement is
held invalid or unenforceable, such provision shall be revised to
the extent necessary to cure the invalidity or non-enforceability,
and the remainder of this Agreement shall continue in full force
and effect. This Agreement shall be amended only by an
executed writing by authorized representatives of both parties.
How to contact us
Our main office (UK, Europe):
The Software Centre
PO Box 2000, Nottingham, NG11 7GW, UK
Main
Registration
Sales
Technical Support*
Customer Service*
General Fax
(0115) 914 2000
(0800) 376 1989
(0800) 376 7070
(0115) 914 9090
(0115) 914 9090
(0115) 914 2020
*Local rate (UK only)
(0845) 345 6770
Technical Support E-mail [email protected]
American office: (USA, Canada)
The Software Center
13 Columbia Drive, Suite 5, Amherst, NH 03031
Main
Registration
Single Unit Sales
Technical Support
Customer Service
General Fax
(603) 889-8650
(800) 794-6876
(800) 55-SERIF or 557-3743
(603) 886-6642
(800) 489-6720
(603) 889-1127
Technical Support E-mail [email protected]
Online
Visit us on the Web at
Serif newsgroups
http://www.serif.com
news://news.serif.com
International
Please contact your local distributor/dealer. For further details please
contact us at one of our phone numbers above.
Contents
1 ♦ Welcome
1
About the Companion .............................................................................. 3
The hands-on sequence .......................................................................... 3
Linking to additional help ......................................................................... 3
What’s new in Serif WebPlus 9... ............................................................. 4
Registration and support .......................................................................... 9
System requirements ............................................................................... 9
Installing WebPlus 9 .............................................................................. 10
How should I get started? ...................................................................... 10
2 ♦ Getting Started
11
Overview ................................................................................................ 13
What is a Web site? ....................................................................... 13
How does WebPlus work? ............................................................. 13
How do I publish my Web site? ...................................................... 14
WebPlus Startup Wizard ........................................................................ 15
Using a Web template… ........................................................................ 16
Take a look around ................................................................................ 18
For more help on the basics................................................................... 23
3 ♦ Web Site Design and Construction
25
Pre-planning........................................................................................... 27
Who’s it for? ................................................................................... 28
What have you got? ....................................................................... 28
Site structure.......................................................................................... 29
Navigation .............................................................................................. 33
Pages and master pages ....................................................................... 35
Manipulating pages................................................................................ 37
Page layout considerations .................................................................... 39
Your Home page ............................................................................ 42
For more help on site construction......................................................... 43
4 ♦ Working with Text
45
About text frames................................................................................... 47
Working with text frames........................................................................ 48
Editing text ............................................................................................. 49
Importing text ......................................................................................... 50
About artistic text ................................................................................... 51
About table text...................................................................................... 52
Scheme colors and text ......................................................................... 52
Design tips ............................................................................................. 53
For more help on working with text... ..................................................... 54
5 ♦ Working with Graphics, Animation, & Multimedia 55
Graphics in WebPlus ............................................................................. 57
Importing a picture or animation ............................................................ 58
Drawing lines and shapes...................................................................... 60
Manipulating objects .............................................................................. 63
Editing colors ......................................................................................... 64
Color schemes revisited................................................................. 64
Advanced effects ................................................................................... 65
Adding animations ................................................................................. 67
Adding sound and video ........................................................................ 68
Design tips ............................................................................................. 69
Graphics......................................................................................... 69
Multimedia...................................................................................... 75
Suggested links.............................................................................. 76
For more help on working with graphics, animation, and multimedia... . 77
6 ♦ Working with Hyperlinks and Interactivity
79
Hyperlinks and anchors ......................................................................... 81
Using hotspots and rollovers ................................................................. 83
Navigation elements .............................................................................. 85
About HTML and Java ........................................................................... 86
Design tips ............................................................................................. 87
Hyperlinks and anchors.................................................................. 87
Hypergraphics ................................................................................ 88
Navigation elements....................................................................... 89
For more help on hyperlinks and interactivity ........................................ 90
7 ♦ Previewing, Publishing, and Maintaining the Site
91
Optimizing the site ................................................................................. 93
Previewing the site................................................................................. 93
Publishing to a local folder ..................................................................... 95
Publishing to the World Wide Web ........................................................ 96
Maintaining your site.............................................................................. 98
Design tips ............................................................................................. 99
For more help on publishing-related tasks........................................... 100
Where should I go from here? ............................................................. 100
Welcome
Overview
3
About the Companion
The WebPlus 9 Companion has everything you need to get started,
from the basics to tips for advanced users. Here’s a chapter summary:
1
Welcome. Reviews the program’s main features, requirements,
and installation sequence.
2
Getting Started. A simple introduction to Web sites and a
hands-on sequence introducing the WebPlus environment.
3
Web Site Design and Construction. Essential information on
pre-planning, site structure, navigation, and page layout.
4
Working with Text. How to edit text, customize the text
layout, and import text.
5
Working with Graphics, Animation, and Multimedia. How
to insert/create your own images, animations, sound and video.
6
Working with Hyperlinks and Interactivity. How to link text
or graphics to Web pages, e-mail, or files, and enhance pages
with Java or HTML effects.
7
Previewing, Publishing, and Maintaining the Site. Covers
“finishing touches” and the simple steps that will get your site
onto the Web and help you maintain it.
The hands-on sequence
This symbol denotes the hands-on sequence that runs through the
Companion. So grab your mouse and follow along, starting in Chapter
2 with a Web template and a brief tour of the WebPlus environment. In
following chapters, we’ll tweak the template, explain basic concepts,
and demonstrate how to customize the various elements of a Web site.
Linking to additional help
?
Throughout the Companion, use this symbol as your key to further
information that’s available in WebPlus online Help. You’ll find a
complete Visual Reference to the WebPlus interface, plus a
comprehensive “How To” section covering goals and procedures.
Press F1 or choose WebPlus Help from the Help menu.
4
Overview
What’s new in Serif WebPlus 9...
Welcome to Serif WebPlus 9—the easiest way ever to get your
business, organization, or household on the World Wide Web!
Among new WebPlus 9 features, you’ll find...
♦
Theme Graphics for Instant Flair
Choose from an array of ready-made design elements in themed
sets, on a new Studio tab... Swap sets and change the look of your
site with a single click... Customize text, font, colors, and more.
♦
Site Structure Mapping for Logical Design
The new Site Structure tree not only serves as a control center for
manipulating pages, it helps you visually arrange your pages into a
hierarchy of sections and levels... think like an architect as you
design a sensible content layout!
♦
‘Smart’ Navigation Elements for Ease of Use
Intelligent theme graphics like navigation bars and Previous/Next
buttons are programmed to reflect your site structure... adapt
automatically as you rearrange pages. Effortlessly establish easyto-follow pathways throughout your site!
♦
Improved Page Control and Versatility
Browse pages quickly with the HintLine’s Page Locator. Easily
customize a host of properties for individual pages: Length,
background color, centering, file name, title, and more. Import
HTML Web pages, even entire sites.
♦
Superior Text Editing and Unicode Support
Import, paste, export in Unicode format... design with foreignlanguage or exotic/symbol fonts and characters. Use drag-and-drop
editing in WritePlus. Clear formatting (revert to plain style) with a
single keystroke.
♦
New Tabbed Interface, Multimode Preview
Click tabs to switch between multiple project windows with ease.
Use any window for an internal Internet Explorer preview of
your site at settable page sizes... or view external previews using
any browser installed on your system.
Overview
5
♦
Page Anchors and Hyperlink Improvements
Now you can insert anchors to target hyperlinks directly to any
word or onscreen object... Automatically link downsized
“thumbnail” images to full-sized versions on an empty page...
Open links in a new window as needed... Include offsite links in
your site structure... Convert hotspots to match selected shapes...
Use the new QuickButton object for instant creativity.
♦
Picture Import and Editing Enhancements
Import images at 96dpi screen resolution. Adjust brightness and
contrast, size and resolution, apply coloration and view properties
with the new Picture toolbar. Add any workspace color to the
palette with a single click.
♦
Improved Table Support
Use the convenient new Table Toolbar to enter text, apply preset
or custom number formatting... Choose from a wide range of
functions for spreadsheet calculations.
♦
A New Slant with Enveloping
Apply a customizable mesh warp envelope to any object to add
perspective, slant, bulge, and more. You can deform just the
outline or include the object’s fill, with an optional grid revealing
the geometry of your warp.
♦
Intelligent Bézier Curves and More
Now simply “connect the dots” to trace around curved objects and
pictures... the improved Curved Line tool features Smart
segments that use automatic curve-fitting to connect each node!
Use Crop to Shape to trim one object to another... Convert to
Curves for node-and-segment control over all objects, including
QuickShapes.
♦
Improved Line Drawing and Editing
Employ a host of new line properties... Sketch using calligraphic
lines with an adjustable pen angle. Add rounded corners (caps)
when and where you need them. Customize your lines using dots
and dashes... vary the join style of connected lines.
♦
Astounding 3D Lighting and Surface Effects
Beyond our previous shadow, glow, bevel, and emboss, advanced
algorithms now bring flat shapes to life! Choose one or more
effects, then vary surface and source light properties. Start with a
pattern or a function, adjust parameters for incredible surface
contours, textures, fills— realistic-looking wood, water, skin,
marble and much more.
6
Overview
♦
Speedy Soft Edges
No more laborious transparency-tweaking... the Feathering filter
effect adds a soft or blurry edge to any object. Great for blends,
montages, vignetted photo borders, and much more.
♦
Dramatic Dimensionality
Why settle for only two dimensions? Instant 3D adds realistic
depth to ordinary objects and text. Use one master control panel to
vary extrusion, rotation, bevel, lighting, texture, and more.
♦
Object Styles Transform with a Single Click
Select any object (including text) and choose from a gallery of
ready-made styles that combine a host of attributes such as 3D
filter effects, fills, transparency, line styles, border—even font
variations. Customize the preset styles or create your own!
♦
Artistic Text on a Path
Artistic text is more powerful than ever with the new path text
tools. Just select a tool, draw your line, and start typing... beautiful
text flows along the path. You can edit the path as any line
(altering the text flow accordingly) and still change the text
properties at any time!
♦
Even More Multimedia and HTML Support
Use Paste Special to insert formatted HTML directly from the
Clipboard... Import Flash Shockwave (.SWF) animated movies or
MP3 audio files!
♦
Streamlined Web Site Publishing
Choose pages to publish to disk from a convenient tree view...
Revamped FTP, better management of image resolution, and
repeatable file name prediction when publishing to the Web mean
smaller exported file sizes and faster upload times!
♦
As a Design Environment, Friendlier than Ever
Always responsive to WebPlus users’ requests, we’ve added autonaming of text objects... improved alignment controls...and mouse
wheel support... text case settings... the ability to edit individual
objects within groups without affecting group-wide settings... not
to mention a host of “behind the scenes” enhancements!
Overview
7
...on top of these established features:
♦
Easy Editing and Special Effects
With WebPlus, it’s a snap to import your own text and graphics.
You’ll find built-in modules like WritePlus, for integrated word
processing, plus tools for creating text hyperlinks and hotspot
graphics. Choose the color scheme that looks best... The
Snapping feature and Dot Grid help you achieve a crisp layout.
Everything’s wrapped into a friendly DTP-style environment with
onscreen Tooltips, HintLine, and context-sensitive help!
♦
Versatile Web Feature Support
WebPlus supports current HTML for better WYSIWYG page
design. Add sound and video—even Java and HTML
header/body code—to spice up your pages! The Layout Checker
helps you fine-tune your site before it’s published. Then preview
your site in your own Web browser and publish it to a local folder
or a remote server.
♦
Animated GIFs and Marquees
Add life to your Web pages! Choose from over 600 animated
Animals, Cartoons, Dingbats, Logos, Objects, and more... Use a
Wizard to custom-design your own varied and colorful multi-line
text messages that scroll across the screen... Add your own
responsive buttons with the multi-layered Rollover graphics
option.
♦
Intelligent Color Schemes
Choose from dozens of preset color schemes to change the overall
appearance of your site with a single click. You can customize the
scheme colors, create brand new schemes, and apply any scheme
to a “from-scratch” site.
♦
On-screen Studio Combines Convenience with Functionality
Floatable, dockable Studio tabs provide rapid drag-and-drop
access to commonly-used controls such as fonts, line settings, and
the color table. Use the Portfolio to store your favorite designs for
use in any Web site... and tap the Gallery, with built-in mastheads,
logos, and lots of other page elements you can customize to suit
your needs!
8
Overview
♦
Professional Layout and Text Tools
Intelligent text fitting. Movable rulers and guides. Precision
placement, rotation, flipping, cropping, vertical alignment. The
Replicate tool to multiply any object into a line or grid
arrangement, with pinpoint control over offset and spacing. Text
formatting with named styles. Multiple master pages for repeating
background elements. Not to mention word count, search and
replace, spell-checking with personal dictionary, thesaurus, and
proof reader to ensure your site’s readability.
♦
Artistic Text Tool
Complementing traditional text in frames, just click and type
anywhere on the page, format with the customary tools, then
apply colorful lines and fills directly at the character level. Scale it,
rotate it, flip it... discover a host of new possibilities!
♦
Table Tool with Editable Calendars
Create and edit tables right in your site, with no need for a
separate utility. Choose from a range of preset formats or design
your own by customizing lines, cells, rows, and columns. Powerful
text manipulation features include AutoClear, AutoFill, and cell
merge. Plus table-based calendars!
♦
Amazing Image Manipulation
Import images inline as part of frame text flow, and create your
own 32-bit anti-aliased TIFFs and PNGs. Convert to Picture
allows instant, in-place format changes! Add borders to your
imported images and shape art... even frame a text frame! Control
imported metafiles and OLE options, maintain linked images...
each export filter remembers its own settings.
♦
QuickShapes
Long an exclusive feature of other Serif solutions, QuickShapes
work like intelligent clipart... or the most powerful set of drawing
tools you can imagine. Just choose a template shape, drag on the
page... then adjust handles to customize each angle and dimension.
♦
Powerful Drawing Options
An arsenal of drawing tools are at your command... Sketch
freehand lines and curves. Extend existing lines with ease, define
closed shapes. Apply line styles to all kinds of shapes—even add
line endings like arrowheads and diamonds. Use the Curve
Toolbar to fine-tune the contours of any line, closed shape, text
wrap boundary or cropping edge.
Overview
9
♦
Gradient and Bitmap Fills, Transparencies
For sophisticated illustrations and impressive typographic effects,
select from a wide variety of Linear, Radial, and Conical fills
and transparencies... and a multi-faceted Studio gallery of picturebased effects. Both solid and variable transparency let you add
new depth to your print and Web creations. Use the interactive Fill
and Transparency tools for drag-and-drop updating.
♦
Striking Shadow, Glow, and Bevel Effects
One dialog serves as your “creation station,” where you can select
and preview a spectacular range of special effects for text or any
object. Choose from soft-edged transparent Drop Shadow, Inner
Shadow, Inner Glow, or Outer Glow, plus four Bevel and Emboss
effects!
♦
Total Ease-of-Use
Drag and drop objects from other applications. AutoScroll
automatically adjusts your view as you move or resize. Compact
ChangeBar with context sensitivity and popup sliders. Right-click
menus, HintLine and context-sensitive cursors make WebPlus as
friendly as a puppy!
Registration and support
If you see the Registration Wizard when you launch WebPlus, please
take a moment to complete the registration process. Just call Serif tollfree and provide the installation number and code shown. We’ll give
you a personalized registration number in return. Remember, if you
need technical support please contact us. We aim to provide fast,
friendly service and knowledgeable help.
System requirements
If you need help installing Windows or setting up peripherals, refer to
Windows documentation and help.
Minimum:
♦ IBM-compatible Pentium PC with CD-ROM drive and mouse (or
other Microsoft-compatible pointing device)
♦ Microsoft Windows® 98, 98 SE, Me, 2000, or XP operating
system
♦ 32MB RAM (Windows 98), see manufacturer’s requirements for
other operating systems
10
Overview
♦ 80MB (minimum), 200MB (recommended) free hard disk space
♦ SVGA (800x600 resolution, 16-bit color) display or higher
♦ Internet account and connection for Web publishing
Additional disk resources and memory are required when editing large
or complex documents
Optional:
♦ Windows-compatible printer
♦ TWAIN-compatible scanner and/or digital camera
♦ Stylus or other input device
Installing WebPlus 9
To install the program, simply insert the WebPlus 9 Program CD-ROM
into your CD-ROM drive. The AutoRun feature automatically starts the
Setup process and all you need to do is select the WebPlus Install
option and answer the onscreen questions. If AutoRun does not start the
install, use the manual install instructions below.
If you’ve obtained the WebPlus Resource CD-ROM, install it now
following the same procedures you used for the Program CD.
To reinstall the software or change any part of the installation at a later
date, select Settings/Control Panel from the Windows Start menu and
then double-click the Add/Remove Programs icon. Make sure the
correct CD-ROM is inserted into your CD-ROM drive, click the
Install… button, and follow the on-screen instructions. You’ll have the
choice of removing or adding components, reinstalling components, or
removing all components.
How should I get started?
You’ve already begun! Now, step through the chapters to learn how to
create and then customize a basic Web site. Be sure to follow the
instructions carefully. For support as you work, choose WebPlus Help
from the Help menu, then click Help on Help in the Contents list.
There, you’ll learn about the HintLine, the Visual Reference, and other
built-in learning aids.
Getting Started
Getting Started
13
Overview
What is a Web site?
A Web site is a collection of files stored on a computer where users
with special programs called Web browsers can view the files as
pages. Browsers can read the common file format known as HTML
that describes how the various elements of text, images, hyperlinks, and
other elements are arranged on each Web page. Each Web site has a
single Home Page—the first page a visitor sees—usually containing
hyperlinks to other pages on the site, which in turn have links to others.
To the person using a browser to access the Web site, the content
appears seamlessly linked. You just click on a link to display related
information.
The World Wide Web was conceived as a way of using the Internet—
the global network that interconnects computers around the world—to
share information stored as Web pages. But Web sites don’t depend on
the Internet—they can be (and often are) accessed just as well over a
local area network or private intranet. Remember, a Web site is just a
collection of files.
How does WebPlus work?
WebPlus lets you assemble all the elements of your site-in-progress
into one convenient, multi-page document that can be saved in a single
step as a WebPlus project file. At any time—again with just one step—
you can publish the project as a separate set of pages that comprise
your Web site. WebPlus takes the pages you’ve laid out and converts
them to HTML.
Creating a Web site in WebPlus can be as simple as choosing and
customizing a Web template... or you can start from scratch—it’s up to
you. Web templates simplify things by providing you with a variety of
starter layouts, professionally designed expressly for World Wide Web
display. Either way, you’ll appreciate the ease with which WebPlus lets
you revise text and graphics, and adjust the design of each page. Either
way, the next step is to spend some time customizing the pages with
your own text, graphics, and other content. The Companion will cover
what you need to know.
14
Getting Started
For editing your site, WebPlus offers a set of intuitive tools and a
straightforward workspace that resembles a desktop publishing (DTP)
environment. You can easily import text or images, use the built-in
word processor, create colorful graphic shapes, and add hyperlinks and
hotspots that users can click to access other Web pages or send e-mail.
Once your content is in place, you can use a variety of proofing tools
and Wizards to review and optimize the site before publishing it.
You can preview one or more pages at any time, either within WebPlus
(using a special window based on the Internet Explorer browser) or
separately using any browser installed on your system.
When you’re ready to publish, WebPlus takes the project’s pages and
converts them to HTML, graphics (images) and other files. You never
have to worry about the HTML code itself.
How do I publish my Web site?
Publishing a site using WebPlus is a one-step operation that:
(1) converts your project to files for the Web, and
(2) copies the Web files to a location you specify—either a local hard
disk or a Web host.
To publish to a local folder, you don’t even need a connection to the
Internet. Of course, you’ll need a Web browser to view your site.
To publish to the World Wide Web, you’ll need a host for your Web
site—that is, disk space on a server connected to the Internet—so that
others can access your site. You can also publish your site to the remote
server using WebPlus or a separate FTP utility. You’ll find details in
online help (see the topic “Publishing to the World Wide Web”).
Getting Started
15
WebPlus Startup Wizard
Once WebPlus has been installed, you’ll be ready to start. Setup adds a
Serif WebPlus 9.0 item to the Programs submenu of the Windows
Start menu.
Use the Windows Start button to start WebPlus (or if WebPlus is
already running, choose New from the File menu) to display the
Startup Wizard (menu screen).
WebPlus launches, and you’ll see the Startup Wizard, which offers
seven choices:
♦
Create Site from Template, to create an instant Web site
♦
Open Saved Site, to edit existing WebPlus project files
♦
Start New Site, to start out with a blank Home page
♦
View Sample Sites, to see professionally designed examples
♦
Import Web Pages, to convert existing HTML resources
♦
View Tutorials, to see introductory illustrated overviews
♦
Get Web Space, to learn about special Web Hosting offers
16
Getting Started
Whether you’re a new or returning WebPlus user, View Tutorials is a
great place to begin learning about new features in WebPlus 9, and
review basic concepts. If you’re just getting started, here are some other
recommendations:
Follow along in the Companion as we take a hands-on, guided tour
of WebPlus features.
To explore independently, click Create Site from Template or
Start New Site from the Startup Wizard (For details on using
templates, see the next section.)
At any time from the main WebPlus screen, you can press F1 or
choose WebPlus Help from the Help menu to access online help.
The help window initially displays its Contents pane on the left,
and the Visual Reference menu on the right. Click the book icons
in the Contents list to expand topics, and click a document icon to
display a particular topic. Click directly on Visual Reference
graphics to browse interface features like menus and toolbars.
Click the Index tab to peruse the list of key terms, or the Search
tab to look up specific terms using full-text search.
Beginners should click the Help on Help topic in the Contents list
for some tips on how to proceed.
Using a Web template…
Web templates are predesigned sites that get you up and running
quickly with a layout that meets your basic needs. Even if you intend to
design your own site from scratch, we recommend that you begin with
a template and “learn the ropes” by customizing it. If you follow along
with the Companion’s hands-on sequence, you’ll emerge with the right
balance of skills and confidence to embark on your own creations.
For demonstration purposes, we will be working with a template from
the “Business” category. So at least for now, pretend you’re the
Webmaster for a small business—it’s OK to use your imagination!
Launch WebPlus or choose New... from the File menu.
You’ll see the Startup Wizard. Select Create Site from Template.
Getting Started
17
Notice that the Business category is initially selected, with
thumbnails for the available templates displayed on the right (your
selection of templates may differ). We’re going to use the
Communications template, so click its picture to select it and then
click Finish.
WebPlus opens the template site and displays its Home page in the
workspace. It’s actually quite a simple site with just five pages. If you
look to the right of the layout you’ll see them listed under the “Site
Structure” heading. More about all that in a moment... first, would you
like to turn the project into a Web site?
On the top toolbar, click the down arrow on the
HTML
Preview button to display a submenu which offers several preview
options, including any browsers you’ve installed on your system.
Select Preview Site in Internet Explorer (or your browser of
choice).
In a few moments, after WebPlus generates the necessary temporary
files, a new browser window opens displaying the site’s Home page.
Move the mouse pointer across the top navigation bar (which
links to all five pages included in the template site) and you’ll see
tooltips for each button. Click any button to navigate quickly
between the five pages. When you’ve convinced yourself that this
Web site really works, you can close the browser window and
return to WebPlus.
18
Getting Started
Before proceeding, choose Save... from the File menu and save
the project file, providing a file name of your choice (perhaps
HANDSON.WPP, which is how we’ll be referring to this site
throughout the Companion). Note that saving the WebPlus (.WPP)
project file is not the same as publishing it as a Web site.
Take a look around
Let’s take a few moments to examine the site we created from the
template. In the process, you’ll become familiar with some of the basic
features of the WebPlus environment. Your screen will look something
like this:
Standard, Arrange
& View toolbars
Text & Frame toolbars
Tools toolbar
Studio
(Site tab shown)
Attributes toolbar
ChangeBar
HintLine toolbar
The workspace consists of a page area (where you put the text,
graphics, and other elements you want to appear on the final Web page)
and a surrounding pasteboard area (where you can keep elements that
are being prepared or waiting to be positioned on the page area).
Move the mouse pointer around the screen and you’ll see popup
tooltips that identify toolbar buttons. Watch the HintLine toolbar
at the bottom for capsule descriptions of each feature: helpful data
and hints when there’s an object selected, and hints about buttons
and menus at other times.
Try right-clicking any object or page region to bring up a context
menu of functions... the choices probably seem overwhelming at
this point! To access online help, you could press F1 or choose
WebPlus Help from the Help menu—but for now, stick with the
guided tour.
Getting Started
19
Our brief foray into the browser proved that the site has five pages;
now let’s visit them in WebPlus. There are lots of ways to get around,
and the Page Locator is perhaps the most convenient. Of course, the
first task is to locate the Page Locator! You’ll find it on the left side of
the HintLine—assuming the Home page is displayed it will be showing
the word “Home.”
Click the arrow on the Page Locator to pop up a “tree” depicting
the site’s pages (and master pages, which we’ll get to in the next
chapter). Click “About Us” and you’ll see the screen content
update as WebPlus displays the page with this name.
TIP: As long as the Page Locator is selected, you can press the
left/right arrow keys on the keyboard to step between pages. Try it!
On the right side of the screen, click the Site tab to display another
tree showing the pages in your site. As you change pages, notice
“eye” icon in the Site Structure tree jumps between the
that the
various page entries to indicate which one is currently on view and
ready for editing.
The Site tab is just one of seven special-purpose tab windows
collectively known as the WebPlus Studio. Let’s preview them in
order. Click each tab’s name to display it...
Start by clicking the Attributes tab, which includes five separate
panels (see illustration) that let you customize properties of onscreen elements. Click each panel’s name in turn:
— The Color panel, for applying solid color and/or shading
— The Fill panel, for applying a gradient or Bitmap fill
— The Transparency panel, for applying a transparency effect
— The Font panel, for changing the font of existing text objects
— The Line panel, for setting the weight and type of lines and
shapes
20
Getting Started
Panels on the Studio’s Attributes tab
Click the Site tab for an overview of the pages and master pages in
your site, and a control center for a host of constructive activities.
In particular, the tab lets you arrange your site content in a logical,
structured way and add navigation elements like the navbar in the
template site.
Click the Themes tab. Here you’ll find a selection of theme
graphics: ready-made WebPlus objects ranging from static
“design elements” like bullets, rules, headings, and banners to
interactive elements such as navbars. When you select any theme
graphic on a page (try clicking a heading in the template site), the
HintLine identifies both its type and the set (design group) to
which it belongs.
Click the Schemes tab to display a gallery of color schemes that
let you instantly revise colors in a site. Using this tab, you can
customize scheme colors or create entirely new schemes. Let’s
take a moment to see how color schemes work. Right-click any
sample to see various context menu options.
In WebPlus, each site has one color scheme assigned to it. Color
schemes are great time-savers and help to ensure consistent,
coordinated results. They work like a paint-by-numbers system using
five numbers for basic colors. Instead of assigning a specific color to an
element, you can mark it with a scheme color number. Let’s
experiment.
Getting Started
21
In the Schemes tab gallery, click the “Apple” color scheme sample.
Notice that much of the text on the Web page turns red. Now click
the “Carrot” scheme and the text turns orange.
Look closely at the group of five colors to the right of each scheme
name. Note that each time you switch schemes, it’s the first of
these five colors that’s being applied to the text.
In WebPlus templates, body text is conventionally marked with
“Scheme Color 1.” That means it takes on whichever color has been
defined as Scheme Color 1 in the current scheme.
Keep clicking different color schemes and notice which other page
elements change color. Can you identify which elements have been
marked with Scheme Color 2? Scheme Color 3?
Each color scheme sample also shows the unique hyperlink and page
background colors associated with the scheme.
Before proceeding, restore the site’s original scheme by clicking
“Science” in the gallery list.
Continuing our quick-click tour of the Studio, click the Object
Styles tab, which offers another extensive gallery of choices.
As with themes and schemes, there’s more going on here than meets
the eye! You may be familiar with the concept of styles as applied to
word processing. With object styles, each sample “object” is actually a
cluster of attributes (line color, fill, border, etc.) that comprise a
graphic style. You simply apply the style to any object and it takes on
the defined appearance... if you update the style definition, any object
using the style is also updated instantly!
If you mouse over each Object Styles thumbnail, you’ll notice a
small down arrow. Left-clicking this arrow pops up a context menu
identical to the thumbnail’s right-click menu. You’ll find this
convenient feature available in several Studio galleries!
22
Getting Started
Click the Gallery tab to view a wide variety of predesigned
elements—graphics that you can drag and drop, then customize or
use as a starting point for your own designs.
Finally, click to open the Portfolio—a container for storing design
objects (images, text blocks, and even unlinked text frames or
HTML code fragments) you’d like to reuse in different sites.
Looking around the rest of the WebPlus interface, you’ll note that
toolbars and Studio tabs are initially arranged in a convenient layout
around the perimeter of the work area. However, you have full control
over this arrangement, and can customize the display any way you
want—by showing or hiding toolbars and tabs, or repositioning them
onscreen in a way that suits your style. You can even undock individual
Studio tabs as floating “tab windows” and/or group them into different
cluster arrangements which can either float or dock as toolbars at the
left or right side of the workspace.
WebPlus makes it easy to see exactly what you’re working on—from a
wide view of multiple pages to a closeup view of a small region. For
example, you can use the scrollbars at the right and bottom of the main
window to move the page and pasteboard with respect to the main
window. The AutoScroll feature means that the view recenters itself as
you drag objects to the edge of the screen. The View toolbar at the top
of the screen provides buttons that let you pan or zoom in and out so
you can inspect and/or edit the page at different levels of detail. If
you’re using a wheel mouse, spinning the wheel scrolls vertically.
Shift-spin to scroll horizontally and Ctrl-spin to zoom in or out!
If you accidentally make any changes that you don’t want to keep, here
are some “emergency” options:
♦
To revert to the previously saved copy of your site, choose Revert
from the File menu. It’s a good idea to save your work often!
♦
You can also reload any saved WebPlus site by choosing Open...
from the File menu. You can open multiple sites and switch
between edit windows if you like.
♦
To undo the most recent change, press Ctrl+Z. (WebPlus features
multiple levels of Undo.)
Now that you’ve had a good look around the WebPlus interface, and
have successfully opened and saved a template Web site, you’re ready
to proceed to a more in-depth analysis in the next chapter.
Getting Started
23
For more help on the basics...
You’ve seen how easy it is to create the basic structure of a Web site
using a WebPlus template. And you know how to find your way around
the workspace.
When you’re ready to construct your actual Web site, you’ll no doubt
want to learn about other options. See online help for additional details.
?
For help on...
In WebPlus Help,
display...
Then...
Starting, saving,
closing sites
Contents list
See topics in section “How to
Get Started”
Web site concepts
(overview)
Index
Select “Web sites, getting
started”
WebPlus menus and
toolbars
Visual Reference
Click any menu or toolbar
name
Setting up pages
Setting view options
Using layout tools
Contents list
See topics in section “How to
Develop Sites and Pages”
Web Site Design
and Construction
Web Site Design and Construction
27
If your experience with Web sites has been limited to browsing
pages—or even if you’ve cobbled together a Web site using another
authoring program—you’ll appreciate the fact that WebPlus lets you
lay out your pages using a WYSIWYG approach. Simply place
elements where you want them, and then What You See Is What You’ll
Get in the published Web site.
But creating a successful Web site is much more than arranging objects
on a page! The goal should be to combine a consistent visual layout
with a logical structure that’s easy to navigate. In this chapter, we’ll
provide a road map of the design and construction process—
emphasizing how unique WebPlus features like the Site Structure tree
and master pages enable you, as the site designer, to seamlessly
combine visual and structural elements. So don’t skip ahead... This
chapter, more than any other, will help you get a maximum return on
your investment in WebPlus!
Pre-planning
The advice in this chapter comes from some of the gurus who have set
up Web sites to disseminate their particular design credos, as well as
from first-hand experience developing user-friendly online
environments. Almost all agree that good design begins not with the
designer but with the user. Know the users; put yourself in their place.
Learn from your own experience as a consumer of online information.
When you’re starting out, it’s worthwhile trying to conceptualize your
site as if it were a more traditional form. Is it a “billboard in the sky”?
Is it basically a greeting card, a photo album? An Open Letter or
editorial? An electronic business card? People’s past experience with
print and pictures shapes their expectations for new forms, and a
familiar concept or metaphor can help to draw users into your web, as it
were.
Don’t set out to overwhelm or overdesign. The simplest site may work
best. What will succeed is the result of understanding who’s in your
audience, and what they bring to what you have to offer.
28
Web Site Design and Construction
Who’s it for?
Family, friends, neighbors, colleagues, co-workers, kids, adults, clients,
prospective clients, prospective employers, fellow worm-farming
enthusiasts—or “the world at large”? Chances are you already know at
least a few of the folks you’d like to reach. Perhaps you’re already
publishing print pieces that connect you to that audience. Part of the
excitement in creating a Web site is knowing you’ll likely be reaching a
great many folks you couldn’t reach before.
Use yourself, and your own experience on the Web, as a starting point.
But be prepared to be surprised that many users don’t share your
assumptions. Ideally, a Web site should constitute a dialog between
creator and audience, more like a (very slow) theater event than a TV
broadcast. If the dialog begins while the site is in its formative stage, so
much the better. Do a bit of research among people (even just one
person) representative of those you’ll be trying to reach. Poll your
clients or newsletter subscribers.
♦
♦
♦
♦
♦
Ask them what they like and dislike about Web sites.
What’s their level of expertise?
What kind of hardware, software, and Internet connection are they
using?
Use the Web itself to tap into surveys on Internet usage.
What characteristics make your audience unique—different from
the so-called average user?
Each point you can clarify will serve as a reality check on your initial
concepts. And as time goes on, user feedback will help you develop
your site in a way that keeps the visitors coming back for more.
What have you got?
That is, not just what do you want to say, but why should anyone
listen? What have you got that users actually want? What are you
starting out with as content, and what kinds of transformations will it
need to go through to succeed on the Web? These are complex
questions, but essential to address at the start of this kind of project.
The answers will help you tailor your content to your intended audience
in this new medium.
Web Site Design and Construction
29
Don’t assume that your existing content is going to satisfy Web visitors
before it’s been enhanced in various ways. Quite often, traditional
content needs to be “massaged” in order to translate successfully to the
computer screen. It’s a lot like adding motivational bells and whistles
to an instructional program for reluctant learners. In the early days of
the Internet, text and hypertext links were sufficient to keep scientistusers entertained and enlightened. While one can certainly still design
elegant screens to display text-only material, one can’t turn back the
clock. Today, users expect to see pictures (or at least graphic elements),
colors, buttons, and other interface attributes. They certainly don’t want
to become bored or get lost. Your goal should be to minimize any
negative first reactions to your site, while maximizing the rewards for
each user.
Site structure
It probably goes without saying (but we’ll say it anyway) that before
starting a site from scratch, you should have mapped out on paper
approximately how many pages you’ll need, what the basic
composition will look like, and how the pages will be linked together.
Unlike a magazine or newsletter, a Web site doesn’t depend on a linear
page sequence. It makes more sense to think of your site in spatial
terms, with a structure like that of a museum people will explore. You
can generally assume that visitors will come in through the front door
(the Home page)—but where they go after that depends on the links
you’ve provided. These navigation pathways are like corridors that
connect the various rooms of the museum. It’s up to you as the
“architect” to develop a sensible arrangement of pages and links so that
visitors can find their way around easily, without getting lost.
Unlike the museum in our analogy, the “structure” of a Web site has
nothing to do with its physical layout, or where pages are stored.
Rather, it’s a way of logically arranging the content on the site so that
visitors have an easier time navigating through it. One of the most
useful organizing principles—which WebPlus strongly reinforces—is
an “inverted tree” structure that starts with the Home page and then
branches out to other pages. To the visitor navigating your site, this
arrangement presents your content in a familiar, hierarchical way,
structured into sections and levels.
30
Web Site Design and Construction
♦
A section is a content category, like “Company News,”
“Products,” “People,” or “Links.” The various major sections are
typically listed on the site’s Home page. Ideally, each page on the
site belongs to a particular section. And unless there’s only one
page in a given section, the section will have its own main page,
which usually serves as a gateway to subsidiary pages.
♦
The level is the number of steps (i.e. jumps) a given page is
removed from the Home page. The Home page will always reside
at Level 1, while sectional main pages are typically Level 2. Pages
one step “below” that are Level 3. We could diagram a typical site
like this:
The illustration at the right shows how a similar structure might appear
in the Site Structure tree on the
Studio’s Site tab. The tree provides a
visual aid that lets you organize the
content on your site into sections
and levels—in other words as a
hierarchy of parent pages branching
to child pages.
Using the tree, it’s easy to visualize
relationships between pages and lay
out your site in a way that makes
sense for the content you have to
offer. Of course, a Web site is a truly
an interconnected web of pages, and
the tree structure don’t prevent you
from installing links between any
two pages. But it does expose the
major pathways within your site—
up, down, and sideways. Logical
section/level design makes your site
easier to navigate, and WebPlus
Web Site Design and Construction
31
makes it a snap to create navigation bars (see below) that mirror your
site structure and help guide your visitors along those “main roads.”
Not only is the section/level model well-suited to most kinds of content
likely to end up on the Web, but it particularly lends itself to graphical
reinforcement (see “Navigation”). So there’s an excellent chance that
you, as the site designer, will be able to organize your content and
provide appropriate visual cues to prevent users from getting lost.
Remember, each screen should provide cues as to which section the
user is “in.”
The top-level pages—the Home page and the various sectional main
pages—are the key nodes in this structure. As a rule of thumb, keep the
number of child pages per section between four and eight. When in
doubt, increase the number of child pages before adding
“grandchildren” (i.e. creating a new sublevel). Studies have shown that
users prefer a few dense screens with many choices over thickly
branched structures that require more clicks to navigate.
No matter how simple your initial site concept, it needs to be clear to
you before you can make it clear to your users. Sketch out a diagram of
how you envision the various sections and levels. If you use one of the
templates, you’ll begin with one Home Page linking to half a dozen
other main pages, which may be at Level 2 or on the same (top) level as
the Home page. Make sure these sectional main pages are named
according to the content you’ll be offering.
Over time, you’ll be adding content. Single section pages will probably
evolve into parent pages, with content migrating to newly-added child
pages. You’ll be prepared for this growth if you’ve started out with a
clear site structure.
32
Web Site Design and Construction
Let’s take a look at the site structure of our template document.
Use File/Open... (or the Startup Wizard’s Open Saved Site
option) to bring up the HANDSON.WPP project you opened and
saved in Chapter 2. Display the Studio’s Site tab.
This template site starts with a simple, single-level structure: a Home
page plus four section pages (also at the top level) which haven’t yet
acquired any child pages. By the way, it’s up to the site designer as a
matter of convenience whether to create the section pages as actual
child pages of the Home page. In this case they are all on the same
level. However, no site can do without a Home page—so whatever
level the section pages are on, the Home page occupies a unique
position at the “root” of the site tree: the portal to the site as a whole.
In the last chapter you used the Page Locator to display specific pages.
The Site Structure tree works in a similar way, but with a subtle
difference.
Single-click the entry for the About Us page in the tree. Notice its
entry turn dark blue and the entry title turn bold. Below the tree,
notice that the Filename listed is “page2.html.” Now click the
News page entry and you’ll see the file name update. Meanwhile,
nothing has changed in the workspace... the Home page is still on
display, with the “eye” icon (indicating the page on view) still
shown in its entry.
Now double-click any page other than Home.
When using the Site Structure tree, the first click on a page entry
merely selects the page, which you might do for example if you were
about to delete it. Properties of the selected page appear below the tree.
To actually view the associated page or edit its design elements, you
need to double-click its entry. This allows you to alter your site
structure or set properties of any page independent of which page
you’re currently editing in the workspace.
The order in which pages appear in the Site Structure tree matters a lot
if you choose to include navigation aids that let users browse the site in
that same order. For example, the prominent navigation bar at the top
of this template site includes buttons that link to each of the initial
major pages. These navbar buttons mirror the Site Structure page
sequence. As we’ll see in the next section, the concept of navigation is
one that WebPlus strongly reinforces.
Web Site Design and Construction
33
Navigation
Web sites present unique challenges that don’t arise in the world of
print. (When was the last time you even thought of “navigating”
through a book?) The parent/child “tree” organization, as visualized in
the WebPlus Site Structure tree, is about as intuitive as any path system
is likely to get. But with users coming in through side doors, or
following hyperlinks that leapfrog from one part of the site to another,
it’s up to you to ensure the tree doesn’t turn into a maze.
Your design should provide visual cues on each page that convey:
Which section am I in now? and Where am I in relation to the sectional
main page? Text can help. It’s common sense to use page names or
headlines that identify what’s on the page. By employing somewhat
larger headline text for Level 2 (sectional main) page titles, smaller
subheads for Level 3, and so on, you can reinforce the user’s sense of
how far removed they are from the Home page.
For communicating section identity, you can use a variety of
techniques, preferably in combination. Sections can use color-coding,
applied to headlines and/or graphic elements. You can incorporate the
section name into the composition by placing it as a text element on the
page, aligned with master page elements (as discussed later in the
chapter).
But the most effective approach, and one that deserves as much
attention as the design of your Home page, involves incorporating a
navigation bar or “navbar” that will serve as:
♦
An element of the site’s page composition
♦
A functional tool to enable jumps between sections of the site
♦
A visual reminder of where the user is
WebPlus provides a ready-made assortment of fully functional
navigation bars as theme graphics on the Studio’s Themes tab. You
simply select one from the gallery and WebPlus does the rest! Navbar
theme graphics combine buttons with popup menus to facilitate
movement between the various sections and levels of a site.
For example, here’s a navbar we selected for the site illustrated several
pages back. The buttons provide links to the Home page (Level 1) and
the section pages (Level 2). Popup menus link to child pages (Level 3
in this case).
34
Web Site Design and Construction
You can create navbars using only text, or design graphical navbars by
hand. The advantage of navbar theme graphics, along with other
navigation elements (such as Previous/Next buttons) provided on the
Themes tab, is that they’re pre-programmed to “understand” your site
structure tree. That means you can easily customize which part(s) of the
site structure they should link to—for example, to top-level pages,
pages on the same level, child pages, etc. You can set specific pages to
be included in navigation or not, as you see fit. And best of all, a
navbar theme graphic updates dynamically if you subsequently alter
page names or relationships, or cut/paste the navbar to another page.
Let’s see how WebPlus theme graphic navbars adapt to changes in your
site structure.
Click to select the entry for the Services page in the template site’s
Site Structure tree.
Click the
tree.
Move Page Up at Same Level button above the
The “Services” page, which was fourth in the top-level sequence, is
now third—and the navbar instantly responds by reconfiguring its
button order!
With the “Services” page selected, uncheck Include in
Navigation at the bottom of the Site tab and notice what happens.
Click again to select the setting.
Switching off the Include page setting forces the navbar to ignore the
“Services” page, and the “Services” button disappears. Switch it back
on, and the button reappears. This provides a glimpse of the ease with
which WebPlus lets you customize site structure and navigation
elements.
Choose Site Structure... from the File menu. Note that this dialog
provides yet another view of the Site Structure tree, with the same
four buttons for moving pages. By the way, both here and on the
Site tab, you can also use drag-and-drop to move page entries
around in the tree! For now, close the dialog without making
changes.
Web Site Design and Construction
35
Wherever it’s placed—across the top, down the left or right side, or
elsewhere—the navbar needs to be considered a fixture of the page
layout. It must never disappear or wander off to another corner. One
way to achieve this is to place the navbar on the master page layer (see
the next section) so it appears in the same place on each page that
shares that master page.
If you’re not using a navigation bar, at least make sure that each page
has a minimum of one or two hyperlinks, leading to the Home page
and/or related pages. Dead ends force users to rely on their browser’s
“Back” button to retrace steps, and that can all too quickly lead them
away from your site.
Pages and master pages
As you know, pages are the basic unit of Web site design. That’s true in
WebPlus as well—but in a WebPlus project, each page has a
“foreground” page layer and a “background” master page layer.
Master pages are part of the structure of your WebPlus project, and
provide a flexible way to store background elements that you’d like to
appear on more than one page—for example a logo, background,
header/footer, border design, or even a navigation element (see the
previous topic). The key concept here is that a particular master page is
typically shared by multiple pages, as illustrated below. By placing a
design element on a master page and then assigning several pages to
use that master page, you ensure that all the pages incorporate that
element. Of course, each individual page can have its own elements on
the “foreground” layer.
36
Web Site Design and Construction
You can add as many master pages as you need, although in a basic
Web site you may get by with just one master page. The template site
we’ve been working with starts with two master pages.
In the HANDSON site, display the Home page and click the
navigation bar at the top of the page. Notice that this doesn’t select
the bar. Why not?
To edit the elements on a master page, you need to switch the working
view to that master page. You’ve probably noticed that master pages
are represented as icons on the Site tab, and you can view and/or select
them using the same techniques (Page Locator, Site tab, Site Structure
dialog, etc.) described earlier for pages.
As a shortcut to switch between the master page and page layers
(for the current page), click the
Page/Master Page button
on the HintLine (or right-click and choose Master Page).
Most of the visible text disappears, leaving decorative elements, a
banner heading, and the navbar. The Page Locator informs us we’re
viewing “Master 2,” and the corresponding icon at the top of the Site
tab now has an “eye” icon as confirmation.
You’ve probably noticed that each page entry in the Site Structure tree
includes a numeral—now it should be clear that the number indicates
which master page that particular page uses. Four of the five pages use
Master 2, and one of them (“Services”) uses Master 1. What’s the
difference between these two master pages?
Double-click back and forth between the Master 1 and Master 2
icons on the Site tab and you’ll see that Master 1 has an extended
gray background region on the right side. If you inspect the layout
of the “Services” page, you’ll see how this different background
works with the page-layer elements.
Web Site Design and Construction
37
In using WebPlus to design your site, take advantage of the master
page/page distinction. Think of the background as a sheet of preprinted
stationery with its own elements. For example, you can design a
colorful background header—perhaps incorporating a main logo—on
the master page, which will then repeat on each Web page. Individual
pages can add “local” information such as a section name or page title,
which will be visually merged with the background when the page is
published. For more graphic design tips, see Chapter 5.
Note that a navigation element on a master page is programmed to
behave as if it’s on each page: its buttons and menus are relative to
where each page sits in the overall site structure. So you can save a
great deal of time by placing just one navbar on the master page layer
rather than separate navbars on each individual page.
Another tip to keep in mind is that the pasteboard region around the
working area is a common area shared by all pages and master pages,
so it’s useful for copying or moving objects between the two layers.
Simply drag an object (or Ctrl-drag a copy) off to the pasteboard,
switch to the other page, and drag the object onto it.
Manipulating pages
Even if you decide to construct a site without navigation elements, and
with only a single master page, the Studio’s Site tab is going to prove
useful. Not only does it provide an overview of every page in your site,
but it serves as a control center for basic operations like adding,
removing, and rearranging pages. Earlier, you used the tab to move the
“Services” page to a different place in the hierarchy. Let’s return now
to the template site and make a few other changes...
Display the Site tab and double-click the Services page entry
(which should now be third in the sequence) to select and view the
page.
Notice that the Services page includes placeholder text describing two
“service options.” We’re going to add a couple of child pages in the
Services section of the site to describe these options.
Right-click the Services entry and choose Insert Page.... In the
dialog, type “Option 1” as the Page name (instead of “Page 6”)
and select Child of (instead of After). Leave the other settings the
same, and click OK.
38
Web Site Design and Construction
A new page—using Master 1 elements but otherwise blank—appears in
the workspace, with a corresponding entry nested under “Services” in
the tree. This dialog approach for adding pages has several advantages.
For example, you can insert a page anywhere in the site structure or
duplicate design elements from a specified page. Here’s another
method:
Click the Option 1 entry to select the page, then click the
Insert Page button above the Site Structure section.
The button automatically inserts a new page after the selected page,
using the same master page and with a default name. It’s up to you
whether to use the dialog or the button; see online help for even more
ways to add pages! Also, note that there’s a Delete Page button for
removing pages that have outlived its usefulness, and comparable
buttons above the Master Pages section for operating on master pages.
To rename the new page, right-click its entry and choose Page
Properties.... On the dialog’s Page tab, type “Option 2” as the
Page name. While you have the dialog open, you might take a
moment to review its various tabs to get an idea of page properties
you can set (see the end-of-chapter list for help references). Click
OK when you’re done.
By right-clicking on a page entry, you can also add an offsite link to
your site structure. Typically, this would be a page separate from your
site that you wanted to include in your site’s navigation structure (for
example, in a popup menu). Yet another option for adding pages is the
Import Web Pages command on the File menu, which lets you import
one or more pages from existing HTML Web sites. (By the way, you
can set a page to use no master page, which is handy if you’ve imported
an outside page and want to maintain its original design elements.)
Page order, and parent/child page relationships, reinforce a logical site
design that’s easier for the user to navigate and for you to manage. As
your site’s content evolves over time, so will its organization. And
that’s when you’ll really come to appreciate how simple WebPlus
makes it to rearrange pages by moving them around within the “tree.”
Let’s try an alternative to the four buttons on the Site tab (and in the
Site Structure dialog as well) that let you rearrange pages:
Move Down
Move Up
Make Child
Make Parent
Web Site Design and Construction
39
Click the Services page entry and drag it down below News,
(Same Level);
dropping it when you see the cursor change to
the alternative would be
(Child).
Notice that the child pages moved along with the parent “Services”
page, which is now back in its original place in the top-level ordering.
Drag from the Master 2 icon in the Master Pages section and drop
onto the Option 1 page entry. That’s how easy it is to assign a
master page to a page! Do the same for Option 2.
As we’ve concluded the hands-on portion of the chapter, now
would be a good time to save your work before moving on.
Besides the Site tab, WebPlus offers a variety of other ways to
manipulate pages: the Site Structure dialog, the Master Page Manager,
and both standard and right-click (context) menus. You can learn about
all of these in the help file—see the end-of-chapter links.
Page layout considerations
To conclude this chapter, we’ll offer some general comments about
designing pages for the Web. Be sure to take advantage of WebPlus’s
preview capabilities to examine how your site will look and feel to your
visitors. (See Chapter 7 for details on both “internal window” and
“external browser” preview options.)
As long as people are still reading Web pages, as opposed to watching
them or listening to them, everything you’ve been taught about editorial
style and text organization has relevance—so don’t throw away that old
style manual! Readers respond to good design and clear, concise
writing. They’ll respect the fact that you understand the proper way to
tell a story or convey an idea: the relation of headlines to body text, the
use of subheads, and so on.
Still, compared to a print site, the computer screen is a like a
rectangular hole through which users must peer at information. Will
users be inclined to scroll down and retrieve what has disappeared off
the bottom? Reading skills like scanning headlines or skimming stories
become less relevant when content is segmented into separate
screenfuls. And even the most computer-literate first-time visitor to
your Home page will have no idea how many pages there are or how
the pages are organized.
40
Web Site Design and Construction
Browser Window
(“safe area”)
Page
The Web page viewer initially sees only what’s displayed in the
browser window (the so-called safe area), leaving unseen an
indeterminate portion of the page below that. At 800x600 resolution,
allowing for browser toolbars and such, the safe area may be around
400 vertical pixels of actual page height. Content in this region will be
all the visitor sees at first. In fact, studies show that many Web users
are not in the habit of scrolling pages before deciding to move on, so
that leaves a fairly narrow strip and a short interval in which to grab
their attention!
♦
Content. The safe area should convey essential information about
the site and entice the visitor to scroll for more.
♦
Composition. Think of the safe area as a mini-page, and make
sure that the elements within it work as a group.
In general, Web page headers and footers need to contain more
information than those in a conventional site. The Web site title, which
appears immediately in the browser’s title bar as the first page loads,
should convey your site’s identity accurately, and even with a touch of
wit. The top matter should include a logo or other identifying motif, as
well as a page title (so users know they’ve come to the right place).
Visual cues as to section and level can also be part of the top matter.
The bottom of the page is a good place to include elements that help the
page stand on its own as a self-contained unit. For example, it’s good
practice to include a date stamp so users know how current the
contents are (use Insert/Information/Date or Time... and uncheck
Update Automatically).
Web Site Design and Construction
41
If you don’t have a separate “Reply” or “Feedback” page, consider
placing a return hyperlink with your own e-mail address at the bottom
of each page. It’s not a bad idea to spell out the page’s URL as well,
once you’re sure what it is. That way, if a visitor saves a page as a text
file, or prints it out, they’ll have a record of where the page originated.
A copyright notice isn’t out of the question, either.
The above advice on top and bottom matter applies equally to your
Home page, sectional main pages, or any other pages. It will help you
build in a page-to-page consistency that respects the way people view
Web sites.
In general, consistency is good: if you choose a graphic theme, by all
means use it throughout your site. But too much of this good thing can
lead to blandness, and you should also work on differentiating the
various levels of your site from each other. In other words, the Home
page should appear unique, and sectional main pages should resemble
each other, while looking distinct from pages at other levels. Besides
adding interest, these variations also serve as navigational cues.
Default site property settings for Width and Height determine the
dimensions of master pages, and each master page in turn determines
the size of pages that use it. A default site property setting for
alignment (either Left or Centered) determines how page content lines
up in a browser. One of the first things you may want to do, when
creating a new site from scratch, is to decide if the default dimensions
are reasonable. If there’s a chance you’ll be including pages with a lot
of content, requiring users to scroll down, you can increase the height
value for the page to give yourself some extra room for the layout. You
don’t have to fill all the space (WebPlus will truncate automatically at
the bottom element when publishing), and it’s easier to change the
value at the outset than after you’ve developed the site.
One of the simplest things you can do to improve your site’s
appearance is to set rather wide left and right margins. Extra space on
both left and right helps to set off your content from the edge of the
browser window, and gives an uncluttered appearance just as it would
on a printed page. It’s also easier to view: studies show that at normal
reading distances, the eye’s span of view is only about 8 cm (3 inches)
wide; longer lines of text require extra effort. So spend some time
experimenting with different placements of the main frame on your
very first page, previewing each layout until you find your own
preferences. Then duplicate the first page to create the other pages, so
the layout will be consistent on the other pages in the site.
42
Web Site Design and Construction
Your Home page
On the Home page, you can break a few rules. For example, although
you’re generally trying to reduce the time it takes each page to load, it’s
OK to include larger or more numerous graphics on the Home page.
Most visitors’ attention span will stretch a bit in anticipation of seeing
what your site has to offer, and they’ll make allowances. In addition,
they’ll only have to wait the first time they visit the page, as the
graphics will be cached and instantly available next time.
On the other hand, all the guidelines mentioned above work to your
advantage. The Home page, and particularly its safe area, are your only
chance to make a first impression (unless someone enters through one
of the “side doors” we alluded to). Decide what kind of impression you
want to make—“cool,” “hot,” “intriguing,” “professional,” or all of the
above—and go for it.
Make the safe area interesting enough to hold the visitor’s attention
while the rest of the page loads. Text loads first, then graphics. A
composition of free text blocks will load quickly and, with the right
choice of text and background colors, can be stunningly effective. A
pithy quotation or unusual symbol will serve to engage the mind’s eye
and arrest the web-surfer’s impulse to “click and get on with it.”
The Home page can be a cross between a greeting card, a magazine
cover, an advertisement, and a main menu for the rest of your site.
There’s no question that well-rendered graphics add interest, but don’t
feel obligated to illustrate every single section link with its own GIF!
Finally, it’s a good idea to provide titles (tooltip text) and/or alternate
text (captions) for each graphic, using the Web Export Manager on
the Tools menu. You can use this function on individual graphics or as
a Wizard to review the entire site. (Format/Web Export Options...
also works for single pictures.) The text will hold attention as the
graphics load, and convey the essence of the image for the text-only
user. Blind users with special software can hear the text (via
synthesized speech), and so will not completely miss the pictorial
content.
Web Site Design and Construction
43
For more help on site construction...
You’ve seen how easy it is to create the basic structure of a Web site
using a WebPlus template. And you know how to find your way around
the workspace.
When you’re ready to construct your actual Web site, you’ll no doubt
want to learn about other options. See online help for additional details.
?
For help on...
In WebPlus Help,
display...
Then...
Viewing pages
Manipulating pages
Contents list
See topics in section
“How to Develop Sites
and Pages”
Setting page and site
properties, such as:
- Page/file names
- File extension
- Page size, alignment
- Master page
- Adjunct scheme colors
- Search descriptors
- Picture export options
- Background sound
Index
Select “properties, setting
for page and site”
Theme graphics
Index
Select “theme graphics”
Navigation elements
Index
Select “navigation
elements”
Working with Text
Working with Text
47
Now that you’ve seen the “big picture”—how WebPlus integrates
pages and master pages into an overall site structure—it’s time to shift
focus to the tools and elements that you’ll use to design each page. In
this chapter we’ll look at how to add standard text and change the
layout of text on the page. It’s really not complicated at all!
Typically, text in WebPlus goes into text frames, which work equally
well as containers for single words, standalone paragraphs, or 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. Frames work
equally well as containers for single words or standalone paragraphs.
Two or more frames can be linked together so the enclosed text flows
from the first frame to the second, and so
on—like a newspaper article with multiple
columns. Whether there’s a single frame or
more than one in series, the enclosed frame
text is called a story.
Our hands-on sequence will thread continuously through this chapter.
Let’s begin by investigating how our template site employs frame text.
Display the Home page of the HANDSON.WPP project and adjust
the screen view if necessary so you can read the page text.
Using the
Pointer tool—the default tool for selecting,
moving, and resizing objects, including the boxes that contain
text—click the block of text below the heading “Welcome to Our
Company.”
Now click the text block to the right of the first one, starting with
the words “Be sure to explore...”
In each case, clicking selects a text frame, displayed as a rectangle with
a gray bounding box and small gray “handles.”
48
Working with Text
Notice the gray Link button on the selected frame’s bottom edge. The
button’s icon tells you about the frame and the story text it contains:
A square (as on the name/address frame) indicates a
frame with all its text displayed—either a standalone
frame or the last frame in a linked sequence.
A plus sign (as on the “Here’s the place” frame) shows
there’s more text in the story than the frame can display.
Extra text is stored in an invisible overflow area. You
can either make the frame larger or shorten the story.
A down arrow shows that the frame’s text continues into
a following linked frame.
Working with text frames
It’s easy to move or resize a text frame. The appearance of the cursor
over the selected frame tells you what will happen if you click and drag
at that point.
Select the first text frame (“Insert your own text...”).
Notice the blinking insertion point in the frame’s text. In this mode,
you can type directly into the frame, and edit the text with the Pointer
tool.
Now position the pointer over the frame’s gray bounding box
and notice the “Move” cursor appear. Click and drag to move the
frame a short distance, then press Ctrl+Z to undo the move.
Click one of the frame’s corner or edge handles and drag to resize
the frame. If you adjust the bottom edge up and down, you’ll see
the Link button change state to reflect whether all the text is
revealed. Again, undo any changes.
Here’s how easy it is to create a new frame.
Click the
button on the left toolbar to select the Frame tool.
Now locate some empty space on the pasteboard outside the page
area (scroll over if necessary), then click and drag out a marquee
where you want the new frame to go. When you release the mouse
button, an empty frame appears.
Note that the
Pointer tool was automatically selected after
you created the new frame. Type a few words into the frame.
Working with Text
49
Editing text
Web Plus lets you edit text directly on the page, or with WritePlus, the
built-in text editor. Using the Pointer tool, you can type into any
paragraph, drag to select characters, and use the formatting controls on
the top Text toolbar. As with a word processor, double-clicking selects
a word, and triple-clicking selects a paragraph.
Select part of the text you typed into the new frame, then try
changing its font and pointsize using the controls on the top
toolbar.
To work with a more substantial amount of text, let’s switch to the
“Insert your own text” body text frame on the page. Right-click
this frame and choose Edit Story from the context menu to launch
WritePlus.
WritePlus opens in a separate window that shares many of the standard
WebPlus menus and toolbars. You can move the mouse pointer around
to view tooltips and hint text for the various buttons. Because
WritePlus displays the full text of a given story, it’s ideal for viewing
and editing the full text of a story that may span several frames or
pages. You can view the text in draft mode (without formatting), export
story text, and employ the Word Count and Spell Checker functions.
Obviously, the original text in this story is simply a placeholder for the
text you’ll be adding to your Home page. You can type over the sample
text, or select it all, delete, and begin with an empty frame, as you wish.
To update WebPlus with any changes, click the
Finish button.
To abandon changes, click the window’s Close button.
Click the header text “Welcome to Our Company” to select the
object. Although this might look like a text frame, notice that the
HintLine identifies it as a Theme Graphic.
Theme graphics are special group objects with their own built-in rules,
which as we’ve noted make them instantly updatable via the Studio’s
Themes tab. You can ungroup theme graphics, but then they’ll lose
their special properties. Fortunately, you can edit the text of a theme
graphic without ungrouping it.
50
Working with Text
Double-click the theme graphic. A dialog appears with several tabs
that let you enter your own text and/or update the font or text fill
color. After exploring the tabs, click Cancel.
Importing text
Besides typing text into a frame or creating a story using WritePlus,
you can use your current word processor (such as Microsoft Word) to
create source files for your site. Then you can cut and paste using the
Windows Clipboard or import the text directly. It’s easy to import text
from a file into an existing frame. Let’s try it!
Using the Pointer tool, right-click the “Insert your text here” frame.
Choose Select All from the Edit menu (shortcut Ctrl+A) and press
Delete to clear the frame.
Right-click the frame choose Text File.... Using the file selection
dialog, open SAMPLE.DOC in the PROGRAM
FILES/SERIF/WEBPLUS/9.0/SAMPLES/ folder, either in your main
Program Files folder or on your WebPlus CD. WebPlus imports
the file and places it in the frame.
Note: When prompted, click No to decline the AutoFlow option,
which would create additional pages and text frames for the
overflow text. We won’t be needing the feature in this case.
Press Ctrl+E as a shortcut to launch WritePlus, and briefly inspect
the new sample text. (Items underscored in red are unfamiliar
words identified by the AutoCorrect function.) You might try
applying some font, size, or style changes.
Working with Text
51
About artistic text
Artistic text is standalone text you type directly onto a page. Just as
with frame text, you can alter artistic text’s character and paragraph
formatting, apply text styles, attach hyperlinks, and use WritePlus to
edit the object. You can also apply a gradient fill and/or an outline to
artistic text—for example, to create attractive Web buttons—but note
that artistic text with these properties is published as a separate graphic
rather than as a block of HTML text.
Artistic text has some limitations. For example, you can paste from the
Clipboard to an artistic text object but cannot import text from a file.
And because artistic text doesn’t flow or link the way frame text does;
the Frame toolbar’s text-fitting functions aren’t applicable.
To create artistic text, choose the
Artistic Text
Tool from the Tools toolbar. Click anywhere on the
page for an insertion point using a default point
size, or drag to specify a particular size.
Set initial text properties (font, style, etc.) as needed before typing,
using the Text toolbar, Format menu, right-click menu (choose Text
Format), and/or Attributes tab. Then just type normally to enter text.
Once you’ve created an artistic text object, you can select, move,
resize, delete, and copy it just as you would with a text frame. Note,
however, that artistic text you’ve dragged to resize is published as a
graphic. (To maintain it as text, change its point size via the Text
toolbar.)
See if you can spot some artistic text objects already in use on the
template site’s Home page. Try creating your own sample of
artistic text, either on an empty part of the page or on the
pasteboard.
That concludes the “scripted” portion of the hands-on sequence
(for this chapter at least), but feel free to create a brand new site at
this point (File/New) and experiment with both frame and artistic
text.
By the way, “ordinary” straight-line artistic text is far from ordinary—
but you can extend its creative possibilities even further by flowing it
along a curved path. The resulting object has all the properties of
artistic text, plus its path is a Bézier curve that you can edit with the
Pointer tool as easily as any other line! (See the end-of-chapter help
topic reference for “text on a path.”)
52
Working with Text
About table text
Tables are ideal for presenting text and data in a variety of easily
customizable row-and-column formats, with built-in spreadsheet
capabilities. Each cell in a table behaves like a mini-frame. As with
frame text, you can alter table text’s character and paragraph
formatting, apply text styles, and attach hyperlinks. However, you can’t
use WritePlus to edit table text or import text from a file.
Tables have a number of unique features (detailed in online help) like
AutoFormat, QuickClear, and QuickFill for rapid editing and revision.
To create a table, choose
Insert Table from the Tools toolbar and
click on the page or pasteboard, or drag to set the table’s dimensions.
The Create Table dialog appears with a selection of preset layouts. You
can either select a preset or choose Default to start with a plain table,
then click OK.
Once you’ve created a table, you can select, move, resize, delete, and
copy it as an object, just as you would with a text frame. Other
operations involve selecting text within the table, or parts of the table.
Within each cell, you can click for an insertion point or drag to select a
range of text. You can also drag to select multiple cells, rows, or
columns, which in effect selects all the text in that region. Once you’ve
made a selection, you can edit text in the table and modify the structure
and appearance of the table and/or its components.
Scheme colors and text
To round out this chapter, a brief reprise on the subject of scheme
colors. When we introduced the Studio’s Schemes tab in Chapter 2, we
mentioned that “Scheme Color 1” (as displayed in the Attributes tab’s
Color gallery, and elsewhere) is conventionally applied to text in
WebPlus template sites. This isn’t a hard and fast rule—you can apply
any color you like to any kind of text.
Working with Text
53
However, even if you don’t apply a scheme color to your text, if you
add a hyperlink to any text you’ll notice that it takes on a color... and
after that hyperlink is clicked in a browser, the text turns yet another
color. Where do these colors come from? They’re two of the three socalled adjunct colors associated with each site’s color scheme, and
included as part of each sample in the Schemes tab gallery:
♦
The Hyperlink color applies to hyperlinked text before it’s been
clicked on.
♦
The same text after a Web visitor has clicked to “follow” the link
takes on the Followed Hyperlink color.
In the next chapter, we’ll resume the discussion of scheme colors and
explain how you can customize individual colors (including the adjunct
colors) or create your own schemes from scratch.
Design tips
Here are some points to keep in mind when working with text (see also
the suggested links at the end of Chapter 5):
♦
Hardly anyone actually prefers reading computer text over
traditional print. Try to make your text inviting, at least. As a rule,
users should be able to view each text block in the browser
window without scrolling. Use short, newspaper-style paragraphs,
not flowing, book-length ones. The “inverted pyramid” style of
writing found in journalism works well on Web pages, too: use a
strong lead-in and place essential information up front.
♦
There’s plain text, and then there’s hypertext (linked text). As a
Web author, writing well is only part of your job. Adding
hyperlinks that enhance access to your key ideas is an equally vital
task.
♦
Headlines and subheadlines are useful devices to facilitate
scanning (scrolling) and to break up the monotony of longer
stories. Use left aligned rather than centered heads. Avoid headline
text larger than 24pt, which looks amateurish, and all-uppercase
headlines, which can be hard to read. For variety, you can color the
heads and subheads differently from body text—just don’t overdo
it!
54
Working with Text
♦
In general, it’s not a good idea to use more than one column for
story text. On a Web page, no one wants to scroll to the bottom of
one column and then back to the top of the next. You may see
sophisticated Web pages that use tables and frames to demarcate
different kinds of content, and you may be able to emulate these
effects, but they work best with short text blocks and hyperlinked
lists, rarely for the presentation of longer material.
♦
To avoid registration problems, make sure text is on top, not
behind images.
For more help on working with text...
In this chapter, you’ve examined the placeholder text in the template
site and learned how to create, edit, and import standard text. You
know enough now to begin replacing the placeholder text with your
own content.
As you work on your actual Web site, you’ll benefit from learning how
to link frames together, set defaults for new text, use shortcuts, insert
returns and special characters, and work with the various proofing
tools. For details on these and other text options, see online help.
?
For help on...
In WebPlus Help,
display...
Then...
Overview of WebPlus
text
Index
Select “text, overview”
Importing text
Working with frame
text, artistic text,
frame text
Contents list
See topics in section “How to
Work with Text”
Setting text properties
Using templates and
named styles
Contents list
See topics in section “How to
Format Characters and
Paragraphs”
Tables
Contents list
See topics in section “How to
Work with Tables”
Text on a path
Index
Select “path text”
Setting defaults
Index
Select “default properties”
Using proofing tools
Index
Select from “proofing tools”
Working with
Graphics,
Animation,
and Multimedia
Working with Graphics, Animation, and Multimedia
57
In this chapter, we’ll continue the hands-on sequence, examining the
pages the Web template provided—this time looking at images and
graphic objects. The focus will be on how to replace the placeholder
images with your own images, and how to create new graphic elements.
Graphics in WebPlus
Web template sites may include several different types of graphic
objects. You can use the Pointer tool to select, move, and resize them,
just as with text objects.
On the Home page of the HANDSON.WPP template site, click with
the Pointer tool on the photo on the right. (The Picture toolbar will
pop up.) Try resizing the photo by dragging from one corner. Now
click in the center and drag it around the page... notice that it
appears behind some objects and in front of others.
TIP: Watch the HintLine as you drag an object, and it will tell you the
object’s properties.
Drag the photo so it slightly overlaps one of the lemon-shaped
bitmaps near the “Service Offer” text frames. Click in the region of
overlap once, then click again in the same place. Notice how the
selection switches between one object and the other.
As a general rule, when two or more objects overlap at a particular
point, your first click at that point selects the uppermost object—
typically the one most recently created. Your second click selects the
object below the first, and so on. If one of the objects happens to be a
text frame, use Alt-click to override the text edit cursor.
Reposition the photo if necessary so it’s overlapped by one of the
“Service Offer” text frames, and try clicking several times in the
region of overlap. All you’ll see is a blinking text edit cursor. Try
clicking again, this time with the Alt key held down. Now you can
successfully switch between the two objects.
TIP: You can also employ Alt-click anytime to drag a text frame from
its center.
58
Working with Graphics, Animation, and Multimedia
Importing a picture or animation
You’ll have no difficulty importing such items as metafile clipart,
bitmap photos, or animated GIFs. WebPlus can handle all the standard
formats. You have wide-ranging control over import and export
options, using the Graphics tab of the File/Site Properties... dialog.
The regular settings result in most imported images being embedded in
the WebPlus project file and then exported as .PNG bitmaps when you
publish the site. Let’s try importing...
Click on a blank part of the page to deselect any objects.
For future reference, note that the import function is sensitive to the
current selection. If you preselect a picture, WebPlus assumes you want
to replace it. If you have a selection point in text, you’ll be given the
option of inserting the new image inline. This time we just want to
bring in a standalone photo.
Click the
Import Picture button on the left toolbar.
Using the file selection dialog, open PHOTO1.BMP in the
PROGRAM FILES/SERIF/WEBPLUS/9.0/SAMPLES/ folder.
When you see the special cursor, you have two choices. You
can either drag out a box region on the page to set the size of the
imported picture, or simply click to insert the picture at a default
size. Pick either one. The sample picture (of a lion) will appear,
and you can always resize it later by dragging its handles.
You can use the Picture toolbar to improve the appearance of an
image by adjusting contrast, brightness, color, size, and other
properties. You can also access global and local settings that let you
control the format of each image when it’s ultimately displayed on your
published Web site.
Working with Graphics, Animation, and Multimedia
59
With the lion photo selected, click the
Picture Effects button
on the toolbar, and then click a medium gray color swatch to
produce a monochrome image using the Recolor option. Try
experimenting with other options if you like.
As a shortcut to replace an existing image—for example, a placeholder
in a template—you can just double-click it to bring up the file selection
dialog. You can also drag and drop an image file icon into WebPlus,
and of course paste objects from other applications via the Windows
Clipboard.
The Convert to Picture command lets you combine several separate
elements (as a multiple selection) into one picture for easier
manipulation. It’s also great for changing an embedded picture from
one format to another, saving you the trouble of making changes in an
external editor.
By the way, the WebPlus 9 Resource CD-ROM includes a bonus
collection of 20,000 WebArt images, including arrows, bullets/buttons,
icons, lines, and animations as well as pictorial Web graphics. You can
peruse the collection using your Web browser, then drag and drop
images directly into WebPlus. To choose animations, use
Insert/Media>Animated GIF....
Note that the time it takes a visitor to load one of your Web pages is
directly related to the size of the page’s HTML file plus any
accompanying graphic files. Graphics require larger file sizes, and
hence slow down loading time. And even in compressed form, bitmap
files like the photo we’ve just imported tend to be much larger than
simple line or shape graphics (see below)—so use them sparingly!
Keep picture dimensions to the minimum needed to convey your point.
It’s always wise to plan your layouts so as to avoid large graphic areas.
60
Working with Graphics, Animation, and Multimedia
Drawing lines and shapes
WebPlus provides several easy-to-use drawing tools. The three linedrawing tools are located on a Tools toolbar flyout:
Freehand Line
Straight Line
Curved Line
With them, you can add both functional and decorative layout
elements—for example, clickable buttons or page dividers. To draw a
straight or freehand line, select the appropriate tool, then click and
drag. To extend an existing line, begin drawing from one of the line’s
end nodes. To close the line, creating a shape with a fillable interior
region, simply connect the line back to its starting point.
Curved lines allow you to adjust the curvature of each line segment
with precision. After choosing the Curved Line tool, use the Curve
Creation toolbar to select which kind of segment you’ll draw next:
Straight, Bézier, or Smart. Each Bézier segment has control handles
that act like “magnets,” pulling the curve into shape. Click to place a
starting node (1), then click again (2) where you want the segment to
end, and adjust the handles to tweak the segment’s curvature. As with
the other line tools, you can extend the line repeatedly. To end a curved
line without closing the shape, press Esc or double-click (or simply
choose another tool).
Smart segments are similar, but they appear without visible control
handles and use automatic curve-fitting to connect each node. They’re
especially useful when tracing around curved objects and pictures.
You can use the Pointer tool to adjust lines once you’ve drawn them.
The techniques are the same whether you’re editing a separate line
object or the outline of a closed shape. Simply select the line and drag
its bounding box to move or resize it. Drag a line segment to reshape it,
or select an individual node and drag to move it, or adjust the node’s
control handles to change the profile of the adjacent segment(s).
The Curve toolbar appears when you select a line or closed shape, and
provides a variety of adjustment controls for adding or deleting nodes,
closing or breaking curves, and changing node types, as detailed in
online help.
Working with Graphics, Animation, and Multimedia
61
The QuickShape flyout lets you select pre-designed objects that
you can instantly add to your page, then adjust and vary using control
handles. The QuickShape flyout contains a wide variety of commonly
used shapes, including boxes, ovals, arrows, polygons and stars. The
unique QuickButton (indicated below) lets you draw a range of
common button shapes... then you can add hyperlinks or hotspots to
make your shapes clickable!
Try it! Click the QuickShape button, then select a box shape from
the flyout. Click and drag out a small box on the screen.
The new box displays a sliding adjustment handle, used to control
corner shape. Most QuickShapes have multiple adjustment sliders.
Drag the slider up for concave corners, down for convex. Note that
the tool has reverted to the Pointer, and you can also use it to move
or resize the box.
Initially, the box will have a black line border and a clear fill. The
easiest way to change the object’s line and fill properties is to use the
Studio.
Display the Line panel of the Studio’s Attributes tab. Try adjusting
the Weight slider to give the box a thicker border, and click
various Type samples for a different line. Advanced options
include corner joins and end caps.
Now display the Attributes tab’s Color panel. Try changing the
box’s line or fill color and/or shade by first right-clicking a solid
color sample, then choosing either Apply to Line or Apply to Fill.
(Left-clicking a sample applies the solid color or shade to the
selected object’s fill.).
62
Working with Graphics, Animation, and Multimedia
The Color panel also features Fill, Text, and Line
buttons that let you preselect which attribute your color selection will
affect. For each base color you select, you can drag the Shade/Tint
slider below the tab gallery to adjust the lightness of the applied color,
for infinite variety.
The adjacent Color Picker Tool lets you define a free color
(shown as the second sample in the color gallery). You can choose the
tool and click anywhere in the workspace to “pick up” the color under
the cursor. (Left-clicking with the tool magnifies pixels under the
cursor for surgical precision.)
Note: You can achieve great results using just solid colors, but for even
more impressive effects explore the Transparency panel on the
Attributes tab. Using the samples in conjunction with the Transparency
tool, you can create highlights, shading and shadows, and simulate
“rendered” realism. You’ll find full details in online help, as noted at
the end of the chapter.
Now click to display the Fill panel. Here you’ll find an array of
predefined color fills in several categories: Linear, Radial, and
Conical. Try applying some of the thumbnails to get a feel for the
wide range of possibilities. If you want to switch back to a clear
fill, click None in the drop-down list.
In passing, right-click on the box object itself and note the
available Line..., Fill..., and Transparency... options that let you
adjust all these properties.
As a mini-project, you might try creating
your own Home Page button by overlaying a
text frame on an unfilled shape. Select both
objects, then click the little
Group
button to join them temporarily. Grouping
lets you move or edit a bunch of objects as if
they were one object; you can still edit
individual component objects by Ctrlclicking it. To separate (ungroup) the objects, click the button again. In
the next chapter we’ll see how to add a hyperlink!
Working with Graphics, Animation, and Multimedia
63
Manipulating objects
You already know how to select, move, resize, and group objects. Here
are some additional tricks you can carry out on selected objects. You
might try them out on your sample photo and box graphics!
♦
Use the
Rotate tool to rotate an object around its top left
handle. Select the object, then drag one of its handles. (To switch
quickly to the Rotate tool, position the cursor over an object’s
handle and press the Alt key.)
♦
Crop tool to crop (or trim) objects. Select the object,
Use the
then drag one of its handles inward. You can also overlap a shape
on the object, select both objects, and use Tools/Crop to Shape
♦
To constrain the movement of an object to horizontal or vertical,
use the keyboard arrow keys to nudge the selection up, down, left,
or right. Alternatively, hold down the Shift key after you begin
dragging the object. To draw a shape with constrained
dimensions—for example, a square or circle—hold down the Shift
key while drawing or resizing it.
♦
To add more than one object to a selection, hold down the Shift
key while selecting additional objects. This is handy for moving a
cluster of objects while keeping them aligned with each other.
♦
To duplicate an object, select it, then press and hold the Ctrl key
and drag out a copy.
♦
Use the WebPlus layout tools—including rulers, guides, the dot
grid, and the Snapping button—to position and align items with
precision for a professional appearance.
64
Working with Graphics, Animation, and Multimedia
Editing colors
By now you’ve had a chance to apply colors from the Studio’s
Attributes tab to various kinds of objects. We’ve also described how
you can employ scheme colors as a “paint-by-numbers” system that
allows you to quickly swap one set of colors for another throughout
your site. WebPlus gives you a large assortment of gallery colors to
start with, and a wide variety of built-in color schemes... but it should
come as no surprise that you can easily edit the colors, add new ones,
and store custom colors and schemes for later use.
Each WebPlus site has a particular set of solid colors, known as a
palette, which appears as a set of gallery swatches in the Attributes
tab’s Color panel. However, a site can also include colors that aren’t
part of its palette, and hence don’t appear in the Color panel gallery.
For example, you might apply a gallery color to an object and then
modify its shade/tint value, creating a unique color.
To add a custom color to the site’s palette (so it appears in the gallery),
right-click any sample in the Color panel gallery and choose Add..., or
(to add an object’s solid fill color) right-click the object and choose
Add Fill to Studio. To edit a specific palette color, right-click it and
choose Edit.... In each case, the Color Selector dialog appears. You can
choose a preferred color model (RGB, HSL, or CMYK), mix a new
color, then click Add to Palette or OK to update the site.
Color schemes revisited
In Chapter 4 we mentioned that each color scheme includes three
adjunct colors. Two of these apply to Hyperlinks and Followed
Hyperlinks; the third defines the page Background color. You have the
option of defining a tiled (repeated) picture, usually a bitmap pattern,
which works just like desktop “wallpaper”—so a small bitmap can go a
long way. The color scheme sample shows
if it uses a tiled bitmap.
Note that even in this case, the defined Background color is still active
and will show through transparent regions (if any) in the bitmap.
To modify or create a color scheme, choose Scheme Manager... from
the Tools menu (or after right-clicking any color scheme sample). The
Scheme Manager appears, with the current scheme colors shown on the
Edit tab.
Working with Graphics, Animation, and Multimedia
65
Each of the scheme colors has its own drop-down list, showing
available colors in the WebPlus palette, with access to the Color
Selector (see above) for defining new colors. To select a different
scheme for editing, switch to the dialog’s Schemes tab and pick one
from the scrolling list. When you’re done editing colors, you have two
independent options. You can click Save Scheme... if you want to
store the modified scheme in the Studio’s Schemes tab gallery, and/or
click OK to apply the scheme to the current site.
Note that you can override the Scheme Manager settings for adjunct
colors. Individual hyperlinks can specify their own color, and master
pages (or even pages) can use a custom background. See online help for
details.
Advanced effects
With WebPlus, you don’t have to be an artist to achieve amazing
special effects with text, photos, lines, and shapes! Here’s a short list of
techniques you can explore:
WebPlus provides a variety of filter effects that you can use to
transform any object. Choose Filter Effects... from the Format menu
and use the dialog to apply one or more effects to the same object.
♦
2D effects include shadows (for example, drop shadows), glow,
bevel, and emboss.
66
Working with Graphics, Animation, and Multimedia
♦
3D effects go beyond 2D to create the impression of a textured
surface on the object itself. Bump Maps superimpose depth
information for a bumpy, peak-and-valley effect, while Pattern
Maps contribute color variations using a choice of blend modes
and opacity, for realistic (or otherworldly!) depictions of wood
grain, marbling, and blotches or striations of all kinds.
♦
Feathering is a filter effect that
adds a soft or blurry edge to any
object. It’s great for blending
single objects into a composition,
vignetted borders on photos, and
much more.
Instant 3D isn’t a filter, but a separate
command that lets you quickly transform flat
shapes and text into three-dimensional
objects, with precise control over settings
like extrusion, rotation, lighting, and texture!
The Studio’s Object Styles tab includes multiple
galleries of predesigned styles that you can apply to any
object. Each object style can include settings for up to
seven object attributes: line color, line style, fill,
transparency, filter effect, font, and border. The freedom
to include or exclude certain attributes, and the nearly
unlimited range of choices for each attribute, makes this a
powerful tool in the designer’s arsenal.
To modify an object style, simply right-click its gallery
thumbnail and choose Edit.... To create a new style based
on an existing object’s attributes, right-click the object
and choose Object Style>Create.
If you’re looking for a way to create fanciful geometric forms or unique
typographic effects, don’t overlook the Mesh Warp tool, with a fullyloaded flyout of preset envelopes for distorting shapes and text, and its
own special toolbar for editing the “mesh” or grid that controls the
imposed curvature:
Working with Graphics, Animation, and Multimedia
67
And don’t forget that there are several ways to put artistic text on a
path. For example, you can start with a line or shape object and use the
regular Artistic Text tool to add text along it. Or select both an artistic
text object and a separate line/shape object and use Tools/Fit Text to
Curve to combine the two. Yet another method is to select some text,
then click the Path flyout on the Text toolbar and choose a preset path
for the text to flow along:
Adding animations
WebPlus lets you add several varieties of eye-catching animation
effects to any Web page: animated marquees (scrolling text banners),
GIF animations, and Shockwave Flash (.SWF) files. Using Wizards,
you can preview the animation and/or customize the effect. Once
placed into your Web site, the animations appear static, but they will
spring to life once the site has been exported and a visitor views your
page in a Web browser. Let’s see how easy it is to add an animated
GIF.
On the left toolbar, click to expand the Web Objects flyout and
Insert Animated GIF button. The Animated GIF
click the
Wizard appears.
Click Next and select an animation category. We’ll leave you on
your own to browse through the collection. Just click a title on the
list, and watch the animation in the window.
68
Working with Graphics, Animation, and Multimedia
As when importing images, either drag out a size region on the
page or simply click once to insert the GIF. For fastest image
display, reduce the original image dimensions to the needed size
prior to importing.
The animation won’t move on the WebPlus page, which only displays
the first of the GIF’s multiple frames. But keep it on your page so it’s
available when it’s time to preview the Web site.
You may wish to try the animated marquee effect, too—click the
Insert Animated Marquee button on the left toolbar.
Before continuing to the next chapter, remember to save your
work.
Adding sound and video
WebPlus lets you augment your Web pages with sound and video files
in a variety of standard formats, including both non-streaming and
streaming media. As noted above, it also supports Flash animation, a
movie format in its own right. You can include linked sound or video,
triggered by a mouse click (for example on an icon or hyperlinked
object. In addition, you can define background sounds where a sound
loads and plays automatically when a specific page is first displayed in
the visitor’s Web browser.
Working with Graphics, Animation, and Multimedia
69
One way of including multimedia is to add a hyperlink or hotspot (see
the next chapter) that opens a specific media file. With this option, the
media file remains separate from the site. WebPlus also provides
several ways of embedding the source file.
Clicking the
Insert Sound Clip or
Insert Video Clip button
on the Tools toolbar’s Web Objects flyout lets you choose whether to
link the clip from a standard icon (supplied by WebPlus), from an
external picture file of your choice, or via an inline media “player”
(again supplied by WebPlus). With the third option, a marker appears
on your page where the player will be shown after the page is
published. Using any of these approaches, you can select or deselect the
Embed option.
When you publish your site, WebPlus takes care of exporting and
copying both embedded and non-embedded files. Note that you won’t
be able to play back or edit sound or video files in WebPlus; you’ll
need to use an external media editor.
Design tips
Graphics
You can obtain pictorial content in lots of ways: scanning, grabbing
screen images, using clip art, creating from scratch. No matter where
you get an image, you’ll need to modify it in some way: cropping or
enhancing it, adding text, applying a special effect, combining it with
another image. For these tasks, you don’t have to be a great artist, but
you do need to know your way around a paint program like Serif
PhotoPlus. Make sure you’ve got a package that can save to the .GIF
format. Whichever program you’re using, the information and advice in
this section will help you use it effectively with WebPlus.
Before moving on to some more technical aspects of enhancing Web
graphics, let’s review a few visual design precepts with special
relevance for Web pages in general. As in other sections of this chapter,
we’re interested in respecting the way people actually experience Web
pages.
♦
If you’re using graphics as page elements, not just as background,
then use small, significant elements throughout the page, not just at
the top and bottom. As users scroll, the page should preserve a
balance of text, graphics, and white (background) space.
70
Working with Graphics, Animation, and Multimedia
♦
At the same time, avoid insignificant adornments like rules,
bullets, and icons unless they’re part of an overall scheme.
♦
Don’t use too many colors on the page or background. Half a
dozen per page, including background, body text, links, and
graphics, is about right to lend your site a professional appearance.
Using a color scheme is an excellent way to keep things in check.
(Plain white or light backgrounds are favored.) Pick no more than
two dominant colors per page; the further any other color is from
these “dominants,” the less space it should occupy.
♦
Elements with similar form or function (for example, all section
heads or horizontal rules) should share the same color.
♦
Try varying the artistic forms you use. Throw in a photograph or
two—even if they have no special relevance to your site, they’ll
enhance its visual appeal on a decorative level as long as they
blend into a compositional scheme. Think about using a clip art
photo as a background for a logo, text head, or navigation map.
Don’t get stuck on using just one type of graphic.
♦
Avoid blocky, rectangular shapes, which tend to make the page
look closed, static, and amateurish. Rounder and softer-edged
images tend to open up the page.
♦
Include graphic effects that combine hard-edge and soft-edge; drop
shadows are a good example.
The soft-edge effect known as anti-aliasing is one of the basic tricks of
the computer graphics artist. The effect gets rid of “jaggies” along
edges by subtly applying intermediate colors. To the human eye, antialiased text on-screen (especially at larger point sizes) appears of
higher quality than text without the effect. In general, always use antialiasing for your graphics and headline text, unless the image contains
only straight lines, edges, and outlines.
As shown in the simple sketch below, your design can include page
elements that blend with master page elements. These might include
portions of a logo, header, navigation bar, and so on. You’ll need to
zoom in closely and adjust the objects on one or both layers to achieve
precise registration.
Working with Graphics, Animation, and Multimedia
71
Choosing the proper format and settings for Web images is vital.
WebPlus relies on global settings to determine how each type of picture
should be exported when you publish the site. By default, any image
you inserted as a GIF, JPEG, or PNG is exported as the original file,
using its original file name. All other graphics are converted to PNGs.
If you wish, you can alter these global settings (on the Graphics tab of
File/Site Properties...), and you can always use the Web Export
Manager Wizard (Web Export Manager... from the Tools menu) to
change the export settings for individual images. The Wizard lets you
check just one selected image, a range of pages, or the whole site. For
each image, you can specify the output format: .GIF, .JPG, .PNG, or
the default site settings.
Here’s some very general advice on which Web image formats to use
when importing. There’s more detail on formats and conversion options
in online help.
♦
Use the Import Picture button (or Insert/Picture... command) to
bring images into WebPlus, rather than pasting them via the
Clipboard. The fewer filter transformations an image has to
undergo, the better.
♦
The .GIF format is good for low-color, non-photographic images
with sharp edges—for example charts or screen-capture text. The
format is limited to 256 colors, so it’s fine for grayscale photos as
well.
♦
For photographic images and high-color, soft-edged graphics,
.PNG or .JPG rather than .GIF are preferred formats.
72
Working with Graphics, Animation, and Multimedia
♦
With JPEGs, image quality goes down (along with file size) as the
compression setting increases. With high compression, some
images may still look fine, but photographs in particular will
visibly degrade. Preview your site, and let your own eye be the
judge. You can adjust the global or local settings for .JPG
compression as required.
♦
For images using variable transparency, use the .PNG format.
Low-color systems
Note: If you’re quite sure all your intended visitors can display more
than 256 colors, the following section isn’t required reading. On the
other hand, the knowledge is likely to prove useful when working with
any on-screen graphics, just as knowing basic color theory serves you
in the realm of printed sites.
Bear in mind that not all your visitors’ computers will match your own
for graphic display. Like the .GIF format, some monitors are still
limited to 256 colors. It’s generally a good idea to switch your display
to 256 colors and test the page in a browser before finally publishing it.
This will ensure you’re using colors in a way that won’t present
problems when displayed on average systems. The more you know
about color palettes and image formats, the fewer display problems
are likely to creep in.
A major constraint imposed by 256-color systems is that not all
systems use the same 256 colors. The operating system reserves a
certain number of palette slots for “system colors,” and system palettes
differ, for example, between Windows and Macintosh computers.
Applications, including Web browsers, declare their own palettes and
use dithering to approximate colors outside that palette. This means,
for example, alternating pixels of red and blue (from within the palette)
to approximate a purple color outside the palette.
If you’re not careful, dithering can ruin your best efforts. Let’s say
you’ve created a graphic with some solid color areas, but the user’s
browser can’t display one of those colors. So the browser dithers the
color, resulting in a mottled and degraded image. If the solid color
happened to include text, the text becomes less legible.
Working with Graphics, Animation, and Multimedia
73
To prevent display of this kind, Web designers often use a Web-safe
palette of 216 colors that don’t dither in Web browsers operating in
256-color environments. The safe palette is actually a 6x6x6 RGB
“color cube” using evenly-spaced red, green, and blue values from 0 to
255 along its axes. 51 happens to be the interval in the series of values
(0, 51, 102, 153, 204, 255). So, for example, the RGB definition
“0,102,51” would be a safe color, while “0,102,52” would not. To
create Web-safe colors in a paint program, define new colors using
RGB values that are either 0 or divisible by 51.
For your convenience, WebPlus includes two swatch panels
incorporating the Web-safe colors. (Look for WEBSAFE1.GIF and
WEBSAFE2.GIF in the /WEBPLUS/9.0/SAMPLES folder.) You can paste
either one into your paint program’s “canvas” area and pick colors from
it using the program’s eye dropper tool. Or you can load the supplied
WEBSAFE.PAL palette so it’s used in the color selection table. It’s
especially important when anti-aliasing graphics to ensure that the edge
colors the program applies come from the safe palette. (You can also
select the palette for use in a site via Tools/Palettes>WebSafe.plt.)
As a rule, if you’re concerned with 256-color display, save low-color
bitmap images created in your paint program in the .GIF format using
the safe palette. Avoid using a unique palette per image; if you have
multiple GIFs per Web page, different palettes may clash and all
images will suffer.
Performance
“Performance” may seem like an odd aspect of graphic design, but it’s
actually one of the key factors in how users will judge your Web site.
As with colors, not all your users will have systems that match yours
for speed. Technically, performance means load time: how long it takes
for your whole page, including text and graphics, to display completely
in a Web browser. In practice, it’s hard to measure, and subjective
factors intrude. Connection bandwidth, server speed, and modem rating
all play a part. As discussed earlier, it’s always wise to design the safe
area of each page to give visitors something to look at, read, and/or
think about, and thus offset the perception of delay while the rest of the
page loads.
Load time is a function of the total size of all the page objects that need
to load; and graphics usually take up the lion’s share. That’s why we
can talk about the “performance” of your page as a function of the total
file size of its graphics.
74
Working with Graphics, Animation, and Multimedia
If you’re being considerate of users with dial-up modem connections
you can work out your own rule of thumb. Assuming these users are
willing to wait up to 20 seconds (because they’re probably accustomed
to waiting) you can multiply that by 4K bytes per second, the
throughput of a 1995-vintage modem. By that logic, if your pages
exceed about 80KB in size you will start to alienate some fraction of
your intended visitors. For comparison, a high-speed connection is
about ten times as fast.
You can determine the actual size of your files by publishing one
page at a time to a local folder (using File/Publish Site/Publish to
Disk Folder...), then using Windows Explorer to examine the
contents of the folder. View the files by date and Shift-select the
most recent batch, then right-click and choose Properties to see
the aggregate byte count. Obviously, the lower the better.
Is there anything you can do to reduce the total size of your graphics,
aside from using fewer graphics? An obvious suggestion is to make
them no larger than they need to be to get your point across. Since file
size increases as the square of each dimension, shrinking both height
and width by 50% reduces the file size by 75%. Try to use the correct
dpi setting for images before importing, rather than scaling large
images down on the page. You can use the Size and Resolution dialog
(accessible from the Picture toolbar) after importing to scale pictures
and/or resample them so excessive dpi doesn’t waste bytes. Avoid large
regions of transparency if possible.
If you save graphics as GIFs (see above), you can take advantage of the
fact that GIFs, unlike most other 256-color (8-bits-per-pixel “bit
depth”) formats, don’t insist on using 8-bit pixels. If the number of
colors in the image is 128, GIFs will encode using 7 bits; with 64
colors, 6 bits, and so on. As an experiment, we tried starting with a
small image (some anti-aliased text) that only used 14 colors. With the
paint program set for 256 colors, we saved as a .GIF, yielding a file size
of 1204 bytes. After reducing the number of colors displayed in the
paint program to 16—still sufficient to display all those in the image—
we saved again, and the file size went down to 420. If you’ve got a
dozen or more small GIFs per page, those little savings can really add
up!
Paint programs handle color reduction in various ways. Some let you
set the image to either 16 or 256 colors, but not to 64 or 128; that’s still
a help if your images require 16 or fewer. Ideally, you can save with an
arbitrary number of colors, and the program will attempt to optimize
the image using that value. So you can pick any intermediate bit depth,
and find the one that works best for the specific image. To sum up:
Working with Graphics, Animation, and Multimedia
75
To reduce file size, reduce the number of colors in each image, and
save as a .GIF file using the lowest acceptable bit depth your paint
program will allow.
If all this talk about image formats and bit depth has landed somewhere
slightly over your head, we have two suggestions:
(1) Spend some time with a good paint program and experiment with
the techniques introduced here.
(2) Point your Web browser to the suggested links at the end of the
chapter. You’ll find a wealth of advice and examples to draw upon.
Multimedia
Considering all the cautionary advice here about reducing file sizes to
achieve acceptable load time on home-based Web browsers, a foray
into multimedia is clearly not for the faint of heart! Although WebPlus
9 allows you to insert both audio and video files—and will even embed
the files in the original site to facilitate your efforts—from a design
standpoint this feature should be regarded as rather experimental.
WebPlus can incorporate a wide variety of audio and video files such
as QuickTime, MPEG, RealAudio, and RealVideo, besides the
“generic” Windows media types (.WAV for audio and .AVI for video).
There are actually two sound playback options—background sound,
where a sound loads and plays automatically when a specific page is
first displayed in the visitor’s Web browser, and linked sound, triggered
by a mouse click (for example on an icon or hyperlinked object).
Linked video works like linked sound.
These days, chances are your target visitors will be able to play media
in any of the supported formats. But unless you’re sure they’ll have
high-speed connections, file size is still a significant barrier. For
example, a .WAV file for speech content consumes about 10K per
second, and a compressed .AVI file for a postage-stamp-sized, 10
frame-per-second movie video without sound uses at least 35K per
second. If you want an audio track along with your movie, add the two
numbers together. MPEG compression can reduce file size
significantly, but many Web visitors will still have to wait before that
ten-second video clip knocks their socks off. If you (and/or your Web
visitors) are on a local network or have extremely fast Internet access,
however, the fact that audio and video are basically file downloads
should not pose a problem.
76
Working with Graphics, Animation, and Multimedia
WebPlus, of course, doesn’t handle either audio or video natively—it
cannot edit or play them back—so unless you rely on borrowed or clip
media, be prepared to master a media editing application or know
someone who can. (Any teenagers in the family?) The good news is
that just because multimedia is a bit of a creative leap you can still have
a lot of fun experimenting! For example, with Serif MoviePlus (and a
digital video capture card or camcorder), you can produce your own
digital movies and integrate them with your Web site.
And don’t overlook the possibilities of creative audio. You can add
entertainment value and interest with well-selected, short audio clips
like single words or phrases, themes, sound effects, and the like. Or
consider background theme music that loops while visitors peruse your
home page. For longer clips, we suggest you use the inline option,
which provides a small on-screen player. Visitors who don’t care for
the audio will appreciate being able to click the stop button!
In sum, while we wouldn’t recommend making non-streaming audio a
centerpiece of your Web site, it’s certainly another way of introducing
welcome variety to your pages. The constraints are real at this stage—
but let your creativity rise to the challenge.
Suggested links
www.webstyleguide.com Web Style Guide, 2nd ed. by Patrick
Lynch and Sarah Horton of Yale’s Center for Advanced
Instructional Media. Illustrated, annotated dissertation on all facets
of Web interface design. Also available in book form.
www.efuse.com Attractively presented sequence of informational
pages on planning, design, building, publishing.
www.serif.com Forums, updates, and tips for users of all Serif
products. Online Glossary lets you browse the full version of our
Desktop Publishing QuickReference.
www.sun.com/980713/webwriting/ Writing for the Web. Authored
by Jakob Nielsen et al. (see Print resources), research-based
guidelines to improve usability.
www.wdvl.com Web Developer’s Virtual Library (WDVL).
Supersite contains dozens of sections for both novices and experts,
including /graphics/, /multimedia/, and /authoring/design/.
webdesign.about.com Collection of links and features, including
Web Design A-Z.
Working with Graphics, Animation, and Multimedia
77
www.webpagesthatsuck.com Vincent Flanders’ guided tour
through examples of, ah, poor design. The site became one book,
then a second, and (unfortunately) never seems to run out of fresh
material.
www.webreference.com Comprehensive developer’s site, includes
Developer’s Corner with how-to articles, sections on Graphics and
Design. Part of internet.com’s WebDev network. Look for
graphics tutorials by Wendy Peck and Dan Giordan, and Dmitry
Kirsanov’s archived “Design Lab” columns.
For more help on working with graphics,
animation, and multimedia...
?
For help on...
Choose from the
Help menu...
Then...
Aligning
Grouping
Exporting
Cropping
Layering
Other object actions
Contents list
See topics in section “How to
Edit Objects on the Page”
Lines and shapes
Gallery and Portfolio
Advanced effects
Contents list
See topics in section “How to
Work with Lines, Shapes,
and Effects”
Importing images
Index
Select “importing”
Optimizing images
(Picture toolbar)
Index
Select “pictures: optimizing”
Setting image
publishing options
Index
Select “Web sites, setting
picture display options”
Animation
Index
Select “animation effects”
Sound and video
Index
Select “sound” or “video”
Color schemes
Index
Select “color: using color
schemes”
Colors, fills, and
transparency
Contents list
See topics in section “How to
Work with Colors, Fills, and
Transparency”
78
Working with Graphics, Animation, and Multimedia
Working with
Hyperlinks and
Interactivity
Working with Hyperlinks and Interactivity
81
In this chapter we’ll look at various ways you can enhance your
WebPlus pages to improve the quality and variety of the visitor’s
experience. If your site has more than one page, hyperlinking is
essential—it’s what enables visitors to navigate through your site—and
it’s easily accomplished. Hyperlinked text is common, but you can also
create “hypergraphics” using not only hyperlinks but hotspots or
rollovers. We’ll discuss how to integrate WebPlus navigation
elements—and even improve on them a bit! Adding Java and HTML
is somewhat more challenging, but if you’re technically inclined,
WebPlus stands ready to support your efforts.
Hyperlinking an object such as a word, a shape, or a picture means that
a visitor to your Web site can click on the object to trigger an event.
This event might be:
♦
A jump to a Web page (either on your site or somewhere else on
the Web)
♦
The appearance of an E-mail composition window
♦
The display of a graphic or text file
♦
A fullsize version of a scaled-down (thumbnail) image
Hyperlinks and anchors
Let’s begin by experimenting with hyperlinks in your template-based
site.
Open the HANDSON.WPP project again and zoom in on the upper
half of the page.
Click for a text edit cursor at the start of the central text field (just
below “Our Company”), type “About Us,” and press Return—just
to give you something specific to work with.
Now drag over the text you typed to select it, then right-click it and
choose Hyperlink.... (You could also click the
Hyperlink
button on the Attributes toolbar, or choose the command from the
Insert menu.)
The Hyperlinks dialog appears, with a choice of possible link
destinations. Right now “No hyperlink” is selected (you could use this
choice later on if you wanted to remove a link from an object).
82
Working with Hyperlinks and Interactivity
Select A page in your site and more options become available at
the bottom of the dialog. Click to expand the Page name list and
choose the second page, “About Us.” Then click OK.
The text you selected is now hyperlinked, and appears underlined by
default, using the electric blue color defined for Hyperlinks as part of
the site’s color scheme.
If you want to test the link right away, you can preview the site in
an internal window (choose File/Preview Site>Preview in
HTML Preview flyout on the
Window, or click the
Standard toolbar and choose the command). Note that the Page
Locator on the HintLine is still available, so you can conveniently
navigate from one page to another.
That’s all there is to it! Now let’s consider linking to an anchor—a
specific location on a page that’s intended to serve as the target for a
hyperlink. Invisible to the Web page visitor, it typically marks a point
within some text (such as the start of a particular section) or an image
partway down a page. With pages as short as those in this particular
template site, anchors won’t prove very useful, but we can at least see
how they work...
Logically, the anchor needs to exist before you can link to it, so your
design process entails working backwards from the link’s target to the
link itself.
Working with Hyperlinks and Interactivity
83
Use the Page Locator (or any other method) to display the “News”
page, and select the last word (“Samples”) of the frame at the
lower right. Right-click it and the Anchor dialog pops up, asking
for a name. The default name “Anchor1” is fine, so just click OK.
This time there’s no visible change on the page, but WebPlus is
keeping track.
Redisplay the Home page and this time right-click on one of the
lemon-shaped graphics. Choose Hyperlink... and this time select
An anchor in your site. In the Page name list, choose “News.”
As you can see, the Anchors list lets you select your target from
any anchor on the designated page. Since there’s just the one, go
ahead and click OK.
Again, you can test the link in preview mode. If you set the display
to 640x480 (using the floating Preview toolbar), you’ll be able to
see how the browser window zeroes in on the actual anchor
location when the page is displayed.
If you tried the examples above, you learned that hyperlinking a
graphic was just as easy as hyperlinking text. (Of course, linking from a
meaningless graphic to a random word made no particular sense... but
at least it proved the point!) Now that you’ve seen one way of creating
a “hypergraphic” by linking the entire object, we’ll look at two other
methods.
Using hotspots and rollovers
A hotspot is a transparent hyperlink region on a Web page. Usually
placed on top of bitmap images, hotspots act like buttons that respond
when clicked in a Web browser. They are especially useful if you want
the visitor to be able to click on different parts of a picture (such as a
graphical “menu” or map of your site). To give you an idea of how they
work, we’ll need to create one.
Click the
Insert Hotspot button (the first on the Tools
toolbar’s Web Objects flyout). The cursor changes to a cross.
Let’s place a hotspot over the lion’s face in the photo. (If your site
doesn’t include the lion photo from the last chapter, just use one of the
placeholder graphics.)
84
Working with Hyperlinks and Interactivity
Click slightly to the upper left
of the lion, then drag down
and right to draw a box. (You
can adjust it later.)
When you release the mouse
button, the familiar Hyperlinks
dialog appears, waiting for you to
provide a target.
Select A page in your site and designate “Contact Us” in the
drop-down list. Click OK.
Another approach to creating hotspots is to match a hotspot to an
existing shape. Simply create the shape (see Chapter 5) and draw a
hotspot as explained above. Then select both objects and choose Fit
Hotspot to Shape from the Tools menu. The hotspot instantly
conforms to the shape! The two objects will still be separate, so you
can easily delete the shape if it’s no longer needed.
If necessary, you can use the Pointer tool to move or resize a hotspot,
like any graphic. There’s no limit to the number of hotspots you can
use. You can also add extra nodes to a hotspot, allowing it to be fit into
any irregular region; there’s more on this in online help.
Rollover graphics combine several images with HTML code in such a
way that a different image appears (or some other event is triggered)
depending on how the user’s mouse “rolls over” the object. For
example, a rollover button might appear “down” or “up” depending on
whether the user’s mouse was over it. A number of theme graphics
exhibit rollover behavior.
To create your own rollovers in WebPlus, you’ll first need to import a
layered graphic created in a separate graphics program, such as Serif
DrawPlus. Each layer will contain a separate picture for a particular
“state” of the button object. WebPlus then lets you define the rollover
behavior, automatically generating the necessary event-trapping code
for the states you define. For details, consult online help.
Working with Hyperlinks and Interactivity
85
Navigation elements
If you’ve used the WebPlus Site Structure tree to develop a logical
arrangement of sections and levels for your site, there’s no reason not
to install a navigation bar (introduced back in Chapter 3). In addition
to this valuable basic component, the structure of your site may call for
other kinds of navigational links. For example, suppose several pages
comprise a natural sequence. Perhaps a long story or report has been
broken into several parts, or directory listings are arranged
alphabetically. In such situations, you can create a browse sequence
using a mini-navigation bar that lets the user step forward or backward
through the series. Previous and Next buttons can accomplish this
nicely, by linking between adjacent “sibling” pages on the same level.
The Studio’s Themes tab provides a ready-made assortment of these
and other navigation elements as theme graphics. Chapter 3 outlined
the advantages of using theme graphics for navigation: they
automatically adapt to changes in your site structure, they’re easy to
customize, you can instantly switch to a different design set, and so on.
As with anything that’s “free,” however, theme-based navigation
elements come with a few limitations. Fortunately, with a little extra
effort (still far less than if you had to construct everything from
scratch!) you can address these minor shortcomings and achieve
superior results.
Ideally, a navigation bar should do more than look pretty and enable
users to get around the site. It should also provide locational feedback
within the site, so users know where they are. For example, when the
user jumps to the “About Us” section of the site, the “About Us” button
should highlight or change color—something to indicate the current
location. Theme graphic navbars don’t (as yet) provide this kind of
visual feedback—their buttons are programmed to respond to mouse
events, but other attributes such as color are fixed.
If you were to develop a navigation bar from scratch, you could prepare
a unique set of buttons for each section of the site, using a different
color or font style for the button representing the “current” section. Or
you could place a basic navbar on the master page layer and overlay the
current section’s button with a single, different button on each page.
The extra effort would be worth it, considering you’d undertaken to
build the navbar in the first place. But with theme graphic navbars
available, there’s simply no sane reason to build one by hand.
Instead, consider this “best of both worlds” approach...
86
Working with Hyperlinks and Interactivity
(1) Start by selecting a navigation bar from the Themes tab, then
customize it to include the necessary buttons and to look the way you
want.
(2) Incorporate it on the pages of your site, preferably on the master
page layer.
(3) Design a bullet, pointer, or some other graphic (one that
complements the color and design of your navbar buttons) and paste it
on the page layer in the correct place to denote the current site location.
Make sure this “indicator” doesn’t overlap the button underneath.
Here’s a simple sketch:
Providing you wait until your page layout (i.e. the placement of the
navbar) is final before placing these indicators, one pass through your
pages, pasting as you go, will suffice—and will greatly enhance your
site’s navigability.
About HTML and Java
HTML, of course, is the language “behind” basic Web pages—the
actual descriptive code that tells a browser what to display and where to
display it. While WebPlus doesn’t support full-fledged HTML editing,
it does allow you to add extra HTML code to a page. Using this
approach, you can include HTML and JavaScript fragments generated
by another application, copied from another Web page, or perhaps that
you’ve written yourself.
To insert HTML, choose Web Objects... from the Insert menu and
select HTML... from the submenu (or use the Tools toolbar button).
Then use the dialog to enter the HTML code. WebPlus inserts a marker
into your site at the site where the code will run. Since you won’t be
able to see the effect of the HTML until you preview the exported site,
be careful to position the marker correctly. (Tip: You can store HTML
code fragments in the Portfolio.)
Working with Hyperlinks and Interactivity
87
Java is a cross-platform, object-oriented programming language used
to create mini-applications called applets that can be attached to Web
pages and that run when the page is viewed in a Web browser.
WebPlus lets you add Java applets to your Web sites. You don’t have
to write your own! Plenty of applets are available online—for example
animation, interface components, live information updating, two-way
interaction, graphics rendering, live updating, streaming audio and
video, games, and many more.
To insert a Java applet, choose Web Objects... from the Insert menu
and select Java Applet... from the submenu (again, there’s a button on
the Tools toolbar). In the dialog, list the applet’s component files as
well as any necessary parameters (as described in the applet’s
documentation) that specify exactly how the applet should run. You
don’t necessarily need to understand the underlying code, but it’s
essential to make sense of any “Read Me” documentation that comes
with the applet.
As with HTML, WebPlus inserts a marker into your site at the site
where the code will run. The marker’s dimensions probably won’t
correspond exactly to those of the applet when it’s running, so plan
your page layout accordingly, and the more preview tests you can run
(using various versions of different browsers), the better.
Design tips
Hyperlinks and anchors
The World Wide Web has finally popularized the concept of hypertext,
which has been around for a couple of decades. We’re now accustomed
to clicking ‘round the world in a matter of seconds! Yet the skill of
authoring effective hypertext documents is still not widespread. Here
are several tips for linking:
♦
Use links in text sparingly: quality, not quantity, matters. If you
want readers to finish reading your paragraph, don’t fill it full of
invitations to jump elsewhere.
♦
Don’t let links in text disrupt the flow of your writing. Avoid
sentences like: “Click here to learn about linking text.” An
improvement would be: “Linking text can greatly enhance your
Web site.”
88
Working with Hyperlinks and Interactivity
♦
If you have more than a couple of links to related material,
consider listing them separately (e.g. as a See Also list), perhaps
with a bit of graphic embellishment.
♦
If your site has a group of interrelated topics, it may be more
efficient to cluster them into a section or sub-section, with its own
main page, rather than creating lots of sideways links between the
topics themselves.
♦
For sequential material, you can create a browse sequence e.g.
using Previous/Next buttons or a special navbar.
♦
As you’re building your Web site, you can use Tools/Hyperlink
Manager... to get a overview of all the links in your site. You can
see the destinations at a glance, check URLs, and display any
hyperlink for closer inspection. The Anchor Manager, also on the
Tools menu, provides similar renaming and removal functions for
anchors.
Hypergraphics
♦
You can have fun designing your own buttons using combinations
of objects and hyperlinks. As for the buttons themselves, they can
have a traditional box or oval shape, or any shape you want. The
QuickShapes flyout features lots of possible shapes (including a
“QuickButton”), and Artistic text works fine. Remember that
whenever the browser’s mouse pointer rolls over a hyperlink, it
will change to a hand. If the object looks like a button, users will
find it and know what to do with it. You can accentuate button
labels by separating them from each other (e.g. with lines or
borders); adding bullets or triangles; or using a filter effect on the
text, such as a drop shadow or emboss.
♦
Hotspots, which are themselves graphic elements, are not
recommended for use over text blocks. They force the text to be
converted to a graphic when the page is published, which aliases
and often distorts the characters. On the other hand, hotspots over a
picture don’t trigger conversion. So if you want clean lettering as
part of your hypergraphic, create it in your paint program. (In
general, use the .GIF format for all non-photographic images you
create for WebPlus Web sites, and work in 256-color mode. See
the tips in the “Graphics” chapter.)
Working with Hyperlinks and Interactivity
89
♦
Hypergraphics give you an alternative to using hyperlinked text,
which is best reserved for use within body text. For example, if
you had a set of pages arranged alphabetically, you might like to
create an alphabet users could click on to jump to a particular page.
This could be done with a string of 26 hyperlinked text characters,
but a creative alphabet graphic with hotspots over each letter
would undoubtedly end up looking better.
♦
You can use hypergraphics to create fanciful pictorial menus,
visual indexes, maps, diagrams, and other clickable previews of the
content on your site. As we said, they’re fun. Use them!
Navigation elements
♦
If you’re just starting to develop your site, make sure the overall
structure is clear before you design a navigation bar. Decide what
your sections will be, then choose a concise button label for each
section. Sketch some designs on paper. If there’s a chance you may
add more sections in the future, allow room for the navbar to
accommodate a new button or two.
♦
Provide links to the Home page as well as to the various sectional
main pages.
♦
Users should perceive the navigation bar as a fixed component of
the page background throughout the site, keep it in the same
position from one section to another.
♦
Finally, while we don’t encourage long pages that force the user to
scroll on and on, it’s handy to know that a hyperlink to the current
page will force the browser to redisplay the top of the page. So in
situations that seem to call for it, you can include a TOP button
(typically with a small up-arrow) at the bottom of your page,
linked to the current page. After all, the user worked hard to get to
the bottom—why make them climb all the way back up?
90
Working with Hyperlinks and Interactivity
For more help on hyperlinks and interactivity
The fact is, you now know almost all there is to know about
hyperlinking and hotspots! For additional details, see online help.
?
For help on...
Choose from the
Help menu...
Then...
Creating hyperlinks
and anchors
Index
Select “hyperlinks” or
“anchors”
Setting hyperlink color
Index
Select “hyperlinks, setting
color of”
Creating and editing
hotspots
Index
Select “hotspots”
Adding rollovers
Index
Select “rollover buttons”
Hyperlink Manager
Index
Select “hyperlinks, using the
Hyperlink Manager”
Navigation elements
Index
Select “navigation elements”
Adding Java
Index
Select “Java applets”
Adding HTML
Index
Select “HTML, adding code to
Web pages”
Previewing,
Publishing, and
Maintaining
the Site
92
Previewing, Publishing, and Maintaining the Site
Previewing, Publishing, and Maintaining the Site
93
It’s time to rehearse the final phase of preparing your Web site! In this
previewing and publishing phase, as we’ve mentioned, WebPlus takes
the project‘s pages and converts them to HTML and graphics (images)
so that a Web browser can display them. You can publish either to a
local folder or to an Internet-based Web host. Previewing is similar to
publishing locally, except that the exported files are temporary,
intended for immediate viewing in your own Web browser.
Optimizing the site
Before you preview or publish, it’s wise to
take advantage of built-in WebPlus tools
for checking your site’s content and
structure. You can run the Spelling
Checker Wizard, Proof Reader Wizard,
and Thesaurus to inspect and improve
your text. The Text Manager displays a
list of all the text stories and free text used
in your site, and the Layout Checker
Wizard can locate problems like orphaned
pages, invalid anchors, overflowing text
frames, or nonstandard fonts. You’ll find
full details on these features in online help (see the table at the end of
the chapter).
Previewing the site
Previewing the site at least once before actually publishing it is
essential. Only by viewing the pages in a Web browser can you make
sure that headlines and body text appear the way you intended, page
elements fit properly, animations play at the right speed, and links
between pages make sense.
If you’ve been following the hands-on sequence, you’ve had several
opportunities to try previewing the template-based site, both in an
external browser and in an internal WebPlus window. Internal preview
means that WebPlus must re-export each page whenever it’s displayed,
in case any page elements have been updated. For a closer simulation
of the user’s actual experience, you can preview the site in an external
browser, which can be any browser installed on your system.
94
Previewing, Publishing, and Maintaining the Site
Open your HANDSON.WPP project and expand the
HTML
Preview flyout on the Standard toolbar, then choose Preview Site
in Internet Explorer from the submenu.
We’ll assume you have IE installed; otherwise, select your browser of
choice. If you have more than one browser installed, you can choose
Browser Preview List... to customize which are displayed on the
submenu. Also, note that there’s a Preview Page command for single
pages.
The WebPlus site is exported to a temporary folder, and your Web
browser launches, displaying the site’s Home page. (If your system
tries to connect to the Internet as the browser launches, you can dismiss
the connection dialog. No Web connection is required for previewing.)
If you previously saved the animated GIF on the Home page, you’ll see
it come alive now!
As you move the mouse pointer over hyperlinks or hotspots, you’ll
see the cursor change to the familiar “hand.” Click the hotspot you
placed over the photo (notice that its border line is now invisible),
and you’ll jump to the “Contact” page.
Previewing gives you a chance to see the site the way your visitors will
experience it. Keep track of how fast your pages display in the browser,
and remember that the Web will slow them down somewhat! Check out
each page and take notes on any problems, then go back to WebPlus
and make any necessary corrections.
Using the Preview Page command lets you preview just one page
instead of all the pages. Note that all previous temporary files are
deleted each time you preview. This means, for example, that if you’ve
already previewed the whole site, and then choose to preview just one
page (say, to check revisions), the previously exported pages will no
longer be available. If this is inconvenient, you may wish to use the
Publish to Disk Folder method, described next.
Previewing, Publishing, and Maintaining the Site
95
Publishing to a local folder
This option, like previewing, exports your project’s pages to HTML
and graphics files. The key differences are:
♦
You designate exactly where the files should go, instead of having
them written out to temporary files, which are not really under
your control. As noted above, each time you use Preview, even if
you’re only previewing one page, your previous set of temporary
files disappears.
♦
You can publish selected pages, rather than just (as when
previewing) all or one.
♦
Your Web browser doesn’t launch automatically. Instead, you’re
given the option of launching it. If it’s already open, simply
decline the option, then switch to your browser’s window and use
its Reload or Refresh command to display the updated page.
Publishing to a local folder is another way of previewing your Web
site, and is also the way to share your site with others on a local area
network. You don’t need to try it right now, but here are the steps
involved in publishing to a local folder:
Click the
Publish Site to Disk Folder button on the top
toolbar. In the dialog, locate the folder where you wish to store the
output files, or create a new folder.
In the Page Range tree, select which page(s) to publish, then click
OK.
Once the publishing process is completed, accept or decline the
option to launch your Web browser.
96
Previewing, Publishing, and Maintaining the Site
Publishing to the World Wide Web
WebPlus makes publishing to the World Wide Web almost as simple as
publishing to a local folder! The process uses a built-in FTP (File
Transfer Protocol) routine that connects with the remote server and
then uploads your files. WebPlus lets you set up multiple publishing
accounts—for example, if you have more than one service provider, or
want to publish to more than one folder location on a server. Before
publishing for the first time, you’ll need to gather some basic login
information from the service provider (as detailed in online help—see
the note at the end of the chapter).
When you’re ready to publish your Web site, here are the steps to take:
Click the
Publish to Web button on the top toolbar.
If this is your first time publishing to the Web, the Account Details
dialog will appear; otherwise you’ll see Publish to Web. You’ll need
to set up at least one account before you can proceed.
To define a new account, enter the information you’ve gathered:
The Account name can be any name of your choice. You’ll use
it to identify this account in WebPlus (in case you have more than
one).
The FTP address of your Web host will be a specific URL
starting with “ftp://” as supplied by your service provider.
You’ll also need a Username and Password as pre-assigned by
the provider. Most likely these will correspond to e-mail login
settings. Be sure to enter the password exactly as given to you,
using correct upper- and lower-case spelling, or the host server
may not recognize it. Check Save password to record the
Previewing, Publishing, and Maintaining the Site
97
password on your computer, if you don’t want to be bothered reentering it with each upload.
Unless directed by your provider, you can leave the Port
number set at “21.”
Leave the Folder box blank unless directed by your provider, or
if you want to publish to a specific subfolder of your root
directory.
Click OK to close Account Details.
Once you’ve set up at least one account, the Publish to Web dialog
appears. This lets you manage multiple accounts and give the go-ahead
to publish files.
Select the account you want to use (if you’ve more than one). You
can also use the dialog at this point to Add another account, Edit a
selected account (for example, enter a new username or folder
location), or Delete an account.
Make sure your Username and Password are correct, then click
Upload.
WebPlus seeks an Internet connection or establishes a new one, and
connects to the remote server. Only pages that have been updated since
the last “publish” are transferred. You’ll see a message when all files
have been successfully copied.
Now you’ll be able to see your page(s) “live” on the Web. Point
your Web browser to the URL that includes the path to the host
server plus the subfolder (if any) to which you published.
Congratulate yourself!
98
Previewing, Publishing, and Maintaining the Site
Maintaining your site
Once you’ve published your site to the World Wide Web (see the
previous section), you’ll need to maintain the pages on your site by
updating content periodically: adding or changing text, images, and
links, then republishing one or more pages. Making the content changes
is easy enough, as all the originals are right there in your site!
When you republish pages into the same folder, duplicate .HTML file
names are always overwritten. Nevertheless, over time you may find
that unused files have proliferated, and you’ll need to do some
housekeeping.
Within local folders, one method is to sort your Explorer or My
Computer window contents by date, then use the “Modified” attribute
to determine which files to keep (i.e., the set most recently published).
For thorough cleanup, periodically publish the whole site to a new
folder and delete the old one.
To perform “housekeeping” tasks like file/folder deletion and renaming
on your published Web site, you can use the WebPlus Site
Maintenance feature. Choose Publish Site from the File menu and
select Maintain Web Site... from the submenu. The Specify Account
Details dialog appears. Select the FTP account and confirm the details
(as when publishing the site), and click OK. Once the connection is
made, the Maintain Web Site window appears.
Previewing, Publishing, and Maintaining the Site
99
In the window, you can use standard Windows Explorer conventions to
perform maintenance tasks. Click on the column headers to change the
current sort, or drag to change the column width. The top row of
buttons lets you view up one level, create a new folder, delete a
selected item, or choose the view setting. To rename a file or folder,
click its name twice and then type, or right-click it and choose
Rename. You can Ctrl-click to select multiple files or Shift-click to
select a range of files. Click the top-row Delete button or right-click an
item and choose Delete. To move one or more selected files, drag them
into the destination folder.
When you’re done, click the window’s Close button to terminate the
FTP connection and return to WebPlus.
Design tips
The question of how frequently to update gets to the heart of “site
maintenance.” Having spent days or weeks designing and then
publishing an attractive site with intuitive navigation and palatable
content, you’ve only just begun. The cycle is completed when visitors
start arriving, and their feedback is critical. Be direct about asking for
comments, and make sure you’ve included an e-mail return link.
Challenge your users to respond! Give them some specific choices to
make (“Would you rather see A, B, or C on this page?”). Let them feel
they’re contributing. For you, there will be an enormous difference
between operating in a void and receiving even one or two responses.
Think of your site as a newsletter with site deadlines. As a rule of
thumb, don’t let more than two weeks go by without making visible
changes. The changes don’t have to be dramatic; the main thing is to
reinforce the perception that your site is dynamic, not static. The Home
page should change most often: add new links, or replace old graphics
with new ones. Add a new page or two, expanding the original sections.
(Be sure to post notice of the NEW! features on the Home page.)
Revise the design of any pages that aren’t working the way you
expected.
As a rule, keep the background and section organization intact so as not
to confuse repeat visitors. Sections that began as a single page will
require a sectional main page as soon as a few new pages have been
added. If you’ve got a navigation bar with a button already linked to the
original page, turn that target page into the main page to keep the link
intact. It’s usually easier to migrate content to a new page than to
rewire existing links. (You can see the content, but you can’t easily see
the links.)
100
Previewing, Publishing, and Maintaining the Site
Finally, feel free to break the above rules and overhaul your site if it
becomes clear your users are getting lost or frustrated, or if you’ve
discovered a better way to organize your content. In this fledgling
medium, it’s not at all uncommon for sites to undergo metamorphosis.
On the World Wide Web, change is a constant—and now, you’re part
of it.
For more help on publishing-related tasks...
Before publishing your actual Web site, you’ll probably want to review
the WebPlus proofing options mentioned above, and learn about adding
search engine descriptors. Or you may want details on publishing to an
alternate Web server.
?
For help on...
Choose from the
Help menu...
Then...
Printing
Previewing
Publishing
Maintaining
Contents list
See topics in section “How to
Print, Preview, and Publish to
the Web”
Using proofing tools
Index
Select from “proofing tools”
Adding search engine
descriptors
Index
Select “search engines”
Gathering WWW
server information
Index
Select “publishing Web sites,
to World Wide Web” and
consult note on “Gathering
server information”
Where should I go from here?
The answer should be self-evident: Get straight back to work with
WebPlus! Your own experience will be your best teacher. We’re proud
of WebPlus, and hope you enjoy using it to develop a Web site you can
be proud of, too.
Thanks for joining the Serif product family... and here’s hoping we see
you online soon!
Index
2D and 3D effects, 65
A
alternate text, 42
Anchor Manager, 88
anchors, 81
animations, 67
anti-aliasing, 70
artistic text, 47, 51, 67, 88
Attributes tab, 51, 61
B
Background color, 64
browse sequence, 85, 88
browsers, 13
C
caps (line ends), 61
child pages, 30
Clipboard, 71
color, 61
color palettes, 72
color schemes, 20, 52, 64
contrast, 58
Convert to Picture, 59
copyright notice, 41
Crop to Shape command, 63
Crop tool, 63
Curve Creation toolbar, 60
Curve toolbar, 60
Curved Line tool, 59
D
design
page layout, 39
pre-planning, 27
site structure and navigation, 29
tips, 53, 69, 87, 99
dithering, 72
dot grid, 63
drop shadow effect, 65
E
editing text, 49
effects, 65
F
feathering, 66
fill property, 61
filter effects, 65
Fit Hotspot to Shape command, 84
Fit Text to Curve command, 67
Followed Hyperlink color, 53
Frame tool, 48
frames, 47
Freehand Line tool, 59
FTP, 96
G
GIF, 69, 71, 74, 88
gradient fill, 51
grouping objects, 62
guides, 63
H
Help on Help, 16
HintLine, 18
Home page, 13, 42
hotspots, 69, 83
HTML, inserting code, 86
hypergraphics, 83, 88
Hyperlink color, 53
Hyperlink Manager, 88
hyperlinks, 69, 81
hypertext, 87
I
images. See pictures
importing
pictures, 71
text, 50
installation, 10
Instant 3D, 66
J
Java, inserting applets, 87
joins (line corners), 61
JPEG, 71
L
Layout Checker Wizard, 93
layout grid, 63
line (outline) property, 51, 61
lines, drawing, 60
Link button (text frames), 48
links. See hyperlinks
M
maintaining Web sites, 98
marquees, animated, 67
master pages, 35, 37
mesh warping, 66
N
navigation
bar, 31, 32, 33, 85, 99
browse sequence, 85, 88
concept, 33
elements, 20, 33, 85, 89
site structure, 29
O
object styles, 21
offsite links, 38
outline (line) property, 51, 61
parent and child, 30
rearranging, 34, 37
safe area, 40
width, 41
parent pages, 30
path text, 51
Picture toolbar, 74
pictures
alternate text, 42
anti-aliasing, 70
brightness and contrast, 58
color palettes, 72
Convert to Picture, 59
dithering, 72
GIF format, 69, 71, 74, 88
hotspots, 83
importing, 71
JPEG format, 71
Picture Effects, 59
Picture toolbar, 58
PNG format, 71
recoloring, 59
rollover graphics, 84
size, 58
title text, 42
Web Export Manager, 42, 71
Web-safe palette, 73
PNG, 71
Pointer tool, 47, 57, 60, 61, 84
pre-planning, 27
previewing pages and sites, 17, 82, 93
project file, 13, 93
Proof Reader Wizard, 93
Publish Site to Disk Folder command,
74, 95
Publish Site to Web command, 96
publishing Web sites, 14, 95, 96
Q
QuickShapes, 61, 88
P
Page Locator, 19, 36, 82
pages
adding and deleting, 37
height, 41
Home page, 13, 42
layout and design, 39
master page, 35, 37
R
Registration Wizard, 9
Revert command, 22
rollover graphics, 84
Rotate tool, 63
ruler guides, 63
S
safe area, 40
Scheme Manager, 64
section/level model, 29
shadow effect, 65
shapes
cropping to, 63
drawing, 60
Site Structure tree, 19, 30, 32, 34, 36,
85
site structure, concept, 29
sites
Home Page, 13, 42
maintaining, 98
pre-planning, 27
publishing, 14, 95, 96
Site Properties, 58
structural design, 29
title, 40
size, 58
Size and Resolution, 74
snapping, 63
sound clips, 68, 75
Spelling Checker Wizard, 49, 93
starting WebPlus, 15
Startup Wizard, 15
Straight Line tool, 59
Studio
Attributes tab, 51, 61
customizing tabs, 22
Object Styles tab, 66
overview, 19
system requirements, 9
T
tables, 47, 52
templates, 13, 16
text
artistic text, 47, 51, 67, 88
editing, 49
importing, 50
Insert Date or Time, 40
on a path, 51
tables, 47, 52
text frames, 47
Text Manager, 93
theme graphics, 20, 33, 49, 84, 85
Thesaurus, 93
title (of site), 40
title text (pictures), 42
toolbars
customizing, 22
tools
Artistic Text, 51, 67
Crop, 63
Curved Line, 59
Frame, 48
Freehand Line, 59
Insert Table, 52
Mesh Warp, 66
Pointer, 47, 57, 60, 61, 84
QuickShape, 61
Rotate, 63
Straight Line, 59
Transparency, 62
transparency, 62
V
video clips, 68, 75
view options, 22
warping, 66
W
Web Export Manager, 42, 71
Web templates, 13, 16
Web-safe palette, 73
Word Count, 49
World Wide Web, 13
WritePlus, 49