Sherawat Web Solution Dreamweaver MX HELP

2007-11-16T06:44:00.000-08:00

Dreamweaver MX, by Macromedia, is a professional Web site development program for creating static pages and dynamic

Web applications. Among its many distinctions, Dreamweaver was the first Web authoring tool capable of addressing multiple server models, making it equally easy for developers of ASP, ColdFusion, or JavaServer Pages to use. In its latest incarnation, Dreamweaver MX has re-invented itself with a new user interface and a broader focus; in addition to creating straight HTML pages, Dreamweaver is also suitable for coding a wide range of Web formats including JavaScript,XML, and ActionScript to name a few.
Dreamweaver is truly a tool designed by Web developers for Webdevelopers. Designed from the ground up to work the way professional
Web designers do, Dreamweaver speeds site construction and streamlines site maintenance. This chapter describes the philosophical
underpinnings of the program and provides a sense of how Dreamweaver blends traditional HTML and other Web languages with
cutting-edge server-side techniques. You also learn some of theadvanced features that Dreamweaver offers to help you manage a Web site.

The Dynamic World of Dreamweaver

Dreamweaver is a program very much rooted in the real world. Web applications are developed for a variety of different server models, and Dreamweaver writes code for the most pervasive ones. The real world is also a changing world, and Dreamweaver’s extensible architecture opens the door for custom or third-party server models as well. Moreover, Dreamweaver recognizes the real-world problem of incompatible browser commands and addresses the problem by producing code that is compatible across browsers. Dreamweaver includes browser-specific HTML validation so you can see how your existing or new code works in a particular browser.
Dreamweaver MX extends the real-world concept to the workplace. Features such as the Assets panel streamline the production and
maintenance process on large Web sites. The advanced Design view makes it possible to quickly structure whole pages during the production stage, while maintaining backward compatibility with

C H A P T E R
✦ ✦ ✦ ✦
In This Chapter
Understanding the
Dreamweaver
philosophy
How Dreamweaver is
designed
Connecting to data in
Dreamweaver
Accessing nextgeneration
features
Automating Web
application production
Maintaining your Web
site with Dreamweaver
✦ ✦ ✦ ✦

4 Part I ✦ Dreamweaver MX Basics

browsers when the pages are published. Dreamweaver’s Commands capability enables Web designers to automate their most difficult Web creations, and its Server Behavior Builder permits often-used custom code to be easily inserted.
Connecting to the world’s data
Connectivity is more than a buzzword in Dreamweaver; it’s an underlying concept. Dreamweaver makes it possible to connect to any data source supported by the most widely used application servers: ASP, ASP.NET, ColdFusion, PHP, and JSP. Moreover, the actual connection type is quite flexible; developers may opt for a connection that is easier to implement but less robust or one
that requires slightly more server-side savvy and offers greater scalability. Dreamweaver even offers a choice of languages for a number of applications servers, as shown in Figure 1-1. Figure 1-1: Get a jump start on building your Web pages by choosing a page—and the corresponding tags—from Dreamweaver’s extensive collection. Dreamweaver accesses standard recordsets—a subset of a database—as well as more sophisticated data sources, such as session or application variables and stored procedures. Through their implementation of cookies and server-side code, Web applications designed in Dreamweaver may track visitors or deny them entrance.
You’ll also find support in Dreamweaver for high-end technologies such as Web services, JavaBeans, and ColdFusion components. Dreamweaver allows you to introspect elements of all technologies, enabling coders to quick grasp the syntax, methods, and functions required.

Chapter 1 ✦ Introducing Dreamweaver MX 5
True data representation
One truly innovative feature of Dreamweaver integrates the actual data requested with the Web page—while still in the design phase. Dreamweaver’s Live Data view sends the page-inprocess to the application server to depict records from the data source within the page, as shown in Figure 1-2. All elements on the page remain editable in Live Data view; you can even alter the dynamic data’s formatting and see those changes instantly applied. Live Data view shortens the work cycle by showing the designer exactly what the user will see. In addition, the page may be viewed under different conditions through the Live Data Settings feature.
Figure 1-2: When in Live Data view, you can edit the Web page to accommodate the
actual data used, as highlighted here.
Integrated visual and text editors
In the early days of the World Wide Web, most developers “hand-coded” their Web pages using simple text editors such as Notepad and SimpleText. The second generation of Web authoring tools brought visual design or WYSIWYG (“what you see is what you get”) editors to market. What these products furnished in ease of layout, they lacked in completeness of code. Professional Web developers found they still needed to hand-code their Web pages, even with the most sophisticated WYSIWYG editor.
Dreamweaver acknowledges this reality and has integrated a superb visual editor with its browser-like Document view. You can work graphically in Design view, or programmatically in Code view. You even have the option of a split-screen view, which shows Design view and

6 Part I ✦ Dreamweaver MX Basics
Code view simultaneously. Figure 1-3 shows Dreamweaver’s visual editor and code editor working together. Any change made in the Design view is reflected in the Code view and vice versa. If you prefer to work with a code editor you’re more familiar with, Dreamweaver enables you to work with any text editor. Moreover, the program includes two of the best: a
full-version of HomeSite for Microsoft Windows developers and a trial version of BBEdit for Macintosh developers. Dreamweaver enables a natural, dynamic flow between the visual and code editors.
Figure 1-3: Dreamweaver enables you to work with a visual WYSIWYG editor and a
code editor simultaneously.
Dreamweaver further tightens the integration between the visual design and the underlying code with the Quick Tag Editor. Web designers frequently need to adjust the HTML code minutely—changing an attribute here or adding a single tag there. The Quick Tag Editor, which appears as a small pop-up window in the Design view, makes these code tweaks quick and easy.
World-class code editing
Coding is integrally tied to Web page development, and Dreamweaver’s coding environment is second-to-none. If you’re hand-coding, you’ll appreciate the code completion feature and Code Hints (shown in Figure 1-4). Not only do these features speed development of HTML pages, but Dreamweaver’s underlying Tag Libraries extend their use to the full range of other code formats such as JavaScript, ActionScript, and XML.
Chapter 1 ✦ Introducing Dreamweaver MX 7
Figure 1-4: Code Hints speed hand-coding by displaying all the attributes available for a specific tag.
Dreamweaver’s Code view is easy on the eyes as well with syntax coloring that can be turned off and on at will. To get around the page quickly, use either the standard line numbering facility or the advanced Code Navigation feature; Code Navigation lists all the functions found on a page and instantly jumps to that code when a function is selected.
Veterans and novices alike will find Dreamweaver’s Tag Chooser and Tag Inspector indispensable.
As the name implies, the Tag Chooser allows the coder to select the desired tag
from a full list of tags in the various Web markup languages including HTML, CFML, PHP, ASP,
ASP.NET, and more. The Tag Inspector displays a detailed tree of all the tags on your page, as
well as an editable list of any selected tag’s attributes for quick modification.
Code is far more than just a series of individual tags, of course. Dreamweaver’s Snippets
panel stores the most commonly used sections of code just a drag-and-drop away.
Dreamweaver comes with hundreds of snippets ready to use—and gives you the ability to
add your own at any time.
Roundtrip HTML
Most Web authoring programs modify any code that passes through their system—inserting returns, removing indents, adding tags, uppercasing commands, and so forth. Dreamweaver’s programmers understand and respect the fact that all Web developers have
New
Feature
Code Hints pop-up

8 Part I ✦ Dreamweaver MX Basics
their own particular coding styles. An underlying concept, Roundtrip HTML, ensures that you can move back and forth between the visual editor and any HTML text editor without your code being rewritten.
Web site maintenance tools
Dreamweaver’s creators also understand that creating a site is only a part of the Webmaster’s job. Maintaining the Web site can be an ongoing, time-consuming chore. Dreamweaver simplifies the job with a group of site management tools, including a library of repeating elements and a file-locking capability for easy team updates. In Dreamweaver, Web site maintenance is easier than ever—and very visual. Take note of the Site Map feature that enables you to view your Web site structure at a glance and to access
any file for modification. Links are updated automatically or, if a file moves from one directory to another, are under user control. Moreover, not only can you access a library of repeating elements to be inserted in the page, you can also define templates to control the entire look and feel of a Web site—and modify a single template to update all the pages sitewide.
Team-oriented site building
Until now, individual Web developers have been stymied when attempting to integrate Dreamweaver into a team development environment. File-locking was all too easily subverted, enabling revisions to be inadvertently overwritten; site reports were limited in scope and only output to HTML; and, most notable of all, version control was nonexistent. Dreamweaver MX
addresses all these concerns while laying a foundation for future connectivity. Dreamweaver MX supports two industry-standard source control systems: Visual SourceSafe (VSS) and WebDAV. Connecting to a Visual SourceSafe server is well integrated into
Dreamweaver; simply define the VSS server as your remote site and add the necessary connection information. WebDAV, although perhaps less well known than VSS, offers an equally powerful and more available content-management solution. More important, Macromedia has developed the source-control solution as a system architecture, enabling other third-party
content management or version control developers to use Dreamweaver as their front end. ColdFusion developers have long enjoyed the benefits of RDS, short for Remote Development Services, and now, RDS connectivity has been added to Dreamweaver. Through RDS, teams of developers can work on the same site stored on a remote server.
Extensible architecture also underlies Dreamweaver’s site reporting facility. Dreamweaver ships with the capability to generate reports on usability issues such as missing Alt text or workflow concerns such as showing who has what files checked out. However, users can also develop custom reports on a project-by-project basis.
The Dreamweaver Interface
When creating a Web page, Webmasters do two things repeatedly: They insert an element— whether text, image, or layer—and then they modify it. Dreamweaver excels at such Web page creation. The Dreamweaver workspace combines a series of windows, panels, and inspectors to make the process as fluid as possible, thereby speeding up the Webmaster’s work.
New
Feature

Chapter 1 ✦ Introducing Dreamweaver MX 9
Choice of environments
For the first time, Dreamweaver MX offers developers a choice of design environments. The classic floating panel interface is available for both Windows and Macintosh users, and Windows users have the option of selecting an integrated workspace.
The new integrated workspace, available for Windows users, utilizes a Multiple Document Interface (MDI) that keeps all the open documents and panels together in one application window. There are two flavors of the MDI workspace: the default with panels grouped on the right and HomeSite style, with panels on the left. As shown in Figure 1-5, you switch from
one workspace to another in Preferences. Figure 1-5: Windows users get a choice of design
environments in Dreamweaver MX.
When using the Dreamweaver MX workspace, it is highly recommended that your monitor
resolution be set for 1024x768 or higher. Lower resolutions, I find, do not offer sufficient
space for the Document window.
Easy text entry
Although much of the World Wide Web’s glitz comes from multimedia elements such as
images and sound, Web pages are primarily a text-based medium. Dreamweaver recognizes
this and makes the text cursor the default tool. To add text, just click in Dreamweaver’s main
workspace—the Document window—and start typing. As shown in Figure 1-6, the Text
Property inspector even enables you to change characteristics of the text, such as the size,
font, position, or color by assigning a Cascading Style Sheet (CSS) style; you can also use
regular HTML tags if you prefer.
Drag-and-drop data fields
It’s one thing to make a connection to a data source; it’s quite another to actually insert the
dynamic data in the proper place on the Web page. Dreamweaver makes drag-and-drop easy
with the Bindings panel. All the available data sources for a page are displayed in an expandable
tree outline in the Bindings panel, as shown in Figure 1-7. An instance of any dynamic
field displayed in the panel may be inserted on the page by either dropping it into place or by
using the Insert button.
Note
New
Feature

10 Part I ✦ Dreamweaver MX Basics
Figure 1-6: Use the Text Property inspector to change the format of the selected
text with CSS or straight HTML tags.
Figure 1-7: Drag any field from the Bindings panel onto a selected placeholder
phrase to quickly turn a static page into a dynamic one.
Chapter 1 ✦ Introducing Dreamweaver MX 11
One-stop object modification
You can select Web page elements other than text from the Insert bar. Adding a picture to a
Web page is as easy as clicking the Image icon from the Insert bar. Dreamweaver asks you to
select the file for the image, and your image appears in your current cursor position. After
your graphic is onscreen, selecting it brings up the appropriate Property inspector to enable
you to make modifications. The same technique holds true for any other inserted element—
from horizontal rules to Shockwave movies.
Accessing and managing resources
One standout addition to Dreamweaver’s interface is the Assets panel, shown in Figure 1-8.
The Assets panel gathers all the various elements used in an individual site: images, background
and text colors, external URLs, included scripts, Flash movies, Shockwave content, and
QuickTime media, as well as Dreamweaver templates and library items. Sizeable thumbnails of
graphics and media are displayed in the preview pane of the Assets panel—you can even play
Flash, Shockwave, and QuickTime elements in preview before dragging them onto the page.
Moreover, often-used resources can be listed in a Favorites category, distinguishing them from
the rest of the assets found in the site.
Figure 1-8: You can preview a Flash movie with the Assets panel before placing it on the
Dreamweaver page.

12 Part I ✦ Dreamweaver MX Basics
Complete custom environment
Dreamweaver enables you to customize your workspace to suit yourself. A handy Launcher
opens and closes various windows, panels, and inspectors, all of which are movable. Just
drag them wherever you want them onscreen. Want to see your page by itself? You can hide
all windows at the touch of a function button; press it again, and your controls are revealed.
Dreamweaver’s customization capabilities extend even further. If you find that you are repeatedly
inserting something, such as a QuickTime video or WAV sound file, you can add that
element to your Insert bar. Dreamweaver even enables you to add a specific element—a
Home button, for example—to the Insert bar. In fact, you can add entire categories of
objects if you like. Moreover, Dreamweaver MX exposes the entire menu structure for
customization—you can not only change keyboard shortcuts, but also add custom menus.
For more information about customizing your Insert bar, see Chapter 34.
Managing keyboard shortcuts
Keyboard shortcuts are great in theory: Just press a key combination to activate an essential
feature. Unfortunately, in reality, there are too many essential features, too few single-purpose
keys on the keyboard, and (most important), too few brain cells to retain all the widely varied
keyboard combinations from all the programs the working designer must master.
Macromedia has taken steps to ease keyboard-shortcut overload across its entire product
line, and Dreamweaver’s no exception. Dreamweaver now offers a Keyboard Shortcut Editor
that enables you to both standardize and customize the key combinations used in the program.
Choose from a Macromedia standard set—common to Dreamweaver, Dreamweaver,
Fireworks, and Flash—or use a set taken from Dreamweaver 3. You can even select a set from
an entirely different program such as HomeSite or BBEdit. Best of all, any keyboard shortcut
can be personalized to represent a combination that’s easy for you to remember.
Simple selection process
As with most modern layout programs, in order to modify anything in Dreamweaver, you
must select it first. The usual process for this is to click an object to highlight it or to click
and drag over a block of text to select it. Dreamweaver adds another selection option with
the Tag Selector feature. Click anywhere on a Web page under construction and then look at
Dreamweaver’s status bar. The applicable tags appear on the left side of the status bar.
In the example shown in Figure 1-9, the Tag Selector shows

Click one of these tags, and the corresponding elements are selected on your page, ready for
modification. The Tag Selector is a terrific time-saver; throughout this book, I point out how
you can use it under various circumstances.
Cross-
Reference

Chapter 1 ✦ Introducing Dreamweaver MX 13
Figure 1-9: Choosing the

tag in Dreamweaver’s Tag Selector is a quick and easy way to
highlight the current paragraph on your Web page.
Enhanced layout options
Dreamweaver works much more like a desktop publishing program than do many other visual
HTML editors. Today’s browser capabilities permit images and text to be placed in specific
locations on the Web page—a concept known as absolute positioning. To enable you to take
full advantage of this power, Dreamweaver includes both rulers and grids. You can specify the
type of measurement to be used (inches, pixels, or centimeters), as well as the spacing and
appearance of the grid lines. You can even have objects snap to the grid for easy alignment.
Dreamweaver has always made it easy for designers new to the Web to build nice-looking
interactive Web pages without having to know HTML. Dreamweaver MX expands on that
theme with Layout view. Layout view enables designers to draw tables and cells directly on
the screen for positioning content. Once drawn, cells can be modified by dragging borders or
moving the entire cell. Nested tables may also be included.
To find out more about absolute positioning, see Chapter 29; you can learn more about
Layout view in Chapter 10.
Cross-
Reference
Tag Selector Status bar

14 Part I ✦ Dreamweaver MX Basics
Plugin media preview
In order for a browser to display anything beyond standard format graphics, a plugin is generally
required. Plugins extend the capability of most browsers to show animations, play music,
or even explore 3D worlds. Dreamweaver is one of the first Web authoring tools to enable you
to design your Web page with an active plugin playing the extended file; with all other systems,
you have to preview your page in a browser to see the active content.
The active content feature in Dreamweaver enables the playback of plugins such as
Macromedia Flash, Shockwave, and others. However, this feature extends far beyond that.
Many Web pages are coded with server-side includes, which traditionally required the page to
be viewed through a Web server. Dreamweaver translates much of the server-side information
so that the entire page—server-side includes and all—can be viewed in its entirety at
design time.
Extended Find and Replace
The Web is a fluid medium. Pages are constantly in flux, and because changes are relatively
easy to effect, corrections and additions are the norm. Quite often, a Web designer needs to
update or alter an existing page—or series of pages. Dreamweaver’s enhanced Find and
Replace feature is a real power tool when it comes to making modifications.
Find and Replace works in the Document window, whether in Design view or Code view, as
well as in the Code inspector to alter code and regular content. Moreover, changes are applicable
to the current page, the working site, selected Web pages, or an entire folder of pages,
regardless of the number. Complex Find and Replace queries can be stored and retrieved
later to further automate your work.
Up-to-Date Code Standards
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 (www.w3.org). Each new release of HTML
incorporates an enhanced set of commands and features. The current version, HTML 4, is recognized
by the majority of browsers in use today. Dreamweaver writes clear, easy-to-follow,
real-world, browser-compatible HTML 4 code whenever you insert or modify an element in
the visual editor.
Cutting-edge CSS support
Support for Cascading Style Sheets (CSS) has been steadily growing among browsers, 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. A handy toggle on the
Property inspector allows the designer to switch between HTML and CSS tags with a single
click.
The CSS Styles panel has also had a complete make-over in Dreamweaver MX, as shown in
Figure 1-10. Now editing a CSS style is just as easy as applying one. When in Edit CSS mode,
the CSS Styles panel displays all the current styles—both internal and external—with
detailed characteristics. Double-click on any style to modify it.
New
Feature

Chapter 1 ✦ Introducing Dreamweaver MX 15
Figure 1-10: The Edit Styles mode of the CSS Styles panel displays detailed views of all
the styles connected to the current page.
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
MX 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 Preferences.
In addition, Dreamweaver MX, as a tool, is far more accessible than previous versions. A
number of screen readers, including JAWS for Windows and Window Eyes, are supported.
Furthermore, the entire Dreamweaver interface may be navigated without using the mouse.
Straightforward 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.
Chapter 7 shows you how to work with text in Dreamweaver.
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
Cross-
Reference
16 Part I ✦ Dreamweaver MX Basics
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.
Need to touch up your image? Send it to your favorite graphics program with just a click of
the Edit button.
You learn all about adding and modifying images in Chapter 8.
Enhanced table capabilities
Other features—standard, yet more advanced—are similarly straightforward in Dreamweaver.
Tables are a key component in today’s Web pages, and Dreamweaver gives you full control over
all their functionality. Dreamweaver changes the work of resizing the column or row of a table,
previously a tedious 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. Figure 1-11 shows
the Table Property inspector, which centralizes many of these options in Dreamweaver.
Figure 1-11: The Table Property inspector is just one of Dreamweaver’s paths to a full
range of control over the appearance of your table.
Cross-
Reference

Chapter 1 ✦ Introducing Dreamweaver MX 17
Tables are flexible in Dreamweaver. Font changes can be applied to any number of selected
cells, rows, or columns. Standard commands enable you to automatically format or sort a
table 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 Validate Form behavior, you can easily specify any field as a required field and even
check to ensure that the requested type of information has been entered.
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 (see Figure 1-12) 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
category of the Insert bar.
Figure 1-12: In Dreamweaver, you use the Frames panel to choose which frame you
want to modify through the Property inspector.
Frame objects Frames inspector Frames panel

18 Part I ✦ Dreamweaver MX Basics
For more information about creating frame-based Web pages, see Chapter 14.
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
Macromedia—warrant special consideration in Macromedia’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 fully supports the wide range of multimedia output through custom objects
that enable complex images, audio, and presentations to be easily inserted and displayed in
Web pages.
Next-Generation Features
Dreamweaver was among the first Web authoring tools to work with the capabilities brought
in by the 4.0 generation of browsers. Both Netscape Communicator 4+ and Microsoft Internet
Explorer 4+ include variations of Dynamic HTML (DHTML). Moreover, both of these browsers
adhere to the Cascading Style Sheet (CSS) standards to some degree, with support for absolute
and relative positioning. Dreamweaver gives Web developers an interface that translates
these advanced possibilities into reality.
Flash and Fireworks integration
Dreamweaver MX has upped the ante for integration with Macromedia’s graphics engine,
Fireworks. Now, images derived from Fireworks are identified as such, both in the Property
inspector and in the Assets panel. Graphics may be optimized to alter the file size, cropping,
transparency, or many other aspects right from within Fireworks. If more extensive modification
is required, selecting the Edit button sends the graphic back to Fireworks. More impressively,
sliced images—maintained as a borderless table in HTML—may be edited in their
entirety. Fireworks even respects HTML alterations to a degree, such as changes to URLs or
converting an image slice to a text block. This degree of integration lends an amazing fluidity
to the workflow.
Just as Dreamweaver behaviors may add JavaScript interactivity to a page without the developer
knowing JavaScript, the Flash objects offer the potential for including highly attractive
navigation elements without mastering that vector-based animation program. Two different
types of Flash objects are available: Flash buttons and Flash text. A Flash button is actually a
Macromedia Generator template with full animation and sound capabilities. Because it’s a
template, the layout artist may customize it with text and a link. Dreamweaver ships with
numerous examples, but anyone with Flash 5 can create his own template.
Flash text, on the other hand, does not handle any animation other than a simple color
rollover. However, it is an effective way to include a heading or other page element in a
specific font—a far better solution, with more market penetration, than materializing from
Dynamic HTML. Moreover, Flash text weighs far less than an equivalent GIF image.
Cross-
Reference
Chapter 1 ✦ Introducing Dreamweaver MX 19
Perhaps the coolest Dreamweaver-Flash feature yet is the most basic. As with Fireworks,
Flash movies can now be sent to be edited directly from within Dreamweaver. After your
editing operation is completed in Flash, just select Done (Figure 1-13), and your revised
movie is republished and inserted back into Dreamweaver.
Figure 1-13: Dreamweaver provides a direct connection for editing Flash movies.
Server-side behaviors
The driving forces behind Dreamweaver’s Web application creation are its server behaviors.
A server behavior is code written in a language understood by the particular server model
that is executed on the server. Dreamweaver comes standard with a wide variety of useful
server behaviors, ranging from one that replicates records on a page to another that restricts
access to a page.
Server behaviors are applied and managed from the Server Behaviors panel, shown in Figure
1-14. Unlike the Bindings panel, from which fields are dragged onto the page, the main area of
the Server Behaviors panel indicates which server behaviors have been inserted into the
page. If the server behavior has user-defined parameters, they may be altered by doubleclicking
the entry in the Server Behaviors panel.
New
Feature

20 Part I ✦ Dreamweaver MX Basics
Figure 1-14: Quickly identify the page elements affected by a server behavior by
selecting the entry in the Server Behaviors panel.
Roundtrip XML
A new type of markup language has excited a wide cross-section of Web designers, intranet
developers, and corporate users. XML, which stands for eXtensible Markup Language, has
piqued the interest of many because of its underlying customizable nature. With XML, tags
are created to describe the use of the information, rather than its appearance.
Dreamweaver is capable of exporting and importing XML tags, no matter what the tag
definition. You can also create, modify, and validate XML files in Dreamweaver. As XML
grows in popularity, Dreamweaver is ready to handle the work.
3D layers
One particular Dynamic HTML feature enables Dreamweaver to be called “the first 3D Web
authoring tool.” Until Dynamic HTML, Web pages existed on a two-dimensional plane—
images and text could only be placed side by side. Dreamweaver supports control of Dynamic
HTML layers, meaning that objects can be placed in front of or behind other objects. Layers
can contain text, graphics, links, and controls—you can even nest one layer inside another.
You create a layer in Dreamweaver by clicking the Draw Layer button on the Insert bar. Once
created, layers can be positioned anywhere on the page by clicking and dragging the selection
handle. As with other Dreamweaver objects, you can modify a layer through the Property
inspector.
Chapter 1 ✦ Introducing Dreamweaver MX 21
See Chapter 21 for detailed information about using layers in Dreamweaver.
Animated objects
Objects in layers can be positioned anywhere on the Web page under construction, and they
can also be moved when the page is viewed. Dreamweaver takes this capability and adds its
Timelines panel, becoming a 4D Web authoring tool! The Timelines panel, shown in Figure
1-15, is designed along the lines of Macromedia’s world-class multimedia creation program,
Director. With timelines, you can control a layer’s position, size, 3D placement, and even visibility
on a frame-by-frame basis. With Dreamweaver, you no longer have to plot a layer’s path
on a timeline—now you can just draw it using the Record Path of the Layer feature.
Figure 1-15: Use the Timelines panel to animate objects in layers using Dreamweaver’s
advanced Dynamic HTML features.
Dynamic style updates
Dreamweaver completely supports the Cascading Style Sheet (CSS) specification agreed upon
by the World Wide Web Consortium. CSS gives Web designers more flexible control over
almost every element on their Web pages. Dreamweaver applies CSS capabilities as if they
were styles in a word processor. For example, you can make all the tags blue, italic, and
put them in small caps. If your site’s color scheme changes, you can make all the tags
red—and you can do this throughout your Web site with one command. Dreamweaver gives
you style control over type, background, blocks, boxes, borders, lists, and positioning.
Cross-
Reference

22 Part I ✦ Dreamweaver MX Basics
Dreamweaver enables you to change styles online as well as offline. By linking a CSS change
to a user-driven event such as moving the mouse, text can be highlighted or de-emphasized,
screen areas can light up, and figures can even be animated. Moreover, it can all be done
without repeated trips to the server or huge file downloads.
Details about using Cascading Style Sheets begin in Chapter 20.
JavaScript behaviors
Through the development of JavaScript behaviors, Dreamweaver combines the power of
JavaScript with the ease of a point-and-click interface. A behavior is defined as a combination
of an event and an action—whenever your Web page user does something that causes something
else to happen, that’s a behavior. What makes behaviors extremely useful is that they
require no programming whatsoever.
Behaviors are JavaScript-based, and this is significant because JavaScript is supported to
varying degrees by existing browsers. Dreamweaver has simplified the task of identifying
which JavaScript command works with a particular browser. You simply select the Web page
element that you want to use to control the action, and open the Behaviors panel. As shown
in Figure 1-16, Dreamweaver enables you to pick a JavaScript command that works with all
browsers, a subset of browsers, or one browser in particular. Next, you choose from a full list
of available actions, such as go to a URL, play a sound, pop up a message, or start an animation.
You can also assign multiple actions and even determine when they occur.
Figure 1-16: Dreamweaver offers only the JavaScript commands that work with the
browser you specify.
Cross-
Reference
Chapter 1 ✦ Introducing Dreamweaver MX 23
For complete details about working with JavaScript behaviors, see Chapter 23.
Program Extensibility
One of Dreamweaver’s primary strengths is its extensibility. Virtually no two Web sites are
alike, either in their design or execution. With such a tremendous variety of results, the more
flexible a Web authoring tool, the more useful it is to a wider group of designers. When it was
introduced, Dreamweaver broke new ground with objects and behaviors that were easily
customizable. Now, Dreamweaver lengthens its lead with custom floaters, commands,
translators, and Property inspectors. The basic underpinnings of Dreamweaver can even be
extended with the C-Level Extensibility options.
Dreamweaver’s extensibility continues to grow—now, custom toolbars have been added to
the mix. Look for new toolbars on the Macromedia Dreamweaver Exchange, which you can
get to by choosing Help ➪ Dreamweaver Exchange.
Objects and behaviors
In Dreamweaver parlance, an object is a bit of HTML code that represents a specific image or
HTML tag, such as a

or a . Dreamweaver’s objects are completely open to
user customization, or even out-and-out creation. For example, if you’d rather import structured
data into a table without a border instead of with the standard 1-pixel border, you can
easily make that modification to the Insert Tabular Data object file—right from within
Dreamweaver—and every subsequent table is similarly inserted. Objects are accessed from
the Insert bar as well as through the menus.
Objects are a terrific timesaving device, essentially enabling you to drop in significant blocks
of HTML code at the click of a mouse. Likewise, Dreamweaver behaviors enable even novice
Web designers to insert complex JavaScript functions designed to propel the pages to the cutting
edge. Dreamweaver ships with a full array of standard behaviors—but that’s only the tip
of the behavior iceberg. Because behaviors are also customizable and can be built by anyone
with a working knowledge of JavaScript, many Dreamweaver designers have created custom
behaviors and made them publicly available.
You can find a large assortment of custom objects, behaviors, and commands on the
CD-ROM that accompanies this book.
Server Behavior Builder
Server behaviors are key to Dreamweaver’s success as a Web application authoring tool.
Although Dreamweaver provides a full palette of server behaviors for handling many of the
required tasks, the needs of Web developers are too diverse and numerous to be able to supply
a server behavior for every occasion. Enter Dreamweaver’s Server Behavior Builder,
shown in Figure 1-17, a terrific tool for creating custom server behaviors.
On the
CD-ROM
New
Feature
Cross-
Reference

24 Part I ✦ Dreamweaver MX Basics
Figure 1-17: With the Server Behavior Builder, you can create a new
behavior from the ground up or modify an existing behavior.
The Server Behavior Builder is engineered to handle a wide range of circumstances. Some
server behaviors may be encapsulated in a single line of code repeated verbatim, whereas
others require multiple blocks of programming involving several user-supplied parameters—
you can construct almost any kind of code with the Server Behavior Builder. After the custom
server behavior is created, it may be applied and modified just like any of the standard
Dreamweaver server behaviors.
Commands and floating panels
Objects and behaviors are great ways to help build the final result of a Web page, but what
about automating the work of producing that page? Dreamweaver employs commands to
modify the existing page and streamline production. A great example is the Sort Table command,
standard with Dreamweaver. If you’ve ever had to sort a large table by hand—meticulously
moving data, one row at a time—you can appreciate the power of commands the first
time you alphabetize or otherwise re-sort a table using this option.
Commands hold a great promise—they are, in effect, more powerful than either objects or
behaviors combined. In fact, some of the more complex objects, such as the Rollover Image
object, are actually commands. Commands can also extract information sitewide and offer a
powerful programmable language within Dreamweaver.
Creating a Dreamweaver command is now easier than ever, thanks to the History panel. Aside
from displaying every action you undertake as you build your Web page, the History panel
enables you to select any number of those actions and save them as a command. Your new
command is instantly available to be called from the menu whenever you need it.
After only a few moments with Dreamweaver, you become accustomed to its use of floating
panels. In Dreamweaver MX, you can create custom floating panels. These custom panels can
show existing resources or provide a whole new interface for modifying an HTML element.
Chapter 1 ✦ Introducing Dreamweaver MX 25
Adjustable Insert bars
The tabbed Insert bar is more than just a new look for Dreamweaver. Now, at a glance, designers
can quickly see all the available object categories and switch to them with a single click.
More important—from an extensibility standpoint—new categories may be developed and
integrated into the Dreamweaver workspace on a contextual basis. In other words, if you
create a category for SMIL, you can set the preferences so that it displays only when an SMIL
file is being worked on.
Custom tags, translators, and Property inspectors
In Dreamweaver, almost every part of the user interface can be customized—including the
tags themselves. New tags and how they should be formatted can easily be added via the
Tag Library Editor; entire tag sets represented by DTDs can even be imported. After you’ve
developed your custom third-party tags, you can display and modify their current properties
with a custom Property inspector. Moreover, if your custom tags include content not typically
shown in Dreamweaver’s Document window, a custom translator can be built, enabling the
content to be displayed.
Programs such as Dreamweaver are generally built in the programming language called C or
C++, which must be compiled before it is used. Generally, the basic functions of a C program are
frozen solid; there’s no way that you can extend them. This is not the case with Dreamweaver,
however. Dreamweaver offers a C-Level Extensibility that permits programmers to create
libraries to install new functionality into the program. Translators, for example, generally rely
on new C libraries to enable content to be displayed in Dreamweaver that could not be shown
otherwise. Companies can use the C-Level Extensibility feature to integrate Dreamweaver into
their existing workflow and maximize productivity.
Automation Enhancements
Web site design is the dream job; Web site production is the reality. After a design has been
finalized, its execution can become repetitive and burdensome. Dreamweaver offers a number
of ways to automate the production work, keeping the look of the Web pages
consistent—with minimum work required.
Rapid application development with Application objects
Although it’s true that almost every active Web site has one or more unique situations that
require some custom coding, it’s equally true that the same type of Web application is used
repeatedly. It’s hard to find an e-commerce–enabled site that doesn’t use some variation of
the master-detail Web application in which a search returns a list of matches (the master
page), each of which links to a page with more information (the detail page). Likewise, every
intranet administration application requires the capability to add, edit, and remove records.
To speed the development of these types of applications, Dreamweaver includes a series of
Application objects, some of which reduce a 20-step operation to a single dialog box, like the
one shown in Figure 1-18.

26 Part I ✦ Dreamweaver MX Basics
Figure 1-18: The Master-Detail Page Set Application
object provides rapid development for a common
Web application.
Here are some of the Application objects that come standard with Dreamweaver:
✦ Dynamic Table
✦ Master Detail Page Set
✦ Recordset Navigation Bar
✦ Recordset Navigation Status
✦ Record Insertion Form
✦ Record Update Form
Although they vary in complexity, all are guaranteed timesavers. In addition to creating pages
as needed, Application objects can also insert dynamic data and apply server behaviors.
Applying HTML Styles
Designers in every field depend on the consistency and flexibility of styles. Until recently, the
only styles available to Web designers came through a Cascading Style Sheet (CSS). Although
CSS is, for many, an ideal solution, numerous clients are hesitant to authorize its use for fear
of alienating users with older browsers that don’t support CSS. The Dreamweaver engineers
have come up with a solution that maintains backward compatibility while simplifying text
formatting: HTML Styles.
The HTML Styles panel enables you to define, manage, and apply any combination of text
formatting. You can apply your new style to either a selection or an entire paragraph—and
Chapter 1 ✦ Introducing Dreamweaver MX 27
styles can be defined either to add formatting to the existing tags or to replace them.
Although redefining an existing HTML Style does not cause text to update, HTML Styles are
sitewide and can be used to enforce a consistent look and feel without CSS limitations.
Importing office documents
Much of the Web’s content originates from other sources—in-house documents produced by a
word processor or spreadsheet program. Dreamweaver bridges the gap between the offline and
online world with two useful import features: Import Word HTML and Import Tabular Data.
Microsoft Word, perhaps the premier word processor, is great at creating and storing word
processing documents but not so accomplished at outputting standard HTML. An HTML file
derived from Word is, to put it mildly, bloated with extraneous and repetitive code.
Dreamweaver’s Import Word HTML feature strips out the unnecessary code and even permits
you to format the code as you format your other Dreamweaver files. The Import Word HTML
command offers a wide-range of options for cleaning up the code.
Of course, not all Web content derives from word processing documents—databases and
spreadsheets are the other two legs of the modern office software triangle. With the Import
Tabular Data command, Dreamweaver offers the capability to incorporate data from any
source that can export structured text files. Just save your spreadsheet or database as a
comma, tab, or otherwise delimited file and bring it directly into Dreamweaver in the table
style of your choice.
Reference panel
Even the most advanced coder needs to refer to a reference when including seldom-used
HTML tags or arcane JavaScript functions. Dreamweaver includes a built-in reference with
HTML, JavaScript, and Cascading Style Sheet details. Taken from O’Reilly’s Dynamic HTML:
The Definitive Reference, by Danny Goodman, Dreamweaver’s guide is context-sensitive; highlight
a tag or function in Code view and press Shift+F1 to get a breakdown on syntax and
browser compatibility.
The reference panel has been expanded in Dreamweaver MX. In addition to the resources
already noted, you’ll find a ColdFusion Markup Language reference from Macromedia, as
well as its Sitespring Project Site Tag Reference. UsableNet has contributed a valuable guide
to accessibility issues, and two new guides from Wrox are onboard—one for ASP 3.0 and
one for JSP.
History panel
The repetitiveness of building a Web site is often a matter of repeatedly entering the same
series of commands. You might, for example, need to add a vertical margin of 10 pixels and a
horizontal margin of 5 around most, but not all, of the images on a page. Rather than selecting
each image and then repeatedly entering these values in the Property inspector, you can now
enter the values once and then save that action as a command.
The feature that brings this degree of automation to Dreamweaver is found in the History
panel. The History panel shows each step taken by a designer as the page is developed.
Although this visual display is great for complex, multilevel undo actions, the capability to
save any number of your steps as an instantly available command is truly timesaving.
New
Feature

28 Part I ✦ Dreamweaver MX Basics
Site Management Tools
Long after your killer Web site is launched, you’ll find yourself continually updating and revising
it. For this reason, site management tools are as important as site creation tools to a Web
authoring program. Dreamweaver delivers on both counts.
Object libraries
In addition to site management functions that have become traditional, such as FTP publishing,
Dreamweaver adds a whole new class of functionality called libraries. One of the truisms
of Web page development is that if you repeat an element across your site, you’re sure to
have to change it—on every page. Dreamweaver libraries eliminate that drudgery. You can
define almost anything as a Library element: a paragraph of text, an image, a link, a table, a
form, a Java applet, an ActiveX control, and so on. Just choose the item and open the Library
category of Assets (see Figure 1-19). After you’ve created the Library entry, you can reuse it
throughout your Web site. Each Web site can have its own library, and you can copy entries
from one library to another.
Figure 1-19: Use Dreamweaver’s Library feature to simplify the task of updating elements
repeated across many Web pages.
Being able to include “boilerplate” Web elements is one issue, being able to update them
across the site simultaneously is quite another! You can easily change a Library entry
through the Library panel. After the change is complete, Dreamweaver detects the modification
and asks if you want to update your site. Imagine updating copyright information across
a 400+ page Web site in the wink of an eye, and you start to understand the power of
Dreamweaver libraries.
Chapter 1 ✦ Introducing Dreamweaver MX 29
To find out more about making sitewide changes with Library items, see Chapter 29.
Super-charged templates
The more your Web site grows, the more you’ll find yourself using the same basic format for
different pages. Dreamweaver enables the use of Web page templates to standardize the look
and feel of a Web site and to cut down on the repetitive work of creating new pages. A
Dreamweaver template can hold the basic structure for the page—an image embedded in the
background, a navigation bar along the left side, or a set-width table in the center for holding
the main text, for example—with as many elements predefined as possible.
Dreamweaver templates are far more than just molds for creating pages, however. Basically,
templates work with a series of locked and editable regions. To update an entire site based on
a template, all you have to do is alter one or more of the template’s locked regions. Naturally,
Dreamweaver enables you to save any template that you create in the same folder, so that
your own templates, too, are accessible through the Templates category of the Assets panel.
(You can find more about using and creating templates in Chapter 28.)
Dreamweaver templates are much more than just editable and uneditable regions, however.
Now, Dreamweaver gives the designer a much higher degree of control with such features as
repeating regions—which, for example, allow a table row to be repeated as many times as
needed but constrain the other areas of a table. You’re also able to hide and show areas of a
page conditionally with optional regions, shown in Figure 1-20. Dreamweaver’s template
power extends to nested templates, so that changes can ripple down through a series of
locked and editable regions.
Figure 1-20: This template contains editable, repeating, and optional regions.
New
Feature
Cross-
Reference

30 Part I ✦ Dreamweaver MX Basics
Browser targeting
Browser targeting is another site management innovation from Dreamweaver. One of the
major steps in any site development project is to test the Web pages in various browsers to
look for inconsistencies and invalid code. Dreamweaver’s Browser Targeting function enables
you to check your HTML against any existing browser’s profile. Dreamweaver includes predefined
profiles for several browsers, and you can create a profile for any browser you’d like to
check.
To learn how you can set up your own profile for Browser Targeting, see Chapter 30.
You can also preview your Web page in any number of browsers. Dreamweaver enables you
to specify primary and secondary browsers that can display your page at the press of a function
key. You can install up to 18 other browsers for previewing your Web page. The entire list
of browsers is available through the Preview in Browser command under the File menu.
Converting Web pages
Although Web site designers may have access to the latest HTML tools and browsers, much of
the public uses older, more limited versions of browsers. Dreamweaver gives you the power to
build Web pages with the high-end capabilities of fourth-generation browsers—and then convert
those pages so that older browsers can also read what you’ve created. Moreover, you can
take previously designed Web pages that use tables and “upgrade” them to take advantage of
the latest HTML features with the Tables to Layers command. Dreamweaver goes a long way
toward helping you bridge the gap between browser versions.
Verifying links
Web sites are ever-evolving entities. Maintaining valid connections and links amid all that
diversity is a constant challenge. Dreamweaver includes a built-in link checker so you can
verify the links on a page, in a directory, or across your entire site. The Link Checker quickly
shows you which files have broken links, which files have links to external sites, and which
files may have been “orphaned” (so that no other file connects with them).
FTP publishing
The final step in Web page creation is publishing your page on the Internet. As any
Webmaster knows, this final step is one that happens repeatedly as the site is continually
updated and maintained. Dreamweaver includes an FTP (File Transfer Protocol) publisher
that simplifies the work of posting your site. More importantly, Dreamweaver enables you to
synchronize your local and remote sites with one command.
Not all of the files found in your local site need to be uploaded to the remote site.
Dreamweaver includes a new feature called cloaking, which permits the designer to designate
folders that should be excluding during synchronization operations.
You can work with sites originating from a local folder, such as one on your own hard drive.
Or, in a collaborative team environment, you can work with sites being developed on a
remote server. Dreamweaver enables you to set up an unlimited number of sites to include
the source and destination directories, FTP user names and passwords, and more.
New
Feature
Cross-
Reference
Chapter 1 ✦ Introducing Dreamweaver MX 31
The Dreamweaver Site panel, shown in Figure 1-21, is a visual interface in which you can click
and drag files or select a number of files and transfer them with the Get and Put buttons. You
can even set the preferences so the system automatically disconnects after remaining idle for
a user-definable period of time.
Figure 1-21: The FTP Site panel enables you to publish your Web site directly from within
Dreamweaver to your application server.
Site map
Web sites can quickly outgrow the stage in which the designer can keep all the linked pages
in mind. Dreamweaver includes a visual aid in the Web site management toolbox: the Site
Map. With the Site Map, the Web designer can see how the entire Web site is structured.
However, you can use the Site Map to do far more than just visualize the Web.
The Site Map, shown in Figure 1-22, can be used to establish the structure of the Web site in
addition to viewing it. New pages can be created, and links can be added, modified, or
deleted. In fact, the Site Map is so powerful, it becomes a site manager as well.
File check in/check out
On larger Web projects, more than one person is usually responsible for creation and daily
upkeep of the site. An editor may need to include the latest company press release, or a
graphic artist may have to upload a photo of the newest product—all on the same page. To
avoid conflicts with overlapping updates, Dreamweaver has devised a system under which
Web pages can be marked as “checked out” and locked to prevent any other corrections until
the file is once again “checked in.”