Netscape Navigator Gold includes a powerful, versatile WYSIWYG HTML editor. The editor produces static HTML that works tolerably well in an HTML 3.0-compliant browser and (not surprisingly) quite well in Netscape Navigator. With a bit of extra effort, the output of Navigator Gold can be tuned to work well with a variety of Web browsers.
Navigator Gold also knows about Netscape's JavaScript extensions to HTML-Netscape has made it particularly easy to include client-side JavaScript in your pages.
If Netscape Navigator Gold were only a browser, it would be a good one. Netscape Navigator rose to prominence as the leading Web browser because it implements well the basic browser capabilities and extends them with additional features (such as an e-mail client) and tags (such as colored backgrounds).
What distinguishes Netscape Navigator Gold from Navigator is a powerful WYSIWYG HTML editor. This chapter examines that editor and shows how to use it to build pages that look good in any browser, while still taking advantage of Navigator's special features. This section also describes how to use Netscape Navigator Gold to produce static HTML pages-the foundation of nearly all Web sites.
Netscape Navigator Gold is well suited for users building their first Web page. Without knowing any HTML, users can select a "look and feel" for their pages and populate them with content. Navigator Gold comes with a set of templates to get the new HTML writer started. It also includes the Page Wizard-a series of forms that step the user through key decisions about the page. Page Wizard uses the information on these forms to produce the necessary HTML to implement those decisions.
This section shows the basic tools and techniques to build a first
Web page.
| CAUTION |
Although Navigator Gold's templates and Page Wizard provide enough capability to enable a first-time user to construct a working page, it does not take the place of learning HTML. Professional Webmasters developing sites that have serious marketing or public relations objectives will want to learn HTML by building some pages "from scratch" with a text editor. Having learned HTML in this way, these developers may then move back to Navigator Gold in order to decrease the time required to set up the page. |
The Tools When Netscape Navigator Gold first launches, its window, shown in Figure 4.1, looks much like the window of Netscape Navigator. Choose Edit Document from the File menu or click the Edit button on the toolbar, and the Netscape Navigator Gold editor window appears (see fig. 4.2).
Figure 4.1 : The initial Netscape Navigator Gold window resembles Netscape Navigator.
The first row of buttons deals with text and other basic HTML
elements. This toolbar is called the Character Format Toolbar.
A second row, called the File/Edit Toolbar, enables the user to
manipulate the document itself. The third row enables the user
to manage paragraph alignment in a way that will seem familiar
to users of most graphically oriented word processing programs.
This toolbar is called the Paragraph Format Toolbar.
| NOTE |
In the Windows NT and Windows 95 versions of Netscape Navigator Gold, the toolbars appear with the Character Format Toolbar on top. In the Macintosh version, the File/Edit Toolbar is on top. This section shows examples from the Windows 95 version; users of the Macintosh and UNIX versions will find that their products behave similarly. |
The Character Format Toolbar In Netscape Navigator Gold, you can easily think of a Web page as having elements, each of which has associated properties. To illustrate this way of thinking, type some text into the new editor window. Now select the text and click the button that shows a-. Note that a drop-down tag appears showing the effect of this button-in this case, "Decrease font size." The selected text becomes smaller and a -1 appears in the text size field on the top row. Figure 4.3 shows the resulting screen.
| NOTE |
Unlike most word processors, Netscape Navigator Gold does not enable the user to set an explicit font size. This limitation is necessary because the end user, and not the page designer, chooses the font and font size. Changes in font size in Netscape Navigator Gold are relative changes made against the base size. |
| CAUTION |
Many features in Netscape Navigator Gold, such as changing the text size and color, are Netscape extensions to HTML. Not all browsers understand these extensions. Therefore, do not use these extensions as an essential part of the content. For example, if a paragraph of a Web page is intended to convey a caution, include the word "Caution" and set it with <STRONG> tags so that a user can see the emphasis in any browser. As an extra feature, use Netscape's text color attribute to set the text in red. If you only set the text in red, a user of another browser such as Mosaic does not see anything special about the text, and the impact of the caution is lost. |
The next set of buttons in the Character Format Toolbar control styles and colors of text. The first button in this set shows a boldface A-the drop-down tag says "Bold." Select some of the text, and set it to bold. Choose some other part of the text, and set it in italics. Now choose View Document Source from the View menu. Note that the selected text is set by using <B>...</B> tags, as shown in Figure 4.4.
Figure 4.4 : Netscape Navigator Gold uses <\<>B> and <\<>I> tags to set text in bold and italics.
| CAUTION |
Many experienced Webmasters avoid the <B> and <I> tags and use <STRONG> and <EM> tags instead. Many users access the Web by using character-based terminals that do not have bold or italic capa-bility. Marking the text as <STRONG> and <EM> gives the browser the flexibility to set the text in a way that takes advantage of the capabilities and limitations of the platform. Figures 4.5 and 4.6 show the same document in Netscape Navigator and in Lynx (the leading character-based Web browser). |
Figure 4.5 : Users with Netscape Navigator see bold, italics, and combined styles.
Figure 4.6 : Users with Lynx see all styles as underlined on most terminals.
Continuing across the Character Format Toolbar, find the button
with the colored squares. Move the cursor over the button to see
the tool tip. The drop-down tag of the tool tip says "Font
Color." Choose some text, and then click the Font Color button.
The resulting dialog box shows a palette of Basic Colors, a palette
of Custom Colors, and a button that enables you to define custom
colors.
| CAUTION |
Remember that text colors are a "Netscapism"-do not use text colors in any way that causes the meaning to be lost if the colors are not visible. Colored text is most appropriate when used to enhance the aesthetic appeal of the site. The Webmaster can set the background and default text colors in the <BODY> tag and then set selected text on the page in a different color to make a visually attractive effect. |
| TIP |
Netscape uses a 216-color model-48 of those colors are available on the Basic Colors palette. If you use colors outside that 216-color model, some users' computers will not be able to reproduce the color, which can lead to undesirable effects. Unless you have a good reason to use a custom color, stick with the basic colors. This design decision increases the likelihood that the colors the site visitor sees are the same ones you see when you are designing the site. |
The Make Link button brings up the Link tab of the Properties dialog. Select the text you want to have as a link, choose the Make Link button, and enter the path of the link in the "Link to" portion of the dialog box. Press Enter or click the OK button to apply the change and dismiss the dialog box.
To clear all styles, select the text and click the Clear All Styles
button.
| NOTE |
Netscape Navigator Gold considers a link to be a text style. If the selected text contains a link, clicking Clear All Styles brings up the warning shown in Figure 4.7. If you don't want to be warned again about linked text when clearing text, select the checkbox "Don't display this message again." |
The next-to-the-last set of buttons in the Character Format Toolbar
deals with elements you can insert on the page: anchors, images,
and horizontal rules. Again, Netscape has made it easy to add
attributes that will not be understood by non-Netscape browsers.
A browser ignores any tag or attribute that it cannot understand,
but the designer must keep track of how the page will appear when
viewed in a non-Netscape browser.
| TIP |
Some Webmasters do not even try to make their pages look presentable to non-Netscape browsers. They put a Netscape Now! button on their home page, add text that says this page is best viewed in Netscape, and let the millions of users who cannot or choose not to run Netscape suffer. You do not have to limit your page to visitors with Netscape Navigator. With a few changes, a page produced in Netscape Navigator Gold can be configured to look good in any browser and great in Netscape Navigator. Details on how to make these changes are given later in the chapter. |
The Target button is used to set up targets (also known as anchors) for hyperlinks. For example, if the page opens with the text "The quick brown fox jumped over the lazy dog's back," the word "fox" might be linked to #fox, which leads to a section of the same page that may give details about that sly fellow.
<IMG> is one of Netscape's most extended tags. Click the Insert Image button, and the Image tab of the Properties dialog appears. For best results, the Alternate Image, Alternate Text, Height, and Width fields should always be filled in.
The Alternate Image field is used to put a LOWSRC attribute in the IMG tag. See Chapter 20, "Using Graphics."
The contents of the Alternate Text field are used in the IMG ALT attribute. This text is displayed if the user has Auto Download of Images disabled or is using a browser like Lynx that cannot show graphics.
Specifying the height and width tags increases the download speed. Always choose "Original Size"-any other choice can cause unexpected surprises when the page is viewed in a non-Netscape browser.
The alignment and space around image options are useful when the page is set up so that the text wraps around the image. These options are used to fill in the ALIGN, HSPACE, VSPACE, and BORDER attributes.
The Insert Horizontal Line button inserts the horizontal rule, or <HR> tag, into the page. By default, the tag has the Netscape attribute Width="100%". Properties of the horizontal rule can be accessed by selecting the line and then clicking the Object Properties button.
The final button on the Character Format Toolbar is Object Properties. The appearance of the dialog box changes depending on the object that is selected. The dialog box associated with text, shown in Figure 4.8, gives access to the properties of characters, links, and paragraphs. You have already examined link properties and character properties like size, style, and color. The JavaScript properties are described in this chapter in the section on JavaScript. Paragraph properties are taken up in the section entitled "The Paragraph Format Toolbar."
| TIP |
Character styles like Strikethrough, Superscript, and Subscript are not implemented in all browsers. Take care that use of these styles does not cause the appearance of the page to degrade when it is viewed by a non-Netscape browser. |
| CAUTION |
Never use the <BLINK> tag, generated from the Blinking style. It is distracting to the site visitor, and most professional Webmasters consider it to be a sign of amateurish design. |
The Image Properties dialog was described as part of the Insert
Image button, and the Link Properties dialog was described as
part of the Insert Link button. Other objects, such as anchors,
horizontal rules, and stand-alone HTML tags, have properties dialogs
that are identical to the dialog box called up when they are first
inserted.
| TIP |
For a shortcut to the Properties dialog of any object, double-click the object. |
The File/Edit Toolbar The File/Edit Toolbar affords the same options as many of the menu items on the File and Edit menus. New Document, Open file to edit, and Save are just like the familiar New Document, Open File, and Save menu items on the File menu.
The View in Browser button has the same effect as the Browse Document
item on the File menu-it opens a browser window on the page currently
being edited.
| NOTE |
The WYSIWYG effect is so similar to the actual browser that the page developer will sometimes become confused and wonder why links don't work. If you think something on the page isn't working as it should, check the window-links are only active in the Browser, not in the Editor. |
The third group of buttons in the File/Edit Toolbar is functionally equivalent to the corresponding items on the Edit menu: Cut, Copy, and Paste. The next set, Print and Find, also have menu counterparts (on the File and Edit menus, respectively).
The final button, Publish, is a powerful tool for moving the finished page to the Web site for deployment. If you are using LiveWire, however, you will probably prefer to use the LiveWire Site Manager. See Chapter 5 "LiveWire Site Manager."
The Paragraph Format Toolbar The Paragraph Format Toolbar provides a fast way to manage blocks of text. Using options on this toolbar, the designer can quickly set up headlines, lists, and HTML divisions.
Click anywhere in a line of text, and then pull down the Paragraph style menu on the left side of the Paragraph Format Toolbar (see fig. 4.9). Choose Heading 1, and the text is reformatted as an <H1> heading.
HTML supports three types of list: unordered (or bullet) lists, ordered (or numbered) lists, and definition lists. Netscape Navigator Gold supports all three types of lists from the Paragraph Format Toolbar.
To insert a new unordered list, enter the text of the list items, select it, and click the Bullet List button. Numbered lists work the same way. In fact, you can change a bullet list to a numbered list by selecting the text and clicking the Numbered List button.
To make a definition list, enter the text, and use the Paragraph
styles drop-down menu to set the term to Description Title and
the definition to Description Text.
| TIP |
For best results in all browsers, be sure to surround the definition list with <DL>...</DL> tags. You can do this by using the HTML Tag item on the Insert menu (described later in this chapter, in the section entitled "The Menu Items"). |
The Decrease Indent and Increase Indent buttons work by wrapping the selected text in <UL>...</UL> tags. Using these tools, you can build and maintain an outline with several levels of indenture.
The final set of buttons on the Paragraph Format Toolbar is used to set the alignment of a block of text. In this way, they resemble similar buttons found on the toolbars of word processing software such as Microsoft Word. The Center button applies the <CENTER> tag around the text in the specified paragraph. The Right button surrounds the text with <DIV ALIGN="right">...</DIV> tags.
The Menu Items Most of the menu items have toolbar
counterparts that are described in the preceding text. A notable
exception is the HTML Tag item under the Insert menu. Using this
item, the developer can insert single tags such as <DL>.
| TIP |
The HTML Tag dialog has a Verify button. This button checks to make sure opening and closing angle brackets are present on the tag. It also ensures that text is encapsulated by quotes. |
The Templates When Netscape Navigator Gold is installed as a stand-alone product, it comes with links to page templates on Netscape's server. When it is purchased as part of LiveWire, a set of site templates is included with the software. These site templates are much richer than the online page templates and offer one of the fastest ways available to get a site up.
To build a page from the online templates, open an editor window and click the New Document button (or choose New Document from the File menu). From there, choose From Template. Choose a template from the selection, save a local copy, and change the contents to reflect your own organization.
To build a site from the LiveWire templates, use the Site Manager, described in detail in Chapter 5 "LiveWire Site Manager."
The Page Wizard Netscape Navigator Gold's Page Wizard is also an online tool. Choose New Document from the File menu, and then select From Wizard. Netscape Navigator Gold connects to the Netscape site and takes you through a series of forms. Answer the questions; when the Wizard finishes, it builds your page. Save the page on your hard drive, and make any final changes before publishing it.
Both the templates and the Wizard provide good starting points for learning HTML. You will find it satisfying to get a page up quickly. Remember that pages built with the templates or the Wizard lack in three areas:
Although the templates and the Wizard, and even the site templates that come with LiveWire, may serve to get your first page up, you soon come to the point where you want to design your own pages. Even though Netscape Navigator Gold does not require you to know HTML, it is a good idea to learn HTML so you understand what Netscape Navigator Gold is doing for you as you edit the file. You should particularly know which actions result in Netscape-specific tags and attributes so that you know which parts of the page may not be visible in non-Netscape sites.
Document Options Although you can add or change document options at any time, you may want to start your page design by giving these options an initial setting.
Before starting on the page itself, take a moment to set up the default editor options. Choose Options | Editor Preferences, and select the General tab in the resulting dialog box (see fig. 4.10).
Set page options like the Author name in the General tab. If you have adopted a style guide, enter a path to its template in the New document template Location field. You can also set a default color scheme in the Appearance tab, described in following text. See Chapter 17, "Site Function and Aesthetics."
After you set up the defaults, make a new blank document and open the editor window. Choose Properties | Document. The resulting dialog box has three tabs: General, Appearance, and Advanced. The General tab is shown in Figure 4.11.
Figure 4.11 : Use the General portion of the Document Properties dialog to set the document title.
The Author field is filled in with the default you specified under the Editor Preferences. Fill in the Title and Description fields. If possible, fill in the Keywords and Classification fields as well. For more information about how these last two fields are used, see the section in this chapter entitled "Uses of the META Tag."
Now move on to the Appearance tab, shown in Figure 4.12. Many people consider the default Netscape color scheme, with its gray background and black text, to be rather plain. Before changing to a new color scheme, however, you want to consider several issues.
Background Colors and Images HTML-3.0 compliant browsers understand the BACKGROUND attribute to the BODY tag. If you specify a background image, it will be visible in most of the newer browsers. However, those browsers do not enable you to change the text color, so if you use Netscape Navigator Gold to set a light text or link color against a dark background image, the text will not be readable in many browsers.
Note, too, that large background images can take a long time to
download. If you prefer to use a texture or pattern for the background,
choose the smallest one possible. Some good choices are available
at Netscape's Gold Rush Tool Chest site, at http://search.netscape.com/assist/net_site/starter/samples/index.html.
The Bandwidth Conservation Society, at http://infohiway.com/faster/index.html,
also has information about how to build small background images
that look good and load quickly.
| CAUTION |
On its Gold Rush Tool Chest site, Netscape explicitly gives permission for users of Netscape Navigator Gold to copy the graphics. In general, be careful about copying graphics or other elements of a site onto your own. Many site owners will give you permission if you ask-but you must ask. Even if no copyright notice is given, most countries have laws that protect the sort of property that appears on Web sites, and your innocent "Save this image as" could be considered infringement. |
If you decide to use a background graphic, consider specifying a color as well. (You'll need to edit the HTML file-Netscape Navigator Gold won't let you specify both a background color and an image file.) When both an image and a color are specified, the browser attempts to load the image. If there is anything wrong with the image or if the user is running with auto-loading of images disabled, the browser uses the specified background color.
If you decide to use a colored background and text, remember that Netscape has a 216-color model. Unlike the color picker for text color, the Document Properties Appearance dialog box does not make the distinction between basic colors and custom colors. In this dialog box, the term "custom colors" is used to refer to anything other than the standard gray background with black text. To be sure you stay within the Netscape color model, choose one of its preset color schemes, as shown in Figure 4.13.
Link Colors Many users are quite used to Netscape's
default link colors: blue for unvisited links and purple for visited
links. These users are sometimes confused when a site has a different
link color scheme. Many of the preset color schemes stick with
the default link colors to decrease the likelihood of visitors
becoming confused or frustrated.
| CAUTION |
Be particularly careful not to use the text color options to set text to the same color as a link. Users do not understand why they can't click the link, and you'll get "broken link" reports. |
Things to Do with Text Netscape Navigator Gold makes it easy to center text and other elements. Unfortunately, the resulting HTML uses the <CENTER> tag, which is a Netscape extension. To ensure that centered elements appear centered in any browser that supports centering, use a text editor or script to go through each page and replace each occurrence of <CENTER> with <CENTER><DIV ALIGN=Center>. Similarly, change </CENTER> to </DIV>. You also want to be sure that the page has an acceptable appearance if no centering is applied because some older browsers still do not understand either Netscape's <CENTER> tag or the HTML 3.0 <DIV> tag.
Likewise, you need to embed definition lists in <DL>...</DL> tags to be sure they work on all browsers.
Including Images Because they dominate downloading time, the use of images can make or break a site. Many users who connect by modem turn off image loading and only load images that look like they may be interesting. To meet the needs of these users, check the page against the following checklist:
Managing Links When specifying links, specify them to other pages in the site (or to anchors on the same page) as relative links rather than absolute links. This way, the site can be moved without having to change all the links. The LiveWire Site Manager shows how to check the consistency of internal links separate from external links. See Chapter 5 "LiveWire Site Manager."
Table 4.1 shows the right and wrong way to specify links if your
site is http://www.mycompany.com/ and the current page
is index.html.
| Type of Link | Wrong Way | Right Way |
| On-page anchor | http://www.mycompany.com/ index.html#here | #here |
| On-site link | http://www.mycompany.com/ myPage.html | myPage.html |
| Off-site link | http://www.whitehouse.gov/ |
As good as Netscape Navigator Gold is, it doesn't do some things-things that should be done to make the best pages possible for the Web. This section shows how to tune pages generated by Netscape Navigator Gold so they look good in all browsers.
To make sure a page looks good in any browser, the Webmaster should do more than just test it in other browsers. The Webmaster needs to validate it. Validation is a process of testing the page against the formal language specification to ensure that all the required elements are present and that every element is syntactically correct. See Chapter 19, "Site Validation and Netscape."
Many validators expect the first line in the file to be a DOCTYPE line, like the one shown in Listing 4.1. This line specifies which version of HTML should be used as the standard for validation. These computer-readable standards are called DTDs. DTDs for HTML 2.0 and 3.0 were released by the HTML Working Group of the Internet Engineering Task Force. Unfortunately, Netscape has never published a DTD that includes their extensions. Various people have attempted to reverse-engineer one, but the DTD keeps falling behind as Netscape continues to extend its product.
Listing 4.1 welcome.html-A DOCTYPE Line Should Be the First Line in the File
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> <HTML> <HEAD> <TITLE>DSE: Welcome!</TITLE> <LINK REV=MADE HREF="mailto:morganm@dse.com"> </HEAD> <Body BGCOLOR="#ffffff" Text="#000000" Link="#ff0000" ALINK="#ff0000" VLINK="#111111"> <CENTER> <IMG ALT="DSE Logo" SRC="Graphics/dseLogo1.gif"> <BR> <STRONG>DSE, Inc: <EM>General Information </EM></STRONG><BR> <A HREF="General/0.aboutdse.shtml"> <IMG SRC="Graphics/door6.gif" ALT="door" BORDER=0 ISMAP></A><BR> <H3>Welcome!<BR> Sit back and enjoy your visit.<BR> If you have any questions or comments feel free to call or drop us an e-mail. </H3><BR> <HR> <IMG ALT="Previous Page BORDER=0 WIDTH=93 HEIGHT=39" SRC="Graphics/ previousG.gif"> <A HREF="General/0.aboutdse.shtml"><IMG ALT="Next Page BORDER=0 WIDTH=93 HEIGHT=39" SRC="Graphics/next.gif"></A> <IMG ALT="Contents BORDER=0 WIDTH=95 HEIGHT=39" SRC="Graphics/contentsG.gif"> <A HREF="General/6.help.shtml"><IMG ALT="Help BORDER=0 WIDTH=93 HEIGHT=39" SRC="Graphics/help.gif"></A> <HR> <H2>Comments to Author</H2> <ADDRESS> <A HREF="mailto:morganm@dse.com">morganm@dse.com</A><BR> <A HREF="General/2.MLM_Home.shtml">Michael L. Morgan</A><BR> DSE, Inc.<BR> 1277 Eagle Way<BR> Virginia Beach, Virginia 23456<BR> Phone: 1-800-818-3936 <BR> FAX: 1-804-471-5272 </ADDRESS> <HR> All contents © 1995 DSE, Inc. All rights reserved.<BR> <STRONG>CrossDock</STRONG> is a trademark of Rick May, Inc. <BR> URL: http://www.dse.com/welcome.html<BR> <IMG ISMAP BORDER=0 SRC="Graphics/ZQ0001222.gif" ALT="Make your visit count, load this image."> </CENTER> </BODY> </HTML>
The best solution may be to strive to make the output comply with HTML 2.0, the most widely accepted HTML standard. Anything that can't be done in HTML 2.0 should be done in a way that conforms with HTML 3.0. Finally, Netscape extensions should be added and the Webmaster should consider the impact on the site if the user's browser doesn't understand the Netscape extensions.
Prior to validating, add a DOCTYPE line to indicate which DTD is used for the current validation pass.
Including a Lynx Feature Some browsers (notably Lynx) enable the HTML writer to specify to the browser how to reach the author. Unlike a mailto link, this technique enables the browser itself to give the user a way to reply, with the browser taking care of the details of how to get to the author.
The relevant line from Listing 4.1 is
<LINK REV=MADE HREF="mailto:morganm@dse.com">
Managing Tables and Forms Although Netscape Navigator handles tables and forms quite well, Netscape Navigator Gold provides no support for generating them in its editor. Netscape does not recommend using the Insert |HTML Tag menu item for building tables. Use a text editor on the Netscape Navigator Gold output. After tables are inserted in the HTML file, the Netscape Navigator Gold editor shows them properly. (The editor does not show forms while in the editor window.)
After the static content is built, it is time to add dynamic content. You have many choices: Java, plug-ins, and JavaScript. Using LiveConnect, you can turn all of these options into an integrated whole.
If you have a Java applet available on your server, you can embed it in your HTML page with the APPLET tag. The syntax is
<applet code="name" width=width height=height>
When the page is downloaded, the compiled bytecodes of the applet are also requested, and the program runs on the local browser.
Recall from Chapter 3"What Can You Do with LiveWire?" that when a browser encounters a MIME type it does not recognize, it looks for a plug-in or helper application. If it uses a helper application, that application has its own window. But if a plug-in for the MIME type is installed, the developer has other options. This section shows how to incorporate plug-ins into your design.
Three Kinds of Plug-Ins A plug-in can be designed to take its own window, like a helper application. Not surprisingly, these plug-ins are called full-page. A plug-in can also be designed to run entirely in the background. A typical use for such a plug-in is a music player. The kind of plug-ins of interest here are embedded plug-ins. These plug-ins take a portion of the browsers window-the content they process can be shown inline just like a GIF image.
The <EMBED> Tag The syntax for the <EMBED> tag is
<EMBED NAME="name" SRC="path" Parameter=Value ... >
Thus, one can say
<EMBED NAME="myMovie" SRC="/home/myhome/video/myMovie.avi" SPEED=SLOW>
In JavaScript, one can write a function PlayTheMovie as follows:
function PlayTheMovie()
{
document.myMovie.play();
}
And then one can add a button as follows:
<INPUT TYPE="Button" VALUE="Play the Movie" onClick="PlayTheMovie()">
When the button is clicked, the function is called, and the play method of the plug-in associated with type video/avi is called.
Because it is considered to be "just another text style," JavaScript is particularly easy to add by using Netscape Navigator Gold.
Converting Text to JavaScript If you select text and then press the Object Properties button and change its style to client-side JavaScript, Netscape Navigator Gold surrounds each paragraph of the text with <SCRIPT>...</SCRIPT> tags.
To add large amounts of client-side JavaScript, work in a text editor. That way, you can do the following:
Server-side JavaScript is set up in much the same way as client-side JavaScript-just choose the server-side JavaScript property in the Object Properties dialog, and Netscape Navigator Gold surrounds each line with <SERVER...</SERVER> tags. Recall that server-side JavaScript is compiled before it goes to the client, so it's not necessary to put functions in the <HEAD> section or surround the code with comments. It's still nice, though, to have control over the layout of the code. For large-scale code entry, use a text editor.
Using the techniques described in this chapter, a new developer can get high-quality pages up and on the Web quickly. The differences between those pages, however, and pages made by a professional Web developer, will be apparent. This section describes advanced techniques that can be used to increase the quality and functionality of pages produced with Netscape Navigator Gold.
Although the page templates provided with Netscape Navigator Gold are good and the site templates provided with LiveWire are better, the best templates are those you make yourself, based on your own organization's style guide. See Chapter 17, "Site Function and Aesthetics."
After you have a style guide, build a set of model pages and set the default template path (in the General tab of Options | Editor Preferences) to point to your in-house templates.
If you've examined the code produced by Netscape Navigator Gold, you know that several of the fields, such as Author and Description, are used to generate META tags. META tags are a catch-all; they can be used to do things that the original designers of HTML didn't think of.
For example, put some keywords that describe key aspects of each page in the Keywords field of the Document Properties dialog. Then use a program like site-idx.pl to build a searchable index of the site.
As its name suggests, site-idx.pl is an indexer-it bases its work on keywords supplied by the Webmaster on each page. The result of running site-idx.pl is an index file that can be submitted to search engines such as ALIWEB. This section describes a simple ALIWEB-like search engine that can read an index file and serve up pages based on the index file's contents.
site-idx.pl is the work of Robert S. Thau at Massachusetts Institute of Technology. This program was written to address the indexing needs of ALIWEB at http://web.nexor.co.uk/aliweb/doc/aliweb.html.
This program lacks a clever name, but it does its job. It was written to address the indexing needs of ALIWEB, a search engine similar in concept to Yahoo!, Webcrawler, and others.
Unlike most search engines, ALIWEB relies neither on human classifiers (as Yahoo! does) nor on automated means (as the robot-based search sites do). ALIWEB looks for an index file on each Web site and uses that file as the basis for its classifications.
The indexing is done by the site developer at the time the page is produced, the search is done by ALIWEB (or a local ALIWEB-like script), and the results are presented by that script.
The index file must be named site.idx and must contain records in the format used by IAFA-compliant FTP sites. For example, the events-list document on the server at the MIT Artificial Intelligence Laboratory produces the following entry in http://www.ai.mit. edu/site.idx:
Template-Type: DOCUMENT
Title: Events at the MIT AI Lab
URI: /events/events-list.html
Description: MIT AI Lab events, including seminars, conferences, and tours
Keywords: MIT, Artificial Intelligence, seminar, conference
The process of producing site.idx would be tedious if done by hand. Thau's program automates the process by scanning each file on the site, looking for keywords. The recommended way to supply these keywords is with <META> tags in the header. <META> tags have the following general syntax:
<META NAME="..." VALUE="...">
Valid names include:
Remember that the descriptions ultimately appear in a set of search results. Each description should stand alone so that it makes sense in that context. Thau's program uses the HTML <TITLE> tag to generate the document title. Thus, a document at MIT might begin this way:
<TITLE>MIT AI lab publications index</TITLE> <META NAME="description" VALUE="Search the index of online and hardcopy-only publications at the MIT Artificial Intelligence Laboratory"> <META NAME="keywords" VALUE="Artificial Intelligence, publications"> <META NAME="resource-type" VALUE="service">
By default, site-idx.pl looks for the description, keywords, and resource type in <META> tags. This behavior can be overridden so that any document with a title gets indexed, but the override undoes most of the benefits of using site-idx.pl.
Some pages are not appropriate for promotion outside the site. For these pages, change the distribution to local. The script puts the entry for those pages into a file named local.idx.
In addition to announcing site.idx to ALIWEB, the Webmaster can also use a simple ALIWEB-like script (also supplied by Thau) to index the site for local users. This index can point to only local.idx, or the Webmaster can concatenate site.idx and local.idx into a master index of all pages. The latter approach enables a visitor to search all pages by keyword. Figure 4.14 shows the keywords index field for the Nikka Galleria site at http://www.dse.com/nikka/General/Search.shtml.
Figure 4.14 : Using the local search index, the visitor can find relevant pages by keyword.
Figure 4.15 shows the keywords index field for the Nikka Galleria site set up to search for the keywords painting and artist. Figure 4.16 shows the results of a typical query.
Figure 4.15 : Nikka Galleria provides access to aliwebsimple.pl.
Figure 4.16 : aliwebsimple.pl runs, finding one page that matches the keyword.
Although ALIWEB is not one of the major search engines, the time it takes to add the <META> tags to each page is small when the work is done as the page is produced. site-idx.pl can be set up to run from UNIX's crontab, so a site index can be maintained with very little effort. As search engines continue to evolve, the ability to produce an index from the pages without having to revisit each page in the site will be another factor in keeping your site effective.
Here is where to go if you want more information on site-idx.pl:
http://www.ai.mit.edu/tools/site-index.html
To put in advanced META tags such as Distribution, use the User Variables field of the Advanced tab in the Document Properties dialog.
The HyperText Transfer Protocol (HTTP)-the protocol of the Web-defines a number of header lines that can go back and forth between the client and the server. Most of these lines are managed by the browser and server software, but you as the developer can add lines to the header that the server sends to the client.
To add lines to that header, you use a special META tag, named HTTP-EQUIV. One common use of HTTP-EQUIV tags is to set up client pull animation. If you put a line like
<META NAME="REFRESH" CONTENT="0">
into your document and it is loaded by a Netscape browser, the client refreshes the content of the page by reloading it from the server after zero seconds. If the server entity is a CGI script that provides a new frame with each request, the effect is a simple form of animation.
Another use of HTTP-EQUIV is to set an expiration date on a document:
<META http-equiv="Expires" Content="Thu, 01 Dec 1994 16:00:00 GMT">
Smart browsers and proxy servers keep copies of HTML pages in their cache. If the user requests a page and an unexpired copy is in the cache, the user is served that copy. The load on the network is lower, and the user gets the page faster. But if the copy has expired, the browser or proxy server must go back to the original source to get the latest copy. This technique can be used to keep current those documents that change frequently, such as newsletters or press releases.
Netscape Navigator Gold contains a powerful, easy-to-use HTML editor that can be used to put Web pages together quickly. The output is best viewed with Netscape Navigator, but with a few changes, the output can be made to validate as HTML 2.0 or HTML 3.0. By using standard HTML and then adding a few carefully selected Netscape-specific tags, the page can be made to look good in all browsers, and great in Netscape.
Netscape Navigator Gold also has built-in techniques for supporting both client-side and server-side JavaScript. Using the Insert | HTML Tag menu item, the user can also insert Java applets or plug-ins.