Chapter 12 -- Netscape Navigator Gold
Chapter 12
Netscape Navigator Gold
by Dick Oliver
CONTENTS
Why Go for the Gold?
Netscape Gold as a Visual Editor
Visual Editing and Hard Coding
Creating a New Web Page
Document Editing
The Toolbars
Starting from Scratch
Spicing Things Up
Adding Links to the Page
Adding Images to a Web Page
Using Templates and the Page Wizard
Web Templates
The Page Wizard
One-Click Publishing
The Publish Button
The Web Page Starter Site
Interactive Table Design
Summary
The Gold edition of Netscape Navigator is not only a Web browser,
but also a Web publishing tool. In this chapter, you will learn
about the Web publishing capabilities built into Netscape Gold.
Why Go for the Gold?
As discussed in previous chapters, the HTML code used to define
the appearance and contents of a Web page is basically a set of
commands stored in a text file. The problem for many people who
are new to Web publishing is that the almost cryptic appearance
of HTML code can be very disconcerting.
For example, to create the simple Web page shown in Figure 12.1,
the following HTML code was used:
Figure 12.1 : The HTML code used to describe even the
simplest Web page can often be confusing.
<HTML>
<HEAD><TITLE>Hi-Ku</TITLE></HEAD>
<BODY BACKGROUND="dotty.gif" TEXT="#880000" LINK="#880000" VLINK="#FFFFFF">
<DIV ALIGN="center">
<TABLE BORDER=0><TR><TD VALIGN="top">
<IMG SRC="hiku.gif" ALT="modern moments; hi-tech haiku">
</TD><TD>
<FONT SIZE=+1><I><DIV ALIGN="center">
<PRE>
</PRE>
pick up and you know<BR>
from the pause before the voice<BR>
telemarketer<P>
CDs never change<BR>
but every time I play one<BR>
it's not quite the same<P>
traffic jam? no prob<BR>
I've got a cel modem and<BR>
lots of batt life left<P>
RuPaul and Limbaugh<BR>
are now in the same time slot<BR>
this seems important<P>
</I></FONT></DIV>
</TD><TD VALIGN="bottom">
<A HREF="dicko.htm"><IMG SRC="dicko.gif" ALT="dicko" BORDER=0></A>
</TD></TR></TABLE></DIV>
</BODY>
</HTML>
To anyone from the Windows or Macintosh world, this need for hard
coding Web pages is often hard to understand. In a world where
programming languages such as Delphi, Visual Basic, and even Visual
FoxPro use graphical environments for application development,
and word processors provide on-screen approximations of their
final output as a matter of course, the World Wide Web has in
many ways been slow to adopt this obvious technology.
Of course, some notable exceptions include the powerful Live Markup
Pro system and other commercial products such as PageMill, but
on the whole, most people-even those using HTML editors-spend
most of their time dealing with raw HTML code.
Netscape Gold as a Visual Editor
In creating Netscape Gold, its developers aim to move the focus
of Web publishing from the mechanics of writing HTML code to the
more creative aspects of Web design by reducing and eventually
removing the need for hard coding Web pages.
In the place of HTML coding, Netscape Gold offers a visual editing
environment that closely approximates that of a Web page and at
the same time adopts many of the concepts used by word processors
and document publishing tools (see Figure 12.2).
Figure 12.2 : Netscape Gold provides a Web publishing
environment that looks and feels like a Web page.
This is not to say that Netscape Gold does away with HTML altogether.
At its heart, Netscape Gold still generates true HTML code, but
during the editing phase, this code is hidden from the user by
the graphical interface.
In addition, in its current incarnation, Netscape Gold is limited
in some ways by the fact that it does not directly support all
the functionality possible when hard coding HTML source code.
For this reason, when creating complex Web pages, you will still
need to understand the principles behind the HTML language and
its various constructs.
As a result, much of the content of this book still deals with
the mechanics of writing HTML code, and it would appear that Netscape
Gold users will need this information for some time to come.
Visual Editing and Hard Coding
As things currently stand, there are some limits to what you can
achieve using a program like Netscape Gold. Basically, some of
the more powerful HTML features such as forms and frames cannot-yet-be
visually added to your Web pages. That is, you cannot insert them
into your Web page by selecting an option from a menu or by clicking
on a toolbar. (Note that Microsoft FrontPage does support some
visual editing of some of these advanced features.)
As you will learn later, there is nothing stopping you from adding
all your basic Web page functionality using Netscape Gold and
then hard coding only those items that specifically require such
steps. This is, in fact, one of the most powerful features of
Netscape Gold. It does not limit your Web publishing requirements
to only those features it supports internally. Instead, you are
free to extend the Web pages it creates in any way you see fit.
The following sections will guide you through the steps involved
in creating Web pages from scratch. In the section "Using
Templates and the Page Wizard," later in this chapter, you
will discover some of the tools Netscape has created to reduce
the amount of work you need to do when getting started.
Creating a New Web Page
To get started using the Netscape Gold editing environment, you
can follow a number of different paths. For the time being, the
quickest way to create a blank Web page is to open the File
menu on the Web browser window and select New
Document | Blank,
as shown in Figure 12.3. Netscape will display an editing window
like the one shown in Figure 12.4.
Figure 12.3 : Access the editing environment by creating
a blank Web page.
Figure 12.4 : The Netscape Editor window.
With the editing window open, you are just about ready to create
your first Web page. Before you get started, however, you need
to do one more thing. Unlike most word processors and document
editors (which will let you create the contents of a new document
before saving it to disk), before you can do any serious Web publishing
with Netscape Gold, you need to name the page you are creating
and save a copy to your hard drive.
To do this, select the Save
option from the File menu.
You'll see a dialog box similar to the one shown in Figure 12.5.
Select the folder on your hard drive where you want to store your
Web pages and give the file a name that ends with .htm.
For now, use something like goldpage.htm.
Figure 12.5 : You should give each new Web page a name
and save it to disk.
Document Editing
As in a normal Web browser, the most important area of the Netscape
Gold editing window is the document area. Unlike the Web browser,
this editing window will let you enter new text, edit existing
text, add images, insert hyperlinks, and control the appearance
of the Web page in general.
If you have ever used a word processor or any other form of editor,
the basics of the editing window will be relatively straightforward.
Wherever the insertion point cursor-the blinking vertical bar-is
currently located is where you are currently working.
Whatever you type on the Web page will appear at the insertion
point. Pressing the Delete button on the keyboard will delete
text and elements, as will pressing the backspace key. In addition,
you can use the up, down, right, and left cursor keys to move
the insertion cursor around the Web page, or alternatively, you
can move it by clicking with your mouse cursor.
The two most important menus for editing Web pages are the Insert
menu and the Properties menu. The Insert menu contains a list
of the different types of elements that you can add to a Web page.
When you select any of the entries on this menu, Netscape Gold
will automatically add the element to your Web page-and you don't
need to know about the HTML codes for it.
To control the positioning of the elements available on the Insert
menu, place your cursor at the point in the document where you
want the element to be inserted and click with the mouse. A vertical
positioning bar like that found in many word processors will indicate
the current edit point.
The Properties menu enables you to control the appearance and
actions of the various elements that you can place on a Web page,
in much the same way that you can alter the appearance of text
in a word processor. Most of the functions on the Properties menu
are controlled by the type of text or element that is currently
selected in the editing window. To select an element or block
of elements and text, click where you want to start highlighting
and then drag your mouse down to highlight all the required information.
The Toolbars
Although the menus across the top of the Editor window give you
access to the Web publishing features provided by Netscape Gold,
for the most part, you will find that accessing the various functions
via the toolbars is a far more efficient way of working.
Below the menu, you will find three separate toolbars that give
you access to specific sets of functions.
The File/Edit toolbar-This toolbar
basically duplicates the features provided by the File menu along
with the basic editing tools from the Edit menu.
The Character Format toolbar-Many
of the buttons on the Character Format toolbar duplicate the formatting
options on the Insert and Properties menus. More specifically,
each of these options deals with settings that you can apply to
an individual character or element.
The Paragraph Format toolbar-Navigator
Gold includes a number of paragraph formatting tools and predefined
paragraph styles that you can assign to blocks of text and objects
on your Web pages. The Paragraph Format toolbar lets you easily
assign paragraph formatting to the text you currently have selected.
Starting from Scratch
With your new Web page ready to go, the first thing you need to
do is edit the document properties. Select the Document item from
the Properties menu.
The Document properties dialog box contains three tabbed windows.
The first, shown in Figure 12.6, contains General properties for
your Web page. As a rule, you should always complete the Title
and Author fields at the
very least. The remaining fields are optional and can be left
blank for now. The Description,
Keywords, and Classification
fields have no physical effect on the appearance of your Web page
and are only of real relevance to certain Web servers and search
engines.
Figure 12.6 : Make sure you define at least the Title
and Author properties for every Web page you create.
The second tabbed window-Appearance-is where you define the default
color for your Web page. You can set the color for individual
elements such as the background, text, and links, or alternatively,
you can select one of the predefined color schemes such as Black
on Yellow, as shown in Figure 12.7. There is also a provision
for defining a background image to be tiled behind the Web page.
Figure 12.7 : The Document Appearance dialog lets you
define the overall visual appearance of your Web page.
The final tabbed window of the Document Properties window-Advanced-is
used predominantly for special HTTP-EQUIV instructions, and as
such, it is beyond the scope of this section of the book.
After you have finished making your changes to Document properties,
click on the OK button to
save the settings.
The next step is to add some text and formatting to the page.
To begin, type a heading for the page as in the following:
The Quest for Gold
Press the Enter key and then type
For ages, humankind has navigated the unknown in search of gold. This site will
help you find gold on the wild electronic frontier.
On lines below this one, enter the names of some of your favorite
financial (or maybe Olympic sports?) Web sites. Three or four
will do for now, but you can add more later if you like.
Finally, enter one last line that says:
Page created by Dick Oliver - May 20, 1996.
Remember, of course, to insert your own name and the current date.
At this stage, if you've been following along, you should have
a Web page that looks something like the one shown in Figure 12.8,
and if you click on the View in Browser button or select Browse
document from the File
menu, your Web page will be displayed as a document in the browser
window.
Figure 12.8 : The beginnings of a simple Web page.
Spicing Things Up
Although you have created a Web page, at this stage it looks a
little bit bland. Take a look at what it will take to turn goldpage.htm
into something a little more impressive.
To begin, highlight the text in the first line-The
Quest for Gold. Because it is the main title for our
page, either select the Heading 1
submenu item from the Paragraph
item of the Properties menu,
or alternatively, simply select Heading 1 from the Paragraph Style
list box on the Paragraph Format toolbar.
When you select Heading 1, the font size of the selected text
should become very large. To add even more emphasis to the heading,
with the text still selected, click on the Center button, which
is also located on the Paragraph Format toolbar.
With these changes made, the first line of text on your Web page
should look like that shown in Figure 12.9.
Figure 12.9 : A few clicks of the mouse added a Heading
1 style and centering.
The next step in this exercise is to turn your list of sites into
a bulleted list. Highlight the list of site names you entered
earlier. Click on the first letter of the first line and then
drag your mouse down until all the lines are highlighted. With
all the lines selected, all you need to do to create a bulleted
list is click on the Bullet List button on the Paragraph Format
toolbar.
Because there isn't very much text on this page, you might also
decide to increase the size of the text by selecting all of it
and clicking on the A+ button on the Character Format toolbar.
To finish the page, change the style for the last line to the
paragraph style Address and add a horizontal rule before it by
clicking on the Horizontal Rule button on the Character Format
toolbar. The result is a list like the one shown in Figure 12.10.
Figure 12.10: Your first Web page all spiced up.
Adding Links to the Page
You now have a good-looking Web page to show your friends, but
at the moment, it is not very functional. To make the page functional,
what you need to do is add some hyperlinks to the page.
Highlight the text of the first name-in this case, Investor's
Edge Stock Server-and click on the Make Link button located on
the Character Format toolbar. Alternatively, you can also select
the Link item from the Insert
menu.
Regardless of which option you choose, you'll see a dialog box
like the one shown in Figure 12.11 on screen. In the top section
of the window, the text you selected is shown under the title
Linked Text, and below it is a field where you can enter the address
of the Web page you want to link to.
Figure 12.11: The Link dialog box.
After entering the URL address of the site in the Link
to field, click on the OK
button to complete the creation of your hyperlink. You then need
to work down through your list of sites, highlighting the appropriate
text, clicking on the Make Link button, and entering the appropriate
URL address.
Note
In addition to defining links to other Web sites, you can also use the Link dialog to point to other links stored on your local computer. To create such links, use the Browse File button on the Link dialog to select the file you want to link to.
Once you have finished adding a hyperlink to each of your listed
sites, it's time to add a special link that will help people get
in touch with you via e-mail. On the last line of your Web page,
highlight your name and click on the Make Link button. Then, in
the Link field, enter a special
URL that takes the following form:
mailto: your @email.address
So that people can e-mail me, I entered mailto:dicko@netletter.com
in the Link to field, but
you will need to replace my e-mail address with your own. Once
you have done this, click on the OK
button to complete the link.
If you have been following along with the past few steps, you
should now have a fully functional Web page that looks something
like the one shown in Figure 12.12.
Figure 12.12: Now that the links have been added, this
Web page is almost complete.
Adding Images to a Web Page
To complete the Web page in Figure 12.12, you might like to add
some graphics. Move the cursor so that it is positioned before
the first word in the title and click on the Insert Image button
on the Character Format toolbar, or alternatively, select the
Image item from the Insert
menu. You'll see a dialog box like the one shown in Figure 12.13.
Figure 12.13: The Image dialog box.
The Image Properties dialog box consists of three tabbed windows.
The first, Image, deals with the appearance of the image itself.
The Link tab lets you turn an image into an hyperlink, and the
Paragraph tab controls the paragraph formatting associated with
the image.
For now, confine your interest to the Image tab. In this example,
the file name for the image to be displayed is goldcoin.gif,
and it is located in the same directory as the HTML file. Enter
the name of the image you want to use in the Image
file name
field.
Note
The image file name can also be a URL or a file in a different directory. To help you locate an image, use the Browse button included next to the Image file name field.
Below the Image file name
field are two Alternative representation
fields. As a rule, you do not need to include an alternative image
here, but you should always include some alternative text for
those people who prefer not to display images on the Web browser.
For this exercise, enter Gold Coin into the text field.
Directly below the Image file name
area is a row of buttons that let you control the alignment of
your image. These buttons from left to right are Top, Absolute
Center, Center, Baseline, Bottom, Wrap Left, and Wrap Right.
For this exercise, you want to choose the last button on the right,
which is Wrap Right. Finally, to add a bit of spacing around the
image, enter a value of 4 into the Left and Right spacing box.
If you want this image to be a clickable hyperlink, click on the
Link tab and fill in the location where the hyperlink should lead.
If you now click on the OK
button, a copy of the image will be displayed at the front of
the document, as shown in Figure 12.14. Note that Figure 12.14
also shows a background image, which I specified by returning
to the Properties/Document dialog box discussed earlier.
Figure 12.14: The Navigator Gold editing window previews
graphics and backgrounds but does not preview text wrapping alignment.
Note that the gold coin image in Figure 12.14 is not aligned to
the right, as requested, because the Navigator Gold editing window
does not preview any text-wrapping alignment. In order to see
the text wrap correctly, you'll need to click on the View in Browser
button on the File/Edit toolbar. A browser window will appear,
as in Figure 12.15.
Figure 12.15: To see text wrapping, view the page in
the browser window.
Using Templates and the Page Wizard
To help you get up to speed quickly using Netscape Gold, Netscape
Communications created a collection of Web pages on its host site
that lets you build impressive-looking Web pages by starting with
a basic template and then adding your own information and images
as required.
Web Templates
To access the templates provided by Netscape, open the File
menu and choose the From Template
submenu item below the New Document entry. Doing so will request
a copy of the current templates index from the Netscape Web site.
(See Figure 12.16.) The Templates page includes a detailed list
of instructions describing how to use the templates with Netscape
Gold, along with a list of the currently available files.
Figure 12.16: The Netscape Web page Templates page.
To use any of the listed templates with Netscape Gold, simply
click on the corresponding hyperlink and wait for the template
page to display on your browser. Then, if you like the look of
the chosen template, click on the Edit button located in the browser
toolbar or select Edit Document
from the File menu.
You'll see a dialog box like the one shown in Figure 12.17, informing
you that you need to save the template file to your local hard
drive before you can edit it. As a rule, simply click on the Save
button to proceed with the download.
Figure 12.17: You must save templates to your local
hard drive before you can edit them.
Caution
At this stage, you might encounter a warning regarding the use of copyrighted material. All of the templates provided by Netscape are freely available for your use; however, if you attempt to edit files from other Web sites, copyright restrictions could
apply.
Finally, to complete the download process, you'll see a file requester
dialog box. Use this dialog box to indicate where to store the
template file and also define what to call it. Then, when you
click on the Save button,
a copy of the template and any image associated with it is saved
to your local hard drive. Once this process is complete, you can
then edit the template and adjust it to your own purposes using
the Editor window. (See Figure 12.18.)
Figure 12.18: Once the template is stored locally, you
can edit it to suit your needs.
The Page Wizard
If none of the predefined templates is suitable to your needs,
then you might like to try the Page Wizard shown in Figure 12.19.
To try the Page Wizard for yourself, open the File
menu and choose the From Wizard
submenu item below the New Document entry. Doing so will start
the Page Wizard system.
Figure 12.19: The Netscape Page Wizard.
The Page Wizard guides you step-by-step through the process of
creating a basic Web page, and when the page is complete, you
simply download it to your local hard drive, as was the case for
templates; select the Edit button from the Navigator Gold browser
and save the file to your hard drive.
Note
As was the case with using templates, you need to be connected to the Internet to use the Page Wizard.
One-Click Publishing
All the Web pages you've created in this chapter were saved to
your local hard drive, and as a result, they could be viewed only
by you. Naturally, however, as you begin to build Web pages, your
main aim will be to publish your Web page creations on the Internet
for everyone to view.
To do this, you need to take a number of steps, the most significant
of which is gaining access to a Web server to house your Web pages.
Your Internet service provider (ISP) can provide you with specific
information about hosting pages on its Web server.
The Publish Button
Assuming now that you have managed to obtain access to a Web server,
the next issue you need to deal with is how you get all the files
and images you have stored on your local hard drive onto the Web
server that is going to publish your files.
This is where the Publish button on the Netscape Gold editor window
comes into its own. Traditionally, the process of installing files
onto your Web server has been a manual, time-consuming task, but
with Netscape's one-click publishing system, the entire process
can be completely automated.
To demonstrate how the system works, return to the goldpage.htm
file created earlier in the chapter and work through the steps
involved in publishing that file on my Web site at http://netletter.com/.
First, load the file you want to publish into the Editor window
and then click on the Publish button on the File/Edit toolbar.
You'll see a dialog box like the one shown in Figure 12.20.
Figure 12.20: The Publish Files dialog box.
The top section of the dialog box lets you control what files
are to be published. In this case, there are two files, the HTML
page itself and the gold coin image. In addition, it is possible
to publish the entire contents of a directory or just a small
group of files by selecting the appropriate radio button and files.
The bottom section of the Publish Files dialog box is where you
indicate the location of the Web server that is to publish your
Web pages. You can define either an FTP or HTTP URL here depending
on the capabilities of your Web server, and in most cases, you
will also need to supply a user name and password.
Once you've entered all the appropriate information, all you need
to do to publish your files is click on OK.
Netscape Gold will then take over and look after the task of installing
the selected Web pages and images onto your Web server.
The Web Page Starter Site
To help people learn more about the process of Web publishing,
Netscape Communications created a special area on its Web site
called the Web Page Starter Site. (See Figure 12.21.) To access
the Web Page Starter Site, open the Help
menu and select the Web Page Starter
option.
Figure 12.21: The Web Page Starter Site.
This site contains a wealth of information about the intricacies
of Web publishing and covers a wide variety of topics including
instructions on finding a Web server, copyright and legal issues,
Web style guides, links to popular Web publishing information
sites, and a special area devoted to Netscape Navigator Gold users
called the Netscape Gold Rush Tool Chest.
In the Tool Chest, you will find links to the templates mentioned
previously, a collection of clip art and graphics, more style
guides, and various hints and tips on how to create Web pages
with Netscape Gold.
Interactive Table Design
Unfortunately, the current version of Netscape Navigator Gold-24.0b2-does
not directly support the use of frames and other advanced extensions
to HTML. However, you can use the HTML tag option to hard code
these features into your Web pages. See Chapter 7 "Creating
and Enhancing Web Pages with Frames," for details on these
more advanced HTML tags.
The good news is that Navigator Gold does support interactive
table editing. To see how this feature works, use a table to change
the layout of the graphics and text on the Quest for Gold page.
First, create a new table by selecting Insert
| Table. The
dialog box in Figure 12.22 appears, allowing you to specify the
size and attributes of the table. Eventually, you'll give this
table a border size of zero to make the borders invisible, but
it is much easier to work with tables when the borders are showing,
so leave the border size at 1 for now. Enter 1 row and 3 columns,
and then click OK.
Figure 12.22: The Insert Table dialog lets you create
complex tables without writing any HTML code.
The new table appears as small, empty cells. To move elements
of the page into the cells, select the material you want to place
in a cell and then select Edit
| Cut. Then, place the cursor
inside the cell and select Edit
| Paste. Figure 12.23 shows
a three-cell, single-row table with all the text and graphics
from the page moved into it.
Figure 12.23: You can use tables as a powerful page
layout feature.
On the Insert and Properties menus, you'll find menu items for
creating, deleting, and controlling the attributes of each row
and cell in a table. Figure 12.24, for example, shows the Cell
crosstab of the Properties/Table dialog box, which lets you change
the alignment, size, and background color of an individual cell.
You can also make cells span more than one row or column in the
table.
Figure 12.24: You can change an individual cell in a
table with Properties/Cell.
To create the layout in Figure 12.25, I added a row with Insert | Row
and then used Properties | Cell
to make the two rightmost cells span both rows. Finally, I forced
the empty cell on the bottom-left corner to have a fixed height
of 40 percent of the overall table height.(This control is also
within the Properties/Cell dialog box.) Finally, I hid the borders
of the entire table by selecting Properties | Table
and setting the border width to 0. With a little practice, you'll
be making creative Web pages with Netscape Gold that would be
very confusing to code by hand with TABLE,
TR, TD,
and TH tags.
Figure 12.25: By tweaking the properties of each cell,
you can add a great deal of variety to you Web pages.
Summary
This chapter introduced you to interactive Web page creation and
editing with Netscape Navigator Gold 3. When you combine the speed
and interactive layout capabilities of Navigator Gold with the
handcrafted HTML tricks you learned in previous chapters, your
productivity and enjoyment will soar.
Wyszukiwarka
Podobne podstrony:
ch12ch12 (15)ch12 (16)ch12ch12ch12ch12ch12ch12ch12ch12ch12ch12ch12budynas SM ch12ch12CH12ch12 (3)więcej podobnych podstron