Download Web Page Creation - Penn State University

Web Editor Choices
for Faculty
Christine L. Vucinich
Training Specialist, 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,
and the Web editing features of ANGEL
Discuss specific features/problems with
each system for Penn State use
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 slower development
HTML Editors


What You See Is What You Get
(WYSIWYG)
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
Many still not well accomplished at writing
dynamic pages (ASP, PHP, JSP,
ColdFusion)
Complex pages can easily be composed
that do not follow standards and therefore
are not cross platform / cross browser
compatible
Knowing HTML





You should know some HTML no matter what
you do
Provides an understanding of the HTML
structure, should something ever need tweaked
Makes designing good, usable Web pages
easier, even if you use a HTML Editor
You can learn how to code HTML while working
with an editor
Find some good online references and keep up
to date!
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
Does your department support/prefer you to use one
program over the other?
Some programs add more “junk” than others and could
begin to get in your way
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
Stick With One HTML Editor


Understand and know the programs
tool/method for site management
Most HTML editors do best when nearly all
file manipulation is done “inside” the
program
File name change
 Move files
 Delete files

Cross Platform / Cross
Browser Compatibility




One major problem with any web page,
especially those created with a HTML
editor, is cross platform/cross browser
compatibility
Frontpage prefers Internet Explorer
Dreamweaver tries to be more compatible
There is virtually a 100% chance of having
some formatting/compatibility problem with
any HTML editor
Design and Planning



Any web page will only be as good as the time spent
planning the design
Know what the lowest-common-denominator is and try to
design for it (Netscape 4.7)
Know the various tools available to help with “page
layout”




Tables
Layers
Accessibility (A PSU requirement for official pages)
Know who your audience is…how will they be
connecting to the Internet?
Web Servers

There are two main types of Web servers





Unix
Windows
Most ITS@PennState servers are Unix
(www.personal.psu.edu)
This presents a problem for most of the
FrontPage extensions that allow for some
dynamic behavior
Unix servers might have problems with
Windows/Mac files that are not formatted
properly (especially scripts)
Using FrontPage
as your Web Site Editor
Examples of Web Sites created
in FrontPage

http://www.microsoft.com/frontpage/evalua
tion/gallery.htm
Advantages






WYSIWYG editor with similar Toolbars/Interface
to other Microsoft Programs
Easily Preview your Web Site
Collection of Themes and Clip Art (like other
Microsoft Programs)
Allows you to add/track tasks, see a report view,
check links and work with others
Can edit the HTML code
Can see the Directory Structure/Navigation of
your Site
Disadvantages


The code isn’t as clean/easy to read as it
is in other Web Design Programs
The Penn State Personal Server does not
have FrontPage Server Extensions
Demo of FrontPage
Learning FrontPage


Microsoft’s Web site:
http://www.microsoft.com/frontpage/ (you
can download a demo, a tutorial and
participate in discussions/on-line
community)
Web-Based Training and ITS Free
Seminars (free to PSU students, staff and
faculty): http://its.psu.edu/training/
Using Dreamweaver
as your Web Site Editor
Dreamweaver

Incorporates many advanced features
Accessibility Support
 Dynamic language support
 Code Editing
 XML support
 Growing JavaScript Library

Examples of Web Sites created
with Dreamweaver


http://www.macromedia.com/
http://www.intranetjournal.com/articles/200
002/dream_index.html
Dreamweaver Advantages






Standards compliant
Organizes webpages by “site”
Creates easily readable code without
much junk
Cleans “busy” code from other sources
like Frontpage or Word
Free reference for HTML, JavaScript, CSS
Easy to use templates
Dreamweaver Advantages




Helps a collaborative project by allowing
file “check-in” and “check-out”
Integrates with Fireworks MX 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
Highly customizable
Dreamweaver Advantages


Accessibility checker for Section 508
compliance
Very robust HTML syntax checker
Dreamweaver Disadvantages




Bigger learning curve than FrontPage
As with other more advanced editors, a lot
of options, many a general user might not
use or use incorrectly
Help files do not always give needed
background on the bigger picture
Highly customizable (novice user)
Demo of Dreamweaver
Learning Dreamweaver


Macromedia’s Web site:
http://www.macromedia.com
Web-Based Training and ITS Free
Seminars (free to PSU students, staff and
faculty): http://its.psu.edu/training/
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.
What is Penn State’s Course
Management System?


ANGEL (http://cms.psu.edu)!!
Penn State's Course Management System, A New
Global Environment for Learning (ANGEL), is responsive
to the needs of students and instructors for course
management and interactive learning strategies. ANGEL
is easy for computer novices and is superior for the
technologically savvy. ANGEL has essential course
management features such as syllabus space, lesson
space, teams, discussion, quizzing, surveys, drop boxes,
and grading, along with unique faculty tools to track
student work and transform learning processes.
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
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
Learning ANGEL

ANGEL’s Web site: http://cms.psu.edu/

ITS Free Seminars:
http://its.psu.edu/training/
ANGEL vs. HTML Editor



ANGEL is a Course Management System
Dreamweaver and FrontPage are HTML
Editors
They work really well together!
Resources
HTML Editors




EditPlus2
 http://www.editplus.com
Frontpage
 http://www.microsoft.com/frontpage
Dreamweaver
 http://www.macromedia.com/software/dreamweaver
ANGEL
 http://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?