1. Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 10: GUI HTML Editors © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design

2. Objectives Identify types of GUI editors that automatically create HTML and XHTML code Identify specific features of GUI editors Create a Web page using a GUI editor Identify requirements for publishing a Web site publishing to a Web server

3. Introduction to GUI HTML Editors Graphical user interface (GUI) HTML editor Automatically generates HTML (or XHTML) code Developer inputs content as in a standard word processor Also known as WYSIWYG (What You See Is What You Get) editors

4. Types of GUI Editors Page editors –Simpler –For smaller sites or non-collaborative work SeaMonkey Composer Microsoft FrontPage Express Site management editors –Tools to manage pages and sites –Integrates with related applications –Designers and developers can collaborate to design, build and manage Web site and Internet applications Adobe Dreamweaver Adobe GoLive Microsoft FrontPage

5. GUI HTML Editor Functionality Features of GUI editors: –Templates and wizards –Text style options –Icon bars –Images –Hypertext links –HTML importing –Spelling check –Table creation –Publishing

6. W3C Authoring Tool Accessibility Guidelines The guidelines mandate: –The ability of the GUI editor to generate proper code –The usability of the GUI editor by a disabled person creating a Web page Seven specific points

7. Creating Web Pages with a GUI Editor Coursebook labs use the toolbar, menus and functions of a GUI Web page editor SeaMonkey Composer

8. HTML Text Editors vs. GUI Editors HTML text editors (e.g., Notepad, Vi, Pico) –Easily include other code (e.g., JavaScript) –Readily modify code –Apply your HTML/XHTML knowledge and skills Drawbacks: –Typing code is time-consuming –People with disabilities may find manual entry difficult or impossible –Require a higher degree of effort to create even a simple page

9. GUI HTML Editors GUI HTML editors –Quick code creation –Facilitate collaboration –Spelling checker –Automatic publishing Drawbacks: –Rarely keep pace with the evolution of HTML/XHTML standards –Code you enter manually may be ignored

10. Previewing Pages and Validating Code Most GUI editors make it easy to: –Preview pages in a browser –View source code –Validate code Validating HTML code –Specify the correct before validating; the GUI HTML editor may not do this –Many tools provide useful validation tools –Some editors provide tools for disabled users

11. Web Site Publishing GUI HTML editors usually provide a publishing feature FTP is the standard protocol for Web page publishing –Stand-alone FTP clients –FTP client provided by GUI HTML editor

12. Publishing to a Test Web Server Before publishing pages to a public site, post them to a test server –Often called a staging server –Verify that pages work and render as expected –Verify that CGI script works as expected –Locate and repair dead links –Allow stakeholders to preview the site Test server configuration –Test server must be identical to production server –Use the same Web server software and CGI solution

13. Web Site Publishing (cont’d) Example settings for publishing with SeaMonkey Composer

14. Lesson 10 Summary Lesson 10 GUI HTML Editors See Skills Review