“using seamonkey for webpage development” website wg workshop (2013 may.23) 1 "free,...

“Using SeaMonkey for Webpage Development” Website WG Workshop (2013 May.23) 1

"Free, Simple, High-Level Webpage Creation

– Easy as Word"Website Working Group Workshop

23 May 2013

SeaMonkey Tutorial


Getting to Know the Audience

The Internet moves data &

commands between anyone’s

computer & web servers.

A web browser is an app stored on your computer. It

starts by requesting a webpage by giving its location (url) in the

cloud. It then renders visual/graphical webpage images interpreting the all-text description files.

Low-level all-text descriptions (HTML)

of webpages & graphics files reside on servers. Also,

web apps, databases …

A web browser is an app stored on your computer. It

starts by requesting a webpage by giving its location (url) in the

cloud. The browser then renders on the

display the visual/graphical webpage image(s) interpreting

the all-text description files.


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 …


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


Presentation Outline


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.


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.


3 Example Webpages I've Developed With SeaMonkey (1)

Some things you will learn to do — Some things I won't teach you

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

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


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


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/


“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

Update Text & Links for chosen plays...

“Improve” Layout


“Reusing” & Modifying an Existing Webpage: The Procedure

1. Open existing webpage in SeaMonkey's browser (Navigator)

2. Select “Edit Page” from File menu (or Ctl-E) – this opens a Composer window (why I like the “integrated” SeaMonkey internet suite)

3. Click “Save” icon at top of Composer window: place existing webpage into a new directory (this brings along all images too), picking file name = “index.html”

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 …

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

9. Use basic Word-like editing functions (see next 2 charts) to change/extend the webpage


Using Tables for LayoutUse 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)

or they may be visible in any chosen width or a variety of patterns (e.g., dotted, doubled, grayed …)

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.

(1) Enum. Item 1(2) Enum. 2(3) Enum 3

Bullet 1 Bullet 2 Bullet 3

Paragraph blah blah blah blah blah blah blah blah blah blah blah blah ...

S/DG TITLE


Basics – Using Familiar Icon Buttons, or Menus

Bullets & Numbered Lists

Bold, Italics, Underlining

Lower-Level, indented lists (or text)

Fonts Types & Colors

Page Titles, Background Colors or Patterns

Adding Graphics

LinksMailto’s


Example: Create a homepage for “Trial by Movies” classCenter, left-justify etc. text using Composer's TOOL BAR

Add Images using Image button

Mailto Links

3-Column effect using a TABLE

Link to another webpage

Links to Down-load Files


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


1. Start Composer from SeaMonkey's “Window” menu, or icon at bottom left in browser window

2. Open a new webpage file using “New” icon or from File menu

3. Click “Save” icon at top of Composer window: place existing webpage into a new directory using file name = “index.html” (or index.htm)

4. Enter Page Title (Format menu)

5. Set background if desired (Format menu)

6. Create contents of webpage pretty much the same as using Word

7. Save periodically as you work

8. Add subpages, external links, ...

9. After any Save, check out how the webpage looks by clicking the “Browse” icon at top of Composer window


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

• A sans-serif font, e.g., Arial font (or Arial Bold), is easier to read on a monitor than Times

• Chop long sentences into shorter ones. Avoid long words (> 3 syllables). Keep paragraphs short. Avoid a “wall of text.”

• Highlight (bold) keywords & major points

• Minimize usage of italics and underlining. Too much is “messy.”

• Increase readability by using lists, bullets, subheadings, & columns (to keep readable lines easier for the eye to scan, like newspapers)

• Highlighting links helps recognition that they're links: most common convention – underlined, blue (SeaMonkey’s default)

• Judicious usage of graphics increases appeal

• Always provide a way to contact you (the webpage's webmaster)

• Avoid Frames (use Tables) for printabilityLess is Better


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


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 [email protected] 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-web-hosting.com/

The hosting service will provide the host server's web address, a username & password for uploading (FTP) your webpage files


http://www.top-10-web-hosting.com/


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


Exercises

1) Open “Omnilore-WEBSITE-Files(SeamonkeyTutorial)” folder on Desktop

2) Note structure:

1) Seven abc5.htm pages (linked to homepage’s yellow buttons)

2) “images” directory

3) “information” directory (with Newsletters in it)

4) “members” directory”

5) Open “members” directory

1)eight xyz.htm pages in it (linked to homepage’s orange buttons)

2)“admin” directory (contains calendars referenced from Calendar page)

3)“OfficeManager” & “Procedures” & “Training” directories, containing files referenced from Officers & Training pages


Exercise 1

1) Drag “index.html” onto SeaMonkey icon to open it (or Open in Composer)

2) Enter EDIT mode (Composer)

BASIC EDITS

3) Under “Upcoming Events”: Delete May 13 & 17 events (they’re history)

4) Update “What’s Happenin’ ?” for week of May 20’s two events (today’s)

5) Shrink size of Newsletter entry there (because it’s getting oldish)

6) Update date at bottom; add your initials; SAVE; view in browser

EXTRA CREDIT (TABLE Row manipulations – Row Select, Copy, Row Insert, Paste)

7) Before Deleting Rows in (4) above, Copy those 2 events to June 10 & 21

8) Edit June 10 based on “Interest Groups” webpage

9) Make Hiking/Walking Group entry a generic To Be Announced

10) Gray out Hiking/Walking Group intra-page link (BONUS EXTRA CREDIT)

Open “index(20130519).htm” to see expected result


Exercise 2

1) Drag “Curriculum5.htm” onto SeaMonkey icon to open it2) 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


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 at1)http://www.top-10-web-hosting.com/

2)Yet, I use http://virsite.net/ (They’re Green !?!)

• Style Guidelines: Many available on the web, e.g.,1)http://www.upenn.edu/webguide/style_guide/

2)http://www.google.com/support/webmasters/bin/answer.py?answer=357693)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


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”


Timeline of the World Wide Web (from Wikipedia “Web Development” article)

“using seamonkey for webpage development” website wg workshop (2013 may.23) 1 "free,...

Documents