Web Publishing Overview

1
Web Publishing Overview

• Adam Cavotta and Christine L. Vucinich
• ITS Training Services
• http//its.psu.edu/training/

2
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

3
Getting Started with Web Pages

• Penn State eportfolio
• http//eportfolio.psu.edu/
• Applying for WebSpace https//www.work.psu.edu/web
  space/
• 1-1 Help Provided by University Learning Centers
• http//www.ulc.psu.edu/

4
Basic Web Page Creation

• Two Options
• Hand coding of Hypertext Markup Language (HTML)
• HTML Editor, usually What You See Is What You
  Get (WYSIWYG)

5
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 dont have to rely on specific softwarecan
  use any text editor!

6
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

7
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

8
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

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

10
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

11
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

12
Using Netscape/Mozilla Composer

• as your Web Page Editor

13
Advantages

• Its easy to make HTML based documentsworks 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!

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

15
Demo of Composer
16
Using Microsoft FrontPage

• as your Web Site Editor

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

18
Disadvantages

• The code isnt 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

19
Demo of FrontPage
20
Using Macromedia Dreamweaver

• as your Web Site Editor

21
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

22
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

23
Dreamweaver Disadvantages

• Steep learning curve compared to FrontPage
• Help files do not always give needed background
  on the bigger picture

24
Demo of Dreamweaver
25
Using Adobe GoLive

• as your Web Site Editor

26
GoLive

• WYSIWYG editor
• One of the first big HTML editors to hit the
  market
• Many advanced tools like Dreamweaver

27
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

28
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

29
GoLive Disadvantages

• Interface can be more confusing to novice users
• Unclear help files

30
Demo of GoLive
31
Using Macromedia Flash

• Dynamic content and Interactivity without all the
  code

32
Flash Examples

• http//www.libraries.psu.edu/maps/
• Sample files provided by Macromedia-
  http//www.macromedia.com/software/flash/
  

33
Flash

• Has become the Web standard for streaming media.
• Familiar interface for Macromedia product users.

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

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

36
Flash Demonstration
37
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)

38
Demo of Photoshop
39
Demo of ImageReady
40
Demo of Fireworks
41
Resources
42
Web-Based Training

• Available at https//wbt.psu.edu/
• Web editor comparison course available
• CIW Site Design Part 3 Using FrontPage,
  Dreamweaver, and HomeSite.

43
HTML Editors

• EditPlus2- http//www.editplus.com
• Netscape Composer- http//wp.netscape.com/communic
  ator/composer/v4.0/index.html
• Frontpage- http//www.microsoft.com/frontpage/
• Dreamweaver-http//www.macromedia.com/software/dre
  amweaver/
• Adobe GoLive-http//www.adobe.com/products/golive/
  main.html

44
Codeless Tools

• Flash- http//www.macromedia.com/software/flash/
• Contribute-http//www.macromedia.com/software/cont
  ribute/
• ANGEL-
• http//cms.psu.edu

45
Web Design

• Webmonkey
• http//hotwired.lycos.com/webmonkey/
• earthWebdeveloper.com
• http//webdeveloper.earthweb.com/
• HTML Goodies
• http//www.htmlgoodies.com/
• Web Developers Virtual Library
• http//www.wdvl.com/
• Web Developer.com
• http//www.webdeveloper.com/

46

• DevShed.com
• http//www.devshed.com/
• Builder.com
• http//builder.com.com/

47
Questions?