1. Lesson 10:GUI HTML Editors

2. Lesson 10 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 • Compare HTML text editors with GUI editors • Preview and validate code for pages created with a GUI editor • Identify requirements for publishing a Web site 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 • KompoZer • Mozilla SeaMonkey Composer • 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 Expression Web

5. GUI HTML Editor Functionality • Features of GUI editors: • Templates and wizards • Text style options • Icon bars • Images • Hypertext links • HTML importing • Table creation • Spelling check • 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 • KompoZer

8. Text Editors vs. GUI HTML Editors • HTML text editors (e.g., Notepad, WordPad, Vi, Emacs) • 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 • Requires a higher degree of effort to create even a simple page

9. Text Editors vs. GUI HTML Editors (cont’d) • 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 <!DOCTYPE> 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 KompoZer

14. Lesson 10 Summary • 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 • Compare HTML text editors with GUI editors • Preview and validate code for pages created with a GUI editor • Identify requirements for publishing a Web site to a Web server