Chapter 1. What's New with Dreamweaver MX?
Chapter 2. Setting Up the Dreamweaver Workspace
Chapter 3. Creating and Working with Documents
Chapter 4. Working with Text
Chapter 5. Working with Images
Chapter 6. Links and Navigation
Chapter 7. Utilizing Head Content
Dreamweaver MX represents a huge advance in the power and functionality of Dreamweaver. It combines fantastic new improvements to the
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.
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
For Dreamweaver/Windows users, the new integrated workspace
Panels have a new look and functionality. They are now
The Objects panel, now called the
, has been moved to the top of the page a la ColdFusion Studio and HomeSite+. Still customizable from the
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
In addition to the familiar Document toolbar, a
offers quick icon-based access to basic file operations (Save, New,
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 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.
As a page design tool, Dreamweaver MX offers a lot of new features that will help you quickly build professional pages.
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 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.
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.
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
Dreamweaver has always provided
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.
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
(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
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.
A new and welcome feature,
allows you to specify certain folders or files types to
, you can now export site definition information as an XML file. With
, you can
What else is there? Macromedia Sitespring
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
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
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).
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.
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!
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 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
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 is becoming more popular, and a working knowledge of XML is now
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).
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.
You can now choose a default document type when you set up your site. This can be different for every site definition.
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.")
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.
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).
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.
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.
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.
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.
As you can see, Dreamweaver MX represents a huge leap in the functionality of Dreamweaver. From stem to