Web Publishing with Netscape Navigator Gold 3.0

Web Publishing with Netscape Navigator Gold 3.0
(Part 2)
 

This training material is taught based on the book, Official Netscape Navigator Gold 3.0 Book, Windows Edition, by Alan Simpson, Copyright © 1996 Ventana Communications Group, Inc. The book is available at any bookstore. It is compiled and taught by Albert Tran, the Library Information Technology Consultant.

Table of Contents

Chapter 4 - Headings, Lists, Fonts & Indents

Chapter 5 - Spice It Up with Lines & Pictures
Chapter 4 - Headings, Lists, Fonts & Indents

Titling Your Page

To add a title:
  1. Choose Properties | Document from Navigator's menu bar.
  2. In the dialog box that appears, type the title, exactly as you want it to appear in the title bar, in the Title text box.
  3. If you like, fill in other options (discussed next).
  4. Choose OK to exit the dialog box.
The three options presented in the Document Properties dialog box:
  • Title: The title as it will appear in the Web browser's title bar.
  • Author: Your name.
  • Description: A brief description of the page.
Go Back to the Table of Contents 


Creating Headings

Headings identify major sections, subsections within a major section, sub-subsections, and so forth within a large body of text.

Navigator offers six levels of headings named Heading 1, Heading 2, and so forth. The first-level heading is the largest text. Heading 2 is the next largest, and so forth, down to Heading 6, which is the smallest.

Go Back to the Table of Contents 


Aligning Text

You can easily align text on your Web page.
  • Left-aligned: Text aligns with the left margin.
  • Centered: Text is centered between the margins.
  • Right-aligned: Text is flush right.
The basic procedure for aligning text is simple. Just follow these steps:
  1. Click on the line (or paragraph) you want to align, or select multiple lines.
  2. Click the Align Left, Center, or Align Right button in the Paragraph Format toolbar. Or choose Properties | Text | Paragraph, then choose Left, Center, or Right from the Align options, and then choose OK to close the dialog box.
Go Back to the Table of Contents 


Boldface, Italic & Such

You can apply boldface, italic, and other common weights and styles to text in your Web page.

Select the text to which you want to apply the format. If you want to apply the format to a single word, you can just double-click that word to select it. Then do one of the following:

  • If you want to apply boldface, italic, or fixed width to the text, just click the appropriate button in the Character Formatting toolbar.
  • To apply other formats, choose Properties | Text, click the Character tab, and then choose any combination of options from the Style group.
If you change your mind after applying one of these styles, you can clear the selection by using any of these methods:
  • If you haven't done anything else since applying the style, just choose Edit | Undo.
  • Or, reselect the text you want to "unstyle," and click the Clear All Styles button in the toolbar.
  • Or, reselect the text you want to "unstyle," choose Properties | Text, click the Character tab, and then click the Clear Style Settings button.
Go Back to the Table of Contents 


Creating Lists

Numbered List: Each item in the list is numbered. Good for presenting step-by-step instructions.

Bulleted List: A bullet character precedes each item. Useful for presenting information when the items in the list are in no particular order.

Creating a Numbered List

Typing a numbered list is as easy as pie:
  1. Type each item in the list without the number. Press Enter after you type each item.
  2. Select all the items that make up the list.
  3. Click the Numbered List button in the Paragraph Format toolbar.

Creating a Bulleted List

To create a bulleted list, start with the same basic procedure you used for a numbered list. That is:
  1. Type each item in the list, pressing Enter after you type each item.
  2. Select all the items in the list.
  3. Click the Bulleted List button in the Paragraph Format toolbar.
Go Back to the Table of Contents 


More On Lists

Customizing Numbers & Bullets

You can customize the lists by following these steps:
  1. After making sure that you are working in the editor, right-click the first item in the list.
  2. Choose Paragraph/LIst properties from the pop-up menu that appears.
  3. In the Properties dialog box, choose an option from the Bullet Style or Number Style drop-down list.
  4. If you're customizing a numbered list, you can also change the starting number for the list.
  5. Choose OK to close the dialog box and save your changes.

Indenting Within Lists

to indent within lists
  1. Select the entire list.
  2. To indent the list, click the Increase Indent button in the Paragraph Format toolbar, or press Tab.
  3. If you go too far and want to "outdent," click the Decrease Indent button in the toolbar, or press Shift+Tab.

Create Menu List

The menu list gives you all the benefits of a numbered or bulleted list, without the numbers and bullets. To create a menu list, follow these steps:
  1. Type each item in the list, pressing Enter after you type each item.
  2. Select all the items in the list.
  3. Choose Properties | Text, and click the Paragraph tab.
  4. Under Paragraph Style, choose List Item.
  5. In the section titled List, choose Menu List from the Style drop-down list.
  6. Choose OK.

Creating A Directory List

The directory list succinctly presents short list items in three columns across the page. Each item in the list should be a short word or phrase (up to 20 characters).  To create a directory list, follow the same basic steps you'd follow to create a menu list:
  1. Type each item in the list, pressing Enter after each item.
  2. Select all the items in the list.
  3. Choose Properties | Text, and click the Paragraph tab.
  4. Under Paragraph Style, choose List Item.
  5. In the section titled List, choose Directory List from the Style drop-down list.
  6. Choose OK.

Creating A Description List

The description list-also called a definition list or glossary list-is generally used to list brief words or phrases and their definitions or descriptions. To format the text as an item in a definition list, follow these steps:
  1. Click on the definition term (the short text).
  2. Choose Description Title from the Paragraph Style drop-down list in the toolbar.
  3. Click in the lengthier definition (the longer chunk of text).
  4. Choose Description Text from the Paragraph Style drop-down list in the toolbar.
  5. Repeat Steps 1 through 4 for every item in the list.
Go Back to the Table of Contents   

Changing the Relative Font Size

You can change the relative size of a font to any value in the range of -2 to +4 (-2 is very fine print, 0 is the same as the normal text on the page, and +4 is very large).
  1. Select the text that you want to resize.
  2. In the Character formatting toolbar, use any of the following tools to change the font size:
  • Click the Decrease font size button to shrink the text.
  • Click the Increase font size button to enlarge the text.
  • Or, choose a value (-2 to +4) from the Font Size drop-down list.
  • Or, choose Properties | Font Size and whatever size you want.
Go Back to the Table of Contents   

Changing the Font Color

You can change a color for any chunk of text, as follows:
  1. Select the text that you want to color, Then...
  • Click the Font Color button in the Character Format toolbar.
  • Or right-click on the selection and choose Character Properties | Custom Color | Choose Color.
  • In the Color dialog box, choose a color.
  • Click OK to work your way to back to the document.
  • Go Back to the Table of Contents   

    Block Quotation

    Another way to indent text is with the Block Quotation format. This format is typically used to identify lengthy quotes. Use the standard techniques to apply the Block Quotation format to text, as follows:
    1. Right-click the paragraph that you want to format, and choose Paragraph/List properties.
    2. Choose Normal from the Paragraph Style drop-down list.
    3. Choose Block Quote from the Additional Style drop-down list.
    4. Click the OK button.
    Go Back to the Table of Contents   
    Chapter 5 - Spice It Up with Lines & Pictures

    Inserting Lines

    To insert a horizontal line, you don't type a series of hyphens or underlines. Rather, the process is similar to that used to insert a picture:
    1. Click at about the place you want the horizontal line.
    2. Click the Insert Horiz. Line button in the Character Format toolbar, or choose Insert | Horizontal LIne from the menus.

    Customizing A Line

    You can alter the length, height, alignment, and appearance of a horizontal line by following these simple steps:
    1. Right-click the line you want to change and choose Horizontal Line properties from the pop-up menu. You'll see the dialog box.
    2. Make whatever selections you wish and then click the OK button.
    Go Back to the Table of Contents   

    Acceptable Picture Formats

    Pictures on computers come in hundreds of formats, including these bitmap (.BMP), tagged image file (.TIF), computer graphics metafile (.CGM), Windows metafile (.WMF), WordPerfect graphics (.WPG), graphics information format (.GIF), and joint photographic experts group format (JPEG), and so forth.

    Of all these formats, you can use only GIF and JPEG in your Web site, mainly because those two formats compress the pictures into a very small file size to minimize the time needed to send the picture across the Internet.

    • GIF files can contain up to 256 colors, and can have transparent backgrounds.
    • JPEGs, which can contain millions of colors, are preferred for photographs and other very-high resolution color images.
    Go Back to the Table of Contents   

    Inline Images Versus External Images

    You can present an image in your Web site in two ways:
    • Inline image: Displayed automatically when the reader opens your page. Most images you see are inline.
    • External graphic: Only a hyperlink appears in your page. The reader must click the link to view the image. Preferred for large pictures that are not critical to your general presentation, and which might take a long time to download.
    Go Back to the Table of Contents   

    Downloading Pictures From the Web

    If you find a picture that you want to use in your own Web pages, and you're sure you can do so without stepping on any toes, you can follow these steps to download the picture:
    1. Right-click the picture you want to download to your own PC, then choose Save Image As from the pop-up menu.
    2. In the Save Image As dialog box, choose a folder in which to store the image.
    3. Optionally, enter a new filename in the File name text box. Be sure to use the same extension used in the original filename.
    4. Click the Save button.
    Go Back to the Table of Contents   

    Adding Pictures to Your Web Page

    To add a picture to your Web page, make sure that your page is in Gold's editor. Then follow these steps:
    1. Click the Insert Image button in the Character Format toolbar, or choose Insert | Image from the menus.
    2. If you've never saved this document before, you'll be prompted to do so now. Choose Save, and save the document to whatever folder you want to store your pages in.
    3. In the dialog box, click the top Browse button.
    4. In the Select Image File dialog box, browse to the image you want to insert. That is, choose its folder from the Look in drop-down list, then click the name of the specific image you want. Click the Open button.
    5. If the image you selected is not in the same folder as the Web page you're editing, make sure that the Copy image to the document's location check box is selected (checked).
    6. You can now choose additional options in the dialog box, as described under "Formatting Your Pictures," later in this chapter. Or you can leave all those options as-is and change them later if you like.
    7. Choose OK.
    Go Back to the Table of Contents   

    Formatting Your Pictures

    With your picture on your page, in roughly the right place, you can use the techniques described in this section to fine-tune the picture to perform. First, you need to get to the Image Properties dialog box. To do so, just double-click the picture.

    Alternative Representations

    The Alternative Representations area in the Image Properties dialog box lets you specify an alternative image and alternative text.

    Alignment

    The Alignment options in the Image Properties dialog box let you decide how neighboring text in the document aligns with the picture. If you plan to have one line of text next to the picture, you should choose one of the first five buttons to specify how you want that one line to align with the picture.

    Sizing a Picture: Dimensions

    The Dimension option is an important one because it determines the size of the picture, in pixels. When you place a picture in your Web page, the dimensions of that picture are filled in automatically.

    Space Around Image

    The Space Around Image option lets you determine how much blank space to put between a picture and its neighboring text.

    Copy Image to Document's Location

    The Copy Image to Document's Location option ensures that any pictures you put in your Web page are copied to the same folder that holds the page itself.

    Edit Image

    The Edit Image button opens the current image in whatever program you've chosen as your image editor.

    Go Back to the Table of Contents   


    Unwrapping Text From An Image

    Suppose that you have some text wrapping around an image, but you want to start a new paragraph beneath that image. Move the cursor to the start of the text you don't want to wrap. Then choose Insert | Break Below Image(s) from Navigator's menu bar.

    Go Back to the Table of Contents 


    Background Textures, Images, & Colors

    You are not limited to plain white or dreary gray backgrounds in your Web pages. You can color the background, or even add a picture or texture.

    Background images and textures are just regular GIF and JPEG files.

    To add a background texture or picture to your Web site, you must first create, or find, the GIF or JPEG image you want to use. Put the GIF or JPEG image in the same folder as the page that will display the image. Then follow these steps:

    1. Open your Web page in Gold's editor.
    2. Choose Properties | Document, and click the Appearance tab to get to the dialog box.
    3. Click the Use Custom Colors option button, then...
    • To give the page a solid background, click the Solid color option button, then click the Choose Color button and select a color from the palette that appears.
    • If you prefer to use an image file, click the Image file option and use the Browse button to open your image file.
  • Choose OK to close the Document
  • Go Back to the Table of Contents 

    Return to JFK Library Intranet Home Page 

    Last updated: August 18, 1997