Transcript Document

Lesson 10:
GUI HTML Editors
© 2007 Prosoft Learning Corporation
All rights reserved
ITD 110 Web Page Design
Copyright © 2004 ProsoftTraining, All Rights Reserved.
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
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
• 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
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
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
• SeaMonkey Composer
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
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
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 SeaMonkey
Composer
Lesson 10 Summary
• Lesson 10 GUI HTML Editors
• See Skills Review