Easy Coding With Dreamweaver CS3

Most Web pages are created in HyperText Markup Language (HTML). This programming language—really a series of tags that modify a text file—is standardized by an organization known as the World Wide Web Consortium, or W3C.

Each new release of HTML incorporates an enhanced set of commands and features. All browsers in use today recognize the current version, HTML 4. Dreamweaver writes clear, easy-to-follow, real-world, browser-compatible HTML version 4.01 code whenever you insert or modify an element in the visual editor.

If you’re working in Extensible HyperText Markup Language (XHTML), Dreamweaver has you covered as well, with a number of tools. When coding from the ground up, you can set any page type—static or dynamic—to be XHTML-compliant. In fact, the default page type is today’s recognized standard, XHTML 1.0 Transitional.

If you need to bring legacy pages into compliance, Dreamweaver converts an existing page from HTML to XHTML with one operation. Additionally, Dreamweaver includes complete Unicode support. Unicode is an encoding standard that enables Web browsers to display characters from almost any language worldwide. Dreamweaver displays Unicode properly at design time and runtime.

Cutting-edge CSS Support

Browser support for Cascading Style Sheets (CSS) is now solid across the board, and Dreamweaver has greatly enhanced its own support in response. In addition to enhanced rendering in the Design view for advanced CSS effects such as backgrounds and positioning, Dreamweaver has made it far simpler to apply CSS from the ground up.

In Dreamweaver, editing a CSS style is just as easy as applying one. The CSS Styles panel displays all the current styles—both internal and external—with detailed characteristics.

Double-click any style to modify it. Moreover, defined CSS rules can easily be moved within the style sheet or to another one with a simple drag-and-drop action. CSS has become the standard approach to Web design, and it pervades every aspect of Dreamweaver.

CSS styles can be applied—and created—right from the Property inspector. Dreamweaver properly renders the more advanced CSS properties, such as float and fixed background, so that designers can truly concentrate on the look of a site rather than hassling with code hacks.

Addressing Accessibility

Accessibility is an issue of great concern to many Web developers. Increasingly, many designers labor under a mandate to produce accessible sites, especially in consideration of Section 508 of the Federal Rehabilitation Act.

To help designers create accessible pages, Dreamweaver optionally displays additional attributes for key Web page objects such as tables, forms, images, media, and frames. These attributes— like summary for the

tag—are always available through the Tag inspector when enabled through Dreamweaver’s Preferences.

In addition, Dreamweaver is accessible as a tool itself. A number of screen readers, including JAWS for Windows and Window Eyes, are supported. Furthermore, the entire Dreamweaver interface can be navigated without using the mouse.

Text and Graphics Support

Text is a basic building block of any Web page, and Dreamweaver makes formatting your text a snap. After you’ve inserted your text, either by typing it directly or pasting it from another program, you can change its appearance. You can use the generic HTML formats, such as the H1 through H6 headings and their relative sizes, or you can use font families and exact point sizes.

Additional text support in Dreamweaver enables you to add both numbered and bulleted lists to your Web page. The Text Property inspector provides buttons for both kinds of lists as well as easy alignment control.

Some elements, including lists, offer extended options. In Dreamweaver, clicking the Property inspector’s Expander arrow opens a section from which you can access additional controls. Graphics are handled in much the same easy-to-use manner.

Select the image or its placeholder to enable the Image Property inspector. From there, you can modify any available attributes, including the image’s source, its width or height, and its alignment on the page. Many simple graphic functions—such as cropping and rescaling—can be handled right from within Dreamweaver. Need to touch up your image more precisely? Send it to your favorite graphics program with just a click of the Edit button.

Enhanced Table Capabilities

Other features—standard, yet more advanced—are similarly straightforward in Dreamweaver. Tables remain a key component in today’s Web pages, and Dreamweaver gives you full control over all their functionality. It changes the work of resizing the column or row of a table, previously a dreary hand-coding task, into an easy click-and-drag motion.

Likewise, you can delete all the width and height values from a table with the click of a button. The Table Property inspector centralizes many of these options in Dreamweaver. The nitty-gritty of table editing is often tedious and tricky: Grabbing just the right selection in a tightly formatted table row is meticulous work.

Dreamweaver’s Expanded mode takes the guesswork out of precise selection by visually exploding the table at design time to make all the elements far more accessible.

You can switch between Standard and Expanded modes at the click of the mouse.

Tables are flexible in Dreamweaver. Font changes can be applied to any number of selected cells, rows, or columns. Tabular data, maintained in a spreadsheet such as Microsoft Excel or output from a database like Microsoft Access, is easily imported. A standard command enables you to automatically sort your table data as well.

Easy Form Entry

Forms, the basic vehicle for Web page data exchange, are just as easy to implement as tables in Dreamweaver. Switch to the Forms category of the Insert bar and insert any of the available elements: text boxes, radio buttons, checkboxes, and even drop-down or scrolling lists.

With the Spry form validation widgets, you can easily specify any field as a required field and check to ensure that the requested type of information has been entered—and tell the user how to fix the problem—all with a single object.

Click-and-drag Frame Setup

Frames, which enable separate Web pages to be viewed on a single screen, are often considered one of the most difficult HTML techniques to master. Dreamweaver employs a click-and-drag method for establishing your frame outlines. After you’ve set up your frame structure, open the Frames panel to select any frame and modify it with the Property inspector.

Dreamweaver writes the necessary code for linking all the HTML files in a frameset, no matter how many Web pages are used. Dreamweaver keeps frame creation simple with the Frames menu on the Insert bar’s Layout category.

Multimedia Enhancements

Dreamweaver enables you to drop in any number of multimedia extensions, plugins, applets, or controls. Just click the appropriate button on the Insert bar and modify with the Property inspector. Two multimedia elements, Shockwave movies and Flash files—both from Adobe—warrant special consideration in Adobe’s Dreamweaver.

When you insert either of these objects, Dreamweaver automatically includes the necessary HTML code to ensure the widest browser acceptance, and you can edit all the respective properties. Dreamweaver automatically applies code to avoid issues with Internet Explorer’s active content restrictions and even lets you upgrade older pages in one step.

Dreamweaver fully supports a wide range of multimedia output through custom objects that enable complex images, audio, and presentations to be easily inserted and displayed in Web pages.