Basic Web Publishing Guide Using Netscape Composer

This Guide Was Adapted In Part From The Help Sections of Netscape Communicator. 
Copyright permission was granted by the organization for educational use. 

Quick Find: To find a keyword on the page, Type A Keyword(s) Here then click and look for the highlighted word below. Continue to click the FIND button until you have found the subject you are looking for.

 

Opening Netscape Communicator

Find Netscape Communicator in the Start/Programs Menu. Click on it to open and then follow below.

WB00790_.gif (159 bytes)back to top

 

Creating Web Pages

Starting From a New Page
To start a new web page, use one of the methods described below. Once you've started a page, you can add and edit text just as you would in a word processor. Open the File menu and choose New; then choose Blank Page (Blank on Mac OS). A Composer window containing a blank page opens.

To start from an page already created in Composer:

1.  Choose Page Composer from the Communicator menu. 
2.  Open the File menu and choose Open Page (Open Page...in Composer on Mac OS). Type the path and name of the file you want to use, or click Choose File to
search for the file.
3.  Click Composer.
4.  Click Open. A Composer window opens containing the specified file.

WB00790_.gif (159 bytes)back to top

 

Saving and Previewing/Browsing Your New Page 

To save a page: 

Open the File menu and choose Save. 

Note: To save links and images with a page use the Publishing Preferences dialog box.

To preview your page in a Navigator (browser)window: 

Open the File menu and choose Browse Page. The Composer window remains open behind the new Navigator window. 

WB00790_.gif (159 bytes)back to top

 

Changing Text Color, Style, and Font 

1.Highlight the text you want to format. 
2.Open the Format menu and choose Character Properties; then click the Character tab. All the options are explained below: 

Font Face 

Click to select the font you want. To have your page use fonts specified by a reader, select Variable Width or Fixed Width. 

Font Size

Click to select the size of the specified font. 

In the list of font sizes, you'll see a menu of point sizes (8, 9, 10, 12, 14 and so forth), the relative HTML font scale (-2 to +4), or both. You can specify which type of menu you want in the General panel of the Composer Preferences dialog box (Windows only). 

Color 

Click Use Color, then click the color button to choose the color of the selected characters. The color button is the rectangle to the right of the Use Color button. If the current text color is black, then the color button is black. 

Click Don't Change if the selected text contains more than one color. 

Note: You can specify default text color in the Colors and Background panel of the Page Colors and Properties (Page Properties on Mac OS) dialog box.

Other Colors 

Click the color button in the Color section to display a colors dialog box. Then click Other. You'll see a dialog box where you can choose a custom color. 

Style

Select a style, such as italic, bold, underline, or nonbreaking, for the selected characters. 

Remove Style Settings

Resets any style checkboxes you have selected to unselected or blank. 

Remove All Settings 

Resets all settings you have made in this dialog box to unselected or blank. 

To preview your settings, click Apply. Then click Close to accept the changes. To accept the changes without previewing, click OK. 

WB00790_.gif (159 bytes)back to top

 

Inserting Horizontal Lines 

1.Click the location in the Composer window where you want the line to appear. 
2.Open the Insert menu and choose Horizontal Line. 
3.To specify the line's height, width, alignment, and shading, double-click on the line.

WB00790_.gif (159 bytes)back to top


 

Adding Tables to Your Web Page 

This Is
A Table

Inserting a Table 

1.Place the insertion point where you want the table to appear in your document. 
2.Choose Table from the Insert menu. 
3.Use the New Table Properties dialog box to set up your table. 
4.Click OK. 

Adding and Deleting Rows, Columns, and Cells 

To add to your table: 

1.Click where you want to add space. 
2.Open the Insert menu and choose Table; then choose Row, Column, or Cell. 

To delete: 

1.Click in a row, column, or cell. 
2.Open the Edit menu and choose Delete Table; then choose Row, Column, or Cell. 

Changing a Table 

You can change a table's caption or border, or the width, height, alignment, color, or background of a table or parts of a table. 

1.To change an entire table, click anywhere inside it; to change a specific row or cell click inside the row or cell. 
2.Open the Format menu and choose Table Properties (Table Info in Mac OS). 
3.Click the Table, Row, or Cell tab. 
4.Use the Table Properties dialog box to make your changes. 
5.Click OK. 

The settings you choose in the Table Properties dialog box always override the settings you chose when you first created the table. 

Using the Table Properties Dialog Box 

Use the New Table Properties dialog box and the Table Properties dialog box to set or change a table's characteristics. All the fields are explained below. 

To create new tables, use the New Table Properties dialog box: 

Open the Insert menu and choose Table. 

To change an existing table, use the Table Properties dialog box: 

1.Click anywhere inside a table, row, or cell. 
2.Open the Format menu and choose Table Properties; then click the Table, Row, or Cell tab. 

Number of rows/Number of columns 

Enter the number of rows and columns you want. This option is available only when you are creating a new table. You can also add rows and columns to an existing table. 

Table Alignment 

Aligns the table within the document.

Horizontal Alignment and Vertical Alignment 

Aligns the text within each row or cell. Default leaves the alignment as it was whenthe table was created. 

Include caption 

Inserts space for a caption, either above or below the table. 

Border line width

Enter a number for the size, in pixels, of the border lines around cells (table items). Enter 0 for no border. 
Note: Composer displays a zero (0) border as dotted outlines; no borders appear when the page is viewed through a browser. 

Cell spacing 

Enter a number for the space, in pixels, between cells. 

Cell padding 

Enter a number for the padding, in pixels, within each cell. This sets the margins of each cell. 

Table width 

Enter a number for the width of the table. Choose "% of window" or "pixels." If you specify width as a percentage, the table width changes whenever the window width changes. 

Table min. height 

Enter a number for the minimum height of the table. This is the smallest height the table can have. If you add text to the table, the table is resized to fit. Choose "% of window" or "pixels." If you specify height as a percentage, the table height changes whenever the window height changes. 

Note: If you are inserting a table within a table, the minimum width and height of the nested table can be percentages of the parent cell. 

Equal column widths 

Makes all cells the same width. Deselect this if you want to size each cell individually. 

Cell width 

Enter a number for the width of the cell. Choose "% of table" or "pixels." If you specify width as a percentage, the cell width changes whenever the table width changes. 

Cell min. height

Enter a number for the minimum height of the cell. This is the smallest height the cell can have. If you add text to the cell, it is resized to fit. Choose "% of table" or "pixels." If you specify height as a percentage, the cell height changes whenever the table height changes. 

Note: If you are modifying a table that's within a cell, the minimum width and height of the nested table can be percentages of the parent cell.

Cell spans 

Type numbers in the rows box and columns box to specify whether you want the selected cell to span more than one column or row. 

Header style 

Centers the text in the cell and sets its style to bold.

Nonbreaking 

Keeps the text from wrapping to the next line. Text will wrap to the next line ony if you insert a paragraph break.

Use Color 

Lets you choose a background color for the table, row, or cell. Click Other, at the bottom of the color palette, to define a custom color. 

Use Image 

Lets you use an image as the table, row, or cell background. Type the location and filename of the image you want to use. Click Choose Image to find an image onyour hard disk or network.

Leave image at the original location *

If you use a background image, Composer makes a copy of the image and places it in the same directory (folder) as your page. If you don't want a copy made, click this option. 

Moving, Copying, and Deleting Tables 

1.Click in the table, then open the Edit menu and choose Select Table. 
2.To copy or move: Use the Edit menu's cut, copy, and paste options. 
3.To delete: Choose Delete Table from the Edit menu. 

WB00790_.gif (159 bytes)back to top

 

Adding Pictures (Images) to Your Web Page

topofworld.gif (6684 bytes)
Picture/Image

Copying Pictures From A Web Page

You can copy images from other web pages only if the image is free to copy or you can obtain written permission from the image/web site publishers. 

  1. Right click your mouse on the image you would like to copy
  2. Click on the Save Image As choice in the contextual menu
  3. Select the directory path you would like to save the image into
  4. Name the image file in all lowercase characters without any spaces or symbols
  5. Click the Save button

Inserting an Image 

You can insert GIF and JPEG images into your web page. 

1.Click where you want the image to appear in your document. 
2.Open the Insert menu and choose Image. 
3.Specify the image file and adjust settings in the Images Properties dialog box. The dialog box's options are explained below. 

Tips: 
To quickly insert an image, cut and paste it from the clipboard, or drag and drop it on your page. 
Note: When you insert an image by pasting from the clipboard or by dragging and dropping, you either put a copy of the image file in the same directory (folder) as the web page, or leave the image file where it is on your hard disk or network. The settings you specify in Composer Preferences determine which method you use. 
To quickly resize an image, select it and drag the handles that appear at each corner. 
 

About the Images Properties 

Dialog Box 

Use this dialog box to insert a new image or modify an existing image's options, such as text wrapping, height and width, and spacing. 

Image location 

Type the name or location of the image file you want to insert or modify. Click Choose File to search for an image file on your hard disk or network. 

Edit Image 

Click to edit the image using the external editor you specified in the Composer Preferences General dialog box. If you haven't specified an image editor, you will be prompted to do so. 

Leave image at the original location

Normally Composer makes a copy of the image and places it in the same directory folder as your page. If you don't want a copy made, click this option. 
Important: If you move an image file from the specified location, it will no longer appear on your web page.

Use as background (Page Background on Mac OS) 

Click to use the image as a background for your entire page. 

Text alignment and wrapping around images ("xyz" buttons) 

Windows: Click a button to indicate how you want text postioned next to the image. 
Mac OS: From the pop-up menu next to the words "To see wrapped text," choose how you want text postioned next to the image. 

Note: To see alignment changes you've made, view your page in a browser window. The Composer window does not show what the browser user will see. 

Dimensions 

Specify the height and width, in pixels, of the image. 

Constrain 

Click to maintain the size settings of the image if you move it within your document. 

Original Size 

Click to undo any changes you've made to dimensions. 

Space around image 

Specify the amount of space on the right and left, and at the top and bottom of the image. You can also put a solid black border around the image and specify its width in pixels. Specify 0 for no border. 

Remove Image Map (Windows only) 

Click to remove all link regions from the image. An image map is a type of image that contains links to different locations within the same image. This button is dimmed if your image contains no links. 

Alt. Text/LowRes (Alternative Representations on Mac OS) 

Windows: Click the Alt. Text/LowRes button to display the Alternate Image Properties dialog box, where you specify whether to display text or a low-resolution image in place of the original image. 

Mac OS: In the Image field enter the name of a lower resolution image to display while the main image is loading. Click Choose File to browse for the file location. In the Alternate text field type a message to display in place of the image, for example, a caption or brief description of the image. 

Note: It is a good practice to specify alternative text for readers who use text-only web browsers or who have graphics turned off. Otherwise, your readers might see placeholder images. You can also specify alternative text, or a low-resolution image, to quickly appear while the reader is waiting for your high-resolution image to load. 

About the Alternate Image Properties Dialog Box (Windows only) 

Use this dialog box to add alternative text for an image and specify a low-resolution image to use in its place. 

Alternate text 

Type a message to display in place of the image, for example, a caption or brief description of the image. 

It is a good practice to specify alternative text for readers who use text-only web browsers or who have graphics turned off. Otherwise, your readers might see placeholder images. You can also specify alternative text, or a low-resolution image, that appears while the reader is waiting for your high-resolution image to load. 

Low-resolution image 

Enter the name of a lower resolution image to display while the main image is loading. Click Choose File to browse for the file location. 

Edit Image 

Click to edit the image using the external editor you specified in the Composer Preferences General dialog box. If you haven't specified an image editor, you will be prompted to do so. 

About the Image Conversion Dialog Box (Windows only) 

Use this dialog box when you need to import a bitmap graphics file into your page. Composer converts the file to the JPEG format, and lets you select the quality of pixel display (high, medium, or low). 

WB00790_.gif (159 bytes)back to top

 

Setting Page Properties 

Setting Page Location, Title, and Author 

The information you specify in the Page Properties dialog box helps readers locate your document on the Web. 

To set page properties, open the Format menu and choose Page Colors and Properties (Page Properties in Mac OS). You'll see the Page Properties dialog box. Click the General tab. The options are explained below. 

Location 

Shows the location of the current document on your computer's disk. You cannot change this field. 

Title

Type the text you want to appear in the window title when someone views the page through a browser. This is how most web search tools locate web pages, so choose a title that conveys what your page is about. 

Author 

Type the name of the person who created the document. This information is helpful to readers who find your document by using a web search tool. 

Description 

Briefly describe the document's contents. 

Other Attributes 

The keywords you type here help searching services lead users to your document on the Web. Type the category name (obtained from a catalog server) you think best applies to your document. Classification names are another method used by searching services to locate documents. 

To preview your settings, click Apply; then click Close to accept the changes. To accept the changes without previewing, click OK. 

Setting Page Colors and Backgrounds 

The Colors and Background part of the Page Properties dialog box lets you set a background color or image for your page, and choose colors for links. 

To set colors and backgrounds, open the Format menu and choose Page Colors and Properties. In the Page Properties dialog box, click the Colors and Background tab. The options are explained below. 

Use viewer's browser colors : The viewer's color preferences (specified in the General preferences panel) will be used. 

Use custom colors :  Lets you specify color for text, links, and background. Click the button to display the color palette and select the color you want. 

Color Schemes : Lets you select a scheme from the list. 

Use image  : Click to use an image as the page background. Type the name of an image file. If you're not sure of the filename or file location, click Choose File to find the image file on your hard disk or network. 

*Background images are tiled and override background color. 

Leave image at the original location :  Normally Composer makes a copy of the image and places it in the same directory (folder) as your page. If you don't want a copy made, click this option. 

Save these settings for new pages 

Click this option if you want your settings to apply to any new web pages you create. 

To preview your settings, click Apply. To accept the changes, click OK. 

WB00790_.gif (159 bytes)back to top

 

Linking Your Page 

Linking Within the Same Page 

To link within the same page, create a target, then create a link that points to the target. 

1.Put the cursor at the beginning of a line where you want to create a target, or select some text at the beginning of a line. 
2.Open the Insert menu and choose Target. 
3.Type a name for the target in the edit box (up to 30 characters). If you selected some text in step 1, this box already contains a name. 
4.Click OK. A Target icon (visible only in the Composer window) appears in your document to mark the target's location. 
Note: Targets are also called anchors. 
5.Put the cursor on the text or image that you want to link to the target. 
6.Open the Insert menu and choose Link. 
7.Open the File menu and choose Browse Page; then click the link you just created. 

Linking to Other Pages 

You can link to local pages on your own computer or on your workplace's network, or to remote pages somewhere on the Internet. You can quickly create a link by dragging and dropping from other windows (Mac OS and Windows only). For example, you can highlight a link from a web page, bookmark, or mail and news window and drag and drop it on your page. 

You can also create a link using the Link Properties dialog box: 
1.Select the text or image you want to link to another page. 
2.Open the Insert menu and choose Link. 
3.Use the Link Properties dialog box to set up the link. The dialog box is explained below. 

About the Link Properties Dialog Box 

Use this dialog box to insert a new link or modify an existing link. 

Link source : Enter the text you want link to another page or target. If you've already highlighted an image or text, you see it here. 

Link to page location or local file  :  Type the local path and filename or remote URL of the page you want to link to. If you're not sure of the path and filename or a local file, click Browse to find it on your hard disk or network. 

Show targets in : Click Current File to see the named targets in the page you're currently editing. Click Selected File to see named targets in the file you specified under "Link to page location or file," above. 

Select a named target (optional) :  The targets you see listed here depend on what you chose under "Show targets in," above. Targets (also known as anchors) are specific locations in a page. (You can create targets.) If you want to link to a target, select one from the list. 

Remove Link : Click to unlink the selected linked text. If the current selection contains more than one link, an alert box appears asking you whether to remove all links. 

To preview your settings, click Apply. To accept the changes, click OK. 

Linking to Images 

You can make images behave as links in your pages. When the user clicks a linked image, the browser window displays the page that the image is linked to. 

1.Click to highlight an image on your page. 
2.Open the Insert menu and choose Link. 
3.Use the Link Properties dialog box to set up the link. 

Tip: Dragging a linked image from the Navigator window into a Composer window copies both the image and the link. 
 

WB00790_.gif (159 bytes)back to top

Copyright 1998-2000 Stevens Institute of Technology,
Center for Improved Engineering and Science Education 
All Rights Reserved