Você está na página 1de 196

Exploring Studio MX

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).

Sorenson™ Spark™ video compression and decompression technology licensed from


Sorenson Media, Inc.

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

PART I: Getting Started

CHAPTER 1: Introduction . ............................................ 9


Learning Studio basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Studio tools overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Installing Studio MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Product activation and registration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

CHAPTER 2: What’s New in Studio MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . 19


What’s new in Dreamweaver MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
What’s new in Flash MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
What’s new in Flash MX Professional 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
What’s new in Fireworks MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
What’s new in FreeHand MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

CHAPTER 3: The Studio MX 2004 Workspace . . . . . . . . . . . . . . . . . . . . . . . . . . 29


A first look at the Dreamweaver workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
A first look at the Flash workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
A first look at the Fireworks workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
A first look at the FreeHand workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

CHAPTER 4: Understanding Web Applications . . . . . . . . . . . . . . . . . . . . . . . . . . 51


About web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
How a web application works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Authoring dynamic pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Choosing a server technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Web application terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

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

CHAPTER 6: Setup for Sample ColdFusion Site . . . . . . . . . . . . . . . . . . . . . . . . . 67


Setup checklists for ColdFusion developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Configuring your system . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Defining a Dreamweaver site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Connecting to the sample database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

PART II: Working with Macromedia Studio

CHAPTER 7: Web Development Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85


Planning your website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Setting up the development environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Planning page design and layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Creating content assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Building application assets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Assembling, testing, and deploying . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

TUTORIAL 1: Sketching a Site Navigation Scheme in FreeHand . . . . . . . . . . . . 109


Plan the site navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Customize FreeHand for multimedia/web output . . . . . . . . . . . . . . . . . . . . . . . . 110
Create rectangles for the navigation scheme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Change rectangle text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Add connector lines to the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Export the plan as a SWF file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

TUTORIAL 2: Creating a Table-based Page Layout in Dreamweaver . . . . . . . . 123


Insert tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Set table properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Insert an image placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Add placeholder text to table cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

TUTORIAL 3: Creating a Banner Graphic in Fireworks . . . . . . . . . . . . . . . . . . . . 131


Create a new Fireworks document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Insert an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Add text to the banner graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Optimize the banner graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Export the banner graphic to Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

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

TUTORIAL 5: Building Rich Media with Fireworks and Flash. . . . . . . . . . . . . . . 155


About Flash animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Examine the Fireworks download files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Create a new Flash document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Import and convert the Fireworks file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Create a text layer and symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Create keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Set alpha transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Create motion tweens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Publish the completed FLA file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

TUTORIAL 6: Assembling and Editing Studio Assets . . . . . . . . . . . . . . . . . . . . . 167


Insert the Fireworks navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Edit the Fireworks banner graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Insert the Flash animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Play the Flash animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Edit the Flash animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Finish the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

TUTORIAL 7: Building a Database Search Feature . . . . . . . . . . . . . . . . . . . . . . 179


About search/results pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Create the search page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Build the results page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Publish and test your pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

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.

Learning Studio basics


To begin learning how to use Dreamweaver, Flash, Fireworks, FreeHand, and ColdFusion, start
with this manual. Then proceed to other resources, such as the tutorials, the help systems, and
Macromedia online support.

How to use this manual


This manual is divided into two parts. Part 1 (Chapters 1 through 6) contains introductory and
conceptual information to help you get started with Studio MX 2004, and includes a setup
chapter that explains how to configure your system to develop a ColdFusion application. Part 2
contains a web development workflow chapter and seven tutorials that teach you how to build all
the components of a simple but functional dynamic website.
You can read the chapters of this manual in order, or you can read the rest of this introduction
and then start with the chapter or tutorial that best suits your interests and experience. The
following list describes each chapter’s contents:
• This introduction explains how to install Studio MX 2004 and gives a brief overview of the
Studio tools. Read this chapter first; then read the chapters that interest you the most.
• Chapter 2, “What’s New in Studio MX 2004,” on page 19, introduces the new features
available in the Studio MX 2004 tools.

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.

Studio tools overview 11


Flash MX 2004
Flash MX 2004 provides everything you need to create and deploy rich content and powerful
Internet applications. Whether you are designing motion graphics or building data-driven
applications, Flash has the tools you need to produce great results and deliver the best user
experiences across multiple platforms and devices.
Prebuilt user interface elements and templates allow both experienced and first-time developers to
quickly create otherwise complex interactivity with drag-and-drop simplicity. Designers and
developers can quickly build user interfaces with the high level of control and functionality that
Flash Player affords. Through an enhanced ActionScript editing environment, a powerful
debugger, and optimized data handling using XML, designers and developers can leverage
their existing skills to produce complete Internet-driven applications using Flash as their
presentation layer.
For more information about Flash and its features, see Using Flash Help.
To find out what’s new in Flash MX 2004, see Chapter 2, “What’s New in Studio MX 2004,”
on page 19.

Flash MX Professional 2004


If you purchased a copy of Macromedia Studio MX 2004 with Flash Professional, then your
version of the Studio includes the top-of-the-line Flash development environment for creating
data-driven applications, interactive presentations, and high-quality video experiences. With
everything in Macromedia Flash MX 2004 and a lot more, Macromedia Flash MX Professional
2004 is the one version of Macromedia Flash with everything. Developers can quickly build
effective data-driven applications with forms-based development, powerful data-binding, and
Microsoft Visual SourceSafe integration. Video professionals can add interactivity and customized
interfaces to high-quality video and deliver to the world’s most pervasive video client,
Macromedia Flash Player. You can also deploy content and applications on devices and mobile
phones to reach the widest audience using device emulators, prebuilt templates, and sample
content.
Additionally, Flash Professional lets you add specialized functions with third-party extensions that
integrate directly into the application’s interface and workflow. You can add vector-based 3D
animations, raster-based effects, automated text animation, interactive high-resolution bitmaps,
dynamic presentation graphics, and many other functions.
For more information about Flash Professional and its features, see Using Flash Help.
To find out what’s new in Flash MX 2004 Professional, 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).

Studio tools overview 13


Installing Studio MX 2004
This section describes the minimum system requirements and installation procedures for Studio
MX 2004. For a complete list of product system requirements and recommendations, including
ColdFusion MX system requirements, please visit www.macromedia.com/go/sysreqs/.

System requirements
You must have the following hardware and software to run the Studio MX 2004 tools:

Minimum system requirements for Microsoft Windows


• 600 MHz Intel Pentium III Processor or equivalent
• Windows 98 SE, Windows 2000, or Windows XP
• 256 MB RAM (512 MB recommended)
• 800 MB available disk space

Minimum system requirements for the Macintosh


• 500 MHz PowerPC G3 processor
• Mac OS 10.2.6
• 256 MB RAM (512 MB recommended)
• 500 MB of available disk space
This product must be activated over the Internet or phone prior to use. Windows 98 SE users
must have Microsoft Internet Explorer 5.1 or later to activate the product over the Internet.
For more information, see “Product activation and registration” on page 17.

Installing Studio MX 2004


Studio MX 2004 is easy to install on Windows and Macintosh systems. Macromedia
recommends installing the suite of tools in one simple operation, but you can selectively install
individual applications if you choose to do so.
The Developer Edition of ColdFusion MX for Windows is installed separately. For more
information, see “Installing ColdFusion MX” on page 68.

Installing Studio MX 2004 on Windows


Follow these steps to install Studio MX 2004 on Windows.

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.

2 Do one of the following:


■ Select the Install Macromedia Studio MX 2004 option on the installation screen. (It should
be the default.) Macromedia recommends selecting this option.
■ If you want to install only a single program, select it from the screen. Repeat this process to
install other products individually.
Note: Before installing ColdFusion MX, see “Installing ColdFusion MX” on page 68.

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.

Installing Studio MX 2004 15


Installing Studio MX 2004 on the Macintosh
Follow these steps to install Studio MX 2004 on the Macintosh.
To install Studio MX 2004 on the Macintosh:
1 Insert the Macromedia Studio MX 2004 CD into your computer’s CD-ROM drive to display
the Studio MX 2004 installation screen.
If the screen does not appear, double-click the Install Studio MX 2004 icon on the CD-ROM.
2 Do one of the following:
■ Select the Install Macromedia Studio MX 2004 option on the installation screen. (It should

be the default.) Macromedia recommends selecting this option.


■ If you want to install only a single program, select it from the screen. Repeat this process to

install other products individually.


3 Click Install.
4 Follow the installation instructions.
Note: If you are asked for a passphrase, enter your system administrator login password and
click OK.

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.

Product activation and registration 17


18 Chapter 1: Introduction
CHAPTER 2
What’s New in Studio MX 2004

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

What’s new in Dreamweaver MX 2004


Dreamweaver MX 2004 contains a new, streamlined interface, along with improved product
performance. There’s also a wide variety of new features that improve usability and help you build
pages whether you are working in the design environment or the coding environment.

Streamlined design and development interface


The Dreamweaver interface is more approachable to help you improve your productivity and
quality of work.
Insert bar improvements give the Insert bar a new streamlined look, which takes up less space in
the workspace. There’s also a new Favorites category, which you can use to customize an Insert bar
with the objects you use most often. For more information, see “The Insert bar” in Using
Dreamweaver Help.
Microsoft Word and Microsoft Excel copy and paste commands enable you to copy and paste
a Microsoft Word or Excel document directly into Dreamweaver. When you paste a Word or
Excel document, Dreamweaver preserves formatting and generates quality HTML. For more
information, see “Copying and pasting text from MS Office documents” in Using
Dreamweaver Help.

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.

Modernized page layout and design environment


Dreamweaver includes the following enhanced CSS features that provide a more sophisticated
way to style and add interactivity to designs, and also includes feedback to improve visual editing.
Dynamic cross-browser validation automatically checks the current document for cross-
browser compatibility issues when you save the document. You specify which browsers to target,
and Dreamweaver checks to make sure pages are not using tags or CSS constructs that those
browsers do not support. For more information, see “Checking for browser compatibility” in
Using Dreamweaver Help.
Relevant CSS tab displays the CSS rules applied to the current Code view or Design view
selection. Click any rule to see which attributes it specifies (border style, margin, padding, text
size, and so on). Special markings let you know when a specific attribute has been overridden, and
in-place editing allows for quick edits that are instantly reflected in Design view. For more
information, see “The CSS Properties tab” in Using Dreamweaver Help.
CSS layout visualization makes laying out pages in CSS much easier. You can easily select div
and other content blocks in Design view, then modify properties with the CSS Properties tab. For
more information, see “Laying Out Pages with CSS” in Using Dreamweaver Help.
Improved CSS rendering means Dreamweaver can render more complicated CSS-based layouts
and designs more accurately. Improved CSS rendering enables you to design more sophisticated
layouts and use Dreamweaver design tools for robust visual manipulations.

20 Chapter 2: What’s New in Studio MX 2004


Improved CSS Styles panel provides more options for editing styles in the current document.
You can also now directly apply styles from the text Property inspector. For more information, see
“Using Cascading Style Sheets styles” in Using Dreamweaver Help.
CSS-based text Property inspector lists all of the styles available for use in text, and includes a
preview that shows what text will look like after the style is applied. For more information, see
“The Property inspector and text formatting” in Using Dreamweaver Help.
CSS-based page properties give you more control of page properties, such as the appearance of
headings and links, using modern CSS coding constructs. For more information, see “About
setting page properties” in Using Dreamweaver Help.
Integrated image-editing toolbar enables you to do basic image manipulation and editing from
Dreamweaver using Macromedia Fireworks technology. You can crop, resize, resample, and so on,
without leaving Dreamweaver. For more information, see “Editing images in Dreamweaver” in
Using Dreamweaver Help.

Powerful and open coding environment


Dreamweaver offers the following new features for coders, including improvements to the Code
view and the ability to edit files without creating a Dreamweaver site. Dreamweaver also includes
current support for server technologies.
Improved Tag inspector displays a list of properties available for the current selection and
enables you to make quick, comprehensive edits. For more information, see “Changing attributes
with the Tag inspector” in Using Dreamweaver Help.
Siteless file editing enables you to work directly on an FTP or RDS server without creating a
Dreamweaver site. For more information about setting up Dreamweaver to work on a server, see
“Setting up Dreamweaver to work without defining a site” in Using Dreamweaver Help. For more
information about setting up a Dreamweaver site, see “Setting up a new Dreamweaver site” in
Using Dreamweaver Help.
PHP server behaviors enable you to create a master/detail page set and user authentication
pages. For more information, see “Building master/detail pages (PHP)” and “Building pages that
restrict access to your site (PHP)” in Using Dreamweaver Help.
Improved support for ASP.NET form controls provides new and improved ways, including new
Property inspectors, to build and manipulate ASP.NET web forms in Design view. For more
information, see “Building ASP and JSP Applications Rapidly” in Using Dreamweaver Help.
Code view context menu enables you to make quick formatting changes to selected code. For
more information, see “Making quick changes to a code selection” in Using Dreamweaver Help.

What’s new in Dreamweaver MX 2004 21


What’s new in Flash MX 2004
The new features in Flash MX 2004 provide greater productivity, enhanced rich media support,
and streamlined publishing.

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.

Rich media support


New rich media support features enhance the quality of rich media presentations.
High-fidelity import High-fidelity import lets you import Adobe PDF and Adobe Illustrator 10
files and preserve accurate vector representation of your source files. For more information, see
“Importing Adobe Illustrator, EPS, or PDF files” in Using Flash Help.

22 Chapter 2: What’s New in Studio MX 2004


Video Import wizard The Video Import wizard simplifies video encoding and offers encoding
presets and clip editing. For more information, see “About the Video Import wizard” in Using
Flash Help.
Small font size rendering Small font sizes are now rendered more crisply. For more
information, see “Creating text” 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.

What’s new in Flash MX 2004 23


What’s new in Flash MX Professional 2004
Flash MX Professional 2004 offers all the features available in Flash MX 2004, plus a variety of
new features to enhance application development and design. Features include the screen-based
visual development environment, and tools for managing data interactively and for fostering
team productivity.

Screen-based visual development environment


A visual programming environment Flash MX Professional 2004 introduces a forms-based
visual programming environment, which is ideal for developing applications. For more
information, see “Slide screens and form screens (Flash Professional only)” in Using Flash Help.
Slides-based authoring Slide screens provide functionality designed for sequential
presentations. For more information, see “Slide screens and form screens (Flash Professional
only)” in Using Flash Help.

A new generation of components


Advanced components support New components now support focus management to control
tab navigation. Although the components have a new sophisticated design, you can easily reskin
them to modify their appearance. For more information, see “Benefits of v2 components” in
Using Components 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.

24 Chapter 2: What’s New in Studio MX 2004


What’s new in Fireworks MX 2004
New features make Fireworks MX 2004 an increasingly approachable application for
incorporating graphics and interactive elements into websites. Fireworks MX 2004 maximizes
productivity for seasoned veteran web designers, HTML developers who also work with graphics,
and emerging web developers who need to develop graphics-rich, interactive web pages with little
or no coding or JavaScript knowledge.
Start page The Start page appears when you start Fireworks. It gives you options for learning
how to start using the product and points you to places where you can learn more or get help. For
more information, see “Using the Start page” in Fireworks Help.
Save in original format A major improvement in the Fireworks workflow, this new feature lets
you save imported documents in their original format after making changes in Fireworks. See
“Saving documents in other formats” in Fireworks Help.
Server-side support Fireworks MX 2004 now includes roundtrip support for server-side file
formats, such as CFM, PHP, and ASP. See “Working with Other Programs” on the Fireworks
Support Center at www.macromedia.com/support/fireworks.
Auto Shapes Auto Shapes are new primitive objects that know how to move their points and
respond intelligently as you transform them. See “Drawing Auto Shapes” in Fireworks Help.
Send as e-mail You can now send documents as e-mail attachments from within
Fireworks. See “Working with other programs” on the Fireworks Support Center page at
www.macromedia.com/support/fireworks.
Hide/Show Panels This new button gives you a quick way to hide and then show all
Fireworks panels, freeing up room in the workspace. See “Organizing panel groups panels” in
Fireworks Help.
Document tabs (PC) You can now switch among multiple documents by selecting the
document tabs at the bottom of the workspace. See “Using document tabs” in Fireworks Help.
Fit canvas You can quickly fit the image to the size of the canvas by selecting the Fit Canvas
button in the Property inspector. See “Trimming or fitting the canvas” in Fireworks Help.
Scale from center By pressing the Alt (Windows) or Option (Macintosh) key, you can make
the Scale tool resize objects from the center. See “Resizing (scaling) objects” in Fireworks Help.
Red-eye Removal tool The Red-eye Removal tool makes it easy to eliminate the annoying red-
eye effect from your digital photos. See “Removing red-eye from photos,” in Fireworks Help.
Replace Color tool This new tool makes it a snap to replace a color that occurs in a bitmap
image in your document. See “Replacing colors” in Fireworks Help.
Enhanced Live Effects New Live Effects options let you create motion blur and other artistic
effects. See “Using Live Effects” in Fireworks Help.
Pop-up preview The Property inspector pop-up menus for stroke, fill, and font now show you
how a new stroke, fill, or font value changes the selected object. See “Applying Color, Strokes, and
Fills” in Fireworks Help.
Dotted line stroke The new dotted line stroke gives you more options for creating useful and
interesting stroke effects. See “Creating custom strokes” in Fireworks Help.

What’s new in Fireworks MX 2004 25


Contour gradient Create multicolor gradients that follow the contour of an outlining path.
This new feature makes it much easier to depict organic, flowing illustrations in Fireworks. See
“Applying a gradient fill” in Fireworks Help.
File Management button Use this new toolbar button to check files into and out of a
Macromedia Studio MX 2004 website. See “Working with other programs” on the Fireworks
Support Center page at www.macromedia.com/support/fireworks.
Unicode support Take advantage of your operating system’s language features. Even users of the
English version of Fireworks MX 2004 can create double-byte graphical and alt text, and use
double-byte characters such as Kanji and Hiragana in any text field.
Improved anti-aliasing Make text more readable with new anti-aliasing options that take
advantage of system anti-aliasing on Windows and Quartz for the Macintosh. Or use the
innovative Fireworks custom anti-aliasing option. See “Smoothing text edges” in Fireworks Help.

What’s new in FreeHand MX


Whether you design illustrations for print media, the web, or both, FreeHand MX offers new
features that enhance the approachability, creativity, and power of FreeHand.
Note: The version of FreeHand MX in Studio MX 2004 is the same version that was packaged with
Macromedia Studio MX Plus.

Standards and interactivity


FreeHand MX has a new user interface that simplifies workflow and better organizes the
workspace. The new interface makes FreeHand easier to learn if you already know other
Macromedia Studio MX 2004 products, including Dreamweaver, Flash, and Fireworks.
Panel grouping/tabs Panels are now conveniently docked together at the right edge of the
application window. You can move, separate, or combine these customizable panel groups. For
more information, see “Using panels” in Using FreeHand Help.
Object panel The Object panel is a context-sensitive panel that lets you view and change
properties for selected objects and text. It is extremely useful in performing practically any
drawing task. For more information, see “Using the Object panel” in Using FreeHand Help.
Launching and editing Flash FreeHand can now launch Flash to edit imported Flash content.
For more information, see “Editing imported Flash movies” in Using FreeHand Help.
Launching and editing Fireworks When you’re editing a bitmap file, FreeHand can
automatically launch Macromedia Fireworks, letting you use Fireworks bitmap-editing tools to
modify the image or to make quick optimization changes. Together, the two applications give you
a more streamlined workflow for editing and designing graphics. For more information, see
“Using Imported Artwork” in Using FreeHand Help.
Answers panel The Answers panel helps you work more effectively by giving you quick access
to Macromedia website content such as tutorials, lessons, TechNotes, and other useful
information. For more information, see “The Answers panel” in Using FreeHand Help.

26 Chapter 2: What’s New in Studio MX 2004


Power illustration
Many new features make FreeHand MX an even more powerful illustration tool.
Extrude tool The new Extrude tool lets you apply 3D extrusion effects to an object. To learn
more, see “Extruding objects” in Using FreeHand Help.
Multiple strokes and fills With FreeHand MX, you can now apply more than one stroke or fill
to an object, opening up new potentials for your illustrations. See “Using Strokes and Fills” in
Using FreeHand Help.
Live raster effects and transparency Live raster effects work similarly to some of the image-
manipulation tools in photo-editing software such as Fireworks. These effects act as properties of
the object they are applied to, and do not modify the object itself. For more information, see
“Applying live raster effects” in Using FreeHand Help.
Using transparency effects, you can make a fill or stroke (or parts of a fill or stoke) transparent or
semi-opaque. To learn more, see “Using a Transparency effect attribute” in Using FreeHand Help.
Live vector effects Live vector effects work much as the other object-manipulation features of
FreeHand do, except that they act as properties of the object they are applied to and do not
modify the object itself. For more information, see “Applying live vector effects” in Using
FreeHand Help.
Blend tool Blends are now easier to apply. The Blend tool lets you drag a line between two
blend shapes to create the blend. See “Using the Blend tool” in Using FreeHand Help.
Calligraphic stroke This new feature lets you create beautiful calligraphic strokes as part of your
vector objects. For more information, see “Using calligraphic stroke attributes” in Using
FreeHand Help.
Eraser tool The new Eraser tool lets you erase parts of vector objects. To learn more, see
“Erasing paths” in Using FreeHand Help.
Image alpha channels FreeHand MX provides full import and display support for the alpha
channels of common bitmap image files. See “Working with bitmap images in FreeHand” in
Using FreeHand Help.
New gradient fills Two new gradient fills have been added to FreeHand MX: rectangular and
cone gradients. Also, gradient fills now have new options. For more information, see “Using
gradient fill attributes” in Using FreeHand Help.
Brush enhancements The rounded corners attribute gives brushed paths a more fluid and
natural look as they wrap around corners and sharp angles. To learn about brushes, see “Using
brush stroke attributes” in Using FreeHand Help.

What’s new in FreeHand MX 27


Web-related features
Many new and enhanced FreeHand MX features help you plan, mock up, and develop website
components. With these additions, FreeHand MX becomes the tool of choice for the beginning
stages of web development, and the first step in the Macromedia Studio MX 2004 workflow.
Connector tool The Connector tool lets you draw connector lines that dynamically link objects
together. Connector lines are automatically adjusted when you move connected objects in
the Document window. For more information, see “Dynamically linking objects” in Using
FreeHand Help.
Action tool The Action tool lets you assign Flash actions to an object. For more information, see
“Using the Action tool” in Using FreeHand Help.
Output area You can now print or export an area of the Document window by using the
Output Area tool. To learn more, see “Exporting an area of a document” in Using
FreeHand Help.
It’s now easier to control the settings of Flash content inside
Simplified Flash settings
FreeHand. For more information, see “Using Flash movies” in Using FreeHand Help.
Import, placement, and export of SWF files You can directly import Flash SWF files, place
them in FreeHand MX, and then export them. See “Editing imported Flash movies” and
“Exporting FreeHand documents as Flash movies” in Using FreeHand 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.

28 Chapter 2: What’s New in Studio MX 2004


CHAPTER 3
The Studio MX 2004 Workspace

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

A first look at the Dreamweaver workspace


In Windows, Dreamweaver MX 2004 provides an all-in-one-window integrated workspace. In
the integrated workspace, all windows and panels are integrated into a single larger application
window. You can choose between a designer-oriented layout and a layout oriented toward the
needs of hand-coders.
On the Macintosh, Dreamweaver provides a floating workspace layout, in which each document
is in its own individual window. Panel groups are initially docked together, but can be undocked
into their own windows. Windows “snap” automatically to each other, to the sides of the screen,
and to the Document window as you drag or resize them.
Note: You can customize your workspace by rearranging panels and panel groups; for more
information, see Using Dreamweaver Help.

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.

To choose a workspace layout:


• Select one of the following layouts:
Designer workspace is an integrated workspace using MDI (Multiple Document Interface), in
which all Document windows and panels are integrated into one larger application window, with
the panel groups docked on the right. This layout is recommended for most users.
Note: Most of this guide assumes that you’re using the Designer workspace.

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.

30 Chapter 3: The Studio MX 2004 Workspace


Windows and panels overview
This section briefly describes some elements of the Dreamweaver workspace. Some information
about how to use these tools appears later in this guide; for more detailed information, see Using
Dreamweaver Help.
Insert bar
Document toolbar
Document window Panel groups

Tag selector Property inspector Files panel

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).

A first look at the Dreamweaver workspace 31


Dreamweaver provides a variety of other panels, inspectors, and windows not shown here, such as
the CSS Styles panel and the Tag inspector. To open Dreamweaver panels, inspectors, and
windows, use the Window menu.

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.

A first look at the Flash workspace


Macromedia Flash MX 2004 consists of the Stage, on which you place media content; a main
toolbar with menus and commands for controlling application functionality; panels and a
Property inspector for organizing and modifying media assets; and a toolbar with tools for
creating and modifying vector graphic content.

32 Chapter 3: The Studio MX 2004 Workspace


This section gives a brief overview of the Flash MX 2004 workspace. For a more comprehensive
overview, see “Getting to Know the Workspace,” in the Flash Getting Started manual. To access
the Getting Started manual, open Flash, select Help > Help, and select Getting Started from the
list of electronic help systems.

Using the Stage


The Stage is the rectangular area where you place graphic content, including vector art, text boxes,
buttons, imported bitmap graphics or video clips, and so on. The Stage in the Flash authoring
environment represents the rectangular space in the Macromedia Flash Player where your Flash
document is displayed during playback. You can zoom in and out to change the view of the Stage
as you work.

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.

A first look at the Flash workspace 33


• To scale the Stage to fit completely in the given window space, select View > Magnification >
Fit in Window.
• To display the contents of the current frame, select View > Magnification > Show All, or select
Show All from the Zoom control at the upper right of the application window. If the scene is
empty, the entire Stage is displayed.
• To display the entire Stage, select View > Magnification > Show Frame or select Show Frame
from the Zoom control at the lower left corner of the application window.
• To display the work area surrounding the Stage, select View > Work Area. The work area is
shown in light gray. Use the Work Area command to view elements in a scene that are partly or
completely outside of the Stage. For example, to have a bird fly into a frame, you would
initially position the bird outside of the Stage in the work area.

Moving the view of the Stage


When the Stage is magnified, you may not be able to see all of it. The Hand tool lets you move
the Stage to change the view without having to change the magnification.
To move the Stage view:
1 In the toolbar, select the Hand tool. To temporarily switch between another tool and the Hand
tool, hold down the Spacebar and click the tool in the toolbar.
2 Drag the Stage.

Using the Timeline


The Timeline organizes and controls a document’s content over time in layers and frames. Like
films, Flash documents divide lengths of time into frames. Layers are like multiple film strips
stacked on top of one another, each containing a different image that appears on the Stage. The
major components of the Timeline are layers, frames, and the playhead.
Layers in a document are listed in a column on the left side of the Timeline. Frames contained
in each layer appear in a row to the right of the layer name. The Timeline header at the top of
the Timeline indicates frame numbers. The playhead indicates the current frame displayed on
the Stage.
The Timeline status display at the bottom of the Timeline indicates the selected frame number,
the current frame rate, and the elapsed time to the current frame.

34 Chapter 3: The Studio MX 2004 Workspace


Note: When an animation is played, the actual frame rate is displayed; this may differ from the
document frame rate if the computer can’t display the animation quickly enough.

Empty keyframe
Playhead Timeline header

Frame View pop-up menu

Frame-by-frame animation

Tweened animation

Guide layer icon Elapsed Time indicator


Center Frame button Frame Rate indicator
Onion-skinning buttons Current Frame indicator

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).

Changing the appearance of the Timeline


By default, the Timeline appears at the top of the main application window, above the Stage. To
change its position, you can dock the Timeline to the bottom or either side of the main
application window, or display the Timeline as its own window. You can also hide the Timeline.
You can resize the Timeline to change the number of layers and frames that are visible. When
there are more layers than can be displayed in the Timeline, you can view additional layers by
using the scroll bars on the right side of the Timeline.
To move the Timeline:
• Drag from the area above the Timeline header.
Drag the Timeline to the edge of the application window to dock it. Control-drag to prevent
the Timeline from docking.
To lengthen or shorten layer name fields:
• Drag the bar separating the layer names and the frames portions of the Timeline.
To resize the Timeline, do one of the following:
• If the Timeline is docked to the main application window, drag the bar separating the Timeline
from the application window.

A first look at the Flash workspace 35


• If the Timeline is not docked to the main application window, drag the lower right corner
(Windows) or the size box in the lower right corner (Macintosh).

Moving the playhead


The playhead moves through the Timeline to indicate the current frame displayed on the Stage.
The Timeline header shows the frame numbers of the animation. To display a frame on the Stage,
you move the playhead to the frame in the Timeline.
When you’re working with a large number of frames that can’t all appear in the Timeline at once,
you can move the playhead along the Timeline to easily locate the current frame.
To go to a frame:
• Click the frame’s location in the Timeline header, or drag the playhead to the desired position.

To center the Timeline on the current frame:


• Click the Center Frame button at the bottom of the Timeline.
Using frames and keyframes
A keyframe is a frame in which you define a change in an animation or include frame actions to
modify a document. Flash can tween, or fill in, the frames between keyframes to produce fluid
animations. Because keyframes let you produce animation without drawing each frame, they
make creating animation easier. You can change the length of a tweened animation by dragging a
keyframe in the Timeline.
The order in which frames and keyframes appear in the Timeline determines the order in which
they are displayed in a Flash application. You can arrange keyframes in the Timeline to edit the
sequence of events in an animation.

Working with frames in the Timeline


In the Timeline, you work with frames and keyframes, placing them in the order you want the
objects in the frames to appear. You can change the length of a tweened animation by dragging a
keyframe in the Timeline.
You can perform the following modifications on frames or keyframes:
• Insert, select, delete, and move frames or keyframes
• Drag frames and keyframes to a new location on the same layer or on a different layer
• Copy and paste frames and keyframes
• Convert keyframes to frames
• Drag an item from the Library panel onto the Stage to add the item to the current keyframe
The Timeline provides a view of tweened frames in an animation. For information on editing
tweened frames, see “Editing animation” in Using Flash Help.

36 Chapter 3: The Studio MX 2004 Workspace


Flash offers two different methods for selecting frames in the Timeline. In frame-based selection
(the default) you select individual frames in the Timeline. In span-based selection, the entire
frame sequence, from one keyframe to the next, is selected when you click any frame in the
sequence. You can specify span-based selection in Flash preferences. See “Setting preferences in
Flash” in the Flash Getting Started manual (available within Flash Help).
To insert frames in the Timeline, do one of the following:
• To insert a new frame, select Insert > Timeline > Frame.
• To create a new keyframe, select Insert > Timeline > Keyframe, or right-click (Windows) or
Control-click (Macintosh) the frame where you want to place a keyframe, and select Insert
Keyframe from the context menu.
• To create a new blank keyframe, select Insert > Timeline > Blank Keyframe, or right-click
(Windows) or Control-click (Macintosh) the frame where you want to place the keyframe, and
select Insert Blank Keyframe from the context menu.
To select one or more frames in the Timeline:
• To select one frame, click on the frame. If you have Span Based Selection turned on in
Preferences, clicking one frame selects the entire frame sequence between two keyframes. See
“Setting preferences in Flash” in the Flash Getting Started manual (available within Flash Help).
• To select multiple contiguous frames, Shift-click additional frames.
• To select multiple discontiguous frames, Control-click (Windows) or Command-click
(Macintosh) additional frames.
To select all frames in the Timeline:
• Select Edit > Timeline > Select All Frames.
To delete or modify a frame or keyframe, do one of the following:
• To delete a frame, keyframe, or frame sequence, select the frame, keyframe, or sequence and
select Edit > Timeline > Remove Frame, or right-click (Windows) or Control-click
(Macintosh) the frame, keyframe, or sequence and select Remove Frame from the context
menu. Surrounding frames remain unchanged.
• To move a keyframe or frame sequence and its contents, drag the keyframe or sequence to the
desired location.
• To extend the duration of a keyframe, Alt-drag (Windows) or Option-drag (Macintosh) the
keyframe to the final frame of the new sequence duration.
• To copy a keyframe or frame sequence by dragging, Alt-click (Windows) or Option-click
(Macintosh) and drag the keyframe to the new location.
• To copy and paste a frame or frame sequence, select the frame or sequence and select
Edit > Timeline > Copy Frames. Select a frame or sequence that you want to replace, and
select Edit > Timeline > Paste Frames.
• To convert a keyframe to a frame, select the keyframe and select Edit > Timeline > Clear
Keyframe, or right-click (Windows) or Control-click (Macintosh) the keyframe and
select Clear Keyframe from the context menu. The cleared keyframe and all frames up
to the subsequent keyframe are replaced with the contents of the frame preceding the
cleared keyframe.

A first look at the Flash workspace 37


• To change the length of a tweened sequence, drag the beginning or ending keyframe left or
right. To change the length of a frame-by-frame sequence, see “About frame-by-frame
animation” in Using Flash Help.
• To add an item from the library to the current keyframe, drag the item from the Library panel
onto the Stage.

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 the toolbar


The tools in the toolbar let you draw, paint, select, and modify artwork, as well as change the view
of the Stage. The toolbar is divided into four sections:
• The tools area contains drawing, painting, and selection tools.
• The view area contains tools for zooming and panning in the application window.
• The colors area contains modifiers for stroke and fill colors.
• The options area displays modifiers for the selected tool, which affect the tool’s painting or
editing operations.
Using the Customize Toolbar dialog box, you can specify which tools to display in the Flash
authoring environment. See “Customizing the toolbar” in the Flash Getting Started manual
(available within Flash Help).
For information on using the drawing and painting tools, see “Flash drawing and painting tools”
in Using Flash Help. For information on using the selection tools, see “Selecting objects” in Using
Flash Help.
To show or hide the toolbar:
• Select Window > Tools.

38 Chapter 3: The Studio MX 2004 Workspace


A first look at the Fireworks workspace
When you open a document in Macromedia Fireworks MX 2004 for the first time, Fireworks
activates the work environment, including the Tools panel, Property inspector, menus, and other
panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap,
vector, and web tool groups. The Property inspector appears along the bottom of the document
by default and initially displays document properties. It then changes to display properties for a
newly chosen tool or currently selected object as you work in the document. The panels are
initially docked in groups along the right side of the screen. The document window appears in the
center of the application.

A first look at the Fireworks workspace 39


Using the Tools panel
The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View.

Changing tool options


When you choose a tool, the Property inspector displays tool options. Some tool options remain
displayed as you work with the tool. For other tools, such as the basic shape, Pen, and Line tools,
the Property inspector displays the properties of selected objects. For more information about the
Property inspector, see “Using the Property inspector” in Fireworks Help.
To display tool options in the Property inspector for a tool that you are already using:
• Choose Select > Deselect to deselect all objects.
For information about specific tool options, see the sections that introduce the various tools
throughout the Using Fireworks manual or Fireworks Help.

40 Chapter 3: The Studio MX 2004 Workspace


Selecting a tool from a tool group
A small triangle in the lower right corner of a tool in the Tools panel indicates that it is part of a
tool group. For example, the Rectangle tool is part of the basic shape tool group, which also
includes the Rounded Rectangle, Ellipse, and Polygon basic tools, as well as all of the Smart
Shape tools, which appear below the divider line.

To choose an alternative tool from a tool group:


1 Click the tool icon and hold down the mouse button.
A pop-up menu appears with tool icons, tool names, and shortcut keys. The currently selected
tool has a check mark to the left of the tool name.
2 Drag the pointer to highlight the tool you want, and release the mouse button.
The tool appears in the Tools panel, and the tool options appear in the Property inspector.

Using the Property inspector


The Property inspector is a context-sensitive panel that displays current selection properties,
current tool options, or document properties. By default, the Property inspector is docked at the
bottom of the workspace.
The Property inspector can be open at half height, displaying two rows of properties, or at full
height, displaying four rows. You can also fully collapse the Property inspector while leaving it in
the workspace.
Note: Most procedures in Using Fireworks assume that the Property inspector is displayed at
full height.

To undock the Property inspector:


• Drag the gripper at the upper left corner to another part of the workspace.
To dock the Property inspector at the bottom of the workspace (Windows only):
• Drag the side bar on the Property inspector to the bottom of the screen.
To expand a half-height Property inspector to full height, revealing additional options:
• Click the expander arrow in the lower right corner of the Property inspector.
• Click the icon in the upper right of the Property inspector and choose Full Height from the
Property inspector Options menu.
Note: In Windows, the Options menu is available only when the Property inspector is docked.

To reduce the Property inspector to half height:


• Click the expander arrow in the lower right corner of the Property inspector.
• Choose Half Height from the Property inspector Options menu.
Note: In Windows, the Options menu is available only when the Property inspector is docked.

A first look at the Fireworks workspace 41


To collapse the Property inspector when it is docked:
• Click the expander arrow or the title of the Property inspector.
• Choose Collapse Panel Group from the docked Property inspector’s Options menu.
For more information about specific Property inspector options, see the appropriate sections
throughout Using Fireworks or Fireworks Help.

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.

42 Chapter 3: The Studio MX 2004 Workspace


The Swatches panel manages the current document’s color palette.
The Info panel provides information about the dimensions of selected objects and the exact
coordinates of the pointer as you move it across the canvas.
The Behaviors panel manages behaviors, which determine what hotspots and slices do in
response to mouse movement.
The Find panel lets you search for and replace elements such as text, URLs, fonts, and colors in a
document or multiple documents.
The Align panel contains controls for aligning and distributing objects on the canvas.

Organizing panel groups and panels


By default, Fireworks panels are docked in groups in the docking area on the right side of the
workspace. You can undock panel groups, add panels to a group, undock individual panels,
rearrange the order of docked panel groups, and collapse and close panel groups. You can also
open and close individual panels.
You work with panels and panel groups in Fireworks just as you do in the other
Studio applications.

About the Quick Export button


The Quick Export button lets you export your Fireworks files to a number of Macromedia
applications, including Dreamweaver, Flash, Director, and Macromedia FreeHand MX. In
addition, you can export your files to Photoshop, FrontPage, Adobe GoLive, and Illustrator, or
you can preview your files in the browser of your choice.

Navigating and viewing a document


You can control your document’s magnification, its number of views, and its display mode. In
addition, you can easily pan the view of a document, which is helpful if you zoom in and can no
longer see the entire canvas.

A first look at the Fireworks workspace 43


Using document tabs
When your document is maximized, you can easily choose among multiple open documents,
using the document tabs that appear at the top of the document window. Each open document
displays its filename on a tab that appears above the view buttons.

To choose a different document when the current document is maximized:


• Click the document tab for the document you want to view.
Using the History panel to undo and repeat multiple actions
Using the History panel, you can view, modify, and repeat the actions taken to create the
document. The History panel lists the most recent actions you have performed in Fireworks, up
to the number specified in the Undo Steps field in the Fireworks Preferences dialog box.
With the History panel, you can do any of the following:
• Quickly undo and redo recent actions.
• Choose recently performed actions from the History panel and repeat them.
• Copy selected commands to the Clipboard as the JavaScript text equivalent.
• Save a group of recently performed actions as a custom command, and then choose it from the
Command menu to reuse as a single command.
To undo and redo actions:
1 Choose Window > History to open the History panel.
2 Drag the Undo marker up or down.
To repeat actions:
1 Perform the actions.
2 Do one of the following to highlight the actions to be repeated in the History panel:
■Click an action to highlight it.
■ Control-click (Windows) or Command-click (Macintosh) to highlight multiple

individual actions.
■ Shift-click to highlight a continuous range of actions.

3 Click the Replay button at the bottom of the History panel.


To save actions for reuse:
1 Highlight the actions to be saved in the History panel.
2 Click the Save button at the bottom of the panel.
3 Enter a command name and click OK.
To use the saved custom command:
• Choose the command name from the Commands menu.

44 Chapter 3: The Studio MX 2004 Workspace


A first look at the FreeHand workspace
FreeHand is part of the Macromedia MX product family. As such, it uses the Macromedia MX
workspace, an interface that is shared by the other Macromedia MX products. Consistency
among products allows users of one product to easily learn and use the others.
The first time you open FreeHand, the workspace consists of the Document window and a set of
docked panels. In Windows, the workspace is integrated, so you can dock all panels and toolbars
to the single, larger application window. This helps to eliminate the clutter associated with having
many panels and toolbars open at the same time.

Panels

Units pop-up menu

Drawing Mode pop-up menu


Add Page button
Go to Page pop-up menu
Page selector buttons
Magnification pop-up menu

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.

A first look at the FreeHand workspace 45


The Document window
When you start FreeHand, you see, in addition to panels, the Document window and the
pasteboard—the area that contains the pages of your document.
The Document window contains all your documents’ objects. You must place objects on a page
to print them using the Print command; if you place them on the pasteboard outside the page
boundaries, you can print them using the Output Area feature. For more information, see
“Defining an output area” in Using FreeHand Help.
If you modify a document, an asterisk appears next to the document name in the Document
window until you save it again. For more information, see “Saving files” in 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.

46 Chapter 3: The Studio MX 2004 Workspace


Using toolbars
FreeHand has several toolbars that can either float or be docked along the top, left, and bottom of
the Document window. You can display information about each tool as the pointer passes over a
tool icon on the toolbar. For more information, see “Using tooltips” in Using FreeHand Help.

The Main toolbar


The Main toolbar (Window > Toolbars > Main) contains the basic commands you use when
beginning your FreeHand project. You use the Main toolbar to open document files and to
manage the appearance of your document. The Main toolbar also provides quick access to many
common panels. The following buttons are available on the Main toolbar by default, but you can
add other buttons if you want. For more information, see “Customizing toolbars” in Using
FreeHand Help.

Creates a new document Opens the Align panel

Opens an existing document Opens the Transform panel

Saves the active document Opens the Library panel

Imports a file or object Opens the Object panel

Prints the active document Opens the Color Mixer panel

Locks the selected objects Opens the Swatches panel

Unlocks the selected objects Opens the Layers panel

Opens the Find & Replace


panel

A first look at the FreeHand workspace 47


Using the Tools panel
The Tools panel contains tools that allow you to select, draw, and edit objects; apply color to
objects; and create text. It is divided into four sections: Tools, View, Colors, and Snap. You can
customize the panel by adding and removing buttons.
Some tools in the Tools panel have a down arrow in the lower right corner. The down arrow
indicates the presence of a tool pop-up menu. You can select other tools from a tool pop-up menu
by clicking any tool that has a down arrow, holding down the mouse button, and then selecting
from the pop-up menu that appears.

To select a tool from a tool pop-up menu:


1 In the Tools panel, click a tool with a down arrow and hold down the mouse button.
2 Select a tool from the pop-up menu that appears.
To add a tool to the Tools panel, do one of the following:
• Select Window > Toolbars > Customize. Expand the desired category in the Commands list,
and drag a tool from the right side of the dialog box into the Tools panel.
• Alt-drag (Windows) or Command-drag (Macintosh) a tool from another toolbar into the
Tools panel.

48 Chapter 3: The Studio MX 2004 Workspace


To remove a tool from the Tools panel, do one of the following:
• Select Window > Toolbars > Customize, and drag the desired tool from the Tools panel.
• Alt-drag (Windows) or Command-drag (Macintosh) a tool from the Tools panel.
After you remove a tool from the Tools panel, you cannot move the tool back onto the panel
without using the Customize dialog box. For more information, see “Customizing toolbars” in
Using FreeHand Help.
For more information about other toolbars available in FreeHand, including the Text toolbar, the
Envelope toolbar, the Info toolbar, the Status toolbar (Windows), the Xtra Tools toolbar, and the
Xtra Operations toolbar, see “Using toolbars” in Using FreeHand Help.

A first look at the FreeHand workspace 49


50 Chapter 3: The Studio MX 2004 Workspace
CHAPTER 4
Understanding Web Applications

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

About web applications


A web application is a website that contains pages with partly or entirely undetermined content.
The final content of a page is determined only when the 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.
Web applications are built to address a variety of challenges and problems. This section describes
common uses for web applications and gives a simple example.

Common uses for web applications


Web applications have many uses for both site visitors and developers, including the following:
• Let visitors find information quickly and easily on a content-rich website.
This kind of web application gives visitors the ability to search, organize, and navigate
content as they see fit. Examples include company intranets, Microsoft MSDN
(www.msdn.microsoft.com), and Amazon.com (www.amazon.com).
• Collect, save, and analyze data provided by site visitors.
In the past, data entered in HTML forms was sent as e-mail messages to employees or CGI
applications for processing. A web application can save form data directly into a database and
also extract the data and create web-based reports for analysis. Examples include online
banking pages, store check-out pages, surveys, and user-feedback forms.

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).

Web application example


Janet is a professional web designer and long-time Macromedia Dreamweaver MX user
responsible for maintaining the intranet and Internet sites of a medium-sized company of 1000
employees. One day, Chris from Human Resources comes to her with a problem. HR administers
an employee fitness program that gives employees points for every mile walked, biked, or run.
Each employee must report his or her monthly mile totals in an e-mail to Chris. At the end of the
month, Chris gathers all the e-mail messages and awards employees small cash prizes according to
their point totals.
Chris’s problem is that the fitness program has grown too successful. So many employees now
participate that Chris is inundated with e-mails at the end of each month. Chris asks Janet if a
web-based solution exists.
Janet proposes an intranet-based web application that performs the following tasks:
• Lets employees enter their mileage on a web page using a simple HTML form
• Stores the employees’ mileage in a database
• Calculates fitness points based on the mileage data
• Lets employees track their monthly progress
• Gives Chris one-click access to point totals at the end of each month
Janet gets the application up and running before lunchtime using Dreamweaver MX 2004, which
has the tools she needs to build this kind of application quickly and easily.

How a web application works


A web application is a collection of static and dynamic web pages. A static web page is one that
does not change when a site visitor requests it: the web server sends the page to the requesting web
browser without modifying it. In contrast, a dynamic web page is modified by the server before it
is sent to the requesting browser. The changing nature of the page is why it’s called dynamic.
For example, you could design a page to display fitness results, while leaving certain information
(such as employee name and results) to be determined when the page is requested by a
particular employee.

Processing static web pages


A static website comprises a set of related HTML pages and files hosted on a computer running a
web server.
A web server is software that serves web pages in response to requests from web browsers. A page
request is generated when a visitor clicks a link on a web page, selects a bookmark in a browser, or
enters a URL in a browser’s address text box.

52 Chapter 4: Understanding Web Applications


The final content of a static web page is determined by the page designer and doesn’t change
when the page is requested. Here’s an example:
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
</body>
</html>
Every line of the page’s HTML code is written by the designer before the page is placed on the
server. Because the HTML doesn’t change once it’s on the server, this kind of page is called a static
page.
Note: Strictly speaking, a “static” page may not be static at all. For example, a rollover image or Flash
content (a SWF file) can make a static page come alive. However, this documentation refers to
a page as static if it is sent to the browser without modifications.

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.

How a web application works 53


Processing dynamic pages
When a web server receives a request for a static web page, the server sends the page directly to the
requesting browser. When the web server receives a request for a dynamic page, however, it reacts
differently: it passes the page to a special piece of software responsible for finishing the page. This
special software is called an application server.
The application server reads the code on the page, finishes the page according to the instructions
in the code, then removes the code from the page. The result is a static page that the application
server passes back to the web server, which then sends the page to the requesting browser. All the
browser gets when the page arrives is pure HTML. Here’s a view of the process:

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.

54 Chapter 4: Understanding Web Applications


After the driver establishes communication, the query is executed against the database and a
recordset is created. A recordset is a set of data extracted from one or more tables in a database.
The recordset is returned to the application server, which uses the data to complete the page.
Here’s a simple database query written in SQL:
SELECT lastname, firstname, fitpoints
FROM employees
This statement creates a three-column recordset and fills it with rows containing the last name,
first name, and fitness points of all employees in the database. For more information, see the
appendix “SQL Primer” in Using Dreamweaver Help.
Here’s an illustration of the process of querying a database and returning data to the browser:

Step 1 - Web browser Web browser


requests dynamic
page.

Request Response

Step 9 - Web server


sends finished page
to requesting
WEB SERVER browser.
Step 2 - Web server
finds page and <HTML> <HTML>
passes it to <code> <p>Hi
application server.
</HTML> </HTML>
Step 8 - Application
server inserts data in
page, then passes the
page to the web
Step 3 - Application server.
server scans page for
instructions.
Application server

Step 4 - Application
server sends query to Step 7 - Driver
database driver. passes recordset to
application server.
Query Recordset

Step 5 - Driver Step 6 - Recordset is


executes the query Database driver returned to driver.
against the database.

Database

How a web application works 55


You can use almost any database with your web application, as long as the appropriate database
driver for it is installed on the server.
If you plan to build small low-cost applications, you can use a file-based database, such as one
created in Microsoft Access. If you plan to build robust, business-critical applications, you can use
a server-based database, such as one created in Microsoft SQL Server, Oracle 9i, or MySQL.
If your database is located on a system other than your web server, make sure you have a
fast connection between the two systems so that your web application can operate quickly
and efficiently.

Authoring dynamic pages


Authoring a dynamic page consists of writing the HTML first, then adding the server-side
scripts or tags to the HTML to make the page dynamic. When you view the resulting code, the
language appears embedded in the page’s HTML. Accordingly, these languages are known as
HTML embedded programming languages. The following basic example uses ColdFusion
Markup Language (CFML):
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<!--- embedded instructions start here --->
<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>
<!--- embedded instructions end here --->
</body>
</html>
The embedded instructions on this page perform the following actions:
1 Create a variable called department and assign the string "Sales" to it.
2 Insert the variable’s value, "Sales", in the HTML code.
The application server returns the following page to the web server:
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<p>Be sure to visit our Sales page.</p>
</body>
</html>
The web server sends the page to the requesting browser, which displays it as follows:
About Trio Motors
Trio Motors is a leading automobile manufacturer.
Be sure to visit our Sales page.

56 Chapter 4: Understanding Web Applications


You choose a scripting or tag-based language to use depending on the server technology available
on your server. Here are the most popular languages for the five server technologies supported by
Dreamweaver MX 2004:

Server technology Language

ColdFusion ColdFusion Markup Language (CFML)

ASP.NET Visual Basic


C#

Active Server Pages (ASP) VBScript


JavaScript

JavaServer Pages (JSP) Java

PHP PHP

For more information, see “Choosing a server technology” on page 57.


Dreamweaver can create the server-side scripts or tags necessary to make your pages work, or you
can write them by hand in the Dreamweaver coding environment.

Choosing a server technology


You can use Dreamweaver to build web applications using any of five server technologies:
ColdFusion, ASP.NET, ASP, JSP, or PHP. Each of these technologies corresponds to a document
type in Dreamweaver. Choosing one for your web application depends on several factors,
including your level of comfort with various scripting languages and the application server you
plan to use.
If you’re new to web application development or to application development in general, you’ll
probably prefer ColdFusion because it provides an easy-to-learn server scripting environment
that’s also tightly integrated with Dreamweaver. If you’re familiar with other server technologies,
such as JSP, PHP, ASP, or ASP.NET, Dreamweaver offers great support for these as well.
Which server technology you choose also depends on the application server you plan to use for
your web application. An application server is software that helps a web server process web pages
containing server-side scripts or tags. For example, if you have ColdFusion MX Server, you can
choose ColdFusion as your server technology. If you have access to a server running Microsoft
Internet Information Server 5 (IIS) with the .NET Framework, you can choose ASP.NET. PHP is
an option if you have access to a web server with a PHP application server; JSP is an option if you
have access to a web server with a JSP application server (such as Macromedia JRun).
A developer edition of ColdFusion MX is available on the Studio MX 2004 CD (Windows
version only) and on the Macromedia website at www.macromedia.com/software/coldfusion/.
For more information, see “Setting up an application server” in Using Dreamweaver Help.
To learn more about ColdFusion, see Using ColdFusion (available within Dreamweaver Help) or
visit the Macromedia website at www.macromedia.com/software/coldfusion/.
To learn more about ASP.NET, visit the Microsoft website at www.asp.net/.
To learn more about ASP, visit the Microsoft website at msdn.microsoft.com/library/psdk/iisref/
aspguide.htm.

Choosing a server technology 57


To learn more about JSP, visit the Sun Microsystems website at java.sun.com/products/jsp/.
To learn more about PHP, visit the PHP website at www.php.net/.

Web application terminology


This section defines frequently used terms relating to web applications.
An application server is software that helps a web server process web pages containing server-side
scripts or tags. When such a page is requested from the server, the web server hands the page off to
the application server for processing before sending the page to the browser. For more
information, see “How a web application works” on page 52.
Common application servers include Macromedia ColdFusion, Macromedia JRun Server, the
Microsoft .NET Framework, IBM WebSphere, and Apache Tomcat.
A database is a collection of data stored in tables. Each row of a table constitutes one record and
each column constitutes a field in the record, as shown in the following example.
Fields (columns)

Number LastName FirstName Position Goal

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.

58 Chapter 4: Understanding Web Applications


A recordset is a set of data extracted from one or more tables in a database, as in the
following example:

Number LastName FirstName Position Goals

Database table

LastName FirstName Position

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.

Web application terminology 59


A web server is software that sends out web pages in response to requests from web browsers.
A page request is generated when a visitor clicks a link on a web page in the browser, selects a
bookmark in the browser, or enters a URL in the browser’s address text box.
Popular web servers include Microsoft Internet Information Server, Microsoft Personal Web
Server, Apache HTTP Server, Netscape Enterprise Server, and Sun ONE Web Server.

60 Chapter 4: Understanding Web Applications


CHAPTER 5
Installing a Web Server

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.

Installing Personal Web Server


Windows 98 users should install PWS. If you’re a Windows 2000 or Windows XP Professional
user, install IIS instead. For more information, see “Installing Internet Information Server”
on page 63.
You can install PWS on the same Windows 98 system as the one on which you’re running
Macromedia Dreamweaver MX 2004. Make sure Microsoft Internet Explorer 4.01 or later is
installed on the system or you cannot install PWS.
To install PWS:
1 Double-click the PWS installation file on the Windows 98 CD.
2 Follow the installation wizard.
3 When asked for your default web publishing home directory, accept the default directory:
C:\Inetpub\wwwroot
4 Click Finish to end the installation process.
You can test the web server after installing it. For more information, see “Testing PWS or IIS”
on page 63.

62 Chapter 5: Installing a Web Server


Installing Internet Information Server
Windows 2000 and Windows XP Professional users should install Internet Information Server
(IIS). If you’re a Windows 98 user, install PWS instead. For more information, see “Installing
Personal Web Server” on page 62.
If you’re a Windows 2000 or Windows XP Professional user, check whether IIS is already installed
and running on your system. The way to do this is to look for the C:\Inetpub folder. If it doesn’t
exist, IIS is probably not installed on your system.
To install IIS on Windows 2000 and XP Professional:
1 Select Start > Settings > Control Panel > Add or Remove Programs, or Start > Control Panel >
Add/Remove Programs.
2 Select Add/Remove Windows Components.
3 Select Internet Information Services (IIS) and click Next.
4 Follow the installation instructions.
You can test the web server after installing it. See “Testing PWS or IIS” on page 63.

Testing PWS or IIS


To test the web server, create a simple HTML page called myTestFile.html and save it in the
Inetpub\wwwroot folder on the computer where the web server is running. The HTML page can
consist of a single line, such as:
<p>My web server is working.</p>
Next, open the test page in a web browser with an HTTP request. If PWS or IIS is running on
your local computer, enter the following URL in your web browser:
http://localhost/myTestFile.html
If PWS or IIS is running on a networked computer, use the networked computer’s name as the
domain name. For example, if the name of the computer running PWS or IIS is rockford-pc,
enter the following URL in your browser:
http://rockford-pc/myTestFile.html
Note: For more information on computer names, see “Web server basics” 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.

Testing PWS or IIS 63


Testing the Macintosh web server (PHP developers)
You can use the Apache web server already installed on your Macintosh to develop
PHP applications.
To test the server, create a simple HTML page called myTestFile.html and save it in the /Users/
your_user_name/Sites/ folder on your Macintosh (where your_user_name is your Macintosh user
name). The HTML page can consist of a single line, such as:
<p>My web server is working.</p>
Next, open the test page in a web browser with an HTTP request by entering the following URL
in your web browser:
http://localhost/~your_user_name/myTestFile.html
Note: By default the Apache server runs on port 80.

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).

Web server basics


A web server is software that serves web pages in response to requests from web browsers. A web
server is sometimes called an HTTP server.
Suppose you use IIS to develop web applications. The default name of your web server is the
name of your computer. You can change the server name by changing the name of your computer.
If your computer has no name, the server uses the word localhost.
The server name corresponds to the server’s root folder, which (on a Windows computer) is most
likely C:\Inetpub\wwwroot. You can open any web page stored in the root folder by entering the
following URL in a browser running on your computer:
http://your_server_name/your_file_name
For example, if the server name is mer_noire and a web page called soleil.html is stored in
C:\Inetpub\wwwroot\, you can open the page by entering the following URL in a browser
running on the local computer:
http://mer_noire/soleil.html
Note: Remember to use forward slashes, not backslashes, in URLs.

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

64 Chapter 5: Installing a Web Server


When the web server is running on your computer, you can replace the server name with
localhost. For example, the following URLs open the same page in a browser:
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
Note: Another expression you can use instead of the server name or localhost is 127.0.0.1 (for
example, http://127.0.0.1/gamelan/soleil.html).

Web server basics 65


66 Chapter 5: Installing a Web Server
CHAPTER 6
Setup for Sample ColdFusion Site

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.

Setup checklists for ColdFusion developers


To set up a ColdFusion web application, you must configure your system, define a Macromedia
Dreamweaver MX 2004 site, and connect to a database. This section provides checklists for each
task. The procedures themselves are described in the rest of the chapter.
Configure your system:
1 Install the ColdFusion application server (which includes a web server).
2 Create a root folder.
3 Test the application server (optional).
Define a Dreamweaver site:
1 Define a local folder.
2 Define a remote folder.
3 Specify a folder to process dynamic pages.

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.

Configuring your system


The first step in setting up your development environment is configuring your system to run
ColdFusion MX. After you install ColdFusion, you can create a test page to ensure that the web
and application servers are working properly.

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.

68 Chapter 6: Setup for Sample ColdFusion Site


During installation, be sure to perform the following tasks:
• Select Built-in web server (Development use only) in the Web Server Selection window. This
option configures ColdFusion to use the built-in web server, rather than another web server
such as Microsoft IIS.

• 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.

Creating a root folder for your application


After the application software is installed, you must create a root folder for your web application
on the computer running the web server. Make sure that the folder is published by the web server;
in other words, make sure 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 the ColdFusion MX built-in web server, any file in the CFusionMX\wwwroot folder or
in any of its subfolders can be served to a web browser.

Configuring your system 69


In the CFusionMX\wwwroot folder, create a root folder called trio_motors.

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.

Testing the application server


You can check to make sure ColdFusion is running properly by creating a test page and viewing it
in a browser.
To test the application server:
1 In any text editor (such as Notepad), create a plain text file called test.cfm.
2 Save the test.cfm file in the trio_motors root folder that you created in the previous section.
Remember that this folder must be in the folder that is published by the web server—the
CFusionMX\wwwroot folder.
3 In the test.cfm file, enter the following code:
<html>
<head>
<title>Testing your CF MX Application Server</title>
</head>
<body>
Today's Date: <CFOUTPUT>#DateFormat(Now(),"dddd, m/d/yy")#</CFOUTPUT>
</body>
</html>
This code displays the date that the page was processed on the server.

70 Chapter 6: Setup for Sample ColdFusion Site


4 Save the file after you enter the code.
5 In your web browser, enter the URL of your test page, and then press Enter.
By default, ColdFusion MX uses web server port 8500. The URL is as follows:
http://localhost:8500/trio_motors/test.cfm
The test page opens and displays the current date.

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.

Configuring your system 71


Defining a Dreamweaver site
In Dreamweaver the term site can refer either to a website or to a local storage location for the
documents belonging to a website. The latter is what you need to establish before you begin
building your website. A Dreamweaver site organizes all the documents associated with your
website and lets you track and maintain links, manage files, share files, and transfer your site files
to a web server.
A Dreamweaver site consists of as many as three parts, depending on your environment and the
type of website you are developing:
Local folder is your working directory. Dreamweaver refers to this folder as your local site. The
local folder is usually a folder on your hard disk.
Remote folder is where you store your files, depending on your environment, for testing,
production, collaboration, and so on. Dreamweaver refers to this folder as your remote site. The
remote folder is a folder on the computer that’s running your web server.
Folder for dynamic pages (Testing Server folder) is the folder where Dreamweaver processes
dynamic pages. This folder is often the same folder as the remote folder.
You can set up a Dreamweaver site by using the Site Definition Wizard, which guides you
through the setup process, or by using the Site Definition Advanced settings, which let you set up
local, remote, and testing folders individually, as necessary.
The next sections show you how to use the Site Definition Advanced settings in Dreamweaver to
define your site. If you are new to Dreamweaver, you may want to try using the Site Definition
Wizard first. For more information, see “Using the Site Definition Wizard to set up a
Dreamweaver site” in Using Dreamweaver Help.

Defining a local folder


You must define a Dreamweaver local folder for each new website you create. The local folder is
the folder that you use to store working copies of site files on your hard disk. If you don’t define a
local folder, certain features in Dreamweaver cannot work properly.
Defining a local folder also allows you to manage your files and to transfer files to and from your
web server using a number of file-transfer methods.
Now you’ll create the local folder for the sample Trio Motors website.
To create the sample site local folder:
1 Before you start Dreamweaver, create a folder called trio_motors somewhere on your local disk
to store working copies of your files.
2 Inside the trio_motors folder, create three subfolders: flash, png, and images. You won’t need
these folders right away, but they’ll become important in the tutorials that appear later in
this book.
3 Start Dreamweaver and select Site > Manage Sites.
The Manage Sites dialog box appears.

72 Chapter 6: Setup for Sample ColdFusion Site


4 Click the New button and select Site.
The Site Definition dialog box appears.

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.

Defining a remote folder


After defining a local folder, you can define a remote folder for your Dreamweaver site. The
remote folder is the root folder (trio_motors) that you created for your web application in
“Creating a root folder for your application” on page 69. The remote folder has the same name as
the local folder because your remote site will be an exact duplicate of your local site. That is, the
files and subfolders that you eventually post to your remote folder will be copies of the files and
subfolders that you create locally.

Defining a Dreamweaver site 73


To define a remote folder:
1 In the Site Definition dialog box, select Remote Info from the Category list.
The Remote Info dialog box appears.
2 In the Access pop-up menu, select one of the following options: Local/Network, FTP, or RDS.
Your choice indicates how you want to transfer files between your local folder and your remote
folder.
If you have set up ColdFusion MX on your local computer or on a remote network computer,
you need to select Local/Network as the access method.
Note: If you want to use RDS, the remote folder must be on a computer running ColdFusion.

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.

74 Chapter 6: Setup for Sample ColdFusion Site


Specifying where dynamic pages can be processed
After defining the remote folder in Dreamweaver, you need to specify a folder where dynamic
pages can be processed. Dreamweaver uses this folder—the testing server folder—to generate
dynamic content and connect to databases while you work.
Typically, you specify the same root folder you created on the web server as your testing server
folder. The testing server folder must reside on the web server.
Note: The root folder can be on your local computer or on a remote computer, depending on where
your web server is running. In some cases, users choose a root folder on the local web server as their
testing server folder, and a separate root folder on the remote web server as their remote folder. This
arrangement allows users to test dynamic pages locally before uploading them to the remote server
for public access.

To specify a folder to process dynamic pages:


1 In the Site Definition dialog box, select Testing Server from the Category list.
The Testing Server dialog box appears.
2 Select ColdFusion from the Server Model pop-up menu.
3 Select an access method from the Access pop-up menu. If you selected Local/Network in the
previous section, select Local/Network.
4 Accept the default Testing Server Folder settings, or enter different settings.
By default, Dreamweaver assumes that your testing server folder and your remote folder are the
same. If you defined a remote folder in the Remote Info category in the Site Definition dialog
box, and if an application server runs on the same system as the remote folder (including your
local computer), accept the default settings in the Testing Server Folder category.
5 In the URL Prefix text box, enter the URL that you would type in your browser to open your
website, but do not include any filename.
For example, suppose your application’s URL is http://www.macromedia.com/trio_motors/
index.cfm. In this case you would enter the following URL prefix: http://
www.macromedia.com/trio_motors/.
If Dreamweaver runs on the same system as the ColdFusion built-in web server, you can use
the term localhost:8500 as a stand-in for your domain name. For example, suppose your
website’s URL is as follows:
http://buttercup_pc/trio_motors/index.cfm
You could then enter the following URL prefix:
http://localhost:8500/trio_motors/
For more information, see “Setting the URL prefix” in Using Dreamweaver Help.

Defining a Dreamweaver site 75


6 Review your Testing Server settings.
The Testing Server settings pictured below are for a Dreamweaver site that uses ColdFusion
MX and the ColdFusion built-in web server on a Windows XP machine.

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.

Connecting to the sample database


This section explains how to create a connection to the sample Microsoft Access database.
Before you begin this section, you must copy the sample database to your computer. To locate
the sample database, insert the Macromedia Studio MX 2004 CD into your computer and select
Browse CD Contents from the lower right corner of the installation screen. The sample database,
trio. mdb, resides in the Samples folder along with all of the sample files necessary to complete the
tutorials in Part 2 of this book.
If you’re a Windows user, and your web server is running on the same computer as Dreamweaver,
locate the sample database and copy it to your hard drive. You can store the file in any folder on
your computer, or you can create a new folder for it. For example, you can create a folder called
data in your CFusionMX\wwwroot folder and store the sample database in that location.
If you’re a Macintosh user, see the next section, “Setting up the database (remote server
configuration only).”
For more information about databases and database connections in general, see the appendix
“Beginner’s Guide to Databases” in Using Dreamweaver Help.

76 Chapter 6: Setup for Sample ColdFusion Site


Setting up the database (remote server configuration only)
This section applies only if you have a remote server configuration—that is, if your web server is
running on a remote computer. If your web server is running on the same computer as
Dreamweaver, skip to the next section, “Creating a ColdFusion data source.”
Before attempting to connect to the sample database, copy the database to the remote computer’s
hard disk. The database file, trio.mdb, is located in the Samples folder on the Macromedia Studio
MX 2004 CD.
You can store the file in any folder on the remote computer, or you can create a new folder for it.
For example, you can create a folder called data in your CFusionMX\wwwroot folder and store
the sample database in that location.
After the database is in place, create a ColdFusion data source in ColdFusion Administrator.

Creating a ColdFusion data source


Before you can connect to a database in Dreamweaver, you must create a ColdFusion data source
in ColdFusion Administrator, the server’s management console.
A ColdFusion data source is a one-word identifier, such as Acme, that points to the database and
contains all the information necessary for you to connect to it. ColdFusion data sources are
similar to Windows data source names (DSNs) in that they automatically include all the DSNs
set up on the Windows system that’s running ColdFusion. They’re unlike DSNs in that you can
create data sources for databases using OLE DB providers or native drivers. (DSNs can point to
databases only if you’re using ODBC drivers installed on a Windows computer.) For more
information, see the appendix “Beginner’s Guide to Databases” in Using Dreamweaver Help.
Now you’ll define the sample Trio Motors database as a ColdFusion data source.
To define the sample database as a ColdFusion data source:
1 In the Dreamweaver Files panel, select the Trio Motors site that you created in “Defining a
Dreamweaver site” on page 72.
2 Create a new file by selecting File > New.
3 Select Dynamic Page from the Category column and ColdFusion from the Dynamic Page
column of the General tab.
4 Click Create.
5 Title the document by typing Trio Motors in the Title box at the top of the document.
6 Save the file (File > Save) in the main directory of the Trio Motors site (trio_motors) as
index.cfm.
Do not close the file. It must be open in the Document window for you to complete the
next steps.

Connecting to the sample database 77


7 Click the Modify Data Sources icon in the Databases panel (Window > Databases).

Modify Data
Sources icon

ColdFusion Administrator opens in a browser window.


8 Log in to ColdFusion Administrator, using the password that you selected when you installed
ColdFusion MX.
The Data Sources screen appears.
9 Type trio in the Data Source Name text field.
10 Select Microsoft Access from the Driver pop-up menu.

For more information about database drivers, see the appendix “Beginner’s Guide to
Databases” in Using Dreamweaver Help.

78 Chapter 6: Setup for Sample ColdFusion Site


11 Click the Add button.
A screen that allows you to select a data source appears.

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.

Connecting to the sample database 79


15 Click the Submit button.
ColdFusion Administrator displays the Data Sources screen once again.

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.

80 Chapter 6: Setup for Sample ColdFusion Site


Viewing ColdFusion data sources in Dreamweaver
After creating a ColdFusion data source in ColdFusion Administrator, you can use it to connect
to the database in Dreamweaver.
To view the ColdFusion data source in Dreamweaver:
1 Make sure that the index.cfm file you created in “Creating a ColdFusion data source”
on page 77 is still open in the Dreamweaver Document window. If it isn’t open, double-click
the file’s icon in the Files panel to open it.
2 Open the Databases panel (Window > Databases).
3 Specify the RDS login information for ColdFusion MX Server by clicking the link on the
prompt, typing your RDS login password, and clicking OK.
Your ColdFusion data sources appear in the panel.

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.

Connecting to the sample database 81


82 Chapter 6: Setup for Sample ColdFusion Site
PART II

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.

Planning your website


To plan and organize your site effectively, you must do much more than determine what the site
will look like and where the files will go. You need to examine the site goals, static and dynamic
page requirements, and audience profiles. Additionally, you should consider technical
requirements, such as user access and browser, plug-in, or download restrictions. Careful
planning before you begin site development will save you a great deal of time later.

Establishing site goals and determining your audience


Determining your site goals is the first step in creating a website. Ask yourself or your client
questions about the site, and write down your goals so that you remember them as you go
through the design process. A list of goals helps you focus and target your website to your
particular needs. The complexity of your goals affects the navigation, the media that you use, and
even the look and feel of your site. The look and navigation of a website devoted to archeology
news should be very different from that of a website devoted to selling appliances. Similarly, a site
that delivers rich content and applications to its users should look very different from a site that
displays dynamic data using more traditional, HTML-based methods.
After you decide what you want your website to accomplish, you need to decide who you want
your visitors to be. This question may seem unnecessary, because most people want everyone to
visit their website. Still, it is difficult to create a website that every person in the world can use.
People around the world use various browsers, connect at various speeds, may or may not have
media plug-ins, and use various types of devices to view Internet content. Because all these factors
affect who uses your site, determining your target audience is a crucial step during the initial
planning phase.
Think about the people who might be attracted to your website and whom you hope to attract.
What kinds of computers do they use? What is the dominant platform (Macintosh, Windows,
Linux, and so on) and the average connection speed (33.6 Kbps modem or DSL)? What kinds of
browsers, monitor sizes, cellular phones, and other devices do they use? Are you creating an
intranet site where everyone uses the same computer, operating system, and browser? All these
factors greatly affect how your web page appears to visitors and how you test your site after you
create it.

86 Chapter 7: Web Development Workflow


Designing sites for browser compatibility
As you create your site, you should be aware of the variety of web browsers that your visitors are
likely to use. There are over two dozen different web browsers in use, most of which have been
released in more than one version. Even if you target only Netscape Navigator and Microsoft
Internet Explorer, which are used by the majority of visitors, be aware that not everyone uses the
latest versions of those browsers. If your site is on the web, sooner or later someone will visit it
using Netscape Navigator 3.0, the new Macintosh Safari browser, or a text-only browser such
as Lynx.
If your website is designed for public viewing, it’s usually a good idea to make it viewable in as
many browsers as possible. Pick one or two browsers as your target browsers, and design the site
for those browsers. Occasionally explore the site in other browsers to avoid including too much
incompatible content. You can also post a message on a discussion board to ask others to view
your site. This can be a good way to get feedback from a wide audience.
The more sophisticated your site is—in terms of layout, animation, multimedia content, and
interaction—the less likely it is to be compatible across browsers. Not all browsers can run
JavaScript, for example. Although you can display a page of plain text with no special characters
in any browser, that page may have much less aesthetic appeal than one that uses graphics, layout,
and interaction effectively. Try to strike a balance between designing for maximum effect and
designing for maximum browser compatibility.
One useful approach is to provide multiple versions of certain important pages, such as your site’s
home page. For example, you can design a version with frames and a version without frames. You
can then include in your web page a behavior that automatically sends visitors without frame-
capable browsers to the frameless version. For more information, see “Using the behavior actions
that come with Dreamweaver” in Using Dreamweaver Help.
Special features in Dreamweaver make it easy for you to reduce browser compatibility problems.
The Check Target Browsers feature tests the code in your documents to see whether any tags,
attributes, CSS properties, or CSS values are unsupported by your target browsers. The check
does not alter the document in any way. By default, Dreamweaver now automatically performs a
target browser check whenever you open a document. You can also run a target browser check
manually on a document, on a folder, or on an entire site.
For more information, see “Checking for browser compatibility” in Using Dreamweaver Help.

Determining data requirements and creating a database


Whether you are developing a Rich Internet Application with Flash, or a more traditional
HTML-based web application with Dreamweaver, you will probably use a database to store the
information that your website delivers to your users. Before you build your database, however,
you must determine your website’s data requirements. If you want to display dynamic data on
your web pages, what type of data will you display and where? If users are going to interact with
an application interface, what questions will they ask the application, and what information will
they want to retrieve from the database? As with site goals and target audiences, you should have a
firm idea of what your data source requirements will be before you begin developing your website.
After you determine your data source requirements, think about how to structure a database that
will optimally convey stored information to your users. You can decide how to structure your
database before you begin conceptualizing your page layouts or while you develop the application
interface itself. Your workflow needs influence exactly how and when you create your database.

Planning your website 87


The first step is to choose the tables in the database. A database table contains collections of
related entities, such as persons, objects, or events, and divides this information into horizontal
rows and vertical columns. In database terminology, each table column represents a field, and
each table row represents a record.

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.

Sketching the site navigation in FreeHand and presenting your plan


After you determine your site’s goals, target audience, and data source requirements, you are
ready to begin conceptualizing the 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 travel
through your site as they click links and interact with application interfaces.

88 Chapter 7: Web Development Workflow


You can use FreeHand to conceptualize, draw, and experiment with your site’s navigation scheme.

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.

Setting up the development environment


Whether you are developing your project single-handedly or collaborating with a team of people,
you need to set up a development environment before you begin using Studio MX to build your
website. At the most basic level, a development environment consists of a web server, an
application server, and a Dreamweaver site.

Setting up the development environment 89


Setting up your web and application servers
A web server is software that serves files in response to requests from web browsers. When the web
server receives a request for a static HTML page, the server reads the request, finds the page, and
sends it to the requesting browser. Common web servers include Microsoft Internet Information
Server (IIS), Netscape Enterprise Server, Sun ONE Web Server, and Apache HTTP Server.
ColdFusion also includes its own web server, which is recommended for development
purposes only.
Choose a web server and install it on your local computer or on a networked computer. For more
information, see Chapter 5, “Installing a Web Server,” on page 61.
To run HTML-based applications or Rich Internet Applications, your web server must work
with an application server. An application server is software that helps the web server process
dynamic pages before the web server sends those pages to requesting browsers. The application
server reads the code on the dynamic page, finishes the page according to the instructions in the
code, and then strips out the code. In the case of an HTML-based application, the result is a static
page of HTML that the application server passes back to the web server, which then sends the
page to the requesting browser. In the case of a Rich Internet Application, the result is a Flash
application that returns the variables requested by the browser.
Your choice of application server should depend on several factors, including your budget, the
server technology you want to use, and the web server you choose. Dreamweaver supports five
server technologies: ColdFusion, ASP.NET, ASP, JSP, and PHP. The following table shows
common application servers that are available for these five server technologies.

Server technology Application server

ColdFusion Macromedia ColdFusion MX


ASP.NET Microsoft IIS 6 with .NET Framework

ASP Microsoft IIS or PWS


Sun ONE Active Server Pages

JSP Macromedia JRun


IBM WebSphere
Apache Tomcat
BEA WebLogic

PHP PHP server

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.

90 Chapter 7: Web Development Workflow


For more information, see Chapter 4, “Understanding Web Applications,” on page 51,
Chapter 5, “Installing a Web Server,” on page 61, and Chapter 6, “Setup for Sample ColdFusion
Site,” on page 67.
ASP, ASP.NET, JSP, and PHP users should consult the Dreamweaver documentation for more
information about setting up an application server. See “Preparing to Build Dynamic Sites” in
Using Dreamweaver Help.

Defining your site in Dreamweaver


In Dreamweaver, the term site can refer either to a website or to a local storage location for the
documents belonging to a website. The latter is what you need to establish before you begin
building your website. A Dreamweaver site organizes all the documents associated with your
website and allows you to track and maintain links, manage files, share files, and copy your site
files to a web server. Certain features in Dreamweaver cannot work properly unless you define
a site.
The preferred approach to creating a website using Dreamweaver is to create and edit pages on
your local disk and then upload copies of the site’s files to a remote web server to make them
publicly available. You use the Dreamweaver Manage Sites window (Site > Manage Sites) to
define local and remote site information, and then you use the Files panel (Window > Files) to
manage your site.
The Files panel lets you choose from four distinct views: Local, Remote, Testing Server, and Map.

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.

Setting up the development environment 91


Establishing ColdFusion data sources
A ColdFusion data source is a one-word identifier, such as Acme, that points to the database and
contains all the information necessary for you to connect to it. ColdFusion data sources are
similar to Windows data source names (DSNs) in that they automatically include all the DSNs
that are set up on the Windows system that is running ColdFusion. They’re unlike DSNs in that
you can create data sources for databases by using Object Linking and Embedding DataBase
(OLE DB) providers or native drivers. (DSNs can point to databases only if you’re using Open
DataBase Connectivity [ODBC] drivers that are installed on a Windows computer.)
You can create a ColdFusion data source by using ColdFusion Administrator. If you’re using an
ODBC driver on a Windows computer, you can also set up a DSN on the computer. System
DSNs are automatically treated as ColdFusion data sources.
When you open a ColdFusion page in Dreamweaver, ColdFusion data sources appear in the
Databases panel (Window > Databases).

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.

Establishing a source control system in Dreamweaver and Fireworks


If you’re working in a collaborative environment, you can check files into and out of local and
remote servers. Checking out a file is the equivalent of declaring, “I’m working on this file now—
don’t touch it!” When a file is checked out, the Files panel displays the name of the person who
checked out the file, along with a red check mark (if one of your team members checked out the
file) or a green check mark (if you checked out the file) next to the file’s icon.
Checking in a file makes the file available for other team members to check out and edit. When
you check in a file after editing it, your local version becomes read-only, and a lock symbol
appears beside the file in the Files panel to prevent you from making changes to the file.
For more information, see “Checking in and checking out files” in Using Dreamweaver Help.

92 Chapter 7: Web Development Workflow


Fireworks MX 2004 now contains a feature that helps you integrate file management with
Dreamweaver. The File Management button, located at the top of the Document window next to
the Quick Export button, offers easy access to file-transport commands.

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.

Planning page design and layout


A web design project usually begins with storyboards or flowcharts that the designers and
developers then turn into sample pages. You can use Studio MX to mock up sample pages as you
work toward a final design. Mock-ups typically show design layout, technical components,
themes and color, graphic images, and other media elements. Your mock-up should look like a
blueprint that you and your team members will follow when designing the site. After you have a
visual guideline of how you’d like your pages to look, you can begin planning page layouts
in Dreamweaver.

Creating page mock-ups to determine your site’s look and feel


Planning your page design and layout before you actually begin building your web pages will save
you a great deal of time during the development process. It is important to maintain consistency
in your page design and layout. Give your site pages a similar look, color scheme, navigation, and
so forth. This consistent approach helps to orient your users, providing a better user experience.

Planning page design and layout 93


FreeHand and Fireworks are ideal for sketching a preliminary design for the main pages of
your website.

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.

Creating page layouts in Dreamweaver


Page layout is one of the most important aspects of web design. A page layout determines how a
page will look in the browser, showing, for example, the placement of menus, images, and Flash
content. Dreamweaver gives you several ways to create and control your web page layout.
One common method of creating a page layout is to position elements using HTML tables.
Tables are powerful tools for presenting tabular data and for laying out text and graphics on a web
page. A table consists of one or more rows, with each row containing one or more cells.
Dreamweaver provides three ways to view and manipulate tables: Standard mode, Layout mode,
and Expanded Tables mode. In Standard mode, tables are presented as a grid of rows and
columns. Layout mode presents boxes that you can easily draw, resize, and move on the page
while still using tables for the underlying structure. Later, you can add text, images, and other
content to layout cells in Layout mode, just as you would add content to table cells in Standard
mode. Expanded Tables mode is a new feature in Dreamweaver that temporarily adds cell
padding and spacing to all tables in a document and increases table borders to simplify editing.

94 Chapter 7: Web Development Workflow


Another way of laying out pages in Dreamweaver is to position elements by using Cascading Style
Sheets (CSS). CSS positioning is quickly becoming a popular way to lay out pages because it
allows for greater control and flexibility than tables do. Users who are familiar with CCS can use
<div> tags to create content blocks, and then use CSS styles to position those blocks on the page.

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.

Planning page design and layout 95


Creating content assets
After you know what your design and layout will look like, you can create and gather the assets
that you will need. Assets can be items such as images, text, Flash movies, or other media. The
Dreamweaver Assets panel (Window > Assets) displays and provides access to all the assets in
your site.

Creating images in FreeHand and Fireworks


You can use both FreeHand and Fireworks to create images for your website.
FreeHand is a vector-based drawing application. With FreeHand, you can create print and web
graphic illustrations such as figures, logos, and advertising banners. You can also use FreeHand to
turn your artwork into Flash movies. The FreeHand workspace and Tools panel are consistent
with those in the other Studio MX products. You have already seen how FreeHand can be used to
sketch a site navigation or a preliminary page design. For more information about creating
content assets with FreeHand, see Using FreeHand Help.
Fireworks is the ideal tool for professional web graphics design and production. It is the first
production environment to address the special challenges facing web graphic designers and
developers. Using Live Effects in Fireworks, you can enhance graphics by applying bevels,
embossing, drop shadows, glows, and other effects to vector objects, bitmaps, and text. Live
Effects are nondestructive, meaning that they are always editable. Fireworks also generates
JavaScript, making rollovers, buttons, and pop-up menus easy to create, and its optimization
features shrink the file size of web graphics without sacrificing quality.
Fireworks has bitmap-editing tools as well as vector-editing tools. In Fireworks, everything is
editable, all the time. And you can automate workflow tasks to meet the demands of updates and
changes. Like FreeHand, Fireworks integrates with other Studio products to help you optimize
your workflow. After you create your images and include them in your site, you can start, edit,
and work in Fireworks without ever leaving the Dreamweaver or Flash workspace.
To begin creating content assets with Fireworks, see Tutorial 3, “Creating a Banner Graphic in
Fireworks,” on page 131, and Tutorial 4, “Building a Navigation Bar with Fireworks,”
on page 139.

Creating rich media elements with Flash


Your Flash content can include graphics, text, animation, and applications for websites. Flash
content consists primarily of vector graphics, but it can also include imported video, bitmap
graphics, and sounds. Flash content can incorporate interactivity to permit input from viewers,
and you can create nonlinear content that interacts with other web applications. Because Flash
content uses compact vector graphics, it downloads rapidly and scales to the viewer’s screen size.
You’ve probably watched and interacted with Flash content on many websites. Millions of web
users have received Flash Player with their computers, browsers, or system software; others have
downloaded it from the Macromedia website. Flash Player resides on the local computer, where it
plays back Flash content in browsers or as stand-alone applications. Viewing Flash content on
Flash Player is similar to viewing a DVD on a DVD player; Flash Player is the device that displays
the content you create in the Flash authoring application.

96 Chapter 7: Web Development Workflow


Flash documents, which have the .fla filename extension, contain all the information required for
you to develop, design, and test interactive content. However, Flash documents are not the
content that Flash Player displays. Instead, you publish your FLA documents as Flash files, which
have the .swf filename extension and contain only the information that is necessary for playing
the content.

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.

Creating templates and libraries for reusing assets


Dreamweaver templates and libraries can help you create web pages with a consistent design.
Using templates and libraries also simplifies website maintenance, because they let you redesign
your site and change hundreds of pages in seconds.

Creating content assets 97


A template is a document you can use to create multiple pages that share the same layout. When
you create a template, you can indicate which elements of a page should remain constant
(non-editable, or locked) in documents based on that template, and which elements can
be changed.
For example, if you’re publishing an online magazine, the masthead and overall layout probably
doesn’t change from one issue to the next, or even from one story in the magazine to the next, but
the title and content of each story are different. A designer can create the layout of a story page for
the magazine, with placeholder text where the story’s title and contents will be (and with those
regions marked as editable); the designer can then save that layout as a template. The person
putting together a new issue of the magazine creates a new page based on the template, and
replaces the placeholder text with the actual title and text of the new story.
You can modify a template even after you’ve created documents based on it. When you modify a
template, the locked (non-editable) regions in the documents that are based on the template are
updated to match the changes to the template.
Templates are best for situations in which you want a set of pages to have an identical layout—
when you want to design the complete final layout for a set of pages first, and add content later. If
you simply want your pages to have the same headers and footers, with different layouts in
between, use library items instead. Library items are page elements such as images, text, Flash
content, and other media that you can reuse or update frequently throughout your website. As
with templates, you can update all the pages that use a library item whenever you change the
item’s contents.
For example, suppose you’re building a large site for a company. The company wants its slogan to
appear on every page of the site, but the marketing department is still finalizing the slogan. In this
situation, you can create a library item to contain the slogan and use that library item on every
page. When the marketing department provides the final slogan, you can change the library item
and automatically update every page that uses it.
For more information, see “Managing Templates” and “Managing Site Assets and Libraries” in
Using Dreamweaver Help.
The Flash library lets you easily reuse your assets. The library in a Flash document stores symbols
created in Flash, plus imported files such as video clips, sound clips, bitmaps, and vector artwork.
The Library panel displays a scroll list with the names of all items in the library, allowing you to
view and organize these elements as you work. While you are working in Flash you can open the
library of any Flash document to make the library items from that file available for the current
document. You can create your own permanent libraries that are available whenever you start
Flash, or use any of several sample libraries that come with Flash. The sample libraries contain
buttons, graphics, movie clips, and sounds that you can add to your own Flash documents.
For more information, see “Using the library to manage media assets” in Using Flash Help.
FreeHand and Fireworks also include libraries that can contain reusable assets. This cross-product
feature helps you optimize your Studio workflow by providing a familiar place to store content
assets, no matter what program you’re using.
For more information, see Using FreeHand Help and Fireworks Help.

98 Chapter 7: Web Development Workflow


Building application assets
A powerful aspect of dynamic web application development is the ability to present database-
stored information in a web format. Studio MX 2004 products help you build such applications
rapidly, providing a wide range of features that increase developer productivity, from prebuilt
components and templates to an integrated workflow and shared user interface.

Building dynamic pages in Dreamweaver


A key benefit of Dreamweaver is that you can use it to create dynamic websites even if you aren’t
experienced in programming languages. The Dreamweaver visual tools let you develop dynamic
websites without having to hand-code the complex programmatic logic required for creating a site
that supports the display of dynamic content stored in a database. Dreamweaver lets you create
dynamic websites using any of several popular web programming languages and server
technologies, including ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer
Pages (JSP), and PHP.
For coders, Dreamweaver offers enhanced runtime code and a code-centric workspace derived
from ColdFusion Studio and Macromedia HomeSite+. You can work in Code view, Design view,
or Code and Design view, which lets you see both your code and your interfaces as you develop
your dynamic pages and applications. The ColdFusion code that Dreamweaver generates for your
dynamic pages is now easier to understand and looks more like code you would write by hand.
The code will be familiar to you if you have learned ColdFusion techniques from textbooks or
online tutorials.
When you build a dynamic website, you need to establish a content source from which to extract
data before the site can display the data on a web page. In Dreamweaver these data sources can be
databases, request variables, server variables, form variables, or stored procedures.
Before you can use these content sources in a web page, you must do the following:
• Create a connection to the dynamic content source (such as a database) and to the application
server processing the page.
• Specify what information in the database you want to display or what variables you want to
include in the page.
• Use the Dreamweaver point-and-click interface to select dynamic content elements and insert
them into the selected page.
Dreamweaver allows you to easily connect to a database and create a recordset (or DataSet in
ASP.NET) from which to extract dynamic content. A recordset is the result of a database query.
A recordset extracts the specific information that you request and allows you to display that
information in a specified page. You define the recordset based on the information contained in
the database and the content that you want to display.

Building application assets 99


To create a recordset in Dreamweaver, you use the Recordset dialog box.

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.

100 Chapter 7: Web Development Workflow


From here you can import your data sources into any web page within the defined site. You can
insert any of the values shown in the Bindings panel into a web page by selecting the item and
clicking the Insert button at the bottom of the panel. Alternatively, you can select an item and
drag it onto the page, just as you would drag any image or media element from the Assets 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.

Building Rich Internet Application assets with Flash


Flash combines a broad range of multimedia design and Rich Internet Application development
abilities in one product. Developers can build Rich Internet Applications by using the
multimedia capabilities of Flash along with its sophisticated tools, including a powerful
ActionScript editor, a robust debugger, and predefined Flash UI components.

Building application assets 101


Although Flash provides an open framework for application development with .NET and J2EE
servers, enhanced integration with ColdFusion offers the fastest way for developers to build Rich
Internet Applications. Broad-ranging support includes code samples and reference material; high-
performance connectivity; common language support between Dreamweaver, Flash, and
ColdFusion; seamless integration with Flash UI components; and an integrated tool set for
uniting back-end logic with Flash user interfaces.
You begin building your Flash/ColdFusion Rich Internet Applications by creating ColdFusion
components—code snippets that Flash calls through ActionScript when you’ve built the
application. You can then create Flash application interfaces by using previously designed
FreeHand graphics, or page elements designed in Flash. The UI components that come with
Flash—including scroll bars, rich text fields, input buttons, radio buttons, checkboxes, and list
and combo boxes—greatly enhance your ability to build applications rapidly.

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/.

102 Chapter 7: Web Development Workflow


Assembling, testing, and deploying
The last phase of the web development process consists of assembling the assets you’ve created,
testing the web pages you’ve built, and deploying your site to a server so that the world can see it.
Studio MX 2004provides a number of features that help you streamline this process.

Assembling your assets in Dreamweaver


Using Dreamweaver, you can easily add many types of content to web pages. You can add assets
and design elements, such as text, images, colors, movies, sound, and other forms of media. The
Assets panel (Window > Assets) lets you easily organize the assets in a site; you can drag most
assets directly from the Assets panel into a Dreamweaver document.

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.

Assembling, testing, and deploying 103


After assembling your assets, you can edit them directly in the Dreamweaver workspace.
Dreamweaver now lets you perform a number of simple image-editing tasks without the
assistance of an image-editing application. You can crop a bitmap image, adjust its contrast,
optimize it, or sharpen it by selecting the image in the Document window, selecting the
appropriate tool in the Property inspector, and making your edit. For more information, see
“Inserting images” in Using Dreamweaver Help.
Note: The image optimization feature in Dreamweaver is available only if you have
Fireworks installed.

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.

Using Dreamweaver and Flash to ensure accessibility


Macromedia supports efforts to make websites and web products accessible to people with visual,
auditory, motor, and other disabilities. Flash and Dreamweaver provide tools that help you
author accessible content. Examples of accessibility features for websites include screen reader
support, labels and descriptions for graphics, keyboard shortcuts, and high-contrast display
colors. Additionally, certain features make Dreamweaver itself accessible to such users.
Specifically, Dreamweaver supports screen readers, operating system accessibility features, and
keyboard navigation.
To make information accessible to screen readers and to your website users, Dreamweaver
supports caption text for graphic elements, including push buttons, controls, images, and tables.
This means that you can add labels and descriptions to elements so that a screen reader can read
them to the user.

104 Chapter 7: Web Development Workflow


For example, you could add the description “Boy’s red jacket size large” to a product image in
your document. When the image appears on a page for a sight-impaired user, the screen reader
reads the description, and the user knows which product is being displayed on the page.
Accessible Flash content is supported by Flash Player 6 or later. To take advantage of accessible
Flash content, users must have a Windows operating system that supports Flash accessibility, and
the appropriate screen reader software (including Flash Player 6 or later).
Flash provides several accessibility authoring features that go beyond simply providing names for
objects. You can provide a description for text or text fields, buttons, or movie clips and keyboard
shortcuts for input text fields or buttons. You can also turn off automatic labeling behavior for
your content, which prevents text strings from being read by screen readers.
Additionally, you can choose to hide a selected object from screen readers. For example, you
might choose to hide animated movie clips if you think that the verbal description does not
enhance the accessible version of the movie. You can also choose to hide accessible objects that are
contained inside a movie clip or movie, and expose only the movie clip or the movie itself to
screen readers.
Keep in mind that screen reader technology is designed primarily to convey information about
static user interfaces. You can make your Flash content more accessible if you keep dynamic
content to a minimum and emphasize text and user interface features. You can select which
objects in Flash content to expose to a screen reader, and you can omit animations or visually
oriented movie clips to increase accessibility.
Designing accessible websites requires that you understand accessibility requirements and make
many ongoing subjective decisions that cannot be made by a development tool. For example, one
accessibility requirement is to avoid conveying meaning with color. The only way to make a
website accessible is through deliberate planning, development, testing, and evaluation.
For more information, see “Dreamweaver and accessibility” in Using Dreamweaver Help. To
find more information about accessibility features in Flash, search for “accessibility” in Using
Flash Help.
You can also visit the Macromedia Accessibility Resource Center at www.macromedia.com/
macromedia/accessibility/ to learn more about preparing web content that meets the accessibility
requirements mandated for U.S. federal agencies.

Validating and debugging your work


You can use the Dreamweaver Validator to determine whether your code contains tag or syntax
errors. The Validator supports many tag-based languages, including HTML 2, HTML 3.2,
HTML 4, XHTML 1 Strict, XHTML 1 transitional, XHTML 1 frameset, Internet Explorer 3
Extensions, Internet Explorer 4 Extensions, Netscape Navigator 3 Extensions, Netscape
Navigator 4 Extensions, ColdFusion, ColdFusion 3, ColdFusion 3.1, ColdFusion 4, ColdFusion
4.5, ColdFusion 5, ColdFusion MX, Synchronized Multimedia Integration Language 1, Wireless
Markup Language, and JavaServer Page Tags. You can also validate a document as an XML (or
XHTML) document.
For more information, see “Optimizing and Debugging Your Code” in Using
Dreamweaver Help.

Assembling, testing, and deploying 105


The Flash Debugger allows you to find errors in your Flash content while it’s running in Flash
Player. You can use the Debugger in test mode with local files, or you can use the Debugger to test
files on a web server in a remote location. The Debugger lets you set breakpoints in your
ActionScript that stop Flash Player and step through the code as it runs. You can then go back to
your scripts and edit them so that they produce the correct results.
For more information, see “Debugging your scripts” in the ActionScript Reference Guide (available
within Flash Help).

Testing your site in Dreamweaver


Before you upload your site to a server and declare it ready for viewing, it’s a good idea to test it
locally. In fact, it’s a good idea to test and troubleshoot your site frequently throughout its
construction, so that you can catch problems early and avoid repeating them.
You want to make sure that your pages look and work as expected in the browsers that you’re
targeting, that there are no broken links, and that the pages don’t take too long to download.
You can also test and troubleshoot your entire site by running a site report before you publish
your site.
The following guidelines can help you create the best possible experiences for visitors to your site:
• Preview your pages in as many different browsers and on as many different platforms as
possible. Previewing your pages gives you an opportunity to see differences in layout, color,
font sizes, and default browser window size that cannot be predicted in a target browser check.
• Make sure that your pages function as expected in the browsers that you’re targeting and that
they “fail gracefully” in other browsers. This means that your pages should be legible and
functional in browsers that do not support styles, layers, plug-ins, or JavaScript. For pages that
fail badly in older browsers, consider using the Check Browser behavior in Dreamweaver to
automatically redirect visitors to another page. You can also use the Check Target Browser
feature to determine whether any of your tags, attributes, CSS properties, or CSS values are
unsupported by your target browsers.
• Check your site for broken links, and then fix them. Other sites undergo redesign and
reorganization, too, and the page that you’re linking to may have been moved or deleted. For a
simple list of links to external sites, you can run a link check in Dreamweaver. Alternatively,
you can run a sitewide report that checks for and produces a report on invalid external links.
• Monitor the size of your pages and the time that they take to download. Keep in mind that for
pages that consist of one large table, visitors will see nothing until the entire table is
downloaded. Consider breaking up large tables; if this is not possible, consider putting a small
amount of content, such as a welcome message or an advertising banner, outside the table at
the top of the page so that users can view this material while the table downloads.
• Check your entire site for problems, such as untitled documents, empty tags, and redundant
nested tags, by running site reports in Dreamweaver. Running these reports before you publish
your site means fewer problems later on.
For more information, see “Testing your site” in Using Dreamweaver Help.

Deploying your site files to a server with Dreamweaver


You’ve now created a functional website. The next step is to publish it by uploading the files to a
remote web server.

106 Chapter 7: Web Development Workflow


Before you can proceed, you must have access to a remote web server (such as your ISP’s server, a
server owned by the client you’re working for, or an intranet server within your company). If you
don’t already have access to such a server, contact your ISP or client.
The Put command in Dreamweaver copies files from the local site to the remote site, generally
without changing the file’s checked-out status. There are two common situations in which you
might use Put instead of Check In:
• When you’re not in a collaborative environment and you aren’t using the Check In/
Check Out system
• When you want to put the current version of the file on the server but you’re going to
keep editing it
To put a file on a remote server, click the File Management button after you have saved the file,
and select Put.

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.

Maintaining and updating your site


When the bulk of the site has been published, you need to continue to update and maintain it.
Publishing your site—that is, deploying the site to a server and making it live—is an ongoing
process. In the Dreamweaver Files panel, you’ll find many tools to help you manage your site,
transfer files to and from a remote server, set up a check-in/checkout process to prevent files from
being overwritten, and synchronize the files on your local and remote sites. It’s important to
define and implement a version-control system, using either the Dreamweaver tools or an
external version-control application.
You can also find information in the Dreamweaver discussion forums on the Macromedia
website. These forums are a helpful resource for information on various browsers, platforms,
design tips, coding questions, and so on. For more information, see www.macromedia.com/
support/forums/.
For more information on any of the individual products in Studio MX 2004, see “Other
resources” on page 10, or each product’s help system (available from the product Help menu).

Assembling, testing, and deploying 107


108 Chapter 7: Web Development Workflow
TUTORIAL 1
Sketching a Site Navigation Scheme in FreeHand

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

Plan the site navigation


After you determine your site’s goals, target audience, and data requirements, you are ready to
begin conceptualizing the site’s navigation scheme. In this tutorial, you’ll sketch the site
navigation scheme for Trio Motors, a fictional company that sells energy-efficient automobiles.
Trio Motors has requested an easy-to-use navigation scheme that would allow their users to visit
the company’s showroom, see previews of upcoming releases, view a page for Trio automobile
owners, and find information about news, events, and financial services. Trio Motors would also
like the site to focus on a featured technology, and to provide a search application that lets users
search for a Trio Motors dealer in their area of the country.

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.

Customize FreeHand for multimedia/web output


FreeHand MX is a print-friendly and web-friendly, vector-based drawing application. Before you
begin sketching your site navigation, you’ll customize FreeHand for multimedia/web output.
You’ll also use RGB or Web Safe Colors throughout the tutorial by selecting colors from the Fill
and Stroke Color pop-up menus. Web-safe color selection pop-up menus in FreeHand MX are
identical to those in the other Macromedia Studio MX 2004 tools.
1 In FreeHand, create a new file by selecting File > New.
2 At the bottom of the Document window, select Pixels from the Units pop-up menu.

Note: The default unit of measurement for a new document is Points.

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.

110 Tutorial 1: Sketching a Site Navigation Scheme in FreeHand


6 Click the Colors tab and select None from the Color Management pop-up menu.

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.

Customize FreeHand for multimedia/web output 111


Create rectangles for the navigation scheme
After you customize your document for the web, you are ready to sketch the site navigation
scheme in FreeHand.
1 Make sure that the file you just created, trio_navigation.FH11, is open in the
Document window.
2 In the Tools panel, click the Rectangle tool and drag a rectangle on the page.

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).

112 Tutorial 1: Sketching a Site Navigation Scheme in FreeHand


3 In the Tools panel, click the Fill color box and use the pop-up color palette to select a color for
the inside of the rectangle. The example in this tutorial uses light blue (CCCCFF) for the
rectangle’s fill.

Fill color box

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.

Create rectangles for the navigation scheme 113


7 On the Object tab of the Property inspector (Window > Object), do the following:
■ Select Arial from the Font pop-up menu.
■ Select Plain from the Style pop-up menu.
■ Select 18 from the Font Size pop-up menu.
■ Click the Align Center button

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.

10 Click outside the text block to deselect it.


11 Select both the rectangle and the text block by selecting Edit > Select > Select All.
12 On the Align tab of the Align and Transform panel (Window > Align), select Align center from
the Horizontal and Vertical pop-up menus, and click Apply.

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.

114 Tutorial 1: Sketching a Site Navigation Scheme in FreeHand


14 Select Edit > Clone.
A duplicate copy of the grouped object appears on top of the original rectangle.
Note: The Clone feature is also available in Fireworks MX 2004.

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.

Create rectangles for the navigation scheme 115


Change rectangle text
Next, you’ll change the text of your rectangles to describe the various pages of the website.
1 In the Tools panel, click the Subselect tool.

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.

6 Click on a blank area of the document to deselect the text block.


7 Repeat steps 1 through 6 for the remaining rectangles, using the following text: News and
Events, Owners, Financial Services, Previews, Featured Technology, and Search.
For longer text content, such as “Financial Services,” press Enter (Windows) or Return
(Macintosh) after the first word and type the next word on the second line. Shift-click the text
block and the rectangle using the Subselect tool. Then realign the text in the center of the
rectangle by selecting Align center from the Horizontal and Vertical pop-up menus in the
Align and Transform panel (Window > Align).

116 Tutorial 1: Sketching a Site Navigation Scheme in FreeHand


When you finish, your document should look something like the one in this diagram:

Change rectangle text 117


Add connector lines to the document
Now you’ll use the new Connector tool in FreeHand to add connector lines to the document.
The connector lines show how the home page links to the individual files you specified.
1 In the Tools panel, click the Connector tool.

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.

4 Release the mouse button.


A connector line appears between the Home rectangle and the Showroom rectangle.
Note: If there isn’t enough space between rectangles to accommodate the default arrowheads of
the connector line, the tool cannot draw the line properly. If you encounter this problem, try
increasing the space between rectangles.

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.

118 Tutorial 1: Sketching a Site Navigation Scheme in FreeHand


6 Drag another connector line to the top line of the News and Events rectangle. The Connector
tool can be sensitive, so this may take some practice. Make sure that both rectangles are selected
before you release the mouse button.

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.

Add connector lines to the document 119


10 Drag the horizontal line upward until it overlaps the other horizontal line on the page, as shown.

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.

120 Tutorial 1: Sketching a Site Navigation Scheme in FreeHand


Export the plan as a SWF file
After sketching your site navigation, you can present the preliminary plan to your client or
members of your group in a browser window. This is particularly convenient if you want to share
the document with people who do not have FreeHand.
1 With your navigation scheme open in FreeHand, select File > Export.
The Export Document dialog box (Windows) or Export dialog box (Macintosh) appears.

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.

Export the plan as a SWF file 121


4 Click Save (Windows) or Export (Macintosh).
The file is exported as a Flash SWF file to the location specified in the Export Document
dialog box (Windows) or Export dialog box (Macintosh). If you selected Open in External
Application, the plan opens in Macromedia Flash Player.

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.

122 Tutorial 1: Sketching a Site Navigation Scheme in FreeHand


TUTORIAL 2
Creating a Table-based Page Layout in
Dreamweaver

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.

■ 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.

A second table, with two rows and one column, appears below your first table.

124 Tutorial 2: Creating a Table-based Page Layout in Dreamweaver


9 Click to the right of the table to deselect it.
10 Insert a third table by selecting Insert > Table and doing the following in the Insert Table
dialog box:
■ Enter 1 in the Rows text box.

■ Enter 2 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 4 in the Cell Padding text box.

■ Enter 6 in the Cell Spacing text box.

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.

Set table properties


Now you’ll set precise table properties, using Expanded Tables mode, a new feature in
Dreamweaver. Expanded Tables mode temporarily adds cell padding and spacing to tables and
increases the borders of the tables to simplify editing. Specifically, it allows you to position the
insertion point precisely without accidentally selecting the wrong table or other table content.
Note: After you finish your editing in Expanded Tables mode, you should always return to Standard
mode. Expanded Tables mode is not a WYSIWYG environment, so some operations, such as
resizing, do not give the expected results.

1 Select View > Table Mode > Expanded Table Mode.


Note: If you see the Getting Started with Expanded Tables Mode dialog box, click OK.

2 Click once inside the first table.


3 In the Property inspector (Window > Properties), enter 45 in the Cell Height text box and press
Enter (Windows) or Return (Macintosh).
Note: If you cannot see the Cell Height text box, click the expander arrow in the lower right corner
of the Property inspector.

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.

Set table properties 125


7 In the Property inspector, do the following:
■ Enter 10 in the Cell Height text box and press Enter (Windows) or Return (Macintosh).
■ Select gray (#CCCCCC) from the Background Color pop-up menu

Note: You do not see the height of the gray table cell change to 10 pixels because you are in
Expanded Tables mode.

8 Click once inside the second row of the second table.


9 In the Property inspector, enter 175 in the Cell Height text box and press Enter (Windows) or
Return (Macintosh).
10 Click once inside the first column of the third table.
11 In the Property inspector, enter 308 in the Cell Width text box and press Enter (Windows) or
Return (Macintosh).

126 Tutorial 2: Creating a Table-based Page Layout in Dreamweaver


12 Repeat step 11 to set the width of the second column to 308 pixels.
Your layout should now look as follows:

13 Click the Exit Expanded Tables Mode link at the top of the Document window to return to
Standard mode.

Set table properties 127


Insert an image placeholder
An image placeholder is a graphic that you use until final artwork is ready to be added to a web
page. An image placeholder is useful when you lay out web pages because it allows you to position
an image on a page before you actually create the image.
1 In the Document window, click once inside the first table.
2 Select Insert > Image Objects > Image Placeholder.
The Image Placeholder dialog box appears.
3 In the Image Placeholder dialog box, do the following:
■ Type banner_graphic in the Name text box.

■ Enter 650 in the Width text box.

■ Enter 45 in the Height text box.

■ Select light blue (#CCCCFF) from the Color pop-up menu.

■ 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.

Add placeholder text to table cells


Now you’ll add placeholder text to your layout and create CSS styles.
1 Click once inside the first column of the third table (the bottom table) and type FEATURED
TECHNOLOGY in capital letters.
2 Press Enter (Windows) or Return (Macintosh) to create more space in the table cell.
3 Select the line of text that you just typed.
4 In the Property inspector (Window > Properties) do the following:
■ From the Font pop-up menu, select Arial, Helvetica, sans-serif.

■ From the Size pop-up menu, select 14.

■ From the Color pop-up menu, select dark blue (#000033).

The text is defined as style1.


Next, you’ll edit style1 so that all your style1 text is bold.

128 Tutorial 2: Creating a Table-based Page Layout in Dreamweaver


5 In the CSS Styles panel (Window > CSS Styles), click the Plus (+) button next to the <style>
tag, select style1 from the style list, and click the Edit Style button.

The CSS Style Definition dialog box appears.


6 In the Type category, select Bold from the Weight pop-up menu and click OK.
The FEATURED TECHNOLOGY text becomes bold.
7 Click below the style1 text to deselect the text, and place the insertion point in the space that
you created in step 2.
8 Type any text, such as Table content text.
9 Select the text that you just typed, and do the following in the Property inspector:
■ From the Font pop-up menu, select Arial, Helvetica, sans-serif.
■ From the Size pop-up menu, select 12.

■ From the Color pop-up menu, select dark blue (#000033).

The text is defined as style2.


10 Click once in the second column of the third table (the bottom table) and type LOCATE A
TRIO DEALER in capital letters.
11 Press Enter (Windows) or Return (Macintosh) to create more space in the table cell.
12 Select the text that you just typed, and select style1 from the Style pop-up menu in the
Property inspector.

The new text is defined as style1.

Add placeholder text to table cells 129


13 Click below the style1 text to deselect the text, and place the insertion point in the space that
you created in step 11.
14 Type any text, such as Table content text, select the text, and select style2 from the
Property inspector.
15 Make sure that the vertical alignment of the FEATURED TECHNOLOGY and LOCATE A
TRIO DEALER table columns is set to Top. You can set the vertical alignment of each table
column by clicking inside a column and selecting Top from the Vertical Alignment (Vert) pop-
up menu in the Property inspector.
16 Click once inside the second row of the center table (below the gray table cell), and type FLASH
MOVIE FADE-IN in capital letters.
17 Select the text that you just typed, and do the following in the Property inspector:
■ Select style1 from the Style pop-up menu.

■ Select Center from the Horizontal Alignment (Horz) pop-up menu.

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.

130 Tutorial 2: Creating a Table-based Page Layout in Dreamweaver


TUTORIAL 3
Creating a Banner Graphic in Fireworks

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.

132 Tutorial 3: Creating a Banner Graphic in Fireworks


4 Place the insertion pointer at the left edge of the canvas and click the mouse button.
The car image appears in your document.

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).

Insert an image 133


7 Click once outside the image to deselect it.
8 In the Property inspector (Window > Properties), click the Canvas color box, and click once on
the dark blue background area of the car image with the eyedropper.

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.

Add text to the banner graphic


Now you’ll add text to the right side of the banner graphic.
1 In the Tools panel, click the Text tool and move the pointer over the document window.

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.

■ Enter 15 as the font size.

■ In the Fill Color pop-up menu, leave the default color, white, selected.

■ Click the Bold button.

Note: If Bold is already selected, you do not need to click the Bold button.

134 Tutorial 3: Creating a Banner Graphic in Fireworks


■ Click the Left Alignment button.
■ Select Smooth Anti-Alias from the Anti-Alias level pop-up menu.
Font pop-up menu Size Fill Bold

Anti-alias level
pop-up menu

Left Alignment button

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.

Add text to the banner graphic 135


Optimize the banner graphic
Before you export any document from Fireworks, you should always optimize it. Optimizing a
document ensures that a graphic is exported with the best possible balance of compression
and quality.
1 Do one of the following to open the Optimize panel if it isn’t already open:
■ Select Window > Optimize.
■ If the panel is minimized on the right side of the screen, click the word Optimize to view the
entire panel.
2 Select JPEG - Better Quality from the Settings pop-up menu.
The options in the panel change to reflect the new setting.

3 Click the Preview button at the top of the Document window.


Preview view displays your document as it will appear when 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. In
this example, it will take 0 seconds for a computer with a 56 Kbps modem to download the
banner graphic.

136 Tutorial 3: Creating a Banner Graphic in Fireworks


Export the banner graphic to Dreamweaver
After you optimize the graphic, you’re ready to export it as a JPEG file.
1 In the upper left corner of the Document window, click the Done button.
Fireworks prompts you for a location in which to save the banner_graphic.png file.
2 In Chapter 6, “Setup for Sample ColdFusion Site,” you created a folder called png within your
Dreamweaver site. Save the banner_graphic.png file inside this folder. It is good practice to keep
all your PNG files in a central location.
3 When you save the banner_graphic.png file, the Export dialog box appears. Fireworks prompts
you for a location in which to save the banner_graphic.jpg file (the exported file). In Chapter 6,
“Setup for Sample ColdFusion Site,” you created a folder called images within your
Dreamweaver site. Save the banner_graphic.jpg file inside this folder. Again, it is good practice
to keep all your image files in a central location.

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.

Export the banner graphic to Dreamweaver 137


138 Tutorial 3: Creating a Banner Graphic in Fireworks
TUTORIAL 4
Building a Navigation Bar with Fireworks

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.

140 Tutorial 4: Building a Navigation Bar with Fireworks


Create a button symbol
Now you’ll create the first button for the nav bar. You’ll eventually use this button to create all the
other buttons in the nav bar, so you want to make sure that the first button you create is large
enough to contain the text of the longest word or words in the nav bar. In this example the
longest words in the nav bar are Financial Services, so you’ll create a Financial Services button first.
Note: You should be familiar with the Fireworks Tools panel and Property inspector before
proceeding. For more information, see Tutorial 3, “Creating a Banner Graphic in Fireworks,”
on page 131.

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.

■ Enter 1 as the stroke value.

■ Select Pencil > Pixel Hard from the Stroke category

■ Enter 131 in the Width text box.

■ Enter 40 in the Height text box.

■ Enter -1 in the X text box.

■ Enter 0 in the Y text box.

Note: If you cannot see the Width and Height text boxes, click the Expander arrow in the lower
right corner of the Property inspector.

Create a button symbol 141


6 In the Tools panel, click the Text tool.
7 In the Property inspector, do the following:
■ Select a font from the Font pop-up menu. In this tutorial, Arial is selected.
■ Enter 11 as the font size.
■ Select dark blue (#000033) from the Fill Color pop-up menu.
■ Click the Bold button.
■ Click the Center Alignment button.
■ Select Smooth Anti-Alias from the Anti-Aliasing Level pop-up menu.

8 Click once at the center of the blue rectangle.


An empty text block is created.
9 Type FINANCIAL SERVICES inside the text block in capital letters. The width of the text
block expands as you type.
10 Click once outside the text block to apply your entry.
11 Use the Pointer tool to center the text near the top of the rectangle as shown.

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.

142 Tutorial 4: Building a Navigation Bar with Fireworks


14 Type Trio Nav Button in the Name text box, select Button as the symbol type, and click OK.

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.

Create a button symbol 143


Create button states
Next, you’ll create various states for the button symbol. Button states are the various ways that a
button appears when rolled over or clicked in a web browser.
1 Double-click the button instance that you just created.
Alternatively, you can double-click the preview of the button in the Library panel or the
symbol icon beside it in the Library panel’s symbol list.
The Button Editor opens, with the button graphic displayed in the work area.

2 Click the canvas to make sure that everything is deselected.


3 Click the tabs at the top of the Button Editor.
The first four tabs represent the button states. The last tab, Active Area, represents the hot area
on the button, or the area where a user must click or roll over with a pointer to activate the
button states. The active area is also the swap area for the button, or the area that changes with
each button state. Currently there are no states for the button symbol other than the Up state,
the state of the button before it is rolled over or clicked.
4 Click the Over tab at the top of the Button Editor, and then click the Copy Up Graphic button.
The button graphic is copied from the Up tab. The Over state of a button is the way it appears
when the pointer rolls over it. To give users visual feedback, you’ll change the color of the
rectangle behind the text.

144 Tutorial 4: Building a Navigation Bar with Fireworks


5 Select the rectangle. Be sure that you don’t select the text instead; if you are unsure which one
you are selecting, check the Layers panel (Window > Layers) to see which one is selected.

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.

Show slices and hotspots button

Hide slices and hotspots button

10 Click the Original tab and turn slices back on by clicking the Show Slices and Hotspots button.

Create button states 145


Create multiple button instances
Next, you’ll create more instances of the button symbol.
1 Select the button in the workspace if it isn’t already selected.
The Property inspector displays button properties.
2 Select Edit > Clone.
A new instance of the button appears on top of the original button.
3 Hold down Shift while pressing the Right Arrow key repeatedly to move the new instance to
the right.
This moves the instance in 10-pixel increments. If necessary, use the arrow keys alone to move
the selection one pixel at a time. Position the instance to the immediate right of the original
instance, but not overlapping, as shown in the illustration below.

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.

146 Tutorial 4: Building a Navigation Bar with Fireworks


Change button instance text
Now that you’ve created all the buttons for your nav bar, you need to give each button unique
text. You can easily change the text of a button instance by using the Property inspector.
1 Select the button instance at the far left.
Properties for the button instance appear in the Property inspector. With the exception of the
Export Settings pop-up menu, these properties apply to the selected instance only. Making
changes here does not affect the original button symbol in the Library.
2 In the Property inspector, replace the text in the Text box with the word SHOWROOM in
capital letters. Then press Enter (Windows) or Return (Macintosh).
The text on the button changes to reflect your entry.

3 Repeat steps 1 and 2 for the remaining buttons.


■ Enter NEWS & EVENTS for the text of the second button.
■ Enter OWNERS for the text of the third button.
■ Leave FINANCIAL SERVICES as the text for the fourth button.
■ Enter PREVIEWS for the text of the fifth button.

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.

Change button instance text 147


Assign URLs and names to the buttons
Next, you’ll assign a unique URL, or link, to each button instance. A URL, or Uniform Resource
Locator, is the address or location of a page on the web. You can easily assign URLs and names to
buttons by using the Property inspector.
1 Select the button instance labeled SHOWROOM and enter your favorite URL in the Link text
box of the Property inspector.

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.

148 Tutorial 4: Building a Navigation Bar with Fireworks


Optimize the navigation bar
Before you export any document from Fireworks, you should always optimize it. Optimizing a
document ensures that a graphic is exported with the best possible balance of compression and
quality.
1 With the navbar.png file open in the Document window, do one of the following to open the
Optimize panel if it isn’t already open:
■ Select Window > Optimize.
■ If the panel is minimized on the right side of the screen, click the word Optimize to view the

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.

Optimize the navigation bar 149


Set HTML preferences
HTML, or Hypertext Markup Language, is the primary language used to create and display web
pages on the Internet. You don’t need to understand HTML to use Fireworks, but it helps to keep
in mind that when Fireworks slices are exported, they become cells in an HTML table.
Before you export the document for the first time, you need to set HTML export preferences.
1 Select File > HTML Setup.
The HTML Setup dialog box appears.

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.

150 Tutorial 4: Building a Navigation Bar with Fireworks


Export the document to HTML format
Your document is now ready for exporting.
1 Create a folder called navbar inside the images folder of your Trio Motors Dreamweaver site.
2 With the navbar.png file open in the Fireworks Document window, select File > Export.
The Export dialog box appears.

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.

Export the document to HTML format 151


View the exported files in the Dreamweaver Files panel
Now you’ll examine the list of files that Fireworks exported. The new files created during the
export process appear in the navbar folder within your Dreamweaver site.
1 In Dreamweaver, select the Trio Motors site in the Files panel.
2 Expand the navbar folder by clicking the plus sign (+) to the left of the folder.
A long list of nav bar files, as well as a navbar.htm file, appear.

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.

152 Tutorial 4: Building a Navigation Bar with Fireworks


View the Fireworks HTML file in a browser
Now that you’ve examined the exported files, you’re ready to test the nav bar in a browser.
1 Open a web browser and select File > Open (Internet Explorer) or File > Open File (Netscape).
Then navigate to the navbar.htm file that you exported to the navbar folder of your
Dreamweaver site.
Alternatively, you can navigate to the navbar folder of your Dreamweaver site from your
desktop and drag the navbar.htm file to an open web browser.
Your nav bar appears in the browser window.

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.

View the Fireworks HTML file in a browser 153


3 Find and execute the command that lets you view the source code for the page. Most web
browsers let you view the source code with a command such as View > Source.

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.

154 Tutorial 4: Building a Navigation Bar with Fireworks


TUTORIAL 5
Building Rich Media with Fireworks and Flash

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

About Flash animation


You can create animation in a Flash document by changing the contents of successive frames. You
can rotate an object, increase or decrease its size, change its color, change its shape, fade it in or
out, or move it across the Stage. Changes can occur independently of, or in concert with, other
changes. For example, you can make an object rotate and fade in as it moves across the Stage.
In Flash you can choose between two methods of creating an animation sequence: frame-by-
frame animation and tweened animation. In tweened animation you create starting and ending
frames and let Flash create the frames in between. Flash varies the object’s size, rotation, color, or
other attributes evenly between the starting and ending frames to create the appearance of
movement. In frame-by-frame animation you create the image in every frame.

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.

Examine the Fireworks download files


Before you begin building your Flash animation, you’ll examine 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”).
Open Fireworks and navigate to the first sample file by selecting File > Open, browsing to the
flash_car.png file in the Samples folder, and clicking Open.
The flash_car.png file opens in your Document window.

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.

156 Tutorial 5: Building Rich Media with Fireworks and Flash


The flash_car.png file contains text, an imported car image, and a background image. To save
time, this file has been created for you, but if you are interested in learning exactly how to create a
graphic similar to this one, see “Creating a Banner Graphic in Fireworks” on page 131. The
methods for importing images and adding text are outlined in that tutorial.
Additionally, the flash_car.png file has been exported as a GIF file, which is also included in the
Samples folder. In the sections that follow, you’ll use the flash_car.gif file to build the Flash
animation for the Trio Motors index.cfm page.

Create a new Flash document


1 In Flash, select File > New.
The New Document dialog box appears.
2 On the General tab, select Flash Document and click OK.
A new document appears on the Stage.
3 In the Property inspector (Window > Properties), click the Size button.
The Document Properties dialog box appears.

4 In the Document Properties dialog box, enter the following settings:


■ Enter 650 px in the width dimension text box.
■ Enter 175 px in the height dimension text box.
■ Leave the Background Color set to the default color, white.

■ Leave Frame Rate set to the default value of 12 fps.

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.

Create a new Flash document 157


Import and convert the Fireworks file
Next, you’ll import the sample flash_car.gif file and convert it to a symbol. A symbol is a graphic,
button, or movie clip that you create once in Flash and then can reuse throughout your animation
or in other content. Using symbols dramatically reduces file size. Any symbol that you create
automatically becomes part of the library for the current document.
1 With your new flash_car.fla file open in Flash, select File > Import > Import to Stage.
2 Navigate to the sample file flash_car.gif, select the file, and click Open.
For more information, see “Examine the Fireworks download files” on page 156.
The flash_car.gif file appears at the center of the Stage. The file also appears in the Flash
Library (Window > Library).

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.

4 Type Car Symbol in the Name text field.


5 Select Graphic from the Behavior radio button list.

158 Tutorial 5: Building Rich Media with Fireworks and Flash


6 Click OK.
The imported bitmap is converted to a symbol on the Stage. The new symbol also appears in
the Library (Window > Library).
Note: If the symbol is not perfectly centered on the Stage, use the Align panel (Window > Design
Panels > Align) or the arrow keys on your keyboard to center the symbol. For more information,
see step 2.

7 Examine the Timeline (Window > Timeline).

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.

Create a text layer and symbol


Next, you’ll create another layer to hold text, and convert the text to a symbol. The contents of
the text layer and the contents of the car layer will fade in separately in the finished Flash content.
1 Select Insert > Timeline > Layer.
A new layer (Layer 2) appears above the car layer in the Timeline.
2 Double-click the layer name, rename the layer text, and press Enter (Windows) or
Return (Macintosh).
3 Click the text layer once to make sure that the entire layer is selected.
4 Click the Text tool in the Tools panel.

Create a text layer and symbol 159


5 Click once on the Stage below the text “ZX2004.”
A new text block with a round handle appears.

The round handle indicates that the text block is extendable.


6 In the Property inspector (Window > Properties), do the following:
■ Select a font from the Font pop-up menu. For this tutorial, Arial is selected.

■ Enter 14 in the Font Size text box.

■ Select dark blue (#000033) from the Color pop-up menu.

■ Make sure that the Bold button is deselected

■ Click the Align Left button.

■ Enter 1 in the Character Spacing text box.

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.

160 Tutorial 5: Building Rich Media with Fireworks and Flash


13 With the text block selected, select Modify > Convert to Symbol.
14 In the Convert to Symbol dialog box, type Text Symbol in the Name text box, select Graphic
from the button list, and click OK.
The text block is converted to a symbol and appears in the Library panel (Window > Library).

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.

■ Press F6 on your computer keyboard

A solid dot, denoting a keyframe, appears.


4 Select frame 36 of the car layer.
5 Repeat step 3 to insert a keyframe.
6 Click the text layer in the Timeline to select it.
7 Repeat step 3 to insert keyframes at frame 16 and frame 36 of the text layer.
Your Timeline now contains six keyframes.

Create keyframes 161


Set alpha transparency
In Flash you can make an instance of a symbol slowly appear or disappear by changing the
instance’s alpha value. Alpha adjusts the transparency of an instance, from transparent (0%) to
completely saturated, or visible (100%).
At the beginning of the Flash animation, you want both instances on the Stage (the car instance
and the text instance) to be completely transparent. The two instances fade in gradually and
separately as the animation is played. By frame 24 the car instance is completely visible. By frame
36 the text instance is completely visible.
Now you’ll set the alpha properties to adjust instance transparency levels at individual keyframes.
1 Select frame 1 of the car layer, and then click once on the car instance on the Stage to select it.
The Property inspector displays properties for the instance of the car symbol.

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.

162 Tutorial 5: Building Rich Media with Fireworks and Flash


Create motion tweens
Now that you’ve set the starting and ending frames for your animation (from transparent to
visible), you can create a motion tween and let Flash create all the frames in between.
Motion tweens are not limited to tweening “motion.” The motion tween you create will
tween transparency.
1 Click the car layer in the Timeline to select it.
2 Click anywhere on the Timeline between the first two keyframes (frames 1 and 24).
3 Do one of the following:
■ Select Insert > Timeline > Create Motion Tween.
■ Right-click (Windows) or Control-click (Macintosh), and select Create Motion Tween.
A light-blue or light-green background and a solid arrow appear between the two keyframes.
4 Repeat steps 1 through 3 for the remaining untweened portions of the Timeline to create
motion tweens between the following frames:
■ 24 and 36 of the car layer

■ 1 and 16 of the text layer

■ 16 and 36 of the text layer

When you finish, you’ll have four motion tweens on your Timeline that extend between the
keyframes that you inserted earlier.

5 Save the file (File > Save).


6 Test your animation by selecting Control > Test Movie.
Flash exports the content to SWF format and plays the animation by using Flash Player.
You’ll notice that when the animation has finished playing, it plays over again, or “loops,”
continuously. Flash loops all content by default. Don’t worry about this now. You’ll set the
animation to play only once when you publish it in the next section.
7 Close the SWF file before proceeding to the next section.

Create motion tweens 163


Publish the completed FLA file
You are now ready to publish your animated content for playback. By default, the Publish
command creates the Flash SWF file and an HTML document with code that inserts your Flash
animation into a browser window.
1 Select File > Publish Settings.
The Publish Settings dialog box appears.

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.

164 Tutorial 5: Building Rich Media with Fireworks and Flash


7 In the Playback section, deselect Loop.

8 Accept the other default settings and click Publish.


By default, Flash publishes the SWF and HTML files in the same directory as the FLA file. In
this case the SWF and HTML files are published to the Flash folder of your Macromedia
Dreamweaver MX 2004 site.
9 Click OK to close the Publish Settings dialog box.
You can play the Flash animation that you just created by double-clicking the flash_car.swf icon
that you published to the Flash folder of your Dreamweaver site. If you do so, you’ll notice that
the animation still loops. This is because you set it not to loop in the exported HTML code and
not in the Flash content itself. To view the code, double-click the flash_car.html file in the
Dreamweaver Files panel, click the Code View button in the upper left corner of the
Dreamweaver Document window, and look for the EMBED tag that contains the following code:
loop = “false”

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.

Publish the completed FLA file 165


166 Tutorial 5: Building Rich Media with Fireworks and Flash
TUTORIAL 6
Assembling and Editing Studio Assets

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

Insert the Fireworks navigation bar


Now that you’ve completed the assets for the Trio Motors index.cfm page, you can position
the assets by following the layout you created in Tutorial 2, “Creating a Table-based Page Layout
in Dreamweaver.”
First, you’ll insert your Macromedia Fireworks MX 2004 navigation bar by selecting the HTML
file you exported for the navigation bar. When you insert the HTML file in your document,
Dreamweaver writes all the HTML and JavaScript code necessary to make your navigation
bar work.
1 Open the index.cfm file in the Dreamweaver Document window.
2 Place the insertion point in the space you created between the banner graphic and the
second table.
Note: The top cell of the second table is gray.

3 Select Insert > Image Objects > Fireworks HTML.


The Insert Fireworks HTML dialog box appears.

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.

6 Click OK in the Insert Fireworks HTML dialog box.


Dreamweaver inserts the Fireworks HTML into the space between the first and second layout
tables on your page.

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.

168 Tutorial 6: Assembling and Editing Studio Assets


Edit the Fireworks banner graphic
Next, you’ll edit the Fireworks banner graphic by changing its text. With Dreamweaver and
Fireworks integration features, you can quickly and easily make changes without leaving the
Dreamweaver workspace.
1 With the index.cfm page open in the Document window, select the Fireworks banner graphic.
The Property inspector (Window > Properties) displays image properties.
2 Click the Edit button in the Property inspector.

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.

Edit the Fireworks banner graphic 169


10 If necessary, drag the two selections to the right to realign them with the right side of the banner
graphic. Remember that you can also use the arrow keys on your computer keyboard to move
the selections up, down, left, or right, one pixel at a time. Use the Shift key with the arrow keys
to move the selections in 10-pixel increments.
11 Click Done.

Fireworks saves and exports the change you made. Dreamweaver displays the updated file in
the Document window.

Insert the Flash animation


Next, you’ll insert the Trio Motors Macromedia Flash MX 2004 animation into the index.cfm
page. To insert the Flash animation, you need to insert HTML code that embeds the animation
in the Dreamweaver page.
If you are comfortable working with HTML code, you can delete the FLASH MOVIE FADE-IN
placeholder text, copy the code from the flash_car.html file, and paste the code into your
Dreamweaver document. However, the easiest way to insert Flash content is simply to insert the
SWF file into the page. When you insert a SWF file in Dreamweaver, Dreamweaver writes the
necessary Flash HTML code for you.
1 With the index.cfm page open in the Dreamweaver Document window, select the Flash
placeholder text and delete it.
2 Select Insert > Media > Flash.
The Select File dialog box appears.

170 Tutorial 6: Assembling and Editing Studio Assets


3 Browse to the flash_car.swf file in the Flash folder of your Dreamweaver site, select the file, and
click OK.
Dreamweaver inserts the Flash file and writes the HTML code necessary to play the file in
a browser.

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.

Insert the Flash animation 171


Play the Flash animation
Dreamweaver and Flash integration features allow you to play your Flash content in the
Dreamweaver Document window.
1 With the index.cfm page open in the Document window, click the Flash content placeholder
to select it.
2 In the Property inspector (Window > Properties), click the Play button.

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.

Edit the Flash animation


Now that you’ve played the animation in Dreamweaver, you’ll edit it by altering its text. Using
Dreamweaver and Flash integration features, you can edit your Flash content quickly and easily
without leaving the Dreamweaver workspace.
1 With the index.cfm page open in the Document window, select the Flash content placeholder.
2 In the Property inspector (Window > Properties), click the Edit button.
Dreamweaver starts Flash in Editing from Dreamweaver mode.

172 Tutorial 6: Assembling and Editing Studio Assets


Flash opens the source file flash_car.fla, not the exported SWF file.
Note: If Dreamweaver prompts you for a location for the source file flash_car.fla, navigate to the
flash_car.fla file in the Flash folder of your Dreamweaver site and select it.

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.

Edit the Flash animation 173


Finish the page
Now that you’ve finished assembling and editing the assets you created, you’ll finish the page by
adding one more image asset, adding text, and setting table background properties. The finished
page will look as follows:

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.

174 Tutorial 6: Assembling and Editing Studio Assets


1 With the index.cfm page open in the Dreamweaver Document window, create more space in
the FEATURED TECHNOLOGY column by positioning the pointer at the start of the style2
placeholder text and pressing Enter (Windows) or Return (Macintosh).
2 Position the pointer between the words FEATURED TECHNOLOGY and the style2
placeholder text by clicking in the space that you just created.
3 Click the Assets tab in the Files panel, or select Window > Assets.
Your site assets appear.

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.

Finish the page 175


6 Do one of the following:
■ Drag the hybrid_label.gif file to the insertion point (between FEATURED
TECHNOLOGY and the style2 placeholder text).
■ Click the Insert button at the bottom of the Assets panel.

The hybrid_label.gif graphic appears on the page.

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.

10 Select the background.jpg file and click OK.


Dreamweaver populates the table row with the background image.
11 Replace the style2 placeholder text in the FEATURED TECHNOLOGY column with text of
your own. You can use as a model the text in the completed version of the Trio Motors
index.cfm page. You can find the completed version of the index.cfm page in the Samples folder
that you copied to your hard drive from the Macromedia Studio MX 2004 CD. The completed
file resides in the directory called trio_motors_complete.

176 Tutorial 6: Assembling and Editing Studio Assets


12 In the LOCATE A TRIO DEALERSHIP column, select the style2 placeholder text and replace
it with the following sentence: Select a state from the pop-up menu and click the SEARCH
button to find a Trio Motors dealer near you.
13 In the Property inspector (Window > Properties), click the Center Align button to center the
sentence you just typed.
You’ve now completed all the static elements for the Trio Motors home page. In the last tutorial,
you’ll build a Macromedia ColdFusion MX search feature that will make your site dynamic.

Finish the page 177


178 Tutorial 6: Assembling and Editing Studio Assets
TUTORIAL 7
Building a Database Search Feature

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

About search/results pages


You need at least two pages to add a search/results feature to your web application. The first page
contains an HTML form in which users select or enter search parameters. Although this page
doesn’t do any actual searching, it is referred to as the search page.
The second page you need is the results page, the workhorse of the page set. The results page
performs the following tasks:
• Reads the search parameters submitted by the search page
• Connects to the database and searches for records
• Builds a recordset with the records that are found
• Displays the contents of the recordset
Optionally, you can add a detail page. A detail page gives users more information about a specific
record on the results page. You will not create a detail page in this tutorial. For more information,
see “Developing Applications Rapidly” in Using Dreamweaver Help.

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.

Create the search page


A search page on the web typically contains form menus or fields in which the user selects or
enters search parameters. When the user clicks the form’s Search button, the search parameters are
sent to a results page on the server. The results page, not the search page on the browser, retrieves
records from the database.
You’ll begin creating the search feature for Trio Motors by building the search page. The
index.cfm page that you created in the previous tutorials will serve as the search page. The Trio
Motors search feature will allow users to search for the location of a Trio Motors dealership by
U.S. state. To create this feature, you must first add the following to the search page: a form, a
form object that lets users specify a state, and a Search button.
Note: If you did not complete the previous tutorials in this book you can still build a ColdFusion search
feature. Simply create a search/results page set (one page called index.cfm, and one page called
results.cfm) and follow the steps in this tutorial. Your results will differ from the results of the tutorial
because you do not have the Trio Motors site assets; but the dynamic functionality of the search
feature will be the same.

Add form elements to the search page


First, you’ll add an HTML form, a pop-up menu, and a Submit button (or Search button) to the
search page.
1 With the index.cfm page open in the Document window, place the insertion point at the end
of the sentence that you typed in the LOCATE A TRIO DEALER column of the third table.
For more information, see Tutorial 6, “Assembling and Editing Studio Assets,” on page 167.
2 Select Insert > Form > Form.
An empty form is created on the page. You may need to select Invisible Elements (View >
Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by thin
red lines.

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.

180 Tutorial 7: Building a Database Search Feature


5 Select Insert > Form > List/Menu.
A pop-up menu appears inside the form.
6 In the Property inspector, type US_STATE in the List/Menu text box and press Enter
(Windows) or Return (Macintosh).
This is the name of the pop-up menu form object. Remember it. It will be important when
you build the results page.
7 Click once next to the dynamic pop-up menu to deselect it.
8 Select Insert > HTML > Special Characters > Non-Breaking Space.
A nonbreaking space appears.
9 Select Insert > Form > Button.
A Submit button appears beside the pop-up menu.
10 (Optional) Change the label of the Submit button by selecting the button, entering a new
value in the Label box of the Property inspector, and pressing Enter (Windows) or
Return (Macintosh).

11 Click once next to the form button to deselect it.


12 In the Property inspector, click the Align Center button to align the pop-up menu and the
search button in the center of the form.
13 Select the form by selecting the <form> tag in the tag selector at the lower left of the Document
window, as shown.

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).

Create the search page 181


Define a recordset for the pop-up menu
In this tutorial, you’ll use the pop-up menu that you inserted in the previous section to let the
user select a state. Instead of manually entering every state into the form menu, however, you’ll
use a database to populate the menu for you. To populate the menu, you’ll create a recordset with
information from the lookup table called LK_STATES (included in the Trio Motors sample
database). The LK_STATES table contains the names of all 50 U.S. states, plus the District of
Columbia, in a column called STATE_LABEL. The table also contains a list of state
abbreviations in a column called STATE_VALUE.
1 Make sure the index.cfm file for the Trio Motors home page is open in the Dreamweaver
Document window.
2 Create a new recordset by opening the Bindings panel (Window > Bindings), clicking the plus
(+) button, and selecting Recordset (Query) from the pop-up menu.
Note: You may need to specify your RDS login information before you can create a recordset. For
more information, see Chapter 6, “Setup for Sample ColdFusion Site,” on page 67.

3 Make sure that the simple Recordset dialog box appears.

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.

6 From the Table pop-up menu, select LK_STATES.


7 Next to Columns, select the All button.

182 Tutorial 7: Building a Database Search Feature


8 From the Sort pop-up menus, select STATE_LABEL from the first pop-up menu, and
Ascending from the second pop-up menu.
These options sort the values of the STATE_LABEL column and display them alphabetically
in the dynamic menu on the search page.
Your finished Recordset dialog box should look like this:

9 (Optional) Click Test.


The Test SQL Statement dialog box displays a list of records in your defined recordset. Click
OK to close the Test SQL Statement dialog box.
10 Click OK to close the Recordset dialog box.
The new recordset appears in the Bindings panel.

Create the search page 183


Bind the pop-up menu
Now you’ll finish the search page by binding data to the pop-up menu using the recordset you
created in the previous section.
1 Select the pop-up menu inside the form and click the Dynamic button in the
Property inspector.

The Dynamic List/Menu dialog box appears.


2 In the Dynamic List/Menu dialog box, do the following:
■ Select rs_trio from the Options from Recordset pop-up menu.

■ Select STATE_VALUE from the Values pop-up menu.

■ Select STATE_LABEL from the Labels pop-up menu.

■ Leave the Select Value Equal To text field blank.

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.

Build the results page


After the user selects or enters a search parameter (in this case, a U.S. state), the application must
retrieve records from the database. This work is done by the results page.
To save time, use the predesigned layout of the blank results page in the Trio Motors sample files.
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 select Browse CD Contents
from 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 results.cfm sample file in the Samples folder and then copy it to the main directory of
the Trio Motors site (the same directory where the index.cfm page resides). Be sure to copy the
file, rather than move it, so that you can keep the original file intact.
You must make sure that the results.cfm file in your Dreamweaver site is not set to Read-only so
that you can save changes to the file. Windows users can right-click on the file, select Properties,
and make sure that the Read-only attribute is deselected. Macintosh users can select the file, select
File > Get Info (in the Finder), and deselect the Locked checkbox.

184 Tutorial 7: Building a Database Search Feature


The results.cfm page already contains the banner_graphic.jpg inserted at the top of the page.
However, you will need to manually insert the Macromedia Fireworks MX 2004 navigation bar
that you created in Tutorial 4, “Building a Navigation Bar with Fireworks.” When you insert the
navigation bar, follow the procedures that you learned in Tutorial 6, “Assembling and Editing
Studio Assets.”
When you finish, your page should look like this:

Now you’re ready to build the results page.

Define a recordset for the results page


1 In Dreamweaver, make sure that the results.cfm page is open in the Document window.
2 Create a new recordset by opening the Bindings panel (Window > Bindings), clicking the plus
(+) button, and selecting Recordset (Query) from the pop-up menu.
Note: You may need to specify your RDS login information before you can create a recordset. For
more information, see Chapter 6, “Setup for Sample ColdFusion Site,” on page 67.

3 Make sure that the simple Recordset dialog box appears.


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.

6 From the Table pop-up menu, select CONTACT_INFORMATION.


7 Next to Columns, select the All button.
8 From the first pop-up menu in the Filter area, select the STATE column.
9 From the pop-up menu beside the first menu, select the equal sign (it should be the default).
10 From the third pop-up menu, select URL Parameter.

Build the results page 185


11 In the fourth box, enter US_STATE.
This is the name of the form object that accepts the search parameter on the search page
(index.cfm). You can get the name by switching to the search page, clicking the form object
(the pop-up menu) on the form to select it, and checking the object’s name in the Property
inspector. The URL parameter in the filter area and the name of the form object must be
exactly the same.
The completed filter should look like this:

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.

186 Tutorial 7: Building a Database Search Feature


Bind data to the page
After creating a recordset to hold the search results, you display the information on the results
page. Displaying the records is a simple matter of dragging individual columns from the Bindings
panel to the results page.
1 Open the Bindings panel by selecting Window > Bindings.
2 Select the word CONTACT on the results.cfm page.
3 In the Bindings panel, select the CONTACT content source and drag it to the selected word
CONTACT on the page.

Note: Alternatively, you can click the Insert button at the bottom of the Bindings panel to insert a
content source.

A placeholder for the dynamic content appears on the page.


4 Repeat steps 2 and 3 for the STREET, CITY, STATE, ZIP_CODE, and PHONE content
sources. After dragging all the content sources to the page, you’ll see dynamic placeholders on
the page instead of static text.

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.

Build the results page 187


Display multiple results
The Repeat Region server behavior lets you display multiple records from a recordset within a
page. For example, if a search for a Trio Motors dealership in the state of Pennsylvania yields three
results, the Repeat Region server behavior allows you to display all three results of the search
query on the results page. Without it, only the first record is shown.
Any dynamic data selection can be turned into a repeated region. However, the most common
regions are a table, a table row, and a series of table rows. On the results.cfm page that you’ve been
building, the dynamic data is contained in a table with a single row. You’ll add a Repeat Region
server behavior to this table. When the application server processes the page, the table is repeated
with a different record inserted into each new table.
1 Make sure that the results.cfm page is open in the Document window.
2 Select the table containing the dynamic content by clicking once inside the table and clicking
the <table> tag in the tag selector at the bottom of the Document window.
3 Select Window > Server Behaviors to display the Server Behaviors panel.
4 Click the plus (+) button and select Repeat Region.
The Repeat Region dialog box appears.

5 Select rs_trio from the Recordset pop-up menu.


6 Select the All Records option.
7 Click OK.
In the Document window, a thin, tabbed gray outline appears around the repeated region.
When you test your application in a browser, the results page displays all the records that
match the URL parameter (U.S. state) specified by the user.

188 Tutorial 7: Building a Database Search Feature


Publish and test your pages
Now that your search and results pages are finished, you are ready to upload them to your server
and test them.
Note: If you didn’t complete Chapter 6, “Setup for Sample ColdFusion Site,” you must do so before
proceeding.

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.

Publish and test your pages 189


4 Open a web browser and load the index.cfm page. The URL varies, depending on the type of
web server you’re using. If you’re using the ColdFusion built-in web server, the URL is http://
localhost:8500/trio_motors/index.cfm.

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.

190 Tutorial 7: Building a Database Search Feature


INDEX

Symbols data sources (in Dreamweaver) 77–81


.NET Framework 57 installing 68–69
languages used with 57
Numerics RDS (Remote Development Service) 69
127.0.0.1 IP number 65 root folder, creating 69–70
site setup 67–81
A system configuration 68–70
Access. See Microsoft Access ColdFusion Administrator 77–80
accessibility 104–105 ColdFusion Markup Language (CFML) 56
activation 17 common web-application terms, definitions of 58
Active Server Pages. See ASP CSS (Cascading Style Sheets). See Dreamweaver
animation
frame-by-frame and tweened 97 D
Apache Tomcat application server 58 data source requirements, determining 87
Apache web server on Mac OS X 64 data sources (ColdFusion) 77–81, 92
application development data, extracting from databases 54
in Dreamweaver 99–101 database connections (in Dreamweaver) 76–81
in Flash 101–102 database management systems 58
application servers databases
defined 58 about 58
overview 54 choosing 56
applications, web. See web applications displaying data 54
ASP.NET drivers, defined 58
languages used with 57 drivers, overview 54
file-based 56
B queries 54, 58
browser compatibility 87 recordsets 55
relational 59
C server-based 56
C# (language) 57 tables 55
CFML (ColdFusion Markup Language) 56 using with web applications 51
choosing DBMS (database management system). See databases
server technologies 57 definitions of web-application terms 58
ColdFusion Dreamweaver
and Macintosh users 69 application development 99–101
built-in web server 69 Assets panel 103, 175
data sources 92 assets, assembling 103–104

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

Você também pode gostar