SeaMonkey Tutorial
"Free, Simple, High-Level
Webpage Creation
– Easy as Word"
Website Working Group Workshop
23 May 2013 (rev.2)
(Post-Workshop Version: Charts 5, 12, 14, 23, & 24 have been extended
or cleaned up for clarity, or to introduce website workshop folder to
support working the exercises)
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
1
Getting to Know the Audience
The Internet
moves data &
commands
between
anyone’s
computer &
web servers.
A web browser is an app stored on
Low-level all-text
your computer. It starts by
descriptions (HTML) of
requesting a webpage by giving its
webpages & graphics
location (url) in the cloud.
files reside on servers.
The
It then
browser
renders
thenvisual/graphical
renders on the
Also, web apps,
webpage
displayimages
the visual/graphical
interpreting the
databases …
webpage
all-text
image(s)
description
interpreting
files. the
all-text
description
files. Website WG Workshop (2013 May.23)
“Using
SeaMonkey
for Webpage Development”
2
Disclaimers
• I am not, and never have been, a professional webpage designer, but
…



I am completely self-taught in this technology
I have never taken any course about webpage creation
but I am an academically trained Computer Scientist and was a practicing Software Engineer at TRW/Northrop-Grumman almost 31 years, including doing technology training
• (Similarly, SeaMonkey is not enough for developing professional
webpages)
• I “got on the web” about 1994. Netscape was one of the email systems
we used then. (I've been on earlier variants of email & the Internet, then
call the ARPANET, since 1977.)
• Curiosity led me to discover that Netscape had this webpage
“Composer” capability built in to it. SeaMonkey is Netscape's successor.
• I built and launched my first webpage in about 1995 – a collection of pointers to external (& later,
internal) technology pages relevant to our TRW Division's business. The division immediately hosted my website.
• The rest is history … 
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
3
What are SeaMonkey
& Composer?
SeaMonkey is a free integrated internet suite – web browser, email
system (client), and web-page authoring tool. It is developed and
distributed by the Mozilla community, a distributed consortium who believes the
Internet is a public resource that must remain open and accessible to all. Mozilla is thousands of
dedicated volunteers and corporate contributors from around the world with a small staff of employees to coordinate the process. SeaMonkey is Netscape's successor. Mozilla also
develops the Firefox web browser and Thunderbird email system.
Composer is a free web-page authoring tool (somewhat
misleadingly, aka an “HTML editor”); it’s part of SeaMonkey.
• Composer is a WYSIWYG (What You See Is What You Get) webpage authoring system which enables people who have no prior
web-authoring experience or any knowledge of the HTML language
to create basic web pages.
• Composer generate the HTML version of your webpage behind the
scenes.
The purpose of this tutorial is to enable users to create and
modify simple webpages. It is not intended to teach advanced web
design techniques. You always have access to built-in Help in Composer.
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
4
Presentation Outline
(Strike-Through topics are on charts, but will not be covered in workshop)
1. A Little Techno Jargan on the Topic
2. Downloading the Free Tools (SeaMonkey, FileZilla; GIFfun)
3. DEMONSTRATIONs:
•
•
•
Overview via 3 Example Webpages I've Developed With SeaMonkey –
“Reuse” & Modify an Existing Webpage
Create a New Webpage from Scratch some things you will learn; some I won't teach you
4. Webpage Development Basics






5.
6.
7.
8.
Using Tables for Layout
Fonts Types & Colors
Page Titles, Background Colors or Patterns
Bullets & Numbered Lists
Adding Graphics
Links (Hyperlinks) to other webpages; or, for file downloads
Webpage Style Guidelines
“Testing” your new/modified webpage & Uploading it to the Web
References
EXERCISEs: Update Omnilore homepage & Curriculum page
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
5
A Little Techno Jargan on the Topic
• Webpage (or web page): a page from the web in a single window
• Website (or web site): interconnected set of webpages on one server
• Homepage (or home page): the topmost webpage (the entry point) of a website
• Subpage: a subordinate webpage linked from another webpage within a website
• HTML (HyperText Mark-up Language, aka webpage Source): the under-the-hood,
mostly textual representation of webpages, with “tagged” text codes for images, fonts, sizes, formatting, etc.
• Browser: a computer application (program) which interprets an HTML file and
displays (renders) the graphical webpage in a window
• WYSIWYG (What You See Is What You Get): Like Word, the layout, sizing, colors, etc.
of the resultant output are the same as you see on your computer monitor as you author the document/page
• Composer: SeaMonkey’s embedded webpage-authoring component – a WYSIWG
editting tool which automatically generates the equivalent HTML

FTP (File Transfer Protocol):
a small, simple program which uploads/downloads files between your local
computer and a remote computer site. FileZilla is the free example we use.
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
6
More Techno Jargan on the Topic
(Features you might build into your webpage)
• Background (or Wallpaper): a color or design or image covering the entire webpage,
behind its text & graphical contents
• Link (or Hyperlink or Active Link, sometimes called Button)): a clickable section of
a webpage (often a text phrase or an image, often highlighted) which when mouse-depressed brings a
different webpage into a browser window. An Anchor is a special link that jumps within the current page.
• Download Link: A special hyperlink which starts the download of a non-webpage file (e.g.,
PDF, Word, PPT, or an executable application)
• MailTo link: starts a new email with addressee filled in (optionally, Subject too)
• Animation: A graphic which changes or moves. (Made with GIFfun for homepage)
• Mouse-Over (or Rollover or Hover): Advanced: As you move the mouse over an
image, link, or text section, changes its properties, e.g., font, size, color, or a different image.
• Marquee: Advanced feature scrolling text repeatedly across part of a webpage.
• Java: Advanced: A computer programming language with good features for describing graphical
computer interfaces, including those with some kind of action or user interaction (dynamic webpages). A
Java script (fragment of code) is sometimes embedded in the HTML of a webpage.
• CSS (Cascading Style Sheets): Advanced:
A file referenced from a webpage which defines
specific instances of advanced features such as mouse-overs, walking menus, etc.
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
7
3 Example Webpages I've Developed
With SeaMonkey (1)
Some things you will learn to do — Some things I won't teach you
1: Hart-site.net : our family's website
• Simple (unprofessional) webpage look – non-uniform mix of text, graphics, & links
•
•
•
•
•
•
•
Shows automatic resizing of text boxes as webpage window size changes
Click on most graphics to see larger version
Some links are to downloadable files (our holiday letters, softball statistics, ...)
Click on St. Hart's Day icon to see linked subpage which is invitation
Car animation is a special type of GIF file – I did not create, merely copied/linked it
More linked subpages on softball team & Vivian Hart …
Link to college class webpage ...
2: Carleton67.net : my college class's reunion & news website
• A more organized webSITE with many subordinate pages, connected by hyper-links;
to both my own subordinate pages & others' (Carleton College's website, Flickr)
•
•
•
•
•
•
Common look among linked pages – go to “In Memoriam” example, drill down
Visible TABLES, used for layout of graphics, text blurbs, buttons, etc.
Use of color, font types, Page Title
Time breakdown of modern web design 
“Wallpaper” (background): carleton67-bkgr.gif file (“View Source” to find file)
Beyond SeaMonkey: hover or mouse-over (text vs graphics); count-down clock; CSS
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
8
3 Example Webpages I've Developed
With SeaMonkey (2)
Some things you will learn to do — Some things I won't teach you
3. Omnilore Shakespeare Class website: This demonstrates how
you can extend Myron's SDF folder capability into a website to enhance your
class's access to online capabilities related to your subject matter.
http://omnilore.org/members/Curriculum/SDGs/13a-SHK-Shakespeare/
• Stores organizing artifacts:
 DownLoadable linked files
 some artifacts presented as subpages created using Word
 research resources on the web
•Info on the trimester's plays: cast lists; external web resources, video
clips, animated summaries …
• “Go To Top” feature between sections of the long webpage
• Beyond SeaMonkey: a scrolling “Marquee”
• but it was really easy to view the HTML source code and just copy the
Marquee HTML fragment from the Source of an existing webpage & revise the
text
“Using SeaMonkey
for Webpage Development” Website WG Workshop (2013 May.23)
9
Downloading the Free Tools
(SeaMonkey, FileZilla, GIFfun)
• SeaMonkey, free downloads for Windows, Mac
OS X, & Linux:
http://www.seamonkey-project.org/
• FileZilla, a free FTP program with downloads for
Windows, Mac OS X, & Linux:
http://filezilla-project.org/
• Optional: GIFfun (by Stone Design), a free program for creating
animated graphics such as “OmniPeople.gif” on the Omnilore
homepage. Built for Mac OS X, but there is an Executor for other
platforms (Windows, Linux, DOS...) as well as downloadable source
code:
http://www.stone.com/GIFfun/
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
10
“Reuse” & Modify an Existing
Webpage: Demonstration
Example: Converting a prev. trimester's SHK homepage
into next trimester's (the Quick-and-Dirty way to do a webpage)
Change Background Color
Change Animated GIF
“Improve” Layout
Update Text & Links
for chosen plays...
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
11
“Reusing” & Modifying an Existing Webpage
You Like from the Web: The Procedure
1. Open that existing webpage in SeaMonkey's browser (Navigator)
2. From FILE menu, select “Save Page As…”, then select format
“Web Page, complete” to place a copy of this webpage plus the
graphics files it references into a New Folder. Pick desired
webpage file name, such as “MyPage.htm” or even “index.html”
3. Select “Edit Page” from File menu (or Ctl-E) – this opens a
Composer window (why I like the “integrated” SeaMonkey internet suite)
4. Change Page Title (in Format menu)
5. Change background if desired (in Format menu)
6. Edit contents of webpage pretty much the same as using Word …
• Some of the basic Word-like editing functions to change/extend
the webpage are cited on the next 2 charts
7. Save periodically as you work
8. After any Save, check out how the webpage looks by clicking the
“Browse” icon at top of Composer window
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
12
Using Tables for Layout

Use Tables to simulate columns & separate sections


to divide your info into clearly defined sections, and keep spacing &
distances uniform (handy technique in Word too)
The Table borders (lines between cells) may be made invisible
(you see them in Composer but not when opened in a browser window)




Bullet 1
Bullet 2
Bullet 3
Paragraph blah blah blah
blah blah blah blah blah
blah blah blah blah ...
(1) Enum. Item 1
(2) Enum. 2
(3) Enum 3
or they may be visible in any chosen width or a variety of
patterns (e.g., dotted, doubled, grayed …)
S/DG TITLE

Width of each column in browsers may be specified by % of
total Table or by absolute number of pixels. Ditto, whole table
relative to browser window size.
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
13
Basics – Using Familiar Icon
Buttons, or Menus
Icons for all of these are at top of Composer window – select text or
image or place cursor before hitting icon button (just like in Word)

Bullets & Numbered Lists

Bold, Italics, Underlining

Lower-Level, indented lists (or text)

Fonts Types & Colors

Page Titles, Background Colors or Patterns

Adding Graphics

Links (copy or type any regular hyperlink or an intra-page anchor)
– Mailto links: enter link as “mailto:email.adress”
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
14
Creating a New Webpage from
Scratch: Demonstration
Example: Create a homepage for “Trial by Movies” class
Center, leftjustify etc.
text using
Composer's
TOOL BAR
3-Column
effect using
a TABLE
Links to Download Files
Add Images
using Image
button
Link to
another
webpage
Mailto Links
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
15
PLANNING – Getting organized
for your webpage creation
1. Plan the general layout of your page/site before you begin
– what will be the contents, what order should they appear
in, lay out info in columns vs vertical paragraphs, location of
menus (if any), what other webpages will you reference (link
to), ...
2. Make sure that you have all the images you want to
include and text/Word/PPT files you want to link before you
start.
 Keep graphics files small. Large graphics will cause
your web pages to load slowly. Use only lo-res JPG (photo
quality) and GIF (good for colors) graphics formats.
3. To minimize the possibility of broken links, keep all of
those files in a single folder (directory), the same one as
your new webpage(s).
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
16
Creating a New Webpage from
Scratch: The Procedure
1.
2.
3.
4.
5.
6.
7.
8.
9.
Start Composer from SeaMonkey's “Window” menu, or icon at
bottom left in browser window
Open a new webpage file using “New” icon or from File menu
Click “Save” icon at top of Composer window: place existing
webpage into a new directory using file name = “index.html” (or
index.htm)
Enter Page Title (Format menu)
Set background if desired (Format menu)
Create contents of webpage pretty much the same as using
Word
Save periodically as you work
Add subpages, external links, ...
After any Save, check out how the webpage looks by clicking
the “Browse” icon at top of Composer window
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
17
Webpage Style Guidelines
(appropriate for simple webpages, culled from several sources)
1. Use font colors in sharp contrast with background for ease of reading
• neutral background color vs darker font colors
2. A sans-serif font, e.g., Arial font (or Arial Bold), is easier to read on a monitor
than Times
3. Chop long sentences into shorter ones. Avoid long words (> 3 syllables). Keep
paragraphs short. Avoid a “wall of text.”
4. Highlight (bold) keywords & major points
5. Minimize usage of italics and underlining. Too much is “messy.”
6. Increase readability by using lists, bullets, subheadings, & columns (to keep
readable lines easier for the eye to scan, like newspapers)
7. Highlighting links helps recognition that they're links: most common convention
– underlined, blue (SeaMonkey’s default)
8. Judicious usage of graphics increases appeal
9. Always provide a way to contact you (the webpage's webmaster)
10. Avoid Frames (use Tables) for printability
Less is Better
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
18
“Testing” Your New Webpage
• Preview your web pages in multiple web browsers
(such as Internet Explorer, Safari, Firefox,
SeaMonkey, Chrome, Flock, Opera, Camino, etc . . .)
to ensure that your page appears consistent on
different browsers.
• In my experience, Microsoft's Internet Explorer
(IE) is the one most likely to display a webpage
differently.
• When appearances are different, decide if the
difference matter for your purpose. If so, you
may have to change or simplify something to get a
uniform look; this may be hit-and-miss.
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
19
Uploading Your New Webpage
to the Web: Server Space
At least 3 different ways to obtain web server space to
host your webpage(s)
1. If for an Omnilore class, folder space is provided at
http://omnilore.org/members/Curriculum/SDGs/ –
•
•
See SDG Folders webpage for upload instructions & guidelines
contact Webmaster@Omnilore.org for FTP address and password
2. Some Internet Service Providers (ISPs) provide ample free server
space for members to host their webpages: AOL, EarthLink, …
• Instructions come with membership, or contact them for
help
3. There are many commercial services which sell web domain
names (renewable 3 years) & rent server space for an annual fee,
typically $50-$100 for several Gigabytes of storage
A webpage listing some such services: http://www.top-10-webhosting.com/

The hosting service will provide the host server's web address, a username
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
20
& password for uploading (FTP) your webpage files

http://www.top-10-web-hosting.com/
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
21
Uploading Your New Webpage to the Web:
Typical Upload Instructions
Use FileZilla (or another FTP utility) to upload webpage
files: the HTML file generated by Composer, plus any graphics
files, subpages, and linked/downloadable PDF/WORD/PPT/etc. files
See http://omnilore.org/members/SDG5.htm#FTP
1. Connect as per instructions provided by server-space provider
2. Select directory on your computer (“Local Site”) with webpage
files & sub-directories
3. Select Destination (Target) directory (“Remote Site”) as per
instructions (if not already visible)
4. Perform upload(s) by double clicking on files on Local Site, or
dragging icons from Local Site to Remote Site
5. Check out uploaded webpage(s) again (“Testing”)
Brag on it to your classmates/friends/family ...
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
22
Exercises
1) Open “Omnilore-WEBSITE-Files(SeamonkeyTutorial)” folder on Desktop
or http://Omnilore.org/SeamonkeyTutorial/Omnilore-WEBSITE-Files
– a folder for workshop exercises set up on the Omnilore website
2) Note structure: homepage is “index0.html”
a) Seven abc5.htm pages (linked to homepage’s yellow buttons)
b) “images” directory
c) “information” directory (with Newsletters in it)
d) “members” directory”
e) Open “members” directory
• eight xyz.htm pages in it (linked to homepage’s orange buttons)
• “admin” directory (contains calendars referenced from Calendar page)
• “OfficeManager” & “Procedures” & “Training” directories,
containing files referenced from Officers & Training pages (some
are stubs in website workshop folder – no sensitive information)
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
23
Exercise 1
1) Enter http://Omnilore.org/SeamonkeyTutorial/Omnilore-WEBSITE-Files/index0.html
into SeaMonkey’s browser address window — or,
2)
3)
4)
5)
6)
7)
(1a) from directory loaded from memory stick at the workshop,
drag “index0.html” onto SeaMonkey icon to open it
If you did (1), from FILE menu, do SAVE PAGE AS.. “Web Page, complete” to a new folder
Enter EDIT mode (Composer) by selecting “Edit Page” from FILE menu
or by typing Control-E
BASIC EDITS
Under “Upcoming Events”: Delete May 13 & 17 events (they’re history)
Update “What’s Happenin’ ?” to advertise the two May 23rd events
Shrink size of Newsletter entry there (because it’s getting oldish)
Update date at bottom; add your initials; SAVE; view in browser
EXTRA CREDIT (TABLE Row manipulations – Row Select, Copy, Row Insert, Pas
8) Before Deleting Rows in (4) above, Copy those 2 events to June 10 & 21
9) Edit June 10 based on “Interest Groups” webpage
10) Make Hiking/Walking Group entry a generic To Be Announced
11) Gray out Hiking/Walking Group intra-page link (BONUS EXTRA CREDIT)
12) SAVE; BROWSE to see result – Open “index(20130519).htm” to see expected result
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
24
Exercise 2
1) Drag “Curriculum5.htm” onto SeaMonkey icon to open it
2) Enter EDIT mode (Composer)
UPDATES TO MAKE:
3) In table with light orange background under banner, header:
•
Retitle right to read “VIEW: Current SDGs (Summer 2013, with Coordinators)”
•
Reverse right & left halves (Current SDGs at left)
•
Add a separator line down middle of box (aesthetics, clarity)
•
Lose “Course Selection Form” line
•
Add “HTML” & “PDF” links under “Current SDGs” linked to
files “Summer-2013-Courses-FINAL.html” &
“Summer-2013-Courses-FINAL.PDF” which you will find by browsing the directory
•
Add “Schedule Table View” linked to “Curriculum/ClassesCoordsSummer2013.pdf”
Open “Curriculum5(20130510).htm” to see expected result
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
25
References
1) NorthEastern Illinois University SeaMonkey tutorials:
• www.neiu.edu/~scs/Documentation/Internet/Web_Development/Web_Development.pdf
• www.neiu.edu/~scs/Documentation/Internet/Web_Development/Mac_webpage.pdf
2) Web-hosting services: Top 10 values linked at
• http://www.top-10-web-hosting.com/
• Yet, I use http://virsite.net/ (They’re Green !?!)
3) Style Guidelines: Many available on the web, e.g.,
• http://www.upenn.edu/webguide/style_guide/
• http://www.google.com/support/webmasters/bin/answer.py?answer=35769
• http://webdesign.about.com/od/styleguides/Web_Style_Guides.htm
Download this “SeaMonkey Tutorial” PowerPoint presentation from:
http://omnilore.org/members/OfficeMgr/OfficeFiles/2.1.4..WebWorkGroup/Seamonkey-Tutorial.ppt
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
26
References:
Other Web Development
Tools, Further Reading
• Today there are many tools & technologies for web
development:
 Commercial ones (both WYSIWYG & other) with all the
advanced features; necessary for professionals building retail
websites (shopping carts, databases of info): e.g.,
DreamWeaver, Front Page, Microsoft Expressions, ColdFusion…
 Some free WYSIWYG ones for the Windows platform
 But no other WYSIWYG ones I’m aware of that are free
and implemented on all 3 Windows/Mac/Linux platforms
 No other ”integrated internet suites” I’m aware of
• For further reading on web development & available tools:
•
http://en.wikipedia.org/wiki/Web_development
•
•
www.howstuffworks.com
Google “Web Development” or “Web Design” or
“Web Design Software”
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
27
Timeline of the World Wide Web
(from Wikipedia “Web Development” article)
“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23)
28