Part 3 - Assembling a Web Authoring Toolkit

If we look at this document as a continuum, with the idea of building The Perfect Page in part 1 and the (hopefully) whiz-bang result being uploaded at the end of part 8, this section could be said to signify the sort of Perfect Pages that are inherently simple in nature. Thus, the techniques in this section are ideally suited to beginners, but rather than patronize or bore more advanced users, let us assume instead that your well-thought-out design is one of virtuous simplicity.

As many Web authors -- both novice and accomplished -- have discovered, you don’t need much of a toolkit to put together a web page. Naturally, more advanced tools often ease the creative process, but more than a few HTML pages have been put together with nothing more than the Windows Notepad or Macintosh SimpleText editors. These tools, while limited (as in “features? What features?”), are in surprisingly wide use by amateur web authors who favor them for their speed and their minuscule memory requirements. Of course, the fact that they are included as part of the system software helps, too.

Basic Text Editors

Notepad (Windows 3.x or later)

Pros: Small, fast, included with Windows system software.

Cons: Does not keep word-wrap settings between sessions. Does not interpret cross-platform files well; end-of-line markers are often displayed as black boxes, formatting is lost. Can’t handle large files, no replace. No graphics or HTML tag support.

SimpleText (Macintosh)

Pros: Small, fast, included with Mac system software.

Cons: Does not interpret cross-platform files well; line-feed characters from a PC are interpreted as hollow boxes at the beginning of the next line, due to the fact that, unlike PCs, Macs perform a line feed with each carriage return.

Recommendation: neither program is well-suited to web-page authoring tasks. Consider trying some of the other tools (listed below) that are commercially available or, in many cases, freely downloadable from the Net.

Speaking of system software, it’s worth mentioning that users of both Windows 3.x and 68K Macintoshes are losing out on some of the better aspects of the Web, and certainly many of the programs and techniques discussed in this book are oriented toward users of 32-bit Windows (95 and NT) and Power Macintosh. For example, these platforms have more advanced browsers (i.e., Internet Explorer 5.0), and better multimedia add-ons (some Mac 3D-related applications, for example, require system software features only able to run on a Power Macintosh), and so on. If you do not have a computer that can run one of these operating systems, consider upgrading. Not only is is much easier to design and implement advanced web pages when one is not unduly limited by an inability to run the latest software, but the long filenames possible with 32-bit versions of Windows are much less hassle that DOS’ 8-dot-3 limitations.

Undoubtedly, many web authoring acolytes get started with the “borrow from the best” method. They surf the web until they find a page they like the look of, view the source, select it with the mouse, copy it to the Clipboard (CTRL-C on a PC; Command-C on a Mac) and paste it into their favorite text editor. Change the words of the text, delete the parts you don’t need or paste a section in from another page, add a graphic or two, and that’s it. While obviously, this isn’t a very creative way of assembling a page, it works well as a learning tool.

The second technique is, of course, to create the code for the page yourself There are tools that incorporate “Wizard” functions, that walk you, step by step, through a set of descriptive dialogs that help you build a basic framework more or less automatically. Some people prefer bare-bones text editors, allowing them direct access to the various HTML tags; others like the comfort of a WYSIWYG[1] environment, where the codes are hidden while the page is laid out. Still others use tools that are a kind of hybrid of these latter two genres. In fact, I employ all four categories of tools for different purposes and I suspect you might find it advantageous to do the same.

Now, I don’t think it matters much whether you like a tool that I hate, or vice versa. I’m not interested in picking sides in the browser wars or getting into a debate over the relative merits of this-or-that tool. The point here is to help you put together a Web toolkit that works. I’ve gone through several hard-disks worth of downloads, demo versions and not-for-resale eval units as part of my job as Senior editor of The Computer Paper. Here are my some of the tools I have found to work the best in each genre, with some observations and recommendations. (Mac and Windows tools are listed separately.)

Enhanced Text Editors

HomeSite (Windows)

Pros: small, fast and stable, with many useful features. Extended HTML tag support for Navigator and Internet Explorer. Early versions were free. Version 2.0+ is shareware.

Cons: built-in browser uses Microsoft Internet Control Pack, displays pages imperfectly. (A version of the free release without the built-in browser, and which does not require the ICP, is also available.)

Comments: I used HomeSite as my default HTML editor on the Windows platform for several years, and set WS_FTP to edit files with it instead of Notepad. Exactly how to configure WS_FTP to do this is discussed in Module 9, but here is a summary of the key configuration options:

Demo: WS-FTP options

By setting your favorite HTML editor as the default ediutor in WS-FTP, this popular File Transfer Protocol client can download, edit and re-upload files in a single, simple, operation by right-clicking a remote file and choosing “Edit.”

BBEdit (Mac)

Pros: small, fast and stable, with many useful features. Extended HTML tag support and syntax checking available in recent versions. “Lite” version is freely downloadable shareware.

PageSpinner (Mac) - easy to use, library of examples to copy-and-paste from. Support for latest Netscape tags. Shareware.

WYSIWYG editors

Netscape Gold 3.0 (Windows and Macintosh); Netscape Communicator

Pros: Simple tool for easily combining text and multiple graphics on an HTML page. Freely downloadable; extensive feature set; includes all Navigator browser functions. Easy to learn and use.

Cons: Limited functionality compared to many other Web page editors; supported document import types limited to plain text, HTML and a few graphics formats.

FrontPage (Windows and NT)

Pros: The #1 editor is relatively inexpensive, includes complete web authoring and publishing toolkit, easy to use. Imports text, HTML, RTF, and a variety of graphics formats. Easy to learn and use.

Cons: Some awkwardly implemented features; creating a directory and performing other common tasks not as easy as it should be, particularly in versions prior to FrontPage 2000. Modifies HTML code on some pages. Not compatible with CFM (Cold Fusion) files.

Tools

Beyond Notepad

In the "old days" of Web-page authoring, the HTML editor of choice for many Webmasters was Notepad (or its Macintosh equivalent, SimpleText). Despite the many automated functions and other advantages of more advanced web-authoring tools, many authors continue to use a basic text editor for its direct access to the HTML tags that make up a page.

While it is not my intention to impose any one view of how you should approach your web-page building activities, there are a few issues to consider.

1) Web pages with "active" content such as plug-ins and/or (especially) ActiveX controls tend to require HTML coding that is near the limit of what most people would consider "hand-creatable."

Consider this object tag, which inserts an Internet Explorer-compatible ActiveX object on a page. In Module 6, I'll discuss how to assemble such pages in detail, but for now, simply consider that such pages are probably not worth typing in by hand, when freely available tools exist that can insert such code automatically.

At a more fundamental level, there are literally dozens of commercial Web page authoring tools now on the market, and what seem like hundreds more available through shareware and online channels. Should you invest in these tools? A couple of years ago, I would have had to say "probably not," and then gone on to qualify that statement with an explanation of their limitations and potential applications. While some of these issues remain, there are a few factors that have changed since the first few generations of authoring tools appeared.

1. the newer tools support advanced HTML features and make it relatively easy to add such functionality to your web pages.
2. looking at things from a purely pragmatic point of view, you can assemble a professional-looking page more quickly with one of these tools than without.

It is probably safe to say that there is no single ideal web authoring tool. Most Web authors will probably continue to use a variety of tools for different purposes. While there are many magazine articles and books that give cursory overviews of dozens of different tools, this book focuses on what I have found to be the best, and describes how to use them in detail to accomplish common tasks. Fortunately, most of the tools this book covers are freely available online, in demo or evaluation form, so you can discover for yourself whether they will serve your needs without making a huge financial investment. Naturally, both the software developers and I heartily encourage you to make that investment when you have determined that the tools will do the jobs you require. See the appendix entitled "Shareware on the CD" for more info. Here are what I consider to be the best choices, and why: Basic page creation WYSIWYG editor Editing an existing page simple text editor WYSIWYG editor Adding Forms, Tables and/or advanced formatting to a page: WYSIWYG editor Adding Netscape and/or Internet Explorer-specific tags to an existing page simple text editor WYSIWYG editor Graphics Adobe Photoshop, etc. Each of these tools, and tips regarding their use, are discussed in later sections of the book.

WYSIWYG editors

FrontPage (for Windows from Microsoft US$149; US$109.95 for Office 95 owners.)

• PageMill 2.0 (for Macintosh from Adobe US$99)
• HTMLed (for Windows by Internet Software
• Technologies. $129.95; educational pricing available)
• Hot Dog Pro (for Windows by Sausage Software. US$79.95)

Claris Home Page (Windows/Mac) Claris Home Page is available for Mac and 32-bit Windows. I’m not a huge fan of this program, but it’s worth a look.

WordPerfect

Corel WordPerfect for Windows (version 7 or newer) has strong web links and HTML publishing abilities, including translation both to and from HTML, table support and WYSIWYG editing. WP has strong links to the World Wide Web, and I was able to use it as a WYSIWYG Web page editor without reading the manual, simply by using one of the "Do it for me" Wizards in the Help menu. Unlike some programs (PageMaker 6.x comes to mind), WP7's "Web mode" disables all features that wouldn't translate properly to HTML, so pages are likely to display as intended, once posted onto the Net. Another interesting feature is the program's emphasis on accessing online information. A Taskbar function called QuickTasks includes an option to "Read my Web Pages." This opens a Wizard-driven dialog that lets you add or remove pages of news, stock prices, comics or other information (several are provided) and read the data. An animated marquee in the upper corner of the screen tells you what to do – this function helps to minimize guesswork or manual reading for basic functions. Converting information from HTML is not as common as converting TO it, but both are possible in WP7 or newer releases. There's even a Browse Connect function in the taskbar that displays a list of your Web browser's Bookmarks. When clicked, it launches your selected Netscape browser. Right-clicking the mouse button on the Win95 desktop produces the New... submenu, to which the Corel software has added several blank document templates. WordPerfect Corporation bundles WordPerfect 3.5.1 with some versions of CorelDraw for Macintosh. WordPerfect 3.5.x for Macintosh -- originally a commercial product included in CorelDraw suite For Power Macintosh or available separately – is now free at www.corel.com. It includes support for the creation and editing of HTML documents.

Microsoft Word and Office

Internet Assistant for Word (Windows and Macintosh versions available from Microsoft’s web site. Freeware) If you’re a Word fan, you might want to check out Internet Assistant. Personally, I don’t like it, but that’s probably because it’s so slow. Microsoft incorporated the features from this add-on into Word 2000, and added a number of other features. These features are discussed at length in a separate section. Notably, Word 2000 is able to open HTML documents much larger than FrontPage is capable of handling.
Building a Table of Contents - automatically Named Anchors A common HTML feature that deserves a mention here is Named Anchors. While the basic principle is not complex – goes to your target -- the automation of the creation of these names is worth some discussion. You can use this feature to build a table of contents that is either a separate file, or a section at the beginning of your document that automatically links to all the sections defined as headlines. Here’s how. The best tool I have found for creating a TOC is RTF2HTML, a freeware utility that is avialble on virtually every platform. (DOS and Mac versions are on the CD.) As the name implies, it takes an RTF file and converts it to HTML. Of course, the catch is that you need to have a word processor that can save as RTF, but this is quite common these days, so I’ll assume you can deal with that. The basic procedure is as follows:

1. set up RTF2HTML so that it recognizes your word-processed document’s headline and subhead styles. The RTF2HTML program’s documentation describes the process thoroughly, so I won’t repeat it here, except to say that it’s not difficult – you just type the style names. The program defaults to the standard Microsoft Word style names (Normal, Heading 1, Heading 2, etc.), so in many cases you won’t have to do anything unless you have customized your style sheets.
2. save the text from your word processor as RTF
3. run it through RTF2HTML

The program outputs two files: an HTML file, with virtually all the original document’s text stylings (bold, italics, etc.) intact, and a ToC.htm file that has a corresponding link to every style sheet entry the program matched up. The file quicktips.htm on the CD shows an example. pic: quicktipsTOC.gif Image Maps There are several kinds of image map:

• Server-driven
• client-side
• “fake” (cut up pictures)
• those controlled by Java, ShockWave, etc.

The fake variety are the easiest to implement, and are the most compatible. Unlike a server-driven map, they will continue to work when downloaded to the user’s drive, or archived on a CD-ROM. Here’s an example of how to create one.Load the image you want to make a clickable map out of into your graphics program (I’ll use Photoshop, but the same technique will work in virtually any bitmap-oriented program). Set the background color to red, or another bright color not dominant in your image.

1. Select areas of the picture with the rectangular selection tool and cut them to the Clipboard.
2. If the Cut process does not replace the selected area with your bright (red) background color, fill the now-cut selection. The reason for doing this is so that we will be able to line up the next selection exactly.
3. Paste the contents of the clipboard into a new document and save.
4. repeat until the entire picture is cut up. Do not overlap, or include any of the red background in each section.
5. Now, assemble the graphics using your favorite WYSIWYG HTML-with-graphics editor.

Here is how the code might look, using Netscape Navigator Gold to assemble the pieces. The best tool I’ve seen to create advanced image maps and “sliced” pictures is FireWorks, from www.macromedia.com. Image Map creation Map This, available from http://www.ecaetc.ohio-state.edu/tc/mt/ is a popular freeware image map editor. It is a program written to run on Windows 3.1/3.11, Windows NT and Windows 95. Here’s how you can use it it to create, edit and convert clickable image maps for the Web. (Example graphic) I have seen some weird Mac-related problems with spurious characters causing image maps to not work correctly. The easiest solution seems to be to simply load the files into a PC and then upload. Claris Home Page can create image maps, as well. The beta 1 release doesn't support progressive JPEGs, though. Task: Create a web page Using FireWorks. (Do the tutorial in the program’s Help menu.) For more help on creating image maps and creating graphics for Web content development, look in the newsgroup comp.infosystems.www.authoring.images.

Text Techniques

Here are some techniques and tricks that I have found useful.

• Copying text from Netscape Navigator preserves formatting; copying text from Microsoft Internet Explorer does not. While this would seem to be an advantage for Netscape, in fact, I find there are more times when I want to copy text from one page (say, to put a page of plain text into a columnar format) without keeping the formatting. At any rate, you have a choice. Note that copying HTML source behaves identically in both programs – they both preserve formatting such as indents, etc.
• IE is also adept at preserving Links and Images when pasting into a program such as FrontPage.

This way, a basic page (headline at the top, block of text with a picture or two) can have standard header or footer graphics added with ease. Assuming that you have assembled a basic page using one of the above tools, consider the pros and cons of Absolute vs. Relative URLS.

Typography

Typography on the Web

One of the best places to focus your efforts in developing a better web site should be in its typography. The reason is simple - type is fast, and speed counts for much on the web. While the HTML language is admittedly limited in this regard, there are a number of things that can be done to maximize its typographical potential.

Web Typography: markup entities

In the world of desktop publishing, there are many typographical subtleties and not all are readily available from the PC or Mac keyboard. In this section, we will examine the limitations of HTML in this regard, and then discuss how to create these special symbols anyway. Why? Because you can always create type as a graphic or an Acrobat PDF file (discussed in detail in module 6), and eliminate these limitations. Thus, the expert web designer should be aware of typographical finery such as ligatures (Þ, ß), kerning pairs, “typographer’s quotes” (Þrst/last quotation marks), special symbols (such as this dotless “’”—very tough to do on a PC), foreign letters and accent marks. It should be noted that all of the above are somewhat easier to create on a Mac than on a Windows PC. Indeed, the typographical richness of the Mac is one of the key reasons why it is so favored by the publishing crowd. Before we discuss these symbols further, let’s look at what HTML cannot do, and why not. Unfortunately, relatively few typographical controls are available in HTML and because web authors cannot be certain what browser, character sets or screen configuration the user has, the markup can produces widely differing results. Some products, such as HoTMetaL Pro 3.0, include a “Special Characters” palette from which you can click and choose extended characters from the ISO Latin-I character set and other special characters. When HoTMetaL and similar editors save a markup file, they automatically convert certain non-ASCII characters to appropriate HTML entities. Examples: CHR($0233) (é) is converted to é. To create quotes, use the following codes: "your text goes here"Not all entities are supported by every browser. For example, Netscape version 2.0 added support for the ® (Registered Trademark ®) and © (Copyright ©) symbols. These entities are unlikely to be displayed correctly on older browsers.

PC Character Sets

Characters 129 and higher in Windows character sets can be typed by holding the Alt key and typing a sequence of numbers on the keypad. Here are the codes for some common typographical marks. For a complete list of character codes, see the Character Map utility supplied with Windows.

Alt 0133= … Alt 0145 = ‘ Alt 0146 = ’ Alt 0147 = “ Alt 0148 = ” Alt 0149 = • Alt 151 = — Alt 0152 = ˜ Alt 0150 = – Alt 0153 = ™ Alt 0162 = ¢ Alt 0169 = © Alt 0174 = ® Alt 0188 = ¼ Alt 0189 = ½ Alt 0190 = ¾ Alt 0224 = à Alt 0233 = é Macintosh Option ; = … Option [ = ‘ Option ] = ’ Option Shift [ = “ Option Shift ] = ” Option 8 = • Option Shift - = — Shift ` = ˜ Option - = – Option 2 = ™ Option 4 = ¢ Option g = © Option r = ® Option ` a = à Option e e = é

Fractions are not available as part of standard Mac character sets, although some so-called Expert Collections include them.

Enhancing Text

Custom Typefaces

There are a number of ways you can add custom typefaces to your pages. the

tag

H E A D L I N E S M A L L E R T E X T

Here’s a slightly more elaborate variation. Note the forced space ( ) to visually center the “Welcome to” line. As well, note the use of a smaller font setting after the “TCP.” This is a pretty sad excuse for kerning, but it’s as close as you can get in basic HTML, but without this smaller space, the logo didn’t look right.

 Welcome to TCP Interactive W E B S I T E H O M E P A G E

Note, however, that you may run into trouble with even as simple a trick as the   symbol used above. On a Mac with the character set defined as Western (MacRoman), for example, the CHR$ (160) character shows up as what looks like a giant lower-case letter “t.” Sigh. Also, notice how Internet Explorer 2.1 for Macintosh interprets the lower part of the page very differently than its PC sibling. Incorporating Links into the design. You may find that it is possible to incorporate links into your text design. Here are some examples:

The non-breaking spaces are set to Underline mode for some sections, which creates the line. Note also the efforts at character and word spacing and the small caps of the lower line.

Drop Caps

Drop caps are common in desktop publishing, but relatively rare on web pages. There are several ways to make one, but the easiest and most compatible way is to simply use a graphic for the first letter and wrap the text around it as follows: You’ll find two complete alphabets and a selection of Fancy Caps in the DROPCAPS folder on the CD-ROM. The collection labeled PLAIN-K is an entire upper-case alphabet saved as separate 36-point letters in non-anti-aliased transparent GIF format. It is suitable for placement onto any light-colored page, with any background image. Set two is called PLAIN-W. It is the same as the above set, but depicts white text. Set three is called AWHITEBG and is anti-aliased black text for use on a white background. These characters do not display “jaggies” as discernible as those on the PLAIN sets. Set four is called ADARKBG and is, as you can undoubtedly imagine, anti-aliased white text for use on a dark background. If you are planning to build your own set of bitmapped (GIF) drop caps, here are some things to note: a 36-pixel high Drop Cap graphic will allow text to wrap neatly on the third line in most browsers. Slightly larger sizes (a 38-point cap, for example) would leave an ugly space below the Cap. If your drop cap doesn’t quite fit, you can tweak the IMG height with the tag’s HEIGHT attribute: (Assuming the cap is 48 points high, but there is 54 pixels worth of available space) Be careful when using height and width to “fake” other image sizes. Too much stretching and the image will suffer. If you are cropping letters close to their height, be careful of rounded letters, which extend above and below the height of flat letters on the line they are on. Note also that, in proportional typefaces, characters are different widths and thus should be cropped individually. Test one or two letters before creating an entire set. In summary, GIF drop caps are your best bet. They display well in all browsers (even ancient ones) and load relatively quickly (not as quickly as text, though). Although, being a graphics, the type is not easily edited, it doesn’t matter much if you simply upload the entire DROPCAPS directory to your web site. Then, it is easy to change.

Small Caps are Elegant

In addition to drop caps, there are numerous other examples of finesse that we can easily add to take a web page from the realm of the ordinary. Such small details as Small Caps, for example, are another easily added item that, when used in moderation, can add class and style to your page. Small Caps can either be implemented via absolute FONT SIZE tags or relative size tags. Here are examples of each. Font Size tags are supported by most Web browsers at this point, and the effect if a browser lacks support is not unpleasant. Thus, it is a relatively safe and compatible page enhancement. Absolute font sizes: A B S O L U T E  F O N T  S I Z E S Relative sizes: T H E  C O M P U T E R  P A P E R


Cascading Style Sheets

When the Cascading Style Sheets currently supported by Microsoft Internet Explorer 3.0 become commonplace in other Web browsers (and I believe they will – Netscape has already committed to supporting them in a future version of Navigator), drop caps and many other sophisticated text stylings will be much easier to implement. Here is a simple CSS style sheet for a drop cap.

Although the above example is a “brute force” style of making a drop cap (rather analogous to the way drop caps had to be made in PageMaker 4.2), the CSS specs allows for true drop caps (at least in theory – I couldn’t get it to work, even after hunting down a bug due to a problem in the documentation), as the following excerpt from the CSS1 (July 1996 draft) spec shows: The 'first-letter' pseudo-element The 'first-letter' pseudo-element is used for "initial caps" and "drop caps" which are common typographic effects. All normal properties 'first-letter' elements and the formatting should be accordingly. This is how you could make a dropcap initial letter span two lines:

The first few words of an article in The Economist.

As mentioned above, I couldn’t get this particular effect to work on Microsoft Internet Explorer 3.0. Braden N. McDaniel (bra...@shadow.net) details several examples of how the final version of Internet Explorer 3.0 does not fully implement CSS1 at his web site: http://www.shadow.net/~braden/nostyle/. And of course, Cascading Style Sheets don’t work at all in Navigator 3.0 or earlier. But future versions will, and I guarantee that you will be hearing and seeing a lot more about them in the near future. Study and begin to implement CSS now – it’s an important emerging standard. More on CSS Microsoft’s Web site has some tremendous examples of what’s possible with style sheets. Check them out at http://www.microsoft.com/truetype/css/gallery/entrance.htm The Cascading Style Sheet, level 1, specification is at http://www.w3.org/pub/WWW/TR/WD-css1.html

Tables

Tables are the secret to many types of advanced page designs. One design tool that really takes table-based design to the nth degree is NetObjects’ Fusion. This program uses tables extensively to give a fine degree of control over the layout. In fact, according to a FAQ list at the company’s web site, “Fusion's page authoring tools [are] entirely table-based. The software also provides automatic site building and data publishing tools. Check it out at http://www.netobjects.com/home.html Navigator 3.0 and later supports tables with colored cells (compatible table-color tags are used in Microsoft Internet Explorer version 2.0 and newer). The BGCOLOR tags are inserted into the table’s tags as in the following example:

As we shall see many times throughout this book, tables are remarkably versatile. For example, notice how a table without a border, and only one cell provides a highlighting effect for your headline or body text.

Table Tutorials Navigator 3.0 and later also added a number of tags that make it easier to create layouts that look as though they have been professionally published. Notably, the SPACER tag adds horizontal or vertical space to a layout like this: or The MULTICOL tag creates multiple column very easily. Keep in mind that, as the author of PageSpinner for Macintosh wisely points out in his shareware program’s excellent on-screen tutorials, long texts set in columns will be annoying to read since the reader has to scroll up and down in the window. Not only for this reason, but because both of these tags are, at this writing, supported by Netscape only, I am inclined to recommend other, more compatible methods of performing these functions. Fortunately, there are lots of choices. First, let’s look at other ways of adding spacers to a layout.

Adding horizontal space to a layout

Method#1 - Most compatible: using a transparent GIF one pixel high x the number of pixels wide you wish your spacer to be. The only drawback to this method is the graphic icon that may be visible while the page loads. your picture or text is indented 16 pixels. You can specify the height and/or width of the graphic, forcing your graphic to be however wide or tall you wish. In Navigator 1.1 or newer and Internet Explorer 3.0 or newer, you can also specify GIF or JPEG graphics sizes as a percentage of your screen size. Note that some other browsers will ignore image size percentages and show the image at its actual size , thus it is not a good idea to design a page with a IMG height or width value significantly smaller than 100 percent specified.

Method #2 - Specifying space using

. The main drawback is that Internet Explorer and Navigator treat Unordered List indent values somewhat differently. IE3 indents less, thus text sometimes interferes with background designs. Method #3 - Specifying space using Tables Drawback: more complicated to design, tables not supported by all browsers (but handled by most!) Method#4 - using Blockquote It is possible to indent sections of your code using the

tag, as in:

indented text

but there are a couple of significant drawbacks to using blockquote as an indent mechanism. First, you cannot precisely control the level to which it indents. Second, it indents from both the left and right sides, and third, some older versions of Mosaic italicize block-quoted text. Method #5 - least compatible Netscape’s spacer tag (usage syntax described earlier). The advantage of the tag is that it gives you precise pixel-level control. However, at this writing, Internet Explorer ignores the tag (as do virtually all browsers other than Navigator 3.0 and later). Thus, Multicol is best used when you are delivering other Netscape-specific content. I can think of at least two other methods of inserting space into your web pages: the

tag and by specifying the   (non-breaking space) character. Both are highly compatible with most web browsers.

has a few drawbacks. First, it changes the font to a monospace face (e.g., Courier) – obviously, this isn’t a problem if you are only inserting spaces. Second, it makes text that doesn’t wrap to the window dimensions.

-- a non-breaking space – is a highly compatible way of simulating the SPACER tag effect, except that it works with every browser I’ve seen. Note that Netscape has other extended codes that can come in handy, such as the non-breaking word tag. See the Netscape extended tags list in appendix 6 for details.

Table Tricks

Creating Columns with Table Tricks

The gray background strip shown here was created as a long narrow GIF background (one pixel high); the text was set as a table to create columns.

Pro:

At this time, tables are the most widely supported way to create complex layouts in HTML.

Con:

complex table layouts are quite difficult to program by hand.. Frankly, I do not recommend building tables by hand. There are simply too many good tools freely available to justify doing it the hard way. Yes, there are a few enhancements you might want to manually add to tables, such as coloring individual cells, but do yourself a favor and use a table-building tool to assemble the basic structure, okay? I'd recommend Netscape Communicator and/or Microsoft FrontPage Express as basic, easy-to-use tools. At the time of this writing, both tools are freely downloadable. Here is how to use each one to create multicolumn text.

Navigator

1. Click New Document>Blank from the File menu.
2. Select Insert>Table>Table...
3. Enter the number of rows and columns you wish. For this example, let's say you want two columns of text with two rows in each column. We'll put our headlines in the top rows in a moment.
4. switch to your word processor (or a separate Navigator Window) and select one half of the text.
5. Copy it to the Clipboard (CTRL-C on a PC; Command-C on a Mac)
6. place the insertion point in the bottom row of the left column.
7. Paste.
8. Repeat 4-7 for the right side, using the rest of your text.

Communicator, despite more a few bugs in most recent versions, has proven to be a simple and versatile table making tool. You can, for example, easily define colors for any or all cells in your table by right-clicking (click and hold on a Mac) inside the table and checking the boxes for Row, Cell or Table labeled Color. If you set the border value to "0," your text will appear in columns with no visible table borders. Netscape supports the left, right or center alignment of Tables, as well. Edit button to enter edit mode Another alternative to coding columns by using tables is to use Adobe Acrobat.Another table trick is to insert a graphic in your table. You can make it automatically scale to fit the available window dimensions. Click here and then try resizing the WebTricks window. Note the alternative text that is visible when graphics are turned off.

Creating Columns with Multicol tag

Usage:

...insert text you want to be formatted in multiple columns here. Here is an excerpt from Netscape's documentation for the new tag. Multi-column Text: The

tag is a container, and all the HTML between the starting and ending tag will be displayed in a multi-column format. The tag can be nested, although multi-column text within multi-column text becomes quickly unreadable. The attributes of this tag are COLS, GUTTER, and WIDTH. The COLS attribute is mandatory and controls how many columns the display will be split into. Layout will attempt to flow elements evenly across the columns to make each column have about the same height. Unless the WIDTH attribute is specified, column width is adjusted to fill the available view. The GUTTER attribute controls the pixels of space between columns. It defaults to a value of 10. The WIDTH attribute controls the width of an individual column. All columns are always the same width, so the overall width of a multi-column layout is:

(cols * width) + ((cols - 1) * gutter)

Controlling Leading

In the days of old-fashioned typewriters, we were pretty much limited to single or double spacing. Traditional typography and any reasonably sophisticated desktop publishing application gave us the ability to precisely control the so-called leading (rhymes with bedding) of our text, and generally described leading values in points. A point, as you may know, is roughly 1/72 of an inch and is often rounded off to this value. HTML, unfortunately, basically thrusts us back into the dark days of single- or double-spacing, unless we resort to some tricks of varying fanciness. Here are your best bets.

Spacer

Netscape Navigator 3.0 introduced a new tag called SPACER. You can use the new SPACER tag supported in to put horizontal, vertical, and block spaces in your HTML document. Pros: best control and easiest editing of leading values Cons: not currently supported in any other browser. Usage: Example:

TABLE of
CONTENTS
Welcome!

Leading using graphics

By using a thin graphic between your lines of text, you can implement a reasonable facsimile. Because the latest Netscape and Microsoft browsers support graphics height and width tag values expressed in percentages, it is also possible to have a HEIGHT=3% value that will make your line-spacing automatically resize to fit the available screen size. Note that too much leading is considered a Bad Thing in the DTP world, as is leading that is too tight. But it may be worth a experiment on your part. I put the variable leading effect to good use on the list at the left size (that’s a borderless frame, by the way) of The Computer Paper’s home page. Notice how the text resizes to fit in a 640x480 page (figure 1), but expands to better fill a 1024x768 screen (figure 2), as well.

Leading using Font Size or Headline tags

It is possible to control the amount of space between lines with FONT SIZE=x, where x is a value between 1 (the smallest setting) to 7. A typical place you might use this effect would be in the headline or author credit area of a page, where getting just the right amount of white space is most important. A similar effect can be achieved with headline

...

tags, although due to the fact that headline tags force a carriage return and line feed to occur, they are less suitable than using FONT tags.

Leading using tables

Borderless tables, as mentioned earlier, are a tremendously versatile layout tool. You can specify height and width of cells or entire tables as either absolute pixels or as percentages of the user’s screen size.

Kerning – sort of

Kerning is the relative positioning of two characters. In a desktop publishing program such as QuarkXpress or PageMaker, you do not select text in order to kern it, you merely position the insertion point between the characters you wish to kern, and invoke the appropriate command. Lamentably, there are no such controls in HTML. However, there are a few things we can do to approximate certain effects.
1. By inserting very small, invisible characters in between your words or letters, you can approximate a kerned effect. You can use font size commands to create different inter-word spacing, or you can use font color tags to set a link or character to be identical to the background color (perfect for those “Find the missing Link” party games). Beware. Using a font color command for this purpose is a Bad Idea. I’d only recommend such tactics if the page you are creating relies heavily on a plug-in or other feature that more or less guarantees your audience will be using a known web browser.
2. Monospaced fonts are interesting -- in moderation.

Graphic behind Text

An apparent bug in Netscape Navigator (all versions) presents an interesting possibility: displaying a graphic behind text. It's a novel, not-often-seen effect that can be used to great effect, particularly if you first make sure your audience is using a Netscape browser (see Module 10 for details on how to query browsers and feed them appropriate HTML code). There is only one catch, other than the Netscape-only requirement. You must set up the page so that the user has to scroll down to see the text you want to have a graphic behind. A good example of this effect is at none other than Jackie Chan's Home Page.

Graphic partially in front of Text

While it is technically possible – at least in Netscape 2.0 or later -- to force text to be displayed behind a graphic, it is neither recommended nor reliable. The technique that works the most reliably is to define an animated GIF with at least two frames (they can be identical or different, depending on whether you want an animated effect or not). Then, place the graphic far enough down on the page that the user must scroll down to view it. The way Netscape redraws the screen will put the text on top of the graphic, as in the preceding example. Then, the multiframe GIF redraws the graphic and... graphic pops to the top. It’s an extremely gratuitous effect, I’ll admit, but you’ve never seen it before, have you? Me neither. It is best suited to pages where you have already determined that only Netscape users will be viewing the effect. You can perform a browser query and send special Netscape-only pages using a JavaScript such as the one described in Module 9 in the section called “For Netscape Only.” If you absolutely must have text show up behind a graphic in all browsers, you should either define the text as a graphic and place the graphic as a background (see BACKGROUND) or assemble the foreground graphic to include the text as part of the bitmap (See GIF and JPEG). Depending on what you hope to achieve from your web site, there are certain effects that will prove to be more appropriate than others. I will attempt a generalized analysis below, but only you can determine what is truly appropriate for your particular audience and application. Although I'm sure most of you will already be familiar with the HTML tags used to define basic effects such as colored backgrounds and so on, please bear with me, or if you are anxious to get to the meatier subjects, refer to later pages in this module. Things will become more interesting soon enough, and these elementary tags and principles are included for the sake of completeness. Here, in short form, is a list of the most common web-page effects, and their respective pros and cons.

Colored background - RRGGBB Method #1

Pro: no load-time overhead; compatible with the majority of web browsers. Can be used in conjunction with bitmapped background (see below). Cons: There is some speculation that the hexadecimal color numbering system may be discontinued in future versions of the HTML spec in favor of text-only color descriptions. (See method #2, below.) Comments: Studies of the human eye have shown that blue (#0000FF) is a highly effective background color. White (#FFFFFF), gray (#BFBFBF) and black (#000000) are also popular background colors. Usage: Frankly, I'll be surprised if virtually all Web browsers do not continue to support the hexadecimal numbering method for color descriptions. It is a relatively safe bet that Netscape Navigator and Microsoft Internet Explorer, at least, will support these tags in future releases. Even in a worst-case scenario, a required change would be trivial for you to implement at a later date. To set the background color to blue, we use , where the first two digits signify the red gun of the RGB display (set to "00," therefore, the red gun is off). The green gun, too is set to "00," while the blue gun is set to FF. If you are not familiar with the hexadecimal, or base 16, numbering system, it basically works like this. Decimal = Hexadecimal (often abbreviated as "Hex" or $) 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 A 11 B 12 C 13 D 14 E 15 F 16 10 17 11 and so on... Thus, when our decimal numbering system gets to "one group of ten and no groups of one," were write it down as 10. In base 16, the symbol "10" therefore refers to "one group of sixteen and no groups of one." Taking this further, when we have "fifteen groups of 16 and 15," we write it as FF. When you multiply the numbers out (in the base 10 arithmetic system, we'd say 15 x 16 + 15 = 255), you get the maximum value that a byte can hold. As you may know, a byte is a unit of computer memory generally considered to be equivalent to one character. The letters "A" and "B," for example, can each be expressed in one byte of memory or disk space.

Colored background - Text Method #2

Pro: no load-time overhead; compatible with recent releases of Netscape Navigator, Microsoft Internet Explorer and other web browsers. Can be used in conjunction with bitmapped background (see below). Cons: The text method of defining colors allows a limited number of colors to be defined, unlike the RRGGBB method, which allows a whopping 16.8 million (255 x 255 x 255) possible colors. Comments: same as in method #1, above. Usage: , where "BLUE" can be any of the following:

black olive blue maroon teal red navy gray lime white fuschia green purple yellow aqua

Additional notes:

1) Netscape Navigator version 1.1 and older allowed the use of multiple BODY tags, making it possible to create backgrounds that faded from one color to another when the page was loaded. This "feature" (Netscape characterized it as a bug) was removed in Navigator version 1.2 and later releases. For better or worse, Microsoft Internet Explorer (as of the final version 3.0 release, at least), still supports this effect and other possibilities afforded by multiple BODY tags. Note, however, that on faster PCs, the background colors change so quickly, that the effect is not visible. Although I do not particularly recommend using this fading BGCOLOR effect, here is an example of it, in which the background (initially set to black for compatibility purposes) fades from a medium gray to black:

For the sake of compatibility, we put the same values at the top and bottom of the list. This allows browsers such as Netscape Navigator 1.22 or later to display the correct colors, as some browsers only support one instance of the BODY tag. Note that, when using a dark background color as we have here, it is important to set the TEXT and LINK colors as well. These tags will be discussed later.

Title Tricks

In much the same way as the preceding example, older releases of Netscape Navigator and current versions of Microsoft Internet Explorer allow the use of multiple TITLE tags. For compatibility with current Navigator releases, you should put a default value at the top of the list, as newer Netscape releases only read the first TITLE tag pair. Because of its dubious compatibility and potentially annoying nature, this trick is not particularly recommended; it is an interesting effect nonetheless. Don't tell them you read about it here, okay?

Bitmapped Backgrounds

As mentioned earlier, most web browsers support custom backgrounds. In addition to setting the BGCOLOR attribute, we can also define a bitmapped background. The concept of bitmapped backgrounds will undoubtedly be familiar to nearly everyone who has used a Windows PC or a Macintosh, so I won't belabor the point, except to describe the essential characteristics and various possibilities. Bitmapped backgrounds add interest to a page with relatively low performance penalty, as text loads before the background in most browsers. BGCOLOR can be set to a similar color, so that the screen immediately turns the right color; then the bitmap appears. Non-interlaced and interlaced GIF backgrounds are possible, as are JPEG and progressive JPEG images. Warning: bitmapped backgrounds sometimes produces undesirable tiling effects for users with high-resolution screens Notes: Bitmapped backgrounds may be of the GIF 87, GIF89a, JPEG or progressive JPEG types, but most browsers do not support animated GIF backgrounds. Basic backgrounds are supported by Netscape Navigator, Internet Explorer, NCSA Mosaic and most other browsers. Basic usage:

Extended usage:

the bgproperties=fixed attribute is supported by Microsoft Internet Explorer, and allows a bitmap background to act as though it was locked in place. When the user scrolls up or down a page, the fixed background stays put. It is also possible, using JavaScript, to make a background image scroll. Finally, it is worth mentioning how to snag a background from someone else's web site. While I am not recommending nor condoning any form of plagiarism, it may prove useful to be able to acquire a background from a page out on the Web, in order to examine how it was created. Here's how: 1) First, go to the page that has a background you like. For the sake of illustration, let's say you like the background at http://tcp.ca/gsb 2) Next, view the source code for that page. In Netscape Navigator and most other browsers, the View Source... command is under the View menu. In the source (excerpted here), look for the line with the word BACKGROUND in it: 3) Copy the text between the quotes to the clipboard with CTRL-C (if you are using a PC) or Command-C (Mac). In other words, you are copying the directory name(s) and the filename of the bitmapped background to the clipboard. In our example, the graphic is stored at http://tcp.ca/gsb/Tiles/BG-DecoScallop2.JPG 4) Then, simply paste this text into your browser's location bar, appending it to the domain name already there. If this doesn't work, refer to The Glossary of Terms at the end of the book and look up "subdirectory" for more info on how subdirectories work. Be sure to check the Glossary section if you run across other terms you aren't familiar with, as well. 5) With a little luck, a single tile of the bitmapped background will appear in the upper-left corner of your browser window. You can then hold down the right mouse button (Windows) and select Save Image as.... to save the image to any location you choose. (On a Mac, just hold the mouse button down for a moment; the Save Image As... option will pop up after a few seconds.) Note that filenames are always case-specific. Often Mac and Windows users don't notice case-sensitive filename problems until after they upload files to a Unix server. ALWAYS check your links after uploading. I'll discuss the mechanics of uploading in the TOOLS module. Bitmapped Background Type #1: repeating tiles Creating your own bitmapped background is extremely easy. You can use just about any type of image you want (except an animated one!), and there is a practically endless supply of paint programs and image utilities freely available on the Net to make it with. The best tool, bar none, for creating seamlessly tiled backgrounds has to be Fractal Design Corp.'s Painter. This is not an inexpensive program but fortunately, the company has graciously put a demo version on the Net that just happens to be perfectly capable of creating tiled or textured backgrounds and many other amazing effects. Best of all (Sshh! -- Don't tell them!), you can easily get around the fact that the demo version has its Save function disabled. Macintosh and Windows versions of the Painter 4.0 demo are available at Fractal's FTP site at the following locations, respectively: ftp://ftp.fractal.com/pub/mac/demos/Painter_4_Demo.hqx ftp://ftp.fractal.com/pub/win/demos/P4Demo95.EXE Nearly all of the backgrounds in the Tiles directory on the CD-ROM included with this book were created with Fractal Painter (the full version, I might add, which I highly recommend!). Here's how to create a seamless tile with Fractal Painter. (You'll find additional information in the Painter 4 Help file by searching for "wrap") 1) Launch the Painter Demo (or the full version, of course, if the option is available). 2) Select New from the file menu. 3) Enter a size for the tile you are going to create. For your first tile, try entering 100 (pixels) by 100. Click OK. 4) The blank document window will appear. If you wish, you can drag the window to resize it and zoom in by holding down CTRL and tapping the + key. (Command-+ on a Mac). 5) On the right hand side of the screen, you'll see a palette called Art Materials. (It will most likely say Art Materials:Color.) Pull down the Pattern menu and choose either Define Pattern or Make Fractal Pattern. The former option is best if you want to hand-paint your own tiled image; the fractal pattern will automatically create a seamlessly tiled pattern that resembles clouds. The Painter Help file describes other possibilities, too. For the sake of illustration, let's choose the Define Pattern option. 6) Nothing much seems to have changed, but it has! Now that you have defined your 100x100-pixel square as a pattern, as soon as you paint off any edge of the image, your stroke will appear on the opposite side of the canvas. Try clicking the downward-facing triangle near the middle of the brushes palette. This pops open a drawer of painting tools. Locate the one that looks like a garden hose. This is the so-called Image Hose, and it is just one of the interesting painting tools available. Try holding the mouse button and "hosing" images across your pattern tile. Notice how the pattern wraps around automatically. Creating a seamless tile couldn't be easier. Now we need to save the file. 7) The only catch is... the Painter Demo has the Save and Copy to Clipboard functions disabled.... or does it? As it turns out, the Copy to Clipboard function is indeed disabled, but the ability to capture the entire screen is still fully functional. On a Windows PC, this is accomplished by pressing Print Screen (next to the F12 key). Hence, we merely need to make sure we can see the entire image on the screen unobstructed by tool palettes or window borders, copy the screen to the Windows clipboard in this way, switch to another program (Windows users will find that the shareware title Paint Shop Pro, included on the CD, fills the bill nicely), select Paste from the edit menu, crop off the unnecessary parts of the image and, as they say...voila. I'll admit it is easier with the full version of Painter (just hit Save), but the Painter demo version is a great way to get started. The process to convince the save-disabled demo versions of paint programs such as Painter and Photoshop (etc.) to save your screen are different on a Mac, but just as easy -- and just as diabolically effective. On a Mac, simply press Command-Shift-3. You'll hear a shutter sound as the Mac produces a PICT file called Picture x on your hard drive's root directory, where x is a number. Just load this file into any paint program that supports PICT files (they all do), and crop away. If you can save as a GIF or JPEG, your file is ready, if not, you will have to convert it with a tool such as GraphicConverter or any other Mac utility that supports these file types. An array of tools are supplied on the CD, in the "Mac" folder. In fact, Painter offers three ways to create patterns: By defining the current image as a pattern and adding it to the pattern library. By creating a rectangular selection and capturing it as a pattern. By making a fractal pattern and adding it to the library. Figure 4.1 Painter-tile.JPG Caption: Creating seamless tiles in Fractal Painter. Painter can define any image as a pattern file. Open the image file; choose Art Materials Palette: Pattern menu> Define Pattern. Defining an image as a pattern gives the painting tools wrap-around characteristics. Tips for Creating Seamless Tiles Even with these advanced tools, it is likely that not all of the patterns you create will tile 100% to your satisfaction. The most common problem is an obvious repeating motif that seems out of place. For example, the leaf pattern shown in Figure 4.1, above, displays a fairly obvious pair of "bright leaves" that ruin the effect. Painter has another feature called wrap-around seams that lets you move the edges of the pattern tile to the center of the image, where their tonal differences are more apparent and easier to correct. With the Grabber Tool (it looks like a hand) selected, you simply hold down the Shift key and drag the seams of a pattern to the center of the image. Holding down the space bar temporarily invokes the Grabber tool while you are using any other tool, so you could press Shift-Space while you are painting with, say, the Image Hose, drag the seams, release the Shift key and Space bar, and continue painting. Note that you must have defined a pattern for this "seam dragging" trick to work. It is not quite as easy to create a pattern tile in Photoshop as it is in Painter, but Photoshop, too, is an excellent choice as a Web graphics tool. In fact, I might go as far as to suggest that Adobe Photoshop is probably the best tool for the creation of bitmapped graphics for the Web. It's certainly one of the most popular. And, surprise, surprise: you can download a free demo version of Photoshop, too, although Adobe has for some reason so far only made a Mac version available at its Web site (http://www.adobe.com/). Here is how to create a seamless pattern in Photoshop (You'll find additional information in the Photoshop Help file). 1) Install and launch the Photoshop Demo (or full version, if available). 2) Select New from the file menu, 3) Enter a size for the tile you are going to create. For this tile, enter 400 (pixels) by 400. Make sure Mode is set to RGB and Contents is set to White. Click OK. 4) The blank document window will appear. Now, use the various paint tools to create an image, concentrating your images primarily in the lower right-hand or lower left-hand side. Photoshop has no wrap-around paint mode, so we'll have to create a seamless edge as a separate operation. 5) After you've created your "first pass" imagery in one "quadrant" of the tile, select the menu Filter>Other>Offset... and, in the dialog box that appears, enter a value approximately one-half the size of your file. As you recall, our file was 400 by 400; therefore, we'll enter 200 and 200 for the vertical and horizontal offset values, ensuring that the Wrap Around... option is selected. 6) When you click OK, the file is offset by the amount you specified. 7) Now, repeat steps 5 and 6 a few times, filling in any holes that emerge after offsetting the image. If you know Photoshop well enough to be able to operate the Rubber Stamp tool, you can also apply this Offset-and-repeat trick to photographic images (or virtually any other kind). The Rubber Stamp, I've always thought, was somewhat of a misnomer. It's really more of a miraculous image cloning tool. After you've tried this trick, you might agree. To use the rubber stamp, you must define a source point on the image. On the Windows version of Photoshop, this is done by holding down the ALT key and clicking on the area of the image you wish to clone. On a Mac, the source point is defined by holding the Option Key. For our image, we want to define a source point after offsetting the image, as detailed in step #5, above. Once the source point is defined, you simply let go of the ALT key, move to the area of the image you want to clone the source imagery onto, hold down the mouse button and the source imagery is "cloned" wherever you move the mouse. Fairly miraculous. The process to save a file from the demo version of Photoshop is identical to that of Fractal Painter, with only one exception: you can hide the menubar and window borders by clicking the icon in the extreme bottom-right of the toolbox (you'll use the bottom-left icon to bring them back!). You can now hide the toolbox and palettes by pressing the TAB key. It makes PRINT SCREEN dumps of Photoshop images particularly easy to work with. You might not need to crop the images at all. To return the toolbar after you've dumped the screen, press TAB again. As with Painter, the full version of Photoshop is, of course, highly recommended and adds a bevy of useful features, including direct GIF89a and JPEG support. The full version also permits you to save alpha channels and layers -- both functions that are, of course, unavailable in the save-disabled demo. Bitmapped Background Type #2: Wide TilesAnother type of background is the wide tile. Here, you use a file that’s at least one pixel high by a width that reasonably exceeds the maximum resolution of your viewing audience. As very few people have screens set to higher than 1280 x 1024 pixels, I usually set my wide background tiles to be 1280 pixels wide. Some possible themes that can be created with wide tiles include: lined “foolscap” paper spiral-bound notepad sheet music left-to-right gradients etc. Optimizing backgrounds The files shown here demonstrate several things:

1. how much smaller JPEG files can be than an equivalent GIF.
2. how JPEG can deteriorate your image’s quality.
3. how an emboss effect can quite realistically simulate a carved or bas-relief surface.

The files were created in Fractal Painter and processed with Ulead’s GIF and JPEG SmartSavers, with the intention of obtaining the smallest files possible. The JPEG is 7K; the GIF is 27K. Some images compress better than others. In figure 3, a 33K file is compressed down to 4.7K with little discernible loss using the JPEG SmartSaver

Lining up Foregrounds and Backgrounds

How to make a foreground graphic exactly line up with a bitmapped background. I’m embarrassed to tell you how long it took me to get this working... but now that I’ve finally figured it out you don’t have to. Just load your background graphic into an image editor, and make a selection starting 10 pixels to the right, and 16 pixels down from the upper left corner. When you drop this graphic – be it a GIF or a JPEG – onto your background, it will exactly line up. This allows some neat effects. Imagine an animated GIF overlaid onto a background object. An example of a few of the possible effects are in the folder called MATCHBG.

Animated Backgrounds - Maybe

Recent versions of Internet Explorer support the use of an animated GIF as a background file, but be warned: these images don’t even show up in Navigator, and 3.0 and older versions of Internet Explorer only show the first frame. The file anim_gif_as_bg.htm demonstrates the effect – or lack thereof. The graphic in the above example, by the way, was created in Aldus (AKA Adobe) TextureMaker, which has a close cousin known as CorelTexture that is part of the CorelDraw Suite for Macintosh. As mentioned earlier, a simple JavaScript can produce an animated background effect.

The “Pseudo-animated” Background Effect

This is one of the most interesting effects I know of – and I sure haven’t seen it elsewhere. In fact, the only explanation I’ve seen of how to it – in Lynda Weinman’s Designing Web Graphics book – is incorrect. That book maintains that you shave eight pixels off the top and left side of a graphic to get it to line up with the background. Well, that’s sure not the way it works in Netscape Navigator 3.0 and later or Microsoft Internet Explorer 2.x or 3.0. On a Mac, it doesn't really matter what you name the files, as GIFbuilder can load batches of files by dragging-and-dropping them into its Frames window. It will load virtually any number of GIF files with any names, and it can sort by creation date. Note that you might have to increase GIFbuilder's default memory allocation if you are processing large quantities of images with it. On the Hieroglyphics example described below, GIFbuilder's 3MB memory partition was insufficient, and the program wouldn't complete the assembly of an animated GIF until I upped the memory allocation (To do this, select File: Get Info from the finder and increase the memory allocation units in the dialog that appears). On Windows, the names you choose for your files matter more. GIF Construction Set, for example, lists files alphabetically. Thus, if you name your files 1.gif, 2.gif and so on, you'll find that 1.gif is followed by 10.gif in the directory list. To ease importing large quantities of images, name sequences 01.gif, 02.gif. etc. Another limitation of GIFCON is that, like most PC programs, it doesn't show files unless they end in one of the graphics filetype extensions it knows. Therefore, if you are using a Mac to create or process graphics files, you must name them with PC-friendly names. Here's the technique I found works the best. ( Keyboard shortcuts are shown for PC/Mac) Start with your completed background tile. In my example, I started with a GIF of a wall covered with Egyptian hieroglyphics. Then, use Photoshop's rubber stamp to erase all of the hieroglyphics, leaving a blank wall. Then Select All (CTRL-A/Command-A), copy the now-blank wall image to the Clipboard (Edit:Copy), created a new document (File:New…) and paste the image into the new document. Save this document as BG-WALL.GIF -- it will eventually become our web page's background image. Note that the Rubber stamp tool is not anti-aliased unless you are in RGB mode. In fact, it's much more convenient NOT to be in RGB mode for lengthy animations. Then, Select All hold down CTRL+ALT (Command+Option on Mac) and use the cursor keys to move the selection marquee over exactly 10 pixels, and down 16 pixels (e.g., press Cursor-right 10 times and Cursor down 16 times). Do not deselect this selection and do not save this file during the following steps. Once you've got the selection area offset, you are ready to create your frames. By pressing ALT while dragging the Eraser around the picture, you can perform what Adobe calls a "Magic erase" function. In the Hieroglyphics example, I unerased the blank wall back to the Hieroglyphics-covered wall little by little. After each letter was "carved," I copied the selection to the clipboard and pasted it into a new document, which I then saved. Note: you cannot crop the "unerased" picture with the offset selection, nor can you save it. Doing either of these things will disable the ability to perform the Magic Erase. This I saved as my background file, BG-WALL.GIF. I saved it with Interlace set to OFF, although you can have Interlaced files or JPEGs (even the progressive JPEG variety) if you wish. The reason you might want to leave the interlacing off is in case the animation starts to play before the background is fully de-interlaced -- it would destroy the illusion. You can load images 20 through 29 by selecting the first one, pressing Shift and then selecting the last one. The checkbox that says "use this setting for subsequent images" will allow you to specify your choice of palette only once for the group. Select "use local palette." Despite its potentially more laborious file-import operations, the output of my test files from GIFCON showed it to produce better results than GIFbuilder on the Mac. I performed three tests, all from the same source files: GIFbuilder default settings (system palette) - resulted in a terrible-looking, off-color image. GIFbuilder "best" setting (optimum palette) - resulted in an image that had a discernible color cast and did not precisely match the background. GIF Construction Set (local palette) - resulted in an image that exactly matched the background. If you decide to put text on the same line as the foreground graphic, another wrinkle emerges. For reasons I've never quite figured out, the image moves over a few pixels when the ALIGN=LEFT attribute is added to the IMG tag. You can solve this in one of several ways: 1) By adding an HPACE value to the IMG tag 2) by setting the graphic and text in separate cells in a table 3) by using a graphic representation of your text instead of "real" text on that line. Option 2 is shown in the following example. Note that tables, like graphics are offset from the left margin 10 pixels. Thus, we have entered the size of the graphic (281 pixels) less 10 for our cell width of the text cell. This allows the graphic to exactly line up with the background. Unfortunately, aligning foregrounds and backgrounds is an inexact science. Various browsers behave differently - When an image has text wrapped around it (via ALIGN=LEFT), IE3 moves the foreground graphic object down one pixel; Navigator 3 moves it right 2 pixels, but only if the IMG ALIGN=LEFT attribute is used. (Grrr!) On the other hand, if a table is used, and the cell is defined to exactly the proper size to line up the graphic (as shown in the following example), Netscape Navigator displays the graphic perfectly. IE3 moves it over two pixels. Needless to say, I'd sure like to know how to solve this little problem. At any rate, examples of perfectly aligned foregrounds and backgrounds, including some animated examples, are on the CD in the BGTILES folder – it’s a great effect that is well worth the time and effort it takes to assemble.

Frames

Adding support for non-frames-compatible browsers