Creating Web Pages with Mozilla Composer

Mozilla Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it is as easy to use as a word processor. Toolbar buttons let you add lists, tables, images, colors, font styles, and links to other pages. You can see what your document will look like on the Web as you create it, and you can easily share your document with other users, no matter what type of browser or HTML-capable e-mail program they use.

To start using Mozilla Composer:
  • Click the Composer icon in the lower-left corner of any Mozilla window.
  • A blank page will appear, ready for content to be added.


The Composer icon in circled in red in the above image.

Contents:

 

Starting a New Page

In this section:

Creating a New Page

Composer is an HTML (Hypertext Markup Language) editor that allows you to create and edit web pages. Composer is a WYSIWYG (What You See Is What You Get) editor, so it can display how your page will look as you're creating it. It is not necessary for you to know HTML, since most of the basic HTML functions are available as commands from the toolbars and menus.

Composer also lets you edit the HTML source if you want. To view or edit the HTML source code, open the "View menu", and choose "HTML Source", or click the "<HTML> Source" tab in the Edit Mode toolbar at the bottom of the Composer window. 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 in Composer:
  • Click the New button in Composer's toolbar.
  • To start from an HTML file stored on your local drive:
    • Open the File menu and choose Open File. You see the Open HTML File dialog
      box.
    • On your local drive, locate the file that you want to edit.
    • Click Open to display the specified file in a Composer window.

Saving and Publishing Your New Page

Once you finish a page, save a copy on your computer. Then upload or "publish" it on the web server. Once you have uploaded a page, anyone can view it. You should always look at your page on the web with your web browser to make sure it looks the way you want it to. This section outlines how to save and publish your new page.

Saving

Be sure to save your page after finishing your work and frequently while you are creating your work. The Save function is found underneath the file menu in the upper left corner of the window. If this is going to be the home page of your web site it should be titled index.html. It is important that you remember to save your files with no spaces or special characters. A web page file name should only have letters, numbers, dashes (-), and underscores(_) in it and should end with a .htm or .html.

You can save Composer documents in HTML or text-only format. Saving a document in HTML format preserves the document's formatting, such as text styles (for example, bold or italic), tables, links, and images. Saving a document in text-only format removes all the HTML tags but preserves the document's text.

To save a document as an HTML file:

  • Open the "File" menu and choose "Save" or click the Save button on the Composition toolbar.
  • If you haven't already given your page a title, Composer prompts you to do so. Composer displays the page title in the browser window's title bar when you view the page in the browser. The document's page title also appears in your list of bookmarks if you bookmark the page.
  • Composer then prompts you to enter a filename and specify the location where you want to save the file. Make sure you preserve the html extension in the filename. Filenames should NOT contain spaces, slashes, !,@, $, %, &, *, etc.

To change the filename or location of an existing HTML file:

  • Open the "File" menu and choose "Save As" and select a different filename or location.

When you save a page in Composer, all parts of the page (the HTML, images and other
files, such as sound files and style sheets), are saved locally on your hard drive. If you only want to save the HTML part of the page, you must change the Composer preference for saving pages. See Composer Preferences - Composer for more information on changing Composer's setting for saving pages.

If an image location is absolute (starts with "http://") and you are connected to the Internet, you will still see that image in the document in Composer and your web browser. However, if the image location is relative to the page location (starts with"file:///"), then you won't see the image in the local version of the document.

To save a document as a text-only file:

  1. Open the "File" menu and choose "Export to Text".
  2. Enter the filename and specify the location where you want to save the file.

Note: Images do not appear in documents saved in the text-only format.

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

Publishing

You can publish your files to the web using WS_FTP or NetDrive (for PCs), or Fetch (for Macs). Return to the Contents page for more information. Composer offers a built-in "Publish" function, but it is difficult to use and not recommended.

Browsing

To view your page in a browser window in order to test your links:

  • Open the "File" menu and choose Browse Page (or click Browse in the Composition toolbar). If you have not yet saved your document, Composer prompts you to enter a page title, filename, and location. The Composer window remains open behind the new Navigator window.

 

Formatting Your Web Pages

In this section:

Formatting Paragraphs, Headings, and Lists

To apply a format to a paragraph, begin from the Composer window:

  1. Click to place the insertion point where you want the format to begin, or select the
    text you want to format.
  2. Choose a format using the drop-down list in the Paragraph Format toolbar:
    • Body Text: Applies the application default font and style for regular text, without affecting the spacing before or after the text.
    • Paragraph: Inserts a paragraph tag (use this to begin a new paragraph). The paragraph includes top and bottom margins.
    • Heading 1 - Heading 6: Formats the paragraph as a heading. Heading 1 is the highest-level heading, while Heading 6 is the lowest-level heading.
    • Address: Can be used for a web page "signature" that indicates the author of the page and the person to contact for more information, for example:
      user@example.com

    You might want to include the date and a copyright notice. This format usually appears at the bottom of the web page under a horizontal line. Navigator displays the address format in italics.

    • Preformat: This is useful for elements such as code examples, column data, and mail messages that you want displayed in a fixed-width font. In normal text, most browsers remove extra spaces, tabs, and paragraph returns. However, text that uses the Preformatted style is displayed with the white space intact, preserving the layout of the original text.
          This is an example of preformatted text.

          You can easily control the 
		     spacing of text in this format.

To format text as a heading:

  1. Click to place the insertion point anywhere within the text that you want to format.
  2. Using the drop-down list in the Format toolbar, choose the level of heading you want, from 1 (largest) to 6 (smallest). Choose "Heading 1 " for your main heading,"Heading 2" for the next level, and so forth.

To apply a list item format:

  1. Click to place the insertion point within the line of text that you want to format.
  2. Open the Format menu and choose List.
  3. Choose the list style:
    • Bulleted: Each item has a bullet (dot) next to it (as in this list).
    • Numbered: Items are numbered.
    • Term and Definition: These two styles work together, creating a glossary-style appearance. Use the Term tag for the word being defined, and the Definition tag for the definition. The Term text appears flush left, and the Definition text appears indented.

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

To change the style of bullets or numbers:

  1. Click to place the insertion point within the text of the list item you want to change, or select one or more items in the list if you want to apply a new style to the entire list.
  2. Open the Format menu and choose List Properties.
  3. Select a bullet or number style from the drop-down list. For numbered lists, you can specify a starting number. For bulleted lists, you can change the bullet style.

Tip: You can also double-click on a bullet or number in a list to display the List Properties dialog box.

To align a paragraph or text in your page, (e.g., centering or aligning to the left or right):

  1. Click to place the insertion point within the paragraph or line of text you want to align.
  2. Open the Format menu and choose Align; then choose an alignment option.

Note: You can also use the Format toolbar to align text.

Working with Lists

To end a list and continue typing body text:

  • Click to place the insertion point at the end of the last list item and press Enter (Return on Macintosh OS) twice to end the list.

To change one or more list items to body text:

  1. Click to place the insertion point within the list item, or select the list items.
  2. In a numbered list, click the numbered list button (or in a bulleted list, click the bulleted list button) in the Format toolbar.

To position indented text below a list item:

  1. Click to place the insertion point within the list item.
  2. Press Shift-Enter to create the hanging indent.
  3. Type the text you want to indent.
  4. Press Shift-Enter to create another indented paragraph, or press Return to create the next list item.

Tip: You can increase or decrease the indentation of list items by clicking anywhere in a list item and then clicking the Indent or Outdent button on the Format toolbar. Alternatively, click anywhere in a list item and press Tab to indent one level. Press Shift+Tab to outdent one level.

To merge two adjacent lists:

  1. Select the two lists that you want to merge. Be sure to select all of the elements in both lists. Note that any text in between the two lists will also become part of the merged list.
  2. Click the bulleted or numbered list button in the Format toolbar to merge the lists.

Changing Text Color, Style, and Font

To change the style, color, or font of selected text:

  1. Select the text you want to format.
  2. Open the Format menu and choose one of the following:
    • Font: Use this to choose a font. If you prefer to use fonts specified by the
      reader's browser, select Variable Width or Fixed Width.

    Note: Not all fonts installed on your computer appear. Instead of specifying a font that may not be available to all who view your web page, it's generally best to select one of the fonts provided in the menu since these fonts work on every computer. For example, the fonts Helvetica, Arial, Times, and Courier generally look the same when viewed on different computers. If you select a different font, it may not look the same when viewed using a different computer.

    • Size: Use this to choose a relative font size or select an option to increase or decrease text size (relative to the surrounding text).
    • Text Style: Use this to select a style, such as italic, bold, or underline, or to apply a structured style, for example, Code.
    • Text Color: Use this to choose a color from the color picker. If you are familiar with HTML hexadecimal color codes, you can type a specific code or you can just type a color name (for example, "blue"). You'll find a handy color code converter here.

To change the background color of the page:

  1. Click anywhere in the page.
  2. Click the background color block in the Format toolbar:
  3. Choose a background color from the Block Background Color dialog box.
  4. Click OK.

Tip: To quickly change the color of text to the color last used, select the text, then press Shift and click on the text color block in the Format toolbar. This is useful when you want to use one color for separate lines of text.

You can also use an image as a background. See Setting Page Colors and Backgrounds.

Checking the Spelling

Composer always checks the spelling starting from the beginning of your document, regardless of where you place the insertion point. To check the spelling of your page:

  1. Click the Spell button on the toolbar, or open the "Edit" menu and choose "Check
    Spelling".
  2. Use the Check Spelling dialog box to correct misspellings and to edit or add words to the current spelling User Dictionary. Click Close when you are done.
    • Recheck Page: Click to reset the spell checker and recheck words. Recheck Page is primarily useful if you switch languages and then want to re-check the document's spelling.
    • Check Word: Click to check the spelling of any word you type in the "Change to" field.
    • Replace and Replace All: Click to replace the word, or all occurrences of
      the word.
    • Ignore and Ignore All: Click to continue checking without changing the word, or all occurrences of the word.
    • Add Word: Click to add the word to your Personal Dictionary, so that Composer recognizes the word instead of highlighting it as a misspelled word.
    • Edit: Click to add, replace, and remove words from the User Dictionary.
    • Language: Choose the language that you want the spell checker to use.

Adding Tables to Your Web Page


In this section:

Inserting a Table

Tables are useful for organizing text, pictures, and data into formatted rows and columns.

To insert a table:

  1. Click to place the insertion point where you want the table to appear.
  2. Click the Table button on the Composition toolbar. The Insert Table dialog box appears.
  3. Type the number of rows and columns you want.
  4. (Optional) Enter a size for the table width, and select either percentage of the window or pixels.
  5. Enter a number for the border thickness (in pixels); enter zero for no border.

    Note: Composer uses a red dotted line to indicate tables with a zero border; the dotted line disappears when the page is viewed in a browser.

  6. To apply additional table attributes or JavaScript, click Advanced Edit to display the Advanced Property Editor.
  7. Click OK to confirm your settings and view your new table.

To change additional properties for your new table, see Changing a Table's Properties.

Tip: To insert a table within a table, open the Insert menu and choose Table.

Changing a Table's Properties

This section describes how to modify properties that apply to an entire table as well as the rows, columns, or individual cells within a table. If you are not currently viewing the Table Properties dialog box, follow these steps:

  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. The Table Properties dialog box contains two tabs: Table and Cells.
  3. Click the Table tab to edit these properties:
    • Size: Use this to specify the number of rows and columns. Enter the width of the table and then choose "% of window" or "pixels." If you specify width as a percentage, the table's width changes whenever the Composer window's or browser window's width changes.
    • Borders and Spacing: Use this to specify, in pixels, the border line width, the space between cells, and the cell padding (the space between the contents of the cell and its border).

    Note: Composer uses a dotted outline to display tables with a zero border;
    the dotted line disappears when the page is viewed in a browser.

    • Table Alignment: Use this to align the table within the page. Choose an
      option from the drop-down list.
    • Caption: Choose the caption placement from the drop-down list.
    • Background Color: Use this to choose a color for the table background, or leave it as transparent.
  4. To apply additional attributes or JavaScript events, click Advanced Edit to display the Advanced Property Editor.
  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 and choose Table Properties. The Table Properties dialog box appears.
  2. Click the Cells tab to edit the following properties:
    • Selection: Choose Cell, Row, or Column from the drop-down list. Click Previous or Next to move through rows, columns, or cells.
    • Size: Type a number for Height and Width, and then choose "% of table" or "pixels."
    • Content Alignment: Select a vertical and horizontal alignment type for the text or data inside each cell.
    • Cell Style: Select Header from the drop-down list for column or row headers (which centers and bolds the text in the cell); otherwise choose Normal.
    • Text Wrap: Select "Don't wrap" from the drop-down list to keep text from wrapping to the next line unless you insert a paragraph break. Otherwise, choose Wrap.
    • Background Color: Select a color for the cell background or leave it as transparent.

    Note: To apply additional attributes or JavaScript events, click Advanced Edit to
    display the Advanced Property Editor

  3. Click Apply to preview your changes without closing the dialog box, or click OK
    to confirm them.

Tip: To change the text color or background color of one or more selected cells or the entire table, select the cells or click anywhere in the table and then click the text color or background color icon in the Format toolbar.

Tip: To change the color of cells to the color last used, select the cell, then press Shift and click on the background color picker. This is useful when you want to use one color for individual cells.

Adding and Deleting Rows, Columns, and Cells

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

To add a cell, row, or column 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 new table within a table cell.)

To delete a cell, row, or column:

  1. Click a row, column, or cell to place the insertion point. Or, select neighboring cells to delete more than one row at a time. To select neighboring cells, drag over the cells you want to select. To select individual cells in a table, hold down the Ctrl key (Windows and Linux) or the Command key (Macintosh OS) and click on the cells you want to select.
  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:

  • Click inside the cell on the left, open the Table menu, and choose Join with Cell to the Right.

To join (or merge) adjacent cells:

  • Select adjacent cells by dragging over them.
  • Open the Table menu, and choose Join Selected Cells.

To split a joined cell back into two or more cells:

  • Click inside the joined cell, open the Table menu, and then choose Split Cell. Composer puts the entire contents of the joined cell into the first of the two cells

Refer to Selecting Table Elements for information on how to select non-adjacent cells,
rows, and columns.

Changing the Default Table Editing Behavior

By default, when you delete one or more cells, Composer preserves the table's structure by adding cells at the end of a row, wherever needed. This allows you to delete one or more cells but still maintain the table's original rectangular layout, or structure. Otherwise, deleting cells can result in a table with empty spaces, or whose outline appears irregular due to an uneven number of cells.

To change the default table editing behavior, begin from the Composer window:

  1. Open the Edit menu, choose Preferences, and then choose Composer.
  2. Under Table Editing, set the following preference:
    • Make sure that "Maintain table layout when inserting or deleting cells" is checked to ensure that you don't get an irregularly shaped table.
  3. Click OK.


Selecting Table Elements

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

  • Click in the table, open the Table menu, choose Select, and then choose an item from the submenu. For example, to select a table, click anywhere inside the table, open the Table menu, choose Select, and then choose Table.
  • Or, you can use the mouse as a selection tool:
    • To select a group of adjacent cells: click in a cell, and then drag to select the cells you want. Drag the mouse left or right to select a row; up or down to select a column.
    • To select non-adjacent cells: press Ctrl (Windows or Linux) or Command (Macintosh OS) and then click inside a cell. Keep pressing Ctrl (Windows or Linux) or Command (Macintosh OS) as you click to select additional cells.
    • To extend a selection to include adjacent cells: click inside a cell and then drag over additional cells to extend the selection.
    • To select one or more adjacent columns or rows: drag up or down to select the first column or row, and then drag left or right to select additional adjacent columns or rows. Press Shift and drag to the right to select an entire row. Press Shift and drag up or down to select an entire column.

Moving, Copying, and Deleting Tables

To copy or move a table:

  1. Click inside the table.
  2. Open the Table menu, choose Select, and then choose Table.

To copy or move the table:

  1. Use the Edit menu's cut, copy, and paste options.

To delete the table:

  1. Click inside the table.
  2. Open the Table menu again, choose Delete, and then choose Table.

Converting Text into a Table

To convert text into a table:

  1. Select the text that you want to convert into a table. Keep in mind that Composer creates a new table row for each paragraph in the selection.
  2. Open the Table menu and choose Create Table from Selection. You see the Convert to Table dialog box.
  3. Choose the character Composer uses to separate the selection into columns, or specify a different character to use. If you choose Space as the separator for columns, choose whether or not you want Composer to ignore multiple spaces and treat them as one space.
  4. Leave "Delete separator character" checked to have Composer remove the
    separator character when it converts the text into a table. If you don't want
    Composer to delete the separator character, uncheck this option.
  5. Click OK.

Note: Text formatting is removed when the selected text is converted to a table.

Adding Pictures (Images) to Your Web Page


In this section:

Inserting an Image into Your Page

You can insert GIF, JPEG, BMP, and PNG (Portable Network Graphics) images into your web page. You can also use them to create links. When you insert an image, Composer saves a reference to the image in your page.

Note: If you plan to publish your pages to the web, it's best not to use BMP images in your pages.

Tip: It's best to first save or publish your page before you insert images into it. This allows Composer to automatically use relative references to images once you insert them.

To insert an image:

  1. Click to place the insertion point where you want the image to appear.
  2. Click the Image button on the toolbar, or open the Insert menu and choose Image. You'll see the Image Properties dialog box.
  3. Type the location and filename of the image file, or click Choose File to browse for an image file on your hard drive or network.
  4. Type a simple description of your image as the alternate text that will appear in text-only browsers (as well as other browsers) when an image is loading or when image loading is disabled.

    Alternatively, you can choose not to include alternate text.

  5. If needed, click other tabs so you can adjust the settings (for example, "dimensions" or "appearance") in the Image Properties dialog box.

Tip: To quickly insert an image: Drag and drop it onto your page.

Tip: To insert a line break after all images in a paragraph, choose Break Below Images from the Insert menu.


Setting Page Properties


In this 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 links in your page appear to people viewing the page through a browser.

To set the colors and background for the current page, begin from the Composer window:

  1. Open the Format menu and choose Page Colors and Background.
  2. Edit any of the following properties:
    • Reader's default colors: Select this if you want your page to use the color settings from the viewer's browser for text and links.
    • Use custom colors: Select this if you want to specify the colors of text and links. For each element, select a color from the drop-down list. Sample output for each type of link appears in the pane on the right.
    • Background image: Select this if you want the background of your page to be an image. Type the name of the image file or click Choose File to locate the image file on your hard drive or network.

    Note: Background images are tiled and override background color selections.

    • URL is relative to page location: If checked, Composer converts the URL to be relative to the page's location. This is especially useful if you plan to publish your pages on a web server so that others can view them.

      Using relative URLs allows you to keep all your linked files in the same place relative to each other, regardless of their location on your hard disk or a web server.

      Deselecting this option causes Composer to convert the URL to a full (absolute) URL. You typically use absolute URLs when linking to images on other web servers (not stored locally on your hard disk).

      If you have unsaved changes, you must first save the page in order to enable this checkbox.

Note: To apply additional attributes or JavaScript events, click Advanced Edit to display the Advanced Property Editor.

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

Creating Links in Composer


In this section:


Creating Links Within the Same Page

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

  1. Click to place the insertion point at the beginning of a line where you want to create an anchor, or select some text.
  2. Open the Insert menu and choose Named Anchor. You see the Named Anchor Properties dialog box.
  3. Type a unique name for the anchor in the Anchor Name field (up to 30 characters). If you include spaces, they will be converted to underscores (_ ). 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 on which readers 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 or open the Insert menu and choose Link. You see the Link Properties dialog box.
    • If you're creating a link to an HTML file on your computer, click Choose File to locate it.
    • If you're creating a link to a named anchor (target), select it from the list of the anchors currently available in the page.
    • If you're creating a link to a level heading (for example, Heading 1 - Heading 6), select it from the list of headings currently available in the page.
    • Click OK.

Note: To test the link you just created, open the File menu and choose Browse Page, then click the link.

Tip: If you did not first create named anchors, you can use the Link dialog box to create links to headings that already occur in the page.

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.

Tip: It's best to first save or publish your page before you create links to other
pages. This allows Composer to automatically use relative references for links
once you create them.

To create a link to another page:

  1. Click to place the insertion point where you want to create a link, or select the text
    or image that you want to link to the anchor.
  2. Click the Link button. You see the Link Properties dialog box.
  3. Define your link:
    • Link text: If you've already selected an image file or text before clicking the Link button, the selected text or file will be entered here. Otherwise, you must enter the text that you want to use as the link.
    • Link Location: 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 for a local file, click Choose File to look for it on your hard disk or network. For remote URLs, you can copy the URL from the browser location field. Alternatively, you can select a named anchor or a heading in the current page that you want to link to.
    • URL is relative to page location: If checked, Composer converts the URL to be relative to the page's location. This is especially useful if you plan to publish your pages to a web server so that others can view them. Using relative URLs allows you to keep all your linked files in the same place relative to each other, regardless of their location on your hard disk or a web server.

    Deselecting this option causes Composer to convert the URL to a full
    (absolute) URL. You typically use absolute URLs when linking to pages
    on other web servers (not stored locally on your hard disk).

    If you have unsaved changes, you must first save the page in order to
    enable this checkbox.

  4. To apply additional attributes or JavaScript events, click Advanced Edit to display the Advanced Property Editor.
  5. Click OK.
  6. To test the link you just created, click the Browse button and then click the link to make sure it works as expected.

Tip: You can copy a link quickly by clicking and dragging the link from another window and then dropping it onto your page. For example, you can click and drag a link from a web page, bookmark, or Mail window and drop it onto your page. You can also right-click (Control+click on Macintosh OS) a link on a web page and choose Copy Link Location from the menu. Then you can paste the link location into the Link Location field in the Link Properties dialog box.

Using Images as Links

You can make images, such as JPEG, GIF, or PNG files, behave like 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 nage.

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

Note: To remove the blue border on images used as links, open the Link Properties dialog box, click the Link tab, and uncheck "Show border around linked image".


Back to Top | Contents | IIT Documentation