Contents Navigation:

• Introduction to Creating and Publishing a Web Page
• Starting the Editor
• Creating a New Web Page
• Basic Text Editing
• Elements of Style
• Adding Color to Text
• Inserting Horizontal Lines
• Creating Tables
• Inserting an Image

Introduction to Creating and Publishing a Web PageHere are the basic steps you'll follow to create and publish a web page using Netscape Composer. You'll find details on each step throughout the rest of this workshop.

1. Start Netscape Communicator.
2. Choose Page Composer from the Communicator menu, or click on the icon (the pen and paper).
3. Create a web page using basic editing tasks, such as entering text, and formatting characters and paragraphs.
4. Put the finishing touches on your web page by adding a table or inserting an image.
5. Create links to other places in your page, and to other web pages.
6. Publish your web page so that others can view it.

Starting the EditorWhen you first start Netscape Communicator, you are in a browse window. The browse and edit windows each have their own unique set of menu commands and toolbars designed with distinct but allied purposes in mind. You can easily switch between browse and edit windows using commands from each window's File menu or toolbar.There are several ways to begin an editing session depending on whether you want to create a new document (begin with a blank page, apply one of the templates, or use the page wizard), edit a page you are currently browsing, or edit a specified file.From the Browser you have two options for accessing Composer.

1. Click on the Communicator menu item. Then click on Composer. OR
2. Click on the icon, at the bottom right corner of the screen, which looks like an old fashioned pen and paper. This is the composer icon.

Creating a New Web Page

Once you have accessed the Composer program, you are immediately placed into a new document with a blank screen. You can begin creating your web page at this point, or you may elect to use a template or Page Wizard from the Netscape site. For the purposes of this lesson we will use the blank page.

The edit window appears containing a blank page. The edit window toolbars are at the top of the document and "Netscape Composer" appears in the window's title bar.

The first step when creating a web page is to save it. It is important to immediately give it a name so that you can "browse" the page at different stages of creation to see what it would actually look like on the web.

To save your blank page:

1. Choose File |Save (or click the Save button on the File |Edit toolbar).
2. Name the file something unique, such as firstpg.html.

Using the toolbars

The two toolbars, below the menus, contain buttons corresponding to frequently used commands. You can access most of the toolbar commands from the menus, but it's generally quicker to use the toolbars. If you forget what a button/tool does, simply place the mouse cursor near it and a small description window will tell you. For example, placing the cursor near the last item on the second toolbar states: Alignment as in the example below.

Basic Text Editing

Editing text in the editor works the same as in most word-processing applications. These features are of vital importance since writing is what you'll spend most of your time doing when creating your Web pages.

Note: Choose Edit |Undo to cancel the effects of the most recently performed command (not all actions can be undone). Choose Edit |Redo to perform the most recent action again.

Entering text. As you move the cursor over the edit window, it appears as an I-beam. When you click the mouse, a small flashing vertical bar marks the point where text typed with the keyboard is placed in the window. You can start typing right away.

The editor supports the special characters available on your keyboard, such as ampersand and percent sign. To insert symbols, such as copyright, run the Windows Character Map application (charmap.exe), change the font to Times Roman, copy the symbol you want and paste it into the edit window.

Selecting text. The way you select text in the editor is similar to most standard text editors or word processors:

• Double-clicking on a word selects the word.

• Double-clicking before a line selects the paragraph, and after a line, the last word or element in that line.

• Clicking before a line selects the entire line.

Note: Unlike the edit window, text that you cut or copy from the browse window does not retain formatting information.

Canceling or repeating your last action or command::

• From the Edit menu choose Undo to cancel your last action or command.

• From the Edit menu choose Redo to perform the most recent action or command again.

Finding Text :

1. Choose Edit |Find. The Find dialog box appears.
2. Enter the characters to search for in the Find What text box.
3. Select one of the following Search Options:
• Match Case: Makes the match case-sensitive. The default ignores case.
• Up or Down: Specifies whether to begin searching up or down in the file.

Elements of Style

Formatting your text and using color goes a long way to making your Web pages or presentations unique and interesting. Add images, horizontal lines, and links and you start to understand why the Web has attracted so much attention. These elements provide the visual organization to your Web page.

Formatting text. Formatting text consists of applying fonts, sizes, styles (bold, italic, and so on), colors, alignment, and other options to text. Composer provides two types of formatting:

1. Paragraph formatting, which controls the appearance of entire paragraphs of text, including headings and lists.
2. Character formatting, which controls the font, size, style, and color of selected characters or words.

1. Click the paragraph you want to format, or drag to select more than one paragraph. Composer will apply the chosen paragraph style to the paragraph that contains the insertion point or to all paragraphs in the selection.
2. From the Formatting toolbar, choose a paragraph style, list style, or alignment option.

Formatting characters:

1. Select the word or characters that you want to format.
2. Choose a font, size, color, or style from the Formatting toolbar.

Headings vs. fonts. Headings divide sections of text. HTML defines six heading levels, each relate to the selected font. This is a quick way to determine heading sizes without having to specify the font size. However, those who are already familiar with word processors (like Word Perfect or Microsoft Word), you will find using the specific font designators and sizes the best way to select text appearance for your document.

Tip: If you are concerned about ease of reading, Heading Level 3 is frequently used instead of Normal. Normal is used for long pieces of text (e.g., a research paper or description of a project), where layout is not a factor.

Applying color to selected text is a good way to emphasize different parts of your Web page.Select the text whose color you want to change and click the Font Color button on the Character Properties toolbar. You can also right-click your mouse on the selected text to display the Properties dialog and select Custom Color.

In the Color dialog, select a color or define your own custom color.

Tip You can specify default text color in the Editor Preferences |Appearance dialog. Adjusting Font SizeYou can adjust font size by choosing Properties |Font Size or using the size increment buttons on the toolbar.

Inserting Horizontal Lines

Horizontal lines are used to connote sections of text and to provide some organizational scheme to your page design. For example, in this page horizontal lines are used to divide the sections that can be accessed from the top menu.
To insert a horizontal line on the page:

Click the spot in the edit window where you want the line to appear.Click the Horizontal line toolbar button or choose Insert |Horizontal Line.Right-click on the line and choose Horizontal Line properties to specify alignment, width, height, and whether to use 3-D shading.

Creating Tables

Tables are useful for presenting information you want to display in a grid, such as a calendar, or in a spreadsheet, such as financial data. But you can also use tables whenever you want to have greater control over page layout than you normally would. For example, you could combine graphics in a table to create a resume or a newsletter. Or, you could create a table that encompasses an entire page, and then nest tables within the main table for even more layout control.

To insert a table:

Place the insertion point where you want the table to appear in your document.Choose Insert |Table or click the Table button on the Character Properties toolbar.

Click OK to accept the settings and close the dialog box.

Click Apply to preview the settings you’ve specified and then click Close to accept them and exit the dialog box.

Note: If you are inserting a table within a table (called nesting tables), you can also set the minimum height and width of the nested table as a percentage of the parent cell (the cell of the table in which the nested table resides). The nested table’s height and width changes whenever the parent table’s height and width changes. Type a number in the box and then select "% of parent cell."

Selecting and Deleting Tables

To select a table: place the insertion point inside the table and then choose Edit |Select Table. Then you can cut or copy the table to paste somewhere else in your document.

To delete a table: place the insertion point inside the table and then choose Edit |Delete Table. Adding and Deleting Rows, Columns, and Cells

To add a row, column, or cell: place the insertion point in the table where you want the addition to appear. Then choose Insert |Table |Row (or Table| Column or Table| Cell).

To delete a row, column, or cell: place the insertion point inside the row, column, or cell you want to delete. Then choose Edit |Delete Table |Row (or Delete Table |Column or Delete | Table | Cell).

Setting Table Properties. Once you’ve created a table, choose Properties |Table to set various properties for rows and cells, or modify the properties you set for the table itself.

Note: The settings you choose in the Table properties dialog box always override the settings used when you first created the table.

Images

There are two ways that images typically are presented. One way is as an inline image, where the picture appears as part of the Web page. Another way is as a separate external link that you need to download apart from Web pages. Images are actually separate image files and do not "live" in the HTML document itself. The images that appear on your Web page can be image files on your local disk, or on a remote computer.

The two most popular image formats for webpage use are GIF and JPG. When creating and saving image files it is best to use one of these two formats, as you can be assured they are supported by most browsers. Also, these two image formats keep the image size smaller than most other image formats (i.e., BMP or TIF). IF files lack the higher quality of JPEG files but are usually faster because they're more compact and optimized for electronic downloading.

You can get images by drawing them yourself, scanning them, or buying them as part of a commercial clip art package. You can also find GIF and JPG images out on the Net in one of the many image archives available. If you intend to use images on your Web pages, it's wise to create your own, get permission from the owner of an image, or use royalty-free clip art so you don't infringe on a possible copyright.

Tip: If the document you're editing contains an animated GIF file, press Esc to stop it from continually loading so that you can work in the document.

Inserting an Image

Inserting an image in your Web page either copies the image file to the same directory as that of the parent document--the Web page you're editing, or leaves the image file where it is, depending on the settings you've specified in the Editor Preferences.Place the insertion point where you want the image to appear in your document.Choose Insert |Image or click the Image button on the Character Properties toolbar. The Image Properties dialog appears, allowing you to specify the source location of the image, its alignment relative to text, and the amount of space you want around it. Important: If you move an image file from the specified location, it will no longer appear on your Web page.

Tip: The easiest way to insert an image in your Web document is to drag it from a browse window and drop it on to the page you're editing. This is the same as copying the image.
 
 

Last updated: April 20,2001