1 / 14

Lesson 10: GUI HTML Editors

Lesson 10: GUI HTML Editors. 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

valiant
Download Presentation

Lesson 10: GUI HTML Editors

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related