Navigating Columns

One of Navigator 3.x's best new tags is <MULTICOL>, which displays content in vertical columns. Happily, you don't have to do anything special for backward compatibility; other browsers will continue to display your content normally. And the tag is simple to use:

    <MULTICOL COLS=3 GUTTER=10>Your content goes here</MULTICOL>

The COLS=argument is mandatory, but the GUTTER=argument is optional (10 pixels is the default). You're not constrained to using <MULTICOL> on the whole page, either. For example, by turning it on and off, you can have a four-column header, then normal text going all the way across the page, then a three-column footer.

If columns are mandatory, then use tables until the <MULTICOL> tag is firmly established in the user base. If, however, columns are just a nicety, you can save yourself a lot of work--and probably get cleaner results--by using <MULTICOL>.

Gentlemen, Start Your Layers

WATCH OUT

Don't leave users out in the cold. Avoid rushing into HTML extensions that work only with a small percentage of browsers. Internet Explorer 3.x's floating frames and Netscape Navigator 4.0's layering technology are great advances on the Web landscape. But they lack built-in workarounds for older browsers, so users who don't follow the upgrade cycle as closely as you do get the shaft (or a blank screen). Animated .GIFs, on the other hand, still show the first frame of an animation to older browsers, so a friendly upgrade path is built-in.

One of the best new features of Netscape Navigator 4.0 (which is part of the Netscape Communicator suite, which we review in this month's Registry, on page 64) is that it can manage vertically stacked page layers. Think of layers as a series of pages--opaque, translucent, or mixed--that sit atop each other, combining to give page authors more flexibility and control over the placement of objects! on the page in x-, y-, and z-axes.

You can hard-code layers into position with the <LAYER> tag, or you can use the <ILAYER> tag (short for in-flow layer) so that they flow with the page (to accommodate different browser sizes and screen resolutions).

It's best to wait until the installed base of Navigator 4.0 users is large enough to justify adding layers to your site. But if you're eager to learn how layers work, or you want to set up a Navigator 4.0-specific section on your site, read up on layering at www.netscape.com/ comprod/ products/ communicator/ layers/ layers_glossary.html, or see the Developers' Edge section at http:// developer.netscape.com/ library/ documentation/ communicator/.

X, Y, and Z

Navigator 4.0's new layering technology lets you place any object anywhere on a page. There are dozens of arguments to the <LAYER> tag, but here are the basics you'll need to get multilayered pages up and running fast:

    <LAYER NAME="test3" LEFT=450
    TOP=175 WIDTH=200 VISIBILITY=
    SHOWBGCOLOR="#78B5F8"Z-
    INDEX=3>Your content goes here</LAYER>

In this example, NAME= identifies this layer as distinct from others listed on the same page. Subsequent layers simply get different names (for example, LAYER NAME="test4"). LEFT= specifies the number of pixels from the left of the browser. TOP= specifies the number of pixels down from the top. WIDTH= specifies the horizontal dimensions of the layer. VISIBILITY= controls whether layers are shown (the default), hidden (HIDE), or inherited from the parent layer in a nesting situation (INHERIT). BGCOLOR and BACKGROUND function as you'd expect.

Z-INDEX= specifies which layers overlap. Just assign a positive integer to control whether a layer is over or under the others, or sandwiched in between. And layer numbers are not absolute; they're relative to one another. So they don't have to be consecutive (1, 2, 3); you can number them 2, 3, 41, 257. The highest integer is unobstructed; the lowest is buried.

The Invisible .GIF

The usual workaround for HTML's lack of indent tags is to place a transparent .GIF, with a specific width, before the text. An alternative is Navigator 3.x's new HTML extension called SPACER, which lets you precisely control the vertical and horizontal spacing of text and graphics, in pixels. You can nest the tag inside other HTML elements, such as tables or multicolumn layouts. It even responds to the various ALIGN attributes. And the syntax is simple:

    <SPACER TYPE=HORIZONTAL SIZE=30>

To create vertical space, just change horizontal to vertical.

Unfortunately, IE doesn't support the <SPACER> tag. The invisible .GIF trick works fine in IE, but if you use both tags to satisfy both browsers, you'll end up with a correct layout in IE and a space twice as long as you intended to have in Navigator.

This is a great tag that's long overdue, and we can only hope it appears in the official spec--or at least that IE supports it. Until then, we recommend using it judiciously unless everyone in your intended audience is using Navigator or you can do without the indentations for IE users.

Free-floating Frames

One of the coolest additions to Internet Explorer 3.x is that a frame can "hover" anywhere on a page--even smack-dab in the middle--and have content that changes when a user clicks on links elsewhere on the page. The embedded frame can blend seamlessly into the rest of the page if you set the borders to zero and use the same color scheme as you do on the main page. To embed a floating frame, just use this code:

    <IFRAME WIDTH=300 HEIGHT=300
    FRAMEBORDER=0 SRC="filename.html"></IFRAME>

The <IFRAME> tag handles the arguments you'd expect, including WIDTH, HEIGHT, SCROLLING, FRAMEBORDER, ALIGN, VSPACE, and HSPACE.

There's a big downside, though. Microsoft added this tag without leaving any "back doors" for other browsers. A page with an <IFRAME> tag appears completely blank when viewed in Navigator 3.x--shame on Microsoft for that. Any attempt to build a page that handles floating frames for IE and standard frames for Navigator will fail. Navigator 4.0 may handle floating frames, but even then, a huge number of users won't be able to view them. Our advice is to avoid floating frames until enough users have next-generation browsers.

Classy Table Settings

Although IE and Navigator let you specify different background colors in table cells, IE ups the ante by supporting tiled background images in different cells, or even behind an entire table.

If you want to add contrasting elements to enhance legibility, just add BACKGROUND="filename.jpg" to any <TABLE>, <TD>, or <TR> element in your table. If you've used a color scheme that depends on a text color contrasting with your background color, we highly recommend using the BGCOLOR argument in the same tag to provide a solid color that is similar to the hue of the background image.

Edit in Explorer

If you'd like to edit the files you're viewing in IE 3.x, you can install an Edit button on IE's toolbar. First, you'll need to make IE your default browser, if it isn't already. Use the check box under View|Options|Programs, then close IE.

Next, access your Options dialog from any Windows 95 Explorer (not Internet Explorer) window by opening View|Options| File Types. Scroll to the Internet Document entry, and select it. Click on the Edit button, and then click on New in the resulting dialog.

In the Action field, type the word edit, and then browse to your HTML editor. Close all open File Type windows and restart IE. You'll now see a new Edit button on the main toolbar, as shown above; clicking on it sends the current document to your chosen editor.

IE is Off the Mark

When IE evolved from Version 2.0 to Version 3.0, organizing bookmarks became much more difficult. Microsoft did away with the standard folder view, forcing you to organize bookmarks inside a small, unresizable dialog that lets you look inside only one folder at a time.

But you can still access a standard folder view of IE favorites. Just use the Windows Explorer and navigate to C:\Windows\Favorites (no, they're not stored in the \Program Files\Internet Explorer folder, a clue to the IE/OS merger we're about to experience). If you want to get straight to the folder view, here are a few tricks.

You can hold down the Shift key when you select Organize Favorites to bring it right up, or you can simply create a Shortcut to the C:\Windows\Favorites folder and place it in the root of your bookmarks. The second method will bring up the folder view inside your browser, rather than in Windows Explorer; we prefer the ! first method. You can now drag and drop folders and favorites around to your heart's content, unhindered by the "new, improved" interface.

Move Explorer's cache

IE 3.x's install routine uses strong-arm tactics: You don't get to specify the installation drive or folder. This causes problems for users who maintain a small C: drive for Windows and keep other apps elsewhere. At press time, Microsoft offered no fix for this problem. However, you can free up boot drive space after IE installs, by moving its cache to another drive. To do this, open View|Options|Advanced and click on Settings in the Temporary Internet Files section. Click on Move Folder and select a new drive and folder.

If, however, you have lots of free space on the C: drive, consider using the slider in this dialog to increase the cache size, which improves performance if you visit the same sites regularly. If you seldom visit the same site twice, a big cache does you no good.

Kill the Browser-Offset Bug

While designing pages, you've probably noticed that things don't abut against the margins the same way in all browsers. The problem is that virtually every browser on almost every platform has a different built-in "browser offset." That is, the browser starts placing a page's content a certain distance down from the top of the screen and a certain distance in from the left. The differences can vary by up to 15 pixels.

IE lets you compensate for the problem by forcing the attributes. Just place LEFTMARGIN=0 TOPMARGIN=0 within your <BODY> tag. Unfortunately, Navigator doesn't handle these tags, so you just have to live with the situation.

Meet the Verdana Family

When you install IE 3.x, it installs a new font family, called Verdana. This font face, designed by Matthew Carter expressly for use on-screen, adds clarity and elegance to any Web page. As with any font, you invoke it by adding the FACE= argument to the <FONT> tag.

Although Verdana is visible only to IE 3.x users, the face works under Navigator, too--as long as IE is also installed on your system. If you want to offer a second, more universal option to non-IE users, Helvetica or Arial is the second-best choice. Users who have neither font installed (Mac users, for instance) will see pages rendered in their default font face.

To specify the order in which fonts are invoked, list them consecutively, like this: <FONT FACE="Verdana,Helvetica,Arial">. The browser searches the user's system for the first choice, then the second, and so on. IE and Navigator use the same syntax here.

Quit Mousing Around

Until now, most Web browsing has been an inherently mousey experience. That's why we're so glad IE lets you hop between links on a page using the Tab key. When you get to the link you want to visit, press Enter. The Tab key trick also works on image maps. And to move between frames in IE 3.x, press Ctrl-Tab.

Navigator 3.x doesn't offer these options, but Navigator 4.0 does. All three, however, let you use Alt-<Left Arrow> and Alt-<Right Arrow> instead of the Back and Forward buttons. Esc stops a page from loading. And you can reload a page with Ctrl-R.

Customize IE's Toolbar

Tired of the bitmap embedded in IE 3.x's toolbar? Then turn it off, using the dialog under View|Options|General. Better yet, replace it.

To do this, size a bitmap in your favorite image editor (we recommend 80 by 80 pixels, though other sizes will work). Save the image to a path you can remember for a minute. Next, make sure the background bitmap is turned off in the standard IE dialog.

Now run RegEdit and navigate to HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Toolbar. Select the BackBitmap entry and pull down Edit|Modify. Type in the path to your bitmap, and then close RegEdit. Return to IE and turn the background bitmap back on. Voilâ: a customized toolbar. (As with any Registry modification, back up the Registry first. If you don't know how, you can learn how using the Windows Sources TipFinder.)

Change the Source Viewer

Navigator's HTML source code viewer is nice because it highlights tags in a different color, which is helpful when you're studying how someone has built a page. Unfortunately, it lacks two key features: a Search function and a Save option.

You can easily remedy this by changing the default viewer to Notepad or any other text editor you like. Just open Options|General Preferences|Apps. Then in the View Source box, type C:\WINDOWS\NOTEPAD.EXE or the path to another editor. IE is already configured to use Notepad, but regrettably, it's not customizable.

Ban Ads Forever

If you're the type who hits the Mute button during TV commercials, try out PrivNet's Internet Fast Forward. This utility runs only under Navigator, appearing as a small icon in the upper right corner. Once running, IFF does a good (but not perfect) job of figuring out which graphics are ad banners and prevents Navigator from displaying them. IFF can also skip a specific graphic (with a right-click option) or bar graphics over a certain size. Yes, this is controversial software, but you have a right to know.

Supercharged searching

AnySearch from PrivNet (www.privnet.com) gives you instant access to six of the major search engines. It installs into Navigator's toolbar alongside your URL bar or embeds itself in IE's Search button. Just type a word or words into it, no matter what the current page, and AnySearch returns results instantly. AltaVista is the default search engine, but you can easily toggle between others as well.

Using AnySearch with IE isn't quite as intuitive as using it with Navigator, but it is slick. Click on the IE Search button and select a search engine. Then type a question mark in the URL window, followed by your query string. If you already know the advanced search syntax for your favorite search engine, AnySearch will use it. For example, type ?"windows sources" into an AltaVista search, and it will use that exact string, rather than just the keywords.

Send comments about this site to <1A 11HREF="mailto:wsonline@zd.com">Windows Sources Webmaster.