1 / 47

An Overview of Web Page Development Tools and Techniques at Penn State

This training resource provides an in-depth exploration of web page development tools, focusing on the differences between HTML editors and hand coding. Users will learn about key software options such as Dreamweaver, FrontPage, GoLive, and ANGEL’s editing features, along with image editing tools like Fireworks and Photoshop. It discusses the advantages and disadvantages of each option, emphasizes the importance of understanding HTML, and provides guidance on collaborative practices in web development. Ideal for students and staff at Penn State interested in web publishing.

dewayne
Télécharger la présentation

An Overview of Web Page Development Tools and Techniques at Penn State

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/webspace/ • 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 don’t have to rely on specific software—can 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 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!

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

  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/communicator/composer/v4.0/index.html • Frontpage- http://www.microsoft.com/frontpage/ • Dreamweaver-http://www.macromedia.com/software/dreamweaver/ • 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/contribute/ • 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?

More Related