HTML Editing Tools

This tutorial will focus on how to use SeaMonkey Composer to edit the ePortfolio templates provided by SFSU.

If you are interested in using another html editor like Dreamweaver or would like more information about other html editors, see the Additional Resources at the bottom of this page.

Back to top

Using SeaMonkey Composer

SeaMonkey Composer is an open-source, mozilla project that is based on the original Netscape Composer and has virtually identical features. Before you begin editing your ePortfolio in Composer, you should have downloaded the SeaMonkey Composer, the appropriate FTP client (Fetch for Macintosh or Filezilla for Windows), and your choice of a template from Step 1: Getting Started.

1. Click on the SeaMonkey icon to launch the application;
2. Because SeaMonkey is also a web browser, it opens a browser window when started. To open a Composer window, goto the "Window" menu and select " Composer" (Command - 4);
3. To start editing the ePortfolio template, click the "Open" button in the toolbar and navigate to template folder you downloaded earlier. Select the file " index.htm" to edit the welcome page.

There are 4 toolbars for editing html with Composer: Composition Toolbar, Format Toolbar, Edit Mode Toolbar, and Status Bar.

TIP:Click for links to other Composer tutorials.

Back to top

Adding/editing ePortfolio text

All of the template pages provided to SFSU students have been designed with Cascading Style Sheets (CSS) which stylize the text and give the web pages their professional looking appearance. To maintain the look and feel of the template, note the templates have different styles of text for different parts of the page. The images below illustrate the following text objects used in the template:

• Navigation Links
• Heading 1
• Heading 2
• Paragraph
• links

Back to top

TIP: While you edit the template, you can use the Format toolbar to switch between the different types of text that you want to add to the page (Heading 1, Heading 2, paragraph, etc.)

Adding links to your ePortfolio

1. Click on the template where you would like the link to be placed.
2. Click the “Link” button in the toolbar.
3. Insert the text that you would like to be displayed on the web page in the first box, labeled “Link Text” box. Next, add the location of the page in the second box, labeled “Link Location”. If it is to a separate web site like SFSU, the “Link Location” would be http://www.sfsu.edu. If it is a link to a page you created or is within the template folder, click “Choose file” and select the file.* Click “Ok”.

Opening a link in a new window

1. If you would like to open the link in a new window, double click on the link in the Composer, in Normal view.
2. Click “Advanced Edit”. A window similar to the one in Figure 2 will open. On the “HTML Attributes” tab select “target” from the Attribute drop-down menu.
3. In the “Value” text box enter _blank and click “Ok”

Adding images to your ePortfolio

Images that you would like included in your ePortfolio should be placed in the images folder of your template.

1. Click on a place within your template page that you would place an image.
2. Click the "Image" button in the toolbar and select the "Choose File" button.
3. Navigate to your images folder to select the image that you want to insert.
4. At this point, be sure the "URL is relative to page location" box is checked.
5. Enter a label for this image in the "Alternate Text" box. This label should briefly describe what is being visually presented in the image.
6. Click the "OK" button to finish.

To change the image size use our automatic Picture Resizer

Changing the dimensions and other attribues of the image

1. Double click the image you would like to modify
2. In the image box click the “Dimensions” tab
3. Select "Custom Size"
4. Enter in a new width and height. Uncheck "Constrain" if you would like to set your own exact dimensions.
5. To remove a border around the picture click the “Appearance” tab and in the “Solid Border” text field, then type in 0.
6. For advanced editing options, click on Advanced edit.

Applying a left or right alignment style to an image using Seamonkey.

All SFSU templates have been created with two style classes which align images with text. The "class" of "img_left" aligns the image to the left side of the page, with text wrapping to the right side of the image. The "class" of "img right" aligns the image to the right with the text wrapping to the left.

1. Double click on the inserted image
2. A pop-up window appears, from the "location tab", single click on the "advanced edit" button
3. A "html attributes" tab appears, select the "Attribute:" menu arrow, scroll down to the "class" attribute and release, then manually type in "img_left" or "Img_right" without the quotation marks in the white "Value:" box.

Back to top

Quick Guide

Click on the link for a printable pdf of the following information.

Additional Resources

Below are links to various resources that might help you to develop or customize your ePortfolio.

• Tutorials for editing web pages and templates using Dreamweaver
• A Netscape Composer Tutorial
• Another Netscape Composer Tutorial

Back to top Next: Step 3 - Publish