Serif WebPlus 7.
©2001 Serif, Inc. All rights reserved. No part of this publication may be reproduced in any form without the express written permission of Serif, Inc. All Serif product names are trademarks of Serif, Inc. Microsoft, Windows and the Windows logo are registered trademarks of Microsoft Corporation. All other trademarks acknowledged. Serif WebPlus 7.0 © 2001 Serif, Inc. Companies and names used in samples are fictitious. Clipart samples from Serif ArtPacks © Serif, Inc.
Software License Agreement This Software License Agreement (“License Agreement”) is a legal agreement between you (either an individual or a single entity) and Serif, Inc. (“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.
shall be solely responsible for the selection, use, efficiency and suitability of the software product and serif shall have no liability therefor. Serif shall have no liability for, nor obligation to indemnify licensee regarding actions alleging the infringement of proprietary rights by the software product. Serif does not warrant that the operation of the software product will be uninterrupted or error free or that the software product will meet licensee’s specific requirements.
How to contact us Our main office (USA, Canada): The Software Center PO Box 803, Nashua NH 03061 USA Main Registration Single Unit Sales Technical Support Customer Service General Fax (603) 889-8650 (800) 794-6876 (800) 55-SERIF or 557-3743 (603) 886-6642 (800) 489-6720 (603) 889-1127 Technical Support E-mail support@serif.
Contents 1 ♦ Welcome About the Companion............................................................................... 3 Linking to additional help.......................................................................... 3 What’s new in Serif WebPlus 7.0... .......................................................... 4 ...on top of these established features...................................................... 5 Registration and support ......................................................................
5 ♦ Working with Graphics and Animation Graphics in WebPlus.............................................................................. 35 Importing a picture or animation............................................................. 36 Drawing basic lines and shapes............................................................. 37 Other tools and techniques .................................................................... 38 Adding animations...............................................................
1 Welcome
Welcome 3 About the Companion The WebPlus 7.0 Companion provides everything you need to get up to speed, from the basics to tips and tricks for advanced users. Here’s a brief chapter summary: 1 Welcome. Reviews the program’s main features, requirements, and installation sequence. 2 Overview. Offers a simple introduction to Web sites—and how WebPlus helps you create and publish your own. 3 Getting Started. Introduces Web Wizards—our built-in design assistants—and the WebPlus environment.
4 Welcome What’s new in Serif WebPlus 7.0... Welcome to Serif WebPlus 7.0—the easiest way ever to get your business, organization, or household on the World Wide Web! Among new WebPlus 7.0 features, you’ll find... ♦ Streamlined Text Handling Re-engineered from the ground up, the ultra-fast text engine means editing text is simpler and more like word processing than ever. You’ll no longer need to switch to a separate Text tool... or cope with artificial “text blocks.
Welcome 5 ♦ Fastest on the Draw For sheer speed, our new drawing engine reigns supreme! Not only that, automatic anti-aliasing of lines, text, and polygons results in superb visuals, both on-screen and on the printed page. ♦ Other Enhancements Always easy to use, WebPlus 7.0 now lets you employ AutoCorrect and AutoSpell proofing options. You can rotate or reshape text frames and still edit their text. Select multiple Undo and Redo actions from a handy list.
6 Welcome ♦ On-screen Studio Combines Convenience with Functionality The Studio’s tabs provide rapid drag-and-drop access to commonly-used controls such as fonts, line settings, and the color table. Use the Portfolio to store your favorite designs for use in any Web site...
Welcome 7 System requirements If you need help installing Windows or setting up peripherals, refer to Windows documentation and help. Minimum: ♦ IBM-compatible Pentium PC with CD-ROM drive and mouse (or other Microsoft-compatible pointing device) ♦ Microsoft Windows® 95, 98, 98 SE, Me, 2000 or Windows NT® 4.
2 Overview
Overview 11 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, pictures, hyperlinks, and other elements are arranged on each Web page. Each Web site has a single Home Page—the first page a visitor sees—usually containing hyperlinks to other pages on the site, which in turn have links to others.
12 Overview WebPlus gives you the option of previewing the site in your own Web browser before publishing it to the Web. When you’re ready to publish, WebPlus takes the publication’s pages and converts them to HTML and graphics (pictures). You never have to worry about the HTML code itself.
3 Getting Started
Getting Started 15 Once WebPlus has been installed, you’ll be ready to start. Setup adds a 6HULI :HE3OXV item to the 3URJUDPV submenu of the Windows 6WDUW menu. Y Use the Windows 6WDUW button to start WebPlus (or if WebPlus is already running, choose 1HZ from the )LOH menu) to display the Startup Wizard (menu screen). WebPlus launches, and you’ll see the Startup Wizard. WebPlus Startup Wizard Now you can see the normal starting screen.
16 Getting Started Whether you’re an old hand, or just getting started with WebPlus 7.0, here’s a recommended sequence: Y From the Startup Wizard, choose 9LHZ D 4XLFN7RXU to see an illustrated overview of WebPlus fundamentals. From the first screen, click the 1H[W button to step forward. Use the 3UHYLRXV button to step back or the %HJLQ button to return to the first screen. Click &DQFHO to exit the QuickTour.
Getting Started 17 Y Notice that the %XVLQHVV category is initially selected, with thumbnails for the available Wizards displayed on the right. We’re going to use the first one ($UFK), so make sure it’s selected and then click )LQLVK. WebPlus retrieves the Wizard and displays it in Wizard Preview mode. Here’s where you can initially add your own information to the design. Y The upper section of the Wizard lists several categories that you can customize, with “Business Details” selected.
18 Getting Started Y Click the “Carrot” color scheme sample and notice that much of the text on the Web page turns orange. Now click the “Cuba” scheme and the text turns green. Y Look closely at the top portion of each scheme sample, and you’ll see a group of five colors to the right of the scheme name. Note that each time you switch schemes, it’s the first of the five scheme colors that’s being applied to the text. In Web Wizard publications, body text is conventionally marked with “Scheme Color 1”.
Getting Started 19 Take a look around Let’s take a few moments to examine the publication that the Wizard has created. In the process, you’ll become familiar with some of the basic features of the WebPlus environment. Standard toolbar Text & Frame toolbars Tools toolbar Page Area Studio (Wizard panel shown) Pasteboard Area ChangeBar HintLine toolbar Y Move the mouse pointer around the screen and you’ll see popup tooltips that identify many items.
20 Getting Started Y The $WWULEXWHV WDE (see illustration) includes five separate panels that let you customize properties of on-screen elements.
Getting Started 21 1H[W 3DJH button several times to view the Y Click the following pages. You can use the scrollbar at the right to view more of a page. Note that the Wizard has inserted the information you provided, and the rest of the text serves as a “placeholder,” awaiting further changes. Y Double-click the &XUUHQW 3DJH box at the lower left.
22 Getting Started 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 Wizard. 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...
4 Working with Text
Working with Text 25 Now that you’ve reviewed the pages the Web Wizard provided, and had a chance to revise Wizard “answer text” using the Studio, it’s time to look at how to add standard text and change the layout of text on the page. It’s really not complicated at all. About text frames All ordinary text in WebPlus fits into text frames. Frames work equally well as containers for single words or standalone paragraphs.
26 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 27 Working with text frames It’s easy to move or resize a text frame. The appearance of the cursor over the selected frame tells you what will happen if you click and drag at that point. Y Using the Pointer tool, select the “Here’s the place” text frame. Notice the blinking insertion point in the frame’s text. In this mode, you can type directly into the frame, and edit the text with the Pointer tool.
28 Working with Text Y To work with a more substantial amount of text, let’s switch to the “Here’s the place” body text frame on the page. Right-click this frame and choose (GLW 6WRU\ from the context menu to launch WritePlus. WritePlus opens in a separate window that shares many of the standard WebPlus menus and toolbars. You can move the mouse pointer around to view tooltips and hint text for the various buttons.
Working with Text 29 Changing the ‘Web colors’ When you stepped through the Wizard to create the sample site we’ve been working with, you chose one of several alternate color schemes. In the previous chapter, we used a paint-by-numbers analogy to explain about the five numbers you can use to mark elements in WebPlus, and how each scheme includes five colors, which get applied to elements with the corresponding number. By convention, body text in Web Wizard publications is marked with “Scheme Color 1.
30 Working with Text 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 publication. Then you can cut-and-paste using the Windows Clipboard or import the text directly. It’s easy to import text from a file into an existing frame. Let’s try it! Y Using the Pointer tool, right-click the “Here’s the place” frame.
Working with Text 31 For more help on working with text... In this chapter, you’ve examined the placeholder text provided by the Web Wizard and learned how to create, edit, and import standard text. You know enough now to begin replacing the placeholder text with your own content. In addition, you should now have a grasp of how the Web color components of color schemes apply to text.
5 Working with Graphics and Animation
Working with Graphics and Animation 35 In this chapter, we’ll continue exploring the pages the Web Wizard provided—this time looking at pictures and graphic objects. The focus will be on how to replace the placeholder images the Wizard installed with your own pictures, and how to create new graphic elements. Graphics in WebPlus Web Wizards may incorporate several different types of graphic objects into your publication.
Working with Graphics and Animation 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. After being imported, each image is stored in the WebPlus publication until you publish the site, at which time it’s exported using one of the standard bitmap formats (GIF or JPG) that Web browsers recognize. Let’s try importing. Y Click the ,PSRUW 3LFWXUH button on the left toolbar.
Working with Graphics and Animation 37 Note that the time it takes a visitor to load one of your Web pages is directly related to the size of the page’s HTML file plus any accompanying graphic files. Graphics require larger file sizes, and hence slow down loading time. And even in compressed form, bitmap files like the photo we’ve just imported tend to be much larger than simple line or shape graphics (see below)—so use them sparingly! Keep picture dimensions to the minimum needed to convey your point.
Working with Graphics and Animation Y Now display the Attributes tab’s &RORU panel. You can easily change the box’s line or fill color and/or shade by first rightclicking a solid color sample, then choosing either $SSO\ WR /LQH or $SSO\ WR )LOO. (Left-clicking a sample applies the solid color or shade to the selected object’s fill.). For each base color you select, you can pick from multiple shades of that color displayed in the Shades group.
Working with Graphics and Animation 39 Y Use the &URS tool to crop (or trim) objects. Select the object, then drag one of its handles inward. Y To draw a shape with constrained dimensions—for example, a square or circle—hold down the 6KLIW key while drawing or resizing it. Y To add more than one object to a selection, hold down the 6KLIW key while selecting additional objects. This is handy for moving a cluster of objects while keeping them aligned with each other.
Working with Graphics and Animation Y As when importing pictures, either drag out a size region on the page or simply click once to insert the GIF. Keep in mind that larger animations will take longer to display. 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 in your browser.
Working with Graphics and Animation 41 For more help on working with graphics and animation... ? For help on... Choose from the Help menu... Then...
6 Working with Hyperlinks and Interactivity
Working with Hyperlinks and Interactivity 45 In this chapter we’ll look at several 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. Adding Java and HTML is somewhat more challenging, but if you’re technically inclined, WebPlus stands ready to support your efforts.
46 Working with Hyperlinks and Interactivity To create a new hyperlink in existing text, you would first select the range of text you wanted to link, then click the +\SHUOLQN button. The same dialog would appear, and then linking would be simply a matter of choosing the destination and clicking 2.. From a design standpoint, it makes sense to include a navigation bar—a cluster of links to the various key pages on your site. Put it on the Master Page, so the same links will appear on each page.
Working with Hyperlinks and Interactivity 47 Y Click slightly to the upper left of the butterfly, 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. This time, it’s waiting for you to provide a destination. Y Select “A page in your publication” and designate page 2 in the drop-down list. Click 2.. If necessary, you can use the Pointer tool to move or resize a hotspot, like any graphic.
48 Working with Hyperlinks and Interactivity Clicking the ,QVHUW -DYD $SSOHW button displays a dialog where you list the applet’s component files as well as any necessary parameters (as described in the applet’s documentation) that specify exactly how the applet should run. You don’t necessarily need to understand the underlying code, but it’s essential to make sense of any “Read Me” documentation that comes with the applet.
7 Previewing and Publishing
Previewing and Publishing 51 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 publication’s pages and converts them to HTML and graphics (pictures) so that a Web browser can display them. You can publish either to a local folder or to an Internet-based Web host. Previewing is similar to publishing locally, except that the exported files are temporary, intended for immediate viewing in your own Web browser.
52 Previewing and Publishing The WebPlus publication is exported to a temporary folder, and your Web browser launches, displaying the site’s Home page. (If your system tries to connect to the Internet as the browser launches, you can dismiss the connection dialog. No Web connection is required for previewing.) If you saved the animated GIF on the Home page, you’ll see it come alive now! Y As you move the mouse pointer over hyperlinks or hotspots, you’ll see the cursor change to the familiar “hand.
Previewing and Publishing 53 Publishing to a local folder This option, like previewing, exports your publication pages to HTML and graphics files. The key differences are: ♦ You designate 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 run Preview Web Site, even if you’re only previewing one page, your previous set of temporary files disappears.
54 Previewing and Publishing Publishing to the World Wide Web WebPlus makes publishing to the World Wide Web almost as simple as publishing to a local folder! Before publishing for the first time, you’ll need to gather some basic information from the service provider (as detailed in online help—see the note at the end of the chapter). When you’re ready to publish your Web site, here are the steps to take: Y Click the 3XEOLVK WR :HE button on the top toolbar to display the Web Publishing Options dialog.
Previewing and Publishing 55 For more help on previewing and publishing... Before publishing your actual Web site, you’ll probably want to review the WebPlus proofing options mentioned above, and learn about adding search engine descriptors. Or you may want details on publishing to an alternate Web server. ? For help on... Choose from the Help menu... Then...
8 Starting from Scratch
Starting from Scratch 59 We’ll assume that by now, you’ve worked through the Wizard-based examples in the preceding chapters and have a preliminary knowledge of WebPlus tools and techniques—although probably not too much hands-on experience. You’ve seen that there are lots of ways to customize the Wizard-based publications, and that approach may suit your needs perfectly.
60 Starting from Scratch You should ask yourself these basic questions: ♦ How many pages will you need? ♦ What basic composition will you use? ♦ Where will the navigation bar go, and what will it look like? Do you want to use a text-based navigation “header” or “footer”? ♦ What font will you use for headlines, body text, and captions? ♦ Which color scheme will you use, and will you customize its basic colors or Web colors? (In Web Wizards, body text is marked with Scheme Color 1, but you can depar
Starting from Scratch 61 Step 3: Finishing touches Before publishing your site to the Web—in effect, throwing open the front door and inviting the world—you’ll want to brush the cobwebs from every corner.
62 Starting from Scratch ♦ Consider setting your monitor to use 256 colors (rather than thousands or millions) for testing purposes. By working at this setting you’ll be able to preview how your page will look to users with monitors that only support 256 colors (or are using that setting). Note that the GIF image format, a standard for Web graphics, supports a maximum of 256 colors.
Starting from Scratch 63 ♦ If your site is intended for clients or customers, think of it as more than an electronic business card—think of it as a newsletter with publication deadlines. Don’t let more than two weeks go by without making visible changes. The changes don’t have to be dramatic; the main thing is to reinforce the perception that your site is dynamic, not static. The Home page should change most often: add new links, or replace old graphics with new ones.
