|
|
by Dick Oliver
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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. |
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.
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.
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.
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.
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.
