Text-Oriented Editors
Text-oriented editors have been around since the dawn of the cathode-ray tube (CRT, the technology used in most computer display screens). However, today’s editors can be quite powerful and feature-rich, doing much more than simply allowing you to create text documents. This section covers the latest in text-oriented editing.
Simple text editors
Simple text editors—such as Windows Notepad or vi on UNIX/Linux—provide an invaluable service. They allow you, without intervening features, to easily edit text-based documents. As such, they are a logical addition to your Web development toolkit.
However, although you could create an entire site with one of these simple tools, there are better tools for actual creation.
Smart text editors
Smart text editors are editors that understand what you are editing and attempt to help in various ways. For example, Linux users should look into vim or Emacs and enable syntax highlighting when editing documents with embedded code (HTML, CSS, JavaScript, and so on). The Figure shows an example of a large PHP file in vim.
Although it may be hard to tell in the black and white Figure, various elements have been colorized to show where they begin or end. Using methods like this the editor keeps you abreast of what elements have been opened and which have been closed. For example, the editor may highlight quoted text in green. If most of the document turns green, it is likely that you forgot to close a quote somewhere. These editors also offer features such as auto-indenting, which can help you keep your documents
structured.
Windows users have a few choices for smart editors, as well. My favorite is Textpad, which uses document class templates to understand the syntax of almost any coded document. TextPad is loaded with standard editor features. You can find TextPad on the Internet at www.textpad.com.
HTML-specific editors
There are a few non-WYSIWYG editors that understand HTML and provide specific features to help you code. However, Homesite (now owned by Macromedia) has always stood out from the crowd.
Homesite provides the next level of functionality for HTML editing with special tools for entering tags and their parameters, codes for entities, and more. Figure below shows the Homesite main interface, and Figure 34-3 shows a step in the wizard for creating a <table> tag.
Homesite includes a host of other features designed to make your coding easier. Visit Macromedia’s Web site for more information (www.macromedia.com/software /homesite/).
Homesite includes wizards for building more complex tags such as tables.
WYSIWYG HTML Editors
Just as what you see is what you get (WYSIWYG) editors revolutionized word processing, WYSIWYG HTML editors have revolutionized Web publishing. Using such tools designers can design their pages visually and let the tools create the underlying HTML code. This section highlights the three most popular visual tools available for WYSIWYG editing.
Microsoft FrontPage
FrontPage is Microsoft’s Web editing tool. Although most of the Microsoft Office suite of programs can output HTML, FrontPage allows you to manage documents at the site level—creating a template design, navigation controls between pages, and more. Figure below shows the main interface of FrontPage, and Figure below it shows the Web (site) view.
Earlier versions of FrontPage were known for creating non-standard HTML and catering to Microsoft Web extensions. Current versions are much better about adhering to standard code, though the program is still more feature-rich when used with other Microsoft technologies. Still, FrontPage makes a solid, economical choice for a WYSIWYG editor.
Note FrontPage is much more powerful when teamed with a Web server running Microsoft’s FrontPage extensions. If you use FrontPage, it is worth your time investigating running the extensions on your Web server.
Microsoft FrontPage is a visual editor for Web documents.
FrontPage enables you to edit related documents as a site.
You can learn more about FrontPage and download an evaluation copy from Microsoft’s FrontPage site, at www.microsoft.com/office/frontpage/ prodinfo/default.mspx.
NetObjects Fusion
NetObjects Fusion is another site-level design tool that offers WYSIWYG editing. The advantages of using NetObjects Fusion include easy management of entire sites, pixel-accurate designs, and a plethora of features that make publishing on the Web a breeze. Such features include the following:
✦ Advanced scripting support
✦ Automatic e-commerce catalog building
✦ Enhanced photo gallery support
✦ Hooks for including external pages and code
✦ Incremental publishing capability
✦ Flexible meta tag management
✦ Powerful, full-site management tools
Note NetObjects Fusion should not be confused with Macromedia’s ColdFusion product. The former is owned by Website Pros and is a WYSIWYG Web editor. The latter is owned by Macromedia and is a database integration tool for the Web.
Besides the visual tools, NetObjects Fusion provides many ways to customize the
actual code behind the documents, as well. You can learn more about NetObjects
Fusion on the Web at www.netobjects.com.
Macromedia Dreamweaver
The king of all Web document editing programs is currently Macromedia Dreamweaver. Combining the best visual and nonvisual editing tools with several development features, Dreamweaver is the most feature-rich program covered here. Dreamweaver provides as much or as little automation during creation of new documents as you would like. You can create the entire site in text mode, editing HTML code directly. Alternatively, you can use the WYSIWYG design editor to create your documents visually.
Other Tools
Tools to create HTML are only half of the equation when creating online documents. You must also have tools available to do graphic editing and supply any multimedia content you use. This section covers a handful of additional tools necessary to create rich, online content.
Graphic editors
Year’s ago text-only Web pages were the norm. However, today’s Web is a visual feast,
and your documents must incorporate as much imagery as possible to get noticed.
Almost every operating system comes with at least one graphic editor. However, the capabilities of the included editors are quite limited and should not be relied upon for much—the same goes for graphics programs bundled with many scanners, printers, and other graphics peripherals.
In a perfect world you should consider using both a vector-based and a raster-based editing program. Vector-based editors use shapes and lines to create images, while raster-based editors use individual dots (pixels) to create images. Vector-based images are traditionally more exact and clear, but raster-based images allow for more visually striking effects. The best results can be obtained using both—use the vector tools to create solid imagery and raster tools for special effects and finishing work.
Note Only raster-based images (specifically JPEG, GIF, and PNG images) are supported by common user agents.
Vector-based editing tools include the following:
✦ Adobe Illustrator (www.adobe.com/products/illustrator/main.html)
✦ Macromedia Freehand (www.macromedia.com/software/freehand/)
Raster-based editing tools include the following:
✦ Paint Shop Pro (www.jasc.com/products/paintshoppro)
✦ Adobe Photoshop (www.adobe.com/products/photoshop/main.html)
✦ Macromedia Fireworks (www.macromedia.com/software/fireworks/)
✦ The GIMP (www.gimp.org/)
Note Paint Shop Pro actually supports both raster and vector editing.
Note that these tools can be quite expensive—the latest version of Photoshop is several hundred dollars. Of course, Photoshop is without equal for raster editing; no other tool provides as much power and extensibility. Paint Shop Pro is quite capable at a hundred dollars, and The GIMP provides suitable editing without a price tag (it’s Open Source).
Fledgling Web designers needing a handful of tools should look into Macromedia’s Studio product line. The Studio series provides Dreamweaver, Flash, Freehand, and Fireworks in one comprehensive package. Learn more at: www.macromedia.com/software/studio/.
Macromedia Flash
Macromedia Flash is the latest staple for simple multimedia on the Web. Flash provides an animation platform with plenty of power via ActionScript, a flexible scripting language, and can be used for simple buttons or full-blown product demos. Although the interface is a bit idiosyncratic, Flash is an indispensable tool for online animation.The main draw of Flash is two-fold:
✦ It has become a standard on the Web that users expect.
✦ Flash can provide even complex animations in a small package (small file size).
As such, Flash is another tool you should consider adding to your collection. You can learn more about Flash at www.macromedia.com/software/flash/.
Summary
This article introduced several essential and powerful tools you can use to make online document creation and deployment a breeze. You saw how text editor features can help with the tedium of coding and how full-blown Web design packages can ease the creation of even large sites. Although acquiring the right tools may seem costly, consider the time you will save by using them.
