WebPlus 9 Companion
©2004 Serif (Europe) Ltd. All rights reserved. No part of this site may be reproduced in any form without the express written permission of Serif (Europe) Ltd. All Serif product names are trademarks of Serif (Europe) Ltd. Microsoft, Windows and the Windows logo are registered trademarks of Microsoft Corporation. All other trademarks acknowledged. Serif WebPlus 9.0 © 2004 Serif (Europe) Ltd. Companies and names used in samples are fictitious. Clipart samples from Serif ArtPacks © Serif (Europe) Ltd.
Software License Agreement This Software License Agreement (“License Agreement”) is a legal agreement between you (either an individual or a single entity) and Serif (Europe) Ltd. (“Serif”) for the accompanying software product, which includes computer software and may include associated media, printed materials, and “online” or electronic documentation (the “Software Product”). By installing, copying, or otherwise using the Software Product, you agree to be bound by the terms of this License Agreement.
8. NO OTHER WARRANTIES Except for the above express limited warranties, Serif and its suppliers make and licensee receives no warranties or conditions, or terms, express, implied, statutory, or in any communication with licensee.
How to contact us Our main office (UK, Europe): The Software Centre PO Box 2000, Nottingham, NG11 7GW, UK Main Registration Sales Technical Support* Customer Service* General Fax (0115) 914 2000 (0800) 376 1989 (0800) 376 7070 (0115) 914 9090 (0115) 914 9090 (0115) 914 2020 *Local rate (UK only) (0845) 345 6770 Technical Support E-mail support@serif.co.
Contents 1 ♦ Welcome 1 About the Companion .............................................................................. 3 The hands-on sequence .......................................................................... 3 Linking to additional help ......................................................................... 3 What’s new in Serif WebPlus 9... ............................................................. 4 Registration and support ..............................................................
About table text...................................................................................... 52 Scheme colors and text ......................................................................... 52 Design tips ............................................................................................. 53 For more help on working with text... ..................................................... 54 5 ♦ Working with Graphics, Animation, & Multimedia 55 Graphics in WebPlus ...........................
Welcome
Overview 3 About the Companion The WebPlus 9 Companion has everything you need to get started, from the basics to tips for advanced users. Here’s a chapter summary: 1 Welcome. Reviews the program’s main features, requirements, and installation sequence. 2 Getting Started. A simple introduction to Web sites and a hands-on sequence introducing the WebPlus environment. 3 Web Site Design and Construction. Essential information on pre-planning, site structure, navigation, and page layout.
4 Overview What’s new in Serif WebPlus 9... Welcome to Serif WebPlus 9—the easiest way ever to get your business, organization, or household on the World Wide Web! Among new WebPlus 9 features, you’ll find... ♦ Theme Graphics for Instant Flair Choose from an array of ready-made design elements in themed sets, on a new Studio tab... Swap sets and change the look of your site with a single click... Customize text, font, colors, and more.
Overview 5 ♦ Page Anchors and Hyperlink Improvements Now you can insert anchors to target hyperlinks directly to any word or onscreen object... Automatically link downsized “thumbnail” images to full-sized versions on an empty page... Open links in a new window as needed... Include offsite links in your site structure... Convert hotspots to match selected shapes... Use the new QuickButton object for instant creativity. ♦ Picture Import and Editing Enhancements Import images at 96dpi screen resolution.
6 Overview ♦ Speedy Soft Edges No more laborious transparency-tweaking... the Feathering filter effect adds a soft or blurry edge to any object. Great for blends, montages, vignetted photo borders, and much more. ♦ Dramatic Dimensionality Why settle for only two dimensions? Instant 3D adds realistic depth to ordinary objects and text. Use one master control panel to vary extrusion, rotation, bevel, lighting, texture, and more.
Overview 7 ...on top of these established features: ♦ Easy Editing and Special Effects With WebPlus, it’s a snap to import your own text and graphics. You’ll find built-in modules like WritePlus, for integrated word processing, plus tools for creating text hyperlinks and hotspot graphics. Choose the color scheme that looks best... The Snapping feature and Dot Grid help you achieve a crisp layout.
8 Overview ♦ Professional Layout and Text Tools Intelligent text fitting. Movable rulers and guides. Precision placement, rotation, flipping, cropping, vertical alignment. The Replicate tool to multiply any object into a line or grid arrangement, with pinpoint control over offset and spacing. Text formatting with named styles. Multiple master pages for repeating background elements.
Overview 9 ♦ Gradient and Bitmap Fills, Transparencies For sophisticated illustrations and impressive typographic effects, select from a wide variety of Linear, Radial, and Conical fills and transparencies... and a multi-faceted Studio gallery of picturebased effects. Both solid and variable transparency let you add new depth to your print and Web creations. Use the interactive Fill and Transparency tools for drag-and-drop updating.
10 Overview ♦ 80MB (minimum), 200MB (recommended) free hard disk space ♦ SVGA (800x600 resolution, 16-bit color) display or higher ♦ Internet account and connection for Web publishing Additional disk resources and memory are required when editing large or complex documents Optional: ♦ Windows-compatible printer ♦ TWAIN-compatible scanner and/or digital camera ♦ Stylus or other input device Installing WebPlus 9 To install the program, simply insert the WebPlus 9 Program CD-ROM into your CD-ROM drive.
Getting Started
Getting Started 13 Overview What is a Web site? A Web site is a collection of files stored on a computer where users with special programs called Web browsers can view the files as pages. Browsers can read the common file format known as HTML that describes how the various elements of text, images, hyperlinks, and other elements are arranged on each Web page.
14 Getting Started For editing your site, WebPlus offers a set of intuitive tools and a straightforward workspace that resembles a desktop publishing (DTP) environment. You can easily import text or images, use the built-in word processor, create colorful graphic shapes, and add hyperlinks and hotspots that users can click to access other Web pages or send e-mail. Once your content is in place, you can use a variety of proofing tools and Wizards to review and optimize the site before publishing it.
Getting Started 15 WebPlus Startup Wizard Once WebPlus has been installed, you’ll be ready to start. Setup adds a Serif WebPlus 9.0 item to the 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).
16 Getting Started Whether you’re a new or returning WebPlus user, View Tutorials is a great place to begin learning about new features in WebPlus 9, and review basic concepts. If you’re just getting started, here are some other recommendations: Follow along in the Companion as we take a hands-on, guided tour of WebPlus features. To explore independently, click Create Site from Template or Start New Site from the Startup Wizard (For details on using templates, see the next section.
Getting Started 17 Notice that the Business category is initially selected, with thumbnails for the available templates displayed on the right (your selection of templates may differ). We’re going to use the Communications template, so click its picture to select it and then click Finish. WebPlus opens the template site and displays its Home page in the workspace. It’s actually quite a simple site with just five pages.
18 Getting Started Before proceeding, choose Save... from the File menu and save the project file, providing a file name of your choice (perhaps HANDSON.WPP, which is how we’ll be referring to this site throughout the Companion). Note that saving the WebPlus (.WPP) project file is not the same as publishing it as a Web site. Take a look around Let’s take a few moments to examine the site we created from the template.
Getting Started 19 Our brief foray into the browser proved that the site has five pages; now let’s visit them in WebPlus. There are lots of ways to get around, and the Page Locator is perhaps the most convenient. Of course, the first task is to locate the Page Locator! You’ll find it on the left side of the HintLine—assuming the Home page is displayed it will be showing the word “Home.
20 Getting Started Panels on the Studio’s Attributes tab Click the Site tab for an overview of the pages and master pages in your site, and a control center for a host of constructive activities. In particular, the tab lets you arrange your site content in a logical, structured way and add navigation elements like the navbar in the template site. Click the Themes tab.
Getting Started 21 In the Schemes tab gallery, click the “Apple” color scheme sample. Notice that much of the text on the Web page turns red. Now click the “Carrot” scheme and the text turns orange. Look closely at the group of five colors to the right of each scheme name. Note that each time you switch schemes, it’s the first of these five colors that’s being applied to the text. In WebPlus templates, body text is conventionally marked with “Scheme Color 1.
22 Getting Started Click the Gallery tab to view a wide variety of predesigned elements—graphics that you can drag and drop, then customize or use as a starting point for your own designs. Finally, click to open the Portfolio—a container for storing design objects (images, text blocks, and even unlinked text frames or HTML code fragments) you’d like to reuse in different sites.
Getting Started 23 For more help on the basics... You’ve seen how easy it is to create the basic structure of a Web site using a WebPlus template. And you know how to find your way around the workspace. When you’re ready to construct your actual Web site, you’ll no doubt want to learn about other options. See online help for additional details. ? For help on... In WebPlus Help, display... Then...
Web Site Design and Construction
Web Site Design and Construction 27 If your experience with Web sites has been limited to browsing pages—or even if you’ve cobbled together a Web site using another authoring program—you’ll appreciate the fact that WebPlus lets you lay out your pages using a WYSIWYG approach. Simply place elements where you want them, and then What You See Is What You’ll Get in the published Web site.
28 Web Site Design and Construction Who’s it for? Family, friends, neighbors, colleagues, co-workers, kids, adults, clients, prospective clients, prospective employers, fellow worm-farming enthusiasts—or “the world at large”? Chances are you already know at least a few of the folks you’d like to reach. Perhaps you’re already publishing print pieces that connect you to that audience.
Web Site Design and Construction 29 Don’t assume that your existing content is going to satisfy Web visitors before it’s been enhanced in various ways. Quite often, traditional content needs to be “massaged” in order to translate successfully to the computer screen. It’s a lot like adding motivational bells and whistles to an instructional program for reluctant learners. In the early days of the Internet, text and hypertext links were sufficient to keep scientistusers entertained and enlightened.
30 Web Site Design and Construction ♦ A section is a content category, like “Company News,” “Products,” “People,” or “Links.” The various major sections are typically listed on the site’s Home page. Ideally, each page on the site belongs to a particular section. And unless there’s only one page in a given section, the section will have its own main page, which usually serves as a gateway to subsidiary pages. ♦ The level is the number of steps (i.e. jumps) a given page is removed from the Home page.
Web Site Design and Construction 31 makes it a snap to create navigation bars (see below) that mirror your site structure and help guide your visitors along those “main roads.” Not only is the section/level model well-suited to most kinds of content likely to end up on the Web, but it particularly lends itself to graphical reinforcement (see “Navigation”).
32 Web Site Design and Construction Let’s take a look at the site structure of our template document. Use File/Open... (or the Startup Wizard’s Open Saved Site option) to bring up the HANDSON.WPP project you opened and saved in Chapter 2. Display the Studio’s Site tab. This template site starts with a simple, single-level structure: a Home page plus four section pages (also at the top level) which haven’t yet acquired any child pages.
Web Site Design and Construction 33 Navigation Web sites present unique challenges that don’t arise in the world of print. (When was the last time you even thought of “navigating” through a book?) The parent/child “tree” organization, as visualized in the WebPlus Site Structure tree, is about as intuitive as any path system is likely to get.
34 Web Site Design and Construction You can create navbars using only text, or design graphical navbars by hand. The advantage of navbar theme graphics, along with other navigation elements (such as Previous/Next buttons) provided on the Themes tab, is that they’re pre-programmed to “understand” your site structure tree. That means you can easily customize which part(s) of the site structure they should link to—for example, to top-level pages, pages on the same level, child pages, etc.
Web Site Design and Construction 35 Wherever it’s placed—across the top, down the left or right side, or elsewhere—the navbar needs to be considered a fixture of the page layout. It must never disappear or wander off to another corner. One way to achieve this is to place the navbar on the master page layer (see the next section) so it appears in the same place on each page that shares that master page.
36 Web Site Design and Construction You can add as many master pages as you need, although in a basic Web site you may get by with just one master page. The template site we’ve been working with starts with two master pages. In the HANDSON site, display the Home page and click the navigation bar at the top of the page. Notice that this doesn’t select the bar. Why not? To edit the elements on a master page, you need to switch the working view to that master page.
Web Site Design and Construction 37 In using WebPlus to design your site, take advantage of the master page/page distinction. Think of the background as a sheet of preprinted stationery with its own elements. For example, you can design a colorful background header—perhaps incorporating a main logo—on the master page, which will then repeat on each Web page.
38 Web Site Design and Construction A new page—using Master 1 elements but otherwise blank—appears in the workspace, with a corresponding entry nested under “Services” in the tree. This dialog approach for adding pages has several advantages. For example, you can insert a page anywhere in the site structure or duplicate design elements from a specified page. Here’s another method: Click the Option 1 entry to select the page, then click the Insert Page button above the Site Structure section.
Web Site Design and Construction 39 Click the Services page entry and drag it down below News, (Same Level); dropping it when you see the cursor change to the alternative would be (Child). Notice that the child pages moved along with the parent “Services” page, which is now back in its original place in the top-level ordering. Drag from the Master 2 icon in the Master Pages section and drop onto the Option 1 page entry. That’s how easy it is to assign a master page to a page! Do the same for Option 2.
40 Web Site Design and Construction Browser Window (“safe area”) Page The Web page viewer initially sees only what’s displayed in the browser window (the so-called safe area), leaving unseen an indeterminate portion of the page below that. At 800x600 resolution, allowing for browser toolbars and such, the safe area may be around 400 vertical pixels of actual page height. Content in this region will be all the visitor sees at first.
Web Site Design and Construction 41 If you don’t have a separate “Reply” or “Feedback” page, consider placing a return hyperlink with your own e-mail address at the bottom of each page. It’s not a bad idea to spell out the page’s URL as well, once you’re sure what it is. That way, if a visitor saves a page as a text file, or prints it out, they’ll have a record of where the page originated. A copyright notice isn’t out of the question, either.
42 Web Site Design and Construction Your Home page On the Home page, you can break a few rules. For example, although you’re generally trying to reduce the time it takes each page to load, it’s OK to include larger or more numerous graphics on the Home page. Most visitors’ attention span will stretch a bit in anticipation of seeing what your site has to offer, and they’ll make allowances.
Web Site Design and Construction 43 For more help on site construction... You’ve seen how easy it is to create the basic structure of a Web site using a WebPlus template. And you know how to find your way around the workspace. When you’re ready to construct your actual Web site, you’ll no doubt want to learn about other options. See online help for additional details. ? For help on... In WebPlus Help, display... Then...
Working with Text
Working with Text 47 Now that you’ve seen the “big picture”—how WebPlus integrates pages and master pages into an overall site structure—it’s time to shift focus to the tools and elements that you’ll use to design each page. In this chapter we’ll look at how to add standard text and change the layout of text on the page.
48 Working with Text Notice the gray Link button on the selected frame’s bottom edge. The button’s icon tells you about the frame and the story text it contains: A square (as on the name/address frame) indicates a frame with all its text displayed—either a standalone frame or the last frame in a linked sequence. A plus sign (as on the “Here’s the place” frame) shows there’s more text in the story than the frame can display. Extra text is stored in an invisible overflow area.
Working with Text 49 Editing text Web Plus lets you edit text directly on the page, or with WritePlus, the built-in text editor. Using the Pointer tool, you can type into any paragraph, drag to select characters, and use the formatting controls on the top Text toolbar. As with a word processor, double-clicking selects a word, and triple-clicking selects a paragraph. Select part of the text you typed into the new frame, then try changing its font and pointsize using the controls on the top toolbar.
50 Working with Text Double-click the theme graphic. A dialog appears with several tabs that let you enter your own text and/or update the font or text fill color. After exploring the tabs, click Cancel. Importing text Besides typing text into a frame or creating a story using WritePlus, you can use your current word processor (such as Microsoft Word) to create source files for your site. Then you can cut and paste using the Windows Clipboard or import the text directly.
Working with Text 51 About artistic text Artistic text is standalone text you type directly onto a page. Just as with frame text, you can alter artistic text’s character and paragraph formatting, apply text styles, attach hyperlinks, and use WritePlus to edit the object. You can also apply a gradient fill and/or an outline to artistic text—for example, to create attractive Web buttons—but note that artistic text with these properties is published as a separate graphic rather than as a block of HTML text.
52 Working with Text About table text 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. As with frame text, you can alter table text’s character and paragraph formatting, apply text styles, and attach hyperlinks. However, you can’t use WritePlus to edit table text or import text from a file.
Working with Text 53 However, even if you don’t apply a scheme color to your text, if you add a hyperlink to any text you’ll notice that it takes on a color... and after that hyperlink is clicked in a browser, the text turns yet another color.
54 Working with Text ♦ In general, it’s not a good idea to use more than one column for story text. On a Web page, no one wants to scroll to the bottom of one column and then back to the top of the next. You may see sophisticated Web pages that use tables and frames to demarcate different kinds of content, and you may be able to emulate these effects, but they work best with short text blocks and hyperlinked lists, rarely for the presentation of longer material.
Working with Graphics, Animation, and Multimedia
Working with Graphics, Animation, and Multimedia 57 In this chapter, we’ll continue the hands-on sequence, examining the pages the Web template provided—this time looking at images and graphic objects. The focus will be on how to replace the placeholder images with your own images, and how to create new graphic elements. Graphics in WebPlus Web template sites may include several different types of graphic objects. You can use the Pointer tool to select, move, and resize them, just as with text objects.
58 Working with Graphics, Animation, and Multimedia Importing a picture or animation You’ll have no difficulty importing such items as metafile clipart, bitmap photos, or animated GIFs. WebPlus can handle all the standard formats. You have wide-ranging control over import and export options, using the Graphics tab of the File/Site Properties... dialog. The regular settings result in most imported images being embedded in the WebPlus project file and then exported as .PNG bitmaps when you publish the site.
Working with Graphics, Animation, and Multimedia 59 With the lion photo selected, click the Picture Effects button on the toolbar, and then click a medium gray color swatch to produce a monochrome image using the Recolor option. Try experimenting with other options if you like. As a shortcut to replace an existing image—for example, a placeholder in a template—you can just double-click it to bring up the file selection dialog.
60 Working with Graphics, Animation, and Multimedia Drawing lines and shapes WebPlus provides several easy-to-use drawing tools. The three linedrawing tools are located on a Tools toolbar flyout: Freehand Line Straight Line Curved Line With them, you can add both functional and decorative layout elements—for example, clickable buttons or page dividers. To draw a straight or freehand line, select the appropriate tool, then click and drag.
Working with Graphics, Animation, and Multimedia 61 The QuickShape flyout lets you select pre-designed objects that you can instantly add to your page, then adjust and vary using control handles. The QuickShape flyout contains a wide variety of commonly used shapes, including boxes, ovals, arrows, polygons and stars. The unique QuickButton (indicated below) lets you draw a range of common button shapes...
62 Working with Graphics, Animation, and Multimedia The Color panel also features Fill, Text, and Line buttons that let you preselect which attribute your color selection will affect. For each base color you select, you can drag the Shade/Tint slider below the tab gallery to adjust the lightness of the applied color, for infinite variety. The adjacent Color Picker Tool lets you define a free color (shown as the second sample in the color gallery).
Working with Graphics, Animation, and Multimedia 63 Manipulating objects You already know how to select, move, resize, and group objects. Here are some additional tricks you can carry out on selected objects. You might try them out on your sample photo and box graphics! ♦ Use the Rotate tool to rotate an object around its top left handle. Select the object, then drag one of its handles. (To switch quickly to the Rotate tool, position the cursor over an object’s handle and press the Alt key.
64 Working with Graphics, Animation, and Multimedia Editing colors By now you’ve had a chance to apply colors from the Studio’s Attributes tab to various kinds of objects. We’ve also described how you can employ scheme colors as a “paint-by-numbers” system that allows you to quickly swap one set of colors for another throughout your site. WebPlus gives you a large assortment of gallery colors to start with, and a wide variety of built-in color schemes...
Working with Graphics, Animation, and Multimedia 65 Each of the scheme colors has its own drop-down list, showing available colors in the WebPlus palette, with access to the Color Selector (see above) for defining new colors. To select a different scheme for editing, switch to the dialog’s Schemes tab and pick one from the scrolling list. When you’re done editing colors, you have two independent options. You can click Save Scheme...
66 Working with Graphics, Animation, and Multimedia ♦ 3D effects go beyond 2D to create the impression of a textured surface on the object itself. Bump Maps superimpose depth information for a bumpy, peak-and-valley effect, while Pattern Maps contribute color variations using a choice of blend modes and opacity, for realistic (or otherworldly!) depictions of wood grain, marbling, and blotches or striations of all kinds. ♦ Feathering is a filter effect that adds a soft or blurry edge to any object.
Working with Graphics, Animation, and Multimedia 67 And don’t forget that there are several ways to put artistic text on a path. For example, you can start with a line or shape object and use the regular Artistic Text tool to add text along it. Or select both an artistic text object and a separate line/shape object and use Tools/Fit Text to Curve to combine the two.
68 Working with Graphics, Animation, and Multimedia As when importing images, either drag out a size region on the page or simply click once to insert the GIF. For fastest image display, reduce the original image dimensions to the needed size prior to importing. The animation won’t move on the WebPlus page, which only displays the first of the GIF’s multiple frames. But keep it on your page so it’s available when it’s time to preview the Web site.
Working with Graphics, Animation, and Multimedia 69 One way of including multimedia is to add a hyperlink or hotspot (see the next chapter) that opens a specific media file. With this option, the media file remains separate from the site. WebPlus also provides several ways of embedding the source file.
70 Working with Graphics, Animation, and Multimedia ♦ At the same time, avoid insignificant adornments like rules, bullets, and icons unless they’re part of an overall scheme. ♦ Don’t use too many colors on the page or background. Half a dozen per page, including background, body text, links, and graphics, is about right to lend your site a professional appearance. Using a color scheme is an excellent way to keep things in check. (Plain white or light backgrounds are favored.
Working with Graphics, Animation, and Multimedia 71 Choosing the proper format and settings for Web images is vital. WebPlus relies on global settings to determine how each type of picture should be exported when you publish the site. By default, any image you inserted as a GIF, JPEG, or PNG is exported as the original file, using its original file name. All other graphics are converted to PNGs. If you wish, you can alter these global settings (on the Graphics tab of File/Site Properties...
72 Working with Graphics, Animation, and Multimedia ♦ With JPEGs, image quality goes down (along with file size) as the compression setting increases. With high compression, some images may still look fine, but photographs in particular will visibly degrade. Preview your site, and let your own eye be the judge. You can adjust the global or local settings for .JPG compression as required. ♦ For images using variable transparency, use the .PNG format.
Working with Graphics, Animation, and Multimedia 73 To prevent display of this kind, Web designers often use a Web-safe palette of 216 colors that don’t dither in Web browsers operating in 256-color environments. The safe palette is actually a 6x6x6 RGB “color cube” using evenly-spaced red, green, and blue values from 0 to 255 along its axes. 51 happens to be the interval in the series of values (0, 51, 102, 153, 204, 255).
74 Working with Graphics, Animation, and Multimedia If you’re being considerate of users with dial-up modem connections you can work out your own rule of thumb. Assuming these users are willing to wait up to 20 seconds (because they’re probably accustomed to waiting) you can multiply that by 4K bytes per second, the throughput of a 1995-vintage modem. By that logic, if your pages exceed about 80KB in size you will start to alienate some fraction of your intended visitors.
Working with Graphics, Animation, and Multimedia 75 To reduce file size, reduce the number of colors in each image, and save as a .GIF file using the lowest acceptable bit depth your paint program will allow. If all this talk about image formats and bit depth has landed somewhere slightly over your head, we have two suggestions: (1) Spend some time with a good paint program and experiment with the techniques introduced here. (2) Point your Web browser to the suggested links at the end of the chapter.
76 Working with Graphics, Animation, and Multimedia WebPlus, of course, doesn’t handle either audio or video natively—it cannot edit or play them back—so unless you rely on borrowed or clip media, be prepared to master a media editing application or know someone who can.
Working with Graphics, Animation, and Multimedia 77 www.webpagesthatsuck.com Vincent Flanders’ guided tour through examples of, ah, poor design. The site became one book, then a second, and (unfortunately) never seems to run out of fresh material. www.webreference.com Comprehensive developer’s site, includes Developer’s Corner with how-to articles, sections on Graphics and Design. Part of internet.com’s WebDev network.
78 Working with Graphics, Animation, and Multimedia
Working with Hyperlinks and Interactivity
Working with Hyperlinks and Interactivity 81 In this chapter we’ll look at various ways you can enhance your WebPlus pages to improve the quality and variety of the visitor’s experience. If your site has more than one page, hyperlinking is essential—it’s what enables visitors to navigate through your site—and it’s easily accomplished. Hyperlinked text is common, but you can also create “hypergraphics” using not only hyperlinks but hotspots or rollovers.
82 Working with Hyperlinks and Interactivity Select A page in your site and more options become available at the bottom of the dialog. Click to expand the Page name list and choose the second page, “About Us.” Then click OK. The text you selected is now hyperlinked, and appears underlined by default, using the electric blue color defined for Hyperlinks as part of the site’s color scheme.
Working with Hyperlinks and Interactivity 83 Use the Page Locator (or any other method) to display the “News” page, and select the last word (“Samples”) of the frame at the lower right. Right-click it and the Anchor dialog pops up, asking for a name. The default name “Anchor1” is fine, so just click OK. This time there’s no visible change on the page, but WebPlus is keeping track. Redisplay the Home page and this time right-click on one of the lemon-shaped graphics. Choose Hyperlink...
84 Working with Hyperlinks and Interactivity Click slightly to the upper left of the lion, then drag down and right to draw a box. (You can adjust it later.) When you release the mouse button, the familiar Hyperlinks dialog appears, waiting for you to provide a target. Select A page in your site and designate “Contact Us” in the drop-down list. Click OK. Another approach to creating hotspots is to match a hotspot to an existing shape.
Working with Hyperlinks and Interactivity 85 Navigation elements If you’ve used the WebPlus Site Structure tree to develop a logical arrangement of sections and levels for your site, there’s no reason not to install a navigation bar (introduced back in Chapter 3). In addition to this valuable basic component, the structure of your site may call for other kinds of navigational links. For example, suppose several pages comprise a natural sequence.
86 Working with Hyperlinks and Interactivity (1) Start by selecting a navigation bar from the Themes tab, then customize it to include the necessary buttons and to look the way you want. (2) Incorporate it on the pages of your site, preferably on the master page layer. (3) Design a bullet, pointer, or some other graphic (one that complements the color and design of your navbar buttons) and paste it on the page layer in the correct place to denote the current site location.
Working with Hyperlinks and Interactivity 87 Java is a cross-platform, object-oriented programming language used to create mini-applications called applets that can be attached to Web pages and that run when the page is viewed in a Web browser. WebPlus lets you add Java applets to your Web sites.
88 Working with Hyperlinks and Interactivity ♦ If you have more than a couple of links to related material, consider listing them separately (e.g. as a See Also list), perhaps with a bit of graphic embellishment. ♦ If your site has a group of interrelated topics, it may be more efficient to cluster them into a section or sub-section, with its own main page, rather than creating lots of sideways links between the topics themselves. ♦ For sequential material, you can create a browse sequence e.g.
Working with Hyperlinks and Interactivity 89 ♦ Hypergraphics give you an alternative to using hyperlinked text, which is best reserved for use within body text. For example, if you had a set of pages arranged alphabetically, you might like to create an alphabet users could click on to jump to a particular page. This could be done with a string of 26 hyperlinked text characters, but a creative alphabet graphic with hotspots over each letter would undoubtedly end up looking better.
90 Working with Hyperlinks and Interactivity For more help on hyperlinks and interactivity The fact is, you now know almost all there is to know about hyperlinking and hotspots! For additional details, see online help. ? For help on... Choose from the Help menu... Then...
Previewing, Publishing, and Maintaining the Site
92 Previewing, Publishing, and Maintaining the Site
Previewing, Publishing, and Maintaining the Site 93 It’s time to rehearse the final phase of preparing your Web site! In this previewing and publishing phase, as we’ve mentioned, WebPlus takes the project‘s pages and converts them to HTML and graphics (images) so that a Web browser can display them. You can publish either to a local folder or to an Internet-based Web host.
94 Previewing, Publishing, and Maintaining the Site Open your HANDSON.WPP project and expand the HTML Preview flyout on the Standard toolbar, then choose Preview Site in Internet Explorer from the submenu. We’ll assume you have IE installed; otherwise, select your browser of choice. If you have more than one browser installed, you can choose Browser Preview List... to customize which are displayed on the submenu. Also, note that there’s a Preview Page command for single pages.
Previewing, Publishing, and Maintaining the Site 95 Publishing to a local folder This option, like previewing, exports your project’s pages to HTML and graphics files. The key differences are: ♦ You designate exactly where the files should go, instead of having them written out to temporary files, which are not really under your control. As noted above, each time you use Preview, even if you’re only previewing one page, your previous set of temporary files disappears.
96 Previewing, Publishing, and Maintaining the Site Publishing to the World Wide Web WebPlus makes publishing to the World Wide Web almost as simple as publishing to a local folder! The process uses a built-in FTP (File Transfer Protocol) routine that connects with the remote server and then uploads your files. WebPlus lets you set up multiple publishing accounts—for example, if you have more than one service provider, or want to publish to more than one folder location on a server.
Previewing, Publishing, and Maintaining the Site 97 password on your computer, if you don’t want to be bothered reentering it with each upload. Unless directed by your provider, you can leave the Port number set at “21.” Leave the Folder box blank unless directed by your provider, or if you want to publish to a specific subfolder of your root directory. Click OK to close Account Details. Once you’ve set up at least one account, the Publish to Web dialog appears.
98 Previewing, Publishing, and Maintaining the Site Maintaining your site Once you’ve published your site to the World Wide Web (see the previous section), you’ll need to maintain the pages on your site by updating content periodically: adding or changing text, images, and links, then republishing one or more pages. Making the content changes is easy enough, as all the originals are right there in your site! When you republish pages into the same folder, duplicate .HTML file names are always overwritten.
Previewing, Publishing, and Maintaining the Site 99 In the window, you can use standard Windows Explorer conventions to perform maintenance tasks. Click on the column headers to change the current sort, 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, or choose the view setting. To rename a file or folder, click its name twice and then type, or right-click it and choose Rename.
100 Previewing, Publishing, and Maintaining the Site Finally, feel free to break the above rules and overhaul your site if it becomes clear your users are getting lost or frustrated, or if you’ve discovered a better way to organize your content. In this fledgling medium, it’s not at all uncommon for sites to undergo metamorphosis. On the World Wide Web, change is a constant—and now, you’re part of it. For more help on publishing-related tasks...
Index 2D and 3D effects, 65 A alternate text, 42 Anchor Manager, 88 anchors, 81 animations, 67 anti-aliasing, 70 artistic text, 47, 51, 67, 88 Attributes tab, 51, 61 B Background color, 64 browse sequence, 85, 88 browsers, 13 C caps (line ends), 61 child pages, 30 Clipboard, 71 color, 61 color palettes, 72 color schemes, 20, 52, 64 contrast, 58 Convert to Picture, 59 copyright notice, 41 Crop to Shape command, 63 Crop tool, 63 Curve Creation toolbar, 60 Curve toolbar, 60 Curved Line tool, 59 D design pa
installation, 10 Instant 3D, 66 J Java, inserting applets, 87 joins (line corners), 61 JPEG, 71 L Layout Checker Wizard, 93 layout grid, 63 line (outline) property, 51, 61 lines, drawing, 60 Link button (text frames), 48 links.
S safe area, 40 Scheme Manager, 64 section/level model, 29 shadow effect, 65 shapes cropping to, 63 drawing, 60 Site Structure tree, 19, 30, 32, 34, 36, 85 site structure, concept, 29 sites Home Page, 13, 42 maintaining, 98 pre-planning, 27 publishing, 14, 95, 96 Site Properties, 58 structural design, 29 title, 40 size, 58 Size and Resolution, 74 snapping, 63 sound clips, 68, 75 Spelling Checker Wizard, 49, 93 starting WebPlus, 15 Startup Wizard, 15 Straight Line tool, 59 Studio Attributes tab, 51, 61 custo
