CALIFORNIA STATE UNIVERSITY, NORTHRIDGE
 
Beginner's Guide to Netscape Composer for Windows Users:

Formatting Your Web Page


How to Format a Paragraph

To format an entire paragraph, click somewhere in the paragraph and then select (click) the desired paragraph style, list style, or alignment option from the Formatting Toolbar, as shown in Figure 1, below.

FIGURE 1. Composition Toolbar with Paragraph Formatting Tools Labeled
Composition Toolbar with Paragraph Formatting Tools Labeled

Note: If you paste text from a text editor (rather than a word processor), each line may end in a hard return, thus identifying every line as a paragraph for formatting purposes.

Using a Paragraph Style

Paragraph Style Drop-Down Menu The Paragraph Style menu lists a number of styles, each of which has particular size, appearance, and spacing attributes. The Normal paragraph style is the default — i.e., the one you see if you haven't selected anything else.

Heading Styles — You might use a heading style for a major or minor heading on your Web page. Every heading style is boldface followed by extra line spacing (between the heading text and the next paragraph). The largest of the heading styles is Heading 1 (see Figure 5, below); the smallest, Heading 6

Using a List Style

Bulleted List button Bulleted List — Use the bulleted list style to place a bullet in front of each item in a list.
Numbered List button Numbered List — Use the numbered list style to number items in a list. (Note that no numbers will appear on the Composer screen; rather, each number will be indicated by a number sign (#).

Alignment Options

Increase Paragraph Indent button Increase Paragraph Indent — Use the Increase Paragraph Indent style to indent a paragraph.
Decrease Paragraph Indent button Decrease Paragraph Indent — Use the Decrease Paragraph Indent style to move a paragraph's indent to the left.
Paragraph Alignment button Paragraph Alignment — Use the Paragraph Alignment menu to choose the alignment for a paragraph. The choices are left (the default), centered or right aligned.


How to Format Text (Characters)

Select (highlight) the text you want to format and then select the desired character format style from the Formatting Toolbar, as shown in Figure 2, below.

FIGURE 2. Composition Toolbar with Character Formatting Tools LabeledComposition Toolbar with Character Formatting Tools Labeled

Design Tip: Use character formats sparingly — to highlight, not to overwhelm.

Font Types

Font Type menu The Font Type menu lists the generic "variable width" and "fixed width" options as well as all the fonts installed on your computer. The best choice for your Web pages is the default Variable Width option. By staying with this choice, you can be sure that all graphical browsers will be able to display your page. If you choose one of the specific font styles listed, you can't be sure that someone who views your page will have the same font installed on his or her computer.

Relative Font Size Options

Font Size menu If you made the suggested change in Composer Preferences (see "How to Set Composer Preferences", in the Bare Bone Basics section), your font size choices will be those shown to the left of this paragraph. The default 0 setting is equal to whatever screen display font you are using — 12-point Times New Roman, if you're using the Netscape default. The other choices represent smaller (-) and larger (+) sizes relative to the size screen display font.

Other Character Formats

Font Color grid
Font Color — Use the Font Color drop-down grid to choose a color for a selected section of text (to make a heading stand out, perhaps).

 
Bold button Bold — Use the Bold feature to display a selected section of text in boldface type.
Italics button Italics — Use the Italics feature to display a selected section of text in italics type.
Underline button Underline — Use the Underline feature to underline a selected section of text.
Note: Underline is not normally a good choice as it might be confused with linked text. Typographically it's a bad choice, too, as it is generally just a typewriter substitute for italics.]
Remove All Styles button Remove All Styles — Use this feature to remove all character styles from a selected section of text.


Using a Horizontal Line to Separate Sections of a Page

Horizontal Line button Position the insertion point where you want to place a horizontal line on your Web page and click the "Insert Horizontal Line" icon on the Composition Toolbar.
 
By default, the inserted line will be two pixels high with 3-D shading extending all the way across the screen. You can modify the look of the line by double-clicking the line and making changes in the "Horizontal Line Properties" dialog box (see Figure 3, below). You can specify the height (in pixels), the width (as a percentage of the width of the browser window or in pixels), the alignment (left, center, or right), and the shading (3-D or not). You can also specify whether or not you want these new settings to become the default horizontal line settings.
 
 
FIGURE 3. "Horizontal Line Properties" Dialog BoxHorizontal Line Properties dialog box
Note: An alignment setting will be noticeable on your Web page only if the width setting is less than 100%.
 


Specifying Page Colors

If you'd like to specify a background color for your page and complementary colors for the text on your page as well as your links (see "Linking Other Locations to Your Web Page"), choose (i.e., click):
Format – Page Colors and Properties
In the "Page Properties" dialog box click the Colors and Background tab, then make your selections (see Figure 4, below). You can make individual selections for Normal Text (i.e., all text except linked text or selected text for which you've chosen a color from the Font Color menu), Link Text, Active Link Text, Followed Link Text, and Background or choose a predefined color scheme from the Color Scheme menu. If you'd like to use the same color scheme for all your Web pages, click to place an X in the box next to "Save these settings for new pages". 
 
FIGURE 4. "Colors and Background" Dialog BoxColors and Background dialog box
 
When you make any custom selection the radio button choice at the top of the "Page Colors" section of the dialog box will change automatically from "Use viewer's browser colors" to "Use custom colors".

If you don't specify colors, the colors displayed when someone views your Web page will be the browser colors selected by that person (or the default display colors if the person has made no selections).


Sample Formatted Page

The formatting features described above are shown in Figure 5 (below). Illustrated (and labeled) are:
  • Paragraph Formatting: 
    • [1] Heading 1 with centered Alignment
      [3] Increase Indent
      [4] Bullet List
  • Text Formatting:
    • [3] Font Size +1
  • Horizontal Line [2]
In addition, there are links on the page (labeled [5]). The next section of this guide gives instructions for including links in your Web pages.
 
FIGURE 5. Sample Formatted Page
 

Top  |  Contents  |  Basics  |  Formatting  |  Links  |  Publish  |  Edit a Published Page  |  Style Tips  |  Learn More
Prepared by Gail Said Johnson, User Support Services
February 21, 2001