Editing pages in Mozilla Composer

Mozilla includes a web page editing utility similar to Netscape Composer-- it will allow you to do some basic web page editing and publish pages.

Help
Editing an existing page
Opening a page file in Mozilla
Basic Editing tasks

Paragraphs, breaks, headings, horizontal lines
Formatting
Page colors and properties

Links
Images
Special Characters
Tables
Find and Replace
Previewing your page
Looking at and editing tags
Publishing to the web

Getting help

Mozilla includes an excellent set of Help pages on composer. To access them, choose Help Contents from the Help menu, then click on 'Creating Web Pages'. If you click on the plus sign (+) next to Creating Web pages in the left menu, you'll see all the section headings of Help.

How to edit an existing page off the web

View the page in Mozilla, then choose Edit page from the File menu

Opening a file to edit in Mozilla

Choose Composer from the Window menu, then either choose Open File from the File menu or click on the Open icon .

Basic editing tasks

Paragraphs, Headings, Breaks & Horizontal Rules

To make a break in a paragraph (carriage return but no blank line), press Return or Enter.

To insert a new paragraph in a web page, press Return or Enter twice.

HTML supports six layers of headings, though web designers usually use only the first 4 To turn a paragraph into a heading, click on the paragraph, and from the drop-down menu in the upper left hand corner of the screen Format drop-down menu

, choose the Heading level you want.

To insert a Horizontal Rule (a line across the page), put the cursor where you want the line to occur, then click the H.Line icon at the top of the page

(or choose Horizontal Line from the Insert menu). You can change the appearance of the line by clicking on it with the right mouse button and choosing Horizontal Line Properties from the drop-down menu. In the Properties window

you can set the width of the line (in pixels or percent) the height in pixels, the shading, and the alignment of the line.

Formatting: Text style, color, font etc.

Bold, Italic, Underline text styles can be set by selecting the text and clicking on the style icons:

. Or you can choose Text Style from the Format menu: Format Style Menu

To change the text color, select the text and click on the color icons

in the menu, or choose Text Color from the Format menu. This will bring up a palette of colors from which you can choose a text color: Color Palette

Click on the color you want, then click the OK button.

Text alignment for a paragraph or heading can be set by choosing one of the alignment icons in the top menu bar:

or choosing the alignment you want under Align in the Format menu.

To change the font size of your text, select it. You can then either make it larger or smaller using the smaller

and larger

icons on the button bar, or choose Smaller or Larger in the Font Size attributes in the Format menu; you can also choose a specific size from the Font Size menu (extra small, small, medium, large, extra large, or extra extra large).

To set a specific font, you select the text and choose the font from the Font area in the Format menu. However, your choices in Mozilla are limited: Helvetica/Arial, Courier, or Times, because Mozilla developers believe in minimizing the number of fonts set in a document.

Removing all text styles: to clear all the format styles in existing text, select it and choose Discontinue Text Styles from the Format menu. To start typing without text styles, click where you want to type text, then choose Discontinue Text Styles from the Format menu.

Page properties

Colors

To set the color scheme for your page, go to the Format menu and choose Page Colors and Background:
Page Colors window

In the window that comes up, you can click on the color boxes next to Normal, Link, Active Link, Visited Link, and Background colors to choose a specific color from the color Palette.

You can also use Choose File to select a background image if you have one saved on your computer. Be sure to use an image with low contrast and no sharp edges-- and make sure the text color will be visible when displayed on the background.

Changing the Title of the page

To set the page's title, choose Page Title and Properties from the Format Menu
Page Title & Properties

In the window that comes up, you can enter the Title, Author and Description of the page.

Links

To create a link, you have two options:

Type in the text you want to link, select that text, and click the Link Button: . A Link Properties window will come up, where you can type in the URL (web page address) for the page you want to link to. (Be sure to include the http:// part of the URL unless you are linking to a file in the same directory! Click OK when you have put in the URL.
Or, you can enter both the Text and the Location at the same time: click where you want the link to be, then click the Link button. Enter the text to be linked in the upper box, and the web location to link to in the lower box; then click OK.

Named Anchors

Named Anchors are a way to link to a particular point in a document, either from inside the document or from another document. It's a two part process.

First, you set the Named Anchor to link to. Click where you want to link to (for instance, in front of a section heading if you are creating a table of contents). Then click the Anchor Icon in the menu bar:

. The anchor properties window will come up:

Type in a name for the Anchor, and click OK. A yellow anchor mark

will appear in the page where your cursor was. (This anchor mark will not be visible when someone browses the web page.)

Second, go to the place in the document where you want the link (the blue and underlined part that the user clicks on to go to the anchor) to be. (For a table of contents, you would want to go to the beginning of the document, where you want the table of contents.) Enter the text for the link, then select it. Click the link icon. In the Link window, click on the drop down menu and choose the anchor you inserted. You will notice that it has a pound sign in front of the anchor name. Click OK.

To link to the anchor from another file, in the Link properties, put in the file URL and a pound sign (#) and then the anchor name.

Email Links

To make an email link (which will open a mail window to send mail to a particular address), select the text that you want to make the link, click on the link icon, and type mailto: followed by the (full) email address, and click Ok.

Images

Images for web pages should be in .gif or .jpg format.

To insert an image into your web page, click the cursor where you want the image to be, then click on the Image icon in the menu bar

(you can also choose Image from the Insert menu).

Image Properties window

Enter the filename of the image in the Image Location box, or use Choose File to find it.

Enter a description of the image in the Alternate Text box.

If you want to be sure the image is set to the right dimensions, click on the Dimensions Tab:
Image Properties Window-- Dimensions Tab

Image Properties Window-- Dimensions Tab

Make sure 'Actual Size' is selected.

To set the alignment of the image, click on the Appearance tab:
Image Properties Window-- Appearance Tab

Use the drop-down menu to set the alignment of the image.

Inserting special characters

To insert a special character, such as a symbol or an accented mark, choose Characters and Symbols from the Insert Menu:
Insert Special Character Menu

In the window that comes up, choose the radio button for the kind of character you want to insert.
Insert Character window

Then choose the character from the left-hand drop down menu at the bottom. If you are inserting an accented letter, choose the letter to accent from the right-hand drop down menu.
Then click Insert to insert the character.

Tables

To insert a table, click the Table icon

or choose Table from Insert menu.
Insert Table Window

Choose the settings for your table:

Rows is the number of divisions top to bottom
Columns is the number of divisions left to right
Width is the width of the entire table, which can be a percentage of the window size or a fixed pixel width. If you leave Width blank, the table will shrink or stretch to fit the contents you put in it.
Border is the size of the border around the table and between the cells (divisions). Set this to 0 for no border.

Click OK to insert the table.

You can move from cell to cell in the table using the arrow keys or the tab key (if you hit the tab key in the last cell in the table, it will insert a new row.

To Select the whole table, right click on the table, and choose Table Select, then Table, from the floating menu.

Inserting & Deleting Rows and Columns

To add a new column or row, put your cursor at the point in the table where you want to insert the row or column and choose Insert from the Table menu

(You can also right-click and choose Table Insert from the floating menu)
From there you can choose to add a row above or below your selection, a column before or after your selection. Inserting a new Cell before or after will also insert a row or column to put it in.

To remove rows or cells, choose Delete from the Table meru (or Table Delete from the right-click, floating menu):
Table Delete menu

And choose items to delete. To delete more than one at a table, selected them before choosing Delete.

Joining Cells

To make two cells appear to be one, select them (click in one and drag into the other, until their edges are highlighted in blue), then choose Join Selected Cells from the Table menu.

To divide them back into separate cells, click on the cell in question and choose Split Cell from the Table menu.

Table and Cell Properties

To set or change table properties, click on the table and choose Table Properties from the Table menu.
Table Properties window

In addition to the settings from Insert table, you can set:

Spacing: the amount of space between cells
Padding: space between the edge of the cell and what's in the cell
Table Alignment: whether the table is left, right or center aligned (this will not affect the contents)
Caption: whether there is a caption and whether it is above or below the table
Background Color: click this for the color palette to choose a background for the table. This will affect the cell borders as well as the cells

To change the characteristics of a particular cell, row or column, select the cell(s), row or column (you can use Table Select from the drop down menu), then right click and choose Table Cell Properties. Or choose Table Properties from the Table menu, then click on the Cell tab at the top:
Cell Properties window

Height is a default minumum (not maximum)height for the cell. Many browsers will ignore this
Width is the default width for the cell. Most browsers will use this.
Content Alignment sets how the content lines up inside the cell. You can set alignment on a particular paragraph in the cell and overide the default setting set here.
Cell Style can either be normal or header. Header cells are bold and centered.
Background color is the background color for the cell(s), clicking on it gives you the palette to choose from.

Find and Replace

Mozilla includes a find and replace functionality: choose Find and Replace from the Edit menu Fod and Replace

Type the text you want to find in "Find what" and, if you want to use Replace, type the replacement in Replace With. Then choose Find Next, Replace, Replace and Find, or Replace All. If you are currently in the middle of a document, you will probably want to choose 'Wrap Around'; if you want to correct capitalization, you'll need to choose Match upper/lower case.

Previewing your page

To preview your page in Mozilla, choose Browse Page from the File menu, or click on the Browse Icon

.
If your page changes have not been saved, you will be asked to save them; then the page will be opened in a Navigator window for browsing.

Looking at and editing tags

Mozilla Composer also lets you examine and edit the HTML source, or just the tags, of the HTML on the page you are working with.
At the bottom of the Composer page, on the left, there are tabs for the different views of the page you can have:

To see the tags, click on the Show All Tags tab; to work with the HTML source, click on <HTML> Source.
To return to normal viewing, click on 'Normal'.

Publishing a file

Setting up a site

Before you begin publishing, you can pre-set one or more sites to publish to. You will want to pre-set site settings for any site you routinely publish to.

To create a new site to publish to at any time, choose Publishing Site Settings from the Edit menu.

To create a new site, click on the New Site button, and the information fields will be made blank. Fill them in as follows:
create new site

Site name is a nickname for the site you are publishing to (i.e. My Web Page for your personal space, Club Name for your club page, etc.)
Publishing Location is the web directory address where you want the file to go, with http replaced by https. For most people's home pages, that will be https://www.lehigh.edu/~userid/ where userid is the person's Lehigh userid. For departmental pages, it's probably https://www.lehigh.edu/~userid/subdir where userid is the department's Lehigh userid and subdir is the name of the subdirectory.
HTTP address is the web address of the directory where the files are going (same as above, but with http: instead of https:)
User name is the Lehigh userid (usually the person's, but sometimes the department or club's)
Password is the password that goes with the userid. Don't click Save password.

Publishing

When editing a file, you can publish it to the web by clicking the Publish button: or choosing Publish from the File menu. (If you are editing a file for the first time, or working with a saved file, you may need to choose Publish form the file menu, as the icon will not appear.)

If you are editing a page directly from the web, when you click Publish, the settings will already be filled out.
Be sure to click on the Settings tab in the publish window and change the Publishing address to include https:// rather than http://
Publish Settings

If you are editing a page right off the web, most of these fields, except for the username and password, will already be filled in.

If you are editing a page off your hard drive, be sure to click on the Settings tab in the Publish window and if the fields in the publish screen are filled in, check to be sure they are correct. If they are not, you may need to change them to match the userid and directory that you want to publish to.

When you first press Publish, it may bring up a screen saying 'Publishing failed!' and then bring up a login screen. Do not be alarmed; simply login with the userid and password that goes with the directory you are publishing to.

Last updated: Tuesday, 23-Dec-2008 02:33:39 EST