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-11 Help Provided by University Learning Centers http://www.ulc.psu.edu/ 1
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 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 2
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. 3
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 4
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 5
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 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 6
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 7
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 8
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 9
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 10
Using Macromedia Flash Dynamic content and Interactivity without all the code Flash Examples http://www.libraries.psu.edu/maps/ Sample files provided by Macromedia- http://www.macromedia.com/software/flash/ Flash Has become the Web standard for streaming media. Familiar interface for Macromedia product users. 11
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 12
Considerations for Choosing a Photo Editing Program Cost (software and training) Hardware requirements (such as platform, operating system, processor, RAM, Hard-disk disk space, and display) Usability Functionality Purpose for using it (web graphics or print) Demo of Photoshop Demo of ImageReady 13
Demo of Fireworks Resources Web-Based Training Available at: https://wbt.psu.edu wbt.psu.edu/ Web editor comparison course available: CIW Site Design Part 3: Using FrontPage, Dreamweaver, and HomeSite. 14
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 frontpage/ Dreamweaver- http://www.macromedia.com/software/dreamweaver www.macromedia.com/software/dreamweaver/ Adobe GoLive- http://www.adobe.com/products/golive/main.html Codeless Tools Flash- http://www.macromedia.com www.macromedia.com/software/flash/ Contribute- http://www.macromedia.com www.macromedia.com/software/contribute/ ANGEL- http://cms.psu.edu Webmonkey Web Design 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/ 15
DevShed.com http://www.devshed.com/ Builder.com http://builder.com.com/ Questions? 16