Transcript Web Page Creation - Penn State University

Web Publishing
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
Learn about Fireworks, Photoshop and
ImageReady
Getting Started with Web Pages
Penn State eportfolio:
http://eportfolio.psu.edu/


Applying for WebSpace
https://www.work.psu.edu/webspace/

1-1 Help Provided by University Learning
Centers
http://www.ulc.psu.edu/

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
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
Considerations for Choosing a
Photo Editing Program


Cost (software and training)
Hardware requirements (such as platform,
operating system, processor, RAM, Hard-disk space,
and display)



Usability
Functionality
Purpose for using it (web graphics or print)
Demo of Photoshop
Demo of ImageReady
Demo of Fireworks
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?