Creating Web Pages with Netscape Composer

 

In this section:

Creating a New Page

Choosing the Right Editing Mode

Saving and Browsing Your New Page

 

Creating a New Page

Netscape Composer is an HTML (HyperText Markup Language) editor that allows you to create and edit Web pages. Since Composer is WYSIWYG (What You See Is What You Get), it's easy to see how your page will look to the reader as you're creating it. It's not necessary for you to know HTML, since most of the basic HTML functions are available as commands from the toolbars and menus.

To create a 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.

To create a new page:

To edit a page you're currently browsing in Navigator:

To start from a HTML file stored on your local drive:

  1. Open the Tasks menu and choose Composer.
  2. Open the File menu and choose Open File.
  3. Locate the file you want to use.
  4. Click Open to see the specified file in a Composer window.

To edit a Web page:

  1. Choose Open Web Location from the File menu.
  2. In the Open Web Location dialog box, type the URL of the page (for example, www.netscape.com), and then select New Composer from the pop-up menu.
  3. Click Open to view the page in a Composer window. Note: Keep in mind that when you save this page, it will be saved on your local drive only.

Tip: You can quickly open the most recent files you've been working on by choosing Recent Files from the File menu, and then selecting the file you want from the list.

Return to beginning of section ]

 

Choosing the Right Editing Mode

Composer allows you to quickly switch between four editing modes or views. Each editing mode allows you to continue working in your page, but displays varying levels of HTML tags (and tag icons).

Before you choose an editing mode:

The Edit Mode toolbar has four tabs:

Note: JavaScript functions, frames, and animated gifs files are not enabled in any of the editing modes.

Return to beginning of section ]

 

Saving and Browsing Your New Page

To save a new page as a HTML file on your local drive:

Tip: Choose Revert to Last Saved from the File menu to retrieve the most recently saved copy of the document you're working on. Keep in mind that your current changes will be lost.

To view your page in a Navigator (browser) window where you can test your links:

Return to beginning of section ]

 


Formatting Your Web Page

 

In this section:

Formatting Paragraphs, Headings, and Lists

Changing Text Color, Style, and Font

Finding Text in the Page

Inserting Horizontal Lines

Inserting Special Characters

Inserting HTML Elements and Attributes

Checking the Spelling

 

Formatting Paragraphs, Headings, and Lists

To apply a format to a paragraph:

  1. Place the pointer where you want the format to begin, or highlight the paragraph(s) you want to format.
  2. Open the Format menu and choose Paragraph.
  3. Select one of the following formats:

To apply a heading format:

  1. Place the pointer where you want the format to begin, or highlight the text you want to format.
  2. Open the Format menu and choose Paragraph.
  3. Choose the level of heading you want, from 1 to 6 (largest to smallest). For example, choose "Heading 1" for your main heading, "Heading 2" for the next level, and so forth.

To apply a list item format:

  1. Highlight the text you want to format.
  2. Open the Format menu and choose List.
  3. Choose list style:

Tip: You can quickly apply a list style to text by selecting the text and clicking the Numbered List and Bulleted List buttons on the toolbar.

To change the style of bullets or numbers:

  1. Place the pointer within the text of the list item you want to change.
  2. Open the Format menu and choose List Properties.
  3. Choose a bullet or number style. If it is a numbered list, you can also specify a starting number.

To align paragraph or text in your page (for example, centered, left-justified, or right-justified):

  1. Place the pointer in the page or line of text you want to align.
  2. Open the Format menu and choose Align; then choose an alignment option.

Return to beginning of section ]

 

Changing Text Color, Style, and Font

To change the style of color of text:

  1. Highlight the text you want to format.
  2. Open the Format menu and choose one of the following:

You can also change the background color of the page, or use an image as a background. See Setting Page Colors and Backgrounds.

Tip: To quickly remove all formats from selected text, open the Format menu and choose Discontinue Text Styles.

Return to beginning of section ]

 

Finding Text in a Page

To look for text in the page you're currently working on:

  1. Open the Edit menu and choose Find.
  2. In the Find dialog box, type the text you want to locate. To narrow the search, check one or more of the following options:
  3. Click Find to begin searching. When Composer locates the first occurrence of the text, choose Find Again from the Edit menu to search for the next occurrence.

Return to beginning of section ]

 

Inserting Horizontal Lines

To add a horizontal line (also called a rule) to your page:

  1. Place the pointer where you want the line to appear.
  2. Click the Horizontal Line button on the toolbar, or open the Insert menu and choose Horizontal Line.

Setting Horizontal Line Properties

You can customize line's height, length, width, alignment, and shading.

  1. Double-click the line to select it.
  2. Open the Format menu and choose Horizontal Line Properties.
  3. Edit these properties:
  4. Click Save Settings to use these settings as the default for all horizontal lines.
  5. (For advanced users only): Click Advanced Edit to display the Advanced Property Editor, where you can apply additional attributes to the line, including JavaScript events.

 

Inserting Special Characters

To insert characters such as symbols or accented letters:

  1. Place the pointer where you want the special character to appear.
  2. Open the Insert menu and choose Characters and Symbols.
  3. Choose a category of characters.
  4. If you chose "Accent Uppercase" or "Accent Lowercase," then open the Letter popup menu and choose the letter you wish to apply an accent to. (Note: not all letters have accented forms.)
  5. From the Character popup menu, choose the character you want to insert.
  6. Click Insert.

Return to beginning of section ]

 

Inserting HTML Elements and Attributes

If you understand and feel comfortable working with HTML source code, you can insert additional tags, style attributes, and JavaScript into your page. Use one of the following methods to work with HTML code:

Using the Advanced Property Editor

The Advanced Property Editor dialog box allows you to enter additional HTML code, style attributes, and JavaScript to objects (such as tables, images, and horizontal lines) in your page.

To use the Advanced Property Editor:

  1. Select the object you want to modify and then open its Properties dialog box. For example, to modify a horizontal line, double-click the line to select it; then open the Format menu and choose Horizontal Line Properties.
  2. In the Properties dialog box, click Advanced Edit. The Advanced Property Editor dialog box has three tabs, each of which lists the current properties for the selected object:
  3. To edit a property or attribute currently in the list, click the name and enter a different value.
  4. To add a property, type the Name, enter the corresponding value, and then click Add.
  5. Click OK to confirm your changes, and then click OK again to exit the Properties dialog box.

Composer automatically places opening and closing brackets < and > around your HTML, and quotation marks around any attribute text.

Warning: Composer does not validate attributes you enter. Make sure you fully understand the rules before adding, deleting, or modifying any values.

Return to beginning of section ]

 

Checking the Spelling

To check the spelling of your page:

  1. Place the pointer in the page.
  2. Click the Spell button on the toolbar, or choose Check Spelling from the Edit menu.
  3. Use the Check Spelling dialog box to correct misspellings and to edit or add words to the current dictionary. Click Stop when you are done.

Return to beginning of section ]

 


Adding Tables to Your Web Page

 

In this section:

Inserting a Table

Changing a Table's Properties

Adding and Deleting Rows, Columns, and Cells

Moving Around in a Table

Moving, Copying, and Deleting Tables

 

Inserting a Table

Tables are useful for organizing text, pictures, and data into formatted rows and columns. To insert a table:

  1. Place the pointer where you want the table to appear.
  2. Click the Table button on the toolbar,or choose Table from the Insert menu. You see the New Table Properties dialog box, where you can specify properties for the table (for example, height, width, and background color).
  3. Type the number of rows and columns you want.
  4. Enter a number for the height and width (in pixels).
  5. Enter a number for the border thickness; enter zero for no border. Note: Composer uses a dotted line to indicate tables with a zero border; the dotted line disappears when the page is previewed or browsed.
  6. (For advanced users only): Click Advanced Edit to display the Advanced Property Editor, where you can apply additional attributes for the table, including style attributes or JavaScript.
  7. Click OK to confirm your settings and view your new table.

To edit and add additional properties to your new table, click inside the table and then choose Table Properties from the Format menu (or click the Table button in the toolbar).

Return to beginning of section ]

 

Changing a Table's Properties

You can modify properties that apply to an entire table as well as the rows, columns, or individual cells within a table.

To view, change, or add properties for a table (for example, caption, background color, and spacing):

  1. Select the table, or click anywhere inside it.
  2. Click the Table button on the toolbar, or open the Table menu and choose Table Properties. You see the Table Properties dialog box with two tabs: Table and Cell.
  3. Click the Table tab to edit the following properties:
  4. (For advanced users only): Click Advanced Edit to display the Advanced Property Editor, where you can apply additional attributes for the table, including style attributes or JavaScript.
  5. Click Apply to preview your changes without closing the dialog box, or click OK to confirm them.

To view, change, or add properties for one or more cells:

  1. Select the row, column, or cell, then open the Table menu choose Table Properties.
  2. Click the Cells tab to edit the following properties:
  3. (For advanced users only): Click Advanced Edit to display the Advanced Property Editor, where you can apply additional attributes for the table, including style attributes or JavaScript events.
  4. Click Apply to preview your changes without closing the dialog box, or click OK to confirm them.

Return to beginning of section ]

 

Adding and Deleting Rows, Columns, and Cells

Composer allows you to quickly add or delete one or more cells to your table. In addition, you can set options that allow you maintain the original rectangular structure or layout of the table while you perform editing tasks.

To add a cell or group of cells (rows and columns) to your table:

  1. Click inside the table where you want to add a cell (or cells).
  2. Open the Table menu and then choose Insert.
  3. Choose one of the cell groupings. You can also insert a entire new table within a table cell.

To delete a cell or group of cells:

  1. Click a row, column, or cell.
  2. Open the Table menu and choose Delete.
  3. Choose the item you want to delete.

To join (or merge) a cell with the cell on its right:

To split a joined cell back into two cells:

Correcting the Table Layout

Generally, when you delete one or more cells, Composer removes the cell border as well. This can result in a table with empty spaces, or whose outline appears irregular due to an uneven number of cells. You may want to delete one or more cells but still maintain the table's original rectangular layout, or structure.

Composer allows you to set a preference for preserving the table's structure by adding cells at the end of a row, wherever needed:

Return to beginning of section ]

 

Moving Around a Table

You can use one of two ways to quickly select a table, cell, or group of cells:

Return to beginning of section ]

 

Moving, Copying, and Deleting Tables

  1. Click inside the table, then open the Table 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 Table menu.

Return to beginning of section ]

 


Adding Pictures (Images) to Your Web Page

 

In this section:

Inserting an Image into Your Page

Editing Image Properties

Creating Image Maps (Hotspots) for Your Images

 

Inserting an Image into Your Page

You can insert GIF and JPEG images into your web page. You can also use them to create links.

  1. Place the pointer where you want the image to appear.
  2. Click the Image button on the toolbar, or open the Insert menu and choose Image.
  3. Specify the image filename and location and, if needed, adjust the settings in the Image Properties dialog box.

Return to beginning of section ]

 

Editing Image Properties

Once you've inserted an image into your page, you can edit its properties and customize the layout in your page, such as the height, width, spacing, and text alignment:

To edit the properties for a selected image:

  1. Double-click the image, or select it and click the Image button on the toolbar . You see the Image Properties dialog box, click More Properties to expand the list of settings, Fewer Properties to collapse it.
  2. Click Image Map to use Composer's Image Map Editor to create hotspots in your image that contain hyperlinks.
  3. (For advanced users only): Click Advanced Edit to display the Advanced Property Editor, where you can apply additional HTML attributes, including JavaScript events.
  4. Click OK to confirm your changes.

Return to beginning of section ]

 

Creating Image Maps (Hotspots) for Your Images

You can easily create a map file for an image using Composer's Imap Map Editor. A map file indicates the image's hotspots--coordinates of the various areas of the image that you can assign to URLs.

The Image Map Editor works much like a drawing tool--the selected image is displayed in a window area, with shape tool buttons located on the toolbar at the left side of the window.

To use the Image Map Editor:

  1. Select the image in your page.
  2. Click the Image button in the toolbar to display the Image Properties dialog box, and then click the Edit Image Map button. (If necessary, first click More Properties to expand the dialog box.)
  3. Use the shape tools to select portions of the image that you can then designate as hotspots that contain URLS or named anchors. First click the tool button, then click and drag inside the image to define the selection.
  4. Once you've defined an area, you see the Hotspot Properties dialog box, where you can enter either a URL or the name of an anchor (target) as the destination (jump-to location) of the link.
  5. When you've finished designating hotspots, click OK, and then click OK again to confirm your changes.
  6. To test the links in your image, save the page, and then click Preview to see the page in the Navigator browser.

To remove the image map from an image:

  1. Select the image you want.
  2. Open the Image Properties dialog box, and then click Remove Image Map. (If necessary, first click More Properties to expand the dialog box.)
  3. Click OK to confirm your changes.

Return to beginning of section ]

 


Setting Page Properties

 

In this section:

Setting Page Properties and Meta Tags

Setting Page Colors and Backgrounds

 

Setting Page Properties and Meta Tags

Use the Page Properties dialog box to enter properties such as the title, author and description of the document you're currently working on. This information is useful if you plan to use the page on a web site, since search engines use this type of information to index your page.

You can edit these properties:

Return to beginning of section ]

 

Setting Page Colors and Background

You can change the background color or specify a background image for the page you're currently working on. These choices affect the way text and link elements in your page appear to people viewing the page through a browser.

To set the colors and background for the current page:

You can edit these properties:

(For advanced users only): Click Advanced Edit to display the Advanced Property Editor, where you can apply additional HTML attributes, including JavaScript events.

You can also set the default page background and colors for every new page you create in Composer.

Return to beginning of section ]

 


Creating Links

 

In this section:

Creating Links Within the Same Page

Creating Links to Other Pages

Using Images as Links

Removing Links

 

Creating Links Within the Same Page

To create a link within the same page (for example, that the reader can use to jump from one section to another), you first create an anchor, and then create a link that points to the anchor. Anchors are also called named anchors or targets.

  1. Place the pointer at the beginning of a line where you want to create an anchor, or select some text.
  2. Click the Anchor button on the toolbar, or open the Insert menu and choose Named Anchor.
  3. Type a name for the anchor in the dialog box (up to 30 characters). Don't include spaces. If you need to, use an underscore "_" to separate words.
    If you selected some text in step #1, this box already contains a name.
  4. Click OK.
    An anchor icon appears in your document to mark the anchor's location:

To create the link that the reader can click to jump to the anchor:

  1. Select the text or image that you want to link to the anchor.
  2. Click the Link button.
  3. To see a list of all named anchors and headings in the page, click More Properties.
  4. Use the Link Properties dialog box to choose the appropriate anchor name.
  5. Click OK.
  6. To test the link you just created, open the File menu and choose Browse Page, then click the link.

Return to beginning of section ]

 

Creating Links to Other Pages

You can create links from your page to local pages on your own computer or on your workplace's network, or to remote pages on the Internet.

You can quickly create a link by dragging and dropping it from other windows. For example, you can highlight a link from a web page, bookmark, or mail and news window and drag and drop it onto your page.

You can also use the Link Properties dialog box to create a link to another page:

  1. Select the text or image that you want to link to the anchor.
  2. Click the Link button.
  3. To see a list of all named anchors and headings in the page, click More Properties.
  4. Use the Link Properties dialog box to the page to link to.
  5. (For advanced users only): Click Advanced Edit to display the Advanced Property Editor, where you can apply additional HTML code and attributes, including JavaScript events.
  6. Click OK.
  7. To test the link you just created, open the File menu and choose Browse Page, then click the link.

Return to beginning of section ]

 

Using Images as Links

You can make images (pictures and graphic files, such as jpeg or .gif files) behave as links in your pages. When the reader clicks a linked image, the browser window displays the page that the image is linked to.

  1. Select an image on your page.
  2. Click the Link button on the toolbar, or open the Insert menu and choose Link.
  3. Use the Link Properties dialog box to link the image to a named anchor or heading within the page, or to a separate local or remote page.

Tip: Drag and drop a linked image from the Navigator window into a Composer window to copy both the image and the link.

Return to beginning of section ]

 

Removing Links

To remove a link:

  1. Select the linked text (normally blue and underlined) or image.
  2. Open the Format menu and choose Remove Link.

Return to beginning of section ]

 


Setting Composer Preferences

 

In this section:

Setting Composer Preferences

Setting Preferences for Colors and Background Images

 

Composer Preferences

To set general preferences (for example, table editing) that apply to every document you create:

  1. Open the Edit menu and choose Preferences; then click the Composer category.

You can set the following defaults:

Return to beginning of section ]

 

Setting Preferences for Colors and Background Images

You can set preferences that apply to every document you create.

  1. Open the Edit menu and choose Preferences.
  2. Open the Composer category and click New Page Settings.

You can set the following defaults:

To change the author name for an individual page: Open the Format menu and choose Page Title and Properties.

To change the page colors and background image for an individual page: Open the Format menu and choose Page Colors and Background.

[ Return to beginning of section ]

 


9/10/00


Copyright 1994-2000 Netscape Communications Corporation.