"How to" Guideline series is coordinated by Helen Mongan-Rallis of the Education Department at the University of Minnesota Duluth. If you have any questions, comments, or suggestions to improve these guidelines please me at e-mail hrallis@d.umn.edu.

rainbow bar

How To Create a Web Page Using Mozilla Composer

(Originally by Dan Darvell for Netscape Composer; updated by Helen Mongan-Rallis for Mozilla Composer. Page last updated: June 18, 2005 )

Purpose of these guidelines:

The purpose of these guidelines is to take you step by step through creating a basic web page in Mozilla Composer so that you will know how to create a web page using an easily obtainable web authoring application. To complete this exercise you will need to have a picture saved on your disk for you to insert onto your page. This image needs to be a .gif, .jpeg, .jpg, or .png format.


Overview of topics in these guidelines

  1. Open Mozilla Composer
  2. Title
  3. Heading
  4. Inserting pictures
  5. Creating a bulleted & numbered list
  6. Creating a table
  7. Saving your page
  8. Uploading to your www account

Open Mozilla Composer

  1. Launch Mozilla -> then from the menu bar, select Window -> then from this list, select Composer. This will open a new document in Mozilla's web authoring software called Mozilla Composer.
  2. If you do not have a copy of Mozilla, you can download this from Mozilla.org

[Back to top of page]

Title

  1. Go to Format menu at top of screen --> select page properties.
  2. Click in the title box type: Whatever you want to title your page (e.g. Helen's Home Page) --> You can enter your name and description of the page as well, but this isn't necessary -- >then click OK .

[Back to top of page]

Heading

  1. Now in main window type your page heading on the first line: e.g. Welcome to My First Bad Web Page
  2. Highlight this text and then select the drop down menu box that has listed as the default "body text->select Heading 1.
  3. If you wish to change the color of the heading, with the text still highlighted, go to format --> color --> select a dark shade of red
  4. With text highlighted go to format --> align --> center

Note: you may also format text using the toolbars at the top of your main window:

[Back to top of page]

Inserting pictures

When inserting pictures into web pages it is best to have all these pictures saved in an images folder within your web folder. To set this up, do the following:

  1. On your hard drive/C drive, wherever you have chosen to store your website (or on your USB drive if you aren't working on your own computer), create a new folder and call it Your Web Site (where "your" is your name)).
  2. Open this folder and create a new folder within it called images.
  3. Place an image (either in .gif or .jpg or .png format) from its current location into in this images folder. Make sure that you have already resized this image for the web so that it has a resolution of 72 pixels per inch and is no wider than 800 pixels per inch (but preferably much smaller -- as small as is possible while making it still clear, as the large the image size the longer it takes the page to load)
  4. Drag the picture of yourself location and place it into your Web folder. Now you are ready to insert your picture:
  5. Back in Netscape Composer, click at the end of the line (after the word "page"), then hit the return or enter key to move your cursor down one line.
  6. Make sure cursor is centered and go to Insert--> Image. This will open the format image dialog box.
    ( Another way to do this is to click the insert image icon on the tool bar).
  7. In this dialog box, click on Image location box. Click on the is a "choose file" button --> navigate to the place on your computer where you have your image saved.
  8. In the Alternative tag box, type in a brief description of the picture so that those using screen readers (who cannot see the picture) know what is in the picture.
  9. Once you have selected image and entered an alt. tag, click on OK at the bottom of your menu. This will insert your picture onto the web page.

[Back to top of page]

Creating a Bulleted or numbered list

  1. If your cursor is still aligned center (because the last thing you did -- inserting your picture -- was aligned center). Align your cursor to the left by going to Format --> align --> left (or choose the left align button at the top of the page).
  2. Type: The heading of your list (e.g. My Favorite Links)
  3. Highlight this text and go to Format --> select heading --> 2
  4. Press the enter key then type: Name of your first link (e.g. UMD Home Page)
  5. Type: The next item in your list (e.g. Helen Mongan-Rallis How To Guidelines)
  6. Continue entering items and pressing the enter key at the end of the line
  7. Now select all the lines that you have just typed and go to Format --> List --> Bulleted if you want a bullet list (or you can click on the bullet list icon on the toolbar) or numbered if you want a numbered list

    bullet list button
  8. Now highlight the URL of the first list item (i.e.: www.d.umn.edu) by dragging the cursor across the words.
  9. Go to Insert --> Link or click on insert link button. A dialog box opens, directing you to identify what you would like to link to. Enter the URL in the link to box and select OK. [TIP: To avoid typing the URL incorrectly, a more accurate way is to go the the Internet --> locate the page to which you wish to link --> highlight the URL --> select "Edit" from the menu bar --> select copy. Then return to the Link Dialog box (shown above), place your cursor in the link to a page location space --> select "edit" and --> paste. This will paste in the URL for you and save you typing it!]
  10. Repeat this for the other items URL in your list.

[Back to top of page]

Creating a table

  1. Go to Insert-> Table (or use the icon on the toolbar)
  2. Select the number of columns and rows (e.g. 4 columns and 2 rows)
  3. Set the width of your table (better to do this as a percentage of the window so that is how much space it will take up on the users' windows, regardless of the size of their monitor). If there are many columns, set it to be very wide, but I usually set it no larger than 98% so that there is a little space on either size).
  4. Set the border size. 1 is usually fine, but experiment with different settings to see which you prefer.
  5. Press the enter key.
  6. If you wish to format other aspects of the table, you can double click on the table --> this will open a dialog box that allows you to choose from a variety of options for the table and the table cells.
  7. Click OK when you are done.
  8. Enter information into the cells (you can enter text and images)

[Back to top of page]

Saving your page

  1. Go to File --> Save. This will bring up a box asking you where you want to save the file and what you want to call the file.
  2. Save the file into your website folder (that you created on your hard/C drive or on your USB drive) and give it a name that is one word, lower case letters only (e.g. firstbadpage.html or first_bad_page.html)

You are now ready to upload your your web site (containing your bad.html web page and the picture)

Uploading your page your www account.

You are now ready to upload your badpage folder (containing your page and your picture) to your www account. To publish in Composer click on the "settings" button: This will bring up a dialog box:

  1. Site name: whatever you would like to call your site (e.g. Helen's site)
  2. Publishing address: For UMD users this will be: ftp://www.d.umn.edu.www (for ALL UMD users -- do not put your username here even though Composer includes this as part of its example)
  3. HTTP address: UMD users enter http://www.d.umn.edu/~yourlogin (where "your login" is you UMD username -- which is the same as the first part of your UMD e-mail address). E.g. in the screen shot below, my homepage address is: http://www.d.umn.edu/~hrallis/
  4. Then click on the "publish' button.
    Settings box for composer - these settings are included as text on this web page for people using screen readers

rainbow bar

Return to the Index of How To Guidelines