Download Lesson 10: GUI HTML Editors

Lesson 10:
GUI HTML Editors
Copyright © 2004 ProsoftTraining, All Rights Reserved.
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
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
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
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
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
Creating Web Pages
with a GUI Editor
• Coursebook labs use the toolbar, menus
and functions of a GUI Web page editor
• KompoZer
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
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
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
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
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
Web Site Publishing (cont'd)
• Example settings for publishing with
KompoZer
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