Professional Documents
Culture Documents
Exploring Studio MX PDF
Exploring Studio MX PDF
Trademarks
Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware,
Authorware Star, Backstage, Bright Tiger, Clustercats, ColdFusion, Contribute, Design In Motion, Director, Dream Templates,
Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite,
JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live
Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Flash, Macromedia M Logo and
Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with
Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, Roundtrip, Roundtrip
HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be, and Xtra are either
registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions
including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may
be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions
including internationally.
Third-Party Information
This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not
responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your
own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia
endorses or accepts any responsibility for the content on those third-party sites.
Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com).
Opera ® browser Copyright © 1995-2002 Opera Software ASA and its suppliers. All rights reserved.
Apple Disclaimer
APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE
ENCLOSED COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY
PARTICULAR PURPOSE. THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES.
THE ABOVE EXCLUSION MAY NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC
LEGAL RIGHTS. THERE MAY BE OTHER RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO
STATE.
Copyright © 2003 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,
translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of
Macromedia, Inc. Part Number ZWS70M100
Acknowledgments
Project Management: Sheila McGinn
Writing: Jon Michael Varese
Editing: Rosana Francescato, Barbara Milligan, Antonio Padial, Lisa Stanziano
Production Management: Patrice O’Neill
Production: Adam Barnett, Aaron Begley, Jeff Harmon
Special thanks to Kristin Conradi, George Fox, Stephanie Gowin, Julie Hallstrom, Jed Hartman, Mark Haynes, Matt Hoffberg,
Eliza Laffin, Charles Nadeau, John Nosal, Jennifer Rowe, Craig Simmons, Tim Statler, and Gary White
First Edition: September 2003
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
CONTENTS
3
CHAPTER 5: Installing a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Installing Personal Web Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Installing Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Testing PWS or IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Testing the Macintosh web server (PHP developers) . . . . . . . . . . . . . . . . . . . . . . . 64
Web server basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
4 Contents
TUTORIAL 4: Building a Navigation Bar with Fireworks . . . . . . . . . . . . . . . . . . 139
Create a new Fireworks document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Create a button symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Create button states. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Create multiple button instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Change button instance text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Assign URLs and names to the buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Optimize the navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Set HTML preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Export the document to HTML format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
View the exported files in the Dreamweaver Files panel. . . . . . . . . . . . . . . . . . . . 152
View the Fireworks HTML file in a browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Contents 5
6 Contents
PART I
PART I
Getting Started
Familiarize yourself with the Macromedia Studio MX 2004 product family, and learn everything
you need to do before you begin building your website.
This part contains the following sections:
Chapter 1, “Introduction,” on page 9
Chapter 2, “What’s New in Studio MX 2004,” on page 19
Chapter 3, “The Studio MX 2004 Workspace,” on page 29
Chapter 4, “Understanding Web Applications,” on page 51
Chapter 5, “Installing a Web Server,” on page 61
Chapter 6, “Setup for Sample ColdFusion Site,” on page 67
CHAPTER 1
Introduction
This manual introduces you to Macromedia Studio MX 2004, an integrated web development
tool set that includes Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004 (or
Macromedia Flash MX Professional 2004), Macromedia Fireworks MX 2004, Macromedia
FreeHand MX, and Macromedia ColdFusion MX. The manual gives an overview of the
products, introduces conceptual information about web application development, and shows you
how to build a simple but functional dynamic website through a series of tutorials.
The information in this manual is designed for beginning to intermediate users, especially users
who are unfamiliar with one, a few, or all of the products in the Studio MX 2004 family.
Advanced users can benefit by learning best practices techniques and reading about what’s new in
each product.
Note: This manual is not a comprehensive reference for all the features of the Studio tools. For in-
depth information about any of the tools, see each product’s help system. To use a product’s help
system, select Using Dreamweaver, Using Flash, Fireworks Help, or Using FreeHand from the
product’s Help menu. Using ColdFusion is available from within the Dreamweaver Help menu.
9
• Chapter 3, “The Studio MX 2004 Workspace,” on page 29, introduces the Dreamweaver,
Flash, Fireworks, and FreeHand workspaces. Many aspects of the individual workspaces have
changed, so you may want to read this chapter even if you’re already familiar with the products.
• Chapter 4, “Understanding Web Applications,” on page 51, provides conceptual background
about how web applications work.
• Chapter 5, “Installing a Web Server,” on page 61, describes how most Windows users can
install and use a Microsoft web server on a local computer. It also describes how most
Macintosh users can test the Apache web server already installed on their systems.
• Chapter 6, “Setup for Sample ColdFusion Site,” on page 67, guides you through the process of
installing the ColdFusion MX application server (which includes a web server), defining a
Dreamweaver site, and creating a database connection. You must complete the procedures in
this chapter if you want to complete the full set of tutorials in Part 2 of the book.
• Chapter 7, “Web Development Workflow,” on page 85, provides a common best practices
workflow scenario for dynamic website development.
• The tutorials that follow Chapter 7 show you how to develop common elements of a dynamic
website, including graphics, Flash content, and a ColdFusion search feature.
Chapter 6, “Setup for Sample ColdFusion Site,” and the tutorials use sample content provided
with Studio MX 2004. If you prefer to create your first Studio site using your own layouts and
content instead, you can do so, but the tutorials are easier to follow if you use the sample
content provided.
Other resources
The Studio MX 2004 tools include a variety of resources to help you learn the programs quickly
and become proficient in creating your own websites. You can also find online help, support, and
instructional material at the Macromedia website.
A set of tutorials included with each product gives in-depth lessons on particular topics,
providing detailed information not covered in this manual.
The Getting Started manuals include overview information about the basic features in each
product. These manuals are available from the Help menu of each product.
Product Help includes comprehensive information about using all aspects of the Studio MX
2004 tools. To use a product’s help system, select Using Dreamweaver, Using Flash, Fireworks
Help, or Using FreeHand from the Help menu within the product. Using ColdFusion is available
from within the Dreamweaver Help menu.
PDF versions of each product’s documentation set, including the Getting Started manuals, Using
manuals, and other books, are included on the Studio MX 2004 CD. Certain reference topics are
not included in the PDF version of the Using manuals; for more information on those topics, see
the product’s help system.
Printed copies of the Dreamweaver, Flash, Fireworks, FreeHand, and ColdFusion
documentation are also available for purchase from Macromedia. To purchase printed copies of
Macromedia product documentation, please visit www.macromedia.com/go/
books_and_training/.
Macromedia Press books include a wide variety of instructional manuals that help you improve
your skills with Studio tools and other Macromedia products. For more information, visit
www.macromedia.com/go/st2004_help_mmp/.
10 Chapter 1: Introduction
Macromedia Studio Support provides the answers you need, day or night, with high-quality
Studio support from knowledgeable product support engineers. For more information, see
www.macromedia.com/go/st2004_support/.
Macromedia Studio Training and Certification helps boost your Studio skills with hands-on
tasks and real-world scenarios. You can choose between instructor-led and online training, or
combine them to create the learning path that is the most effective for you. For more information,
see www.macromedia.com/go/studio_training/.
Macromedia Studio Developer Center keeps you up to date with the latest Studio development
trends and techniques. The Studio Developer Center provides tutorials, articles, and sample
applications that keep you working efficiently. For more information, see www.macromedia.com/
go/developer_studio/.
In addition, you can find regularly updated tips, TechNotes, examples, tutorials, and other
information for all Studio MX 2004 products at the Macromedia Support Center
(www.macromedia.com/support).
Typographical conventions
The following typographical conventions are used in this manual:
• Menu items are shown in this format: menu name > menu item name. Items in submenus are
shown in this format: menu name > submenu name > menu item name.
• Code font indicates HTML tag and attribute names as well as literal text used in examples.
• Italic code font indicates replaceable items (sometimes called metasymbols) in code.
• Bold roman text indicates text that you should enter verbatim.
Studio tools overview
Studio MX 2004 includes five Macromedia products: Dreamweaver, Flash, Fireworks, FreeHand,
and ColdFusion. This section provides a brief overview of each product.
Dreamweaver MX 2004
Dreamweaver MX 2004 is a professional HTML editor for designing, coding, and developing
websites, web pages, and web applications. Whether you enjoy the control of hand-coding
HTML or prefer to work in a visual editing environment, Dreamweaver provides you with
helpful tools to enhance your web-creation experience.
The visual editing features in Dreamweaver let you quickly create pages without writing a line of
code. If you prefer to code by hand, however, Dreamweaver also includes many coding-related
tools and features. And Dreamweaver helps you to build dynamic database-backed web
applications that use server languages such as ASP, ASP.NET, ColdFusion Markup Language
(CFML), JSP, and PHP.
Dreamweaver also provides leading support for using Cascading Style Sheets (CSS) in designs and
hand-coding features, offering you greater flexibility and control over the appearance of your
page. Whether you’re an expert looking to improve your current design procedures or a novice
looking to build CSS into your current designs, you’ll find what you need in Dreamweaver.
For more information about Dreamweaver and its features, see Using Dreamweaver Help.
To find out what’s new in Dreamweaver MX 2004, see Chapter 2, “What’s New in Studio MX
2004,” on page 19.
Fireworks MX 2004
Fireworks MX 2004 provides the easiest way to create, optimize, and export interactive graphics
in a single, web-based environment. The tool delivers a streamlined environment for creating
everything from simple graphical buttons to sophisticated rollover effects and pop-up menus.
Using Fireworks MX 2004, you can create, edit, and animate web graphics, add advanced
interactivity, and optimize images. You can also automate your workflow to meet the demands of
time-consuming updates and changes.
12 Chapter 1: Introduction
Powerful creative tools, support for major file formats and HTML standards, and integration
with popular HTML editors allow designers to use Fireworks comfortably in any work
environment. The single, web-centric workspace offers robust bitmap editing, precise text
control, and creative flexibility. Broad support for various file formats, emerging standards such as
XHTML, and Section 508 compliance ensure that output meets today’s and tomorrow’s needs.
For more information about Fireworks and its features, see Fireworks Help.
To find out what’s new in Fireworks MX 2004, see Chapter 2, “What’s New in Studio MX 2004,”
on page 19.
FreeHand MX
FreeHand MX is a vector-based drawing application. With FreeHand, you can create vector
graphics that can be scaled and printed at any resolution, without losing detail or clarity.
You can use FreeHand to create print and web graphic illustrations such as logos and advertising
banners. You can also use FreeHand to turn your artwork into Flash animations.
The FreeHand user interface contains a workspace and Tools panel that are consistent with the
other Studio MX 2004 applications to give you a true, integrated print and web solution.
For more information about FreeHand and its features, see Using FreeHand Help.
To find out what’s new in FreeHand MX, see Chapter 2, “What’s New in Studio MX 2004,”
on page 19.
ColdFusion MX
ColdFusion MX is a rapid server scripting environment. Combining highly approachable
scripting, effortless connectivity to enterprise data, and powerful built-in search and charting
capabilities, ColdFusion MX allows developers to easily build and deploy dynamic websites,
content publishing systems, self-service applications, commerce sites, and more.
The flexible ColdFusion MX environment supports Windows, Linux, and UNIX operating
systems, integrates with Java and .NET standards, and offers breakthrough ease of use for XML
and web services. ColdFusion also provides high-performance connectivity to Flash clients and
native support for server-side ActionScript. With the capability to run as a stand-alone server or
to be deployed on enterprise-class application servers such as IBM WebSphere, ColdFusion MX
allows any development team to rapidly deliver superior user experiences with their applications.
For more information about ColdFusion, see Using ColdFusion Help (available within the
Dreamweaver Help menu).
System requirements
You must have the following hardware and software to run the Studio MX 2004 tools:
14 Chapter 1: Introduction
To install Studio MX 2004 on Windows:
1 Insert the Studio MX 2004 CD into your computer’s CD-ROM drive to display the Studio MX
2004 installation screen.
Note: If the screen does not appear, or if you are installing from a network drive, use Windows
Explorer to locate the Studio MX 2004 Installer.exe program in the Accessibility directory,
double-click the program, and follow the installation instructions.
3 Click Install.
4 Follow the installation instructions.
If you selected the Install Macromedia Studio MX 2004 option, the Macromedia Studio MX
2004 Read Me file opens. If you installed a single product, the informational file for that
product opens.
The main installation screen stays open until you click the Close button.
The installed Studio MX 2004 applications are now available on the Windows Start menu under
Programs > Macromedia.
To view extra material provided with Studio MX 2004, select Browse CD Contents on the
installation screen.
To uninstall the programs:
• Select Start > Settings > Control Panel > Add/Remove Programs, and select the program you
want to uninstall.
If you selected the Install Macromedia Studio MX 2004 option, the Macromedia Studio MX
2004 Read Me file opens. If you installed a single product, the informational file for that
product opens.
The main installation screen stays open until you click the Close button.
The installed Studio MX 2004 applications are now available in the Applications folder.
To view extra material provided with Studio MX 2004, select Browse CD Contents on the
installation screen.
To uninstall the programs:
• Drag a product folder from the Application folder to the Trash.
16 Chapter 1: Introduction
Product activation and registration
If you are a single-license user, you must activate the license for your Macromedia products within
30 days of installation. You can activate the product through an Internet connection or by phone
in a simple, seamless process that takes only a few moments. Product activation does not require
you to submit personal information, just your product serial number.
Note: Windows 98 SE users must have Microsoft Internet Explorer 5.1 or later to activate the product
over the Internet.
To activate a product:
1 Double-click the Dreamweaver, Flash, Fireworks, or FreeHand executable icon to start one of
the products.
2 Click Continue to go to the next screen.
3 Enter your serial number in the Macromedia Product Activation window and click Continue.
After activation, your product is ready to use. When you activate one of the Studio MX 2004
products, the others are activated as well.
For more information on product activation, please visit www.macromedia.com/go/activation/.
It’s also a good idea to register your copy of Studio MX 2004 products electronically or by mail.
Registration entitles you to additional Macromedia support.
When you register, you can sign up to receive up-to-the-minute notices about upgrades and new
Macromedia products. You can also sign up for timely e-mail notices about product updates and
new content appearing on www.macromedia.com.
To register a product:
• In any of the Studio MX 2004 products, select Help and then select either the online or the
print registration option. When you register one of the Studio MX 2004 products, the others
are registered as well.
Whether you are new to any of the Macromedia Studio MX 2004 products, or you are an
experienced Dreamweaver, Flash, Fireworks, or FreeHand user, you can benefit from the many
new features available in the Macromedia Studio MX 2004 tools. This chapter provides a list of
new product features, divided into the following sections:
“What’s new in Dreamweaver MX 2004” on page 19
“What’s new in Flash MX 2004” on page 22
“What’s new in Flash MX Professional 2004” on page 24
“What’s new in Fireworks MX 2004” on page 25
“What’s new in FreeHand MX” on page 26
19
Table editing visual feedback enables you to see the effects column resize operations will have
on your tables. Visual feedback also makes it easier for you to select table elements. For more
information about resizing, see “Resizing tables, columns, and rows” in Using Dreamweaver
Help. For more information about using Expanded Tables mode for selecting elements, see
“Using Expanded Tables mode for easier table editing” in Using Dreamweaver Help.
User interface overhaul maximizes the usable workspace, showing context and focus more
clearly, and makes the interface more approachable and logical. For more information about the
Dreamweaver workspace, see “About the Dreamweaver workspace” in Using Dreamweaver Help.
The Start page enables you to access recently used files, create new files, and access Dreamweaver
resources. The Start page appears when you start Dreamweaver or when you don’t have any
documents open. For information hiding or showing the Start page, see “Hiding and displaying
the Start page” in Using Dreamweaver Help.
Saved desktop option gives you the choice to have Dreamweaver reopen documents you were
last working on when you restart Dreamweaver. For information about setting this option, see
“Setting General preferences for Dreamweaver” in Using Dreamweaver Help.
Full Unicode support means that Dreamweaver in Windows supports all text encodings
supported by Internet Explorer. You can use almost any language font installed on your system in
Dreamweaver, and Dreamweaver will render and save it properly. For information about setting
font encodings, see “Setting Fonts preferences for Dreamweaver display” in Using
Dreamweaver Help.
Secure FTP enables you to fully encrypt all file transfers and prevent unauthorized access to your
data, files, user names, and passwords. For information about setting up a remote connection
using FTP, see “Setting up a remote folder” in Using Dreamweaver Help.
Productivity
Flash MX 2004 includes many features designed specifically for streamlining previously complex
tasks, thereby improving productivity:
Timeline effects You can apply Timeline effects to any object on the Stage to quickly add
transitions and animations such as fade-ins, fly-ins, blurs, and spins. For more information, see
“Using Timeline effects” in Using Flash Help.
Behaviors With behaviors, you can add interactivity to Flash content without writing a line of
code. For example, you can use behaviors to include functionality that links to a website, loads
sounds and graphics, controls playback of embedded videos, plays movie clips, and triggers data
sources. For more information, see “Controlling instances with behaviors” in Using Flash Help.
Accessibility support in the authoring environment Accessibility support in the Flash
authoring environment provides keyboard shortcuts for navigating and for using interface
controls, letting you work with these interface elements without using the mouse. For more
information, see “Accessibility in the Flash authoring environment” in Using Flash Help.
Updated templates Flash includes updated templates for creating presentations, e-learning
applications, advertisements, mobile device applications, and other commonly used types of Flash
documents. For more information, see “Using templates” in Using Flash Help.
Integrated Help system The new Help panel provides in-context reference, ActionScript
reference, and lessons in the Flash authoring environment. For more information, see “Using the
Help panel” in Using Flash Help.
Spell checker The spell checker searches your text for spelling errors. For more information,
see “Checking spelling” in Using Flash Help.
Document tabs Tabs for each open document are displayed at the top of the workspace so that
you can quickly locate and switch between open documents. For more information, see “Using
document tabs for multiple documents (Windows only)” in Using Flash Help.
Start page The Start page puts commonly used tasks at your fingertips, in a central page. For
more information, see “Using the Start page” in the Flash Getting Started manual (available within
Flash Help).
Find and Replace The Find and Replace feature locates and replaces a text string, a font, a
color, a symbol, a sound file, a video file, or an imported bitmap file. For more information, see
“Using Find and Replace” in Using Flash Help.
Publishing
New publishing features make it easy to detect Flash Player versions, improve accessibility, and
simplify localization.
Flash Player detection You can now publish SWF files with associated files that detect if a user
has a specified Flash Player version. You can configure your published files to direct users to
alternate files if they don’t have the specified Flash Player. For more information, see “Configuring
publish settings for Flash Player detection” in Using Flash Help.
Publish profiles You can create profiles to save your publish settings, then export the profiles
and use them across projects to publish consistently under different conditions. For more
information, see “Creating a publish profile” in Using Flash Help.
Accessibility and components New accessibility features and a new generation of components
offer tab ordering, tab focus management, and improved support for third-party screen readers
and closed-caption programs.
Globalization and Unicode Enhanced globalization and Unicode support allows multilanguage
authoring using any character set. For more information, see “Creating Multilanguage Text” in
Using Flash Help.
Security The Flash Player 7 enforces a stricter security model than previous versions of the
Flash Player. Exact domain matching requires that the domain of the data to be accessed match
the data provider’s domain exactly in order for the domains to communicate. HTTPS/HTTP
restriction specifies that a SWF file using nonsecure (non-HTTPS) protocols cannot access
content loaded using a secure (HTTPS) protocol, even when both are in exactly the same
domain. For more information, see “Flash Player security features” in ActionScript Reference
Guide Help.
Other improvements
Flash Player performance has been greatly improved, and ActionScript has been enhanced to
comply with ECMA script language specifications. Also, Flash now tracks interactions so that
they can be converted to reusable commands.
Flash Player runtime performance Player runtime performance has been improved by a factor
of two to five times for video, scripting, and general display rendering.
ActionScript 2 ActionScript 2 is an object-oriented language that follows the ECMA script
language specification and supports inheritance, strong typing, and the event model. For more
information, see “ECMA-262 Edition 4 compliance” in ActionScript Reference Guide Help.
History panel The History panel tracks your actions so that they can be converted to reusable
commands. For more information, see “Using the History panel” in Using Flash Help.
Data interactivity
Data binding Data binding allows you to connect any component to various data sources to
manipulate, display, and update data through components or ActionScript. For more
information, see “Data Binding” in Using Flash Help.
Prebuilt data connectors for web services and XML New components allow you to connect
to web services and XML data sources easily. For more information, see “Macromedia Flash MX
2004 and Macromedia Flash MX Professional 2004 Components” in Using Components Help.
Performance improvements Performance improvements on large record sets allow your
application to work efficiently with large amounts of data.
Team productivity
Project management The Project panel enables centralized project file management, version
control, and workflow optimization for teams of Flash users working together. For more
information, see “Working with Projects (Flash Professional Only)” in Using Flash Help.
Source code control Flash Professional provides for integration of source code control systems,
with plug-ins to industry-leading systems such as Microsoft Visual SourceSafe. For more
information, see “Using version control with projects (Flash Professional only)” in Using
Flash Help.
Ease of use
Many new FreeHand MX features are dedicated to making your workflow easier than ever.
Tools panel changes The Tools panel has been reorganized to make finding and using your
tools easier. To find out more, see “Using the Tools panel” in Using FreeHand Help.
Gradient fill handles Gradient fill handles increase your control in manipulating gradient fills.
See “Using Strokes and Fills” in Using FreeHand Help.
Add page button Adding a new page to your document is now as easy as clicking the Add Page
button at the bottom of the application window. See “Working with pages” in Using FreeHand
Help.
Style behavior changes You can control what types of object attributes a style applies to. See
“Applying styles” in Using FreeHand Help.
Macromedia Studio MX 2004 offers an integrated workspace that allows for seamless transition
between products. You will find that panels, menus, selection icons, and other user interface
elements are similar across products and are easy to use. As you move between products, the
consistent and familiar workspace helps you increase productivity while decreasing the amount of
time you need to spend learning a new product.
This chapter contains the following sections:
“A first look at the Dreamweaver workspace” on page 29
“A first look at the Flash workspace” on page 32
“A first look at the Fireworks workspace” on page 39
“A first look at the FreeHand workspace” on page 45
29
Choosing a workspace layout (Windows only)
In Windows, the first time you start Dreamweaver, a dialog box appears that lets you choose a
workspace layout. If you change your mind later, you can switch to a different workspace using
the Preferences dialog box.
Coder workspace is the same integrated workspace, but the panel groups are docked on the
left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion
Studio, and the Document window shows Code view by default. This layout is recommended
for HomeSite or ColdFusion Studio users and other hand-coders who want a familiar
workspace layout.
Note: You can dock panel groups on either side of the workspace in either layout.
The Start page (not shown) enables you to open a recent document or create a new document.
From the Start page you can also learn more about Dreamweaver by taking a product tour or
a tutorial.
The Insert bar contains buttons for inserting various types of “objects,” such as images, tables,
and layers, into a document. Each object is a piece of HTML code that allows you to set various
attributes as you insert it. For example, you can insert a table by clicking the Table button in the
Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar.
The Document toolbar contains buttons and pop-up menus that provide different views of the
Document window (such as Design view and Code view), various viewing options, and some
common operations such as previewing in a browser.
The Document window displays the current document as you create and edit it.
The Property inspector lets you view and change a variety of properties for the selected object or
text. Each kind of object has different properties.
Panel groups are sets of related panels grouped together under one heading. To expand a panel
group, click the expander arrow at the left of the group’s name; to undock a panel group, drag the
gripper at the left edge of the group’s title bar.
The Files panel enables you to manage your files and folders, whether they are part of a
Dreamweaver site or on a remote server. The Files panel also enables you to access all the files on
your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).
Menus overview
This section provides a brief overview of the menus in Dreamweaver.
The File menu and Edit menu contain the standard menu items for File and Edit menus, such as
New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo. The File menu also contains
various other commands for viewing or acting on the current document, such as Preview in
Browser and Print Code. The Edit menu includes selection and searching commands, such as
Select Parent Tag and Find and Replace. In Windows, the Edit menu also provides access to
Preferences; on the Macintosh, use the Dreamweaver menu to open the Preferences dialog box.
The View menu allows you to see various views of your document (such as Design view and
Code view) and to show and hide various kinds of page elements and Dreamweaver tools
and toolbars.
The Insert menu provides an alternative to the Insert bar for inserting objects into
your document.
The Modify menu allows you to change properties of the selected page element or item. Using
this menu, you can edit tag attributes, change tables and table elements, and perform various
actions for library items and templates.
The Text menu allows you to easily format text.
The Commands menu provides access to a variety of commands, including one to format code
according to your formatting preferences, one to create a photo album, and one to optimize an
image using Macromedia Fireworks.
The Site menu provides menu items to manage sites and upload and download files.
Tip: Some of the capabilities that were in the Site menu in previous versions of Dreamweaver can
now be found in the Options menu of the Files panel.
The Window menu provides access to all of the panels, inspectors, and windows in
Dreamweaver. (For toolbars, see the View menu.)
The Help menu provides access to Dreamweaver documentation, including help systems for
using Dreamweaver and creating extensions to Dreamweaver, and reference material for a variety
of languages.
In addition to the menu-bar menus, Dreamweaver provides many context menus, which give you
easy access to useful commands pertaining to the current selection or area. To display a context
menu, right-click (Windows) or Control-click (Macintosh) an item in a window.
Zooming
To view the entire Stage on the screen, or to view just a particular area of your drawing at high
magnification, you can change the magnification level. The maximum magnification depends on
the resolution of your monitor and the document size. The minimum value for zooming out on
the Stage is 8%. The maximum value for zooming in on the Stage is 2000%.
To magnify or reduce your view of the Stage, do one of the following:
• To zoom in on a certain element, select the Zoom tool in the toolbar and click the element. To
switch the Zoom tool between zooming in or out, use the Enlarge or Reduce modifiers (in the
options area of the toolbar when the Zoom tool is selected) or Alt-click (Windows) or Option-
click (Macintosh).
• To zoom in on a specific area of your drawing, drag a rectangular selection marquee with the
Zoom tool. Flash sets the magnification level so that the specified rectangle fills the window.
• To zoom in on or out of the entire Stage, select View > Zoom In or View > Zoom Out.
• To zoom in or out by a specified percentage, select View > Magnification and select a
percentage from the submenu, or select a percentage from the Zoom control at the lower left
corner of the application window.
Empty keyframe
Playhead Timeline header
Frame-by-frame animation
Tweened animation
You can change the way frames are displayed in the Timeline, as well as display thumbnails of
frame content in the Timeline. The Timeline shows where there is animation in a document,
including frame-by-frame animation, tweened animation, and motion paths. For more
information, see “Creating motion” in Using Flash Help.
Controls in the layers section of the Timeline let you hide, show, lock, or unlock layers, as well as
display layer contents as outlines. See “Editing layers and layer folders” in the Flash Getting Started
manual (available within Flash Help).
You can insert, delete, select, and move frames in the Timeline. You can also drag frames to a new
location on the same layer or to a different layer. See “Working with frames in the Timeline” in
the Flash Getting Started manual (available within Flash Help).
Using layers
Layers are like transparent sheets of acetate stacked on top of each other. Layers help you organize
the artwork in your document. You can draw and edit objects on one layer without affecting
objects on another layer. Where there is nothing on a layer, you can see through it to the layers
below.
To draw, paint, or otherwise modify a layer or folder, you select the layer to make it active.
A pencil icon next to a layer or folder name indicates that the layer or folder is active. Only one
layer can be active at a time (although more than one layer can be selected at a time).
When you create a new Flash document, it contains one layer. You can add more layers to
organize the artwork, animation, and other elements in your document. The number of layers
you can create is limited only by your computer’s memory, and layers do not increase the file size
of your published SWF file. You can hide, lock, or rearrange layers.
You can also organize and manage layers by creating layer folders and placing layers in them. You
can expand or collapse layers in the Timeline without affecting what you see on the Stage. It’s a
good idea to use separate layers or folders for sound files, actions, frame labels, and frame
comments. This helps you find these items quickly when you need to edit them.
In addition, you can use special guide layers to make drawing and editing easier, and mask layers
to help you create sophisticated effects.
For an interactive introduction to working with layers in Flash, select Help > How Do I > Basic
Flash > Work with Layers.
Using panels
Panels are floating controls that help you edit aspects of a selected object or elements of the
document. Panels let you work on frames, layers, symbols, color swatches, and more. Each panel
is draggable, so you can group panels together in custom arrangements.
The following panels are grouped together by default:
• The Styles, URL, and Library panels reside in a panel group called Assets.
• The Mixer and Swatches panels reside in a panel group called Colors.
• The Frames and History panels reside in a panel group called Frames and History.
The Optimize, Layers, Shapes, Info, Behaviors, Find, and Align panels are not grouped with
other panels by default, but you can group them if you want. When you group panels together,
all panel group names appear in the panel group title bar. You can, however, assign any name you
like to panel groups.
The Optimize panel lets you manage the settings that control a file’s size and file type and work
with the color palette of the file or slice to be exported.
The Layers panel organizes a document’s structure and contain options for creating, deleting,
and manipulating layers.
The Frames panel includes options for creating animations.
The History panel lists commands you have recently used so that you can quickly undo and redo
them. In addition, you can select multiple actions, and then save and reuse them as commands.
For more information, see “Using the History panel to undo and repeat multiple actions,” in
Fireworks Help.
The Shapes panel contains Auto Shapes that are not displayed in the Tools panel.
The Styles panel lets you store and reuse combinations of object characteristics or choose a
stock style.
The Library panel contains graphic symbols, button symbols, and animation symbols. You can
easily drag instances of these symbols from the Library panel to your document. You can make
global changes to all instances by modifying only the symbol.
The URL panel lets you create libraries containing frequently used URLs.
The Color Mixer panel lets you create new colors to add to the current document’s color palette
or to apply to selected objects.
individual actions.
■ Shift-click to highlight a continuous range of actions.
Panels
The integrated workspace is not supported on the Macintosh. However, panels and toolbars
are docked together by default in a configuration that resembles the integrated workspace
in Windows.
On all operating systems, FreeHand panels, toolbars, and windows can be rearranged,
repositioned, and docked to one another.
For more details about the FreeHand workspace, see the sections that follow. More extensive
information is also available in the “FreeHand Basics” chapter of Using FreeHand Help.
Using panels
When you start FreeHand, visible panels (excluding the Tools panel) are docked together at the
right edge of the application window. You can move, separate, or combine these customizable
panel groups. Panels and panel groups can be opened, closed, docked, expanded, and collapsed.
The following panels are grouped together by default:
• The Object and Document panels reside in a panel group called Properties.
• The Swatches, Styles, and Library panels reside in a panel group called Assets.
• The Color Mixer and Tints panels reside in a panel group called Mixer and Tints.
• The Align and Transform panels reside in a panel group called Align and Transform.
• The Find & Replace panel and the Select panel reside in a panel group called Find & Replace
and Select.
• The Halftones, Layers, Answers, and Navigation panels are not grouped with other panels by
default, but you can group them if you want. With the exception of the Properties and Assets
panel groups, when you group panels together, all panel group names appear in the panel
group title bar. You can, however, name panel groups anything you like; see “Grouping
panels” in Using FreeHand Help.
The Layers panel, the Answers panel, and the Properties, Assets, and Mixer and Tints panel
groups appear onscreen by default when you first open FreeHand, although some may
be collapsed.
For more information about panels, see “Using panels” in Using FreeHand Help.
A web application is a collection of web pages that interact with visitors, with each other, and with
various resources on a web server, including databases. Before you start building your own web
applications, you should be familiar with the concepts discussed in this chapter.
The chapter contains the following topics:
• “About web applications” on page 51
• “How a web application works” on page 52
• “Authoring dynamic pages” on page 56
• “Choosing a server technology” on page 57
• “Web application terminology” on page 58
51
• Update websites that have constantly changing content.
A web application frees the web designer from continually updating the site’s HTML.
Content providers such as news editors provide the web application with content, and the
web application updates the site automatically. Examples include the Economist
(www.economist.com) and CNN (www.cnn.com).
When the web server receives a request for a static page, the server reads the request, finds the
page, and sends it to the requesting browser, as shown in the following figure:
Web browser
Step 1 - Web
browser requests
static page.
Request Response
Step 3 - Web
server sends page
WEB SERVER to requesting
browser.
Step 2 - Web
server finds page.
<HTML>
<p>Hi
</HTML>
Static page
In the case of web applications, certain lines of code are undetermined when the visitor requests
the page. These lines must be determined by some mechanism before the page can be sent to the
browser. The mechanism is discussed in the following section.
Web browser
Step 1 - Web
browser requests
dynamic page.
Request Response
Step 5 - Web server
sends finished page to
requesting browser.
WEB SERVER
Step 2 - Web
server finds page
and passes it to <HTML> <HTML>
application server. <code> <p>Hi
</HTML> </HTML>
Step 4-
Application server
passes finished
Step 3- page back to web
Application server server.
scans page for
instructions and Application server
finishes page.
Accessing a database
An application server lets you work with server-side resources such as databases. For example, a
dynamic page may instruct the application server to extract data from a database and insert it into
the page’s HTML. For more information, see the appendix “Beginner’s Guide to Databases” in
Using Dreamweaver Help.
The instruction to extract data from a database is called a database query. A query consists of
search criteria expressed in a database language called SQL (Structured Query Language). The
SQL query is written into the page’s server-side scripts or tags.
An application server cannot communicate directly with a database because the database’s
proprietary format renders the data undecipherable in much the same way that a Microsoft Word
document opened in Notepad or BBEdit may be undecipherable. The application server can
communicate with the database only through the intermediary of a database driver: software that
acts like an interpreter between the application server and the database.
Request Response
Step 4 - Application
server sends query to Step 7 - Driver
database driver. passes recordset to
application server.
Query Recordset
Database
PHP PHP
Records
(rows)
A database driver is software that acts as an interpreter between a web application and a
database. Data in a database is stored in a proprietary format. A database driver lets the web
application read and manipulate data that would otherwise be undecipherable.
A database management system (DBMS, or database system) is software used to create
and manipulate databases. Common database systems include Microsoft Access, Oracle 9i,
and MySQL.
A database query is the operation that extracts a recordset from a database. A query consists of
search criteria expressed in a database language called SQL. For example, the query can specify
that only certain columns or only certain records be included in the recordset.
A dynamic page is a web page customized by an application server before the page is sent to a
browser. For more information, see “How a web application works” on page 52.
Database table
Recordset table
A relational database is a database containing more than one table, with the tables sharing data.
The following database is relational because two tables share the DepartmentID column.
A server technology is the technology that an application server uses to modify dynamic pages
at runtime.
The Dreamweaver development environment supports the following server technologies:
• Macromedia ColdFusion
• Microsoft ASP.NET
• Microsoft Active Server Pages (ASP)
• Sun JavaServer Pages (JSP)
• PHP: Hypertext Preprocessor (PHP)
You can also use the Dreamweaver coding environment to develop pages for any other server
technology not listed above.
A static page is a web page that is not modified by an application server before the page is sent to
a browser. For more information, see “Processing static web pages” on page 52.
A web application is a website that contains pages with partly or entirely undetermined content.
The final content of these pages is determined only when a visitor requests a page from the web
server. Because the final content of the page varies from request to request based on the visitor’s
actions, this kind of page is called a dynamic page.
To develop and test dynamic web pages, you need a functioning web server. This chapter
describes how most Windows users can install and use a Microsoft web server on their
local computer.
If you’re a Windows user and you want to develop ColdFusion sites, you can use the web server
included in the developer edition of the ColdFusion MX application server, which you can install
and use for free. For more information, see Chapter 6, “Setup for Sample ColdFusion Site,”
on page 67.
If you’re a Macintosh user, you can use a web server on a network computer or a web hosting
company. If you want to develop PHP applications, you can use the Apache web server already
installed on your Macintosh.
This chapter contains the following sections:
• “Getting started” on page 62
• “Installing Personal Web Server” on page 62
• “Installing Internet Information Server” on page 63
• “Testing PWS or IIS” on page 63
• “Testing the Macintosh web server (PHP developers)” on page 64
• “Web server basics” on page 64
Note: Macromedia does not provide technical support for third-party software such as Microsoft
Internet Information Server. If you need assistance with a Microsoft product, please contact Microsoft
technical support.
61
Getting started
If you’re a Windows user, you can install and run the following web servers on your computer:
Microsoft Personal Web Server (PWS) or Internet Information Server (IIS), a full-featured
version of PWS. You can also install the web server on a networked Windows computer so other
developers on your team can use it.
If you’re a Windows user and want to develop ColdFusion applications, you can instead use the
web server installed with the developer edition of the ColdFusion MX. For more information, see
Chapter 6, “Setup for Sample ColdFusion Site,” on page 67.
PWS or IIS may already be installed on your computer. Check your folder structure to see if it
contains a C:\Inetpub or D:\Inetpub folder. PWS and IIS create this folder during installation.
If the folder does not exist, do one of the following:
Windows 98 Copy the PWS setup file from the Windows 98 CD to your hard disk. The file is
located in the Add-Ons/PWS folder. Next, install the web server. For instructions, see “Installing
Personal Web Server” on page 62.
Windows 2000 Install IIS. For more information, see “Installing Internet Information Server”
on page 63.
Windows XP Professional Install IIS. For more information, see “Installing Internet
Information Server” on page 63.
If you’re a Macintosh user interested in developing PHP applications, you can use the Apache web
server already installed on your Macintosh. For more information, see “Testing the Macintosh
web server (PHP developers)” on page 64.
If the browser displays your page, the web server is running normally.
If the browser fails to display the page, make sure the server is running. For example, for PWS,
double-click the web server icon in the system tray (the icon looks like a hand holding a web
page). The Personal Web Manager dialog box appears. If the Publishing panel tells you that web
publishing is off, click the Start button, then enter the appropriate URL in your browser again.
If the page still fails to open, make sure your test page is located in the Inetpub\wwwroot folder
and has a .htm or .html file extension.
If the browser displays your page, the web server is running normally. If the browser fails to
display the page, make sure the web server is started by opening System Preferences and looking at
the Sharing preference panel. The Personal Web Sharing option should be enabled.
Your Apache web server won’t work with PHP by default; you must configure it before you can
use PHP. For more information, see “Configuring your system (PHP)” in the Dreamweaver
Getting Started guide (available within Dreamweaver Help).
You can also open any web page stored in any subfolder of the root folder by specifying the
subfolder in the URL. For example, suppose the soleil.html file is stored in a subfolder called
gamelan, as follows:
C:\Inetpub\wwwroot\gamelan\soleil.html
You can open this page by entering the following URL in a browser running on your computer:
http://mer_noire/gamelan/soleil.html
This chapter guides you through the process of setting up a development environment for a
sample site that uses Macromedia ColdFusion MX. During installation, ColdFusion MX, which
includes a built-in web server, creates a CFusionMX folder at the root level of your computer’s
main hard drive (the equivalent of the Inetpub directory for IIS users). After you complete the
setup described in this chapter, you are ready to complete the tutorials in Part 2 of this book.
If you want to use a different web server with ColdFusion, make sure that the web server is
installed on your system before you install ColdFusion. For more information see, Chapter 5,
“Installing a Web Server,” on page 61.
If you are an ASP, ASP.NET, JSP, or PHP developer, you can find quick instructions for setting
up your development environment in the Dreamweaver Getting Started manual (Help > Getting
Started and Tutorials). More extensive instructions are also available in Dreamweaver Help
(Help > Using Dreamweaver).
Note: The sample database referred to in the ColdFusion, ASP, ASP.NET, JSP, and PHP
Dreamweaver Getting Started chapters is different from the one referred to in this chapter.
67
Connect to the database:
1 Copy the sample database to your computer, or if you have a remote server configuration, copy
the sample database to the remote computer.
2 Create a ColdFusion data source in ColdFusion Administrator.
3 View the connection in Dreamweaver.
Installing ColdFusion MX
ColdFusion MX Server Developer Edition is available for Windows, Linux, Solaris, and HP-UX
systems, and comes packaged with your other Studio MX 2004 tools. For information on
ColdFusion MX installation requirements, please visit www.macromedia.com/go/sysreqs.
Note: ColdFusion MX Developer Edition differs from the Standard and Enterprise editions as
follows: It's free for noncommercial use for developing and testing web applications on a local host
and one remote IP address. It is not licensed for deployment. It includes every feature in the Standard
and Enterprise editions except Macromedia ClusterCATS. After 30 days, it supports requests from
only one IP address, but you can still use it for development and testing work as long as you want; it
doesn’t expire.
ColdFusion MX is not installed automatically when you install the Studio MX 2004 tools. You
must install the software separately. Macromedia recommends that you consult the ColdFusion
MX installation instructions before and during installation. For more information, see “Installing
and Using ColdFusion MX” in Using ColdFusion Help (available from within the Dreamweaver
Help menu).
To install ColdFusion MX:
1 Close all open applications.
2 If applicable, log in to the Windows system, using the Administrator account.
3 Insert your Macromedia Studio MX 2004 CD. When the installation screen appears, click the
ColdFusion MX Server installation bar.
4 Follow the installation instructions.
Note: You do not need to provide a serial number when installing ColdFusion MX Server
Developer Edition.
• Enter an RDS password during the RDS Setup. The ColdFusion Remote Development
Service (RDS) lets developers using Macromedia tools remotely connect to servers for
development purposes. The RDS password can be the same as the ColdFusion MX
Administrator password. For more information, see “About ColdFusion MX Security” in
Using ColdFusion Help (available from within the Dreamweaver Help menu).
Macintosh users can use a web hosting service with a ColdFusion plan or install ColdFusion on a
remote Windows, Linux, Solaris, or HP-UX computer running a web server. For more
information, see “Setting Up a Web Application” in Using Dreamweaver Help.
Note: Macintosh users can also install ColdFusion MX on a Mac OS X computer running a J2EE
server such as JRun or Tomcat. For more information, see the Macromedia website at
www.macromedia.com/go/coldfusion_macintosh/. The installation process is complex, and
Dreamweaver has not been tested with ColdFusion MX on the Macintosh. Also, it may be difficult to
connect ColdFusion MX on the Macintosh to database systems such as MySQL.
Later, when you complete the tutorials in Part 2 of this book, you’ll post your ColdFusion pages
to this folder so that the application server can process them and deliver dynamic data to
the browser.
For more information, see “Setting Up a Web Application” in Using Dreamweaver Help.
If the page doesn’t work as expected, check for the following possible errors:
• The file does not have a .cfm extension.
• The page’s file path (c:\CFusionMX\wwwroot\trio_motors\test.cfm), not its URL (for
example, http://localhost:8500/trio_motors/test.cfm), is entered in the browser’s Address
text box.
If you type a file path in the browser (as you might be used to doing with normal HTML
pages), you bypass the web server and the application server. As a result, your page is never
processed by the server.
• The URL contains a typing mistake. Check for errors and make sure that the filename does
not end with a slash, such as http://localhost:8500/trio_motors/test.cfm/.
• The page code contains a typing mistake.
5 If the wizard (Basic tab) appears, click the Advanced tab and select Local Info from the Category
list (it should be the default).
6 In the Site Name text box, enter Trio Motors as the name of the site.
7 In the Local Root Folder text box, specify the trio_motors folder that you created in step 1. You
can click the folder icon to browse to and select the folder, or enter a path in the Local Root
Folder text box.
8 In the Default Images Folder text box, specify the images folder that you created in step 2. You
can click the folder icon to browse to and select the folder, or enter a path in the Default Images
Folder text box.
Leave the Site Definition dialog box open. Next, you will specify a remote folder.
Dreamweaver also supports the SourceSafe Database and WebDAV access methods. For more
information, see “Setting Remote Info category options” in Using Dreamweaver Help.
3 After selecting an access method, set the access options as appropriate.
The access options pictured below define the root folder, trio_motors, as the remote folder. In
this case the trio_motors folder resides in the CFusionMX\wwwroot folder—the folder that is
published by the built-in web server.
For more information, see “Creating a root folder for your application” on page 69, or “Setting
up a Remote Info folder” in Using Dreamweaver Help.
Leave the Site Definition dialog box open. You will now define a folder to process dynamic pages.
For more information, Click the Help button in the Testing Server dialog box.
7 Click OK, and then click Done.
Dreamweaver adds the new site to your list of sites in the Files panel.
Modify Data
Sources icon
For more information about database drivers, see the appendix “Beginner’s Guide to
Databases” in Using Dreamweaver Help.
12 Click the Browse Server button next to the Database File text field, and browse to the Microsoft
Access database for Trio Motors.
If ColdFusion is running on your local computer, you’ll browse to the database file that you
copied to your hard drive from the Macromedia Studio MX 2004 CD. For more information,
see the beginning of this section, “Connecting to the sample database” on page 76.
If ColdFusion is running on a remote computer, create a data source that points to the
database file that you placed on the remote computer. See “Setting up the database (remote
server configuration only)” on page 77.
13 Click Apply.
ColdFusion Administrator populates the Database File field with the correct path to
the database.
14 (Optional) Enter a description of the database in the Description text field.
If you selected a valid database file path and you have the correct drivers installed on your
system, ColdFusion Administrator shows an OK status in the Status column of the Connected
Data Sources window.
For more information, including information about connecting to data sources using Oracle,
MySQL, and other drivers, see the ColdFusion Administrator documentation. You can access
the ColdFusion Administrator documentation by clicking the Documentation link at the top
of the ColdFusion Administrator screen.
Refresh button
Note: You may need to click the Refresh button to see the new data source.
You set your RDS login password when you installed ColdFusion MX. The RDS password is
often (but not necessarily) the same as your ColdFusion Administrator password. To change
your RDS password, click the RDS Password link in the Security category of ColdFusion
Administrator, and follow the instructions.
PART II
Working with Macromedia Studio
Build assets for a dynamic website, using Macromedia Dreamweaver MX 2004, Macromedia
Flash MX 2004, Macromedia Fireworks MX 2004, Macromedia FreeHand MX, and
Macromedia ColdFusion MX.
Before you begin, make sure that you’ve configured your system, defined a Dreamweaver site, and
connected to a database. For more information, see Chapter 6, “Setup for Sample ColdFusion
Site,” on page 67.
This part contains the following sections:
Chapter 7, “Web Development Workflow,” on page 85
Tutorial 1, “Sketching a Site Navigation Scheme in FreeHand,” on page 109
Tutorial 2, “Creating a Table-based Page Layout in Dreamweaver,” on page 123
Tutorial 3, “Creating a Banner Graphic in Fireworks,” on page 131
Tutorial 4, “Building a Navigation Bar with Fireworks,” on page 139
Tutorial 5, “Building Rich Media with Fireworks and Flash,” on page 155
Tutorial 6, “Assembling and Editing Studio Assets,” on page 167
Tutorial 7, “Building a Database Search Feature,” on page 179
CHAPTER 7
Web Development Workflow
This chapter demonstrates how the individual components of Macromedia Studio MX 2004—
Macromedia Dreamweaver MX 2004, Macromedia Flash MX 2004, Macromedia Fireworks MX
2004, Macromedia FreeHand MX, and Macromedia ColdFusion MX—work together to provide
an optimal design and application development environment for web designers and developers.
Together, the tools of Studio MX make up a complete environment for designing and
developing client-side interfaces for rich content and applications, and server-side logic for
applications deployed with HTML clients, Flash clients, ColdFusion, and a variety of other
server technologies.
A typical web development workflow involves the following stages:
• Planning the site, which includes defining the site’s strategy or goals, targeting an audience,
and determining your site’s data requirements
• Setting up the development environment, which includes selecting your web and application
servers, defining a site with Dreamweaver, and defining data sources
• Planning page design and layout, which includes mapping out your pages and application
interfaces with a drawing tool such as FreeHand, and laying out the pages in HTML
with Dreamweaver
• Creating content assets, which includes creating images and rich media with Flash, Fireworks,
and FreeHand
• Building application assets, which includes creating dynamic pages and Rich Internet
Applications with Dreamweaver and Flash
• Assembling, testing, and deploying your site, which includes compiling your assets, ensuring
that you have met accessibility requirements, testing your code, and publishing your site to a
server with Dreamweaver
Studio MX 2004 gives you all the tools you need to work through this process from start to finish.
The combination of Dreamweaver, Flash, Fireworks, FreeHand, and ColdFusion lets you easily
create, deploy, and maintain engaging, dynamic websites and applications in both coding and
design environments. Your end results will be richer user interfaces and more robust
application logic.
85
This chapter introduces a sample web development workflow. Although it suggests methods for
maximizing your design and development efforts, it does not provide the only workflow possible.
The workflow that you and your team members adopt will depend on your resources, your
personal working habits, and the needs of your website. This chapter is intended to provide ideas
and best practices for designing and developing websites and applications with Studio MX 2004.
For more information on any of the individual products in Studio MX 2004, see Chapters 1
through 3 of this book, or see each product’s help system by selecting Using Dreamweaver, Using
Flash, Fireworks Help, or Using FreeHand from the Help menu.
After you decide on the number and types of tables in your database, choose the columns for each
table. Columns describe the properties of each entity or record in the table. For example, you
might have a database table called Players that contains information about members of a hockey
team. The Players table might have a column for each team member’s first name, last name,
position, number of goals, and so on (see the preceding image). Each horizontal row in the
Players table represents a single record for an individual team member, much like a trading card
that gives information about a player.
Make sure that each of your tables has a primary key column. This column contains values that
identify each record uniquely; that is, the value is unique across all records. This allows you to
pinpoint a row when searching the database. Most primary key columns contain ID numbers, but
you can use other primary keys such as government form numbers or product serial numbers.
For more information, see the appendix “Beginner’s Guide to Databases” in Using
Dreamweaver Help.
The new Connector tool allows you to connect sections of your preliminary site plan with point-
and-click ease. FreeHand also provides common user interface elements that help you easily
integrate Flash and Fireworks into your web development workflow. For example, the Tools
panel is one of many user interface elements shared by these Studio MX 2004 products. It
contains tools that allow you to select, draw, and edit objects, apply color to objects, create text,
and more.
After sketching your site navigation, you can present the preliminary plan to your client or to
members of your group. FreeHand allows you to convert your drawing to a Flash SWF file in one
easy step. The Export feature exports your document as Flash content that can be played on any
computer running Macromedia Flash Player.
To create a site navigation, see Tutorial 1, “Sketching a Site Navigation Scheme in FreeHand,”
on page 109.
Make sure that the application server that you want to use works with your web server. For
example, the .NET Framework works only with Microsoft IIS, which includes both a web server
and an application server. ColdFusion also includes both a web server and an application server,
but the ColdFusion web server is not recommended for production environments.
After your web and application servers are up and running, create a root folder for your
application on the computer that’s running the web server. Make sure that the folder is published
by the web server—in other words, that the web server can serve any file in this folder or in any of
its subfolders in response to an HTTP request from a web browser. For example, on a computer
running PWS or IIS, any file in the Inetpub/wwwroot folder or in any of its subfolders can be
served to a web browser. If you are using the ColdFusion web server for development, any file in
the CFusionMX/wwwroot folder or in any of its subfolders can be served to a web browser.
Local view displays the website files that you are storing on your local computer.
Remote view displays the files that you have published to your web server. If you are developing
a web application, the remote folder is the root folder that you created for your web application
on the web server.
Testing Server view displays the directory structure of the testing server. Typically, this is also
the root folder that you created for your web application on the web server.
Map view displays a graphical map of your site, based on how the documents are linked to
one another.
For more information, see Chapter 6, “Setup for Sample ColdFusion Site,” on page 67, or
“Setting up a Dreamweaver site” in Using Dreamweaver Help.
You can modify these data sources directly from the Dreamweaver workspace. Click the Modify
Data Sources button in the upper right corner of the Databases panel, and Dreamweaver
automatically starts ColdFusion Administrator.
For more information, see Chapter 6, “Setup for Sample ColdFusion Site,” on page 67, or see
“Database connections for ColdFusion developers” in Using Dreamweaver Help.
For more information on ASP.NET, ASP, JSP, and PHP database connectivity, see “Database
connections for ASP.NET developers,” “Database connections for ASP developers,” “Database
connections for JSP developers,” and “Database connections for PHP developers” in Using
Dreamweaver Help.
You can use the File Management button if your document resides in a Studio MX 2004 site
folder and the site has access to a remote server. Fireworks recognizes your folder as a site if you
have used the Manage Site dialog box in Dreamweaver MX 2004 to define the target folder, or a
folder that contains the target folder, as the local root folder. You can use this button to get files,
check them out and in, copy files from the local site to a remote site (Put), or undo checkout.
For more information, see “Using the File Management button” in Fireworks Help.
FreeHand and Fireworks let you create sophisticated illustrations, whether you are drawing your
initial designs entirely from scratch, or assembling already created images such as GIF and JPEG
files. Many of the tools in FreeHand and Fireworks, as well as in Flash, look and behave exactly
the same, offering a seamless transition when you work between applications. Additionally, color
selection models and interfaces look and behave identically across the Studio MX 2004 products.
When you finish sketching your preliminary design, you can export your FreeHand or Fireworks
files as Flash SWF files. Any computer running Flash Player can then display your work.
For more information, see Using FreeHand Help and Fireworks Help.
For more information about laying out pages in Dreamweaver, including information about
laying out pages with tables, layout cells, frames, and CSS, see “Laying Out Pages” in Using
Dreamweaver Help.
To begin creating a table-based page layout in Dreamweaver, see Tutorial 2, “Creating a Table-
based Page Layout in Dreamweaver,” on page 123.
Using Flash, you can animate objects to make them appear to move across the Stage, and to
change their shape, size, color, opacity, rotation, and other properties. You can create frame-by-
frame animation, in which you designate a separate image for each frame, or tweened animation,
in which you set the first and last frames of an animation and direct Flash to create the frames
in between.
Additionally, Flash provides a variety of methods for creating original artwork and importing
artwork from other applications. You can create objects with the drawing and painting tools, as
well as modify the attributes of existing objects. You can also import vector graphics, bitmap
graphics, and video from other applications, such as FreeHand and Fireworks, and modify the
imported graphics in Flash.
To begin building Flash content assets, see Tutorial 5, “Building Rich Media with Fireworks and
Flash,” on page 155.
You can open the Recordset dialog box either by clicking the Recordset button in Application
category of the Insert bar, or by clicking the Plus (+) button in the Bindings panel (Window >
Bindings) and choosing Recordset (Query). The Simple Recordset dialog box lets you select an
existing database connection and create a database query by selecting the table or tables whose
data you want to include in the recordset. You can even use the Filter section of the dialog box to
create simple search and return criteria for the query. You can test the query from within the
Recordset dialog box and make any necessary adjustments before adding it to the Bindings panel.
When a database connection is established and a recordset is defined, the recordset appears in the
Bindings panel.
In the preceding illustration, you can see a page displaying dynamic placeholders that have been
dragged to the page from the Bindings panel. In front of the Dreamweaver file, you can see the
output exactly as a user viewing the page in a browser window would see it. The Dreamweaver file
includes a Repeat Region server behavior, which allows you to display multiple records on a single
page. (In this case, it displays the first three records in the database.)
In addition to displaying dynamic data, Dreamweaver lets you build sets of pages that let your
users search, insert, delete, and update records in your database. For example, you can rapidly
develop a powerful application for posting a directory of employees on your company’s intranet;
searching the directory by name, department, and so forth; adding records to and deleting them
from the directory, and changing records in the database. You can do all this without ever typing
a line of code. More advanced users have the option of using the enhanced coding environment
in Dreamweaver.
For more information, see “Making Pages Dynamic” and “Developing Applications Rapidly” in
Using Dreamweaver Help.
To begin building a simple search feature in Dreamweaver, see Tutorial 7, “Building a Database
Search Feature,” on page 179.
Flash UI components ensure a common user experience across Rich Internet Applications created
with Flash. You can also create customized, reusable components to meet the demands of a
variety of projects. For more information, see the Using Components manual (available within
Flash Help).
With Rich Internet Applications you can reach millions of users while reducing server load and
content download time. You can include animation, audio, video, and two-way messaging in a
single interface; deliver fully accessible content to users with disabilities; provide immediate rich
content experiences regardless of connection speed; and develop for multiple device platforms
(such as wireless handsets, ITV, and game consoles), allowing rich content and applications to be
viewed anywhere. Because the information exchanged between Flash Player and the application
server does not require a full-page refresh, you have the benefit of lower bandwidth costs,
increased user efficiency, and a more positive user experience.
For more information, visit the Rich Internet Applications Topic Center at
www.macromedia.com/go/developer_ria/.
In addition to dragging saved assets to the page from the Assets panel, you can do the following:
• Type directly in a Dreamweaver document, or import text from other documents, and then
format the text with CSS styles by using the Dreamweaver Property inspector or Tag inspector.
• Insert images, including rollover images, image maps, and Fireworks sliced images. Alignment
tools help you position images on a page.
• Insert other types of media in a web page, such as Flash, Shockwave, and QuickTime movies,
sound, and applets.
• Add content in Dreamweaver Code view. Using Dreamweaver Code view or the Code
inspector, you can write your own HTML, JavaScript, CFML, PHP, Visual Basic, C#, and
CSS code.
• Create standard HTML links, including anchor links and e-mail links, or easily set up
graphical navigation systems, such as jump menus and navigation bars.
• Apply reusable content throughout your site by using Dreamweaver templates and library
items. You can create new pages from a template and then add or change content in the
editable areas.
For more complex editing, you can start Fireworks to edit images inserted into a Dreamweaver
document by selecting the image and clicking the Fireworks Edit button in the Property
inspector. When you start and edit an image or an image slice that is part of a Fireworks table,
Dreamweaver starts Fireworks and opens the PNG file from which the image was exported.
In the PNG file’s window, Fireworks tells you that you are editing the image from Dreamweaver.
When you finish your edits and close the PNG file, your saved changes appear in the image in the
Dreamweaver document (GIF, JPG, and so on) that you selected for editing.
Similarly, you can edit Flash files by selecting the Flash movie placeholder in the Dreamweaver
document and clicking the Flash Edit button in the Property inspector. Dreamweaver opens the
Flash file (FLA) and saves any changes you make in it to the SWF file.
To learn more about assembling and editing Studio MX assets, see Tutorial 6, “Assembling and
Editing Studio Assets,” on page 167.
Alternatively, you can click the Put button in the Files panel toolbar, or select Site > Put to
upload your file. If the file hasn’t been saved, a dialog box may appear (depending on your
preference setting in the Site category of the Preferences dialog box) asking whether to save the
file before putting it on the remote server.
For more information, see “Managing Your Files” in Using Dreamweaver Help.
This tutorial illustrates how you can use Macromedia FreeHand MX to create preliminary
sketches of your site’s navigation scheme. The site navigation scheme is a map that shows how
your web pages relate to one another. Specifically, it shows how users will travel through your site
as they click links and interact with application interfaces. A site’s navigation scheme is normally
reflected in the navigation bars that are used on web pages.
Before proceeding with the tutorial, you might want to read more about preliminary site planning
in Chapter 7, “Web Development Workflow.” For more information, see “Planning your website”
on page 86.
This tutorial contains the following sections:
“Plan the site navigation” on page 109
“Customize FreeHand for multimedia/web output” on page 110
“Create rectangles for the navigation scheme” on page 112
“Change rectangle text” on page 116
“Add connector lines to the document” on page 118
“Export the plan as a SWF file” on page 121
109
As the web developer for the Trio Motors website, you decide on a simple navigation scheme that
will consist of five links, all centralized on a home page. At the top of the home page, you’ll create
a Macromedia Fireworks MX 2004 navigation bar that links to separate pages called Showroom,
News and Events, Owners, Financial Services, and Previews. Elsewhere on the page, you’ll create
a link to a special page that provides current information about a featured technology. You’ll also
create a link to a results page that displays the results of the search application.
3 In the Property inspector (Window > Document), click the Document tab.
4 Select Web from the Page Size pop-up menu.
This creates a page with a predefined size of 550 pixels by 400 pixels. You can also select
Custom from the Page Size pop-up menu, and enter pixel dimensions of your own.
5 Select Edit > Preferences.
The Preferences dialog box appears.
Turning off Color Management allows you to view colors in a generic RGB environment.
7 Click OK.
8 (Optional) Select Fit Page from the Magnification pop-up menu in the lower left corner of the
Document window.
This option sets the magnification level so that the active page fits inside the Document
window. You can also set magnification levels manually. The magnification with which you
choose to work depends on your monitor size and your own preferences.
9 Save the new document (File > Save) as trio_navigation.FH11.
Optionally, you can save the new file in the main directory of the Dreamweaver site you
created in Chapter 6, “Setup for Sample ColdFusion Site.” It is good practice to keep all site-
related files in the same location.
Rectangle tool
When you release the mouse button, the new rectangle is selected. Leave the rectangle selected
so that you can alter its properties.
Note: This tutorial uses the example of a rectangle that is 135 pixels wide by 52 pixels high. You
can view and set the exact dimensions of a rectangle on the Object tab of the Property inspector
(Window > Object).
4 With the rectangle still selected, click the Stroke color box, and use the pop-up color palette to
select a color for the outline of the rectangle. The Stroke color box is above the Fill color box in
the Tools panel. The example uses a darker blue (000033) for the rectangle’s stroke.
5 Save your document (File > Save). Remember to save your work often as you make changes.
6 In the Tools panel, click the Text tool and click once inside the rectangle.
Text tool
A text block appears inside the rectangle with a text ruler on top of it.
8 In the Tools panel, click the Fill color box and select a fill color for the text. The example uses
000033, the same color as the outline of the rectangle.
9 Type the word Home inside the rectangle.
The text aligns vertically and horizontally in the center of the rectangle.
13 With the rectangle and text block still selected, select Modify > Group.
The rectangle and text block become a grouped object.
15 Drag the duplicate copy of the object below the original rectangle, as shown.
16 Continue to clone and drag the original grouped object until you have eight objects on the page.
Use the Pointer tool to arrange your rectangles as follows:
You can also use the arrow keys on your computer keyboard to position the rectangles more
precisely. The arrow keys move objects up, down, left, or right, one pixel at a time.
Subselect tool
2 Click the word Home in the second rectangle (below the first rectangle on the page) to select the
text block.
3 In the Tools panel, click the Text tool.
4 Select the text in the selected text block by holding down the mouse button as you drag over the
word Home.
5 Type the word Showroom.
Connector
tool
2 Move the pointer over the bottom line of the Home rectangle.
3 Hold down the mouse button and drag a connector line down to the top line of the Showroom
rectangle. When you begin dragging, the Home rectangle becomes selected, indicating that
there is an object from which a connector line can start. When you reach the Showroom
rectangle, it also becomes selected, indicating that there is an object where the connector line
can end.
5 Position the pointer near the starting point of the connector line you drew in the previous steps
(the bottom line of the Home rectangle) and hold down the mouse button so that the Home
rectangle is selected again.
7 Draw a third connector line from the bottom of the Home rectangle to the top of the
Owners rectangle.
8 Draw a fourth connector line from the bottom line of the Home rectangle to the top line of the
Financial Services rectangle.
9 Move the pointer over the handle at the center of the horizontal line you drew in step 8.
The pointer changes to a resize pointer.
11 Continue drawing connector lines until you have linked the Home rectangle to all the other
rectangles on the page. Reshape connector lines as necessary by dragging the resize handles on
the connector lines.
You now have a FreeHand document that shows the full navigation scheme. Your lines indicate
that the Home page links to five separate pages called Showroom, News and Events, Owners,
Financial Services, and Previews. It also links to a page about a featured technology, as well as to a
page that provides the results of the search application that you’ll build later.
2 Select Macromedia Flash (SWF) from the Save As Type pop-up menu (Windows) or Format
pop-up menu (Macintosh).
3 (Optional) If you want the file to open with Macromedia Flash Player immediately upon
export, select Open in External Application, select Macromedia Flash Player from the External
Application dialog box, and click Open.
You can now present the plan on any computer running a web browser and Flash Player. To
view the plan in a browser window, drag the trio_navigation.swf file to an open browser such
as Internet Explorer or Netscape Navigator. You can also present the plan with Flash Player
alone by double-clicking the file.
Note: When you open the trio_navigation.swf file in a browser, the plan is automatically resized to
fit in the browser window.
Completed versions of the files you created in this tutorial are available in the
trio_motors_complete directory on your Studio MX 2004 CD. To locate the directory, insert
your Studio MX 2004 CD, click Browse CD contents, and select the Samples folder.
For more information about any of the procedures in this tutorial, see Using FreeHand Help.
This tutorial explains how to create a table-based page layout in Macromedia Dreamweaver MX
2004. A page layout determines how your page will appear in the browser, showing, for example,
the placement of menus, images, and Macromedia Flash MX 2004 content.
Before you proceed with the tutorial, you might want to read more about page design and layout
in Chapter 7, “Web Development Workflow.” The chapter describes various features for laying
out pages in Dreamweaver, including Layout cells and Cascading Style Sheets (CSS). For more
information, see “Planning page design and layout” on page 93.
This tutorial contains the following sections:
“Insert tables” on page 123
“Set table properties” on page 125
“Insert an image placeholder” on page 128
“Add placeholder text to table cells” on page 128
Insert tables
You’ll begin this tutorial by inserting tables that will later hold text, graphics, and application
assets. The page eventually becomes the home page for Trio Motors, a fictional company that sells
energy-efficient automobiles.
1 In Dreamweaver, open the index.cfm that you created in Chapter 6, “Setup for Sample
ColdFusion Site.”
Note: If you did not complete the Macromedia ColdFusion MX site setup described in Chapter 6,
you need to do so before proceeding. The Dreamweaver tutorials in Part 2 of this book build upon
one another and require that you define a Dreamweaver site, create folders to hold your assets,
and establish a database connection.
If you don’t have ColdFusion MX, you can still do this tutorial by using a blank HTML page instead
of a ColdFusion page. To create a blank HTML page, select File > New. On the General tab of the
New Document dialog box, select Basic Page from the Category list, select HTML from the Basic
Page list, and click Create.
2 Click once on the page to place the insertion point in the upper left corner of the page.
3 Select Insert > Table.
The Insert Table dialog box appears.
123
4 In the Insert Table dialog box, do the following:
■ Enter 1 in the Rows text box.
■ Enter 1 in the Columns text box.
■ Enter 650 in the Table width text box.
■ Select Pixels from the Table Width pop-up menu.
■ Enter 0 in the Border Thickness text box.
■ Enter 0 in the Cell Padding text box.
■ Enter 0 in the Cell Spacing text box.
5 Click OK.
A table with one row and one column appears in your document.
6 Click once on the page to the right of the table to deselect it.
7 Select Insert > Table again to insert another table.
8 In the Insert Table dialog box, do the following for the second table:
■ Enter 2 in the Rows text box.
A second table, with two rows and one column, appears below your first table.
A third table, with one row and two columns, appears below your second table.
Click to the right of the table to deselect it. Your page should now look as follows:
Note: You may see the Table selector (indicated by green lines) after you insert a table. To make
the Table selector disappear, click inside another table and click outside the table again.
4 Click to the right of the first table to place the insertion point outside the table.
5 Press Shift-Enter (Windows) or Shift-Return (Macintosh) to place a line break between the first
table and the second table.
6 Click once inside the first row of the second table.
Note: You do not see the height of the gray table cell change to 10 pixels because you are in
Expanded Tables mode.
13 Click the Exit Expanded Tables Mode link at the top of the Document window to return to
Standard mode.
■ Type Trio Motors Banner Graphic in the Alternate Text text box.
4 Click OK.
The image placeholder appears inside the first table. The image placeholder displays a label and
the size attributes of the image that you’ll eventually create.
Note: When viewed in a browser the label and size text for an image placeholder do not appear.
In the next tutorial, Tutorial 3, “Creating a Banner Graphic in Fireworks,” you’ll use Macromedia
Fireworks MX 2004 to create the Trio Motors banner graphic and replace the image placeholder.
You now have a page layout with tables, an image placeholder, and predefined CSS styles. In the
tutorials that follow, you’ll develop assets by using other Macromedia Studio MX 2004
applications. Later, you’ll assemble these assets into the layout page that you just created.
For more information about table-based layouts, see “Presenting Content with Tables” in Using
Dreamweaver Help.
This tutorial shows you how to create a Macromedia Fireworks MX 2004 banner graphic that
includes images and text. The finished product will appear at the top of the Trio Motors home
page that you’re creating.
Before you begin, you must copy the sample files for this tutorial to your computer. To locate the
sample files, insert the Macromedia Studio MX 2004 CD into your computer and click Browse
CD Contents at the lower right corner of the installation screen. Copy the Samples folder to your
hard drive (for example to your Desktop, or to the main directory of the Dreamweaver site you
created in Chapter 6, “Setup for Sample ColdFusion Site”). The Samples folder contains all of the
sample files that you need to complete the rest of the tutorials in this book.
This tutorial contains the following sections:
“Create a new Fireworks document” on page 132
“Insert an image” on page 132
“Add text to the banner graphic” on page 134
“Optimize the banner graphic” on page 136
“Export the banner graphic to Dreamweaver” on page 137
131
Create a new Fireworks document
In Tutorial 2, “Creating a Table-based Page Layout in Dreamweaver,” you used HTML tables to
lay out your index.cfm page. You also inserted an image placeholder called banner_graphic into
the first table. You will now use this image placeholder to create a new document in Fireworks.
1 In Macromedia Dreamweaver MX 2004, open the index.cfm page that you laid out in
Tutorial 2, “Creating a Table-based Page Layout in Dreamweaver.”
2 Click once on the banner_graphic image placeholder to select it.
3 In the Property inspector (Window > Properties), click Create.
Fireworks starts in Editing from Dreamweaver mode. The canvas of the new document is
650 pixels wide by 45 pixels high—the same dimensions that you set for the image
placeholder. Fireworks has also assigned the name of the image placeholder (banner_graphic)
to the new document.
Note: To set another image-editing application as your primary image editor, select Edit >
Preferences and select the File Types/Editors category. For more information, see “Setting
external image editor preferences” in Using Dreamweaver Help.
When you create a new document in Fireworks, you create a Portable Network Graphic, or PNG
document. PNG is the native file format for Fireworks. After you create graphics in Fireworks,
you can export them in other familiar web graphic formats, such as JPEG, GIF, and animated
GIF. You can also export graphics to many of the popular formats that are used from the web,
such as TIFF and BMP. Whatever optimization and export settings you choose, the original
Fireworks PNG file is preserved to allow easy editing later.
Insert an image
Now you’ll add an image of a car to the new Fireworks file.
1 With the banner_graphic.png file open, select File > Import.
2 In the Import dialog box that appears, navigate to the Samples folder that you copied to your
hard disk.
For more information, see the introduction to this tutorial.
3 Select the car_banner.jpg file and click Open. When you select the image, the pointer changes
to an insertion pointer.
Only part of the car image shows through the canvas. This is because the car image is larger
than the canvas size and it sits “below” the canvas. That’s OK, because for this tutorial, you will
use only part of the image.
Additionally, the inserted image has a blue outline with resize handles (solid-blue squares at
each corner). If you drag the resize handles, you can adjust the width or height of the image.
For this tutorial, however, you won’t adjust the size of the image.
Don’t click outside the image. You need to leave it selected for the next step.
5 With the image selected, use the Pointer tool to drag the image into position as shown.
Be sure to not resize the image. You can avoid accidentally resizing the image by dragging from
the center of the image rather than from the edges.
You can also move the image by using the arrow keys on your keyboard. The arrow keys let you
move the image up, down, left, or right, one pixel at a time.
6 In the Layers panel (Window > Layers), double-click the highlighted bitmap object under
Layer 1, rename the object car, and press Enter (Windows) or Return (Macintosh).
The Canvas color changes to the same shade of blue as the background of the car image.
Note: Selecting a color with the eyedropper does not always produce web safe colors.
Additionally, if the Display Properties setting for your monitor is 16-bit color depth, the color
sample may not match the color used in the image. You must set your monitor to display colors in
at least 24-bit color depth, and 32-bit color depth to allow Fireworks to accurately sample colors
on the screen.
Text tool
The pointer changes to an I-beam, and the Property inspector displays text properties.
2 In the Property inspector, do the following:
■ Select a font from the Font pop-up menu. For this example, Arial is selected.
■ In the Fill Color pop-up menu, leave the default color, white, selected.
Note: If Bold is already selected, you do not need to click the Bold button.
Anti-alias level
pop-up menu
3 Click once between the middle and the right side of the canvas.
An empty text block is created.
The hollow circle in the upper right corner of the text block indicates that the text block is
autosizing. An autosizing text block in Fireworks adjusts its width based on the longest line of
text in the block.
4 Type TRIO MOTORS in capital letters in the text block.
The width of the text block expands as you type.
Note: The text TRIO MOTORS is different from the text for the final version of the Trio Motors
website banner graphic. Don’t worry about this now. You’ll alter the text in a later tutorial.
5 Click once outside the text block away from the canvas to apply your text entry.
The text block remains selected, and the Text tool is still the selected tool. The hollow circle on
the text block is no longer visible. This indicator is visible only when you are entering or
editing text.
6 Click the Pointer tool and drag the text block into position as shown.
Remember that you can also move objects in Fireworks by using the arrow keys on your
keyboard. The arrow keys let you move an object up, down, left, or right, one pixel at a time.
7 Click outside the text block to deselect it.
8 Insert and position the arrow.gif graphic next to the TRIO MOTORS text, using the methods
you’ve learned in this tutorial.
The arrow.gif graphic is located in the Samples folder that you copied to your hard disk.
For further instructions, see “Insert an image” on page 132.
In the lower left corner of the Preview window, Fireworks displays the file size of the exported
file and the estimated time it will take to display the graphic when it is viewed on the web. In
this example, it will take 0 seconds for a computer with a 56 Kbps modem to download the
banner graphic.
When you export the banner_graphic.jpg file, Dreamweaver automatically updates the
Dreamweaver Document window with the Fireworks file you just created. The
banner_graphic.png file resides in the png folder of your Dreamweaver site and is editable at
any time.
Completed versions of the files you created in this tutorial are available in the Samples folder that
you copied to your hard drive from the Macromedia Studio MX 2004 CD. The completed
versions of the files reside in the directory called trio_motors_complete.
For more information about any of the procedures described in this tutorial, see Fireworks Help.
This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you
can use on multiple pages of your website. A navigation bar—also known as a nav bar—is a series
of buttons that appears on one or more pages of a website. Typically, all the buttons in a nav bar
look the same, except for their text. The finished product will appear at the top of the Trio
Motors website home page that you’re creating.
This tutorial contains the following sections:
“Create a new Fireworks document” on page 140
“Create a button symbol” on page 141
“Create button states” on page 144
“Create multiple button instances” on page 146
“Change button instance text” on page 147
“Assign URLs and names to the buttons” on page 148
“Optimize the navigation bar” on page 149
“Set HTML preferences” on page 150
“Export the document to HTML format” on page 151
“View the exported files in the Dreamweaver Files panel” on page 152
“View the Fireworks HTML file in a browser” on page 153
139
Create a new Fireworks document
In Tutorial 2, “Creating a Table-based Page Layout in Dreamweaver,” you used HTML tables to
lay out your index.cfm page. You also inserted a line break (a space) between the first and second
table. Now you’ll create a new Fireworks document for a nav bar that fits between the two tables.
1 In Fireworks, select File > New.
The New Document dialog box appears.
2 In the Width text field, enter 650, and select Pixels (the default) from the Width pop-up menu.
3 In the Height text field, enter 40, and select Pixels (the default) from the Height pop-up menu.
4 In the Resolution text field, enter 72, and select Pixels/Inch (the default) from the Resolution
pop-up menu.
5 Under Canvas Color, select the White button if it is not already selected.
6 Click OK.
A new Fireworks document appears in the workspace. The canvas is white and is 650 pixels
wide by 40 pixels high.
7 Save the file (File > Save) as navbar.png.
In Chapter 6, “Setup for Sample ColdFusion Site,” you created a folder called png within the
site. When you save the new navbar.png file, save it inside that folder. It is good practice to
keep all your PNG files in a central location.
1 Make sure that the file you created in the previous section, navbar.png, is open in the
Document window.
2 In the Tools panel, click the Rectangle tool.
3 In the Property inspector, select light blue from the Fill Color pop-up menu. This tutorial uses
a hexadecimal value of #CCCCFF.
4 Drag a rectangle across the canvas as shown.
Don’t worry about the exact size and position of the rectangle. You’ll set its properties in the
next step.
5 With the rectangle still selected, set its stroke, width, height, and x and y coordinates in the
Property inspector.
■ Select white (#FFFFFF) from the Stroke Color pop-up menu.
Note: If you cannot see the Width and Height text boxes, click the Expander arrow in the lower
right corner of the Property inspector.
Remember that you can also move objects in Fireworks by using the arrow keys on your
keyboard. You can use them to move an object up, down, left, or right, one pixel at a time.
In the example, the x coordinate of the text block is 0 and the y coordinate is 1.
12 Select both the rectangle and the text block by selecting Select All from the Select menu.
13 Select Modify > Symbol > Convert to Symbol.
The Symbol Properties dialog box appears.
A slice appears on top of the button graphic, and a shortcut icon appears at the left of the slice.
This indicates that the selection in the workspace is an instance of the symbol you just created.
Symbols are like master copies of your graphics. When you change a symbol, all the instances
of that symbol in your document change automatically. Symbols reside in the library.
15 If the Library panel is minimized, click the word Assets on the Assets panel and click the Library
tab. If the Assets panel isn’t visible, select Window > Library.
Your new button symbol is listed in the Library panel.
6 Click the Fill Color box in the Property inspector and select gray (#CCCCCC) as the color.
The rectangle changes to gray.
Note: This is the same web safe color that you chose for one of the table backgrounds in
Tutorial 2, “Creating a Table-based Page Layout in Dreamweaver.” If the color change is not
perceptible enough on your monitor, you can select another color.
7 Click the Down tab at the top of the Button Editor, and click the Copy Over Graphic button.
The button graphic is copied from the Over tab. The Down state of a button is the way it
appears after a user clicks it. This time you won’t change the color of the rectangle; you’ll leave
it as it is.
8 Click Done in the Button Editor to apply your changes to the button symbol.
9 Click the Preview button in the upper left corner of the Document window and test the
button’s states. Turn slices off if necessary. You can turn slices off by clicking the Hide Slices
and Hotspots button in the Tools panel.
10 Click the Original tab and turn slices back on by clicking the Show Slices and Hotspots button.
4 Clone three more instances of the button, and position each instance to the right of the previous
instance.
Tip: As a shortcut, you can press Alt (Windows) or Option (Macintosh) while using the Pointer tool
to drag the selected instance to make a copy of it. After positioning the new instance to the
immediate right of the previous instance, select Edit > Repeat Duplicate to automatically create
and place another copy of the instance.
5 In the Tools panel, click the Hide Slices and Hotspots button, and then use the arrow keys on
your keyboard to move the buttons one pixel at a time until they are uniformly separated. In
the nav bar in this example, no space exists between the buttons.
Note: With no space between the buttons, the right edge of each button (except the last button)
touches the left edge of the button next to it, giving the appearance of two pixels of white space
between each button. (Remember that the white stroke, or outline, of each rectangle is one pixel.)
The fifth button, like the first button, should be “off” the canvas by a few pixels. That is, there should
be no white space showing at the left or right edges of the canvas.
6 Click the Show Slices and Hotspots button to turn slices back on.
4 Click the Preview tab, turn off slices by clicking the Hide Slices and Hotspots button, and roll
the pointer over the buttons in the nav bar.
The buttons change from blue to gray as you move the pointer over them.
In this section, you used the Property inspector to change the text of individual button instances
without affecting the original button symbol in the Library. If you wanted to change the color of
all the buttons to red, however, you would double-click the original button symbol in the Library,
select the rectangle, change the Fill color to red, and click Done. Updating a button symbol in the
Library updates all instances of that symbol in the document.
For the purposes of this tutorial, any working URL will do. If you were creating a real website,
you would enter the URL that you wanted the Showroom button to jump to.
Be sure to enter the URL of an actual website, so that you can test your button links later.
2 In the Button text box, type showroom.
Naming each of your button instances makes them easier to identify after they are exported.
3 Assign a working URL and unique name to each remaining button instance.
When you name button instances, don’t use spaces or high ASCII characters (ASCII characters
from 129 to 256, including accents and math symbols, which are not the same on all
computers). For example, you might name the News & Events button instance news_events.
4 Select File > Preview in Browser > Preview in [your preferred browser]. To test button links,
you must preview the document in a browser.
Note: If your browser is not listed, you must first select a browser by selecting File > Preview in
Browser > Set Primary Browser.
Your navigation bar is now complete. In the next sections, you’ll optimize your work and export
the nav bar to your Macromedia Dreamweaver MX 2004 site.
entire panel.
2 Click in the Document window outside the canvas to make sure that no buttons are selected.
3 Select GIF Websnap 128 from the Settings pop-up menu if it isn’t already selected.
The options in the panel change to reflect the new setting.
4 Click the Hide Slices and Hotspots button in the Tools panel, and click the Preview button in
the upper left corner of the Document window.
Preview view displays your document as it will appear when it is exported with the
current settings.
In the lower left corner of the Preview window, Fireworks displays the file size of the exported
file and the estimated time it will take to display the graphic when it is viewed on the web.
For more information, see “Optimizing and Exporting” in Fireworks Help.
The options that you set in this dialog box will affect all future Fireworks documents that you
create, except the options on the Document Specific tab.
2 On the General tab, select Dreamweaver HTML from the HTML Style pop-up menu.
3 Select .htm as the file extension.
4 Click the Table tab.
The Table tab allows you to change HTML table properties.
5 In the Space With pop-up menu, select Single Table, No Spacers.
6 From the Contents pop-up menu, select None.
7 Click the Document Specific tab.
The Document Specific tab allows you to choose a variety of document-specific preferences,
including a customized naming convention for your exported files. Remember that the options
you set here apply only to the current Fireworks document.
Note: You can apply the settings on the Document Specific tab to all new documents by clicking
the Set Defaults button.
8 Select Rollover (over, down, overdown) from the first Frame Names pop-up menu.
9 Click OK to accept the settings on the Document Specific tab and close the HTML Setup
dialog box.
For more information about setting HTML preferences, see “Exporting HTML” in
Fireworks Help.
3 Navigate to the navbar folder that you created in step 1. It should be inside the images folder of
the Trio Motors site.
4 Ensure that the File name text box reads navbar.htm, and that the Save As Type (Windows) or
Save As (Macintosh) pop-up menu reads HTML and Images.
5 Ensure that Export HTML File is selected in the HTML pop-up menu and that Export Slices
is selected in the Slices pop-up menu.
6 Select Include Areas without Slices, and make sure that Put Images in Subfolder is not selected.
7 Click Save.
The nav bar files are exported to the navbar folder of your Dreamweaver site.
Remember that the PNG file is your source file, or working file. Although you’ve exported
your document in HTML and GIF format, you must also save the PNG so that any changes
you’ve made are reflected in the source file as well.
8 Select File > Save to save the changes to the PNG file.
The navbar.htm file contains all the HTML code that you will need to insert into your
Dreamweaver page, including the JavaScript code for the various states of the nav bar buttons.
Fireworks also exported graphics files for your buttons. There are several GIF files, including
one for each button state.
2 In the browser, click the buttons on the nav bar to test the links. If you added live links to the
buttons (such as http://www.macromedia.com), your web browser displays the corresponding
live pages when you click the buttons.
4 Scroll through the source code. If you know HTML and JavaScript, scan the code that
Fireworks created to see how it works. If you don’t know HTML and JavaScript, you can
appreciate the work that Fireworks has done for you.
Completed versions of the files you created in this tutorial are available in the
trio_motors_complete directory on your Studio MX 2004 CD. To locate the directory, insert
your Studio MX 2004 CD, click Browse CD contents, and select the Samples folder. If you
copied the Samples folder to your hard drive for the previous tutorial, the complete files are
already on your computer.
For more information about any of the procedures described in this tutorial, see Fireworks Help.
This tutorial shows you how to build a simple Flash animation with Macromedia Fireworks MX
2004 and Macromedia Flash MX 2004. Although this tutorial is designed for beginners, it will be
easier for you to complete if you first familiarize yourself with the Flash Stage, Timeline, and
Tools. If you haven’t already done so, complete the lessons that come with Flash before
proceeding. You can find and complete the lessons by opening Flash, selecting Help > Help, and
clicking the How Do I tab.
This tutorial contains the following sections:
“About Flash animation” on page 155
“Examine the Fireworks download files” on page 156
“Create a new Flash document” on page 157
“Import and convert the Fireworks file” on page 158
“Create a text layer and symbol” on page 159
“Create keyframes” on page 161
“Set alpha transparency” on page 162
“Create motion tweens” on page 163
“Publish the completed FLA file” on page 164
155
In this tutorial you’ll create a tweened animation. Tweened animation is an effective way to create
movement and changes over time while minimizing file size. In tweened animation, Flash stores
only the values for the changes between frames.
Each scene in a Flash document can consist of any number of layers. As you animate, you use
layers and layer folders to organize the components of an animation sequence and to separate
animated objects so that they don’t erase, connect, or segment each other. If you want Flash to
tween the movement of more than one group or symbol at once, you must put each group or
symbol on a separate layer. Typically, the background layer contains static artwork, and each
additional layer contains one separate animated object.
When a document has several layers, tracking and editing the objects on one or two of them can
be difficult. This task is easier if you work with the contents of one layer at a time. Layer folders
help you organize layers into manageable groups that you can expand and collapse to view only
the layers relevant to your current task. In this tutorial you’ll create two layers, and you’ll create a
motion tween in both of them separately.
For more information, see “Creating motion” in Using Flash Help.
The canvas of the flash_car.png file is 650 x 175 pixels. These dimensions correspond to the
dimensions you set for the Flash movie fade-in table cell on the Trio Motors index.cfm page. For
more information, see “Creating a Table-based Page Layout in Dreamweaver” on page 123.
5 Click OK.
The document is resized to 650 x 175 pixels with a white background.
6 If the document isn’t centered in the Document window, use the scroll bars at the bottom and
to the right of the Stage to center the document.
Now you can view the entire document area as you work. You can also change the
magnification of the document area by selecting or entering different magnification levels.
To do so, you use the Magnification pop-up menu in the upper right corner of the
Document window.
7 Save the new file (File > Save) as flash_car.fla.
In Chapter 6, “Setup for Sample ColdFusion Site,” you created a folder called flash within the
site. When you save the new flash_car.fla file, save it inside that folder. It is a good practice to
keep all your FLA files for your site in a central location.
Note: If the image is not perfectly centered on the Stage, use the Align panel (Window > Design
Panels > Align) to center the image. With the image selected, make sure that the To Stage button is
selected in the Align panel, and then click the Align Horizontal Center and Align Vertical Center
buttons. Alternatively, you can use the arrow keys on your computer keyboard to move the image
up, down, left, or right, one pixel at a time.
The imported bitmap image is selected on the Stage (denoted by a gray band around the
perimeter). Be sure that you don’t click on the Stage after importing the image. The image
needs to be selected for the next step.
3 Select Modify > Convert to Symbol.
The Convert to Symbol dialog box appears.
Right now the document contains one layer, called Layer 1. Layer 1 contains the car symbol
you just created.
8 Double-click “Layer 1” in the Timeline. The layer name becomes editable.
9 Rename the layer car and press Enter (Windows) or Return (Macintosh).
10 Save the file (File > Save). Remember that it is a good practice to save your files often as
you work.
7 If the insertion point in the text block isn’t blinking, click inside the text block before making
your entry.
8 Type Environmentally smart with a period (.) on the first line of the text block, and then press
Enter (Windows) or Return (Macintosh).
9 Type Starting at $540/month on the second line of the text block.
Note: The text for the text block is different from the text for the final version of the Flash
animation. Don’t worry about this now. You’ll alter the text in a later tutorial.
10 Select the second line of text in the text block, enter 12 in the Font Size text box in the Property
inspector, and press Enter (Windows) or Return (Macintosh).
11 Click outside the text block to apply your text entry.
12 If necessary, click the Arrow tool in the Tools panel, select the text block, and drag the text block
into position as shown in the preceding illustration. Alternatively, you can use the arrow keys
on your computer keyboard to move the selected text block up, down, left, or right, one pixel
at a time. Pressing Shift while you use the arrow keys moves the object in 10-pixel increments.
Create keyframes
A keyframe is a frame, indicated on the Timeline, where you define changes in the animation.
When you create frame-by-frame animation, every frame is a keyframe. In tweened animation,
you define keyframes at significant points in the animation and let Flash create the contents of
frames in between. Flash displays the interpolated frames of a tweened animation as light blue or
light green with an arrow drawn between keyframes.
So far, your FLA file contains two layers: car and text. These layers will fade in separately in your
finished content, and you’ll use keyframes to define precisely when each layer begins to fade in. By
default, the first frame of both layers is a keyframe that contains the content that you added.
Now you’ll add keyframes to define significant points in the animation.
1 Click the car layer in the Timeline to select it.
2 Select frame 24.
3 Do one of the following:
■ Select Insert > Timeline > Keyframe.
■ Right-click (Windows) or Control-click (Macintosh), and select Insert Keyframe.
2 Select Alpha from the Color pop-up menu, enter 0% as the alpha value, and press Enter
(Windows) or Return (Macintosh).
The car instance becomes transparent.
3 Select frame 24 of the car layer, and then click once on the car instance to select it.
4 Select Alpha from the Color pop-up menu, enter 100% as the alpha value, and press Enter
(Windows) or Return (Macintosh).
The car instance reappears.
5 Select frame 36 of the car layer and make sure that the alpha value is set to 100%.
6 Select frame 1 of the text layer, and then click once on the text instance to select it.
The Property inspector displays properties for the instance of the text symbol.
7 Select Alpha from the Color pop-up menu, enter 0% as the alpha value, and press Enter
(Windows) or Return (Macintosh).
The text instance becomes transparent.
8 Select frame 16 of the text layer, and then click once on the text instance to select it.
9 Select Alpha from the Color pop-up menu, enter 0% as the alpha value, and press Enter
(Windows) or Return (Macintosh).
The text instance becomes transparent.
10 Select frame 36 of the text layer, and then click once on the text instance to select it.
11 Select Alpha from the Color pop-up menu, enter 100% as the alpha value, and press Enter
(Windows) or Return (Macintosh).
The text instance reappears in the last frame of the Timeline.
Your instance transparencies are now set. The car instance is transparent in frames 1 through 23
and becomes visible in frame 24. The text instance is transparent in frames 1 through 35 and
becomes visible in frame 36. In the next section, you’ll create motion tweens so that both the car
instance and the text instance gradually fade in.
When you finish, you’ll have four motion tweens on your Timeline that extend between the
keyframes that you inserted earlier.
2 Accept the default selections on the Formats tab (Flash and HTML).
3 Click the Flash tab.
4 (Optional) Select Flash Player 5 from the Version pop-up menu. Selecting this option enables
users with Flash Player 5 and later to view your animation.
5 Click the HTML tab.
6 Make sure that the Detect Flash Version check box is deselected.
Completed versions of the files you created in this tutorial are available in the Samples folder that
you copied to your hard drive from the Macromedia Studio MX 2004 CD. The completed
versions of the files reside in the directory called trio_motors_complete.
For more information about any of the procedures described in this tutorial, see Using
Flash Help.
This tutorial shows you how to assemble and edit site assets in Macromedia Dreamweaver MX
2004. In this tutorial you’ll add content to the Trio Motors index.cfm page by using the assets you
created in Tutorial 3, “Creating a Banner Graphic in Fireworks,” Tutorial 4, “Building a
Navigation Bar with Fireworks,” and Tutorial 5, “Building Rich Media with Fireworks and
Flash.” If you haven’t completed these tutorials and saved the finished products in your
Dreamweaver site, you’ll need to do so before proceeding.
This tutorial contains the following sections:
“Insert the Fireworks navigation bar” on page 167
“Edit the Fireworks banner graphic” on page 169
“Insert the Flash animation” on page 170
“Play the Flash animation” on page 172
“Edit the Flash animation” on page 172
“Finish the page” on page 174
167
4 Click the Browse button and browse to the navbar.htm file in the images/navbar folder of your
Dreamweaver site.
5 Select the navbar.htm file and click Open.
Note: If extra space appears below the navigation bar after you insert the Fireworks HTML,
position the insertion point below the navigation bar and manually delete the extra space.
If you click any of the navigation buttons, you’ll notice that Dreamweaver placed the
navigation bar in its own table. The code for this table comes from the Fireworks HTML file
that you created.
Dreamweaver starts Fireworks in Editing from Dreamweaver mode. Notice that Fireworks
opens the source file banner_graphic.png, not the exported file banner_graphic.gif.
Note: If you see a Fireworks dialog box asking you to select between the HTML document table
structure and the PNG table structure, select PNG.
3 Click the Pointer tool and Shift-click both the arrow graphic and the text block containing the
text TRIO MOTORS.
4 Drag the two selections to the left so that the arrow graphic is at the center of the banner
graphic. You can also press Shift while using the Left Arrow key on your keyboard to move the
selections in 10-pixel increments.
5 Click once outside the canvas to deselect the two selections.
6 Click the Text tool and click to the right of the S in the word MOTORS. This selects the text
block and places the insertion point where you want to make the change.
7 Delete the S, add a space, and type COMPANY in capital letters so that the text block reads
TRIO MOTOR COMPANY.
8 Click once outside the text block to apply your text entry.
9 Use the Pointer tool to Shift-click the arrow graphic and the text block again.
Fireworks saves and exports the change you made. Dreamweaver displays the updated file in
the Document window.
A Flash content placeholder, rather than a scene from the animation itself, appears in the
Document window. This is because the HTML code is “pointing” to the SWF file
flash_car.swf. When a user loads the index.cfm page, the browser plays the SWF file.
4 With the Flash content placeholder selected, deselect Loop in the Property inspector.
By default, Dreamweaver does not generate the code loop = "false" within the EMBED
tag. Deselecting Loop in the Property inspector sets the animation to stop playing after it has
played once in a user’s browser.
Note: If you deselected Loop in the Publish Settings dialog box in Flash before publishing your
content, the flash_car.html file that you published does contain the code loop = "false" within
the embed tag. When you manually insert the HTML code from this file into Dreamweaver, the
Loop checkbox is already deselected in the Property inspector. Additionally, any settings that you
specified in the Publish Settings dialog box in Flash are visible in the code.
Note: If you cannot see the Flash Play button, click the expander arrow in the lower right corner of
the Property inspector.
The animation is played in the Dreamweaver Document window. The animation doesn’t loop,
because you deselected Loop in the Property inspector.
3 In the Library panel (Window > Libraries), double-click the Text Symbol icon.
The symbol appears on the Stage in symbol-editing mode.
4 Click the Text tool and click between the 5 and the 4 in $540. This selects the text block and
places the insertion point where you want to make the change.
5 Delete the 5 and replace it with a 4 so that your text reads $440/month.
6 Click once outside the text block to apply your text entry.
7 Click the Scene link to return to the main Stage.
8 Click Done.
Flash saves the change that you made and exports a new SWF file. You can test the new
animation by selecting the Flash content placeholder in the Dreamweaver Document window
and clicking the Play button in the Property inspector.
Before you begin this section, you need to copy or relocate the sample files for this tutorial. The
sample files reside in the Samples folder on your Macromedia Studio MX 2004 CD.
If you copied the Samples folder to your hard drive for a previous tutorial, then the sample files
are already on your computer. If you haven’t copied the Samples folder to your hard drive yet,
insert the Macromedia Studio MX 2004 CD into your computer and click Browse CD Contents
at the lower right corner of the installation screen. Copy the Samples folder to your hard drive
(for example, to your Desktop, or to the main directory of the Dreamweaver site you created in
Chapter 6, “Setup for Sample ColdFusion Site”).
Locate the sample files hybrid_label.gif and background.jpg in the Samples folder and then copy
or move them to the images folder of your Dreamweaver site.
Now you are ready to finish the page.
Images button
4 If Images view isn’t selected, click the Images button to view your image assets.
5 In the Assets panel, select hybrid_label.gif.
Dreamweaver displays the asset in the Assets panel.
7 Click once next to the Hybrid Label graphic to deselect it, making sure that your insertion point
remains within the FEATURED TECHNOLOGY column.
8 Click the <tr> tag in the tag selector to select the entire row of the third table.
9 In the Property inspector (Window > Properties), click the folder icon next to the Background
(Bg) text box and navigate to the background.jpg file in your images folder.
Note: If you cannot see the table background properties, click the expander arrow in the lower
right corner of the Property inspector.
This tutorial shows you how to build a simple database search feature with Macromedia
Dreamweaver MX 2004 and Macromedia ColdFusion MX. The ColdFusion application will
search for Trio Motors dealerships by using a single search parameter: a U.S. state.
Note: ASP, ASP.NET, JSP, and PHP developers may still find this ColdFusion tutorial useful
because many of the techniques for developing an ASP, ASP.NET, JSP, or PHP search feature are
the same. For more information about configuring Dreamweaver to use any of these other server
technologies, see “Preparing to Build Dynamic Sites” in Using Dreamweaver Help.
You should already be connected to the Trio Motors sample database in Dreamweaver before
proceeding with this tutorial. For more information, see Chapter 6, “Setup for Sample
ColdFusion Site,” on page 67.
This tutorial contains the following sections:
“About search/results pages” on page 179
“Create the search page” on page 180
“Build the results page” on page 184
“Publish and test your pages” on page 189
179
If you have only one search parameter, Dreamweaver lets you add search capabilities to your web
application without using SQL queries and variables. Simply design your pages and complete a
few dialog boxes. If you have more than one search parameter, you need to write a SQL statement
and define multiple variables for it. For this tutorial, you’ll build the search feature using only one
search parameter, the name of a U.S. state.
For more information about developing search applications that use more than one search
parameter, see “Developing Applications Rapidly” in Using Dreamweaver Help.
3 In the Property inspector (Window > Properties) type trio_form in the Form name text box and
press Enter (Windows) or Return (Macintosh).
4 Click once inside the form.
14 Enter results.cfm in the Action text box of the Property inspector. This is the filename of the
results page that will process the database search.
15 Select GET from the Method pop-up menu of the Property inspector. Selecting GET sends the
form data by appending it to the URL as a query string. For more information on the POST and
Default methods, see “Setting form properties” in Using Dreamweaver Help.
16 Save your changes (File > Save).
If the advanced dialog box appears instead, switch to the simple dialog box by clicking the
Simple button.
4 In the Name text box, enter rs_trio.
5 From the Data Source pop-up menu, select trio.
Note: You must complete Chapter 6, “Setup for Sample ColdFusion Site” before you can see
the connection.
3 Click OK.
The pop-up menu that you inserted becomes dynamic. At this point you cannot see the values
in the pop-up menu. The values appear only when you test the page in a browser window.
The search page is finished. Next you’ll build the results page.
When the user selects a state (value) from the US_STATE pop-up menu on the search page
and clicks the Search button, the server compares that value to all the values in the STATE
column of the database table CONTACT_INFORMATION. The server then creates a
recordset by filtering out all values that do not precisely match the selected value. For example,
if a user selects Pennsylvania from the pop-up menu and clicks the Search button, the results
page returns a recordset containing only those records that match the PA value in the STATE
column of the database table.
12 From the Sort pop-up menus, select CITY from the first pop-up menu, and Ascending from
the second pop-up menu.
This sorts the results of your search query and lists them alphabetically by city on the
results page.
Your finished Recordset dialog box should look like this:
13 (Optional) Click Test, enter a test value that is known to be in the database (for example, PA),
and click OK to connect to the database and create an instance of the recordset.
The test value simulates the value that would otherwise have been returned from the search
page. Click OK to close the recordset.
14 Click OK to close the Recordset dialog box.
The new recordset appears in the Bindings panel.
Note: Alternatively, you can click the Insert button at the bottom of the Bindings panel to insert a
content source.
The placeholders for recordset content use the syntax {RecordsetName.ColumnName}, where
RecordsetName is the name of the recordset and ColumnName is the name of the column you
chose from the recordset.
1 In the Dreamweaver Files panel, select the top-level Trio Motors site directory.
2 Click the Put File(s) button.
3 Dreamweaver asks, “Are you sure you wish to put the entire site?” Click OK.
If you’re using a ColdFusion hosting company, enter the URL to your site followed by . . ./
trio_motors/index.cfm.
5 Select a state from the pop-up menu and click the Search button.
The results page appears and displays the results of your search.
If more than one matching record is found, the results page displays all the matching records
because of the Repeat Region server behavior you added. If no matching records are found,
however, the results page appears blank.
Note: The sample database does not contain a matching record for every state in the list.
To see multiple records returned by the search query, select California, Pennsylvania, or Florida
from the pop-up menu on the search page and click the Search button.
Completed versions of the files you created in this tutorial are available in the
trio_motors_complete directory on your Studio MX 2004 CD. To locate the directory, insert
your Studio MX 2004 CD, click Browse CD contents, and select the Samples folder.
For more information about any of the procedures described in this tutorial, see Using
Dreamweaver Help.
191
Bindings panel 100 F
CSS (Cascading Style Sheets) 11, 95, 128–130 Fireworks
database connections 76–81 assets, creating 96
defining a recordset in 100, 182–183, 185–186 button states 144–145
deploying files 106 buttons 141–148
displaying dynamic data in 187–188 creating new document 132, 140
Document window 31 document tabs 44
dynamic menu 180–184 editing images (from Dreamweaver) 104, 169
editing Fireworks images in 104, 169–170 exporting 137, 151
editing Flash movies in 172–173 file management (check in/check out) 93
Expanded Tables mode 125–127 History panel 44
Files panel 31, 91, 107 HTML preferences 150
files, check in/check out 92 inserting images 132–134
form elements 180–181 navigating a document 43
image placeholders 128 navigation bars 139–154
inserting Fireworks HTML in 167–168 optimizing images 136, 149
inserting Flash movies in 170–171 panels (organizing) 43
integrated workspace layout 30 panels, overview of 42–43
local site, defining 72–73 PNG (Portable Network Graphic) 132
MDI (Multiple Document Interface) 30 Property inspector 41–42
menus, overview of 32 Quick Export button 43
page layouts 94–95, 123–130 repeating actions 44
panels 31 Text tool 134–135
playing Flash movies in 172 Tools panel 40
Put command 107 tools, changing options of 40
remote site, defining 73–74 undoing actions 44
Repeat Region server behavior 188 workspace 39–44
search/results pages 179–190 Flash
site definition 72–76, 91 alpha transparency 162
site testing 106 animation 97, 155–165
Start page 31 application development 12, 101–102
testing and validating code 105 components 102
Testing Server folder 75–76 creating new document 157
URL prefix 75 displaying entire Stage 34
workspace 29–32 displaying frame content 34
drivers for databases 54, 58 editing movies (in Dreamweaver) 172–173
dynamic pages extensions 12
about 58 Frame command 37
creating 56 frames, using 36, 38
processing 54 Hand tool 34
importing Fireworks images 158–159
E Keyframe command 37
examples of web applications 51 keyframes 161
exporting keyframes, using 36–38
from FreeHand 121–122 layers, using 38
images (from Fireworks) ??–137, 151 library 98
extracting data from databases 54 magnification (zooming) 34
motion tweens 163
playhead (in Timeline) 36
publishing movies 164–165
192 Index
Rich Internet Applications 101–102 installing
rich media, creating 96–?? IIS 63
rich media,creating ??–97 Macromedia Studio MX 2004 on Macintosh 16
Show All command 34 Macromedia Studio MX 2004 on Windows 14
Show Frame command 34 PWS 62
Text tool 159–160 IP addresses 65
Timeline 34–38
toolbar 38 J
video 12 Java 57
work area, showing and hiding 34 JavaScript 57
workspace 32–39 JavaServer Pages (JSP) 57
zooming 33 JRun 57
FreeHand
Align panel 114 L
assets, creating 96 languages, server-side 56, 57
cloning 115 layouts for web pages 94–95
Connector tool 89, 118–120 libraries 97–98
customizing 110–111 localhost 64
Document window 46
exporting 121–122 M
Main toolbar 47 Macintosh
panels, overview of 46 installing Macromedia Studio MX 2004 on 16
rectangle tool 112 servers 64
site navigation, sketching 109–122 Macromedia JRun 57
Text tool 113 Macromedia Studio MX 2004
toolbars, using 47–49 installing on Macintosh 16
workspace 45–49 installing on Windows 14
maintaining and updating websites 107
G Microsoft Access 56
glossary of common web-application terms 58 Microsoft Internet Information Server (IIS). See IIS
Microsoft Personal Web Server (PWS) 60, 62
H Microsoft SQL Server 56
HTML MySQL 56
embedded programming languages 56
HTTP servers. See servers N
navigation
I sketching for websites 88
IBM WebSphere application server 58 navigation bars 139–154
IIS Netscape Enterprise Server 60
installing 63 numeric network addresses 65
IIS (Internet Information Services) 57, 62
images O
creating (with Fireworks) 12, 96 optimizing
creating (with FreeHand) 96 images (in Fireworks) 149
editing (within Dreamweaver) 169–170 Oracle 9i 56
inserting (in Dreamweaver) 103, 176
inserting (in Fireworks) 132–134
optimizing (in Fireworks) 136
Index 193
P choosing 62
page design 93–95 HTTP 64
mock-ups for 93–94 installing 62
page layouts IP addresses 65
creating 94–95 testing 63
pages troubleshooting 63
displaying database data 54 web servers, defined 60
dynamic, creating 56 See also web servers, application servers
dynamic, definition of 51 site definition (in Dreamweaver) 72–76, 91
dynamic, processing 54 site navigation 109–122
static 53 sites. See websites
templates and libraries for 97–98 SQL (Structured Query Language) 54
PHP static pages 53
server technology 57 See also pages
planning Structured Query Language (SQL) 54
websites 86 Sun ONE Web Server 60
PNG (Portable Network Graphic) 132
PWS 60, 62 T
installing 62 tables
database 55
Q inserting (in Dreamweaver) 123–125
queries setting properties 125–127
database 54 tags
defined 58 server-side 54
technical support for servers 61
R templates 97–98
RDS (Remote Development Service) 69 terminology for web applications 58
recordsets testing and validating code 105
defined 59 testing servers 63, 75
See also databases Tomcat application server 58
registration 17 troubleshooting
relational databases, about 59 pages not opening 63
Rich Internet Applications servers 61, 63
databases and 87
HTML and 90 U
URL prefix (in Dreamweaver) 75
S
scripts, server-side 54 V
search/results pages 179–190 variables in CFML 56
Sequel (SQL) 54 VBScript 57
server models. See server technologies Visual Basic 57
server technologies
choosing 57 W
defined 59 web applications
supported 57 common uses 51
server-side scripting languages 57 defined 59
servers overview 51
application servers 54 setting up servers 90
basics 64 web pages. See pages
194 Index
web servers
defined 60
setting up 90
See also servers, application servers
websites 103
accessibility and 104
assembling assets for 103–104
content for 96
data source requirements 87
defining 91
deploying 103
development environment for 89
establishing goals for 86
maintaining and updating 107
mock-ups for 93
planning 86
sketching navigation for 88
source control for files 92
testing 106
testing and validating code for 105
WebSphere 58
Windows
installing Macromedia Studio MX 2004 on 14
Index 195
196 Index