CONTENTS

Chapter 1. What's New with Dreamweaver MX?

•  Improved Interface
•  Page Design
•  Site Design
•  DHTML and Multimedia
•  Code Editing
•  XML/XHTML Support
•  Dynamic Data
•  Summary

Dreamweaver MX represents a huge advance in the power and functionality of Dreamweaver. It combines fantastic new improvements to the user interface, a more robust code-editing environment, and the power of application servers and database-driven live data pages to make it a tremendous upgrade from the preceding version. This will even further solidify its place as the clear choice for web developers.

From the Tag Library Editor, which gives users complete control over the formatting of every tag to support for development languages such as ASP.NET, JSP, ColdFusion and XHTML, Dreamweaver MX gives web developers an easy-to-use yet powerful tool to create complex, dynamic web sites that are easy to maintain.

This chapter covers the many new features of Dreamweaver MX.

Note

Improved Interface

Many improvements have been made to the basic usability of the program. For Mac users, Dreamweaver MX now runs natively in OS X as well as OS 9.1. For Windows users, it offers native Windows XP support. For both platforms, the look and feel of the program is streamlined and improved.

Integrated Workspace

For Dreamweaver/Windows users, the new integrated workspace presents one large application window, with dockable panels, inspectors, and report windows (see Figure 1.1). (Don't worry—you can still choose the Classic Dreamweaver 4 workspace, if you prefer.)

Dockable Panel Groups

Panels have a new look and functionality. They are now stacked on the right or left of the window and will cascade as needed. This new look will keep the panels from covering up your Document window—no longer will you have to shuffle panels around just to see your page! As always, you can still group panels to your preference.

Customizable Insert Bar

The Objects panel, now called the Insert bar , has been moved to the top of the page a la ColdFusion Studio and HomeSite+. Still customizable from the Configuration folder, it will no longer clutter up your design space. It also has been expanded to include more common objects, more frameset options, and even editable regions for templates. And it's context-sensitive, showing different categories and objects depending on the kind of document you're working on, and whether you're in Code or Design view.

Customizable Toolbars

In addition to the familiar Document toolbar, a Standard toolbar offers quick icon-based access to basic file operations (Save, New, Open , and more). The toolbar functionality in Dreamweaver MX is also now extensible, which opens the door to third-party developers adding specialized toolbars for different purposes.

Answers Panel

A new concept in software connectivity, the Answers panel lets you connect directly to Macromedia online support resources. Get tips and tricks, tutorials, and the latest news from Macromedia, all without leaving Dreamweaver (see Figure 1.2).

And More…

And those are only the big changes. Lots of little changes make your working life easier, too. Functions and keyboard commands are now coordinated across all Macromedia programs. Right-click options have been increased. Copy HTML and paste HTML are back! And, for those of you who are extension-happy, the interface is more open to customizing and extending than ever.

Page Design

As a page design tool, Dreamweaver MX offers a lot of new features that will help you quickly build professional pages.

Improved Document Creation

The New Document dialog box now enables you to choose from a range of file types as you're creating your file, and also to see a small preview of all your template files (see Figure 1.3). Whatever file type you choose, the proper code framework will be put in place for you. You also can preview and choose from a selection of professionally designed stationery (prebuilt pages).

Snippets

Snippets are small pieces of code used frequently in your sites. Any piece of code that you use often can be saved as a snippet. After you've saved the snippet, whenever you need that code again, just go to the Snippets panel and insert it. Snippets are similar to library items in that they are reusable; unlike library items, they do not update automatically.

Dreamweaver MX comes with a hefty selection of prebuilt snippets for you to use. It includes things such as common header and footer elements and even a Close Window button to use with the Open Browser Window behavior! Basic navigation schemes and table settings can be dropped into your documents and customized to suit every situation.

Enhanced CSS Support

The new, improved CSS panel shows all CSS elements, including redefined tags and CSS selectors (see Figure 1.4). The panel includes a description of each style. All classes can be applied from a drop-down menu. The CSS Style Creator has been streamlined to make setting up borders and colors easier.

Design time styles have been introduced. This feature enables you to use and hide different styles during design time. These can be different styles from those used for the live site.

Accessibility Options

You can now set a preference that will prompt you to add accessibility parameters when you insert items such as images, tables, or forms. The UsableNet Accessibility Guide has been added to the Reference panel.

You also can make Dreamweaver itself more accessible by using large fonts for the panels and setting dialog boxes to automatically accept default values after a set time. Dreamweaver MX supports the JAWS and Window Eyes screen readers. You also can use operating system features such as high-contrast color schemes for developing. (In Code view, the code-coloring scheme is disabled; in Design view, coded colors used will match the look of the page in the browser.)

Site Design

Dreamweaver has always provided excellent site management tools, from file management to built-in FTP to sophisticated synchronization. Dreamweaver MX offers even more tools to help you keep your files organized, and your design team coordinated, on even the most extensive site projects.

Enhanced Template Functionality

Templates can do a lot more than they've ever done before. With template inheritance , you can define one template based on another. Nested templates allow you to embed one template inside another. In addition to editable regions, templates can now contain repeating regions, optional regions, and even editable tag attributes, allowing template users to edit the parameters of a tag while the tag itself remains locked.

Dreamweaver MX also gives you a series of prebuilt templates that you can use and customize.

Integrated Site Panel

You can now have the Site panel grouped with all your other panels! This makes it easier to see your list of site files while working in documents (see Figure 1.5). It also makes functions such as linking with Point-to-File very easy. If you don't want your Site panel integrated, you can choose to leave it as a separate window, as it was in Dreamweaver 4.

The Site files pane of the Site panel now includes a file explorer (see Figure 1.5) . In addition to showing all the files within your site, it lists the entire contents of your hard drive, in an expandable format similar to Windows Explorer or the Mac Finder's list view. With the file explorer, you can easily locate files anywhere on your computer, open them, and move them into your site folder—all without leaving Dreamweaver.

Site Definition Wizard

Setting up site definitions has always been confusing to many new users, and with the addition of dynamic features in Dreamweaver MX, the process of setting up a site is now more complex than ever. The new Site Definition Wizard will walk you through every step of setting up the site, from choosing your local root folder to setting up your FTP connection. It helps you set up your application server for live data pages and gives a clear explanation of the required information at every step. For more advanced users, the Site Definition dialog box offers an Advanced setting based on the familiar Dreamweaver 4 interface.

Cloaking

A new and welcome feature, cloaking allows you to specify certain folders or files types to not be considered during site operations such as putting , getting, and synchronizing. Cloaking is a real lifesaver, especially if you work with programs like Fireworks or Flash that create authoring files that don't need to be uploaded to the web server. Tell Dreamweaver to cloak all PNG and FLA files, and you can happily synchronize your site without worrying that those files will be uploaded (see Figure 1.6).

Site Definition Importing and Exporting

With site export , you can now export site definition information as an XML file. With site import , you can turn that XML file back into a site definition. Use site import/export to move site definitions from one computer to another, to share definitions between computers in a workgroup, or just to back up your definition in case disaster strikes your computer.

And More…

What else is there? Macromedia Sitespring tasks and files can be edited and completed with built-in Sitespring integration. SSH encryption has been added to the FTP functionality. An improved Reports interface makes creating site reports easier than ever. Site management has never been better.

DHTML and Multimedia

Dreamweaver MX increases your ability to use multimedia within your web sites. Improved integration with other Macromedia MX programs, new DHTML behaviors, and improved layer control all add up to a smoother workflow for rich media pages of all kinds.

Improved Flash MX Integration

If you're using Flash MX, you now have launch-and-edit capabilities between Dreamweaver and Flash. Select an embedded SWF file in a Dreamweaver document, click a button, and Flash MX launches, opening your original FLA file for editing. Make your changes, save and close, and Flash automatically generates a new SWF and sends you back to Dreamweaver.

If your embedded SWF file contains links, you can even update those links without ever leaving Dreamweaver. Changed links are logged in a Design Note, and passed to the FLA file the next time you launch-and-edit. Now you don't need to recompile the Flash files in your document every time you change a link.

Enhanced Fireworks Integration

The integration between Fireworks and Dreamweaver has been improved to make life a bit easier. Dreamweaver can differentiate between Fireworks 4 and Fireworks MX files.

With the new Image Placeholder feature in Dreamweaver, you can insert a placeholder image onto your page and resize it however you like. In the Property inspector, you will see a Create button with the Fireworks MX logo. Click this button and Fireworks MX will launch with a new document open with the image placeholder size ready to go. Create the image in Fireworks and click the Done button. Fireworks will prompt you to save the source PNG file and automatically create a GIF or JPEG (whatever is set in the Optimize panel) and insert it into your Dreamweaver page!

There also has been an enhancement with the pop-up menus that Fireworks creates. In previous versions, it would show up in Dreamweaver as Custom JavaScript in the Behaviors panel. Dreamweaver will now recognize it as a pop-up menu in the Behaviors panel. You will be able to edit it directly in Dreamweaver or use Roundtrip HTML to update the menu in Fireworks. Creating the menus in Fireworks will give you the option of using images in the background. You can then update these images and Dreamweaver will know to update the scripts correctly.

Pop-Up Menus

This great behavior, available in Macromedia Fireworks 4, is now built into Dreamweaver MX. You can now create pop-up menus, in all sizes, types, and colors, directly from the Behaviors panel (see Figure 1.7).

Code Editing

Dreamweaver MX has many new features that will be a boon to hand coding productivity. Many new coding features will make hand coding, coloring, and formatting easier than ever.

Tag Completion and Code Hints

For those developers who like to write code, but don't like to type, Dreamweaver MX now has several automatic code writing features. With tag completion , type the opening tag in a pair, and Dreamweaver automatically enters the closing tag for you. Type < table > and get an automatic </table> . With code hints , Dreamweaver helps you type by guessing what tag you're typing next, and providing easily navigable lists of attributes and values—as you type. It makes writing code that much easier, even if you're all thumbs!

Tag Chooser, Tag Editor, and Tag Library Editor

Several new commands and dialog boxes help you set up tag functionality (see Figure 1.8).

The Tag Chooser lets you examine every tag Dreamweaver understands, including its attributes and their supported values, and correct syntax.

Inserting a tag from the tag chooser opens the tag editor , enabling you to set general properties, browser-specific attributes, and style sheet information for that tag.

Finally, the tag library editor determines what information appears in the other tag editors. From here, you can set the code formatting and syntax coloring for every tag, specify default settings for all the standard attributes, and even add your own attributes and tags as HTML develops or your coding needs expand.

Tag Inspector

The new Tag Inspector panel is a great way to set attributes, and it offers two great tools for examining and editing code (see Figure 1.9). The top half of the panel presents a collapsible tree structure view of all the tags in the current document and their contents. Selecting a tag from the tree view displays a Tag Inspector in the bottom half of the panel, listing all the attributes for that tag and its values. From here, you can select and edit any of these attributes. Drop-down menus will list all the standard values for the attribute; Browse and Live Data buttons appear where appropriate, to help you set filenames and dynamic data sources as attribute values. It's a great way to have access to the attributes beyond the Property inspector! And it's a great learning tool for visually minded web designers who want to understand the logical structure of their HTML pages.

Printing Code

It's a minor feature to some; to others, it's a lifesaver. You can now print source code directly from Code view. No more having to print through the browser, or open your documents in a stand-alone text editor, just for the privilege of printing.

XML/XHTML Support

XML is becoming more popular, and a working knowledge of XML is now vital for large, dynamic web sites. Dreamweaver MX incorporates features that make sure your pages are compliant with XML and XHTML standards.

XML Validation

Dreamweaver can now validate your XML, going through the code to make sure you have set up your XML page correctly. The Results report will let you know about any invalid XML (see Figure 1.10).

XHTML Code Writing and Validation

As part of its XML support, Dreamweaver now gives you the ability to convert any HTML page into XHTML. The DocType declaration will be added; non-paired tags like <img> will be properly closed. The New Document dialog box also gives you the option of making all new files XHTML compliant.

Default File Type

You can now choose a default document type when you set up your site. This can be different for every site definition.

Dynamic Data

This is the quantum jump in Dreamweaver. Dreamweaver MX now contains all the database power of UltraDev and extends it with support for ASP.NET and PHP, in addition to ASP, JSP, and ColdFusion. For users new to dynamic web sites, the Site Wizard and other little interface touches help smooth the way to understanding a new technology. For power users migrating from UltraDev, there's plenty of new power here as well. Part V of this book is all about this new facet to Dreamweaver. (If you're brand new to dynamic data, start by reading Chapter 26, "Introduction to Dynamic Dreamweaver.")

Note

Improved ColdFusion and JSP Support

There has been a big increase in the ColdFusion support in Dreamweaver MX. Not only have some of the interface features of ColdFusion Studio been incorporated, but you also can now automatically insert ColdFusion basic, flow, and advanced objects.

For JSP users, Dreamweaver MX offers full JavaBean introspection and improved JSP Tag Library support.

New ASP.NET and PHP Support

Dreamweaver MX provides support for the new Microsoft .NET initiative with support for ASP.NET documents and sites, including custom tag support, rendering of web forms, and DataGrid and DataList objects (see Figure 1.11).

Figure 1.11. Working on an ASP.NET document in Dreamweaver MX.

Dreamweaver MX also provides support for the open source PHP language. With PHP you can make dynamic sites that use simple, easy-to-understand code; and it has the added benefit of being free! Used with a MySQL database (also free), PHP can get you up and running with a database-driven web site in no time at all.

New Dynamic Objects

The Insert bar now includes an Application objects category, as well as context-specific categories for JSP, ColdFusion, and other supported languages (see Figure 1.12). New dynamic form objects simplify the creation of database-driven pop-up menus and other form elements.

Figure 1.12. The Insert bar showing objects available for working on ColdFusion documents.

Integrated Database Explorer

Much like the Site panel's integrated file explorer, the Databases panel allows you to browse all connected databases from within the Dreamweaver interface. Tables, views, and schemas are all available in a handy expandable tree view.

Multi-Language Reference Panels

To help you work with the coding side of dynamic data, the Reference panel now includes ASP and JSP reference sections, both based on the popular Wrox programming books.

Summary

As you can see, Dreamweaver MX represents a huge leap in the functionality of Dreamweaver. From stem to stern , the program has been beefed up, tightened up, polished up, and fully integrated into Macromedia's line of MX version software. This chapter has covered the highlights—but there's plenty more, tucked into every corner of the program. Whether you're a graphic designer focusing on page layout; a team coordinator trying to maximize workflow efficiency; a code junkie looking for the best way to manage all your HTML, JS, and CSS; or a web applications developer who needs to harness the power of dynamic data and server-side scripting; Dreamweaver MX has what you need.

CONTENTS