How to Contact Us Our main office (UK, Europe): The Software Centre PO Box 2000, Nottingham, NG11 7GW, UK Main: (0115) 914 2000 Registration (UK only): (0800) 376 1989 Sales (UK only): (0800) 376 7070 Customer Service/ Technical Support: http://www.serif.
Clipart samples from Serif ArtPacks © Serif (Europe) Ltd. & Paul Harris Portions images ©1997-2002 Nova Development Corporation; ©1995 Expressions Computer Software; ©1996-98 CreatiCom, Inc.; ©1996 Cliptoart; ©1997 Multimedia Agency Corporation; ©1997-98 Seattle Support Group. Rights of all parties reserved. Digital Images ©2008 Hemera Technologies Inc. All Rights Reserved. Digital Images ©2008 Jupiterimages Corporation, All Rights Reserved.
Contents Contents 1. Welcome to WebPlus X2! ................................................1 Ease of Use........................................................................................................3 Text Support ....................................................................................................3 Graphic Flair .....................................................................................................3 Image Control.......................................................
Contents 3. Developing Sites and Pages........................................ 25 Understanding site structure and navigation........................................ 27 Site structure ................................................................................................ 27 Navigation ..................................................................................................... 29 Understanding pages and master pages ................................................ 30 Viewing Pages ........
Contents Access control .................................................................................................... 70 Basic access control.................................................................................... 71 Advanced access control.......................................................................... 74 Adding users to groups ............................................................................ 76 User sign in ..........................................................
Contents Setting paragraph indents ....................................................................110 Working with Unicode text ...................................................................111 Using Find and Replace................................................................................111 5. Formatting Characters and Paragraphs ...............113 Setting text properties .................................................................................115 Using fonts.....................
Contents 7. Editing Objects on the Page .....................................139 Selecting an object.........................................................................................141 Ruler regions ...............................................................................................142 Selecting multiple objects...........................................................................142 Copying, pasting, and replicating objects.............................................
Contents Using 2D filter effects....................................................................................167 Creating reflections..................................................................................169 Creating outlines.......................................................................................169 Blur .................................................................................................................169 Using the Shadow Tool..................................
Contents Modifying adjustments...........................................................................196 Reordering adjustments.........................................................................196 Importing TWAIN images ............................................................................196 Adding animation...........................................................................................197 Animated marquees........................................................................
Contents Adding rollovers .............................................................................................231 Rollover options..............................................................................................231 Creating variant source images...........................................................234 Adding popup rollovers...............................................................................235 Adding navigation elements .................................................
Contents Using database merge ............................................................................287 Using database merge with e-commerce........................................297 Database merge additional features..................................................303 Smart objects ...................................................................................................306 Using Smart objects .................................................................................306 13.
Contents
Welcome to WebPlus X2! 1
2 Welcome to WebPlus X2
Welcome to WebPlus X2 3 Welcome to WebPlus X2 from Serif— still the easiest way ever to get your business, organization, or household on the Web! If you've used WebPlus in the past, you'll know that WebPlus offers a powerful and easy way to design and publish your Web site from scratch or by using design templates. Equipped with an operational Internet Service Provider (ISP) account and WebPlus X2, you can get online in the least time and at a low cost— no experience required.
4 Welcome to WebPlus X2 WebPlus makes it easy to apply multiple effects in one go and adjust the settings to get the exact look you require. Each object remains editable once Filter Effects have been applied and they’re easy to turn off for complete flexibility. There’s no need to use a separate design program with all these graphical effects and enhancements quickly to hand in WebPlus.
Welcome to WebPlus X2 5 What's New in WebPlus X2... • Database Merge (see p. 287) Present database content on your Web page from Serif databases (.SDB), Microsoft Access (.MDB), dBASE, ODBC server data, and other well known database formats, as well as Microsoft Excel, HTML, and delimited text files. Product lists, mailing lists, inventories, in fact any database information can be served to your web audience.
6 Welcome to WebPlus X2 • News—For simple news announcements such as Web site updates or next club meeting dates. All Smart objects now support multiple languages! For a Blog Smart Object, now add personal profiles, social bookmarking links and use trackbacks for inter-blog crossreferencing. Change blog appearance with different pre-defined Visual Styles (or use your own!) Use Editor groups for multi-author article publishing. Last but not least...
Welcome to WebPlus X2 7 • Navbar extras (see p. 238) WebPlus now supports Breadcrumb and Anchor navbars—great for ecommerce database merging. A new Combo theme set offers drop-down "combo box" page navigation. Enable anchors in any navbar type. • Navigation Site Maps Add a navigation site map to visualize the layout of your Web site. • Active Document Frames (see p. 41) Hyperlinks can open a page in a document frame on another page. Set an Absolute URL for more accurate inter-frame navigation.
8 Welcome to WebPlus X2 • Instant 3D with On-screen Transforms (see p. 174) Transform 3D objects in-situ with 3D editing from a context toolbar. Apply awesome 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). • Year update for Calendars plus inline events (see p.
Welcome to WebPlus X2 • Layout aids (see p. 49) Take advantage of labour-saving "sticky" guides, a great way of moving (in bulk) all objects snapped to your ruler guides—move the guide and objects will follow! • New How To tab The How To tab provides quick access to step-by-step, illustrated topics that introduce you to key WebPlus features, and help you plan, design, and create your Web site projects. 9 ..
10 Welcome to WebPlus X2 Installation System Requirements Minimum: • Pentium PC with DVD/CD drive and mouse • Microsoft Windows® 2000, XP or Vista operating system • 256MB RAM • 389MB free hard disk space (Program CD only) • SVGA display (800x600 resolution, 16-bit colour or higher) • 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 to WebPlus X2 11 Wizard should now run successfully when the CD is replaced in the DVD/CD drive. Please read through the license agreement. Click Next to proceed. Enter your User Name, Organization (if applicable) and the software Product Key that came with your software. For more information, click . Click Next. Choose the language that you want the program to use. Click Next. Select the Default Dictionary Language. Click Next.
12 Welcome to WebPlus X2 • Entire feature will be installed to run from network. If you are installing the software from a network, this option will allow you to access the features and all related subfeatures from the network storage, saving you disk space. • Entire feature will be unavailable. By choosing this option, you will not be able to use the selected feature. However, if you later decide that you want to use the feature, you will be able to install it by modifying your installation.
Welcome to WebPlus X2 13 Manual install For manual installation, use My Computer (Windows® XP), or Computer (Windows® Vista), to navigate to the DVD/CD drive in which your WebPlus Program CD is located. Double-click the DVD/CD drive, double-click setup.exe in the displayed folder, choose Serif WebPlus X2 from the menu, then follow the on-screen installation instructions. Modifying, Repairing or Removing WebPlus To modify, repair or remove the installation: Microsoft Windows® XP: 1. Click the Start menu.
14 Welcome to WebPlus X2 features. Adding additional content may prompt you to insert your original WebPlus X2 Program CD; removing content does not require this CD. See the steps in First-time install if you are unsure about any of the options. Some features, such as fonts, cannot be removed by the Setup Wizard once they have been installed. This is due to the way they are used by other applications. Modifying the installation settings in this case will never free up disk space.
Getting Started 2
16 Getting Started
Getting Started 17 Understanding Web sites What's involved in creating a Web site? It can be as simple as choosing and customizing a Web template... or you can start from scratch—it's up to you. Either way, you'll appreciate the ease with which WebPlus lets you revise text, graphics and adjust the design of each page. WebPlus gives you the freedom to lay out page elements in any composition that suits you.
18 Getting Started To the person using a Web browser to access the site, the information appears seamlessly linked—navigable with a click of the mouse. WebPlus takes the pages you've laid out and converts them to HTML. What will I need to preview or publish my Web site? You can preview one or more pages at any time, either within WebPlus (using a special window based on the Internet Explorer browser) or separately using any browser installed on your system.
Getting Started 19 1. The time it takes a visitor to load your page is directly related to the size of the HTML file plus any accompanying graphic or multimedia files. These other files take up considerably more space and slow down loading time. 2. Those parts of your layout that WebPlus cannot translate to HTML will be output as graphics. The more of your layout that WebPlus can translate into HTML, the better.
20 Getting Started Startup Wizard Once WebPlus has been installed, you'll be ready to start. Setup adds a Serif WebPlus X2 item to 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.
Getting Started 21 Creating a Web site using a design template The first time you launch WebPlus, you'll see the Startup Wizard, with a menu of six choices. The first of these is Create>Use Design Template. Using a design template speeds you through the process of creating a professional site.
22 Getting Started Some templates contain Smart objects (see p. 306) such as newsletter sign ups and polls. As Smart objects are stored in Serif Web Resources they have to be associated with a valid Serif customer account. If you want to make use of the Smart Object (if unwanted just delete them), double-click it and login to Serif Web Resources; this will associate the object to your account. WebPlus doesn't stop at just offering pages from a single template.
Getting Started 23 Opening an existing Web site You can open an existing WebPlus site from the Startup Wizard, via the File menu or Standard toolbar. A range of other file formats, including WebPlus templates and Serif PagePlus files can also be opened. It is also possible to Import Web Pages from existing HTML Web sites via the Startup Wizard. (See WebPlus help or more details.) To open an existing WebPlus site (Startup Wizard): 1. Select the Open>Open Saved Site option.
24 Getting Started Starting a Web site from scratch Although design templates can simplify your design choices, you can just as easily start out from scratch with a new, blank Web 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. To start a new site during your WebPlus session: • Choose New from the File menu.
3 Developing Sites and Pages 3
26 Developing Sites and Pages
Developing Sites and Pages 27 Understanding site structure and navigation Unlike a printed publication, a Web site 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.
28 Developing Sites and Pages In WebPlus, the Site Structure tree (in the Site tab) provides a visual aid that lets you organize the content on your site into sections and levels—in other words as a hierarchy of parent pages branching to child pages. Here's how a similar 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 29 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 Creating HTML pages on p. 247) or that it points to a location outside of the Web site. As an example, compare the HTML page "Overview", the standard Web page "Sales", and the offsite link "Member's forum".
30 Developing Sites and Pages • You can install navigation elements at any level of your site, and (for navbars) easily customize which part(s) of the site structure each navbar should link to—for example, to top-level pages, pages on the same level, child pages, etc. • Because navigation elements are theme graphics, you can use the Theme Graphics tab to select co-ordinated design elements (buttons, etc.) for a consistent look, and change the overall appearance with a single click.
Developing Sites and Pages 31 Master pages are part of the structure of your WebPlus project, and provide a flexible way to store background elements that you would like to appear on more than one page—for example a logo, background, border design, or even a navigation element. The key concept here is that a particular master page is typically shared by multiple pages, as illustrated below.
32 Developing Sites and Pages Viewing Pages The WebPlus workspace consists of a "page" area and a surrounding "pasteboard" area. The page area is where you put the text, graphics, and other elements that you want to appear on your final Web page. The pasteboard is where you generally keep elements that are being prepared or waiting to be positioned on the page area.
Developing Sites and Pages 33 To move or copy an object between pages via the pasteboard: 1. Drag the object from the source page onto the pasteboard (hold down the Ctrl key to copy). 2. Display the target page (see Switching between pages on p. 33). 3. Drag (or Ctrl-drag to copy) the object from the pasteboard onto the target page. WebPlus makes it easy to see exactly what you're working on—from a wide view of a whole page to a close up view of a small region.
34 Developing Sites and Pages Selecting vs. viewing a page: Single-clicking a page/master page entry merely selects the page, which you might do for example if you were about to delete it from the right-click menu. To actually view the associated page/master page you need to double-click an entry or use one of the methods noted below. Feedback from the entry tells you whether it's currently viewed and/or selected, i.e. An orange entry (with bolded page name) denotes the selected page.
Developing Sites and Pages 35 • 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.
36 Developing Sites and Pages As a shortcut to view the site's Home page: • Click the Home Page button on the Hintline. Adding, removing, and rearranging pages Using the Studio's Site tab, you can quickly add or delete 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.
Developing Sites and Pages When clicked, the Site tab's last chosen menu item. 37 Add button will remember its While adding standard pages lets you start page design from scratch, you can make life a little easier by adopting "ready to go"pages from supplied WebPlus templates. To maintain the page's original design, any master page associated with the added page can optionally be "imported" with the page. To add a new page from a template: 1.
38 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. 247) for more information. You can also add an offsite link to your site structure.
Developing Sites and Pages 39 To add a new master page: button is clicked to 1. On the Studio's Site tab, ensure the expand the Master Page Window. 2. Click the OR Add button above the Master Pages window. 3. Click the window. Master Page Manager button above the Master Pages 4. Select the dialog's Add... button. Enter Width and/or Height settings if different from the defaults. 5. (Optional) From the Background tab, opt to use scheme manager settings, i.e.
40 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. As explained in Understanding site structure and navigation on p. 27, the tree provides a visual aid that lets you organize the content on your site into "sections" and "levels"—that is, as a hierarchy of parent pages branching to child pages.
Developing Sites and Pages 41 Assigning master pages If you've defined more than one master page for your site, you can use a variety of methods to reassign a specific master page to individual pages, one page at a time. You can also set a page to use no master page—for example, if you import an HTML page you may want to see only its original design elements without adding others from a master page. The key thing to remember is that each page can use only one master page.
42 Developing Sites and Pages If adding a frame to a master page ensure that the frame's destination page does not use that same master page (this avoids an unwanted page-in-page effect). Frames are applied via a Framed Document Tool. The term "Framed Document" is used in WebPlus to keep the concept of Iframes distinct from that of HTML or Creative text frames (used for controlling the placement of text on the page)—both very different features within WebPlus. WebPlus also supports Active document frames.
Developing Sites and Pages 43 To create a framed document: 1. Select the page on which you would like to add a frame. 2. From the Web Objects toolbar, select the Framed Document Tool. You'll see the mouse pointer change to a cursor. What you do next determines the initial size and placement of the frame. 3. To insert the frame at a default size, simply click the mouse. OR To set the size of the inserted frame, drag out a region and release the mouse button. 4.
44 Developing Sites and Pages Absolute URLs Since frames divide a web page into panes which each display their own HTML document, you need to make sure that each part of the frame is referenced using absolute URLs. This means that when a visitor bookmarks the page on your site, the page within the frame will also be bookmarked. To use Absolute URLs, you will need to set a Site Base URL—the part of the URL common to all pages, e.g. https://www.serif.co.uk/URL/example/.
Developing Sites and Pages 45 To define layout guides: • Click the button on the Page context toolbar. The Margins tab lets you set guide lines for page margins, rows, and columns. You can set the left, right, top, and bottom margins individually. The dialog also provides options for balanced margins (left matching right, top matching bottom). Use the Row and Column Guides section to define guides for rows and columns with an optional in-between gutter (gap).
46 Developing Sites and Pages 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. To define a new zero point: • Drag the tab marker on the ruler intersection to the new zero point on the page or pasteboard.
Developing Sites and Pages 47 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... 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.
48 Developing Sites and Pages 1. For a horizontal or vertical guide, click on the horizontal or vertical ruler, respectively, at the position you want your guide to appear. Hold down the Alt key before guide creation to produce a horizontal guide from a vertical ruler and vice versa. 2. Drag onto the page while fine-tuning the guide into its position. A dotted red line will appear which changes to a solid red line after releasing the mouse button.
Developing Sites and Pages 49 Sticky guides Guides are normally "sticky" in that objects snapped to them will be moved when the guide is moved across/down the page. Objects stuck to guides can be unstuck individually at any time or the whole feature can be switched off if necessary. To make individual objects "non-sticky": 1. Select the object. 2. Click one of two small red triangular markers shown at the point where the object is attached to the guide.
50 Developing Sites and Pages To turn the dot grid on and off: • Enable (or disable) the Dot Grid button on the View menu. OR Choose Options... from the Tools menu and select Snapping. Check or uncheck Dot Grid. You can also set the grid spacing, style, and colour via the Options dialog. Incorporating theme graphics The Studio's Theme Graphics tab provides a wide selection of ready-made themed objects, which you can add to your pages with a single click. (Or you can use a dialog if you prefer.
Developing Sites and Pages 51 simply click a different set on the Theme Graphics tab to instantly update all your theme graphics. To add a theme graphic to a page: 1. Display the Studio's Theme Graphics tab. 2. In the Categories tree, select a category to browse. Click Current Site to view theme graphics already in use, for example if you want to add an element again. OR Expand the Sets or Types list, and then select a category to view its gallery.
52 Developing Sites and Pages To update theme graphics to use a different theme: 1. Display the Studio's Theme Graphics tab. 2. Expand the Sets list in the Categories tree, then select the theme you want to apply. OR With "Theme Graphics" selected as a category, click the View Sets thumbnail in the lower Theme Graphics section. Then click the thumbnail for the theme you want to apply. 3.
Developing Sites and Pages 53 2. Use the dialog to change theme graphic settings for both normal and hover over states. The actual properties you can edit depend on the type of theme graphic, but may include text, subtext, text fill colour(s), and font. Most tabs (other than for Text) let you specify separate settings for the selected theme graphic, theme graphics of this type, and/or in this set. The updated settings will apply only to theme graphics in the current site. 3. Click OK to apply changes.
54 Developing Sites and Pages The Gallery tab also lets you store your own designs under My Designs (or in a user-defined category) if you would like to reuse them—the design is made available in any WebPlus project. You can add and delete any items stored in My Designs or one of its categories, with the option of naming elements to facilitate rapid retrieval by searching. Designs cannot be added to any pre-defined category.
Developing Sites and Pages 55 All designs in a deleted category will also be lost. To move or copy an object into the Gallery: 1. Select My Designs or a gallery category into which you want to add the object. Use the Categories drop-down menu for this. 2. To move, drag the object from the page and drop it in the window. To copy, press the Ctrl key before starting to drag. 3.
56 Developing Sites and Pages The dialog is arranged into separate tabs, with each tab reflecting an aspect of site properties. Tab Property Options Default file extension The default extension for published pages is .HTML. Some Web servers require you to use a different extension. Default page alignment WebPlus lets you set a default width and height for Web pages. Force absolute text size By default, text on your published Web pages will vary in size depending on the visitor's browser setting.
Developing Sites and Pages 57 Identification Author/copyright Add details on ownership, legal notices (copyright statement) and publication dates as Meta Tags to your site's page headers. Graphics Global image export options WebPlus applies default settings when exporting graphics. Favourites Favourites Set an icon file (a graphic) for the Web site which will show when a web visitor bookmarks your Web site.
58 Developing Sites and Pages You can adjust the dimension settings at any time—but as a rule, make changes before you've gone too far with laying out page elements! In general, use a Width setting that will fit on a standard monitor (750 pixels is usually safe) and won't force users to scroll horizontally. As for Height, allow enough vertical distance to let you lay out the objects on your longest page. It's OK to allow more space than you expect to fill.
Developing Sites and Pages 59 Author and copyright information • Use the Identification tab if you're planning on publishing some of your own material and would like declare legal ownership. Enter the Author name and site Copyright message into each box. The details are not published directly on the page but are added into each published page's header. PAGE 74
60 Developing Sites and Pages Add to Favourites The favourites feature is used to include a graphical portrayal of your Web site, a company logo, or other distinguishable symbol, to precede any bookmark stored in a web visitor's browser favourites. An .ICO file must have been previously created to represent your site. To create a favourites icon for your site: 1. Choose Site Properties... from the File menu. 2. Click the Favourites tab and check the Show a favourites icon.. option. 3. Browse for an .
Developing Sites and Pages 61 To remove spaces from resource files or make file names lower case: 1. Choose Site Properties... from the File menu. 2. On the dialog's Options tab, check the Remove spaces from resource file names and/or Make resource file names lower case option. To allow a browser to insert a line break after any hyphen, WebPlus can optionally export a Word Break tag after each hyphen instance.
62 Developing Sites and Pages In addition, you can view your top five visitors, landing or exit pages (first/last page that a web visitor arrives at/leaves). Top five visitors show the visitor's IP address or, where possible, the visitor's computer host name. • Browsing environments: shows a breakdown of Web visitor's browser programs used, screen resolutions, operating systems, and whether Flash is enabled on browsers, all expressed in percentages.
Developing Sites and Pages 63 To enable Web page statistics: 1. Choose Site Properties... from the File menu. 2. From the Site Analytics tab, check Enable web analytics. 3. Click the Set Analytics Profile button, then select either: 4. • A new profile: enter a profile name in the Create New Profile input box, click the Add New Profile button, then select from the list. OR • An existing profile: Pick directly from the profile list. Click OK, then OK again.
64 Developing Sites and Pages To set an absolute URL: 1. Choose Site Properties... from the File menu. 2. From the Site Base URL tab, enter the base URL that users would expect to navigate to, e.g. www.sailaway.com, www.discount.co.uk, etc. 3. (Optional) Check Turn all local URLs into absolute URLs to use absolute URLs instead of relative URLs. Hyperlinks can be made absolute hyperlinks by checking the Absolute URL option for a Site page, file, anchor, or navigation element.
Developing Sites and Pages 65 To view normal Web page property settings: • Right-click the page in the workspace and choose Page Properties.... OR On the Studio's Site tab, single-click to select the page in the Site Structure tree, right-click the page entry and choose Page Properties.... OR Choose the item from the Edit menu. The Page Properties dialog appears. Tab name Property Page Page and file name Each page has a "visible" page title or file name shown in Site tab's Site Structure tree.
66 Developing Sites and Pages Active document frame Pages can be opened in an active document frame if the frame has been created previously. Background Background sound Choose a sound to load and play automatically when a specific page is first displayed. Background Background colour/picture/On-page colour Sets a custom colour/picture for off-page background and a colour for on-page background. Use for pages that don't use a master page.
Developing Sites and Pages 67 Page properties via Site Manager The Site Manager lets you view and apply properties to individual or multiple Web Pages. You can set Include pages in navigation, assign master pages, set page alignment and size, rename pages, set a background/on-page colour, add sounds, optimize pages for search engines, and apply redirections, transitions, or access control. Master pages can also have their page size, background and page transitions managed via Site Manager.
68 Developing Sites and Pages 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 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.
Developing Sites and Pages 69 To launch Site Manager: • Click the Site Manager button on the Hintline at the bottom of your workspace. OR button on the Pages context toolbar. Click the OR Select Site Manager from the Tools menu, and choose a manager type from the submenu (e.g. Resource Manager). This opens Site Manager with the chosen Manager displayed automatically. A quick summary gives an indication of what each management feature can do for you. Type of Management Let's you...
70 Developing Sites and Pages site. Anchor View and edit anchors, jump to anchors, find and replace anchor links. File Display the Web site structure with page file names rather than page names. Site checker Display common layout problems discovered in your Web site. Access control Access control lets you apply security across your Web site or, more typically, to specific pages which may host confidential information.
Developing Sites and Pages 71 The subject of access control can be a little daunting so the following illustration helps to show the relationships between users, Web pages, user lists, and user groups. Advanced access control is carried out via Serif Web Resources by using a Smart object, called Access Control, which can be created to manage user groups and users, and to optionally insert a user login onto your page for user sign in (after self-registration sign up).
72 Developing Sites and Pages Photo Gallery page of your family can be made "private" but still be shared with your relatives (under password control). User lists can be created at the same time as setting your page security. Simply enable access control for the page then create a new user list, adding a username and password to the list. The username/password combination will be used by the Web visitor to login and allow access to the Web page.
Developing Sites and Pages 73 4. From the next dialog, enter a Username and Password for your new Web visitor, then click the Add User button. Repeat for other logins if necessary. The User List is incremented as each new username/password entry is added. You'll also be able to rename your user list by editing the list name in the box and clicking the Rename button. 5. Click OK, then OK again to exit the dialogs.
74 Developing Sites and Pages Uncheck Protect page with password if you want to set up user lists without protecting the current page. Advanced access control Advanced access control is intended for more complex Web security scenarios where one set of Web pages belong to one user group, with another set of pages belonging to another. Each user group is then associated with a group of users—all with the same permission to access that group's set of pages.
Developing Sites and Pages 6. 75 Either: • If an on-the-page user login is not required, click Exit to logout of Serif Web Resources. OR • If an on-the-page user login is required, click the Insert button. See User sign in on p. 80. To create a user group: Smart Object Tool button on the Web Objects toolbar. 1. Click the 2. With your Access Control Smart object selected, in the Object Preview pane, click the object's Manage... button to reveal the Manage Access Control dialog. 3.
76 Developing Sites and Pages group has to be manually populated with the user's email (the Web Manager will need to know user email addresses in advance). • 6. Automatic login/logout: If you've got a forum on the same page as your user login, check the option to automatically login to the forums as well when a user signs in. You'll need to publish your Web site to check this is set correctly due to web browser security restrictions.
Developing Sites and Pages 77 intended for more public access where controlling users is impractical— instead user sign up (self-registration) is used, with the option to manage users within their groups via the Access Control Smart object. You can add more than one user to the same user group. The same user can belong to multiple user groups. Any user can be deleted whether the user belongs to a group or not. A user can also be temporarily suspended for breaking site rules (e.g.
78 Developing Sites and Pages 4. 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. 5. To assign to a group, select the group from the Group drop-down list, then add the selected user from the Users box to the Group box by clicking the Add button (if adding all users, click Add All). The user will now belong to the user group.
Developing Sites and Pages 79 Suspended users will be shown with an asterisk in the Manage Access Control dialog's user groups. To ban a user(s): • by IP address: As for deletion of a user (above), but select IP address from the drop-down list, then click the Ban button.
80 Developing Sites and Pages User sign in A user login box can be added to the page to allow registered users to Sign in to all groups that are "sign up enabled", otherwise restricted pages will be protected. A new visitor to the site can sign up to become a registered user (click the Sign up link). Add the login box to the Web site's master page. Any Web page will then offer the user the opportunity to sign up to the site. To add a user login for sign up: 1.
Developing Sites and Pages 81 To sign up as a registered user: 1. From the User Login box, click the Sign Up link. 2. Agree to Serif Hosted Objects and Form Redirection Services Terms and Conditions by checking the check box. 3. From the dialog, enter the user login details, choosing a valid email address, screen name, and memorable password (at least six characters long). If you've enabled CAPTCHA verification, enter the displayed text in the box. 4. Click the Signup button.
82 Developing Sites and Pages Optimization of Web pages for search engines is possible in several ways: • Meta Tags: Tags store search engine descriptors (i.e., keywords and a description) for the site and/or an individual page. These tags are used to allow better matching between entered search engine text (like you might enter into Google) and the keywords you've associated with your Web site or page.
Developing Sites and Pages 83 Using search engine descriptor Meta Tags Although they're optional, if you want to increase the likelihood that your Web site will be "noticed" by major Web search services, you should enter Meta Tag search engine descriptors. Search services maintain catalogues of Web pages, often compiled through the use of "crawlers" or other programs that prowl the Web collecting data on sites and their content.
84 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 85 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. (For the site) Choose Site Properties... from the File menu.
86 Developing Sites and Pages Just like the robots file, the setting of site and page properties creates the sitemap file (this is published with your Web site); the file is stored in the root Web folder (perhaps alongside a robots.txt file). 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.
Developing Sites and Pages 87 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.
88 Developing Sites and Pages As an example, the search term "vitae" could retrieve search results showing Web pages which contain the search term. The user clicks the Search button to initiate any search. 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.
Developing Sites and Pages 89 (it needs to display multiple Web page hits consecutively). It also makes sense to keep the search results on a separate, perhaps new, page which can also have its own look and feel (double-click the object to alter page appearance). To add Site Search Results to a new page: 1. On the Site tab, in the 2. Right-click the new page and then click Page Properties....
90 Developing Sites and Pages
4 4 Working with Text 4
92 Working with Text
Working with Text 93 Understanding text frames Typically, text in WebPlus goes into text frames, which work equally well as containers for single words, standalone paragraphs, or multipage articles or chapter text. You can also use artistic text for standalone text with special effects, or table text (see Creating text-based tables on p. 127) for row-andcolumn displays. What's a text frame? A text frame is effectively a mini-page, with: • Margins and column guides to control text flow.
94 Working with Text When you select a frame you'll see its bounding box (see Frame 1 above), indicated by a grey border line plus corner and edge handles, and (if you clicked with the Pointer Tool) a blinking insertion point in the frame's text. In this mode, you can edit the text with the Pointer Tool. As in a word processor, double-clicking selects a word, and triple-clicking selects a paragraph.
Working with Text Rotate frame 95 1 Frame linking Columns Export as text 2 Copy and paste exported text Solid fill and line colour Gradient and bitmap fill HTML-compliant Styles Transparency Borders Warp 2D/3D Filter Effects Instant 3D 1 If applied, will export frame as a graphic. 2 Only if rotate, crop, transparency, a border or a filter effect is not applied. 1 1 1 1 1 The above table relates to the frame as an object, and not to text contained within.
96 Working with Text To move a text frame: • Drag the frame's bounding box. OR • Use the or options in the Transform tab. To resize a text frame: • In any selection mode, drag a corner or edge handle. OR • Use the or options in the Transform tab. Creating frames You add frames to a page as you would any other object. You can resize any frame, but cannot alter its basic shape. To create a frame: 1.
Working with Text WritePlus story editor: 97 To start WritePlus, right-click on a frame and choose Edit Story (shortcut Ctrl+E). OR Click the WritePlus button on the Frame context toolbar. This opens the WebPlus integrated story editoruseful for typing, formatting, and proofing large amounts of text. If the frame already contains text, it is automatically loaded into WritePlus for editing. Importing text: Right-click on a frame and choose Text File... (shortcut Ctrl+T) to import text.
98 Working with Text You can drag the column guides or use a dialog to adjust the top and bottom column blinds and the left and right column margins. To edit frame properties directly: • Select the frame, then drag column guide lines to adjust the boundaries of the column.
Working with Text 3. 99 To change the column widths and blinds (top and bottom frame margins), click a cell in the table and enter a new value. Hint: If the frame has more than one column, you only need to enter top/bottom values for the first one. Then click Top and/or Bottom to repeat the entries instantly in the cells below. How a story flows through Creative frames Stories cannot flow between HTML frames, as they do not support linking (text can only overflow a single frame).
100 Working with Text To AutoFlow story text on the page: • Click the AutoFlow button just to the left of the frame's Link button (showing .) WebPlus creates additional pages and frames as needed to accommodate the story text. Fitting text to frames If there's too much story text to fit in a frame sequence, WebPlus stores it in an invisible overflow area and the Link button on the last frame of the ; an AutoFlow button appears next to the Link sequence displays button.
Working with Text 101 Linking Creative frames When selected, a text frame includes a Link button at the bottom right which allows you to import text files or control how the frame's story flows to following frames. The icon inside each frame's Link button denotes the state of the frame and its story text: No Overflow The frame is not linked to a following frame (it's either a standalone frame or the last frame in a sequence) and the end of the story text is visible.
102 Working with Text To link the selected frame to another frame as the next frame: • Click the frame's Link button (showing OR Select the frame, then click the context toolbar. • .) Link Frame button on the Frame Click with the Textflow cursor on the frame to be linked to. Only empty frames are valid frames to link to. To unlink the selected frame from the sequence: • Click the Unlink Frame button on the Frame context toolbar.
Working with Text 103 Note that the text inside a frame can take a solid colour, but doesn't have line and fill properties as such for fancy line/fill effects with text, you can employ artistic text (see p. 104). Controlling overflowing text (HTML frames) As HTML frames have to comply with HTML standards, they are not capable of linking stories (as for Creative frames). As a result, a decision has to be made about what happens in the event of overflowing text.
104 Working with Text Using artistic text Artistic text is standalone text you type directly onto a page. Especially useful for headlines, pull quotes, and other special-purpose text, it's easily formatted with the standard text tools. Here are some similarities between frame text and artistic text. Both text types let you: • vary character and paragraph properties, apply named text styles, edit text in WritePlus, and import text.
Working with Text 105 To create artistic text: 1. Choose the 2. Click anywhere on the page for an insertion point using a default point size, or drag to specify a particular size as shown here. 3. Set initial text properties (font, style, etc.) as needed before typing, using the Text context toolbar, Text menu, or right-click (choose Text Format>). 4. Type directly on the page to create the artistic text. Artistic Text Tool from the Tools toolbar's Text flyout.
106 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 107 If you don't want text on a path, you can override the cursor response by holding down the Alt key. 4. Begin typing at the insertion point. Text flows along the line, which has been converted to a path. The original line object no longer exists. To recover it, use Undo at this point. 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.
108 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. Editing text on the page You can use the Pointer Tool to edit frame text, table text, or artistic text directly.
Working with Text 109 To start a new paragraph: • Press Enter. To start a new line within the same paragraph (using a "line break" or "soft return"): • Press Shift+Enter. The following two options apply only to frame text. You can use these shortcuts or choose the items from the Insert>Break submenu. To flow text to the next column (Column Break) or frame (Frame Break): • Press Ctrl+Enter or press Alt+Enter, respectively. To switch between insert mode and overwrite mode: • Press the Insert key.
110 Working with Text To copy and paste text: 1. Select the text to be copied. 2. Select Copy from the Edit menu. This places the text onto the clipboard. 3. Place an insertion point in a different location in your story or artistic text. 4. Select Paste from the Edit menu. If you don't place an insertion point, the text can be pasted into a new text frame directly. To move text by drag and drop (text frames only): 1. Select the text to be moved. 2.
Working with Text • 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. 111 For details on setting frame margins, see Frame setup and layout on p. 97. To set the indents of the current paragraph: • Drag the appropriate ruler marker(s). OR For quick left indents, select the Increase Level or Decrease Level button to increase or decrease indent, respectively.
112 Working with Text even inline graphics and more! Using the Find and Replace dialog—which remains open without interrupting your work until you click its Close button—you can replace globally, or on a case-by-case basis. To use Find and Replace: 1. Choose Find & Replace... from the Edit menu or press Ctrl+F. 2. In the dialog, type the text to be found in the Find box and its replacement text (if any) in the Replace box. Click the down arrows to view recent items.
Formatting Characters and Paragraphs 5
114 Formatting Characters and Paragraphs
Formatting Characters and Paragraphs 115 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 typeface, point size, font, attributes, paragraph alignment, or level. OR Right-click the text and choose Text Menu>Text Format, then select from the submenu: Character...
116 Formatting Characters and Paragraphs Using fonts One of the most dramatic ways to change your document's appearance is to change the fonts used in your artistic text, frame text, or table text. Applying different fonts to a character or entire paragraph can communicate very different messages to your intended readership. Font assignment is very simple in WebPlus, and can be done from the Fonts tab, Text context toolbar, or in the Character dialog (via right-click, or from the Text menu).
Formatting Characters and Paragraphs 117 The Fonts tab is automatically hidden by default, but can be viewed by clicking the arrow button at the left of your workspace. Websafe fonts are a specially selected and configurable subset of fonts which offer the best font matches between your Web site (during design) and your web visitors' computers (during browsing). On publishing, Websafe fonts are only referenced (and not rasterized) as they are assumed to be available on a Web visitor's computer.
118 Formatting Characters and Paragraphs Paragraph styles and character styles A paragraph style is a complete specification for the appearance of a paragraph, including all its font and paragraph format attributes. Every paragraph in WebPlus has a paragraph style associated with it. • WebPlus includes one built-in paragraph style called "Normal" with a specification consisting of generic attributes including left-aligned, 12pt Verdana.
Formatting Characters and Paragraphs 119 Working with named styles The named style of the currently selected text is displayed in either the Text Styles tab or the drop-down Styles box on the Text context toolbar. A character style (if one is applied locally) may be shown; otherwise it indicates the paragraph style. You can use either the tab, the drop-down Styles box, or a dialog to apply a particular style to the existing text.
120 Formatting Characters and Paragraphs 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). WebPlus lets you apply the list style to normal text (as local formatting) or to text styles equally.
Formatting Characters and Paragraphs 3. 4. 121 From the Text Style dialog, either: • For text in HTML text frames, click in a preset icon from the dialog (see above). OR • For text in Creative text frames, pick Bullet or Number from the Style drop-down menu, then select one of the preset formats shown by default. OR • For a custom list, select a preset then click the Details button to alter custom options. Click OK to apply list formatting.
122 Formatting Characters and Paragraphs Inserting a symbol You can insert symbol characters using either the Insert menu or (for common symbols) keyboard shortcuts. As a rule for Web page use, don't employ symbols outside the standard character set, or in non-standard fonts. To insert a symbol character using the Insert menu: 1. Select the Pointer Tool and click in the text for an insertion point. 2. Choose Symbol... from the Insert menu, and select a symbol name from the submenu. 3.
Formatting Characters and Paragraphs 123 Inserting date/time You can insert a date/time field into your text, stamped with current date/time information, by using Information>Date or Time... from the Insert menu. Various date and time formats are available. By default, the date/time field updates itself automatically when the site is saved or loaded. You can turn auto-updating off if necessary.
124 • Formatting Characters and Paragraphs Click the Update button to automatically update any altered field currently placed in your site or template. This field will remain linked to User Details until it is deleted.
Working with Tables 6
126 Working with Tables
Working with Tables 127 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, and use proofing options such as AutoSpell/Spell Checker, Proof Reader, and Thesaurus.
128 Working with Tables Sort table contents Solid fill and border colour Gradient and bitmap fill HTML-compliant Styles Transparency Borders Warp 2D/3D Filter effects Instant 3D 1 1 1 1 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 129 To create a table: 1. HTML Table Tool or Creative Table Tool Choose either the from the Table flyout on the Standard Objects toolbar, and click on the page or pasteboard, or drag to set the table's dimensions. The Create Table dialog appears with a selection of preset table formats shown in the Format: window. 2. Step through the list to preview the layouts and select one. To begin with a plain table, select [Default]. 3. Click OK.
130 Working with Tables • To delete the table object, select it and press the Delete key (you can also choose Delete Object from the Edit menu). OR Select any part of its text and choose Delete from the Table menu (Table>Delete from the right-click menu), then Table from the submenu. • To duplicate the selected table object and its text, first make sure no text is selected (an insertion point is OK), then use the Copy and Paste commands.
Working with Tables • 131 To copy, paste and delete selected table text within the same table (or between different tables), use the Copy, Paste and Delete commands as you would for frame text. You can also right-click on a cell containing text and choose Text Menu>Copy—select a new cell then pick Paste from the Edit menu. QuickFill lets you fill a span of cells with the contents of an initially selected cell's contents.
132 • Working with Tables To format numbers and insert formulas, switch on the Spreadsheet functions button on the Table toolbar. See online Help for more information. To change the table's structure and appearance: • To select a cell, click on the edge of the chosen cell. To select more than one cell, click in one cell and drag across the others, one row or column at a time.
Working with Tables 133 • Choose Autofit Column(s) to Contents from the Table menu (or rightclick menu) to reduce or increase the size of selected columns to fit to the text of the greatest width. An equivalent option exists for rows. For an individual column or row, click the column or row header's button, choosing Autofit Row to Contents or Autofit Column to Contents, respectively.
134 • Working with Tables To merge cells into larger cells that span more than one row or column (for example, a column head), select a range of cells and choose Merge Cells from the Table menu (Table>Merge Cells from the right-click menu). The merged cell displays only the text originally visible in the top-left selected cell.
Working with Tables 135 • You can pick any sample and use the checkboxes to specify which of the sample's attribute(s) to apply to your actual table. This lets you "mix and match," for example by applying (in two passes) the Colour from one sample and the Font from another. • To restore plain formatting, choose [Default]. Setting Cell Properties To customize the appearance of one or more cells "by hand": 1. Select the cell(s), row(s) or column(s). 2.
136 Working with Tables For calendar-specific properties, a context toolbar lets you change an existing calendar's month/year, modify calendar-specific properties, and manage calendar events (both personal and public holidays). You can update calendar details throughout your Web site via Set User Details—in the same way that you'd set up the date (along with the time) on some alarm clocks.
Working with Tables 137 To update calendar details globally: 1. Select Set User Details... from the Tools menu. 2. From the dialog's Calendars tab, select the Year that all your calendars will adopt from the drop-down menu. OR 3. In the Events section, check Show public holidays and/or Show personal events if all calendars are to adopt the holidays and events already configured in the Calendar Event Manager (to modify personal events, click the Events button).
138 Working with Tables 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 the 5. From the dialog, type, use the up/down arrows, or click the button to select a date. 6.
Editing Objects on the Page 5 7
140 Editing Objects on the Page
Editing Objects on the Page 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, and resize objects. Rotate Tool Click to use the Rotate Tool to rotate an object around its centre. Select the object, then drag one of its handles. You can also use the Rotate Tool to move and copy objects. See Rotating an object.
142 Editing Objects on the Page Simply clicking on any member of a group selects the group object. In general, any operation you carry out on a selected group affects each member of the group. However, you can also select and edit an individual object within a group. To select an individual object within a group: • Ctrl-click the object. Ruler regions When you click to select an object, blue ruler regions indicate the left, right, top, and bottom edges of the object.
Editing Objects on the Page 143 To create a multiple selection: • Click in a blank area of the page and drag a "marquee" box around the objects you want to select. Repeated Shift-drags add to the selection region. OR 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.
144 Editing Objects on the Page To paste an object from the Clipboard: • Right-click on the page and choose Paste from the submenu. OR Press Ctrl+V, or choose Paste from the Edit menu, or click the Paste button on the Standard toolbar. The standard Paste command inserts the object at the insertion point or (for a separate object) at the centre of the page. To insert a separate object at the same page location as the copied item, use the Paste in Place command (Ctrl+Alt+V).
Editing Objects on the Page 145 To replicate an object: 1. Select the object to be replicated and choose Replicate... from the Edit menu. The Replicate dialog appears, with a preview region at the right. 2. To arrange copies in a straight line, select Create line. For an X-by-Y grid arrangement, select Create grid. 3. Specify Line length (the number of objects including the original) in the arrangement, or the Grid size.
146 Editing Objects on the Page Moving objects To move an object (including a multiple selection): • Click within the object (not on a handle) and drag it to the new location while holding down the left mouse button. OR Drag the object's grey bounding box. The view automatically re-centres itself as you drag objects to the edge of the screen. To constrain the movement of an object to horizontal or vertical: • Select the object and use the keyboard arrows (up, down, left, right).
Editing Objects on the Page 147 edges. You can also constrain the resizing—note that pictures normally behave differently from lines, shapes, and text objects. Text in frames and tables doesn't change size when the container object is resized. 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.
148 3. Editing Objects on the Page Hold the mouse button down and drag the pointer in the direction in which you want to rotate the object, then release (use Shift key for 15° rotation intervals). To unrotate (restore the original orientation): • Double-click the object. • To restore the rotated position, double-click again. To rotate an object 90 degrees left or right: • Select the object and choose the Rotate Left or Rotate Right command from the Arrange menu.
Editing Objects on the Page 149 To crop using the object's original outline: 1. Click to select the object or group. 2. Select the 3. Drag one of its edge or corner handles inward (the aspect ratio of the original object is maintained). Press the Shift key for free (unconstrained) cropping. Square Crop Tool from the Tools toolbar's Effects flyout. To crop by modifying the object's outline: 1. Select the object or group. 2. Select the Irregular Crop Tool from the Tools toolbar's Effects flyout.
150 Editing Objects on the Page For information on different corners segment types and other options hosted on the context toolbar, and a more detailed look at editing lines, see Drawing and editing lines on p. 159. To pan the visible portion of a cropped object within the crop area: • Select the object and drag its centre area. To uncrop (restore full visibility): • Click the Remove Crop button on the Crop context toolbar.
Editing Objects on the Page 151 Combining lines and shapes Combining curves is a way of creating a composite object from two or more lines or drawn shapes. As with cropping to a shape, the object in front clips the object(s) behind, in this case leaving one or more "holes" where the component objects overlapped. As with grouping, you can apply formatting (such as line or fill) to the combined object and continue to edit individual nodes and segments with the Pointer Tool.
152 Editing Objects on the Page Ordering objects As objects are created, they are ordered in a stack, such that the most recently created object will overlap earlier ones. You can change the stacking order, which affects how objects appear on the page To change the object's position in the stacking order: • Right-click on the object and choose Arrange. OR Click the Arrange menu (with object selected).
Editing Objects on the Page 153 • Space objects out at certain intervals. Lets you distribute objects, so that your objects (as a multiple selection) are spread evenly between the endmost objects on your page. Alternatively, check the Spaced option and corresponding measurement value to set a specific distance between each object. • Align objects with the page margin or edge. Rather than work within the current selection area you can align to page margins (if set) or just the page edge.
154 Editing Objects on the Page Creating groups You can easily turn a multiple selection (see Selecting multiple objects on p. 142) 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 Group button below the selection.Group Objects... To ungroup (turn a group back into a multiple selection): • Click the Ungroup button below the selection to turn back to a multiple selection.
Editing Objects on the Page 155 Snapping The Snapping feature simplifies placement and alignment by "magnetizing" grid dots and guide lines. When snapping is on, the edges and centres of objects you create, move, or resize will jump to align with the nearest visible grid dot or guides. Objects normally snap to the page edge, too. Guide lines include ruler guides as well as layout guide lines based on page margins, rows, and columns (see Using layout aids on p. 44).
156 Editing Objects on the Page Updating and saving defaults Object defaults are the stored property settings WebPlus applies to newly created objects, e.g. text, graphics, and frames. When you create text in your site, it will have default properties for font, size, colour, alignment, etc. New graphics or frames will have their own default properties. You can easily change the defaults for any type of object.
Lines, Shapes, and Effects 8
158 Lines, Shapes, and Effects
Lines, Shapes, and Effects 159 Drawing and editing lines WebPlus provides Pencil, Straight Line, Pen, and QuickShape tools for creating simple graphics. Using the line tools (found on a Standard Objects toolbar's Line flyout), you can draw single lines, connect line segments together, or join line ends to close the line, creating a shape (see Drawing and editing shapes on p. 165 for details). Use the Pointer Tool and the Curve context toolbar to resize or reshape lines once you've drawn them.
160 Lines, Shapes, and Effects Drawing lines To draw a freeform line (with the Pencil Tool): 1. Click the Line flyout on the Standard Objects toolbar and choose the Pencil Tool. 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. The line will automatically smooth out using a minimal number of nodes. 4.
Lines, Shapes, and Effects 161 To draw one or more line segments (with the Pen Tool): 1. Click the Line flyout on the Standard Objects toolbar and choose the Pen Tool from the flyout. The Curve Creation toolbar appears, with three buttons that let you select which kind of segment you'll draw next. A Straight segment is simply a straight line connecting two nodes. (Shortcut: Press 1) A Bézier segment is curved, displaying control handles for precise adjustment.
162 Lines, Shapes, and Effects • For a Bézier segment, click again for a new node and drag out a control handle from it. (Control handles act like "magnets," pulling the curve into shape. The distance between handles determines the depth of the resulting curved line.) Click again where you want the segment to end, and a curved segment appears. Pressing the Shift key while you're drawing causes the new node's control handles to "snap" into orientation at 15° intervals with respect to the node.
Lines, Shapes, and Effects • 163 Use the Line tab or Line context toolbar (shown when a line is selected) to change the line's weight (thickness), type, or other properties. Select a line width with the slider, and use the drop-down boxes to pick the type of line. The context toolbar can also adjust line-end scaling as a percentage.
164 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, as depicted in the examples below. The Line tab also lets you vary a line's Cap(end) and the Join (corner) where two lines intersect.
Lines, Shapes, and Effects 165 Drawing and editing shapes WebPlus provides Pencil, Pen, Straight Line, and QuickShape tools for creating simple graphics. QuickShapes are pre-designed objects that you can instantly add to your page, then adjust and vary using control handles. Another way of creating shapes is to draw a line (or series of line segments) and then connect its start and end nodes, creating a closed shape.
166 Lines, Shapes, and Effects To create a QuickShape: 1. Click the QuickShape button on the Tools toolbar and select a shape from the flyout. The button takes on the icon of the shape you selected. 2. Click on the page to create a new shape at a default size. Drag to adjust its dimensions. 3. When the shape is the right size, release the mouse button. Now you can alter the shape by dragging on its displayed handles.
Lines, Shapes, and Effects 167 To turn a selected line into a shape: You can go the other way, too—break open a shape in order to add one or more line segments. 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.
168 Lines, Shapes, and Effects Drop Shadow Inner Shadow Outer Glow Inner Glow Inner Bevel Outer Bevel Emboss Pillow Emboss Gaussian Blur Zoom Blur Radial Blur Motion Blur Colour Fill Feather Outline Reflection WebPlus additionally provides the Shadow Tool for applying a shadow to an object directly on your Web page. To apply 2D filter effects: 1. Select an object and click the toolbar’s Effects flyout. Filter Effects button on the Tools 2.
Lines, Shapes, and Effects 169 Creating reflections A simple way to add creative flair to your page is to apply a vertical reflection on a selected object. The effect is especially eye-catching when applied to pictures, but can be equally impressive on artistic text, such as page titles or text banners. A combination of settings can control reflection height, opacity, offset and blurring.
170 Lines, Shapes, and Effects 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. To help you create them quickly and easily, WebPlus provides the Shadow Tool on the Tools toolbar's Effects flyout. The tool affords freeform control of the shadow effect allowing creation of adjustable basic or skewed edge-based shadows for any WebPlus object.
Lines, Shapes, and Effects 171 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.
172 Lines, Shapes, and Effects You'll notice that Bump Maps and Pattern Maps come in two varieties: "2D" and "3D." They are all three-dimensional effects—the 2D/3D distinction refers to how each one achieves its result. With the "2D map" variants, you begin by selecting a bitmap from a gallery. With the "3D" Bump Maps and Pattern Maps, you first pick a mathematical function.
Lines, Shapes, and Effects 173 3D Pattern Map The 3D Pattern Map effect creates the impression of a textured surface by applying a mathematical function you select to introduce colour variations. You can use 3D Pattern Map in conjunction with one or more other 3D filter effects. (See the overview above for background and technical details on these effects.
174 Lines, Shapes, and Effects Adding dimensionality (Instant 3D) Using the Instant 3D feature, you can easily transform flat shapes (shown) and text into three-dimensional objects. WebPlus provides control over 3D effect settings such as: • bevelling: use several rounded and chiselled presets or create your own with a custom bevel profile editor. • lighting: up to eight editable and separately coloured lights can be positioned to produce dramatic lighting effects.
Lines, Shapes, and Effects X rotation Y rotation Z rotation 175 X and Y rotation Transform about your 3D objects' axes instead of your pages' axes by holding the Ctrl key down as you transform. You can also adjust the angle and elevation of each "active" light on the page by dragging the light pointer to a position which simulates a light source. After any transformation, the underlying base object remains editable. To add dimensionality: 1.
176 Lines, Shapes, and Effects To edit base properties of a 3D object: • Select the 3D object, then click the Edit button at the bottom right-hand corner of the 3D object, i.e. The object is shown without its 3D effect, allowing its selection handles to be manipulated for resizing and rotating. Adding borders A border in WebPlus is a repeating, decorative element that can be set to enclose an object, giving the appearance of a picture frame. Borders work especially well with imported pictures.
Lines, Shapes, and Effects 177 • To select all edges or no edges, click the corresponding icon on the top row. • To toggle a single edge, click the corresponding icon in the bottom row. 3. To define the border, select the Border tab. In the Side drop-down list, select a border preset. You can use the up/down arrows to move through the list, and preview each border in the window at the right. To remove a border, select "None." 4.
178 Lines, Shapes, and Effects Here's how object styles work to your advantage: • Any time you want to alter some aspect of the style (for example, change the line colour), you simply change the style definition. Instantly, all objects in your site sharing that style update accordingly. • Object styles you've saved globally appear not only in the original site but in any new site, so you can reuse exactly the same attractive combination of attributes for any subsequent design effort.
Images, Animation, and Multimedia 9
180 Images, Animation, and Multimedia
Images, Animation, and Multimedia 181 Importing images WebPlus lets you insert images from a wide variety of file formats. Here's a quick overview: • Bitmapped images, also known as bitmaps or raster images, are built from a matrix of dots ("pixels"), rather like the squares on a sheet of graph paper. They may originate as digital camera photos or scanned images, or be created (or enhanced) with a "paint" program or photo editor.
182 Images, Animation, and Multimedia To add an image from the Media Bar: • Drag an image thumbnail onto the page from the currently displayed album(s) shown in WebPlus's Media Bar (expand the Media Bar from the bottom of your workspace). You can also drag onto an existing image to replace it. To import an image from a file: 1. (Optional) If you want to place the image inline, click for an insertion point in a text object. For a detached image, make sure text objects are deselected. 2.
Images, Animation, and Multimedia 7. 183 To insert the image at its original pixel size, simply click the mouse. OR To set the size of the inserted image, drag out a region and release the mouse button. Use the Shift key for unconstrained placement (normal operation is to maintain the image's aspect ratio). For multi-image pasting, select multiple images in the Open dialog, then paste each image one by one onto the page (by consecutive clicks).
184 Images, Animation, and Multimedia • To reposition a cropped image inside its "frame," click click and drag on the image. • To rotate an image in 90° anti-clockwise increments, click the button. • To zoom in or out of an image, click one of the tools. • To replace an image, click click Open. , and then zoom in/out , then browse to locate the new image and To alter frame properties: 1. Right-click on a cropped image and choose Frame Properties....
Images, Animation, and Multimedia 185 Linking inserts a copy of the image file into the WebPlus Web site, linked to the actual file so that any changes you later make to it in the native application will be automatically reflected in WebPlus. Linking is one way of avoiding "bloat" by limiting the size of the project file. On the other hand, you'll need to manage the externally linked files carefully, for example making sure to include them all if you move the WebPlus file to a different drive.
186 Images, Animation, and Multimedia The Media Bar can be used as a temporary storage area before placing photos in your Web site, or it can be used to create more permanent photo albums from which you can retrieve stored photos at any time. By default, photos are added to a temporary album but remember to click the New Album button if you want to save your album for later use.
Images, Animation, and Multimedia 187 To view the Media Bar: • Unless already displayed, click the your workspace. handle at the bottom of To add photos to a temporary album: 1. With the Media Bar visible and a temporary album loaded, click on the Media Bar's workspace to reveal an Import Picture dialog. 2.
188 Images, Animation, and Multimedia To include a temporary album's photos in an existing saved album, click the Add To button and choose a named album from the menu. To create a named album: button. 1. Click the bar's 2. In the dialog, in the Album Name box, type a name to identify your album in the future. 3. Click the 4.
Images, Animation, and Multimedia 189 Adding photos to the page To add a photo to your page: 1. Display the Media Bar's temporary album or load a saved album from the top-right drop-down menu. 2. Drag an album's photo thumbnail onto the page and release your mouse button.
190 • Images, Animation, and Multimedia Use the Image Export Options... (Format menu) or the Image Export Manager (Tools menu) to set the export format of particular images on a case-by-case basis. OR Convert certain images to a specific format beforehand using the Tools>Convert to Picture. This combination of global and local settings gives you almost total control (if you care to exercise it) over how your graphics make it onto your Web pages! Let's look first at how the global settings work.
Images, Animation, and Multimedia 191 Setting export options, title, and alternative text for individual graphics The Image Export Manager is a Wizard that lets you set the export file format for individual graphics in the site, or for objects such as rotated text that will be converted to images on export. These local, image-by-image settings override the global settings (as set in File>Site Properties) which WebPlus uses to determine the export format.
192 Images, Animation, and Multimedia 2. (Only if you're using the Image Export Manager) Select whether you are checking a selected object, current page or entire site in the Wizard, then click Finish. The Wizard cycles through graphics in the specified range, and displays each one in turn along with the Image Export Options dialog. 3. In the dialog's Save Picture As section, you can choose to enable either: • Save to a format and name chosen by WebPlus.
Images, Animation, and Multimedia 193 6. To enter a title for a graphic, view the Alt and Title tab, and enter the appropriate text. This is shown when hovering over an exported image. 7. In the same tab, assign an ALT text string to your image for Web accessibility. The string is read out by screen reader on hover over. You can assign text by entry into the input box or you can check Use default ALT text instead. For the latter, the image is exported as follows: 8.
194 Images, Animation, and Multimedia Adjustments can be applied to imported pictures as well as objects converted to pictures within WebPlus. If you're looking to carry our some more advanced photo editing and have Serif's PhotoPlus software (10.0 or above) installed, you can use the Edit in PhotoPlus.A button on the Picture context toolbar to load the image directly into PhotoPlus.
Images, Animation, and Multimedia 195 Adjustments are applied such that the most recently added adjustment always appears at the bottom of the list and is applied to the picture last (after the other adjustments above it). In the above example, the Diffuse Glow effect is applied to the picture first, followed by Levels. To add an image adjustment: 1. Select the picture that you want to apply an adjustment to. 2. Click the 3. In the Image Adjustments dialog, click 4.
196 Images, Animation, and Multimedia Modifying adjustments The properties of any selected adjustment can be changed in one of two ways: • Properties will be displayed alongside the adjustment appearing in the stack (in Image Adjustments dialog)—you can alter and experiment with these.
Images, Animation, and Multimedia 197 To select a different TWAIN source for scanning: 1. Choose Picture from the Insert menu, then select TWAIN then Select Source from the submenus. 2. Identify the device you want to use as your TWAIN source. Adding animation WebPlus lets you add several varieties of eye-catching animation effects to any web page: animated marquees, GIF animations, and Flash (.SWF) files. For any of the animation effects, you can preview the animation and/or customize the effect.
198 Images, Animation, and Multimedia To edit an animated marquee you've already defined: • Double-click the marquee. The Insert Animated Marquee dialog redisplays, with the current settings in place. GIF animations WebPlus lets you select and preview any animated GIF.
Images, Animation, and Multimedia 199 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.
200 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 project. 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.
Images, Animation, and Multimedia 201 banner is referenced in the parameters list, e.g. for "3 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...
202 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 (.mid, .midi), .MP3, RealAudio (.ra, .ram), and .WAV. Video • Linked video works like linked sound. Supported video formats are .
Images, Animation, and Multimedia 203 With both background and linked sound (or video), you have the option of embedding the source file in your project file, as opposed to keeping it separate (remember that YouTube videos cannot be embedded in your project). Although embedding any file adds to the size of the project, it is the default option because you'll no longer have to worry about juggling separate files or the chance of accidentally deleting one of them.
204 Images, Animation, and Multimedia • From a picture: You select an external picture file, which WebPlus then imports and links to the media file. • Inline: A media "player" will be visible on your published Web page (rather than appearing after the user clicks a link, icon, or picture). In WebPlus, you'll see a marker on the page where the player will appear. With the first two options, the media file remains external and can't be embedded in your project.
Images, Animation, and Multimedia 205 Some Web sites may require their YouTube video(s) to be swapped for another on an occasional or more regular basis. For example, the site may host a regularly changing top 10 or videos with topical content. Either way, WebPlus can replace videos without affecting their placement. To swap your YouTube video for another, double-click an existing YouTube video. From the dialog, paste a previously copied video URL into the input box.
206 Images, Animation, and Multimedia • thumbnail rollovers (scrollable; with/without reflections) • vertical thumbnails (scrollable; with/without slide-ins) • photo grid (scrollable; with slide-ins) • photo stack (below) Photos can be imported by file or folder, or from a TWAIN device (digital camera/scanner). Once arranged in a gallery structure the photo's thumbnails can be manipulated in a variety of ways. It's possible to: • Reorder by drag and drop, or using arrangement buttons.
Images, Animation, and Multimedia 207 Creating the Gallery The Photo Gallery is inserted on the page, just like an individual image, after collecting your images together from file, folder, camera, or scanner. All the images are output as JPGs regardless of the original image type and the settings in File>Site Properties>Graphics. To insert a Photo Gallery: 1. Insert Flash Photo Gallery button on the Standard Objects Click the toolbar's Picture flyout. 2.
208 Images, Animation, and Multimedia Large images are automatically scaled down (to 800 x 600 pixels; 96dpi) to reduce file sizes (and improve upload times). 3. (Optional) Select one or more gallery thumbnail for manipulation, i.e. • Reorder the thumbnails by drag and drop. OR Up, Down, Use the in the Arrangement box. Top and Bottom buttons • Rotate the selected image in 90° clockwise intervals with multiple clicks of the Rotate button.
Images, Animation, and Multimedia 209 The last three options only show if background music is used. 7. (Optional) For the selected style, use the Settings pane to modify various gallery-wide options (accompanying background music, font colour, AutoPlay, etc.). Some options are specific to a gallery style such as enabling/disabling thumbnail rollovers, number of thumbnails shown, photos per stack, etc. Blur amount controls how much blurring occurs between photos.
210 Images, Animation, and Multimedia To edit a Photo Gallery: 1. Select a gallery already present on your Web page. 2. Double-click the gallery. OR Click the Edit Gallery button from the context toolbar. OR Right-click the gallery and choose Edit Photo Gallery.... The Flash Photo Gallery dialog is displayed. The options available are the same as those available when the gallery was created. Once a gallery is placed on the page it's also possible to drag a corner of the gallery object to resize.
Colour, Fills, and Transparency 10
212 Colour, Fills, and Transparency
Colour, Fills, and Transparency 213 Applying solid colours WebPlus offers a number of ways to apply solid colours to objects of different kinds: • You can apply solid colours to an object's line or fill. As you might expect, QuickShapes and closed shapes (see Drawing and editing shapes on p. 165) have both line and fill properties, whereas straight and freehand lines have only a line property.
214 Colour, Fills, and Transparency To apply a solid colour via the Swatches tab: 1. Select the object(s) or highlight a range of text. 2. Click the Swatches tab. 3. Click the Fill or Line, or Text button at the top of the tab to determine where colour will be applied. 4. Select a colour swatch from the Publication Palette (commonly used colours and those previously applied in your site) or Palette (standard RGB or themed palette presets such as WebSafe colours). Alternatively, use Format>Fill...
Colour, Fills, and Transparency 215 Using colour schemes Each WebPlus site uses a global colour scheme which you can manage using the Scheme Manager. Each scheme has a name and consists of five complementary basic colours which you can apply to any design element. (These work like a paint-by-numbers system, as explained below.) In addition, each scheme includes adjunct colours which apply specifically to hyperlinks (default, followed, active, rollover), off-page window backgrounds, and onpage colours.
216 Colour, Fills, and Transparency To select a colour scheme: 1. Display the Swatches tab. The five colours in the current scheme appear as numbered samples, from 1 to 5, at the bottom of the tab. (You'll also see additional samples labelled H (Hyperlink), F (Followed Hyperlink), A (Active Hyperlink), R (Rollover Hyperlink), B (Background) and O (Onpage colour.) 2. button on the default context toolbar (or Click the choose Tools>Scheme Manager...
Colour, Fills, and Transparency 217 • The Background colour (labelled B) applies to the off-page background outside your Web page dimensions if the user resizes the browser's window to be larger than the Web page dimensions. This can be either a solid colour or picture. : • The On-page colour (labelled O), is used to fill the page's background.
218 Colour, Fills, and Transparency To assign a scheme colour to an object: 1. Select the object and choose a Fill, Line, or Text button at the top of the Swatches tab depending on the desired effect. 2. From the bottom of the Swatches tab, click on a scheme colour (numbered 1 to 5) that you want to apply to the fill, line and text (or you can drag the colour instead).
Colour, Fills, and Transparency 219 6. For an on-page colour, i.e. a schemed page background, select from the On-page colour drop-down menu. 7. To store the modified scheme in the Schemes Manager, click Save Scheme.... Leave the name unaltered to overwrite the existing scheme. 8. To apply the scheme to the current Web site, click OK. To create a new scheme, you can follow the above procedure but, at Step 7, enter a new scheme name instead of overwriting the existing scheme.
220 Colour, Fills, and Transparency Applying a gradient or bitmap fill The easiest way to apply a gradient or bitmap fill is to use one of a range of pre-supplied swatch thumbnails in the Swatches tab's Gradient or Bitmap palettes. The Fill Tool and a Fill dialog are alternative methods for creating gradient fills (these are covered in online Help). To apply a gradient or bitmap fill using the Swatches tab: 1. Click the Swatches tab and ensure the Fill button is selected.
Colour, Fills, and Transparency 221 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.
222 Colour, Fills, and Transparency You can apply gradient and bitmap transparency from the Transparency tab to shapes, text frames, table cells, and to any artistic, creative frame text, and creative table text (but not to HTML frame text or HTML table text). Alternatively, using the Transparency Tool from the Tools toolbar's Fill flyout (or from Format>Transparency), you can vary the transparency's path on an object for different effects. To apply transparency with Transparency tab: 1.
Adding Hyperlinks and Interactivity 11
224 Adding Hyperlinks and Interactivity
Adding Hyperlinks and Interactivity 225 Adding hyperlinks and anchors Hyperlinking an object such as a box, some text, or a picture means that a visitor to your Web site can click on the object to trigger an event.
226 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. You can also simply click for an insertion point in text. If you select in—or immediately before/after—a word, then the whole word will be hyperlinked. If your selection point has a space on both sides, WebPlus inserts helpful text (for example, the name of the target page). 2. Click the Hyperlink button on the Tools toolbar.
Adding Hyperlinks and Interactivity 227 • Named Window: A custom window can be defined by entering a new window name in the right-most drop-down menu. Its properties (dimensions, position, and navigation bar usage) can be defined via the Settings... button (check Use JavaScript popup code first). You can also adopt an existing named window from the same drop-down menu. • Document Frame: The link destination is shown in a previously created frame (using the Framed Document Tool). The HTML ID (e.g.
228 Adding Hyperlinks and Interactivity To view or edit existing hyperlinks: • Choose Site Manager>Hyperlink Manager... on the Tools menu to view and manage site-wide hyperlinks. 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.
Adding Hyperlinks and Interactivity 229 Adding hotspots to a page A hotspot is a transparent hyperlink region on a Web page. Usually placed on top of graphics, hotspots act like "buttons" that respond when clicked in a Web browser. They are especially useful if you want the visitor to be able to click on different parts of a picture (such as a graphic "menu" or map of your site). You can draw and edit hotspots by hand, or create them to match an existing shape.
230 Adding Hyperlinks and Interactivity The Hyperlinks dialog appears with the current hotspot link target shown. • To modify the hyperlink, select a new link destination type and/or target. • To remove the hyperlink, change the link destination to No Hyperlink. Editing hotspots You can move and resize hotspots on the page, just like other objects. A selected hotspot has both an outer bounding box and an inner outline, which serve different purposes.
Adding Hyperlinks and Interactivity 231 To create an extra node on a hotspot: • Click anywhere along the hotspot's outline when you see the cursor. To change the shape of a hotspot's outline: • Click and drag a node when you see the cursor. Adding rollovers The term rollover refers to an interaction between a mouse and a screen object. For example, you can point your mouse at a graphic (such as a navigation bar button) on a Web page, and see it instantly change colour or become a different picture.
232 Adding Hyperlinks and Interactivity • Normal is the "resting" state of the graphic before any rollover, and is always defined. • Over is the state triggered by a mouseover— when the mouse pointer is directly over the object. For example, a button's text might change colour, or an outline appear, to show the button is "alive." Prior to a mouse click (see Down), moving the pointer in and out of the graphic's area will alternate between Over and Normal.
Adding Hyperlinks and Interactivity 233 3. Specify which rollover states (see above) you want to activate for each graphic by checking boxes in the Rollover Graphic dialog. For each one, use the Browse button to locate the corresponding source image and specify Export Options for that image (see Setting image export options on p. 189). 4. Check Embed files in site if you want to incorporate the image(s) in the WebPlus file. (For details, see Embedding vs. linking on p. 184.) 5.
234 Adding Hyperlinks and Interactivity Creating variant source images For each object with at least one activated rollover state, you'll need to provide a source image. It's the often subtle differences between the Normal image and the "variants" that make the object appear to switch from one state to another. For example, if you've checked the "Over" state for an object, you need to include a variant image that the Web page can display when the button is moused over.
Adding Hyperlinks and Interactivity • 235 When assigning the source images, you'll need to choose between linking and embedding. As long as a source image is linked (not embedded), WebPlus will always use the latest version of a file. So as a rule, until you're truly sure your source images are final, you may wish to uncheck the "Embed files" box so that linked images will be used. You can easily repeat the assignment process, using embedding instead, once the source images are final.
236 Adding Hyperlinks and Interactivity With respect to states, WebPlus provides two basic choices: • Normal is the "resting" state of the image before any rollover, and is always defined. A thumbnail can be used but numbered or bullet icons could also be used, perhaps identifying pictures as part of a catalogue, quiz, etc.
Adding Hyperlinks and Interactivity 237 Positioning is carried out from a dedicated dialog, where each state image can be moved and resized by dragging (or by setting absolute pixel values). Each image adopts a coloured border—green for Normal state, blue for Over state. The dialog additionally shows any previous popup rollovers in its preview window, and offers previously used Left, Top, Width, and Height values for easy alignment with the existing popup rollovers. To position rollover images: 1.
238 Adding Hyperlinks and Interactivity By building up additional Normal images as separate popup rollovers on your Web page you can create a stylish popup gallery of images, with each Normal image being part of a sequence of clickable thumbnails. To edit a popup rollover: • Double-click the Normal image on the page, to display the Rollover Graphic dialog. Modify settings as appropriate. To add captioning to Over images: 1. In the Rollover Graphic dialog, check Display caption with Over image. 2.
Adding Hyperlinks and Interactivity 239 You can easily install navigation elements at any level of your site, reconfigure them to link to a particular part of the site, change the appearance of the popup menu, and exclude particular pages from navigation as needed. When you define a navigation element, you use standard terminology like "Parent Level" or "Previous/Next" to specify which part of the site should be linked to, relative to the starting page—i.e. which buttons should be included.
240 Adding Hyperlinks and Interactivity To add a navigation bar: 1. Click the Insert Navigation Bar button on the Web Objects toolbar's Navigation flyout , or choose Navigation Bar... from the Insert menu. 2. On the dialog's Theme Set tab, choose a Horizontal or Vertical orientation and select a theme for the navbar. 3. Customize the Navigation Type and Popup Menu Properties (see steps 2 and 3 of To configure a navigation bar). 4. Click OK.
Adding Hyperlinks and Interactivity 3. 241 On the dialog's Navigation Type tab: • Select which buttons should be included in the navbar: Top Level, Parent Level, Same Level, Child Level, Home, Previous and Next, Previous, Next, Up, Breadcrumb, Anchors, Back or Custom. • Depending on the main selection, you can opt to include the Home page, parent page, anchors and/or Hide current page.
242 Adding Hyperlinks and Interactivity Included pages show a mark in their page entry in the Site tab's Site Structure tree, while excluded pages lack the mark. To exclude a page from navigation: • On the Studio's Site tab, right-click the page in the Site Structure tree and choose Page Properties.... Below the tree, uncheck Include in Navigation. The setting is also available in the Page Properties dialog (Page tab).
Adding Hyperlinks and Interactivity 243 Adding navigation site maps WebPlus lets you add a navigation site map to your Web site. This useful feature enhances Web site accessibility by providing clickable links to all sections of your site. You may like to create your site map on a Web page which is included in your Web site's Navigation Bar. This allows site map access from all Web pages. To add a navigation site map: Site Map Tool on the Web Objects toolbar's Navigation 1. Click the flyout. 2.
244 3. Adding Hyperlinks and Interactivity In the Columns section, select the number of columns you want your site map to display. If you select a multi-column site map, you can also set the column margin width, and choose to keep second and third-level items with their respective top-level items (if you do not select this option, some item lists may be split across columns). 4.
12 Adding Dynamic Content 12
246 Adding Dynamic Content
Adding Dynamic Content 247 Creating HTML pages HTML code is the underlying tagged code which your Web site visitor's Internet browser reads, interprets and formats your page according to the tags used. The code and tags used are the instructions to which a page will be formatted, and as such it is vital that the code is correctly structured and conforms to HTML convention. WebPlus supports the development of web pages in HTML.
248 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
