How to Contact Us Our main office (UK, Europe): The Software Centre PO Box 2000, Nottingham, NG11 7GW, UK Main: (0115) 914 2000 Registration (UK only): (0800) 376 1989 Sales (UK only): (0800) 376 7070 Customer Service/ Technical Support: www.serif.
This User Guide, and the software described in it, is furnished under an end user License Agreement, which is included with the product. The agreement specifies the permitted and prohibited uses. Portions images ©1997-2002 Nova Development Corporation; ©1995 Expressions Computer Software; ©1996-98 CreatiCom, Inc.; ©1996 Cliptoart; ©1997 Multimedia Agency Corporation; ©1997-98 Seattle Support Group. Rights of all parties reserved. Digital Images ©2008 Hemera Technologies Inc. All Rights Reserved.
TrueType font samples from Serif FontPacks © Serif (Europe) Ltd. Microsoft, Windows, and the Windows logo are registered trademarks of Microsoft Corporation. All other trademarks acknowledged. WebPlus is a registered trademark of Serif (Europe) Ltd. © 2010 Serif (Europe) Ltd. All rights reserved. No part of this User Guide may be reproduced in any form without the express written permission of Serif (Europe) Ltd. Serif WebPlus Essentials © 2010 Serif (Europe) Ltd.
Contents Contents 1. Welcome .......................................................... 1 Welcome! .................................................................................. 3 Key features .............................................................................. 4 Installation ............................................................................... 12 2. Getting Started ............................................... 15 Startup Wizard ...................................................
Contents 4. Working with Text........................................... 73 Importing text from a file ..........................................................75 Understanding text frames .......................................................76 Using artistic text......................................................................84 Putting text on a path ...............................................................86 Editing text on the page .........................................................
Contents Attaching objects to text ........................................................ 133 Creating groups..................................................................... 136 Updating and saving defaults ................................................ 137 8. Lines, Shapes, and Effects ........................... 141 Drawing and editing lines ...................................................... 143 Setting line properties ...........................................................
Contents 10. Color, Fills, and Transparency ..................... 207 Applying solid colors ..............................................................209 Using color schemes..............................................................211 Working with gradient and bitmap fills....................................215 Setting transparency ..............................................................217 11. Adding Hyperlinks and Interactivity .............. 221 Adding hyperlinks and anchors .............
1 Welcome
2 Welcome
Welcome 3 Welcome! Welcome to WebPlus Essentials from Serif—the easy way to get your family, club, organization, or small business on the web! To make life so much easier, WebPlus comes with an impressive selection of design templates, page navigation bars, creative gallery content, and styles for you to use.
4 Welcome Key features Before you get started with WebPlus, we recommend you take the opportunity to familiarize yourself with WebPlus key features and capabilities. Layout • Multipage Design Templates Make "tailored" websites based on a chosen look and color scheme in an instant—choose design templates from Interest, Personal, Community & Education, and Home Business categories, all packed with royalty free images for you to use.
Welcome 5 • Exciting Navigation Bars Use navigation bars for site-wide page navigation. Flexible and user configurable, with a host of different design styles to choose from— share styles for a common look between navigation bars. You can also include forum and blog articles in dynamically changing navigation bar submenus. Navigation Manager controls all navigation bars from one point. Add separators between submenu items.
6 Welcome • RSS—News and Information Feeds on your page Keep your web visitors up to date with the latest news from your favorite websites (BBC News, Reuters, FTSE, NASDAQ) with the RSS Reader Tool. Alternatively, be a news anchor yourself by creating your own RSS feed directly on your page—the RSS Feed Tool sets up feeds, headlines, summaries and URL links.
Welcome • Quick Publish Upload and view a currently displayed page—great for live verification of individual pages as you build your website. • Dynamic guides Align and resize objects with each other using dynamic guide snapping, without the need for ruler guides or precise object transforms. 7 Pictures • Import Pictures Import commonly-used standard file formats, including all the latest RAW digital camera formats, Photoshop files, Microsoft HD Photo, and Serif SMF files.
8 Welcome • Quick-and-easy Image Cutouts Image Cutout Studio makes light work of cutting out your placed pictures, directly in WebPlus. Use brushes to discard uniform backgrounds (sky, walls, etc.) or keep subjects of interest (people, objects, etc.). • A versatile Metafile Format Import and Export Serif Metafiles (.smf), a proprietary image format with improvements to the Windows Metafile format (WMF).
Welcome 9 • Ready-to-use Styles Choose various filter effects, glows, shadows, textures, and materials from the Styles tab. Customize the preset styles or store your own! • Photo-based borders Exciting new ready-to-go borders can be applied around text frames, tables and pictures alike. Create and save custom borders from your own electronic border designs or scanned picture frames! The Gallery tab's Picture frames have the same borders already applied.
10 Welcome • Instant 3D with On-screen Transforms Transform 3D objects in-situ with 3D editing from a context toolbar. Apply multi-colored lighting effects (with directional control), along with custom bevel and lathe effect profiles to create your very own unique contours. Hardware-accelerated rendering boosts redraw performance (hardware dependent).
Welcome 11 • Tables and Calendars Choose from a range of preset formats or design your own table. Use the convenient Table context toolbar to sort data, format cells, and choose from a wide range of functions for spreadsheet calculations (use absolute cell references).
12 Welcome Installation System Requirements Minimum: • Pentium PC with DVD/CD drive and mouse • Microsoft Windows® XP (32 bit), Windows® Vista, or Windows® 7 operating system • 512MB RAM • 510MB free hard disk space • 1024 x 600 monitor resolution • Internet Explorer 5.5 (6.0 or above for Smart object use) Additional disk resources and memory are required when editing large and/or complex images.
Welcome 13 First-time install To install WebPlus, simply insert the Program CD into your DVD/CD drive. The AutoRun feature automatically starts the Setup process. Just answer the onscreen questions to install the program. Re-install To re-install the software or to change the installation at a later date, select Settings/Control Panel from the Windows Start menu and then click on the Add/Remove Programs icon.
14 Welcome
2 Getting Started
16 Getting Started
Getting Started 17 Startup Wizard Once WebPlus has been installed, you'll be ready to start. Setup adds a Serif WebPlus Essentials item to the (All) Programs submenu of the Windows Start menu. • Use the Windows Start button to pop up the Start Menu, click on All Programs and then click the WebPlus item. The Startup Wizard presents several choices: The options are self explanatory, where site creation can be made from scratch or from a pre-supplied design template.
18 Getting Started • WebPlus hosting, to host your published WebPlus site with Serif. • Learning Zone, to access videos, tutorials, support information, and more. Use the Choose Workspace drop-down menu to choose your workspace appearance (i.e., Studio tab positions, tab sizes, and show/hide tab status). You can adopt the default workspace profile , the last used profile , a range of profile presets, or a workspace profile you have previously saved.
Getting Started 19 Design templates come in two types—theme layouts, where you pick your own pictures, or ready-to-go templates which are already populated with pictures. Theme layouts These offer a choice of themes (e.g., Arctic) on which to base your site; you'll get picture placeholders instead of actual pictures. Simply add your own pictures to placeholders and personalize placeholder text, then publish.
20 Getting Started 3. From the dialog, select a theme or template design from the main pane. Templates are grouped into subject-based categories; use the scroll bar or collapse a category to reveal more options (click the button next to the category name). The right-hand pane refreshes to display thumbnails of that template's available pages. 4. From the right-hand pane, decide which pages you wish to be part of your site.
Getting Started 21 The site opens to the first (Home) page, with the Studio's Site tab displayed on the right, showing the various pages that comprise the site in its Site Structure tree. As each template is color schemed, you can swap the underlying scheme, and the site's appearance, for another scheme at any time! Notes Some templates contain Smart objects (see p. 267) such as newsletter sign ups and polls.
22 Getting Started To help you quickly build a site from scratch, WebPlus offers the QuickBuilder Bar. The tab hosts commonly used objects and features which can be introduced onto your web page by drag-and-drop, avoiding the need to initially understand the range of WebPlus toolbars. Opening an existing site You can open an existing WebPlus site from the Startup Wizard, via the Standard toolbar, or via the File menu. To open an existing WebPlus site (Startup Wizard): 1.
Getting Started 23 Font substitution WebPlus supports automatic font substitution as you open a WebPlus site which has fonts which are not stored on your computer. The dialog that shows also lets you manually substitute a missing font if necessary. See online Help for more details. Working with more than one site If you have multiple websites open at the same time it's easy to jump between them using different methods. Click on a Window tab at the top of the workspace to make it active (e.g., Design657.
24 Getting Started
3 Developing Sites and Pages
26 Developing Sites and Pages
Developing Sites and Pages 27 Understanding site structure and navigation Unlike a printed publication, a website doesn't depend on a linear page sequence. When designing a site, it makes more sense to think of the site in spatial terms, with a structure like that of a museum which people will explore. You can generally assume that your visitors will come in through the "front door" (the Home page)—but where they go after that depends on the links you've provided.
28 Developing Sites and Pages In WebPlus, the Site Structure tree (in the Site tab) provides a visual aid that lets you organize the content on your site into sections and levels—in other words as a hierarchy of parent pages branching to child pages. Here's how the same structure might appear in the WebPlus Site Structure tree: The Site Structure tree makes it easy to visualize relationships between pages and lay out your site in a way that makes sense for the content you have to offer.
Developing Sites and Pages 29 Navigation In WebPlus, adding navigation between your web pages is easy with navigation bars, each pre-programmed to understand your site structure, making it easy to design a site that's simple to navigate. You simply select one from the Web Objects toolbar and WebPlus does the rest! For example, here's a navigation bar we selected for the site shown in the main tree above.
30 Developing Sites and Pages shared by multiple pages, as illustrated below. By placing a design element on a master page and then assigning several pages to use that master page, you ensure that all the pages incorporate that element. Of course, each individual page can have its own elements.
Developing Sites and Pages 31 Viewing pages The WebPlus workspace consists of a "page" area and a surrounding "pasteboard" area. The page area is where you put the text, graphics, and other elements that you want to appear on your final web page. The pasteboard is where you generally keep elements that are being prepared or waiting to be positioned on the page area.
32 Developing Sites and Pages and pasteboard with respect to the main window. The view automatically recenters itself as you drag objects to the edge of the screen. Pan Tool as an The View toolbar at the top of the screen provides the alternative way of moving around, plus a number of buttons that let you zoom in and out so you can inspect and/or edit the page at different levels of detail. If you're using a wheel mouse, spinning the wheel scrolls vertically.
Developing Sites and Pages 33 An eye icon in the master page icon denotes the currently viewed page. This example shows a viewed (but unselected) master page. To view a specific page/master page: Several methods can be used to view a page: • On the Hintline, use the Hintline's page navigation buttons. OR Click the entry for the page or master page in the Page Locator list. • On the Studio's Site tab, double-click the entry for the page (or master page) you want to view.
34 Developing Sites and Pages • Double-click the icon for the master page you want to view. To switch between the current page and master page: • Click the Page/Master Page button on the Hintline. As a shortcut to view the site's Home page: • Click the Home Page button on the Hintline.
Developing Sites and Pages 35 To add a new blank page: 1. Click the down arrow on the Add button directly above the Site tab's Pages window. From the drop-down menu, choose New Blank Page. 2. In the New Page Properties dialog, specify options for the new page in the Appearance tab (see Setting page properties on p. 57) as well as options only available via this dialog: • Duplicate the design elements from an existing web page. Check Copy objects from page and select the page in the activated list.
36 Developing Sites and Pages 3. From the Add New Page from Template... dialog, select a template from the left-hand pane, and check the page for addition (check further pages for inclusion if needed). 4. WebPlus lets you control if an associated master page is copied with the page. Pick from the top-left drop-down menu choosing one of: 5. • Copy Master Page. To always copy the master page into your site. • Compare and Copy Master Page.
Developing Sites and Pages 37 2. Click the down arrow on the Add button directly above the Pages window. From the drop-down menu, choose New Offsite Link.... 3. In the dialog, type a Menu name to identify the offsite link in the Site Structure tree (the equivalent of its page name). 4. Click to select the link destination type, and enter the specific offsite hyperlink target (see Selecting a hyperlink target on p. 223), and the window in which you want the target to appear.
38 Developing Sites and Pages To clone a page: • In the Studio's Site tab, right-click on a selected page and choose Clone Page. An identical copy is inserted below the selected page. To delete a page or master page: 1. On the Studio's Site tab, select the page (or master page) to delete by clicking its entry. 2. Click the the page.
Developing Sites and Pages 3. 39 (Using drag-and-drop) Drag the page entry up or down and drop it at a new position in the tree. Watch the cursor for feedback on the new position relative to that of the page just below the cursor: moves the page to the same level as, and following, the highlighted target page. makes the page a child of the highlighted target page.
40 Developing Sites and Pages To assign multiple master pages to a web page: 1. From the Site tab, select the page which will have multiple master pages. 2. In the Master Pages tab, click the Add button. 3. From the dialog's drop-down menu, select the additional already created master page, and click OK. Your additional master page is added to the tab (below) and the web page will be using the page elements of the newly assigned master page.
Developing Sites and Pages 41 To reorder the page content and master pages: • Select the entry in the tab and click the Up or Down button. To temporarily hide a master page, uncheck its entry in the tab. To unassign a master page: • Select the entry in the tab and click the Remove button. Adding navigation bars In WebPlus, navigation bars are programmed to understand your site structure, making it easy to design a site that's simple to navigate.
42 Developing Sites and Pages Navigation types WebPlus offers various types of navigation bars depending on the level of functionality and design you're looking for in your navigation bar. All navigation bars are JavaScript-based, and belong to three types: Navigation bar types Use for: Basic (JavaScript) Text-based1 navigation bars without backgrounds. Designer (JavaScript) Text-based1 navigation bars with button and bar backgrounds.
Developing Sites and Pages 3. 43 From the dialog's Type tab, a default gallery of navigation bars appears. For a different navigation type, select from the upper-right Type drop-down menu. The Navigation bar gallery lets you select a navigation bar of that type, e.g. 4.
44 Developing Sites and Pages When including anchors in navigation bars, you'll be able to navigate between various sections of long pages or to repeating areas as menu options. At any time the navigation bar can be edited, either to adjust the navigation type, its options or style. To edit a navigation bar: 1. Double-click the navigation bar (or right-click it and choose Edit Navigation Bar...). 2. Change settings available from the Navigation Type, Options, and Style tabs.
Developing Sites and Pages 45 navigation bars by creating a custom navigation tree—you can also add, edit, or delete elements which will access a range of link destination types (see Adding hyperlinks and anchors on p. 223) just as in Site tab's Site Structure. Once you're working with a custom navigation tree, the navigation bar will no longer automatically update when new pages are added to your site. If you still want this to happen, you'll have to base your bar on the site's Site Structure.
46 Developing Sites and Pages Alternatively, you can use the Copy... button to copy the navigation tree used in a navigation bar already in your site. This will replace the current tree. Using navigation bar styles When you create or edit a navigation bar, you may wish to keep the bar's navigation type and structure the same, but customize its look and feel. The edited style can be overwritten or copied to a new style.
Developing Sites and Pages 47 Including/excluding pages in navigation By default, all pages in the tree are included in navigation—that is, they can be linked to by navigation bars. You can exclude certain pages (any but the Home page) so they'll be ignored by navigation bars. For example, suppose you had a section of reference or archival pages that you didn't want visitors to explore top-down. Excluding the parent page for that section would remove it from the navigation bar.
48 Developing Sites and Pages Using dynamic navigation bars Up to now, we've assumed that navigation bars are based on your site structure and show static pages as menu items. However, for more dynamic navigation bars, you can populate your navigation bar submenus with ever-changing forum and blog article titles—simply click a title to view the relevant article. We'll assume you're using an offsite link to connect to your forum and blog, and that the offsite link is included in navigation.
Developing Sites and Pages 49 Choose Site Manager>Navigation Manager... from the Tools menu. The Site Manager is launched with Navigation Manager shown by default. The Manager displays the bar's page location, names, its navigation tree, and style, listed by page number. To set the scope of entries displayed: • To display links or anchors throughout the site, select All Pages in the Page drop-down list.
50 Developing Sites and Pages Using layout aids Layout guides are visual guide lines that help you position layout elements, either "by eye" or with snapping turned on. When the snapping feature is turned on, objects you create, move, or resize will jump to align with nearby, visible layout guides. WebPlus provides a variety of layout guides to assist you: page margins, row/column guides and ruler guides.
Developing Sites and Pages 51 To show or hide layout guides: • Click or unclick Guide Lines on the View menu. This setting also affects any ruler guides you've placed on the page area. Creating ruler guides WebPlus lets you to set up horizontal and vertical ruler guides—lines you can use to align headlines, pictures, and other layout elements, but which won't appear in your published site.
52 Developing Sites and Pages • For precise ruler guide placement, check Ruler marks in Tools>Options>Layout to snap guides to ruler marks. • To unstick a selected object, click one of two small red triangular markers shown at the point where the object is attached to the guide. You'll see a link cursor ( ) as you hover over the sticky guide marker. Click red marker to make non-sticky • Markers become non-sticky and change to black; object and guide are unstuck and either can then be moved.
Developing Sites and Pages 53 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.
54 Developing Sites and Pages 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. When you click to select an object, blue ruler regions indicate the object's left, right, top, and bottom edges. Each region has a zero point relative to the object's upper left corner, so you can see the object's dimensions at a glance.
Developing Sites and Pages 55 Some site properties such as page and search-engine optimization settings are also mirrored on individual pages (via Page Properties; see p. 57). This lets you override or complement the "global" Site Properties, respectively, and apply "local" settings to specific pages. To view or change site property settings: • Choose Site Properties... from the File menu. The Site Properties dialog appears.
56 Developing Sites and Pages Serif Web Resources Scheme Matching Applies your site's color scheme to published Smart objects. Navigation Tree Specifies the script file used for tree control on navigation bars. Graphics Global image export options Applies default format and resampling settings when exporting graphics. HTML Output HTML Output and Default HTML IDs Control how your web pages are output by choosing from different encoding methods and controlling which HTML IDs are generated.
Developing Sites and Pages 57 Setting page size and alignment Default site property settings for Width and Height determine the dimensions of any new page or master page. A default site property setting for alignment (either Left or Centered) determines how page content lines up in a browser. One of the first things you may want to do, when creating a new site from scratch, is to check the default dimensions and adjust them if necessary.
58 Developing Sites and Pages The Site Manager offers a more powerful method of not just viewing but modifying the properties of multiple pages at the same time—simply check your chosen pages and alter one or more page properties. All checked pages will adopt the new settings. To view master page property settings: • Click the Master Page Manager button above the Master Pages window on the Site tab. The Master Page Manager appears.
Developing Sites and Pages 59 Width and Height Each master page always determines the size of pages that use it. For individual pages that don't use a master page you can set custom page dimensions. For pages using a master page, only the Height can be changed for the page. In the Master Page Manager (Properties button), you can override the site setting for a given master page. Background Master pages Assign one or more master pages to a specific page, or set a page to use no master page.
60 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 much more. Powerful features of Site Manager include: • The ability to control the scope and to manage an individual, a selection or all pages in your site equally.
Developing Sites and Pages 61 A quick summary gives an indication of what each management feature can do for you. Type of Management Lets you... Page/Master Page Properties Include pages in navigation (with separator control), assign master pages, set page alignment and size, rename pages, set a background, add sounds, optimize pages for search engines, and apply redirections, transitions, or access control.
62 Developing Sites and Pages Search engine optimization Indexing involves the automatic collection of information about your web pages by search engines such as Google, Yahoo!, Live Search, and many more. By "harvesting" this information at the search engine, search engine users can make use of this indexed information to obtain quick and accurate site search results which match the search criteria entered by the user.
Developing Sites and Pages 63 Whether you are using Meta tags, robots, or sitemaps independently or in combination, WebPlus makes configuration simple. As these settings can be established or modified for the whole site (Site Properties; Search Engine tab) any newly created page will adopt site's search engine settings. If you change the site settings, all web pages will update to the new settings automatically.
64 Developing Sites and Pages 3. In the top window, type in a brief description of your site. Although the description can be any length, the first ten words or so are the most important. 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.
Developing Sites and Pages 65 Excluding pages from indexing (Robots file) The objective of this method is the same as that for using a robots meta tag, but instead a robots.txt file is created and no robots meta tag is included in web pages. The robots.txt file is stored in the web site's root folder and can be viewed in any text editor to verify the excluded pages and folders. To enable a robots.txt file: 1. Choose Site Properties... from the File menu. 2.
66 Developing Sites and Pages One requirement of using search engine sitemaps is the need to declare an absolute URL. This allows the proper URL address (e.g., www.gizoo.com) to be indexed, allowing search engine users to link through to your site from their search results. To enable search engine sitemaps: 1. Choose Site Properties... from the File menu. 2. Check the Create search engine sitemap file option. 3. (Optional) When the above option is checked, the default sitemap.xml file can be renamed.
Developing Sites and Pages 67 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.
68 Developing Sites and Pages Designs can be added to any pre-supplied category; the My Designs category exists simply for ease of use when storing your own custom designs. To use a design from the Gallery: • Click its thumbnail in the design category and drag it out onto the page. The Gallery retains a copy of the design until you expressly delete it. To view your Gallery: 1. Click the Studio's Gallery tab. 2. Select a category from the drop-down menu.
Developing Sites and Pages 69 To move or copy an object into the Gallery: 1. Using the Categories drop-down menu, select a category into which you want to add the object. Scroll to reveal target sub-categories, expanding them if necessary. 2. Drag the object from the page and drop it onto the target category or sub-category design window (drag onto an empty sub-categories title bar to add). To copy, press the Ctrl key before starting to drag. A thumbnail of the design appears in the Designs window.
70 Developing Sites and Pages A more advanced Map feature is also available for more complex mapping requirements, including an unlimited number of markers and the ability to use HTML as your marker text. To add a simple Google map: Insert Google Map on the Web Objects toolbar's Media 1. Click flyout. 2. From the Configure Google Map dialog, enter your zip code, post code, or address in the Search for a location field.
Developing Sites and Pages • 71 To insert the map at the default size, simply click the mouse. OR To set the size of the map to better fit your page design, drag out a region and release the mouse button. At some point, you may want to move or delete a marker by editing the Google map. To edit your Google map markers: • Double-click the Google map on your page.
72 Developing Sites and Pages 3. Paste your copied key from the Google.com website into the dialog's Google Maps key text box. 4. To enter HTML code, type directly into the Label field. For more advanced coding, consider copying and pasting HTML code into the field which has been developed independently of the Google Maps dialog. 5. Click OK. To see your changes, you'll have to publish your site (see p. 291).
4 Working with Text
74 Working with Text
Working with Text 75 Importing text from a file Importing text from a word-processor file is a quick way to build up text content for your site (but you can also create a story using WritePlus). If you use your current word processor (such as Microsoft Word) to create the text files for your site, you can import any number of files into one site. As well as the WritePlus format (.stt), a range of popular word processing and text formats can be imported, including: ANSI text .txt Microsoft Word 2007 .
76 Working with Text To import text from a file: 1. (Optional) If using an existing empty text frame, select the frame. If inserting text into a populated text frame, click for an insertion point (or select a portion of text to be replaced). 2. Choose Text File... from the Insert menu. 3. From the Open dialog, select the format of the source file to be imported and locate the file itself. 4. Check the Retain Format box to retain the source file's formatting styles.
Working with Text 77 What's a text frame? A text frame is effectively a mini-page, with: • Margins and column guides to control text flow. • Optional preceding and following frames. • Text and optional inline images that flow through the frame (from the previous frame and on to the next). The text in a frame is called a story. • When you move a text frame, its story text moves with it. • When you resize a text frame, its story text reflows to the new dimensions.
78 Working with Text 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. (For details, see Editing text on the page on p. 88.) HTML or Creative frames Two types of frame can be added to the WebPlus page—the HTML text frame and the Creative text frame. They can be compared easily in the following table. HTML frames Creative frames Searchable by search engines (Google, etc.
Working with Text HTML-compliant Styles Transparency 1 Borders 1 Warp 1 2D/3D Filter Effects 1 Instant 3D 1 1 2 79 If applied, will export frame as a graphic. Only if rotate, crop, transparency, a border or a filter effect is not applied. The above table relates to the frame as an object, and not to text contained within. For text related information, see Setting text properties on p. 97.
80 Working with Text To delete a frame: • Select the frame and press the Delete key. (If there's a selection point in the text, pressing Delete will remove characters after the cursor.) You can select, move, and resize text frames just like other objects. (See p. 117, 121, and 122, respectively.) Putting text into a frame You can put text into an HTML or Creative frame in one of several ways. For HTML frames, text will be converted to compliant HTML code.
Working with Text 81 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. (A) Column Guides; (B) Margin Blinds To edit frame properties directly: • Select the frame, then drag column guide lines to adjust the boundaries of the column.
82 Working with Text To edit frame properties using a dialog: Frame Setup button on 1. Select the Creative frame and click the the Frame context toolbar. 2. From the dialog, you can change the Number of columns, Gap distance between columns, Left Margin, Right Margin, and enable/disable text wrapping around an object. 3. To change the column widths and blinds (top and bottom frame margins), click a cell in the table and enter a new value.
Working with Text 83 It's always a good idea to preview your HTML frames (via Preview in Window or via your browser)—especially if Overflow is selected. How a story flows through a sequence of Creative frames Stories cannot flow between HTML frames, as they do not support linking (text can only overflow a single frame). You can have just one Creative frame on its own, or you can have many frames.
84 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 • 85 Artistic text doesn't flow or link the way frame text does; the Frame context toolbar's text-fitting functions aren't applicable to artistic text. To create artistic text: 1. Artistic Text Tool from the Standard Objects Choose the toolbar's Text flyout. 2. Set initial text properties (font, style, etc.) as needed before typing, using the Text context toolbar, Text menu, or right-click (choose Text Format>). 3.
86 Working with Text You can also double-click to select a word. Now you can type new text, apply character and paragraph formatting, edit the text in WritePlus, apply proofing options, and so on. 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.
Working with Text 87 The text now flows along the specified path, e.g., for "Path - Top Circle." To add artistic text along an existing line or shape: 1. Create a freehand, straight, or curved line (see Drawing and editing lines on p. 144) or a shape (see Drawing and editing shapes on p. 148). 2. Choose the flyout. 3. Bring the cursor very close to the line. When the cursor changes to include a curve, click the mouse where you want the text to begin. 4. Begin typing at the insertion point.
88 Working with Text To create text and path at the same time: 1. Choose one of the Path Text tools from the Text flyout: The Freehand Path Text Tool lets you sketch a curved line in a freeform way. The Straight Path Text Tool is for drawing a straight line. The Curved Path Text Tool lets you join a series of line segments (which may be curved or straight) using "connect the dots" mouse clicks. 2. Create a line on the page.
Working with Text 89 Selecting and entering text The selection of frame text, artistic text, and table text follows the conventions of the most up-to-date word-processing tools. The selection area is shaded in semi-transparent blue for clear editing. Double-, triple-, or quadruple-click selects a word, paragraph or all text, respectively. You can also make use of the Ctrl-click or drag for selection of non-adjacent words, the Shift key for ranges of text. To edit text on the page: 1.
90 Working with Text 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. To repeat a text action: • Choose Repeat from the Edit menu, or press Ctrl+Y. For example, if you've applied new formatting to one paragraph, you can click in another paragraph and use the Repeat command to apply the same formatting there.
Working with Text 91 Setting paragraph indents When a text object is selected, markers on the horizontal ruler indicate the left indent, first line indent, and right indent of the current paragraph. You can adjust the markers to set paragraph indents, or use a dialog. (A) Left Indent; (B) 1st Line Indent; (C) Right Indent. • The Left indent is set in relation to the object's left margin. • The 1st line indent is in relation to the left indent.
92 Working with Text Working with Unicode text WebPlus fully supports Unicode, making it possible to incorporate foreign characters or special symbols. • To paste Unicode text from the Clipboard to the page, use Edit>Paste Special..., then select "Unformatted Unicode Text." • Insert Unicode characters directly into your text by typing your Unicode Hex value and pressing Alt+X. The Alt+X keyboard operation toggles between the displayed character (e.g., @) and its Hex value (e.g., U+0040) equivalent.
Working with Text 93 4. Select Match whole word only to match character sequences that have white space (space, tab character, etc.) or punctuation at each end, or which are at the start/end of a paragraph. Select Match case for case-sensitive search. Select Regular expressions to treat the contents of the Find box as an expression, rather than as a literal string to be found. 5. Click Find Next to locate the next instance of the Find text.
94 Working with Text
5 Formatting Text
96 Formatting Text
Formatting Text 97 Setting text properties WebPlus gives you a high degree of control over the fine points of typographic layout, whether you're working with frame text, table text, or artistic text. To apply basic text formatting: 1. Select the text. 2. Use buttons on the Text context toolbar to change text style, typeface, point size, attributes, paragraph alignment, or level. By default, text on your published web pages is set to vary in size depending on the visitor's browser setting.
98 Formatting Text Font assignment is very simple in WebPlus, and can be done from the Fonts tab, Text context toolbar, or in the Character dialog (via right-click, or from the Text menu). The Fonts tab lets you: • Apply fonts easily without dialog navigation. • Assign fonts to be Websafe or favorites. • View most recently used, Websafe, and your favorite fonts simultaneously. • Make a font rasterize on export or resolve its export in Site Checker. • Search for installed fonts via search box.
Formatting Text 99 Websafe fonts are a specially selected and configurable subset of fonts which offer the best font matches between your 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.
100 Formatting Text 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 Text 101 To apply a named style: 1. Using the Pointer Tool, click in a paragraph (if applying a paragraph style) or select a range of text (if applying a character style). If you apply a paragraph style, it will be applied to the whole paragraph regardless of the amount of text selected. If you've selected text in more than one paragraph, the change takes place in all selected paragraphs. 2. Display the Text Styles tab and select a style from the style list.
102 Formatting Text 4. Click Apply to update text, or click Close to maintain the style in the site for future use. Alternatively, choose Text Style Palette... from the Text menu to modify styles and to change text defaults (see p. 137). To delete one or more text styles: • Right-click a text style and select Delete
