Download Web_Overview_Final

Web Editor
Overview
Adam Cavotta and
Christine L. Vucinich
ITS Training Services
http://its.psu.edu/training/
Objectives



Examine the difference between using an
HTML editor and hand coding Web pages
Learn about Dreamweaver, FrontPage,
GoLive, Flash, Contribute, and the Web
editing features of ANGEL
Discuss specific features/problems with
each system for Penn State use
Basic Web Page Creation

Two Options
Hand coding of Hypertext Markup Language
(HTML)
 HTML Editor, usually “What You See Is What
You Get” (WYSIWYG)

Hand Coding - Pros




Provides greater control of the finite
aspects of a Web page
Usually needed to make a more complex
Web page cross platform / cross browser
compatible
Allows for good HTML formatting
You don’t have to rely on specific
software—can use any text editor!
Hand Coding - Cons




Must have knowledge of HTML and file
structure
Must be comfortable hand coding
Easy to make typing mistakes
Often much slower development time
HTML Editors



What You See Is What You Get
(WYSIWYG)
Examples: Netscape Composer, Microsoft
FrontPage, Adobe GoLive, Macromedia
Dreamweaver
Two most commonly used HTML editors:
Dreamweaver
 FrontPage

HTML Editor - Pros




Quick development time
Little knowledge of HTML needed for basic
pages
Works much like any popular word
processor
Controls file structure within the program
HTML Editor - Cons



May have browser bias especially for
complex pages
Many still not well accomplished at writing
dynamic pages
Some programs (like Dreamweaver,
FrontPage, GoLive have site management
features) others are only page editors.
Knowing HTML




You should try to know some HTML no matter
what you do..find some good online references
and keep up to date!
Provides an understanding of the HTML
structure, should something ever need to be
tweaked
Makes designing good, usable Web pages
easier, even if you use an HTML Editor
You can learn how to code HTML while working
with an editor
Stick With One HTML Editor



Which ever program you decide to use, stick with it
If you work in a group, try to use the same editor
In group settings, most HTML editors have features that
make working together easier if you use the same
program






File sharing/locking
Design notes, revision control
File manipulation (move, delete, rename) is done inside of the
program
Does your department support/prefer you to use one
program over the other?
Do you already have the software or do you need to
order it?
Some programs add more “junk” than others and could
begin to get in your way
Using
Netscape/Mozilla
Composer
as your Web Page Editor
Advantages








Its easy to make HTML based documents—works like a
word processor.
Can access it right from the Netscape Web browser.
Includes HTML code validation utility
Can be used to debug JavaScript
Spell checking feature.
Image importer converts images into a Web format
automatically.
You can show all tags, look at HTML source or preview
any one page.
It is free!
Disadvantages




It has a publishing feature but does not allow
you to see remote and local copy.
Not a site management system. You would need
to keep track off all of your pages, links, images,
etc.
Help is the same help for Netscape so you have
to sort through the information.
You have to open page in Composer. (Previous
versions would allow you to browse for a page,
edit, then publish).
Demo of Composer
Using Microsoft
FrontPage
as your Web Site Editor
Advantages







WYSIWYG editor with similar Toolbars/Interface to other
Microsoft Programs
Easily Preview how your Web Site looks in Internet
Explorer
Collection of Themes, Templates, Wizards, and Clip Art
(like other Microsoft Programs)
Allows you to add/track tasks, see a report view, check
links
Can edit the HTML code
Can see the directory structure/navigation of your site
Check in/out system for working with others.
Disadvantages


The code isn’t as clean/easy to read as it
is in other web design programs for
advanced pages
The Penn State Personal Server does not
have FrontPage Server Extensions
Demo of FrontPage
Using Macromedia
Dreamweaver
as your Web Site Editor
Dreamweaver Advantages






Standards compliant- Accessibility checker for
Section 508 compliance
Organizes Web pages by “site”
Creates easily readable code without much junk
Very robust syntax checker- Cleans “busy” code
from other sources like FrontPage or Word
Free reference for HTML, JavaScript, CSS
Easy to use and create templates
Dreamweaver Advantages




Helps a collaborative project by allowing
file “check-in” and “check-out”
Integrates with Fireworks and Flash for
visual design of Web pages, keeping
formatting and dynamic content
Does not change previously created code
but will suggest cleanups and changes for
better compatibility
Interface is highly customizable
Dreamweaver Disadvantages


Steep learning curve compared to
FrontPage
Help files do not always give needed
background on the bigger picture
Demo of Dreamweaver
Using Adobe GoLive
as your Web Site Editor
GoLive



WYSIWYG editor
One of the first big HTML editors to hit the
market
Many advanced tools like Dreamweaver
GoLive Advantages



Mostly Standards compliant
Easily organizes site
Integrates with Photoshop/ImageReady
easily


Sites created in Photoshop can be transferred
into GoLive for final editing
Allows “place anywhere” design
GoLive Advantages

Has a well developed “workgroup server”
to help in collaborative projects
Helps with revision management
 File control



Accessibility checker for Section 508
compliance
HTML syntax checker
GoLive Disadvantages


Interface can be more confusing to novice
users
Unclear help files
Demo of GoLive
Using Macromedia
Contribute
A tool to manage Web sites for the
Web novice
Contribute



Intended for basic editing and
maintenance
Features a browse and edit interface
Few options, few tools, less confusion
Contribute Advantages




Easy for novice users to make text edits
Restricts users from editing complicated
code
Can be customized by the Webmaster to
allow/restrict certain features and access
rights.
Ideal for large, well established Web sites
that are managed by a team of content
providers.
Contribute Disadvantages


Can’t be used to edit code so there is a
need for at least one HTML code editor
application for your site.
Webmaster must set access rights and
distribute “keys” to give access to the site.
A look at Contribute
Using Macromedia
Flash
Dynamic content and Interactivity
without all the code
Flash Examples


http://www.libraries.psu.edu/maps/
Sample files provided by Macromediahttp://www.macromedia.com/software/flash/
Flash


Has become the Web standard for
streaming media.
Familiar interface for Macromedia product
users.
Flash Advantages




No HTML or JavaScript coding necessary
Can create interactive content with a
couple of mouse clicks
Entire “Web site” can be contained in a
single Flash file.
Easy to use templates and pre-made user
interface components help create an
attractive and functional user interface.
Flash Disadvantages



Flash player plug-in required, not
“universally” compatible.
Intended for visually rich Web experience,
not ideal for accessibility.
Advanced features have a steep learning
curve.
Flash Demonstration
Using ANGEL
as your Course Management
System
What is a Course Management
System?



A course management system (CMS) is a
system used to manage course content. It
typically allows the content manager or
author to modify the content without
knowing HTML.
It may also include various communication
tools such as a chat room, bulletin boards,
e-mail, quizzes, etc.
ANGEL- http://cms.psu.edu/
ANGEL Advantages




Built in HTML editor on the PC
Import/Export pages easily from one
course to the next
Includes utilities to batch upload Web files
You can easily change permissions
(password protect, limit to certain teams,
temporarily hide files)
ANGEL Advantages


Limit access to the students/faculty of the
course
Easily link to Web sites outside of ANGEL
ANGEL Disadvantages







Does not have an HTML editor on the MAC. You need to
know HTML or copy/paste from HTML editor
Does not work on Mac OS X using Internet Explorer (for
now)
You can only build Web information page by page, not
an entire site
Difficult to export a Web site from ANGEL to a local
machine to then edit using FrontPage or Dreamweaver
Have to be connected to the Internet to work on pages
Difficult to have advanced layout control
You will not have a URL on the Web to direct others to
Demo of ANGEL
Resources
Web-Based Training

Available at: https://wbt.psu.edu/
Web editor comparison course available:

CIW Site Design Part 3: Using FrontPage,
Dreamweaver, and HomeSite.
HTML Editors

EditPlus2- http://www.editplus.com

Netscape Composer-

http://wp.netscape.com/communicator/composer/v4.0/inde
x.html
Frontpage- http://www.microsoft.com/frontpage/

Dreamweaver-
http://www.macromedia.com/software/dreamweaver/

Adobe GoLive-
http://www.adobe.com/products/golive/main.html
Codeless Tools



Flashhttp://www.macromedia.com/software/flash/
Contributehttp://www.macromedia.com/software/contribute/
ANGELhttp://cms.psu.edu
Web Design

Webmonkey


earthWebdeveloper.com


http://www.htmlgoodies.com/
Web Developers Virtual Library


http://webdeveloper.earthweb.com/
HTML Goodies


http://hotwired.lycos.com/webmonkey/
http://www.wdvl.com/
Web Developer.com

http://www.webdeveloper.com/

DevShed.com


http://www.devshed.com/
Builder.com

http://builder.com.com/
Questions?
Web Case Scenarios Activity