and
tags, respectively. You can also insert annotation tokens into your HTML code (see Attaching HTML code on p.Setting up Sites and Pages 61 To Quick Publish the HTML page (for live checking): • Click Quick Publish to Web on the context toolbar to publish the current page via your default FTP account. To return to Design View: • Select Design View on the context toolbar. Viewing pages The WebPlus workspace consists of a "page" area and a surrounding "pasteboard" area. The page area (A) is where you put the text, graphics, and other elements that you want to appear on your final web page.
62 Setting Up Sites and Pages To move or copy an object between pages via the pasteboard: 1. Drag the object from the source page onto the pasteboard (hold down the Ctrl key to copy). 2. Display the target page (see Switching between pages below). 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.
Setting up Sites and Pages 63 A highlighted master page icon in the Site tab's upper window denotes the selected master page. An eye icon in the master page icon denotes the currently viewed page. This example shows a viewed as well as selected 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.
64 Setting Up Sites and Pages click tree entries if necessary to expand each branch). Then click the View Page button. For master pages: • On the Studio's Site tab, click the Master Pages> button to reveal a master page window. One or more master page icons will be displayed. • 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.
4 Navigation and Hyperlinks
66 Navigation and Hyperlinks
Navigation and Hyperlinks 67 Adding navigation bars In WebPlus, navigation bars are programmed to understand your site structure, making it easy to design a site that's simple to navigate. Navigation bars facilitate movement between the various sections and levels of a site (see p. 29), providing links to your Home page and other top-level section pages, while pop-up menus link to child pages within each section.
68 Navigation and Hyperlinks To help you understand this relationship between pages and these referenced levels, a visual clue is provided as you create your navigation bar (in each Navigation Type thumbnail). The dark rectangles show the page level to be used and the black dot (•), the page on which your navigation bar is placed. Top Level Same Level Child Level Previous and Next The icon designs are examples and do not represent the actually structure of your site.
Navigation and Hyperlinks 69 To add a navigation bar: 1. Select the page (or master page). 2. From the Web Objects toolbar's Insert Navigation Bar. 3. From the dialog's Type tab, browse navigation bar types in the Type drop-down list, expanding menu options if needed. Use the keyboard arrows for quick browsing! Navigation flyout, click In the adjacent preview window, hover over menu options to review the appearance of pop-up menus. 4. Select your chosen navigation type, e.g. Block 2. 5.
70 Navigation and Hyperlinks If choosing Site Structure, you can: 6. • Select which buttons should be included in the navigation bar: Top Level, Parent Level, Same Level, etc. • Depending on the main selection, you can opt to include the child page, anchors, home page, parent page, and/or Hide current page or disable links. • Enable a Naming relative links option if using relative links such as Home, Up, Previous and Next. With Use fixed names enabled, the relative names are shown, e.g.
Navigation and Hyperlinks • 71 Clicking Edit to create your own custom design, based on the currently selected button. You'll be able to change text font, size, and color, along with backgrounds in several button states See WebPlus Help for more information. 7. (Optional) From the Pop-Up Menus tab, choose designs as described for Appearance tab, but which relate to "child" pages in your site structure. 8. Click OK. The navigation bar appears on your page.
72 Navigation and Hyperlinks To customize a selected navigation bar: 1. Double-click the navigation bar. 2. From the Navigation Type tab, enable the Custom option. 3. Rearrange the order of the navigation bar items by drag and drop (or use the Move Up, Move Down, Make Child or Make Parent buttons). 4. Click Add Link to add a new link to the end of your custom navigation tree, typically to add a page you've subsequently added to your site.
Navigation and Hyperlinks 73 New bars can be created from any existing navigation bar in your site. Simply choose a navigation bar first. This may help you achieve the desired appearance more quickly. To display button, separator, and background settings: • From the Appearance tab, you can change or customize buttons, separators, and the background by selecting the navigation bar element from a selection box. The dialog options subsequently change according to what navigation bar element is selected.
74 Navigation and Hyperlinks 3. (Optional) Adjust Separation and Alignment options. Horizontal options affect buttons presented horizontally in the navigation bar, and vice versa. 4. Click OK. See WebPlus Help for more information. Custom buttons can be created from scratch in WebPlus's Button Studio. (See Creating custom buttons on p. 83). To change navigation bar separators (for another preset): 1. Click the drop-down arrow on the Separator thumbnail to reveal a Presets flyout. 2.
Navigation and Hyperlinks 75 To change navigation bar background (for another preset): 1. Click the drop-down arrow on the Background thumbnail to reveal a Presets flyout. 2. Select a background from a category. 3. (Optional) Adjust padding and other options to suit you design. 4. Click OK. See WebPlus Help for more information. Changing pop-up menus Pop-up menus are an integral part of navigation bars that are based on site structures using child pages.
76 Navigation and Hyperlinks Like buttons, pop-up menus are highly configurable. One difference is that they can be configured as either Text pop-up menus and Graphical popup menus. The Navigation bar Type (Block, Highlight, Speech, etc.) can use either type of pop-up menu depending on the design. To display pop-up menu settings: 1. From the Pop-Up Menus tab, you can customize your pop-up menu by choosing a menu type. Enable either Text pop-up menus or Graphical pop-up menus.
Navigation and Hyperlinks 77 Saving navigation bar options If you've customized a navigation bar's buttons, separators, background, and its pop-up menu you can save these combined settings to a single location using the Defaults button. This is useful for applying the same navigation bar appearance to other navigation bars you create in your site. Including/excluding pages in navigation By default, all pages are included in navigation—that is, they can be linked to by navigation bars.
78 Navigation and Hyperlinks To create a dynamic navigation bar: • Right-click the offsite link in Site tab and click Offsite Link Properties.... • From the Offsite Link dialog, change the drop-down menu in the Smart Object Information section to add feed items (i.e., published article titles) as children to the bar's submenu. Each article title is clickable, launching the associated article in a window, typically a separate window.
Navigation and Hyperlinks 79 up menu items that display can be configured, either adopting the entire site structure (or part of it) or your own custom structure. Pop-up menus are especially useful when you may want to show a limited, perhaps related, set of navigation links such as a set of products. You have full control of what level of your site your want to present in the pop-up menu.
80 Navigation and Hyperlinks 5. From the dialog's Menu Appearance tab, select Text pop-up menus or Graphical pop-up menus. The latter implements buttons objects to make up its menus. 6. Select a menu option from the box, then edit input boxes, drop-down lists, radio buttons, and check boxes to suit your pop-up menu design. Graphical pop-up menu settings for buttons, separators, and background share similar settings to those of buttons. All options are described in detail in Changing pop-up menus on p.
Navigation and Hyperlinks 81 Adding buttons Buttons are an integral part of WebPlus navigation bars (see p. 67) but can also be added as independent objects onto your web page, either linking to a hyperlink destination or displaying a pop-up menu. In WebPlus, buttons can be based on either a preset design or can be created from scratch in the Button Studio. It's quite common to choose a preset and then customize it to fit your requirements.
82 Navigation and Hyperlinks The preview box updates with your chosen button design. 4. Enter a Button Label to identify the button, such as "Home", "Images", "Help", etc. 5. Select an Action which will be invoked when the button is clicked. 6. • Hyperlink will direct the user to a target (e.g., Internet page, site page, file) via a hyperlink (see p. 85). Click Edit... to choose the target type and its destination and target window.
Navigation and Hyperlinks 83 7. (Optional) Check Button initially in Down state to make the button appear as if it has been already clicked (as opposed to being in Normal state). 8. Click OK. 9. Position the cursor at the chosen cursor position where you want to place your button. 10. To insert the button at a default size, simply click the mouse to. - or To set the size of the button, drag out a region and release the mouse button.
84 Navigation and Hyperlinks The Button Studio lets you edit your custom button's appearance in each of its button states, i.e. initially in its Normal state, when pressed Down, and during Hover over. Button Studio is equipped with an interactive How To tab to assist you as you create your custom button. The tab includes further information about editing in different button states and using guides and stretching options to control which button elements are stretched or kept as is.
Navigation and Hyperlinks 85 Converting to Navigation Bar You can convert your button to a navigation bar (p. 67) at any time, making it possess the characteristics inherent in all navigation bars, i.e. it will present your site structure (or a custom structure). To convert a button to a navigation bar: 1. Select the button. 2. From the context toolbar, select Convert to Navigation Bar.
86 Navigation and Hyperlinks Well-designed hyperlinks are an important aspect of site structure. They help visitors navigate through your site and serve as an important adjunct to logical page relationships as shown in the Site Structure tree. (But don't overlook the time-saving advantages of using navigation bars.) You can manage all hyperlinks and anchors throughout your site by using the Site Manager, accessible from the Default context toolbar or Hintline. To add a hyperlink: : 1.
Navigation and Hyperlinks 87 • Named Window: A custom window can be defined by entering a new window name in the right-most 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., ifrm_1) of any existing frame is selected from the rightmost drop-down menu. (See online Help). If you're targeting an active document frame, select the active frame from the Open in active document frame drop-down list.
88 Navigation and Hyperlinks To view or edit existing hyperlinks: • Choose Site Manager>Hyperlink Manager... on the Tools menu to view, rename, or remove 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. To insert an anchor: 1.
5 Adding Web Objects
90 Adding Web Objects
Adding Web Objects 91 Adding a site search WebPlus uses a powerful search facility which matches user search terms with text that appears in your site in artistic text, text frames or tables. This makes it easy to retrieve content from any hosted web pages. The search feature works by using the Site Search Tool and Site Search Results Tool, both hosted on the Web Objects toolbar's Search flyout. Each tool is used to create objects that work together in combination.
92 Adding Web Objects 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. To add Site Search Results: 1. Click the Site Search Results Tool on the Web Objects toolbar's Search flyout. 2. place cursor to a chosen position, then click and drag Move the to place your search results window. To add the Site Search object: Site Search Tool on the Web Objects toolbar's Search 1. Click the flyout. 2.
Adding Web Objects 93 Using the Gallery The Gallery tab is packed with professionally designed drag-and -drop creative content which will give your website that modern look! A whole range of categories are available, including: • Picture Frames • Badges & Stickers • E-Commerce Buttons • Flags • Flash Banners • Icon Sets and Icons • Notes • Quick Symbols The tab also serves as a container for storing your own design objects you'd like to reuse in the same or different websites.
94 Adding Web Objects To view your Gallery: 1. Click the Studio's Gallery tab. 2. Select a category from the drop-down menu. The items from the first listed sub category are displayed by default. 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. Some gallery items are editable and can therefore be used as the starting point for your own designs.
Adding Web Objects 95 Storing your own designs The Gallery tab can also store your own custom designs in the ready-to-go My Designs category—the design is made available in any WebPlus site. When you first install WebPlus, the My Designs gallery will be empty, ready for custom designs to be added to it. To move or copy an object into the My Designs category: 1. Select the My Designs category from the Categories drop-down list. 2. Drag the object from the page and drop it onto the Designs window. 3.
96 Adding Web Objects To further categorize your designs, you can optionally add sub categories to My Designs (below) or create a new custom category instead of My Designs. Once created, sub categories and categories can be deleted or renamed. To add, delete, or rename custom sub categories: • To add, select a category and click Add Sub Category... from the tab's Tab Menu button. • To delete or rename, select options from the the sub category title bar.
Adding Web Objects 97 Adding Google Maps Use embedded Google Maps in your web page if want to make sure that a client can locate your headquarters, attendees can find that special meeting (or event), or identify special interest locations. By embedding in a purposely designed "Directions" web page, you'll be able to add the map and written supporting directions to your site accordingly. Each map will allow markers to be placed on the map to identify each location.
98 Adding Web Objects 3. Navigate around the map using supporting panning and zoom controls—drag the hand cursor to pan, the zoom slider and buttons to magnify/zoom out. If you've got a mouse with a scroll wheel, ensure Enable mouse scroll wheel zoom is checked for optimum zoom control. 4. (Optional) From the Navigation control drop-down list, select Full (for panning, Zoom buttons, and Zoom slider), Compact (for Zoom buttons only), or None (to hide all navigation controls). 5.
Adding Web Objects 99 To add a marker: 1. From the Google Map dialog, click Add. 2. Place the 3. From the Google Map Marker dialog, enter a Name for the marker. This "tooltip" displays on hover over and could represent a company or site name. 4. Assign a Click action to the marker, i.e. what gets displayed on button click. Select one of the following: 5. cursor over the chosen location, then click. • Default Label: text is entered into the Label box.
100 Adding Web Objects • To move the marker, click Move, then place the the map again. • To delete the marker, click Remove. cursor on To record your Street view setting: 1. With Click action set to Street view, use window pan and zoom controls to set your view; this sets the direction (Heading), angle (Pitch), and magnification (Zoom). 2. Click Record view. Adding advertising Google Adsense is a free Google service which allows you to place advertising space on your web pages.
Adding Web Objects 101 The types of advert include basic Ad, Image, Link, and Video Units. Formats differ according to unit type but these range from Leaderboard (728x90 pixel), Banner (468x60), Half Banner (234x60), Button (125x125), to various Skyscraper, square, and rectangular sizes. Google Adsense also offers comprehensive usage reports, account management, a filtering, and supporting resources. For more information, visit www.google.com/adsense. To log in to Google Adsense: • Visit www.google.
102 Adding Web Objects 2. Click Insert Google Adsense advertisement on the Web Objects toolbar's E-Commerce flyout. 3. Paste the code snippet previously copied for the unit by clicking Paste from Clipboard. The snippet appears in your dialog and cannot be edited. 4. Click OK. 5. Paste cursor. Position You'll see the mouse pointer change to the the cursor where you want to place the advert, then click to insert the advert at its original size. The advert cannot be resized. To edit your advert: 1.
Adding Web Objects 103 Using lightboxes Lightboxes are a simple way of displaying pop-up larger sized versions of pictures from thumbnails you add to your web page. If you've used the Photo Gallery feature you'll have come across this concept before. A great advantage of lightboxes is that bigger pictures can be displayed on demand and are superimposed over your web page after a gliding animation. WebPlus also offers a simple slideshow feature (p. 104) to showcase images present on the same web page.
104 Adding Web Objects To restrict the display size of this linked "lightboxed" picture, WebPlus scales down outsized pictures to a maximum width and height (default 800 x 660 pixels) always preserving their aspect ratios. Images with native dimensions less than these maximum dimensions are left unchanged. The maximum width and height can be modified. (See Setting site properties on p. 32). To create a lightbox to a local picture: • As above but choose the File option instead of Picture.
Adding Web Objects 105 Lightboxes to any hyperlink target Lightboxes are not just limited to the display of pictures. As a light box is actually a type of window, any hyperlink target can be displayed within it— typically a page in your site (e.g., a form or login page), an Internet page, blog, forum, or RSS feed. You can also view a Word file, PDF, or any other file type (using the File option) in your lightbox. To create a lightbox to any hyperlink target: 1.
106 Adding Web Objects Inserting panels Panels are rectangular information boxes superimposed over your web page. They host text or graphical information, or both. The ability to superimpose panels means that you can increase the amount of information available to the web visitor without altering the underlying web page content. Panels can be made to display only when required as you click or roll over buttons, Gallery objects, or pictures.
Adding Web Objects 107 To help you create professional panels, WebPlus provides an impressive selection of modern backgrounds to base your panel on. Alternatively, you can customize a background preset further or create a panel background from scratch in WebPlus's Design Studio (see p. 110). Inserting your panel To insert a panel: 1. From the Web Objects toolbar's Insert Panel. 2. (Optional) From the dialog, provide an HTML ID for the panel. This can be kept as is, as the ID will always be unique. 3.
108 Adding Web Objects 7. (Optional) Check Panel is initially hidden to make the panel hidden on dialog exit. Normally, this can be left unchecked to allow to you to design your panel first. 8. Click OK. 9. Position the cursor where you want to place the top-left corner of your panel. 10. To insert the panel at a default size, simply click the mouse to. - or To set the size of the panel, drag out a region instead. Panels can be moved and resized as for any object you create in WebPlus.
Adding Web Objects 109 To allow this to happen, the object has to be "brought to life", i.e. an action is triggered in response to the rollover or click. This is done by assigning an action and an already created panel to the object at the same time. To assign an action and panel: 1. Right click the object and select Actions.... 2. From the dialog, click Add... and choose Visibility from the flyout. 3. Select the panel from the Panel ID drop-down list, then an event from the Event drop-down list.
110 Adding Web Objects The panel is replaced with a Hidden Panel icon. The panel is still there, and can be revealed again by disabling the Hide Panel button (by clicking). The Hide Panel option is the same as the dialog's Panel is initially hidden option. On publishing your page, a rollover of the page object will display the panel.
Adding Web Objects 111 3. Using standard WebPlus tools and tabs, customize your background to your liking, using the accompanying How To tab to interactively design your background. 4. Click Commit Changes on the main toolbar to exit. The modified background is updated in its original position. The Design Studio lets you selectively prevent panel objects from scaling or stretching—Horizontal and Vertical scale flyouts on the Studio's toolbar offer absolute object control.
112 Adding Web Objects Adding hotspots 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. You can draw and edit hotspots by hand, or create them to match an existing shape or region. To draw a hotspot: Insert Hotspot button on the Web Objects toolbar. 1. Click the 2.
Adding Web Objects 113 To match a hotspot to an existing shape: 1. Draw the hotspot as described above, and create the shape as described in Drawing and editing shapes on p. 303. 2. Select both objects and choose Fit Hotspot to Shape from the Tools menu. The hotspot region is matched to the outline of the shape. On publishing, only the shape responds to a cursor hover over.
114 Adding Web Objects 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. To move or resize a hotspot: • Click to select the hotspot, then: • To move, click and drag from the center, or from the hotspot's bounding box. To constrain the hotspot to vertical or horizontal movement, hold down the Shift key while dragging.
Adding Web Objects 115 To create an extra node on a hotspot: • Click anywhere along the hotspot's outline when you see the cursor. Drag the new node into position to modify the hotspot outline. 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 an image. For example, you can point your mouse at a image, and see it instantly change to a different image (below).
116 Adding Web Objects Rollover options Adding rollovers is basically a matter of deciding which state(s) you'll want to define, then specifying an image variant for each chosen state. WebPlus provides several choices: Normal State is the "resting" state of the image before any rollover, and is always defined. Over State is the state triggered by a mouseover—when the mouse pointer is directly over the image.
Adding Web Objects 117 3. Specify which rollover states (see above) you want to activate for each image 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. 265). 4. Check Embed files in site if you want to incorporate the image(s) in the site. 5. Check either Normal or Down as the button's initial rollover state. 6. (Optional) Click Set...
118 Adding Web Objects Adding pop-up rollovers The most common use for pop-up rollovers in WebPlus is to hover over a picture thumbnail to show its larger representation, usually offset next to the thumbnail. The feature is simple to use and works in a similar way to the more advanced Photo Gallery.
Adding Web Objects 119 3. For the Over image, the previously chosen Normal image is used by default (typically for photo thumbnails). However, you can Browse... to use a completely different image. 4. (Optional) To hyperlink from the Normal image, click the Set... button and enter a URL. The user jumps to the hyperlink destination by clicking the image. 5. (Optional) For either image, specify Export Options... for that image (see Setting image export options on p. 265). 6.
120 Adding Web Objects down list showing the last three values used for Normal, Over, and Captions (from top to bottom)—this lets you align images exactly. 4. (Optional) Check Position relative to Normal image to maintain the Over image's position in relation to the Normal image (when the Normal image is resized). 5. (Optional) Uncheck Maintain aspect ratio to allow your Normal or Over image resizing to be unconstrained.
6 Adding Dynamic Web Objects
122 Adding Dynamic Web Objects
Adding Dynamic Web Objects 123 Attaching HTML code In WebPlus, you can create pages in HTML (see Creating HTML pages on p. 59). However, WebPlus also lets you attach code to your WebPlus objects (e.g., in frames or table cells) and pages, primarily to expand the capabilities of the objects (or the page), making them more intelligent and interactive. The object or page can either dynamically generate content or can have its appearance altered within its area as a result of embedded script content.
124 Adding Dynamic Web Objects Adding HTML to pages WebPlus also allows you to "view source" on a page—allowing extra HTML code to be added to the page. Using this approach, you can include fragments either copied from another web page, or perhaps written by yourself. You can also import formatted HTML text from a browser or email program via the Clipboard (for example with a browser's Select All and Copy commands), using WebPlus's File>Paste Special... command.
Adding Dynamic Web Objects 125 Adding JavaScript To source a vast array of JavaScript code, try searching for "javascript snippets" in your favorite search engine. You should find many thousands of sites hosting freely available code snippets. Most of these sites will clearly indicate what the JavaScript will do for you—they'll also normally let you select the JavaScript code and copy it for pasting into an HTML fragment's, object's or page's Source window, HTML table cell or directly onto the page.
126 Adding Dynamic Web Objects 3. In the dialog, scroll the source window to locate editable placeholders. Which placeholder you choose depends on what you want to achieve. 4. Select all of the placeholder and paste HTML, script or any other text string to overwrite the placeholder text. - or Select all of the placeholder and type directly in the placeholder's location (again overwriting the placeholder text). 5. Click the OK button to return to your normal page view.
Adding Dynamic Web Objects 127 2. In the dialog, scroll the window to locate editable placeholders. Which placeholder you choose depends on what you want to achieve. 3. Select all of the placeholder and paste HTML, script or any other text string to overwrite the placeholder text. - or Select all of the placeholder and type directly in the placeholder's location (again overwriting the placeholder text). 4. To switch back to your normal page view, click the project tab at the top of the source window.
128 Adding Dynamic Web Objects If the object is copied on the same page or to another website, the ID number will be replaced by a new ID number. If you need to define a custom name for your ID, you can so via the Edit Object ID dialog. To edit the object ID name: 1. Right-click an object and select ID.... 2. In the dialog, modify the HTML ID value. Tokens WebPlus provides a range of grouped HTML annotation tokens which can be attached to HTML fragments, objects or pages.
Adding Dynamic Web Objects 129 Form Structure The building blocks of a form comprise a mixture of text, graphics and form controls. Form controls are intelligent as they collect web visitor data and can be added, moved and modified in a similar way to familiar objects in WebPlus such as graphics and table elements. A control can be a button, edit box, text area, combo box, check box, radio button, CAPTCHA object, or File browser.
130 Adding Dynamic Web Objects Where is data sent? After submission, form data can be sent to one of the following: • an email address (of the web developer). • a script file (stored locally or remotely); this could write text to a text file or into a server database. • Serif Web Resources; for transit of form data to your email (via Serif). As is standard in web form management, it is possible to set the encoding type, target window/frames, submission methods (POST or GET) can be used.
Adding Dynamic Web Objects 131 Creating forms Several methods exist for creating forms: you can create a pre-defined ready-to-go standard form (opposite), select individual form controls for your form, or create a form from scratch; the first two methods use an easy-to-use Form Wizard. Standard forms are available for Contact information, User comments, resume submission, Opinion, and Address forms. To create a standard form: Form Wizard on the Web Objects toolbar's Form 1. Click the flyout. 2.
132 Adding Dynamic Web Objects 5. In the next screen, choose to add, modify or delete controls. • To add, click a button in the Add box. • To modify a standard object, select an existing control in the window and choose Edit Control.... See Editing form controls on p. 136 for more information. • To delete a standard object, select an existing control in the window and choose Delete (or press the Delete key). • To rearrange the control order, use the Move Down buttons. Move Up and 6.
Adding Dynamic Web Objects 133 1. Click on one of the other form controls to create from scratch. 2. In the dialog, use the internal name for the control (to uniquely identify it), or edit it and enter a label to accompany the control (this is shown on-screen). You can also edit the control by using the Edit Control button. Editing a control allows validation, control of form length, and other control attributes to be set. See Editing form controls on p. 136 for more information.
134 Adding Dynamic Web Objects Form Control Icon Form Control Name When to use? Form Button Use when specifying an action that can be triggered by a button click. A whole range of buttons of varying design and function can be created. Submit and Reset buttons are available in the Form wizard. They perform form submission and clear all form data, respectively. Edit Box Use for entering single-line text, numbers, or a mixture of both. Someone's surname would be a good example.
Adding Dynamic Web Objects 135 You can use Shift-click to group select a range of items. When designing multiple selection combo boxes, drag the top or bottom of the Combo box to allow several items to be displayed by default. Check Box Ideal when you want to select multiple items displayed side by side. A good alternative to a Combo Box if space allows. The web visitor clicks once to select or deselect the box, e.g.
136 Adding Dynamic Web Objects File Browser Use the File browser to have your web visitors upload any file from their computers. The visitor simply navigates via a Browse... button and selects a local file of their choice. Some examples include uploading pictures, resumes, drawings and instructions. CAPTCHA Use as a security check for protecting against spamming. The form control offers a random text string for the web visitor to reproduce in a text box.
Adding Dynamic Web Objects 137 The Form Wizard's Edit Control... button lets you modify the control during form creation. Alternatively, the control can be edited later by right-clicking on the form control on the web page and choosing the Edit option, e.g. Edit Text Box. Submission of forms All forms have one thing in common—they must be submitted to allow data to be collected. To do this you can either create a Submit Button unaided or more usually use the ready-made button in the Form Wizard.
138 Adding Dynamic Web Objects This option is for experienced web developers with scripting expertise. A script file from my hard drive A remote script To set up a local script file: 1. With the Script file icon enabled, add a Form name. 2. Navigate to your local script file, typically a .php, .js, .cfm, .cgi, .pl, .dll, or .exe file with the Browse... button. 3. Check Embed file to include the script within the site.
Adding Dynamic Web Objects Resources 139 via Serif and send it to your personal email address(es)— the service does require that you firstly have a Serif Web resources login (for security reasons), which will allow you to create, edit and delete your own email destinations; these are called Form Email Targets. To set up Serif Web Resources: 1. With the Serif Web Resources icon enabled, add a Form name. 2. Click the Select button (log in to Serif Web Resources if you're not already logged in). 3.
140 Adding Dynamic Web Objects 4. Click Add new. The email entry is created and added to the Available Email Targets list. You'll notice that the entry is classed as "Not Confirmed". Before the service commences, you'll get a email confirmation message sent to your email address. By clicking the link, the service will be activated and the entry will change to "Confirmed." 5. (Optional) Repeat the above procedure to add further email targets, then select an email entry to make it active. 6.
Adding Dynamic Web Objects 141 CAPTCHA gateway To protect against spam emails, Serif Web Resources uses a CAPTCHA gateway if you've not added a CAPTCHA form control directly to your form (see Form controls on p. 133). On form submission, this enables a security check offering a random text string for the web visitor to reproduce in an text box. Passing the check initiates form submission.
142 Adding Dynamic Web Objects RSS feeds and podcasts can be configured in a very similar way in WebPlus. In fact, the process for creating your own RSS feed or podcast utilizes the same RSS Feed Tool within WebPlus. If you want to reuse a third party RSS feeds/podcasts and add it to your own web page, a reader can be embedded into your web page by using the RSS Reader Tool.
Adding Dynamic Web Objects 143 To insert an RSS feed or podcast: RSS Feed Tool button on the Web Objects toolbar's 1. Click the RSS flyout. 2. Click the Add RSS Feed or Add Podcast button to create a new RSS feed or podcast entry. A new feed name called New RSS Feed or New Podcast appears in the left-hand menu. With the entry selected, you'll see a list of settings for the new entry which can be modified by clicking in the Value column.
144 Adding Dynamic Web Objects To swap the feed for another: • Once an RSS feed or podcast exists, double-click the feed on the page to redirect the button to another feed. Simply select a different entry and click OK. For podcasts, the dialog can also automatically subscribe the podcast to the visitor's Google Reader, My Yahoo!, or iTunes application. Pick from the Open Podcast with drop-down list. Otherwise, for manual subscription of RSS feeds or podcasts, the RSS Standard option is used.
Adding Dynamic Web Objects 5. 145 Click OK, then click OK again. If you're broadcasting media files stored locally, you'll be prompted to define the Site URL (see p. 32) during publishing. This makes local files accessible to visitors. Submission of podcast feeds For podcasts via iTunes, as a broadcaster you'll need to have your podcast submitted to iTunes.
146 Adding Dynamic Web Objects Subscribing Subscribing to RSS feeds and Podcasts Web visitors can subscribe to these feeds by a variety of methods. Subscripti on type manual Method The web visitor simply clicks on a diagnostic symbol which indicates the type of feed, i.e. For RSS Feeds Your published RSS feed or podcast offers a clickable subscription button, e.g. This lets you add the feed to your browser's favorites.
Adding Dynamic Web Objects automatic (podcasts only) 147 icon (or associated hyperlink; The web visitor clicks the see examples below). The podcast and reader is defined explicitly, so subscription is automatic. This is done by double-clicking the podcast on your page and choosing an option from the Open Podcast with drop-down list. An example could be as follows: Instead of a direct button, a hyperlink (see p. 85) can be created from anywhere in your site which links directly to your new feed.
148 Adding Dynamic Web Objects The addition of the RSS feed reader to your page automatically subscribes yourself to the chosen RSS feed or podcast. There are other ways of subscribing to RSS feeds or podcasts via web browsers and iTunes, but here we'll focus on how to include the feed on your page and have it automatically receive articles or episodes. Here's an example of a Reuters RSS newsfeed added to a WebPlus web page: To include an RSS feed or podcast on your page: 1.
Adding Dynamic Web Objects 149 RSS Reader Tool button on the Web Objects toolbar's 3. Click the RSS flyout. 4. In the dialog, paste the Feed URL into the RSS Feed URL field. 5. (Optional) Select a different color, font, font size, or font style for the feed's Title, Headline, or Summary Color. 6. (Optional) Set the local time zone for your site in the Time Zone drop-down list. 7.
150 Adding Dynamic Web Objects For major companies, the shopping cart technology is developed in-house (maybe the payment processing is carried out by a third party company). For smaller companies or organizations, the shopping cart is normally a brought-in third-party solution due to the cost/resource limitations. There are many thirdparty shopping cart providers that can be used—all account-based and equipped to accept credit cards instead of using a traditional payment gateway (e.g., by phone).
Adding Dynamic Web Objects • 3. 151 If you're an existing user, enable the button next to your chosen provider, and click Next>. This option simply sets the default provider for your site (rather than set up a provider account). The dialog is provider-specific and may show different options. As an example, choosing PayPal lets you define (via dialog) an email address to receive payments, cart handling charge, and use a "Sandbox" test tool for trying out your shopping cart before going live.
152 Adding Dynamic Web Objects Inserting an e-commerce object (PayPal) The creation of e-commerce objects within WebPlus takes a Wizard-based approach. An e-commerce object can be added to the web page as a form or link (i.e., a simple button) by completion of a series of dialogs. Whether you choose to use forms or links depends on the characteristics of the items you are planning to sell, and how you want to sell your goods.
Adding Dynamic Web Objects 153 The dialog that is displayed when you add an e-commerce object will entirely depend on the currently enabled shopping cart provider (see Configuring your shopping cart provider on p. 150). The following procedures assume that PayPal is configured as your shopping cart. To insert an e-commerce object: 1. Click the Insert an E-Commerce object button on the Web Objects toolbar's E-Commerce flyout. 2.
154 Adding Dynamic Web Objects 5. Click Next>. 6. Item identification, pricing, tax, and weight information can be defined in the Item Details dialog. Options to be selected are: • Item Name: The item name for sale. Shown on the form and shopping cart. • Allow customer to specify the item name: Check to swap the above Item Name for a box in which the web visitor can enter their own item name (also good for specifying donation details).
Adding Dynamic Web Objects 155 Choose from the above settings and click Next>. If you're using e-commerce database merging, this Item Details dialog will instead let you choose an e-commerce database for use with your chosen provider. Remember to set the currency you wish to trade in. 7. 8. For e-commerce forms only, two subsequent dialogs are shown: • The Item Description dialog lets you optionally include an image (e.g.
156 Adding Dynamic Web Objects • Change the text for the Continue button on the Successful Payment Page. • If needed, define Successful Payment Pages and/or Canceled Payment Pages. Enter the page's URL or select an entry from the drop-down list. 11. For e-commerce forms only, choose a form layout from the Form Layout dialog. Several check box options let you control what gets shown on the form layout.
Adding Dynamic Web Objects 157 As well as text, it is even possible to merge picture data (for example, a digital photo library) into single fields or even auto-create a grid layout of pictures and text suitable for catalogs or photo albums. WebPlus can even create a photo database automatically—a simple database using the .SDB (Serif Database) format—for a set of images in a folder.
158 Adding Dynamic Web Objects Whatever your source of data, once you've chosen it in WebPlus you can edit the merge list (the actual data to be merged) by specifying which records to include or exclude, and apply advanced filtering/sorting capabilities to refine the data. You'll need to Insert placeholder fields on a placed repeating area on your web page; data will then be merged into such repeating areas.
Adding Dynamic Web Objects 159 • To Rename a field, select the field name and click Rename... • To change the order of fields within the list, select the field name and click Move Up or Move Down. 6. Click OK. 7. The Edit Database dialog appears, displaying the first record with six fields in view. Scroll down to view additional fields if created. Since it's a new database, the fields will be blank; you can start entering information now (i.e., add a record), or wait until later.
160 Adding Dynamic Web Objects A repeating layout starts with a repeating area—basically a single cell whose unit size determines how many database records can tile across and down on a page. Within the repeating area, you can place any elements, such as: • One or more text fields with data drawn from the same record. • One or more picture fields where you want merged picture(s) from a particular data record to appear. • Other objects such as artistic text, QuickShapes...
Adding Dynamic Web Objects 161 4. The Repeating Area Tile Setup dialog appears, showing a page layout that initially consists of a 1x4 tiling grid: one repeating area across the page, and four down. The preview region at the left reflects the current dialog settings. 5. You can either set precise properties for the repeating area (the basic unit) in the dialog, or close the dialog and use direct dragging to establish the area's size and shape.
162 Adding Dynamic Web Objects To open a different data source: Edit database on the context 1. With repeating area selected, click toolbar. 2. In the dialog, click the Browse... button and from the down arrow on the file format drop-down list adjacent to the File name drop-down list, select the type of data source you want to open, and click Open. Depending on the type of data source, follow any additional instructions provided by WebPlus.
Adding Dynamic Web Objects 4. 163 Click OK to close the Merge List dialog and return to the web page. The data source you've just opened remains the active data source. Editing Serif Database files Each record in a Serif Database (*.sdb) file contains 20 standard fields. For data stored in SDB format, you can use the Edit Database dialog to create or delete records, enter information, find occurrences of specific text, or revise the field order—even add new fields and data.
164 Adding Dynamic Web Objects 5. • To find occurrences of specific text, click Find... and specify the Field to be searched. The Record list displays any text appearing in that field throughout the database. Double-click an entry (or select it and click OK), to view that particular record. • To customize the database fields, click Customize.... In the dialog, click Insert... to create a new field, or select a field and click Delete to remove one. To rename a field, select it and click Rename....
Adding Dynamic Web Objects 165 Snapping either on or off) when the field attaches to the repeat area. The field's contents turn shaded and subsequently, dragging the repeating area object also drags its contents. For picture fields, set display properties such as picture size and alignment within the picture field, right-click the field and choose Frame Properties.... Typically, the Scale to Minimum Fit option works best for Picture fields. You can also resize the frame itself by dragging its handles. 5.
166 Adding Dynamic Web Objects To merge to a new site: Merge to New Site on the context toolbar. 1. Click 2. WebPlus now generates a new site in a separate window, replicating the basic repeating area as many times as there are records in the data. The layout uses the grid arrangement you specified, with each unique cell including data from a single record, following the order of records in the merge list. WebPlus inserts new pages as needed to include all the records.
Adding Dynamic Web Objects 167 Using Smart objects For modern interactive web features (counters, forums, blogs, resource booking, and more), WebPlus uses server-sided Smart objects placed on the page. Smart objects store gathered web visitor data on Serif's own secure server space. These objects are available from Serif Web Resources, a secure online service for not just creating and inserting smart objects, but for storing and managing object data once your site is published and live.
168 Adding Dynamic Web Objects Forum Add a thread-based discussion forum to your site, optionally in a full-sized window. With forums you can: • Under different categories (e.g., Motoring) add multiple subforums (Classics, Convertibles, Custom, etc.). • Establish access control for users and moderators (see p. 184). • Set forum privacy as publicly readable or private. • Apply a theme (style) to the overall forum object. • • Create, edit, and assign user ranks. Set user permissions.
Adding Dynamic Web Objects Shout Box User List 169 Acts as an interactive chat window similar to Windows Messenger. Let your web visitors chat amongst themselves. The User List Smart object operates in two modes (each mode selectable via a pop-up dialog): • Mailing List mode: Have website visitors sign up to newsletters, party confirmations, information request, and many more. Lists can be controlled manually or by selfsubscription.
170 Adding Dynamic Web Objects To create a Serif Web Resources account: Smart Object Tool on the Web Objects toolbar. 1. Click 2. In the login dialog, click the Create Account link under the login boxes. 3. In the next dialog, enter your current email address, screen name, and a password twice. You'll need to review and agree to Serif's terms and conditions of use (via a check box). 4. Click the Signup button. 5.
Adding Dynamic Web Objects 171 Creating Smart objects Think of a Smart object as being a general term for elements that you'll use on your page—as discussed previously. Smart objects are not added directly to the page from Serif Web Resources, but are first added to your own object library (the library lets you manage and edit each object)—objects can then be added to the web page immediately or at a later date. Some Smart objects are conditional on another Smart object being created first.
172 Adding Dynamic Web Objects 5. 6. From the dialog: • Enter your own Name for the object. • (Optional) Select a Profile from the drop-down menu if created previously. • (Optional) A Filter Offsite string (access to the object will be restricted to the domain entered and will prevent the URL from being copied). • (Optional) Change the object specific settings, e.g. for some objects you can also set the titling, colors (for body, text and border), and border thickness if appropriate.
Adding Dynamic Web Objects 173 To add a Smart object to your web page: 1. From the Smart Objects dialog, select the chosen object from the lefthand pane and click the Insert button. 2. To insert the object at a default size, position the cursor where you want the object to appear on the page, then simply click the mouse. The Smart object will automatically preview on the page so you'll get a good feel for how your published Smart object will look.
174 Adding Dynamic Web Objects Applying Smart Object colors You can make color changes specifically to your Blog, Forum, or CMS as you edit or manage them. Each Smart Object type has its own color settings, i.e. Smart Object How to Configure color Blog Visual Style drop-down list in Edit - New Blog dialog. Forum Forum Themes drop-down list in Manage - My Forum dialog. CMS Title, Body, and Info buttons from Edit - New CMS dialog.
Adding Dynamic Web Objects 175 The CMS Smart object can only be managed via a web browser using the URL www.serifwebresources.com. To manage a Smart object from your library: • From the Smart Objects dialog, click the Manage button at the bottom of the My Smart Objects Library pane. The management options differ for each Smart object type. See online Help for an overview of management functions. To manage Smart objects directly over the Internet: • Login to www.serifwebresources.
176 Adding Dynamic Web Objects Access control Access control lets you apply security to your site, either to restrict access to specific pages or to control user access to forums, blogs, and CMS. • For page security: login to a password-protected page(s) or via an onthe-page login box. Typically of use in personal websites or small enterprise websites, you can allow free access to most of your site, with only a limited set of pages accessible to selected web visitors.
Adding Dynamic Web Objects 177 Access control is possible via Serif Web Resources (p. 167) by using a User List Smart object, which can be created to manage user groups and users, and how users sign in. Successful establishment of access control on your website, is dependent on following the steps below.
178 Adding Dynamic Web Objects 7. Click Create. Your new Smart object is listed in your Smart objects Library, e.g. 8. Click Exit to logout of Serif Web Resources. Once you've created your Smart object, you can create and associate user groups to it using the Manage feature. To control user signup and security: Smart Object Tool on the Web Objects toolbar. 1. Click 2. With your User List Smart object selected, in the My Smart Objects Library pane, click the Manage button to reveal the Users dialog.
Adding Dynamic Web Objects 179 2. From the Create New Group dialog, enter a Group Name; this should reflect how the group is intended to be used, e.g. "Photoaccess". 3. Click the Create Group button, verify dialog settings, then click Done. The group will be added to the Group drop-down menu. To manage a user group: • Select the group name from the Group drop-down menu, then click Manage Group. From the dialog, you can rename the group and display the number of group users.
180 Adding Dynamic Web Objects You can add more than one user to the same user group. The same user can belong to multiple user groups. To add a user manually: Smart Object Tool button on the Web Objects 1. Click the toolbar. 2. With your User List Smart object selected in the My Smart objects Library pane, click the object's Manage button to reveal the Users dialog. 3. From the Add New User section at the bottom of the dialog, enter the user's email address in the Email box.
Adding Dynamic Web Objects 6. 181 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. To remove, use the Remove (or Remove All) buttons from the group. If configured, you can make users sign up by themselves, avoiding the need to manually add and manage every user as described above. This is done via Serif Web Resources.
182 Adding Dynamic Web Objects Enabling access control To enable access control on your web page: Page Security on the 1. With the web page currently in view, click Default context toolbar. 2. Check Protect page with password to enable access control. You'll notice that the Change/Manage button becomes active. Click this button to reveal currently available user groups (in bold) and the User List Smart object to which they belong. 3. From the User Groups dialog, select the user group, e.g.
Adding Dynamic Web Objects 183 Adding a login box WebPlus lets you add a login/logout input box onto a page in your website. This means that a registered web visitor can gain access to any restricted pages by signing in to the site. The login box is actually a visual representation of the User List Smart object; it is placed on the page as well as existing just in Serif Web Resources. Users can be added manually in Serif Web Resources or via self-registration user sign up.
184 Adding Dynamic Web Objects Access control with forums, blogs, and CMS To set up access control for forums: 1. Select the already created User List Smart object for access control when creating a forum. WebPlus will automatically create a user group, also called Golf Forum, to allow self-registration user sign up and sign in. The forum visitor will need to click the register link and sign up. 2.
7 Working with Text
186 Working with Text
Working with Text 187 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 .
188 Working with Text Tables cannot be imported. 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 189 • When you select a frame you'll see its bounding box, indicated by a 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. (For details, see the topic Editing text on the page on p. 198.) • 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.
190 Working with Text Typing into the frame: Select the Pointer Tool, then click for an insertion point to type text straight into a frame, or edit existing text. (See Editing text on the page on p. 198.) Pasting via the Clipboard: At an insertion point in the text, press Ctrl+V. Drag and drop: Select text (e.g., in a word processor file), then drag it onto the WebPlus page. If you drop onto a selected frame, the text is pasted inline after existing text. Otherwise, a new frame is created for the text.
Working with Text (1) (2) 191 (3) The illustration above shows how the cursor will change when hovering over the bounding box (1), after dragging inwards the frame margin can be adjusted (2), and after dragging downwards, the top frame margin can be moved (3). To allow frame margins to be set, ensure the frame is selected (and not frame text). The frame should show a solid bounding box.
192 Working with Text To do this, several options are open to you: • Physically resize you text frame if you have space. See Resizing objects on p. 234. • Consider rewriting your story, making it more concise! • Resize your text, as described below. To resize frame text once frames are sized and positioned, various tools are available on the Frame context toolbar. The Text Sizing flyout offers three tools for controlling how frame text scales through the text frame.
Working with Text 193 Shrink Text on Overflow If selected, extra text added to a selected frame will shrink all frame text to avoid text overflow. AutoFit If selected, the frame will always scale text automatically by adjusting text size (compare to Fit Text which fits text once, with any additional text causing text overflow). For Creative frames, the Link button on the last frame of the sequence displays an AutoFlow and Overflow button.
194 Working with Text • use proofing options such as AutoSpell/Spell Checker, Proof Reader, and Thesaurus. • manage their content and track font usage via the Site Manager. And some differences: • You can initially "draw" artistic text at a desired point size, and drag it to adjust the size later. Frame text reflows in its frame upon frame resize. • Artistic text can be applied to a path but frame text cannot. • Artistic text won't automatically line wrap like frame text.
Working with Text 195 To resize or reproportion an artistic text object: • Drag the object's corner handles to resize it while maintaining the object's proportions. • To resize freely, hold down the Shift key while dragging. To edit artistic text: • Drag to select a range of text, creating a blue selection. 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.
196 Working with Text To apply a preset curved path to text: 1. Create an artistic text object. 2. With the text selected, click the Path flyout on the Text context toolbar and choose a preset path. 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. 297) or a shape (see Drawing and editing shapes on p. 303). 2. Choose the flyout. 3.
Working with Text 197 To fit existing text to an existing line or shape: 1. Create an artistic text object. 2. Create a freehand, straight, curved line or a shape. 3. Select both objects. On the Tools menu, choose Fit Text to Curve. The text now flows along the specified path. 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.
198 Working with Text Editing text on the page You can use the Pointer Tool to edit frame text, table text, or artistic text directly. On the page, you can select and enter text, set paragraph indents and tab stops, change text properties, apply text styles, and use Find and Replace (see p. 200). For editing longer stories, and for more advanced options, choose WritePlus (Edit Story… from the Edit menu).
Working with Text 199 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. 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 Repeat to apply the same formatting there.
200 Working with Text Setting paragraph indents 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. Indent is by the currently set default tab stop distance. - or - • To adjust indent settings via a dialog, choose Paragraph... from the Text menu (or Text Format>Paragraph... from the right-click menu).
8 Formatting Text
202 Formatting Text
Formatting Text 203 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. To clear local formatting (restore plain/default text properties): • Select a range of text with local formatting.
204 Formatting Text Font assignment is very simple in WebPlus, and can be done from the Fonts tab, Text context toolbar, or in the Character dialog (via rightclick, or from the Text menu). The Fonts tab lets you: • Apply fonts easily without dialog navigation. • Assign fonts to be Websafe or 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 205 Generally speaking, it is advisable to keep to the standard list of Websafe fonts shown in the Fonts tab unless you can be sure of font usage amongst your target audience. These fonts are grouped together under the tab's Websafe category (an equivalent category exists on the text context toolbar's Font drop-down menu). Using text styles WebPlus lets you use named text styles (pre- or user-defined), which can be applied to frame text, table text, or artistic text.
206 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 a built-in default paragraph style called "Normal" which is left-aligned, 12pt Verdana. When you create different "body" text types, they'll have paragraph style names based on this "parent" text style.
Formatting Text 207 A character style includes only font attributes (name, point size, bold, italic, etc.), and you apply it at the character level—that is, to a range of selected characters—rather than to the whole paragraph. • Typically, a character style applies emphasis (such as italics, bolding or color) to whatever underlying font the text already uses; the assumption is that you want to keep that underlying font the same.
208 Formatting Text As both paragraph and character formatting can be applied to the same text, all of the current text's formatting is displayed in the Current format box on the tab. In the example below, currently selected text has a Strong character style applied over a Normal paragraph style. To modify an existing style: 1. From the Text Styles tab: • Right-click on the character or paragraph style you want to modify and then choose Modify
