Serif WebPlus 6.
©1999 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 6.0 © 1999 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.
Software Product is licensed to you on an "as is" basis without any warranty of any nature. 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 Free Web space on VisualCities™ As a Serif WebPlus user, you’re entitled to free Web space on the VisualCities Web host. Choose )UHH :HE 6SDFH from the WebPlus Help menu. To access the VisualCities home page, choose 9LVLW 9LVXDO&LWLHV from the Help menu.
Contents 1 ♦ Welcome About the Companion............................................................................... 3 Linking to additional help.......................................................................... 3 What's new in Serif WebPlus 6.0... .......................................................... 4 ...and a legacy of powerful features: ........................................................ 5 Registration and support .....................................................................
5 ♦ Working with Graphics and Animation Graphics in WebPlus.............................................................................. 41 Importing a picture or animation............................................................. 42 Drawing basic lines and shapes............................................................. 43 Other tools and techniques .................................................................... 44 Adding animations...............................................................
1 Welcome
Welcome 3 About the Companion The WebPlus 6.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 Page Wizards—our built-in design assistants—and the WebPlus environment.
4 Welcome What's new in Serif WebPlus 6.0... Welcome to Serif WebPlus 6.0—the easiest way ever to get your business, organization, or household on the World Wide Web! Among new WebPlus 6.0 features, you’ll find... ♦ Integrated Wizard Technology for “Smart Documents” Easier, more powerful publication startup interface! Preview multiple Page Wizard categories and document choices—revisit your color scheme and text selections at any time as you continue to work with a publication.
Welcome 5 ♦ Table Editor and Calendar Wizard Use TablePlus to create colorful, sophisticated cell-based publication elements. Include formatted text and spreadsheet formulas; vary color and table style with a few mouse clicks! To create a calendar, choose from a wide variety of sizes and design options, then just click and drag to fit your calendar to a column or a whole page.
6 Welcome ♦ Animated GIF Wizard and Animation Library Add life to your Web pages! Choose from over 600 animated Animals, Cartoons, Dingbats, Logos, Objects, and more... ♦ Animated Marquee Wizard Custom-design your own varied and colorful multi-line text messages that scroll across the screen... ♦ Spell-Checking and Thesaurus Enhance your proofreading potential and ensure your site’s readability with these built-in support tools...
Welcome 7 Answer the on-screen questions to install the program. You’ll have the option of choosing a Recommended install (which optimizes performance by loading speed-critical files to your hard drive for best performance) or a Custom install (which lets you specify which components to copy to your hard drive). To reinstall the software or change the installation at a later date, select 6HWWLQJV &RQWURO 3DQHO from the Windows Start menu and then double-click the $GG 5HPRYH 3URJUDPV icon.
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.
Overview 13 How should I get started? You’ve already begun! Now, step through the chapters to learn how to create and then customize a basic Web site. Be sure to follow the instructions carefully. For support as you work, choose +HOS &RQWHQWV from the Help menu, then click +HOS RQ +HOS. There, you’ll learn about the HintLine, the Visual Reference, and other built-in learning aids.
3 Getting Started
Getting Started 17 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.
18 Getting Started Y Before proceeding with a QuickTour, take a moment to see what else is available in online help. Click the &RQWHQWV button at the upper left. The menu points you to the extensive Visual Reference and How To sections, as well as to other more specialized pages. Y Click +HOS RQ +HOS for some tips on how to proceed, tailored to individual levels of expertise and experience. When you’re done, you may want to branch out on your own—or you can tag along as the rest of us continue this tour...
Getting Started 19 For demonstration purposes, we will be working with the Formal Business Site Wizard. So at least for now, pretend you’re the Webmaster for a small business—it’s OK to use your imagination! Y Launch WebPlus or choose 1HZ from the File menu. Y You'll see the Startup Wizard. Select 8VH D 3DJH :L]DUG. Y Click on %XVLQHVV in the list of Page Wizard categories on the left hand side Page and then click on )RUPDO in the list of designs shown on the right hand side. Then click )LQLVK.
20 Getting Started Y Choose 6DYH from the File menu and save the untitled publication, using the folder and file name of your choice. 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.
Getting Started 21 Note that WebPlus displays one page of the six-page publication at a time. On the right side of the WebPlus window, you’ll see the new Studio— actually a cluster of seven special-purpose panels. Let’s preview them in sequence. Click each panel’s name to display it... Y The &RORUV panel (see below) lets you apply color and/or shading to an object. Y The &RORU 6FKHPHV panel displays a list of available color schemes that let you instantly revise colors in a Page Wizard publication.
22 Getting Started The Studio’s Colors, Text, and Lines panels 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.
Getting Started 23 Y You can also reload any saved WebPlus publication by choosing 1HZ from the File menu and selecting the 2SHQ 6DYHG :RUN option. You can work on any one publication at a time. To undo the most recent change, press &WUO =. (But you can’t undo a page addition or deletion, so use 5HYHUW to do that.) Customizing Wizard elements If you’re following along, you’ll have the Studio’s :L]DUG panel displayed at this point. (Otherwise, click :L]DUG on the right.
24 Getting Started Y Click the “Meadow” color scheme sample and notice that the newsletter’s body text turns purple. Now click the “Mint” scheme and the text turns black. Y As you switch back and forth, look closely at the top portion of the scheme samples, and you’ll see a group of five colors to the right of the scheme name. Note that that in each case it’s the first of the five scheme colors that’s being applied to the text. In Page Wizard publications, body text has been marked with “Scheme Color 1”.
Getting Started site concepts started” WebPlus menus and toolbars Contents / Visual Reference Click a menu or toolbar name Setting up pages Setting view options Using layout tools Contents / How To See topics in section “Work with Pages” 25
4 Working with Text
Working with Text 29 Now that you’ve reviewed the pages the Page 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. Two kinds of text Text in WebPlus is always contained in a box called a text object, and you can drag these boxes (and their text) around to position them anywhere on the page. The two kinds of text object are frame text and free text.
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 31 Working with text objects It’s easy to move or resize a text object. The appearance of the cursor over the selected object tells you what will happen if you click and drag at that point, and the technique is the same for either frame text or free text. Y Using the Pointer tool, select the “Here’s the place” text frame. Position the mouse pointer over the frame so the MOVE cursor is visible. Click and drag to move the frame a short distance, then press &WUO = to undo the move.
Working with Text Y Click the button on the left toolbar to select the Frame tool. Now locate some more empty space on the pasteboard, and click and drag out a marquee where you want the new frame to go. When you release the mouse button, an empty frame appears and the Frame Wizard materializes to assist you in setting up the frame. Y Click the 1H[W button four times, keeping the default options for new frames (one column, no margins, etc.).
Working with Text 33 At this point, you might take some time to experiment with creating more free and frame text objects. Don’t worry if you start to clutter up the workspace. You can delete any object simply by selecting it and pressing 'HOHWH. Remember that to select, move, or resize a text object, you should use the Pointer tool. The Text tool is reserved for editing the text contained in the box—not the box itself.
Working with Text Y To update WebPlus with your changes, click the button. To abandon changes, click $FFHSW &DQFHO. Note: While editing on the page you cannot select text in more than one text block at a time. To edit the whole story, use WritePlus. 47 For an illustrated overview of WritePlus, see QuickTour 3, 8VLQJ :ULWH3OXV. By the way, you may be wondering about the difference between editing standard text and Page Wizard “answer” text.
Working with Text 35 ♦ The Hyperlink color applies to hyperlinked text before it's been clicked on, while the same text after a Web visitor has clicked to “follow” the link takes on the Followed Hyperlink color. (The WebPlus sample displays these colors, but you’ll need to view the published site in a browser to preview the actual effect.) ♦ A Web site's Background, which is applied to every page, can be either a solid color or a tiled (repeated) picture, usually a bitmap pattern.
Working with Text Y Now right-click the frame and choose ,QVHUW WH[W ILOH . When the dialog reminds you that there’s already text in the frame, click 5HSODFH. Using the file selection dialog, open SAMPLE.DOC in the SERIF/WP60/SAMPLES/ folder, either in your main Program Files folder or on your WebPlus CD. WebPlus imports the file and places it in the frame. (For now, decline the AutoFit option, which would adjust the text size to fit the story precisely in the visible frame area.
Working with Text 47 If you’re interested in presenting text or numeric data on your Web pages, you’ll want to learn about TablePlus, the sophisticated table editor that’s built into WebPlus.
5 Working with Graphics and Animation
Working with Graphics and Animation 41 In this chapter, we’ll continue exploring the pages the Page Wizard provided—this time looking at pictures and graphic objects. Again, the focus will be on how to swap the placeholder images the Wizard installed for your own pictures, and how to create new graphic elements. Graphics in WebPlus Page Wizards may incorporate several different types of graphic objects into your publication.
42 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 43 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.
44 Working with Graphics and Animation The /LQH button lets you draw lines, while the 6KDSH button offers a whole flyout of possibilities, including ovals, polygons, arrows, stars, callouts, and so on. To create a button, try overlaying an unfilled shape on a text block, then hyperlink the graphic (see next chapter). Other tools and techniques You already know how to select, move, and resize objects. Here are several additional tricks you can carry out on selected objects.
Working with Graphics and Animation 47 47 45 Y To constrain the movement of an object to horizontal or vertical, use the keyboard arrow keys to nudge the selection up, down, left, or right. Alternatively, hold down the 6KLIW key after you begin dragging the object. For details, see QuickTour 8, 3RVLWLRQLQJ 2EMHFWV Y Use the WebPlus layout tools—including rulers, guides, the dot grid, and the Snapping button—to position and align items with precision for a professional appearance.
46 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, and (if using HTML 3.2) avoid overlapping the GIF with another object. 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 Lines and shapes Gallery and Portfolio Contents / How To See topics in section “Work with Graphics, Animation, and Multimedia” Importing images Index Select from “importing” Setting image tags Index Select “Web sites, setting picture display options” Animation Index Select “animation effects” Sound and video Index Select “sound” or “video” Working with colors Contents / How To See topics in section “Work with Colors and Transparency” 47
6 Working with Hyperlinks and Interactivity
Working with Hyperlinks and Interactivity 51 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.
52 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 53 Y Click slightly to the upper left of the boat, 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.
54 Working with Hyperlinks and Interactivity Clicking the ,QVHUW -DYD 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 57 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 such as VisualCities.
58 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 59 ♦ 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. When publishing to a folder, you have the option of overwriting existing HTML files with the same name (recommended); graphics are assigned new file names. Your site as a whole remains intact.
60 Previewing and Publishing Y Specify the number of pages to publish and click 2.. If you’re exporting in HTML 3.2 format (see next chapter), set additional choices if any. WebPlus exports the page(s) to temporary files, and then the Account Details dialog appears. Y By default, the dialog is set to publish to VisualCities. (If you’re using an alternate Web server, enter its FTP address.) All you need to do is enter your preassigned Username and Password.
Previewing and Publishing ? For help on... Choose from the Help menu... Then...
8 Starting from Scratch
Starting from Scratch 65 By now, we’ll assume 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.
66 Starting from Scratch You should ask yourself these basic questions: ♦ How many pages will you need? ♦ Which version of HTML will you use: 3.2 or 4.0? (See the section on HTML later in this chapter.
Starting from Scratch 67 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.
68 Starting from Scratch HTML 3.2 has the advantage of working on most browsers, but constrains your page design options, especially with regard to object placement. With HTML 3.2, WebPlus must construct Web pages using complex tables. Each object must fit in a separate cell, and any objects that overlap on the page must be converted to a single graphic, which can greatly add to the file size of freeform layouts. If you’re working in 3.2 mode, WebPlus flags overlapping objects with a red line border.
Starting from Scratch 69 ♦ The “performance” of your page is how long it takes for the whole page, including text and graphics, to display completely in a Web browser. Basically, it’s proportional to the total file size of its graphics. As a rule of thumb, use 60K bytes per page as a maximum. ♦ You can determine the actual size of your files by publishing one page at a time to a local folder (using the 3XEOLVK 6LWH WR )ROGHU button), then using Windows Explorer to examine the contents of the folder.
70 Starting from Scratch ♦ As you’re developing Web pages, you’ll probably need to carry out some housekeeping tasks on your local hard drive. Note that each time you publish one or more pages to a folder, a new set of image files is generated (although duplicate .HTML file names are overwritten). If you’re previewing pages this way, rather than using 3UHYLHZ 6LWH LQ %URZVHU (which overwrites old files), those GIF and JPG files can proliferate. It’s a good idea to weed out the old ones periodically.
Starting from Scratch 71 For additional design resources, product reviews, and information, choose 9LVLW 9LVXDO &LWLHV from the Help menu. Thanks for joining our product family...
