Site Development Foundations © 2004 ProsoftTraining All rights reserved

Lesson 10: GUI HTML Editors

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

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

Types of GUI Editors Page editors Page editors SimplerSimpler For smaller sites or non-collaborative workFor smaller sites or non-collaborative work Netscape/Mozilla Composer Netscape/Mozilla Composer Microsoft FrontPage Express Microsoft FrontPage Express Site management editors Site management editors Tools to manage pages and sitesTools to manage pages and sites Integrates with related applicationsIntegrates with related applications Designers and developers can collaborate to design, build and manage Web site and Internet applicationsDesigners and developers can collaborate to design, build and manage Web site and Internet applications Macromedia Dreamweaver Macromedia Dreamweaver Adobe GoLive Adobe GoLive Microsoft FrontPage Microsoft FrontPage

GUI HTML Editor Functionality Features of GUI editors: Features of GUI editors: Templates and wizardsTemplates and wizards Text style optionsText style options Icon barsIcon bars ImagesImages Hypertext linksHypertext links HTML importingHTML importing Spelling checkSpelling check Table creationTable creation PublishingPublishing

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

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

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

GUI HTML Editors GUI HTML editors GUI HTML editors Quick code creationQuick code creation Facilitate collaborationFacilitate collaboration Spelling checkerSpelling checker Automatic publishingAutomatic publishing Drawbacks: Drawbacks: Rarely keep pace with the evolution of HTML/XHTML standardsRarely keep pace with the evolution of HTML/XHTML standards Code you enter manually may be ignoredCode you enter manually may be ignored

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

Web Site Publishing GUI HTML editors usually provide a publishing feature GUI HTML editors usually provide a publishing feature FTP is the standard protocol for Web page publishing FTP is the standard protocol for Web page publishing Stand-alone FTP clientsStand-alone FTP clients FTP client provided by GUI HTML editorFTP 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 Before publishing pages to a public site, post them to a test server Often called a staging serverOften called a staging server Verify that pages work and render as expectedVerify that pages work and render as expected Verify that CGI script works as expectedVerify that CGI script works as expected Locate and repair dead linksLocate and repair dead links Allow stakeholders to preview the siteAllow stakeholders to preview the site Test server configuration Test server configuration Test server must be identical to production serverTest server must be identical to production server Use the same Web server software and CGI solutionUse the same Web server software and CGI solution

Web Site Publishing (cont’d) Example settings for publishing with Netscape Composer Example settings for publishing with Netscape Composer