Creating an iAdventure with SeaMonkey Composer

(Version 1.1.x – Macintosh and Windows)

Seamonkey is free and can be downloaded here:   http://www.seamonkey-project.org/

Downloading the Template:

• Use your web browser to go to this address: http://warrensburg.k12.mo.us/iadventure/class

• Scroll down to the section called Helper Pages and select one of the templates to download. These templates have been compressed (either stuffed or zipped), so choose the one that your computer is capable of expanding.

• Click on the template of your choice. This will download the file to your desktop (or your designated download folder). Depending on your configuration, the file may decompress automatically. If not, use a decompression utility to open it. This will result in a folder containing the template.

Editing the Template:

• Open the template folder. You will see several HTML files (web pages), and a few images. The starting web page for the template is index.html. You will open this page in SeaMonkey Navigator. It may not work to double-click this file (your computer may open it in Internet Explorer if that browser is available). If it doesn’t work, open SeaMonkey, select Open File from the File menu, then locate and select index.html.

• After it opens, pull down the File menu and select Edit Page. This will open the page in SeaMonkey Composer.

• You will need to assign a page title to this page (not the same as the file name, which is index.html). The page title is what people see displayed at the top of their browser as they view your page. Select Page Title and Properties from the Format menu. In the next window, next to the word Title, type the desired title for your page (such as the title of your iAdventure). Click OK. Now you can add content to your iAdventure page!

• To change the page’s background color, click the Format menu and select Page Colors and Backgrounds. Select Use Custom Colors, then click on the button next to Background. Select the background color you want.

IMPORTANT POINT: In Composer there are two ways of viewing web pages. When editing your page, it is in Edit mode. You can also preview your web page in a web browser.  To do this, click on the Browse button (it looks like a navigating wheel).  This opens your page in SeaMonkey Navigator. You cannot make changes in Navigator. You must return to Composer to edit the page. The Browse option is important because you should regularly look at your page in a real web browser to make sure that it “works” properly.

Adding and Editing Text:

• The template provides some text to get you started, but you will want to replace all of this text with your own. Highlight the text that you want to replace and then type your own text.

• Many of the text formatting buttons are similar to what you would use in a word processor. You can center the text, resize it somewhat, and select a style, such as Bold, Italics, or Underline. You can change the color of your text by highlighting it and clicking the Font Color button (next to the font size button).

• It is possible to select a different font. To do this, pull down the Format menu to Font, then a submenu of fonts appears. But, if the viewer’s computer does not have the font you choose, the they will not see your chosen fontr. If you do choose another font, make sure it is one that is very common, such as Arial, Comic Sans, Verdana, Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Times, or other font that is common.

Adding and Editing Images:

• By far, the best way to add images to your web page is to prepare them first, save them as GIF or JPEG images, and then place them in your web page folder. Then add them to your web page from this folder. Images can be edited and converted to GIF or JPEG with an image-editing program such as Adobe Photoshop Elements. If you are obtaining pictures from the Internet, perhaps from a web site that already exists, they will already be in the GIF or JPEG format.

• To get a picture from an existing web site, locate a picture that you like, then Right-click (Control-click on a Mac) on the picture. In the menu that appears, select Save Image as… or Download Image to Disk and save it to your folder. Then it can be inserted from your folder into your web page. Please keep in mind that some pictures on the Internet are copyrighted!

• To insert pictures on your page, click to place the cursor where you want the picture. Then click the Image button (it has three small shapes on it, a circle, triangle, and square). In the resulting dialog box, click the Choose File button. Locate the image file you want to insert (it should be in your page folder!) and click Open. Then click OK. This places the image into your web page at the spot where the cursor was.

• To center any image on your web page, click to the side of the image to place your cursor on the same line, then select the Center button (this is the same method as centering selected text).

• To edit various attributes of an image on your web page, such as borders and text-wrap, double-click on the image to open the Format window (or Image Properties windows). Make sure the Appearance tab is selected at the top of this window. You can experiment with the controls here or read about them in the Help files.

Using Tables to Help with Page Layout:

It is often desirable to have images, text boxes, etc. on the left side of your web page, and something else on the right side. You can, for instance, insert a table that is one row and 3 columns wide, place an image in the left cell, center some text in the middle cell, and place another image in the cell on the right.

• To insert a table, place the cursor where you want it, then click the Table button (a small grid with 3 columns and 2 rows). This will open the Insert Table dialog box. Type the number of rows and columns you want in your table. You can also make it so the table does not have a visible border around each cell (next to Border Line Width, set the number of pixels to zero).

Creating or Changing Internal Links:

The template already has most of the links between pages (just re-type the text of each link to make them say what you want), but you will likely need to change or create some of your own internal links.

• Highlight the text (or image) you wish to serve as a link to another page.

• Click on the Link button (it looks like a small chain with 3 links).

• In the dialog box that opens, click on the Choose File button.

• Locate the page you want to link to, select it, and click Open, then click OK. This makes the text into a link that web page.

Adding Links to a Remote Sites (External Links):

• You can also link text (or an image) to any other web page that is on the Internet.

• Highlight the text (or image) you want linked, then click the Link button (it looks like a chain with 3 links).

• In the resulting dialog box, type or paste in the URL (web address) of the remote site (be sure to include the http:// at the beginning), then click OK. This links the text or image to the remote web address.

Uploading Your Web Page to a Web Server:

• SeaMonkey Composer has a built-in feature that allows you to upload your pages and images to a web server.

• This can be done only if you have an FTP account on the web server, and you must know the address of the server and your FTP username and password for your account. You can upload your iAdventure to your own school district’s web server, if there is one available.

If you do not have a web server available for your use, you can send me your completed iAdventure and I will examine it and place it on the Learning with iAdventures site on the Warrensburg Schools web server. The easiest way to do this is to Zip up your iAdventure folder (compress it), and then email it to me as an attachment. You can also burn it on a CD and mail the CD to me. Here is how to do this:

My email address: ssmith@warrensburg.k12.mo.us

My snail mail address: Stan Smith, Warrensburg R6 Schools, 438 East Market, Warrensburg, MO 64093

• When you are ready to upload your page(s) and the files that are associated with it (remember, all the images must be there in the same folder), do the following:

• Make sure your main index page is open and visible in Composer, then click the Publish button (the 4th button from the left in the top row of buttons, it looks like a slanted page with three lines under it).

• At the top of the Publish window that opens, click on the Settings tab. Type a site name (anything will work for this). Type the web server address in the space below where it says Publishing address. In front of the server address, type ftp://

Example: ftp://warrensburg.k12.mo.us

You do not need to type anything for the HTTP Address.

• Under Login Information, type your Username and Password that were given to you.

• Now click on the Publish tab. Make sure there is a checkmark next to Include images and other files. Everything else here should be okay.

• Click the Publish button. If everything is correct, a box will open that shows the progress of your upload. If there are images on this page, the images will be uploaded also, and a list of the files will appear, with green checkmarks next to each one that was successfully uploaded.

• If you have other HTML pages (web pages) as part of your site, they must be uploaded in the same way.

• Once you have uploaded each page the first time, all you need to do is click the publish button from now on.

• You should check your uploaded web page by going to your web site with a web browser.

Once you have your FTP account set up, you can update and re-upload your iAdventure whenever necessary!