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: www.serif.
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 images ©1997-2002 Nova Development Corporation; ©1995 Expressions Computer Software; ©1996-98 CreatiCom, Inc.; ©1996 Cliptoart; ©1997 Multimedia Agency Corporation; ©1997-98 Seattle Support Group. Rights of all parties reserved. Digital Images ©2008 Hemera Technologies Inc. All Rights Reserved.
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. © 2009 Serif (Europe) Ltd. All rights reserved. No part of this User Guide may be reproduced in any form without the express written permission of Serif (Europe) Ltd. Serif WebPlus X4 © 2009 Serif (Europe) Ltd.
Contents Contents 1. Welcome .......................................................... 1 Welcome! .................................................................................. 3 Key features .............................................................................. 4 New features ........................................................................... 10 Installation ............................................................................... 14 2. Getting Started .........................
Contents Adding Google maps ...............................................................87 Adding advertising ...................................................................91 4. Working with Text........................................... 95 Importing text from a file ..........................................................97 Understanding text frames .......................................................98 Using artistic text....................................................................
Contents Joining object outlines ........................................................... 153 Ordering objects .................................................................... 155 Aligning and distributing objects............................................ 155 Snapping ............................................................................... 157 Attaching objects to text ........................................................ 159 Creating groups ..............................................
Contents 10. Colour, Fills, and Transparency ................... 235 Applying solid colours ............................................................237 Using colour schemes ............................................................239 Working with gradient and bitmap fills....................................245 Setting transparency ..............................................................246 11. Adding Hyperlinks and Interactivity .............. 249 Adding hyperlinks and anchors ...............
1 Welcome
2 Welcome
Welcome 3 Welcome! Welcome to WebPlus X4 from Serif—the easiest way to get your business, organization, or household 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.
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 colour scheme in an instant—choose design templates from Business, E-Commerce, Personal, Entertainment, Email, and Interests categories, all packed with royalty free images for you to use.
Welcome 5 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 fullsized window. Create multiple forums and manage independently (moderate discussions and set up user login access).
6 Welcome Pictures • Import Pictures Import commonly-used standard file formats, including all the latest RAW digital camera formats and Photoshop 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.
Welcome • 7 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®. Graphics • Drawing Tools Design stunning vector graphics with Pencil, Pen and Straight Line tools, and add line endings like arrowheads, diamonds, and quills.
8 Welcome • Instant 3D with On-screen Transforms Transform 3D objects in-situ with 3D editing from a context toolbar. Apply multi-coloured 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 • Artistic and frame text Have complete control over your text with WebPlus’s DTP-style text control.
Welcome 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, colours, special characters (Unicode), regular expressions, and words at specific positions in sentences. • Database Merge Present database content on your web page from Serif databases (.sdb), Microsoft Access (.
10 Welcome New features • Exciting new Navigation Bars (p. 45) Use Flash or JavaScript-driven 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, blog, and CMS articles in dynamically changing navigation bar submenus. Navigation Manager controls all navigation bars from one point. • Resource booking (p.
Welcome • 11 Earn money for your website with Google AdSense (p. 91) Add Google-driven advertising space on your website, while Google pays you... 24/7! More creativity • Theme layout design templates (p. 20) Choose a theme such as Arctic or Natural on which to base your site! Each theme offers a choice of commonly used page types—choose from About Us, Gallery, Products, and Contact pages, and many more.
12 Welcome Ease of Use • QuickBuilder Bar (p. 24) 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 (p. 19) 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 13 Pictures • Stunning Photo Galleries (p. 229) Choose from three Photo Gallery types—powered by SlideShowPro™ (Flash), Flash, and JavaScript. Take advantage of caption support (using EXIF data), and create and manage albums. • Non-destructive adjustment and effect filters (p. 208) The powerful PhotoLab packs a punch with an impressive selection of editable adjustments, creative, and artistic effects (pencil, water colour, oil, and more).
14 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 (32 or 64 bit) • 512MB RAM • 749MB free hard disk space (855MB with Resource CD installed) • 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.
Welcome 15 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 onscreen 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.
16 Welcome
2 Getting Started
18 Getting Started
Getting Started 19 Startup Wizard Once WebPlus has been installed, you'll be ready to start. Setup adds a Serif WebPlus X4 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: The options are self explanatory, where site creation can be made from scratch or from a pre-supplied design template.
20 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 , the last used profile , a range of profile presets, or a workspace profile you have previously saved.
Getting Started 21 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.
22 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.
Getting Started 23 5. Pick a Colour 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.
24 Getting Started 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.
Getting Started 25 Opening an existing site You can open an existing WebPlus site from the Startup Wizard, via the Standard toolbar, or via the File menu. It is also possible to Import Web Pages from existing HTML websites via the Startup Wizard. (See online help or more details.) To open an existing WebPlus site (Startup Wizard): 1. Select the Open Saved Site option.
26 Getting Started 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 opposite, the Design657.wpp site is active and also unsaved.
3 Developing Sites and Pages
28 Developing Sites and Pages
Developing Sites and Pages 29 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.
30 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.
Developing Sites and Pages 31 Incidentally, WebPlus also supports HTML pages and 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 is based only on HTML code (see p. 267) or that it points to a location outside of the website. As an example, compare the HTML page "Overview," the standard web page "Sales," and the offsite link "Member's forum.
32 Developing Sites and Pages 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.
Developing Sites and Pages 33 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.
34 Developing Sites and Pages keep elements that are being prepared or waiting to be positioned on the page area. When you publish your 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).
Developing Sites and Pages 35 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. 29), 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.
36 Developing Sites and Pages • 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.
Developing Sites and Pages 37 Adding, removing, and rearranging pages Using the Studio's Site tab, you can quickly add or delete standard or HTML 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.
38 Developing Sites and Pages • 3. 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. Click OK. A new page appears at the specified location in the site structure. The page uses Site Properties (p. 59) 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, both on p. 42).
Developing Sites and Pages 4. 5. 39 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. Click the Open button. The pages are added to the Site tab.
40 Developing Sites and Pages To add an HTML page: 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 HTML Page. A new HTML page is added to the Site tab. See Creating HTML pages (p. 267) for more information. You can also add an offsite link to your site structure.
Developing Sites and Pages 41 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.
42 Developing Sites and Pages 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.
Developing Sites and Pages 43 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, let's say you have two designs existing on two separate master pages—"Master A" and "Master B.
44 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.
Developing Sites and Pages 45 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.
46 Developing Sites and Pages 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. 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. Navigation bars use different technologies, specifically JavaScript or Flash.
Developing Sites and Pages 47 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. From the Web Objects toolbar, click Insert Navigation Bar on the Web Objects toolbar's Navigation flyout. 3. From the dialog's Type tab, a default gallery of navigation bars appears.
48 Developing Sites and Pages • 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.
Developing Sites and Pages 49 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. 47). 3. Click OK. Customizing navigation bars By default, navigation bar items will be based your site structure.
50 Developing Sites and Pages (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.
Developing Sites and Pages 51 To edit a navigation bar style: 1. From the Style tab, use the flyouts and drop-down menus to create a unique style. Object colours, 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.
52 Developing Sites and Pages 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 greyed out.
Developing Sites and Pages 53 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, CMS, 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, CMS, and blog, and that the offsite link is included in navigation.
54 Developing Sites and Pages The Manager displays the bar's page location, names, its navigation tree, and style, listed by page number. 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.
Developing Sites and Pages 55 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 below). 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.
56 Developing Sites and Pages • To lock ruler guides, choose Tools>Options... and select the Layout option, then check Lock guide lines. • For precise ruler guide placement, check Ruler marks in Tools>Options>Layout to snap guides to ruler marks. • To unstick a selected object, click one of two small red triangular markers shown at the point where the object is attached to the guide. You'll see a link cursor ( ) as you hover over the sticky guide marker.
Developing Sites and Pages 57 want finer control or smaller snapping increments, click a zoom button to magnify the page. Adjusting rulers By default, the horizontal ruler lies along the top of the WebPlus window and the vertical ruler along the left edge. The default ruler intersection is the topleft corner of the pasteboard area. The default zero point is the top-left corner of the page area, but this can be changed.
58 Developing Sites and Pages To restore the original ruler position and zero point: • Double-click the tab marker on the ruler intersection. To lock the rulers and prevent them from being moved: • Choose Tools>Options>Layout and select the Rulers page, then check Lock Rulers. Rulers as a measuring tool The most obvious role for rulers is as a measuring tool. As you move the mouse pointer, small lines along each ruler display the current horizontal and vertical cursor position.
Developing Sites and Pages 59 To turn the dot grid on and off: • Enable (or disable) the Dot Grid button on the View menu. You can also set the grid spacing, style, and colour via the Options dialog. Setting site properties Site properties allow settings to be made which will be applied across the entire site. Default page settings, HTML output control, search engine optimization, author/copyright, and web usage statistical information can all be set via the multi-tab Site Properties dialog.
60 Developing Sites and Pages Tab Property Options (default) Default page alignment Lets you set a default width and height for web pages. Default page size Default Width and Height settings determine the dimensions of new standard web pages or master pages. Favourites Set an icon file (a graphic) for the site which will show when a web visitor bookmarks your website. Default page file extension The default extension for published pages is .HTML. Some web servers require you to use a different extension.
Developing Sites and Pages Publishing 61 Site URL Defines the full URL address. This is a requirement for search engine optimization with sitemaps or RSS feeds. FTP account Sets the default FTP account used for web publishing. FTP account settings Displays the default FTP account settings. Search Search engine descriptors Include optional descriptive information and keywords for your site.
62 Developing Sites and Pages To set the site-wide page dimension settings: • On the dialog's Options tab, select different Width and/or Height values to apply to master pages. You can also change the default page alignment setting as a site property, or override it for a given page. To set the site-wide page alignment setting: • On the dialog's Options tab, select either "Left" or "Centred" in the Default page alignment drop-down menu. For more details on other tab settings, see online Help.
Developing Sites and Pages Tab name Property Navigation (default) Page, title, and file name Each page has a "visible" page name or file name shown in Site tab's Site Structure tree. You can edit either, as well as choose a title different from the page name. 63 Include in navigation By default, all pages are included in navigation bars. Use this option to exclude the page from navigation.
64 Developing Sites and Pages Effects Page Entry/Exit Transitions Page entry and exit transitions can be applied as you navigate from one web page to another. Use Sound file Choose a background sound to load and play automatically when a specific page is first displayed. Page Security Page Security Apply access control to your web page(s) by assigning the page to a user group (via Serif Web Resources User List Smart object).
Developing Sites and Pages 65 Using Site Manager WebPlus's Site Manager hosts a whole range of useful site-wide information available from a single menu-driven dialog. The tool lets you view Page/Master Page Properties, and pick from a selection of Management tools for viewing and editing hyperlinks (see below), resources, text, fonts, and much more. Powerful features of Site Manager include: • The ability to control the scope and to manage an individual, a selection or all pages in your site equally.
66 Developing Sites and Pages A quick summary gives an indication of what each management feature can do for you. Type of Management Lets you... Page/Master Page Properties Include pages in navigation (with separator control), assign master pages, set page alignment and size, rename pages, set a background, add sounds, optimize pages for search engines, and apply redirections, transitions, or access control.
Developing Sites and Pages 67 Access control Access control lets you apply security to your site, either to restrict access to specific pages or to control user access to forums and other Serif Web Resource features. • For page security: login to a password-protected page(s) or via an onthe-page login box. Typically of use in personal websites or small enterprise websites, you can allow free access to most of your site, with only a limited set of pages accessible to selected web visitors.
68 Developing Sites and Pages • Blogs: for adding and removing articles via an Editors group. • CMS: for managing articles in your CMS. Access control is possible via Serif Web Resources by using a User List Smart object, which can be created to manage user groups and users, and how users sign in. As a brief reminder, Serif Web Resources is a secure online service hosted by Serif that stores Smart objects (see p. 305) and any generated data.
Developing Sites and Pages 69 To create a User List smart object: 1. Click the toolbar. Smart Object Tool button on the Web Objects 2. Login to Serif Web Resources (See Using Smart objects; p. 305). This assumes you have a valid login; otherwise you will have to register. 3. From the dialog, select the New... button at the bottom of the My Smart objects Library pane. 4.
70 Developing Sites and Pages 5. Enter a redirect URL in the Redirect after login box if you want to direct the user to a specific web page after successful login. 6. Click Update. To create a user group: 1. From the dialog, click Groups from the top menu. 2. From the Create New Group dialog, enter a Group Name; this should reflect how the group is intended to be used, e.g., "Photoaccess". 3. Click the Create Group button, verify dialog settings, then click Done.
Developing Sites and Pages 71 Adding users (manual or self-registration) adding users manually Typically, adding users manually is great for controlled environments such as small businesses, organizations, or clubs where users are "known." For each user group that is created, a group of users can be added to each user group by manual entry or import from a comma-delimited text file by the web manager.
72 Developing Sites and Pages With Require activation checked, an activation link will be emailed to the user along with an auto-generated password. When unchecked, only an auto-generated password will be emailed. With Email User checked, an email will be sent to the user; if unchecked, no email is sent but the user is added. The password needs to be communicated to the user via other means (telephone or verbally). 4. Click the Add User button. The user is added to the user list in the Users section. 5.
Developing Sites and Pages 73 To enable self-registration user sign up: This method requires a process requires a login box to be added to the master page. A new visitor to the site can sign up to become a registered user (by clicking the Sign up link on the login box). 1. Click the toolbar. Smart Object Tool button on the Web Objects 2. With your User List Smart object selected in the My Smart objects Library pane, click the object's Manage button to reveal the Users dialog. 3.
74 Developing Sites and Pages Enabling access control To enable access control on your web page: 1. With the web page currently in view, click Default context toolbar. 2. Check Protect page with password to enable access control. You'll notice that the Change/Manage button becomes active. Click this button to reveal currently available user groups (in bold) and the User List Smart object to which they belong. 3. From the User Groups dialog, select the user group (e.g., Photoaccess), then click OK.
Developing Sites and Pages 75 Adding a login box WebPlus lets you add a login/logout input box onto a page in your website. This means that a registered web visitor can gain access to any restricted pages by signing in to the site. The login box is actually a visual representation of the User List Smart object; it is placed on the page as well as existing just in Serif Web Resources. Users can be added manually in Serif Web Resources or via self-registration user sign up.
76 Developing Sites and Pages Any user can be deleted or temporarily suspended for breaking site rules (e.g., for posting defamatory statements on a hosted public forums). The next time the user tries to log on the message "Your account has been suspended" is displayed. If more drastic action is required, a user's IP address can be banned from accessing Serif Web Resource objects (e.g., forums, etc.).
Developing Sites and Pages 2. 77 To set up a forum Moderator group, you'll need to create a moderator group, add moderators manually, manage the forum, and choose the group from the Moderated by Group drop-down menu. To set up access control for blogs or CMS: • You'll need to create an Editors group, add Editors manually, then either • For blogs, click Manage and choose the group from the Editors Group drop-down menu. - or For CMS, click Manage and choose Permissions once directed to www.
78 Developing Sites and Pages By default, the contents of each published web page (especially heading text) will be indexed. However, in an Internet world of billions of web pages all being constantly indexed, web developers can optimize this indexing process to allow a site's pages to appear higher in a user's search results. Optimization of web pages for search engines is possible in several ways: • Meta Tags: Tags store search engine descriptors (i.e.
Developing Sites and Pages 79 Whether you are using Meta tags, robots, or sitemaps independently or in combination, WebPlus makes configuration simple. As these settings can be established or modified for the whole site (Site Properties; Search Engine tab) any newly created page will adopt site's search engine settings. If you change the site settings, all web pages will update to the new settings automatically.
80 Developing Sites and Pages 4. In the next window, enter any number of keywords (separated by commas) that you think fairly categorize your site. Put yourself in the place of a potential visitor. What keywords might they enter if they were searching for exactly what your site or page has to offer? 5. Set a language code for your site from the drop-down menu to identify your site's language use.
Developing Sites and Pages 81 Excluding pages from indexing (Robots file) The objective of this method is the same as that for using a robots meta tag, but instead a robots.txt file is created and no robots meta tag is included in web pages. The robots.txt file is stored in the web site's root folder and can be viewed in any text editor to verify the excluded pages and folders. To enable a robots.txt file: 1. Choose Site Properties... from the File menu. 2.
82 Developing Sites and Pages One requirement of using search engine sitemaps is the need to declare an absolute URL. This allows the proper URL address (e.g., www.helloworld.com) to be indexed, allowing search engine users to link through to your site from their search results. To enable search engine sitemaps: 1. Choose Site Properties... from the File menu. 2. Check the Create search engine sitemap file option. 3. (Optional) When the above option is checked, the default sitemap.
Developing Sites and Pages 83 Prioritizing text with Heading HTML tags It is possible to assign paragraphs (or text styles) in your HTML frame or HTML table with a preferred HTML tags (H1, H2, .., to H6) for export. The tags can be assigned from Paragraph... on the Text menu (choose the Paragraph>HTML option); simply pick a preferred HTML tag for your paragraph from the drop-down menu. An advantage of this is that paragraphs assigned such tags take priority over other "body" tags (e.g.
84 Developing Sites and Pages The search results show a hyperlinked page name heading plus associated web page text for reference. Simply click the hyperlink to access the web page. With respect to security, all web pages will be searchable by default. However, password-protected pages will always be excluded from search results. See Access control on p. 67 for more information on password protection. To add Site Search Results: 1.
Developing Sites and Pages 85 Add the search object to the top of your master page to allow sitewide access to the search feature. Site search is useless without some means of displaying the search results to the user. This is possible by using the Site Search Results object which, like the Site Search object, can be placed on a web page under a place cursor. However, the object is typically resized to full page size before placement (it needs to display multiple web page hits consecutively).
86 Developing Sites and Pages The Gallery tab can store your own designs in the ready-to-go My Designs category—the design is made available in any WebPlus site. When you first install WebPlus, the My Designs gallery will be empty, ready for custom designs to be added to it. New categories can be created at any time. To further arrange your designs into logical groupings, you can add subcategories to My Designs or to any other custom or pre-defined category.
Developing Sites and Pages 87 To add, delete, or rename custom sub categories: • To add, select a category and click Add Sub Category... from the tab's Tab Menu button. • To delete or rename, select options from the the sub category title bar. drop-down button on To move or copy an object into the Gallery: 1. Using the Categories drop-down menu, select a category into which you want to add the object. Scroll to reveal target sub-categories, expanding them if necessary. 2.
88 Developing Sites and Pages Each map will allow up to 10 markers to be placed on the map to identify each location. A more advanced Map feature is also available for more complex mapping requirements, including an unlimited number of markers and the ability to use HTML as your marker text. To add a simple Google map: 1. Click flyout. 2. From the Configure Google Map dialog, enter your zip code, post code, or address in the Search for a location field.
Developing Sites and Pages 89 5. In the dialog, enter a Marker name and text for the marker, and click OK. The marker appears on the map preview, and its text will show when the marker is clicked. Repeat the process for each marker in turn. 6. (Optional). Enable Show Navigation Control buttons for either Full (panning, Zoom buttons, and Zoom slider) or Compact modes (+/zoom in/out buttons only). 7. (Optional).
90 Developing Sites and Pages Using Advanced Google Maps Try the Advanced Google Maps if you've a need for greater than 10 map markers and are interested in adding labelling and marker text that can contain HTML code, with supporting hyperlinks and images. You'll need to acquire a site-wide Google Maps key to enable this feature. Only one key is allowed per site. To enable Advanced Map mode: 1. Check Use Advanced Maps.
Developing Sites and Pages 91 Adding advertising Google Adsense is a free Google service which allows you to place advertising space on your web pages. Visitors to your pages will be served adverts according to the type of content your site is publishing—the visitor benefits from easy access to tailored shopping opportunities while you, as web developer, earn money to offset the cost of hosting or to get rich quick! To advertise, web developers must have an approved Google Adsense account (www.google.
92 Developing Sites and Pages When you register, you'll have to wait for Google to check that your website is considered suitable. You'll be contacted by email within one week with Google's response. If successful, you can then create and manage adverts. The registration process will analyze your website and provide advertising suitable to your website content. The web developer is not in control of specific advertising content. To create and manage adverts: 1. Login to Google Adsense. 2.
Developing Sites and Pages 4. Click OK. 5. You'll see the mouse pointer change to the Paste cursor. Position the cursor where you want to place the advert, then click to insert the advert at its original size. The advert cannot be resized. 93 WebPlus lets you swap your advert for another of different format (i.e., size), colour, font, or corner style. To edit your advert: 1. Change the format and colour of your ad unit from Adsense Setup on the Google Adsense website, then copy the code snippet. 2.
94 Developing Sites and Pages
4 Working with Text
96 Working with Text
Working with Text 97 Importing text from a file Importing text from a word-processor file is a quick way to build up text content for your site (but you can also create a story using WritePlus). If you use your current word processor (such as Microsoft Word) to create the text files for your site, you can import any number of files into one site. As well as the WritePlus format (.stt), a range of popular word processing and text formats can be imported, including: ANSI text .txt Microsoft Word 2007 .
98 Working with Text 3. From the Open dialog, 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.) 4. 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). 5.
Working with Text 99 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 site, you can create text in a single frame, spread a story over several frames, and/or include many independent frame sequences, e.g.
100 Working with Text HTML or Creative frames Two types of frame can be added to the WebPlus page—the HTML text frame and the Creative text frame. They can be compared easily in the following table.
Working with Text 101 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. Creating frames You add frames to a page as you would any other object. You can select, move, and resize any frame, but you cannot alter its basic shape. To create a frame: 1.
102 Working with Text (See Editing text on the page on p. 110.) Pasting via the Clipboard: At an insertion point in the text, press Ctrl+V. 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 frame, the text is pasted inline after existing text. Otherwise, a new frame is created for the text. Creative frame setup and layout The frame layout of a Creative frame controls how text will flow in the frame.
Working with Text 103 To edit frame properties directly: • Select the frame, then drag column guide lines to adjust the boundaries of the column. (1) (2) (3) The illustration above shows how the cursor will change when hovering over the bounding box with Ctrl key pressed (1), after dragging inwards the column margin can be adjusted (2), and after dragging downwards, the top margin blind can be moved (3). To edit frame properties using a dialog: 1.
104 Working with Text 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 Text 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.
Working with Text 105 • If the text runs out before the last frame, you'll 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. • 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. If you later add more frames or reduce the size of text in a frame, the rest of the story text is flowed in.
106 Working with Text • embed inline images. • apply filter effects and rotate/flip. • use proofing options such as AutoSpell/Spell Checker, Proof Reader, and Thesaurus. • manage their content and track font usage via the Site Manager. And some differences: • You can initially "draw" artistic text at a desired point size, and drag it to adjust the size later. Frame text reflows in its frame upon frame resize. • Artistic text can be applied to a path but frame text cannot.
Working with Text 107 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 or reproportion 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.
108 Working with Text Putting text on a path "Ordinary" straight-line artistic text is far from ordinary—but you can extend its creative possibilities even further by flowing it along a curved path. The resulting object has all the properties of artistic text, plus its path is a Bézier curve that you can edit with the Pointer Tool as easily as any other line! In addition, text on a path is editable in some unique ways, as described below. To apply a preset curved path to text: 1.
Working with Text 109 3. Bring the cursor very close to the line. When the cursor changes to include a curve, click the mouse where you want the text to begin. 4. Begin typing at the insertion point. Text flows along the line, which has been converted to a path. To fit existing text to an existing line or shape: 1. Create an artistic text object. 2. Create a freehand, straight, curved line or a shape. 3. Select both objects. On the Tools menu, choose Fit Text to Curve.
110 Working with Text 2. Create a line on the page. Your line appears as a path with an insertion point at its starting end (for a curved path you can either type directly onto any part of the path or press Esc or double-click to get the insertion point at the start of the path). 3. Begin typing at the insertion point. Text flows along the path. To remove the text path: 1. Select the path text object. 2. Click the flyout.
Working with Text 111 Double-, triple-, or quadruple-click selects a word, paragraph or all text, respectively. You can also make use of the Ctrl-click or drag for selection of non-adjacent words, the Shift key for ranges of text. To edit text on the page: 1. Select the Pointer Tool, then click (or drag) in the text object. A standard insertion point appears at the click position (see below). - or Select a single word, paragraph or portion of text. 2.
112 Working with Text 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 can click in another paragraph and use the Repeat command to apply the same formatting there. To show special characters: • From the View menu, select Special Characters (paragraph marks and breaks; see below) or Spaces (Show Special Characters plus tabs, non-breaking spaces, hyphenation points, and "filled" normal spaces).
Working with Text 113 (A) Left Indent; (B) 1st Line Indent; (C) Right Indent. • The Left indent is set in relation to the object's left margin. • The 1st line indent is in relation to the left indent. • The Right indent is in relation to the object's right margin. For details on setting frame margins, see Frame setup and layout on p. 102. To set the indents of the current paragraph: • Drag the appropriate ruler marker(s).
114 Working with Text Working with Unicode text WebPlus fully supports Unicode, making it possible to incorporate foreign characters or special symbols. • To paste Unicode text from the Clipboard to the page, use Edit>Paste Special..., then select "Unformatted Unicode Text." • Insert Unicode characters directly into your text by typing your Unicode Hex value and pressing Alt+X. The Alt+X keyboard operation toggles between the displayed character (e.g., @) and its Hex value (e.g., U+0040) equivalent.
Working with Text 115 for case-sensitive search. Select Regular expressions to treat the contents of the Find box as an expression, rather than as a literal string to be found. 5. Click Find Next to locate the next instance of the Find text. - or Click Select All to highlight all instances of matching text in your site simultaneously. 6. Click Replace if you want to substitute the replacement text. Alternatively, click Find Next again to skip to the next matching text.
116 Working with Text
5 Formatting Text
118 Formatting Text
Formatting Text 119 Setting text properties WebPlus gives you a high degree of control over the fine points of typographic layout, whether you're working with frame text, table text, or artistic text. To apply basic text formatting: 1. Select the text. 2. Use buttons on the Text context toolbar to change text style, typeface, point size, attributes, paragraph alignment, or level. By default, text on your published web pages is set to vary in size depending on the visitor's browser setting.
120 Formatting Text Font assignment is very simple in WebPlus, and can be done from the Fonts tab, Text context toolbar, or in the Character dialog (via rightclick, or from the Text menu). The Fonts tab lets you: • Apply fonts easily without dialog navigation. • Assign fonts to be Websafe or favourites. • View most recently used, Websafe, and your favourite fonts simultaneously. • Make a font rasterize on export or resolve its export in Site Checker.
Formatting Text 121 • Search for installed fonts via search box. • Hover-over preview of fonts applied to your site's text (optional). • Change a font for another throughout your site (by right-click Select All). • Access Serif FontManager (if purchased). The Fonts tab is automatically hidden by default, but can be viewed by clicking the arrow button at the left of your workspace. You may also need to click the Fonts label to display the Fonts tab.
122 Formatting Text Styles can be applied to characters or paragraphs using either the Text context toolbar or the Text Styles tab. Both paragraph and character styles can be managed from the Text Style Palette. The Text Styles tab also lets you create new styles from scratch, create named styles from existing text properties, and swap a style for another across your site in one operation. Any style can be previewed against any selected paragraph directly on the page.
Formatting Text 123 A character style includes only font attributes (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 text already uses; the assumption is that you want to keep that underlying font the same.
124 Formatting Text The Text Style tab highlights the paragraph or character style applied to any selected text. As both paragraph and character formatting can be applied to the same text, all of the current text's formatting is displayed in the Current format box on the tab. In the example below, currently selected text has a Strong character style applied over a Normal paragraph style. To modify an existing style: 1.
Formatting Text 125 Take care when deleting styles. Styles based on a checked "parent" style will be checked for deletion. Creating a bulleted or numbered list For any text frame it's possible to apply bullets and numbering to lists and paragraphs alike. Bullets are especially useful when listing items of interest in no specific order of preference and numbered lists for presenting step-by-step procedures (by number or letter).
126 Formatting Text To create a simple bulleted or numbered list: 1. Select one or more paragraphs. - or Click in a paragraph's text. 2. Select Bulleted List or context toolbar. Numbered List from the Text The list style used is the first preset shown in the Bullets & Numbering dialog described below. To create a bulleted or numbered list (using presets): 1. Select one or more paragraphs. - or Click in a paragraph's text. 2. Select Text>Bullets & Numbering... from the Text menu. 3.
Formatting Text Turn off list formatting by clicking the Text context toolbar's 127 or buttons again. To restart list numbering (Creative frame text only): 1. Click to place an insertion point in the list to set the restart position, then select Bullets & Numbering... from the Text menu. 2. From the Presets or Details page, check Restart Numbering to reset the number or letter sequence back to 1 or A, respectively. 3. Click OK. To turn off bullets or numbering formatting: 1.
128 Formatting Text
6 Working with Tables
130 Working with Tables
Working with Tables 131 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. Like frame text you can vary character and paragraph properties, apply named text styles, embed inline images, apply text colour fills (solid, gradient, or bitmap), and use proofing options such as Spell Checker, Proof Reader, and Thesaurus.
132 Working with Tables Solid fill and border colour Gradient and bitmap fill HTML-compliant Styles Transparency 1 Borders 1 Warp 1 2D/3D Filter effects 1 Instant 3D 1 QuickClear/QuickFill/AutoFormat Edit cell text in WritePlus View cell text in Site Manager Import of Excel and text files 1 If applied, will export table as a graphic.
Working with Tables 133 To create a table: 1. On the Standard Objects toolbar, choose either the Table Tool or HTML Creative Table Tool from the Table flyout. 2. 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. 3. Step through the list to preview the layouts and select one. To begin with a plain table, select (Default). 4. (Optional) Click format. 5. Set the Table Size.
134 Working with Tables Inserting a calendar The Calendar Wizard helps you design month-at-a-glance calendars for use on your web page. The calendar is created as a scalable text-based table so you can edit text using the standard text tools. The properties of a selected calendar are similar to those of a table, and can be modified identically. Like custom table formats you can create your own custom calendar formats.
Working with Tables 135 To insert a calendar: 1. Click the Table flyout on the Standard Objects toolbar and choose Insert Calendar. 2. Click again on your page, or drag out to indicate the desired size of the calendar. 3. From the displayed Calendar Wizard, define options for your calendar including setting the year and month, calendar style (square, or in single or multiple column format), week start day, display options, switching on personal events/holidays, and calendar format.
136 Working with Tables already configured in the Calendar Event Manager (to modify personal events, click the Events button). Adding public holidays When you create a calendar you can set up the appropriate public holidays for the country you reside in. The holidays will show up in your calendar automatically if Add public holidays is checked in Calendar Properties. To enable public holidays: 1. Select your calendar's bounding box, and click Edit Calendar on the context toolbar. 2.
Working with Tables 137 To add an event: 1. Select a calendar. 2. Click Calendar Events on the context toolbar. 3. (Optional) Check Show events by date to add, edit, or delete events using a traditional calendar layout. Leave unchecked for a row-by-row Date/Event listing. If using the latter method, enable the Show personal events button. 4. Click 5. From the dialog, type, use the up/down arrows, or click the Browse button to select a date. 6.
138 Working with Tables
7 Editing Objects
140 Editing Objects
Editing Objects 141 Selecting an object Before you can change any object, you need to select it using one of these tools from the Tools toolbar: Pointer Tool Click to use the Pointer Tool to select, move, copy, resize or rotate objects. Rotate Tool Click to use the Rotate Tool to rotate an object around a rotation origin (normally centred). See Rotating an object on p. 148. To select an object: • Click on the object using one of the tools shown above.
142 Editing Objects • Double-, triple-, or quadruple-click to select a word, paragraph, or all text. • To select only the text frame, click the frame's bounding box. • Clicking on a group selects the grouped object. Ctrl-click to select an individual object within a group. Selecting multiple objects Selecting more than one object at a time (creating a multiple selection) lets you: • Position or resize all the objects at the same time.
Editing Objects 143 Alternatively, hold down the Shift key and click each object in turn. To add or remove objects from a multiple selection: • Hold down the Shift key and click the object to be added or removed. To deselect all objects in a multiple selection: • Click in a blank area of the page. To select all objects on the page (or master page): • Choose Select All from the Edit menu (or press Ctrl+A).
144 Editing Objects Click on an object to select it and choose Select Similar from the Edit menu. Copying, pasting, and replicating objects Besides using the Windows Clipboard to copy and paste objects, you can duplicate objects easily using drag-and-drop, and replicate multiple copies of any object in precise formations. You can also transfer the formatting of one object to another, with the option of selecting specific attributes to be included when formatting is pasted.
Editing Objects 145 To duplicate an object: 1. Select the object, then press the Ctrl key. 2. Drag the object via the Move button to a new location on the page, then release the mouse button. 3. To constrain the position of the copy (to same horizontal or vertical), press and hold down the Shift key while dragging. A duplicate of the object appears at the new location. Replicating objects Duplicating an object means making just one copy at a time.
146 Editing Objects 3. Specify Line length (the number of objects including the original) in the arrangement, or the Grid size. Note that you can use the Line length setting to include an odd number of objects in a grid. 4. Set spacing between the objects as either an Offset (measured between the top left corners of successive objects) or a Gap (between the bottom right and top left corners). You can specify Horizontal and/or Vertical spacing, and/or an angular Rotation.
Editing Objects 147 To constrain the movement of an object to horizontal or vertical: • Select the object and use the keyboard arrows (up, down, left, right). Resizing objects WebPlus provides several methods of resizing lines, shapes, artistic text, frame objects, and table objects. Click-and-drag is the simplest—watch the Hintline for context-sensitive tips and shortcuts! To resize an object (in general): 1. Select the object. 2.
148 Editing Objects You can also make fine resizing adjustments from the Transform tab. To resize freely: • Drag from a corner (or line end) handle. To constrain a shape, frame object, or table object when resizing: • Hold the Shift key down and drag from a corner (or line end) handle. For shapes, this has the effect of keeping a square as a square, a circle as a circle, etc. For pictures, dimensions are constrained on dragging a corner handle. Use Shift-drag to resize a picture freely.
Editing Objects 3. 149 Hold the mouse button down and drag the cursor in the direction in which you want to rotate the object, then release (use the Shift key for 15° rotation intervals). The Pointer Tool can also be used to rotate objects in the same way (with the cursor). To unrotate (restore the original orientation): • Double-click the object. • To restore the rotated position, double-click again.
150 Editing Objects To change the rotation origin: 1. Select the the object. Rotate Tool on the Tools toolbar and click to select 2. Move the rotation origin away from its original position in the centre of the object to any position on the page. The origin can also be moved to be outside the object—ideal for rotating grouped objects around a central point. 3. Drag the rotate pointer to a new rotation angle—the object will rotate about the new pivot.
Editing Objects 151 To crop using the object's original outline: 1. Select the object, then select the Tools toolbar's Effects flyout. 2. Drag one of its edge or corner handles inward for unconstrained cropping. Press the Shift key while dragging for constrained cropping (aspect ratio is maintained). Square Crop Tool from the To scale the object within the crop outline, Ctrl-drag either upwards or downwards.
152 Editing Objects To uncrop (restore full visibility): • Click the Remove Crop button on the Crop context toolbar. Cropping one shape to another The Crop to Shape command works with exactly two objects selected. Either or both of these may be a group object. The lower object (the one behind the other) gets clipped to the outline of the upper object, leaving a shape equivalent to the overlapping region. To crop one shape to another: 1.
Editing Objects 153 Combining is a quick way to create a mask or stencil cutout: QuickShapes Convert to Curves Combine Curves Drop Shadow Added To combine two or more selected lines or drawn shapes: 1. Draw your two lines or QuickShapes. 2. Place the "clipping" object in front of the object to be cut out, using the Arrange menu and/or Arrange toolbar as needed. 3. Select each object and choose Tools>Convert to Curves. 4. Select both objects. 5. Choose Combine Curves from the Arrange menu.
154 Editing Objects To join outlines (selected via marquee selection): • Select from the Join Outlines submenu on the Arrange menu. Add Creates one new object that’s the sum of any two selected objects. Subtract Discards the overlap between the top and bottom object. The bottom object is also discarded. Useful as a quick way of truncating shapes and pictures with another object. Intersect Retains the overlap and discards the rest.
Editing Objects Exclude 155 Merges two or more objects into a composite object, with a clear transparent “hole” where their filled regions overlap. Ordering objects As objects are created, they are stacked in the order you create them, from back to front, with each new object in front of the others. At any time, you can change the stacking order, which affects how objects appear on the page. To shift the object's position one step toward the front or back: • Click Forward One or respectively.
156 Editing Objects Alignment controls are available in either the Align tab or from Arrange>Align Objects.... As other alignment options, tools such as rulers (p. 56) and the snapping grid (p. 58) provide guides to assist you in placing objects on the page. To align the edges of two or more objects in a selection: 1. Using the Pointer Tool, Shift-click on all the objects you want to align, or draw a marquee box around them, to create a multiple selection. 2. Select the Align tab. 3.
Editing Objects 157 Snapping The Snapping feature simplifies placement and alignment by "magnetizing" moved or resized objects to grid dots and guide lines. Objects can also snap to other guides on the page such as page margins, rows, and columns (see p. 54), as well as the page edge, and page/margin centres (i.e., the centre of the page in relation to the page edge or page margins). In addition, dynamic guides can be used to align and resize objects to existing object edges and centres by snapping.
158 Editing Objects For alignment For resizing To switch on dynamic guides: • Click the down arrow on the Snapping button (Hintline) and click Dynamic Guides on the drop-down menu. To snap to page centres as well, you must additionally check Page centre in Tools>Options>Layout>Snapping.
Editing Objects 159 Attaching objects to text WebPlus lets you position shapes, pictures, or gallery objects in relation to your site's text (artistic or frame text) in one of two ways: • Float with text. This option is ideal for pictures and shapes, etc. A shape attached to artistic text such as titles • A picture within a text frame Position inline as character. The attached object is placed as a character in the text and vertically aligned in relation to the text that surrounds it.
160 Editing Objects 3. From the dialog, choose a positioning option: Either, for a floating object: 1. Enable Float with text. This is the default positioning option. 2. Set the Position on text option to set where the object is placed in relation to the artistic text or frame text. Select Left or Right, or set an Indent by value to left-indent by a set pixel value. 3. Once positioned, you can specify the Distance from text: the "standoff" between the object's outline and adjacent text. 4. Click OK.
Editing Objects 5. 161 Once positioned, you can specify the Distance from text: the "standoff" between the object's outline and adjacent text. 4. (Optional) Check Use these settings when pasting to update floating and inline defaults. Any subsequent object pasting will adopt the settings saved when the option was checked. 5. Click OK. The object appears inline with text, and shows an to Text icon.
162 Editing Objects Creating groups You can easily turn a multiple selection into a group object. When objects are grouped, you can position, resize, or rotate the objects all at the same time. To create a group from a multiple selection: • Click the button. To ungroup (turn a group back into a multiple selection): • Click the button. The group turns back to a multiple selection. Simply clicking on any member of a group selects the group object.
Editing Objects 163 To select an individual object within a group: • Ctrl-click the object. Updating and saving defaults Object defaults are the stored property settings WebPlus applies to newly created objects such as: • lines and shapes (line and fill colour, shade, pattern, transparency, etc.) • frames (margins, columns, etc.) • text (i.e., font, size, colour, alignment, etc.). Defaults are saved separately for artistic, shape, frame and table text.
164 Editing Objects 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. 237). 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. To view and change default text properties: 1. Choose Text Style Palette... from the Text menu. 2.
8 Lines, Shapes, and Effects
166 Lines, Shapes, and Effects
Lines, Shapes, and Effects Drawing and editing lines WebPlus provides Pencil, Straight Line, and Pen tools for drawing freehand, straight, and curved/straight lines, respectively. The Pencil 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.
168 Lines, Shapes, and Effects Any curved line can be closed (by joining line ends) to create a custom shape (see Drawing and editing shapes on p. 172 for details) Drawing lines To draw a freeform line (with the Pencil Tool): 1. Click the flyout. 2. Click where you want the line to start, and hold the mouse button down as you draw. The line appears immediately and follows your mouse movements. 3. To end the line, release the mouse button.
Lines, Shapes, and Effects 3. 169 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 Pen Tool): 1. Click the Pen Tool from the Standard Objects toolbar's Line flyout. On the Curve context toolbar, three buttons let you select which kind of segment to draw: A Straight segment is simply a straight line connecting two nodes.
170 Lines, Shapes, and Effects • For a Bézier segment, click again for a new node and drag out a control handle from it. Click again where you want the segment to end, and a curved segment appears. The finished segment becomes selectable. • 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.
Lines, Shapes, and Effects 171 To change line properties of a selected object: • Use the Swatches tab to change the line's colour and/or shade. Alternatively, use the Colour tab to apply a colour to the selected object from a colour mixer. • Use the Line tab, context toolbar (shown when a line is selected), or Line and Border dialog to change the line's weight (thickness), type, or other properties. Select a line width, and use the drop-down boxes to pick the type of line.
172 Lines, Shapes, and Effects (Tab only) For calligraphic lines of variable width (drawn as if with a square-tipped pen held at a certain angle), select the calligraphic line style (opposite) from the dropdown menu, then use the Calligraphic Angle box to set the angle of the pen tip.
Lines, Shapes, and Effects 173 QuickShapes The QuickShape flyout contains a wide variety of commonly used shapes, including boxes, ovals, arrows, polygons and stars. You might use the QuickShape button for: You can easily turn shapes into web buttons by adding hyperlinks or overlaying hotspots.
174 Lines, Shapes, and Effects To adjust the appearance of a QuickShape: 1. Click on the QuickShape to reveal one or more sliding handles around the shape. These are distinct from the "inner" selection handles. Different QuickShapes have different handles which have separate functions. 2. To change the appearance of a QuickShape, drag its handles. To find out what each handle does for a particular shape, move the Pointer Tool over the handle and read the Hintline.
Lines, Shapes, and Effects 175 To break open a line or shape: 1. With the Pointer Tool, select the node where you want to break the shape. 2. Click the Break Curve button on the Curve context toolbar. A line will separate into two lines. A shape will become a line, with the selected node split into two nodes, one at each end of the new line. 3. You can now use the Pointer Tool to reshape the line as needed. See online Help for information on editing shapes.
176 Lines, Shapes, and Effects Gaussian Blur Zoom Blur Colour Fill Feather Radial Blur Motion Blur Outline Reflection The Studio’s Styles tab offers a range of 2D filter effects that are ready to use. Its multiple categories each offer a gallery full of predefined effects, such as shadows, bevels, reflections, blurs, and more. Each category offers subtle variations of the category effect. Click any thumbnail to apply the effect to the selected object.
Lines, Shapes, and Effects 177 To apply 2D filter effects: Filter Effects button on the Tools 1. Select an object and click the toolbar’s Effects flyout. 2. To apply a particular effect, check its box in the list at left. 3. To adjust the properties of a specific effect, select its name and vary the dialog controls. Adjust the sliders or enter specific values to vary the combined effect. (You can also select a slider and use the keyboard arrows.) Options differ from one effect to another. 4.
178 Lines, Shapes, and Effects As with all effects you can switch the outline effect on and off. You'll be able to apply a combination of 2D or 3D filter effects along with your outline, by checking other options in the Filter Effects dialog. Using the Shadow Tool Shadows are great for adding flair and dimension to your work, particularly to pictures and text objects, but also to shapes, text frames and tables.
Lines, Shapes, and Effects 179 Once you've created a shadow, you can also fine-tune it as needed using the Filter Effects dialog. Using 3D filter effects 3D filter effects go beyond 2D filter effects (such as shadow, glow, bevel, and emboss effects) to create the impression of a textured surface on the object itself. You can use the Filter Effects dialog to apply one or more effects to the same object.
180 Lines, Shapes, and Effects There you’ll see a variety of remarkable 3D surface and texture presets in various categories (Glass, Metallic, Wood, etc.). Click any thumbnail to apply it to the selected object. Assuming the object has some colour on it to start with, you’ll see an instant result! Alternatively, you can customize a Styles tab preset, or apply one or more specific effects from scratch, by using Filter Effects.
Lines, Shapes, and Effects 1. 181 Adjust the "master control" sliders here to vary the overall properties of any individual 3D effects you select. Blur specifies the amount of smoothing applied. Larger blur sizes give the impression of broader, more gradual changes in height. Depth specifies how steep the changes in depth appear. The button is normally down, which links the two sliders so that sharp changes in Depth are smoothed out by the Blur parameter.
182 Lines, Shapes, and Effects • viewing: rotate your object in three dimensions. • material: controls the extent to which lighting has an effect on the object's surfaces (great for 3D artistic text!). An always-at-hand 3D context toolbar hosted above your workspace lets you configure the above settings—each setting contributes to the 3D effect applied to the selected object.
Lines, Shapes, and Effects 183 To add dimensionality: 1. Select an object and click the Instant 3D button from the Tools toolbar's Effects flyout. The object immediately adopts 3D characteristics with a red orbit circle displayed in the object's foreground. 2. Click a 3D effect category from the first drop-down menu on the 3D context toolbar; the bar's options change dynamically according to the category currently selected. See online Help for more details.
184 Lines, Shapes, and Effects Adding borders A border is a repeating, decorative element that can be set to enclose objects, such as text frames, pictures, and tables. WebPlus comes with an impressive range of categorized picture-based border styles for you to use. However, if you'd like to create your own custom borders you can import a border design as a picture, and save it for future use.
Lines, Shapes, and Effects 185 To remove a border, select None from the top of the list. 3. Select a border Weight (width) for your border. You may need to experiment to find a width that complements the size of your object. 4. To apply the border to specific edges of the object, use the Edge dropdown menu. You can switch edges on and off to make multiple combinations. 5. Set other options as needed: • Select a border Type.
186 Lines, Shapes, and Effects 6. • Select an Alignment setting to fit the border to the Outside, Inside, or Middle of the object's bounding box. • If Behind contents is checked, the inner half of the border extends behind the object. If unchecked, the whole border appears in front (the wider the border, the more it encroaches on the filled region). • If Scale with object is checked, both border and object change together when you resize the object.
Lines, Shapes, and Effects 187 Using object styles Object styles benefit your design efforts in much the same way as text styles and colour schemes. Once you've come up with a set of attributes that you like—properties like line colour, fill, border, and so on—you can save this cluster of attributes as a named style. WebPlus remembers which objects are using that style, and the style appears in the Styles tab, and can subsequently be applied to new objects.
188 Lines, Shapes, and Effects The Styles tab contains multiple galleries of pre-designed styles that you can apply to any object, or customize to suit your own taste! Galleries exist in effect categories such as Blurs, 3D, Edge, Warps, Shadows, Materials (e.g., metals) and more, with each category having further subcategories. To apply an object style to one or more objects: 1. Display the Styles tab. 2. Expand the drop-down menu to select a named style category (e.g.
Lines, Shapes, and Effects 189 The Styles tab displays the gallery thumbnail for the object's style. Normally, a site's object styles are just stored locally—that is, as part of that site; they don't automatically carry over to new sites. If you've created a new style you'll want to use in another site, you can save it globally so that it will appear in the Styles tab each time you open a new site. Saving Object Styles To create a new object style based on an existing object's attributes: 1.
190 Lines, Shapes, and Effects 6. Click the Browse... button to select the gallery category where you want to locate the style thumbnail, and optionally, save to a different Preview Type (Rounded Rectangle, Frame Text, or Artistic Text) instead of the default cog shape. 7. Type a name to identify the gallery thumbnail. 8. Click OK. A thumbnail for the new object style appears in the designated gallery.
9 Images, Animation, and Multimedia
192 Images, Animation, and Multimedia
Images, Animation, and Multimedia 193 Adding picture frames Not to be confused with a decorative border, a picture frame is a shaped container similar to a text frame. You can select either: • Bordered picture frames from the Gallery tab. - or - • Borderless frames from the Tools toolbar. WebPlus lets you import a picture directly into the frame or drag a picture into it from the Media bar. Empty picture frames are shown as envelope-shaped placeholders.
194 Images, Animation, and Multimedia To add a borderless picture frame: 1. For an empty square frame, choose Picture>Empty Frame... from the Insert menu. 2. The mouse pointer changes to the Picture Paste cursor. What you do next determines the initial size and placement of the picture frame. 3. To insert the frame at a default size, simply click the mouse. - or To set the size of the frame, drag out a region and release the mouse button.
Images, Animation, and Multimedia • Click the increments. • Click the 195 button to rotate the photo in 90 degree anti-clockwise button to zoom in/out of the photo. - or 1. Right-click on a picture frame and choose Properties>Frame Properties.... - or Select the picture frame and choose Frame Properties on the Picture context toolbar. 2. In the dialog, you can scale to maximum/minimum, Stretch to Fit, or use the original image's size (No Scale). 3.
196 Images, Animation, and Multimedia You can also acquire images directly from PhotoCDs or via TWAIN devices (scanners or digital cameras). Inserting images There are several ways to bring an image into WebPlus. You can drag a file from an external Windows folder directly onto your page, drag a thumbnail from WebPlus's Media Bar (see p. 200), paste from the pasteboard, or import an image as a file via a dialog.
Images, Animation, and Multimedia 197 In WritePlus: • Choose Picture File... from the Insert menu. 3. Use the Import Picture dialog to select the image file to open. 4. Select either Embed Picture or Link Picture. See Embedding vs. linking on p. 199. 5. Click Open. If you've opened an image via the QuickBuilder Bar, the image will automatically display on the page. 6. 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.
198 Images, Animation, and Multimedia To replace an image: • Click the Replace Picture button directly under the selected image, locate and select an image. Click Open. To replace an image via Media Bar: • Drag an image thumbnail onto an existing image from the currently displayed album(s) shown in WebPlus's Media Bar (expand the Media Bar from the bottom of your workspace first).
Images, Animation, and Multimedia 199 To alter frame properties: 1. Right-click on a cropped image and choose Frame Properties.... - or Select the image and choose Frame Properties on the Picture context toolbar. 2. In the dialog, you can scale to maximum/minimum, Stretch to Fit, or use the original image's size (No Scale). 3. To change the vertical alignment of the image within the frame, select Top, Middle, or Bottom. 4. For horizontal alignment, select Left, Centre, or Right. Embedding vs.
200 Images, Animation, and Multimedia To preselect embedding or linking based on file size: 1. Choose Options... from the Tools menu. Select the General menu option. 2. To preselect 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.
Images, Animation, and Multimedia 201 You can import an unlimited number of photos by file or by whole folders, and whether photos are embedded or linked to your site in advance of photo placement on the page. For large photo collections, searching throughout albums for photos by file name and EXIF, IPTC or XMP metadata is possible; even edit XMP metadata from within WebPlus. The currently loaded album shown on your Media Bar will remain visible irrespective of which site you have open.
202 Images, Animation, and Multimedia To save a temporary album to a named album: 1. Click the down arrow on the select New Album. 2. In the New Album dialog, in the Album Name box, type a name to identify your album in the future. 3. (Optional) For any photo you can alter the resolution (native or 96 dpi), or embed/link status in advance of placement on your page— click a photo's setting (DPI, Placement) and use the setting's dropdown menu to change.
Images, Animation, and Multimedia 203 To load a saved album: • Select a saved album name from the bar's top-right drop-down menu. The album's photos will display in the workspace. A saved album can be selected as above and then modified via the Manage button (only shown for existing saved albums). You can add photos/folders, delete photos, change DPI, and alter embed/link status.
204 Images, Animation, and Multimedia • 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. You can alter these settings, but before doing so you should review the "logic" WebPlus applies to publishing web graphics.
Images, Animation, and Multimedia 205 3. In the Resampling section, choose a resampling method to give Best Quality, Sharper, or Smoother images of any format; the better quality, the slower the export. Check the Don't resample pictures... option to avoid resampling on images when exported image size will be approximate to original image size. 4. For exporting original graphic file names, in the Naming section check Use original names of picture files.
206 Images, Animation, and Multimedia PNGs. Then preview your site and determine if you want to vary the global settings or try a different output format for specific images. Even if you don't change any format settings, you can set a picture title which will normally appear as a tooltip when the image is moused over in a browser. You can also enter alternate text (manually or automatically) for accessibility reasons. To set export format, title, and/or alternate text: 1.
Images, Animation, and Multimedia 207 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. 4. 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 site. 5.
208 Images, Animation, and Multimedia 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 then Acquire... from the submenus 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.
Images, Animation, and Multimedia 209 • Powerful filter combinations Create combinations of mixed adjustment, retouching, and effect filters for savable workflows. • Selective masking Apply filters to selected regions using masks. • Save and manage favourites Save filter combinations to a handy Favourites tab. • Viewing controls Compare before-and-after previews, with dual- and split-screen controls. Use pan and zoom control for moving around your picture.
210 Images, Animation, and Multimedia To launch PhotoLab: 1. Select the picture that you want to apply a filter to. 2. Click PhotoLab on the Picture context toolbar. Applying a filter Filters are stored in PhotoLab's Favourites, Adjustments, and Effects tabs which group filters logically into categories (e.g., Quick Fix for fast and commonly used correction filters). The Favourites tab offers some commonly used filters (individual and in combination).
Images, Animation, and Multimedia 3. 211 Adjust sliders (or enter input values) until your filter suits your requirements. Some filters offer check boxes, drop-down menus, and additional controls (e.g., Advanced settings). Selecting a new filter always replaces the current filter. Any filter can be temporarily disabled, reset, or deleted from the trial zone. To disable: Click To reset: Click . Any changes to settings are reverted back to the filter's defaults.
212 Images, Animation, and Multimedia To reorder filters: • Drag and drop your filter into any position in the stack. A dotted line indicates the new position in which the entry will be placed on mouse release. To add a filter directly (without trialling): • Click Add Quick Filter at the top of the Filters stack and choose a filter from the flyout categories. The filter is applied directly to the stack without trialling.
Images, Animation, and Multimedia 213 To apply a mask: 1. From the 2. In the Tool Settings pane, select the you to mask regions by painting. 3. Adjust the settings to suit requirements, especially adjusting Brush Size to paint larger or more intricate regions. Mask drop-down menu, select New Mask. Add Region tool to allow Change the Mode drop-down menu from Select to Protect to protect painted regions from masking (i.e., the inverse of the Add Region option). 4.
214 Images, Animation, and Multimedia The mask button changes to yellow when a mask is applied (i.e., ). It's also possible to create additional masks for the same filter as above, and then choose between masks accordingly. You can only have one mask applied at any one time. By using the menu's New From> option you can also base the new mask on another mask applied to the current or any other filter in the filter stack. This is useful when using favourites containing multiple adjustments.
Images, Animation, and Multimedia 215 If you want to further manage your favourites into user-defined categories, click the option on the Tab Menu. Exiting PhotoLab • Click OK. Using Image Cutout Studio Image Cutout Studio offers a powerful integrated solution for cutting objects out from their backgrounds. Depending on the make up of your images you can separate subject of interests from their backgrounds, either by retaining the subject of interest (usually people, objects, etc.
216 Images, Animation, and Multimedia The white initial background is discarded, leaving interim checkerboard transparency, from which another image can be used as a more attractive background. A red tint on the second image's background is used to indicate areas to be discarded. To launch Image Cutout Studio: 1. Select an image to be cut out. 2. Select Image Cutout Studio from the displayed Picture context toolbar. Image Cutout Studio is launched.
Images, Animation, and Multimedia 217 To create an alpha-edged bitmap: 1. Select Alpha-edged Bitmap from the Output Type drop-down menu. 2. (Optional) Drag the Width slider to set the extent to which the "alpha" blending is applied inside the cutout edge. 3. (Optional) Adjust the Blur slider to smooth out the cutout edge. To create a vector-cropped bitmap: 1. Select Vector-cropped Bitmap from the Output Type drop-down menu. 2. Drag the Feather slider to apply a soft edge inside the cutout edge.
218 Images, Animation, and Multimedia Background Colour For Show transparent mode, a different Background colour can be set (at bottom of the Studio) which might help differentiate areas to keep or discard. To select image areas for keeping/discarding: 1. In Image Cutout Studio, click either Keep brush or Discard brush from the left of the Studio workspace. 2. (Optional) Pick a Brush size suitable for the area to be worked on. 3.
Images, Animation, and Multimedia 219 Click Reset if you want to revert your selected areas and start your cutout again. Refining your cutout area (alpha-edged bitmaps only) If a vector-cropped image is created via Image Cutout Studio it's possible to subsequently manipulate the crop outline using crop tools. However, for alphaedged bitmaps, Erase and Restore touch-up tools can be used to refine the cutout area within the Studio before completing your cutout. The latter can't be edited with crop tools.
220 Images, Animation, and Multimedia Adding animation WebPlus lets you add several varieties of eye-catching animation effects to any web page: animated marquees, GIF animations (See online Help), and Flash (.swf) files. For any of the animation effects, you can preview the animation and/or customize the effect. Once placed into your 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.
Images, Animation, and Multimedia 221 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) which can be easily adopted. These banners are designed to allow you to customize their appearance (i.e., text, images, and scheme colours) without any prior Flash design experience. To insert a Flash file: 1. Click the Insert Flash file button on the Web Objects toolbar's Media flyout. 2.
222 Images, Animation, and Multimedia To edit a Flash banner: 1. Double-click your Flash movie. 2. (Optional) Change Export Options... and whether you want to embed the file in your WebPlus site. 3. In the Parameters box select any parameter Name in the list and click the Edit button (you don't need to use the Add... button when editing Flash banners). Depending on the Flash banner chosen, you can edit several types of parameter value, i.e. • Text values can be changed from their placeholder text, e.
Images, Animation, and Multimedia 223 Image" banners, Pic1URL, Pic2URL, and Pic3URL represents the first, second and third pictures listed in the Additional Files list. You can either reorder pictures in the Additional Files list (not the Parameters list) using the Up or Down buttons to make pictures appear in a different sequence or use the right-most Add... button to add new files to the Additional Files list to replace currently referenced pictures.
224 Images, Animation, and Multimedia Sound • 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, .mp3, RealAudio (.ra, .ram), and .wav. Video • Linked video works like linked sound. Supported video formats are .avi, QuickTime (.mov, .
Images, Animation, and Multimedia 225 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. To add background sound to a page: 1. Right-click the page in the workspace and choose Page Properties.... 2. From the Effects tab, check Use sound file, then from the Open dialog, browse to the sound file you want to add.
226 Images, Animation, and Multimedia • 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 two options, the media file remains external and can't be embedded in your site. Options 3 to 5 give you the choice of embedding the media file. To add linked sound or video to an object or hotspot: 1.
Images, Animation, and Multimedia 227 - or Choose Media from the Insert menu and select YouTube Video... from the submenu. 4. From the dialog, paste the video URL into the input box. 5. (Optional) Check/Uncheck the boxes to enable/disable the following; 6. • Autoplay Automatically plays the video once the page has loaded. • Loop Continuously plays the video. • Show video info Displays the title and star rating of the video.
228 Images, Animation, and Multimedia 7. To insert the video at a default size, simply click the mouse. - or To set the size of the inserted video, drag out the cursor and release the mouse button. The video resizing will be unconstrained but you can maintain the video's aspect ratio by pressing the Shift key as you drag. Some websites may require their YouTube video(s) to be swapped for another on an occasional or more regular basis.
Images, Animation, and Multimedia 229 Using the Photo Gallery The simultaneous expansion of digital camera usage and Broadband services has created a fantastic opportunity for publishing 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 geographically distant relatives • Special occasions (parties, Christmas, meetings, holidays) • cataloguing collections (e.g., of animals, stamps, etc.
230 Images, Animation, and Multimedia During import, you have the option to manage multiple selected photos simultaneously. • Reorder your photos into your preferred display order. • Perform bulk editing. You'll be able to caption, rotate*, and adjust brightness, and contrast. • Assign EXIF tags and create custom captions. • Create and manage photo albums.
Images, Animation, and Multimedia 4. 231 Click Next. From the dialog, choose whether to: • Add individual files Click the Add Files button to navigate to then select the photo file(s) to open. Use Ctrl-click or Shift-click to select multiple non-adjacent or adjacent files. Use the Preview window to examine the photos as you add to your current selection. - or - • Add all photos in a folder Click the Add Folder button to navigate to a folder then select it to add its contents.
232 Images, Animation, and Multimedia • To add a caption, click the Caption column and input text, numbers and characters. • To create captions from Exif, IPTC and XMP photo tags, click Format Captions. Select a tag type from the drop-down and then click Add Tag. A preview will display in the Caption Preview box. Select how to add the captions to any existing ones—Add to start of caption, Add to end of caption or Overwrite caption. Click OK.
Images, Animation, and Multimedia 233 Blur amount controls how much blurring occurs between photos. AutoPlay will automatically start photo display at a set but configurable time interval (in seconds). 10. Click Finish. 11. To insert the gallery at a default size, position the displayed cursor where you want the gallery to appear on the page, then simply click the mouse. - or To set the size of the inserted gallery, drag out a region and release the mouse button.
234 Images, Animation, and Multimedia Linking 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. Of course you may be able to "hotlink" to other images (from a friend or colleague's site) where legal implications are not an issue but it's only polite to ask for permission first! To insert a remote image: 1. Go to Insert>Picture>Remote link.... 2.
10 Colour, Fills, and Transparency
236 Colour, Fills, and Transparency
Colour, Fills, and Transparency 237 Applying solid colours You can use the Colour tab, Swatches tab or a dialog box to apply solid colours to an object. The tabs' swatch buttons offer a number of ways to apply solid colours to objects of different kinds: • You can apply solid colours to an object's fill or line. As you might expect, QuickShapes and closed shapes (see Drawing and editing shapes on p. 172) have both line and fill properties.
238 Colour, Fills, and Transparency 3. Fill or Line, or Text button at the top of Click the the tab to determine where colour will be applied. The colour of the underline reflects the colour of your selected object. For selected frame text, the Fill will be the background text colour (but not the frame's background colour). 4. Select a colour from the colour spectrum or sliders depending on colour mode selected.
Colour, Fills, and Transparency Object tinting can also be applied via the Swatches tab—adjust via slider or direct input. WebPlus automatically adds used colours to the the Swatches tab. 239 Tint Publication Palette in To change the current palette: • Click the Palette button to view and adopt colours from a standard RGB, WebSafe, or selection of themed palettes. Colours can be added, edited or deleted from the Publication Palette but not from other palettes.
240 Colour, Fills, and Transparency Schemes that have been modified are stored with the site, although custom colour schemes can also be saved globally, so the full set of schemes is always available to new sites. How colour schemes work 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 basic colour is assigned (by number) to each region.
Colour, Fills, and Transparency 241 Each scheme also includes adjunct colours which apply specifically to hyperlinks (default H, followed F, active A, rollover R), off-page window backgrounds (B), and on-page colours (O). Each site can have just one colour scheme active at any one time; this is called the site colour scheme and is always shown in the Swatches tab. When you save a site, its current colour scheme is saved along with the site. To select a preset colour scheme: 1.
242 Colour, Fills, and Transparency Adjunct colours As well the five basic scheme colours, each scheme includes six adjunct colours which control colour in response to user hyperlink interactivity; the colour of page and off-page (window) backgrounds are also affected. These can be modified as for scheme colours 1-5, with Background colour/image and On-Page colour being exceptions. • The Hyperlink colour (labelled H) applies to hyperlinked text before it's been clicked on.
Colour, Fills, and Transparency 243 Applying scheme colours to objects If you create new objects 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.
244 Colour, Fills, and Transparency The scheme is updated with the new colour. Repeat to modify other scheme colours. 4. To apply the scheme to the current site, click OK. The site colour scheme is now updated. From the Change button, you can select a "schemed" picture for use as the off-page browser window background. To create a new named scheme based on these colours, click Save As.... Alternatively, use Save to overwrite the existing scheme.
Colour, Fills, and Transparency 245 Working with gradient and bitmap fills Gradient fills provide a gradation or spectrum of colours spreading between two or more points on an object. A gradient fill has an editable path with nodes that mark the origin of each of these key colours. A bitmap fill uses a named bitmap—often a material, pattern, or background image—to fill an object.
246 Colour, Fills, and Transparency 2. For gradient fills, select Linear, Elliptical or Conical as the gradient type from the Gradient button's drop-down menu. - or For bitmap fills, select a drop-down menu category from the Bitmap button. 3. Select the object(s), and click the appropriate gallery swatch for the fill you want to apply. - or Drag from the gallery swatch onto any object and release the mouse button. 4.
Colour, Fills, and Transparency 247 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: In WebPlus, transparency effects work like greyscale fills. Just like fills...
248 Colour, Fills, and Transparency represent more transparency (expressed as percentage Opacity). - or - 3. For gradient transparency, choose the your thumbnail. - or - Gradient button and pick For bitmap transparency, choose the thumbnail from a range of categories. Bitmap button and pick a The transparency is applied to the object(s). Alternatively, drag the desired thumbnail from the gallery to an object, and release the mouse button. To apply gradient transparency with Transparency Tool: 1.
11 Adding Hyperlinks and Interactivity
250 Adding Hyperlinks and Interactivity
Adding Hyperlinks and Interactivity 251 Adding hyperlinks and anchors Hyperlinking an object such as a box, some text, or a picture means that a visitor to your website can click on the object to trigger an event.
252 Adding Hyperlinks and Interactivity To add a hyperlink: 1. Use the Pointer Tool to select the single or grouped object or highlight the region of text to be hyperlinked. 2. Click the Hyperlink button on the Tools toolbar. The Hyperlinks dialog appears. 3. Click to select the link destination type, and enter the specific hyperlink target, i.e., a site page, internet page, Smart object, email address, etc. 4. Depending on the link type, choose type-specific options. 5.
Adding Hyperlinks and Interactivity • 253 Document Frame: The link destination is shown in a previously created frame (using the Framed Document Tool). The HTML ID (e.g., ifrm_1) of any existing frame is selected from the rightmost drop-down menu. (See online Help). If you're targeting an active document frame, select the active frame from the Open in active document frame drop-down list.
254 Adding Hyperlinks and Interactivity 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.
Adding Hyperlinks and Interactivity 255 automatically in series for each page, and using prefixes for each type of object. However, you may find it easier to keep track of anchors throughout the site if you supply your own unique names— it's up to you. To view or edit existing anchors: • Choose Site Manager>Anchor Manager... on the Tools menu to view, rename, or remove an anchor attached to a particular object. You can also include the anchor in page navigation.
256 Adding Hyperlinks and Interactivity 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. The Hyperlinks dialog appears with the current hotspot link target shown. • To modify the hyperlink, select a new link destination type and/or target.
Adding Hyperlinks and Interactivity 257 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." To edit the outline, first move the mouse pointer over the hotspot's inner outline until the cursor changes to indicate whether you're over a node or a line. To create an extra node on a hotspot: • Click anywhere along the hotspot's outline when you see the cursor.
258 Adding Hyperlinks and Interactivity Rollover options Adding rollovers is basically a matter of deciding which rollover state(s) you'll want to define for a particular object, then specifying an image for each state. WebPlus provides several choices: Normal State Over State Down State is the "resting" state of the graphic before any rollover, and is always defined. is the state triggered by a mouseover— when the mouse pointer is directly over the graphic.
Adding Hyperlinks and Interactivity 259 4. Check Embed files in site if you want to incorporate the image(s) in the site. 5. Check either Normal or Down as the button's initial rollover state. 6. Click Set... to define a hyperlink target for the button. 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. 8. Click OK.
260 Adding Hyperlinks and Interactivity and show the same or a different image made larger in the hover over state; compare this with WebPlus rollovers which have up to four states and only work with identically sized different "variant" images. WebPlus lets you choose the position and size of the popup in relation to the "hovered over" thumbnail; even the thumbnail can be selected and resized at any time.
Adding Hyperlinks and Interactivity 261 To create a popup rollover: 1. Click the Popup Rollover button on the Standard Objects toolbar's Picture flyout. 2. From the dialog, for the Normal rollover image click the Browse... button, and navigate to and select the image. Click Open.... 3. For the Over image, the previously chosen Normal image is used by default (typically for photo thumbnails). However, you can Browse... to use a completely different image. 4.
262 Adding Hyperlinks and Interactivity • Normal Selection: a Normal image is selected and shows a green border. • Over Selection: an Over image is selected showing a blue border. • Caption Selection: caption text is selected showing a red border (only shown with captioning enabled). If you deselect an image, the drop-down list shows No Selection. 9. Reposition selections by dragging and/or resize selections from corner handles (aspect ratio is always maintained when dragging).
Adding Hyperlinks and Interactivity 263 To add captioning to Over images: 1. In the Rollover Graphic dialog, check Display caption with Over image. 2. Enter your caption text in the Caption input box. 3. Set the text attributes for the caption text using the Font and Size drop-down lists, and the Bold and Italic check boxes. For applying text colour, use the Text Colour drop-down gallery. 4. Check Apply Background Colour to enable a colour to be selected from the adjacent drop-down gallery. 5.
264 Adding Hyperlinks and Interactivity
12 Adding Dynamic Content
266 Adding Dynamic Content
Adding Dynamic Content 267 Creating HTML pages HTML code is the underlying tagged code which your website 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 HTML.
268 Adding Dynamic Content From this point, editing of the "template" HTML structure is required. Typically, text is inserted (by typing or pasting) between the opening and closing
