Manual Serif WebPlus Essentials (page 60 of 321) (English)

631786

Zoom out

Zoom in

1/321

WebPlus Essentials

User Guide

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

Customer Service/

Technical Support:

http://www.serif.com/support

General Fax: (0115) 914 2020

North American office

(USA, Canada):

Serif Inc., The Software Center,

4041 MacArthur Blvd., Suite 120,

Newport Beach, CA 92660,

USA

Registration: (800) 794-6876

Sales: (800) 489-6703

Customer Service: (800) 489-6720

Technical Support: http://www.serif.com/support

Online

Visit us on the web at:

http://www.serif.com/

International

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

at one of our phone numbers above.

This User Guide, and the software described in it, is furnished under an end user License

Agreement, which is included with the product. The agreement specifies the permitted and

prohibited uses.

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

Company& LEAD Technologies, Inc.

reserved.

THE PROXIMITY/COLLINS DATABASE



THE PROXIMITY/MERRIAM-WEBSTER DATABASE



Andrei Stcherbatchenko, Ferdinand Prantl

reserved.

Anti-Grain Geometry - Version 2.4

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

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

Microsoft, Windows, and the Windows logo are registered trademarks of Microsoft

Corporation. All other trademarks acknowledged.

WebPlus is a registered trademark of Serif (Europe) Ltd.

reproduced in any form without the express written permission of Serif (Europe) Ltd.

Contents

1. Welcome .......................................................... 1

Welcome! .................................................................................. 3

Key features .............................................................................. 4

Installation ............................................................................... 12

2. Getting Started ............................................... 15

Startup Wizard ........................................................................ 17

Creating a site using a design template .................................. 18

Starting a site from scratch ..................................................... 21

Opening an existing site .......................................................... 22

Working with more than one site ............................................. 23

Saving your site ...................................................................... 23

3. Developing Sites and Pages .......................... 25

Understanding site structure and navigation ........................... 27

Understanding pages and master pages ................................ 29

Viewing pages ......................................................................... 31

Adding, removing, and rearranging pages .............................. 34

Adding navigation bars ............................................................ 41

Using layout aids ..................................................................... 50

Setting site properties ............................................................. 54

Setting page properties ........................................................... 57

Using Site Manager ................................................................. 60

Search engine optimization ..................................................... 62

Using the Gallery..................................................................... 67

Adding Google maps ............................................................... 69

Contents

4. Working with Text ........................................... 73

Importing text from a file .......................................................... 75

Understanding text frames ....................................................... 76

Using artistic text ...................................................................... 84

Putting text on a path ............................................................... 86

Editing text on the page ........................................................... 88

Using Find and Replace ........................................................... 92

5. Formatting Text .............................................. 95

Setting text properties .............................................................. 97

Using fonts ............................................................................... 97

Using text styles ....................................................................... 99

Creating a bulleted or numbered list ...................................... 102

6. Working with Tables ..................................... 105

Creating text-based tables ..................................................... 107

Inserting a calendar ............................................................... 110

7. Editing Objects ............................................. 115

Selecting an object ................................................................. 117

Selecting multiple objects ...................................................... 118

Copying, pasting, and replicating objects ............................... 119

Moving objects ....................................................................... 121

Resizing objects ..................................................................... 122

Rotating an object .................................................................. 123

Cropping and combining objects ............................................ 125

Joining object outlines ............................................................ 128

Locking an object's size or position ........................................ 130

Ordering objects..................................................................... 130

Aligning and distributing objects ............................................ 130

Snapping ................................................................................ 132

Contents

Attaching objects to text ........................................................ 133

Creating groups .................................................................... 136

Updating and saving defaults ................................................ 137

8. Lines, Shapes, and Effects ........................... 141

Drawing and editing lines ...................................................... 143

Setting line properties ........................................................... 146

Drawing and editing shapes .................................................. 148

Using 2D filter effects ............................................................ 151

Using 3D filter effects ............................................................ 154

Adding dimensionality (Instant 3D)........................................ 156

Adding borders ...................................................................... 159

Using object styles ................................................................ 161

9. Images, Animation, and Multimedia.............. 165

Adding picture frames ........................................................... 167

Importing images................................................................... 169

Using the Media Bar .............................................................. 174

Setting image export options ................................................. 177

Importing TWAIN images ...................................................... 181

Applying PhotoLab filters ...................................................... 182

Using Image Cutout Studio ................................................... 188

Adding animation .................................................................. 193

Adding sound and video ........................................................ 197

Using the Photo Gallery ........................................................ 201

Linking remote images .......................................................... 206

Contents

10. Color, Fills, and Transparency ..................... 207

Applying solid colors .............................................................. 209

Using color schemes .............................................................. 211

Working with gradient and bitmap fills .................................... 215

Setting transparency .............................................................. 217

11. Adding Hyperlinks and Interactivity .............. 221

Adding hyperlinks and anchors .............................................. 223

Adding hotspots to a page ..................................................... 226

Adding rollovers ..................................................................... 229

Rollover options ..................................................................... 229

Adding popup rollovers .......................................................... 231

12. Adding Dynamic Content ............................. 235

Attaching HTML code ............................................................ 237

Adding forms .......................................................................... 240

RSS feeds and podcasts ....................................................... 252

Understanding e-commerce ................................................... 261

Inserting an e-commerce object (PayPal) .............................. 263

Using Smart objects ............................................................... 267

Access control........................................................................ 276

13. Previewing and Publishing ........................... 287

Previewing your site ............................................................... 289

Publishing to the web ............................................................. 291

Using Serif web hosting ......................................................... 298

14. Index ............................................................ 301

Welcome

2 Welcome

Welcome 3

Welcome!

Welcome to WebPlus Essentials from Serif—the easy way to get your family,

club, organization, or small business on the web!

To make life so much easier, WebPlus comes with an impressive selection of

design templates, page navigation bars, creative gallery content, and styles for

you to use. As a result, publishing to the web to a professional standard is easily

achievable for experienced and inexperienced users alike!

To make the most of pictures in your site, you can use Image Cutout Studio for

cutting pictures out and PhotoLab for powerful image adjustment and effect

combinations. When you're ready, share via online photo galleries. You simply

cannot afford to miss these features!

WebPlus Essentials doesn't just stop at "static" web publishing. The real power

comes when adding and managing dynamic content, such as blogs, forums,

counters, and more. You can even make use of E-commerce tools for money-

making shopping cart functionality.

Once you're happy with your WebPlus site, simply upload to your Serif

webspace (or equivalent ISP) to share with business colleagues, customers,

friends and family alike.

For a more detailed summary of what WebPlus can offer, see Key features

(p. 4).

Registration

Don't forget to register your new copy, using the Registration Wizard, on the

Help menu. That way, we can keep you informed of new developments and

future upgrades!

4 Welcome

Key features

Before you get started with WebPlus, we recommend you take the opportunity

to familiarize yourself with WebPlus key features and capabilities.

Layout

• Multipage Design Templates

Make "tailored" websites based on a chosen look and color scheme in

an instant—choose design templates from Interest, Personal,

Community & Education, and Home Business categories, all packed

with royalty free images for you to use. Alternatively, choose a theme

layout such as Arctic or Natural on which to base your site—pick

multiple layouts as your new pages, then simply fill picture

placeholders with your own pictures.

• Professional layout tools

Movable rulers, guide lines and a dot grid, as layout aids, help you

position objects precisely; snapping jumps an object to guide or grid.

Use Sticky guides, a great way of moving (in bulk) all objects

snapped to your guide lines—move the guide and objects will follow!

• Page control

Add and remove pages in just a few clicks of your mouse in the Site

tab. Drag and drop pages within the tab to reorder sequence. Assign

master pages to several site pages at once for time saving and greater

design consistency.

• Use multiple master pages!

For more varied page design, apply multiple master pages to a specific

web page.

Website Essentials

• Easy site structure

The hierarchical Site tab makes it easy to see the overall layout of

your site.

Welcome 5

• Exciting Navigation Bars

Use navigation bars for site-wide page navigation. Flexible and user

configurable, with a host of different design styles to choose from—

share styles for a common look between navigation bars. You can also

include forum and blog articles in dynamically changing navigation

bar submenus. Navigation Manager controls all navigation bars from

one point. Add separators between submenu items.

• Search Engine Optimization

Control how search engines index your website! Include or exclude

pages from indexing by using search engine sitemap or robot files—

protect confidentiality while offering potential web visitors accurate

search results from your site.

• Smart Objects

Serif Web Resources, Serif's Smart object hosting service, offers a

series of interactive site features:

• Forum—Stimulates lively thread-based discussions in a full-

sized window. Create multiple forums and manage independently

(moderate discussions and set up user login access).

• User List—offers page or site access control by management of

"zonal" user groups (e.g., Personnel). Web visitors can self-

• News—For simple news announcements such as website updates

or next club meeting dates.

• Blogs—now add personal profiles, social bookmarking links

and use trackbacks for inter-blog cross-referencing. Change blog

appearance with different pre-defined Visual Styles (or use your

own!). Use Editor groups for multi-author article publishing.

• E-Commerce—Sell, Sell, Sell!

WebPlus makes the process of placing items for sale on your website

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!

6 Welcome

• RSS—News and Information Feeds on your page

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

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

• Web-ready Forms for gathering content

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.

• No more lost customers with Google Maps!

Embed a Google Map directly into your "Directions" web page. Add

your own multiple markers to pinpoint locations such as offices,

depots, places of interest, and events.

• Site Management Tools

Manage all your Page/Master Page Properties, resources, fonts,

text, hyperlinks, and anchors—all from within WebPlus's Site

Manager. Powerfully manage web pages individually, by selection, or

apply to all pages. Site Checker detects Site Navigation, Text

Formatting, and Form/E-commerce problems and carries out

automatic fixes where possible.

Ease of Use

• QuickBuilder Bar

The simple way to get started with WebPlus—drag pages, navigation

bars, text frames, images, Flash content, photo galleries, or Smart

objects directly onto the page for quick results with no prior

knowledge of the user interface.

• Learn WebPlus

The Startup Wizard's new Learning Zone helps you get the very best

out of WebPlus. Tutorials, both PDF and video, are published along

with a host of other resources and product support details.

Welcome 7

• Quick Publish

Upload and view a currently displayed page—great for live

verification of individual pages as you build your website.

• Dynamic guides

Align and resize objects with each other using dynamic guide

snapping, without the need for ruler guides or precise object

transforms.

Pictures

• Import Pictures

Import commonly-used standard file formats, including all the latest

RAW digital camera formats, Photoshop files, Microsoft HD Photo,

and Serif SMF files. Import multiple images and paste one by one!

• More picture power with Media Bar

No more repetitive photo importing! Keep photo content to hand in

the new Media Bar—drag and drop from the Media Bar onto pictures

to replace! Search for pictures by their metadata. Control picture

sizing and alignment within its frame.

• Stunning online Photo Galleries!

Wow your friends, family and colleagues with stunning Flash and

JavaScript photo galleries. Various gallery styles offer photo

navigation by selection from thumbnails, thumbnail rollovers, photo

grid or photo stack. Use the Autoplay feature for looping photo

slideshows. Finally, take advantage of caption support (using EXIF

data)!

• Quick Image Adjustments

From the Picture context toolbar, apply adjustments (Brightness,

Contrast, fix red eye, and more) quickly or use Edit in PhotoPlus,

which accesses Serif's award-winning photo-editing package (if

installed).

• PhotoLab for non-destructive adjustment and effect filters

The powerful PhotoLab packs a punch with an impressive selection

of editable adjustments, creative, and artistic effects (pencil, water

color, oil, and more). Use integrated Straighten, Crop, Red-eye, and

Spot-repair tools for easy retouching. Apply filters to selected areas

of your photo by using brush-based masking. Save adjustment/effect

combinations as favorites for future use.

8 Welcome

• Quick-and-easy Image Cutouts

Image Cutout Studio makes light work of cutting out your placed

pictures, directly in WebPlus. Use brushes to discard uniform

backgrounds (sky, walls, etc.) or keep subjects of interest (people,

objects, etc.).

• A versatile Metafile Format

Import and Export Serif Metafiles (.smf), a proprietary image format

with improvements to the Windows Metafile format (WMF). Better

line, fill, and text definitions make them ideal for sharing graphics

between Serif applications.

• Popup Rollovers

Create your own simple photo gallery—show a larger version of a

picture on thumbnail hover over.

Media

• YouTube® Videos

Pick your favorite YouTube® videos and include them on your web

page!

• Podcasts

Create your own podcast feeds and broadcast your own audio and

video episodes frequently and easily. Web visitors can subscribe with

all the most popular web browsers and via on-click subscription to

Google Reader®, My Yahoo!®, and Apple iTunes®.

Creativity

• Drawing Tools

Design stunning vector graphics with Pencil, Pen and Straight Line

tools, and add line endings like arrowheads, diamonds, and quills.

Alternatively, the array of fully-customizable QuickShapes let you

quickly create outlines for your designs, while Convert to Curves,

Crop to Shape, and curve drawing offer complete flexibility for

creating any shape imaginable! Mesh warp envelopes add

perspective, slant, and bulge to any object. Use stroke alignment for

precise positioning, align a shape or Creative text's stroke to the

inside, outside, or center of its path.

Welcome 9

• Ready-to-use Styles

Choose various filter effects, glows, shadows, textures, and materials

from the Styles tab. Customize the preset styles or store your own!

• Photo-based borders

Exciting new ready-to-go borders can be applied around text frames,

tables and pictures alike. Create and save custom borders from your

own electronic border designs or scanned picture frames! The Gallery

tab's Picture frames have the same borders already applied.

• Joining object outlines

Combine QuickShapes, drawn shapes and artistic text together to

create more complex outlined objects, which can still be edited

further. Use Add, Subtract, Intersect, and Exclude to produce

different and exciting results.

• Transparency

Add transparency to your backgrounds, text frames, tables, shapes and

text to achieve a truly professional look. As with color fills, you can

apply solid, gradient, and bitmap transparencies—even create bitmap

transparencies from your own image collection.

• Intelligent Color Schemes

Choose from dozens of preset color schemes to change the overall

appearance of your site with a single click. Use Color Scheme

Designer to design your very own custom color schemes using

spreads based on accepted color theory (Monochromatic,

Complementary, Triadic, and more). Pick a starting base color and

choose from a range of suggested and related colors—select

individually or populate colors automatically for a new scheme.

• New 2D/3D Filter Effects

Add stunning reflections of an object—great for web page titles and

pictures! Blur any object or stroke a colored solid or gradient border

around object edges (stroke with a new Contour fill which applies

gradient fill from the inner to outer outline width). 3D effects are

boosted with realistic glass-like Transparency control of non-

reflective/reflective surfaces and multiple separately colored lights for

dramatic lighting effects. All filter effects can be applied in preview

mode or to the object on the page. Use the new Shadow Tool for on-

the-page shadow control.

10 Welcome

• Instant 3D with On-screen Transforms

Transform 3D objects in-situ with 3D editing from a context toolbar.

Apply multi-colored lighting effects (with directional control), along

with custom bevel and lathe effect profiles to create your very own

unique contours. Hardware-accelerated rendering boosts redraw

performance (hardware dependent).

Text

• Import Word 2007 and Open Office text documents

Add word processing content to any text frame without fuss! Import

doesn't need the application to be installed locally! Use a choice of

import converters to optimize text import.

• Artistic and frame text

Have complete control over your text with WebPlus’s DTP-style text

control. Artistic text can be used to give your websites high impact—

especially good for titling or adding to a drawn path. HTML text

frames allow you to remain HTML compliant whereas successive

Creative text frames can be filled automatically with text by

AutoFlow or manual text fitting. All text has editing capabilities

compatible with top of the range word processors!

• Text Frames

Compose story text in HTML or Creative text frames then easily

position or size the frame to suit; connected Creative text frames host

the same story text and can be filled automatically by AutoFlow or

manual text fitting. Separate crop and wrap outlines mean you have

greater control over where text flows and how it appears. Import,

paste, export text in Unicode format... design with a foreign-language

or special fonts and characters. Text paths also benefit from intelligent

text fitting.

• Fonts

Substitute missing fonts when opening third-party projects. View

your currently installed font set in the Fonts tab, including those most

recently assigned to text, favorite fonts, and those considered

Websafe. Hover over a listed font for an "in-situ" font preview of

your selected text—simply click to apply the new font if you like it!

Easily swap all selected instances of a common font for another font

in one fell swoop!

Welcome 11

• Tables and Calendars

Choose from a range of preset formats or design your own table. Use

the convenient Table context toolbar to sort data, format cells, and

choose from a wide range of functions for spreadsheet calculations

(use absolute cell references). Calendars are table-based for enhanced

functionality, and support Year update, inline personal events, and

public holidays!

• Find & Replace

Search through story text for words and phrases but also text

attributes, particular fonts, colors, special characters (Unicode),

regular expressions, and words at specific positions in sentences.

Web Publishing

• Previewing your work

Test drive your new web page or your entire site in a choice of

different installed web browsers.

• Publish your site

Publish to a local folder or upload directly to your ISP via FTP;

upload any new or edited pages incrementally.

• Website hosting with Serif

Publish your site with Serif! Combine simple sign-up, different levels

of service, and no-fuss publishing for the ideal hosting solution. Set up

via your Serif Web Resources account while managing access control,

forums, blogs, and other Smart objects at the same time.

12 Welcome

Installation

System Requirements

Minimum:

• Pentium PC with DVD/CD drive and mouse

• Microsoft Windows® XP (32 bit), Windows® Vista, or Windows® 7

operating system

• 512MB RAM

• 510MB free hard disk space

• 1024 x 600 monitor resolution

• Internet Explorer 5.5 (6.0 or above for Smart object use)

Additional disk resources and memory are required when editing large and/or

complex images.

Optional:

• Windows-compatible printer

• TWAIN-compatible scanner and/or digital camera

• 3D Accelerated graphics card with DirectX 9 (or above) or OpenGL

support

• .NET 2.0 for text import filters (Word 2007 + OpenOffice) (installed

by default)

• Internet account and connection required for web publishing and

accessing online resources

• Adobe® Flash® Player 9.0 or above to view Learning Zone resources

Welcome 13

First-time install

To install WebPlus, simply insert the Program CD into your DVD/CD drive.

The AutoRun feature automatically starts the Setup process. Just answer the on-

screen questions to install the program.

Re-install

To re-install the software or to change the installation at a later date, select

Settings/Control Panel from the Windows Start menu and then click on the

Add/Remove Programs icon. Make sure the WebPlus Essentials Program CD

is inserted into your CD/DVD drive, click the Install… button and then simply

follow the on-screen instructions.

14 Welcome

Getting Started

16 Getting Started

Getting Started 17

Startup Wizard

Once WebPlus has been installed, you'll be ready to start. Setup adds a Serif

WebPlus Essentials item to the (All) Programs submenu of the Windows

Start menu.

• Use the Windows Start button to pop up the Start Menu, click on All

Programs and then click the WebPlus item.

The Startup Wizard presents several choices:

*Startup Wizard may differ in your program.

The options are self explanatory, where site creation can be made from scratch

or from a pre-supplied design template. Previously saved sites can be opened or

non-WebPlus web pages can be imported into your site from file or URL.

• Start New Site, to create your own site from scratch.

• Use Design Template, to create an instant site from a pre-designed

template.

• Open Saved Site, to open a previously saved WebPlus site.

18 Getting Started

• WebPlus hosting, to host your published WebPlus site with Serif.

• Learning Zone, to access videos, tutorials, support information, and

more.

Use the Choose Workspace drop-down menu to choose your workspace

appearance (i.e., Studio tab positions, tab sizes, and show/hide tab status). You

can adopt the default workspace profile <Default Profile>, the last used profile

<Current Profile>, a range of profile presets, or a workspace profile you have

previously saved.

As you click on different profiles from the menu, your

workspace will preview each tab layout in turn.

The Startup Wizard is displayed by default when you launch WebPlus. You can

switch it off via the Don't show this wizard again check box on the Startup

Wizard screen, or on again via the Use Startup Wizard check box in

Tools>Options... (use Options>General menu option).

Creating a site using a design template

WebPlus comes complete with a whole range of categorized design templates

which will speed you through the creation of all kinds of websites.

Each template offers:

• Complementary design—Professionally designed layout with high-

visual impact.

• Schemes—choose a named color scheme to apply a specific look and

feel (e.g., Atlantis).

• Page selection—select some or all template pages (e.g., Home,

Products, About Us, etc.) to base your new site on.

Getting Started 19

Design templates come in two types—theme layouts, where you pick your own

pictures, or ready-to-go templates which are already populated with pictures.

Theme layouts

These offer a choice of themes (e.g., Arctic) on which to base your site; you'll

get picture placeholders instead of actual pictures. Simply add your own pictures

to placeholders and personalize placeholder text, then publish.

Ready-to-go templates

These are categorized templates containing royalty-free pictures which can be

adopted to fast-track you to your completed website. You just need to

personalize placeholder text, then publish.

Template categories include Interest, Personal, Community & Education, and

Home Business.

To create a site using a design template:

1. Launch WebPlus, or choose Startup Wizard... from the File menu, to

display the Startup Wizard.

2. Select Use Design Template.

20 Getting Started

3. From the dialog, select a theme or template design from the main

pane.

Templates are grouped into subject-based categories; use the scroll bar

or collapse a category to reveal more options (click the

button next

to the category name). The right-hand pane refreshes to display

thumbnails of that template's available pages.

4. From the right-hand pane, decide which pages you

wish to be part of your site. Check or uncheck under

each page to select, or click Select All to select all

pages (click Deselect All to clear the current

selection).

5. Pick a Color Scheme from the drop-down list at the

top of the dialog (for theme layouts, the first three

schemes are designed specifically for that layout). The

page thumbnails refresh to reflect the new page's

appearance. For a closer look, use the Zoom In/Zoom

Out buttons or Zoom slider at the bottom of the dialog.

6. Click Open.

Getting Started 21

The site opens to the first (Home) page, with the Studio's Site tab displayed on

the right, showing the various pages that comprise the site in its Site Structure

tree.

As each template is color schemed, you can swap the underlying

scheme, and the site's appearance, for another scheme at any time!

Notes

Some templates contain Smart objects (see p. 267) such as

newsletter sign ups and polls. As Smart objects are stored in Serif

Web Resources they have to be associated with a valid Serif

customer account. If you want to make use of the Smart object (if

unwanted just delete them), double-click it and login to Serif Web

Resources; this will associate the object to your account.

Once you're working in WebPlus you can easily adopt additional

pages from any template to add style variation to your site—for

instance, you could create web pages with a set look and feel, but a

separate members-only area could adopt a different look entirely by

adding another templates' pages. See Adding, removing, and

rearranging pages on p. 34 for more details.

Starting a site from scratch

Although design templates can simplify your design choices, you can just as

easily start out from scratch with a new, blank site.

To start a new site from scratch using the Startup Wizard:

• Launch WebPlus, and select Create>Start New Site.

The new site opens with a blank page using default page properties.

If you click Cancel (or press Escape) from the Startup Wizard,

you'll get the same result.

To start a new site during your WebPlus session:

• Choose New from the File menu.

22 Getting Started

To help you quickly build a site from scratch, WebPlus offers the QuickBuilder

Bar. The tab hosts commonly used objects and features which can be introduced

onto your web page by drag-and-drop, avoiding the need to initially understand

the range of WebPlus toolbars.

Opening an existing site

You can open an existing WebPlus site from the Startup Wizard, via the

Standard toolbar, or via the File menu.

To open an existing WebPlus site (Startup Wizard):

1. Select the Open Saved Site option. In the Documents pane of the

Open Saved Work dialog, you'll see either your computer's folder

structure for navigation to your sites (Folders tab) or a list of most

recently used sites (History tab). Preview thumbnails or site details

can be shown in the adjacent pane depending on your current view.

2. Click a file name or sample, then click Open. The site opens to the

first (Home) page.

To open an existing WebPlus site (during WebPlus session):

1. Click

Open on the Standard toolbar.

2. In the Open dialog, select the folder and file name and click the Open

button.

To revert to the saved version of an open site:

• Choose Revert from the File menu.

Getting Started 23

Font substitution

WebPlus supports automatic font substitution as you open a WebPlus site which

has fonts which are not stored on your computer. The dialog that shows also lets

you manually substitute a missing font if necessary. See online Help for more

details.

Working with more than one site

If you have multiple websites open at the same time it's easy to jump between

them using different methods.

Click on a Window tab at the top of the workspace to make it active (e.g.,

Design657.wpp).

Alternatively, you can select the name of a currently open site from the Window

menu. Unsaved websites are indicated by an asterisk; the currently active site is

shown with a tick. In the example above, the Design657.wpp site is active and

also unsaved.

Saving your site

To save your work:

• Click Save on the Standard toolbar.

• To save under a different name, choose Save As... from the File menu.

An unsaved site will have an asterisk after its name shown in either

its Window tab or on the Window menu.

24 Getting Started

Developing Sites

and Pages

26 Developing Sites and Pages

Developing Sites and Pages 27

Understanding site structure and navigation

Unlike a printed publication, a website doesn't depend on a linear page

sequence. When designing a site, it makes more sense to think of the site in

spatial terms, with a structure like that of a museum which people will explore.

You can generally assume that your visitors will come in through the "front

door" (the Home page)—but where they go after that depends on the links

you've provided. These navigation pathways are like corridors that connect the

various rooms of the museum. It's up to you as the "architect" to develop a

sensible arrangement of pages and links so that visitors can find their way

around easily, without getting lost.

In WebPlus, you can use the Site Structure tree to visually map out the

structure of your site and then add navigation bars—that dynamically adapt to

the structure you've defined.

Site structure

Unlike the museum in our analogy, the "structure" of a website has nothing to do

with its physical layout, or where pages are stored. Rather, it's a way of logically

arranging the content on the site so that visitors have an easier time navigating

through it. One of the most useful organizing principles—which WebPlus

strongly reinforces—is an "inverted tree" structure that starts with the Home

page and then branches out to other pages. To the visitor navigating your site,

this arrangement presents your content in a familiar, hierarchical way, structured

into sections and levels.

• A section is a content category, for example "Who's Who?,"

"Products," or "Links." The various major sections are typically listed

on the site's Home page in a navigation bar. Ideally, each page on the

site belongs to a particular section. And unless there's only one page in

a given section, the section will have its own main page, which usually

serves as a menu for subsidiary pages.

• The level is the number of steps (i.e., jumps) a given page is removed

from the Home page. The Home page will always reside at Level 1,

normally along with main section menu pages. This allows navigation

bars to work easily and automatically. Pages one step "below" the

section menu pages reside at Level 2, and so on.

28 Developing Sites and Pages

In WebPlus, the Site Structure tree (in the Site tab) provides a visual aid that lets

you organize the content on your site into sections and levels—in other words as

a hierarchy of parent pages branching to child pages. Here's how the same

structure might appear in the WebPlus Site Structure tree:

The Site Structure tree makes it easy to

visualize relationships between pages and

lay out your site in a way that makes sense

for the content you have to offer. Of

course, a website is truly an interconnected

web of pages, and the tree structure doesn't

prevent you from installing links between

any two pages. But it does expose the

major pathways within your site—up,

down, and sideways. Logical section/level

design makes your site easier to navigate,

and WebPlus makes it simple to create

navigation bars that mirror your site

structure and help guide your visitors along

those "main roads."

Incidentally, WebPlus also supports

offsite links which can be inserted

into the Site Structure as for any

other page. Either page entry is

slightly different in design to a

standard web page to indicate that it

points to a location outside of the

website.

As an example, compare a standard

web page "Sales" with the offsite

link "Member's forum."

Developing Sites and Pages 29

Navigation

In WebPlus, adding navigation between your web pages is easy with navigation

bars, each pre-programmed to understand your site structure, making it easy to

design a site that's simple to navigate. You simply select one from the Web

Objects toolbar and WebPlus does the rest!

For example, here's a navigation bar we selected for the site shown in the main

tree above. The buttons provide links to the Home and section menu pages (all at

Level 1) and popup menus that link to child pages (Level 2 in this case).

For more information, see Adding navigation bars on p. 41.

Understanding pages and master pages

Pages are the basic unit of web design. WebPlus lets you structure your site's

content by arranging pages into a branching "tree," which in turn helps visitors

navigate through the site. Looking at individual pages from a design standpoint,

each WebPlus page has a "foreground" page and a "background" master page.

Master pages are part of the structure of your WebPlus site, and provide a

flexible way to store background elements that you would like to appear on

more than one page—for example a logo, background, border design, or

navigation bar. The key concept here is that a particular master page is typically

30 Developing Sites and Pages

shared by multiple pages, as illustrated below. By placing a design element on a

master page and then assigning several pages to use that master page, you ensure

that all the pages incorporate that element. Of course, each individual page can

have its own elements.

The Studio's Site tab includes an upper Master Pages section with icons for each

master page, and a lower Site Structure in the Pages window that provides

feedback indicating which master page is being used by each of your web pages:

For more varied page designs across you site, you can apply multiple master

pages to each web page. For more details, see Adding, removing, and

rearranging pages on p. 34.

Developing Sites and Pages 31

Viewing pages

The WebPlus workspace consists of a "page" area and a surrounding

"pasteboard" area.

The page area is where you put the text, graphics, and other elements that you

want to appear on your final web page. The pasteboard is where you generally

keep elements that are being prepared or waiting to be positioned on the page

area. When you publish your site from the WebPlus site, anything which

overlaps the page area appears, while anything entirely on the pasteboard does

not. The pasteboard is shared by all pages and master pages, and it's useful for

copying or moving objects between pages.

To move or copy an object between pages via the pasteboard:

1. Drag the object from the source page onto the pasteboard (hold down

the Ctrl key to copy).

2. Display the target page (see Switching between pages on p. 32).

3. Drag (or Ctrl-drag to copy) the object from the pasteboard onto the

target page.

WebPlus makes it easy to see exactly what you're working on—from a wide

view of a whole page to a close up view of a small region. For example, you can

use the scroll bars at the right and bottom of the main window to move the page

32 Developing Sites and Pages

and pasteboard with respect to the main window. The view automatically re-

centers itself as you drag objects to the edge of the screen.

The View toolbar at the top of the screen provides the

Pan Tool as an

alternative way of moving around, plus a number of buttons that let you zoom in

and out so you can inspect and/or edit the page at different levels of detail.

If you're using a wheel mouse, spinning the wheel scrolls

vertically. Shift-spin to scroll horizontally and Ctrl-spin to zoom

in or out!

Switching between pages

WebPlus provides a variety of ways of getting quickly to the part of your site

you need to work on. The Studio's Site tab provides a central "control panel"

including both the Site Structure tree, which depicts the hierarchy of pages in

your site (see Understanding site structure and navigation on p. 27), and icons

for each of the site's master pages.

Selecting vs. viewing a page: Single-clicking a page/master page entry merely

selects the page. To actually view the associated page/master page you need to

double-click an entry.

An orange entry (with bolded page

name) denotes the selected page.

The eye icon denotes the currently

viewed page—which you're able to

edit in the workspace. This

example shows that the page is

currently in view as well as

selected. It also now uses a

different Master Page (B instead of

A).

A highlighted master page icon in the Site tab's upper

window denotes the selected master page.

Developing Sites and Pages 33

An eye icon in the master page icon denotes the

currently viewed page. This example shows a viewed

(but unselected) master page.

To view a specific page/master page:

Several methods can be used to view a page:

• On the Hintline, use the Hintline's page navigation buttons.

Click the entry for the page or master page in the Page Locator list.

• On the Studio's Site tab, double-click the entry for the page (or master

page) you want to view. The Site Structure window of the tab includes

a tree with entries for pages in the site, while the Master Pages

window shows only master pages as thumbnails. You may need to

click the Master Pages> button to display the master pages window.

• Click the Site Structure button on the Hintline or on the Site

tab's Page window. Select the page entry in the dialog's tree (double-

click tree entries if necessary to expand each branch). Then click the

View Page button.

For master pages:

• On the Studio's Site tab, click the Master Pages> button to reveal a

master page window. One or more master page icons will be

displayed.

34 Developing Sites and Pages

• Double-click the icon for the master page you want to view.

To switch between the current page and master page:

• Click the Page/Master Page button on the Hintline.

As a shortcut to view the site's Home page:

• Click the Home Page button on the Hintline.

Adding, removing, and rearranging pages

Using the Studio's Site tab,

you can quickly add or delete

pages at any level of your site

structure, and use drag-and-

drop to rearrange pages within

the structure as needed, add

new master pages, reassign

pages to particular master

pages, and add offsite links.

Use the upper Master Pages window of the Site tab to access master pages, and

the Pages window (tab's central Site Structure tree) to access pages. Pages (with

page content or blank) can also be added from multi-page templates (see p. 18).

Besides the Site tab, WebPlus offers a variety of other ways to manipulate

pages: the Site Structure dialog, the Master Page Manager, and both standard

and right-click (context) menus.

Developing Sites and Pages 35

To add a new blank page:

1. Click the down arrow on the

Add button directly above the

Site tab's Pages window. From the drop-down menu, choose New

Blank Page.

2. In the New Page Properties dialog, specify options for the new page in

the Appearance tab (see Setting page properties on p. 57) as well as

options only available via this dialog:

• Duplicate the design elements from an existing web page. Check

Copy objects from page and select the page in the activated list.

• Specify the position of the new page in the Site Structure. In the

Placement section, insert the page Before, After, or make it a Child of

the named page.

3. Click OK.

A new page appears at the specified location in the site structure. The page uses

Site Properties (p. 54) for its dimensions. You can always move the page to a

different position or level, or switch to a different master page (see Rearranging

pages or Assigning master pages on p. 38 and 39).

While adding standard pages lets you start page design from scratch, you can

make life a little easier by adopting "ready to go" pages from supplied WebPlus

templates. To maintain the page's original design, any master page associated

with the added page can optionally be "imported" with the page.

To add a new page from a template:

1. In the Pages Window (Site Structure tree) of the Studio's Site tab,

select a page after which you want to add the new page.

2. Click the down arrow on the

Add button directly above the

Pages window. From the drop-down menu choose New Template

Page....

36 Developing Sites and Pages

3. From the Add New Page from Template... dialog, select a template

from the left-hand pane, and check the page for addition (check further

pages for inclusion if needed).

4. WebPlus lets you control if an associated master page is copied with

the page. Pick from the top-left drop-down menu choosing one of:

• Copy Master Page. To always copy the master page into your

site.

• Compare and Copy Master Page. Checks if the master page

already exists in your site then copies it if not present.

• No Master Page. The page's master page is never copied to the

site.

5. Click the Open button. The pages are added to the Site tab.

You can also add an offsite link to your site structure. Typically, this would be a

page or resource separate from your site that you wanted to include in your site's

navigation structure. The offsite link appears in the Site Structure tree and in

navigation bars, so you can manipulate it just as if it were a page in your site.

To add an offsite link:

1. In the Pages Window (Site Structure tree) of the Studio's Site tab,

select a page after which you want to add the new page.

Developing Sites and Pages 37

2. Click the down arrow on the Add button directly above the

Pages window. From the drop-down menu, choose New Offsite

Link....

3. In the dialog, type a Menu name to identify the offsite link in the Site

Structure tree (the equivalent of its page name).

4. Click to select the link destination type, and enter the specific offsite

hyperlink target (see Selecting a hyperlink target on p. 223), and the

window in which you want the target to appear. Keep Include in

Navigation checked if the link is to appear in site-wide navigation.

• Check Before and/or After to apply horizontal separator lines

above/below the page as a submenu item in navigation bars.

• Add a Description to add extra page-related text information on

the bar's submenu item.

5. Click OK.

To add a new master page:

1. On the Studio's Site tab, ensure the Master Pages> button is clicked

to expand the Master Page Window.

2. Click the

Add button above the Master Pages window.

A new master page appears in the Site tab's Master Pages window.

To easily distinguish between multiple master pages, you can assign them

distinct names. The master pages will still adopt a letter designation as a suffix,

e.g. A, B, C, etc. so you can check master page assignment in your Site

Structure.

To name a master page:

1. Right-click the master page thumbnail and choose Properties....

2. Edit the Name of the page.

38 Developing Sites and Pages

To clone a page:

• In the Studio's Site tab, right-click on a selected page and choose

Clone Page. An identical copy is inserted below the selected page.

To delete a page or master page:

1. On the Studio's Site tab, select the page (or master page) to delete by

clicking its entry.

2. Click the

Remove button above the appropriate window to delete

the page.

When you delete a page, you'll have the option to remove any

hyperlinks in your site that point to it, or redirect the hyperlinks to

another specified page (hyperlinks to anchors on the deleted page

can optionally be deleted).

Rearranging pages

Besides using the Site Structure tree to add or delete pages, you can use it to

rearrange pages as needed. Using the parent/child structure, rearranging pages is

an intuitive process whether you use drag-and-drop or convenient buttons. You

can move a page:

• To a different sequential position (up or down) at the same level of

the structure

• To a higher (parent) level

• To a lower (child) level

To move a page:

1. Display the Studio's Site tab.

2. Single-click to select the page in the Site Structure tree.

Developing Sites and Pages 39

3. (Using drag-and-drop) Drag the page entry up or down and drop it at a

new position in the tree. Watch the cursor for feedback on the new

position relative to that of the page just below the cursor:

moves the page to the same level as, and following, the

highlighted target page.

makes the page a child of the highlighted target page.

Assigning individual master pages

If you've defined more than one master page for your site, you can use a variety

of methods to reassign a specific master page to individual pages, one page at a

time. (For an overview, see Understanding pages and master pages on p. 29.)

To assign an individual master page to a page:

• On the Studio's Site tab, click on the master page thumbnail (in the

Master Pages section) and drag onto the page entry (in the tab's Site

Structure section).

Assigning multiple master pages

For pages with more design diversity, you can assign more than one master page

to each web page by using the Master Pages tab. As an example, you have two

designs existing on two separate master pages—"Master A" and "Master B."

Using the Master Pages tab, you can place "Master B," containing the IPSUM

text, in front of the selected page, with Master A used as the page background.

You'll need to create multiple master pages in advance of using the

Master Pages tab.

40 Developing Sites and Pages

To assign multiple master pages to a web page:

1. From the Site tab, select the page which will have multiple master

pages.

2. In the Master Pages tab, click the Add button.

3. From the dialog's drop-down menu, select the additional already

created master page, and click OK. Your additional master page is

added to the tab (below) and the web page will be using the page

elements of the newly assigned master page.

The Site tab's Site Structure shows a web page with a plus sign if multiple

master pages are assigned (instead of A, B, C, etc.).

The Master Pages tab lets you control the order in

which the page and master page contents are

displayed on the page. In a similar way to layers in

an illustration program, objects on the entry

uppermost in the tab can be shown in front of

objects on "lower" master pages. Master pages can

also be rearranged amongst each other. Newly

added master pages are added to the bottom of the

stack so will show behind all other content.

In the example, Master B is positioned above all

other content.

Developing Sites and Pages 41

To reorder the page content and master pages:

• Select the entry in the tab and click the Up or Down button.

To temporarily hide a master page, uncheck its entry in the tab.

To unassign a master page:

• Select the entry in the tab and click the Remove button.

Adding navigation bars

In WebPlus, navigation bars are programmed to understand your site structure,

making it easy to design a site that's simple to navigate.

Navigation bars facilitate movement between the various sections and levels of a

site. For example, in the navigation bar examples below, the buttons provide

links to the Home page and various top-level section pages, while popup menus

link to child pages (Story 1 and Story 2) within each section.

You can easily install navigation bars at any level of your site, reconfigure them

to link to a particular part of the site, change the appearance of the navigation

bar, and exclude particular pages from navigation as needed.

42 Developing Sites and Pages

Navigation types

WebPlus offers various types of navigation bars depending on the level of

functionality and design you're looking for in your navigation bar. All

navigation bars are JavaScript-based, and belong to three types:

Navigation bar types Use for:

Basic (JavaScript) Text-based

navigation bars without

backgrounds.

Designer (JavaScript) Text-based

navigation bars with button and bar

backgrounds.

Miscellaneous

(JavaScript)

Combo box, vertical site map, folding style, or

concertina (sliding image) navigation bars.

Created as searchable HTML text.

Creating navigation bars

Navigation bars can be added to any page but are typically added to the master

page—as this saves you the trouble of pasting the same element to multiple

pages. A navigation bar 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.

When adding a navigation bar, you can choose navigation Type, Options, and a

set Style. Once added, the bar can be edited at any time. New bars can be created

from any existing navigation bar in your site.

To add a navigation bar:

1. Select the page (or master page).

2. Click

Insert Navigation Bar on the Web Objects toolbar.

Developing Sites and Pages 43

3. From the dialog's Type tab, a default gallery of navigation bars

appears. For a different navigation type, select from the upper-right

Type drop-down menu.

The Navigation bar gallery lets you select a navigation bar of that

type, e.g.

4. From the Navigation Type tab choose whether to base your

navigation bar directly on the site's Site Structure (enable Based on

site structure) or customize the navigation bar's options (enable

Custom; see Customizing navigation bars on p. 44).

For the former method:

• Select which buttons should be included in the navigation bar: Top

Level, Parent Level, Same Level, Child Level, Home, Previous and

Next, Previous, Next, Up, Breadcrumb, Anchors, or Back.

• Depending on the main selection, you can opt to include the child

page, anchors, home page, parent page, and/or Hide current page.

• Check Don't use page names to use custom button names

(otherwise buttons will have functional names like "Previous" or

"Home").

• Set Target Frame/Window to change where the new page will

open. Choose from Same Window (most common), New Window

(useful for off-site pages), Top of Current Window, Parent Frame,

Named Window and Document Frame.

5. From the Options tab you can control how the navigation bar

functions. You can change alignment and pop-up/menu positioning

options.

6. (Optional) From the Style tab, you can select different coordinated

menu and submenu's object and text properties.

7. Click OK. The navigation bar appears on your page.

44 Developing Sites and Pages

When including anchors in navigation bars, you'll be able to

navigate between various sections of long pages or to repeating

areas as menu options.

At any time the navigation bar can be edited, either to adjust the navigation type,

its options or style.

To edit a navigation bar:

1. Double-click the navigation bar (or right-click it and choose Edit

Navigation Bar...).

2. Change settings available from the Navigation Type, Options, and

Style tabs.

You can edit the chosen navigation bar but cannot change its type.

WebPlus also lets you base a new navigation bar on an existing one in your site,

rather than use one from the Navigation bar gallery. This saves having to

customize a navigation bar from the gallery again.

You'll need to deselect any existing navigation bar on your page

first, otherwise it will be replaced by your new navigation bar

design!

To create a new navigation bar from an existing navigation bar:

1. From the dialog's Type tab, enable Copy Existing Navigation Bar.

The gallery updates to show the currently used navigation bars in your

site.

2. Click Select next to the chosen navigation bar, then modify the

navigation type or style as described under To add a navigation bar

(see p. 42).

3. Click OK.

Customizing navigation bars

By default, navigation bar items will be based on your site structure. If you're

looking to rearrange the order or hierarchy of your navigation bar items to be

different from your Site Structure, WebPlus will allow you to customize any

Developing Sites and Pages 45

navigation bars by creating a custom navigation tree—you can also add, edit,

or delete elements which will access a range of link destination types (see

Adding hyperlinks and anchors on p. 223) just as in Site tab's Site Structure.

Once you're working with a custom navigation tree, the navigation

bar will no longer automatically update when new pages are added

to your site. If you still want this to happen, you'll have to base your

bar on the site's Site Structure.

To customize a selected navigation bar:

1. Double-click the navigation bar.

2. From the Navigation Type tab, enable the Custom option, and ensure

New navigation tree is enabled.

3. (Optional) Name the navigation tree in the Navigation Tree Name box.

4. 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).

5. Click Add Link to add a new link 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.

(Optional) Click Reset to revert the navigation tree back to its original

structure. Export Options... let you control the location and naming

of the JavaScript file used to display your custom navigation tree.

6. Click OK again. The navigation bar now uses the custom navigation

tree to present menu options.

The custom Navigation tree which is saved is given a name (e.g.,

customnavtree-1) and is automatically stored in your site.

If you plan to create more navigation

bars for your site, you can reuse the same

custom navigation tree for your new

navigation bar by selection from the

dialog. Existing bars can also be swapped

to use the new tree structure during

editing.

46 Developing Sites and Pages

Alternatively, you can use the Copy... button to copy the navigation tree used in

a navigation bar already in your site. This will replace the current tree.

Using navigation bar styles

When you create or edit a navigation bar, you may wish to keep the bar's

navigation type and structure the same, but customize its look and feel. The

edited style can be overwritten or copied to a new style.

If you're working with multiple navigation bars and styles, use the Navigation

Manager to swap styles between bars.

To edit a navigation bar style:

1. From the Style tab, use the flyouts and drop-down menus to create a

unique style. Object colors, menu/submenu font properties, margins,

spacing, and button scaling options can be set.

2. (Optional) Enter a different Style Name. Names are based on the

original navigation bar name.

3. Click OK. If you didn't rename the style, the original style is

overwritten using the same name. If you renamed, a new named style

is created.

Check Copy style to make a duplicate style entry.

1. Right-click the navigation bar on the page and select Edit Style....

2. From the dialog, change the self-explanatory style settings..

3. (Optional) Enter a different style Name.

4. Click OK.

If you like your navigation bar style, either on creation or while editing the

navigation bar, you can reuse it in the future. Created style can be applied to

multiple navigation bars via the Navigation Manager.

Developing Sites and Pages 47

Including/excluding pages in navigation

By default, all pages in the tree are included in navigation—that is, they can be

linked to by navigation bars. You can exclude certain pages (any but the Home

page) so they'll be ignored by navigation bars. 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 would remove it from the

navigation bar. Note that excluding the page from navigation doesn't remove it

from the site—the page will still appear in the Site Structure tree and you can

still install hyperlinks to it; it just won't show up in a navigation bar.

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.

• Included pages show a mark in their page entry in the Site tab's Site

Structure tree, while excluded page entries lack the mark and appear

grayed out.

Using page separators in drop-down menus

For any page, offsite link, or anchor included in navigation (and appearing on a

submenu), their properties can be adjusted to control separators and supporting

page text within the submenu.

• Check Before and/or After

to apply horizontal

separator lines

above/below the page as a

submenu item in

navigation bars.

• Add a Description to add

extra page-related text

information under the bar's

submenu item.

48 Developing Sites and Pages

Using dynamic navigation bars

Up to now, we've assumed that navigation bars are based on your site structure

and show static pages as menu items. However, for more dynamic navigation

bars, you can populate your navigation bar submenus with ever-changing forum

and blog article titles—simply click a title to view the relevant article.

We'll assume you're using an offsite link to connect to your forum and blog, and

that the offsite link is included in navigation.

To create a dynamic navigation bar:

• Right-click the offsite link in Site tab and click Offsite Link

Properties....

• From the Offsite Link dialog, change the drop-down menu in the

Smart Object Information section to add feed items (i.e., published

article titles) as children to the bar's submenu.

Each article title is clickable, launching the associated article in a

window, typically a separate window.

Checking your navigation bars

The Navigation Manager gives you an overview of all the navigation bars used

in your site from within the Site Manager. (To review navigation bar basics, see

Understanding site structure and navigation, p. 27)

To display the Navigation Manager:

• Click Site Manager on the Default context toolbar (or Hintline

at the bottom of your workspace), then choose the Navigation menu

option.

Developing Sites and Pages 49

Choose Site Manager>Navigation Manager... from the Tools menu.

The Site Manager is launched with Navigation Manager shown by

default.

The Manager displays the bar's page location, names, its navigation tree, and

style, listed by page number.

To set the scope of entries displayed:

• To display links or anchors throughout the site, select All Pages in the

Page drop-down list.

• To narrow the scope to a particular page or master page, select the

page name in the first column of the main list.

To display an entry for closer inspection:

• Click to select the entry and click the Display button. WebPlus

"zeroes in" on the selected item.

To remove a navigation bar entry:

• Click to select its entry and click the Delete button.

To modify a navigation bar entry:

• Click to select its entry and click the Modify button. A dialog appears

to allow modification.

To change the navigation bar tree or style:

• For a specific navigation bar, click under its Navigation Tree or Style

column and choose a new tree or style from the drop-down menu.

50 Developing Sites and Pages

Using layout aids

Layout guides are visual guide lines that help you position layout elements,

either "by eye" or with snapping turned on. When the snapping feature is turned

on, objects you create, move, or resize will jump to align with nearby, visible

layout guides. WebPlus provides a variety of layout guides to assist you: page

margins, row/column guides and ruler guides.

• Page margin settings are fundamental to your layout, and usually are

among the first choices you'll make after starting a site from scratch.

Narrow margins around the perimeter are a good starting point for

clean page design. The page margins are shown as a blue box which is

actually four guide lines—for top, bottom, left, and right—indicating

the underlying page margin settings. If you like, you can set the

margins to match your current printer settings.

• Row and column guides act as an underlying layout aid, separating

your page into multiple rows or columns shown with dashed blue

guide lines.

• Ruler guides are free-floating "sticky" red guide lines that are great

for aligning objects vertically or horizontally.

To define layout guides:

• Click Layout Guides on the Default context toolbar.

The Margins tab lets you set guide lines for page margins, rows, and columns.

You can set the left, right, top, and bottom margins individually. The dialog also

provides options for balanced margins (left matching right, top matching

bottom).

Use the Row and Column Guides section to define guides for rows and

columns with an optional in-between gutter (gap). If you want rows or columns

of uneven width, first place them at fixed intervals, then later drag on the guides

to reposition them as required.

The Guides tab lets you fine-position ruler guides by specifying absolute pixel

positioning (guides can also be dragged onto the page from WebPlus rulers; see

Creating ruler guides on p. 51).

Developing Sites and Pages 51

To show or hide layout guides:

• Click or unclick Guide Lines on the View menu.

This setting also affects any ruler guides you've placed on the page area.

Creating ruler guides

WebPlus lets you to set up horizontal and vertical ruler guides—lines you can

use to align headlines, pictures, and other layout elements, but which won't

appear in your published site.

Guides are by default "sticky" so that stuck objects can be dragged around the

page by their ruler guide—a great way to move previously aligned objects in

bulk and simultaneously.

• To create a ruler guide, click on a ruler, hold down your mouse button,

then drag onto your page. A ruler guide line appears parallel to the

ruler (Alt-drag to create the guide at 90 degrees to the ruler).

• To move a guide, drag it.

• To remove a guide, drag and drop it anywhere outside the page area.

• To lock ruler guides, choose Tools>Options... and select the Layout

option, then check Lock guide lines.

Report abuse

Libble takes abuse of its services very seriously. We're committed to dealing with such abuse according to the laws in your country of residence. When you submit a report, we'll investigate it and take the appropriate action. We'll get back to you only if we require additional details or have more information to share.

Product:

Forumrules

To achieve meaningful questions, we apply the following rules:

First, read the manual;
Check if your question has been asked previously;
Try to ask your question as clearly as possible;
Did you already try to solve the problem? Please mention this;
Is your problem solved by a visitor then let him/her know in this forum;
To give a response to a question or answer, do not use this form but click on the button 'reply to this question';
Your question will be posted here and emailed to our subscribers. Therefore, avoid filling in personal details.

new questions and answers
new manuals

You will receive an email to register for one or both of the options.

Get your user manual by e-mail

Enter your email address to receive the manual of Serif WebPlus Essentials in the language / languages: English as an attachment in your email.

The manual is 4,29 mb in size.

You will receive the manual in your email within minutes. If you have not received an email, then probably have entered the wrong email address or your mailbox is too full. In addition, it may be that your ISP may have a maximum size for emails to receive.

The manual is sent by email. Check your email

If you have not received an email with the manual within fifteen minutes, it may be that you have a entered a wrong email address or that your ISP has set a maximum size to receive email that is smaller than the size of the manual.

The email address you have provided is not correct.

Please check the email address and correct it.

Your question is posted on this page

Would you like to receive an email when new answers and questions are posted? Please enter your email address.

Info

Serif WebPlus Essentials Manual

Product: