Dreamweaver MX, by Macromedia, is a professional Web site development program for creating static pages and dynamic
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.
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
How Dreamweaver is
Connecting to data in
Maintaining your Web
site with Dreamweaver
✦ ✦ ✦ ✦
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
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.
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
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.
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.
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
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.
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.
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
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
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.
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.
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