San Francisco State University

Academic Technology

Image: Photos of SF State students and scenes from around campus

Student Tutorials

Seamonkey Tutorial


HTML Editing Tools

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

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.

  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.

Four Toolbars of Seamonkey Composer

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

ePortfolio template index page
ePortfolio template
image of format toolbar

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.)

Back to top

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”.
Adding links

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 links

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.
Image Attributes

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.

SF State Home