The Mozilla Composer (HTML Editor)

Computing Services Information Document - Sun/Unix

It is mentioned later in this document that Mozilla Composer has many features that aren't discussed here. This information present in this document is only a brief introduction to the abilities of Composer, and as always, you should experiment with the software and read its built-in help files to learn more about what you can do.

Loading A Web Page into Composer

• Click on File and select Edit Page from the menu

Now you should have two Mozilla windows open. One is the Navigator window containing this document, and the other is the Composer window containing the Camden Computing Services web page template. Congratulations, you may begin editing the web page!

Editing a Web Page in Composer

Mozilla Composer is what is known as a WYSIWYG (wizzy-wig) editor. What You See Is What You Get. This means that the overall appearance of your page in the Composer window is (almost) exactly how it will appear in the Navigator window. Two notable exceptions to this are numbered lists and tables. Numbered list items will not show up pre-numbered in Composer. Instead, it will show the "number sign" next to each item. This is to let you know that you are seeing a numbered list, and that it will be automatically numbered when viewed with Navigator. Tables will sometimes appear with formatting symbols or dashed lines around them. This is Composer's way of letting you see where otherwise invisible parts of the table are located. 

If you've ever used a word processor like Microsoft Word or Word Perfect, then you'll notice a familiar-looking trio of menu bars at the top of the Composer window. From top to bottom, they are:

It's possible that your Composer window isn't wide enough for you to see all the items in the three bars. If you can't see all of the buttons or words mentioned above, try resizing the Composer window until you can.
Another thing to point out, notice that two of the bars have little rectangles filled with dots and what looks like a blue arrow. These rectangles appear along the left side of the bars. Clicking on a rectangle causes its bar to "fold up" and become invisible. Clicking on the rectangle again will "unfold" the corresponding bar.

Although Composer has many formatting controls (ex. tables, columns) this document will only cover the basic features needed to edit the Camden Computing Services template. Detailed help about all of Composer's features can be accessed from within Composer itself. Just click on Help from the menu bar, and select Help Contents to view Composer's built-in help.

What follows are instructions for editing the various sections of the template. Remember, now that you are viewing the template in Composer, you will be able to save a copy of the resulting web page into your own home directory. For details on setting up your home directory so that others can access your web pages, please refer the information contained in the document How to Make a Web Page on Clam.

Headings

Move the pointer over the words My Home Page and click once to place the cursor on that part of the window. A solid, black "I" bar should appear wherever you clicked. This bar is your cursor. Move the cursor over to the word "My" and delete it...then type in your name. If you'd like to make the heading smaller, use the mouse to highlight the entire "Home Page" phrase. Then, click on the Paragraph/Heading Style box, which should be labeled Heading 1. A list of options will drop down from the box. There are six heading sizes defined in HTML, and the higher the number, the smaller the heading. Clicking on Heading 6 will make "My Home Page" become the smallest possible heading size.

While you still have the "Home Page" text highlighted, experiment with the Font Face, Font Size, and Font Color boxes as well. Notice how you can combine selections from each one of those boxes to customize the appearance of your heading. Also, clicking the Italic, Underline, Indent, and Align Text buttons will change the appearance and position of your heading.

Any of the things you do to the "My Home Page" heading can also be done to the other headings that appear on the template (Interests and Personal Hot List). You can delete a heading completely by moving the cursor over a part of it and pressing the delete and/or backspace keys. Or use the mouse pointer to highlight a heading and press the delete key.
Now is a good time to mention the Undo option. Should you alter or delete something that you didn't want to, or the result of your action didn't turn out the way you expected, click on the word Edit in the menu bar and select Undo. This won't undo everything you've done since loading the page, only the very last action...so if you want to undo something, make sure you select Undo immediately.

Text

As with a word processor, you can change the appearance and position of a block of text by highlighting it and selecting whatever options you like (bold, italic, larger font size, color, etc.). To change the appearance of text that you are typing in, select the options you want for color, size, font, etc. and then type in the text. Notice that your selections remain in effect until you change them or until you click on the Remove button. (That's the button that looks like the letter "A" with a bluish eraser rubbing it out). Clicking on Remove causes all the text formatting options to return to their defaults.

To remove only part of somethings format, most of the buttons allow you to "toggle" them. For instance, if you have a section of text that is bold and underlined, but decide you don't want the underline, you can remove one attribute without affecting the other. Just highlight the text, and click on the Underline button. Notice how the Bold button appears to be pushed in, but the underline button isn't.

Lists

• Use the mouse to highlight the four items listed under the heading Personal Hot List.
• Notice that the Bullet List button now appears pushed in.
• Change the list back into regular text by clicking on the Bullet List button. The button will no longer appear pressed in.
• Click on the Numbered List button. Notice how each line is marked with a "number sign" #. Each number sign marks where a number will appear when the list is viewed in a browser.

Images

To insert an image into your page, move the cursor to the place where you want the image to be, then either:

• Click on the Image button located on the button bar.
• Or, click Insert on the menu bar and select Image from the drop-down menu.

Also on the Image panel are optional Alternative representations. This is where you would specify an alternate image that could be used for lower resolution displays, or some text that could be displayed in web browsers that can not or do not display images.
In the middle of the Image panel are the controls for how text will be aligned or wrapped around the current image. There are five buttons along the left which control text alignment. The letters "xyz" on the buttons correspond to where text will be aligned along the current image. The two buttons on the right side of this section control word-wrap around the current image. Text can be wrapped around the left or right side of an image. Note that to see the effect of word-wrap, you must click on Browse from Composer's button bar. Clicking Browse allows you to send the page from Composer to Navigator, so that you can see how it will actually appear when viewed with a web browser.

At the bottom of the Image panel there are controls to change the current image's size and to place blank space or a border around the edge of the image. 

To modify the properties of an image that already exists, click on it with the left mouse button, then click and hold the right mouse button. (Mac users will have to click and hold the mouse for a moment or two until a menu pops up.) Try this with the template, click with the left mouse button on the "My Homepage" image. Then, press and hold the right mouse button until a window pops up, select Image Properties from this menu.

Let's make the "My Homepage" image a link to the Camden Computing Services Help page. Click on the Link tab in the Image Properties window and in the white box under the section marked Link to enter the following line:
http://oit.camden.rutgers.edu/
If you now select Browse, a Navigator window will open with the modified "My Homepage" image at the top. Clicking on the image should take you to the Camden Computing Services Help page.

Links

Text links on a web page are set apart from the other text by appearing in a different color as well as being underlined. With Composer, you can also control the alignment and font type of your links using the buttons on the Formatting Tool Bar. To edit the URL of an existing link, click on the link to select it then click on the Link button in Composer's button bar. This will open the Link Properties window.

If you want to make an image into a link, please refer to the section above this one on Images. To create a text link you can use one of two methods:

1. Add a URL to an existing image or piece of text.

To try this, look for the word Help in the fourth paragraph of the template. Use the mouse pointer to highlight this word. Next, click on the Link button. Notice that the word "Help" appears in the box marked "Linked text:"...click on the white box inside the section labeled "Link to" so that your cursor appears. Now, type in the following URL:
http://oit.camden.rutgers.edu/
Click on the OK button. This has turned the word "Help" in that paragraph into a hyperlink to the Rutgers-Camden Computing Services Help System. These same steps can be used to add a URL to any piece of text on your web pages.
2. Create a new link from scratch.

When creating a new link from scratch, you must position the cursor on the web page where you want the link's text to appear. Then click on the Link button to open the Link Properties window. In the box marked "Link source" you will enter the text that appears on the web page (which in method #1 above was the word "Help). Once you have entered the text for the link, you enter the URL in the box that just happens to be labeled "Enter link to a page location or local file:" (which in method #1 was the URL:
http://oit.camden.rutgers.edu/). Once you've entered the text of the link and the URL, click on OK. Your new link will appear on the page wherever the cursor was positioned.

Saving Your Document

• The first way only applies if you are using a Sun Workstation. If you are,then you can follow these steps:
1. Click on the word File, then select Save As from the menu.
2. A small file window will appear listing directories along the left and files along the right. At the bottom of the window there is a box marked Selection, here is where you provide the directory and file name to save your document under.

If the directory listed in the Selection box is not the directory that you want to save your document to, then scroll through the list of available directories until you find the one you're looking for (for example: the Selection box shows the directory as being "/clam/u4/students/johndoe" and you want to save it in "/clam/u4/students/johndoe/public_html"). When you find the directory name in the list, double click on it and it will appear down in the Selection box.
3. Move the mouse pointer to a blank space in the Selection box, and click the left button. This places the cursor inside the box, so that you can type in the name you want your document to have.
4. When everything is set the way you want, click the OK button to save your document.
Note: If you have already done the Save As steps and then made further changes to your document, you don't have to repeat those steps to save the document again. To save the most recent changes you've made using the same directory and file name, just click on the Save button in Composer's button bar.
• Once you've saved your Composer document, if you didn't use webdrive, you need to set the permissions of the file in the web directory so the document is accessible.
  1. Change to your web directory, which is usually public_html.
  2. Enter at the command line prompt:
     chmod 755 composer_file.html
  
  This will give you read, write, and execute privileges over the file, but only read and execute privileges for other account holders.

  If you encounter an error in this process, send email to help@camden.rutgers.edu specifying what you are trying to do, and the error message you are receiving.