Handleiding Serif WebPlus 10 (pagina 211 van 240) (Engels)

542723

211

Verklein

Vergroot

Pagina terug

1/240

Pagina verder

How to Contact Us

Our main office (UK, Europe):

The Software Centre

PO Box 2000, Nottingham, NG11 7GW, UK

Main (0115) 914 2000

Registration (UK only) (0800) 376 1989

Sales (UK only) (0800) 376 7070

Technical Support (UK only) (0845) 345 6770

Customer Service (UK only) (0845) 345 6770

Customer Service/

Technical Support (International) +44 115 914 9090

General Fax (0115) 914 2020

Technical Support email support@serif.co.uk

American office (USA, Canada):

The Software Center

13 Columbia Drive, Suite 5, Amherst, NH 03031

Main (603) 889-8650

Registration (800) 794-6876

Sales (800) 55-SERIF or 557-3743

Technical Support (603) 886-6642

Customer Service (800) 489-6720

General Fax (603) 889-1127

Technical Support email support@serif.com

Online

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

Serif newsgroups news://news.serif.com

International

Please contact your local distributor/dealer. For further details please contact

us at one of our phone numbers above.

Comments or other feedback

We want to hear from you! Please email feedback@serif.com with your ideas

and comments, or use the Serif Web forums!

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

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

Portions graphics import/export technology © AccuSoft Corp. & Eastman Kodak Company &

LEAD Technologies, Inc.

reserved.

Andrei Stcherbatchenko, Ferdinand Prantl

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.

Contents

1. Welcome 1

What's New in WebPlus 10..........................................................3

About this User Guide................................................................12

Installation..................................................................................14

2. Getting Started 17

Understanding Web sites...........................................................19

Startup Wizard ...........................................................................22

Creating a Web site using a template........................................23

Opening an existing Web site .................................................... 23

Starting a Web site from scratch................................................25

Working with more than one site................................................25

Saving your WebPlus project.....................................................26

Using templates .........................................................................26

Closing WebPlus........................................................................ 27

3. Developing Sites and Pages 29

Understanding site structure and navigation .............................31

Understanding pages and master pages...................................34

Viewing Pages ...........................................................................35

Adding, removing, and rearranging pages.................................38

Working in frames......................................................................42

Using layout aids........................................................................44

Incorporating theme graphics ....................................................49

Using the Gallery .......................................................................52

Setting page and site properties................................................55

Using File Manager....................................................................61

Adding search engine descriptors..............................................62

Using WebSafe Fonts Manager.................................................63

Promotion via email ...................................................................65

Updating and saving defaults.....................................................65

4. Working with Text 67

Importing text from a file ............................................................69

Understanding text frames......................................................... 70

Using artistic text........................................................................80

Contents

Editing text on the page .............................................................81

Setting text properties ................................................................84

Using text styles.........................................................................86

Adjusting letter spacing..............................................................89

Inserting a symbol......................................................................90

Inserting user details..................................................................91

5. Working with Tables 93

Creating text-based tables .........................................................95

Manipulating tables ....................................................................98

Formatting numbers.................................................................102

Inserting formulas.....................................................................104

Inserting a calendar..................................................................105

6. Drawing Lines and Shapes 107

Drawing lines............................................................................109

Drawing shapes .......................................................................112

7. Working with Colour and Transparency 115

Applying solid colours ..............................................................117

Using colour schemes..............................................................118

Setting transparency ................................................................121

8. Images, Animation, and Multimedia 125

Importing images......................................................................127

Setting picture export options ..................................................129

Applying image adjustments ....................................................133

Importing TWAIN images.........................................................136

Adding animation .....................................................................136

Adding sound and video...........................................................139

Using the Photo Gallery ...........................................................141

Linking remote images.............................................................146

Contents

9. Hyperlinks and Interactivity 147

Adding hyperlinks and anchors................................................149

Adding hotspots to a page.......................................................151

Adding rollovers .......................................................................153

Rollover options .......................................................................153

Adding navigation elements.....................................................157

Adding Java applets.................................................................160

10. WebPlus Advanced 163

Creating HTML pages..............................................................165

Attaching HTML code ..............................................................166

Forms.......................................................................................172

Using Smart Objects................................................................189

RSS feeds................................................................................195

E-Commerce............................................................................199

11. Previewing and Web Publishing 207

Previewing your Web site ........................................................209

Publishing the site to a local folder ..........................................210

Publishing to the World Wide Web ..........................................211

Maintaining your Web site........................................................214

12. Index 217

Contents

Welcome

2 | Welcome

Welcome | 3

Welcome to WebPlus 10.0 from Serif—still the easiest way ever to get your

business, organization, or household on the World Wide Web!

Whether you're a new WebPlus user, or have upgraded from a previous

edition, you're sure to appreciate the range of powerful features we've

included. As always, if you have comments or suggestions—or samples of the

work you create with WebPlus—we'd like to hear from you.

And don't forget to register your new copy, using the Serif Registration

Wizard. That way, we can keep you informed of new developments and future

upgrades.

What's New in WebPlus 10...

The focus in WebPlus 10 is very much on opening up WebPlus to allow it to

be used as a platform for developing dynamic web pages—making modern

fast-moving content packed full of interest! Advanced web users gain by

being able to edit HTML source code directly. Let's look at the new WebPlus

10 features in turn.

• E-Commerce—Sell, Sell, Sell! (p. 199)

WebPlus makes the process of placing items for sale on your web site

quick and easy with its built-in support for E-Commerce shopping cart

providers (e.g., PayPal)! Simply adding E-Commerce Forms, E-

Commerce Buttons, or even a hyperlink from any WebPlus object (text,

pictures or shapes) will access your chosen shopping cart. Buy Now, Add

to Shopping Cart, Donation, and Subscription forms will get money

moving with buying options and form validation thrown in! Sign up to

shopping carts directly or adopt existing accounts.

• Web-ready Forms for gathering content (p. 172)

Apply forms to your web pages—use a WebForm Wizard to adopt ready-

to-go standard forms for contact details, user feedback/comments,

canvassing opinions, or uploading documents (e.g., CVs) or pictures.

Use Standard Form Objects as building blocks to slash form design

time! Submit form data via Web Resources, Serif's free form-to-email

transit gateway (data goes straight to your email on submission) or subject

data to local/remote scripting. Control tab order for improved form

navigation.

• Send Current Page as Email (p. 65)

Create fantastic looking HTML email with WebPlus's outstanding layout

capabilities. Send your page design as an advertising email link, use for

web site launches, or promote you products and services!

4 | Welcome

• Serif Web Resources for FREE! (p. 189)

Add rich dynamic content using Smart Objects such as blogs, page

counters, polls, and more, to make your web site a truly interactive

experience. Serif Web resources also allows you to manage your blogs

from anywhere in the world—simply log on to ... Serif Web Resources.

• Photo Gallery (p. 141)

Run a photo-rich web site using the WebPlus Photo Gallery. Share

online albums of family, special occasions, or personal photo collections.

Various thumbnailed gallery types are provided (in thumbnail grid, strips

or bars) with click-to-view image control—each type is fully navigable

and, or course, good on the eye. Decorative frames, shadows, glows,

caption support, custom filter effects, and image adjustments

complement any Photo Gallery. All the common photo formats are

supported, as is the automatic rotation of digital-camera photos.

• Great Creative Content!

Webplus comes with a fantastic range of pre-built samples, templates

and gallery items to fast track your way to impressive web sites. Take

advantage of the dynamic Flash™ banners incorporated in templates to

give that cutting edge look. Easily customize them with WebPlus's

extensive support for adding your own content.

• RSS—News and Information Feeds on your page (p. 195)

Keep your web visitors up to date with the latest news from your

favourite websites (BBC News, Reuters, FTSE, NASDAQ) with the RSS

Reader Tool. Alternatively, be a news anchor yourself by creating your

own RSS feed directly on your page—the RSS Feed Tool sets up feeds,

headlines, summaries and URL links.

•

et your web site noticed in your web visitor's favourite

•

view page-in-page with multiple frames in the same browser window.

HTML-Compatible Frames and Tables (p. 70 and 95)

Design frames and tables based on HTML! Take advantage of HTML's

heading tags to g

search engines.

Split your page into Frames! (p.

42)

Scrolling frame support is now brought to your WebPlus project with th

Framed Document Tool. Add a framed menu or navigation frame or

Welcome | 5

• Attach code to objects—add HTML and script! (p. 166)

Apply HTML code to objects, table cells, HTML fragments and

complete pages—apply scripts (with embedded or linked supporting files)

to increase user interaction. Insert tokens as dynamic placeholders to

include dates, colours, page titles, file names, etc. Auto-generate HTML

IDs for any object to allow JavaScript manipulation. Interested in getting

down to HTML basics? Develop raw HTML pages, all navigable via

WebPlus's Site Structure.

• Enhanced Import HTML (p. 24)

Now Import Web pages with accompanying meta data, server-side

script, JavaScript, hotspots, and forms!

• Manage by file and folder structure! (p. 61)

Use File Manager to manage your web site. View underlying folder

structures, create your own folders, add different file types and rename

from within WebPlus.

• Play and Manipulate Flash Files (p. 138)

WebPlus gives you the ability to see your flash animations and play them

within the design view. We have also provided professionally designed

flash banners which you can customize.

•

s to edit and save images and

impressive synergy.

•

eeding up the design process

while making the user experience easier.

Onboard Image adjustments (p. 133)

Benefit from "on-board" image adjustments for quick colour correction

of imported images and objects converted to pictures—pick from Au

Levels, Auto Contrast, Brightness/Contrast, Channel Mixer, Colour

Balance, Curves, and many more. Commonly used special effects such

Diffuse Glow, Dust and Scratch Remover, Shadows/Highlights, and

various blurs make up the set of adjustments, which can be applied

combination. You can now eliminate the dreaded red eye effect on

subjects in your photos with the new Red Eye Tool with a single click.

If you want to do even more, use the handy Edit in PhotoPlus option

(version 10 or above) from within WebPlu

PhotoPlus files with

Context Toolbars

WebPlus now supports context toolbars which host tool options and

settings that dynamically change according to the currently selected

object or tool used in your drawing. Only the necessary tool settings and

options are at hand for edit or reference, sp

6 | Welcome

• New User Interface

WebPlus has undergone major rework to ensure all the content you need

is always at your fingertips. A whole series of dockable Studio tabs now

replace the Studio toolbar and ChangeBar available in previous WebPlus

versions. These provide single-click access to commonly used settings

such as Line, Opacity, and Colour. More precise control is also possible

when aligning objects (Align tab), formatting text (Character tab) and

positioning objects (Transform tab). A Swatches tab hosts a myriad of

palette-based colour swatches for solid, gradient and bitmap fills and line

colouration—you can even add, view, edit or delete colours you have

been using in your web site from within the Publication palette. The

existing Site tab has been revitalized with an optional preview/layout

mode.

Every tab can be docked/undocked, grouped with other tabs, resized in

any direction or shown/hidden. You can also create different

configurations of these tabs and save them as separate workspaces for

instant recall whenever you wish. Collapse tabs in a specific order

according to usage.

• Enhanced FTP Upload! (p. 211)

New FTP features include uploading your WebPlus project to safeguard

against loss. Manually control which files to upload during more versatile

incremental updates. Fancy a fresh start? Now delete the entire site in one

operation.

• Font Control (p. 63)

Use WebSafe Fonts Manager to standardize fonts between your web site

and your target audiences' computers. Define any font as WebSafe or

force rasterization. Planning to use a third-party WebPlus project? Avoid

problems with missing fonts by using the Resource Manager's font

substitution capabilities.

Welcome | 7

• ..and some very useful additions you've been asking for!

Master Page objects now Attach to Bottom to Page when expanding a

web page's height. Link to remote Internet-hosted pictures to build-up

your page content quickly. Swap your currently placed image between

different format quickly and easily—GIF to PNG (or JPG), or any

combination (also alter bit depth, transparency and/or size/resolution. A

new Colour tab offers colour tinting and different colour display modes.

New page properties include extra settings for more powerful page

retrieval in search engines (e.g., use of language codes), Page Redirect,

Estimate Download Time, and Page Transitions—pick from spirals,

circles, blinds, wipe effects, and many more! Use Paste In Place and

Paste Format as new object editing options. Navigation bars are now

customizable for added flexibility. Auto-save on publish and preview (or

by time interval), and product Auto-update are new options. Java

applets loaded direct from JAR or ZIP (no extraction needed). A new

active hyperlinks scheme is added. Output your site with different

HTML encoding: UTF-8, windows-1252, or ISO 8859-1. Include your

web site's icon (e.g., a company logo) in your visitor's browser favourites.

Import Serif PhotoPlus .SPP files and Photoshop .PSD files (with

clipped paths). And last but not least… enhancements to Find &

Replace, Guide lines, Animated Marquees, Master Page Manager and

Web Export Options (image format conversion on export, JPG quality,

resampling, and optimization) round off the exciting WebPlus 10!

Plus these established WebPlus features..

• Navigation by Page and Site Structure

The Site Structure tree not only serves as a control centre 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! Browse pages quickly from the HintLine toolbar.

Easily customize a host of properties for individual pages: Length,

background colour, centring, file name, title, and more. Import HTML

Web pages, even entire sites.

8 | Welcome

• Importing and Editing

For text, you can import, paste, export in Unicode format... design with

foreign-language or exotic/symbol fonts and characters. Use drag-and-

drop editing in WritePlus. Clear formatting (revert to plain style) with a

single keystroke.

For pictures, import images at 96dpi screen resolution. Adjust brightness

and contrast, size and resolution, apply colouration and view properties

with the Picture context toolbar. Add any workspace colour to the palette

with a single click. Import Flash (.SWF) animated movies or MP3 audio

files!

• Page Anchors and Hyperlink Improvements

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.

• Theme Graphics for Instant Flair

Choose from an array of ready-made design elements in themed sets, on

a Theme Graphics tab... Swap sets and change the look of your site with a

single click... Customize text, font, colours, and more. Intelligent theme

graphics like navigation bars and Previous/Next buttons are programmed

to reflect your site structure... adapt automatically as you rearrange pages.

Effortlessly establish easy-to-follow pathways throughout your site!

• Animated Marquees

Add life to your Web pages! Custom-design your own varied and

colourful multi-line text messages that scroll across the screen... Add

your own responsive buttons with the multi-layered Rollover graphics

option.

•

ur own Web browser

o a local folder or a remote server.

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 yo

and publish it t

Welcome | 9

• 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.

Functionality

•

lacement,

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.

• Intelligent Colour Schemes

Choose from dozens of preset colour schemes to change the overall

appearance of your Web site with a single click. You can customize the

scheme colours, create brand new schemes, and apply any scheme to a

"from-scratch" site.

• 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!

• On-screen Studio Combines Convenience with

Floatable, dockable Studio tabs provide rapid drag-and-drop access to

commonly-used controls such as fonts, line settings, and the colour table.

Use the Gallery to store your favourite designs for use in any Web site...

with built-in flashes, logos, and lots of other page elements you can

customize to suit your needs!

Professional Layout and Text Tools

Intelligent text fitting. Movable rulers and guides. Precision p

10 | Welcome

• Artistic Text Tool

Complementing traditional text in frames, just click and type anywhere

on the page, format with the customary tools, then apply colourful lines

and fills directly at the character level. Scale it, rotate it, flip it... discover

a host of new possibilities! Path text tools let you 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!

• 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 pictures 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.

•

ines using dots and dashes... vary the join style of

connected lines.

Powerful Drawing Options

An arsenal of drawing tools is at your command... Sketch freehand lines

and curves. Extend existing lines with ease. Apply line styles to all kinds

of shapes—even add line endings like arrowheads and diamonds. Use the

Curve context toolbar to fine-tune the contours of any line, closed shape,

or cropping edge. Sketch using calligraphic lines with an adjustable p

angle. Add rounded corners (caps) when and where you need them.

Customize your l

Welcome | 11

• Intelligent Bézier Curves

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.

• Gradient and Bitmap Fills, Transparencies

For sophisticated illustrations and impressive typographic effects, select

from a wide variety of Linear, Radial, and Conical fills and transparencies

...and a multi-faceted Studio gallery of picture-based effects. 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!

• Astounding 3D Lighting and Surface Effects

Beyond the above 2D effects, 3D Filter Effects 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.... The feathering filter effect adds a soft or

blurry edge to any object. Great for blends, montages, vignetted photo

borders, and much more.

•

ntrol panel to vary extrusion,

hting, texture, and more.

•

... or view external previews using any browser

tem

•

and context-sensitive cursors make WebPlus as friendly as a puppy!

Dramatic Dimensionality

Why settle for only two dimensions? Instant 3D adds realistic depth to

ordinary objects and text. Use one master co

rotation, bevel, lig

Web Preview

Use any window for an internal Internet Explorer preview of your site

at configurable page sizes

installed on your sys

Total Ease-of-Use

Drag and drop objects from other applications. AutoScroll automatically

adjusts your view as you move or resize. Right-click menus, HintLine

12 | Welcome

About this User Guide

This User Guide focuses on information essential to the design, publishing and

management of your web site. As a feature-rich product, WebPlus supports

many more features which can’t all be included in this User Guide. To assist,

the following table lists some other books and topics exclusively available

within the WebPlus Online Help. Scan the help’s Contents for these books

and topics for more information!

Online Help books Topics covered in book...

How to Enhance Ease of

Use

Customizing WebPlus toolbars and Studio

tabs

Setting WebPlus options

Using shortcuts

Using PageHints

How to Edit Objects on a

Page

Selecting an object

Selecting multiple objects

Copying, pasting, and replicating objects

Moving objects

Resizing objects

Rotating an object

Flipping an object

Cropping an object

Applying mesh warp envelopes

Locking an object’s size or position

How to Arrange Objects

Ordering objects

Aligning objects

Converting an object to a picture

Exporting as picture

Creating groups

Welcome | 13

How to Work with

Colour, Fills and

Transparency

Working with gradient and bitmap fills

Managing colours and palettes

Changing or copying vector image colours

Working with transparency

How to Work with Lines,

Shapes, and Effects

Setting line properties

Applying shadows, glow, bevel, and emboss

Using 3D filter effects

Understanding blend modes

Feathering

Adding dimensionality (Instant 3D)

Adding borders

Using object styles

How to Work with Text

Editing Story Text with WritePlus

Misc Books

Basic Printing

Registration, Upgrades, and Support

If you see the Registration Wizard when you launch WebPlus, please take a

moment to complete the registration process. Follow the simple on-screen

instructions and you'll be supplied a personalized registration number in

return. If you need technical support please contact us, we aim to provide fast,

friendly service and knowledgeable help. There's also a wide range of support

information available 24 hours a day on our website at

www.serif.com.

14 | Welcome

Installation

System Requirements

If you need help installing Windows, or setting up peripherals, see Windows

documentation and help.

Minimum:

• Pentium PC with CD-ROM drive and mouse (or other Microsoft-

compatible pointing device)

• Microsoft Windows® 98 SE, Me, 2000, or XP operating system

• 64MB RAM minimum

• 241MB (recommended install) free hard disk space

• lay or higher

ces and memory are required when editing large or

uments.

• tion required for Publishing to Web and

esources

Fir

AutoRun does not

D, install it now following

the same procedure you used for the Program CD.

SVGA (800x600 resolution, 16-bit colour) disp

• Internet Explorer 5.5 (6.0 for Windows 2000)

Additional disk resour

complex doc

Optional:

• Windows-compatible printer

• TWAIN-compatible scanner and/or digital camera

Internet account and connec

accessing online r

st-time Install

To install WebPlus 10, simply insert the Program CD-ROM into your CD-

ROM drive. The AutoRun feature automatically starts the Setup process and

all you need to do is answer the on-screen questions. If the

start the install, use the manual install instructions below.

If you’ve also obtained the WebPlus 10 Resource C

Welcome | 15

Manual Install/Re-install

To re-install the software or to change any part of the installation at a later

date, select Control Panel from the Windows Start menu (via the Settings

item for pre-XP systems) and then double-click the Add/Remove Programs

icon. Make sure the correct CD-ROM is inserted into your CD-ROM drive,

choose Serif WebPlus 10, and click the Install… button. You’ll have the

choice of removing or adding components, re-installing components, or

removing all components.

16 | Welcome

Getting Started

18 | Getting Started

Getting Started | 19

Understanding Web sites

This chapter and those that follow provide you with the details you'll need to

know to create a successful site on the World Wide Web using WebPlus.

What’s involved in creating a Web site?

It can be as simple as choosing and customizing a Web template... or you can

start from scratch—it's up to you. Either way, you'll appreciate the ease with

which WebPlus lets you revise text and graphics, and adjust the design of each

page. WebPlus gives you the freedom to lay out page elements in any

composition that suits you. It's a bit like putting together a newsletter—so if

you're already comfortable with the basics of DTP, you'll find it easy going. If

you're just beginning, you can learn to use WebPlus tools as you go.

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.

What exactly is a Web site?

The Internet is a global network that interconnects computers around the

world. The World Wide Web began as a way of using the Internet to access

information stored in a file format known as HTML, or Hypertext Markup

Language. Broadly defined, a Web site is a collection of (mostly) HTML files

stored on a file server that someone with a Web browser can get to. Actually,

Web sites don't depend on the Internet at all—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.

The HTML format is a way of describing the layout of a page. An HTML file

uses plain text with various embedded codes to describe a page that somebody

has designed, consisting of text and clickable hypertext links. Besides HTML

files, a Web site generally includes other files (pictures, for example) that the

designer has seen fit to incorporate. A Web browser such as Microsoft Internet

Explorer or Netscape Navigator is a program that can read an HTML file and

display the page (one hopes) the way the designer intended it to look.

Typically, a Web site has a single Home Page using a standard file name like

INDEX.HTML. The Home Page is the first page a visitor sees. It usually will

contain links to other pages on the site, which in turn have links to others. To

the person using a Web browser to access the site, the information appears

seamlessly linked—navigable with a click of the mouse.

WebPlus takes the pages you've laid out and converts them to HTML.

20 | Getting Started

What will I need to preview or publish my Web site?

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.

Publishing a site with WebPlus is a one-step operation that both: (1) converts

your project to separate files for the Web, and (2) copies the Web files to a

location you specify, either to a local folder or to a World Wide Web host.

• To publish to a local folder, you don't even need a connection to the

Internet.

• 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. This usually means opening an account with

an online service provider: either a large entity such as America Online or

a specialized Internet service provider (ISP) . The big subscription

networks typically allocate to each user several megabytes of server space

for a "personal web site," and many plans are available from smaller ISPs.

Once you've set up your account and can connect your computer to the

host, publishing to the Web is simply a matter of transferring your files.

The Publish to Web feature included with WebPlus takes care of this.

What about HTML?

One advantage WebPlus has over a dedicated Web-page creation program is

that you can take your newsletter layout, or a print ad with a wild mix of

multicolour graphics and fancy typography, and publish them intact to the

World Wide Web. In fact, your page can look as great on the Web as it did on

your screen!

While you don't have to know HTML (the description language for Web

pages) to use WebPlus, you should understand that:

1. The time it takes a visitor to load your page is directly related to the size

of the HTML file plus

any accompanying graphic or multimedia files.

These other files take up considerably more space—and slow down

loading time.

2. Those parts of your layout that WebPlus cannot translate to HTML will

be output as graphics. The more of your layout that WebPlus can translate

into HTML, the better.

If you're used to working in a Desktop Publishing environment, you may have

to scale back your typographic expectations somewhat when designing for the

Web. However, WebPlus gives you a lot of design latitude. In laying out text,

Getting Started | 21

you can specify any point size, use variable leading and letter spacing, and

even justify paragraphs! The result is a nearly WYSIWYG match between

what you see on-screen in WebPlus and what ends up in the Web browser.

Because HTML positions elements using absolute co-ordinates, overlapping

elements are allowed, and file sizes are reduced.

In theory, you can use any font you like. However, if a specified font isn’t

present on a visitor’s computer, an available font will be substituted, with

unpredictable results for your beautifully designed layout! As a rule, stick with

the WebSafe fonts available within WebPlus. They are denoted in the fonts

list with a green tick and all other fonts have a blue question mark.

The WebPlus Layout Checker Wizard will warn you if your site uses non-

standard fonts or character properties, text that must be output as a graphic, or

tags

es or tables:

nts

puters (during browsing).

e standard list of WebSafe

your target audience.

ont list on the Text context

nts

ML Heading tags for prioritized searching

Whether you're working with an HTM

know that any HTML assigned with the heading tags H1, H2, H3, and H4

rioritized in Internet search engines ahead of tags which are not heading

(e.g., <p> paragraph tags).

To assign a heading tag to text in HTML fram

1. Select text in the frame or table.

2. From the Format menu, go to the HTML tag option and choose a

heading tag (H1 is the highest priority and equates to Heading 1; H6 is the

lowest priority). The tag is assigned to the text.

ing WebSafe Fonts Manager

The WebSafe Fonts Manager controls the system-wide list of WebSafe fo

available to WebPlus, ensuring that a web visitor will see your web site's te

as intended. WebSafe fonts in WebPlus are a specially selected and

configurable subset of fonts which are deemed to offer the best selection of

fonts to maximize the chances that fonts match between your web site (during

design) and your web visitors' com

Generally speaking, it is advisable to keep to th

fonts unless you can be sure of font usage amongst

These fonts are always grouped at the top of the F

toolbar (click any frame, table, or artistic text to display). All WebSafe fo

are shown with a green tick, e.g.

A WebSafe Fonts dialog lets you decide if installed fonts are treated as

WebSafe (the font is assumed to be installed on the web visitor's computer),

rasterized on export (i.e. converted to bitmap), or if you're undecided, checked

in the Layout Checker prior to publishing. If you do nothing (or forget to

check), text using fonts not deemed WebSafe will be rasterized by default.

64 | Developing Sites and Pages

Changing WebSafe export options

In a more controlled environment such as a corporate Intranet you may be able

to take the opportunity to increase the list of fonts which are considered to be

WebSafe. Knowing the fonts used by your web visitor's (they may be a

common set installed from a central server), you can afford to relax the subset

of WebSafe fonts used. At a later date, it's probable that the WebSafe fonts

will need to be managed.

To change an installed font to be WebSafe:

1. Select WebSafe Fonts Manager... from the Tools menu.

2. In the dialog, select a font labelled with a

(a font for checking in

Layout Checker) or

(a rasterized font) from the list.

3. In the WebSafe Export Options drop-down menu, select "Assume font

is installed". This makes the selected font WebSafe (it will now show at

the top of the Fonts list).

4. Click OK.

It is also possible to do the reverse and change a WebSafe font to rasterize on

export, or be checked in Layout checker (in fact any combination will work).

Check the fonts label in the dialog's Installed Fonts list and choose an

appropriate export option.

Here's an example of three different fonts each labelled with different

respective export options, i.e. "Assume font is installed", "Resolve in layout

checker", and "Rasterize font on export".

Developing Sites and Pages | 65

Promotion via email

With a powerful design environment at your fingertips you might like to

produce some stylish sales flyers, datasheets, or other information in relation

to your web site or even completely independent of it. WebPlus’s object

creation capabilities (lines, QuickShapes, and text) coupled with its powerful

colour and transparency control means that you can design a stylish page

easily and then dispatch it via email.

• Design your page and select Send Current Page as Email from the File

menu.

Updating and saving defaults

Object defaults are the stored property settings WebPlus applies to newly

created objects, e.g. text, graphics, and frames. When you create text in your

site, it will have default properties for font, size, colour, alignment, etc. New

graphics will have default properties for line and fill colour, shade, pattern,

etc. New frames will have default properties for margins, columns, etc. You

can easily change the defaults for any type of object.

Default settings are always local—that is, any changed defaults apply to the

current site and are automatically saved with it, so they're in effect next time

you open that site. However, at any time you can use the Save Defaults

command to record the current defaults as global settings that will be in effect

for any new site you subsequently create.

To set local defaults for a particular type of object:

1. Create a single sample object and fine-tune its properties as desired—or

use an existing object that already has the right properties. (For graphics,

you can use a line, shape, or rectangle; all share the same set of defaults.)

2. Select the object that's the basis for the new defaults and choose Update

Object Default from the Format menu.

Or, for line and fill colours, including line styles:

1. With no object selected, choose the required line and/or fill colours from

the Colour or Swatches tab (see Applying solid colours on p.

117). Use

the Line tab to set a default line weight, style, and corner shape.

2. Draw your object on the page, which will automatically adopt the newly

defined default colours and styles.

You can also view and change the current default text properties in the Text

Style Palette.

66 | Developing Sites and Pages

To view and change default text properties:

1. Choose Text Style Palette... from the Format menu.

2. Click Default Text, then click Modify... to view current settings.

3. Use the Attributes button to alter character, paragraph, or other

properties.

To save all current defaults as global settings:

1. Choose Save Defaults from the Tools menu.

Click OK to confirm that you want new sites to use the current site's defaults.

Working

with Text

68 | Working with Text

Working with Text | 69

Importing text from a file

Importing text from a word-processor file is the traditional way to create text

content for Desktop Publishing layouts (but you can also create a story using

WritePlus). If you use your current word processor (such as Microsoft Word)

to create the text file for your site, you can import any number of files into one

site. Each file becomes a story consisting of a self-contained section of text

like a single article in a newspaper, which flows in a sequence of linked text

frames.

To import text:

1. Choose Text File... from the Insert menu.

Right-click a frame and choose Text File.... The Open dialog appears.

2. Select the format of the source file to be imported and locate the file

itself. (See below for details on setting the preferred text import format.)

3. Check the "Retain Format" box to retain the source file's formatting

styles. Uncheck the box to discard this information. In either case,

WebPlus will preserve basic character properties like italic, bold, and

underline, and paragraph properties like alignment (left, centre, right,

justified).

4. Check the "Ignore Line Wrapping" box to ignore returns in the source

text—that is, only if the file has been saved with a carriage return at the

end of every line, and you want to strip off these extra returns. Otherwise,

leave the box unchecked.

5. Click OK.

WebPlus will import the designated text into a text frame, either flowing text

into a selected frame or creating a new frame.

Two special options exist to help you fit imported text into a series of frames.

AutoFlow can automatically create text frames and pages until all the text has

been imported; a Registry change is required to activate it. On the other hand,

you can apply AutoFit (which fits text exactly to the available frame area) or

use the frame's AutoFlow button at any time after the text has been imported.

For details, see Fitting text to frames.

For details on changing frame column and margin settings, see Creative

frame setup and layout on p.

74.

70 | Working with Text

Understanding text frames

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 (see p.

80) for standalone text with

special effects, or table text (see Creating text-based tables on p.

95) for

row-and-column displays.

What's a text frame?

A text frame is effectively a mini-page, with:

• Optional preceding and following frames

• Text and optional inline images that flow through the frame (from the

previous frame and on to the next).

The text in a frame is called a story.

• When you move a text frame, its story text moves with it.

• When you resize a text frame, its story text reflows to the new

dimensions.

Frames can be linked so that a single story continues from one frame to

another. But text frames can just as easily stand alone. Thus in any Web site,

you can create text in a single frame, spread a story over several frames,

and/or include many independent frame sequences, e.g.

Working with Text | 71

When you select a frame you'll see its bounding box (see Frame 1 in

example), indicated by a grey border line plus corner and edge handles, and (if

you clicked with the Pointer tool) a blinking insertion point in the frame's text.

In this mode, you can edit the text with the Pointer tool. As in a word

processor, double-clicking selects a word, and triple-clicking selects a

paragraph.

HTML or Creative frames

Two types of frame can be applied to the page—the HTML text frame and the

Creative text frame. These can be compared easily in the following table.

HTML

frames

Creative

frames

Searchable by search engines

 

Script and form insertion for generating

 

dynamic content

Margins and column guides

 

Breaks (column, page, and frame)

 

Resize/move frame

 

Crop frame

 

Rotate frame

 

Frame linking

 

Columns

 

Export as text

 

Copy and paste exported text

 

Apply fill and line colour

 

HTML-compliant Styles

 

Transparency

 

Borders

 

Warp

 

2D/3D Filter Effects

 

Instant 3D

 

72 | Working with Text

If applied, will export frame as a graphic.

Only if rotate, crop, transparency, a border or a filter effect is not applied.

HTML-compliant styles means that you can format text in your HTML frame

using heading styles (tags) from H1, H2, .., to H6. The styles can be assigned

from Text>HTML Tag on the Format menu. An advantage of this is that text

applied with Heading styles are given priority in Internet search engines (H1

tag is the highest priority). See Adding search engine descriptors on p.

for more details.

So how do you tell the difference between an HTML and Creative frame?

Simply, HTML frames will always possess dark blue corner/edge handles

when selected, while a Creative frame's handles will show as grey.

To select only the frame (no insertion point):

• Click the frame's bounding box. When only the frame is selected, you can

move it more easily.

To move a text frame:

• Drag the frame's bounding box.

• Use the or options in the Transform tab.

To resize a text frame:

• In any selection mode, drag a corner or edge handle.

• Use the or options in the Transform tab.

Working with Text | 73

Creating frames

You add frames to a page as you would any other object. You can resize any

frame, but cannot alter its basic shape.

To create a frame:

1. Click either the

HTML Frame Tool or the Creative Frame

Tool button from the Insert flyout on the Standard Objects toolbar (see

HTML or Creative frames on p.

71).

2. Click on the page or pasteboard to create a new frame at a default size or

drag to adjust the frame's dimensions.

You can use the Update Object Default from the Format menu to set

properties for future new frames you create. See Updating and saving

defaults on p.

65.

To delete a frame:

• Select the frame object and press the Delete key. (If there's a selection

point in the text, pressing Delete will remove characters after the cursor.)

• With or without an insertion point, choose Delete Object from the Edit

menu.

Putting text into a frame

You can put text into an HTML or Creative frame in one of several ways. For

HTML frames, text will be converted to compliant HTML code.

1. WritePlus story editor:

• To start WritePlus, right-click on a frame and choose Edit Story

(shortcut Ctrl+E).

Click the

WritePlus button on the Frame context toolbar.

This opens the WebPlus integrated story editor—useful for typing, formatting,

and proofing large amounts of text. If the frame already contains text, it is

automatically loaded into WritePlus for editing. (See Editing text with

WritePlus in WebPlus help.)

2. Importing text:

• Right-click on a frame and choose Text File... (shortcut Ctrl+T) to

import text.

74 | Working with Text

If there's an insertion point in existing text, the new text appears at that point.

If there's a range of text selected, the new text replaces it. If only the frame is

selected, the new text is inserted at the beginning of the story.

If you want to create a simple document with just one story running from page

to page, use the Text File... command with no frame selected. WebPlus

automatically adds frames matching the underlying page layouts you've set up.

The AutoFlow option can add pages as needed, until all your text has been

imported.

3. Typing into the frame:

• Select the Pointer tool, then click for an insertion point to type text

straight into a frame, or edit existing text. (See Editing text on the page

on p.

81.)

4. Pasting via the Clipboard:

• Select the Pointer tool and click for an insertion point in the text, then

press Ctrl+V.

5. Drag and drop:

• Select text (e.g. in a word processor file), then drag it onto the WebPlus

page.

If you drop onto a selected a frame, the text is pasted inline after existing text.

Otherwise, a new frame is created for the text.

When designing and testing your frame layout, use Fill with

Placeholder Text on the Insert menu to quickly populate frames with

text.

Creative frame setup and layout

The frame layout of a Creative frame controls how text will flow in the

frame. The frame can contain multiple columns. When a frame is selected, its

column margins appear as dashed grey guide lines when values for column

blinds and margins are defined (Text Frames must also be switched on in the

View menu).

Note that unlike the page margin and row/column guides, which serve as

layout guides for placing page elements, the frame column guides actually

determine how text flows within each frame. Text won't flow outside the

column guides.

You can drag the column guides or use a dialog to adjust the top and bottom

column blinds and the left and right column margins.

Working with Text | 75

To edit frame properties directly:

• Select the frame, then drag column guide lines to adjust the boundaries of

the column.

The illustration above shows how the cursor changes to show when you're (1)

over the frame's bounding box or (2) over one of its column boundaries. In

(3), the left frame margin has been dragged in slightly. Notice how paragraph

indents are preserved relative to the margin guide.

76 | Working with Text

To edit frame properties using a dialog:

1. Select the Creative frame and click the

Frame Setup button on the

Frame context toolbar.

Choose Frame Setup... from the Format menu's Text option.

2. In the dialog, set the number of columns, gutter (gap), or left/right frame

margins, enter values in the appropriate boxes.

3. To change the column blinds (top and bottom frame margins), click a cell

in the table and enter a new value.

Hint: If the frame has more than one column, you only need to enter

top/bottom values for the first one. Then click Top and/or Bottom to

repeat the entries instantly in the cells below.

Story flow through Creative frames

Stories cannot flow between HTML frames, as they do not support

linking (text can only overflow a single frame).

You can have just one Creative frame on its own, or you can have many

frames. Frames can be connected in linked sequences.

The story associated with a given frame sequence flows through the first

frame on to the next and keeps flowing into frames in the link sequence.

A key difference from a word processor is that WebPlus does not normally

add or remove frames according to the amount of text. The text simply flows

until the text runs out (and some frames are left empty), or the frames run out

(and some text is left over).

If there is still more text to go after filling the last frame, WebPlus

stores it in an invisible overflow area, remembering that it's part of the story

text—the Link button on the last frame of the sequence is displayed. If you

later add more frames or reduce the size of text in a frame, the rest of the story

text is flowed in.

If the text runs out before the last frame, you have some empty frames. These

frames will be filled with text if you add more text to the story, or if you

increase the size of the story text.

WebPlus keeps track of multiple linked frame sequences, and lets you flow

several stories in the same site. The Text Manager (accessed via the Tools

menu) provides an overview of all stories and lets you choose which one you

want to edit.

Working with Text | 77

AutoFlow

When importing text, it's a good idea to take advantage of the AutoFlow

feature, which will automatically create text frames and pages until all the text

has been imported. This way, enough frames are created to display the whole

story. Then you can gauge just how much adjustment will be needed to fit the

story to the available "real estate" in your site. You can make the major

changes first, then proceed to the fine-tuning.

Making text fit the frame

To make your text fit within a frame you can use the AutoFit

button, or incrementally increase or decrease the frame text (with Enlarge

Story Text or Shrink Story Text). All buttons are hosted on the frame's

context toolbar.

Linking Creative frames

When selected, a text frame includes a Link button at the bottom right which

allows you to import text files or control how the frame's story flows to

following frames. The icon inside each frame's Link button denotes the state

of the frame and its story text:

No Overflow

The frame is not linked to a following frame (it's either a standalone

frame or the last frame in a sequence) and the end of the story text

is visible.

Overflow

The frame is not linked (either standalone or last frame) and there is

additional story text in the overflow area.

Continued

The frame is linked to a following frame. The end of the story text

may be visible, or it may flow into the following frame.

Note: The button icon will be red if the final frame of the sequence

is overflowing, or green if there's no overflow.

There are two basic ways to set up a linked sequence of frames:

• You can link a sequence of empty frames, then import the text.

• You can import the text into a single frame, then create and link

additional frames into which the text automatically flows.

78 | Working with Text

When frames are created by the AutoFlow option when importing

text, they are automatically linked in sequence.

To create a link or reorder the links between existing frames, you can use the

Link button or the controls on the Frame context toolbar. Remember to watch

the cursor, which changes to indicate these operations...

To link the selected frame to another frame as the next frame:

• Click the frame's Link button.

Select the frame, then click the

Link Frame button on the Frame

context toolbar.

• Click with the Textflow cursor on the frame to be linked to. Only empty

frames are valid frames to link to.

To unlink the selected frame from the sequence:

• Click the Unlink Frame button on the Frame context toolbar.

Click on the frame's Link button, then click with the Textflow cursor on

the same frame.

Story text remains with the "old" frames. For example, if you detach the

second frame of a three-frame sequence, the story text remains in the first and

third frames, which are now linked into a two-frame story. The detached

frame is always empty.

If you click on a frame's Link button, and then change your mind

about linking or unlinking, press the Esc key or click on a blank area of

the page or pasteboard to cancel.

To navigate from frame to frame:

• Click the Previous Frame or Next Frame button on the Frame

context toolbar.

Working with Text | 79

Graphic properties of frames

Like graphics, all frames have line and fill properties—initially an outline of

zero weight and a clear fill. Although HTML frames cannot possess

transparency, Creative frames can (initially set to None). As with graphics,

you can edit these properties, for example adding a grey or light-coloured fill

as shading behind a frame's text. You can also import images inline with

frame text.

Note that the text inside a frame can take a solid colour, but doesn't have line

and fill properties as such—for fancy line/fill effects with text, you can

employ artistic text (see p.

80).

Controlling overflowing text (HTML frames)

As HTML frames have to comply with HTML standards, they are not

capable of linking stories (as for Creative frames). As a result, a decision has

to be made about what happens in the event of overflowing text. Overflowing

HTML frames are clearly indicated—when selected, they will show an

Overflow button at the bottom right of the frame.

If you see this, you can choose to leave the text Hidden, let it Overflow, or let

all the text be viewable with the help of a scroll bar.

To control overflowing text:

1. Select your overflowing HTML text frame.

2. Right-click on your frame, and go to Format>Overflowing text and

choose:

• Hidden - The frame as it is displayed on your page will be shown in

a browser. Text will continue to be hidden.

• Overflow - The frame will overflow (be extended) to allow all text

within the frame to be shown.

• Scroll bar - A navigation scroll bar is displayed permanently but will

be greyed out if text does not overflow.

• Auto - A navigation scroll bar is displayed only when text overflows

the frame.

in It's always a good idea to preview your HTML frames (via Preview

Window or via your browser)—especially if Overflow is selected.

80 | Working with Text

Using artistic text

Artistic text is standalone text you type directly onto a page. Especially useful

for headlines, pull quotes, and other special-purpose text, it's easily formatted

with the standard text tools but has some artistic advantages over frame text.

For example, you can initially "draw" artistic text at a desired point size, and

drag it to adjust the size later. And unlike the characters in a text frame, an

artistic text object can take different line styles, fills (including gradient and

Bitmap fills), and transparency for stunning pictorial effects. You can even

flip artistic text and it will remain editable!

Here are other similarities and differences between frame text and artistic

text.

• With artistic text, as with frame text, you can vary character and

paragraph properties, apply named text styles, edit text in WritePlus,

access it with the Text Manager, track font usage with the Resource

Manager, embed inline images, apply filter effects, and use proofing

options such as AutoSpell/Spell Checker, Proof Reader, and Thesaurus.

• However, you cannot import text from a file. And because artistic text

doesn't flow or link the way frame text does; the Frame context toolbar's

text-fitting functions aren't applicable.

To create artistic text:

1. Choose the

Artistic Text Tool from the Tools toolbar’s Artistic Text

flyout.

2. Click anywhere on the page for an insertion point using a default point

size, or drag to specify a particular size as shown here.

3. Set initial text properties as needed before typing, using the Text context

toolbar, Format menu, or right-click (choose Text Format>).

4. Type normally to enter text.

Working with Text | 81

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. Solid colours,

gradient/Bitmap fills and transparency can all be applied.

To resize an artistic text object:

• Drag the object's handles to resize it while maintaining the object’s

proportions. To resize freely, hold down the Shift key while dragging.

To edit artistic text:

• Select a range of text by dragging. Double-click to select a word, or

triple-click to select a paragraph.

Now you can type new text, apply character and paragraph formatting, edit the

text in WritePlus, apply proofing options, and so on.

With artistic text, the vertical alignment setting anchors a particular

part of the object—for example, a "top" setting anchors the top line

and forces new text to come in below, while a "bottom" setting

anchors the bottom (most recent) line and pushes previous lines up as

you type new lines.

Please see WebPlus help for details on how to apply and edit artistic text on a

path.

Editing text on the page

You can use the Pointer tool to edit frame text, table text, or artistic text

directly. On the page, you can select and enter text, set paragraph indents and

tab stops, change text properties, apply text styles, and use Find and Replace.

For editing longer stories, and for more advanced options, choose WritePlus.

Selecting and entering text

To edit text on the page:

• Select the Pointer tool, then click or drag in the text frame. A standard

insertion point appears at the click position, or a range of text is selected,

ready for the text to be edited.

82 | Working with Text

Tip: You can double-click to select a word, or triple-click to select a

paragraph.

To start a new paragraph:

• Press Enter.

To start a new line:

• Press Shift+Enter. The line is created within the same paragraph (using a

"line break" or "soft return")

The following two options apply only to frame text. You can use these

shortcuts or choose the items from the Insert>Break submenu.

To flow text to the next column (Column Break):

• Press Ctrl+Enter.

To flow text to the next frame (Frame Break):

• Press Alt+Enter.

To switch between insert mode and overwrite mode:

an click

h and use the Repeat command to apply the same

formatting there.

• Press the Insert key.

To repeat a text action:

• Choose Repeat from the Edit menu, or press Ctrl+Y.

For example, if you've applied new formatting to one paragraph, you c

in another paragrap

Working with Text | 83

Copying, pasting and moving text

You can easily copy frame text and paste into the same or a different text

frame. Text stored on the clipboard can additionally be pasted into a new

frame.

Drag and drop support for frame text allows text to be moved into a different

location within the same frame or a different text frame in your site.

To copy and paste text:

1. Select the text to be copied.

2. Select Copy from the Edit menu. This places the text onto the clipboard.

3. Place an insertion point in a different location in your story or artistic text.

4. Select Paste from the Edit menu.

If you don't place an insertion point, the text can be pasted into a new

text frame directly.

To move text by drag and drop (text frames only):

1. Select the text to be moved.

2. Hover over the selected text and hold your mouse button down. A

cursor is shown.

3. Move the cursor to the location (in the same or different frame) you wish

to place the text—an insertion point should be displayed.

4. Release the mouse button to place your text.

Setting paragraph indents

When a text frame is selected, markers on the horizontal ruler indicate the left

indent, first line indent, and right indent of the current paragraph. You can

adjust the markers to set paragraph indents, or use a dialog.

84 | Working with Text

• The Left indent is set in relation to the frame's left margin.

• The 1st line indent is in relation to the left indent.

• The Right indent is in relation to the frame's right margin.

For details on setting frame margins, see Creative Frame setup and layout

on p.

74.

To set the indents of the current paragraph:

• Drag the appropriate ruler marker(s).

•

ter values for Left, Right, 1st Line, or Hanging indents.

an search text in all stories, or just the

e Edit menu.

out, whether you're working with frame text, table text, or

xt formatting:

2. oolbar to change font, point size, font

paragraph alignment.

Alignment. (You can also select these items from the Format

oint size, width, letter spacing

(tracking), leading, and advance.

To adjust indent settings numerically, choose Text>Paragraph... from

the Format menu (or Text Format>Paragraph... from the right-click

menu). You can en

Find and Replace

The Find and Replace command displays a dialog that lets you search site

text for words or parts of words. You c

currently selected text object or story.

• Choose Find & Replace... from th

Setting text properties

WebPlus gives you a high degree of control over the fine points of

typographic lay

artistic text.

To apply basic te

1. Select the text.

Use buttons on the Text context t

style, and

Right-click the text and choose Text Format, then select from the

submenu: Character..., Paragraph..., Bullets and Numbering..., or

Vertical

Use the Character tab to adjust p

Working with Text | 85

By default, text on your published Web pages is set to vary in size depending

on the visitor’s browser setting. If you wish, you can override this as a global

option in WebPlus, so that text will appear in the browser at exactly the same

point sizes used in your layouts. To check or change the setting, choose Site

Properties... from the File menu. On the Options tab, check Force absolute

text size to override the variable-text default.

Default text properties

Default text properties are the settings used for text you type into any new

text object. You can change these settings directly from selected text, or using

the Text Style Palette. The Palette has the advantage of letting you review all

the settings at a glance. (For more on setting defaults, see Updating and

saving defaults on p.

65.)

To change default text properties:

1. Create a single sample of text and fine-tune its properties as desired—or

use existing text that already has the right properties.

2. Select the text or container and choose Update Text Default from the

Format or right-click and choose Format>.

3. Choose Text Style Palette... from the Format menu.

4. Click Default Text, then click Modify... to view current settings.

5. Use the Attributes button to alter character, paragraph, or other

properties.

Update Text Default will only apply to the current document and no other

documents—use Tools>Save Defaults to apply the default to all subsequent

documents.

WebPlus will preserve the formatting of imported word-processor text. If

you’ve imported or pasted some text and want to apply different formatting,

you can first reset the text to use the default text properties.

To clear custom formatting (restore plain/default text properties):

• Select a range of text and choose Remove Text Formatting from the

Format menu (or press Ctrl+Shift+Z).

86 | Working with Text

Using text styles

It's a good idea to establish the main text and graphic formatting to be used in

your site early in the creative process. WebPlus facilitates this by letting you

define named text styles. A text style is a set of character and/or paragraph

attributes saved as a group. When you apply a style to text, you apply the

whole group of attributes in just one step. For example, you could define

named paragraph styles for particular layout elements, such as "Heading,"

"Sidebar," or "Body Text," and character styles to convey meaning, such as

"Emphasis," "Price," or "Date Reference." Using styles not only speeds the

task of laying out a site but ensures consistency and ease of updating.

Paragraph styles and character styles

A paragraph style is a complete specification for the appearance of a

paragraph, including all its font and paragraph format attributes. Every

paragraph in WebPlus has a paragraph style associated with it.

• WebPlus includes one built-in paragraph style called "Normal" with a

specification consisting of generic attributes including left-aligned, 12pt

Times New Roman. Initially, the "Normal" style is the default for any

new paragraph text you type. You can modify the "Normal" style by

redefining any of its attributes, and create any number of new styles

having different names and attributes.

• Applying a paragraph style to text updates all the text in the paragraph

except sections that have been locally formatted. For example, a single

word marked as bold would remain bold when the paragraph style was

updated.

A character style includes only font attributes (such as font name, point size,

bold, italic, etc.), and you apply it at the character level—that is, to a range of

selected characters—rather than to the whole paragraph.

• Typically, a character style applies emphasis (such as italics, bolding or

colour) to whatever underlying font the paragraph already uses; the

assumption is that you want to keep that underlying font the same. That's

why WebPlus includes a built-in character style with the name "Default

Paragraph Font," which has no specified attributes but basically means

"whatever font the paragraph style already uses." Suppose a paragraph

uses a style called "Body," and the "Body" style uses regular 10pt Arial.

Then the "Default Paragraph Font" style for that particular paragraph

means regular 10pt Arial.

Working with Text | 87

• The "Default Paragraph Font" style comes in handy if you have applied

local formatting but then decide to restore the original text attributes for

the paragraph. (You can think of it as a sort of "Revert to Unaltered Text"

command.) Let's take the above example of a paragraph using the "Body"

style, and suppose several words have been bolded. As noted earlier,

reapplying the "Body" style to the paragraph would not undo the local

bold marking. However, selecting the paragraph and applying the

"Default Paragraph Font" style would set all the text back to regular 10pt

Arial.

• As with paragraph styles, you can define any number of new character

styles using different names and attributes. Custom character styles don't

usually include a specific font name or point size, but there's no rule

against including them.

Working with named styles

The named style of the currently selected text appears in

the Styles box on the Text context toolbar. The box may show a character

style (if one is applied locally); otherwise it indicates the paragraph style. You

can use either the Styles box or a dialog to apply a particular style to existing

text, modify an existing style, or define a new style.

To apply a named style:

1. Using the Pointer tool, click in a paragraph (if applying a paragraph style)

or select a range of text (if applying a character style). If you apply a

paragraph style, it will be applied to the whole paragraph regardless of the

amount of text selected. If you've selected text in more than one

paragraph, the change takes place in all selected paragraphs.

2. Click the down arrow on the Styles box (on the Text context toolbar) and

select the style name in the drop-down list.

Choose Text Style Palette... from the Format menu, select a style name,

and click Apply. The paragraph or selected text takes on the properties of

the named style.

88 | Working with Text

To update a named style using the properties of existing text:

1. Make any desired changes to some text that uses the named style as

shown in the Styles box.

2. Choose Update Text Style from the Format menu.

Click the arrow on the Styles box and select the current style name again

from the list. Click OK to confirm the option to "Update the style to

reflect recent changes."

All text using the named style, throughout the site, takes on the new

properties.

To define a new style using the properties of existing text:

1. Format the text as desired.

2. To define a character style, select a range of reformatted text. To define a

paragraph style, deselect text but leave a blinking cursor (insertion point)

within the newly formatted section.

3. Type a new style name into the Styles box and press Enter.

The new style is defined with the properties of the selected text.

New styles in WebPlus are actually just modified styles, stored under

new names. Every new style is derived from a previously defined base

style, and so consists of all the base style's unchanged attributes as

well as any attributes you've redefined.

To modify an existing style or define a new one using a dialog:

1. Choose Text Style Palette... from the Format menu.

2. To modify an existing style, select the style name and click Modify....

To create a new style, click Create....

3. Use the Style Properties dialog to define (or change) the style name, base

style, and following style. Click the Attributes button to access dialogs

that let you specify any text attributes you want to include in the style

definition.

4. Click OK to accept style properties, or Cancel to abandon changes.

5. Click Apply to update text, or click Close to maintain the style in the site

for future use.

Working with Text | 89

To import one or more styles from another WebPlus file:

1. Choose Text Style Palette... from the Format menu.

2. Click the Import... button and use the dialog to locate the file from which

styles should be imported, and the specific style(s) to be imported.

3. Normally, new or updated styles are in effect only for the current site;

they are saved with the project, but don't carry over to new sites. You can

even save an empty project and the defined styles will be saved along

with it! If you wish, you can use Tools>Save Defaults to record the set of

styles (along with other defaults) as a global setting so it will remain in

effect for future sites. For information, see .

Importing styles

When you use the Insert>Text File... command to import text from a word-

processor file, you can choose whether or not to retain the source file's named

styles.

• Check Retain Format in the Import Text dialog if you want WebPlus to

import and retain these styles. Any text not tagged with a style will be

marked with the "Normal" style as used in your site.

• Uncheck Retain Format to discard styles; WebPlus will mark all text

with the "Normal" style, as for unstyled text in the case above.

Adjusting letter spacing

The spacing between characters in a paragraph can have a subtle effect on the

viewer. WebPlus lets you experiment with the letter spacing of text. The

normal value is expressed as 0%. Increase the value to spread text apart, and

reduce it to tighten letter spacing. Letter spacing variations are preserved when

you publish the Web page.

To adjust letter spacing between characters:

1. Select a range of text with the Pointer tool.

2. Display the Character tab and choose a value from the

Spacing drop-

down list box, or type in a new value.

Right-click the text and choose Text Menu>Text Format>Character...

(or choose Character... from the Format menu), then select the

Character Spacing tab. Set the Spacing value to "Expanded" or

"Condensed," and select a point value in the By: list box. To enter a

relative (percent) value, uncheck the Absolute box.

90 | Working with Text

Inserting a symbol

You can insert symbol characters using either the Insert menu or (for common

symbols) keyboard shortcuts.

As a rule for Web page use, don’t employ symbols outside the

standard character set, or in non-standard fonts.

To insert a symbol character using the Insert menu:

1. Select the Pointer tool and click in the text for an insertion point.

2. Choose Symbol... from the Insert menu, and select a symbol name from

the submenu.

3. If you need a symbol not shown on the submenu, select Other... to

display an Insert Symbol dialog. The dialog remains open so you can

continue editing in the workspace as you select symbols.

• Select a Font to display its full character set, and then scroll the font

table to view characters. You can choose from the Subset list to jump

to a particular range within the character set.

• Click any individual character (or select it while browsing using the

arrow keys on your keyboard) to view the character's name and

Unicode Index at the bottom of the dialog. You can also enter any

Unicode hex value and click Go to jump to that particular character

in the current font.

• To insert a character into your text, double-click it (or select it and

click Insert).

The memory row below the font table keeps track of characters you've

recently inserted. Double-click any character in the row to insert it

again.

r insertion point to ensure it is Trouble inserting a character? Check you

still placed in your chosen text position.

Working with Text | 91

Inserting user details

You can take advantage of the User Details dialog to store frequently-used or -

updated user information so you don't need to keep re-entering it—think of

how often a mobile phone number or email address may change over time!

The dialog lets you review all your User Details at a glance, and will update

fields directly.

To review or change User Details:

1. Choose Set User Details... from the Tools menu.

2. Enter new information into the spaces on the Business, Home, or

Custom tab.

The Custom tab of the User Details dialog includes blank, re-nameable fields

where you can enter any information you may frequently need to "plug into"

your sites.

To insert a User Detail field:

1. Select the Pointer tool and click in the text for an insertion point.

2. Choose Information from the Insert menu, then select User Details...

from the submenu. Select a User Detail.

To update fields:

• Enter new information in the User Details dialog (via Tools>Set User

Details).

• Click the Update button to automatically update any altered field

currently placed in your site. This field will remain linked to User Details

until it is deleted.

92 | Working with Text

Working

with Tables

94 | Working with Tables

Working with Tables | 95

Creating text-based tables

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. There are many similarities

(and several key differences) between frame text and table text.

• With table text, you can vary character and paragraph properties,

apply named text styles, embed inline images, apply text colour fills, and

use proofing options such as AutoSpell/Spell Checker, Proof Reader, and

Thesaurus.

• However, tables don't support importing text from a file, editing text with

WritePlus, or viewing text from within the Text Manager—table text also

doesn't flow or link the way frame text does; the Frame context toolbar's

text-fitting functions aren't applicable.

• Tables also have a number of unique features like AutoFormat, number

formatting, formula insertion, calendar insertion, QuickClear, and

QuickFill for rapid editing and revision.

96 | Working with Tables

HTML or Creative tables

Two types of table can be applied to the WebPlus page—the HTML table and

the Creative table. These can be compared easily in the following table—some

features can be applied to both, or just to one or the other. The features listed

above apply to both table types.

HTML tables Creative

tables

Searchable by search engines (Google, etc.)

 

Script and form insertion for generating

dynamic content

 

Resize/move table

 

Crop table

 

Rotate table

 

Rotate table text (in cell)

 

Apply fill and border colour

 

HTML-compliant Styles

 

Transparency

 

Borders

 

Warp

 

2D/3D Filter effects

 

Instant 3D

 

If applied, will export table as a graphic.

HTML-compliant styles means that you can format text in your HTML table

using heading styles (tags) from H1, H2, .., to H6. The styles can be assigned

from Text>HTML Tag on the Format menu. An advantage of this is that text

applied with Heading styles is retrieved in Internet search engines (H1 tag is

the highest priority). See Adding search engine descriptors on p.

62 for

more details.

So how do you tell the difference between an HTML and Creative table?

Simply, HTML tables will always possess dark blue corner/edge handles

when selected, while a Creative table's handles will show as grey.

Working with Tables | 97

To create a table:

1. Choose either the

HTML Table Tool or Creative Table Tool

from the Insert flyout on the Standard Objects 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 table formats shown in the

Format: window.

2. Step through the list to preview the layouts and select one. To begin with

a plain table, select [Default].

3. Click OK.

The new table appears on the page, and the Table context toolbar appears to

assist with entering and formatting spreadsheet data.

WebPlus treats table text in three ways: as numbers, formulas, or ordinary

text.

• Numbers: WebPlus can format numbers in special ways. See

Formatting numbers on p.

102.

• Formulas: WebPlus will treat any text entry beginning with an equal

symbol (=) as a formula. Formulas can be formatted the same as numbers.

See Inserting formulas on p.

104.

• Ordinary text: Any other text entry, i.e. one that doesn't begin with "=".

To modify an HTML or Creative table, please see Manipulating tables on p.

98.

HTML tables and dynamic content

If you want to use "intelligent" tables in WebPlus you'll need to work with

HTML tables exclusively. The term "intelligent" means that the table as a

whole (or a specific table cell) can either dynamically generate content or can

have its appearance altered within table cells. Information could be gathered

from a local database or generated by a script (perhaps the result of calculation

of cell contents). Either way, an HTML fragment (containing the

programming/script code) can be placed into one or more table cells, giving

that cell the ability to generate dynamic content.

This complex subject is described in more detail in Attaching HTML code

on p.

166, where some typical uses are also listed.

98 | Working with Tables

Onc y it

as a would with a text frame.

• x. Now you can resize it

n also

Delete from the right-click menu), then Table from the submenu.

g text within the table, or parts of the table.

o select a range

edit able

t in cells, rows, and columns:

for an insertion point or drag to select text. To select

cell, click in one cell and drag across the others.

nipulating tables

e you've created a table, you can select, move, resize, delete, and cop

n object, just as you

To manipulate the table object:

To select the table object, click its bounding bo

like a text frame by dragging a corner or side handle, or move it by

dragging an edge.

• To delete the table object, select it and press the Delete key (you ca

choose Delete Object from the Edit menu).

Select any part of its text and choose Delete from the Table menu

(Table>

• To duplicate the table object and its text, first make sure no text is

selected (an insertion point is OK), then use the Copy and Paste

commands. As a shortcut, select the object and drag with the Ctrl key

down.

Other operations involve selectin

Within each cell, you can click for an insertion point or drag t

of text. You can also drag to select multiple cells, rows, or co

lumns, which in

effect selects all the text in that region. Once you've made a selection, you can

text in the table and modify the structure and appearance of the t

and/or its components.

To select and edit tex

• To select a cell, click

more than one

Tab to mo to the cell in the next column, and Shift+Tab to m

cell in the previous column.

• o move between cells, use the keyboard arrow keys. You can also press

o the

ve ove t

Working with Tables | 99

• To enter text, simply type into a cell at the insertion point. You can also

type or edit text via the Table context toolbar's edit field.

Click the

Accept button to update the selected cell. Click

Cancel to reset the edit field to the previous cell text. Cells expand

• of

n from the submenu.

le text to any of the newly

me bold and some plain) will revert to plain if you edit it via

•

• To delete one or more rows or columns, select them (or cell text) as

described above, then choose Delete from the Table menu (Table>Delete

from the right-click menu), then either Row(s) or Column(s) from the

submenu.

vertically as you type to accommodate extra lines of text. To enter a Tab

character, press Ctrl+Tab.

To select a row or column, click its control button along the left or top

the table. To select more than one row or column, drag across their

control buttons. You can also select cell(s) first, then choose Select from

the Table menu (Table>Select from the right-click menu), then either

Row or Colum

• To select all text (all rows and columns), choose Select from the Table

menu (Table>Select from the right-click menu), then All from the

submenu.

• To copy, paste and delete selected table text, use the Copy, Paste an

Delete commands as you would for frame text. Alternatively, drag t

bottom corner of a selected cell to copy its tab

selected cells

• To format selected text, apply character and paragraph properties or

text styles as with any text. Note that cell text with mixed formatting (for

example, so

the Table context toolbar.

Table text shares default properties with frame text. For details, see

Updating and saving defaults on p. 65.

To change the table's structure and appearance:

To adjust row or column size, drag the line separating control buttons.

Note that you can adjust a row's height independent of the amount of text

it contains.

100 | Working with Tables

•

ple, a column head), select a range of cells and choose Merge

• uding text, formatting, borders, and colours) to

cell selection

•

• lets you fill a span of cells with the contents of an initially

outwards to encompass a contiguous block of cells

w or column. Dragging diagonally will fill rows and

•

• To insert new rows or columns, select one or more cells as described

above, then choose Insert from the Table menu (Table>Insert from the

right-click menu), then either Rows... or Columns... from the submenu

In the dialog, specify how many to add, and whether to add them before

or after the selected cells.

To merge cells into larger cells that span more than one row or column

(for exam

Cells from the Table menu (Table>Merge Cells from the right-click

menu). The merged cell displays only the text originally visible in the top

left selected cell. The original cells and their text are preserved,

however—to restore them, select the merged cell and choose Separate

Cells from the Table menu (Table>Separate Cells from the right-click

menu).

To copy cell contents (incl

a new cell in the same table, select the cell(s), press the Ctrl key and

hover over the cell border(s) until the copy cursor is shown—click and

drag the copied cell to its new cell location. To copy cell contents from

one table to another table select the cells, right-click on a

and choose Copy—select the area (of the same dimension) in the new

table then select Paste.

To move cell contents, select the cell(s), press the Shift key (instead of

the Ctrl key) and hover over the cell border(s) until the move cursor is

shown—click and drag the cell to its new cell location.

QuickFill

selec

ted cell's contents. This one-to-many "replicating" operation is

possible by dragging the bottom right-hand QuickFill handle of the

initially selected cell

either on the same ro

columns simultaneously.

To move cell contents within the same table, select the cells, and

when the cursor is displayed, drag the cell(s) to the new location.

Working with Tables | 101

Using AutoFormat

To use style presets to customize the table's appearance:

the right-click menu). The dialog presents a list of sample tables,

hich differ in their use of Lines (inner and outer cell borders), Fill (cell

entre, etc.) and

L editing support.

• pecify which of the

Settin

2. ansparency, Margins and Orientation

then click OK.

e Border tab

OK.

lines.

which lin u want to edit, then clicking the Line Style... button to set

• Choose AutoFormat... from the Table menu (Table>AutoFormat...

from

and table), Font (bold, italic, etc.), Alignment (left, c

HTM

You can pick any sample and use the checkboxes to s

sample's attribute(s) to apply to your actual table. This lets you "mix and

match," for example by applying (in two passes) the Colour from one

sample and the Font from another.

• To restore plain formatting, choose [Default].

g Cell Properties

customize the appearance of one or more cells "by hand":

Select the cell(s) and choose Cell Properties... from the Table menu.

Table>Cell Properties... from the right-click menu.

Cell Properties button on the Table context toolbar.

Use the dialog's Border, Fill, Tr

tabs to apply cell formatting,

Using th

To start, click to select one of the preset edge line configurations at the

right. The Edge Selection box at the left shows exactly which lines (a

indicated with bolding) will be applied to the table when you click

"Inside" line presets will affect inner border lines in the table, assuming

you have more than one cell selected. Click the empty (lower-left) preset

to remove all border

Once you' hosen a preset you can customize the style of any or all

lines in the configuration, first using the Edge Selection box to select

ve c

e(s) yo

line properties. Any lines indicated with arrows in the Edge Selection box

will take on the new properties.

102 | Working with Tables

Formatting mbers nu

The Tabl text toolbar includes additional buttons, switched on with

et f

disp t you add commas and currency signs to

numbers, express numbers as percents, control how many decimal places are

e con

the Spreadshe unctions button, which let you vary how numbers are

layed. Number formats le

displayed, etc. Number formats do not

alt umbers internally—only the wa

nu bers are displayed.

er n y

• Click the Remove Formatting button to remove any formatting.

• Click the Currency button to apply the currency format and symbol

for your locale as suggested by Windows.

• Click the Percent button to convert a number to a percentage

(multiply by 100 and append a percent sign).

• Click the Comma button to separate thousands by a comma and

remove decimal places.

• Click the Increase Decimal or Decrease Decimal button to

number of decimal places shown.

ptions:

•

extend or reduce the

For additional number formatting o

Click the Custom Format button.

The Custom Form

listed format

you wish), and

symbol charac cale, as supplied by

W ows.

To apply a f

1. Select it i

negative v

2. Click OK

To specify a custom format:

1. e it i bols.

(As you ty ts any matching

entries.)

atting dialog appears. Here you can select from any of the

s, construct custom formats (with colour for negative values, if

customize the list. The built-in list includes two currency

ters (one positive, one negative) for your lo

ind

ormat to the current cell:

n the list. The Sample box provides a preview of positive and

alues using the format.

Typ nto the box below the list, using any of the following sym

pe the list automatically scrolls and highligh

Working with Tables | 103

r than #'s specified, then the extra digits left of the

igits in

e separator will be displayed.

D ymbol

D mbol if the number is positive, or a

the number is negative.

olour]

.g. Red.

ack, White,

een, Mustard, Dark Blue, Purple,

e formats:

RGB(xxx,yyy,zzz), CMYK(www,xxx,yyy,zzz), or

Decim

D o decimal places, e.g. 0.4 as 0. Same as entering 0.#

(or having no format at all).

isplayed, e.g. 0.4 as 0.4

n exponential (or scientific format), e.g. 0.4

" character to specify the number

of decimal places shown before or after the exponent, e.g. the

Display a digit if the number has one. If there are more digits i

the numbe

decimal place separator will be displayed.

lways displays a digit. If a number does not have a digit in this

position then a zero (0) is displayed. If there are more d

the number than 0's specified, then the extra digits left of the

decimal plac

isplay a negative symbol if the number is negative. No s

is displayed if the number is positive.

isplay a positive sy

negative symbol if

(cod

Display the formatted number in parentheses if the number is

negative.

Display a negative number in the specified colour, e

You can type any of these colour names: None, Bl

Grey, Grey, Red, Green, Blue, Yellow, Orange, Cyan,

Magenta, Burgundy, Dark Gr

Sea Green

You can enter colour values using one of thes

HSL(xxx,yyy,zzz)

al separator

isplay numbers as percentages, e.g. 0.4 as 40% or 1.25 as

125%

isplay decimal places as fractions, e.g. 0.4 as 2/5

isplay n

0.0

Display one decimal place, e.g. 0.4 as 0.4

0.00

Displays two decimal places, e.g. 0.4 as 0.40

Automatically calculate the number of decimal places to be

Display number as a

as 4e-01. You can use the "0

104 | Working with Tables

89 formatted as "+0.00 e+000" becomes "+1.23

ted as "+0.0000 e+00" it becomes "+1.2346

value 123.4567

e+002"; format

e+02".

are WebPlus is not strict about the order in which the format codes

specified, and tries to interpret whatever you type.

2. To apply the custom format to the current cell

(and save it in the list),

click OK.

Ins

A tab bining values of other

rators and functions. Formulas are recalculated

whenever val e table change, so they're always up to date.

form

sele

To delete a custom form

• Select it and click the Delete button.

at:

erting formulas

le cell can display the result of a formula com

cells with arithmetic ope

ues in th

An cell starting with the character "=" is treated as a formula. To enter or edit

ulas, use the Table context toolbar's edit field. Note that you can only

ct or edit an entire formula, not just part of it.

Remember to enable the Spreadsheet functions button (on the

Table context toolbar) to allow you to create formulas.

To display cell's formula in the context toolbar's edit field: a

• Click to select the cell containing the formula.

To enter a formula:

• Click the Function b

a specific function from the

utton on the Table context toolbar and choose

drop-down menu.

utton once to seed the edit field with an equal sign

, then continue to type the formula.

•

For example, if you start with a blank cell and choose SUM(), WebPlus

adds "=SUM()" to the edit field and positions the text cursor between the

brackets so that you can type numbers or cell references straight away.

• Click the Function b

(or type "=" yourself)

Click the Accept button to update the selected cell.

Working with Tables | 105

and

func

Ins

The Calendar Wizard helps you design a month-at-a-glance calendar to use

in any site. You can create a postage-stamp graphic or a full-page "planner."

Options include year, month, week and day labelling, room to write, and

numerous style choices.

To insert a calendar:

1. Choose

See the WebPlus Help for a more information on formulas, their operators

tions.

erting a calendar

Insert Calendar from the Standard Objects toolbar’s Table

flyout.

2. Click again on your page (for a default sized calendar), or drag out to

indicate the desired size of the calendar.

The Calendar Wizard then helps you pick a design and define options for

your calendar.

106 | Working with Tables

Drawing Lines

and Shapes

108 | Drawing Lines and Shapes

Drawing Lines and Shapes | 109

Drawing lines

WebPlus provides Freehand Line, Straight Line, Curved Line, and

QuickShape tools for creating simple graphics. Using the line tools (found on

a Standard Objects toolbar flyout), you can draw single lines, connect line

segments together, or join line ends to close the line, creating a shape (see

Drawing shapes on p.

112 for details). Use the Pointer tool and the Curve

context toolbar to resize or reshape lines once you've drawn them.

The Freehand Line Tool lets you sketch curved lines and shapes in

a freeform way.

The Straight Line Tool is for drawing straight lines; rules at the

top and/or bottom of the page; or horizontal lines to separate

sections or highlight headlines.

The Curved Line Tool lets you join a series of curved or straight

line segments using "connect the dots" mouse clicks.

To draw a freeform line (with the Freehand Line tool):

Click the Line Tools flyout on the Standard Objects toolbar and

choose the Freehand Line Tool.

2. Click where you want the line to start, and hold the mouse button down as

you draw. The line appears immediately.

3. To end the line, release the mouse button. The line will automatically

smooth out using a minimal number of nodes.

4. To extend the line, position the cursor over one of its red end nodes. The

cursor changes to include a plus symbol. Click on the node and drag to

add a new line segment.

110 | Drawing Lines and Shapes

To draw a straight line (with the Straight Line tool):

Click the Line Tools flyout on the Standard Objects toolbar and

choose the Straight Line Tool from the flyout.

2. Click where you want the line to start, and drag to the end point. The line

appears immediately.

To constrain the angle of the straight line to 15 degree increments,

hold down the Shift key down as you drag. (This is an easy way

to make exactly vertical or horizontal lines.)

To extend the line, position the cursor over one of its red end nodes. The

cursor changes to include a plus symbol. Click on the node and drag to

add a new line segment.

To draw one or more line segments (with the Curved Line tool):

Click the Line Tools flyout on the Standard Objects toolbar and

choose the Curved Line tool from the flyout. The Curve Creation toolbar

appears, with three buttons that let you select which kind of segment

you'll draw next.

A Straight segment is simply a

straight line connecting two nodes.

(Shortcut: Press 1)

A Bézier segment is curved,

displaying control handles for

precise adjustment.

(Shortcut: Press 2)

Smart segments appear without

visible control handles, using

automatic curve-fitting to connect

each node. They are especially

useful when tracing around curved

objects and pictures.

(Shortcut: Press 3)

Drawing Lines and Shapes | 111

2. Select a segment type, then click where you want the line to start.

• For a Straight segment, just click again (or drag) for a new node

where you want the segment to end. Shift-click to align the segment

at 15-degree intervals (useful for quick right-angle junctions).

• For a Bézier segment, click again for a new node and drag out a

control handle from it. (Control handles act like "magnets," pulling

the curve into shape. The distance between handles determines the

depth of the resulting curved line.) Click again where you want the

segment to end, and a curved segment appears. Pressing the Shift key

while you're drawing causes the new node's control handles to "snap"

into orientation at 15-degree intervals with respect to the node.

Normally, Bézier segments end in a symmetric (evenly rounded)

corner, with control handles locked together. You can press C while

drawing the segment to define a "cusp" or sharp corner.

• For a Smart segment, click again for a new node. The segment

appears as a smooth, best-fitting curve (without visible control

handles) between the new node and the preceding node. Before

releasing the mouse button, you can drag to "flex" the line as if

bending a piece of wire. If the preceding corner node on the line is

also smart, flexibility extends back to the preceding segment. You

can Shift-click to create a new node that lines up at 15-degree

intervals with the previous node.

3. To extend an existing line, repeat Step 2 for each new segment. Each

segment can be of a different type.

Note: To select the opposite end node of the curve (i.e., to extend the

curve from the other end), press Tab before drawing the next segment.

4. To end the line, press Esc, double-click, or choose a different tool.

You can reshape the line after it's drawn (see below) or apply different weight,

colour, or other attributes.

See WebPlus help for information on editing lines.

112 | Drawing Lines and Shapes

gned

f creating shapes is to draw a line (or series of

tures!)

fill (initially a black line with no fill).

shapes into Web buttons by adding hyperlinks or

QuickShapes

on y used shapes,

including boxes, ovals, arro

QuickShape button for:

awing shapes

WebPlus provides Freehand Line, Straight Line, Curved Line, and

QuickShape tools for creating simple graphics. QuickShapes are pre-desi

objects that you can instantly add to your page, then adjust and vary using

control handles. Another way o

line segments) and then connect its start and end nodes, creating a closed

shape. Once you've drawn a shape, you can adjust its properties—for

example, apply gradient or Bitmap fills (including your own bitmap pic

or apply transparency effects.

New shapes take the default line and

You can easily turn

overlaying hotspots. The "Quick Button" QuickShape is especially intende

for creating stylish button outlines!

The QuickShape flyout c tains a wide variety of commonl

ws, polygons and stars. You might use the

Decorative circles or polygons

Functional arrows, stars, callouts, and so on

but

left)

pes. Add hyperlinks

ded panels, also known as screens, behind

1. ckShape button on the Tools toolbar and select a shape from

2. default size. Drag to adjust its

e the mouse button. Now you can

alter the shape by dragging on its handles.

Web buttons... any QuickShape will do,

try the unique Quick Button (circled at

for a range of standard ty

or hotspots to make your shapes "clickable"

A border framing your page, e.g. a box

around the whole page.

Sha

pictures to draw attention to them. The effect

works equally well behind text.

To create a QuickShape:

Click the Qui

the flyout. The button takes on the icon of the shape you selected.

Click on the page to create a new shape at a

dimensions.

3. When the shape is the right size, releas

Drawing Lines and Shapes | 113

To draw a constrained shape (such as a circle):

• Hold down the Shift key as you drag.

All QuickShapes can be positioned, resized, rotated, and filled. What's more,

you can adjust their designs using the Pointer tool. Eac

h shape changes in a

d. The ability to alter the

flexible and convenient

To adjust

rent handles.

e the Node

ndle and read the HintLine.

Clo

es appear. Nodes

rves typically

wo. You can

logical way to allow its exact appearance to be altere

appearance of QuickShape objects makes them more

tha clipart pictures with similar designs.

the appearance of a QuickShape:

1. Select it with the Pointer tool. One or more sliding handles appear next to

the shape. Different QuickShapes have diffe

2. To find out what each handle does for a particular shape, mov

tool over the ha

3. To change the appearance of a QuickShape, drag its handles.

sed shapes

As soon as you draw or select a line, you'll see the line's nod

show the end points of each segment in the line. Freehand cu

have many nodes; straight or curved line segments have only t

make a shape by extending a line back to its starting point.

turn a selected line into a shape:

• Select the line with the Pointer tool and click the Close Curve

button on the Cu

rve context toolbar.

ou can go the other way, too—break open a shape in order to add one or

ore line segments.

114 | Drawing Lines and Shapes

To break op :

1. With the Pointer tool, select the node where you want to break the shape.

Click the

en a line or shape

Break Curve button on the Curve context bar. A line will

ne.

ou can now use the Pointer tool to reshape the line as needed.

See WebPlus help for information on editing shapes.

separate into two lines. A shape will become a line, with the selected nod

split into two nodes, one at each end of the new li

Working with

Colour and

Transparency

116 | Working with Colour and Transparency

Working with Colour and Transparency | 117

Applying solid colours

WebPlus offers a number of ways to apply solid colours to objects of different

kinds:

• You can apply solid colours to an object's line or fill. As you might

expect, QuickShapes and closed shapes have both line and fill properties,

whereas straight and freehand lines have only a line property.

• Characters in text objects can have a colour, and text frames and table

cells can have a background fill independent of the characters they

contain.

You can use the Colour tab, Swatches tab or a dialog box to apply solid

colours to an object.

To apply a solid colour via the Colour tab:

1. Select the object(s) or highlight a range of artistic text.

2. Click the Colour tab from which you can apply colour from one of

several colour palettes.

3. Click the

Fill, Line, or Text button at the top of the tab to

determine where colour will be applied. The colour of the underline

reflects the colour of your selected object.

4. Select a colour from the colour spectrum or sliders.

Use the Colour Picker on the Colour tab to select any colour

already on your page, then apply it to another object. Hold down the

mouse button to (magnify), then drag the cursor onto the desired

colour and release.

To apply a solid colour via the Swatches tab:

1. Select the object(s) or highlight a range of artistic text.

2. Click the Swatches tab.

3. Click the Fill, Line, or Text button at the top of the tab to determine

where colour will be applied.

4. Select a colour sample from the Publication palette (colours previously

applied in your site) or Standard palette (supplied preset swatches).

Use Format>Fill... to apply colour via a dialog.

118 | Working with Colour and Transparency

To change a solid colour's shade/tint (lightness):

1. Select the object and set the Line/Fill Swatch in the Colour tab so the Fill

Swatch appears in front of the Line swatch.

2. From the Colour Display mode drop-down menu, select Tinting.

3. Drag the Shade/Tint slider to the left or right to darken or lighten your

starting colour, respectively (the original colour is set at 0%). You can

also enter a percentage value in the box (entering 0 or dragging the

pointer back to its original position reverts to the original colour).

See WebPlus help for information on editing colours and managing

gallery colours.

Using colour schemes

Each WebPlus site uses a global colour scheme which you can manage using

the Scheme Manager. Each scheme has a name and consists of five

complementary basic colours which you can apply to any design element.

(These work like a paint-by-numbers system, as explained below.) In addition,

each scheme includes adjunct colours which apply specifically to hyperlinks

(default, followed and active) and page backgrounds. Switching to a different

colour scheme instantly updates all elements that use scheme colours!

Colour schemes in WebPlus work much

like a paint-by-numbers system, where

various regions of a layout are coded with

numbers, and a specific colour is assigned

(by number) to each region (see the

flower opposite, using the "Beacon"

scheme). Swapping different colours into

the "paint jars" numbered 1 to 5, while

keeping the numbers on the flower the

same, would automatically produce quite

a different colouration.

In WebPlus, the "paint jars" are known as

"Scheme Colour 1," "Scheme Colour 2,"

and so on. When you apply Scheme

Colour 1 to an object, it's like saying, "Put

the colour from jar number 1 here."

Working with Colour and Transparency | 119

The example on the previous page shows how the scheme "Bright" could be

applied to the site to replace the above "Beacon" scheme, the "Cheeky"

scheme could then replace the "Bright" scheme, etc.

Each site can have just one colour scheme at a time; the current scheme is

indicated in the Swatches tab. You can easily switch schemes, modify scheme

colours, apply schemes to any site, even create your own custom schemes.

Colour schemes are saved globally, so the full set of schemes is always

available.

To select a colour scheme:

1. Display the Swatches tab. The five colours in the current scheme appear

as numbered samples, from 1 to 5, at the bottom left-hand corner of the

tab. (You'll also see additional samples labelled H (Hyperlink), F

(Followed hyperlink), A (Active hyperlink) and B (Background), which

apply to hyperlink and background page colours.)

2. Click the Colour Scheme button on the default context toolbar (or choose

Tools>Scheme Manager...) to display the Scheme Manager, which lists

the various available schemes for your web site, each with a different set

of five colours in the five "jars."

3. Select a different colour scheme sample from the list and click OK. Any

regions in the site that have been assigned one of the five colour scheme

numbers are updated with the corresponding colour from the new scheme.

You can repeat this selection process indefinitely. When you save a site, its

current colour scheme is saved along with the document.

Adjunct colours

Besides the five basic colours, each scheme includes four adjunct colours.

• The Hyperlink colour (labelled H) applies to hyperlinked text before it's

been clicked on.

• The Followed Hyperlink colour (labelled F), applies to hyperlinked text

after a visitor has clicked to "follow" the link.

• The Active Hyperlink colour (labelled A), applies to hyperlinked text

when a visitor's mouse button is depressed. Typically this is the colour

shown after clicking and before the hyperlink's page is displayed.

120 | Working with Colour and Transparency

• The page Background colour (labelled B) can be either a solid colour or

picture. If you use a picture background with transparent regions, the

Background colour is still active and will show through; otherwise the

picture will cover the background colour.

The adjunct colours defined in the Scheme Manager normally apply

throughout the site, with several important exceptions:

• Individual hyperlinks can specify their own colour. In the Hyperlinks

dialog, uncheck Use scheme hyperlink colours. This will allow the

underlying object’s colour to show through on both the original and

Followed hyperlink.

• Using the Master Page Manager (Background tab), you can override the

Scheme Manager’s Background colour/picture setting for a particular

master page, which affects all pages that share that master page. Pages

that don’t use a master page default to the Scheme Manager setting, but

you can override this via the Page Properties dialog (Background tab). In

each case, uncheck Use Scheme Manager settings and set new options

for Page colour and/or Use picture.

Applying scheme colours to objects

If you create new elements in a Web template site, or start a site from scratch,

how can you extend a colour scheme to the new objects? Although you'll need

to spend some time working out which colour combinations look best, the

mechanics of the process are simple. Recalling the paint-by-numbers example

above, all you need to do is assign one of the five scheme colour numbers to

an object's line and/or fill.

To assign a scheme colour to an object:

1. Select the object and choose a

Fill, Line, or Text button

at the top of the Swatches tab depending on the desired effect.

2. From the bottom of the Swatches tab, click on a scheme colour

(numbered 1 to 5) that you want to apply to the fill, line and text (or you

can drag the colour instead).

If an object's fill uses a scheme colour, the corresponding sample will be

highlighted whenever the object is selected.

Working with Colour and Transparency | 121

Modifying and creating colour schemes

If you've tried various colour schemes but haven't found one that's quite right,

you can modify any of the colours in an existing scheme and update the

scheme, or create your own separately named scheme based on the existing

scheme.

To modify a colour scheme:

1. Click the Colour Scheme button on the default context toolbar (or choose

Tools>Scheme Manager...) to display the Scheme Manager.

2. Pick a colour scheme from the list on which to base your new scheme,

and jump to the Edit tab at the top of the same dialog.

3. On the Edit tab, each of the five scheme colour numbers (plus the

Hyperlink, Followed Hyperlink, Active Hyperlink and background Page

colour) has its own drop-down list, showing available colours in the

WebPlus palette.

4. To set or change a scheme colour or adjunct colour, simply click the

adjacent button and select a new colour. Click More Colours... to display

the Colour Selector.

5. To store the modified scheme in the Schemes Manager, click Save

Scheme.... Leave the name unaltered to overwrite the existing scheme.

6. To apply the scheme to the current web site, click OK.

To create a new scheme, you can follow the above procedure but, at Step 4,

enter a new scheme name instead of overwriting the existing scheme.

Setting transparency

Transparency effects are great for highlights, shading and shadows, and

simulating "rendered" realism. They can make the critical difference between

flat-looking illustrations and images with depth and snap.

Transparency may seem a bit tricky because by definition, you can't "see" it

the way you can see a colour fill applied to an object. In fact, it's there all the

time in WebPlus. Each new object has a transparency property: the default just

happens to be "None"—that is, no transparency (opaque).

Transparencies work rather like fills that use "disappearing ink" instead of

colour. The more transparency in a particular spot, the more "disappearing"

takes place there, and the more the object(s) underneath show through. Just as

a gradient fill can vary from light to dark, a transparency can vary from more

to less, i.e. from clear to opaque, as in the illustration:

122 | Working with Colour and Transparency

Here, the hexagonal shape has had a Linear transparency applied, with more

transparency at the lower end of the path and less at the upper end. It makes a

difference which object is in front (here, the pentagon); where there's more

transparency, more of the object(s) behind will show through.

In WebPlus, transparency effects work very much like greyscale fills. Just like

fills...

• Transparency effects are applied from the Studio—in this case, using the

Transparency tab. (Transparency is also an option with the 3D Pattern

Map filter effect.)

• The Transparency tab's gallery has thumbnails in shades of grey, where

the lighter portions represent more transparency. To apply transparency,

you click thumbnails or drag them onto objects.

• Most transparency effects have a path you can edit—in this case, with the

Transparency Tool.

As for the effects available on the Transparency tab, all are comparable to the

fills of the same name:

• Solid transparency distributes the transparency equally across the object.

•

mbnail's tooltip identifies its category), ranging from clear to

• cludes texture maps based on the Swatches tab's

selection of bitmaps.

Gradient transparencies include linear, elliptical, and conical effects

(each thu

opaque.

The Bitmap gallery in

Working with Colour and Transparency | 123

Applying transparency

There are two ways to apply transparency: using the Transparency tab or the

Transparency tool.

To apply transparency with Transparency tab:

1. With your object selected, go to the Transparency tab.

2. For solid transparency, select the Solid button and pick a thumbnail

from the solid transparency gallery. The lighter thumbnails represent

more transparency (expressed as percentage Opacity).

OR:

For gradient transparency, choose the

Gradient button and pick your

thumbnail.

OR:

For Bitmap transparency, choose the

Bitmap button and pick a

thumbnail from a range of categories.

3. The transparency is applied to the object(s).

Alternatively, drag the desired thumbnail from the gallery to an object (the

cursor changes to include a plus sign over suitable objects), and release the

mouse button. The object takes the transparency and becomes the selected

object.

To apply gradient transparency with Transparency Tool:

1. Select an object.

2. Click the

Transparency Tool button on the Tools toolbar.

3. Click and drag on the object to define the transparency path. The object

takes a simple Linear transparency, grading from 100% opacity to 0%

opacity.

Editing transparency involves use of a dialog to let you add or subtract nodes

from the gradient, apply different key colours to individual nodes, or vary the

overall shading of the effect applied to the object.

See WebPlus help for information about editing transparency and managing

gallery transparencies.

124 | Working with Colour and Transparency

Images,

Animation, and

Multimedia

126 | Images, Animation, and Multimedia

Images, Animation, and Multimedia | 127

Importing images

WebPlus lets you insert images from a wide variety of file formats. Here's a

quick overview:

• Bitmapped images, also known as bitmaps or raster images (e.g. GIF,

JPG, PNG, etc.) , are built from a matrix of dots ("pixels"), rather like the

squares on a sheet of graph paper. They may originate as digital camera

photos or scanned images, or be created (or enhanced) with a "paint"

program or photo editor.

• Draw graphics, also known as vector images, are resolution-independent

and contain drawing commands such as "draw a line from A to B.".

• Metafiles are the native graphics format for Windows and combine raster

and vector information.

You can also acquire images directly from PhotoCDs or via TWAIN devices

(scanners or digital cameras).

Inserting pictures

There are several ways to bring an image into WebPlus. Decide in advance

where you want to place the picture, and whether to insert it by embedding or

by linking.

• Detached images float freely on a page, while inline images are

incorporated with the text flow in a text object.

• ing

proach has its pros and cons (see

Embedding vs. Linking on p. 129.

Embedded images become part of the publication file, while link

places a reference copy of the image on the page and preserves a

connection to the original file. Each ap

128 | Images, Animation, and Multimedia

To import an image from a file:

1. If you want to place the image inline, click for an insertion point in a text

object. For a detached image, make sure text objects are deselected. To

put the image in a frame, create the frame (see above) and select it.

2. In the main window:

• Click the

Import Picture... button on the Standard Objects

toolbar's Picture flyout.

• Choose Picture... from the Insert menu and select From file....

• Press Ctrl+G.

• To replace an existing picture, select it and click the

Replace

Picture button on the Picture context toolbar.

In WritePlus:

• Choose Picture File... from the Insert menu.

3. Use the dialog to select the image file to open. Check Preview to examine

images in the window at right.

4. If you check the Place at native dpi option and the image has a different

internal setting, WebPlus will scale the image accordingly; otherwise it

applies a screen resolution setting of 96 dpi. Either way—or if you resize

it downwards later on—the image retains all its original picture data until

it’s published.

5. Select either Embed Picture or Link Picture.

6. Click Open.

7. If there's a text insertion point in the main window, you'll be prompted

whether to insert the image at the current cursor position. Click Yes if

that's what you want.

If there was no insertion point (or you answer "No" to the insertion

prompt), you'll see the mouse pointer change to the Picture Paste cursor.

What you do next determines the initial size and placement of the detached

image.

8. To insert the picture at a default size, simply click the mouse.

To set the size of the inserted picture, drag out a region and release the

mouse button.

Images, Animation, and Multimedia | 129

Embedding vs. linking

Embedding means the image in WebPlus is now distinct from the original

file. Embedding results in a larger WebPlus file, and if you need to alter an

embedded image you'll need to re-import it after editing. Still, it's the best

choice if file size isn't an issue and graphics are final.

Linking inserts a copy of the image file into the WebPlus project, linked to

the actual file so that any changes you later make to it in the native application

will be automatically reflected in WebPlus. Linking is one way of avoiding

"bloat" by limiting the size of the publication file. On the other hand, you'll

need to manage the externally linked files carefully, for example making sure

to include them all if you move the WebPlus file to a different drive.

By default, WebPlus prompts you to embed pictures that are smaller than 256

KB, by pre-selecting the "Embed Picture" option in the Insert Picture dialog

(but you can always select "Link Picture" instead). If you like, you can change

the threshold file size or even switch off the automatic selection.

You can use the Resource Manager later on, to change an item's status from

linked to embedded, or vice versa.

To pre-select embedding or linking based on file size:

1. Choose Options... from the Tools menu. You'll see the General tab.

2. To pre-select the "Embed Picture" option for images under a certain size,

select the threshold size in the "Embed if smaller than" list. ("Link

Picture" will be pre-selected for images larger than the threshold.)

3. To choose whether to embed or link each image, uncheck Suggest

embed/link picture. You can still select either option in the import

dialog; it will now remember and pre-select the last setting you used.

Setting picture export options

When you export your project as a Web site, WebPlus applies certain global

settings to determine how each image—whether drawn, pasted in, or

imported—ends up as a separate bitmap displayed on the Web page.

Here's a quick summary of initially defined conversion settings:

• Each referenced image is exported as a separate file.

• Any image you inserted as a GIF, JPEG, or PNG is exported as the

original file, using its original file name.

• Inserted metafiles and all other graphics are regenerated as PNG images.

130 | Images, Animation, and Multimedia

You can alter these settings, but before doing so you should review the "logic"

WebPlus applies to publishing Web graphics. First, WebPlus has one default

format to which all

graphics will be converted on export—but you can make

exceptions to this rule by specifying that certain image types should remain as

their original file. Initially, PNG is the default format, but with overrides set

for GIFs and JPEGs. That's why, using the initial settings above, GIFs and

JPEGs stay as they are while all other graphics get converted to PNGs.

You can check and change these settings in the Site Properties dialog. The

settings there are global and apply to all graphics in the site—but again you

can make exceptions, in this case for individual graphics. To do so, you could

either:

• Use the Web Export Options dialog or the Web Export Manager to set

the export format of particular images on a case-by-case basis.

• Convert certain images to a specific format beforehand using the

Tools>Convert to Picture.

This combination of global and local settings gives you almost total control (if

you care to exercise it) over how your graphics make it onto your Web pages!

Let's look first at how the global settings work.

To set global export options for Web graphics:

1. Choose Site Properties... from the File menu and select the Graphics tab.

Then set options as follows:

2. Check Optimize overlapping graphics to have WebPlus analyze the site

and (where a smaller file would result) output overlapping graphics as a

single graphic. Whether this option makes sense will depend on your

particular layout. Rather than use this global approach, you might

consider using Tools>Convert to Picture in specific cases.

3. In the Placed Graphics section, to override conversion for images of

certain formats (inserted JPEGs, GIFs, and/or PNGs), check which

format(s) to preserve. Checking a format means that any image you’ve

placed on a page using that format will stay in its original file format—

exempt from conversion to the default format.

You can also use the Web Export Manager to set a local override,

forcing WebPlus to export a particular image to a particular format.

Images, Animation, and Multimedia | 131

4. In the Generated Graphics section, select a preferred export format

is the default format to which all graphics will be converted on export

unless you set override

. This

ind

tting export options, title, and alternate text for

ividual graphics

The Web Export Manager is a Wizard that lets you set the export file format

for individual graphics in the site, or for objects such as rotated text that will

be converted to pictures on export. These local, picture-by-picture settings

override

the global settings (as set in File>Site Properties) which WebPlus

sele

ima u can save it using different methods. Either:

• Save the file to a chosen path and file name on export. Perhaps you want

taining your Web site) instead of having the images

export with automatically generated image names.

uses to determine the export format. You can run the Wizard to check a single,

cted picture; one or more specified pages; or the entire site. For each

ge, yo

• Choose a specific format (.JPG, .GIF, or .PNG) to export to (or just defer

to site default settings). For JPGs, you can choose a level of compression.

to add more meaningful descriptive names to images on export (especiall

useful when main

The Web Export Options command can perform the same task for

individual pictures.

Let your own eye be the judge. Your best bet is to retain the Use site default

settings option for all pictures to start with. Using the origina

l global settings,

er alternate text for Web site visitors to read while

an image is downloading. Each such "tag line" you provide will appear inside

the image frame during the time the image is being loaded into the visitor's

Web browser. It's good practice to enter a concise, descriptive phrase

describing each picture.

this means that GIFs, JPEGs, and PNGs will be exported as their original files,

while any others, including QuickShapes and closed shapes, will be published

as PNGs. Then preview your site and determine if you want to vary the global

settings or try a different output format for specific pictures.

Even if you don't change any format settings, you can set a picture title whic

will normally appear as a tooltip when the picture is moused over in a

browser. You can also ent

132 | Images, Animation, and Multimedia

To set export format, title, and/or alternate text:

1. If you're checking just a single picture, you can select it first and choose

Web Export Options... from the Format or right-click menu.

To review Web export options for pictures throughout your site, choose

Web Export Manager... from the Tools menu, or click the button on the

Standard toolbar.

2. (Only if you’re using the Export Manager) Select which objects or

page(s) you want the Wizard to check, then click Finish. The Wizard

cycles through graphics in the specified range, and displays each one in

turn along with the Web Export Options dialog.

3. In the dialog's Save Picture As section, you can choose to either:

4. Save to a specific format with WebPlus choosing the name

Enable the Save in this format.. button. Click a GIF, JPEG, or PNG

radio button and specify the export format for the current graphic.

Otherwise, leave Use site default settings selected. If selecting JPEG,

choose a compression quality from the Compression drop-down menu.

Save to a specific format with WebPlus choosing the name

Enable the Save to my chosen path.. button and click the Choose File...

button.

The displayed dialog lets you export with the original image file name

(enable Use default name) or choose a new image name (enable Choose

name button and enter a new file name). For either method, you can

navigate to the folder where you want to save the exported image.

The file format used will be that set in the site default settings. You

can still override the site default setting by altering the file extension in

the Choose name field, e.g. change .gif to .png.

5. Check the Exclude this picture from optimization.. option if you don't

want the image to be combined into one exported image if overlapping

with another image in your project.

6. (Optional) Choose from one of several resampling methods—WebPlus

can resample when needed, the file will always be resampled or will

never be resampled (original image will be used). Enable the appropriate

radio button as needed. Changing the format will always resample.

7. To enter a title and/or alternate text for a graphic, type it in.

Images, Animation, and Multimedia | 133

Applying image adjustments

The Picture context toolbar appears automatically when you select an image

on the page. You can use the bar to improve the appearance of any image

appearing in your drawing by adjusting brightness and contrast directly,

setting levels and contrast automatically, fixing red eye or by applying Image

adjustments. The context toolbar also hosts other photo manipulation tools.

Image adjustments are made possible with a comprehensive mix of colour

correction/adjustment tools for use on your newly imported images. Levels,

Colour Balance, Channel mixer, Dust and Scratch Remover and

Hue/Saturation/Lightness corrective adjustments, amongst others, are

available. Effect-inducing adjustments also range from the artistic Diffuse

Glow to various blur effects. In fact, over 20 adjustments can be directly

applied to your image not only individually but cumulatively.

Adjustments are managed in the Image Adjustments dialog. The gallery

offers a one-stop shop for applying your adjustments—all supported by a

dynamic preview window!

Adjustments can be applied to imported pictures as well as objects

converted to pictures within WebPlus.

134 | Images, Animation, and Multimedia

If you're looking to carry our some more advanced photo editing and have

Serif's PhotoPlus software (10.0 or above) installed, you can use the Edit in

PhotoPlus button on the Picture context toolbar to load the image directly into

PhotoPlus. You can carry out your edit and save the file in PhotoPlus—if

embedded or linked, the newly altered image is refreshed and updated in

WebPlus automatically.

Adding an image adjustment

Adding an adjustment is as easy as choosing an option from a drop-down

menu in the Image Adjustments dialog. To assist in the selection of an

appropriate adjustment the list is separated into corrective adjustments (in the

first half of the list), and effect-inducing adjustments (in the second half). As

soon as an adjustment is selected it is added to a stack where additional

adjustments can be added and built up cumulatively. Any adjustment can be

switched on/off, deleted or reordered in this list. The order in which they

appear in the stack may produce very different results—if you’re not happy

with your current order—WebPlus lets you drag and drop your adjustment

into any position in the stack.

Adjustments are applied such that the most recently added adjustment always

appears at the bottom of the list and is applied to the picture last (after the

other adjustments above it). In the above example, the Diffuse Glow effect is

applied to the picture first, followed by Levels.

To add an image adjustment:

1. Select the picture that you want to apply an adjustment to.

2. Click the

button on the Picture context toolbar.

Choose Picture>Image Adjustments from the Format menu.

3. In the Image Adjustments dialog, click

Add Adjustment.

4. From the drop-down list, select an adjustment. The adjustment is added to

the scrollable window.

5. Select the adjustment. There are three methods to configure properties

depending on the adjustment selected:

Adjust settings by moving available sliders (if present) or use input boxes.

For more complex adjustments, make changes in a pop-up dialog

(click Advanced Properties to access).

6. Click the OK button.

Images, Animation, and Multimedia | 135

Some adjustments have no properties and are applied directly as they

are selected.

Add more than one adjustment to the picture by repeating the above

procedure.

To delete an image adjustment:

• With an adjustment selected, click the button.

Switching on/off adjustments

In the same way in which a layer’s contents can be made visible/invisible,

the Mute button can be used to temporarily make an adjustment invisible or

visible.

Modifying adjustments

The properties of any selected adjustment can be changed in one of two ways:

• Properties will be displayed alongside the adjustment appearing in the

stack (in Image Adjustments dialog)—you can alter and experiment with

these.

• The properties of an applied adjustment can be changed by clicking

the Advanced Properties button alongside the effect (in Image

Adjustments dialog)—this is because some effects are more complex to

modify by their nature and need to be presented in a separate dialog.

Reordering adjustments

Adjustments can be moved around the stack to change the order in which they

are applied to the picture. Drag an adjustment name to another position in the

list while holding down the mouse button. A dark line indicates the new

position in which the entry will be place if the mouse button is released.

Multiple adjustments

It’s quite possible to apply several adjustments to the same image, and,

depending on the order in which they are applied, to end up with a different

final result.

136 | Images, Animation, and Multimedia

Importing TWAIN images

If your scanner or digital camera provides TWAIN support, you can scan

pictures directly into WebPlus using the TWAIN standard. Or, save the

scanned image as a TIFF or PCX and then import into WebPlus.

To set up your TWAIN device for importing:

• See the documentation supplied with your scanner for operating

instructions.

To import a scanned image:

• Choose Picture... from the Insert menu, then select TWAIN and Acquire

from the submenu to open a file selection dialog.

If you have more than one TWAIN-compatible device installed, you may need

to select which source you wish to scan with.

To select a different TWAIN source for scanning:

1. Choose Picture... from the Insert menu, then select TWAIN and Select

Source from the submenu.

2. Identify the device you want to use as your TWAIN source.

Adding animation

WebPlus lets you add several varieties of eye-catching animation effects to

any web page: animated marquees, GIF animations, and Flash (.SWF)

files. For any of the animation effects, 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.

Bear in mind that animations do add to the "overhead" or load time

your page requires, and may not display as quickly on the Web as

when previewed in a Wizard.

Images, Animation, and Multimedia | 137

Animated marquees

Animated marquees are an impressive way to add horizontally scrolling

motion to a headline or catch phrase. You can choose the background colour,

enter from one to three lines of text, define text properties (choose from any

installed font), scroll direction, speed and alignment for each line. If you like,

you can define any link destination type for the marquee (see Adding

hyperlinks and anchors on p.

149). For the most compelling effect, select

two lines with strongly contrasting text colours and opposing scroll directions.

Animated marquees appear as static graphics on the WebPlus page. You can

cut, copy, move, and resize them just like other graphics. They will animate

when previewed or viewed in a Web browser.

To create an animated marquee:

• Click the Insert Animated Marquee button on the Web Objects

toolbar’s Media flyout.

Choose Web Object from the Insert menu and select Animated

Marquee... from the submenu.

To edit an animated marquee you've already defined:

• Double-click the marquee. The Insert Animated Marquee dialog

redisplays, with the current settings in place.

GIF animations

WebPlus lets you select and preview any animated GIF. They are particularly

useful to illustrate particular themes or just add some fun to your page! All

GIF animations appear as static images on the WebPlus page and, just like any

image, you can cut, copy, move, and resize them just like other graphics. They

will animate when previewed or viewed in a Web browser.

To preview and insert an animated GIF:

1. Click the

Insert Animated GIF button on the Web Objects toolbar’s

Media flyout.

2. Use the dialog to select the image file to open. Check Preview to examine

images in the window at right.

3. If you check the Place at native dpi option and the image has a different

internal setting, WebPlus will scale the image accordingly; otherwise it

applies a default screen resolution setting of 96 dpi.

138 | Images, Animation, and Multimedia

4. To keep the image separate from the WebPlus file (using a link to the

source file) check Link picture. To include the image in the WebPlus

project, check Embed picture.

5. Click Open.

6. You’ll see the

Picture Paste cursor. Click to insert the animation at a

default size or drag to a custom size.

Flash files

A Flash (*.SWF) file is a viewable movie using the Flash™ Player format.

(Flash is a vector-based program designed to create and display small files on

the Web.) Flash files will play within your page view without the need for

previewing in your browser (or WebPlus preview window). You can cut,

copy, move, and resize them in lots of ways just like other graphics.

To see some Flash files in action, the Gallery tab hosts a stunning collection

of Flash banners (each with pre-assigned Flash parameters already set).

To insert a Flash file:

1. Click the

Insert Flash file button on the Web Objects toolbar’s

Media flyout.

2. Use the dialog to select the Flash file to open (click Browse... then select

your .SWF file). To keep the animation separate from the WebPlus file

(using a link to the source file) uncheck Embed Flash file in site.

3. In the Parameters window, click the Add... button to populate with

parameter name/value pairs. A whole range of parameters can be added

which can report values in the SWF file. Each parameter is appended to

the list.

4. In the Additional Files window, build up a library of files (e.g., images)

which are used to make up your Flash movie. Think of it as a local library

in which supporting files are easily at hand and easily referenced. Click

the Add... button to navigate to then select files for addition (use Ctrl-

click or Shift-click for contiguous or on-contiguous file selection,

respectively).

5. The Display box controls how the Flash movie is presented on your

WebPlus page. Experiment with the options for different looping,

transparency, alignment, scaling, and quality options then click OK.

6. You’ll see the

Picture Paste cursor. Click to insert the file at a default

size or drag to set a custom size region.

Images, Animation, and Multimedia | 139

To edit the Flash file:

• Select the Flash movie, right-click and choose Edit Flash....

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. (Non-streaming files must download in entirety to a user's computer

before they begin playing; streaming files require a special player that buffers

incoming data and can start playing before the whole clip has arrived.)

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). The supported audio formats are

.AIFF, .AU, MIDI (.mid, .midi), .MP3, RealAudio (.ra, .ram), and .WAV.

Linked video works like linked sound. Supported video formats are .AVI,

QuickTime (.mov, .qt), MPEG (.mpg, .mpeg, .mpe, .mpv), and RealVideo

(.ram, .rv).

With both background and linked sound (or video), you have the option of

embedding the source file in your project file, as opposed to keeping it

separate. Although embedding any file adds to the size of the project, it is the

default option because you'll no longer have to worry about juggling separate

files or the chance of accidentally deleting one of them. When you publish

your site, WebPlus takes care of exporting and copying both embedded and

non-embedded files.

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. Both types of files tend to take up a lot of

space, more or less depending on the method of compression you've used. The

large file size translates to long download times for non-streaming files. Media

files also tend to be platform-specific: for example, there are different

Windows, Mac, and Unix sound file formats. For these reasons, except for

very short audio clips, one rarely encounters non-streaming media on the

Web. However, if a fast connection is guaranteed, you can get away with

using longer/larger non-streaming files. A technically complex alternative is to

use streaming media such as RealAudio and RealVideo.

140 | Images, Animation, and Multimedia

To add background sound to a page:

1. Right-click the page in the workspace and choose Page Properties....

Right-click the page entry in the Site tab's Site Structure tree and choose

Page Properties... (or choose the item from the Edit menu).

2. From the Background tab, check Use sound file, then from the Open

dialog, browse to the sound file you want to add. Once the file is selected,

click OK.

3. If you do not

wish to embed the file, uncheck the "Embed sound file in

site" option.

If you choose not to embed your source files, we suggest you keep them

together in a subfolder named "Media" or the like. When you publish your

site, WebPlus exports and copies both embedded and non-embedded files into

a common folder.

4. To have the sound play back as a continuous loop, check "Loop sound".

Otherwise, it will play just once.

5. (Optional) Set Export Options to define an exported file name and

physical location. (See Setting picture export options on p.

129).

The sound file will download and play back when the Web page displays in a

browser.

With both linked sound and linked video, the basic question is how you want

the visitor to be able to trigger the playback of a given media file. WebPlus

offers the same basic options for both kinds of media:

• From a hyperlinked object or hotspot: You start with an existing object

in the site, and hyperlink it to the media file, or use a hotspot over an

image.

• From an icon: WebPlus provides an icon pre-linked to the media file.

You then position the icon on your page.

• From a picture: You select an external picture file, which WebPlus then

imports and links to the media file.

• Inline: A media "player" will be visible on your published Web page

(rather than appearing after the user clicks a link, icon, or picture). In

WebPlus, you'll see a marker on the page where the player will appear.

With the first option, the media file remains external and can't be embedded in

your project. Options 2 to 4 give you the choice of embedding the media file.

Images, Animation, and Multimedia | 141

To add linked sound or video to a page:

• To link from an object or hotspot, choose Hyperlink... from the Insert

menu and select A file on your hard disk as the link target, then locate

the media file.

To link from an icon, picture, or inline player:

1. Click the

Insert Sound Clip or Insert Video Clip button on the

Web Objects toolbar’s Media flyout.

Choose Media from the Insert menu and select either Sound... or Video...

from the submenu.

2. Browse to locate the media file name.

3. Select a link display option (icon, inline, or picture).

4. If you do not

wish to embed the file, uncheck the "Embed picture file in

site" option.

5. Click OK to close the dialog, then click (or click and drag) with the

cursor to place the icon, picture, or marker on your page.

Using the Photo Gallery

The simultaneous expansion of digital camera usage and Broadband services

has created a fantastic opportunity for the publishing your photo collections on

Web pages. There are a multitude of reasons for doing so but some common

ones include:

• Hosting family photos for access by distant relatives

• Special occasions (parties, Christmas, holidays)

• Cataloguing collections (e.g., of animals)

A great Photo Gallery feature is the ability to adopt different gallery types—

choose Thumbnail Grid, Thumbnail Strips/Bars or even Full Images with

theme navigation arrows. The example below shows the "Thumbnail Strip

(Top)" type which is ideal for viewing and navigating images quickly.

Thumbnail Strips and Bars offer theme navigation arrows whereas Thumbnail

Grids display full-size images on thumbnail click.

142 | Images, Animation, and Multimedia

Photos can be imported by file or folder, or from a TWAIN device (digital

camera/scanner). Once arranged in a gallery structure the photo's thumbnails

can be manipulated in a variety of ways. It's possible to:

• Reorder by drag and drop, or using arrangement buttons.

• Sort in specific order.

• Rotate (in 90° anti-clockwise increments)*.

• Temporarily expand thumbnail size for review.

• Add captions.

• Apply decorative frames (from gallery).

Apply e

• ffects such as drop shadows, glows, bevels or a custom Filter

ra images (landscape to portrait) is

lick) or scroll

through thumbnails (by holding the mouse button down).

Effect.

• Apply image adjustments.

*Automatic rotation of digital came

possible (if supported by camera).

For the web visitor, the gallery displayed will offer navigable theme arrow

which can jump to next/previous thumbnails (with single-c

Images, Animation, and Multimedia | 143

Creating the Gallery

The Photo Gallery is inserted on the page, just like an individual image, after

collecting your images together from file, folder, camera, or scanner.

All the images are output as JPGs regardless of the original image type

and the settings in File>Site Properties>Graphics.

To insert a Photo Gallery:

1. Click the

Insert Photo Gallery button on the Standard Objects

toolbar's Picture flyout.

Select Photo Gallery... from the Insert menu.

2. From the dialog's Photos tab, choose whether to:

• Click the Add Files button to navigate to then select the image file(s)

to open. Use Ctrl-click or Shift-click to select multiple non-

contiguous or contiguous files. Use the Preview window to examine

the selected images.

Choose whether to check the Place at native dpi option (the image's

original resolution) or check Place at 96 dpi (to apply a screen

resolution setting of 96 dpi). Click Open.

• Click the Add Folders button to navigate to a folder then add a

selected folder containing your images.

• Click the Add TWAIN button to acquire images form a digital

camera or scanner. If needed, select your TWAIN source in advance

of the Acquire process. Use Acquire... and Select Source... from the

drop-down menu.

• To delete a thumbnail, select it and click the Delete button.

Avoid inserting large image files unnecessarily, e.g. if acquired directly

from digital cameras set for high-resolution (2400 x 1800). If you own

Serif PhotoPlus you can reduce all image sizes in bulk (with a macro)

before inserting them. Alternatively, use another photo editor to resize

manually.

144 | Images, Animation, and Multimedia

3. t il for manipulation, i.e.

• der the thumbnails by drag and drop.

Op ionally, select one or more gallery thumbna

Reor

Use the Move Up, Move Down, Move to Start

•

ption (effects and

offers a different style for

tyle can be easily swapped (see

aphics on p. 49). The gallery preview is updated

flect the new arrow design.

Click

and Move to End buttons in the Arrangement box).

Rotate in 90° intervals anti-clockwise with multiple clicks of the

Rotate button.

• Add a caption under the image with the Caption button (captions

only show during preview or on live site).

• Use the Sort button's drop-down menu to sort all images by filename

(default), file size, date taken, or picture dimensions.

From the Effects box, apply different Frame styles, effects or image

adjustments. Each drop-down menu offers commonly used options,

along with a more advanced Custom... o

adjustments only). Check Apply To All to alter every gallery imag

uncheck to affect only selected images.

Jump to the Settings tab in the same dialog, and select a Gallery type

from the drop-down menu. Each type

presenting your images—try each one out until you find one you like in

the accompanying Preview window.

(Optional) Choose an alternative accompanying theme arrow. These are

based on theme graphics so the s

Incorporating theme gr

to re

6. the Finish button.

where you want the gallery to appear on the page, then simply click the

mouse.

insert the gallery at a default size, position the displayed cursor

allery, drag out a region and release the

To set the size of the inserted g

mouse button.

Images, Animation, and Multimedia | 145

Editing the Photo Gallery

ited. Updating

organizing and applying different set of

effe e all possible.

Once added to the web page the Photo Gallery can be ed

images, changing gallery types, re

cts ar

edit a Photo Gallery:

1. Select a gallery already present on your web page.

2. Double-click the gallery.

Right-click the gallery and choose Edit Photo Gallery....

The Insert Photo Gallery dialog is displayed. The options available are the

same as those available when the gallery was created.

Once a gallery is placed on the page it's also possible to change the gallery

thumbnail size, horizontal/vertical spacing (gap between thumbnails), and the

border size around the gallery by dragging the square control handles, i.e.

hat the Photo Gallery context toolbar,

, also allows you to edit these values—

(H) for horizontal spacing, Spacing (V)

lue

To decrease values (not illustrated) simply drag the control handle in the

opposite direction. You may notice t

displayed when you select any gallery

alter the Size (of thumbnail), Spacing

for vertical spacing and a Border Size (all in pixels). Enter an absolute va

(in pixels) in the input box, click the up/down arrows or use the sliders on

each option's right arrow button.

146 | Images, Animation, and Multimedia

Lin

. Many exist on the Internet but services such

) are particularly popular. Of

es (from a friend or colleague's

her way, you can

appeal of your web site by adopting third-party images,

oncentrate on other areas of design or content generation.

3. k OK.

king remote images

It is possible to connect to any image currently available on the Internet.

However, to prevent copyright infringement it's advisable to use images from

a reliable image hosting service

as ImageShack (http://www.im

ageshack.us/

course you may be able to link to other imag

web site) where legal implications are not as relevant. Eit

enhance the visual

leaving you to c

To insert a remote image:

Go to Insert>Picture>Remote link....

In the dialog, enter the absolute URL for the image.

Clic

You'll see the mouse pointer change to the

Picture Paste cursor. W

you do next de

hat

termines the initial size and placement of the image.

To insert the image at a default size, simply click the mouse.

To set the size of the inserted image, drag out a region and release the

mouse button.

Hyperlinks and

Interactivity

148 | Hyperlinks and Interactivity

Hyperlinks and Interactivity | 149

Adding hyperlinks and anchors

Hyperlinking an object such as a box, some text, or a picture means that a

visitor to your Web site can click on the object to trigger an event. The event

is most commonly a jump to one of the following:

• a Web page (either on your site or somewhere else on the Web)

• an email composition window

• a graphic, text, audio, or video file on you hard disk

• to an anchor (a designated target within a Web page)

• view of any image

element

raphics for navigation elements such

/Next buttons.)

1. ingle or grouped object or highlight the

s, WebPlus inserts helpful text

(for example, t name of the target page).

a full-size image

• a shopping cart

• navigation

• user data

Well-designed hyperlinks are an important aspect of site structure. They help

visitors navigate through your site and serve as an important adjunct to logical

page relationships as shown in the Site Structure tree. (But don’t overlook the

time-saving advantages of using theme g

as navbars and Previous

To add a hyperlink:

Use the Pointer tool to select the s

region of text to be hyperlinked.

You can also simply click for an insertion point in text. If you select in—or

immediately before/after—a word, then the whole word will be hyperlinked.

your selection point has a space on both side

Click the

Hyperlink button on the Tools toolbar.

Choose

menu.

Hyperlink... from the Insert menu or the object's right-click

3. select the link destination type, and enter the specific hyperlink

target.

The Hyperlinks dialog appears.

Click to

150 | Hyperlinks and Interactivity

4. Depending on the link type, choose type-specific options, the Target

window or frame, and Other properties such as Title name and a shortcut

access key.

Note: As a visual cue, hyperlinked words are normally underlined and

appear in the colour you've specified for Hyperlinks in the Scheme

Manager or elsewhere (see Using colour schemes on p.

118).

5. Click OK.

To modify or remove a hyperlink:

1. Use the Pointer tool to select the object, or click for an insertion point

inside the linked text. (It's not necessary to drag over a hyperlinked region

of text.)

2. Click the

Hyperlink button on the Tools toolbar's Hyperlinks

flyout.

Choose Hyperlink... from the Insert or right-click menu.

The Hyperlinks dialog appears with the current link target shown. If the link is

in text, the whole text link highlights.

• To modify the hyperlink, select a new link destination type, target, and/or

options.

• To remove the hyperlink, click the No Hyperlink button.

Inserting an anchor

An anchor is a specific location on a page that can 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 at some point

down the page. Anchors are useful if your page has enough content to be

divided into sections, but not enough to require carving up into separate pages.

These let the reader jump to related content without leaving the current page.

In the same way, keeping Web visitors on the same page makes it less likely

they’ll get "lost’ while perusing the information on your site.

To insert an anchor:

1. Use the Pointer tool to select the target object, or click for an insertion

point inside the target text.

2. Click the

Anchor button on the Tools toolbar's Hyperlinks flyout.

3. In the dialog, type a name for the anchor and click OK.

Hyperlinks and Interactivity | 151

To edit an existing anchor:

• Use the Anchor Manager on the Tools menu to view, rename, or remove

an anchor attached to a particular object.

Adding hotspots to a page

A hotspot is a transparent hyperlink region on a Web page. Usually placed on

top of graphics, hotspots act like "buttons" that respond when clicked in a

Web browser. They are especially useful if you want the visitor to be able to

click on different parts of a picture (such as a graphic "menu" or map of your

site). You can draw and edit hotspots by hand, or create them to match an

existing shape.

To draw a hotspot:

1. Click the

Insert Hotspot button on the Tools toolbar’s Web Objects

flyout.

2. Click and drag to draw a rectangular hotspot region. The Hyperlinks

dialog appears.

3. Click to select the link destination type, and enter the specific hyperlink

target (see Adding hyperlinks and anchors on p.

149).

4. Click OK.

To match a hotspot to an existing shape:

1. Draw the hotspot as described above, and create the shape as described in

Drawing shapes on p.

112.

2. Select both objects and choose Fit Hotspot to Shape from the Tools

menu.

The two objects will still be separate, so you can easily delete the shape if it’s

no longer needed once you’ve used it as a template to produce a hotspot of a

desired shape.

To modify a hotspot hyperlink:

• Using the Pointer tool, double-click the hotspot.

• Click to select the hotspot and click the Hyperlink button on the

Tools toolbar (or choose Hyperlink... from the Insert menu).

The Hyperlinks dialog appears with the current hotspot link target shown.

152 | Hyperlinks and Interactivity

• To modify the hyperlink, select a new link destination type and/or target.

rlink, change the link destination to No Hyperlink.

hotspots on the page, just like other objects. A

bounding box and an inner outline, which

• To remove the hype

iting hotspots

You can move and resize

selected hotspot has both an outer

serve different purposes.

To move or resize a hotspot:

•

• otspot's

o edit the outline, first move the mouse pointer over the

til the cursor changes to indicate whether you're over

Click to select the hotspot, then:

To move, click and drag from the centre, or from the h

bounding box. To constrain the hotspot to vertical or horizontal

movement, hold down the Shift key while dragging.

• To resize, click and drag on its outer (bounding box) handles.

By editing the inner outline, you can convert rectangular hotspots into

freeform shapes that closely match the parts of the underlying graphic you

want to be "hot." T

hotspot's inner outline un

a node or a line.

To crea

te an extra node on a hotspot:

• Click anywhere along the hotspot's outlin en you see te wh cursor.

To change the shape of a hotspot's outline:

• Click and drag a node when you see the cursor.

Hyperlinks and Interactivity | 153

Adding rollovers

The term rollover refers to an interaction between a mouse and a screen

object. For example, you can point your mouse at a graphic (such as a

navigation bar button) on a Web page, and see it instantly change colour or

become a different picture. When you point to a Web page object, your mouse

pointer physically enters the screen region occupied by the object. This

triggers an event called a "mouseover" and, if the underlying code is there to

"trap" this event, it can trigger some other event—such as swapping another

image into the same location. An object whose appearance changes through

image-swapping in response to mouse events is called a rollover graphic.

As a prerequisite to creating a rollover graphic in WebPlus, you’ll need to

prepare a picture for each distinct rollover state, using a separate graphics

program. The necessary event-trapping code is generated for you

automatically. WebPlus also lets you directly import rollover graphics created

in Serif DrawPlus.

Rollover options

Adding rollovers is basically a matter of deciding which rollover state(s) you'll

want to define for a layered graphic, then specifying an image for each state.

DrawPlus provides four basic choices:

• Normal is the "resting" state of the graphic before any rollover, and is

always defined.

• Over is the state triggered by a mouseover— when the mouse pointer is

directly over the object. For example, a button's text might change colour,

or an outline appear, to show the button is "alive." Prior to a mouse click

(see Down), moving the pointer in and out of the graphic's area will

alternate between Over and Normal.

• Down is triggered by a mousedown on the graphic. The term derives from

a typical button's behaviour: its "up" state changes to "down" once it's

been clicked.

It takes more than a mousedown to trigger the button’s hyperlink—it takes a

complete click, i.e. a mousedown and a following mouseup event, both of

them on the button

. If the user has moved the mouse out of the button region

before the mouseup, and you haven’t defined Down+Over (see below), the

button can appear to get "stuck" in the Down state.

154 | Hyperlinks and Interactivity

• Down+Over (only available if Down is activated) implies a mouseover

that occurs when the graphic is already Down, i.e. after it's been clicked.

If you don't activate Down+Over, then the button just stays in its Down

state after a mousedown event, which can cause unresponsiveness (see the

above Note). For a more responsive button, set the Normal and Down

states to graphic A, and the Over and Down+Over states to graphic B. In

this case the Down state effectively means "Down+Not Over" and the

button will revert to its Normal appearance if the user moves the mouse

outside the button, even after a mousedown. It sounds complex, but it

works!

You'll also have the option of specifying a hyperlink event—for example, a

jump to a targeted Web page—that will trigger if the user clicks on the object.

And you can even group buttons on a page so they work together and only one

at a time can be down.

To create a rollover graphic:

1. In a suitable image-editing program, create the variant source images for

each state you'll be defining. (See Creating variant source images on p.

155.)

2. Click the

Insert Rollover button on the Web Objects toolbar's Insert

flyout.

Choose Web Object from the Insert menu and select Rollover... from the

submenu.

3. Specify which rollover states (see above) you want to activate for each

graphic by checking boxes in the Rollover Graphic dialog. For each one,

use the Browse button to locate the corresponding source image and

specify Export Options for that image (see Setting picture export

options on p.

129).

4. Check Embed files in site if you want to incorporate the image(s) in the

WebPlus file. (For details, see Embedding vs. linking on p.

129).

5. Check either Normal or Down as the button's initial rollover state.

For example, common sense dictates that on a site's actual Home page

you should initially show the "Home" button itself as down, and/or

unresponsive to mouse actions—after all, the viewer is already on that

page—whereas buttons that link to other pages should be in their normal

"up" state and responsive.

6. Click Set... to define a hyperlink target for the button. (For details, see

Adding hyperlinks and anchors on p.

149).

Hyperlinks and Interactivity | 155

7. Check Radio button if you want to link all the buttons (on a given page)

that have this option checked, so that only one of them at a time can be

down.

If you use this technique, make sure all rollover graphics you want to link

have the option checked. Although it doesn't matter how the buttons are

distributed on the page, typically they'll constitute a visible unit like a

navigation bar. Any buttons with the option unchecked are independent.

8. Click OK. The first time you define a rollover state, you'll see rollover

layers established in the document (see below).

WebPlus displays the image assigned to the Normal state. It's a good idea to

preview the page and test each rollover object, then return to WebPlus and

revise as needed. When you preview or publish the Web site, WebPlus takes

care of exporting one image file for each rollover state, and the HTML file for

the published page incorporates the JavaScript code for the rollover event

trapping.

To revise a rollover graphic:

1. Right-click the graphic and choose Edit Rollover....

2. Make new selections as needed and click OK.

Creating variant source images

For each object with at least one activated rollover state, you'll need to provide

a source image. It's the often subtle differences between the Normal image and

the "variants" that make the object appear to switch from one state to another.

For example, if you've checked the "Over" state for an object, you need to

include a variant image that the Web page can display when the button is

moused over. In the following example, two variants of a Home button are

shown—one showing the button highlighted (on mouse over), and a second

image in its default Normal state.

You'll need to create these source images in a separate image-editing program.

156 | Hyperlinks and Interactivity

Here are some things to consider:

• Variant images will stretch to fit into the region occupied by the Normal

image, so all the source images should have the same dimensions.

• Make sure the variants are all in precise registration with the Normal

image, so there's no unintended movement when images are swapped on

rollover. To simplify matters, use an image editor with layering capability

and create each variant on a separate layer directly above the Normal

image.

• WebPlus displays only the Normal image, so preview the effect of

swapping graphics by hiding and showing layers in the image editor.

• You only need to provide variant source images for the rollover states

you've activated.

• a

• ing

the assignment process and specify the new

port

ML file (for example, MYFILE.HTML) that includes

the JavaScript code.

Once you're satisfied with the source images, export each layer to

separate file, and then return to WebPlus to define the rollovers.

When assigning the source images, you'll need to choose between link

and embedding. As long as a source image is linked (not embedded),

WebPlus will always use the latest version of a file. So as a rule, until

you're truly sure your source images are final, you may wish to uncheck

the "Embed files" box so that linked images will be used. You can easily

repeat the assignment process, using embedding instead, once the source

images are final. If you do find yourself needing to update an image that

already been embedded, the best way is to save the revised file under a

different name, then repeat

file instead of the old.

porting DrawPlus rollovers

Serif DrawPlus provides not only advanced image editing and layering

capabilities, but built-in tools for producing rollover graphics. For example,

you can preview just a region of your screen in a Web browser, and set ex

options. DrawPlus outputs of a series of image files (for example,

MYFILE_01.GIF, MYFILE_02.GIF, etc.) with variants for each rollover

state, and a single HT

Hyperlinks and Interactivity | 157

To import a DrawPlus rollover graphic:

1. Choose Web Object from the Insert menu and select DrawPlus

Rollover... from the submenu.

2. Locate the HTML file for the rollover graphic. Keep Embed graphic

files checked to incorporate the images into the project, or uncheck to link

them.

3. Click OK.

WebPlus automatically inserts a placeholder for the object.

Adding navigation elements

In WebPlus, certain types of theme graphic called navigation elements are

programmed to understand your site structure, making it easy to design a site

that’s simple to navigate. You just select a navigation element—such as a

Navbar (navigation bar), or a Previous or Next button—from the Studio’s

Theme Graphics tab (or a dialog) and WebPlus does the rest!

Previous/Next buttons automatically link laterally, to adjacent pages on the

same level. Navbars combine buttons with popup menus to facilitate

movement between the various sections and levels of a site. For example, in

this navbar the buttons provide links to the Home page and various top-level

section pages, while popup menus link to child pages within each section.

You can easily install navigation elements at any level of your site,

reconfigure them to link to a particular part of the site, change the appearance

of the popup menu, and exclude particular pages from navigation as needed.

When you define a navigation element, you use standard terminology like

"Parent Level" or "Previous/Next" to specify which part of the site should be

linked to, relative to the starting page—i.e. which buttons should be included.

Because navigation elements "understand" your site structure, they update

dynamically if you alter page names or relationships, or cut/paste the

navigation element to another page! The links are always relative to the page

where the element is located. For example, if a navbar links to child-level

pages, it will continue to do so—even if that means linking to different

pages—if you move it, or the page it’s on, to a different place in the structure.

158 | Hyperlinks and Interactivity

You can place navigation elements on master pages, too—which saves you

the trouble of pasting the same element to multiple pages. A navigation

element on a master page behaves as if it’s on each page

—consistent with the

notion that its buttons and menus are relative to where each page sits in the

overall site structure.

You can make use of tokens (see p.

172) to add variables to your

navigation—use for breadcrumb navigation that will update dynamically if

you add, remove or change pages within the site.

To add a navigation element:

1. Display the Studio’s Theme Graphics tab.

2. In the Categories tree, select a category to browse.

Click Current Site to view theme graphics already in use, for example if

you want to add an element again.

Expand the Sets or Types list, and then select a category to view its

gallery.

With "Theme Graphics" selected as a category, click the Current Site,

View Sets, or View Types thumbnail in the lower Theme Graphics

section. Then click the thumbnail for the type or set you want to browse.

Browse the gallery of available elements and click a particular theme graphic

to add it at the centre of your page. You can also drag from the gallery

thumbnail and drop an element at a specific location.

1. (To add a navigation bar) Click the

Insert Navigation Bar button on

the Web Objects toolbar’s Insert flyout, or choose Navigation Bar... from

the Insert menu.

2. On the dialog’s Theme Set tab, choose a Horizontal or Vertical

orientation and select a theme for the navbar.

3. Customize the Navigation Type and Popup Menu Properties as

described in steps 2 and 3 below (for reconfiguring a navbar).

4. Click OK.

Hyperlinks and Interactivity | 159

Because navigation elements are theme graphics, you can use the Theme

Graphics tab to select coordinated design elements (buttons, etc.) for a

consistent look, and change the overall appearance with a single click. To edit

theme graphic properties such as font, text colour, and mouseover fill colour,

select the object and click its

Edit button. (You can also right-click it

and choose Edit Theme Graphic....) For details, see Incorporating theme

graphics on p.

49.

Navigation bars have their own dialog for reconfiguring navigation properties.

To reconfigure a navigation bar:

1. Double-click it, or right-click it and choose Edit Navigation Bar....

2. On the dialog’s Navigation Type tab:

• Select which buttons should be included in the navbar: Top Level,

Parent Level, Same Level, Child Level, Home, Previous and Next,

Previous, Next, or Up. (See the diagram and discussion above.)

• Depending on the main selection, you can opt to include the parent

page and/or the Home page.

• As a design choice, you may elect to Make all buttons the same size

(otherwise buttons will autofit to their text) and/or Use page names

(otherwise buttons will have functional names like "Previous" or

"Home").

3. On the dialog’s Popup Menu Properties tab:

• To prevent the popup menu from appearing, uncheck This

navigation object has menus.

• t and appearance of the popup menu,

ould

ucture

ou can still install hyperlinks to it; it just won’t show up in a

To change settings for the tex

use the controls at the right.

By default, all pages in the tree are included in navigation—that is, they can

be linked to by navigation elements. You can exclude certain pages (any but

the Home page) so they’ll be ignored by navigation elements. For example,

suppose you had a section of reference or archival pages that you didn’t want

visitors to explore top-down. Excluding the parent page for that section w

remove it from the navbar. Note that excluding the page from navigation

doesn’t remove it from the site—the page will still appear in the Site Str

tree and y

navbar.

Included pages show a

mark in their page entry in the Site tab’s Site

Structure tree, while excluded pages lack the mark.

160 | Hyperlinks and Interactivity

To exclude a page from navigation:

• On the Studio's Site tab, right-click the page in the Site Structure tree and

choose Page Properties.... Below the tree, uncheck Include in

Navigation.

The setting is also available in the Page Properties dialog (Page tab).

If you're looking to rearrange the order or hierarchy of your navigation bar

items to be different from you Site Structure, WebPlus will allow you to

customize any navigation bars—you can also add, edit, or delete elements

which will access a range of link destination types (see Adding hyperlinks

and anchors on p.

149) just as in Site tab's Site Structure.

To customize a navigation bar:

1. Double-click the navigation bar.

Click the

Insert Navigation Bar button on the Web Objects

toolbar’s Insert flyout, or choose Navigation Bar... from the Insert menu.

2. Jump to the Navigation Type tab, and select the "Custom" option. The

Customize tab is automatically displayed.

3. Rearrange the order of the navigation bar items by drag and drop (or use

the Move Up, Move Down, Make Child or Make Parent buttons.

4. Click the Add Element button to add a new element to the end of your

navigation bar list. The element is assigned a link destination, a target

frame or window and a title in the displayed dialog. Click OK.

5. Click OK again.

Any selected element in the customize window can be edited or deleted.

Adding Java applets

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.

Downloaded applets typically consist of a main ".class" file and one or more

associated files (such as other .class files, picture files, media files, etc.).

Hyperlinks and Interactivity | 161

Again, you don't need to understand the underlying code, but it's essential to

make sense of any "Read Me" documentation that comes with the applet.

When using WebPlus to embed an applet, you must list its component files as

well as any necessary parameters (as described in the applet's documentation)

that specify exactly how the applet should run.

When adding a Java applet in WebPlus, you have the option of embedding its

files in your project, as opposed to keeping them separate. Although

embedding any file adds to the size of the project, it is the default option

because you'll no longer have to worry about juggling separate files or the

chance of accidentally deleting one of them. When you publish your site,

WebPlus takes care of exporting and copying both embedded and non-

embedded files.

Bear in mind that Java applets won't execute instantly in a visitor's browser.

As with image or media files, it will take time to download the applet files to

the user's computer before anything "happens" on screen. Take the combined

applet file sizes into account when figuring the time it will take the Web page

to display.

WebPlus inserts a marker into your site at the place where the applet will

appear on your Web page. You can't actually see the applet running until you

preview the exported site. The marker's dimensions probably won't correspond

exactly to those of the applet when it's running, so plan your page layout

accordingly. Also, bear in mind that a Java applet's user interface may look

slightly different on each browser that displays it, even on the same operating

system. The more preview tests you can run, for example using both Netscape

Navigator and Microsoft Internet Explorer, the better.

To add a Java applet to a page:

1. Click the

Insert Java Applet button on the Web Objects toolbar’s

Media flyout.

2. In the dialog, click Browse... to locate and select a specific Applet Class

File or archive file (.JAR or .ZIP). If the latter is specified, you have to

select which .class file should be run from within the archive file.

3. Click the upper Add.. button to locate any other files required by the

applet. You can hold down the Ctrl or Shift key to select multiple files in

the dialog. To delete a file once you've added it to your list, click the file

name and then click the Delete button.

4. If you do not

wish to embed the files in your project, uncheck the

"Embed" option.

162 | Hyperlinks and Interactivity

5. Click the lower Add... button to enter any required parameters (see

documentation supplied with the Java applet). Add parameters one at a

time, typing the Name and Value (excluding quotation marks) in the

fields provided.

To delete a parameter from the list (for example if you typed it wrong),

click the Up or Down buttons to select the parameter, then click the

Delete button below the list.

6. Click OK to close the dialog, then click (or click and drag) with the

cursor to place the Java marker on your page.

When you publish your site, WebPlus will export and copy both

embedded and non-embedded files into a common folder along with

the HTML pages and graphics. Keep this in mind when entering file

paths. If the applet's documentation insists on certain components

being placed into separate subdirectories, you'll need to place them

there "by hand" using an FTP utility.

WebPlus

Advanced

164 | WebPlus Advanced

WebPlus Advanced | 165

Creating HTML pages

HTML code is the underlying tagged code which your web site visitor's

Internet browser reads, interprets and formats your page according to the tags

used. The code and tags used are the instructions to which a page will be

formatted, and as such it is vital that the code is correctly structured and

conforms to HTML convention.

WebPlus supports the development of web pages in pure W3C-compliant

HTML. You can add pages within the Site tab's Site Structure window—a

distinct HTML page icon is shown.

HTML pages in the Site tab can be controlled in a similar way to standard

pages, i.e. you can drag/drop, rename, preview, insert offline links to, estimate

download time for any page. However, HTML pages do not have master

pages associated with them, In addition, a double-click of the HTML page

icon will launch the HTML page's Source window for HTML editing (rather

than the WYSIWYG display of a standard page). In the Source window you'll

see some basic HTML tags which, if you're an experienced HTML developer,

will be very familiar to you!

There is no WYSIWYG view when you work with HTML source code

directly.

From this point, a text-based edit of the "template" HTML structure is

required. Body text can be pasted between the <body> and </body> tags, with

each paragraph beginning and ending in <p> and </p>, respectively. It's worth

noting that editing HTML code requires prior understanding of HTML

language and its convention. Poor editing may result in corruption of your

code on the page or site level.

166 | WebPlus Advanced

If you're new to HTML and need to start with the basics, it's best to search for

"HTML tutorials" in your favourite Internet search engine before tackling

HTML editing in earnest.

To create an HTML page:

• Right-click a page in your Site tab and select Insert HTML page....

Click the

Site Structure button just above the Site Structure tree (or

on the HintLine), or choose Site Structure... from the File menu. In the

dialog, select a page and click the Html page... button (optionally as a

child of the selected page).

A new page is added after the right-clicked page to the Site tab.

To edit an HTML page's source:

• Double-click the HTML page icon in the Site tab's Site Structure and edit

the displayed code.

To change HTML page properties:

• Right-click on the HTML page icon in the Site tab, and pick Page

Properties.

• From the dialog, uncheck Include in Navigation so the page does not

appear in navigation bars.

• ame the HTML page's file name.

ges

active. This can be done in three

urce of:

t placed on the page

ers (shown in green text colour)

will appear in your source tab's window.

Click the Change... button to ren

Attaching HTML code

In WebPlus, you can create pages in pure HTML (see Creating HTML pa

on p.

165). However, WebPlus also lets you attach code to your WebPlus

objects and pages, primarily to expand the capabilities of the objects (or the

page), making them more intelligent and inter

ways—you can attach code to the so

• a self-inserted HTML fragment

• a specific objec

• an entire page

It's not possible to edit the HTML code itself (there's no real benefit in doing

so), but specific areas of the displayed code are editable for additional code t

be added, i.e. clearly identifiable placehold

WebPlus Advanced | 167

These are just a few of the editable placeholders present in the source of an

HTML fragment, object or page (in fact differently named placeholders exist

depending on the type of element). For example, the last placeholder shown in

the list above is unique to a page's source and won't appear for an object or

HTML fragment.

Any code can be inserted by cut and paste into any of the placeholder

positions but typically you can include tokens, HTML code or specific scripts,

e.g. JavaScript. This could be used to affect rollover behaviour on an object

not otherwise possible without scripting support, e.g. an image "on-click"

handler.

Adding HTML

WebPlus also allows you to add extra HTML code to a page. Using this

approach, you can include fragments either copied from another Web page, or

perhaps written by yourself.

You can also import formatted HTML text from a browser or email program

via the Clipboard (for example with a browser’s Select All and Copy

commands), using WebPlus’s File>Paste Special... command. Using the

Import Web Pages option, you can import one or more HTML pages into

your new or existing WebPlus site, with control over which additional

elements are imported.

168 | WebPlus Advanced

When you import HTML code, WebPlus inserts a marker into your site at the

site where the code will be placed. Since you won't be able to see the effect of

the HTML until you preview the site, be careful to place the marker correctly.

You'll definitely want to check your Web page in a browser! If there's a

problem, double-check the code you entered and its position on the WebPlus

page. If you have some grasp of HTML, examine the page source in a text

editor such as Notepad or use your browser's "View Source" mode.

To add an HTML code fragment to a page:

1. Click the

Insert HTML Code button on the Web Objects toolbar.

2. Click on the page or pasteboard to create a new HTML Code Fragment

window at a default size or drag to adjust the window's dimensions.

3. In the dialog, use the Paste to Head or Paste to Body button to insert the

clipboard text into the header of the file or into its body.

Use the scrollable code window. Enter one or more HTML code

fragments into the appropriate field.

4. If the code calls for external files, use the Add button to locate them.

Click the Embed button if you want to keep the file(s) separate from your

project file.

5. Click OK to close the dialog, then click (or click and drag) with the

cursor to place the HTML marker on your page.

Adding JavaScript

To source a vast array of JavaScript code, try searching for "javascript

snippets" in your favourite search engine. You should find many thousands of

sites hosting freely available code snippets. Most of these sites will clearly

indicate what the JavaScript will do for you—they'll also normally let you

select the JavaScript code and copy it for pasting into an HTML fragment's,

object's or page's Source window, HTML table cell or directly onto the page.

Here are some typical uses when applying code to your web pages.

• Disable right-mouse click on page objects

• Add a Print current page button

• Add a date and time to your page

• Change an object's colour when selected

WebPlus Advanced | 169

Let's look at how to add some of JavaScript (sourced or written by yourself if

you've experience of JavaScript programming).

To illustrate, compare the two pieces of example code below. A very simple

JavaScript code snippet is added to the Source window which will display th

current date on your web page. The first section of cod

e uses the last

pla

after a script has replaced the placeholder.

showing

placeholder

ceholde

code looks

Code

r in the above list (), the second how the

Code after

added

JavaScript

ced in a source

This simple example illustrates where simple code is pla

window.

170 | WebPlus Advanced

To attach code to an HTML fragment or object

Select an existing HTML fragment or object.

Attach HTML...

n what you want to achieve.

r's location

2. From the Format menu, select .

Right-click on the object and choose the same option.

3. In the dialog, scroll the source window to locate editable placeholders.

Which placeholder you choose depends o

Select all of the placeholder and paste HTML, script or any other text

string to overwrite the placeholder text.

Select all of the placeholder and type directly in the placeholde

(again overwriting the placeholder text).

5. Click the OK button to return to your normal page view.

You can make use of tokens to add a range of variables to your

HTML. Use for breadcrumb navigation that will update dynamically if

you add, remove or change pages within the site.

For more complex scripting, it may be necessary to add supporting files

(graphics, text files, etc.) that the inserted script may use—these can be

either

he files are either kept with the WPP project

ernally via a link (much like a hyperlink).

e size when embedding several images.

listed in the Files list and will be embedded in your project

f you choose not to embed files (making your project

4. Click OK.

At any point, you can Add, Delete, and change Export Options for any file.

embedded or linked. This means t

(embedded) or are referenced ext

Consider your final project fil

To add supporting files:

Click the Add... button.

2. From the Open dialog, navigate to then select one or more files (use Ctrl

click and Shift-click for non-contiguous or contiguous selection,

respectively). Click Open.

3. The files are

by default. I

smaller), then select each file and click the Make Linked button.

WebPlus Advanced | 171

To attach code to a page:

1. Right-click on the page and choose Attach HTML....

Choose the Attach HTML button on the Standard toolbar.

2. In the dialog, scroll the window to locate editable placeholders. Which

placeholder you choose depends on what you want to achieve.

3. Select all of the placeholder and paste HTML, script or any other text

string to overwrite the placeholder text.

Select all of the placeholder and type directly in the placeholder's location

(again overwriting the placeholder text).

4. To switch back to your normal page view, click the project tab at the top

of the source window.

Using IDs

All objects in WebPlus are given unique alphanumeric IDs for referencing by

scripting languages. By default, ID generation is automatic for each object,

text column, table row and table cell. For example, a newly drawn

QuickShape will automatically be assigned an ID of "qs_1", a second

QuickShape will be "qs_2", pictures could be "pic_1", "pic_2", etc.

It may be perfectly acceptable to utilize these automatic IDs in your scripts but

if you need to assign your own IDs, it's possible to turn off the site-wide

automatic generation of IDs in the Options tab of the Site Properties dialog

(select Site Properties... from the File menu). Uncheck the option specific for

object, text column, table row and/or table cell and press OK. Your own

replacement IDs can instead be added in the available placeholder, i.e.

If the object is copied on the same page or to another web site, the ID

number will be replaced by a new ID number.

Any object ID can be edited once the object is on the web page. A different

name can be used or, if you don't want to show an object's ID (but want to

keep site-wide ID generation), you can prevent the ID from being shown in

source code.

172 | WebPlus Advanced

To edit an object ID:

1. Right-click an object and select ID.

Select the object and choose HTML ID... from the Format menu.

2. In the dialog, modify the HTML ID value.

3. (Optional) Choose whether to Write ID for this object. Selecting "Use

Site default" means that the setting in the Options tab of the Site

Properties dialog is honoured—"Yes" or "No" means that the object's ID

is always shown or never shown irrespective of the site default setting.

Tokens

WebPlus provides a range of grouped HTML annotation tokens which can be

attached to HTML fragments, objects or pages. They get replaced by

appropriate "real" values when you export to a file or preview your page.

Adding tokens is a simple case of inserting a token string, by copy and paste

or typing directly, into one of the placeholder positions in any HTML source.

A full list of such tokens is provided in the WebPlus Help (search for tokens

in the Index).

Forms

Web-based forms allow information to be collected from visitors to your web

site in an efficient and modern manner. In much the same way as traditional

paper forms are used to collect information, Web-based forms offer the same

form completion concepts, but take advantage of the Internet as a powerful

information conduit.

Some common form types are:

• Application forms

• Contact Information forms

• Request forms

• Subscription forms

• s Feedback form

• Guest books

WebPlus Advanced | 173

Form data can be co

Seri

llected in a variety of ways—by email, to a text file,

can

to familiar objects in WebPlus

d can be a Button, Box, Text Area,

File browser. A typical form is

.g.

database, or via f Web Resources, a web service for transferring form

data to customer email addresses.

rm Structure

The building blocks of a form comprise a mixture of text, graphics and form

controls. Form controls are intelligent as they collect web visitor data and

be added, moved and modified in a similar way

such as graphics and table elements. A fiel

Combo box, Check box, Radio Button, or

made up of a combination of these fields, e

From the web visitor'

s perspective, information is typed into text boxes or

a mixture of both, depending

on the type of field.

Each field has its own set of properties relating to its appearance, its value(s),

validation, or the action expected of the field.

selected from check boxes, radio buttons, or drop-down boxes. The

information entered can be numeric, textual, or

174 | WebPlus Advanced

In WebPlus, the form should be integrated into your site design as you

develop your site. The form's functionality only then becomes active when

your web site is published (of course you can still preview your forms from

within WebPlus, see Previewing your Web site on p.

209). When a web

visitor enters data into, or selects a form option, the data will be sent back to a

chosen destination when the form is submitted.

Where is data sent?

After submission, form data can be sent to one of the following:

• an email address

• a script file (stored locally or remotely); this could write text to a text file

or into a server database

• Serif Web Resources; for transit of form data to your email (via Serif).

As is standard in Web form management, it is possible to set the encoding

type, target window/frames, submission methods (POST or GET) can be used.

WebPlus Advanced | 175

Using Standard Forms

If you're still confused by forms as a concept you don't need to panic!

WebPlus comes complete with a range of ready-to-go standard forms.

Alternatively, standard web form objects, acting as building blocks for your

form, can be adopted to modify existing forms or create your own forms. For

ready-to-go forms there's no need to add form controls, submission buttons,

form control validation or perform time-consuming form design work—it's

already done for you!

Using JavaScript

JavaScript can be used to allow interactivity in your Web forms. It drives

formatting, validation, calculations, and actions—all key functions in Web-

based form development.

Creating forms

Several methods exist for creating forms dependent on whether you wish to be

helped with a WebForm Wizard, use standard forms (i.e., pre-defined ready-

to-go forms supplied with WebPlus), or create a form from scratch.

Whichever method is chosen will depend on the level of customization you

want to go to—as a rule of thumb, it's always best to familiarize yourself with

WebPlus's standard forms that could be used first. This may save you time,

and allow you to create your form more easily.

To create a form (via WebForm Wizard):

1. Click the

Insert Form Wizard on the Web Objects toolbar's Forms

flyout.

2. In the dialog, click the Create a new form with the wizard icon and

then Next>.

3. In the next screen, you need to add form controls that will make up your

form. In the Add box, click on your chosen form control. See Form

controls on p.

178 for a detailed description of each control.

Want to speed up design? Use the Pre-defined button to adopt a

wide range of ready-to-go form components.

176 | WebPlus Advanced

4. In the form control's Add New Control dialog use the internal name for

the control (to uniquely identify it), or edit it and enter a label to

accompany the control (this is shown on-screen). The Add New Control

dialog also lets you edit the control and its label—use the Edit Control...

or Edit Label... button, respectively. Editing a control allows validation,

control of form length, and other control attributes to be set. See Editing

form controls on p.

178 for more information. If you've edited a value,

click OK.

5. Repeat the above two steps as necessary for each chosen form control.

They will be listed (in order of creation) in the upper window.

Before continuing, you have to add a Submit form control to your form.

This is vital to pass data to its destination. Click the Submit Button to

automatically add the button to your form. It is normal practice to

accompany this with a Reset Button, used to clear out form fields of data

not yet submitted.

Click Next>.

6. From the next screen, choose a destination for your form data by clicking

a destination button for email, script file (local or remote) and Serif Web

Resources and a name to define the whole form. (See Submission of

forms on p.

182). Select Finish to complete the wizard.

To insert the form at a default size, position the form place cursor

where you want the form to appear on the page, then simply click the

mouse.

If you prefer a different approach, you can add a Standard form. Standard

forms are pre-defined forms for Contact information, User comments, CV

submission, Opinion, and Address forms to name a few. You can also build up

standard forms from a gallery of single or multiple pre-defined form objects

(see To create a form from scratch below).

To create a standard form:

1. Click the

Insert Form Wizard on the Web Objects toolbar's Forms

flyout.

2. In the dialog, click the Use and adapt a standard form icon and then

Next>.

3. From the list of forms, select a form type while using the Preview pane.

4. Click Next>.

5. In the next screen, choose to add, modify or delete.

WebPlus Advanced | 177

• To add, click a button in the Add box.

• To modify a standard object, select an existing control in the window

and choose Edit Control.... See Editing form controls on p.

181 for

more information.

• To delete a standard object, select an existing control in the window

and choose Delete.

• To rearrange the control order, use the Move Up and Move Down

buttons.

6. From the next screen, choose a destination for your form data by clicking

a destination button. Select Finish to complete the wizard.

To insert the form at a default size, position the form place cursor

and click the mouse.

If you're looking for design freedom, WebPlus provides a blank form and

form objects from which you can design your form from scratch. You can add

form controls or standard form objects, or both.

To create a form from scratch:

1. Click the

Insert Blank Form button on the Web Objects toolbar's

Forms flyout. You'll see the mouse pointer change to the Form Paste

cursor. What you do next determines the initial size and placement of the

form.

2. To insert the form at a default size, simply click the mouse. The created

form is composed of a grey form area and a Submit button.

To set the size of the inserted form, drag out a region and release the

mouse button.

Once the blank form is established, form controls or standard web form

objects can be added to the form area, i.e.

•

grey form area, positioning

ontrol using rulers, the grid or guides.

From the Web Objects toolbar's Forms flyout, drag any one of the form

controls, e.g. an Edit Box, directly onto the

the c

178 | WebPlus Advanced

1. Click the Insert Standard Form Object button on the Web Objects

toolbar's Forms flyout.

2. the dialog, choose a category, and select a form object from the

category list, e.g. a countries

From

drop-down menu. Click OK.

To insert the object, position the form place cursor over the

area, then click the mouse.

form

edited by clicking the

• Right-click on a standard form and choose Form Wizard....

Standard form objects, when selected, can be

Edit

button on the Web Objects toolbar's Forms flyout.

can be moved as for other objects but cannot have colours or

directly from the Web Objects toolbar (or via the Form option on the Insert

menu). You assign an internal unique name to each field and then set a variety

of properties—each form control has its own set which can be modified.

Standard Form Object

As we're looking a

t forms and in particular form objects in more detail, let's

take a more in-depth look at form controls.

rm controls

Each form control is an "intelligent" object which differs from other WebPlu

objects. They

transparency applied, borders adjusted, or resized. They are intelligent because

they can store user input and pass it on to a central location during form

submission.

A range of form controls are available from within the WebForm Wizard or

WebPlus Advanced | 179

Web

Objects

Toolbar

Icon

Form

Control

Name

When to use?

Form

Button

Use when specifying an action that can be

triggered by a button click. A whole range of

buttons of varying design and function can be

created. Some uses include:

• Advanced - Displays menu options that are

only applicable for advanced uses.

• Show All - Displays all menu options.

• Next page - Jumps to the next page.

• Open - Opens a file or Web link.

• Import - Imports form data.

Note that Submit and Reset buttons are available in

the WebForm wizard. They perform form

submission and clear all form data, respectively.

Edit

Box

Use for entering single-line text, numbers, or a

mixture of both. Someone's surname or insurance

number would be a good example.

Text

Area

Use for adding multi-line text, numbers or a

mixture of both. Generally used for entering input,

either textual or numerical, e.g. an enquiry, recipe,

or list of figures.

Combo

Box

For selection from a list of items in a drop-down

menu where only one item can be selected by

default, e.g. a gender combo.

Combo boxes also allow for a scrollable list of

items; with optional support for multiple selection.

For example, to select Afghanistan, Algeria, and

Andorra, use Ctrl-click on each item:

180 | WebPlus Advanced

You can use Shift-click to group select a range of

items.

For multiple selection, drag the top or bottom of

the Combo box to allow several items to be

displayed by default.

Check

Box

Ideal when you want to multiply select a series of

items displayed side by side. A good alternative to

a Combo Box if space allows. The web visitor

clicks once to select or deselect the box, e.g.

Would you like to be notified of any upcoming

events in the near future?

Radio

Button

Good for selection of a single mutually exclusive

item from a grouped subset of choices. For

example, a set of radio buttons can be used to

obtain gender information from the web visitor.

File

Browser

Use the File browser to have your web visitors

upload any file from their computers. The visitor

simply navigates via a Browse... button and select

the file of their choice. Some examples include

uploading pictures, CVs, drawings and

instructions.

Hidden objects can be added as a form control if you use the WebForm

Wizard. Although the web visitor does not see the field it is typically used by

the web developer to ensure the data collected has an identifiable string stored

with the user's data. An example could be a publish date relating to the web

page—useful for identifying incorrectly working pages.

WebPlus Advanced | 181

In addition, hidden fields can be added by right-clicking on the entire form

and selecting Edit Form Properties.... The dialog's Hidden Fields tab allows

for input of any number of hidden fields.

Editing form controls

Each form control type (buttons, text field, etc.) has different characteristics

and therefore different values for editing. Values can be changed as you create

the form or at a later time after the control has been added to the form.

Typically you may want to:

• change the internally stored control Name and its Initial Value (what

gets displayed on-screen by default).

• treat the control's value as script (check to preserve initial value's script

content instead of converting it to HTML).

• set a Maximum length for the field (use as a type of validation).

• set the field to Disabled. Check to make the control inactive unless

activated by script.

• control with a keyboard shortcut (use

•

control on the web page and choosing the Edit option,

ces

value

pairs one-by-one (use the Add Another button to speed up the process).

set an Access key. Jump to the form

with Alt key and keyboard letter).

make a control Read only (check to make control non-editable unless

changed by script). Could be conditional on other fields being completed.

• create a control suitable for a Password (web visitor input is masked).

The WebForm Wizard's Edit Control... button lets you modify the control

during form creation. Alternatively, the control can be edited later by right-

clicking on the form

e.g. Edit Text Box.

Combo Box editing

Editing a combo box is a little more complicated than other fields. The comb

Box needs to be populated with multiple entries to create selection choi

within the box. In the From Combo Box dialog, use Add Options... to

sequentially build up your menu entries—this involves adding name and

182 | WebPlus Advanced

Any Combo Box will support Groups. This means you can categorize entries

into common groupings for easier navigation. While the group itself is not

selectable you can make more sense of a long list of entries by creating the

group name (click Add Group...) and moving entries under the group with the

Make Child button (position entry under the chosen group). For example, a

country Combo Box could be categorized by continent.

Radio Box editing

Radio box from controls operate slightly differently to other form controls. To

operate correctly, Radio buttons which are intended to be grouped, must both

be configured to be a part of the same configurable Group Name. Simply

create a group name for the first radio button and adopt that name for any

other radio buttons intended for that group.

Submission of forms

All forms have one thing in common—they must be submitted to allow data to

be collected. To do this you can either create a Submit Button unaided or

more usually use the ready-made button in the WebForm Wizard. The button

needs to be present on the form and is typically used with a Reset button to

clear all form controls of data.

Form data is not submitted. This option is useful if you

want to temporarily disable data collection or if you

haven't set up scripting or Serif Web Resources. At a later

time to can edit the form (right-click then choose Edit

Form Properties) and select a valid submission method.

No action

Not everyone will have access to or even want to operate

their own Web server so, as an alternative, you can use

Serif Web Resources. This is a free Web to email

gateway service which will transit your valued form data

via Serif and send it to your personal email address—the

service does require that you firstly have a Serif Web

resources login (for security reasons), which will allow

you to create, edit and delete your own email destinations,

these are called Form Email Targets.

Serif Web

Resources

WebPlus Advanced | 183

To set up Serif Web Resources:

1. With the Serif Web Resources icon enabled, add

a Form name.

2. Click the Select button and login to Serif Web

Resources.

3. From the dialog, enter your destination email in

the New Target box and click Add New Target.

The email entry is created and added to the

available email address list—with the email

address selected, click OK. You'll notice that the

entry is classed as "Not Confirmed". Before the

service commences, you'll get a email

confirmation message sent to your email address.

By clicking the link, the service will be activated

and the entry will change to "Confirmed".

4. Choose a submission method, encoding type, and

target window/frame.

You can remove an entry by selecting it and clicking

Remove Target.

You may be wondering what typical form data might

look like once sent through Serif Web Resources.

Here's an example of data collected from a simple

form.

Time Submitted: Thu, 01 Jun 2006 17:45:10 BST

Referrer:

From IP: 80.6.91.225

firstname = Doug

lastname = Walker

gender = Male

info = Social Events

Incidentally, the web visitor will receive a basic

confirmation page generated by Serif Web Resources to

acknowledge successful receipt of form data. As a useful

tip you can create and assign your very own

acknowledgment web page to be used instead of this basic

page. Your own page is just like any other web page so

you can add your own information, and design the page in

the same style and appearance as the rest of your web site.

184 | WebPlus Advanced

To add your own acknowledgement page:

1. Right-click on the form (must submit data via

Serif Web Resources) and choose Edit Form

Properties....

2. Switch to the Hidden Fields tab, click the Add...

button and add the word "redirect" to the Name

field and your intended target URL with http://

prefix (i.e., the web address of your own

acknowledgement page) in the Value field.

3. Click OK. The new web page will display on the

next form submission.

No personal data will be stored on Serif Web

servers. All form data is redirected in real time.

This option is for experienced web developers with

scripting expertise. Typically a script file is written and

stored along with WebPlus's other web pages and is

uploaded during the Publish to the World Wide Web

operation.

If uploading to an ISP, it's essential to check with your ISP

in advance if scripting is allowed on your web space. If

not, you will have to adopt another solution, perhaps

choosing another ISP that allow scripting or choose a

script file hosted on your ISP (most provide a simple

script; you would use the Remote script option below for

this). If in doubt, contact your ISP if you're not sure.

Script file

To set up a local script file:

1. With the Script file icon enabled, add a Form

name.

2. Navigate to your local script file, typically a

.CGI, .PL, .DLL, or .EXE file with the Browse

button.

3. Check Embed to include the script within the

WebPlus project. If unchecked, the script file will

be unconnected to the project (any updates to the

script will be invisible to the project).

WebPlus Advanced | 185

4. Optionally, the Export Options... button lets you

define a web file name and folder for the script.

5. Choose a submission method, encoding type, and

target window/frame.

Use if your ISP will not allow you to run your own scripts

on your ISP web space. Instead, your ISP may supply a

basic script file that can be linked to from your web page.

Typically, the script will send the form data back to your

email address (already setup with your ISP).

Remote

script

To set up a remote script file:

1. With the Remote script icon enabled, add a

Form name.

2. Enter a URL pointing directly to a script file,

typically a .CGI, .PL, .DLL, or .EXE file.

3. Choose a submission method, encoding type, and

target window/frame.

Use this option to bypass the usual POST/GET submission

methods. When the Submit button is pressed the web

visitor's default email program is launched. The form data

(passed in a single string) is added to the email body and

is ready to be sent to the configured email destination.

Especially useful if there is no local or remote scripting in

place.

address

This is an unsecure submission method—any

private or confidential information will be not be

encrypted.

To set up email directly:

1. With the email address icon enabled, add a Form

name.

2. Enter the destination email address in the drop-

down menu.

As the data is sent in a string you may have to disassemble

the string into more manageable and useable text.

Applying a script, e.g., a Microsoft Word macro, would be

one solution.

186 | WebPlus Advanced

You cannot use the File browser feature when

using this submission method. Instead add the

file as an attachment directly within your email

program.

You can set a default subject line by entering a subject line

string after your normal email address, e.g.

fred.walker@hotmail.com?subject=New%20Contact%Det

ails

Where %20 is used to include a space character.

This is a great way of identifying form-generated emails

entering your inbox—the subject line will always be "New

Contact Details." Additionally, try an email filter on "New

Contact Details" to automatically sort "form" emails from

usual emails.

To set up the submission method (POST or GET), encoding type or target

window/frames see WebPlus help.

Arranging tab order

Web visitors have two options for navigating their web forms—by clicking in

each field in turn (using the mouse) or using the Tab key to jump from field to

field. The latter method is more efficient as web forms are generally designed

to be completed in a sequential manner.

This tab sequence is controlled by the order in which the form designer adds

the form fields to the page during the design process. Clearly, the form design

may change during development so the tab order is prone to getting out of

sequence. Fortunately, the tab order be changed at any time.

WebPlus Advanced | 187

To change tab order:

1. Click the

Tab Order button on the Web Objects toolbar's Forms

flyout. This reveals numbered tab markers on all your form controls.

2. Sequentially, click on the form fields in the order in which you want them

to be assigned tab numbers. This automatically assigns a new tab number

to the marker—your first click will be to assign 1 in First Name field, the

second click 2 in the Last Name field, etc.

3. Click the Tab Order button again to switch off the tab markers.

If you're not happy with the order you've assigned, click the Tab Order button

and start again.

You can also right-click a form and choose Change Tab Order from the

menu. Tab markers are shown and can be changed as before. Click the form to

switch off makers.

Remember to include any Submit and Reset buttons in the Tab Order.

Validating data entry

During or after designing your form it is possible to apply some data entry

rules, i.e. validation, on your form controls. The main objective is to ensure

that the form is filled out correctly and ensures that data is useable. This is

done by checking that user's data entered into each field is of the correct

format, structure and sequence. If not, the user is informed of this via a pop-up

message, which is configurable.

If data entry is not correct the form cannot be submitted until validation is

successful.

188 | WebPlus Advanced

To set form control validation:

1. Right-click on the form control and choose the Edit option (e.g., Edit

Form Text Box). For each form control this is different.

2. Jump to the Validation tab, and check appropriate validation for the form

control, i.e.

• For Edit Boxes, check if the box must be filled, a number only, or

email address only. You can also restrict the number range that the

web visitor can input by setting a Minimum value and Maximum

value.

• For Text Area, check if the area must be filled.

• For Combo Boxes, check if a selection must be made.

• For Check boxes, check if a check box must be checked.

•

plete the form control successfully.

d by the web visitor, the custom script is

on include:

• account numbers with a set structure (e.g., EM 158 3466

available

t (search your favourite search engine for "beginning

javascript").

For the File browser, check if a file must be uploaded.

Each check box is accompanied by a message box. Enter a supporting

message to help your web visitor com

Custom Validation with JavaScript

For Edit Boxes, more advanced validation on forms can be performed within

WebPlus. It's possible to write your own JavaScript code and apply it in the

Custom validation script window (see Attaching HTML code on p.

166).

When the form control is complete

run and validation is carried out.

Some examples of custom validati

• the blocking of swear words.

Specifying

7546//2).

The development of JavaScript code is outside the scope of this User Guide.

To get started with writing JavaScript, try one of the many tutorials

on the Interne

WebPlus Advanced | 189

Using Smart Objects

It's quite common for web developers to "inherit" content from existing web

sites to save time and effort, while bearing in mind any legal implications in

doing so. This is fine for simple graphic or text copying, but this process is not

possible for more complex, interactive objects such as counters, shout boxes,

blogs, etc, which collect information with the object. The power of, for

example, a hit counter lies in its ability to keep a count of the number of users

that have visited a page at all times. The count needs to be stored somewhere

and herein lies the problem. Storing object data (counts, chat text, blog text, is

not always encouraged or even supported on ISP web space—due to potential

security breaches and disk usage demands. So where can the data be stored?

To resolve the problem for Serif WebPlus users, WebPlus can place such

objects, called Smart Objects, on the page and also store associated object

data on Serif's own secure server space. These objects are available from Serif

Web Resources a secure online service for obtaining objects and storing data

at the same time.

An advantage of using Serif's Smart Objects is that they are optimized and

fully tested for use in your current WebPlus project. In addition, the objects

are hosted online so new updates may be added over time.

Let's look at each Smart Object you'll find in Web Resources and what you

can do with them.

Name Use

Active Viewers

Use to show how many people are currently viewing

the web page.

Blog

A blog (short for weblog) acts as a personal journal

on your web page and is frequently updated (often

daily) with articles. Articles are typically commented

on by visitors to the web page.

Hit Counter

A straightforward count of the number of hits on the

current page. Different styles can be adopted.

Mailing List

Have users sign up to newsletters, party

confirmations, information request, and many more,

by collection of web visitor's emails as required.

190 | WebPlus Advanced

Poll

Set up a online poll to canvass web visitor's opinions.

Shout Box

Acts as a interactive chat window similar to

Windows Messenger. Let your web visitors chat

amongst themselves.

For security reasons, the objects are only available via a Serif Web Resources

password you must create a Web Resources account first.

• If your email address is already known to Serif (maybe you've just

registered or have registered previously) you'll be asked for a limited

number of questions to completed account registration.

• If you're new to Serif and unregistered you'll have to complete full

security as required. Full instructions are provided on login screens.

By the way, you may have come across Serif Web Resources if you've been

using WebPlus 10's forms functionality (see p.

172). The form submission

process allows form data to be emailed via Serif Web Resources to a specified

mail address. The same login can be used but a different area of Web

Resources is displayed if either forms or Smart Objects are to be used.

To create a Serif Web Resources account:

1. Click the

Smart Object Tool button on the Web Objects toolbar.

2. In the login dialog, click the Create Account link under the login boxes.

3. In the next dialog, enter your current email address and a password twice.

4. Click the Signup button.

5. An additional dialog, will ask for personal details, plus a few check boxes

if you would like to receive the Serif Community newsletter, Serif offers,

and/or other third-party offers.

6. A confirmation email will be sent to your email address. Click the link in

the email and you're ready to access Web Resources.

WebPlus Advanced | 191

To clear Account details:

• Go to Tools>Options and click Clear Account Details shown from the

General option. This will clear the stored login details for Serif Web

Resources so that automatic login will no longer work. Details will need

to be entered next time so be sure you've remembered your password.

To access Web Resources:

1. Click the

Smart Object Tool button on the Web Objects toolbar.

2. At the login prompt enter your username and your password. Select

Remember account details to access Web Resources directly in future

(bypassing the login screen).

3. Click the Login button. The Smart Objects dialog is displayed.

Creating Smart Objects

Think of a Smart Object as being a general term for elements that you'll use on

your page—as discussed previously. The actual creation of such an object is

quite painless. Smart Objects are not added directly to the page from Serif

Web Resources, but are first added to your own object library (the library lets

you manage and edit each object)—objects can then be added to the web page

immediately or at a later date.

To add an object to the library:

1. Select the New... button at the bottom of the My Smart Objects Library

pane.

2. In the Create Smart Object dialog, use the scroll bar to navigate the list

of Smart Objects, hover over an object of interest and click.

3. Select OK.

4. Depending on the type of object selected, a different Create dialog will be

displayed. For example, creating a Blog will show a Create New Blog

dialog. This reflects the difference in each object's characteristics.

5. Change the Name of the object and optionally a Filter Offsite string (this

prevents the URL from being copied). Optionally, change the object

specific settings, e.g. for some objects you can also set the titling, colours

(for body, text and border), and border thickness if appropriate.

6. Click OK.

The named object will be shown in a list in the My Smart Objects left-hand

pane, e.g.

192 | WebPlus Advanced

For example, the currently selected Visitor Count object has just been added

to an existing list of Smart Objects.

To add a Smart Object to your web page:

1. From the dialog, select the chosen object from the left-hand pane and

click the Insert button.

To insert the object at a default size, position the cursor where you

want the object to appear on the page, then simply click the mouse.

The object added to your page may not look as you expect—you'll

need to preview Smart Objects to see them properly.

Editing Smart Objects

Once an object is created it can be edited either in the My Smart Object

Library or directly on the page. Typically, you might want to alter the

appearance of the object from its the originally settings, maybe change a Poll

question, or reset a Hit Counter back to zero.

Editing an object only affects the object itself and does not alter any collected

data.

The dialog options for editing and creating a Smart Object are the same,

except that the object's Name is read only (shown as greyed out) in the object

edit dialogs.

WebPlus Advanced | 193

To edit a Smart Object in your library:

1. Click the

Smart Object Tool button on the Web Objects toolbar and

2. Select a Smart Object for edit from the My Smart Objects Library pane.

3. In the adjacent window, select the

button under the object

preview.

The selected object's edit dialog is displayed.

To edit a Smart Object on your page:

• Double-click the object to reveal the object's Edit dialog.

• Right-click the object and select Edit Smart Object....

If you edit an object on the web page the change is also reflected in

the Objects library and vice versa.

Managing Smart Objects

While editing Smart Objects affects only the object as a "container", managing

Smart Objects can be used to manage the object's data. Some Smart Objects

such as Hit Counters don't need to be managed as they just increment on each

web visit (you can reset the counters though). However, other Smart Objects,

such as Blogs, Mailing lists, Polls, and Shout boxes will contain articles, an

email address list, poll results, and a chat messaging log, respectively.

To manage a Smart Object from your library:

1. Click the

Smart Object Tool button on the Web Objects toolbar and

2. Select the object from the My Smart Objects Library pane.

3. In the adjacent window, select the

button under the object

preview. The next step depends on the object type, i.e.

194 | WebPlus Advanced

Object

type

Reason for object How?

management

Blog Adding, editing or

• Click the New button to add an

deleting articles.

article.

Deleting comments

• Click the Edit button to edit an

from articles as

existing article in your blog.

Webmaster is also

• Click the Delete button to delete an

possible.

existing article in your blog.

• Click the Comments button to access

a Manage Blog dialog. To remove a

comment, select it and click the Delete

button.

Mailing

List

Removing a web

• Select an entry and press the Delete

visitor's email

key.

address.

Poll Zero the votes for a

• Click the Click here to zero the

specific voting

votes for this option link or click the

option or reset

Reset All button.

entire poll.

Shout Box Removal of

• Select an entry and press the Delete

unwanted text

key.

lines.

To manage a Smart Object directly over the Internet:

• Login to serifwebresources.com to control your blog, polls, counters,

and shout boxes independent of your WebPlus project. Use your usual

Web Resources login as before.

Deleting Smart Objects

To delete an object from the library:

• Select the object's entry in the My Smart Objects Library pane and click

the Delete button. A confirmation message is displayed.

This will cause any uploaded web page which includes the object to display an

empty space until the object is removed from the corresponding WebPlus’s

web page and the web site uploaded again.

To delete an object on your page:

• Select the object and press the Delete key.

WebPlus Advanced | 195

RSS feeds

What is an RSS feed?

Really Simple Syndication (RSS) feeds are streams of constantly changing

news and information which are becoming increasingly popular on fast-paced

web sites. The popularity of RSS feeds is evident if you use Internet-based

news services regularly. You simply can't get away from them. The obvious

attraction is the real-time update of information but an additional attraction is

the ability to subscribe to these feeds and include them on your very own web

page. You can see ever-changing content from many feeds all on one page—

saving time-consuming site to site navigation!

You may have guessed that WebPlus lets you subscribe and place any third-

party RSS feed on your WebPlus web page. However, WebPlus also supports

creation of your very own RSS feeds—take control of a fast-paced

information resource to benefit your web visitors.

Browser support for RSS feeds

As an emergent technology, RSS feeds are only be viewable in the latest

versions of Internet browsers. Here is a simple list outlining browsers and

their versions which can read an RSS feed within its own browser (with no

third-party plug-ins required).

• Internet Explorer 7.0 (or later)

• Opera 8.0 (or later)

• Netscape Browser 8.1 (or later)

If you are using a previous version of the above don't worry! There are a range

of RSS feed readers available via the Internet (type "RSS reader" into your

favourite search engine) which will work equally well. A good candidate is

the Lektora feed reader, fully integrated with Internet Explorer 6.0 and

Firefox 1.5. Others include Newz Crawler, FeedDemon and Awasu.

Creating your own RSS feed

If you want to create your own RSS feed then WebPlus fits the bill. The RSS

Feed Tool enables you to create one or more news feeds, which will be

accessible to web visitors to your site. Stories can be added and appended to

each news feed as you update it. Headlines, story summaries and supporting

URL links are associated with each story. To update the feed you need to

republish your web site (see Publishing to the World Wide Web on p.

211).

196 | WebPlus Advanced

Here's a wildly optimistic "Good Times" news feed, to illustrate the creation

of your own feed.

To insert an S feed:

Click the

RSS Feed Tool button on WebPlus's

Web Objects toolbar.

Select RSS Feed Manager from the Tools menu.

From the dialog, click the left-most

button to create a new feed

y. Click e

name—edit the name in the RSS Feed title box appropriatel th

button again to create more than one feed name.

WebPlus Advanced | 197

3. Select the feed name in the My Feeds box, and click the button

under the Headlines box. This creates a headline article in the selected

feed. You should try to make the headline concise and, of course,

interesting!

4. An adline needs a supporting story. Enter this in the Summary box

with the correct headline selected in the adjacent box. Optionally, add a

Story URL, espec

y he

ially if your story requires references to other web sites.

5. ick the Insert Feed button.

6. A

cursor is displayed. Position the cursor on the page and simply

click the mouse.

button appears at the cursor position. Visitors to your web page can

view the RSS feed by clicking on this button. They must have a suitable n

er installe

ews

read d (see Browser support for RSS feeds on p. 195), otherwise

To update an RSS feed:

and a Story URLs as described

ific areas of

so it's just a case

of copying the link for the web site's RSS feed and pasting it into your RSS

Reader tool. Please bear in mind any terms and conditions in using a third-

party RSS feed—these should be clearly indicated on the originating web site.

Here's an example of an Investment & Markets RSS feed.

unformatted XML data will be shown.

1. Right-click on the RSS feed icon on your page and select Edit RSS

Feed....

2. Add additional Headlines, Summaries

above.

3. Click the OK button (the Insert feed button will create another instance o

the same feed on the same page).

The feed placed on your page is updated.

ing the RSS Reader Tool

Instead of creating you own RSS feed you may wish to subscribe to an RSS

feed from another existing web site—a web page’s content can be boosted by

inclusion of a feed from any popular news service (Reuters, BBC, sport, etc

or other information service (e.g., financial). Many major news and

information services host lists of RSS feeds relating to spec

interest (geographical, entertainment, political, music, etc.)

198 | WebPlus Advanced

To include an RSS feed on your page:

1. Locate an RSS feed available on the Internet. Look for the

button on the main web pages of popular news and information services.

2. Right-click on the button and copy the feed's link (in Internet Explorer,

choose Copy Shortcut)

3. Click the

RSS Reader Tool button on WebPlus's Web Objects

toolbar.

4. In the dialog, paste the URL into the RSS Feed URL field.

5. Optionally, select a different colour, font, font size, or font style for the

feed's Title, Headline, or Summary Colour.

6. Click OK.

7. A

cursor is displayed. To insert the RSS Feed in a window of

default size, simply click the mouse.

More typically, to set the size of the feed window, drag out a region and

release the mouse button.

The feed window will be filled with a peach colour with the URL shown—

publish the page to view the current new feed. Remember that the content will

change as the feed is updated on the original web site.

WebPlus Advanced | 199

E-Commerce

Understanding e-commerce

E-commerce entails the buying and selling of goods on the Internet. It's

difficult to escape online retailing in any Internet session these days—you've

more than likely used some form of Internet shopping at some point, when

buying online CDs, books, holidays, etc. Any web site that supports this kind

of e-commerce activity will typically make use of a shopping cart system and

a payment processing system. A shopping cart is n virtual basket (think of a

supermarket basket) which stores your chosen items and is used in

conjunction with a payment processing system (taking the place of the

supermarket's checkout).

For major companies, the shopping cart technology is developed in-house

(maybe the payment processing is carried out by a third party company). For

smaller companies or organisations, the shopping cart is normally a brought-in

third-party solution due to the cost/resource limitations. There are many third-

party shopping cart providers that can be used—all account-based and

equipped to accept credit cards instead of using a traditional payment gateway

(e.g., by phone).

So where does WebPlus fit into all this? Firstly, WebPlus allows you to

choose one of several specially chosen shopping cart providers and, secondly,

it allows you to connect to the shopping cart provider via a form or link (i.e., a

simple button or any object's hyperlink) on the WebPlus page. Forms allow

for buying options (colours, quantity) to be set, as well as calculate tax rates,

shipping, bulk items, etc. Links offer simple one-click purchasing without

buying options. The features are provider-specific and as a result vary widely.

All shopping carts deal internationally - no additional files are need for this to

work.

200 | WebPlus Advanced

Configuring your Shopping Cart provider

A number of different shopping cart providers can be configured within

process directs you to the provider's own web site from where you can sign-up

as a registered user.

Use the provider's web site to find out more about unique shopping

cart features.

To setup a site-wide shopping cart provider:

1. Click the

Configure E-Commerce button on the Web Objects

toolbar's e-commerce flyout.

2. From the E-Commerce Configuration dialog, you have two options

depending on if you are an existing or new user of one of the shopping

cart providers, i.e.

• If you're a new user, choose a shopping cart provider by enabling its

radio button, then click the Sign Up Now button. The provider's web

site is shown in a new browser window from where you can register

with the shopping cart provider.

• If you're an existing user, enable the button next to your chosen

provider, and click Next>. This option simply sets the default

provider for your web site (rather than set up a provider account).

3. The subsequent dialog is provider-specific and may show offline testing

options, window selection, store IDs, currency options and/or tax choices.

4. Click the Finish button to complete shopping cart configuration.

As an example, choosing PayPal let's you define a email address to receive

payments, or use a "Sandbox", a test tool, for trying out your shopping cart

before going live (otherwise you may start making money before you're

ready!). Click the Tell Me More button to setup a separate Sandbox login in

addition to your "live" PayPal login.

Once you've configured the shopping cart, you need to Insert an e-commerce

object (see p.

201).

WebPlus Advanced | 201

Inserting an e-commerce object (PayPal)

The creation of e-commerce objects within WebPlus takes a Wizard-based

approach. An e-commerce object can be added to the web page as a form or

link (i.e., a simple button or any object's hyperlink) by completion of a series

of dialogs. Whether you choose to use forms or links depends on the

characteristics of the items you are planning to sell, and how you want to sell

your goods.

For example, if you are a trader wishing to sell a quantity of bricks you could

create an E-Commerce button (as a Buy Now link). This option would make

an assumption about the potential transaction, e.g. that all the bricks are the

same style/colour and that the buyer would wish to purchase a fixed amount.

This is because a link is only a button and cannot host any "interactive"

buying options that would be need for more complex purchases. One buyer's

click will buy a standard product offering—nothing more. Useful in some

situations but in others completely inadequate!

More complex purchases using E-Commerce Forms offer user interactivity

coupled with flexibility. If we take the brick trader as an example again, a

form can be used to host quantity and brick style/colour options so that the

customer has control and can get what he/she wants!

Here the web visitor has chosen to buy 2600 bricks of style "Clamp - Orange".

202 | WebPlus Advanced

Form and Link Options

Forms When to use?

Buy Now

When directing the shopper straight to the checkout. Up to

two buying options can be defined. Form validation is

supported.

Add to Shopping

When the shopper is likely to buy more than one different

Cart

item over the duration of a web session (and pay at the end).

Up to two buying options can be defined. Form validation is

supported.

Donation

For charitable donation is being made via the shopping cart.

Form validation is supported.

Subscription

For subscriptions with configurable trial periods and billing

intervals. Form validation is supported.

Links When to use?

Buy Now Link

When directing the shopper straight to the checkout (no

buying options or validation) via e-commerce button or

object hyperlink.

Add to Shopping

When the shopper is likely to buy more than one different

Cart Link

item over the duration of a web session (and pay at the end)

via e-commerce button or object hyperlink. (No buying

options or validation).

View Shopping

Use to check on your shopping cart from any point in your

Cart Link

web pages via e-commerce button or object hyperlink.

Donation Link

For charitable donations being made via the shopping cart

via e-commerce button or object hyperlink. (No buying

options or validation).

Subscription

Subscribe to chargeable services or products via e-

Link

commerce button or object hyperlink. Single or repeating

subscriptions are configurable. (no buying options or

validation)

Cancel

For adding a Cancel Subscription button or object hyperlink.

Subscription

Link

WebPlus Advanced | 203

Forms or links can be selected as radio buttons from a single dialog.

Remember that the term "Links" is used because an e-commerce hyperlink can

be made from a vector object, image, shape or text by use of this dialog (right-

click on the object and select Hyperlink...). This would be instead of a

standard PayPal button. See Adding hyperlinks and anchors on p.

149 for

more information.

The dialog that is displayed when you add an e-commerce object will entirely

depend on the currently enabled shopping cart provider (see Configuring

your Shopping Cart provider on p.

200).

The following procedures assume that PayPal is configured as your shopping

cart.

To insert an e-commerce object:

1. Click the

Insert an E-Commerce object button on the Web Objects

toolbar's e-commerce flyout.

2. In the Add PayPal Object dialog, pick the email address which is to

receive the payment information. WebPlus will already assume that the

email address set during shopping cart configuration is used.

Alternatively, uncheck the Use the site default address box and set a

different email address to override the site default.

3. Pick an object type from the PayPal Object box. Select a "Form" radio

button if you want to create an E-Commerce Form which will contain

buying options (e.g., colour or quantity). If the product for sale has no

buying options then you can use a "Link" object (i.e., to create a clickable

E-Commerce Button).

4. (Optional). If a Form or Button is not what you are looking for, enable the

last option instead to paste code in a subsequent dialog. This would be

code generated from PayPal's web site (look under Merchant Tools).

Click Next>.

5. In the next dialog, define a button for use. It's possible to enable a

standard text button (when enabled, enter any text string), a standard

image button (when enabled, pick from an attractive selection of presets

in the scrollable window), or load an image button (when enabled, use the

Browse... button to navigate and select your image). Images are

embedded in your site by default; otherwise uncheck the last option. Click

Next>.

204 | WebPlus Advanced

6. Item identification, pricing and tax information can be defined in the Item

Details dialog (see WebPlus Help for details). Choose appropriate settings

and click Next>.

7. For e-commerce forms only, the next step can be used to define user-

selectable options (only two options can be selected per form in PayPal) if

required. Check the Add an options field box and create a fixed name, an

edit box, radio buttons, or combo boxes as appropriate—you can design

from scratch or use previously saved options fields. Click Next>.

8. Set a default quantity in the input box, or check the box to let the user

specify an amount at checkout.

Set the Add Edit box option to let the customer define the quantity to be

ordered.

9. For shipping and handling associated with the order, enter a set amount

for the handling of the first item, every item or per order.

If left blank, the default PayPal's profile will be used instead. Click

Next>.

10. In the Extra Customer Information dialog, choose to prompt the customer

for an address, don't prompt, or require the customer to enter an address.

Optionally, ask a question of the customer in the text box. Click Next>.

11. The final screen offers some payment settings, i.e.

• Enter the name of your Checkout Page Style (if setup in advance via

your PayPal login).

• Set a language for the PayPal login page. Pick for the drop-down list.

• Change the text for the Continue button on the Successful Payment

Page.

• If needed, define Successful Payment Pages and/or Cancelled

Payment Pages. Enter the page's URL or select an entry from the

drop-down list.

12. Click Finish.

13. To insert the form or button, position the cursor where you want it to

appear on the page, then simply click the mouse.

WebPlus Advanced | 205

To edit an e-commerce form or button:

1. Select the form, right-click the form and choose Edit E-Commerce

Form....

Select the button, right-click the button and choose Edit E-Commerce

Button....

2. Modify e-commerce settings screen-by-screen in the displayed dialog.

Adding options fields

The Item Options dialog allows for the configuration of up to two buying

options—you can create form objects either from scratch or use previously

saved default form objects. With the Add an options field checked, either of

the two methods can be adopted.

Only one set of options can be configured per Item Options dialog. By

clicking Next> on the first Item Options dialog, you will have the

choice of enabling a second option on the subsequent screen.

To create a form object's options from scratch:

1. In the Option box, specify an object Name and a Prompt to appear above

it.

2. Choose the type of form object required—Fixed, Edit Box, Radio

Buttons, or Combo Box.

• Fixed: Enable the Fixed option and add a name in the adjacent drop-

down menu. Uncheck Show on form to hide the name from the user.

• Enable Edit Box to add a simple box for data entry.

• Enable Radio Buttons and click the highlighted Add Option...

button below the window. Enter a Name and Value pair for each

radio button option in the dialog. Check the Disabled and/or

Selected check box to make the option unavailable (subject to script)

or enabled by default, respectively.

•

button.

Any selected option can be deleted by clicking the Delete button.

Enable Combo box and click the highlighted Add Option... button

below the window. Enter a Name and Value pair for each combo bo

option (click Add Another to build up your entries) in the dialog.

Check the Disabled and/or Selected check box to make the option

unavailable (subject to script) or selected by default, respectively.

Radio buttons and Combo Box options can be edited via an Edit...

206 | WebPlus Advanced

To save a form object's options:

• With the option for Combo Box or Radio Buttons enabled, click the

Save... button. Give the saved set of options a name in the dialog.

To retrieve a form object's options:

• For a quick way of retrieving a set of saved Combo Box or Radio Button

options, select the drop-down menu and choose the saved set. The options

will be retrieved and will be adopted on the form.

Previewing

and Web

Publishing

208 | Previewing and Web Publishing

Previewing and Web Publishing | 209

Previewing your Web site

Previewing your site in a Web browser is an essential step before publishing

it to the World Wide Web. It's the only way you can see just how your site

will appear to a visitor. You can preview a page or site at any time, either

within WebPlus (using an internal window based on the Internet Explorer

browser) or separately using any browser installed on your system.

To preview your Web site:

1. Click the down arrow on the

HTML Preview button on the

Standard toolbar.

2. Select an option from the submenu:

• Preview in Window (shortcut Alt+P) opens the site in a new internal

WebPlus window with its own tab for convenient switching. (For

details on using multiple windows, see Working with more than

one site or window on p.

25).

• Choose Preview Page... or Preview Site... to use an external

browser. The names will reflect which browsers are currently

installed, e.g. the entry may read "Preview Page in Internet Explorer

6.00". If you have more than one browser installed, you can select

which browser(s) to display on the submenu. The page or site is

exported to a temporary folder and appears in the specified browser.

When previewing in a window, you can use the Preview context toolbar to

control the preview window. Click the toolbar buttons to navigate Back and

Forward, Refresh or Close the preview window, and redisplay the page at

one of several standard or a custom screen resolution (all from a drop-down

menu).

To customize the list of browsers on the submenu:

1. Choose Preview Site from the File menu (or from the Preview flyout on

the Standard toolbar) and select Browser Preview List... from the

submenu:

The dialog displays a list of browsers registered on your system. The WebPlus

Preview submenu will list these in the order they’re shown here.

2. Use the dialog to make changes as needed:

• Click Auto Detect to refresh the list automatically, or click Add to

display a dialog that lets you locate a particular browser to manually

add to the list.

210 | Previewing and Web Publishing

• To delete an entry from the list, select it and click Remove.

• You can rearrange the list by selecting an entry and clicking Move

Up or Move Down.

• To change the entry’s name on the submenu or its path, select the

entry and click Edit. For example, you could change "Internet

Explorer 6.00" to appear as simply "IE6".

3. Click OK to confirm any changes.

Publishing the site to a local folder

Even though you may have saved your Web site as a WebPlus project, it's not

truly a "Web site" until you've converted it to HTML files and graphics files in

a form that can be viewed in a Web browser. In WebPlus, this conversion

process is called publishing the site. You can publish the site—or selected

pages—either to a local hard disk folder as outlined here, or publish the site

to the World Wide Web itself (see p.

211). To review the basics, see

Understanding Web sites on p.

19.

To publish the site to a local folder:

1. Double-check page name, file name, and picture export settings via the

Site tab and Format>Web Export Options.... (See Setting page and

file names and Setting picture export options on p.

55 and p. 129,

respectively).

2. Click the

Publish Site to Disk Folder button on the Standard

toolbar (or choose Publish Site from the File menu and select Publish to

Disk Folder... from the submenu).

3. In the dialog, locate the folder where you wish to store the output files. If

the output folder specified does not exist you'll be asked if you want a

new folder created when you click OK to finish the dialog (below).

4. Either check the Publish All Pages option, or in the site structure tree,

check which specific page(s) to publish.

5. Click OK.

After WebPlus has finished exporting the selected pages, you'll be asked if

you want to:

• View site in browser. This runs a Web browser to preview your pages—

your browser is launched if not already open.

Previewing and Web Publishing | 211

• View this URL. This option lets you view the site by specifying its URL,

e.g. http://www.mywebspace3.com/intro/. For example, the publish

operation could be to a remote computer's folder on the same network,

where the folder is part of a web site on that remote computer and is

therefore web accessible.

• View files in Windows Explorer. This provides a useful check of all the

files published in Windows Explorer along with supporting sub-folders

(for graphics etc.).

Publishing to the World Wide Web

Publishing to the World Wide Web involves a few more steps, but is basically

as simple as publishing to a local folder! You can specify that all web page are

published or only pages updated since the last "publish".

To publish your site to the World Wide Web:

1. Choose Site Properties... from the File menu and double-check export

settings, particularly those on the Graphics tab.

2. Click the

Publish to Web button on the Standard toolbar (or choose

Publish Site from the File menu and select Publish to Web... from the

submenu).

If this is your first time publishing to the Web, you'll see a Publish to Web

dialog without any account information present (you'll see your local web site

ready to upload). You’ll need to set up at least one account before you can

proceed.

1. Click the Accounts... button to display the Account Details dialog.

2. In the dialog, enter:

• The Account name. This 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.

• r: Unless directed by your provider, you can leave this

•

you want to publish to a specific subfolder of your root directory.

Port numbe

set at "21."

Leave the Folder box blank unless directed by your provider, or if

212 | Previewing and Web Publishing

• You’ll also need a Username and Password as pre-assigned by the

provider. Most likely these will correspond to email 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 password on your computer,

if you don’t want to re-enter it with each upload.

• Passive mode: Leave checked unless you have FTP connection

problems. ISPs can operate passive or aggressive FTP modes of

operation.

• Web site URL: Set your site's URL. This allows you to view the web

site from a dialog after FTP upload.

• Click OK to close Account Details.

You can also use the dialog at this point to Add... another account, and

Copy..., Edit or Delete an account selected from the drop-down menu. It's a

good idea to test your new or modified account by clicking the Test button

—a dialog showing web site details is displayed if the test is successful.

3. If you’ve set up at least one account, the Publish to Web dialog appears

with the last used account name shown in the drop-down menu and its

settings in subsequent boxes. The drop-down menu lets you swap to

another account. Select the account you want to use (if you’ve more than

one).

4. Choose which pages you want to upload—check specific page(s) in the

window or Publish All Pages. Use the Toggle Select, Toggle Branch

and Select All buttons to aid page selection.

5. To safeguard your WebPlus project, check the Backup the document to

the remote server option. If the project is unsaved you'll be prompted to

save it.

6. Click OK. WebPlus seeks an Internet connection, then:

Previewing and Web Publishing | 213

7. If uploading for the first time, selected files will be uploaded directly.

If uploading to an existing site, an Uploading Files dialog is displayed

showing local file action (whether files will be added (Add), will replace

the live file (Replace) or not updated (Leave)).

In the dialog, select either the Incremental Update or Full upload

Button. Choose the former to upload only files that have altered since the

last upload. You'll see a message when all files have been successfully

copied. Click OK.

8. You'll be able to see your page(s) "live" on the Web following upload.

Use the displayed Web Site Publishing dialog to view the site in your

Web browser to the URL of your live site.

Gathering server information

If you have an email account, your contract with the email service provider

may allow you a certain amount (for example, 25MB) of file space on their

server where you can store files, including the files that comprise a Web site.

Or you may have a separate "Web space" arrangement with a specialized

Internet Service Provider (ISP). It’s up to you to establish an account you can

use for Web publishing.

The basic process of uploading files to a server is quite simple, as outlined

above... but some providers do a better job than others of "providing" the basic

information you’ll need the first time you publish to their server. Check your

provider’s Web site for the details listed below. (Note that Serif is not

your

service provider, and cannot supply the details you’ll need.)

Before publishing, collect the following information:

• The FTP address, which is the specific URL (starting with "ftp://") of the

directory on the server where you’ll be storing your files. On many

services, your personal publishing directory is just your screen (user)

name appended to a standard URL. If your account is with a specialized

Internet service provider, or you're using a dial-up networking connection

or some other arrangement, you may need to do a bit more research to

determine the required information.

• The steps needed to connect to the server, whether via LAN (intranet) or

Dial-up Networking connection.

• Your user name and password, typically the same as your email login

settings. Note that one or both of these may be case-sensitive.

214 | Previewing and Web Publishing

• Any other special instructions noted by the provider. For example, a

particular port number and/or subfolder may be specified.

• Whether the Web server can accommodate spaces in file names. If you

find it cannot, then choose Site Properties... from the File menu, select

the Graphics tab, and check Remove spaces from original file names to

revise graphic file names accordingly when they are published. (If you've

already published your site, you'll need to do so again to fix the problem.)

Maintaining your Web site

Once you’ve published your site to the World Wide Web, you’ll need to

maintain the pages on your site by updating content periodically: adding or

changing text, pictures, and links. Making the content changes is easy

enough—all the originals are right there in one project!

Each time you publish one or more pages to a local folder or to the Web, a

whole new set of image files is generated (duplicate .HTML file names are

overwritten). GIF and JPG files can proliferate, and you’ll need to weed out

the old ones periodically.

• 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 (e.g., 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.

To maintain files and folders on your Web site:

1. Choose Publish Site from the File menu and select Maintain Web Site...

from the submenu. The Account Details dialog appears.

2. Select your FTP account name (from the drop-down menu), your

Username and Password. Type the correct path in the Folder box, if

required by your provider.

3. Click Maintain.

WebPlus seeks an Internet connection and displays a dialog showing the

navigable web site's folders in a left-hand window and any selected folder’s

contents in the adjacent window.

Previewing and Web Publishing | 215

1. Use standard Windows Explorer conventions to perform maintenance

tasks:

• Click on the column headers to change the current sort order, 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, upload/download a file, and refresh the windows.

Right-clic

• k to Open, Download, Delete, or Rename any file or folder.

• one or more selected files, drag them into the destination folder.

•

elete all managed files

ndow which displays a running

log of each maintenance task and its status.

2. When you’re done, click the window’s

• You can Ctrl-click to select multiple files or Shift-click to select a range

of files.

To move

To delete the entire web site, click the View button next to your selected

Serif Manifest file—in the dialog, click the D

button.

Remember to use the lower information wi

Close button to terminate the

FTP connection and return to WebPlus.

216 | Previewing and Web Publishing

Index

changing vector image. See WebPlus

help

filter effects. See WebPlus help

instant. See WebPlus help managing. See WebPlus help

Account Details (FTP), 213 column blinds, 74

acknowledgment column guides, 44

of form submission, 182 contrast, 133

convert to picture. See WebPlus help adjunct colours, 119

copy and paste. See WebPlus help adjusting letterspacing, 89

alignment counters, 189

objects. See WebPlus help Creative Frame Tool, 73

of page, 56 Creative frames, 71

alternate text (pictures), 131 vs. HTML frames, 71

anchors, 150 Creative Table Tool, 97

animation effects, 136 Creative tables, 96

artistic text, 80 vs. HTML tables, 96

cropping. See WebPlus help Artistic Text tool, 80

assigning master pages, 42 Curved Line tool, 109

Attach to Bottom of Page, 57 default paragraph font, 86

audio files, 139 defaults

Autoflow, 77 updating, 65

AutoRun, 14 digital cameras, 136

background (master page), 34 as TWAIN source, 136

background colour of pages, 118 dimensions

background sound, 139 of page, 56

bevel. See WebPlus help setting for site, 56

bitmap fills. See WebPlus help drawing

Bitmap transparency, 122 lines, 109

bitmaps. see pictures shapes, 112

blend modes. See WebPlus help draw-type pictures

borders. See WebPlus help

importing, 127

e-commerce, 199

brightness, 133

adding forms and buttons (PayPal),

201

browser preview, 209

Calendar Wizard, 105

configuration, 200

cell properties (tables), 98, 101

hyperlinking to shopping cart, 149

Character tab, 84, 89

Edit in PhotoPlus, 134

characters, 90

styles, 86

send page as, 65

symbols, 90

embedding vs. linking of images, 129

closing WebPlus, 27

emboss. See WebPlus help

colour, 117

envelopes

applying fill, 117

mesh warp. See WebPlus help

schemes, 118

export options (pictures), 129

applying, 120

exporting

modifying, 121

objects as pictures. See WebPlus help

tinting, 118

favourites icons, 58

Colour Picker, 117

feathering. See WebPlus help

colours

feature list, 3

Index

graphics. see pictures File Manager, 61

groups. See WebPlus help files, 214

maintaining on Web site, 214 guides, 44

managing, 61 Home page, 31, 38

names for, 55 hotspots, 151

fills HTML

bitmap. See WebPlus help adding code to web pages, 167

gradient. See WebPlus help attaching code to fragments of, 166

solid, 117 creating pages in raw, 165

filter effects heading tags, 63

3D. See WebPlus help IDs, 171

Find and Replace, 84 tokens, 172

Flash banners, 52 HTML Frame Tool, 73

Flash movies, 138 HTML frames, 71

flipping. See WebPlus help overflow in, 79

flyers vs Creative frames, 71

via email, 65 HTML Table Tool, 97

fonts HTML tables, 96

setting, 84 vs. Creative tables, 96

WebSafe, 63 hyperlinks, 149

formatting numbers in table, 102 setting colour of, 119, 150

formatting text, 84 IDs

forms, 172 for HTML, 171

controls for, 178 iframes, 42

editing, 181 Image adjustments

creating, 175 applying, 134

images. see pictures structure, 173

submission, 182 importing

submission of images, 127

acknowledging, 182 pages, 24

tab order in, 186 paint- and draw-type pictures, 127

validation in, 187 styles, 89

formulas (tables), 104 text, 69

frame margins, 45 TWAIN images, 136

frame text, 70 Include in Navigation, 159

Framed Document Tool, 43 inline pictures, 127

frames, 70 Inserting a symbol, 90

margins/columns of Installation, 14

instant 3D. See WebPlus help adjusting, 74

frames (windows), 42 Internet Service Provider (ISP), 20, 213

Freehand Line tool, 109 Java applets, 160

FTP settings, 213 JavaScript

functions (tables), 104 adding, 168

Gallery tab (Studio), 52 JPEG images, 127

keyboard shortcuts. See WebPlus help GIF animations, 137

GIF images, 127 layout aids

glows. See WebPlus help guides, rulers and grid, 44

gradient fills. See WebPlus help letter spacing (tracking)

gradient transparency, 122 adjusting, 89

Index

line and fill properties, 109 names for, 55

lines, 109 parent and child, 32, 41, 157

drawing, 109 properties, 55

properties of. See WebPlus help rearranging, 41

linking text frames, 77 redirecting, 60

linking vs. embedding (images), 129 removing, 40

locking objects. See WebPlus help selecting, 35

maintaining Web sites, 214 setting size, 56

marquees, animated, 137 transitions, 59

Master Page Manager, 55 viewing, 35

master pages, 34, 55 paint-type images, 127

adding, 40 importing, 127

assigning, 42 palettes

managing colour. See WebPlus help rearranging, 41

removing, 40 Pan tool, 36

measurement interval, 45 paragraphs

multiple selection. See WebPlus help alignment, 84

multiple windows, 25 formatting, 84

named styles, 86 new, 81

navbars, 31, 157 styles, 86

navigation parent/child pages, 32, 41, 157

and site structure, 31 Photo Gallery, 141

elements, 31, 49, 157 creating a, 143

hyperlinking to, 149 editing, 145

objects PhotoPlus, editing in, 134

arranging. See WebPlus help photos. see pictures

attaching code to, 166 pictures

defaults for, 65 adjustments for, 133

manipulating. See WebPlus help alternate text, 131

measuring, 45 brightness/contrast, 133

selecting. See WebPlus help colourizing, 117

correcting, 133

setting default properties, 65

styles for. See WebPlus help

effects for, 133

export options for, 129

offsite links, 39

importing, 127

opening an existing site, 23

Options. See WebPlus help

linking to fullsize view, 149

linking to remote, 146

Page Locator, 36

optimizing, 129

page margins

Photo Gallery for, 141

setting, 44

PageHints. See WebPlus help

replacing, 128

PNG images, 127

PagePlus Web publications, 23

point size

opening, 23

setting, 84

pages, 34, 38

previewing, 209

adding, 38, 39

customize browsers for, 209

adding search engine descriptors, 62

printing. See WebPlus help

attaching code to, 166

project file (WebPlus)

background colour, 118

saving, 26

background sound, 139

project information, 58

importing, 24

Index

promotions site

via email, 65 properties, 55

publishing, 210, 211 site structure

to local folder, 210 and navigation, 31, 157

to World Wide Web, 211 Site tab (Studio), 32, 35, 36, 38

QuickShape Tool, 112 size of

QuickShapes, 112 page, 56

raster images Smart Objects, 189

importing, 127 creating, 191

Raw HTML, 165 deleting, 194

redirect pages, 60 editing, 192

remote pictures, linking to, 146 managing, 193

replicating. See WebPlus help solid colours, 117

resizing objects. See WebPlus help sound, 139

reverting to saved version, 24 adding to Web page, 139

rollover buttons, 153 hyperlinking to, 149

variant images for, 155 standalone text, 80

rotating. See WebPlus help start from scratch, 25

row guides, 44 Startup Wizard, 22

RSS Feed Manager, 196 story text, 70

RSS Feed Tool, 196 flowing in frame sequence, 76

RSS feeds, 195 Straight Line tool, 109

browser support for, 195 Studio

customizing. See WebPlus help create your own, 195

RSS Reader Tool, 197 styles, 86

ruler guides, 47 font, 84

rulers, 45 HTML-compliant, 72

of objects. See WebPlus help for measuring, 47

Save Defaults, 65 SWF files, 136

saving a site, 26 symbols, inserting, 90

saving as template, 26 system requirements, 14

scanned images tables, 95

importing, 136 formatting numbers in, 102

Scheme Manager, 118 inserting formulas, 104

schemes, 118 manipulating, 98

applying to objects, 120 overview, 95

modifying, 121 tabs

customizing. See WebPlus help search engine descriptors, 62

Send Current Page as Email, 65 tags

Shade/Tint slider, 118 HTML heading, 63, 72, 96

shadows. See WebPlus help template, 23

shapes creating site with, 23

applying transparency, 121 saving site as .WPX file, 26

changing fill colours, 117 templates, 26

drawing, 112 text

shapes, 121 artistic (standalone), 80

shopping cart, 199 changing colour or shading, 117

provider, 200 copying, 83

editing on the page, 81

Index

editing story text in WritePlus. See

WebPlus help

transparency

of objects. See WebPlus help

formatting, 84 transparency, 121

frame, 70 Transparency Tool, 122

importing from file, 69, 86 TWAIN (camera/scanner) source, 136

inserting symbols, 90 Update Object Default, 65

inserting user details, 91 user details, 91

letterspacing, 89 inserting, 91

moving, 83 vector images

selecting, 81 importing, 127

setting default properties, 65 video, 139

setting indents, 83 adding to Web page, 139

styles, 86 hyperlinking to, 149

text frames view options, 35

setting default properties, 65 View toolbar, 36

Text Style Palette, 87 Web Export Manager, 130

theme graphics, 33, 49, 157 Web Resources, 173, 189

Theme Graphics tab (Studio), 49 WebSafe Fonts Manager, 63

tinting, 118 Welcome/What's new, 3

tokens word processor files, 69

for HTML, 172 World Wide Web, 19

WritePlus. See WebPlus help toolbars

customizing. See WebPlus help zero point, 46

transitions, 59 zoom view options, 36

Notes

Serif WebPlus 10 Handleiding

Hulp nodig? Stel uw vraag in het forum

Misbruik melden

Product:

Spelregels forum

Abonneren

Ontvang uw handleiding per email

Stel vragen via chat aan uw handleiding

Uw handleiding is per email verstuurd. Controleer uw email

Er is een email naar u verstuurd om uw inschrijving definitief te maken.

U heeft geen emailadres opgegeven

Uw vraag is op deze pagina toegevoegd

Info