Website Development Using SeaMonkey

The purpose of this lab is to get you familiar with SeaMonkey to design, lay out, and populate a web-site consisting of multiple connected pages.

A. Simple Web-page Editing

Let's first focus on the basics of editing a web-page.

First, enter three lines of text.

Left justify one line.

Center justify the second line.

Right justify the third line.

Play around with fonts, font sizes, font colors, etc.

Now add in an image, e.g.:

Next create a 2x4 table, and add in some headings and contents, e.g.:

Item	Retail Price
Ho Ho	$1.25
Twinkie	$1.50
Ding Dong	$2.00

Now create a link, e.g. to the Shidler College home page.

Finally, add an image and turn this into a link, e.g.:

B. The Dog Shop Example

In this exercise we will create a simple web-site promoting dog accessories.

1. Start a new page and give this page a title; this is the name that shows up on the title of the web browser: (e.g. Welcome to the Dog Shop): Format | Page Title and Properties...

2. Use a 3x1 table (3 rows, 1 column) to divide the home page into areas (top: header, middle: body, bottom: footer).

3. Insert a 1x2 table within the middle cell of your table to create a menu on the left and a "body" on the right

Now you have succeeded in dividing your web-page into regions using tables to lay out space.
Try playing around with the sizes of these tables using the Table | Table Properties... menu.

4. Set the page background color: Format | Page Colors and Background...

5. Set the table background color: Right click on the table, or select Table | Table or Cell Background Color...

6. Insert an image--a banner--into the top of the 3x1 table

Tip: You can find non-copyrighted images on the web. Search for "puppy banner". Example sites: images.google.com, istockphoto.com, gettyimages.com

There are two ways of inserting images in SeaMonkey:

a. Click on Insert | Image...
b. Copy the URL and insert the URL in the "location" field, or
c. Save an image as a file on your local computer and enter the file name in the "location" field

Note: You can create your own image (by taking your own picture, manipulating it with PhotoShop, etc.) and saving it as a file which you then insert following instruction "c" above.

7. Insert a footer into the bottom row of the 3x1 table (e.g. copyright notice, terms of service, link to an FAQ, etc.)

8. Insert a video clip:

Go to Youtube.com
Search for "cute puppy"
Copy the HTML in the "embed" field: click on share button first, then the embed link to open the html code and copy the code.
Paste the HTML into SeaMonkey (use Insert | HTML...)
Resize, if desired (adjust the height and the width) by double clicking on the video area. (Note: the video will not be visible within SeaMonkey.)

9. Create a menu in the sidebar. In the left pane of your 1x2 table in the middle row, create a set of labels, one per line, e.g. Leashes, Bowls, Kennels, Food, Chew Toys, Books, etc. Now select one of those labels and click on the Link button in SeaMonkey. Enter the link location. You can enter this as an absolute location, e.g. http://www2.hawaii.edu/~username/leashes.html or as a relative location e.g. leashes.html. If you choose a relative location, make sure you check the "URL is relative to page location" box. (Note: To test that your link works, create a second file called leashes.html and put some text into it like "It Works!".)

10. Remove the table borders: click on a table then select Table | Table Properties... Set the Border to 0 pixels. For example, this is what the table from part A looks like, with the border set to 0 pixels:

Item	Retail Price
Ho Ho	$1.25
Twinkie	$1.50
Ding Dong	$2.00

11. Preview your page: click on the "Preview" tab in SeaMonkey.

12. View the HTML source of your page: click on the "<HTML> Source" tab in SeaMonkey

13. Save your file as "index.html" if you want to use this webpage as your home page on UHUnix. If you have already saved the file using some other file name, just rename it to index.html. If you wish to keep your existing index.html file, name this file something else, such as DogShop.html. In that case, to access this file you will need to type:
http://www2.hawaii.edu/~username/DogShop.html

14. Transfer the html files and any images that you refer to, using SSH (or an equivalent program). These should be uploaded to your public_html folder on UHUnix. Make sure that all of these files have read permissions properly set.

Notes:

Always design your website based on your business model, and based on the rules of good web-site design, as discussed. Check out this site for examples of what not to do.
For questions about software installation, see the Website Development Notes or this intro video.