WebPlus 8.
©2002 Serif (Europe) Ltd. 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 (Europe) Ltd. Microsoft, Windows and the Windows logo are registered trademarks of Microsoft Corporation. All other trademarks acknowledged. Serif WebPlus 8.0 © 2002 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 (USA, Canada): The Software Center 13 Hampshire Drive, Suite 12, Hudson NH 03051 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 Welcome 1 About the Companion .............................................................................. 3 Linking to additional help ......................................................................... 3 What’s new in Serif WebPlus 8.0... .......................................................... 4 ...on top of these established features: .................................................... 6 Registration and support ......................................................................
Drawing lines and shapes...................................................................... 43 Other tools and techniques .................................................................... 46 Adding animations ................................................................................. 47 Adding sound and video ........................................................................ 48 Design Tips............................................................................................
Welcome
Welcome 3 About the Companion The WebPlus 8.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 8.0... Welcome to Serif WebPlus 8.0—the easiest way ever to get your business, organization, or household on the World Wide Web! Among new WebPlus 8.0 features, you’ll find... ♦ Enhanced Web Page Creation WebPlus 8.0 adds new power to its unparalleled ease-of-use in designing Web sites! Add your own responsive buttons with the multi-layered Rollover graphics option. Select from expanded format and compression choices for picture export.
Welcome 5 ♦ Enhanced Studio Bar with Page Manager More convenient and powerful than ever, the Studio’s tabs can now be floated, redocked, shown or hidden individually. It’s easier to select gallery categories, assign text, line, and fill colors, and vary shading. Plus the all-new Pages tab provides a graphical overview that lets you drag and drop to add or subtract pages and assign master pages, with instant access to the Page Manager for total control over page content.
6 Welcome ♦ Improved Text Handling Behind the scenes, our text engine works faster and better than ever—with secondary font caching and better handling of default text styles. We’ve added vertical alignment options for frame, table, and artistic text, and now you can add or remove words from your personal spell-check dictionary. ♦ More Amazing Image Manipulation Import images inline as part of frame text flow, and create your own 32-bit anti-aliased TIFFs and PNGs.
Welcome 7 ♦ Versatile Web Feature Support WebPlus supports HTML 4.0 for better WYSIWYG page design. Add sound and video—even Java and HTML code—to spice up your pages! The Layout Checker helps you fine-tune your site before it’s published. Then preview your site in your own Web browser and publish it to a local folder or a remote server. ♦ Animated GIFs and Marquees Add life to your Web pages! Choose from over 600 animated Animals, Cartoons, Dingbats, Logos, Objects, and more...
8 Welcome ♦ Gradient Fills For sophisticated illustrations and impressive typographic effects, select from a wide variety of Linear, Radial, and Conical fills. Use the interactive fill tool for drag-and-drop updating of fill nodes and colors. ♦ Transparency Effects Both solid and variable transparency let you add new depth to your print and Web creations. Apply transparency directly from the Studio, then edit nodes and opacity with the interactive tool.
Welcome 9 ♦ 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 8.0 To install the program, simply insert the WebPlus 8.0 CD-ROM into your CD-ROM drive. The AutoRun feature automatically starts the Setup process and all you need to do is answer the onscreen questions.
Overview
Overview 13 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. 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.
14 Overview When you’re ready to publish, WebPlus takes the publication’s pages and converts them to HTML and graphics (images). You never have to worry about the HTML code itself. How do I publish my Web site? Publishing a site using WebPlus is a one-step operation that: (1) converts your publication to files for the Web, and (2) copies the Web files to a location you specify—either a local hard disk or a Web host. To publish to a local folder, you don’t even need a connection to the Internet.
Getting Started
Getting Started 17 Once WebPlus has been installed, you’ll be ready to start. Setup adds a Serif WebPlus 8.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). WebPlus launches, and you’ll see the Startup Wizard. WebPlus Startup Wizard Now you can see the normal starting screen.
18 Getting Started Whether you’re an old hand, or just getting started with WebPlus 8.0, here’s a recommended sequence: From the Startup Wizard, choose View a QuickTour to see an illustrated overview of WebPlus fundamentals. From the first screen, click the Next button to step forward. Use the Previous button to step back or the Begin button to return to the first screen. Click Cancel to exit the QuickTour.
Getting Started 19 Notice that the Business category is initially selected, with thumbnails for the available Wizards displayed on the right. We’re going to use the second one (Arch), so click its picture to select it, then click Finish. WebPlus retrieves the Wizard and displays it in Wizard Preview mode. Here’s where you can initially add your own information to the design. The upper section of the Wizard lists several categories that you can customize, with “Business Details” selected.
20 Getting Started Scroll down and click the “Carrot” color scheme sample. Notice that much of the text on the Web page turns orange. Now click the “Cuba” scheme and the text turns green. 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.
Getting Started 21 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, Arrange & View toolbars Text & Frame toolbars Tools toolbar Page Area Studio (Wizard panel shown) Pasteboard Area ChangeBar HintLine toolbar Move the mouse pointer around the screen and you’ll see popup tooltips that identify many items.
22 Getting Started The Attributes tab (see illustration) includes five separate panels that let you customize properties of on-screen elements.
Getting Started 23 Toolbars and Studio tabs are initially arranged in a convenient layout around the perimeter of the work area. However, you have full control over this arrangement, and can customize the display any way you want—by showing or hiding toolbars and tabs, or repositioning them onscreen in a way that suits your style.
24 Getting Started To revert to the previously saved copy of your publication, choose Revert from the File menu. It’s a good idea to save your work often! You can also reload any saved WebPlus publication by choosing New from the File menu and selecting the Open a Publication option. You can open multiple publications and switch between edit windows if you like. To undo the most recent change, press Ctrl+Z. (Note that you can’t undo a page addition or deletion.
Getting Started 25 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...
Working with Text
Working with Text 29 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. 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.
30 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 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. 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.
32 Working with Text 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 Edit Story 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 33 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! Using the Pointer tool, right-click the “Here’s the place” frame.
34 Working with Text Set initial text properties (font, style, etc.) as needed before typing, using the Text toolbar, Format menu, right-click menu (choose Text Format), and/or Attributes tab. Then just type normally to enter text. 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. Note, however, that artistic text you’ve dragged to resize is published as a graphic.
Working with Text 35 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. Other operations involve selecting text within the table, or parts of the table. Within each cell, you can click for an insertion point or drag to select a range of text. You can also drag to select multiple cells, rows, or columns, which in effect selects all the text in that region.
36 Working with Text ♦ 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. The tiled picture option works just like desktop “wallpaper”—so a small bitmap can go a long way. The color scheme sample shows if the scheme uses a tiled bitmap.
Working with Text 37 ♦ Headlines and subheadlines are useful devices to facilitate scanning (scrolling) and to break up the monotony of longer stories. Use left aligned rather than centered heads. Avoid headline text larger than 24pt, which looks amateurish, and all-uppercase headlines, which can be hard to read. For variety, you can color the heads and subheads differently from body text—just don’t overdo it! ♦ In general, it’s not a good idea to use more than one column for story text.
38 Working with Text 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.
Working with Graphics, Animation & Multimedia
Working with Graphics, Animation, and Multimedia 41 In this chapter, we’ll continue exploring the pages the Web Wizard provided—this time looking at images and graphic objects. The focus will be on how to replace the placeholder images the Wizard installed with your own images, 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, 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. 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.
Working with Graphics, Animation, and Multimedia 43 By the way, the WebPlus 8.0 Resource CD-ROM includes a bonus collection of 20,000 WebArt images, including arrows, bullets/buttons, icons, lines, and animations as well as pictorial Web graphics. You can peruse the collection using your Web browser, then drag and drop images directly into WebPlus. To choose animations, use Insert/Web Object/Animated GIF.... For details, search for “WebArt” in the online help index.
Working with Graphics, Animation, and Multimedia You can use the Pointer tool to adjust lines once you’ve drawn them. The techniques are the same whether you’re editing a separate line object or the outline of a closed shape. Simply select the line and drag its bounding box to move or resize it. Drag a line segment to reshape it, or select an individual node and drag to move it, or adjust the node’s control handles to change the profile of the adjacent segment(s).
Working with Graphics, Animation, and Multimedia 45 Now display the Attributes tab’s Color 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 Apply to Line or Apply to Fill. (Left-clicking a sample applies the solid color or shade to the selected object’s fill.). The panel also features Fill, Text, and Line buttons that let you preselect which attribute your color selection will affect.
Working with Graphics, Animation, and Multimedia 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. 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.
Working with Graphics, Animation, and Multimedia 47 Adding animations WebPlus lets you add two varieties of eye-catching animation effects to any Web page: animated marquees (scrolling text banners) and GIF animations. Using Wizards, you can preview the animation and/or customize the effect. Once placed into your Web publication, the animations appear static, but they will spring to life once the site has been exported and a visitor views your page in a Web browser.
Working with Graphics, Animation, and Multimedia 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. You can include linked sound or video, triggered by a mouse click (for example on an icon or hyperlinked object. In addition, you can define background sounds where a sound loads and plays automatically when a specific page is first displayed in the visitor’s Web browser.
Working with Graphics, Animation, and Multimedia 49 Design Tips Graphics You can obtain pictorial content in lots of ways: scanning, grabbing screen images, using clip art, creating from scratch. No matter where you get an image, you’ll need to modify it in some way: cropping or enhancing it, adding text, applying a special effect, combining it with another image. For these tasks, you don’t have to be a great artist, but you do need to know your way around a paint program like Serif PhotoPlus.
Working with Graphics, Animation, and Multimedia ♦ Avoid blocky, rectangular shapes, which tend to make the page look closed, static, and amateurish. Rounder and softer-edged images tend to open up the page. ♦ Include graphic effects that combine hard-edge and soft-edge; drop shadows are a good example. The soft-edge effect known as anti-aliasing is one of the basic tricks of the computer graphics artist. The effect gets rid of “jaggies” along edges by subtly applying intermediate colors.
Working with Graphics, Animation, and Multimedia 51 Here’s some very general advice on which Web image formats to use when importing. There’s a great deal more detail on formats and conversion options in online help—the topic referenced above is a “must read”! ♦ Use the Import Picture button (or Insert/Picture... command) to bring images into WebPlus, rather than pasting them via the Clipboard. The fewer filter transformations an image has to undergo, the better. ♦ Use the .
Working with Graphics, Animation, and Multimedia Bear in mind that not all your visitors’ computers will match your own for speed or graphic display. Like the .GIF format, some monitors are still limited to 256 colors. It’s generally a good idea to switch your display to 256 colors and test the page in a browser before finally publishing it. This will ensure you’re using colors in a way that won't present problems when displayed on average systems.
Working with Graphics, Animation, and Multimedia 53 For your convenience, WebPlus includes two swatch panels incorporating the Web-safe colors. (Look for WEBSAFE1.GIF and WEBSAFE2.GIF in the /WP80/SAMPLES folder.) You can paste either one into your paint program’s “canvas” area and pick colors from it using the program’s eye dropper tool. Or you can load the supplied WEBSAFE.PAL palette so it’s used in the color selection table.
Working with Graphics, Animation, and Multimedia Is there anything you can do to reduce the total size of your graphics, aside from using fewer graphics? An obvious suggestion is to make them no larger than they need to be to get your point across. Since file size increases as the square of each dimension, shrinking both height and width by 50% reduces the file size by 75%.
Working with Graphics, Animation, and Multimedia 55 Multimedia Considering all the cautionary advice here about reducing file sizes to achieve acceptable load time on home-based Web browsers, a foray into multimedia is clearly not for the faint of heart! Although WebPlus 8.0 allows you to insert both audio and video files—and will even embed the files in the original publication to facilitate your efforts— from a design standpoint this feature should be regarded as rather experimental.
Working with Graphics, Animation, and Multimedia And while video on the Web may be “not quite ready for prime time,” don’t overlook the possibilities of creative audio. You can add entertainment value and interest with well-selected, short audio clips like single words or phrases, themes, sound effects, and the like. For longer clips, we suggest you use the inline option, which provides a small on-screen player.
Working with Hyperlinks and Interactivity
Working with Hyperlinks and Interactivity 59 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.
60 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 Hyperlink button. The same dialog would appear, and then linking would be simply a matter of choosing the destination and clicking OK. 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 61 Using hotspots and rollovers A hotspot is a transparent hyperlink region on a Web page. Usually placed on top of bitmap images, hotspots act like buttons that respond when clicked in a Web browser. They are especially useful if you want the visitor to be able to click on different parts of a picture (such as a graphic “menu” or map of your site). To give you an idea of how they work, we’ll need to create one.
62 Working with Hyperlinks and Interactivity WebPlus lets you add rollover graphics to your Web publications; the necessary event-trapping code is generated for you automatically. Adding rollovers is basically a matter of deciding which rollover state(s) you’ll want to define for a particular object (Normal, Over, Down, and/or Down+Over), then specifying an image for each state. For details, consult online help.
Working with Hyperlinks and Interactivity 63 As with HTML, WebPlus inserts a marker into your publication at the site where the code will run. The marker’s dimensions probably won’t correspond exactly to those of the applet when it’s running, so plan your page layout accordingly, and the more preview tests you can run (using various versions of different browsers), the better.
64 Working with Hyperlinks and Interactivity Navigation buttons As we’ve mentioned, a navigation bar is a valuable basic layout element. Besides using hyperlinked text, you can employ buttons created as hypergraphics: images with hyperlinks or hotspots applied. If your site adheres to the basic section/level model (as detailed in the “Web Design from Scratch” chapter), then you’ll want to provide links to the Home page as well as to the various section menu pages.
Working with Hyperlinks and Interactivity 65 To aid navigation, you can vary the bar’s appearance from section to section, with the button for the current section appearing emphasized or highlighted in some way. Perhaps the most economical solution combines a basic set of buttons on the master page with a bullet or pointer graphic on the page level to denote the current section. This approach works especially well with a vertical list, e.g.
66 Working with Hyperlinks and Interactivity The navigation bar is tremendously useful, but the structure of your site may call for other kinds of navigational links. For example, suppose several pages comprise a natural sequence. Perhaps a long story or report has been broken into several sections, or directory listings are arranged alphabetically. In such situations, create a browse sequence using a mini-navigation bar that lets the user step forward or backward through the series.
Working with Hyperlinks and Interactivity 67 Hypergraphics Hypergraphics in WebPlus come in two flavors: graphic objects to which a hyperlink has been attached (using Insert/Hyperlink...) and those with one or more hotspots superimposed using the Hotspot tool. The choice is usually obvious. If you’re creating a button bar using separate shapes for buttons, use individual links for each graphic (or rollovers, discussed above). If your bar consists of a single graphic, use hotspots.
68 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! When you’re building your Web site, however, you may wish to use Tools/Hyperlink Manager... to get a overview of all the links in your publication. You can see the destinations at a glance, check URLs, and display any hyperlink for closer inspection. For additional details, see online help. ? For help on...
Previewing, Publishing, and Maintaining the Site
Previewing, Publishing, and Maintaining the Site 71 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 (images) so that a Web browser can display them. You can publish either to a local folder or to an Internet-based Web host.
72 Previewing, Publishing, and Maintaining the Site 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.
Previewing, Publishing, and Maintaining the Site 73 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.
74 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! 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).
Previewing, Publishing, and Maintaining the Site 75 Maintaining your site Once you’ve published your site to the World Wide Web (see the previous topic), 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 publication! When you republish pages into the same folder, duplicate .
76 Previewing, Publishing, and Maintaining the Site 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.
Previewing, Publishing, and Maintaining the Site 77 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...
Web Design from Scratch
Web Design from Scratch 81 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.
82 Web Design from Scratch Don’t set out to overwhelm or overdesign. The simplest site may work best. What will succeed is the result of understanding who’s in your audience, and what they bring to what you have to offer. 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.
Web Design from Scratch 83 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.
84 Web Design from Scratch ♦ The level is the number of steps (i.e. jumps) a given page is removed from the Home page. Considering the Home page as Level 1, then, section menu pages are Level 2. Pages one step “below” the section menu are Level 3. This is basically a “hierarchical” or “tree” model, based on the concept of one Home page as a root or point of entry, with other pages branching away from it.
Web Design from Scratch 85 Over time, you’ll be adding content. The section pages will probably evolve into menu pages, with content migrating to newly-added Level 3 pages. You’ll be prepared for this growth if you’ve started out with a clear model of your site’s structure. Navigation Web sites present unique challenges that don’t arise in the world of print.
86 Web Design from Scratch But the most effective approach, and one that deserves as much attention as the design of your Home page, involves designing a navigation bar or “navbar” that will serve as: ♦ An element of the site’s page composition; ♦ A visual reminder of where the user is; ♦ A functional tool to enable jumps between sections of the site. 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.
Web Design from Scratch 87 Page Layout As long as people are still reading Web pages, as opposed to watching them or listening to them, everything you’ve been taught about editorial style and text organization has relevance—so don’t throw away that old style manual! Readers respond to good design and clear, concise writing. They’ll respect the fact that you understand the proper way to tell a story or convey an idea: the relation of headlines to body text, the use of subheads, and so on.
88 Web Design from Scratch In general, Web page headers and footers need to contain more information than those in a conventional publication. The Web site title, which appears immediately in the browser’s title bar as the first page loads, should convey your site’s identity accurately, and even with a touch of wit. The top matter should include a logo or other identifying motif, as well as a page title (so users know they’ve come to the right place).
Web Design from Scratch 89 WebPlus includes two default Web page sizes: Standard for VGA monitors, Wide for SVGA. The latter (800x600) option is fine for most users. The bottom of the WebPlus page is fixed, too, but a Web browser will only display as far as the bottom object on each page. If there’s a chance you’ll be including pages with a lot of text, requiring users to scroll down, you can increase the height value for the page to give yourself some extra room.
90 Web Design from Scratch The Home page can be a cross between a greeting card, a magazine cover, an advertisement, and a main menu for the rest of your site. There’s no question that well-rendered graphics add interest, but don’t feel obligated to illustrate every single section link with its own GIF. Remember that some users still turn off graphic loading when browsing Web sites, in order to speed up access to textual info and skip advertising.
Web Design from Scratch 91 Make sure you’ve reviewed the mechanics of working with text, graphics, sound and video (if applicable), and hyperlinks before focusing on these questions: Given your basic page composition, how will you vary the layout of each page? Where will your graphics come from? Will you be using any photographs? Do you need to create line or QuickShape graphics in WebPlus? In addition to hyperlinks for your navigation bar and/or footer, where else could you place links for users’ c
92 Web Design from Scratch Suggested Resources Print Nielsen, J., and Tahir, M. 2001. Homepage usability: 50 Websites deconstructed. Indianapolis, IN: New Riders Publishing. Critical analysis of popular Web home pages, with well-researched design insights. Siegel, D. 2002. Creating killer web sites. 3rd ed. Indianapolis, IN: New Riders Publishing. Proven resource; past editions graphically over the top, but technically rich. Strunk, W., and White, E.B. 1999. The elements of style. 4th ed.
Web Design from Scratch 93 www.serif.com Forums, updates, and tips for users of all Serif products. Online Glossary lets you browse the full version of our Desktop Publishing QuickReference (see Chapter 6). www.sun.com/980713/webwriting/ Writing for the Web. Authored by Jakob Nielsen et al. (see Print resources), classic research-based guidelines to improve usability. www.wdvl.com Web Developer’s Virtual Library (WDVL).
Index A alternate text, 90 animations, 47 anti-aliasing, 50 artistic text, 29, 33, 64 Attributes tab, 34, 44 B Background color, 36 browse sequence, 63, 66 browsers, 13 C ChangeBar, 65 Clipboard, 51 color, 45 color palettes, 52 color schemes, 19, 35 Convert to Picture, 42 copyright notice, 89 Crop tool, 46 Curve toolbar, 44 Curved Line tool, 43 D design checklist, 91 page layout, 87 pre-planning, 81 site structure and navigation, 83 tips, 36, 49, 63, 76 dithering, 52 dot grid, 46 E editing text, 31 F f
importing images, 51 text, 33 installation, 9 J Java, inserting applets, 62 JPEG, 51 Pointer tool, 29, 41, 44, 60, 61 pre-planning, 81 Preview Site in Browser command, 71 Proof Reader Wizard, 71 Publish Site to Disk Folder command, 53, 73 Publish Site to Web command, 74 publishing Web sites, 14, 73, 74 Q L Layout Checker Wizard, 71 layout grid, 46 line (outline) property, 33, 44 lines, drawing, 43 Link button (text frames), 30 links.
T tables, 29, 34 text artistic text, 29, 33, 64 editing, 31 importing, 33 Insert Date or Time, 88 tables, 29, 34 text frames, 29 Text Manager, 71 Thesaurus, 71 title (of site), 88 toolbars customizing, 23 tools Artistic Text, 33 Crop, 46 Curved Line, 43 Frame, 31 Freehand Line, 43 Pointer, 29, 41, 44, 60, 61 QuickShape, 44 Rotate, 46 Straight Line, 43 Table, 34 Transparency, 45 transparency, 45 V video clips, 48, 55 view options, 23 W Web color settings, 35 Web Picture Manager, 50, 90 Web Wizards, 13, 18
