Exploring Studio

Published on June 2016 | Categories: Documents | Downloads: 35 | Comments: 0 | Views: 548
of 196
Download PDF   Embed   Report

Comments

Content

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 19 22 24 25 26

What’s new in Dreamweaver MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What’s new in Flash MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What’s new in Flash MX Professional 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What’s new in Fireworks MX 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What’s new in FreeHand MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPTER 3: The Studio MX 2004 Workspace . . . . .

. . . . . . . . . . . . . . . . . . . . . 29 29 32 39 45

A first look at the Dreamweaver workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A first look at the Flash workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A first look at the Fireworks workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A first look at the FreeHand workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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 155 156 157 158 159 161 162 163 164

About Flash animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Examine the Fireworks download files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create a new Flash document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Import and convert the Fireworks file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create a text layer and symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Set alpha transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create motion tweens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Publish the completed FLA file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
TUTORIAL 6: Assembling and Editing Studio Assets .

. . . . . . . . . . . . . . . . . . . . 167 167 169 170 172 172 174

Insert the Fireworks navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Edit the Fireworks banner graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Insert the Flash animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Play the Flash animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Edit the Flash animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finish the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
TUTORIAL 7: Building a Database Search Feature

. . . . . . . . . . . . . . . . . . . . . . 179 179 180 184 189

About search/results pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create the search page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Build the results page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Publish and test your pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Contents

5

6

Contents

PART I Getting Started

PART I

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 indepth 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 Product Help includes

include overview information about the basic features in each product. These manuals are available from the Help menu of each product. 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 crossbrowser 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. 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.

Relevant CSS tab displays

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

Accessibility support in the authoring environment

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. 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.
Flash Player detection 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 redeye 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 imagemanipulation 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. The new Eraser tool lets you erase parts of vector objects. To learn more, see “Erasing paths” in Using FreeHand Help.

Eraser tool

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. The Action tool lets you assign Flash actions to an object. For more information, see “Using the Action tool” in Using FreeHand Help.

Action tool

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. Simplified Flash settings

It’s now easier to control the settings of Flash content inside FreeHand. For more information, see “Using Flash movies” in Using FreeHand Help. 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.

Import, placement, and export of SWF files

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. displays the current document as you create and edit it.

The Document window

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 Optionclick (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 Center Frame button Onion-skinning buttons Elapsed Time indicator Frame Rate indicator 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. a document’s structure and contain options for creating, deleting,

The Layers panel organizes

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. contains Auto Shapes that are not displayed in the Tools panel. lets you store and reuse combinations of object characteristics or choose a

The Shapes panel The Styles panel

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:

Step 1 - Web browser requests static page.

Web browser

Request

Response
Step 3 - Web server sends page to requesting browser.

WEB SERVER
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:

Step 1 - Web browser requests dynamic page.

Web browser

Request

Response
Step 5 - Web server sends finished page to requesting browser.

WEB SERVER
Step 2 - Web server finds page and passes it to application server.

<HTML> <code> </HTML>

<HTML> <p>Hi </HTML>

Step 3Application server scans page for instructions and finishes page.

Step 4Application server passes finished page back to web server.

Application server

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 requests dynamic page.

Web browser

Request

Response
Step 9 - Web server sends finished page to requesting browser.
<HTML> <p>Hi </HTML>

WEB SERVER
Step 2 - Web server finds page and passes it to application server.

<HTML> <code> </HTML>

Step 3 - Application server scans page for instructions.

Step 8 - Application server inserts data in page, then passes the page to the web server.

Application server
Step 4 - Application server sends query to database driver.

Step 7 - Driver passes recordset to application server.

Query

Recordset

Step 5 - Driver executes the query against the database.

Database driver

Step 6 - Recordset is returned to driver.

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 ColdFusion ASP.NET Active Server Pages (ASP) JavaServer Pages (JSP) PHP Language ColdFusion Markup Language (CFML) Visual Basic C# VBScript JavaScript Java 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. Install IIS. For more information, see “Installing Internet Information Server”

Windows 2000

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. 2 3 4

5

The Testing Server dialog box appears. Select ColdFusion from the Server Model pop-up menu. Select an access method from the Access pop-up menu. If you selected Local/Network in the previous section, select Local/Network. 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. 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 Working with Macromedia Studio

PART II

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 framecapable 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 pointand-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 ColdFusion ASP.NET ASP JSP Application server Macromedia ColdFusion MX Microsoft IIS 6 with .NET Framework Microsoft IIS or PWS Sun ONE Active Server Pages Macromedia JRun IBM WebSphere Apache Tomcat BEA WebLogic PHP server

PHP

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 Tablebased 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-byframe 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 databasestored 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; highperformance 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 siterelated 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) popup 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.

2 3 4 5 6 7

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. On the General tab, select Dreamweaver HTML from the HTML Style pop-up menu. Select .htm as the file extension. Click the Table tab. The Table tab allows you to change HTML table properties. In the Space With pop-up menu, select Single Table, No Spacers. From the Contents pop-up menu, select None. 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-byframe 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:

4 5 6 7

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. Select frame 36 of the car layer. Repeat step 3 to insert a keyframe. Click the text layer in the Timeline to select it. 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

5 6 7 8

graphic. You can also press Shift while using the Left Arrow key on your keyboard to move the selections in 10-pixel increments. Click once outside the canvas to deselect the two selections. 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. Delete the S, add a space, and type COMPANY in capital letters so that the text block reads TRIO MOTOR COMPANY. 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. 4 5 6 7

The symbol appears on the Stage in symbol-editing mode. 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. Delete the 5 and replace it with a 4 so that your text reads $440/month. Click once outside the text block to apply your text entry. 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 .NET Framework 57 Numerics 127.0.0.1 IP number 65 A Access. See Microsoft Access accessibility 104–105 activation 17 Active Server Pages. See ASP animation frame-by-frame and tweened 97 Apache Tomcat application server 58 Apache web server on Mac OS X 64 application development in Dreamweaver 99–101 in Flash 101–102 application servers defined 58 overview 54 applications, web. See web applications ASP.NET languages used with 57 B browser compatibility 87 C C# (language) 57 CFML (ColdFusion Markup Language) 56 choosing server technologies 57 ColdFusion and Macintosh users 69 built-in web server 69 data sources 92

data sources (in Dreamweaver) 77–81 installing 68–69 languages used with 57 RDS (Remote Development Service) 69 root folder, creating 69–70 site setup 67–81 system configuration 68–70 ColdFusion Administrator 77–80 ColdFusion Markup Language (CFML) 56 common web-application terms, definitions of 58 CSS (Cascading Style Sheets). See Dreamweaver D data source requirements, determining 87 data sources (ColdFusion) 77–81, 92 data, extracting from databases 54 database connections (in Dreamweaver) 76–81 database management systems 58 databases about 58 choosing 56 displaying data 54 drivers, defined 58 drivers, overview 54 file-based 56 queries 54, 58 recordsets 55 relational 59 server-based 56 tables 55 using with web applications 51 DBMS (database management system). See databases definitions of web-application terms 58 Dreamweaver application development 99–101 Assets panel 103, 175 assets, assembling 103–104

191

Bindings panel 100 CSS (Cascading Style Sheets) 11, 95, 128–130 database connections 76–81 defining a recordset in 100, 182–183, 185–186 deploying files 106 displaying dynamic data in 187–188 Document window 31 dynamic menu 180–184 editing Fireworks images in 104, 169–170 editing Flash movies in 172–173 Expanded Tables mode 125–127 Files panel 31, 91, 107 files, check in/check out 92 form elements 180–181 image placeholders 128 inserting Fireworks HTML in 167–168 inserting Flash movies in 170–171 integrated workspace layout 30 local site, defining 72–73 MDI (Multiple Document Interface) 30 menus, overview of 32 page layouts 94–95, 123–130 panels 31 playing Flash movies in 172 Put command 107 remote site, defining 73–74 Repeat Region server behavior 188 search/results pages 179–190 site definition 72–76, 91 site testing 106 Start page 31 testing and validating code 105 Testing Server folder 75–76 URL prefix 75 workspace 29–32 drivers for databases 54, 58 dynamic pages about 58 creating 56 processing 54 E examples of web applications 51 exporting from FreeHand 121–122 images (from Fireworks) ??–137, 151 extracting data from databases 54

F Fireworks assets, creating 96 button states 144–145 buttons 141–148 creating new document 132, 140 document tabs 44 editing images (from Dreamweaver) 104, 169 exporting 137, 151 file management (check in/check out) 93 History panel 44 HTML preferences 150 inserting images 132–134 navigating a document 43 navigation bars 139–154 optimizing images 136, 149 panels (organizing) 43 panels, overview of 42–43 PNG (Portable Network Graphic) 132 Property inspector 41–42 Quick Export button 43 repeating actions 44 Text tool 134–135 Tools panel 40 tools, changing options of 40 undoing actions 44 workspace 39–44 Flash alpha transparency 162 animation 97, 155–165 application development 12, 101–102 components 102 creating new document 157 displaying entire Stage 34 displaying frame content 34 editing movies (in Dreamweaver) 172–173 extensions 12 Frame command 37 frames, using 36, 38 Hand tool 34 importing Fireworks images 158–159 Keyframe command 37 keyframes 161 keyframes, using 36–38 layers, using 38 library 98 magnification (zooming) 34 motion tweens 163 playhead (in Timeline) 36 publishing movies 164–165

192

Index

Rich Internet Applications 101–102 rich media, creating 96–?? rich media,creating ??–97 Show All command 34 Show Frame command 34 Text tool 159–160 Timeline 34–38 toolbar 38 video 12 work area, showing and hiding 34 workspace 32–39 zooming 33 FreeHand Align panel 114 assets, creating 96 cloning 115 Connector tool 89, 118–120 customizing 110–111 Document window 46 exporting 121–122 Main toolbar 47 panels, overview of 46 rectangle tool 112 site navigation, sketching 109–122 Text tool 113 toolbars, using 47–49 workspace 45–49 G glossary of common web-application terms 58 H HTML embedded programming languages 56 HTTP servers. See servers I IBM WebSphere application server 58 IIS installing 63 IIS (Internet Information Services) 57, 62 images creating (with Fireworks) 12, 96 creating (with FreeHand) 96 editing (within Dreamweaver) 169–170 inserting (in Dreamweaver) 103, 176 inserting (in Fireworks) 132–134 optimizing (in Fireworks) 136

installing IIS 63 Macromedia Studio MX 2004 on Macintosh 16 Macromedia Studio MX 2004 on Windows 14 PWS 62 IP addresses 65 J Java 57 JavaScript 57 JavaServer Pages (JSP) 57 JRun 57 L languages, server-side 56, 57 layouts for web pages 94–95 libraries 97–98 localhost 64 M Macintosh installing Macromedia Studio MX 2004 on 16 servers 64 Macromedia JRun 57 Macromedia Studio MX 2004 installing on Macintosh 16 installing on Windows 14 maintaining and updating websites 107 Microsoft Access 56 Microsoft Internet Information Server (IIS). See IIS Microsoft Personal Web Server (PWS) 60, 62 Microsoft SQL Server 56 MySQL 56 N navigation sketching for websites 88 navigation bars 139–154 Netscape Enterprise Server 60 numeric network addresses 65 O optimizing images (in Fireworks) 149 Oracle 9i 56

Index

193

P page design 93–95 mock-ups for 93–94 page layouts creating 94–95 pages displaying database data 54 dynamic, creating 56 dynamic, definition of 51 dynamic, processing 54 static 53 templates and libraries for 97–98 PHP server technology 57 planning websites 86 PNG (Portable Network Graphic) 132 PWS 60, 62 installing 62 Q queries database 54 defined 58 R RDS (Remote Development Service) 69 recordsets defined 59 See also databases registration 17 relational databases, about 59 Rich Internet Applications databases and 87 HTML and 90 S scripts, server-side 54 search/results pages 179–190 Sequel (SQL) 54 server models. See server technologies server technologies choosing 57 defined 59 supported 57 server-side scripting languages 57 servers application servers 54 basics 64

choosing 62 HTTP 64 installing 62 IP addresses 65 testing 63 troubleshooting 63 web servers, defined 60 See also web servers, application servers site definition (in Dreamweaver) 72–76, 91 site navigation 109–122 sites. See websites SQL (Structured Query Language) 54 static pages 53 See also pages Structured Query Language (SQL) 54 Sun ONE Web Server 60 T tables database 55 inserting (in Dreamweaver) 123–125 setting properties 125–127 tags server-side 54 technical support for servers 61 templates 97–98 terminology for web applications 58 testing and validating code 105 testing servers 63, 75 Tomcat application server 58 troubleshooting pages not opening 63 servers 61, 63 U URL prefix (in Dreamweaver) 75 V variables in CFML 56 VBScript 57 Visual Basic 57 W web applications common uses 51 defined 59 overview 51 setting up servers 90 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

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close