How to Contact Us Our main office (UK, Europe): The Software Centre PO Box 2000, Nottingham, NG11 7GW, UK Main Registration (UK only) Sales (UK only) Technical Support (UK only) Customer Service (UK only) Customer Service/ Technical Support (International) General Fax Technical Support email (0115) 914 2000 (0800) 376 1989 (0800) 376 7070 (0845) 345 6770 (0845) 345 6770 +44 115 914 9090 (0115) 914 2020 support@serif.co.
Clipart samples from Serif ArtPacks © Serif (Europe) Ltd. & Paul Harris Portions images ©1997-2002 Nova Development Corporation; ©1995 Expressions Computer Software; ©1996-98 CreatiCom, Inc.; ©1996 Cliptoart; ©1996-99 Hemera; ©1997 Multimedia Agency Corporation; ©1997-98 Seattle Support Group. Rights of all parties reserved. Digital image content© 2005 JupiterImages Corporation. All rights reserved. TrueType font samples from Serif FontPacks © Serif (Europe) Ltd.
Contents Contents 1. Welcome 1 What's New in WebPlus 10.......................................................... 3 About this User Guide................................................................ 12 Installation .................................................................................. 14 2. Getting Started 17 Understanding Web sites........................................................... 19 Startup Wizard ...........................................................................
Contents Editing text on the page ............................................................. 81 Setting text properties ................................................................ 84 Using text styles ......................................................................... 86 Adjusting letter spacing .............................................................. 89 Inserting a symbol ...................................................................... 90 Inserting user details ...................
Contents 9. Hyperlinks and Interactivity 147 Adding hyperlinks and anchors................................................ 149 Adding hotspots to a page ....................................................... 151 Adding rollovers ....................................................................... 153 Rollover options ....................................................................... 153 Adding navigation elements..................................................... 157 Adding Java applets......
Contents
Welcome 1
2 | Welcome
Welcome | 3 Welcome to WebPlus 10.0 from Serif—still the easiest way ever to get your business, organization, or household on the World Wide Web! Whether you're a new WebPlus user, or have upgraded from a previous edition, you're sure to appreciate the range of powerful features we've included. As always, if you have comments or suggestions—or samples of the work you create with WebPlus—we'd like to hear from you. And don't forget to register your new copy, using the Serif Registration Wizard.
4 | Welcome • • • • • • Serif Web Resources for FREE! (p. 189) Add rich dynamic content using Smart Objects such as blogs, page counters, polls, and more, to make your web site a truly interactive experience. Serif Web resources also allows you to manage your blogs from anywhere in the world—simply log on to ... Serif Web Resources. Photo Gallery (p. 141) Run a photo-rich web site using the WebPlus Photo Gallery. Share online albums of family, special occasions, or personal photo collections.
Welcome | 5 • • • • • • Attach code to objects—add HTML and script! (p. 166) Apply HTML code to objects, table cells, HTML fragments and complete pages—apply scripts (with embedded or linked supporting files) to increase user interaction. Insert tokens as dynamic placeholders to include dates, colours, page titles, file names, etc. Auto-generate HTML IDs for any object to allow JavaScript manipulation.
6 | Welcome • New User Interface WebPlus has undergone major rework to ensure all the content you need is always at your fingertips. A whole series of dockable Studio tabs now replace the Studio toolbar and ChangeBar available in previous WebPlus versions. These provide single-click access to commonly used settings such as Line, Opacity, and Colour. More precise control is also possible when aligning objects (Align tab), formatting text (Character tab) and positioning objects (Transform tab).
Welcome | 7 • ..and some very useful additions you've been asking for! Master Page objects now Attach to Bottom to Page when expanding a web page's height. Link to remote Internet-hosted pictures to build-up your page content quickly. Swap your currently placed image between different format quickly and easily—GIF to PNG (or JPG), or any combination (also alter bit depth, transparency and/or size/resolution. A new Colour tab offers colour tinting and different colour display modes.
8 | Welcome • Importing and Editing For text, you can import, paste, export in Unicode format... design with foreign-language or exotic/symbol fonts and characters. Use drag-anddrop editing in WritePlus. Clear formatting (revert to plain style) with a single keystroke. For pictures, import images at 96dpi screen resolution. Adjust brightness and contrast, size and resolution, apply colouration and view properties with the Picture context toolbar.
Welcome | 9 • • • • • Enveloping Apply a customizable mesh warp envelope to any object to add perspective, slant, bulge, and more. You can deform just the outline or include the object’s fill, with an optional grid revealing the geometry of your warp. Intelligent Colour Schemes Choose from dozens of preset colour schemes to change the overall appearance of your Web site with a single click. You can customize the scheme colours, create brand new schemes, and apply any scheme to a "from-scratch" site.
10 | Welcome • • • • • Artistic Text Tool Complementing traditional text in frames, just click and type anywhere on the page, format with the customary tools, then apply colourful lines and fills directly at the character level. Scale it, rotate it, flip it... discover a host of new possibilities! Path text tools let you draw your line, and start typing... beautiful text flows along the path.
Welcome | 11 • • • • • • • Intelligent Bézier Curves Now simply "connect the dots" to trace around curved objects and pictures... the improved Curved Line tool features Smart segments that use automatic curve-fitting to connect each node! Use Crop to Shape to trim one object to another... Convert to Curves for node-and-segment control over all objects, including QuickShapes.
12 | Welcome About this User Guide This User Guide focuses on information essential to the design, publishing and management of your web site. As a feature-rich product, WebPlus supports many more features which can’t all be included in this User Guide. To assist, the following table lists some other books and topics exclusively available within the WebPlus Online Help. Scan the help’s Contents for these books and topics for more information! Online Help books Topics covered in book...
Welcome | 13 How to Work with Colour, Fills and Transparency Working with gradient and bitmap fills Managing colours and palettes Changing or copying vector image colours Working with transparency How to Work with Lines, Shapes, and Effects Setting line properties Applying shadows, glow, bevel, and emboss Using 3D filter effects Understanding blend modes Feathering Adding dimensionality (Instant 3D) Adding borders Using object styles How to Work with Text Editing Story Text with WritePlus Misc Books
14 | Welcome Installation System Requirements If you need help installing Windows, or setting up peripherals, see Windows documentation and help. Minimum: • Pentium PC with CD-ROM drive and mouse (or other Microsoftcompatible pointing device) • Microsoft Windows® 98 SE, Me, 2000, or XP operating system • 64MB RAM minimum • 241MB (recommended install) free hard disk space • SVGA (800x600 resolution, 16-bit colour) display or higher • Internet Explorer 5.5 (6.
Welcome | 15 Manual Install/Re-install To re-install the software or to change any part of the installation at a later date, select Control Panel from the Windows Start menu (via the Settings item for pre-XP systems) and then double-click the Add/Remove Programs icon. Make sure the correct CD-ROM is inserted into your CD-ROM drive, choose Serif WebPlus 10, and click the Install… button. You’ll have the choice of removing or adding components, re-installing components, or removing all components.
16 | Welcome
Getting Started 2
18 | Getting Started
Getting Started | 19 Understanding Web sites This chapter and those that follow provide you with the details you'll need to know to create a successful site on the World Wide Web using WebPlus. What’s involved in creating a Web site? It can be as simple as choosing and customizing a Web template... or you can start from scratch—it's up to you. Either way, you'll appreciate the ease with which WebPlus lets you revise text and graphics, and adjust the design of each page.
20 | Getting Started What will I need to preview or publish my Web site? You can preview one or more pages at any time, either within WebPlus (using a special window based on the Internet Explorer browser) or separately using any browser installed on your system. Publishing a site with WebPlus is a one-step operation that both: (1) converts your project to separate files for the Web, and (2) copies the Web files to a location you specify, either to a local folder or to a World Wide Web host.
Getting Started | 21 you can specify any point size, use variable leading and letter spacing, and even justify paragraphs! The result is a nearly WYSIWYG match between what you see on-screen in WebPlus and what ends up in the Web browser. Because HTML positions elements using absolute co-ordinates, overlapping elements are allowed, and file sizes are reduced. In theory, you can use any font you like.
22 | Getting Started Startup Wizard Once WebPlus has been installed, you’ll be ready to start. Setup adds a Serif WebPlus 10 item to the (All) Programs submenu of the Windows Start menu. • Use the Windows Start button to start WebPlus (or if WebPlus is already running, choose New from the File menu) to display the Startup Wizard (menu screen).
Getting Started | 23 The Startup Wizard is displayed by default when you launch WebPlus. You can switch it off (or back on) via the Use the startup wizard next time check box on the Startup Wizard screen, or via the Use Startup Wizard option on the General tab of Tools>Options.... Creating a Web site using a template The first time you launch WebPlus, you'll see the Startup Wizard, with a menu of six choices. The first of these is Create Site from Template.
24 | Getting Started To open an existing WebPlus site (during WebPlus session): 1. Choose Open... from the File menu. OR Click the 2. Open button on the Standard toolbar. In the Open dialog, select the folder and file name and click the Open button. To revert to the saved version of an open site: • Choose Revert... from the File menu. Open dialog options The Open dialog has two options for intermediate to advanced users. In the Files of type list, you can select WebPlus Site (*.
Getting Started | 25 5. Clicking the Advanced>> button lets you select which types of file (Images, Text, Sound files, Video files, Java applets, Meta data, Server sided script, JavaScript, hotspots or forms) WebPlus should import. 6. Click Import... to proceed with importing. Click Close to dismiss the dialog. The imported page(s) appear in the Site tab’s Site Structure tree.
26 | Getting Started To close the current window: • Choose Close from the File menu or click the window's Close button at the upper right. If it's the only window open for the site, the command closes the project and you'll be prompted to save changes. You can close all open sites without exiting the main WebPlus application. The Window menu lets you arrange the currently open windows, i.e. by cascading, or tiling horizontally or vertically.
Getting Started | 27 To open a template file: 1. Choose Open... from the File menu and select WebPlus Templates (*.wpx) in the "Files of type" box. 2. If you want to open the original template file, uncheck the Open as Untitled option. To open an untitled copy, leave the box checked. 3. Click the Open button. Closing WebPlus To close the current window: • Choose Close from the File menu or click the window's Close button.
28 | Getting Started
Developing Sites and Pages 3
30 | Developing Sites and Pages
Developing Sites and Pages | 31 Understanding site structure and navigation Unlike a printed publication, a Web site doesn’t depend on a linear page sequence. When designing a site, it makes more sense to think of the site in spatial terms, with a structure like that of a museum which people will explore. You can generally assume that your visitors will come in through the "front door" (the Home page)—but where they go after that depends on the links you’ve provided.
32 | Developing Sites and Pages In WebPlus, the Site Structure tree (in the Site tab) provides a visual aid that lets you organize the content on your site into sections and levels—in other words as a hierarchy of parent pages branching to child pages. Here’s how a similar structure might appear in the WebPlus Site Structure tree: The Site Structure tree makes it easy to visualize relationships between pages and lay out your site in a way that makes sense for the content you have to offer.
Developing Sites and Pages | 33 Navigation In WebPlus, certain types of theme graphic we’ll call "navigation elements"—such as Previous/Next buttons and Navigation bars (or "navbars" for short) are 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 Studio’s Theme Graphics tab and WebPlus does the rest! Previous/Next buttons automatically link laterally, to adjacent pages on the same level.
34 | Developing Sites and Pages • Best of all, a WebPlus navigation element updates dynamically if you subsequently alter page names or relationships, or cut/paste the navbar to another page. For example, "Story 1" above is just a placeholder for an actual title—common practice when designing a site before all the intended content is in place. Once we have the actual story, suppose we rename that page to "Smith Appointed to Board of Directors"...
Developing Sites and Pages | 35 The Studio’s Site tab includes an upper Master Pages section with icons for each master page, and a Site Structure section that provides feedback indicating which master page is being used by not only the currently viewed page, but also other pages in the site: 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.
36 | Developing 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.
Developing Sites and Pages | 37 A dark turquoise entry (with bolded page name) denotes the selected page. The eye icon denotes the currently viewed page—which you’re able to edit in the workspace. This example shows a viewed (but unselected) page. 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 (Site tab's upper window) denotes the currently viewed page—which you’re able to edit in the workspace.
38 | Developing Sites and Pages For master pages: • • On the Studio's Site tab, click the 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 master page and page layer (for the current page): • • Click the OR Page/Master Page button on the HintLine. Choose Master Page from the View menu (or Page to switch back).
Developing Sites and Pages | 39 To add a new page anywhere: 1. Choose Page... from the Insert menu. OR Right-click any page entry in the Site tab’s Site Structure tree and choose Insert Page.... OR Site Structure button just above the Site Structure tree (or Click the on the HintLine), or choose Site Structure... from the File menu. In the Site Structure dialog, click the Insert Page... button. 2. In the dialog, specify options for the new page: • Type an optional page name.
40 | Developing Sites and Pages To add a new master page: • • On the Studio's Site tab, ensure the expand the Master Page Window. Click the OR button is clicked to Add button above the Master Pages window. 1. Master Page Manager button above the Master Pages Click the window (or on the HintLine), or choose the item from the View menu. 2. Select the dialog’s Add tab. Enter Width and/or Height settings if different from the defaults. 3.
Developing Sites and Pages | 41 Rearranging pages Besides using the Site Structure tree to add or delete pages, you can use it to rearrange pages as needed. As explained in Understanding site structure and navigation on p. 31, the tree provides a visual aid that lets you organize the content on your site into "sections" and "levels"—that is, as a hierarchy of parent pages branching to child pages.
42 | Developing Sites and Pages (Using buttons) Click one of the buttons adjacent to the Site Structure tree. The button names convey the resulting actions: Move Page Down At Same Level Move Page Up At Same Level Make Page a Child Make Page a Parent Assigning master pages If you’ve defined more than one master page for your site, you can use a variety of methods to reassign a specific master page to individual pages, one page at a time.
Developing Sites and Pages | 43 A great way of always showing the same page (e.g. showing a product list) within every page in your site is to apply a frame to the site's master page. Taking the idea further, you can add selection buttons (or menu options) in support of the frame to change what the frame displays (according to the currently selected option).
44 | Developing Sites and Pages To create a framed document: 1. Select the page on which you would like to add a frame. 2. From the Web Objects toolbar, select the Framed Document Tool. You'll see the mouse pointer change to a cursor. What you do next determines the initial size and placement of the frame. 3. To insert the frame at a default size, simply click the mouse. OR To set the size of the inserted frame, drag out a region and release the mouse button. 4.
Developing Sites and Pages | 45 Unlike frame margins and columns, these layout guides don't control where frame text flows. Rather, they serve as visual aids that help you match your frame layout to the desired column layout. Usually the frame column width matches the underlying page column guides, but sometimes (for example in multiple-column layouts) the frame column will take up two, or even three, of the page columns. To define layout guides: • Choose Layout Guides... from the Edit menu.
46 | Developing Sites and Pages The actual interval size of the ruler marks depends on the current zoom percentage. In zoomed-out view, for example at 50%, there's more distance between ruler marks than when zoomed-in to 150%. To handle work where you want finer control or smaller snapping increments, click a zoom button to magnify the page. By default, the horizontal ruler lies along the top of the WebPlus window and the vertical ruler along the left edge.
Developing Sites and Pages | 47 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, white 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.
48 | Developing Sites and Pages • To move a guide, drag it (the double arrow cursor shows; see example). • To remove a guide, drag and drop it anywhere outside the page area. • • To lock ruler guides, choose Tools>Options... and select the Rulers page, then check Lock Ruler Guides. To fine-position ruler guides, choose Layout Guides... from the Edit menu (or right-click menu) and select the Guides tab. You can use the tab to create or delete individual guides.
Developing Sites and Pages | 49 To set which visible elements are snapped to: 1. Choose Options... from the Tools menu, and select the Layout option. 2. Check the "Snap to:" box, then check/uncheck the elements you want to snap to. The choices include Grid dots, Page/Bleed edge, Page margins, Ruler guides, Row/column guides and Nearest Pixel. Using the dot grid The dot grid is a matrix of dots or lines based on ruler units, covering the page and pasteboard areas.
50 | Developing Sites and Pages Using the Theme Graphics tab, you can view and select theme graphics in two ways: by type or by set. A "type" is a particular category of design element— for example, bullets and buttons are two different types. A "set" is a collection of elements using the same visual theme, with one element of each type and a descriptive name for the visual theme—such as Bright, Candy, Clean, etc.
Developing Sites and Pages | 51 5. Select a theme type from the list at the top of the dialog, and choose a theme set by clicking a thumbnail in the lower gallery. 6. Click OK. In the Theme Graphics gallery, clicking a thumbnail triggers the default action. You can right-click the thumbnail or click its down arrow to view a popup menu with other actions Insert, Replace in Selection, or Replace in Site.
52 | Developing Sites and Pages To move or resize a theme graphic: • Drag the object to move it, or drag by its edge or corner handles to resize. You can edit the text of individual theme graphics, and set various properties for a single theme graphic, or for all theme graphics of a particular type or set. To edit one or more theme graphics: 1. Double-click the object. (If you’re updating a type or set, choose a representative object.) OR Select the object and click its choose Edit Theme Graphic....
Developing Sites and Pages | 53 You can maintain your own collection of Gallery designs by adding and deleting items, with the option of naming individual elements to facilitate rapid access. Each design in the design group can be deleted or renamed from a drop-down menu, accessible from the bottom right-hand corner of any design thumbnail. To add, delete, or rename Gallery categories: 1. Options button and choose With the Gallery tab selected, click the Add category...
54 | Developing Sites and Pages 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 delete a design from the Gallery: • Select a design thumbnail, click on the drop-down button in the bottomright corner (shown by hover over) and choose Delete Design... from the menu.
Developing Sites and Pages | 55 Setting page and site properties Your WebPlus site has its own general framework, consisting of the site itself; one or more master pages; and a number of individual pages. Each aspect of the framework has various property settings that contribute to the look and behaviour or your site when it’s published. Whether you start with a WebPlus template or from scratch, you can choose whether to stick with the default property settings or alter them to suit your needs.
56 | Developing Sites and Pages To change page name, file name, and/or HTML title: 1. Right-click the page in the workspace and choose Page Properties.... OR Right-click the page entry in the Site tab's Site Structure tree and choose Page Properties... (or choose the item from the Edit menu). 2. On the dialog’s Page tab, type a different page name if you wish. To use a different HTML title, enable the Specify HTML title button and type a different title.
Developing Sites and Pages | 57 WebPlus lets you select one or more master page objects, and have them Attach to Bottom of Page (available in Arrange menu). This means that objects which should belong to the base of the page such as copyright information, bottom navbars, or navigation buttons will always show on the bottom of the web page irrespective of page height. To adjust page dimension settings: • • • • (Site defaults) Choose Site Properties... from the File menu.
58 | Developing Sites and Pages • (To override the site setting for a particular page) Right-click the page in the workspace and choose Page Properties.... OR Right-click the page entry in the Site tab and choose Page Properties... (or choose the item from the Edit menu). On the dialog’s Page tab, change the "Use Site Setting" default to be either "Left" or "Centered" in the Page Alignment list.
Developing Sites and Pages | 59 4. Check Embed file if you want to incorporate the icon file into your WebPlus project file. 5. (Optional) Set Export Options to define an exported file name and physical location. (See Setting picture export options on p. 129.). Applying page transitions Start or exit pages in a unique way with a page transition effect—just like in the movies! WebPlus allows you to set a transition effect for each page in your web site.
60 | Developing Sites and Pages 3. Choose either a Page Entry or Page Exit Transition type (or both) from their respective drop-down menus. 4. Set a suitable transition Duration (preview each transitions for the optimum duration). 5. Click OK. To add (or remove) a page transition to a web page: 1. Right-click the page in the workspace and choose Page Properties.... OR In the Studio's Site tab, right-click to select the page in the Site Structure tree and choose Page Properties...
Developing Sites and Pages | 61 Redirection is possible to a range of link destinations—typically another page in your site, or maybe an external web page, email address, local file, anchor, shopping cart, to name a few. To add a page redirect from your web page: 1. Right-click the page in the workspace and choose Page Properties.... OR In the Studio's Site tab, right-click to select the page in the Site Structure tree and choose Page Properties... (or choose the item from the Edit menu). 2.
62 | Developing Sites and Pages Adding search engine descriptors Although they're optional, if you want to increase the likelihood that your Web site will be "noticed" by major Web search services, you should enter search engine descriptors. Search services maintain catalogues of Web pages, often compiled through the use of "crawlers" or other programs that prowl the Web collecting data on sites and their content.
Developing Sites and Pages | 63 HTML Heading tags for prioritized searching Whether you're working with an HTML frame or HTML table, it's useful to know that any HTML assigned with the heading tags H1, H2, H3, and H4 will be prioritized in Internet search engines ahead of tags which are not heading tags (e.g.,
paragraph tags). To assign a heading tag to text in HTML frames or tables: 1. Select text in the frame or table. 2.
64 | Developing Sites and Pages Changing WebSafe export options In a more controlled environment such as a corporate Intranet you may be able to take the opportunity to increase the list of fonts which are considered to be WebSafe. Knowing the fonts used by your web visitor's (they may be a common set installed from a central server), you can afford to relax the subset of WebSafe fonts used. At a later date, it's probable that the WebSafe fonts will need to be managed.
Developing Sites and Pages | 65 Promotion via email With a powerful design environment at your fingertips you might like to produce some stylish sales flyers, datasheets, or other information in relation to your web site or even completely independent of it. WebPlus’s object creation capabilities (lines, QuickShapes, and text) coupled with its powerful colour and transparency control means that you can design a stylish page easily and then dispatch it via email.
66 | Developing Sites and Pages To view and change default text properties: 1. Choose Text Style Palette... from the Format menu. 2. Click Default Text, then click Modify... to view current settings. 3. Use the Attributes button to alter character, paragraph, or other properties. To save all current defaults as global settings: 1. Choose Save Defaults from the Tools menu. Click OK to confirm that you want new sites to use the current site's defaults.
Working with Text 4
68 | Working with Text
Working with Text | 69 Importing text from a file Importing text from a word-processor file is the traditional way to create text content for Desktop Publishing layouts (but you can also create a story using WritePlus). If you use your current word processor (such as Microsoft Word) to create the text file for your site, you can import any number of files into one site.
70 | Working with Text Understanding text frames Typically, text in WebPlus goes into text frames, which work equally well as containers for single words, standalone paragraphs, or multipage articles or chapter text. You can also use artistic text (see p. 80) for standalone text with special effects, or table text (see Creating text-based tables on p. 95) for row-and-column displays.
Working with Text | 71 When you select a frame you'll see its bounding box (see Frame 1 in example), indicated by a grey border line plus corner and edge handles, and (if you clicked with the Pointer tool) a blinking insertion point in the frame's text. In this mode, you can edit the text with the Pointer tool. As in a word processor, double-clicking selects a word, and triple-clicking selects a paragraph.
72 | Working with Text 1 2 If applied, will export frame as a graphic. Only if rotate, crop, transparency, a border or a filter effect is not applied. HTML-compliant styles means that you can format text in your HTML frame using heading styles (tags) from H1, H2, .., to H6. The styles can be assigned from Text>HTML Tag on the Format menu. An advantage of this is that text applied with Heading styles are given priority in Internet search engines (H1 tag is the highest priority).
Working with Text | 73 Creating frames You add frames to a page as you would any other object. You can resize any frame, but cannot alter its basic shape. To create a frame: 1. HTML Frame Tool or the Creative Frame Click either the Tool button from the Insert flyout on the Standard Objects toolbar (see HTML or Creative frames on p. 71). 2. Click on the page or pasteboard to create a new frame at a default size or drag to adjust the frame's dimensions.
74 | Working with Text If there's an insertion point in existing text, the new text appears at that point. If there's a range of text selected, the new text replaces it. If only the frame is selected, the new text is inserted at the beginning of the story. If you want to create a simple document with just one story running from page to page, use the Text File... command with no frame selected. WebPlus automatically adds frames matching the underlying page layouts you've set up.
Working with Text | 75 To edit frame properties directly: • Select the frame, then drag column guide lines to adjust the boundaries of the column. The illustration above shows how the cursor changes to show when you're (1) over the frame's bounding box or (2) over one of its column boundaries. In (3), the left frame margin has been dragged in slightly. Notice how paragraph indents are preserved relative to the margin guide.
76 | Working with Text To edit frame properties using a dialog: 1. Frame Setup button on the Select the Creative frame and click the Frame context toolbar. OR Choose Frame Setup... from the Format menu's Text option. 2. In the dialog, set the number of columns, gutter (gap), or left/right frame margins, enter values in the appropriate boxes. 3. To change the column blinds (top and bottom frame margins), click a cell in the table and enter a new value.
Working with Text | 77 AutoFlow When importing text, it's a good idea to take advantage of the AutoFlow feature, which will automatically create text frames and pages until all the text has been imported. This way, enough frames are created to display the whole story. Then you can gauge just how much adjustment will be needed to fit the story to the available "real estate" in your site. You can make the major changes first, then proceed to the fine-tuning.
78 | Working with Text When frames are created by the AutoFlow option when importing text, they are automatically linked in sequence. To create a link or reorder the links between existing frames, you can use the Link button or the controls on the Frame context toolbar. Remember to watch the cursor, which changes to indicate these operations... To link the selected frame to another frame as the next frame: • Click the frame's OR Link button. Select the frame, then click the context toolbar.
Working with Text | 79 Graphic properties of frames Like graphics, all frames have line and fill properties—initially an outline of zero weight and a clear fill. Although HTML frames cannot possess transparency, Creative frames can (initially set to None). As with graphics, you can edit these properties, for example adding a grey or light-coloured fill as shading behind a frame's text. You can also import images inline with frame text.
80 | 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 but has some artistic advantages over frame text. For example, you can initially "draw" artistic text at a desired point size, and drag it to adjust the size later.
Working with Text | 81 Once you've created an artistic text object, you can select, move, resize, delete, and copy it just as you would with a text frame. Solid colours, gradient/Bitmap fills and transparency can all be applied. To resize an artistic text object: • Drag the object's handles to resize it while maintaining the object’s proportions. To resize freely, hold down the Shift key while dragging. To edit artistic text: • Select a range of text by dragging.
82 | Working with Text Tip: You can double-click to select a word, or triple-click to select a paragraph. To start a new paragraph: • Press Enter. To start a new line: • Press Shift+Enter. The line is created within the same paragraph (using a "line break" or "soft return") The following two options apply only to frame text. You can use these shortcuts or choose the items from the Insert>Break submenu. To flow text to the next column (Column Break): • Press Ctrl+Enter.
Working with Text | 83 Copying, pasting and moving text You can easily copy frame text and paste into the same or a different text frame. Text stored on the clipboard can additionally be pasted into a new frame. Drag and drop support for frame text allows text to be moved into a different location within the same frame or a different text frame in your site. To copy and paste text: 1. Select the text to be copied. 2. Select Copy from the Edit menu. This places the text onto the clipboard. 3.
84 | Working with Text • The Left indent is set in relation to the frame's left margin. • The 1st line indent is in relation to the left indent. • The Right indent is in relation to the frame's right margin. For details on setting frame margins, see Creative Frame setup and layout on p. 74. To set the indents of the current paragraph: • Drag the appropriate ruler marker(s). OR • To adjust indent settings numerically, choose Text>Paragraph... from the Format menu (or Text Format>Paragraph...
Working with Text | 85 By default, text on your published Web pages is set to vary in size depending on the visitor’s browser setting. If you wish, you can override this as a global option in WebPlus, so that text will appear in the browser at exactly the same point sizes used in your layouts. To check or change the setting, choose Site Properties... from the File menu. On the Options tab, check Force absolute text size to override the variable-text default.
86 | Working with Text Using text styles It's a good idea to establish the main text and graphic formatting to be used in your site early in the creative process. WebPlus facilitates this by letting you define named text styles. A text style is a set of character and/or paragraph attributes saved as a group. When you apply a style to text, you apply the whole group of attributes in just one step.
Working with Text | 87 • • The "Default Paragraph Font" style comes in handy if you have applied local formatting but then decide to restore the original text attributes for the paragraph. (You can think of it as a sort of "Revert to Unaltered Text" command.) Let's take the above example of a paragraph using the "Body" style, and suppose several words have been bolded. As noted earlier, reapplying the "Body" style to the paragraph would not undo the local bold marking.
88 | Working with Text To update a named style using the properties of existing text: 1. Make any desired changes to some text that uses the named style as shown in the Styles box. 2. Choose Update Text Style from the Format menu. OR Click the arrow on the Styles box and select the current style name again from the list. Click OK to confirm the option to "Update the style to reflect recent changes." All text using the named style, throughout the site, takes on the new properties.
Working with Text | 89 To import one or more styles from another WebPlus file: 1. Choose Text Style Palette... from the Format menu. 2. Click the Import... button and use the dialog to locate the file from which styles should be imported, and the specific style(s) to be imported. 3. Normally, new or updated styles are in effect only for the current site; they are saved with the project, but don't carry over to new sites.
90 | Working with Text Inserting a symbol You can insert symbol characters using either the Insert menu or (for common symbols) keyboard shortcuts. As a rule for Web page use, don’t employ symbols outside the standard character set, or in non-standard fonts. To insert a symbol character using the Insert menu: 1. Select the Pointer tool and click in the text for an insertion point. 2. Choose Symbol... from the Insert menu, and select a symbol name from the submenu. 3.
Working with Text | 91 Inserting user details You can take advantage of the User Details dialog to store frequently-used or updated user information so you don't need to keep re-entering it—think of how often a mobile phone number or email address may change over time! The dialog lets you review all your User Details at a glance, and will update fields directly. To review or change User Details: 1. Choose Set User Details... from the Tools menu. 2.
92 | Working with Text
Working with Tables 5
94 | Working with Tables
Working with Tables | 95 Creating text-based tables Tables are ideal for presenting text and data in a variety of easily customizable row-and-column formats, with built-in spreadsheet capabilities. Each cell in a table behaves like a mini-frame. There are many similarities (and several key differences) between frame text and table text.
96 | Working with Tables HTML or Creative tables Two types of table can be applied to the WebPlus page—the HTML table and the Creative table. These can be compared easily in the following table—some features can be applied to both, or just to one or the other. The features listed above apply to both table types. HTML tables Creative tables Searchable by search engines (Google, etc.
Working with Tables | 97 To create a table: 1. HTML Table Tool or Creative Table Tool Choose either the from the Insert flyout on the Standard Objects toolbar, and click on the page or pasteboard, or drag to set the table's dimensions. The Create Table dialog appears with a selection of preset table formats shown in the Format: window. 2. Step through the list to preview the layouts and select one. To begin with a plain table, select [Default]. 3. Click OK.
98 | Working with Tables Manipulating tables Once you've created a table, you can select, move, resize, delete, and copy it as an object, just as you would with a text frame. To manipulate the table object: • • • To select the table object, click its bounding box. Now you can resize it like a text frame by dragging a corner or side handle, or move it by dragging an edge. To delete the table object, select it and press the Delete key (you can also choose Delete Object from the Edit menu).
Working with Tables | 99 • To enter text, simply type into a cell at the insertion point. You can also type or edit text via the Table context toolbar's edit field. Accept button to update the selected cell. Click Click the Cancel to reset the edit field to the previous cell text. Cells expand vertically as you type to accommodate extra lines of text. To enter a Tab character, press Ctrl+Tab. • • • • • To select a row or column, click its control button along the left or top of the table.
100 | Working with Tables • • • • • • To insert new rows or columns, select one or more cells as described above, then choose Insert from the Table menu (Table>Insert from the right-click menu), then either Rows... or Columns... from the submenu. In the dialog, specify how many to add, and whether to add them before or after the selected cells.
Working with Tables | 101 Using AutoFormat To use style presets to customize the table's appearance: • • • Choose AutoFormat... from the Table menu (Table>AutoFormat... from the right-click menu). The dialog presents a list of sample tables, which differ in their use of Lines (inner and outer cell borders), Fill (cell and table), Font (bold, italic, etc.), Alignment (left, centre, etc.) and HTML editing support.
102 | Working with Tables Formatting numbers The Table context toolbar includes additional buttons, switched on with the Spreadsheet functions button, which let you vary how numbers are displayed. Number formats let you add commas and currency signs to numbers, express numbers as percents, control how many decimal places are displayed, etc. Number formats do not alter numbers internally—only the way numbers are displayed. • • • • • Click the Remove Formatting button to remove any formatting.
Working with Tables | 103 # Display a digit if the number has one. If there are more digits in the number than #'s specified, then the extra digits left of the decimal place separator will be displayed. 0 Always displays a digit. If a number does not have a digit in this position then a zero (0) is displayed. If there are more digits in the number than 0's specified, then the extra digits left of the decimal place separator will be displayed. - Display a negative symbol if the number is negative.
104 | Working with Tables value 123.456789 formatted as "+0.00 e+000" becomes "+1.23 e+002"; formatted as "+0.0000 e+00" it becomes "+1.2346 e+02". WebPlus is not strict about the order in which the format codes are specified, and tries to interpret whatever you type. 2. To apply the custom format to the current cell (and save it in the list), click OK. To delete a custom format: • Select it and click the Delete button.
Working with Tables | 105 See the WebPlus Help for a more information on formulas, their operators and functions. Inserting a calendar The Calendar Wizard helps you design a month-at-a-glance calendar to use in any site. You can create a postage-stamp graphic or a full-page "planner." Options include year, month, week and day labelling, room to write, and numerous style choices. To insert a calendar: Insert Calendar from the Standard Objects toolbar’s Table 1. Choose flyout. 2.
106 | Working with Tables
Drawing Lines and Shapes 6
108 | Drawing Lines and Shapes
Drawing Lines and Shapes | 109 Drawing lines WebPlus provides Freehand Line, Straight Line, Curved Line, and QuickShape tools for creating simple graphics. Using the line tools (found on a Standard Objects toolbar flyout), you can draw single lines, connect line segments together, or join line ends to close the line, creating a shape (see Drawing shapes on p. 112 for details). Use the Pointer tool and the Curve context toolbar to resize or reshape lines once you've drawn them.
110 | Drawing Lines and Shapes To draw a straight line (with the Straight Line tool): 1. Click the Line Tools flyout on the Standard Objects toolbar and choose the Straight Line Tool from the flyout. 2. Click where you want the line to start, and drag to the end point. The line appears immediately. To constrain the angle of the straight line to 15 degree increments, hold down the Shift key down as you drag. (This is an easy way to make exactly vertical or horizontal lines.
Drawing Lines and Shapes | 111 2. Select a segment type, then click where you want the line to start. • • • For a Straight segment, just click again (or drag) for a new node where you want the segment to end. Shift-click to align the segment at 15-degree intervals (useful for quick right-angle junctions). For a Bézier segment, click again for a new node and drag out a control handle from it. (Control handles act like "magnets," pulling the curve into shape.
112 | Drawing Lines and Shapes Drawing shapes WebPlus provides Freehand Line, Straight Line, Curved Line, and QuickShape tools for creating simple graphics. QuickShapes are pre-designed objects that you can instantly add to your page, then adjust and vary using control handles. Another way of creating shapes is to draw a line (or series of line segments) and then connect its start and end nodes, creating a closed shape.
Drawing Lines and Shapes | 113 To draw a constrained shape (such as a circle): • Hold down the Shift key as you drag. All QuickShapes can be positioned, resized, rotated, and filled. What's more, you can adjust their designs using the Pointer tool. Each shape changes in a logical way to allow its exact appearance to be altered. The ability to alter the appearance of QuickShape objects makes them more flexible and convenient than clipart pictures with similar designs.
114 | Drawing Lines and Shapes To break open a line or shape: 1. With the Pointer tool, select the node where you want to break the shape. 2. Break Curve button on the Curve context bar. A line will Click the separate into two lines. A shape will become a line, with the selected node split into two nodes, one at each end of the new line. You can now use the Pointer tool to reshape the line as needed. See WebPlus help for information on editing shapes.
Working with Colour and Transparency 7
116 | Working with Colour and Transparency
Working with Colour and Transparency | 117 Applying solid colours WebPlus offers a number of ways to apply solid colours to objects of different kinds: • • You can apply solid colours to an object's line or fill. As you might expect, QuickShapes and closed shapes have both line and fill properties, whereas straight and freehand lines have only a line property.
118 | Working with Colour and Transparency To change a solid colour's shade/tint (lightness): 1. Select the object and set the Line/Fill Swatch in the Colour tab so the Fill Swatch appears in front of the Line swatch. 2. From the Colour Display mode drop-down menu, select Tinting. 3. Drag the Shade/Tint slider to the left or right to darken or lighten your starting colour, respectively (the original colour is set at 0%).
Working with Colour and Transparency | 119 The example on the previous page shows how the scheme "Bright" could be applied to the site to replace the above "Beacon" scheme, the "Cheeky" scheme could then replace the "Bright" scheme, etc. Each site can have just one colour scheme at a time; the current scheme is indicated in the Swatches tab. You can easily switch schemes, modify scheme colours, apply schemes to any site, even create your own custom schemes.
120 | Working with Colour and Transparency • The page Background colour (labelled B) can be either a solid colour or picture. If you use a picture background with transparent regions, the Background colour is still active and will show through; otherwise the picture will cover the background colour. The adjunct colours defined in the Scheme Manager normally apply throughout the site, with several important exceptions: • • Individual hyperlinks can specify their own colour.
Working with Colour and Transparency | 121 Modifying and creating colour schemes If you've tried various colour schemes but haven't found one that's quite right, you can modify any of the colours in an existing scheme and update the scheme, or create your own separately named scheme based on the existing scheme. To modify a colour scheme: 1. Click the Colour Scheme button on the default context toolbar (or choose Tools>Scheme Manager...) to display the Scheme Manager. 2.
122 | Working with Colour and Transparency Here, the hexagonal shape has had a Linear transparency applied, with more transparency at the lower end of the path and less at the upper end. It makes a difference which object is in front (here, the pentagon); where there's more transparency, more of the object(s) behind will show through. In WebPlus, transparency effects work very much like greyscale fills. Just like fills...
Working with Colour and Transparency | 123 Applying transparency There are two ways to apply transparency: using the Transparency tab or the Transparency tool. To apply transparency with Transparency tab: 1. With your object selected, go to the Transparency tab. 2. For solid transparency, select the Solid button and pick a thumbnail from the solid transparency gallery. The lighter thumbnails represent more transparency (expressed as percentage Opacity). OR: For gradient transparency, choose the thumbnail.
124 | Working with Colour and Transparency
Images, Animation, and Multimedia 8
126 | Images, Animation, and Multimedia
Images, Animation, and Multimedia | 127 Importing images WebPlus lets you insert images from a wide variety of file formats. Here's a quick overview: • • • Bitmapped images, also known as bitmaps or raster images (e.g. GIF, JPG, PNG, etc.) , are built from a matrix of dots ("pixels"), rather like the squares on a sheet of graph paper. They may originate as digital camera photos or scanned images, or be created (or enhanced) with a "paint" program or photo editor.
128 | Images, Animation, and Multimedia To import an image from a file: 1. If you want to place the image inline, click for an insertion point in a text object. For a detached image, make sure text objects are deselected. To put the image in a frame, create the frame (see above) and select it. 2. In the main window: Import Picture... button on the Standard Objects • Click the toolbar's Picture flyout. • Choose Picture... from the Insert menu and select From file.... OR • Press Ctrl+G.
Images, Animation, and Multimedia | 129 Embedding vs. linking Embedding means the image in WebPlus is now distinct from the original file. Embedding results in a larger WebPlus file, and if you need to alter an embedded image you'll need to re-import it after editing. Still, it's the best choice if file size isn't an issue and graphics are final.
130 | Images, Animation, and Multimedia You can alter these settings, but before doing so you should review the "logic" WebPlus applies to publishing Web graphics. First, WebPlus has one default format to which all graphics will be converted on export—but you can make exceptions to this rule by specifying that certain image types should remain as their original file. Initially, PNG is the default format, but with overrides set for GIFs and JPEGs.
Images, Animation, and Multimedia | 131 4. In the Generated Graphics section, select a preferred export format. This is the default format to which all graphics will be converted on export unless you set overrides. Setting export options, title, and alternate text for individual graphics The Web Export Manager is a Wizard that lets you set the export file format for individual graphics in the site, or for objects such as rotated text that will be converted to pictures on export.
132 | Images, Animation, and Multimedia To set export format, title, and/or alternate text: 1. If you're checking just a single picture, you can select it first and choose Web Export Options... from the Format or right-click menu. OR To review Web export options for pictures throughout your site, choose Web Export Manager... from the Tools menu, or click the button on the Standard toolbar. 2.
Images, Animation, and Multimedia | 133 Applying image adjustments The Picture context toolbar appears automatically when you select an image on the page. You can use the bar to improve the appearance of any image appearing in your drawing by adjusting brightness and contrast directly, setting levels and contrast automatically, fixing red eye or by applying Image adjustments. The context toolbar also hosts other photo manipulation tools.
134 | Images, Animation, and Multimedia If you're looking to carry our some more advanced photo editing and have Serif's PhotoPlus software (10.0 or above) installed, you can use the Edit in PhotoPlus button on the Picture context toolbar to load the image directly into PhotoPlus. You can carry out your edit and save the file in PhotoPlus—if embedded or linked, the newly altered image is refreshed and updated in WebPlus automatically.
Images, Animation, and Multimedia | 135 Some adjustments have no properties and are applied directly as they are selected. Add more than one adjustment to the picture by repeating the above procedure. To delete an image adjustment: • With an adjustment selected, click the button. Switching on/off adjustments In the same way in which a layer’s contents can be made visible/invisible, the Mute button can be used to temporarily make an adjustment invisible or visible.
136 | Images, Animation, and Multimedia Importing TWAIN images If your scanner or digital camera provides TWAIN support, you can scan pictures directly into WebPlus using the TWAIN standard. Or, save the scanned image as a TIFF or PCX and then import into WebPlus. To set up your TWAIN device for importing: • See the documentation supplied with your scanner for operating instructions. To import a scanned image: • Choose Picture...
Images, Animation, and Multimedia | 137 Animated marquees Animated marquees are an impressive way to add horizontally scrolling motion to a headline or catch phrase. You can choose the background colour, enter from one to three lines of text, define text properties (choose from any installed font), scroll direction, speed and alignment for each line. If you like, you can define any link destination type for the marquee (see Adding hyperlinks and anchors on p. 149).
138 | Images, Animation, and Multimedia 4. To keep the image separate from the WebPlus file (using a link to the source file) check Link picture. To include the image in the WebPlus project, check Embed picture. 5. Click Open. 6. You’ll see the Picture Paste cursor. Click to insert the animation at a default size or drag to a custom size. Flash files A Flash (*.SWF) file is a viewable movie using the Flash™ Player format.
Images, Animation, and Multimedia | 139 To edit the Flash file: • Select the Flash movie, right-click and choose Edit Flash.... Adding sound and video WebPlus lets you augment your Web pages with sound and video files in a variety of standard formats, including both non-streaming and streaming media.
140 | Images, Animation, and Multimedia To add background sound to a page: 1. Right-click the page in the workspace and choose Page Properties.... OR Right-click the page entry in the Site tab's Site Structure tree and choose Page Properties... (or choose the item from the Edit menu). 2. From the Background tab, check Use sound file, then from the Open dialog, browse to the sound file you want to add. Once the file is selected, click OK. 3.
Images, Animation, and Multimedia | 141 To add linked sound or video to a page: • To link from an object or hotspot, choose Hyperlink... from the Insert menu and select A file on your hard disk as the link target, then locate the media file. OR To link from an icon, picture, or inline player: 1. Insert Sound Clip or Insert Video Clip button on the Click the Web Objects toolbar’s Media flyout. OR Choose Media from the Insert menu and select either Sound... or Video... from the submenu. 2.
142 | Images, Animation, and Multimedia Photos can be imported by file or folder, or from a TWAIN device (digital camera/scanner). Once arranged in a gallery structure the photo's thumbnails can be manipulated in a variety of ways. It's possible to: • Reorder by drag and drop, or using arrangement buttons. • Sort in specific order. • Rotate (in 90° anti-clockwise increments)*. • Temporarily expand thumbnail size for review. • Add captions. • Apply decorative frames (from gallery).
Images, Animation, and Multimedia | 143 Creating the Gallery The Photo Gallery is inserted on the page, just like an individual image, after collecting your images together from file, folder, camera, or scanner. All the images are output as JPGs regardless of the original image type and the settings in File>Site Properties>Graphics. To insert a Photo Gallery: 1. Insert Photo Gallery button on the Standard Objects Click the toolbar's Picture flyout. OR Select Photo Gallery... from the Insert menu. 2.
144 | Images, Animation, and Multimedia 3. Optionally, select one or more gallery thumbnail for manipulation, i.e. • Reorder the thumbnails by drag and drop. OR Use the Move Up, Move Down, Move to Start and Move to End buttons in the Arrangement box). • • • • Rotate in 90° intervals anti-clockwise with multiple clicks of the Rotate button. Add a caption under the image with the Caption button (captions only show during preview or on live site).
Images, Animation, and Multimedia | 145 Editing the Photo Gallery Once added to the web page the Photo Gallery can be edited. Updating images, changing gallery types, reorganizing and applying different set of effects are all possible. To edit a Photo Gallery: 1. Select a gallery already present on your web page. 2. Double-click the gallery. OR Right-click the gallery and choose Edit Photo Gallery.... The Insert Photo Gallery dialog is displayed.
146 | Images, Animation, and Multimedia Linking remote images It is possible to connect to any image currently available on the Internet. However, to prevent copyright infringement it's advisable to use images from a reliable image hosting service. Many exist on the Internet but services such as ImageShack (http://www.imageshack.us/) are particularly popular. Of course you may be able to link to other images (from a friend or colleague's web site) where legal implications are not as relevant.
Hyperlinks and Interactivity 9
148 | Hyperlinks and Interactivity
Hyperlinks and Interactivity | 149 Adding hyperlinks and anchors Hyperlinking an object such as a box, some text, or a picture means that a visitor to your Web site can click on the object to trigger an event.
150 | Hyperlinks and Interactivity 4. Depending on the link type, choose type-specific options, the Target window or frame, and Other properties such as Title name and a shortcut access key. Note: As a visual cue, hyperlinked words are normally underlined and appear in the colour you've specified for Hyperlinks in the Scheme Manager or elsewhere (see Using colour schemes on p. 118). 5. Click OK. To modify or remove a hyperlink: 1.
Hyperlinks and Interactivity | 151 To edit an existing anchor: • Use the Anchor Manager on the Tools menu to view, rename, or remove an anchor attached to a particular object. Adding hotspots to a page A hotspot is a transparent hyperlink region on a Web page. Usually placed on top of graphics, hotspots act like "buttons" that respond when clicked in a Web browser.
152 | Hyperlinks and Interactivity • To modify the hyperlink, select a new link destination type and/or target. • To remove the hyperlink, change the link destination to No Hyperlink. Editing hotspots You can move and resize hotspots on the page, just like other objects. A selected hotspot has both an outer bounding box and an inner outline, which serve different purposes.
Hyperlinks and Interactivity | 153 Adding rollovers The term rollover refers to an interaction between a mouse and a screen object. For example, you can point your mouse at a graphic (such as a navigation bar button) on a Web page, and see it instantly change colour or become a different picture. When you point to a Web page object, your mouse pointer physically enters the screen region occupied by the object.
154 | Hyperlinks and Interactivity • Down+Over (only available if Down is activated) implies a mouseover that occurs when the graphic is already Down, i.e. after it's been clicked. If you don't activate Down+Over, then the button just stays in its Down state after a mousedown event, which can cause unresponsiveness (see the above Note). For a more responsive button, set the Normal and Down states to graphic A, and the Over and Down+Over states to graphic B.
Hyperlinks and Interactivity | 155 7. Check Radio button if you want to link all the buttons (on a given page) that have this option checked, so that only one of them at a time can be down. If you use this technique, make sure all rollover graphics you want to link have the option checked. Although it doesn't matter how the buttons are distributed on the page, typically they'll constitute a visible unit like a navigation bar. Any buttons with the option unchecked are independent. 8. Click OK.
156 | Hyperlinks and Interactivity Here are some things to consider: • • • • • • Variant images will stretch to fit into the region occupied by the Normal image, so all the source images should have the same dimensions. Make sure the variants are all in precise registration with the Normal image, so there's no unintended movement when images are swapped on rollover.
Hyperlinks and Interactivity | 157 To import a DrawPlus rollover graphic: 1. Choose Web Object from the Insert menu and select DrawPlus Rollover... from the submenu. 2. Locate the HTML file for the rollover graphic. Keep Embed graphic files checked to incorporate the images into the project, or uncheck to link them. 3. Click OK. WebPlus automatically inserts a placeholder for the object.
158 | Hyperlinks and Interactivity You can place navigation elements on master pages, too—which saves you the trouble of pasting the same element to multiple pages. A navigation element on a master page behaves as if it’s on each page—consistent with the notion that its buttons and menus are relative to where each page sits in the overall site structure. You can make use of tokens (see p.
Hyperlinks and Interactivity | 159 Because navigation elements are theme graphics, you can use the Theme Graphics tab to select coordinated design elements (buttons, etc.) for a consistent look, and change the overall appearance with a single click. To edit theme graphic properties such as font, text colour, and mouseover fill colour, Edit button. (You can also right-click it select the object and click its and choose Edit Theme Graphic....) For details, see Incorporating theme graphics on p. 49.
160 | Hyperlinks and Interactivity To exclude a page from navigation: • On the Studio's Site tab, right-click the page in the Site Structure tree and choose Page Properties.... Below the tree, uncheck Include in Navigation. The setting is also available in the Page Properties dialog (Page tab).
Hyperlinks and Interactivity | 161 Again, you don't need to understand the underlying code, but it's essential to make sense of any "Read Me" documentation that comes with the applet. When using WebPlus to embed an applet, you must list its component files as well as any necessary parameters (as described in the applet's documentation) that specify exactly how the applet should run.
162 | Hyperlinks and Interactivity 5. Click the lower Add... button to enter any required parameters (see documentation supplied with the Java applet). Add parameters one at a time, typing the Name and Value (excluding quotation marks) in the fields provided. To delete a parameter from the list (for example if you typed it wrong), click the Up or Down buttons to select the parameter, then click the Delete button below the list. 6.
WebPlus Advanced 10
164 | WebPlus Advanced
WebPlus Advanced | 165 Creating HTML pages HTML code is the underlying tagged code which your web site visitor's Internet browser reads, interprets and formats your page according to the tags used. The code and tags used are the instructions to which a page will be formatted, and as such it is vital that the code is correctly structured and conforms to HTML convention. WebPlus supports the development of web pages in pure W3C-compliant HTML.
166 | WebPlus Advanced If you're new to HTML and need to start with the basics, it's best to search for "HTML tutorials" in your favourite Internet search engine before tackling HTML editing in earnest. To create an HTML page: • Right-click a page in your Site tab and select Insert HTML page.... OR Site Structure button just above the Site Structure tree (or Click the on the HintLine), or choose Site Structure... from the File menu. In the dialog, select a page and click the Html page...
WebPlus Advanced | 167 These are just a few of the editable placeholders present in the source of an HTML fragment, object or page (in fact differently named placeholders exist depending on the type of element). For example, the last placeholder shown in the list above is unique to a page's source and won't appear for an object or HTML fragment. Any code can be inserted by cut and paste into any of the placeholder positions but typically you can include tokens, HTML code or specific scripts, e.g.
168 | WebPlus Advanced When you import HTML code, WebPlus inserts a marker into your site at the site where the code will be placed. Since you won't be able to see the effect of the HTML until you preview the site, be careful to place the marker correctly. You'll definitely want to check your Web page in a browser! If there's a problem, double-check the code you entered and its position on the WebPlus page.
WebPlus Advanced | 169 Let's look at how to add some of JavaScript (sourced or written by yourself if you've experience of JavaScript programming). To illustrate, compare the two pieces of example code below. A very simple JavaScript code snippet is added to the Source window which will display the current date on your web page. The first section of code uses the last placeholder in the above list (), the second how the code looks after a script has replaced the placeholder.
170 | WebPlus Advanced To attach code to an HTML fragment or object: 1. Select an existing HTML fragment or object. 2. From the Format menu, select Attach HTML.... OR Right-click on the object and choose the same option. 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.
WebPlus Advanced | 171 To attach code to a page: 1. Right-click on the page and choose Attach HTML.... OR Choose the Attach HTML button on the Standard toolbar. 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.
172 | WebPlus Advanced To edit an object ID: 1. Right-click an object and select ID. OR Select the object and choose HTML ID... from the Format menu. 2. In the dialog, modify the HTML ID value. 3. (Optional) Choose whether to Write ID for this object. Selecting "Use Site default" means that the setting in the Options tab of the Site Properties dialog is honoured—"Yes" or "No" means that the object's ID is always shown or never shown irrespective of the site default setting.
WebPlus Advanced | 173 Form data can be collected in a variety of ways—by email, to a text file, database, or via Serif Web Resources, a web service for transferring form data to customer email addresses. 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.
174 | WebPlus Advanced In WebPlus, the form should be integrated into your site design as you develop your site. The form's functionality only then becomes active when your web site is published (of course you can still preview your forms from within WebPlus, see Previewing your Web site on p. 209). When a web visitor enters data into, or selects a form option, the data will be sent back to a chosen destination when the form is submitted.
WebPlus Advanced | 175 Using Standard Forms If you're still confused by forms as a concept you don't need to panic! WebPlus comes complete with a range of ready-to-go standard forms. Alternatively, standard web form objects, acting as building blocks for your form, can be adopted to modify existing forms or create your own forms.
176 | WebPlus Advanced 4. In the form control's Add New Control 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). The Add New Control dialog also lets you edit the control and its label—use the Edit Control... or Edit Label... button, respectively. Editing a control allows validation, control of form length, and other control attributes to be set. See Editing form controls on p. 178 for more information.
WebPlus Advanced | 177 • • • • 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. 181 for more information. To delete a standard object, select an existing control in the window and choose Delete. To rearrange the control order, use the Move Up and Move Down buttons. 6. From the next screen, choose a destination for your form data by clicking a destination button.
178 | WebPlus Advanced 1. Click the Insert Standard Form Object button on the Web Objects toolbar's Forms flyout. 2. From the dialog, choose a category, and select a form object from the category list, e.g. a countries drop-down menu. Click OK. 3. To insert the object, position the form place cursor over the form area, then click the mouse. OR • Right-click on a standard form and choose Form Wizard....
WebPlus Advanced | 179 Web Objects Toolbar 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. Some uses include: • Advanced - Displays menu options that are only applicable for advanced uses. • Show All - Displays all menu options. • Next page - Jumps to the next page. • Open - Opens a file or Web link. • Import - Imports form data.
180 | WebPlus Advanced You can use Shift-click to group select a range of items. For multiple selection, 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 multiply select a series of 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.
WebPlus Advanced | 181 In addition, hidden fields can be added by right-clicking on the entire form and selecting Edit Form Properties.... The dialog's Hidden Fields tab allows for input of any number of hidden fields. Editing form controls Each form control type (buttons, text field, etc.) has different characteristics and therefore different values for editing. Values can be changed as you create the form or at a later time after the control has been added to the form.
182 | WebPlus Advanced Any Combo Box will support Groups. This means you can categorize entries into common groupings for easier navigation. While the group itself is not selectable you can make more sense of a long list of entries by creating the group name (click Add Group...) and moving entries under the group with the Make Child button (position entry under the chosen group). For example, a country Combo Box could be categorized by continent.
WebPlus Advanced | 183 To set up Serif Web Resources: 1. With the Serif Web Resources icon enabled, add a Form name. 2. Click the Select button and login to Serif Web Resources. 3. From the dialog, enter your destination email in the New Target box and click Add New Target. The email entry is created and added to the available email address list—with the email address selected, click OK. You'll notice that the entry is classed as "Not Confirmed".
184 | WebPlus Advanced To add your own acknowledgement page: 1. Right-click on the form (must submit data via Serif Web Resources) and choose Edit Form Properties.... 2. Switch to the Hidden Fields tab, click the Add... button and add the word "redirect" to the Name field and your intended target URL with http:// prefix (i.e., the web address of your own acknowledgement page) in the Value field. 3. Click OK. The new web page will display on the next form submission.
WebPlus Advanced | 185 Remote script 4. Optionally, the Export Options... button lets you define a web file name and folder for the script. 5. Choose a submission method, encoding type, and target window/frame. Use if your ISP will not allow you to run your own scripts on your ISP web space. Instead, your ISP may supply a basic script file that can be linked to from your web page. Typically, the script will send the form data back to your email address (already setup with your ISP).
186 | WebPlus Advanced You cannot use the File browser feature when using this submission method. Instead add the file as an attachment directly within your email program. You can set a default subject line by entering a subject line string after your normal email address, e.g. fred.walker@hotmail.com?subject=New%20Contact%Det ails Where %20 is used to include a space character.
WebPlus Advanced | 187 To change tab order: 1. Tab Order button on the Web Objects toolbar's Forms Click the flyout. This reveals numbered tab markers on all your form controls. 2. Sequentially, click on the form fields in the order in which you want them to be assigned tab numbers. This automatically assigns a new tab number to the marker—your first click will be to assign 1 in First Name field, the second click 2 in the Last Name field, etc. 3.
188 | WebPlus Advanced To set form control validation: 1. Right-click on the form control and choose the Edit option (e.g., Edit Form Text Box). For each form control this is different. 2. Jump to the Validation tab, and check appropriate validation for the form control, i.e. • 3. For Edit Boxes, check if the box must be filled, a number only, or email address only. You can also restrict the number range that the web visitor can input by setting a Minimum value and Maximum value.
WebPlus Advanced | 189 Using Smart Objects It's quite common for web developers to "inherit" content from existing web sites to save time and effort, while bearing in mind any legal implications in doing so. This is fine for simple graphic or text copying, but this process is not possible for more complex, interactive objects such as counters, shout boxes, blogs, etc, which collect information with the object.
190 | WebPlus Advanced Poll Set up a online poll to canvass web visitor's opinions. Shout Box Acts as a interactive chat window similar to Windows Messenger. Let your web visitors chat amongst themselves. For security reasons, the objects are only available via a Serif Web Resources login accessible from within WebPlus. If you don't have a valid username and password you must create a Web Resources account first.
WebPlus Advanced | 191 To clear Account details: • Go to Tools>Options and click Clear Account Details shown from the General option. This will clear the stored login details for Serif Web Resources so that automatic login will no longer work. Details will need to be entered next time so be sure you've remembered your password. To access Web Resources: Smart Object Tool button on the Web Objects toolbar. 1. Click the 2. At the login prompt enter your username and your password.
192 | WebPlus Advanced For example, the currently selected Visitor Count object has just been added to an existing list of Smart Objects. To add a Smart Object to your web page: 1. From the dialog, select the chosen object from the left-hand 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.
WebPlus Advanced | 193 To edit a Smart Object in your library: Smart Object Tool button on the Web Objects toolbar and 1. Click the login. 2. Select a Smart Object for edit from the My Smart Objects Library pane. 3. In the adjacent window, select the preview. button under the object The selected object's edit dialog is displayed. To edit a Smart Object on your page: • • Double-click the object to reveal the object's Edit dialog. OR Right-click the object and select Edit Smart Object....
194 | WebPlus Advanced Object type Reason for object management How? Blog Adding, editing or deleting articles. Deleting comments from articles as Webmaster is also possible. • Click the New button to add an article. • Click the Edit button to edit an existing article in your blog. • Click the Delete button to delete an existing article in your blog. • Click the Comments button to access a Manage Blog dialog. To remove a comment, select it and click the Delete button.
WebPlus Advanced | 195 RSS feeds What is an RSS feed? Really Simple Syndication (RSS) feeds are streams of constantly changing news and information which are becoming increasingly popular on fast-paced web sites. The popularity of RSS feeds is evident if you use Internet-based news services regularly. You simply can't get away from them.
196 | WebPlus Advanced Here's a wildly optimistic "Good Times" news feed, to illustrate the creation of your own feed. To insert an RSS feed: 1. Click the OR RSS Feed Tool button on WebPlus's Web Objects toolbar. Select RSS Feed Manager from the Tools menu. 2. button to create a new feed From the dialog, click the left-most name—edit the name in the RSS Feed title box appropriately. Click the button again to create more than one feed name.
WebPlus Advanced | 197 3. Select the feed name in the My Feeds box, and click the button under the Headlines box. This creates a headline article in the selected feed. You should try to make the headline concise and, of course, interesting! 4. Any headline needs a supporting story. Enter this in the Summary box with the correct headline selected in the adjacent box. Optionally, add a Story URL, especially if your story requires references to other web sites. 5. Click the Insert Feed button. 6.
198 | WebPlus Advanced To include an RSS feed on your page: 1. Locate an RSS feed available on the Internet. Look for the or button on the main web pages of popular news and information services. 2. Right-click on the button and copy the feed's link (in Internet Explorer, choose Copy Shortcut) 3. Click the toolbar. 4. In the dialog, paste the URL into the RSS Feed URL field. 5. Optionally, select a different colour, font, font size, or font style for the feed's Title, Headline, or Summary Colour.
WebPlus Advanced | 199 E-Commerce Understanding e-commerce E-commerce entails the buying and selling of goods on the Internet. It's difficult to escape online retailing in any Internet session these days—you've more than likely used some form of Internet shopping at some point, when buying online CDs, books, holidays, etc. Any web site that supports this kind of e-commerce activity will typically make use of a shopping cart system and a payment processing system.
200 | WebPlus Advanced Configuring your Shopping Cart provider A number of different shopping cart providers can be configured within WebPlus. These are the most commonly used and some, like PayPal©, you may have come across directly as an eBay© customer. The configuration process directs you to the provider's own web site from where you can sign-up as a registered user. Use the provider's web site to find out more about unique shopping cart features. To setup a site-wide shopping cart provider: 1.
WebPlus Advanced | 201 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 or any object's hyperlink) 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.
202 | WebPlus Advanced Form and Link Options Forms When to use? Buy Now When directing the shopper straight to the checkout. Up to two buying options can be defined. Form validation is supported. Add to Shopping Cart When the shopper is likely to buy more than one different item over the duration of a web session (and pay at the end). Up to two buying options can be defined. Form validation is supported. Donation For charitable donation is being made via the shopping cart.
WebPlus Advanced | 203 Forms or links can be selected as radio buttons from a single dialog. Remember that the term "Links" is used because an e-commerce hyperlink can be made from a vector object, image, shape or text by use of this dialog (rightclick on the object and select Hyperlink...). This would be instead of a standard PayPal button. See Adding hyperlinks and anchors on p. 149 for more information.
204 | WebPlus Advanced 6. Item identification, pricing and tax information can be defined in the Item Details dialog (see WebPlus Help for details). Choose appropriate settings and click Next>. 7. For e-commerce forms only, the next step can be used to define userselectable options (only two options can be selected per form in PayPal) if required.
WebPlus Advanced | 205 To edit an e-commerce form or button: 1. Select the form, right-click the form and choose Edit E-Commerce Form.... OR Select the button, right-click the button and choose Edit E-Commerce Button.... 2. Modify e-commerce settings screen-by-screen in the displayed dialog. Adding options fields The Item Options dialog allows for the configuration of up to two buying options—you can create form objects either from scratch or use previously saved default form objects.
206 | WebPlus Advanced To save a form object's options: • With the option for Combo Box or Radio Buttons enabled, click the Save... button. Give the saved set of options a name in the dialog. To retrieve a form object's options: • For a quick way of retrieving a set of saved Combo Box or Radio Button options, select the drop-down menu and choose the saved set. The options will be retrieved and will be adopted on the form.
Previewing and Web Publishing 11
208 | Previewing and Web Publishing
Previewing and Web Publishing | 209 Previewing your Web site Previewing your site in a Web browser is an essential step before publishing it to the World Wide Web. It's the only way you can see just how your site will appear to a visitor. You can preview a page or site at any time, either within WebPlus (using an internal window based on the Internet Explorer browser) or separately using any browser installed on your system. To preview your Web site: 1. Click the down arrow on the Standard toolbar. 2.
210 | Previewing and Web Publishing • • • 3. To delete an entry from the list, select it and click Remove. You can rearrange the list by selecting an entry and clicking Move Up or Move Down. To change the entry’s name on the submenu or its path, select the entry and click Edit. For example, you could change "Internet Explorer 6.00" to appear as simply "IE6". Click OK to confirm any changes.
Previewing and Web Publishing | 211 • • View this URL. This option lets you view the site by specifying its URL, e.g. http://www.mywebspace3.com/intro/. For example, the publish operation could be to a remote computer's folder on the same network, where the folder is part of a web site on that remote computer and is therefore web accessible. View files in Windows Explorer. This provides a useful check of all the files published in Windows Explorer along with supporting sub-folders (for graphics etc.).
212 | Previewing and Web Publishing • • • • You’ll also need a Username and Password as pre-assigned by the provider. Most likely these will correspond to email login settings. Be sure to enter the password exactly as given to you, using correct upper- and lower-case spelling, or the host server may not recognize it. Check Save password to record the password on your computer, if you don’t want to re-enter it with each upload. Passive mode: Leave checked unless you have FTP connection problems.
Previewing and Web Publishing | 213 7. If uploading for the first time, selected files will be uploaded directly. OR If uploading to an existing site, an Uploading Files dialog is displayed showing local file action (whether files will be added (Add), will replace the live file (Replace) or not updated (Leave)). In the dialog, select either the Incremental Update or Full upload Button. Choose the former to upload only files that have altered since the last upload.
214 | Previewing and Web Publishing • • Any other special instructions noted by the provider. For example, a particular port number and/or subfolder may be specified. Whether the Web server can accommodate spaces in file names. If you find it cannot, then choose Site Properties... from the File menu, select the Graphics tab, and check Remove spaces from original file names to revise graphic file names accordingly when they are published.
Previewing and Web Publishing | 215 1. • • • • • • Use standard Windows Explorer conventions to perform maintenance tasks: Click on the column headers to change the current sort order, or drag to change the column width. The top row of buttons lets you view up one level, create a new folder, delete a selected item, upload/download a file, and refresh the windows. Right-click to Open, Download, Delete, or Rename any file or folder.
216 | Previewing and Web Publishing
Index
Index
Index 3D filter effects. See WebPlus help instant. See WebPlus help Account Details (FTP), 213 acknowledgment of form submission, 182 adjunct colours, 119 adjusting letterspacing, 89 alignment objects.
Index File Manager, 61 files, 214 maintaining on Web site, 214 managing, 61 names for, 55 fills bitmap. See WebPlus help gradient. See WebPlus help solid, 117 filter effects 3D. See WebPlus help Find and Replace, 84 Flash banners, 52 Flash movies, 138 flipping.
Index line and fill properties, 109 lines, 109 drawing, 109 properties of. See WebPlus help linking text frames, 77 linking vs. embedding (images), 129 locking objects. See WebPlus help maintaining Web sites, 214 marquees, animated, 137 Master Page Manager, 55 master pages, 34, 55 adding, 40 assigning, 42 rearranging, 41 removing, 40 measurement interval, 45 multiple selection.
Index promotions via email, 65 publishing, 210, 211 to local folder, 210 to World Wide Web, 211 QuickShape Tool, 112 QuickShapes, 112 raster images importing, 127 Raw HTML, 165 redirect pages, 60 remote pictures, linking to, 146 replicating. See WebPlus help resizing objects. See WebPlus help reverting to saved version, 24 rollover buttons, 153 variant images for, 155 rotating.
Index editing story text in WritePlus. See WebPlus help formatting, 84 frame, 70 importing from file, 69, 86 inserting symbols, 90 inserting user details, 91 letterspacing, 89 moving, 83 selecting, 81 setting default properties, 65 setting indents, 83 styles, 86 text frames setting default properties, 65 Text Style Palette, 87 theme graphics, 33, 49, 157 Theme Graphics tab (Studio), 49 tinting, 118 tokens for HTML, 172 toolbars customizing. See WebPlus help transitions, 59 transparency of objects.
Notes
Notes
Notes
Notes
Notes
Notes
Notes
