Macromedia Dreamweaver MX 2004 Hands-On Training

• Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Wei...

14 downloads 1400 Views 29MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!

Report copyright / DMCA form

DOWNLOAD PDF

•

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

•

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

Copyright

With its powerful H·O·T | Credits combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web H·O·T | Colophon developers. Here to get you hands-on with it fast is the definitive project-based training on the Introduction topic from one of the master teachers at Linda.com training. Using a combination of projectA Note from Lynda Weinman based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you GaroDreamweaver Green throughAbout all the MX 04 basics: navigating the new interface, creating and Acknowledgments from Garo managing Web sites, and linking among pages. You'll learn about frames and forms, cascading How to and Use This Book style sheets, Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's The l.a.Eyeworks Web Site(s)! newest Dreamweaver features: dynamic cross-browser validation, improved CSS support, built-in graphics MX 2004 Beyond-the-Basics H·O·T editing,HTML and versus more.HTM Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Macintosh and Windows Interface Screen Captures Mac and Windows System Differences A Note to Windows Users Making Exercise Files Editable on Windows Systems Making File Extensions Visible on Windows Systems Windows 95 Users: Windows 98 Users: Windows 2000 Users: Windows XP Users: Dreamweaver MX 2004 System Requirements What's on the CD-ROM? Chapter 1. Background What Is Dreamweaver MX 2004? HTML versus XHTML Roundtrip XHTML Do You Need to Learn XHTML to Use Dreamweaver? XHTML Resources What Does XHTML Do? What Does XHTML Look Like?

XHTML Code Deconstructed File-Naming Conventions File Name Extensions What Is CSS? What Is XML? Extending Dreamweaver What Is DHTML?

• • •

Table of Contents

What Is JavaScript?

Index

What Is a Web Application?

Examples

Chapter 2. Interface Macromedia® Dreamweaver® MX 2004: Hands-On Training Setting Up Your Workspace (Windows Users Only) ByGaro Green, Lynda Weinman A Tour of the Interface Windows Interface Publisher: Peachpit Press Macintosh Interface Pub Date: December 22, 2003 The Start Page ISBN: 0-321-20297-X The Insert Bar Pages: 720 Types of Insert Bar Groups The Properties Inspector The Document Toolbar The Document Window Window Views With itsDocument powerful combination of visual layout tools, application development features, and code Multiple Document Windows (Windows Users editing support, Dreamweaver MX 2004 isOnly) sure to become the constant companion of many Web PanelsHere and Panel Groups developers. to get you hands-on with it fast is the definitive project-based training on the topic from Preferences one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you External Editors throughPreset all the Dreamweaver MX 04 basics: navigating the new interface, creating and Window Sizes managing Web sites, and linking among pages. You'll learn about frames and forms, cascading How to Define Your Browser of Choice style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Shortcut Keys layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Chapter 3. Site Control newest features: dynamic cross-browser validation, improved CSS support, built-in graphics a LocalThroughout, Root Folder? editing,What and Ismore. Garo shows you not just how to do something but why you're 1. Defining Site doing itSection and the resultsaof your actions. Section 2. Relative and Absolute Links Section 3. File and Folder Management Section 4. Understanding Path Structure Different Path Notations Section 5. Using the File Browser Section 6. Creating a Site Map Section 7. Creating a Site from Nothing Chapter 4. Basics Section 1. Defining the Site Section 2. Creating and Saving a New Document The Significance of index.html Section 3. Inserting Images Section 4. Inserting Text Section 5. Centering Images and Text Section 6. Modifying Page Properties The Page Properties Panel The Dreamweaver MX 2004 Color Pickers Section 7. Creating Links with Images and Text Section 8. <meta> Tags

Chapter 5. Linking Section 1. Linking with Point to File Section 2. Linking to New Source Files Section 3. Creating Email Links Section 4. Named Anchors Section 5. Image Maps Section 6. Linking to Files

• • •

Table of Contents

Chapter 6. Typography

Index

CSS versus XHTML Text Formatting

Examples

Valid XHTML Type Elements Macromedia® Dreamweaver® MX 2004: Hands-On Training Default CSS Formatting ByGaro Green, Lynda Weinman Section 1. Adding and Formatting HTML Text Section 2. Font Lists Publisher: Peachpit Press Section 3. Aligning Text Pub Date: December 22, 2003 Aligning Text and Images ISBN: 0-321-20297-X Section 4. Ordered, Unordered, and Definition Lists Pages: 720 Section 5. Color Schemes Section 6. Formatting Text in Tables What Is Flash Text? Section 7. Creating Flash Text Chapter 7. Tables

With its powerful combination of visual layout tools, application development features, and code What Is a Table? editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Section 1. Changing of a Table developers. Here to get the youBorder hands-on with it fast is the definitive project-based training on the topic from Section one2.ofSorting the master the Tableteachers at Linda.com training. Using a combination of projectbased lessons, exercises, and QuickTime tutorials, veteran author Garo Green walks you Section 3. guided Formatting a Table throughThe all Format the Dreamweaver MX 04 basics: navigating the new interface, creating and Table Command managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Section 4. Creating and Modifying a Table style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Section 5. Aligning Images and Text with Tables layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 6. Percentage-Based Table Alignment newest Section features: dynamic cross-browser validation, improved CSS support, built-in graphics Section 7. Combining Pixels andGaro Percentages editing, and more. Throughout, shows you not just how to do something but why you're 8. Inserting Data doing itSection and the results Tab-Delimited of your actions. Import Tabular Data Settings Section 9. Nested Tables and Borders Section 10. Rounded-Corner Tables Chapter 8. Layout What Are Tracing Images, Layers, and Tables? Section 1. Applying a Tracing Image Tracing Images, Background Colors, and Images Section 2. Adding Layers Section 3. Converting Layers to Tables Convert Layers to Table Options Section 4. Converting Tables to Layers What Is the Layout View? Layers to Tables versus Layout View Section 5. Layout Tables and Layout Cells Anatomy of Layout Cells Chapter 9. Cascading Style Sheets Levels of CSS The Cascading Part of Style Sheets Types of Style Sheets

Anatomy of a Style Sheet CSS Preferences in Dreamweaver Section 1. CSS and Page Properties Section 2. Exporting and Linking External CSS Files Section 3. Creating CSS—Redefining HTML Tags Redefine HTML, Custom Class, or Selectors? Section 4. Creating Classes

• • •

Table of Contents

The Relevant CSS Panel

Index

Section 5. Using the Relevant CSS Panel

Examples

Section 6. CSS Rollovers Macromedia® Dreamweaver® MX 2004: Hands-On Training Chapter 10. Frames ByGaro Green, Lynda Weinman What Are Frames? Frames: A Love-or-Hate Proposition Publisher: Peachpit Press Section 1. Saving Your First Frameset Pub Date: December 22, 2003 Different Ways to Save Frames ISBN: 0-321-20297-X Section 2. Modifying Frames Pages: 720 Section 3. Links and Targets Target Names Section 4. Adding a Background Image Units Properties With itsFrame powerful combination of visual layout tools, application development features, and code Section 5. Seamless Background Across Two editing support, Dreamweaver MX 2004 isFrames sure to become the constant companion of many Web Section 6. Frames Objects developers. Here to get you hands-on with it fast is the definitive project-based training on the topic Chapter from one 11. of Rollovers the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Rollover Rules throughSection all the Dreamweaver 04 basics: navigating the new interface, creating and 1. Creating a Simple MX Rollover managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Section 2. Creating Pointer Rollovers style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Section 3. Creating Multiple-Event Rollovers layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Are Flash Buttons? newest What features: dynamic cross-browser validation, improved CSS support, built-in graphics Section 4. Creating Flash Buttons editing, and more. Throughout, Garo shows you not just how to do something but why you're 5. Inserting Bar Rollover doing itSection and the results aofNavigation your actions. Different Rollover States Chapter 12. XHTML Section 1. Viewing the Markup Options in Code View Section 2. Editing in Code View Section 3. Using the Quick Tag Editor Section 4. Using the Tag Editor and Tag Chooser Section 5. Adding XHTML Using a Code Snippet Section 6. Cleaning Up XHTML Options for Cleaning Up XHTML Section 7. Cleaning Up Word HTML Chapter 13. Forms The Forms Panel Form Objects Section 1. Working with Form Objects Section 2. Laying Out a Form with Tables Section 3. Creating a Jump Menu Chapter 14. Behaviors Section 1. Creating a Set Text of Status Bar Behavior

Section 2. Creating a Set Text of Text Field Behavior Section 3. Opening a New Browser Window Section 4. Validating Forms with Behaviors The Macromedia Dreamweaver Exchange Section 5. Downloading from Dreamweaver Exchange Chapter 15. Fireworks Integration The Importance of Design Notes

• • •

Table of Contents

External Image Editor and Launch and Edit Preferences

Index

1 Inserting Fireworks MX 2004 Images

Examples

Section 2. Editing Images with Built-in Fireworks MX 2004 Tools Macromedia® Dreamweaver® MX 2004: Hands-On Training Section 3. Editing a Fireworks MX 2004 Image ByGaro Green, Lynda Weinman Section 4. Inserting Simple Rollovers from Fireworks MX 2004 Section 5. Updating Fireworks HTML in Dreamweaver Publisher: Peachpit Press About Fireworks MX 2004 Export Settings Pub Date: December 22, 2003 Section 6. Editing an HTML-Based Pop-Up Menu ISBN: 0-321-20297-X Section 7. Editing an Image-Based Pop-Up Menu Pages: 720 Section 8. Adding a Dreamweaver MX 2004 Pop-Up Menu Behavior Chapter 16. Automation What Is the History Panel? Section 1. Using the History Panel for Undo/Redo 2. Using Find and Replace With itsSection powerful combination of visual layout tools, application development features, and code What Is a Web Photo Album? MX 2004 is sure to become the constant companion of many Web editing support, Dreamweaver Getting More to Commands developers. Here get you hands-on with it fast is the definitive project-based training on the topic from Section one3.ofCreating the master a Web Photo teachers Album at Linda.com training. Using a combination of projectbasedChapter lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 17. Templates/Libraries throughSection all the Dreamweaver MX 04 basics: navigating the new interface, creating and 1. Templates in Action managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Section 2. Creating a New Template style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Section 3. Modifying a Template layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 4. Library Items in Action newest Section features: dynamic cross-browser validation, improved CSS support, built-in graphics Section 5. Creating a Library Item editing, and more. Throughout, Garo shows you not just how to do something but why you're 6. Modifying a Library doing itSection and the results of your Item actions. Chapter 18. Accessibility W3C Accessibility Guidelines Section 1. Accessibility Preferences IBM Home Page Reader Section 2. Inserting Accessible Images Section 3. Inserting Accessible Tables Section 4. Inserting Accessible Frames Section 5. Inserting Accessible Form Objects Input Tag Accessibility Attributes Chapter 19. Inserting Media Objects Plug-Ins Require Viewer Participation Section 1. Linking to Sounds Different Sound Formats Section 2. Embedding Sounds Section 3. Inserting Flash Content Section 4. Inserting Director (Shockwave) Content What Is QuickTime? Section 5. Inserting a QuickTime Movie Chapter 20. Getting It Online

Free Web Hosting with Tripod Section 1. Signing Up with Tripod Section 2. Setting the FTP Preferences What Is FTP? Section 3. Putting Files onto the Web Server Section 4. Getting Site Reports The Reports Dialog Box

• • •

Table of Contents

Appendix A. Troubleshooting FAQ and Technical Support

Index

Macromedia Technical Support

Examples

Peachpit Press Macromedia® Dreamweaver® MX 2004: Hands-On Training lynda.com ByGaro Green, Lynda Weinman Dreamweaver MX 2004—Emerging Issues Frequently Asked Questions Publisher: Peachpit Press Appendix B. Online Resources Pub Date: December 22, 2003 Discussion Groups ISBN: 0-321-20297-X Listservs Pages: 720 A Few Third-Party Dreamweaver Web Sites Dreamweaver MX 2004 H·O·T: What's Inside (artwork included on CD-ROM): On the CD-ROM Exercise Files & Movie-Based Training: Index

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Copyright Macromedia Dreamweaver MX 2004 | H·O·T Hands-On Training By Garo Green developed with Lynda Weinman • Table of Contents •

Index

•

Examples

lynda.com/books | Peachpit Press Macromedia® Dreamweaver® 2004: Hands-On Training 800 East 96th Street, 3rd MX Floor ByGaro Green, Lynda Weinman

Indianapolis, IN · 46240 Publisher: Peachpit Press

800.571.5840 · 317.428.3000 Pub Date: December 22, 2003 ISBN: 0-321-20297-X 317.428.3280 (fax) Pages: 720

http://www.lynda.com/books http://www.peachpit.com lynda.com/books is published in association with Peachpit Press, a division of Pearson Education With its powerful Copyright ©2003 combination by lynda.comof visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the Notice of Rights topic from one of the master teachers at Linda.com training. Using a combination of projectAll rights reserved. No exercises, part of thisand book may be reproduced or transmitted in any formwalks by any based lessons, guided QuickTime tutorials, veteran author Garo Green you means, mechanical,MX photocopying, recording,the or new otherwise, without the prior through electronic, all the Dreamweaver 04 basics: navigating interface, creating and written permission of the publisher. For information on getting permission for reprints and excerpts, managing Web sites, and linking among pages. You'll learn about frames and forms, cascading contact [email protected]. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Notice of Liability newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're The information this book is distributed on an "as is" basis, without warranty. While every doing it and the in results of your actions. precaution has been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. Trademarks Macromedia is a registered trademark. Macromedia, Dreamweaver, and Fireworks are registered trademarks of Macromedia, Inc. in the U.S. and other countries. QuickTime and the QuickTime logo are trademarks used under license. The QuickTime logo is registered in the U.S. and other countries. 09876543 Printed and bound in the United States of America

Dedication For you–the reader.

You inspire me to do more and better everyday. –Garo

•

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

H·O·T | Credits Original Design: Ali Karp, Alink Newmedia ([email protected]) lynda.com Director, Publications: Garo Green ([email protected]) • Table of Contents •

Index

•

Examples

Project Managers: Jennifer Eberhardt and Jake McFarland Macromedia® Dreamweaver® MX 2004: Training Copyeditors: Darren Meiss, Sheri Hands-On Cain, and Ben Lawson ByGaro Green, Lynda Weinman

Proofreader: Beth Trudell Publisher: Peachpit Press

Compositors: Rick Gordon and Debbie Roberti Pub Date: December 22, 2003 ISBN: 0-321-20297-X Beta Testers: Crystal Waters and James Williamson Pages: 720

Cover Illustration: Bruce Heavin ([email protected]) Indexer: Cheryl Lenser With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

H·O·T | Colophon The original design for Dreamweaver M X 2004 H·O·T was sketched on paper. The layout was heavily influenced by online communication– merging a traditional book format with a modern Web aesthetic. • Table of Contents •

Index

The text in Dreamweaver M X 2004 H·O·T was set in Akzidenz Grotesk from Adobe and Triplex • Examples from Emigré. The cover illustration was painted in Adobe Photoshop 6.0 and Adobe Illustrator Macromedia® Dreamweaver® MX 2004: Hands-On Training 9.0. ByGaro Green, Lynda Weinman

This book was created using QuarkXPress 4.1, Adobe Photoshop 6.0, Microsoft Office XP, and Dreamweaver MX on a PC using Windows XP. It was printed on 50 lb. Utopia Filmcoat at Phoenix Publisher: Peachpit Press Book Tech, Hagerstown, Maryland. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Introduction A Note from Lynda • • •

Table of Contents

About the Author Index

Examples Acknowledgments

Macromedia® Dreamweaver® MX 2004: Hands-On Training

to,Lynda Use This Book ByGaroHow Green Weinman HTML versus HTM

Publisher: Peachpit Press

Pub Date: December 22, Captures 2003 Interface Screen ISBN: 0-321-20297-X

System Differences Pages: 720 A Note to Windows Users Making Exercise Files Editable on Windows Systems With its powerful combination of visual layout tools, application development features, and code Dreamweaver System Requirements editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web H·O·T CD-ROM Contents developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

A Note from Lynda Weinman In my opinion, most people buy computer books in order to learn, yet it is amazing how few of these books are actually written by teachers. Garo Green and I take pride in the fact that this book was written by experienced teachers who are familiar with training students in this subject • Table of Contents matter. In this book, you will find carefully developed lessons and exercises to help you learn • Index Dreamweaver MX 2004– one of the most well-respected HTML editors on the planet. •

Examples

This book is Dreamweaver® Macromedia® targeted toward MX 2004: beginning-to Hands-Onintermediate-level Training Web developers who are looking for a great tool to speed up production, offer workflow flexibility, and create great code and ByGaro Green, Lynda Weinman results. The premise of the hands-on exercise approach is to get you up to speed quickly in Dreamweaver while actively working through the book's lessons. It's one thing to read about a Publisher: Peachpit Press product and another experience entirely to try the product and get measurable results. Our Pub is, Date: December 22, 2003follow the exercises, and you will know the product." I have received motto "read the book, ISBN: 0-321-20297-Xto this fact, and it is our goal to make sure it remains true for all of our countless testimonials Pages: 720 hands-on training books. Many exercise-based books take a paint-by-numbers approach to teaching. While this approach works, it's often difficult to figure out how to apply those lessons to a real-world situation, or to understand why or when you would use the technique again. What sets this book apart is that the lessons contain lots of background information and insights into each subject, which is With its powerful combination of visual layout tools, application development features, and code intended to help you understand the process as well as the exercise. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the At times, pictures are worth a lot more than words. When necessary, we have also included topic from one of the master teachers at Linda.com training. Using a combination of projectshort QuickTime movies to show any process that's difficult to explain with words. These files are based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you located on the H·O·T CD-ROM inside a folder called movies. It's our style to approach teaching through all the Dreamweaver MX 04 basics: navigating the new interface, creating and from many different angles, since we know that some people are visual learners, others like to managing Web sites, and linking among pages. You'll learn about frames and forms, cascading read, and still others like to get out there and try things. This book combines a lot of teaching style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best approaches so you can learn Dreamweaver MX 2004 as thoroughly as you want to. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic validation, CSS support, built-in graphics This book didn't set out to cross-browser cover every single aspect improved of Dreamweaver MX 2004, nor does it editing, and more. Throughout, Garo shows you not just how to do something but why attempt to teach you the entire process of Web production. The manual and many otheryou're doing it and the results of your actions. reference books are great for that! What we saw missing from the bookshelves was a processoriented tutorial that taught readers core principles, techniques, and tips in a hands-on training format. I welcome your comments at [email protected]. Please visit our Web site at http://www.lynda.com. The support URL for this book is http://www.lynda.com/books/HOT/dw04hot/. It's Garo's and my hope that this book will improve your skills in Web design, HTML, JavaScript, and publishing. If it does, we will have accomplished the job we set out to do! –Lynda Weinman

Note About lynda.com/books and lynda.com lynda.com/books is dedicated to helping designers and developers understand tools and design principles. lynda.com offers hands-on workshops, training seminars, conferences, on-site training, training videos, training CDs, and "expert tips" for design

and development. To learn more about our training programs, books, and products, be sure to give our site a visit at http://www.lynda.com.

•

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

About Garo Green Garo Green is the Director of Publications at lynda.com, where he manages the Hands-OnTraining series. Garo has worked extensively in the development of custom curricula and courseware for software training, and he has more than 8 years of teaching experience in both • Table of Contents hardware and software applications. He is known worldwide for his enthusiastic, approachable, • Index and humanistic teaching style. •

Examples

Garo is the author Macromedia® Dreamweaver® of several MX 2004: Hands-On-Training Hands-On Training books and web design training CD-ROMs, including Learning Dreamweaver MX 2004 , Learning W indows XP, and several others. He has ByGaro Green, Lynda Weinman also been a featured speaker at the Web99 and FlashForward conferences. Publisher: In his sparePeachpit time, Press he can be found on his dirt bike testing the limits of gravity or at home healing Pub Date: December from the inevitable 22, dirt2003 bike injury. He has also been known to sneak away, several times a day, to the ISBN: local 0-321-20297-X Starbucks for a double latte (to be honest it's usually a triple shot) with hazelnut. Of course, this720 might explain why he talks so fast! Pages:

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Acknowledgments from Garo This book, and every other book you read, would not have been possible without a strong team of dedicated, enthusiastic, and talented individuals. I was fortunate enough to work with the best. •

Table of Contents

• Index My thanks and appreciation to: •

Examples

You, the reader. There is nothing enjoy more than sharing what I know with others. I really like Macromedia® Dreamweaver® MX 2004:IHands-On Training what I do, and it's my highest hope that you like it too! ;-) If there is anything I can do to help ByGaro Green, Lynda Weinman you learn more about Dreamweaver, please let me know. Peachpit Press ThePublisher: ladies of l.a.Eyeworks (www.laeyeworks.com), Gai Gherardi and Barbara McReynolds. Pub Date: December Thank you so much 22, for2003 letting us come into your business and photograph your wonderful collection of0-321-20297-X glasses. Your generosity made it possible for us to create a great-looking Web site ISBN: for this book. Pages: 720

Allen Yeung and all the folks at Crisp Digital (www.crispdigital.com) for designing a greatlooking Web site for this book. You guys did a great job, and I look forward to working with you on future projects. With its powerful of visual layout application development features, and code My dearest friend,combination Lynda Weinman; thank you tools, for continued support and friendship. You have editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web made Tuesday a very special day of the week. ;-) developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one ofauthors, the master teachers at Linda.com training. Using a combination projectMy contributing Abigail Rudner, Molly Holzschlag, and James Williamson. of You guys based lessons, guided exercises, and QuickTime tutorials, veteran author Green walks you helped me update several of chapters in this book, and I cannot thank youGaro enough. Without your through the would Dreamweaver MX another 04 basics: navigating the new interface, help, thisallbook have taken 2 months to write. I am glad we creating had the and chance to managing Web and sites, and linking among pages. learn about frames and forms, cascading work together, I can't wait until we can do itYou'll again. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best My buddies at New Riders, Jennifer Eberhardt, McFarland, Jay Payne, Stephanie Wall. layout and typography practices. You'll also findJake extensive coverage of all ofand Dreamweaver's You guys and galsdynamic are without a doubt the coolest people I work with. Somehow yougraphics managed to newest features: cross-browser validation, improved CSS support, built-in keep meand sane whileThroughout, updating this book. editing, more. Garo shows you not just how to do something but why you're doing it and the results of your actions. The beta testers, Crystal Waters and James Williamson. If the readers find any mistakes, I am going to blame you two! (Just kidding!) Thank you for taking the time to go through each and every exercise to make sure I didn't goof things up. Your comments and suggestions were very helpful–thanks so much! My friends at Macromedia, Erik Larson, Diana Smedley, Sho Kuwamoto, and all of the Dreamweaver engineers. Thanks again for making another great version of Dreamweaver. The entire lynda.com staff. You guys make coming to work each day so much fun; what more could a person ask for?

How to Use This Book Please read this section–it contains important information that's going to help you as you use this book. The chart below outlines the information I cover: •

Table of Contents

•Dreamweaver IndexMX H·O·T 2004 • Examples

Information in This Section: Macromedia® Dreamweaver® MX 2004: Hands-On Training By GaroFormatting Green, Lynda in Weinman The This Book

The l.a.Eyeworks Web Sites Publisher: Peachpit Press

Pub Date: December 22, 2003 Dreamweaver MX 2004 Beyond-the-Basics H·O·T ISBN: 0-321-20297-X

HTML versus HTM Pages: 720

Macintosh and Windows Interface Screen Captures Mac and Windows System Differences With its powerful combination of visual layout tools, application development features, and code for Windows and "Choose" forisMacintosh editing"OK" support, Dreamweaver MX 2004 sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the A Note to Windows Users topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing WebExercise sites, and linking among pages. You'll learn about frames and forms, cascading Making Files Editable on Windows Systems style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layoutMaking and typography practices. You'll find extensive File Extensions Visible on also Windows Systems coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Dreamweaver MX Throughout, 2004 SystemGaro Requirements editing, and more. shows you not just how to do something but why you're doing it and the results of your actions. What's on the CD-ROM?

Note The Formatting in This Book This book has several components, including step-by-step exercises, commentary, notes, tips, warnings, and movies. Step-by-step exercises are numbered, and file names and command keys are shown in bold so they pop out more easily. Captions and commentary are in italicized text: This is a caption. File names/folders, command keys, and menu commands are bolded: images folder, Ctrl+click, and File > Open. Code is in a monospace font: . And URLs are in bold: http://www.lynda.com.

The l.a.Eyeworks Web Site(s)! The ladies at l.a.Eyeworks were kind enough to let us use their company as a case study for this book. The Web site that we designed for this book is intended for training purposes only. I don't want you to get the site used in this book confused with the real l.a.Eyeworks Web site. Please • of Contents note the veryTable important Web site addresses below: •

Index

www.laeyeworks.com: • Examples This is the official Web site for l.a.Eyeworks and is where you can preview theirDreamweaver® Macromedia® latest collection MX 2004: of products Hands-On and Training find up-to-date contact information. ByGaro Green, Lynda Weinman

www.lynda.com/laeyeworks/: This is the URL for the Web site designed for this book. This is a private URL and is intended for training purposes only. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Dreamweaver MX 2004 Beyond-the-Basics H·O·T For a long time now, readers of this book have been asking us to create an "intermediate" level H·O·T book for Dreamweaver. Your feedback and requests have been heard and we have responded! •

Table of Contents

• Sometime in Index the first half of next year, we will be releasing the Dreamweaver M X 2004 Beyond the Basics Hands-On-Training • Examples book; this exciting new addition to our H·O·T series will help you continue your Macromedia® Dreamweaver® Dreamweaver MX education 2004: Hands-On in the Training traditional Hands-On-Training style. You will learn how to work more efficiently in Dreamweaver MX 2004, how to create various types of page ByGaro Green, Lynda Weinman designs and navigation systems, how to maximize the use of templates, Library items, and Server-Side-Includes, create pure CSS layouts, connect your Web site to a database, and much Publisher: Peachpit Press more. Be sure to watch for this exciting new title. Oh yeah, and for all you Flash MX 2004 H·O·T Pub Date: December 22,also 2003 producing a Flash MX 2004 Beyond the Basics H·O·T book next year. book readers, we are 0-321-20297-X Watch ISBN: our site for details or email me directly at [email protected]. Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

HTML versus HTM All of the HTML exercise files on the CD-ROM end with an .html extension. Windows users might be more used to naming files with an .htm extension. You can name your files either way, and a Web browser will be able to read them. The choice to name them with the four-letter extension • of Contents represents a Table personal bias of mine. However, I have been known to use .htm when the mood • Index hits me. ;-) The shorter .htm suffix is a throwback to the old days of DOS when file names were • limited to theExamples eight-dot-three convention. That meant that file names could be no longer than Macromedia® Dreamweaver® MXend 2004: Hands-On eight characters and had to with a dot Training and a three-letter extension. Those days are history since advent Windows 95/98/2000/XP, so I've named all the files with the (technically) By Garothe Green , Lynda of Weinman more accurate four-letter extension. It does, after all, stand for HyperText Markup Language, not HyperText Markup! Now you know why I chose to name the files this way, but the bottom line Publisher: Peachpit Press here is that you can use either naming method and your HTML files will still work, as long as Pub Date: December 22, 2003 they have been referenced this way in the links. I simply made a choice to use the four-letter ISBN:because 0-321-20297-X extension that's what I prefer. Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Macintosh and Windows Interface Screen Captures Most of the screen captures in this book were taken on a PC using Windows XP. The only time I used Mac shots was when the interface differed from the PC under Windows XP. I made this decision because I do most of my writing and Web development on a PC. I also own and use a • of Contents Mac system, Table so I noted important differences when they occurred and took screen captures • Index accordingly. •

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Mac and Windows System Differences Macromedia has done a great job of ensuring that Dreamweaver MX 2004 looks and works the same between the Mac and Windows operating systems. However, there are still some differences that should be noted. If you are using this book with one of the Windows operating • Tablebe of sure Contents systems, please to read the following section, titled "A Note to Windows Users," • Index carefully. •

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Warning

Publisher: Peachpit Press Pub Date: for December 22, 2003and "OK" Windows

"Choose" for Macintosh

ISBN: 0-321-20297-X Pages: 720

Throughout this book, you will be instructed to click OK.This is the correct way to do it on the PC using Windows XP. On a Macintosh running OS X, you will instead see aChoose button. The two buttons are interchangeable and do the same thing. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

A Note to Windows Users This section contains essential information about making your exercise folders editable, making file extensions visible, and creating new Dreamweaver documents from the document window versus the Files panel. •

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Making Exercise Files Editable on Windows Systems By default, when you copy files from a CD-ROM to your Windows 95/98/2000 hard drive, they are set to read-only (write protected). This will cause a problem with the exercise files, because you will need to write over some of them. When you define a site (you will learn to do this in • TableControl"), of Contentsyou will notice that the files have a small lock next to them, which Chapter 3, "Site • Index means they have been set to read-only. To remove this setting and make them editable, follow • Examplesbelow: the short procedure Macromedia® Dreamweaver® MX 2004: Hands-On Training

Note: You do notWeinman need to follow these steps if you are using Windows NT, Windows XP Home ByGaro Green , Lynda Edition, or Windows XP Professional Edition. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

1. Define your site, using the folder you copied from the H·O·T CD-ROM. When the Site window opens, you will see little locks next to all of the files.

1.

•

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With powerfulon combination visual application 2. its Ctrl+click each of theoffiles thatlayout has a tools, lock next to it. development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

3. Once you have all of the files selected, select File > Turn Off Read Only.

Making File Extensions Visible on Windows Systems In this section, you'll see three different examples of how to turn on file extensions for Windows 95, Windows 98, and Windows 2000. By default, Windows 95/98/2000 users cannot see file extensions, such as .gif, .jpg, or .html. Fortunately you can change this setting! •

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Windows 95 Users: 1. Double-click the My Computer icon on your desktop. Note: If you (or someone else) have changed the name, it will not say My Computer. •

Table of Contents

• 2. SelectView Index> Options. This opens the Options dialog box. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

•

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from on onethe of View the master Linda.com training. Using ascreen combination project3. Click tab atteachers the top. at This opens the View options so you of can change basedthe lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you view settings for Windows 95. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing among You'll learn about frames andfor forms, cascading 4. MakeWeb sure sites, there and is nolinking checkmark in pages. the Hide MS-DOS file extensions file types that style are sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best registered box. This ensures that the file extensions are visible, which will help you layoutbetter and typography You'll extensive coverage of all of Dreamweaver's understand practices. the exercises in also this find book! newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Windows 98 Users: 1. Double-click the My Computer icon on your desktop. Note: If you (or someone else) have changed the name, it will not say My Computer. •

Table of Contents

• 2. SelectView Index> Folder Options. This opens the Folder Options dialog box. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

•

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 3. Click on the View tab at the top. This opens the View options screen so you can change style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best the view settings for Windows 98. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 4. Uncheck the Hide file extensions for known file types check box. This makes all of the editing, and more. Throughout, Garo shows you not just how to do something but why you're file extensions visible. doing it and the results of your actions.

Windows 2000 Users: 1. Double-click the My Computer icon on your desktop. Note: If you (or someone else) have changed the name, it will not say My Computer. •

Table of Contents

• 2. SelectTools Index > Folder Options. This opens the Folder Options dialog box. • Examples Macromedia® 3. Click onDreamweaver® the View tab MX at2004: the top. Hands-On This Training opens the

View options screen so you can change

view settings for Windows 2000. ByGarothe Green , Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

4. Make sure there is no checkmark next to the Hide file extensions for known file types option. This makes all of the file extensions visible.

Windows XP Users: 1. Double-click the My Computer icon on your desktop. Note: If you (or someone else) have changed the name, it will not say My Computer. •

Table of Contents

• 2. SelectTools Index > Folder Options. This opens the Folder Options dialog box. • Examples Macromedia® 3. Click onDreamweaver® the View tab MX at2004: the top. Hands-On This Training opens the

View options screen so you can change

view settings for Windows XP. ByGarothe Green , Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

4. Make sure there is no checkmark next to the Hide extensions for known file types option. This makes all of the file extensions visible.

Dreamweaver MX 2004 System Requirements This book requires that you use a Mac operating system (Power Macintosh G3 running System 10.2.6 or later) or Windows 95/98, Windows 2000, Windows NT 4.0, Windows ME, or Windows XP. You also will need a color monitor capable of 800 x 600 resolution and a CD-ROM drive. I • of Contents suggest that Table you have at least 256 MB of RAM in your system because that way you can open • Index Dreamweaver and a Web browser at the same time. More RAM than that is even better, • especially onExamples Mac computers, which do not dynamically allocate RAM as Windows does. Here's a Macromedia® Dreamweaver® MX 2004: Hands-On Training little chart that cites Macromedia's RAM requirements, along with my recommendations: ByGaro Green, Lynda Weinman

Dreamweaver MX 2004 System Requirements

Publisher: Peachpit Press

Pub Date: December 22, 2003 Dreamweaver ISBN: 0-321-20297-X Pages: 720

I Recommend

Requires

Mac 10.2.6

128 MB

256+ MB

Windows 95/98/NT/ME/XP

128 MB

256+ MB

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

What's on the CD-ROM? Exercise Files and the H·O·T CD-ROM •

Table of Contents

Your course files • Indexare located inside a folder called exercise_files on the H·O·T CD-ROM. These files are divided into chapter folders, and you will be instructed to copy the chapter folders to • Examples your hard drive during many of theHands-On exercises. Unfortunately, when files originate from a CDMacromedia® Dreamweaver® MX 2004: Training ROM, some Windows operating systems default to making them write-protected, meaning that ByGaro Green, Lynda Weinman you cannot alter them. You will need to alter them to follow the exercises, so please read the previous "Note to Windows Users" for instructions on how to convert them to read-and-write Publisher: Peachpit Press formatting. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

QuickTime Files on the H·O·T CD-ROM There is a folder on the CD-ROM called movies that contains several QuickTime tutorial movies for some of the exercises in this book. It's my hope that these movies will help you understand some of the more difficult exercises in this book by watching me perform them myself. If you like With powerful combination visual layout application code theseits movies, then you should of definitely checktools, out the Learning development Dreamweaverfeatures, MX 2004and CD-ROM editing support, Dreamweaver MX 2004 is sure to become the constant companion of many atwww.lynda.com, which contains several hours of QuickTime movies on Dreamweaver MXWeb developers. Here to get you hands-on with it fast is the definitive project-based training on the 2004. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Demo Files on the CD-ROM managing Web sites, andH·O·T linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout In addition and typography to the exercise practices. files, the You'll H·O·T alsoCD-ROM find extensive contains coverage free 30-day of all trial of Dreamweaver's versions of newest features: several software applications dynamic cross-browser for Mac andvalidation, Windows. All improved software CSS is located support,inside built-in thegraphics software editing, folder onand themore. H·O·TThroughout, CD-ROM. I Garo have shows included you trial notversions just howoftothe dofollowing: something but why you're doing it and the results of your actions. Macromedia Dreamweaver MX 2004 (trial version) Macromedia Fireworks MX 2004 (trial version) Netscape Navigator 7.1 Internet Explorer 5.23 (Mac) · Internet Explorer 6.1 (Windows) I also have included several plug-ins on the H·O·T CD-ROM. If you don't have these plug-ins installed already, you should do that before working with any exercise in this book that calls for one of them. All of the plug-ins are located inside the software folder. I have included the following: Flash Player 7.0 Shockwave 8.5.1 plug-in QuickTime 6.0 plug-in

Chapter 1. Background What Is Dreamweaver MX 2004? • • •

Table of Contents

Roundtrip HTML Index

Do You Examples Need to Know XHTML?

Macromedia® Dreamweaver® MX 2004: Hands-On Training

Do? ByGaroWhat GreenDoes , LyndaXHTML Weinman What Does XHTML Look Like?

Publisher: Peachpit Press

Pub Date: December 22, 2003 XHTML Deconstructed ISBN: 0-321-20297-X

What Pages: Is 720DHTML? What Is a Web Application? I could start this book with lots of exercises, throwing you right into working with Dreamweaver MX 2004 without any preparation. But then you would be flying blind, without understanding With powerful ofsuch visual tools, development features, and code basic its Web design combination fundamentals aslayout XHTML, CSS,application DHTML, XML, and JavaScript. Instead, I editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web am starting you off with some definitions, concepts, and guidelines to help with your hands-on developers. Here get training. you hands-on withto it scan fast is thechapter definitive on the Dreamweaver MXto 2004 Feel free this for project-based information if training you already topic from one of the master teachers at Linda.com training. Using a combination of projectknow some of what is here, or if you, like me, have very little patience and want to jump right to based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you the exercises. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

What Is Dreamw eaver MX 2004? At its roots, Macromedia Dreamweaver MX 2004 is a WYSIWYG (WhatYouSeeIsWhatYou Get)XHTML generator. This means if you change something on the screen inside Dreamweaver, it will show you the results instantly. In contrast, if you were to code the XHTML by hand, you • Table of at Contents would have to look the code until you viewed the results from inside a Web browser. The • Index instant feedback of a live design environment such as Dreamweaver speeds up your workflow • Examples tremendously, because you can see whether you like the results while you are working. Macromedia® Dreamweaver® 2004:the Hands-On However, if you really lookMX under hood Training of Dreamweaver MX 2004, you will see that it is also a Garo complete development tool, capable of developing advanced Web applications, By Green,Web Lyndaapplication Weinman e-commerce sites, dynamic data-driven sites, and much more. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

HTML versus XHTML We are at a rather interesting crossover point in the evolution of the World Wide Web. For many years, using HTML (HyperTextMarkupLanguage) was the only code you could use to create a Web page. Sure, there were other add-ons, such as JavaScript, Cascading Style Sheets, and • Table of Contents server-side languages such as ASP, JSP, CFM, and such, but at the heart of every Web page was • simple HTML.Index As of October 4, 2001, it was decided by the W3C (the Web standards committee) • Examples to discontinue HTML. Taking its place is XHTML, a language almost identical to HTML with the Macromedia® Dreamweaver® 2004: Hands-On Training exception that it is writtenMX with different rules. Does this mean that if you learned HTML you wasted your,Lynda time? Heck no. HTML can still be used, as well as XHTML, to create Web pages. In By Garo Green Weinman fact, knowing HTML will help you make the transition to XHTML, so don't worry. Publisher: Peachpit Press

It wasn't until recently (within the last 12 months or so) that Web designers began to really Pub Date: December 22, 2003 embrace XHTML and started using it to develop their Web pages. In an effort to ensure you learn ISBN: 0-321-20297-X the most up-to-date methods, throughout this entire book, you will see only XHTML code Pages:Even 720 though you can still use HTML to create Web pages, not using XHTML would be a examples. disservice to you, because it's the most current standard for creating Web pages. This chapter will give you more information on XHTML so you better understand the role it plays in Web design. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Roundtrip XHTML Dreamweaver has gained and maintained a lot of great reviews and customer loyalty because of its invention and use of Roundtrip XHTML. When using Roundtrip XHTML, you can easily move between Dreamweaver and another text editor, such as FrontPage, BBEdit, or HomeSite with • of Contents very little or Table no change to your code. Unless you are a programmer (and chances are you aren't • Index if you are reading this book ;-) ), then this probably won't mean a whole lot to you right now. • However, theExamples ability to move between different XHTML development tools can be very important Macromedia® Dreamweaver® MXa 2004: Hands-On or Training when you are working with programmer in a team environment where everyone might not beGaro using Dreamweaver. By Green , Lynda WeinmanIt's nice to know that you can do this and not worry about Dreamweaver breaking your code by inserting unwanted changes. Don't you wish all programs were so respectful? Publisher: Peachpit Press

Pub Date: December 2003 at WYSIWYG editors with dubious eyes because of their reputation for Programmers have 22, looked ISBN: 0-321-20297-X inflexibility and inclusion of nonstandard code. Dreamweaver MX 2004 is one of the few Pages:XHTML 720 WYSIWYG editors to win the approval of programmers and designers alike. Programmers like the product because they don't have to worry about their code being changed by Dreamweaver MX 2004. Designers like Dreamweaver MX 2004 because it writes clean code without inserting a lot of proprietary and self-serving tags, and it allows them to do visual layout without understanding a line of code. Hard to believe there could be a tool that could please both of these divergentcombination groups, but of there is, layout and Dreamweaver MX 2004 is it! With its powerful visual tools, application development features, and code

editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Now, truth be told, by default Dreamweaver MX 2004 can make some minor changes to a page developers. Here to get you hands-on with it fast is the definitive project-based training on the once it's opened. Since the few changes it makes are really cleaning up bad code, no one really topic from one of the master teachers at Linda.com training. Using a combination of projectfrowns on these changes. In fact, Dreamweaver MX 2004 lets you control how code is rewritten based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you (if at all) within the Preferences area of the program, so you still have full control over this through all the Dreamweaver MX 04 basics: navigating the new interface, creating and feature. There is no reason to get into those issues now; these changes and how to turn them off managing Web sites, and linking among pages. You'll learn about frames and forms, cascading (ifyou even want to do so) will be covered in Chapter 12, "XHTML." style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

Do You Need to Learn XHTML to Use Dreamweaver? Yes and no. If you use a WYSIWYG XHTML editor, then technically you can create an entire Web page without writing a single line of code. However, there may come a time when you will have to edit the code manually to troubleshoot a problem, such as when you encounter an • Table of Contents incompatibility between browsers. For some of us, XHTML can be quite intimidating at first • Index glance—your first reaction may be to avoid it at all costs. After all, when you design pages using • Examples Photoshop, QuarkXPress, or InDesign, it isn't necessary to look at raw PostScript code anymore. Macromedia® Dreamweaver® MX of 2004: Hands-On Training had to know how to program in PostScript However, the early pioneers desktop publishing just toGreen create a page layout! Most of the early Web developers were programmers, not artists, By Garo , Lynda Weinman and it was necessary to write the raw code to create a Web page. Publisher: Peachpit Press

In the past, if you didn't know some XHTML, you were at the mercy of a programmer who might Pub Date: control Decemberover 22, 2003 have more your design than you liked. Today, with Dreamweaver MX 2004, you ISBN: 0-321-20297-X could technically get by without understanding or writing a single line of code. However, it won't Pages: 720 you need to look at the code and make some changes manually, especially if you be long before long to be a true professional Web designer or developer. So, I strongly recommend that you take the time to learn XHTML. Most people who don't take the time to learn XHTML are at a disadvantage in the workplace, especially when they need to troubleshoot problems on their Web pages. With its powerful combination of visual layout tools, application development features, and code How do you learn XHTML? There are lots of ways—you can take a class at school, take an online editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web class, buy a training CD-ROM (we happen to know of a really good one!), or buy a book. There developers. Here to get you hands-on with it fast is the definitive project-based training on the are endless ways to learn XHTML; you should learn the way that works best for you. An easy topic from one of the master teachers at Linda.com training. Using a combination of projectway to learn XHTML is to view the source code of pages that you like. In XHTML, the code is based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you visible to everyone who uses a Web browser. To view the source code of a page, look under your through all the Dreamweaver MX 04 basics: navigating the new interface, creating and browser'sEdit menu and choose View > Page Source (Netscape) or View > Source managing Web sites, and linking among pages. You'll learn about frames and forms, cascading (Explorer). This will show you the raw code for the page, whether it be in HTML or XHTML, and style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best once you get comfortable with some of the tags, you will likely be able to deconstruct how these layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's pages were made. And if all else fails, you can hire the neighborhood 12-year-old, who learned it newest features: dynamic cross-browser validation, improved CSS support, built-in graphics last weekend instead of mowing your lawn. ;-) editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

XHTML Resources There are many great resources, online and off, for learning more about XHTML. Here are some online sites that are worth checking out. •

Table of Contents

•

Index

World Wide Web Consortium • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training

http://www.w3.org/MarkUp/ ByGaro Green, Lynda Weinman

Publisher: Peachpit Press

XHTML.org Pub Date: December 22, 2003 ISBN: 0-321-20297-X

http://www.xhtml.org/ Pages: 720

Webstandards.org http://www.webstandards.org With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master Tutorial teachers at Linda.com training. Using a combination of projectWebmonkey: XHTML based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and http://hotwired.lycos.com/webmonkey/99/39/index2a.html?tw=authoring managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest W3 Schools features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. http://www.w3schools.com/xhtml/default.asp

Xguru.com http://www.xguru.com/tutorial/cat_index.asp?cat=2

What Does XHTML Do? XHTML stands for eXtensibleHyperTextMarkupLanguage. It is a derivative of SGML (Standard GeneralizedMarkupLanguage), an international standard for representing text in an electronic form that can be used for exchanging documents in an independent manner. XHTML is also the • of Contents replacement Table of HTML. •

Index

At its heart, XHTML • Examplesallows for the markup of text and the inclusion of images, as well as the capability toDreamweaver® Macromedia® link documents MX together. 2004: Hands-On Hyperlinks, Training which are at the core of any Web page's success, are what allow us to flip between pages in a site, or to view pages in outside sites. ByGaro Green, Lynda Weinman These hyperlinks are references that are contained within the markup. If the source of the link moves, or the reference to the link is misspelled, it won't work. One of the great attributes of Publisher: Peachpit Press Dreamweaver MX 2004 is that it has site-management capabilities, which will help you manage Pub Date: December 22,they 2003 are automatically updated if the links are changed. your internal links so ISBN: 0-321-20297-X

The last published version of HTML was 4.01. There will not be a version 5 of HTML. Instead Pages: 720 there is a newer standard, XHTML 1.0. XHTML 1.0 already exists as a formal recommendation sanctioned by the World Wide Web Consortium (the standards committee of the Web). The next version of XHTML, version 1.1, is already in development. So then how is XHTML different from its close companion HTML? The most visible difference With its powerful combination of visual layout tools, application development features, and code between the two markup languages can be seen in their syntax, with all opening tags requiring a editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web closing tag. Here are some of the key differences: developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbasedAll lessons, guided exercises, and QuickTime tutorials, author element and attribute names are in lowercase. Forveteran example,

Garo wouldGreen not bewalks valid,you but through all the Dreamweaver MX 04 basics: navigating the new interface, creating and

would be a valid XHTML element. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style All sheets, and Fireworks and integration, gobble up or Garo's suggestions aboutinbest attribute values must beFlash contained within and quotes, single double. For example, layoutHTML and typography you can write practices. , You'll also but find in XHTML extensive you would coverage have of to allwrite of Dreamweaver's . features: dynamic It's cross-browser important to validation, be consistent improved in theCSS typesupport, of quotes built-in you use; graphics don't mix editing, andquotes more. with Throughout, Garo shows you not just how to do something but why you're single double quotes or vice versa. doing it and the results of your actions. All nonempty elements must have a closing tag. For example,

this is good text.

is a valid XHTML element, but

this is bad text. would not be valid. All empty tags should be written with a space and a / symbol at the end of the tag. For example,
is a valid XHTML tag, but
is not. This method of closing empty tags ensures that your pages are compatible with older browsers. Before you panic, let me point out that Dreamweaver MX 2004 will write all of the XHTML code for you. This gives you the freedom to create your Web pages in a visual way while letting the code be created behind the scenes. So, if you don't have the patience or desire to learn XHTML, you really don't have to. Of course, I strongly suggest that you do take the time to learn XHTML because it will help you build and troubleshoot more complex pages. Besides, it's one of the easiest things you will ever learn. XHTML follows the XML rules and syntax guidelines. Because XML has very rigid requirements for writing code, XHTML is a more structured markup language than HTML. This more structured approach to markup languages will enable one document to be viewed on multiple devices (Web browsers, cell phones, PDAs, and so on) by simply creating different style sheets for each device. (You will learn about style sheets later in the book.) In a nutshell, XHTML is basically HTML 4.01 reformatted using the syntax of XML. This makes it more compatible than HTML with XML, which is described later in this chapter. You will be glad to know that Dreamweaver MX 2004 has full support for XHTML. In fact, Dreamweaver MX 2004 can even convert your existing HTML

documents to XHTML. Sweet. You will learn more about this in Chapter 12, "XHTML."

•

Table of Contents

•

Index

•

Examples

Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions.

What Does XHTML Look Like? If you have ever seen HTML code, you will find instant comfort in looking at XHTML code. That's because XHTML is a reformatting of HTML, so many things look the same or with minor differences. Although there are some distinct and critical differences between XHTML and HTML, • of Contents they are bothTable markup languages and share many common traits. This is good news because it • Index will lessen the learning curve for those of you familiar with HTML. •

Examples

Macromedia® Here are some Dreamweaver® of the basicMX elements 2004: Hands-On of a XHTML Training document written in correct syntax: ByGaro Green, Lynda Weinman

Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720

1. 2. html public "-//W3C//DTD 1.0 Strict// With based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 4. Web sites, and linking among pages. You'll learn about frames and forms, cascading managing style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 5. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 6. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. 8. This is where the content of your page will be placed. 9. 10.

XHTML Code Deconstructed 1. XML declaration: This line identifies this document as an XHTML document. • 2. Document Table Type of Contents Definition (DTD): This URL points to a file that outlines the available • Index elements, attributes, and their appropriate usage. •

Examples

Macromedia® There are Dreamweaver® three XHTML MX DTDs 2004: Hands-On available: Training ByGaro Green, Lynda Weinman

XHTML Transitional: This DTD lets you maintain backwards compatibility with older browsers while still providing access to HTML 4.01 elements.

Publisher: Peachpit Press

Pub Date: December 2003 XHTML Strict: 22, This DTD

does not provide access to any of the HTML elements that were ISBN: 0-321-20297-X designed to control the appearance of a page. This is the truest form of XHTML elements. Pages: 720

XHTML Frameset: This DTD gives you access to the HTML elements needed to create framesets. 3. XHTML Namespace: This URL points to a file that gives detailed information about the particular XML vocabulary, XHTML in this case. With its powerful combination of which visual is layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 4. The contains all of thewith header information. developers. Heretag to get you hands-on it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project5. The tag defines the and pageQuickTime title, which appearsveteran at the top of the browser based lessons, guided exercises, tutorials, author Garo Greenwindow walks you and in the bookmark lists. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 6. All XHTML must be closed, this is the and closing <title> tag. suggestions about best style sheets, andtags Fireworks and Flashso integration, gobble up Garo's layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 7. You guesseddynamic it! This is the closing <head> tag. improved CSS support, built-in graphics newest features: cross-browser validation, editing, and more. Throughout, Garo shows you not just how to do something but why you're 8. All of your be placed inside the <body> tag. doing it and the visible resultscontent of your will actions. 9. Yup, here is another closing tag. This is the closing <body> tag. 10. Last, but not least, is the closing <html> tag. This example represents only a smidgen of the available XHTML tags, attributes, and values. But it covers the basics and is a great place to start your XHTML education. More examples of XHTML will be covered in Chapter 4, "Basics" and Chapter 12, "XHTML." File-Naming Conventions Working with HTML is much more restrictive than working with other types of computer media. The strictest part about HTML is its file-naming conventions. • Table of Contents Don't use spaces: It's best if you save your files using no spaces in between the file name • Index elements. For example, the file name about lynda.html would be considered illegal because of the space between • Examples the words "about" and "lynda." Instead, you would write this file name as about_lynda.html Macromedia® Dreamweaver® or aboutlynda.html. MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Avoid capital letters: It is best to avoid capitalization in your file names. Although AboutLynda.html will work as a file name, any time you link to the file you will have to Publisher: the Peachpit Press capitalization because many Unix servers are case-sensitive. It is far remember correct Pub Date: December easier to simply use22, all2003 lowercase letters. ISBN: 0-321-20297-X AvoidPages: illegal 720characters: The following chart contains a list of characters to avoid when naming files. File-Naming Conventions With its powerful Usage combination of visual layout tools, application development features, and code Character editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web .(dot) arehands-on reserved with for file name extensions or project-based suffixes, for training on the developers. Here Periods to get you it fast is the definitive .gifteachers and .jpg. topic from one of example the master at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you " Quotes are reserved for HTML to indicate the value of tags through all the Dreamweaver MX 04 basics: navigating the new interface, creating and and attributes. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style and Forward Fireworksslashes and Flash integration, gobble Garo's / or sheets, \ (/) indicate that and the files areup nested insuggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's folders. If you include a forward slash in your file name, newest features: dynamic cross-browser validation, improved support, built-in graphics HTML may lose your references, thinking youCSS are specifying editing, and more. Garo shows youallowed not justonhow to do something but why you're a Throughout, folder. A backslash (\) isn't MS-Windows doing it and the results of your actions. servers. : Colons are used to separate certain script commands on Macs and Windows. Avoid them in your file names so as not to confuse a file name with a script command. ! Exclamation marks are used in comment tags. File Name Extensions You may be curious about the many extensions used after the dot at the end of file names. Here is a chart that lists the meaning of some extensions you'll commonly run across. • Table of Contents • Index • Examples File Name Extensions Extension Dreamweaver® Usage MX 2004: Hands-On Training Macromedia® By Garo Green , Lynda Weinman .html, .htm These two extensions are commonly used to denote an HTML file. The three-letter extension works just as well as four-letter version. Older DOS systems didn't allow for Publisher: Peachpitthe Press four-letter Pub Date: December 22, 2003 extensions, which is why you sometimes see .html abbreviated as .htm. Dreamweaver defaults to using ISBN: 0-321-20297-X .htm or .html. Pages: 720 .gif GIF images .jpg JPEG images .swf Flash files With its powerful combination of visual layout tools, application development features, and code .mov support, Dreamweaver QuickTime movie files is sure to become the constant companion of many Web editing MX 2004 developers. Here AVI to get you hands-on with it fast is the definitive project-based training on the .avi movie files topic from one of the master teachers at Linda.com training. Using a combination of project.aif lessons, guided AIFF exercises, sound filesand QuickTime tutorials, veteran author Garo Green walks you based through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is CSS? CSS stands for CascadingStyleSheet. CSS is used for many different purposes, but its primary function is to separate the presentation from the structure of a page. Presentation has to do with the way a page "looks," whereas structurehas to do with the "meaning" of the page's • Table Contents content. An h1 tagofmeans that the text within it is a header. Whether that header is blue, purple, • Index big, small, italicized, or whatever has to do with its presentation. It's important to separate the • Examples two so that the structure of a page isn't compromised in order to make it look good. There are Macromedia® Dreamweaver® 2004: Hands-On Training several other advantages MX to using CSS, which will be discussed in that chapter. ByGaro Green, Lynda Weinman CSS can be used to specify the font used for the text on the page, to lay out an entire Web page, and much, much more. CSS today plays a much more important role in the Web development Publisher: Peachpit Press process than it did just a few years ago. With better support for CSS between browsers, many Pub Date: December developers use it on22, all2003 of their pages. In fact, Dreamweaver MX 2004 by default uses CSS for settingISBN: page0-321-20297-X properties, such as background color and image, default text colors, page margins, Pages:Formatting 720 and such. and presentation that used to be done with HTML (which is considered improper usage of HTML), is now being done with CSS. Learning CSS is a skill that just about every Web designer will value and find integral to his or her ability to create efficient and modern Web pages. Dreamweaver MX 2004 has incredible support for CSS, including creating complex and modern With its powerful combination of visual layout tools, application development features, and code CSS layouts, which far exceeds that of previous versions of the product. You will learn a lot of editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web basic CSS in this book in Chapter 9, "Cascading Style Sheets." developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is XML? XML stands for eXtensibleMarkupLanguage. XML is a set of guidelines for delimiting text through a system of tags so it can be read and processed by a device capable of reading a text file. You can think of it as a system for customizing Web content that must follow a set of specific • of XML Contents syntax rules.Table Since is a text format that follows rigid guidelines, you can imagine why so • Index many developers like to work with XML data; you can do just about anything with a text file, • regardless ofExamples what computer and operating system you are using. For this reason, XML is used to Macromedia® Dreamweaver® MX 2004: Hands-On move data between different computers andTraining different operating systems, which makes it perfect forGaro e-commerce By Green, Lyndasolutions Weinman and sending and retrieving data from a database. Dreamweaver supports templates, covered in Chapter 17, "Templates/Libraries." One of the Publisher: Peachpit Press advanced features of Dreamweaver is the capability to export/import XML files through a Pub Date:Because DecemberXML 22, 2003 template. is so complex and deep, and because the use of databases is outside the ISBN: 0-321-20297-X scope of this book, we don't include any XML exercises in any of the chapters. Here are some 720 go to learn more about XML: placesPages: you can World Wide Web Consortium With its powerful combination of visual layout tools, application development features, and code http://www.w3.org/xml/ editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectW3 basedSchools—XML lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading http://www.w3schools.com/xml/default.asp style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics A List Apart editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. http://www.alistapart.com/stories/usingxml Extending Dreamweaver One of the neatest things about the Dreamweaver community is the way people share objects, commands, and behaviors, which are like plug-ins for Dreamweaver that let you add programming functionality without typing a single line of code. These prebuilt elements can be • Table of Contents shared and distributed, much the way Photoshop plug-ins work. If you visit the Macromedia • Index Dreamweaver Exchange (http://exchange.macromedia.com/dreamweaver) section of the • Macromedia Examples site, you'll find numerous ways to get more out of Dreamweaver MX 2004 (and Macromedia® Dreamweaver® MX 2004: Hands-On Training other versions of Dreamweaver) without having to learn a complex programming language. In addition, there is Weinman a collection of third-party sites that can help you extend the capabilities of By Garo Green , Lynda Dreamweaver MX 2004. Here are a few of our favorites. Publisher: Peachpit Press Pub Date: December 22, 2003 Project ISBN:VII 0-321-20297-X Pages: 720 http://www.projectseven.com/ This site has a great collection of design packs and extension kits that can help you get a lot more from Dreamweaver MX 2004. Some of them must be purchased for a fee. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Dreamweaver Database developers. Here toExtensions get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you http://www.idest.com/cgi-bin/database.cgi through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Features extensive database, all of the Dreamweaver managingan Web sites, and linking which amongincludes pages. You'll learn about framesextensions. and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Yaromat editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. http://www.yaromat.com/dw/index.php A personal home page that contains several very useful Dreamweaver extensions, including a great one for importing Fireworks-created rollovers. Massimo's Corner of the Web http://www.massimocorner.com/ A great resource for Dreamweaver extensions, objects, commands, and behaviors. It has an interesting DHTML interface, too! What Is DHTML? DHTML (DynamicHTML) is a collection of different technologies. This can include any combination of XHTML, JavaScript, CSS, and DOM (DocumentObjectModel). By combining these technologies, you can author more dynamic content than what basic HTML affords. • Table of Contents • Some of the Index things possible with DHTML include animation, drag and drop, and complicated rollovers (buttons • Examples that change when a mouse moves over them). Dreamweaver uses DHTML to enable you to Macromedia® Dreamweaver® create pages MX with 2004: buttons Hands-On that Training change in more than one place on the screen at the same time. ByGaro Green, Lynda Weinman Just like with XHTML, DHTML effects in Dreamweaver MX 2004 are coded behind the scenes. Publisher: Peachpit Press There are, however, some serious cross-platform issues with DHTML, because the behind-thePub Date: December 22, 2003quite differently by Netscape and Explorer (the two leading browsers). scenes code is supported ISBN: 0-321-20297-X Fortunately, Dreamweaver MX 2004 lets you target specific browsers, as well as test the crossbrowser compatibility of your DHTML effects. Pages: 720 DHTML uses a combination of XHTML, JavaScript, CSS, and DOM. The following is a short description of each. With its powerful combination of visual layout tools, application development features, and code DHTML Terms editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here Explanation to get you hands-on with it fast is the definitive project-based training on the Technology topic from one of the master teachers at Linda.com training. Using a combination of projectXHTML (eXtensible HyperText MarkupLanguage) The default based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you markup for basic Web pages and the root DHTML. through all the Dreamweaver MX 04 basics: navigating the of new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading JavaScript A scripting language that extends the capabilities of HTML. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout practices. also find extensive coverage of all of Dreamweaver's CSS and typography (Cascading StyleYou'll Sheets) A page-layout system supported newest features: dynamic cross-browser improved support, by version 4.0 and latervalidation, Web browsers, whichCSS allows for built-in graphics editing, and more. Throughout, Garothe shows you not just to do something but why you're better control over appearance and how positioning of doing it and the results of your elements on aactions. Web page. DOM (DocumentObjectModel) A hook to outside scripting protocols, such as ActiveX, or external plug-ins, such as Shockwave or Flash. It allows scripts and programs to address and update documents. What Is JavaScript? JavaScript was developed by Netscape in 1996 and has become almost as popular as HTML. It actually has nothing to do with the Java programming language, but Netscape licensed the name from Sun Microsystems in hopes of increasing acceptance of the new scripting protocol. It's not • Table of Contents certain if it was the name that did the trick, but JavaScript has become almost as widely adopted • Index as HTML itself! The most common uses of JavaScript allow for rollovers, resizing of browser • Examples windows, and checking for browser compatibility. Macromedia® Dreamweaver® MX 2004: Hands-On Training Most the ,JavaScript routines are accessed by Dreamweaver's Behaviors panel, which you will ByGaroof Green Lynda Weinman learn about in Chapter 11, "Rollovers," and Chapter 14, "Behaviors." This book covers many JavaScript techniques, including rollovers (Chapter 11, "Rollovers"), browser-sniffing (Chapter 9, Publisher: Peachpit Press "Cascading Style Sheets"), and launching external browser windows (Chapter 13, "Forms"). Pub Date: December 22, 2003 ISBN: You will not0-321-20297-X have to learn to write JavaScript by hand in order to use it within Dreamweaver MX 2004. Pages: This is very fortunate for those of us who are not programmers, because JavaScript 720 programming is more complicated than XHTML. For those of you who are JavaScript programmers, however, Dreamweaver MX 2004 offers a JavaScript debugging feature. This feature is outside the scope of this book, but you will find documentation on it in the Dreamweaver manual or online Help system. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is a Web Application? In broad terms, a Web application is a Web site that delivers dynamic data, such as Amazon.com and eBay.com, instead of static data that has to be updated manually. Web applications have also been referred to as data-driven, database-driven, and dynamic sites. In • Table aofWeb Contents almost all cases, application involves a database and server-side scripting, such as ASP, • Index Cold Fusion, PHP, and so on. Web applications aren't just one thing, they can take on many • Examples forms and serve many purposes. They can be used to handle e-commerce, inventory tracking, Macromedia® Dreamweaver® MX 2004: Hands-On Training online auctions, and just about anything that uses a large amount of information. So what do Web have to do with learning Dreamweaver MX 2004? Well, for one Dreamweaver By Garoapplications Green, Lynda Weinman MX 2004 has the capability to create complete Web applications, in addition to static Web sites. Although creating Web applications is outside the scope of this book, you should know that Publisher: Peachpit Press Dreamweaver MX 2004 can be used to create them. As you advance your skills, you will find that Pub Date: December 22, 2003 you will not outgrow Dreamweaver MX 2004—the sky's the limit as far as its capabilities are ISBN: 0-321-20297-X concerned. Pages: 720 Now that you have a basic foundation in these key areas, you are ready to learn more about Dreamweaver M X 2004 itself. The next chapter will introduce you to the Dreamweaver M X 2004 interface and prepare you for the many step-by-step exercises throughout the rest of the book . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 2. Interface Setting Up Your Workspace • • • Table of Contents Interface Tour Index Examples Insert Bar Macromedia® Dreamweaver® MX 2004: Hands-On Training Inspector ByGaroProperties Green, Lynda Weinman Document Toolbar Publisher: Peachpit Press Pub Date: December 22, 2003 Document Window ISBN: 0-321-20297-X Document Pages: 720 Views Panels and Panel Groups Preferences itsbeen powerful of visual layout tools, for application development features, and code IWith have a big combination fan of the Dreamweaver interface a long time. There is no other HTML editingthat support, 2004environment is sure to become companion of many Web editor offersDreamweaver such a robust MX editing within the suchconstant an efficient and intuitive developers. HereHTML to geteditors you hands-on it fast is the training on the interface. Other I've usedwith require that youdefinitive open a lotproject-based of different-sized windows topicpanels from one of thetomaster teachers at Linda.com training. Using a combination of projectand in order reach all of the features. Instead, Dreamweaver MX 2004 uses a system based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you of panels and panel groups that change setting options depending on the context of what you through all This the Dreamweaver MX estate 04 basics: the new andAlthough are doing. saves screen real and navigating makes learning the interface, interface acreating lot easier. managing sites, and point linking among pages. You'll learnMX about frames and forms, you might Web believe at this that learning Dreamweaver 2004 represents a big cascading learning style sheets, and Fireworks and Flash integration, gobble upchallenges Garo's suggestions about best curve, understanding the interface is probably oneand of the easier ahead of you. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's This chapter will take you through the basic conceptsimproved of the program's interface. In addition, newest features: dynamic cross-browser validation, CSS support, built-in graphics I'll also share how to set up my favorite settings editing, and more. Throughout, Garo Dreamweaver shows you notMX just2004 howpreferences to do something butand why you're configurations. doing it and the results of your actions. You might be antsy to start in on some of the step-by-step exercises contained in later chapters, but you should review this chapter first to identify the toolbars, panels, and windows that you'll be using. Setting Up Your Workspace (Windows Users Only) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing MX 2004 sure to become the constant companion of many to Web The firstsupport, time youDreamweaver start Dreamweaver MXis2004, within Windows only, you will be prompted developers. Here to get you hands-on with it fast is the definitive project-based training on the choose a workspace setup. This determines how the Dreamweaver MX 2004 interface is topic fromand onefunctions. of the master teachers Linda.com training. Using a combination of projectdisplayed You have twoat options: based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Designer: This option will set up your workspace as an integrated all the managing Web sites, and linking among pages. You'll learn about framesworkspace and forms,where cascading andand panels contained and within one larger window. This is the interface style document sheets, andwindows Fireworks Flashare integration, gobble up Garo's suggestions about best prefer because itpractices. makes working with find multiple documents andofpanels much easier than layoutI and typography You'll also extensive coverage all of Dreamweaver's thefeatures: Dreamweaver 4 workspace. newest dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Thisresults optionofisyour basically the same as the Dreamweaver MX 2004 workspace, except doingCoder: it and the actions. the panels groups are docked along the left side of the screen (this will look familiar to HomeSite and ColdFusion users), and the document opens in Code view by default. This workspace is ideal for people who will be doing a lot of manual coding. The Macintosh Dreamweaver MX 2004 interface is almost identical to the Windows Designer interface with the exception that the various panels and windows float around the screen instead of being part of an integrated workspace. I will point out the Mac and Windows interface differences throughout the book. During the course of this book, I will be using the Designer workspace, and I suggest that you choose the same workspace. However, when you are working on your own projects, be sure to choose the workspace that you prefer. It's kind of like wearing your socks inside out; do whatever makes you most comfortable. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX what 2004 interface is sure toyou become constant companion of manytoWeb It can be a bit unnerving deciding want the before you even have a chance see developers. Here to worry, get youyou hands-on with it fastworkspace is the definitive training on the the program. Don't can change your at anyproject-based time within the Dreamweaver topic fromPreferences one of the master teachers training. Using athe combination of projectMX 2004 by selecting Editat > Linda.com Preferences and clicking Change Workspace based lessons, guided exercises, and Phew. QuickTime tutorials, veteran author Garo Green walks you button within the General category. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. A Tour of the Interface On Windows systems, the Dreamweaver MX 2004 interface is contained within an integrated workspace, which means the document window and all of the panels are positioned within a larger window. This can make working with multiple documents and panels easier because the • Table of Contents panels and document windows don't float all over the screen as separate objects. This integrated • workspace isIndex available to Windows users only. Because there are significant differences between • the WindowsExamples and Macintosh version of Dreamweaver MX 2004, I cover both interfaces in this Macromedia® Dreamweaver® MXoperating 2004: Hands-On Training section. Regardless of your system, there are six main parts to this interface: the Insert bar, ,Document toolbar, document window, Properties inspector, panels, and panel By Garo Green Lynda Weinman groups. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Windows Interface The six main features are the Insert bar, Document toolbar, start page/document window, Properties inspector, panels, and panel groups. By default, each time you • Table of Contents open Dreamweaver MX 2004, it opens with the start page, as shown here. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Macintosh Interface The Dreamweaver MX 2004 interface, in the Macintosh operating system, resembles the Dreamweaver 4 interface, where the panels and document windows float around the screen independent of one another. However, just like in the Windows interface, the Macintosh user has • of interface Contents objects, such as the Insert bar, start page / document window, access to theTable same • Index Properties inspector, panels, and panel groups. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training The Macintosh By Garo Green, Lyndaversion Weinman of Dreamweaver MX 2004 has a floating interface where the panels and document windows are allowed to float around the screen independent of onePublisher: another. Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Start Page The start page is a new feature in Dreamweaver MX 2004 and lets you perform common everyday tasks by clicking on a link. It's a nice feature for beginners but will • of Contents most likely Table get in the way of more advanced users. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're The start page offers a quick way to perform some common tasks, such as opening recently doing it and the results of your actions. viewed files, creating new documents, accessing a bunch of templates, and more. You can even access some online tutorials and the Dreamweaver Exchange (you'll learn more about the Dreamweaver Exchange in Chapter 20, "Getting It Online") by clicking its respective link. The start page is a nice way to introduce a beginner to Dreamweaver MX 2004 by giving these common tasks a visual representation. Truth be told, however, as you use Dreamweaver MX 2004 more and more, you will most likely disable this feature. The start page behaves and looks the same on the Macintosh and Windows versions of Dreamweaver MX 2004 with the exception that the Macintosh start page is a floating window and the Windows start page is part of the integrated Designer workspace. • The Insert Bar The Insert bar contains rows of object icons and is used as a one-click stop for many operations. If you move your mouse over the Insert bar and pause for a moment, you will see a tooltip appear, which explains what each of the icons stands for. • Table of Contents • Index • Examples The Insert bar is a quick way to add commonly used objects to your pages. This is the Macromedia® Dreamweaver® MX 2004: Hands-On Training Windows Insert bar. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X As you Pages: can720 see, the Insert bar on the Macintosh (OS X) is pretty much identical to its Windows counterpart. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Many items that exist in the Insert bar are also found under the Insert menu in the top menu developers. Here to get you hands-on with it fast is the definitive project-based training on the bar. The Insert bar provides a one-click alternative to using that menu bar. Some people are topic from one of the master teachers at Linda.com training. Using a combination of projectmore comfortable clicking the icons, and others prefer the menu access. There is no right or based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you wrong way to do this; it's just a matter of personal preference. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn frames and forms, cascading If you preferred the tabbed-interface of the Insert panel thatabout was available in Dreamweaver MX, style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best you are in luck! The clever people at Macromedia have made it possible to change the interface layout and typography practices. You'll also extensive coverage all of Dreamweaver's of the Insert bar so it uses tabs instead of a find drop-down menu. This isofjust another way you can newest features: dynamic cross-browser validation, improved CSS support, built-in graphics modify Dreamweaver MX 2004 to meet your individual needs. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. To switch to the tabbed interface, choose Show as Tabs from the Insert panel dropdown menu . To switch to the menu interface, choose Show as Menu from the Insert bar options menu. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Types of Insert Bar Groups Like many of the toolbars in Dreamweaver MX 2004, the Insert bar is context sensitive. It defaults to showing what Dreamweaver MX 2004 calls the Common objects. You can change the Insert bar to show other categories of objects when you need them, by clicking on the small • Table Contents black arrow to theofright of the group name. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training The Common group contains the most frequently used objects in Dreamweaver MX 2004, including Images, tables, layers, simple rollovers, Fireworks HTML, and so on. By Garo Green , Lynda Weinman You will use this panel a lot . Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 The Layout group is really useful, and you will find yourself using this a lot as you build your pages. This panel lets you switch between editing modes, work with layout objects, and so much more. You'll learn about these items in Chapter 8, "Layout." With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MXof 04the basics: navigating the for newcreating interface,forms creating The Forms group contains all objects essential for and your Web managing Web sites, and linking among pages. You'll learn about frames and forms, cascading page. These objects include text boxes, buttons, menus, and so on. You'll learn about style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best these items in Chapter 13, "Forms." layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Text group is an easy way to add formatting to text on your page. I don't use this group very often, but you should at least know it's here in case you like working this way. The HTML group contains objects useful for adding various HTML objects to your Web page. These objects include horizontal rules, head content, scripts, and so on. You'll learn about these items in Chapter 12, "XHTML." The Application group is designed for inserting dynamic objects on your page that integrate with databases and middleware, such as ColdFusion, ASP, PHP, and so on. Because of its advanced purpose, you will not be using this group in this book, so you can just ignore it. • Table of Contents The Flash Elements group consists of a single object that lets you easily add a flash• based slide Index show to your pages. This is great for showing off a large collection of • Examples images. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X The Favorites group is a new feature in Dreamweaver MX 2004 and lets you create a Pages: 720 of the objects you use most often. This is one of many ways that custom group Dreamweaver lets you customize the interface to meet your individual needs. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Throughout the book, you'll get to learn how and when to use many of the objects in the Insert developers. Here to get you hands-on with it fast is the definitive project-based training on the bar. For now, this is just a sneak peek to let you know they're there. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Properties Inspector Like the Insert bar, the Properties inspector is context sensitive, meaning it constantly changes depending on what type of element is selected. The Properties inspector controls many settings, including those for text, tables, alignment, and images. Because Dreamweaver MX 2004 defaults • ofpage Contents to opening a Table blank with the text-insertion symbol blinking, the Properties inspector defaults • Index to displaying text properties, as shown in the following screen shot. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training The Properties changes depending on what is being edited onscreen. Because By Garo Green, Lyndainspector Weinman these elements change depending on context, future chapters will cover the various properties of this interface element in depth. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Warning through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Redundancy in the Interface style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and be typography practices. You'll also find extensive coverage of2004 all ofinterface. Dreamweaver's Truth told, there is some redundancy in the Dreamweaver MX For newest features: dynamic cross-browser validation, improved CSS support, built-in graphics example, you can insert an image by clicking on the Insert bar panel or by choosing editing, more. Throughout, you not justYou how to often do something but why you're the and Insert Image commandGaro from shows the Insert menu. can align objects by using doingthe it and the results of your actions. Properties inspector or a command on a menu. Though it's convenient at times to have different options, it can be confusing to learn a program that has two or three ways to accomplish the same task. Throughout the book, I'll be citing my favorite ways to access features, but if you prefer an alternate method, don't let me stop you! The Document Toolbar This is what the Document toolbar looks like in the Windows version of Dreamweaver MX 2004. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 This is what the Document toolbar looks like in the Macintosh (OS X) version of Dreamweaver MX 2004 . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you You can now access many of the options you need directly from the Document toolbar, which is through all the Dreamweaver MX 04 basics: navigating the new interface, creating and attached to the top of each document window. The Document toolbar contains a series of managing Web sites, and linking among pages. You'll learn about frames and forms, cascading buttons and drop-down menus that let you do things like change the document view, set the style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best page title, preview the page in a browser, and access the Reference panel. The following chart layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's will give you a more detailed explanation of each feature. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Document Toolbar Features Feature Description Code view The Code view will display the code that creates your page. You can use this to edit the code directly and make changes without having to use a separate text editor, such as BBEdit or HomeSite. This Code view is helpful if you are comfortable coding your pages or need to create/modify custom code, such as JavaScript, ASP, and so on. You'll have numerous opportunities throughout the book to learn to work with the Code view. Code and Design view The Code and Design view will split your document in half, displaying both the code and the actual page layout. This view is helpful if you want to make some minor changes to the code and want to immediately see the visual effect they have on your page. Design view • The Design view is the default view for your document window. This view will display your page in WYSIWYG (WhatYouSeeIsWhatYouGet) mode, which means you will see images, text, and other media as you add them to your page. This view is helpful if you aren't familiar with HTML or just don't want to take the time to type in all of the code yourself, plus it gives you a pretty accurate preview of what your page will look like in a browser as it's being Table of Contents designed. Cool. Index • Examples • Server Debug The Server Debug option is Designed for sites that connect to databases using ColdFusion. This feature will not be ByGaro Green, Lynda Weinman covered in this book. Macromedia® Dreamweaver® MX 2004: Hands-On Training Page title This text field lets you specify the title for your page. This text will appear at the top of the browser window and is Pub Date: December 22, 2003 used by some search engines to describe your site listing. It ISBN: 0-321-20297-X is also the name that identifies the page when you save it in Pages: 720 a list as a bookmark or favorite in your browser. You can also set the title inside the Page Properties dialog box. You will learn how to set the page title and page properties in Chapter 4, "Basics." Publisher: Peachpit Press File This drop-down menu lets you manage the files of your site With its powerful combination of visual layout tools, files, application Management by letting you upload/download unlockdevelopment them, and features, and code editing support, Dreamweaver MX 2004 is sure to become the constant of many Web check them in or out. It is great to have access to allcompanion of developers. Here to these get you hands-on with it fast is the definitive project-based training on the options directly from the document window. You'll topic from one of the master teachers at Linda.com training. Using a combination of projectlearn how to upload/download files in Chapter 20, "Getting based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you It Online." through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Browser Web Target sites, The and Browser linking Target amongCheck pages.option You'll is learn newabout to Dreamweaver frames and forms, cascading style Check sheets, and Fireworks MX 2004and andFlash givesintegration, you a quickand waygobble to validate up Garo's your suggestions code about best layout and typography against practices. various You'll browsers also find andextensive their different coverage versions. of all From of Dreamweaver's newest features: dynamic this menu, cross-browser you can check validation, your code improved and define CSS support, which built-in graphics editing, and more. Throughout, browsers and Garo what shows versions you your not just code how is being to do checked something but why you're doing it and the results against. of your Youactions. can also set an option so that your pages are automatically validated each time they are opened. You will learn more about this feature in Chapter 20, "Getting It Online." Preview/Debug This drop-down menu lets you choose a browser in which to preview your page or debug the JavaScript. You can also access the Define Browsers dialog box, which will let you define new browsers or change references to existing browsers that have already been defined. I won't get into debugging JavaScript in this book, but at least you know where to find it should the mood strike you! Refresh Design view This button will let you refresh the contents of the Design view. This can be helpful if you make changes to your page in the Code view and don't immediately see the changes. View Options This drop-down menu lets you control several options that modify the appearance of the Code view. You can set the Code view to word wrap, display line numbers, display syntax coloring, and so on. You can also set the Design view to be on the top of the Code and Design view. You'll get to put this view into practice in Chapter 12, "XHTML." • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Document Window The document window is where most of the action happens when you're creating a Web site. This is where you assemble your page elements and design your pages. The document window is similar in appearance to the browser window when viewed from Netscape or Explorer. By • Table of Contents default, the document window will be in the Design view, unless you have selected the • Index HomeSite/Coder-Style workspace, in which case the Code view will be used. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Document Window Features newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Feature Description doing it and the results of your actions. Page title This part of the document window displays the page title, which can be defined in the Document toolbar and the page properties. You'll learn more about setting the page title and page properties in Chapter 4, "Basics." File name This part of the document window displays the actual file name. Document toolbar Each document window has its own Document toolbar, which contains a series of buttons that lets you do things like change the view of the document window, change layout modes, add a page title, preview in a browser, and so much more. There is a detailed explanation of each function of the Document toolbar earlier in this chapter. Tag Selector If you select visual elements on your screen, the Tag Selector highlights the corresponding HTML code. It's a fast and easy way to select different items on your page. You'll learn how to use the Tag Selector in many chapters throughout the book. Window size This pop-up menu lets you resize your window to various preset or custom pixel dimensions. Download speed This gives you the approximate size (kilobytes) and download time for the current page. You can change this option to match the speed of your targeted audience. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Document Window Views • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here get you hands-on with it fast is the of definitive project-based training on the Dreamweaver MXto 2004, as did some previous versions Dreamweaver, gives you the added topic from one of the master teachers at Linda.com training. Using a combination of projectcontrol and flexibility of viewing your pages in one of three different views: Code view, Code and based guided exercises, QuickTime tutorials, veteran author Green view, walks you Designlessons, view, and Design view. Byand default, all new documents will open in Garo the Design through all the Dreamweaver MX 04 basics: navigating the new interface, creating and unless you have selected the HomeSite/Coder-Style workspace option, in which case your new managing sites, in and linking among pages. You'll in learn frames andDocument forms, cascading documentsWeb will open Code view. The three buttons the about left corner of the toolbar style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best let you switch among the three different views. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Multiple Document Windows (Windows Users Only) Multiple document windows are easy to manage with small tabs that allow you to move easily between documents. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newestyou features: dynamic cross-browser validation, improved open CSS support, built-in graphics Often, may want or need to work with several documents at the same time. This can editing, and more. youDreamweaver not just how to something why be a daunting task,Throughout, even with a Garo large shows monitor. MXdo 2004 makes itbut easy toyou're work doingmultiple it and the results of your actions. with document windows by placing a small tab, for each open page, at the top of the document window. You can jump from one page to another by clicking on a tab. Note: Your page must be maximized in order to see the tabs; otherwise, the page will float around as separate objects. Panels and Panel Groups Dreamweaver MX 2004 makes it easy to manage an otherwise complex interface through a system of panels and panel groups. These two interface elements work together to help you customize your workspace so you only have open the panels that you need. Each panel group • Table of Contents can contain several different panels, each identified by a tab. You can click each tab to quickly • Index move between panels. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Panels can,Lynda be expanded By Garo Green Weinman and contracted by clicking on the small black arrow in the upper-left corner of the panel group. All of the panels are accessible from the Window menu or by using a keyboard shortcut. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Many panels are contained within a panel group, which is a grouping of two or more panels, With powerful visual development features, and code such its as what you combination see here withofthe Fileslayout paneltools, groupapplication that is shown holding the Files and Assets editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web tabs in one panel. You can customize panel groups or create your own by adding and removing developers. Here to get you hands-on with it fast is the definitive project-based training on the panels. If you click the Panel Options menu button, you will get a menu that lets you group the topic from one with of the masterpanel teachers at Linda.com training. Using a combination of projectselected panel another group. You can even rename or make a new panel group by based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you choosing that option from the Panel Options menu! This is a great way to customize the interface through all the Dreamweaver MX 04 basics: navigating the new interface, creating and to need your own needs. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style and Fireworks and Flash integration, gobble up Garo's best Note:sheets, You cannot click and drag the panels to addand or remove them fromsuggestions other panel about groups; you layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's must use the contextual menu or the Panel Options menu. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. By default, all of the panel groups will be docked along the right side of the screen. You can undock a panel group by clicking on the small dots in the upper-left corner of a panel group (referred to as the gripper) and dragging to a new position . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to easily get yoube hands-on with fast is the project-based training the Panel groups can redocked byitclicking in definitive the gripper (upper-left area) on again topic from one of the master teachers at Linda.com training. Using a combination of projectand dragging over any of the other panels. A dark line will appear between the panel based lessons, exercises, andthe QuickTime tutorials, author Garo Green walks you groups, lettingguided you know where panel group will veteran be placed when you release the through all the Dreamweaver MX 04 basics: navigating the new interface, creating and mouse button . managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. If you are using the Windows version of Dreamweaver MX 2004, you can also dock panels along the left and right side of the document window by clicking in the upperleft area again and dragging over any part of the right or left side of the document window. A thick black line will preview where the panel will appear when you release the mouse button. If you are on a Mac, you can drag your panels and groups to the left side of the screen; they just won't dock and resize as nice as they do under Windows . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, more. Throughout, Garo (myself shows you not just how something but why you're A lot of and Dreamweaver developers included) like to to do arrange their panels along doing it and the results of your actions. the left and right side of the document window. Of course, you really do need a large monitor to work effectively with your panels arranged this way. Remember, there is no wrong or right way to do this–it's simply a matter of personal preference . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Preferences There are many different preferences that you can change to make Dreamweaver MX 2004 your very own custom HTML/XHTML editor, such as code formatting, accessibility options, layers, and so much more. These settings can be changed at any time, and you will learn about most of • of Contents them in laterTable chapters. To access the Preferences dialog box, select Edit > Preferences • Index (Windows) or Dreamweaver > Preferences (Mac). The next few pages will explore • Examples preferences that may be set for external editors, preset window sizes, and browser choices. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. External Editors You can specify various file types and editors in Dreamweaver MX 2004. This means that you can specify another HTML editor such as BBEdit or HomeSite to edit the code Dreamweaver generates. This book does not cover the use of external HTML editors; they are mostly used by • of Contentswho want to more tightly control the code that Dreamweaver MX experienced Table programmers • Index 2004 automatically generates. If you set your preferences for an image editor, you can launch • Fireworks or Examples other image-editing applications from Dreamweaver MX 2004 by using the Macromedia® Dreamweaver® MX 2004: Hands-On contextual menu or by selecting Edit in theTraining Properties inspector. ByGaro Green, Lynda Weinman YouPublisher: can specify an external editor by choosing Edit > Preferences and clicking the File Peachpit Press Types / Editors category. A separate editor can be specified for different types of files. Pub Date: December 22, 2003 For example, a GIF or JPG file can be edited in Fireworks or Photoshop, and a MOV file 0-321-20297-X could ISBN: be opened in Adobe Premiere or Apple's QuickTime Player . Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Preset Window Sizes One of the pitfalls of Web design is that your page's look will change depending on the size of the monitor that displays it. Dreamweaver has a handy feature–the Window Sizes option–to help you design more accurately for a specific monitor size. • Table of Contents • The Window Index Sizes menu offers a variety of preset sizes for the document window. For example, if you want to • Examples design for a 640 x 480 pixel screen, you can select this setting, and Dreamweaver will automatically Macromedia® Dreamweaver® resize the MXdocument 2004: Hands-On window Training to reflect this size setting. This helps you visualize how your designs will look in browser windows of various sizes, but it doesn't physically ByGaro Green, Lynda Weinman change the browser window size for your end user. You will learn how to restrict the size of the browser window for your end user, should you choose to do so, by using a behavior in Chapter Publisher: Peachpit Press 14, "Behaviors." Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 You can set your own window size settings by choosing Edit > Preferences and clicking the Status Bar category. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. You can click the Window Sizes menu on the status bar to access the various default dimensions. If you choose Edit Sizes, you can add your own size presets. I suggest working with 760 x 420 or 795 x 470 because statistics show that most people are surfing the Web with a resolution of at least 800 x 600. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. How to Define Your Brow ser of Choice Internet Explorer 6.1 (Windows only) was used in all the screen captures for this book. I have included a copy of it on the H·O·T CD-ROM, in case you don't already have it installed or are working with an older version. You are welcome, however, to use the browser of your choice for • of Contents the exercisesTable in this book. • Index Warning: A Examples • few exercises may not work in earlier browser versions. To set up your browser preference, follow Macromedia® Dreamweaver® these steps: MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 1. ChooseEdit > Preferences. Publisher: Peachpit Press Date: Category, December 22, 2003 2.PubUnder click on Preview in Browser. ISBN: 0-321-20297-X 3. Click Pages:the 720 plus sign, minus sign, or Edit to add, remove, or change a browser from the list of choices. Note: The primary browser defines which browser will launch using the F12 shortcut key. The secondary browser defines which browser can be launched using Ctrl+F12 ( With its powerfulon combination of visual layout tools, application development features, andUsing code Cmd+F12 a Mac). Many designers like to preview in both Netscape and Explorer. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web a primary and secondary setting will allow you to easily do so. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbasedThe lessons, guided exercises,preference and QuickTime veteran author to Garo Green walks you Preview in Browser setstutorials, the primary browser open with the F12 through all the Dreamweaver MX 04 basics: navigating the new interface, creating and shortcut key. By the way, you can add more than two browsers here. I have four managing Web browsers sites, and linking among pages. You'll about frames and cascading different defined on my system forlearn testing purposes, butforms, only the style primary sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best and secondary ones can be accessed via shortcut keys. The others can be layouteasily and typography practices. You'll also find extensive coverage of all of Dreamweaver's accessed from the Preview in Browser button in the Document toolbar . newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Shortcut Keys There are lots and lots of shortcut keys in Dreamweaver MX 2004, and all of them are listed in your manual. The following chart lists my favorite ones. • Table of Contents • Index • Examples Shortcuts in Dreamweaver Command Dreamweaver® MX 2004: Mac Macromedia® Hands-On Training Windows By Garo Green , Lynda Weinman New document Cmd+N Ctrl+Shift+N Line break Shift+Return Shift+Enter Pub Date: December 22, 2003 Page properties Cmd+J Ctrl+J Select a word Double-click Double-click Select a paragraph Triple-click Triple-click Check spelling Shift+F7 Shift+F7 Publisher: Peachpit Press ISBN: 0-321-20297-X Pages: 720 Find and replace Cmd+F Ctrl+F With its powerful combination of visual layout tools, application development features, and code Layers F2 F2 editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. with it fast is the definitive Insert bar Here to get you hands-on Cmd+F2 Ctrl+F2 project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectFrames based lessons, guided exercises,Shift+F2 and QuickTime tutorials,Shift+F2 veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Properties inspector Cmd+F3 Ctrl+F3 managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Behaviors Shift+F3 Shift+F3 layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Site window F8 F8 newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Results F10 F10 doing it and the results of your actions. History Shift+F10 Shift+F10 CSS styles Shift+F11 Shift+F11 Preview in primary browser F12 F12 Preview in secondary browser Cmd+F12 Ctrl+F12 Tip Customized Keyboard Shortcuts • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all are the a Dreamweaver MX 04junky, basics: navigating the new interface,myself, creatingthen andyou If you keyboard shortcut like I would frankly categorize managing sites, and linking among pages.MX You'll learn about frames andtoforms, will beWeb happy to know that Dreamweaver 2004 gives you the ability easily cascading style create, sheets,save, and Fireworks and Flash sets integration, and gobble up Garo's suggestions about best and modify custom of keyboard shortcuts. There are even predefined layout and practices. You'll also findprograms extensiveyou coverage all of Dreamweaver's sets oftypography keyboard shortcuts set up for other might of already be familiar newest features: improved built-in graphics with, such asdynamic BBEdit, cross-browser HomeSite, andvalidation, Dreamweaver 3. YouCSS can support, access this feature by editing, and more. Throughout, shows you not just how to do something but why you're selecting Edit > Keyboard Garo Shortcuts. doing it and the results of your actions. OK, enough about the interface. Besides, the best way to learn about the interface is to use it! The next chapter, "Site Control" will teach you some important lessons about site management, which is essential to building any Web site. It's time to move on to the step-by-step exercises. Woo-hoo! Chapter 3. Site Control Defining a Site • • • Table of Contents Relative and Absolute Links Index File andExamples Folder Management Macromedia® Dreamweaver® MX 2004: Hands-On Training Paths ByGaroUnderstanding Green, Lynda Weinman File Browser Publisher: Peachpit Press Pub Date: December 2003 Creating a Site22, Map ISBN: 0-321-20297-X ThosePages: of you who have already built Web pages will likely agree that file management is one of 720 the greatest challenges of this medium. For those of you who haven't built Web pages yet, you areprobably wondering, "What is file management?" File management is the organization, folder structure, and naming conventions of all the pages and graphics in your Web site. Few other disciplines require the creation of so many documents at once, because Web pages are usually composed of numerous text and image files. With its powerful combination of visual layout tools, application development features, and code editing support, MX 2004 numerous is sure to become thepeople constant companion offrom many Web To compound theDreamweaver difficulty of managing files, most build Web sites their developers. Here to get you hands-on with it fast is the definitive project-based training on the hard drives, and when they're finished, they upload these files to a Web server so that the files topic from one from of thethe master Linda.com training. Using combination ofcalled projectcan be viewed Web.teachers Let's sayat that you created a folder on ayour hard drive HTML based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you and created another folder called graphics. If you put your HTML and graphics files inside those through all the Dreamweaver MX 04 basics: navigating the new interface, creating and two folders, you would have to replicate this exact folder hierarchy when you uploaded those managing Web sites, andor linking among You'll learnbreak. aboutIn frames and forms, files to your Web server, your links to pages. those files would this chapter, you cascading will learn style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best how to avoid such misfortune by building your Dreamweaver MX 2004 site management skills. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is a Local Root Folder? Dreamweaver MX 2004 has a site management scheme that requires that you keep all your files within one main local root folder, so you can easily duplicate the folder hierarchy that's on your hard drive when you upload to a Web server. A local root folder is no different from any other • of Contents kind of folderTable on your hard drive, except that you have specified to Dreamweaver MX 2004 that • Index this is where all HTML and media files for your site reside. • Examples If you think Dreamweaver® Macromedia® of the local root MX 2004: folder Hands-On as the Training folder from which all other files stem, just like the roots of a tree, then you will understand its function. A local root folder can contain many ByGaro Green, Lynda Weinman subfolders, but Dreamweaver MX 2004 cannot keep track of elements unless they are stored inside the local root folder. Publisher: Peachpit Press Pub Date: December 22, 2003 let's say that you decide midstream to change the folder hierarchy of Taking the concept further, ISBN: your site by0-321-20297-X adding a folder or changing a folder name. If you were hand-coding the pages, making these Pages: 720changes would be a hassle. Dreamweaver MX 2004 makes this process painless, as long as you work within its site management structure. By the time you are through with these exercises, you will have learned to define a site and a local root folder, create a site map, and reorganize files and folders. Not bad for a day's work! With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topicWarning from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through the Dreamweaver MX 04 basics: navigating the new interface, creating and Siteall Management managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style You sheets, and Fireworks and Flash integration, and gobbleMX up 2004 Garo's might think that site management in Dreamweaver is suggestions a neat, but about best layout and typography practices. You'll also find extensive all of Dreamweaver's optional, feature and that you would rather skip it nowcoverage to returnoflater when you're in newest dynamic validation, improved CSS built-in graphics thefeatures: mood. Don't do it!cross-browser Site management is actually integral to support, Dreamweaver MX 2004, editing, Throughout, Garoashows just how to do something butasks whythat you're andand the more. program kicks up quite fuss ifyou younot don't use it properly. This book doingyou it and thearesults of your define site with eachactions. new chapter, because if you have files outside your defined area, you will be constantly plagued by warnings. If you choose to ignore this, you will not be using Dreamweaver MX 2004 properly and will run into problems. 1 Defining a Site This exercise shows you how to define a site in Dreamweaver MX 2004. You'll be working with a folder of HTML and image files from the H·O·T CD-ROM that you transfer to your hard drive. Once you've finished this exercise, Dreamweaver MX 2004's site management feature will • Table of inside Contents catalog all the files this folder by building a site cache file–a small file that holds • Index information about the location and name of all the files and folders in your site. • Examples This exerciseDreamweaver® Macromedia® teaches you MX how 2004: to define Hands-On a site Training from an existing Web site. You would use this identical process if you wanted to use Dreamweaver MX 2004 on a site that you or someone else ByGaro Green, Lynda Weinman had already created outside of Dreamweaver MX 2004. At the end of the chapter, you'll complete an exercise that will show you how to define a site from an empty folder, which will more likely Publisher: Peachpit Press simulate your approach when you are starting a new site from scratch. Pub Date: December 22, 2003 ISBN: 0-321-20297-X 1. Copy Pages: the 720 chap_03 folder from the H·O·T CD-ROM to your Desktop. For clarity, it's best if you leave this folder named chap_03. The folder contains images and HTML files that are requested throughout this chapter. You will be asked to add and change files, which requires that you have all of the files on your hard drive. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 2. Open Dreamweaver MX 2004 and choose Site > Manage Sites, which will open theSite developers. Here to get you hands-on with it fast is the definitive project-based training on the Definition window. Note: If you've worked in Dreamweaver before and have already topic from one of the master teachers at Linda.com training. Using a combination of projectdefined other sites, you will need to choose Site > Manage Sites and then click the New based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you button and choose Site from the drop-down menu. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Warning editing, and more. Throughout, Garo shows you not just how to do something but why you're Non-Windows and XP Users doing it and the results of2000 your actions. If you are working on a PC using any of the Windows operating systems, except Windows 2000 and XP Home and Professional editions, make sure that after you have copied the files to your hard drive, you refer to the instructions in the beginning of the book. Some Windows operating systems will automatically lock the files that you copy from the CD-ROM, so you will have to manually unlock these files in order to work with them in this and other chapters. If you don't already know how to unlock files, the procedure is documented in the front of this book. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout 3. Make and sure typography the Basic practices. tab is selected. You'll also This find will extensive display the coverage basic mode of all of of Dreamweaver's the Site Definition newest window, features: which dynamic will take cross-browser you throughvalidation, the process improved of defining CSSa support, site by having built-in you graphics answer a editing, series andof more. questions Throughout, about your Garosite. shows As you you use not Dreamweaver just how to doMX something 2004 more but and whymore, you'reyou doingwill it and findthe yourself resultsusing of your theactions. Advanced tab to define your sites. You will learn how to use the Advanced tab throughout the rest of this book. 4. TypeChapter 3 in the What would you like to name your site? field. Click Next. This is an internal naming convention, so you can use any kind of name you want without worrying about spaces or capitalization. Think of it as your own pet name for your project, just like you give a folder or hard drive a custom name . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 5. Theand next screen asks if youGaro wantshows to useyou a server technology forsomething your page. Make the editing, more. Throughout, not just how to do but whysure you're I do wantofto useactions. a server technology radio button is selected. If you were doingNo, it and thenot results your creating a Web application or a site that connected to a database, you would select Yes... to set up the proper options. A simple static Web site, like the one in this book, does not require any special server technology setup. 6. ClickNext. 6. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project7. The next screen how you to develop your pages. sure the Green Edit local based lessons, guidedasks exercises, andwant QuickTime tutorials, veteranMake author Garo walks you copies on my machine, then upload to server when ready (recommended) through all the Dreamweaver MX 04 basics: navigating the new interface, creating and radio button is selected. This lets Dreamweaver 2004 know thatframes you will create and edit the managing Web sites, and linking among pages. MX You'll learn about and forms, cascading Web pages on your computer and then upload them to the Web when you are ready. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about The best radio buttons let you edit your pages over acoverage network of and on a remote layoutother and two typography practices. You'll also find extensive alldirectly of Dreamweaver's Web server.dynamic cross-browser validation, improved CSS support, built-in graphics newest features: editing, and more. Throughout, Garo shows you not just how to do something but why you're 8. Click the Browse folder icon) and browse to the chap_03 folder on your doing it and the resultsbutton of your(small actions. Desktop. Mac: Highlight the chap_03 folder and click Choose. Windows: Open the chap_03 folder and click Select. 9. ClickNext. 9. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With 10. its Thepowerful next screen combination defines how of visual you will layout connect tools, toapplication the remotedevelopment Web server so features, you canand upload code editing your support, files. Skip Dreamweaver this section MX for2004 now is because sure toitbecome is covered the in constant detail in companion Chapter 20, of many "Getting Web It developers. Online." Here Don't to worry get you about hands-on coming with back it fast to this is the later; definitive it's easy project-based to change these training settings, on the topic even from long one of after theyou've mastercreated teachers them. at Linda.com Make sure training. None isUsing selected a combination and then click of projectNext. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 11. Theand next screen displays a Garo summary of you the not settings you specified for yourbut site. Take a editing, more. Throughout, shows just how to do something why you're to results look over this screen to make sure you have everything set up properly. When doingmoment it and the of your actions. you are ready, click Done.Note: If you have already defined other sites, your Manage Sites window will reappear with your new site definition listed. Click Done. The site is now defined as Chapter 3.The Files panel will display the contents of the chap_03 folder on your Desktop. This is the folder on your hard disk that contains all of your HTML files and images, also referred to as your local folder.It might seem like very little has happened, which is true. You'll see the advantages of defining a site in upcoming exercises, where you'll move files around and put this feature to the test! Windows Users Note: If you see locks next to the file or folder icons, refer to the Introduction to learn how to remove those before proceeding. Note Local Root Folder, Root Folder, Root As you work through Dreamweaver MX 2004, you will notice references to a local root folder, a root folder, and root. All these terms are interchangeable. Each refers to a folder on your hard drive that contains all of the HTML, images, and so on for your Web site. This can be any folder on your computer. It can be empty, or it can have an entirely completed Web site. Don't be confused by this slight difference in terminology. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2 Relative and Absolute Links This exercise will help you understand two different types of links–those that are relative and those that are absolute. Relative links reference files that are part of your site. All the files that you see in the local root folder of your Files panel are internal files and can be referenced as • of Contents relative links.Table If you want to link to an external file, such as someone else's site, you have to use • Index anabsolute link. If you don't understand the difference between these two types of links, read • Examples on. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. In the Files panel, locate the index.htm file and double-click to open it. Alternatively, you could choose File > Open and browse to the chap_03 folder to locate index.htm. I think it's easiest to use the Files panel however! I suggest that you train yourself to open HTML files from the Files panel instead of your hard drive. Doing so will ensure that you have successfully defined a site and that Dreamweaver M X 2004's site management features are being enforced. Believe me, this will save you a lot of potential pain, because the alternative of not working within a defined site can cause your HTML code to produce broken links and images! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click the l.a. Eyeworks (top_logo.gif) image at the top left of the screen to select it. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project3. With the image look atQuickTime the Properties inspector notice thatGreen this image based lessons, guidedselected, exercises, and tutorials, veteranand author Garo walks links you toindex.htm. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best If typography your Properties inspector doesn't show as manycoverage features of as all theofone shown here, layoutTip: and practices. You'll also find extensive Dreamweaver's click the arrow at the bottom-right corner to expand it. The link index.htm is a relative newest features: dynamic cross-browser validation, improved CSS support, built-in graphics link. It does not have additional information in front of it, such as editing, and more. Throughout, Garo shows you not just how to do something but why you're .The file does not need that information doinghttp://www.laeyeworks.com/index.htm it and the results of your actions. because the file name is relative to other internal files in the site. You'll learn more about relative links in this and future chapters . 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. In the Files panel, double-click the contact.htm file to open it. Click anywhere in the www.laeyeworks.com text link at the bottom of the document window. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 5. In theWeb Properties inspector, noticepages. that this text linksabout to http://www.laeyeworks.com. managing sites, and linking among You'll learn frames and forms, cascading is an external linkand to another site on the and Internet. This of suggestions link is referred to as an style This sheets, and Fireworks Flash integration, gobble up type Garo's about best link. It needs the additional to specify its location it is not layoutabsolute and typography practices. You'll alsoinformation find extensive coverage of all of because Dreamweaver's relative to any internal documents, and it existsimproved on its own server, separate from the site newest features: dynamic cross-browser validation, CSS support, built-in graphics used in more. this book. editing, and Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Closeboth the index.htm and contact.htm files. Do not save any changes if you are prompted. Note Absolute and Relative URLs The term URL stands for UniformResourceLocator. In plain English, URLs are the addresses you use when you go to a Web site. Some are simple, such as http://www.lynda.com, and others are very complicated and hard to remember, such as http://www.lynda.com/dw4hot/lessons/chapterone. Regardless of whether a URL is short or long, there are two different types: absolute and relative. An absolute URL looks like this: http://www.lynda.com/index.html An absolute URL is a complete URL that specifies the exact location of the object on the Web, including the protocol that's being used (in this case, http), the host name (in this case, www.lynda.com), and the exact path to that location (in this case, /index.html). Absolute URLs are always used when you want to link to a site outside your own. • • • You can use absolute URLs within your own site, but it's not necessary, and most Web publishers opt to use relative URLs instead. If you use relative URLs for internal documents, it's easier to move them if you change your domain name. Table of Contents Index A sample relative URL looks like this: Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training index.html ByGaro Green, Lynda Weinman If I were linking from pageone.html of our site to pagetwo.html of our site, I wouldn't need to insert the entire http://www.lynda.com URL anymore. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3 File and Folder Management From within the Dreamweaver MX 2004 Site panel, you can create new folders and files, as well as move them around from one directory into another. When you do this, you're actually adding folders and files to your hard drive, as this exercise will demonstrate. Accessing your hard drive • Table of ContentsMX 2004 is essential to site management practices because from within Dreamweaver • Index Dreamweaver MX 2004 can then keep track of where the files and folders have been moved, • Examples renamed, added, or deleted. This exercise will show you how to add folders and files to the Macromedia® Dreamweaver® MX 2004: Hands-On Training Chapter 3 site. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. In the Files panel, right-click (Windows) or Ctrl+click (Mac) the folder at the top of the local folder view. Choose New Folder from the contextual menu that appears. This will add a new folder to the chap_03 folder on your hard disk. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Typehtml for the folder name and press Enter (Windows) or Return (Mac). With its powerful combination of visual layout tools, application development features, and code Note: Before you continue,MX make sure you to have closedthe all constant open pages. If you have pages editing support, Dreamweaver 2004 is sure become companion of many Web open and you their locations, you yourself into project-based a big mess. So, as a rule developers. Here tomove get you hands-on with it can fast get is the definitive training on of the always sure all of your pages aretraining. closed before move them of around in the topic thumb, from one of themake master teachers at Linda.com Usingyou a combination projectpanel. basedFiles lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 3. Next, learn to select files movenavigating them into the the folder you just creating created. and Additionally, through all you'll the Dreamweaver MX 04 to basics: new interface, you'll Web learnsites, how and to select discontiguous files–files that are notframes adjacent one another. managing linking among pages. You'll learn about andtoforms, cascading about.htm, and then (Windows) or Cmd+click (Mac) contact.htm style Click sheets, and Fireworks and Ctrl+click Flash integration, and gobble up Garo's suggestions aboutand best sure you hold the Ctrl orcoverage Cmd keyofas click the last two layoutlocations.htm. and typography(Make practices. You'll alsodown find extensive allyou of Dreamweaver's filefeatures: names.) dynamic cross-browser validation, improved CSS support, built-in graphics newest editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Once you have all three files selected, drag them to the html folder that you just created. This will move all three files into this new folder. Woo-hoo! (If your html folder is in a slightly different location on the screen than mine is, that's OK.) 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 5. When you move files, Dreamweaver MX 2004 will prompt you to update their links. Click ISBN: 0-321-20297-X Update. Pages: 720 Dreamweaver MX 2004 will list all the different files whose links were affected by the files you just moved. Once you click Update, these files will be rewritten automatically to reflect the change in file structure. Can you imagine how long it would take to do that manually? With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topicWarning from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through theFiles Dreamweaver MX 04 basics: navigating the new interface, creating and Useall the Panel managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style If sheets, and to Fireworks and Flash andor gobble upinGaro's suggestions best you want add, modify, move,integration, or delete files folders your Web site, do about it layout and typography practices. You'll also find extensive of3. allIfof Dreamweaver's inside Dreamweaver MX 2004's Files panel, as shown coverage in Exercise you make these newest features: dynamic cross-browser validation, improved CSS support, built-in graphics folder changes on your hard drive without opening Dreamweaver MX 2004, you'll have editing, and Throughout, showsby you not justeach howpage. to do If something why you're to go in more. and repair the linksGaro manually relinking you makebut your doingchanges it and the results your actions. inside the of Files panel, Dreamweaver MX 2004 will keep track of them and automatically update your pages. 4 Understanding Path Structure This next exercise shows how path structures are created and altered when you move files inside the local root folder. A path structure is how HTML represents the path to different files in your site, depending on where they are located. Relative and absolute URL paths can result in a • Table ofpath Contents variety of different structures. In this exercise, you will move files around the local root • Index folder in three distinct ways, each demonstrating a different type of path structure you might • encounter. InExamples this first example, you will simply insert a file that is within the same folder. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. In the Files panel, click the plus sign (Windows) or arrow (Mac) next to the paths folder. This will expand the folder, and you'll see the contents of the paths folder. 2. Open paths1.htm by double-clicking it in the Files panel. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver 2004 sure to become thethe constant companion of many Web 3. From the Files panel, clickMX and dragisthe logo1.gif onto page. When you release the developers. Here to get you hands-on with it fast is the definitive project-based training on the mouse button, the image will be inserted on the page. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and thehave results of your actions. 4. Once you inserted this image, make sure it's selected, and look at the Properties inspector. Notice that the Src is set to logo1.gif. As you become more experienced with building Web pages, you will begin to notice that a file name with no slash in front of it means that the file is in the same folder as the HTML file that referenced it. In this second example, you will insert an image that is inside another folder . 5. In the document window, delete the image that you just inserted by selecting it (clicking it once) and pressing Delete. 5. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 6. Click the plus sign (Windows) or arrow (Mac) next to the images folder inside the paths newest features: dynamic cross-browser validation, improved CSS support, built-in graphics folder. This folder contains one image, logo2.gif. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. 6. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. Click and drag logo2.gif onto the page. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and you typography practices. findsure extensive coverage all at of Dreamweaver's 8. Once have inserted this You'll image,also make it's selected and of look the Properties newest features: dynamic cross-browser validation, improved CSS support, built-in inspector again. Notice that the Src is now set toimages/logo2.gif. The slashgraphics means editing, and more. Throughout, Garo shows you not just how to do something but why you're that the file is nested inside another folder. doing it and the results of your actions. 9. Save your changes and close paths1.htm. In this third example, you will open an HTML document that is inside a folder and insert an image that is outside a folder. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 10. From the Files panel, click the plus sign (Windows) or arrow (Mac) next to theabout html best style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions nested within the paths folder. thecoverage paths2.htm that file. layoutfolder and typography practices. You'll alsoDouble-click find extensive of alltoofopen Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. 10. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 11. Click and drag logo1.gif onto the page. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 12. Once you haveThroughout, inserted thisGaro image, make and look at the editing, and more. shows yousure not it's justselected, how to do something butProperties why you're the Src is now set to ../logo1.gif. The two dots before the doinginspector it and the again. resultsNotice of yourthat actions. slash indicate that the image was one folder up from the HTML document that referenced it. 13. Save and close the paths2.htm file. The point of this last exercise was simply to point out how different path structures are generated depending on how your files and folders are situated within the Files panel. Path structures are something you'll encounter as you build HTM L pages in Dreamweaver M X 2004, and this exercise hopefully made them a bit less mysterious! Different Path Notations When you reference files in HTML/XHTML, you must specify exactly where the document is. Dreamweaver MX 2004 writes the HTML for you, and it inserts different path structures depending on where the files are located. Use the following chart to reference how path • Table of Contents structures are specified within HTML. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Path Notations in Dreamweaver ByGaro Green, Lynda Weinman Path Notation document.gif Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 images/document.gif MX 2004 Description No forward slash (/) or dots (..) indicates that the file is inside the same folder as the referring HTML file. The forward slash (/) indicates that the file is inside theimages folder, or the file is located one level down from the referring HTML file. ../images/document.gif The two dots (..) indicate that the folder is one level up from the referring HTML file. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5 Using the File Browser As stated earlier, it is important that all of the assets for your Web pages be inside your local root folder. This will ensure that the proper paths are created. However, sometimes you will need to work with an asset outside your local root folder. The file browser, within the Files panel, • Tableaccess of Contents gives you direct to all of the files and folders on your hard disk. You can use the file • Index browser to easily move files into your local root folder. This is a convenient way to move files • because you Examples don't have to exit Dreamweaver MX 2004. It also ensures that your files have the Macromedia® Dreamweaver® MXthis 2004: Hands-Onyou Training necessary path integrity. In exercise, will learn how to use the file browser to import a folder of images your site. By Garo Green , Lyndainto Weinman Peachpit Press 1.Publisher: Copy the 03_photos folder from the H·O·T CD-ROM to your Desktop. This folder contains Pub Date: December 22, 2003 three images that need to be added to one of the pages in the site you defined earlier in ISBN: 0-321-20297-X this chapter. Because this folder has been copied to your Desktop, it is outside the local root folder Pages: 720 you defined in Exercise 1. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Open the locations.htm file from inside the html folder. This page contains three image placeholders, a visual element that specifies where images should be inserted onto the page. You will learn more about image placeholders later in the book. For this page, I have inserted an image placeholder where I want each of the location photos to be placed. In our layout design, I determined that the image should be 146 x 148 pixels. Unfortunately, the images you need to insert are not inside your local root folder. However, by using the file browser, you can very easily browse to any location on your hard drive and copy the image inside your local root folder so you can then insert them on the page without risking broken links. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 3. The Files an integrated file browser that you can use to browse contents topic from one panel of thecontains master teachers at Linda.com training. Using a combination ofthe projectof your hard drive: based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Windows: In the Files panel, select Desktop from the drop-down menu in the layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's upper-left corner. Then click the plus sign next to the Desktop Items folder. This newest features: dynamic cross-browser validation, improved CSS support, built-in graphics will display all of the contents on your Desktop, which is where the 03_photos folder editing, and more. Throughout, Garo shows you not just how to do something but why you're is located. doing it and the results of your actions. Mac: In the Files panel, select Computer from the drop-down menu in the upper-left corner. Click the small arrow next to the Computer icon. Then click the small arrow next to the Desktop Folder icon. This will display all of the contents on your Desktop. The Site panel displays green folders to show folders that are within your local root folders. Folders outside your local root folder are colored yellow (Windows) and blue (Mac). • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. its Right-click (Windows) orofCtrl+click (Mac) theapplication 03_photos folder and choose Edit > code With powerful combination visual layout tools, development features, and Copy. This will copy the folder and all of its contents into the computer's memory. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 5. Click sign (Windows) oratarrow (Mac)training. next to the chap_03 folder so can see topic from the oneplus of the master teachers Linda.com Using a combination ofyou projectthe contents of that folder. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Right-click (Windows) or Ctrl+click (Mac) the images folder and choose Edit > Paste. Note: You can also drag and drop files directly from your Desktop. This will paste the 03_photos folder and all of its contents inside the images folder. Now that the files you need have been copied into your local root folder, you can replace the image placeholder with the correct image. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 7. In the Files panel, choose Chapter 3 from the drop-down menu in the upper-left corner to topic from one of the master teachers at Linda.com training. Using a combination of projectsee the contents of your local root folder. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. Click the top image placeholder to select it and press Delete to delete it from the page. Now that you have the image you need, you no longer need the image placeholder. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 9. In the Files panel, browse to the 03_photos folder and click and drag the locPhoto1.jpg image onto the page. You want to drag it to the same location as the image placeholder With its combination of visual layout tools, application development features, and code youpowerful just deleted. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. Delete the other two image placeholders and replace them with the locPhoto2.jpg and locPhoto3.jpg images from the 03_photos folder. This will give you a little bit more practice at working with image placeholders and dragging images onto your pages. It will look like this window when you're done. 11. Save and close all open files. 6 Creating a Site Map Creating a site map is a great way to examine the structure of your Web site because it allows you to see the different levels of your Web site and what is contained within those levels. Many people use site maps to show their client how the site looks from a structural viewpoint. It is • Table of Contents handy that Dreamweaver MX 2004 can easily create site maps, and even render them as PICT or • Index JPEG (Mac) or BMP or PNG (Windows) files. If you change the structure of the site, the site map • Examples will change as well. This exercise shows you how easy it is to create and save a site map. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. In the Files panel, click the Expand/Collapse button in the upper-right corner. This will cause the Files panel to expand and fill the entire screen, which also gives you access to theMap View feature. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click the Site Map button in the toolbar to display the site map of the Chapter 3 site. If With its youpowerful click andcombination hold down the of visual mouse layout button, tools, youapplication will see that development two options features, are available: and code Site editing Map support, or Map Dreamweaver and Files. MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through the Map Dreamweaver 04 basics: navigating the new interface, creating TheallSite view, setMX to Map and Files, will open in the left side of theand window. managing WebMap sites,view and linking among and forms, cascading The Site is great if youpages. want You'll to seelearn the about overallframes structure of your Web site style and sheets, and Fireworks and Flashlink integration, gobble up Garo's suggestions about best how the different pages to each and other. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Here in the Map Only view, you can see the overall architecture of your Web site. If you click any of the plus signs, you will see the pages linked to that page . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic fromprocess one of the master teachers at as Linda.com training. a combination of project3. The of saving the site map an image, so you Using can view or print it later, is a bit baseddifferent lessons,between guided exercises, and QuickTime tutorials, veteran author Garo Green walks you the Windows and Mac systems: through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout andMac: typography practices. also find extensive coverage of the all of Dreamweaver's You must click theYou'll Expand/Collapse button. Change Files panel to Map newest features: dynamic cross-browser validation, improved CSSpanel, support, built-in view. Then, from the Panel Options menu in the Files select File graphics > Save Site editing, and more. Garo you you not just how do something but why you're Map. YouThroughout, can name this fileshows anything want. Thetosite map is automatically saved doing it and results asthe a PICT file.of your actions. Windows: While viewing the site map, select File > Save Site Map. A Save As dialog box will appear so you can name the map. You can name this file anything you want. You can save it as a BMP or PNG file. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. At the top of the window, click the Expand/Collapse button. This will return you to the With its default powerful Dreamweaver combination MX of 2004 visual interface. layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. 5. If you have Here any to get pages you open, hands-on closewith anditsave fast is them the now. definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Movie layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're sitemaps.mov doing it and the results of your actions. To learn more about creating site maps, check out the sitemaps.mov file located inside the movies folder on the Dreamweaver MX 2004 H·O·T CD-ROM. 7 Creating a Site from Nothing So far, you've had a chance to work with the Dreamweaver MX 2004 site management window by defining a site based on folders and files from the H·O·T CD-ROM. What about when you finish this book and go to create your own Web site? You might know how to define a Web site • of Contents that already Table exists, but not know how to go about creating a site from scratch. I want that to • Index happen to you, so this next exercise will walk you through the steps of defining a site before you • Examples have any content to put in it. This exercise also introduces you to the Advanced tab of the Site Macromedia® Dreamweaver® MX 2004: Hands-On Training Definition window. ByGaro Green, Lynda Weinman 1. Leave Dreamweaver MX 2004 open, but go to the Desktop of your computer. Create a new Publisher: emptyPeachpit folder Press on your Desktop and name it mywebsite. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're 2. Return to Dreamweaver and choose Site > Manage Sites. This will open theManage doing it and the results of your actions. Sites window, where you can define a new site or edit/remove an existing site. Click New and choose Site from the small drop-down menu that opens. This will open the Site Definition window. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 3. Make theThroughout, Advanced tab is shows selected at not the just top how of thetowindow. Fill in the editing, andsure more. Garo you do something butSite whyName you're(I my web you may name it what you want). For the Local root folder, doingchose it and theown results ofsite, your but actions. click the folder icon and navigate to the empty folder you created on your Desktop called mywebsite. Click Open > Select (Windows) or Choose (Mac), and then click OK. Click Done when you return to the Manage Sites window. This is what your Files panel will look like now that you have created a new site based on an empty folder. N otice there's nothing in the Files panel. Dreamweaver MX 2004 is doing an accurate job of displaying the contents of an empty folder . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. You can add files and folders directly from within the Files panel of Dreamweaver MX 2004. Thisensures that the files are automatically saved within the current local root folder (mywebsite), which is where they should be saved. To do so, right-click (Windows) or Ctrl+click (Mac) the local root folder at the top and choose New File from the contextual menu that opens. Note:You can name the file from the Files panel, just as you can rename an untitled document on your hard drive. Once a file has been created in the Files panel, its name will be highlighted and ready to be named. You can do it now, or later, by opening untitled.htm (Windows) oruntitled.html(Mac) and selecting File > Save As. 5. Leave Dreamweaver MX 2004 open. Look on the Desktop of your computer and open the mywebsite folder. Lo and behold, there is an HTML document called untitled.htmlin there! The same HTML file that appeared in the Site panel is also on your hard drive . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 6. Try creating some more filesamong and saving them into thisabout folder.frames When and you forms, return to managing Web sites, and linking pages. You'll learn cascading Dreamweaver MX 2004, these other files will appear in the Files panel. Note: you don't style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestionsIfabout best see the new files in your Files panel, just click the Refresh button and they will appear. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's The Site panel is simply a mirror of what exists improved on your hard newest features: dynamic cross-browser validation, CSSdrive. support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Importing Sites into Dreamweaver MX 2004 There might be times when you need to work with an existing site in Dreamweaver MX 2004, perhaps one that has been created in another program, such as FrontPage or GoLive. Dreamweaver MX 2004 doesn't have an "import Web site" command, but the process is pretty straightforward. Just create a new folder and copy all of the Web site assets (html, images, etc.) into that folder and then define that folder as a site in Dreamweaver MX 2004. You will then have access to all of the Dreamweaver MX 2004 site management features. Yes, it is really that easy. ;-) 7. When you are finished, close all open files. It doesn't matter if you save your changes; you won't be using any of these files for the rest of the book. Dreamweaver M X 2004 allows you to create files and folders directly from its Files panel. Some Web designers create a lot of images first and throw them into a folder and define that as a site inside Dreamweaver MX 2004. Others might start with an empty folder and build empty HTML files first, and then create and add images later. There is no right or wrong way to start a Web site, but Dreamweaver MX 2004 is flexible enough to work from scratch with an empty folder or to create a site around existing files. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 4. Basics Defining the Site • • • Table of Contents Creating a Document Index Examples Inserting and Centering Images and Text Macromedia® Dreamweaver® MX 2004: Hands-On Training Page Properties ByGaroModifying Green, Lynda Weinman Creating Links Publisher: Peachpit Press Pub Date: December 22, 2003 <meta>Tags ISBN: 0-321-20297-X If you're the720 impatient type (as I would frankly characterize myself), this is the chapter you've Pages: been waiting for. The following exercises teach you how to define a site, create and save a page, insert and align images and text, link images and text, define the page properties with CSS or XHTML, and insert meta information (such as keywords and descriptions for search engines). The purpose of this chapter isn't to teach you everything about Web design or Dreamweaver MX 2004; rather it is intended to get you comfortable with the program by building a simple page With its powerful combination of visual layout tools, application development features, and code and performing other common Web development tasks. The rest of this book will focus on some editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web of these areas in greater detail, as necessary. Covering this much material may seem developers. Here to get you hands-on with it fast is the definitive project-based training on the overwhelming, but fortunately Dreamweaver MX 2004 makes most of these operations as simple topic from one of the master teachers at Linda.com training. Using a combination of projectas accessing a menu or clicking a button. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the basics: your navigating the new MX interface, creating and be wet, By the time youDreamweaver are done withMX this04 chapter, Dreamweaver 2004 feet will finally managing Web sites, and linking among pages. You'll learn about frames and forms, cascading and you will be well on your way to understanding the program's interface for creating pages style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best and sites. The exercises here will be your foundation for building more complex pages in future layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's chapters. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Defining the Site In each new chapter, I request that you copy files from the H·O·T CD-ROM to a folder on your hard drive. In this exercise, you will revisit how to define a site based on the contents of the folder. Because each chapter of this book features different files, each chapter is defined as its • Table so of Contents own distinct site, you will go through the process of this exercise many times. Normally, if you • Index were working on a single site, you would most likely define your site once. If you switched • Examples projects, however, you would need to define a new site. Dreamweaver MX 2004 allows you to Macromedia® Dreamweaver® MX 2004: Hands-On Training manage multiple sites, which is helpful if you have multiple clients or projects for which you plan toGaro use Green the program. By , Lynda Weinman Peachpit Press 1.Publisher: Copy the chap_04 folder from the H·O·T CD-ROM to your hard drive. Pub Date: December 22, 2003 ISBN: 0-321-20297-X 2. Choose Site > Manage Sites to open the Manage Sites window. This window lets you add new Pages: 720sites, edit and make duplicates of existing sites, export and import sites, and remove sites. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Click the New button, and from the small drop-down menu, choose Site, which will open theSite Definition window. Note:The FTP & RDS Serveroption involves more advanced workflow and will not be covered in this book. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 4. Make sure the Basic tab, in the upper-left corner, is selected. In the What would you like newest features: dynamic cross-browser validation, improved CSS support, built-in graphics to name your site? text field, type Chapter 4. This defines the name for your site. This editing, and more. Throughout, Garo shows you not just how to do something but why you're name is an internal naming convention used by Dreamweaver MX 2004. I suggest you give doing it and the results of your actions. each site a name that is relevant to you. You can use any name you want, including special characters, such as spaces, dashes, and so on. Click Next. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 5. Make sure the No, I do not want to use a server technology radio button is selected. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Thistells Dreamweaver MX 2004 you are creating a static Web site and are not going to layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's use a server technology, such as ASP or CFM, with your site. A server technology is newest features: dynamic cross-browser validation, improved CSS support, built-in graphics necessary if you are creating a Web site that connects to a database to generate dynamic editing, and more. Throughout, Garo shows you not just how to do something but why you're data. Click Next. doing it and the results of your actions. Don't worry if you change your mind later. You can change all of the settings you define for your site at a later date. Phew! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 6. Make sure the Edit local copies onvalidation, my machine, then CSS upload to server when ready newest features: dynamic cross-browser improved support, built-in graphics (recommended) radio button selected. tellshow Dreamweaver MX 2004 want editing, and more. Throughout, Garoisshows you This not just to do something butthat whyyou you're the Web pages your computer and upload them when you are ready. This is doingto it create and the results of youron actions. the most common way to create and publish Web pages. 7. Click the small folder icon to open the Browse dialog box. Locate the chap_04 folder on your Desktop: Mac: Highlight the chap_04 folder and click Choose. Windows: Double-click the chap_04 folder to open it. Click Open. This specifies the folder you want to use as the local root folder for your site. In this case, youare using the chap_04 folder as the local root folder. Each site you define in Dreamweaver MX 2004 must point to a folder that you are using as the local root folder. ClickNext. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 8. Make sure the How do you connect to your remove server?option is set to None. You style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best will learn more about connecting to a remote Web server and how to upload files later in layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Chapter 20, "Getting It Online". Click Next. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 9. The next screen displays a summary of the settings you have specified for this site. Take a style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best moment to review the information on this screen. If you have made a mistake, you can layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's clickBack to return to any of the previous screens to make any needed changes. Click newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Done if everything looks okay. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Note Basic and Advanced Tabs • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best You might have noticed that the Site Definition window contains two tabs: Basic and layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Advanced. These tabs serve the same purpose: They both let you define a site. The newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Basic tab is more of a wizard approach, where you define a site by answering a series editing, and more. Throughout, Garo shows you not just how to do something but why you're of questions. This is a great place to start if you are new to Dreamweaver MX 2004. doing it and the results of your actions. The Advanced tab is where more experienced Dreamweaver MX 2004 users will go to define a site. The Advanced tab gives you direct access to all the options necessary to define a site and work with other site features, such as Design Notes, modifying the Site Map Layout options, and changing the Site panel column options. As you become more experienced with Dreamweaver MX 2004, you will find yourself using the Advanced tab to define your sites. 2 Creating and Saving a New Document This next exercise teaches you how to create and save a document in Dreamweaver MX 2004. You will be saving this document as index.html, which has special significance in HTML, and almost always means that it is the beginning page of a site. Additionally, you will learn to set the • Table of Contents title of this document to Welcome to laEyeworks. • Index • Examples 1. If a blank document MX window alreadyTraining open, Macromedia® Dreamweaver® 2004: is Hands-On close it and don't save any changes if you are prompted. Each time you open Dreamweaver MX 2004, by default it will open to the start ByGaro Green, Lynda Weinman page, which lets you create a wide variety of documents by simply clicking on a link. (You can disable the start page in the preferences, which is explained in Chapter 2, "Interface.") Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X The Pages: start 720 page is a quick and easy way to create new documents. However, it does not give you access to all of the new page templates inside Dreamweaver MX 2004 or let you control some other options, such as creating a new page using XHTML instead of HTML. To access all of the new page templates, just follow the next few steps. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. SelectFile > New. This will open theNew Document dialog box, which lets you choose a template for your new document. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 3. Make sure the Basic page category is selected and then choose HTML under the Basic page section. This tells Dreamweaver MX 2004 that you want to create an HTML page. Click the Make document XHTML compliant check box to create a new page with XHTML instead of HTML. Click Create. With its powerful combination of visual layout tools, application development features, and code Only the new document window gives you the ability to make a newcompanion XHTML document; the editing support, Dreamweaver MX 2004 is sure to become the constant of many Web start page this option. Sure, youis can your HTM L documents in on XHTML developers. Heredoesn't to get offer you hands-on with it fast the convert definitive project-based training the will learn howteachers to do this Chapter 12, "XHTML"), why not do itofthe correct topic later from (you one of the master atinLinda.com training. Usingbut a combination projectright from the start? A quicker way to create XHTM L pages wouldGaro be to change the you basedway lessons, guided exercises, and QuickTime tutorials, veteran author Green walks General preferences in Dreamweaver MX 2004 so itthe generates XHTML creating for all new through all the Dreamweaver MX 04 basics: navigating new interface, andpages. All you have do isand click a single checkpages. box. ;-) Hey, if you don'tframes want to use XHTMcascading L, that's managing Web to sites, linking among You'll learn about and forms, withand me.Fireworks There aren't XHTML police around, but Iup strongly you do style fine sheets, and any Flash integration, and gobble Garo's recommend suggestions that about best it is the current WebYou'll standard for creating W eb pages and will fine in older layoutbecause and typography practices. also find extensive coverage of all of work Dreamweaver's browsers. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Note The New Document Dialog Box • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web The New Document dialog box gives you access to many templates that you can developers. Here to get you hands-on with it fast is the definitive project-based training on the use for creating new pages in Dreamweaver MX 2004. These templates are topic from one of the master teachers at Linda.com training. Using a combination of projectdesigned to give you the necessary code to begin creating pages for specific based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you purposes. Within each category are a number of different template options. For through all the Dreamweaver MX 04 basics: navigating the new interface, creating and example, within the Framesets category are a number of different frameset managing Web sites, and linking among pages. You'll learn about frames and forms, cascading designs. All of the templates are designed to save you time and get you started in style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best the right direction. Some categories have a check box that will make sure the code layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's is XHTML-compliant. The Templates tab at the top is reserved for templates that newest features: dynamic cross-browser validation, improved CSS support, built-in graphics you will learn how to create later in Chapter 17, "Templates/Libraries." editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The N ew Document window will close, and a new blank XHTML document window will open. My window is currently maximized to its largest size; that's why I have a little tab in the upper-left corner. If your window isn't maximized, or you're on a Mac using Dreamweaver MX 2004, then you won't have this cute little tab . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. Click the Code button in the Document toolbar to change the view of the page to Code view. (If your Document toolbar isn't visible, select View > Toolbars > Document to make it visible.) With its powerful combination of visual layout tools, application development features, and code editing Dreamweaver sure to become companion of many Web Assupport, you probably guessed, MX the 2004 Code is view displays only the the constant code of your page. Some people developers. Here to get you hands-on with it fast is the definitive project-based training on the find looking at all this code kind of difficult or downright scary. Well, if you want to be a topic professional from one of the teachers at Linda.com training. combination of projectWebmaster designer/developer, you really need toUsing know acode and feel comfortable basedworking lessons,with guided exercises, and QuickTime tutorials, veteran author Garo Green walks you it, and not limit yourself to just the visual editing environment of through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Dreamweaver M X 2004. Consider this lesson "Code 101." managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic is cross-browser validation, improved CSS support, graphics When the window not maximized, you will see (XHTML) in its built-in title bar. This is editing, and more. Throughout, Garo shows you not just how to do something but why you're yet another way to tell you are working with an XHTML document. The code in doinglines it and1 the results of your actions. through 3 tell the Web browser (and the rest of the curious world) that this page is an XHTML page and not an HTML page. As long as you see this code, you can be assured that your page is considered a true XHTML page . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. Click the Design button in the Document toolbar to return to the default Design view of your page. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 6. In theone Document toolbar's Title at text field, type Welcome to alaEyeworks. Enter topic from of the master teachers Linda.com training. Using combination Press of project(Windows) or Return (Mac). This will define the page title for this page. The page title you based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks appears at the top of the browser when the page is being viewed and is the name used by through all the Dreamweaver MX 04 basics: navigating the new interface, creating and browsers and Web pages when this page is bookmarked. Right now the page is blank, but managing Web sites, and linking among pages. You'll learn about frames and forms, cascading to turn it into a coolintegration, and functional page a jiffy.suggestions about best style you're sheets,going and Fireworks and Flash andWeb gobble upinGaro's layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Before you go on, it iscross-browser very important that you save your CSS file first. All ofbuilt-in the sitegraphics newest features: dynamic validation, improved support, management benefits introduced in the last exercise depend on Dreamweaver MX 2004 editing, and more. Throughout, Garo shows you not just how to do something but why you're knowing the name of your file. Because of this, the program constantly notifies you if you doing it and the results of your actions. are working on an unsaved document. Besides, no one wants to unexpectedly lose work, and this practice is good insurance against system crashes and/or a power outage. Anytime you see an asterisk (*) next to the file name of the page, you know that you have made changes to your page that have not been saved yet! 7. Save the file as index.html inside thechap_04 folder on your hard disk. Leave this file open–you will be using it in the next exercise. If your document window is maximized, the page title and the file name will be displayed to the right of the Dreamweaver title bar, at the very top of the window • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 your document If window is not maximized, the page title and the file name will be displayed in the title bar of each document window There are two names in the title bar of your document panel. The first is the title of the document With its powerful combination visualname layout application development features, andtocode (Welcome to laEyeworks). The of second is tools, the file name (index.htm), which shows up the editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web right of the title. The title can be different from the file name, as in this example. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best File Names versus Titles layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics As you and create WebThroughout, pages with Dreamweaver MXnot 2004, need to specify editing, more. Garo shows you just you howwill to do something but why you're various names for your files, folders, sites, and so on. This might not seem tricky at doing it and the results of your actions. first glance, but two different names are actually associated with HTML files: the file name and the title. When you save a document, you will be assigning its file name. The file name must always end with the .htm or .html extension. The other name associated with the document is called the title. The file index.html here, for example, has been assigned the title "Welcome to laEyeworks." It is essential that file names do not contain spaces or special characters. Page titles, however, are much more flexible, and you should make them more descriptive than the file name. When the page is viewed from a Web browser, the title will be much more visible to your end user than the file name. Also, when end users bookmark this page, the title will appear in their bookmark lists. When search engines index the page, it is often categorized by page title as well. The Significance of index.html You just created a document called index.html. What you may or may not appreciate is that this particular file name has special significance. Most Web servers recognize the index.htm (or index.html) as the default home page. You can use .htm and .html interchangeably; both will be • Table Contents recognized by theofWeb server as HTML pages. If you type the URL http://www.lynda.com, for • Index example, what you will really see is http://www.lynda.com/index.html, even though you • didn't type itExamples that way. The Web server knows to open the index.html file automatically without Macromedia® MXtyped. 2004: Hands-On Training requiring theDreamweaver® full URL to be Therefore, if you name the opening page of your Web site with the file,Lynda nameWeinman index.html, the Web server will know to automatically display this file first. By Garo Green Taking this concept one step further, you can have an opening page for each section of your Web Publisher: Peachpit Press site, not just for your home page. This feature has definite advantages–among them, your users Pubfind Date:themselves December 22, looking 2003 won't at a generic index, like in the following screen shot. ISBN: 0-321-20297-X Pages: 720 If you do not have an index.html file in your site, browsers will display a general list of your files, such as this example . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. This is why the file name index.html is so significant. It's also the reason most professional Web developers use it as the root file name, although on some servers a different name is used, such as default.html. What you may not realize is that you are not limited to just one index.html on • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 3 Inserting Images In this exercise, you will continue working with the index.html file and learn to insert images for your page's headline, logo, and navigation buttons. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Make sure the Assets panel is open by choosing Window > Assets or by pressing F11. Inserting images from the Assets panel ensures that you are working only with images from within your local root folder. This is a good thing, because inserting images from outside your local root folder will cause problems when you try to upload your page to the Web server. Working with the Assets Panel The Assets panel is an incredibly powerful and useful feature in Dreamweaver MX 2004 and is one of the panels you will use most often. This panel maintains a listing of all the asset types (images, colors, links, movies, scripts, library items, and templates) within the current local root folder. Each type of asset is separated into its own category so you can easily and quickly find what you are looking for. You can even designate an asset as a "favorite," which places that asset in the "favorites" group, which is a customized asset group that contains items you use most often. This is a really powerful feature when you have hundreds or thousands of assets within your local root folder. That might sound like a lot of assets, but you will be surprised how quickly all those items add up! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through The allAssets the Dreamweaver panel is really MXsmall 04 basics: by default navigating and some the of new its interface, features are creating hidden and managing fromWeb view. sites, In these and linking images, among you can pages. see that You'll the learn Images about group frames contains and forms, cascading style sheets, information and Fireworks about theand file Flash size, type, integration, and path and of gobble the various up Garo's images suggestions listed in about best layout this andgroup. typography Each asset practices. group You'll has also different find extensive columns that coverage relate of to all that of specific Dreamweaver's newestasset features: type.dynamic By default, cross-browser the assets are validation, listed in improved alphabeticCSS order support, from A–Z. built-in You graphics editing, can and reverse more.this Throughout, by clicking Garo on the shows Name youcolumn not just athow the to top. doIn something fact, all ofbut thewhy you're doing it columns and thecan results be arranged of your actions. in ascending or descending order by clicking on the column name–another handy-dandy feature of the Assets panel. ;-) The Assets panel options menu lets you easily copy assets between the various sites that you have defined. You can also refresh the listing, which is sometimes helpful when you add new assets to a site and Dreamweaver MX 2004 is already open. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout 2. Within and typography the Assetspractices. panel, make You'll sure also the find Site extensive radio button coverage is selected of all of atDreamweaver's the top, then locate newest and features: select the dynamic logo3.gif cross-browser file. Click Insert validation, at theimproved bottom ofCSS the support, Assets panel. built-in This graphics will editing, insert andthe more. selected Throughout, image onto Garoyour shows page. you not just how to do something but why you're doing it and the results of your actions. 9. Assets panel. 10. Within the Assets panel, select the contact.gif file. Click Insert at the bottom of the Assets panel. • This is Table whatofyour page should look like at this point. Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. Click the Code button to see the Code view for this page. Even though you've added only a few images to the page, you can see that quite a bit of code is needed to make this happen. I strongly suggest that you get into the habit of looking at the Code view of your page as often as possible. It's a great way to make yourself feel more comfortable with what goes on behind the scenes.Note:If your code doesn't wrap to fit inside the document window, you can make it do this by choosing View > Code View Options > Word Wrap.Click the Designbutton (located to the right of the Codebutton) to return to the Designview of your page. 12. Save your file and leave it open for the next exercise. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Tip ByGaro Green, Lynda Weinman Other Ways to Insert Images Publisher: Peachpit Press Pub Date: December 22, 2003 There are many ways to insert images in Dreamweaver MX 2004. In this exercise, you ISBN: 0-321-20297-X learned how to use the Assets panel to insert images onto your page. I think this is not Pages: 720 only the quickest way, but also the safest way to insert images onto your page. Why? First, only images within your local root folder are listed in the Assets panel. Second, by inserting images from within your local root folder, you ensure that the proper paths will be created, so everything works when you upload your page to a remote Web server. But the Assets panel isn't the only way to insert images in Dreamweaver 2004. Here are five ways to insert images: With MX its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the SelectInsert > Image. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Click theImagebutton in the Insert panel. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Press Web Ctrl+Alt+I sites, and linking among pages. You'll learn about frames and forms, cascading (Windows) orCmd+Option+I (Mac). style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout andClick typography also find extensive coverage of all of Dreamweaver's and dragpractices. from the You'll Assets panel onto the page. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Garo how to do something but why you're Click andThroughout, drag from the Filesshows panel you ontonot thejust page. doing it and the results of your actions. As you become more comfortable with Dreamweaver MX 2004, you should use the method that feels most comfortable. 4 Inserting Text Adding text to your Web page is simple in Dreamweaver MX 2004. Just like with your favorite word processor, you can simply start typing text on your page and the text will appear. • Tableyou of Contents In this exercise, will add some text at the bottom of your page as an alternate navigation • Index system, which is useful to users who might have images turned off in their browser settings or to those who are • Examples browsing in a nongraphical browser (such as those used by sight-impaired audiences). Dreamweaver® MX 2004: Hands-On Training Macromedia® ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Click to the right of the contact.gif file you inserted in the last exercise and press Enter (Windows) or Return (Mac) to create a paragraph break. Type home, press the spacebar, pressShift+backslash to insert a small vertical line (|), or "pipe," and press the spacebar again. 2. Typeabout us, press the spacebar, press Shift+backslash to insert a pipe, and press thespacebar again. 3. Typeframes, press the spacebar, press Shift+backslash to insert a pipe, and press the spacebar again. 4. Typelocations, press the spacebar, press Shift+backslash to insert a pipe, and press thespacebar again. 5. Typecontact. 6. PressShift+Enter (Windows) or Shift+Return (Mac) to create a line break. This puts your type-insertion cursor on the next line without introducing a two-line paragraph return. 7. Typebe sure to visit the real laeyeworks.com site. 7. This is what your page should look like now . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, 8. Save yourguided file. exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, Note and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Paragraph versus Line Breaks You may have noticed that each time you pressed Enter (Windows) or Return (Mac), Dreamweaver MX 2004 skipped down the page two lines. Pressing this key inserts a single paragraph break (one line of blank space between paragraphs). The HTML tag for a paragraph break is . This is useful when you want to increase the space between different paragraphs. However, there will be times when you just want to go to one line directly below the one you are working on without introducing extra space. PressingShift+Enter (Windows) or Shift+Return (Mac) inserts a line break instead. The HTML tag for a line break is . Knowing the difference between a and a will allow you to control the spacing between lines of text. You will learn to do this in Chapter 12, "XHTML." • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 The paragraph tag will enter an extra blank line between the closing paragraph tag and the next line of content. The line break tag will place content on the very next line. You can see both of these here. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. This is what the closing paragraph tag and the line break tag look like in the XHTML code. Note: If your screen looks different from mine, that's because I changed a setting in the Code View panel called Word Wrap. 5 Centering Images and Text Now that you have added the images and text to your page, it's time to learn how to center them. This section shows you how to use centering procedures with text and images. Keep in mind that this is the first alignment technique you are learning and you will learn many other • Table of Contents alignment techniques throughout this book. • Index • Examples 1. Select the laEyeworks logo image from the previous Macromedia® Dreamweaver® MX 2004: Hands-On Training exercise (logo3.gif) at the top of the screen. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click the Align Center button in the Properties inspector. This will snap the logo to the center of the screen. With its powerful combination of visual layout tools, application development features, and code 3. Hold down Dreamweaver the Shift key and click on the remaining on thecompanion page. Still holding editing support, MX 2004 is sure to becomeimages the constant of manydown Web the Shift key, thehands-on text at the bottom Holding down thetraining Shift key developers. Here toselect get you with it fastofisthe thescreen. definitive project-based onallows the select multiple items at once. topic you fromtoone of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 4. Click Center button the Properties through allthe theAlign Dreamweaver MX 04inbasics: navigatinginspector. the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Your page should like this at the end of the exercise. newest features: dynamiclook cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Click the Code button in the Document toolbar to see the code for this page. Notice that a bunch of <align="center" rel="nofollow"> attributes were added to various tags in order to center the images and text elements on the page. Although this method of controlling Web page layout is somewhat outdated, it is a great example of how a few tags can drastically change the appearance of a page . 6. Save the file and leave it open for the next exercise. 6 Modifying Page Properties This exercise walks you through changing the colors of your page, using the Page Properties panel. The Page Properties feature controls many important attributes of your page, including the document title (which you learned about in Exercise 2), margin settings, and the colors you • Tableand of Contents set for your text links. • Index The Page Properties • Exampleswindow has two modes: HTML/XHTML mode and CSS mode. By default, Dreamweaver Macromedia® Dreamweaver® MX 2004 is MX set2004: up toHands-On use CSSTraining to define the properties of each page you create. Depending on your needs, this may or may not be appropriate. Although I am a huge proponent ByGaro Green, Lynda Weinman of using CSS, especially for setting page properties, I do realize that it may not be what everyone needs. So, in this exercise you will learn how to use HTML/XHTML to define the page Publisher: Peachpit Press properties, and later in Chapter 9, "Cascading Style Sheets", you will learn how to use CSS to Pub Date: December 22, 2003 How do you like that deal? ;-) define the page properties. ISBN: 0-321-20297-X Pages: 720 1. SelectEdit > Preferences to open the Preferences window. This window contains a bunch of options that let you modify how Dreamweaver MX 2004 operates and handles certain tasks, such as using CSS or HTML to set the page properties. You get a chance to work with many of these preferences as you move through this book, so don't worry about all of them right now. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Make sure the General category is highlighted in the left side of the window. Remove the check from the Use CSS instead of HTML tags check box. This will force Dreamweaver MX 2004 to use XHTML tags to define the page properties instead of CSS. Notice that by default, Dreamweaver MX 2004 is set up to use CSS to define the page properties. You will learn more about the impact this has on your pages in Chapter 9, "Cascading Style Sheets." ClickOK. 3. SelectModify > Page Properties or use the shortcut–Ctrl+J (Windows) or Cmd+J 4. 3. (Mac)–to access Page Properties. 4. Move this panel to the side so you can see the Page Properties and your document at the same time. Click Appearance in the Category pane to make the appearance options available. • • • Table of Contents This is Index what the Page Properties window looks like when you use HTML/XHTML to define the various properties. It looks very different when you use CSS to control Examples the page properties. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 5. Click the small box to the right of the word Background. This will open the Dreamweaver newest features: dynamic cross-browser validation, improved CSS support, built-in graphics MX 2004 color picker. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 ismove sure to the constant companion of many Web 6. With your mouse button depressed, thebecome eye dropper outside of the Page developers. Here to get you hands-on with it fast is the definitive project-based training on the Properties panel and release the mouse on the background of the home image. This will topic set from one of the master teachers at Linda.com training. Using a combination of projectthe background color of your page to match the edge of this image. To instantly see the basedresults, lessons, guided exercises, and OK QuickTime tutorials, click Apply. Don't click yet, because you veteran still needauthor to setGaro moreGreen colorswalks in theyou through all the Dreamweaver MX 04 basics: navigating the new interface, creating and upcoming steps. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and the Fireworks and Flash integration, and Type gobble up Garo'sClick suggestions about 7. Click inside text box next to the Text option. #FFFFFF. Apply. You justbest layoutcolored and typography practices. You'll also find extensive coverage of all of Dreamweaver's all your text white in this document. The Apply button is actually accepting your newest features: dynamic cross-browser improved CSS built-in graphics changes; it is not merely a preview.validation, Clicking it is the same as support, clicking OK, except that it editing, and more. Throughout, Garo shows you not just how to do something but why you're does not close the panel. doing it and the results of your actions. To set other colors, you can insert your own values. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 8. Type#0000FF for the Links option, which will set the link text in this document to a shade of blue. Type #9900FF for the Visited links option, which will set visited link text to purple, letting the user know that that link has already been viewed. If you want, you can set the Active links color to #FFFF00, which makes the links on the page turn yellow when the mouse is clicked. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become thein constant companion of many Web 9. You could also choose a color by sight, instead of typing a hexadecimal value. Click the developers. Here to get you hands-on with it fast is the definitive project-based training on the box to the right of the words Active links and the color picker will open. Move the eye topic dropper from one over of the master teachers Using a combination of projectthe background of at theLinda.com page and training. click. This will set the active link color to the basedsame lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you color as the background. The only time an active link color shows is when the mouse through all the Dreamweaver MX 04 basics: navigating the new interface, creating and button is clicked on the link. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, 10. Click OK.and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. This is what the results of this exercise should look like. You won't see the link color yet because this page doesn't have any links set yet. Oh don't worry, you will get to do that in the next exercise. ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 11. its Save the document and leave it open for tools, the next exercise.development features, and code With powerful combination of visual layout application editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and NoteWeb sites, and linking among pages. You'll learn about frames and forms, cascading managing style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best What Is Browser-Safe/Web-Safe Color? layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Browser-safe colors are the 216 colors supported by browsers across platforms (Mac editing, and more. Throughout, Garo shows you not just how to do something but why you're and Windows). If you use the browser-safe colors inside the Page Properties settings, doing it and the results of your actions. you reduce the risk of having your colors shift when people view your Web pages. Frankly, since most computers have video cards that display millions of colors and ship by default in that mode, you can pretty much forget about Web-safe colors and work with any color you want. This wasn't true just a few years ago, but more and more developers are adopting this practice, and it's really making the Web a lot more colorful and interesting. The Page Properties Panel The Page Properties panel does more than just set the colors of the links and your document title. As I mentioned earlier, the Page Properties window has two modes: HTML/XHTML mode and CSS mode. See the following chart for an explanation of all the HTML/XHTML features. You • Table of Contents will learn more about the CSS Page Properties features in Chapter 9, "Cascading Style Sheets." • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training HTML/XHTML Page Properties ByGaro Green, Lynda Weinman Category Property Publisher: Peachpit Title Press General Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Encoding Description The title of your page is what will appear in the title bar of the Web browser and when your page is bookmarked. This name can contain as many characters as you want, including special characters, such as %(#*!. Specifies the language for the characters and fonts used in the document. With Appearance its powerful combination Background of visual If you layout want tools, a background application image development for your features, and code editing support, Dreamweaver image MX 2004 Web page, is sure you to become would image the constant specify itcompanion here. of many Web developers. Here to get you hands-on A background with it fast image is the definitive can be any project-based GIF or JPEG training on the topic from one of the master teachers file.at If Linda.com the image training. is smallerUsing than athe combination Web of projectbased lessons, guided exercises, and browser QuickTime panel, tutorials, it will repeat veteran (tile). author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Background Sets the background color. The frames values can managing Web sites, and linking among pages. You'll learn about and forms, cascading be in hexadecimal format or by name,suggestions such style sheets, and Fireworks and Flash integration, and gobble up Garo's about best as red, white, and so on.coverage of all of Dreamweaver's layout and typography practices. You'll also find extensive newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Text Sets the default text color. It can be editing, and more. Throughout, Garo shows you not just how to do something but why you're overwritten for specific areas of text. doing it and the results of your actions. Links Sets the color for links. This option can be overwritten for specific links. Visited links A visited link color specifies how the link will appear after a visitor has clicked it. Active links The active link color specifies how the link will appear while someone clicks it. Left margin Sets the left margin value in pixels. This attribute is supported only in Internet Explorer 4.0 or later. Top margin Sets the top margin value in pixels. This attribute is supported only in Internet Explorer 4.0 or later. Margin width Sets the margin width value in pixels. This attribute is supported only in Netscape Navigator 4.0 or later. Tracing image Margin height Sets the margin height value in pixels. This attribute is supported only in Netscape Navigator 4.0 or later. Tracing image Tracing images are used as guides to set up the layout of your page.They can be any GIF, JPEG, or PNG file. • Table of Contents • Index • Examples Transparency Sets the transparency level of your tracing image. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Dreamw eaver MX 2004 Color Pickers From the Page Properties dialog box, Dreamweaver MX 2004 gives you access to five different color pickers, from which you can select the colors for your pages. Two of the color pickers, Color Cubes and Continuous Tone, are browser-safe, and they're arranged in a manner that makes it • of Contents easy to selectTable pleasing color combinations. To understand each function of the color picker drop• Index down menu, see the following chart. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Picker developers. Here to get you Color hands-on withOptions it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectOption Description based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Color preview GivesMX you04a basics: previewnavigating of the color that is interface, currently creating and through all the Dreamweaver the new or the color that the learn eye dropper is picking managing Web sites, andselected linking among pages. You'll about frames and forms, cascading up.and Flash integration, and gobble up Garo's suggestions about best style sheets, and Fireworks layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Hex value Displays the hexadecimal value of the current color newest features: dynamic cross-browser validation, improved CSS support, built-in graphics or the color that the eye dropper is picking up. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results ofRemoves your actions. Default color any colors you have selected. If you do not specify a color in the Page Properties, the user's browser will determine what colors are used for the different text options. System colors Opens the system color options for your computer–these options will vary between the Mac and Windows operating systems. Color options This drop-down menu lets you choose from five different color arrangements. The Color Cubes and Continuous Tone options contain only Websafe colors. The Windows and Mac options contain the system colors for the Windows and Mac operating systems. The Grayscale option contains grays ranging from black to white. Snap to Web Safe Automatically switches non-Web-safe colors to their nearest Web-safe values. 7 Creating Links with Images and Text The capability to link to pages and sites is what makes the Web dynamic. This exercise shows you how to set up links using the Dreamweaver MX 2004 Properties inspector. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and image QuickTime tutorials, veteran author Garo Green walks you 1. Select theabout.gif (about us) in the lower-left part of the screen. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Click the Browse for File icon, next to the Link option, in the Properties inspector. Note:If your Properties inspector panel is smaller than what is shown here, click the arrow in the lower-right corner to expand it. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 3. Browse to chap_04/aboutus/aboutus.html and click OK (Windows) or Choose (Mac). topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Congratulations, you have just created your first relative image link. Why is it relative? It is through all the Dreamweaver MX 04 basics: navigating the new interface, creating and relative simply because it linked to a document within this site, not to an external Web site . managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 4. Highlight the frames.gif (frames) image in the lower-left corner of the screen. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 5. Click the Browse for File icon next to the Link option in the Properties inspector. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Browse to chap_04/frames/frames.html. Click OK. This image is now linked to the frames.html page inside the frames folder. 7. Repeat this process for the remaining two navigation icons (locations/locations.html and contactus/contactus.html, respectively). You have just successfully added links to the images on this page! If you want to preview the links in a browser, pressF12and click any of the images.Note:If a browser does not launch when you press F12,refer to Chapter 2, "Interface," to learn how to specify a browser to preview your pages. Next, you will create some links using text. The process is almost identical, except you will be selecting text instead of images . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 8. Highlight the wordsabout us in the lower-left corner of the page. 9. Click the Browse for File icon in the Properties inspector. 10. Browse to chap_04/aboutus/aboutus.html. Click OK. With its powerful combination of visual layout tools, application development features, and code editing support, MXphrase 2004 isinsure become the constant companion many Web 11. Repeat thisDreamweaver process for each the to text navigation bar at the bottom ofofthe screen. developers. Here to get you hands-on with it fast is the definitive project-based training on the Be sure to link the text at the bottom of the page to the same page as the corresponding topic images. from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX you 04 basics: navigating the interface, creating and As you create the text links, will notice the color of new the text change. This happens managing Web sites, and linking among pages. You'll learn about frames and forms, cascading because you set the Links color option in the Page Properties to red,and Dreamweaver style MX sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 2004 is previewing that setting for you . layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 12. Highlight the word laeyeworks.com at the bottom of the page. 13. Typehttp://www.laeyeworks.com into the Link option in the Properties inspector and press Enter (Windows) or Return (Mac). Congratulations, you just created your first absolute link. It's an absolute link because it begins with an http header and includes the full address. 14. 15. 14. Save the file. You don't want to lose any of your work! 15. If you want to preview all of your links, press F12 to launch a browser and try them out. Note:Only the links you created on the index.html page will be working. You will learn some effective and fancy ways to work with linking in Chapter 5, "Linking." • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8 <meta> Tags One of the big challenges (aside from building a Web site) is letting the search engines know that your site exists. There are two steps to getting your site listed: the first is to list it with all the various search engines out there, and the other is to insert <meta> tags into your HTML so • Table of can Contents the search engines find you on their own and correctly index your site. Many search engines • Index send robots (also called spiders) out to search the Web for content. When you insert certain • <meta> tags Examples into your document, you make it much easier for the search-engine robots to Macromedia® Dreamweaver® MX 2004: Training understand how to categorize yourHands-On site. This exercise shows you how to enter <meta> tags with specific attributes, so you can make your Web page more search-engine friendly. By Garo Green , Lynda Weinman Peachpit Press 1.Publisher: SelectInsert > HTML > Head Tags > Keywords. This option opens a small window Pub Date: December 2003 in the keywords for a particular page. Keywords are words the reflect where you can22, enter ISBN: 0-321-20297-X the content of a particular page. Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking sunglasses, among pages.frames, You'll learn about frames and forms, Basically, cascading 2. Typeglasses, eyeglasses, los angeles, la, eyeworks. style you're sheets,listing and Fireworks and Flash integration, and gobble up Garo's suggestions about words that someone might use in a search engine to bring up your site. best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 3. Click OK. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it andInsert the results of your actions. 4. Select > HTML > Head Tags > Description. This option opens a small window where you can enter in the description for a particular page. The Description is used by many search engines to describe the contents of a particular page in their listings. 5. TypeCustom high-fashion eyeglasses and sunglasses collections by world renowned designers. 6. ClickOK. 6. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. Click the Code button to view the HTML in this document. See the <meta> information inside the <head> tag? Visitors to your site won't be able to see the <meta> tag information because it's only visible inside your HTML. It's a part of authoring the page that has nothing to do with appearance–and everything totools, do with helping the search engines find your site. With its powerful combination of visual layout application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 8. Save and close thisyou document. developers. Here to get hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Warning layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Keyword and Descriptions editing, and more. Throughout, Garo shows you not just how to do something but why you're doingKeywords it and theare results of your actions. <meta> tag values that specify certain words to help Internet search engines index your site. Many search engines limit the number of keywords you can use. Choose your words wisely and use no more than 10 to 15 keywords that best describe your site's contents. Descriptions are <meta> tag values that also help various search engines index your site. Some search engines will actually use in their directory the very descriptions you specify to describe your site. Again, some search engines limit the number of characters indexed, so keep it short and simple! If you would like more information about<meta> tags, check out these URLs: Web Developer: META Tag Resources http://webdeveloper.internet.com/html/html_metatag_res.html Search Engine Watchhttp://searchenginewatch.com/webmasters/meta.html Onward ho! You just built a page, colored it, set links, and added <meta>tags all in one chapter. Future chapters will reveal even more powers of Dreamweaver MX 2004, so keep on reading! Chapter 5. Linking Linking with Point to File • • • Table of Contents Linking to New Source Files Index Examples Email Links Macromedia® Dreamweaver® MX 2004: Hands-On Training Anchors ByGaroNamed Green, Lynda Weinman Image Maps Publisher: Peachpit Press Pub Date: December Linking to Files22, 2003 ISBN: 0-321-20297-X There Pages: are a720 few ways to create links that you haven't learned yet. In this chapter, you'll learn aboutPoint to File, which allows you to point to a file inside your Files panel and create the link based on your selection. Another type of link is an email link. This special type of link launches your end user's email program and automatically enters a recipient address. Another new type of link you'll learn about here is called named anchors, which works in conjunction with links to allow you to jump to different sections of one page. Image maps are also covered in this With its powerful combination of visual layout tools, application development features, and code chapter. Image maps are useful when you want a single image to contain multiple links. The editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web final type of link that this chapter demonstrates is a file link. File links let you link to files, such developers. Here to get you hands-on with it fast is the definitive project-based training on the as PDFs, SIT and ZIP archives, and so on. If this all sounds abstract, dive into the chapter so you topic from one of the master teachers at Linda.com training. Using a combination of projectcan get the hands-on experience that will make these new concepts understandable. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Linking with Point to File ThePoint to File feature is an alternate way to create links on your Web pages. This feature forces you to select files that are within your local root folder, which eliminates the unwanted possibility of linking to files located outside of your defined site. Here's how it's done. • Table of Contents • Index chap_05 folder from the H·O·T CD-ROM to your hard drive. Define your site for • 1. Copy the Examples Chapter 5 using the chap_05 folder as the local Macromedia® Dreamweaver® MX 2004: Hands-On Training root folder. If you need a refresher on this process, visit Exercise 1 in Chapter 3, "Site Control." ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Open index.html. This file is complete except that it does not contain any links. You will create them using the Point to File feature. For the next step, make sure the Files panel is open and visible. If it's not already open, chooseWindow > Files or pressF11to open it now. 3. Click the about.gif (about us) image so that it is highlighted. Before you can create a link, 3. you must first have the image or text selected. • Table of Contents • Index inspector, click and hold the Point to File icon next to the Link field. • 4. In the Properties Examples When you click on the and hold down the Macromedia® Dreamweaver® MXicon 2004: Hands-On Training mouse button, the Link field will fill in with some text, telling you to point to a file to create a link. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Move the cursor over the aboutus folder until it expands. Then move your cursor over the aboutus.html file so that it is highlighted, and release the mouse button. This will create a link to the aboutus.html file inside the aboutus folder. The Link field will display the file to which you are linking. This is a good place to look if you forget what file you linked to. The great thing about using this technique is that there's no possible way to accidentally set the link to a misspelled or missing file name . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 6. Click the Code button in the Document toolbar to view all of the code for the index.html page. Some of the code will already be highlighted because the about.gif image was With its powerful combination of visual application development features,objects and code selected in the Design view of thelayout page. tools, This automatic highlighting of selected is editing support, Dreamweaver MX 2004 is sure to become the constant companion of many one of my favorite features in Dreamweaver MX 2004 and will come in handy more andWeb developers. Here get you hands-on more as youto design future pages.with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among You'll learn and forms, The code in this screen shot waspages. inserted into theabout pageframes automatically bycascading style Dreamweaver sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best MX 2004 when you created a link to the aboutus.html page inside layoutthe and typography practices. You'll also find extensive coverage of all of Dreamweaver's aboutus folder. It's nice to know that you don't have to type all of this in (and newest features:each dynamic cross-browser improved CSS support, built-in graphics correctly) time you want tovalidation, add something as simple as a link to your page . editing, and more. Throughout, Garo shows you not just how to do something but why you're doingIfit you and are the results your actions. I strongly urge you to get into the habit of new toofHTML/XHTML, flipping back and forth between Code view and Design view so you increase your exposure to the raw code behind the visual design of your page. Doing this will let you instantly see the new code that Dreamweaver MX 2004 has inserted as you perform various functions in the Design view. Being comfortable looking at and editing code is essential to every Web designer's success because there will almost always come a time when you need to make a tweak here and a pinch there in your code. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. Click the Design button in the Document toolbar to return to the Design view of the index.html page. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, Fireworks(frames) and Flashimage integration, up Garo's suggestions about best 8. Click theand frames.gif so thatand it is gobble highlighted. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest dynamic cross-browser validation, improved built-in graphics 9. In features: the Properties inspector, click and hold the Point toCSS Filesupport, icon again. When you click editing, and more. Throughout, Garo shows you not just how to do something but why and hold down the mouse button, the Link field will fill in with the text Drag to a you're file to doingmake it andathe results of your actions. link. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination visual layout application features, and code 10. its Move your cursor over theofframes folder tools, and hold it there development until the folder expands. Then editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web move your cursor over the frames.html file so that it is highlighted, and release the mouse developers. Here to get you hands-on with it fast is the definitive project-based training on the button. This will create a link to frames.html inside the frames folder. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, exercises, and QuickTime tutorials, veteran author Garo Green walks 11. Using the guided Point to File icon, create a link for the locations.gif (locations) image to you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and locations/locations.html and for the contact.gif (contact) image to managing Web sites, and linking among pages. You'll learn about frames and forms, cascading contactus/contactus.html. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout andF12 typography practices. You'll find extensive of all you of Dreamweaver's 12. Press to preview the page in a also browser. Click any coverage of the images linked to see if newest features: dynamic cross-browser validation, improved CSS support, they work. When you are finished, return to Dreamweaver MX 2004. built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results you've of yourmade, actions. 13. Save the changes and close this file. You won't need it anymore. 2 Linking to New Source Files In the last exercise, you learned how to use the Point to File feature to create links on your pages. Although this is the most common use of this feature, you can also use it in other ways. You can use the Point to File feature to quickly replace images or placeholders on your page. In • this context, Table PointoftoContents File is an alternate method to using the Image object on the Insert panel, • Index which you learned about in Chapter 4, "Basics." Sometimes there is more than one way to do the • same thing inExamples Dreamweaver MX 2004. You'll find that you will develop your own preferences for Macromedia® Dreamweaver® MX gain 2004:experience Hands-On Training which method to use as you in the program. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open newsource.html. This XHTML file contains a layout made with tables and several image placeholders. Note What Is a Placeholder? A placeholder is an object that you can add to your page to represent where final content will be inserted. You can add a placeholder by clicking the Image Placeholder button in the Insert panel or by holding down the Ctrl (Windows) or Option (Mac) key while clicking the Insert Image object in the Insert Bar. Then, you can resize the placeholder by selecting it first and then changing its height and width values in the Properties inspector. Placeholders are helpful in a workgroup where one person designs the page and another adds the content. You can resize the placeholder so that it matches the dimensions of the image that will replace it. This resizing will give you a more accurate preview of your page layout and positioning. You can quickly change the placeholder size by using the Width and Height options in the Properties inspector. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 2. Click the image placeholder in the upper-left corner of the page to highlight it. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. In the Properties inspector, click the Point to File icon next to the Src option and drag it over the Files panel. Hold your cursor over the eyeglasses folder inside the frames folder. This will expand the eyeglasses folder so you can select one of the images inside. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 4. Move your e01.gif image and the mouse button, which will on select developers. Herecursor to getover you the hands-on with it fast is release the definitive project-based training the that image to replace the placeholder currently on your page. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading the placeholder has been replaced with up theGaro's selected image . about best style Notice sheets, that and Fireworks and Flash integration, and gobble suggestions layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 5. Click toHere select placeholder the image you just replaced. developers. to the get image you hands-on withto it the fast right is theofdefinitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. In the Properties inspector, click the Point to File icon next to the Src option and drag it over e02.gif and release the mouse button. This will select that image to replace the placeholder currently on your page. Notice that the second placeholder has now been replaced with the new image . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing 7. Replace Web the sites, image andplaceholder linking among in the pages. upper-right You'll learn corner about withframes the e03.gif and forms, file, using cascading the style Point sheets,toand File Fireworks feature (using and Flash the preceding integration, image and gobble as a guideline). up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. 7. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 8. Click toHere select placeholder corner project-based of the page. training on the developers. to the get image you hands-on within it the fastlower-left is the definitive topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. Using the Point to File feature, replace this placeholder with the s01.gif file located inside thesunglasses folder. Replace the remaining two placeholders with the s02.gif and s03.gif files. When you are finished, your page should look like the one shown here. 10. 10. Save your work. You can close this file, because you won't need it for any other exercises in this book. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3 Creating Email Links Anemail link will launch your end user's email application and insert the recipient's address into theTo: field. This is convenient and doesn't require the end user to remember complex and lengthy email addresses. This exercise shows you how to create an email link. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, built-in 1. Open email.html. This file contains a table withimproved some textCSS andsupport, spaces for somegraphics email links. editing, and more. Throughout, Garo shows you not just how to do something but why you're You will create those links in this exercise. doing it and the results of your actions. 2. 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click inside the cell to the left of theGeneral Information cell. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through 3. In the all the Common Dreamweaver group ofMX the04 Insert basics: bar, navigating click the the Email newLink interface, icon. This creating will open and the managing EmailWeb Link sites, dialog and box. linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. In the Text field, type General Information and press Tab. In the E-Mail field, type info@website.com. Click OK. Of course, instead of entering info@website.com on your own site, you would enter the address you want it linked to. That simple. 5. Click anywhere on the email link you just inserted on the page. In the Properties inspector, notice that the Link field reads mailto:info@website.com. This is the correct format for creating email links. Note Text versus Email TheText field determines what text will be displayed on the page, whereas the EMail field sets the actual email address for the recipient. Sometimes, you might want to put the email address in both fields, to allow someone to copy and paste the actual email link into another document or email application. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 6. In the Document click the Code button view theproject-based code for this page. Theon the developers. Here to get toolbar, you hands-on with it fast is thetodefinitive training highlighted code shown here was added when you chose to insert an email link. Notice topic from one of the master teachers at Linda.com training. Using a combination of project-the an email and link QuickTime and other links you created the previous chapter. They basedsimilarity lessons, between guided exercises, tutorials, veteranin author Garo Green walks you both start and end with the anchor tag <a> and they both use the href attribute. Click the through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Design button to return to the Design view of this page. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. Click inside the cell to the left of theOrder / Sales Information cell. 8. In the Common group of the Insert bar, click Email Link. 8. • Table of Contents • 9. Enter Text: Index orders@website.com and press Tab. Enter E-Mail: orders@laeyeworks.com. Because Dreamweaver will automatically insert any email Examples will automatically appear in the E-Mail field in the Properties inspector. Click OK. This will insert an email link into ByGaro Green, Lynda Weinman the empty cell. • addressDreamweaver® that you used the Hands-On previous Training steps, info@website.com Macromedia® MXin 2004: Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X You have just created an email link that displays the email address on the page . Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. An alternate way to create an email link is to avoid the Email Link object and do it manually. To do this, first click inside the cell to the left of the Comments / Suggestions cell. 11. Typecomments@website.com inside the empty cell. 12. Click and drag over comments@websitecom to highlight the text. 13. 13. In the Properties inspector, type mailto:comments@laeyeworks.com in the Link field and press Enter (Windows) or Return (Mac). This will create an email link from the selected text. • • • You see, once again there are two ways to do the same operation. You learned how to create the email link using the Email Link object and how to manually insert an email link. As your skills build in Dreamweaver MX 2004, you will develop your own personal preferences for creating email links, just as you will develop your own preferences for Table of Contents assigning links. Index Examples 14. PressF12 to preview this page in your default browser. You can click each of the email links to make sure they work. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 15. When you are finished, return to Dreamweaver MX 2004 so you can save and close this file. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Warning Browser Email Settings all site visitors use a browser theirtools, email; they sometimes use other programs, With Not its powerful combination of visualfor layout application development features, and code such as Eudora, Entourage, and so on. If visitors to your click an email linkofand do Web editing support, Dreamweaver MX 2004 is sure to become thesite constant companion many not have their preferences inittheir they will get an errortraining message developers. Here toemail get you hands-on set with fast browsers, is the definitive project-based on the them to do so. This is trueat forLinda.com both Internet Explorer and Netscape Navigator. topicasking from one of the master teachers training. Using a combination of projectThere's notguided a lot you can do and about this, and tutorials, it's a good reasonauthor to include based lessons, exercises, QuickTime veteran Garoemail Green walks you addresses in your email links–as was shown in Stepthe 9 of theinterface, precedingcreating exercise–so through all the Dreamweaver MX 04 basics: navigating new and users Web havesites, the option of cutting andpages. pastingYou'll the addresses into their and email programs. managing and linking among learn about frames forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Named Anchors Named anchors are a type of link. They are used infrequently, but when they're appropriate, there's no other link quite like them. The time to use them is when you want to link to sections within a long page of content. Named anchors have two components–the anchor and the link. • Table ofthey Contents Working together, make it easy to jump to specific areas of your page. This exercise shows • Index you how to set up anchors on your page. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open anchors.html. This file has a table with some images and text that extend down the page. Scroll down to the bottom of the page so you get a better idea of exactly how long this page really is. As you can imagine, scrolling down a lengthy page can get annoying. To help ease this annoyance, anchors (or named anchors) can make it possible to move to a specific location on a page in a single click. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click above the words Name: Warp. You will learn next how to insert a named anchor here, so users can easily jump to the photo and description of this pair of eyeglasses. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 3. Click AnchorMX icon the Common group theinterface, Insert bar. This will through allthe theNamed Dreamweaver 04in basics: navigating the of new creating andopen the Named Anchor dialog box.among pages. You'll learn about frames and forms, cascading managing Web sites, and linking style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Typewarp and then click OK. Notice the small yellow anchor marker that appears on your page where you inserted the named anchor tag? If you ever want to change the name you've set for your named anchor, click this anchor marker to access its name in the Properties inspector in order to modify it. N o one but you will ever see this yellow icon; it's there for your benefit as you're creating these types of links. When you preview the page in the browser, this icon will not be visible .Note:If your named anchor is selected, it will be blue and not yellow . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Click above the words Name: Bean. You will insert another named anchor here, so users can easily jump to the photo and description of this pair of eyeglasses. 5. • Table of Contents > Named Anchor. This will open theNamed Anchor dialog box. Type • 6. ChooseInsert Index • bean and then clickOK. If you prefer, you can use the Named Anchor button in the Examples Insert Dreamweaver® panel insteadMX of 2004: usingHands-On the Insert menu. Macromedia® Training ByGaro Green, Lynda Weinman 7. Click above the words Name: Zody (mint jelly) and choose Insert > Named Anchor. This will open the Named Anchor dialog box. Type zodymint and then click OK. Publisher: Peachpit Press Pub Date: December 22, 2003 Note: cannot insert spaces in your named anchors, so don't even try it. ;-) ISBN: You 0-321-20297-X 8. Click above the words Name: Zody (pink dew) and choose Insert > Named Anchor. Pages: 720 This will open the Named Anchor dialog box. Type zodypink and then click OK. 9. Click above the words Name: Pillow and choose Insert > Named Anchor. This will open theNamed Anchor dialog box. Type pillow and then click OK. With powerful combination of visual layout tools, application development features, and code 10. its Click above the words Name: Toot and choose Insert > Named Anchor. This will open editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web theNamed Anchor dialog box. Type toot and then click OK. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic Because from oneyou of the at Linda.com training. Using aI thought combination of projectaremaster going toteachers be inserting several named anchors, you would like to basedknow lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green that the keyboard shortcut for inserting named anchors is Option+Cmd+Awalks (Mac) you or through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Ctrl+Alt+A (Windows). ;-) managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, gobble best 11. Click and drag to highlight the word warp in and the nav barup at Garo's the topsuggestions of the page.about Now that layoutyou and typography practices. You'll also find extensive coverage of all of Dreamweaver's have set up all of your named anchors, you need to create links to each of them. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Movie anchor.mov To learn more about using named anchors, check out anchor.mov located in the movies folder on the Dreamweaver MX 2004 H·O·T CD-ROM. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 12. In the Properties using Point to File icon, click and drag to the anchor developers. Here to get inspector, you hands-on withthe it fast is the definitive project-based training on the marker above the text Name: Warp. Release the mouse button to create the topic from one of the master teachers at Linda.com training. Using a combination oflink. projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Note:Links to anchor points always begin with a pound sign (#) . managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 13. Click and drag to highlight the word bean at the top of the page. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 14. 13. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 14. In the Properties using Point to File icon, click and drag to the anchor developers. Here to get inspector, you hands-on withthe it fast is the definitive project-based training on the marker above the text Name: Bean. Release the mouse button to create the link. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 15. Click to highlight at the top of the page. and through alland the drag Dreamweaver MXthe 04 words basics:zody/mint navigating jelly the new interface, creating managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 16. In the Properties inspector, using the Point to File icon, click and drag to the anchor 17. 16. marker above the text Name: Zody. Release the mouse button to create the link. 17. Using this same process, go ahead and finish the other links at the top of the page. 18. PressF12 to preview your page in a browser. Click each of the links at the top to see how the named anchors work. • • • As you can see, this is a nice way to jump to different sections within a single page. But Table of Contents wouldn't it also be nice if you had links to a named anchor that would take you back to the Index top of the page from anywhere else on the page? You will learn to create that feature in the Examples next few steps. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're 19. Return to Dreamweaver MX 2004 and click just to the left of the word Click at the top of doing it and the results of your actions. the page. 20. ChooseInsert > Named Anchor. This will open the Named Anchor dialog box. Type top for the name and click OK. This will insert an anchor marker at the top of your page. 21. Highlight the words top of page under the description of the Warp eyeglasses. 21. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 22. In the Properties using Point to File option, click and drag to the on anchor developers. Here to get inspector, you hands-on withthe it fast is the definitive project-based training the marker next to the word Click at the top of the page. Release the mouse button. This will topic from one of the master teachers at Linda.com training. Using a combination of projecta link to the top anchor basedcreate lessons, guided exercises, andmarker. QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 23. Repeat thissites, process eachamong block of text that reads top of page. This create a link to managing Web andfor linking pages. You'll learn about frames andwill forms, cascading the top anchor marker, so users have a quick and easy way to get back to the top of style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions aboutyour best If youpractices. find it difficult usefind the extensive Point to File method, you simply type layoutpage. and Note: typography You'lltoalso coverage of all of can Dreamweaver's #top in the dynamic Link fieldcross-browser of the Properties inspector. There is no right or wronggraphics way to do newest features: validation, improved CSS support, built-in this; it's a matter of personal preference. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 24. PressF12 to preview your page in a browser. Click the toot link. This will take you to the bottom of the page. Next, click the top of page link. This will take you back up to the top. Pretty slick! 25. Return to Dreamweaver. Save and close all the work you've done in this file. 5 Image Maps An image map contains invisible coordinates that allow you to assign multiple links to a single image. With image maps, you can specify multiple regions of a single image and have each of those areas link to a different URL. This exercise shows you how to create an image map. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows just how to doimage something why you're 1. Open chap_05/imagemaps.html. Thisyou filenot contains a single insidebut a simple table. doingIn it the andfollowing the results of your actions. steps, you will create an image map so that this single image can link to multiple pages. 2. Click the image so that it is selected. With an image selected, the Properties inspector changes to reflect options for images, which include the image map settings. 3. 3. In the Map field, type navbar. By doing this, you are assigning a name to the image map, which is required and becomes even more important if you have multiple image maps on a • Table of Contents single page. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages:the 720 Rectangular Hotspot tool. Click and drag a rectangle around the wordframes. 4. Click By doing this, you are defining what area of the image you want to serve as a link. When you release the mouse button, you will notice a light blue box around the image, and the options in your Properties inspector will have changed. With its powerful combination of visual layout tools, application development features, and code Note:The # mark in the Link field is used as a temporary link for the real link. If you don't editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web remove this or add your own link, the users will still see the link icon–the little hand–when developers. Here to get you hands-on with it fast is the definitive project-based training on the they move their cursors over the image map. It won't link to anything, though! It's just a topic from one of the master teachers at Linda.com training. Using a combination of projectstand-in for the real thing. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 5. With the light blue rectangle selected, use the Point to File icon to choose the through all the Dreamweaver MX 04 basics: navigating the new interface, creating and frames/frames.html file. This will create a link for this specific area of the image map. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. With that image map still selected, type see the frames in the Alt field in the Properties inspector and press Enter (Windows) or Return (Mac). In some browsers, this will display a small help tag when the user hovers over the hot area of the image map. And more importantly, the information contained in the alt tag can help make your Web pages more accessible for people with visual handicaps. You will learn more about that in Chapter 18, "Accessibility." • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 7. Click the Rectangular Hotspot tool drag a project-based rectangle around the word developers. Here to get you hands-on withagain. it fast Click is theand definitive training on the locations. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 8. With blue rectangle selected, the Point Fileinterface, icon to choose theand locations/ through allthe thelight Dreamweaver MX 04 basics:use navigating thetonew creating locations.html file. This will create a link for this specific area of the image map. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 9. Press to preview the links in a also browser. Like othercoverage links, they be previewed layout andF12 typography practices. You'll find extensive of cannot all of Dreamweaver's from within Dreamweaver; they must be viewed through a browser. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're 10. When finished, return to Dreamweaver. Save and close this file. doing it andyou theare results of your actions. Tip Help Tags Have you ever held your mouse over an image map only to discover that a little tag pops up with some text inside it? This type of effect can be easily created by using the alt attribute of the href tag being displayed. If you want to add an alt tag to your image map, simply give each link a message inside the alt field of the Properties inspector, as shown in Step 6. However, help tags do not work in all browsers. :-( 6 Linking to Files In addition to creating links to HTML pages, there might come a time when you want or need to link to a file. For example, maybe you have a PDF brochure for users to download, or you want to let them download an entire folder of stuffed or zipped images. The possibilities are endless. • Table Contents The good news is of that linking to files is just as easy as linking to other HTML pages. This exercise • Index shows you how. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open the files.html file from the chap_05 folder. This page contains a table with information about some of the eyeglasses that are available at laEyeworks. You are going to create a link that will let the end user view this same content in PDF (Portable DocumentFormat),which is great for printing. 2. At the top of the page, click and drag to select the words PDF. Like with other text links, you need to select your text before creating the link. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 3. With the texttoselected, click thePoint Fileisicon the Properties inspector andon drag developers. Here get you hands-on with to it fast the in definitive project-based training the to select eyeglasses.pdf inside the Files panel. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 4. Press preview thisMX page a browser. Click the you created. Because the through allF12 the to Dreamweaver 04 in basics: navigating the PDF new link interface, creating and file you linked to is a PDF file, the browser will automatically launch the Adobe Reader managing Web sites, and linking among pages. You'll learn about frames and forms, cascading browser. style plug-in sheets, for andyour Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're on a linkofthat to a PDF file will automatically launch the Adobe doingClicking it and the results yourpoints actions. Reader plug-in if it's installed in your browser. If it's not installed and you get an error when you click on the link, you'll need to go to the Adobe site to download Reader. The Adobe Reader plug-in is a free download and is available at http://www.adobe.com/products/acrobat/readstep2.html .You should also consider adding a link to the Adobe PDF download area to your page so users can download the plug-in if they don't already have it installed . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Tip newest features: dynamic cross-browser validation, improved CSS support, built-in graphics How Do You Create PDF editing, and more. Throughout, GaroFiles? shows you not just how to do something but why you're doing it and the results of your actions. In this exercise, you learned how to create a link to a PDF file and then view that link in a browser, but you did not learn how to create the PDF file I supplied for you. Creating PDF files is now a pretty easy process; you just need the right software. If you think you'll create PDF files often, you might want to purchase the full version of Adobe Acrobat. This is a PDF authoring tool sold by Adobe; it gives you the ability to create PDF files from almost any application. Alternately, you can now create PDF files online for free at Adobe's Web site at http://createpdf.adobe.com. Pretty neat. You might also be interested to know that we offer another Hands-On Training book on Acrobat 6. Check it out at http://www.lynda.com/books/ac6hot. In the following steps, you will learn how to create a link to a file of compressed images. Using a compressed file format lets you transfer large amounts of data, such as images, with a smaller file size. I have created two files–one for Mac users and one for PC users. Why? Because each operating system uses different file formats to compress files. The most common format on the Mac is the SIT (StuffIt) format; the most common format on Windows is the ZIP format. 5. At the top of the page, click and drag to select the words Mac Users. 5. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 6. Using one ofto the linking methods with you learned create project-based a link to the images.sit developers. Here get you hands-on it fast isearlier, the definitive training onfile the located inside the chap_05 folder. This file was compressed in the SIT format topic from one of the master teachers at Linda.com training. Using a combination of specifically projectMac users. basedfor lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 7. At theWeb top sites, of theand page, click among and drag to select the words Windows managing linking pages. You'll learn about frames Users. and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 8. Again, using one of the linking methods youextensive learned earlier, create link to the files.zip layout and typography practices. You'll also find coverage of alla of Dreamweaver's file located inside the chap_05 folder. This file was compressed in the ZIP format newest features: dynamic cross-browser validation, improved CSS support, built-in graphics specifically for PC users. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Tip How Do You Create SIT and ZIP Files? When you have a large file or a collection of files that you want to let people download, it's a good idea to compress those files so the download goes as quickly as possible. There are different file formats on the Mac and PC for compressing files: SIT and ZIP. The SIT (StuffIt) format is the most common on the Mac; the ZIP format is the most common on the PC. Several programs let you create these formats. For example, on the Mac you can use StuffIt (http://www.aladdinsys.com) to create SIT files, or MacZip (http://www.sitec.net/maczip/) to create ZIP files. On the PC, you can use WinZip (http://www.winzip.com) to create ZIP files. 9. PressF12 to preview your page in a browser: Mac Users: Click on the Mac Users link; your browser will automatically download and save the file to your Desktop. In order to open this file, you will need a program capable of opening SIT files, such as StuffIt Expander. Windows Users: Click on the Windows Users link; you will be prompted to save this file someplace on your hard drive. Save the file on your Desktop. In order to open this file, you will need a program capable of opening ZIP files, such as WinZip. 10. Save and close the files.html file; you won't be working with it any longer. • Table of Contents Phew, another chapter under your belt. Congratulations! When you are ready, you can move on • Index to the next chapter. ;-) • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 6. Typography Adding and Formatting HTML Text • • • Table of Contents Font Lists Index AligningExamples Text Macromedia® Dreamweaver® MX 2004: Hands-On Training Unordered, ByGaroOrdered, Green, Lynda Weinman and Definition Lists Color Schemes Publisher: Peachpit Press Pub Date: December 22, 2003 Formatting Table Text ISBN: 0-321-20297-X Flash Pages: Text 720 In the past few years, there has been a tremendous push to separate the structure on a Web page from its presentation. Part of this separation movement has caused the element to become deprecated in favor of using CSS (CascadingStyleSheets) in its place. I am a staunch supporter of this approach because CSS offers a more precise and flexible alternative to the With its element. powerful So combination of there visualalayout tools, application features, and code why then is chapter in this book thatdevelopment is largely about the editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web element? Because the element is still supported by modern (version 6 and 7) browsers developers. Here to get you hands-on with it fast is the definitive project-based training on the and used by many Web designers. In addition, there may come a time when you need to work topic from oneWeb of the teachers at Linda.com training. Using away combination of projectwith an older sitemaster that used this previous and widely accepted for formatting text on a based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green you page. Because of this, you should know what the element looks like and how itwalks can be through all the Dreamweaver MX 04 basics: navigating the new interface, creating and used to control type on a Web page. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style and Fireworks Flash integration, gobble up Garo's suggestions about Manysheets, (but certainly not all!)and of the exercises in thisand chapter show you how to work with thebest layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's element, a workflow that I really don't advocate unless you are working with a target newest features: validation, improved CSS support, built-in graphics audience using a dynamic version 3cross-browser or earlier browser that can't support CSS. However, for the reasons editing, and more. Throughout, Garo shows you not just how to do something but why already outlined, this chapter covers how to set font styles (such as bold, italics, and you're doing it and the of your actions. underlined), fontresults sizes, font colors, and font faces (such as Times Roman, Helvetica, Arial, and so on). It also covers making bulleted lists, definition lists, and unordered lists. If you haven't heard those terms before, they will also be explained here. Also, there is a great feature in Dreamweaver MX 2004: the capability to add Flash Text. This feature allows you to use any font or style you want without worrying about how it will appear on other platforms. CSS versus XHTML Text Formatting The first part of this chapter describes how to use font formatting in Dreamweaver MX 2004 that utilizes (behind the scenes) HTML called the element. The World Wide Web Consortium (http://www.w3.org) has eliminated the element from the formal HTML specification, • Table of but it is still used onContents many new and old Web sites. I strongly advocate that you use CSS for all • Index sites that are targeting version 4 or later browsers. You will learn how to use CSS in Chapter 9, • Examples "Cascading Style Sheets," instead of the element as you begin to code your real site. This Macromedia® Dreamweaver® 2004: Hands-On Training chapter is an intermediateMX step toward building better type skills. Some of the information you learn be Weinman very similar to what you will learn in the CSS chapter. I could have eliminated By Garohere Greenwill , Lynda this chapter altogether, but chose not to so you could see both ways of formatting text. And you are likely to see the element as you revise and work with older Web sites. Because the Publisher: Peachpit Press element is not part of XHTML, there is a strong chance that future browsers will not Pub Date: December 22, 2003 support it. Today, browsers do support this element, but there is wide speculation that someday ISBN: 0-321-20297-X they will not. In addition, there are numerous advantages to using CSS formatting instead of Pages: 720 HTML formatting; you will learn all about those later in the CSS chapter. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Valid XHTML Type Elements With all the hubbub surrounding the use or misuse of the element combined with all kinds of conflicting information on the Web, I figured it would be a good idea to give you a listing of some of the more common and "valid" XHTML 1.0 elements that relate to Web • of Contents typography. Table The purpose of this list is to identify the "valid" XHTML elements in XHTML 1.0, not • Index to list all of the elements that will work in modern and older browsers. As you read through the • Examples list, notice that none of the elements listed affect the appearance of the text. Instead, they are Macromedia® Dreamweaver® MX 2004: Hands-On used to identify the structure of the text on Training the page. By using only these valid XHTML elements, you will ensure that your pages are XHTML compliant and that you truly separate the structure By Garo Green , Lynda Weinman of your page from its presentation. You will learn how to use CSS later to add the proper formatting to your pages. Publisher: Peachpit Press December 22, will 2003use only these elements as you construct new Web pages that are It's Pub myDate: hope that you ISBN: designed for0-321-20297-X modern Web browsers. Will your Web pages crash and burn if you don't? No most Pages:but 720 someday they just might, so why not learn how to do it the right way from the likely not, beginning? ;-) XHTML 1.0 With its powerful combination of visual layout tools, application development features, and code Element Description editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you with fast is the definitive project-based training on the Thehands-on paragraph is aitblock-level element and is used topic from one of the master teachers at Linda.com training. Using a combination of projectto define paragraphs on a Web page. You will get to based lessons, guided exercises, and QuickTime tutorials, author work with the paragraph elementveteran in Exercise 1 ofGaro Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and this chapter. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading <h1>sheets, through <h6> Theand heading are used to define levels of style and Fireworks Flash tags integration, and gobblevarious up Garo's suggestions about best importance on a page and have a range from 1 to 6, layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 1 being thevalidation, most important. YouCSS will learn newest features: dynamicwith cross-browser improved support, built-in graphics more about heading elements in the "What Are editing, and more. Throughout, Garo shows you not just how to do something but why you're Headings?" sidebar later in this chapter. doing it and the results of your actions. <ul> Unordered lists are used to create lists with bullets (or other characters). You will get to work with them in Exercise 4. <ol> Ordered lists are used to create lists with numbers (or other characters) that follow an ascending order. You will get to work with them in Exercise 4. <li> List Items are used to define items within ordered and unordered lists. <dl> Definition lists are used to identify a list of words that are being defined, much like you would find in an ordinary dictionary. <dt> The definition term element is used to identify a word that is going to be defined on a page. This is similar to looking up a specific word in dictionary. <dd> The define definition element is used to identify text that is being used to define the word within the definition term element. This would be similar to identifying the definition in a dictionary. <hr> The horizontal rule element is used to add a horizontal line on a page. <pre> The preformatted element is used to add text to page that can be formatted like normal text in word processor. Text within this tag can contain as many spaces as desired and is typically formatted using a monospace font, such as Courier. • Table of Contents • Index • Examples The strong element is used to bold text on a page. Although this sounds like it's affecting presentation, Macromedia® Dreamweaver®it's MX really 2004: Hands-On Training identifying text that will be read with more emphasis by screen reader programs for the sightByGaro Green, Lynda Weinman impaired. Publisher: Peachpit Press The emphasis element is used to italicize text on a Similar to the strong element, this has an impact on how certain text is read out loud by screen reader programs for the sight-impaired. Pub Date: December 22, 2003 page. ISBN: 0-321-20297-X Pages: 720 Please remember that this list is not complete and represents only the valid XHTML 1.0 elements that I think you will encounter most often. For a complete listing of all valid XHTML 1.0 elements, please visit the following links: With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from 1.0 one of master teachers at Linda.com training. Using a combination of projectXHTML – the Transitional based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's W3 Schools newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. http://www.w3schools.com/xhtml/xhtml_reference.asp XHTML 1.0 – Frameset http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd XHTML 1.0 – Strict http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd Default CSS Formatting I mentioned earlier that CSS is the preferred way of formatting text in modern Web pages. When I say "modern" Web pages, I am referring to those Web pages that are targeting browsers that offer good support for CSS. The support for CSS has increased so much in newer browsers that • Contents you would beTable sillyofnot to consider using it. CSS has become so widely accepted by Web • Index designers and developers that Dreamweaver MX 2004 is set to control the page properties and • Examples text formatting with CSS, by default. Although I strongly urge you to use CSS for formatting Macromedia® MX is 2004: Hands-On Training your pages, Dreamweaver® I do think there tremendous value in learning about the element and its associated especially if you are working on pages that were created a long time ago By Garo Greenattributes, , Lynda Weinman when CSS was less frequently used. You can also apply some of what you learn in this chapter to CSS. Publisher: Peachpit Press Pub want Date: December 22, 2003 If you to use HTML to format your text, you must disable one of the options in the ISBN: 0-321-20297-X Preferences of the program. Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Complete the following steps to disable the default CSS formatting preference: 1. ChooseEdit > Preferences. 2. In the General category, remove the check from the Use CSS instead of HTML tags check box. 3. ClickOK. Note:You must disable this feature before you start formatting text on your page, otherwise you will have to manually remove the CSS code and then add the HTML formatting tags. What a pain that would be. ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Adding and Formatting HTML Text In this exercise, you will learn how to add HTML text to a Web page using a number of different approaches. In the following exercise, you learn how to format this text by modifying the typeface, size, style, and other attributes. As you will see, creating and formatting HTML text • Table of MX Contents with Dreamweaver 2004 is just as easy as working with any word processing application. • Index • Examples 1. Copy the chap_06 folder from the H·O·T CD-ROM Macromedia® Dreamweaver® MX 2004: Hands-On Training to your hard drive. Define your site for Chapter 6 using the chap_06 folder as the local root folder. If you need a refresher on this ByGaro Green, Lynda Weinman process, visit Chapter 3, "Site Control." Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Open the index.html file. This is a version of the home page of the lynda.com/laeyeworks.com Web site used in this book, but it doesn't have text navigation. You are going to add this next. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 3. Open the Page Properties by choosing Modify > Page Properties. Notice that I have already set the text color properties for the text on this page; it has been set to white. This is an important issue to point out because as you add text and create links on this page, they will take on the color settings specified in this dialog box. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 4. Click Web to thesites, rightand of the contact image andYou'll presslearn Enterabout (Windows) Return This managing linking among pages. framesor and forms,(Mac). cascading insert a paragraph element and create extraup line of space between about the text style will sheets, and Fireworks break and Flash integration, andan gobble Garo's suggestions best image above. layoutand andthe typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Note The Paragraph Element Each time you press Enter (Windows) or Return (Mac), you are inserting a paragraph element into your code. Visually, this will cause a blank line's worth of space below the paragraph element. From a code perspective, everything within the paragraph element will be surrounded by an opening paragraph element and a close paragraph element until another paragraph element is inserted. Everything within the paragraph element is treated as one object, which means you can format all of the objects inside a paragraph element by simply clicking anywhere between the opening and closing elements. 5. 5. Typehome | about us | frames | locations | contact and press Shift+Enter (Windows) or Shift+Return (Mac). Remember, you create the pipe (|) character by pressing Shift+backslash. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 6.Publisher: Typebe surePress to visit the real laeyeworks.com web site! Peachpit Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 7. Click and drag to select both lines of text. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. In the Properties inspector, choose the Font pop-up menu and select the Verdana, Arial, Helvetica, sans-serif option. This will changeyour text to Verdana if you have that font installed; if you do not, Dreamweaver MX 2004 will display the next font in the list. 9. With the two lines of text still selected, select 2 from the Size pop-up menu. This will change the size of your type. Note HTML Default Text Size • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. To change HTML text to a size other than the default of 3, you can either specify a number from 1 through 7, or + or –1 through + or –7 relative to the BASEFONT size (which is 3). For example, if you want your HTML text to be size 6, specify the font size to be 6 or +3. Either setting produces an HTML type of size 6. Some browsers let you set the BASEFONT for a page by using <BASEFONT_size = "4">. You can specify any size you want, using one of the above-mentioned methods. The illustration above shows an example of the FONT SIZE settings in Dreamweaver MX 2004. The top example, None, is the equivalent of FONT SIZE 3. Noticehow the type does not look different in FONT SIZE +4 through +7, or FONT SIZE –2 through –7? There is no difference between these settings. 10. Go to the Size pop-up menu again and select –1. Notice how the type size stays at 2. That's because all HTML text has a BASEFONT size of 3, from which you add or subtract to make your type larger or smaller. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 11. In the Document toolbar, click theCode button to display the code of the page. Since the two lines of text should still be selected, that's what should be highlighted on the screen. You can easily see the element with the face and size attributes that were added to format this text. Click the Design button to return to the Design view of this page. With its powerful combination of visual layout tools, application development features, and code You might have noticed the <div align="center"> element at the beginning line Web of editing support, Dreamweaver MX 2004 is sure to become the constant companionofofthe many code. You will learn more about the <div> element in Chapter 9, "Cascading Style Sheets." developers. Here to get you hands-on with it fast is the definitive project-based training on the now, need toteachers know is that it was used to define what elements were be topic For from one all of you the master at Linda.com training. Using a combination of to projectcentered on the page. In this example, the starting <div> element starts before the text you based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks navigation, and the ending </div> element is at the end of the text navigation because this through all the Dreamweaver MX 04 basics: navigating the new interface, creating and text was centered using the Align Center button. Don't worry about this right now; you will managing Web sites, and linking among pages. You'll learn about frames and forms, cascading learn much more about the <div> element in Chapter 9, "Cascading Style Sheets." style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Note Deprecated versus Depreciated There is an important vocabulary lesson that I want each of you to go through so you don't make a very common mistake. I hear way too many people use the term "depreciated" instead of "deprecated" when referring to HTML tags that are no longer current or supported. For some reason, this misuse of words just drives me up a wall. The element was deprecated in version 4 of HTML, not depreciated. A car depreciates, HTML tags do not. The word deprecate means "to express disapproval of; deplore," and the word depreciate means "to lessen the price or value of." HTML tags that have been deprecated are no longer considered current and should be avoided as much as possible. There is a high probability that deprecated tags will someday not be supported by some Web browsers. So please, when you are chatting with your friends about HTML tags, be certain to use the proper word. The world will be a much happier place–at least for me. ;-) 12. 13. 12. Click and drag to select the word real at the bottom of the page. Before you can modify text, you must first select it. 13. In the Properties inspector, click the Bold button. This will make the selected text bold. 14. In the Properties inspector, click the Italic button. This will make the selected text italic. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 15. With the word "real" still selected, click the Color box and choose black from the swatch that opens. This will change the color of the text to black, even though it was defined as white in the page properties. This method of overriding the default color of text is an important concept to remember because you will see similar behavior when you learn about CSS later. For now, just understanding that you can override the page property With its settings powerful is enough. combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. 16. Save and Here close to get the you file.hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Note layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics What Headings? editing, andAre more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. HTML text can also be formatted using heading tags. The tags look like this: <h1>. They range from 1 to 6 and change the size of the HTML text. Here's a tricky thing that you might want to remember: The smaller the number next to the h, the bigger the text will be. For example, <h1> will produce the largest text, whereas <h6> will produce the smallest text. Generally, the <h1> through <h6> tags insert a line break before and after the text without requiring additional code. Heading tags can be useful for formatting large text. Why might you use a heading element instead of a element and size attribute? Accessibility! If sight-impaired users access your Web page, they might not see your Web page, but will instead have a reading device read it aloud. Heading tags can be used by HTML readers to make it much easier for visually impaired people navigate through a Web page. You might not imagine that your site has much of a sightimpaired audience, and perhaps do not think this information applies to your site design strategy. In many cases, however, making your site accessible is not an option, but a requirement. Our advice is to use heading tags instead of large font sizes for headlines. In addition, heading elements can be used in CSS, so this information applies to future chapters as well. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 This image shows the range of how heading tags display in a browser. ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2 Font Lists In this exercise, you will learn how to add and modify the font lists that come with Dreamweaver MX 2004. By specifying multiple fonts using a font list, the likelihood of visitors seeing the page in one of the typefaces you specified is higher, because you're offering more than one choice. • Contents You will learnTable howofto modify what typefaces are in the existing font lists and how to create your • Index own custom font list. Learning and using this technique will allow you to break out of the Times • Roman moldExamples a little bit, which is a welcome enhancement to the bland Web type landscape I see Macromedia® Dreamweaver® MX 2004: every day. Font lists are also used Hands-On in CSS. Training ByGaro Green, Lynda Weinman 1. Open text2.html. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Select the wordsThis is the Arial, Helvetica, sans-serif font list. 3. From the Font pop-up menu in the Properties inspector, choose Arial, Helvetica, sansserif. This will change your text to Arial if you have that font installed; if you do not, it will go to the next font in the list. Note:The Default Font setting will use whatever font is specified in the end user's browser settings. Note How Font Lists Work • Table of Contents FontIndex lists are a very useful way of ensuring that the HTML text on your Web page is viewed the way you intended. A Web browser will search for each font in the list • Examples until it finds one MX that2004: is installed the end user's system. Once it finds a font in Macromedia® Dreamweaver® Hands-Onon Training the list, it will use that font to display the HTML text on your Web page. For ByGaro Green, Lynda Weinman example, if your font list were "Arial, Helvetica, sans-serif," the browser would try to use Arial first to display text. If the end user did not have Arial installed, the Publisher: Peachpit would Press then try to display Helvetica. If it could not find Helvetica, it would browser Pub Date: December 22,the 2003default sans-serif font on the end-users system. The goal of font then display lists is to create sets of fonts that have similar structure and characteristics, so that ISBN: 0-321-20297-X there is minimal change from viewer to viewer. Pages: 720 4. Select the words This is the Times New Roman, Times, serif font list. • With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks Flash integration, and gobble up Times, Garo's suggestions about best 5. From the Font pop-up and menu, choose Times New Roman, serif. This will change layoutyour andtext typography practices. You'll also find extensive coverage of all of Dreamweaver's to Times New Roman if you have that font installed; if you do not, it will go to newest cross-browser validation, improved CSS support, built-in graphics thefeatures: next fontdynamic in the list. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it andthe thewords resultsThis of your actions. 6. Select is the Courier New, Courier, mono font list. From the Font popup menu, choose Courier New, Courier, mono. This will change your text to Courier New if you have that font installed; if you do not, it will go to the next font. Are you getting the idea about how this works yet? ;-) 7. Select the words This is the Georgia, Times New Roman, Times, serif font list. From theFont pop-up menu, choose Georgia, Times New Roman, Times, serif. 8. Select the words This is the Verdana, Arial, Helvetica, sans-serif font list. From the Font pop-up menu, choose Verdana, Arial, Helvetica, sans-serif. 9. Select the words This is the Geneva, Arial, Helvetica, sans-serif font list. From the Font pop-up menu, choose Geneva, Arial, Helvetica, sans-serif. This is what your page should look like now . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 10. its Click off the combination text to deselect it, andlayout press tools, Enterapplication (Windows)development or Return (Mac). Below the last With powerful of visual features, and code sentence on the page, type This is my very own font list. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. From the Font pop-up menu, chooseEdit Font List. 12. 12. In the Edit Font List dialog box that appears, select Arial, Helvetica, sans-serif from the Font list. Select Arial under Chosen fonts; then click the >> button to remove Arial from this font list. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 13. its Select Arial Black under the Available the <<development button to add this to the With powerful combination of visual layoutfonts. tools,Click application features, and code selected font list. You have just modified the fonts that will be used for this font The editing support, Dreamweaver MX 2004 is sure to become the constant companion of list. many Web general idea is to choose fonts that are similar in appearance for each font list. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 14. Select(Add fonts in list below) from the bottom of theFont list. 14. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X 15. Pages: Century 720 Select Gothic under Available fonts and click the << button to add this to your list. 16. SelectVerdana under Available fonts and click the << button to add this to your list. 17. its Click OK to add your new of listvisual to thelayout font list. With powerful combination tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 18. In the text2.html file, hands-on select the with words Thisisisthe mydefinitive very own font list. training on the developers. Here to get you it fast project-based topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 19. From the Font pop-up menu, choose Century Gothic, Verdana. This will change your text toCentury Gothic if you have that font installed; if you do not, it will go to Verdana. This is what your screen should look like now. This exercise gives you an example of how these font lists will display on your computer system. What you see might appear differently on other people's browsers, because they might have different fonts installed on their systems than you do. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 20. its Save and close the file. of visual layout tools, application development features, and code With powerful combination editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, linkingWindows among pages. You'll learn about frames and forms, cascading Type Size: Mac and versus style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code Unfortunately all of us well-intentioned Webtopublishers, HTML type companion appears much editing support,for Dreamweaver MX 2004 is sure become the constant of many Web larger on Windows thanyou it does on thewith Mac. both display images training at 72 on the developers. Here to get hands-on it Although fast is thethey definitive project-based dpi (dots displays at type at 96 dpi, whereas the Mac displays it at topic from per oneinch), of theWindows master teachers Linda.com training. Using a combination of project72 dpi. This deceptively small technical difference results veteran in muchauthor larger Garo type on based lessons, guided exercises, and QuickTime tutorials, Green walks you Windows. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading The images here illustrate the integration, difference inand sizegobble between twosuggestions platforms. about best style sheets, shown and Fireworks and Flash up the Garo's Pretty scary, huh? There is no solution to this, except to turn to style sheets (see layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Chapter 9, "Cascading Style Sheets") to size your text by using pixels, but that works newest features: dynamic cross-browser validation, improved CSS support, built-in graphics only on 4.0 version and later browsers. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. To compensate, I often make type smaller at –1 or –2 when I am developing pages, but doing so only results in a more appealing Windows version, and a less appealing Mac version. Ugh! The theory is that there are more Windows users than Mac users, so I've taken the tact to make the type on our pages look acceptable on Windows, and slightly small on Macs. One other solution to the size difference issue is to use images of text instead of HTML text. Because images display at 72 dpi on either Mac or Windows, the type will look identical on either platform. Later in this chapter, you'll learn to make Flash Text, which generates an image using the SWF file format. The downside is that images are larger in file size than corresponding HTML text, and are not searchable by search engines. It's always one gotcha or another, right? 3 Aligning Text In this exercise, you will learn how to align text on the page. Unfortunately, HTML does not give you much control over aligning text. You have three basic options: Left Align,Center Align, and Right Align. You do have some extra options when you align text next to images, which • of Contents you will also Table explore in this exercise. If the limitations of HTML alignment features frustrate you, • Index that's understandable. You'll learn about more exact layout techniques in later chapters. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open text3.html. Notice that the line of text at the top is left aligned. In fact, all of the text on the page is aligned to the left. This is the default alignment setting for text. 2. Click anywhere within the line of text that reads laEyeworks, at the very top of the page. 3. In the Properties inspector, click the Align Center button. This will center your text on the page. Note: The centering of the text is relative to the width of the browser window. Some of you might be wondering why the rest of the text and images on the page didn't align to the center when you clicked the Align Center button. If you're not wondering that–well, you should be. ;-) Only the top line of text was centered because it was formatted as a Heading 1 (the <h1>element), which is one of many block-level elements in XHTML. With block-level elements, only the objects within the block-level element tags are affected when you apply formatting, such as alignment. If the next line of text was created using a line break (the ) element, which is an inline element, then the contents of both lines would have been centered. Understanding the nuances of block and inline elements is important, and you will get more practice with this concept in Chapter 9, "CSS." You can consider this little tangent "Block-Level Elements 101." ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from of the master teachers at the Linda.com training. Using a and combination of buttons project-to 4. In theone Properties inspector, click Align Right, Justified, Align Left basedsee lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks how each of them affects the alignment of this line of text. Okay, so maybe it's not you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and super exciting, but at least you understand how basic alignment with text works. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Click the image on the page to select it. Notice when you select an image to align with type, you have different alignment options available in the Properties inspector. The alignment options in this menu are strictly used when aligning text next to an image. 6. In the Properties inspector, choose the Align pop-up menu and select the Left option. Notice that the text moves to the top-right of the image. Go ahead and play with the other align options to see how they affect the alignment of the text next to the image. Hey, if you don't want to do that, just read the upcoming chart to learn more. ;-) 7. Save and close the file. Aligning Text and Images Dreamweaver MX 2004 offers many alignment options for text and images. The following chart defines all the alignment terms, so now you will know what you are requesting when you select one: • Table of Contents • Index • Examples HTML Text and Image Alignment Options Macromedia® Dreamweaver® MX 2004: Hands-On Training Alignment Description Browser Default Varies between browsers, but usually uses the Bottom option (see below) ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 Baseline ISBN: 0-321-20297-X Aligns the baseline of the text to the bottom of the image Pages: 720 Bottom Aligns the baseline of the text to the bottom of the image (same as Baseline) Absolute Bottom Aligns text, including descenders (letters such as g and j), to the bottom of the image With its powerful combination of visual layout tools, application development features, and code Top support, Dreamweaver MX Aligns image the tallest part of the editing 2004the is sure to to become the constant companion of many Web object (image or text) developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers Linda.com training. Using a combination of projectTextTop Alignsat the image with the tallest character in based lessons, guided exercises,the andline QuickTime tutorials, veteran author Garo Green walks you of text through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Middle Web sites, and linkingAligns baseline of learn the text to the middle managing amongthe pages. You'll about frames and forms, cascading of theintegration, image style sheets, and Fireworks and Flash and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Absolute Middle Aligns the middle of the text to the middle of newest features: dynamic cross-browser validation, improved CSS support, built-in graphics the image editing, and more. Throughout, Garo shows you not just how to do something but why you're doing Left it and the results of your actions. Left-aligns the image and wraps text to the right Right Right-aligns the image and wraps text to the left 4 Ordered, Unordered, and Definition Lists In this exercise, you will learn how to create a variety of lists–an ordered list, an unordered list, and a definition list. These are HTML terms that refer to whether the list is formatted with a bullet, an indent, or Roman numerals. These lists can be generated from existing text or from • Table of Contents and definition lists remain part of the HTML 4.01/XHTML WC3 scratch. Ordered, unordered, • Index formal recommendations and will continue to be supported by Web browsers. In fact, you can • Examples use lists to create some great navigation systems for your Web sites. If you want to learn how to Macromedia® Dreamweaver® MX 2004: Hands-On Training do that, be sure to check out the Intermediate Dreamweaver MX 2004 H·O·T book! ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open text4.html. 2. Select the four lines of text under the section calledOrdered List - Numbered, which includesOrdered item 1,Ordered item 2,Ordered item 3, and Ordered item 4. 3. ChooseText > List > Ordered List. This is what an ordered list looks like . 4. • 4. Select the Table four of Contents lines of text under the Unordered List - Bulleted section (Unordered • • item 1,Index Unordered item 2,Unordered item 3, and Unordered item 4). Examples 5. ChooseDreamweaver® Text > List >MXUnordered List. Macromedia® 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press This is what an unordered list looks like . Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you it fast is the definitive training 6. Select the four lines of hands-on text underwith theDefinition List sectionproject-based (Definition item 1, on the topic Definition, from one ofDefinition the masteritem teachers at Linda.com training. Using a combination of project3,Definition). based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: 7. Choose Text > List > Definition List. navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics This is what a definition list looks like . editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. Save the file and close it. You'll find that knowing how to set up these different types of lists will come in very handy as you create your own Web pages and sites. 5 Color Schemes Color schemes are preset groups of colors that Dreamweaver MX 2004 provides for your background, text, links, active links, and visited links colors. You can apply a color scheme to a page at any time. They are useful when you are not sure which colors to use. Why is this • Table of Contents chapter? Because color schemes affect the color of type and links exercise in the "Typography" • Index on your page, that's why! You will learn how to control your own custom color schemes in • Examples Style Sheets." Chapter 9, "Cascading Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open text5.html. This page has some text and images, but no other properties set. And, as you can see, it's looking pretty plain. 2. ChooseCommands > Set Color Scheme. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 3.Publisher: In the Peachpit Set Color Press Scheme Command dialog box, select Orange under the Background option. Select 22, Grey, Pub Date: December 2003Yellow under theText and links option. Click OK. ISBN: 0-321-20297-X Pages: 720 This is what the page looks like with the color scheme applied. If you don't like it, go ahead and choose another! With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. ChooseCommands > Set Color Scheme again. Pick a different combination of colors and clickApply. Knock yourself out! (Don't really knock yourself out–simply enjoy yourself.) 5. When you're done having fun with colors, click OK and save and close the file. 5. Note Can I Create My Own Color Schemes? • • • One question our students always ask is, "Can I create my own color schemes?" Well, the answer is yes and no. You can't do it through the Set Color Scheme Command Table of Contents dialog box. However, you can do it by using templates, which you will learn about in Index Chapter 9, "Cascading Style Sheets." Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6 Formatting Text in Tables In this exercise, you will learn to change a table's type, style, color, alignment, and more. In the old days, which weren't so long ago, you would have had to edit each individual cell, one at a time, and it could have taken hours to edit a large table. Not anymore! With Dreamweaver MX • Table 2004, you can do of it Contents with a few deft clicks and drags. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open text6.html. 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 2. Click in cellDreamweaver 2 in row 1 (Name) and the rightthe to the last cell in the row editing support, MX 2004 is drag sure to to become constant companion of(Material). many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectYou guided must beexercises, in Standard to select a range veteran of table author cells . Garo Green walks you basedNote: lessons, andview QuickTime tutorials, 3. In the Properties inspector, choose the Font pop-up menu and select the Verdana, through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Arial, Helvetica, sans-serif font list. All the text in the selected column will update before managing Web sites, and linking among pages. You'll learn about frames and forms, cascading your eyes. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 4. Using the Properties inspector, change the text style toCSS bold. newest features: dynamic cross-browser validation, improved support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 5. Click in cellDreamweaver 2,row 2 (Warp) and drag down to the bottom-right (Titanium) to select editing support, MX 2004 is sure to become the constantcell companion of many Web all of the text to the various with glasses. developers. Here tonext get you hands-on it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project6. Inlessons, the Properties inspector, choose the Font pop-up menu author and select Georgia, based guided exercises, and QuickTime tutorials, veteran Garothe Green walks you Times New Roman, Times, serif fontnavigating list. Once again, allinterface, the text in the selected through all the Dreamweaver MX 04 basics: the new creating and cells will update before your managing Web sites, andeyes. linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. In the Document toolbar, click the Code button to see the code for this page. Look at all 7. those tags! Aren't you glad you didn't have to insert each one by hand? Click the Design button to return to the Design view of this page. 8. Save and close this file. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is Flash Text? It's pretty hard to be involved in Web design today and not hear the word "Flash." It has become widely adopted in the Web design industry as an alternative and/or adjunct to HTML formatting. Macromedia Flash MX 2004 is a vector-based drawing, animation, interactivity, and application • of Contents developmentTable program. It can be used to create something as simple as a button for a Web page • Index or as complex as an entire video game that can be played on the Web. Macromedia Flash MX • 2004 uses a Examples proprietary file format calledSWF (pronounced "swiff"). Macromedia Flash MX 2004 Macromedia® Hands-On Training content that Dreamweaver® gets uploadedMX to2004: the Web always ends in the .swf suffix. ByGaro Green, Lynda Weinman In order to view Macromedia Flash MX 2004 content on the Web, you must have the Flash 7 player installed in your browser. If you don't have this plug-in, you can download it for free at Publisher: Peachpit Press http://www.macromedia.com/software/flashplayer. Pub Date: December 22, 2003 ISBN: 0-321-20297-X TheFlash Text feature in Dreamweaver MX 2004 lets you create text and text rollovers for your Web pages, using any font on your system, in the SWF file format. Flash Text is a good feature Pages: 720 for creating text rollovers and small lines of text, such as headlines for your body text. It is not searchable by search engines and should not be used for large bodies of text. Before you move on to the exercise and learn the nuances of Flash Text, here's a handy list that outlines some of the pros and one very big con of this feature. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Using Flash Text developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectPros Explanation based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Font integrity With Flash you can use any font on your through all the Dreamweaver MXText, 04 basics: navigating the installed new interface, creating and andamong the visitors to You'll your page to have managing Web sites, system, and linking pages. learndon't aboutneed frames and forms, cascading that font installed, as they doand withgobble regular text. style sheets, and Fireworks and Flash integration, upHTML Garo's suggestions about best This gives you much more you are layout and typography practices. You'll also find flexibility extensivewhen coverage of all of Dreamweaver's designing your pages. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Text rollovers Creating text rollovers usually requires that you use a doing it and the results of your actions. separate image-editing program to create the necessary images. With Flash Text, you can create text rollovers without ever leaving Dreamweaver MX 2004. Con Explanation Plug-in required All Macromedia Flash MX content on the Web requires a plug-in to be viewed properly. Flash Text is no different and requires that the Flash plug-in be installed in the browser. 7 Creating Flash Text In this exercise, you'll get to use Flash Text. Flash Text lets you use any font you want without worrying whether the visitors to your site will have it installed on their systems. It also lets you easily create rollovers without using any JavaScript. It's really easy to learn and use–read on • of Contents and try it outTable to see what I mean! • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 1. Open flashtext.html. This page contains a simple layout that was created using tables to style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best control the position of the images on this page. You will learn more about tables in the next layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's chapter, I promise! newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 2. Click insideDreamweaver the second cell the is top. This placethe a blinking cursor that Web cell editing support, MXat 2004 sure to will become constantI-beam companion ofin many and lets Dreamweaver MX 2004 know is where you project-based want to place training your object, developers. Here to get you hands-on with itthat fastthis is the definitive on the is Flash in this case. at Linda.com training. Using a combination of projecttopic which from one of theText master teachers based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 3. Choose Insert > Media > Text. navigating This will open Flash Text dialog through all the Dreamweaver MXFlash 04 basics: the the newInsert interface, creating and box. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 4. Select fontFireworks for your text Font drop-down menu. am using a font called style sheets,aand andfrom Flashthe integration, and gobble up IGaro's suggestions about best You canpractices. use whatever The point is toof use that isn't layoutPussycat. and typography You'll font alsoyou findwant. extensive coverage allaoffont Dreamweaver's common to that many people. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're choose a font that you don't think end users will have on their computers. doingMake it andsure the you results of your actions. One of the advantages of using Flash Text is that the font is embedded in the SWF file and does not have to be installed on end users' computers. So, now you can feel free to use just about any font you have on your computer! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 5. Set the Size option 46. This option sets You'll the size of your text in points. Click the Bold managing Web sites, andto linking among pages. learn about frames and forms, cascading button to make the text bold. Click the Color option and select white or any color you like. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 6. Click Web the Rollover color boxamong and select a bright yellow color. Setting this colorcascading will managing sites, and linking pages. You'll learn about frames and forms, automatically create a rollover effect for your Flash Text. Pretty simple, huh? ;-) style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 7. In theWeb Text field,and type home. By default, Show font check box is checked; this will managing sites, linking among pages.the You'll learn about frames and forms, cascading give you a preview of the text in the font you selected. If the font you selected is not being style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best displayed, make sure the Show font check box is checked. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're dialog box will not give you a preview of the size you specified; you can only doingWarning: it and theThis results of your actions. see the actual size in the document itself. I think that it would be nice if the next version lets you preview the size of your text in this dialog box . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 8. Click the BgDreamweaver color box and move eyedropper over background of the of document editing support, MX 2004the is sure to become thethe constant companion many Web windowHere and to click. let youwith sample and select the background color training of your page so developers. get This you will hands-on it fast is the definitive project-based on the matches background of your Flash Text. topic that fromitone of thethe master teacherscolor at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 9. In theWeb Save as field, type home.swf. GoodYou'll file management principles you managing sites, and linking among pages. learn about frames anddictate forms, that cascading give your files names that reflect their content. Note: If you are using a Mac with OS style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about X, best should click Browse before entering the name forcoverage the SWFof file. OK. layoutyou and typography practices. You'll also find extensive all Click of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. This is what your page should look like after the first bit of Flash Text has been added. You will get an icon that looks like the one shown here for each bit of Flash Text you add to your page. If you can see the actual text, clicking the Stop button in theProperties inspectorwill display the icon shown here. The following step explains how to get a preview of Flash Text. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Tip through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managingPreview Web sites, linking among pages. You'll learn about frames and forms, cascading Alland Flash style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography extensive coverage of content all of Dreamweaver's There is a realpractices. quick andYou'll easy also way find to preview all of the Flash on your newest features: dynamic cross-browser validation, improved CSS support, built-in graphics pages. Simply press Ctrl+Alt+Shift+P (Windows) or Shift+Option+Cmd+P editing, and more. shows you notofjust howFlash to dofiles something why you're (Mac) andThroughout, you will get Garo an instant preview all the on yourbut page–that's doing it and the results of your actions. one you can take to the bank. ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 10. In support, the Properties inspector, click is the Play tothe getconstant a real preview of theofFlash editing Dreamweaver MX 2004 sure to button become companion manyText Web on yourHere page. your mouse over the Flash Text to preview the rollover effect.on Sweet! developers. to Move get you hands-on with it fast is the definitive project-based training the toteachers turn the at preview off. training. Using a combination of projecttopic Click from the oneStop of thebutton master Linda.com based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 11. Repeat Steps 2 though 10 to04 create Flash Text forthe about frames, locations, through all the Dreamweaver MX basics: navigating new us, interface, creating and and contact. course, font will be different, unless areframes using Pussycat, too. ;-) managing WebOf sites, and your linking among pages. You'll learnyou about and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 12. Press to preview your page in also a browser. Return to Dreamweaver 2004 and save layout andF12 typography practices. You'll find extensive coverage of all ofMX Dreamweaver's thefeatures: changesdynamic to this file. You can close this file; improved you won't CSS be working with it anygraphics longer. newest cross-browser validation, support, built-in editing, and more. Throughout, Garo shows you not just how to do something but why you're are of done with another chapter; you can take a nap or keep on moving to the doingWoo-hoo! it and theYou results your actions. next chapter! I don't know about you, but I sure could use a little nap after all that talk about text. Yawn! ;-) Chapter 7. Tables Creating and Modifying a Table • • • Table of Contents Sorting a Table Index Examples Using Tables to Align Images and Text Macromedia® Dreamweaver® MX 2004: Hands-On Training and ByGaroCombining Green, LyndaPixels Weinman Percentages Inserting Tabular Data Publisher: Peachpit Press Pub Date: December 2003 Nested Tables 22, and Borders ISBN: 0-321-20297-X Rounded-Corner Tables Pages: 720 For many years, HTML tables have been the de facto way to create the layout for Web pages. Despite never being intended for this purpose, tables can be found controlling the layout on just about every Web site. With powerful combination of columns visual layout tools, application features, and code HTMLits tables consist of rows and that intersect to createdevelopment cells and were originally editing support, Dreamweaver MX 2004 is sure to become the constant companion of many designed to give Web designers a way to display and organize charts and data. The HTML Web developers. Here to gettables you hands-on withdid it fast the definitive project-based on to the engineers who created for the Web not is predict that developers would training use tables topic from one of the master teachers at Linda.com training. Using a combination of projectalign images, not just to display text and numbers. You'll learn about both uses for tables: a based lessons, guided exercises, QuickTime tutorials, author Garo Green you formatting device for data, and a and layout device for custom veteran positioning of various pagewalks elements. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll insert learn about frames and forms, This chapter shows you how to create custom tables, rows and columns, come cascading up with style sheets, and Fireworks and Flash integration, gobble up also Garo's suggestions about best color schemes, and handle formatting and sorting and tasks. You will learn how to use tables to layoutand andposition typography practices. finditem extensive of all of Dreamweaver's align images. Tables You'll are a also critical in yourcoverage Web design toolbox, and newest features: cross-browser validation, improved CSS support, built-in graphics the Dreamweaver MXdynamic 2004 gives you great control and techniques for mastering them. Towards editing, andchapter, more. Throughout, you not just to docustom something but why you're end of this I'll show youGaro two shows table tricks: one forhow creating table borders, and doing it and the results of your actions. another for making rounded table corners. Don't worry, the fun doesn't stop there; you will get to work with tables some more in Chapter 9, "Cascading Style Sheets." What Is a Table? A table is a highly versatile feature in HTML. It can be useful for organizing data or positioning page elements. What does a table look like under the hood of Dreamweaver MX 2004? It is composed of a combination of HTML tags. • Table of Contents • Index • Examples A table in the browser. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Here's the HTML for the table. Tables always begin with a <table>tag. Thewidthand borderelements are attributes of the <table>tag.<tr>stands for table row, and <td> stands for table data. A table contains rows, columns, and cells. If these terms are unfamiliar to you, this diagram should help. In this illustration, you will notice several nonbreaking spaces (the code in each table cell). You will learn all about why that code is there later in this chapter . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through Note all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Different Table Modes style The sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's In Dreamweaver MX 2004, there arevalidation, three different modes: Standard (default), newest features: dynamic cross-browser improved CSS support,view built-in graphics Expanded Tables mode, and Layout view. You can switch between these various editing, and more. Throughout, Garo shows you not just how to do something but why you're by choosing > Table Mode and selecting the appropriate mode. doingmodes/views it and the results of your View actions. Throughout this chapter, you will work only in Standard mode. In the next chapter, you will get a chance to work with the Layout view. The Expanded Tables mode is similar to Standard view except extra cell padding and table borders are used to make table editing easier. Since I am not a huge fan of this table mode, this mode will not be covered in this book. However, it is important to point out because it is a new feature of Dreamweaver MX 2004. 1 Changing the Border of a Table This first exercise helps you build your table formatting skills on a premade table. It also alerts you to a common XHTML problem relating to empty table cells. You see, even if a table cell is empty, you have to put something in it to preserve the table formatting. That "something" can • Table transparent of Contents GIF, which is a small image file that has been set to be fully be a single-pixel • Index transparent, or invisible. It serves as a placeholder to keep the table formatting from collapsing • Examples with empty cells. You'll learn how to add a transparent GIF in a few moments, once you get Macromedia® Dreamweaver® going with this exercise. MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 1. Copychap_07 from the H·O·T CD-ROM to your hard drive. Define your site for Chapter 7 Publisher: Peachpit Press using the chap_07 folder as the local root folder. If you need a refresher on this process, Pub Date: December visit Exercise 122, in2003 Chapter 3, "Site Control." ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Open tableformat.html. The dotted lines that you see around each cell are just table border guides, and will not show up inside the browser. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 3. PressF12 to preview this file in your Web browser. Notice how the dotted lines don't appear in the browser? Inofthis file,layout the border was development set to 0 in order to make With its powerful combination visual tools, setting application features, andthe code table borders disappear, because Dreamweaver MX 2004 uses a default setting of 1 forWeb editing support, Dreamweaver MX 2004 is sure to become the constant companion of many table borders. results of this setting are is visible only in the browser, nottraining in the on the developers. Here to The get you hands-on with it fast the definitive project-based authoring environment of Dreamweaver MX 2004. Next, you'll learn how to control the topic from one of the master teachers at Linda.com training. Using a combination of projectweight of the lines with the border property. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Return to Dreamweaver MX 2004 and select the entire table. To do this, move your cursor over the edge of the table until you see a thin red outline around the table. If you click when the thin red line is visible, you will select the table. Click the mouse when you see the thin red line appear. Note:You can also do this by using the Tag Selector at the bottom left of the document window. Click anywhere inside the table. You should see the word "<table>" appear as a Tag Selector. Click the <table>element in the Tag Selector, and the entire table should become selected. Selecting Table Elements • In previous versions of Dreamweaver, selecting tables, rows, and individual cells could be a difficult task. This is no longer true in Dreamweaver MX 2004; making these types of selections is very easy thanks to a new highlighting option. As you move your mouse over the table and rows, a thin red outline will appear. This thin red line is a preview of what will be selected if you click your mouse–sweet! If you don't like red, you can change this color in the Preferences by choosing Edit > Preferences > Highlighting. Finally, there is table nirvana. ;-) Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 5. With the table selected, in theProperties inspector, enter Border: 1 and then press topic from one of the master teachers at Linda.com training. Using a combination of projectEnter/Return. The border will be immediately updated in the Document window. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Note newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and Column more.Header Throughout, Menus Garo shows you not just how to do something but why you're doing it and the results of your actions. When you select a table in Dreamweaver MX 2004, you will instantly notice a bunch of green lines and little arrows at the bottom of the table and each of the columns. These are called Column Header menus and give you quick access to some table features. The bottom-most line gives you access that affects the entire table, such as clearing all heights and widths, making all widths consistent, and even hiding the table widths. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X 7. In the Document toolbar, click the Code button to display the code for this page. This is Pages: 720 that is needed to display the table you just modified–that's a lot of code for a plain the code old vanilla-looking table, huh? Just by looking at the code, you can start to see what XHTML elements are needed to create the various columns, rows, and cells. Notice that the first <td> element contains . Why is that in there, and why can't you see it in Design view? Keep on reading and you will find out! With its powerful combination of visual layout tools, application development features, and code Dreamweaver M X 2004 automatically inserts the element into every table when editing support, Dreamweaver MX 2004 is sure to become the constant companion of cell many Web one is created. Whyyou is this being done, Some browsers require that every cell developers. Here to get hands-on with ityou fastask? is the definitive project-based training on the some content; that don't contain content will collapse. And who wants their topic contain from one of the mastercells teachers at Linda.com training. Using a combination of projectlayoutguided falling exercises, apart in a and browser? The nonbreaking space author is the perfect solution because basednice lessons, QuickTime tutorials, veteran Garo Green walks you it qualifies as content to the and is invisiblethe to new the person viewing yourand page, so through all the Dreamweaver MX browser 04 basics: navigating interface, creating nobody ever knows evenamong there (except browser, of course). is happy! managing Web sites, andit's linking pages. the You'll learn about framesEveryone and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 8. Click Design button to return thefind Design view coverage of the page. layout and the typography practices. You'll to also extensive of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. In the next few steps, you are going to do a little experiment. Relax and put away the goggles; we aren't going to be messing around with any flammable or toxic fluids. In the next few steps, you are going to manually remove the nonbreaking space and then preview it to see how this missing element affects the display of the table in the browser . 9. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cros 0.200 0.200 (58..003.000 i)-7is 09.000 (w)-29.000 (e)568.000 ( )4300 rg 6 11. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 12. Press to preview this page in a browser. Notice that the upper-left cell no longer has a ISBN:F12 0-321-20297-X border around it. Ah-ha–without a nonbreaking space, Internet Explorer 6.02 on the PC Pages: 720 and Internet Explorer 5.2.2 will not properly render that table cell. Note:Netscape 7.1 on the PC will render the table cell with or without the nonbreaking space. And that, you can take to the bank! Even though I'm showing what happens on a PC With its combination of browsers visual layout tools,platforms application development features, andincode in apowerful specific browser, other on other have trouble with no content a editing cellsupport, as well.Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. Return to Dreamweaver MX 2004 and make sure your cursor is still blinking in the same location. Then, choose Insert > HTML > Special Characters > Non Breaking Space to replacethe nonbreaking space you deleted earlier. Press F12 to preview the page again, just to make sure everything is okay. 14. Save the changes to this page and leave it open for the next exercise. Please. ;-) 2 Sorting the Table In Dreamweaver version 2.0, Macromedia introduced the capability to sort the content of tables both alphabetically and numerically. Before this feature existed, if you wanted to sort a table, you had to copy and paste each row or column manually. Thankfully, sorting table content is • of Contents only a simpleTable dialog box away. Even if you use this feature once, it is worth its weight in clean • Index underwear. ;-) • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. The document tableformat.html should still be open. If not, go ahead and open it now. I will wait right here. ByGaro Green, Lynda Weinman Peachpit Press 2.Publisher: Make sure that the table is selected and choose Commands > Sort Table. The Sort Table Pub Date: December 2003 dialog box will22, open. ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Changethe settings to Sort by: Column 2 and Order: Alphabetically Ascending. Click OK. This will sort all of the eyeglasses by their names in ascending (A–Z) order. Notice that the file has been sorted differently from when you first opened it? The second column is now in alphabetical order. You can arrange table contents through this kind of command. Try doing this manually, and you'll really appreciate this feature! Wait a cotton-picking minute here! The bottom two cells still aren't sorted properly. Zody–Mint Jelly should be above Zody–Pink Dew! Come on–everyone knows that (wink)! You need to sort the table again to get this perfect . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. With the table still selected, choose Commands > Sort Table to open the Sort Table window again. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Change the settings toSort by: Column 2 and Order: Alphabetically Ascending, just like you did earlier. Then change the settings to Then by: Column 3 and Order: Alphabetically Ascending. This will sort the third column and put Pink Dew in its proper place. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 6. Save the file and keep it open for the next exercise. Here you can see Mint Jelly sitting right on top of Pink Dew in perfect ascending harmony. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver is sure to become the constant companion of manyofWeb The Sort Table dialog box MX has 2004 a variety of options to help you modify the appearance developers. Here to get you hands-on with it fast is the definitive project-based training on the tables. See the following chart for an explanation of all its features . topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Sorting Features • Feature Definition Sort by Use this option to select which column you would like to use to sort the table. Order Table of Contents Use these two pull-down menus to choose Alphabetically or Numerically and Ascending or Descending. • Index • Examples Macromedia® MX 2004: Training Then Dreamweaver® by Use Hands-On this option to sort ByGaro Green, Lynda Weinman Sort includes the Publisher: Peachpit Press first row Pub Date: December 22, 2003 ISBN: 0-321-20297-X Sort header rows Pages: 720 Sort footer rows multiple columns in your table. If this box is checked, the first row in your table will be sorted. This option is off by default because most often the first row is used as a header for the table. If this box is checked, all the rows in the table's headers (if any) will be sorted using the same criteria as the body rows. If this box is checked, all the rows in the table's footers section (if any) will be sorted using the same the body rows. With its powerful combination criteria of visualaslayout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Keep all row colors If this box is checked, all of the row colors will developers. Here to get you hands-on with it fast is the definitive project-based training on the the same after the remain the same even if the rows are rearranged topic from one of the master teachers at Linda.com training. Using a combination of projectsort has been after the sorting is completed. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you completed through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3 Formatting a Table Next on the list of table-building skills is learning how to apply color formatting. This exercise shows off Dreamweaver MX 2004's color-picking features for tables. Dreamweaver MX 2004 offers a variety of ways to get the job done. When it comes to coloring your tables, you may use • Table Contents Dreamweaver MXof 2004's automatic color features or set whatever custom colors you desire. • Index In this exercise, • Examples you will learn how to manually apply color to the background of tables, columns, rows, Macromedia® Dreamweaver® and cells by MXusing 2004: the Hands-On Properties Training inspector. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Withtableformat.html still open from the previous exercise, make sure the table is selected. 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 2. In the Properties inspector, click on the Bg color box for the table and select brown through all the Dreamweaver MX 04 basics: navigating the new interface, creating and (#996633) from the color cube. This will add a background color for the entire table. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Starting at the upper-left corner of the table, click and drag across thetop row to select that entire row. Notice that the lower-left portion of the Properties inspector displays properties for the selected row. 4. 4. In the Properties inspector, click the Bg color box and choose black (#000000) from the color cube. Here's what your table looks like now. You can color table columns and individual cells in much the same way . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 5. Save and close this file; you won't need it any longer. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Format Table Command But wait, there's more! Dreamweaver MX 2004 provides yet another way to customize your table's color settings. The Format Table command is quick and easy to use; plus, it is great if you have trouble with or plain don't like choosing colors. By choosing Commands > Format • Table of Contents Table, you can open the Format Table dialog box. If you want to use the Format Table • Index command, the entire table must be selected, or you must click inside one of the table cells before • Examples you choose the command from the menu. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Format Table dialog box gives you access to a bunch of preset color themes that can be applied to your tables. As you click through the various themes, notice how the table preview in the middle changes so you can preview that theme. These color combinations are part of Dreamweaver MX 2004 and can be applied to any table. Additionally, if you want, you can customize the color theme by clicking on a Row colors box and selecting a color from the picker. 4 Creating and Modifying a Table Enough messing around with someone else's table–it's time to create your own table. This exercise shows you how to create your own table from scratch and how to modify it. You will learn to work with a combination of the Insert Table object, the Modify > Table menu, and • Table of ContentsYou are going to build a simple Web page layout using tables so you theProperties inspector. • Index can get some real-world experience building tables. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. In the Files panel, right-click (Windows) or Ctrl+click (Mac) on the local root folder and chooseNew File to create a new document and save it as firsttable.html. Be sure to include the .html extension so Dreamweaver MX 2004 knows what type of file you are Publisher: PressDouble-click on the file you just created to open it. trying Peachpit to create. ByGaro Green, Lynda Weinman Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Enter Title: My First Table. Click the Insert Tablebutton in the Common group in the Insert bar or choose Insert > Table. The Insert Table dialog box will appear. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, exercises, andthe QuickTime veteran Garo Green walks you 3. Make sureguided your settings match settings tutorials, shown here, then author clickOK. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layoutThe andInsert typography You'llsettings also findresult extensive of all of Dreamweaver's Tablepractices. dialog box's in acoverage table that is six rows high and newest features: dynamic cross-browser validation, improved CSS support, built-in graphics four columns wide. editing, and more. Throughout, Garo shows you not just how to do something but why you're doingTake it anda the results of your deep breath and actions. pause for a moment before going further. Before you start inserting tables in your documents, you should have a blueprint or sketch of the layout needed for your page design. You can draw this on toilet tissue or create a complete page design in an image editing program such as Fireworks–it doesn't really matter. What is important here is that you have a really good idea of what type of grid (table) you are going to need to make your design work. Since I am guiding you through this process, I have already done this for you. However, when you sit down to create your own sites from scratch, make sure you take time to create this roadmap before you even open Dreamweaver MX 2004. Okay, you can exhale now and continue on. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual title layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web image description price developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from image one of the master teachers at Linda.com training. Using price a combination of projectdescription based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you price creating and through allimage the Dreamweaver MX 04description basics: navigating the new interface, managing Web sites, and linking among pages. You'll learn about frames image description price and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best description layout andimage typography practices. You'll also find extensive coverageprice of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics image description price editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. This is what the blueprint for this exercise looks like. This identifies the overall design of the page and gives you enough information to create the table you need in Dreamweaver MX 2004. Having this information before you start working in Dreamweaver M X 2004 is a huge timesaver. You can tweak things as necessary along the way. Now that you know what you need to create, roll up those sleeves and start creating! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. Open your Assets panel and locate the e01.gif file. Click and drag this image into the upper-left cell of the table. Use the following chart to insert the other five images. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'llfive alsoimages find extensive of all of Dreamweaver's 5. Use this chart to insert the other into the coverage proper table cells. This will newest features: dynamic cross-browser validation, improved CSS support, built-in graphics automatically adjust the size of your columns. editing, and more. Throughout, Garo shows you not just how to do something but why you're doingSince it andyou theonly results of three your actions. need columns, you need to get rid of one of the extra columns. In this case, there are two ways to go about doing this. You can merge the two middle columns together or you can delete one of them. I vote for merging them together–please raise your hand if you agree. Okay–merge wins! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 6. Click and drag to select the two middle cells in the first row. This iswhere the description of the glasses needs to go and you don't want that divided into two cells, so merging them into one is of a perfect solution. With its powerful combination visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 7. In the inspector, click theMerges selected cells using spans to editing, andProperties more. Throughout, Garo shows you not just how to do something butbutton why you're merger the two selected cells into one. Repeat this same procedure to merge the cells in doing it and the results of your actions. therows 2 through 6. Once you've merged the two middle cells for the entire table, it looks a bit more like the blueprint that was discussed earlier. You now have three columns. However, the size of the table cells is still wrong. You are going to learn how to fix that next. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Now that the overall structure of the table has been defined, it's time to talk about setting the column and cell widths. It's a good practice to set the widths for all of your columns and With its powerful combination of visual layout tools, application development features, and code table cells. This will ensure that Netscape 4 renders the table properly, even though very editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web few people are still using a version 4 browser. In case you don't know, Netscape 4 is developers. Here to get you hands-on with it fast is the definitive project-based training on the notorious for causing havoc with tables, especially those without proper width settings. You topic from one of the master teachers at Linda.com training. Using a combination of projectcan easily sidestep this problem by setting the widths for all your columns and table cells. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Besides, this is a good practice to follow to ensure your table renders well in all browsers. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Don't worry about setting the height for your columns and table cells. The content inside the managing Web sites, and linking among pages. You'll learn about frames and forms, cascading cells will determine how high they need to be, and that's the best way to handle that issue. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's There is another important issue to consider. The total of your column and table cell widths newest features: dynamic cross-browser validation, improved CSS support, built-in graphics should always equal (and never exceed) the size of your table. For example, if you have a editing, and more. Throughout, Garo shows you not just how to do something but why you're 400-pixel-wide table with two columns, the combined total of those two columns' widths doing it and the results of your actions. should equal 400 pixels, and never exceed 400. Again, this will ensure your table is rendered properly by most browsers. Okay, enough chitchat–It's time to put this newfound knowledge to use! 8. Click on the image in the first cell in the upper-left corner. In the Properties inspector, notice that this image has a width of 117 pixels. So, it makes sense to set the width of this column and all of its cells to 117 pixels, so the column is large enough to hold each image without taking up extra space on the page. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 9. Move your cursor over the edge of the first column until it turns into a dark arrow that points down. A thin red outline should appear around all of the cells in that column. Click to select that entire column.of visual layout tools, application development features, and code With its powerful combination editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 10. With the firstdynamic column cross-browser selected, in thevalidation, Properties inspector, the Wbuilt-in (width)graphics option to newest features: improved CSS set support, 117. Unless you specify % (such as 117%), the size always defaults to using pixels. Notice editing, and more. Throughout, Garo shows you not just how to do something but why you're that the bottomleft corner says Column, which lets you know you are modifying the doing it and the results of your actions. settings for the entire column. Note:When you set the width of an entire column, Dreamweaver MX 2004 is setting the width of every cell in that column to the size you specify. Earlier, I mentioned that the total combined size of all the columns cannot exceed the total size of the table. With this in mind, the table you inserted earlier in this exercise was set to 600 pixels. You just set the first column to 117, which now leaves you 483 pixels left for the other two columns . 11. Repeat the same process used in Steps 8 and 9 to set the middle column to 408 and the right column to 75. This will give you the necessary amount of space for the information that will eventually be placed in these columns. This is what your page should look like now. It now resembles the blueprint I showed you earlier. But wait, you are missing a row at the top for the title of the page. It's time to fix that. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 12. Click inside the top-middle cell. Choose Modify > Table > Insert Rows or Columns newest features: dynamic cross-browser validation, improved CSS support, built-in graphics to open upmore. this really useful feature. Set your options match screen shown here. This editing, and Throughout, Garo shows you not just to how to dothe something but why you're cause new row to beactions. inserted above the current selection, which is row 1 because doingwill it and thearesults of your that is where you placed your cursor. Click OK. 13. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 13. Click and drag to select all of the cells in the new row that was added. Use the Merge selected cells using spans button in the Properties inspector to merge these cells together. Since you want of to visual have alayout place tools, to addapplication a title, it makes sense tofeatures, make this one With its powerful combination development and code large cell so you can align your text nicely in the center. It also optimizes your table code a editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web bit, which results in a faster loading page! developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project14. Feel free to add some text toand theQuickTime middle and right cells and set the Page based lessons, guided exercises, tutorials, veteran author Garo Properties Green walkstoyou add a little color to this page. You can also use the techniques you learned in the through all the Dreamweaver MX 04 basics: navigating the new interface, creating andprevious exercise to add more color to this table. Experiment and have some fun here–that's one managing Web sites, and linking among pages. You'll learn about frames and forms, cascading sure way to learn! You can check out tabledone.html to see my finished table. ;-) style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 15. When you are done, save and close validation, this page. improved CSS support, built-in graphics newest features: dynamic cross-browser editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Movie firsttable.mov If you want to learn more about tables and see this exercise in action, be sure to watch the firsttable.mov located inside the movies folder on the H·O·T CD-ROM. 5 Aligning Images and Text with Tables Many people use tables to align images and text because they offer the ability to position artwork freely on a page. This next exercise shows you how to work with a page layout and modify the alignment through adjusting the height and width of table rows and columns. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 1. Open bodycopy.html. Press F12. This is a text file that has no table formatting. Resize the style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best browser window and watch how the width of the text within the document extends to the layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's width of the browser. This is default alignment behavior, and the problem with it is that it newest features: dynamic cross-browser validation, improved CSS support, built-in graphics can create very wide layouts on large monitors. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Most design experts agree that column widths should be limited in order to make reading text easier. You don't see books that are 21 inches across with text stretching side-to-side. That's because it's hard for people to read lines of text that extend more than 5 to 6 inches across the screen. In order to create a narrower column, you will need to learn how to create a table with fixed-pixel widths. 2. Return to Dreamweaver MX 2004. Right-click (PC) or Ctrl+click (Mac) the local root folder, in the Files panel, to create a new document and save it as align.html. Doubleclick on this file in the Files panel to open it. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 3. ChooseModify > Page Properties. In the General category, enter Title: Alignment with Tables. In the Appearance category, set the Background color to #DF9300 and theText color to #FFFFFF. Click Browse to the right of the Background Image field and browse to images/bkg_large.gif. Click Open. You will be returned to the Page Properties dialog box. Click OK. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Click the Insert Table button in theDocument toolbar and change the settings to Rows: 2,Columns: 3,Table width: 600 pixels (make sure this is set to pixels, not percent), and Border thickness: 0. Click OK. 4. The result of these settings should look like this. You are laying down the framework for a fixed-pixel table that is suitable for aligning objects. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 5. Select each column separately set the width of each to 200 pixels. through all the Dreamweaver MX 04and basics: navigating the newcolumn interface, creating andThis will createWeb three nice, fixed-width columns thatYou'll won'tlearn collapse in a browser. you have 3 managing sites, and linking among pages. about frames andSince forms, cascading set Fireworks to 200 pixels haven't exceeded theup table width of 600 pixels. style columns sheets, and andeach, Flashyou integration, and gobble Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 6. Choose Window > bodycopy.html (located atimproved the bottom of support, the Window menu, which newest features: dynamic cross-browser validation, CSS built-in graphics lists all more. the open documents). If shows for some bodycopy.html is not open, go ahead editing, and Throughout, Garo youreason not just how to do something but why you're open from the doingand it and theitresults of Site your window actions. ( F8). 7. Select and copy just the text that contains theaddress and contact information. The 7. previous image shows you the text that should be selected. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 8. ChooseWindow > align.html to bring forth the align.html document. Click inside column 2,row 1 and paste the text into that cell. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. Switch back to the bodycopy.html document by choosing Window > bodycopy.html. Note: If you are using Windows and have your document window maximized, you could go back and forth between these two documents by clicking on the small tabs in the upper-left corner of each document window. Select and copy the first paragraph. Switch back to the document with the table in it by choosing Window > align.html. Click inside column 2, row 2 and paste the text into that cell. The previous image shows what your page should look like at this point. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 10. Switch between the two documents, using the Window menu, to copy and paste the second paragraph into column 3, row 2 of the table, as shown above. Close bodycopy.html. You're finished withcombination copying andof pasting. With its powerful visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Notice that top you of column 2, row align with theproject-based top of columntraining 3, row 2? developers. Herethe to get hands-on with2 itdoes fast not is the definitive on This the is an example of default table formatting, which vertically centers the text in a table cell topic from one of the master teachers at Linda.com training. Using a combination of projectotherwise In order to fix this, you'll veteran need to author adjust Garo the table-alignment basedunless lessons, guided instructed. exercises, and QuickTime tutorials, Green walks you settings. The next step shows you how . through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. Click anywhere in the second row of the table. Click the <tr> tag in the Tag Selector to select the entire second row. Change the Properties inspector's Vert setting to Top. As you can see, this corrects the irregular alignment. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project12. Press F12 guided to preview the results. This layouttutorials, is starting to lookauthor good,Garo but the space based lessons, exercises, and QuickTime veteran Green walks you between the table cells feels a little cramped, doesn't it? through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. Return to Dreamweaver MX 2004 and select the table by clicking anywhere inside it and choosing the <table> element inside the Tag Selector. In the Properties inspector, enter CellSpace: 10. As you will see, CellSpace controls the amount of space between cells. Press F12 to preview the results. Here are the results of changing the CellSpace attribute. The change is subtle, but it is different. If you want to experiment further with this file, try changing the CellSpace or CellPad settings. You are in total control over the alignment of this page. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 14. Save and close all the open documents before you begin the next exercise. Note Using Rulers Rulers in Dreamweaver MX 2004 are helpful for getting a sense of scale. You can access rulers by choosing View > Rulers > Show. Note Fixed Pixels versus Percentages in Tables You can size your tables in two ways: by percentages or by pixels. A percentagebased table will stretch with the width of the browser, meaning that its size will vary depending on the size of the browser window. If you specify that a table uses a width of 75%, for example, it will stretch to fill three-fourths of the horizontal • space, regardless of the browser window size. This can be a great thing in some cases, but not in others. When you want to restrict the size of a table, regardless of the browser window size, pixel-based tables are the way to go. When you want the table to stretch to the size of the browser window, percentage-based tables are best. To complicate matters, it's possible to nest a pixel-based table inside a percentage-based table or vice versa. By the time you've finished the exercises in this chapter, you will have some concrete examples as to why and when to choose which type of table, and how to combine the two for more complex formatting. Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Note ByGaro Green, Lynda Weinman CellPad versus CellSpace Publisher: Peachpit Press Pub Date: December 22, 2003 Using CellPad and CellSpace settings alters the amount of space between table cells. CellPad adds room inside the cell, whereas CellSpace adds to the space ISBN: 0-321-20297-X between cells. When used with table borders set to 0, CellSpace and/or CellPad Pages: 720 achieve the identical result, by interjecting more space between the data and the edge of each cell. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The top table uses neither CellPad nor CellSpace, the middle table uses a CellPad setting of 10, and the bottom table uses a CellSpace setting of 10. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With colored table cells, the differences between CellPad (middle) and CellSpace (bottom) are more noticeable. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6 Percentage-Based Table Alignment In the last exercise, you worked with a table that was fixed at 600 pixels. When you want to control your alignment precisely, fixed pixels are the way to go. There's another way to achieve alignment with tables that is based on percentages. This next exercise uses percentage-based • Table Contents tables to create a of three-column layout that changes size relative to the size of the browser • Index window. This type of layout lets the people viewing your pages determine the layout that works • best for theirExamples eyes. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 1. Create a new document and save it into the chap_07 folder and name it stretch.html. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. ChooseInsert > Table and change the settings to Rows: 2,Columns: 3,Table width: 100 percent, and Border thickness: 0. For this exercise to work, it's imperative that the width be set to percent and not pixels. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With 3. its Merge powerful the top combination three cells ofinto visual one layout cell. tools, The top application row will contain development a title features, for the article, and code and editing thesupport, three columns Dreamweaver below will MX hold 2004the is sure bodytotext become of thethe article. constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic The fromsame one of sizing the master philosophy teachers of fixed-pixel at Linda.com tablestraining. also applies Using toapercentage-based combination of projecttables. basedThe lessons, total of guided the columns exercises, must and equal QuickTime and nottutorials, exceed the veteran size of author the table. GaroSince Greenthe walks tableyou through youall inserted the Dreamweaver is set to 100%, MX 04 youbasics: need to navigating size each the of the new three interface, columns creating to 1/3 and of that, or managing 33%.Web This sites, will give andyou linking threeamong equallypages. sized You'll columns learn that about stretch frames with and the width forms,ofcascading the style browser sheets, and window–sweet! Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 4. Click inside first cell in row 2. In itthe Tag select the <td> element toon select developers. Here the to get you hands-on with fast is Selector, the definitive project-based training the entire cell and access the available cell options. Set Using the Wa(width) optionof toproject33%. topic the from one of the master teachers at Linda.com training. combination Youguided have to enter theand % into the W tutorials, field so Dreamweaver MXGaro 2004Green knowswalks you want basedNote: lessons, exercises, QuickTime veteran author you a percentage size insteadMX of 04 pixels. through all the Dreamweaver basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 5. Repeat forand the Flash other integration, two cells in and row gobble 2. When are suggestions done, all three cells style sheets, this and process Fireworks upyou Garo's about best have a width of 33%. layoutshould and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Open the lipsum.html file inside the chap_07 folder. This file contains three paragraphs of lorem ipsum text. Lorem ipsum text has been used for years as placeholder text while a design project is being developed. Instead of using "insert text here" repeatedly, you can use lorem ipsum text that more closely resembles text that will eventually fill an area of the page. Lorem Ipsum Text • Table of Contents I am often asked where lorem ipsum text can be found. Apparently, a lot of Index people want to use it in their pages, as they are being developed, but have • Examples found it difficult to locate. Well, do I have a little gem for you! Point your Macromedia® Dreamweaver® MX 2004: Hands-On Training browser to http://www.lipsum.com, and there you will find an online ByGaro generator Green, Lyndaof Weinman lorem ipsum text–woo-woo! You can create it by the size, number of paragraphs, and others. This is such a great Web site! • Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. Copy the first paragraph of text on the lipsum.html page and paste it into the first column on the stretch.html page. Now, do the same for the second and third paragraphs. When you are finished, your page should look like the one shown here. Notice that the middle and right cell don't line up properly? There is an easy way to fix that! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With 8. its Click powerful and drag combination to select all ofof visual the cells layout in row tools,2.application In the Properties development inspector, features, setand the code Vert editing (vertical support, alignment) Dreamweaver optionMX to 2004 Top. is Problem sure tofixed. become ;-)the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. PressF12 to preview this page in a browser. Resize your browser and watch the text reflow. This stretchy, or sometimes called "liquid," type of design is loved by some and loathed by others. I like it because it lets the people viewing your site decide how wide they want the lines of text in each column. Some people like short lines and others like long lines–now everyone can be happy. This is just one example of percentage-based table alignment. As you can start to see–tables are a very powerful and flexible way to control the layout of your pages. This is just the tiny tip of the iceberg and will hopefully give you a good foundation for continuing your table knowledge. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here get you hands-on with it fast MX is the definitive training on the 10. To finish theto effect, return to Dreamweaver 2004 and setproject-based some of the Page topic Properties. from one of the master teachers at Linda.com training. Using a combination projectIf you want, set the background and text color as shown here orof use whatever basedcolors lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you you want–the Color Police aren't looking. ;-) through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing and linking among You'llPixel learnon about frames andanforms, cascading 11. Add aWeb titlesites, to the top row (I addedpages. The Daily my page with H1 format) and style try sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best formatting the table. Use what you learned in previous exercises and apply them here. layoutIt's and typography also find extensive coverage of all of Dreamweaver's a great way topractices. reinforce You'll this stuff. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. This is what my page looked like after I played around with it. I obviously have way too much free time. HeHe! I saved it inside the chap_07 folder as stretchdone.htmlin case you wanted a closer look at this amazing work of art–N OT! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to done, get you hands-on with it fast is the definitive on the 12. When you are return to Dreamweaver MX 2004. Save project-based and close this training file. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7 Combining Pixels and Percentages This next exercise demonstrates how to combine a pixel-accurate table with a percentage-based table. Why would this be important? Let's say that you had a navigation bar that you wanted to be center aligned regardless of whether it was seen on a small or large monitor. Combining • Tableofoftables Contents these two types lets you do just that. • Index • Examples 1. Create Dreamweaver® a new document and save it asTraining navbar2.html. Macromedia® MX 2004: Hands-On ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. ChooseInsert > Table and change the settings to Rows: 1,Columns: 1,Table width: 100 percent (not pixels!), and Border thickness: 0. Click OK. By using percent for width, the table will always be horizontally centered on the page. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 3. its Open the chap_07/navbar1.html and select table. Remember thatfeatures, you can click With powerful combination of visual layout tools, the application development and code anywhere in the table to access the Tag Selector in order to select it. With the editing support, Dreamweaver MX 2004 is sure to become the constant companion of table many Web selected, choose Edit Copy. This page contains a fixed-pixel, single cell training table with developers. Here to get you>hands-on with it fast is the definitive project-based onfive the images inside it. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Now switch over to navbar2.html and click inside the table cell. Choose Edit > Paste. This will paste the table with the five images inside the percentage table. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, exercises, and QuickTime veteran Green you 5. Select theguided table that you just pasted. Again,tutorials, if you click insideauthor it, youGaro can use thewalks <table> through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Tag Selector to select it. Notice there are two <table> tags in the Tag Selector now. This managing Webbecause sites, and among pages. You'll learn about frames and forms, cascading happens youlinking have one table nested inside another. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project6. With the nested bar)QuickTime table selected, change the Properties Align based lessons, guided(navigation exercises, and tutorials, veteran author Garoinspector Green walks you setting to Center. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 7. Preview in the browserand ( F12), you should see that the bar remains style sheets, and Fireworks Flashand integration, and gobble up navigation Garo's suggestions about best centered regardless of how wide you drag your browser window out. Congratulations again, layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's you've just made a nested table using a combination of pixels and percentages. Sounds newest features: dynamic cross-browser validation, improved CSS support, built-in graphics impressive, but even betterGaro thanshows that–it's editing, and more. Throughout, youuseful! not just how to do something but why you're doing it and the results of your actions. 8. Return to Dreamweaver MX 2004. Save and close the navbar.html and navbar2.html files. 8 Inserting Tab-Delimited Data As you just learned, creating tables from scratch can be quite a chore. So anything that helps streamline the process is a dream. Dreamweaver MX 2004 gives you the ability to easily insert delimited text files. This is great for people who use Excel and other office applications, because • Table Contents now it's simple to of get that data into Dreamweaver MX 2004. This exercise shows you how to • Index import a delimited text file into a table. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Open import.html. This is just a blank file that I created for you. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 2. Choose Insert > Table Objects > Import Tabular open thecreating Import and Tabular through all the Dreamweaver MX 04 basics: navigating theData new to interface, Data dialog box. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 3. Click and navigate tabdelimited.txt from coverage the chap_07 Click OK to layout andBrowse typography practices.toYou'll also find extensive of allfolder. of Dreamweaver's select that file. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Leave the rest of the settings at their default settings. Click OK. This will import the data into Dreamweaver MX 2004 inside a custom table. This is what your page should look like after it's been imported. Now you can use the skills you learned in the previous exercises to format the table to your own liking–or not, if you're getting bored of all this table talk! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX for 2004 sureexercise. to become the constant companion of many Web 5. Save and leave this file open theisnext developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Import Tabular Data Settings Even though you used the default settings in this exercise, you should know what the rest of the options mean. Here's a handy chart that explains what you can do in the Import Tabular Data dialog box. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver Import Tabular MX 2004 Data is Settings sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the Setting Function topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, QuickTime tutorials, veteran author Garo Green walks you Data file Use this and option to browse to the delimited through all the Dreamweaver MX 04 basics: navigating the new interface, creating and file on your hard drive. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Delimiter This option the type delimiter style sheets, and Fireworks and Flashspecifies integration, and of gobble up Garo's suggestions about best used in the imported file, such as coverage tabs or of all of Dreamweaver's layout and typography practices. You'll also find extensive newest features: dynamiccommas. cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Table width: Fit to This option will create a table large enough doing it and the results of your actions. data to fit the data in the imported file. Table width: Set This option lets you specify how wide to make the table that holds the imported data. You can choose either Percent or Pixel widths. Cell padding Controls the CellPad value for the table that holds the imported data. Cell spacing Controls the CellSpace value for the table that holds the imported data. Format top row You can apply a number of different formatting options to the first row of data in your table. Border Controls the table's border width. 9 Nested Tables and Borders As you learned earlier, it is possible to modify the size and appearance of table borders through changing the width and border in the Properties inspector. In this exercise, I show you how to produce an outline appearance around the border of the table. This technique isn't accomplished • Table of Contents through the Properties inspector; it's created instead through nesting tables. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and results of your actions. 1. The filethe from the previous exercise should be open; if it's not, go ahead and open the import.html file located inside the chap_07 folder. 2. Click to the right of the table to place your blinking cursor outside the table. 3. Click the Insert Table button in theCommon group in the Insert bar. This will open the Insert Table dialog box. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 4. Create a table with the following settings: Rows: 1, Columns: 1,Table width: 90 managing Web sites, and linking among pages. You'll learn about frames and forms, cascading percent, and Border thickness: 0. Your dialog box should look just like the one shown style here. sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Click OK. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doingThis it and results your should actions.look like after the new table has been added. Don't is the what yourofpage worry, you are going to make it look much better than this! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. its Click inside the new tableof you just layout created. In the Tag Selector, click the <table>and element With powerful combination visual tools, application development features, code editing to support, select theDreamweaver entire table. MX This2004 will display is sure the to become table options the constant in the Properties companion of inspector. many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic 6. In from theone Properties of the master inspector, teachers click at the Linda.com Bg color training. option Using and select a combination black. Theofcolor projectyou basedselect lessons, for the guided background exercises, will and also QuickTime be the color tutorials, of your veteran table borders. author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. Select the top tableusing the Tag Selector, just like you did in Step 5. In the Properties inspector, change the width to 100%,CellPad to 5, and the Border option to 0. 7. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 8. its Move your cursor to the upper-left corner of the table until a little white box appears at With powerful combination of visual layout tools, application development features, and code thesupport, end of your cursor. Then, click and drag upper table into the lower table. editing Dreamweaver MX 2004 is sure tothe become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through Your all nested the Dreamweaver tables should MX 04 look basics: like navigating the one shown the new here. interface, Everything creating will and turn managing black! Web Don't sites, worry, and linking you'll among fix thispages. soon.You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With 9. its Click powerful inside the combination upper-left of cell visual and layout dragtools, to select application all of thedevelopment cells in the table. features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. 10. In the Properties Here to get inspector, you hands-on setwith the Bg it fast color is the option definitive to white. project-based This will change training the on the topic background from one of of theeach master individual teachers cellattoLinda.com white so you training. can see Using your a text combination and the black of projecttable basedborders. lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. PressF12 to preview this page in your default browser. Here, you can clearly see how the inner table is used to color the border of the outer table. Pretty neat, huh? 11. 12. Click anywhere inside the table so the Tag Selector looks like what you see here. In the Tag Selector, click thesecond instance of the <table> tag to select the inner table. Table of Contents • • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 13. Try setting the CellPad and CellSpace of the inner table to 0. Then preview the page ISBN: 0-321-20297-X again in a browser. Another cool effect. Go ahead and experiment with other settings. You Pages: 720 can't break anything, so just have some fun. This is what the page looks like with the cell padding and cell spacing set to 0. As With its powerful combination of visual layout tools, application development features, and code you can see, by adjusting these two options, you can dramatically change the editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web appearance of the table border . developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 14. Return to Dreamweaver MX 2004. Save and close this file. 10 Rounded-Corner Tables Tables, like most things on the Web, are square. Images are square, frames are square, the browser window is square; it seems like almost everything on the Web is square. It's no wonder Web designers are always looking for ways to make things look less square. This handy little • Tabletoofmake Contents trick is one way your tables look less boxy. This is another one of those custom tricks • Index you might want to share with your friends, or perhaps not share with your competitors! • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open the rounded_done.html file located inside the chap_07 folder. This is the completed file for this exercise, so you can see the effect you're aiming for in this exercise. This is what the finished table looks like in the browser. Notice that as the browser window changes size, so does the table. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. PressF12 to preview this page in a browser. Go ahead and resize the window of your browser; notice how the table size adjusts with the size of the window. This occurs because thepowerful table is set to a percentage width, in tools, this case 75%. With its combination of visual layout application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 3. Return Here to Dreamweaver MX 2004.with it fast is the definitive project-based training on the developers. to get you hands-on topic from one of the master teachers at Linda.com training. Using a combination of projectthat you know where this is going, it's time to get started. The following basedNow lessons, guided exercises, andexercise QuickTime tutorials, veteran author Garo Green walkssteps you walk you through the whole process of creating this same table. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 4. Create newFireworks document and saveintegration, it inside theand chap_07 as round.html. style sheets,aand and Flash gobble folder up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX following 04 basics:settings: navigating the new interface,3,creating and 5. Create a new table with the Rows: 3,Columns: Table width: 75 managing Web sites, and linking among pages. You'll learn about frames and forms, cascading percent,Border thickness: 0, and Cell padding and Cell spacing of 0. Your dialog box style should sheets,look and just Fireworks and Flash integration, and gobble up Garo's suggestions about best like the one shown here. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 6. Click inside the upper-left cell. In the Properties inspector, set the Horz option to Left layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's and the Vert option to Top. This will ensure that the images you insert into this cell are newest features: dynamic cross-browser validation, improved CSS support, built-in graphics aligned in the upper-left corner of the cell. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With 7. its From powerful the Assets combination panel, locate of visual thelayout topleft.gif tools,file. application Click and development drag this image features, into the and code editing upper-left support, Dreamweaver cell. MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic 8. Click from inside one of the the upper-right master teachers cell.atInLinda.com the Properties training. inspector, Using a combination set the Horzofoption projectto basedRight lessons, andguided the Vert exercises, option to and Top. QuickTime This will tutorials, ensure that veteran the images authoryou Garo insert Green into walks this you cell through areall aligned the Dreamweaver in the upper-right MX 04corner basics: of navigating the cell. the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. From the Assets panel, locate the topright.gif file. Click and drag this image into the upper-right cell. 10. 9. 10. Click inside the lower-left cell. In the Properties inspector, set the Horz option to Left and the Vert option to Bottom. This will ensure that the images you insert into this cell are aligned in the lowerleft corner of the cell. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination of visual tools, application development features, and the code 11. its From the Assets panel, locate thelayout bottomleft.gif file. Click and drag this image into editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web lower-left cell. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from inside one of the the lower-right master teachers training. Using a combination project12. Click cell.atInLinda.com the Properties inspector, set the Horzofoption to basedRight lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you and the Vert option to Bottom. This will ensure that the images you insert into this through all the Dreamweaver MX 04 basics: navigating the new interface, creating and cell are aligned in the lower-right corner of the cell. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. From the Assets panel, locate the bottomright.gif file. Click and drag this image into the lower-right cell. 13. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 14. Click inHere the upper-middle cell. In theitProperties inspector, type 100%training for the Width developers. to get you hands-on with fast is the definitive project-based on the This cause the center at cell to expandtraining. with theUsing widthaof the table. of projecttopic option. from one of will the master teachers Linda.com combination based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 15. Useall the BgDreamweaver color option MX to sample the color of onethe of the images. Thisand will change through the 04 basics: navigating newgreen interface, creating the background of thatamong cell so pages. that it matches theabout cornerframes images. managing Web sites, color and linking You'll learn and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 16. Use this same process to color the other cells. When you are finished, your table should look like this. 16. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 17. PressF12 to preview this page in a browser. Resize the browser window. Notice how the With its powerful combination of visual layout tools, application development features, and code table changes size and the corners all stay in their correct positions. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 18. Return to Dreamweaver MX 2004. If you want to experiment, try adding some text to the topic from one of the master teachers at Linda.com training. Using a combination of projectmiddle cell. There are lots of variations on this technique. Save and close this file. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Phew, you made it again, another chapter under your belt! I don't know about you, but I managing Web sites, and linking among pages. You'll learn about frames and forms, cascading am wasted. Go get some ice cream and take a little break–you certainly deserve it after all style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best that work!! layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 8. Layout Tracing Images • • • Table of Contents Using Layers Index Examples Converting Layers to Tables Macromedia® Dreamweaver® MX 2004: Hands-On Training to ByGaroConverting Green, Lynda Tables Weinman Layers Creating Layout Tables and Layout Cells Publisher: Peachpit Press Pub Date: December 2003 In traditional layout22, programs, such as Adobe PageMaker, Adobe InDesign, and QuarkXPress, ISBN: 0-321-20297-X most people take it for granted that they can move blocks of text and images around almost anywhere the screen. Unfortunately, standard HTML doesn't contain any tags that allow you Pages:on 720 to easily position elements. You've learned how you can use tables to position your elements both horizontally and vertically on your Web pages with table settings, but creating a basic table still doesn't give you the precision you get in traditional print layout programs. This has caused considerable frustration among Web page designers. With its powerful combination of visual layout tools, application development features, and code Fortunately, Dreamweaver MX 2004 has built-in functions that help you work in a visual mode to editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web create precise alignment for your text and images. You'll learn how to align your images using developers. Here to get you hands-on with it fast is the definitive project-based training on the tracing images and layers, which you can then convert into tables that can be viewed on nearly topic from one of the master teachers at Linda.com training. Using a combination of projectany browser. Dreamweaver MX 2004 has an alternative layout feature called layout cells, which based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you gives you the freedom of absolute positioning while still conforming to XHTML table guidelines! through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, linking among pages.that You'll learn about frameselements and forms, cascading In this chapter, you'll and learn several techniques allow you to position anywhere on style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about your Web page, such as tracing images and layers, converting layers to tables, and workingbest with layout typography You'll also findthese extensive coverage of Dreamweaver's layout and tables and layoutpractices. cells. After completing exercises, you of canalldecide for yourself newest features: dynamic cross-browser validation, improved CSS support, built-in graphics which method you prefer when building your own pages. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Are Tracing Images, Layers, and Tables? The following chart outlines the concepts behind tracing images, layers, and tables, which you will learn about in the following exercises: • Table of Contents • Index Tracing Images, Layers, and Tables Defined Examples • Item Macromedia® Dreamweaver®Definition MX 2004: Hands-On Training By Garo Green , Lynda WeinmanAn Tracing image image (GIF, JPEG, or PNG) that can be loaded into the background of your Web page to serve as a reference for layout. Consider this the blueprint you Publisher: Peachpit Press follow to build your pages. Pub Date: December 22, 2003 LayerISBN: 0-321-20297-X This is where you put your text and images so you Pages: 720 can move them around freely. The downside to using layers is that they work only on 4.0 browsers and above. Table Tables can hold images and text in place, but they are not intuitive or flexible when it comes to With its powerful combination of visual layout tools, application development features, and code positioning them on the screen. However, editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Dreamweaver MX 2004 offers some helpful features developers. Here to get you hands-on with it fast is the definitive project-based training on the that give you more flexibility, including the ability to topic from one of the master teachers at Linda.com training. Using a combination of projectconvert layers to tables, and innovative table based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you drawing tools. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Applying a Tracing Image Imagine that you have mocked up a wonderful layout for a Web page in Photoshop, Fireworks, Illustrator, or any drawing or painting program of your choice. Wouldn't it be great if you could take that mockup and put it up on the Web? You could publish a giant image, but it wouldn't • Contents function as aTable real of Web page with links and optimized graphics. Dreamweaver MX 2004's tracing • Index image feature allows you to place any GIF, JPEG, or PNG into a tracing layer on your page, • Examples which you can then use as a reference to align your HTML elements to match up to it perfectly. Macromedia® Dreamweaver® 2004: Hands-On All you have to do is save MX your mockup as aTraining GIF, JPEG, or PNG, and you can work with it easily asGaro a tracing image. By Green, Lynda Weinman In this exercise, you will learn how to apply a tracing image to your Web page, as well as how to Publisher: Peachpit Press change its transparency and position on the page. You'll work with a tracing image that is Pub Date: December 22, 2003 supplied from the H·O·T CD-ROM. If you were to create your own tracing image, you would 0-321-20297-X create ISBN: a composition of your Web page in a graphics application of your choice, such as Pages: 720 Photoshop, Fireworks, Illustrator, or whatever, and save it as a GIF, JPEG, or PNG. You would then specify your design as a tracing image in Dreamweaver MX 2004, so that you could use it as your guide to re-create your page design. A tracing image is visible only in Dreamweaver MX 2004. Visitors to your site cannot see it. Keep in mind that when you are viewing the tracing image in Dreamweaver MX 2004 while building With its powerful combination of visual layout tools, application development features, and code your page, you cannot see the background image or background color you are setting, unless editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web you decrease the tracing image's transparency setting. You'll learn to do this in the following developers. Here to get you hands-on with it fast is the definitive project-based training on the exercise. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through allchap_08 the Dreamweaver MX 04 CD-ROM basics: navigating the drive. new interface, creating 1. Copy from the H·O·T to your hard Define the site forand Chapter 8 managing Web sites, and linking among pages. You'll learn about frames and using the chap_08 folder as the local root folder. If you need a refresherforms, on thiscascading process, style visit sheets, and Fireworks and 3, Flash integration, Exercise 1 in Chapter "Site Control." and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved support, built-in graphics 2. Open index.html. This page is empty except that its TitleCSS is Working with Tracing editing, and more. Throughout, Garo shows you not just how to do something but why you're Images. Choose Modify > Page Properties and click Category: Tracing Image. doing it and the results of your actions. 3. ClickBrowse next to theTracing image field. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. Browse to chap_08/images/tracingimage.jpg and click OK. Notice how the right side of thepowerful window gives you a preview the image other information, such as image With its combination of visualoflayout tools,and application development features, and code dimensions, file size, and download time estimated at 56k. Coolness. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. For this exercise, make sure the Transparency slider is at 100%. This will enable your tracing image to be visible in the document window of Dreamweaver MX 2004. 6. ClickOK to close the Page Properties dialog box. This is what your page should look like with the tracing image applied. It was inserted at 100% opacity in the Page Properties dialog box, which makes it opaque. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the Note topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Browser Offset through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading The white space you see above and to the left of the tracing image is the result of style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best an offset that Dreamweaver MX 2004 created. By default, this offset is X:8 Y:11. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's This means that the image is offset 8 pixels from the top and 11 pixels from the left newest features: dynamic cross-browser validation, improved CSS support, built-in graphics of the document. You can modify this offset by choosing View > Tracing Image > editing, and more. Throughout, Garo shows you not just how to do something but why you're Adjust Position. doing it and the results of your actions. Why does Dreamweaver MX 2004 introduce such an offset? The program is emulating what would happen in a Web browser. For some kooky reason, browsers do not display foreground images flush top and left, but that's exactly how they display background images–flush top and left. This means that any image in the foreground (meaning it is not a background image) will always be displayed in the browser with this offset. Dreamweaver MX 2004 allows you to get rid of the offset; however, the offset is intentionally there to show you how the foreground artwork will align in a Web browser. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Dreamweaver MX 2004 offsets tracing images from the top-left corner to emulate an offset that exists in Web browsers. You can get rid of this offset if you like by ISBN: 0-321-20297-X setting the margin settings in the Page Properties window, but those will only work Pages: in 720 4.0 and later Web browsers. I usually leave the offset alone, because it represents what will happen in a browser, anyway. If you have not accounted for this offset in the design of your tracing image, I suggest you don't change this setting. 7. PressF12 to preview this page in a Web browser. (If you have not defined a browser yet, thispowerful is explained in Chapter 2, "Interface.") Notice that the development page appearsfeatures, as a blank screen. With its combination of visual layout tools, application and code This is supposed to happen! tracing image appears in Dreamweaver 2004,Web and editing support, Dreamweaver MXThe 2004 is sure to become theonly constant companion MX of many it won'tHere be visible your end user. developers. to get to you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project8. Return to guided Dreamweaver MX and 2004 and choose Modifyveteran > Pageauthor Properties to access theyou based lessons, exercises, QuickTime tutorials, Garo Green walks tracing image settings again. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Pub Date: December 22, 2003 9. DragtheTransparency slider down to 50% and clickOK. With the opacity reduced, it's much easier to use the tracing image as a guide because it doesn't compete with foreground images and text that are by default set to full opacity. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, MX 2004 is sure become theexercise, constantin companion of many 10. Choose FileDreamweaver > Save and leave this file opentofor the next which you'll add Web developers. to getthis youlayout. hands-on with it fast is the definitive project-based training on the imagesHere to match topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Tracing Images, Background Colors, and Images Once you apply a tracing image to your page, it will hide the background color and background images while you are editing the document inside Dreamweaver MX 2004. However, if you view the page that contains the tracing image from a browser, the background color and/or • Table ofwill Contents background image be visible, and the tracing image will not. In other words, tracing images • Index are only visible to you while you're working in Dreamweaver MX 2004. This is a good thing, • because you Examples don't want people seeing your blueprint–you want them to see the final results. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Remember, the tracing image is an internal function of Dreamweaver MX 2004 to help you follow a preconceived layout. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2 Adding Layers In previous chapters, you have been putting artwork and text directly on your page or inside tables. With that method, you can right-, left-, or center-align elements, and that's the end of the story. This is frustrating because it would be much easier if you could stick that artwork or • Table Contentson the page and have it stay there. Layers are your friends, because text anywhere youofwanted • Index they can be positioned anywhere without restriction. Rather than simply placing artwork and • Examples text on a page, as you have been doing so far, you can put your content into layers and move it Macromedia® Dreamweaver® MX 2004: Hands-On Training anywhere you want. ByGaro Green, Lynda Weinman In this exercise, you will learn how to create layers on your page and insert images and text inside them. Then–presto, you'll be able to move everything around. Ahh, the beauty of layers! Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Withindex.html still open from the last exercise, choose Insert > Layout Objects > Layer. When a layer is selected, the layer handle and eight resizing handles will appear around the border of the layer. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Move your cursor over thelayer handle and click and drag to move the layer so that its With its powerful combination of visual layout application development features, and code upper-left corner aligns with the photo oftools, the Beverly photo that is visible in the tracing editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web image. Using the resizing handle, resize the layer so that it fits around the edges of that developers. Here to get you hands-on with it fast is the definitive project-based training on the image and around the word Beverly. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Green walks you 3. Click inside the layer. You should see a blinking I-beam cursor insideGaro the layer. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing sites, and linking among pages. You'll learn forms, cascading 4. In theWeb Assets panel, click the Images radio button to about select frames Image and Assets, if it's not style already sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best selected. Make sure the Site radio button is selected at the top of the Assets panel layoutasand typography practices. You'll also find extensive coverage of all of Dreamweaver's well. Select Beverly.gif and drag it into the selected layer. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. An image is now inside the layer. N otice how this image is darker, whereas the tracing image is screened back? That's because you set the tracing image's opacity to 50% in the last exercise. This makes it easy to distinguish between the layout and the final artwork, doesn't it? • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic 5. In from theone Insert of the bar, master switch teachers to the Layout at Linda.com category. training. Click Using the Draw a combination Layer object. of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. With the Draw Layer tool selected, draw a layer around the Melrose text and image. Make sure your blinking cursor is inside the layer and drag Melrose.gif into this layer. You've just inserted a layer by using the Insert panel instead of the Insert menu. Either way works fine, and you have now been exposed to both. Frankly, I use only the Draw Layer object because it lets me draw custom layers instead of forcing me to modify the default size. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 7. Add another layer around the South CoastYou'll text and can and use forms, either the Insert managing Web sites, and linking among pages. learnimage. about You frames cascading orand theInsert menu accomplish this. and Draggobble the Southcoast.gif image from thebest style panel sheets, Fireworks andtoFlash integration, up Garo's suggestions about panel into practices. this third layer. layoutAssets and typography You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. 8. So far you Herehave to get inserted you hands-on images into withlayers. it fast is Inserting the definitive text isproject-based just as simple. training Add another on the topic layer from one around of the themaster About teachers l.a.Eyeworks at Linda.com text panel training. on theUsing left side a combination of the page.of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through 9. Click allinside the Dreamweaver the layer andMX type 04the basics: text as navigating you readthe it on new theinterface, screen, or creating you can and open the managing styles.txt Web sites, file with andalinking text editor, among select pages. all the You'll text, learn copy about it, and frames paste and it into forms, thecascading layer. style Don't sheets, ever andsay Fireworks I didn't and do anything Flash integration, nice for you. and;-) gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest Normally features: you dynamic would now cross-browser format thisvalidation, text. However, improved for the CSS purpose support, of this built-in exercise, graphics don't editing, worry andtoo more. much Throughout, about matching Garo shows the type you of not the just original howlayout. to do something If you need but a refresher why you're on doingtype, it andrevisit the results Chapter of 6, your "Typography," actions. or check out the text formatting exercises in Chapter 9, "Cascading Style Sheets." This is what your page looks like now. Most likely, your text won't perfectly match the tracing image. That's all right–the tracing image is there only as a guide . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. 10. PressF12 Here to to preview get you this hands-on page in with a browser. it fast is Notice the definitive once again project-based that the tracing training image on the topic disappears. from one of Only the master this time, teachers you've atre-created Linda.comthe training. layoutUsing using alayers. combination When you of projectare basedfinished lessons,marveling guided exercises, at this accomplishment, and QuickTime tutorials, return to veteran Dreamweaver authorMX Garo 2004 Green andwalks save the you through file.all Leave the Dreamweaver this documentMX open 04 for basics: the next navigating exercise. the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doingMovie it and the results of your actions. layers.mov To learn more about using layers, check out layers.mov located in themovies folder on the Dreamweaver MX 2004 H·O·T CD-ROM. 3 Converting Layers to Tables You've just positioned artwork precisely to match a specific layout. As you may recall from the introduction to this section, layers display only on version 4.0 or later browsers. People using earlier browsers will see the content of the layers all jumbled up along the left side of your page, • Table is of Contents which, of course, not cool at all! I'm guessing that you want the luxury of freely positioning • Index artwork with layers, but still want people with older browsers to view your site. This exercise will • Examples show you how to convert layers to standard HTML tables, so anybody can see your perfect Macromedia® Dreamweaver® MX 2004: Hands-On Training layout, no matter what browser they're using. ByGaro Green, Lynda Weinman 1. Withindex.html still open from the last exercise, choose Modify > Convert > Layers to Publisher: Press Table.Peachpit The Convert Layers to Table dialog box will open. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not how to do something why you're 2. Click Table Layout: Most accurate. Check the just Prevent layer overlaps but check box. This doingsetting it and the results of your actions. is required because layers can overlap, but tables cannot. Leave the Use transparent GIFs option selected. This will insert a transparent GIF into your layout as neededto ensure that your table doesn't collapse in some browsers. Click OK. When you convert your layers to tables, by default Dreamweaver MX 2004 will set the table borders to 0. Why? You do not want to advertise that you are using tables. The 0 gives you an invisible border, creating the illusion of floating background images and text on your Web page . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Preview the results in a browser by clicking F12. Notice that in the browser you can't tell whether layers or tables were used. Converting layers to tables affects the compatibility of the HTML document, not the appearance. Return to Dreamweaver MX 2004. 4. 3. 4. For a final touch, choose Modify > Page Properties and change the Background color to #DF9300, or you can sample the orange color that surrounds the images. Set the Text color option to #FFFFFF, which is white. • • • This is Table more less what your page looks like now. The outcome of the new table of or Contents will vary depending on how the edges of the layer boxes are aligned . Index Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons,the guided exercises, and QuickTime author Garo seamless Green walks you 5. Preview results in a browser by clicking tutorials, F12. Nowveteran the images appear against through all the Dreamweaver MX 04 basics: navigating the new interface, creating and the background of the page. Return to Dreamweaver MX 2004. Save the file and leave it managing sites, linking among pages. You'll learn about frames and forms, cascading open Web for the nextand exercise. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Convert Layers to Table Options The Convert Layers to Table dialog box has several options to help you control how your layers are converted. The following chart explains how these features work: • Table of Contents • Index • Examples Convert Layers to Table Options Option Description Macromedia® Dreamweaver® MX 2004: Hands-On Training By Garo Green , Lynda Weinman Most accurate Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Smallest: collapse This default option creates a table cell for each layer and all the cells necessary to maintain the layer structure. More information about tables and cells can be found in Chapter 7, "Tables." empty This option sets the edges of the layers to align if they are within a certain pixel range of each other. This typically results in fewer columns and rows. This can be a good thing, because fewer columns and rows equate to or it can bedevelopment bad thing, features, and code With its powerful combination of faster visual downloading; layout tools, application because can potentially your companion of many Web editing support, Dreamweaver MX 2004 isit sure to become disrupt the constant layout's appearance. I recommend developers. Here to get you hands-on with it fast is the definitive project-based training on the experimenting to see which suits needs topic from one of the master teachers at Linda.com training. Usingyour a combination of projectbased lessons, guided exercises,best. and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Use transparent GIFS This option inserts transparent GIFs in each managing Web sites, and linking among pages. You'll learn about frames and forms, cascading of the empty cells. This helps maintain the style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best table structure across browsers. Tables can layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's collapse in some browsers if they don't newest features: dynamic cross-browser validation, improved CSS support, built-in graphics contain content, and transparent GIFs can fill editing, and more. Throughout, Garo shows you not just how to do something but why you're in as content, though they are invisible. doing it and the results of your actions. Center on page This option centers the table on the page. cells Prevent layer overlaps Table cells cannot overlap. This option prevents you from overlapping your layers by warning you about which layers, if any, overlap. Show layers panel This opens the Layers panel, which allows you to rename or reorder your layers. Show grid If it's not already visible, this will turn on the grid for the page. Snap to grid This snaps the layer to the nearest snapping point on the grid. This can be useful for aligning objects. 4 Converting Tables to Layers In this exercise, you will convert the table version of your page back to layers, modify the layout, and then convert it back to tables for browser compatibility. When you are finished, you should definitely appreciate how powerful these features are in helping you create and modify • Contents the layout of Table yourofpages. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Withindex.html still open from the last exercise, chooseModify > Convert > Tables to Layers. The Convert Tables to Layers dialog box will open. 2. Remove the checkmark in the Show grid and Snap to grid check boxes. If Snap to grid is checked, this option will force your layers to snap to a grid, sometimes causing unwanted shifting of page elements. For this reason, I prefer to not use this option. Make sure that your settings are like those shown here and click OK. Your table is converted into layers. Notice how Dreamweaver MX 2004 creates layers only for areas of your page that contain content–pretty flipping smart, if you ask me! If you want to change the layout, you'll find that it's much easier to do so with layers than with tables! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Click the layer that contains theMelrose image. Use the layer handle to drag this layer up so that the top of it aligns with the bottom of the Beverly image. Look, honestly, you can move any of the three images around. The idea is to change one of the layer's positions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaroNote: Green,When Lynda Weinman you select a layer, it becomes highlighted in the Layers panel. This is an alternate way to select the various layers on your page. If you double-click the Layer name, youcanPeachpit easilyPress rename it to something more relevant to its content. Of course, I am too laz y Publisher: toDate: do that right22,now. Pub December 2003 ;-) 4. Go ahead and move some of the other layers to different locations on the page. ISBN: 0-321-20297-X Pages: 720 Note:Make sure the Prevent overlapscheck box is checked in the Layerspanel. This will ensure that your layers don't overlap each other and prevent you from converting them to tables later. Go ahead—don't be shy, have some fun and move those suckers around the page! You might want to turn off the tracing image so it doesn't get distracting as you try With its newpowerful layouts.combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic This from is one of the master teachers Linda.com training. Using a combination projectwhat my revised layoutatlooks like in Dreamweaver MX 2004. I of turned off basedmy lessons, guided exercises, and QuickTime veteran Garo Green walks you tracing image because it started to tutorials, really bug me. Oauthor f course, your layout will through allmuch the Dreamweaver MX 04 basics: navigating look more professional than mine. ;-) the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. to get you hands-on with to it fast is the definitive project-based training on the 5. ChooseHere Modify > Convert > Layers Table. Click OK. This is what my layout looks like topic with fromtables one ofinstead the master teachers at Linda.com training. Using a combination of projectof layers. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through allF12 the to Dreamweaver navigating the new interface, creating and 6. Press preview the MX file 04 in abasics: browser. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks 7. Save and close the file.and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser improved built-in graphics You can start to see how easy it is tovalidation, change the layout ofCSS yoursupport, pages by converting back editing, more. Throughout, Garo shows youpossible not justdownside how to do but why you're andand forth between layers and tables. One to something using this workflow is that doingyour it and the can results of your get actions. table sometimes overly complex and may need to be optimized manually. You will have to make that decision based on the results of the layers to tables conversion . What Is the Layout View? Dreamweaver MX 2004 contains an alternative way to create the layout for your Web pages, called Layout view. The Layout view feature allows you to create layout cells and tables by drawing them exactly where you need them, at exactly the size you want. This technique was • of Contents 4 as a more visual way to design your layouts while creating table introduced inTable Dreamweaver • Index code behind the scenes. Although converting from layers to tables is convenient and easy, it • Examples does not write nested tables (tables that are within other tables). Instead, it must produce table Macromedia® Dreamweaver® Hands-On as Training code that is not as "clean"MX or 2004: as optimized possible. Layout cells and tables, on the other hand, written in a very clean manner and can include nested tables. By Garo are Green , Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Layers to Tables versus Layout View During the course of this chapter, you were shown how to create Web-page layouts using two different methods; first, with layers and then converting layers to tables. Next, you'll learn how to create layouts with the Layout view using layout cells and layout tables. At this point, you • Table of Contents might be scratching your head and wondering which one you should be using for your page • Index there are some pros and cons to both, much of it boils down to a matter of layouts. Although • preference. IExamples always suggest that you find a workflow that makes you comfortable and stick with Macromedia® Dreamweaver® 2004: Hands-On Training the same thing doesn't mean you have to it. Just because there are MX many ways to accomplish use them all. The Weinman following table outlines some of the pros and cons of each workflow. By Garo Green , Lynda Publisher: Peachpit Press Layers to Tables versus Layout View Pub Date: December 22, 2003 Item ISBN: 0-321-20297-X Pros Pages: 720 Layers to Tables Easy to use and do not require knowledge of table process behaviors and restrictions. Cons The table code generated in this is often overly complex. to save of a layer-based More difficult todevelopment create With its powerful Easy combination visual layout tools, application features, and code and table-based with editing support, Dreamweaver MX version 2004 isof sure tolayouts become thepercentage constant companion of many Web developers. Here your to getpage. you hands-on with it fast based-designs. is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectWill automatically create and based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you insertspacer.gif into your through all the Dreamweaver MX 04 basics: navigating the new interface, creating and layout. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Easy-to-create Fireworks and Flash integration, and gobble up Garo's about best Layout view layouts with Requires knowledge of suggestions table layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's percentage-based designs. behavior and restrictions. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Table code is optimized andyou not just how to do something but why you're editing, and more. Throughout, Garo shows very clean. doing it and the results of your actions. Will automatically create and insertspacer.gif into your layout. 5 Layout Tables and Layout Cells This exercise shows you how to use layout cells and layout tables to create a navigation bar that stretches with the width of the browser window. It combines the use of fixed table cells and percentage based table cells using the Layout Cell editor. Not bad for a day's work. ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 1. Open navbar_done.html located thehow chap_08 folder. Thisbut is the editing, andthe more. Throughout, Garofile shows youinside not just to do something whyfinished you're version of the file you will create in this exercise. doing it and the results of your actions. 2. Switch to the Layout group of the Insert bar and then click the Layout mode button. This will switch the view of your document to the Layout view. 3. 3. TheGetting Started in Layout Mode dialog box will appear. This is just a simple introduction and explanation of the Layout view, layout tables, and layout cells. Once you've read this, you probably won't want to read it again, so I suggest you select the Don't show me this message again check box. Click OK. • • • This is Table whatofthe page looks like in Layout view. Notice that the appearance of the Contents table has changed quite a bit. By the end of this exercise, you will know what this Index change in appearance means and how to work in this mode . Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 4. PressF12 to preview this page in a browser. Resize your browser window. Notice that the developers. Here to get you hands-on with it fast is the definitive project-based training on the text content stretches with the size of the browser window. This design is effective because topic from one of the master teachers at Linda.com training. Using a combination of projectit can accommodate almost any resolution. Woo-hoo! based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 5. Return to Dreamweaver MX 2004. Close navbar_done.html. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best The following steps will walk you through the process of creating this page using layout layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's tables and cells in the Layout view . newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're 6. Create a new document and save it inside the chap_08 folder as navbar.html. doing it and the results of your actions. 7. Use the Insert bar to switch to Layout mode, if you aren't already in that table mode. 8. Click the Layout Table icon on the Insert panel. This will let you draw a table cell in your document window. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 9. Starting from the upper-left corner of your document, click and drag to create a table that is approximately 575 x 200 pixels. Don't stress yourself out trying to get it exact. You will learn how to adjust the size in a few steps–just get as close as you can. You just created a table withoutcombination any table cells. The next few stepsapplication will show you how to add those. and code With its powerful of visual layout tools, development features, editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MXDraw 04 basics: navigating newwill interface, and 10. In the Insert bar, click the Layout Cell icon,the which let youcreating draw individual cells managing Web sites, and linking among pages. You'll learn about frames and forms, cascading inside the table. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. Starting in the upper-left corner of the layout table, click and drag to create a cell that has a height of 44 pixels and stretches across the entire width of the table. The bottom-right corner of the status bar will display the dimensions of the cell you are drawing–a very helpful bit of information! You can already start to see how much easier and different this process is than what you learned how to do in Chapter 7, "Tables." • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 12. Click the Draw Layout Cell icon again. Starting at the bottom-left corner of the cell you just created, draw another cell that is 248 x 42 pixels. Again, use the bottom-right status bar area to help you get the dimensions just right. You can also use the Properties inspector resize a selected cell.layout tools, application development features, and code With its powerfultocombination of visual editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. Select the Draw Layout Cell icon again. Draw another cell to the right of the last one that is the same width as the table. Your table should look something like the one shown here when you are finished. Tip Drawing Multiple Layout Cells As you work with the layout cells feature, you will find yourself creating several cells at once. However, each time you draw a cell, you need to reselect the Draw Layout Cell object before you can create another one. This can get annoying and slow down your workflow quite a bit. Don't worry, there is a solution! If you hold down the Ctrl (Windows) or Cmd (Mac) key while you draw a layout cell, you can draw as many cells as you want without having to reselect the object each time. Nice. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project14. Click the green Table tab in the upper-left to select layout table. Click based lessons, guidedLayout exercises, and QuickTime tutorials,corner veteran authorthe Garo Green walks you and drag the bottom-right resize handle at the bottom of the table to bring it up to the through all the Dreamweaver MX 04 basics: navigating the new interface, creating and bottom of sites, the cells. will remove the extra and unnecessary space at the bottom managing Web andDoing linkingthis among pages. You'll learn about frames and forms, cascading of the table. You don't want the table to be any bigger than necessary. Your table should style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best like the one shown here. layoutlook andexactly typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 15. Click the border of the large cell shows on the you top not to select it. Notice that as youbut move your mouse editing, and more. Throughout, Garo just how to do something why you're over a layout cell, the border turns red. This shows you which cell you are about to select. doing it and the results of your actions. In the Properties inspector, change the BG color of this cell to #FFFFFF, which is white. 16. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 16. Using the same procedure, set the BG color of the bottom two cells to #DF9300. This is a lovely shade of orange. Okay, maybe some people won't think its lovely, but I do. ;-) With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 17. Click inside the bottom-left cell and insert the logo.gif image into that cell. I suggest dragging it from the Assets panel, since that's my preferred method of adding images to a page. You can use any method you are comfortable with. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 18. Click inside the bottom-right cell and insert the about.gif, frames.gif, locations.gif, and contact.gif images into that cell. When you're finished, your page should look just like the one shown here. Hmm, things are starting to come together nicely. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 19. Move cursor over the edge ofalso the bottom-right cell until of theallcell turns red. layout and your typography practices. You'll find extensive coverage of border Dreamweaver's Click to select that table cell. In the validation, Propertiesimproved inspector, set the Horz alignment option newest features: dynamic cross-browser CSS support, built-in graphics toRight. This Throughout, will cause all Garo of theshows navigation buttons to align the right side of the table editing, and more. you not just how to doto something but why you're doingcell. it and the results of your actions. In the next steps, you will learn how to make one of the columns in the table auto stretch. This will make one of the columns "stretch automatically" with the width of the browser window. Normally, in order to make one column auto stretch, you need to use a spacer.giffile to hold the other columns open. A spacer.giffile is simply a 1 x 1 pixel transparent GIF that is set to whatever size is necessary. You can think of this as an invisible image that acts like a steel bar to force the other columns to a specific pixel size. Using this method will ensure that the fixed-width table columns don't collapse in some older browsers. However, in this exercise, the bottom-left column already contains an image that is set to the same size as the column, so Dreamweaver MX 2004 doesn't need to use a spacer.gif. However, if the bottom-left cell were empty, Dreamweaver MX 2004 would prompt you to insert a spacer.gifinto that column. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 20. Click the small arrow at the bottom of the bottom-right cell. This will open the column options menu. Choose Make Column Autostretch. The lines at the bottom of the columns will change. The following chart explains what these different lines mean. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 21. When the Choose Spacer Image dialog box opens, select the Create a spacer image file option. This will make Dreamweaver MX 2004 create a single-pixel transparent GIF file, in case you don't have one already created. If you do have one already created, you can choose the second radio button. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 22. Browse toof the chap_08/images folder and save thespacer.gif file inside this topic from one the master teachers at Linda.com training. Using a combination of folder. projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Note layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Spacer GIF Options editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and In order the results to prevent of your theactions. table from collapsing in some browsers, Dreamweaver MX 2004 needs to insert an invisible GIF inside the cells with no content. Don't worry if you don't have an invisible GIF file, Dreamweaver MX 2004 will even create one for you. The following dialog box displays the different options available to you. Anatomy of Layout Cells Notice that the tops of all the cells have changed. The following chart explains what each of these different visual cues mean. • Table of Contents • Index • Examples Anatomy of Layout Cells Item Description Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X A layout cell with a numeric value displayed at the bottom means that the cell has a specific width value set in pixels. This value can be changed with the resize handles or in the Properties inspector. Pages: 720 A layout cell with a numeric value and thick double lines is an indication that the cell is set to a specific pixel value, and it also contains a spacer.gif. This occurs when another column has been set to Autostretch. With its powerful combination of visual layout tools, application development features, and code A layout cell with a little squiggle at the top editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web is an indication that the column has been set developers. Here to get you hands-on with it fast is the definitive project-based training on the to autostretch, which means it will stretch to topic from one of the master teachers at Linda.com training. Using a combination of projectfill the remaining horizontal space in the based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you browser window. This setting can be through all the Dreamweaver MX 04 basics: navigating the new interface, creating and changed to a fixed-pixel value in the managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Properties inspector. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 23. ChooseModify > Page Properties and set the Background color to #DF9300. Set all four margin options to 0. Click OK. 23. Your page should look just like the one shown here. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 24. PressF12 again to preview this page in a browser. Voilà, your table will now stretch to the width of the browser window. Whoa–if you are previewing the page in IE 6 like me, you should notice the little gap along the right side of the screen! That's so not cute–the next few steps will show you how to get rid of that. An easy way to fix this gap problem is to insert a background image that has a white bar along the top of the page that is the same height as the nav bar graphics. Guess what? I created one for you already–all you need to do is add it to the page! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 25. ChooseModify > Page Properties. Click the Browse button next to the Background image field and browse to the images/bg.gif file. Click OK to select that image. Click OK again to close the Page Properties window. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 26. PressF12 again and you will notice that the annoying little gap is gone. Woo hoo! We don't want no stinking gaps on our pages, do we?! Hehe. 27. Return to Dreamweaver MX 2004 and save and close this file. Movie layoutview.mov To see this exercise in action, check out layoutview.mov located in themovies folder on the Dreamweaver MX 2004 H·O·T CD-ROM. • Table of Contents • Index You finished yet another chapter... congratulations. You might want to take a short break before • moving onto Examples Chapter 9, "Cascading Style Sheets." It's a whopper of a chapter! Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 9. Cascading Style Sheets Redefining HTML with Style Sheets • • • Table of Contents Making Classes Index Examples Using Selectors Macromedia® Dreamweaver® MX 2004: Hands-On Training Links with Selectors ByGaroAffecting Green, Lynda Weinman Linking to a Style Sheet Publisher: Peachpit Press Pub Date: December 22, 2003 Creating CSS Rollovers ISBN: 0-321-20297-X CSS, which stands for CascadingStyleSheets, is a standard defined by the WorldWideWeb Pages: 720 Consortium (W3C) that offers a more flexible and accurate way to define the appearance of your text and formatting than conventional HTML. If, for example, you wanted all the text in your document to be blue and all the headlines to be green, with HTML you would have to go through the elements on the page one by one and assign those colors to the text using font tags, which can clutter up your pages. Using style sheets, you can redefine all the elements in the entire With its powerful combination of visual layout tools, application development features, and code document (or an entire Web site!) to turn blue with just one CSS rule and then perform the editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web same single step for the headlines to turn green. You can even use CSS to control the color and developers. Here to get you hands-on with it fast is the definitive project-based training on the background image for a page, and you will learn how to do that in this chapter. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided offers exercises, QuickTime tutorials, veteran author Garo walks you The CSS specification moreand control over type than HTML. With styles, youGreen can specify the through all the Dreamweaver MX 04 basics: navigating the new interface, creating and amount of space between lines of type (called the line height in Dreamweaver MX 2004), the size managing sites,instead and linking among pages. You'll learn about frames and forms,Anyone cascading of the typeWeb in pixels of points, and specific fonts for specific page elements. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about yearning for more control over typography is going to be drawn to using styles as opposed best to the layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's type attributes discussed in Chapter 6, "Typography." newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, Throughout, Garo than shows you not just how do something why But CSS and can more. help you do much more just control type onto your page. With but CSS, youyou're can doing it and the results of your actions. create rollovers that would normally require a bunch of images and JavaScript. You will get a chance to do just that in the last exercise of this chapter. CSS can even be used to lay out out entire Web pages. CSS has come a long way, and with much improved browser support today, you should definitely be using CSS on all your Web pages unless you have a very specific reason not to! Levels of CSS You should know that the W3C has released two recommendations for Cascading Style Sheets, CSS1 and CSS2. The CSS1 recommendation was formalized on December 17, 1996, and revised on January 11, 1999. It contains about 50 properties. The CSS2 recommendation was formalized • Table of on May 12, 1998. ItContents contains about 120 properties, including those of the CSS1 • Index recommendation. I suggest that you take the time to read these recommendations to learn • Examples what's possible with CSS, see CSS code examples, and learn about compatibility issues. Macromedia® Dreamweaver® MX that 2004:these Hands-On Training are really technical and make for boring However, I should warn you documents reading. If you can't make any sense of them, you should invest in a good CSS book. I really like By Garo Green , Lynda Weinman Eric Meyer on CSS, written by Eric Meyer. Another great CSS book is Cascading Style Sheets–Designing for the Web (Second Edition), written by Hakon Wium Lie and Bert Bos. Publisher: Peachpit Press Date: 22, 2003 YouPub can findDecember the recommendations online here: ISBN: 0-321-20297-X http://www.w3.org/TR/REC-CSS1 Pages: 720 http://www.w3.org/TR/REC-CSS2 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Cascading Part of Style Sheets The term "cascading" in style sheets has to do with how browsers interpret your style sheet. Sometimes, when multiple style sheets are used (such as embedded and external, which you'll learn about very soon in this very chapter!), conflicts arise, and the browser has to know which • of Contents style sheet toTable honor. The "cascading" part of CSS has to do with which rules the browser follows • Index when it encounters conflicting CSS information. The rules are complex, and describing them here • Examples would require more space than I have room for in this book. If you are interested in learning Macromedia® Dreamweaver® MX "cascading" 2004: Hands-On Training visit more about the rules for the structure, http://www.htmlhelp.com/reference/css/structure.html. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Types of Style Sheets Before you jump right into the exercises in this chapter, you should have some background information about the different types of styles and when you would use each. Knowing the differences among them is important so that you can decide which one is best for your Web • ofbelow Contents projects. TheTable table outlines the different types of style sheets. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Types of Style Training Sheets ByGaro Green, Lynda Weinman Style Sheet Type Description Embedded Publisher: Peachpit Thistype of style sheet is an internal part of the document. All of the code is written inside the <head> tag of the document and affects only this one page. Some sample embedded CSS code looks like this: Press HTML Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 <style type="text/css"> <!-With its powerful combination of visual layout tools, application development features, and code h1 {color:blue; font-family: verdana} editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the --> teachers at Linda.com training. Using a combination of projecttopic from one of the master based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you </style> through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading This type of style sheet is useful if you want to apply style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best this style to a single page only. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamicExternal cross-browser validation, improved support, built-in graphics External (Linked) style sheets, also referred to CSS as "linked" editing, and more. Throughout, shows not just how do something but why you're styles, Garo are the mostyou powerful type ofto style sheet. doing it and the results ofOne your actions. file can be used to format hundreds, thousands, and even millions of pages. Then, with one change, all of those pages can instantly be changed to have a new style. The contents of an external CSS file look just like the embedded code, except that they are not part of the HTML page. Instead, they are stored in a separate file with a .css extension instead of an .html extension. This file simply contains a list of styles with no other HTML code. Instead of embedding the code in the HTML document, you make a link to the external CSS file. Here's an example: <link href="mystyles.css" rel="stylesheet" type="text/css" /> Inline Thistype of style sheet is useful when you have multiple pages that share the same style(s). Inline styles are similar to embedded styles in that they are part of the HTML document. However, they are written directly in the <body> of the page, not the <head> section. This is what some sample code would look like: • Table of Contents • Index • Examples <body> <h1 style="color: orange; font-family: verdana">This is some Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman sample text.</h1> Publisher: Peachpit Press </body> Pub Date: December 22, 2003 ISBN: 0-321-20297-X </html> Pages: 720 Inline styles are much less powerful than embedded and external style sheets. Why? Because if you ever want to change the style, you will have to do it every place the inline style appears in your document. Inline styles do have a purpose, With its powerful combination of visual layout tools, application development features, and code however. For example, they can used to override editing support, Dreamweaver MX 2004 is sure to becomebe the constant companion of many Web styles from an external style sheet. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver 04not basics: new interface, creating and have to Note: Dreamweaver MX 2004MX does havenavigating any way ofthe creating inline styles. You will managing Web sites, and linking among pages. You'll learn about frames and forms, cascading know the correct syntax and enter the code manually. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Anatomy of a Style Sheet The anatomy of a style sheet includes some terminology that is likely new to you, such as declarations and selectors. Here are some examples of how these terms relate to style sheet programming. • Table of Contents • the very core Indexof CSS are rules. Here is an example of a simple CSS rule: At • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 Rules consist of two parts: the selector and the declaration. In this example, the <h1> tag is the ISBN: 0-321-20297-X selector– it selects elements of<h1> to modify. The information within the brackets is the Pages: 720 declaration–it modifies how the selector is being styled. This is an example of a CSS declaration: With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided QuickTime tutorials, author Garo walks Thedeclaration has twoexercises, parts: theand property and the value. veteran In this example, the Green property setsyou the through all the Dreamweaver MX 04 basics: thetonew interface, creating and color of the <h1> tag that is being styled. Thenavigating value is set green, which specifies how the managing sites, and linking among pages. You'll learn about frames and forms, cascading property isWeb being modified. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. CSS Preferences in Dreamweaver There is one very important thing you need to know before reading any further. By default, Dreamweaver MX 2004 is set up to use CSS for all formatting on your Web pages, including the page properties and basic text formatting. While this is a great way to work, there are some • Table of ifContents potential problems you aren't aware of this up front. First, you could be creating and using • Index CSS to format your pages without even knowing it, especially if you are new to Dreamweaver MX • Examples 2004. Second, the default CSS preferences in Dreamweaver MX 2004 are set to create Macromedia® Dreamweaver® MX 2004: Hands-On Training embedded style sheets, which is not the best way to work in most cases. ByGaro Green, Lynda Weinman Now, you can disable the preference shown below and take more control over how CSS is created and added to your pages, or you can use the workflow outlined in the first two exercises. Publisher: Peachpit Press Doing this, however, will result in XHTML formatting tags that are no longer accepted as Web Pub Date: Also, December 22, several 2003 standards. since CSS elements remain on the Properties inspector, it becomes very easy toISBN: mix0-321-20297-X HTML tags and CSS formatting. If you are new to Dreamweaver MX 2004, I suggest 720 the first two exercises carefully and perhaps turn this preference off later when you goPages: through you are more familiar with CSS and Dreamweaver MX 2004. For purposes of this chapter, make sure this check box is checked! The CSS instead of HTMLoftags option Generaldevelopment category offeatures, the WithUse its powerful combination visual layoutwithin tools, the application and code Preferences controls whether CSS or HTML is used to format various parts editing support, Dreamweaver MX 2004 is sure to become the constant companionof of your manyWeb Web pages. By default, thisyou option is enabled, which means that project-based CSS will be used to control developers. Here to get hands-on with it fast is the definitive training on the even the most formatting, such as the background and atext colors . of projecttopic from one ofbasic the master teachers at Linda.com training. Using combination based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 CSS and Page Properties This exercise will give you a gentle introduction to CSS in Dreamweaver MX 2004. Before you yawn and roll your eyes, let me point out that this exercise is going to cover a lot of information. You will see how CSS can be used to almost transparently control the basic formatting of a Web • Table of Contents page. By default, Dreamweaver MX 2004 is set to use CSS instead of HTML tags to handle the • Index formatting of a Web page. For example, by simply setting the various page properties, • Examples Dreamweaver will automatically create an embedded style sheet to handle these formatting Macromedia® Dreamweaver® MX exercise, 2004: Hands-On tasks. As you will see in this it canTraining be very easy to separate the structure of a page from presentation with CSS. By Garoits Green , Lynda Weinman Peachpit Press 1.Publisher: Copychap_09 from the H·O·T CD-ROM to your hard drive. Define your site for Chapter 9 Pub Date: December 22, 2003 using the chap_09 folder as the local root folder. If you need a refresher on this process, ISBN: 0-321-20297-X visit Exercise 1 in Chapter 3, "Site Control." Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. ChooseEdit > Preferences (PC) or Dreamweaver > Preferences (Mac). Under the General category, make sure there is a check in the Use CSS instead of HTML tags check box. This tells Dreamweaver MX 2004 to use CSS to format your page and not deprecated HTML/XHTML tags. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become thechap_09 constant companion many Web 3. Open the pageproperties.html page located inside the folder. Thisof page developers. Here to get you hands-on with it fast is the definitive project-based training ontables. the contains some basic HTML elements, such as those used to format text, images, and topic No from one of the master teachers at Linda.com training. Using a combination of projectother formatting is applied to the elements on this page. Of course that also explains basedwhy lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you it looks so bad. ;-) through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. In the Properties inspector, click Page Properties to open the Page Properties window. This is the quickest way to access these options. Note: you can also use the menu commandModify > Page Properties to open the same window. Before you start poking around the various page properties options, it's really important that you understand exactly what you are about to do here. To the casual eye, it would appear that you are doing nothing more than setting some very basic formatting options, such as background color, text color, background image, and so on. But, in fact, you are doing much more than that. By setting the page properties in this window, you are asking Dreamweaver M X 2004 to create an embedded style sheet and apply those styles to the various elements on the page. Also, remember that using the workflow in this exercise sets these options for the entire page. For example, if you choose a font list in this window (which you will be asked to do in the next step!), such as Verdana, Arial, Helvetica, sans-serif, that font list will become the default font for all the text on your page. As you are about to see, with just a few clicks of the mouse you can create a rather complex and visually pleasing internal style sheet . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. From the Page font drop-down menu, choose Verdana, Arial, Helvetica, sans-serif. This will determine what font is used by default to display the text on your page. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Set the Size option to 12 pixels. This will set the default size of the text on your page to 12 pixels, which is a nice size for most large bodies of onscreen text. 7. Set the Text color option to #FFFFFF, which is the hexadecimal value for white. Set the Background color option to #DF9300, which is a lovely shade of orange. Now that you've set the basic page formatting options, it's time to format the links on the page–woohoo! Note:You can preview the settings by clicking Apply. This lets you see the changes to your pages without closing this window . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Date:the December 2003 in the Category pane to change to options in this window. All of 8.PubClick Links22, option these ISBN: options 0-321-20297-X control how the links on your Web page appear. Pages: 720 I like the way the CSS Page Properties window is organized into various categories. This gives you quick access to a lot of features without causing hysterical blindness . 9. Click the B button to the left of the Link font drop-down menu. This will apply a bold style to all of the links on your page. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web I believe it's always nice to draw attention to links. I mean, why would you want to hide developers. Here to get you hands-on with it fast is the definitive project-based training on the something you want people to click on? ;-) topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. Set the Link color option to #0000FF and set the Visited links option to #99CCFF. The Rollover links option is used only if you want the color of the links to change when the user mouses over them. Well, is that what you want? OK, go ahead and set the Rollover links option to #00FFFF. I never set the Active links on my pages, but you can if you want to. The Active link color appears when the mouse is depressed, so it is less important than the link color that appears before or after the link is clicked on. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 11. TheUnderline style option lets you control what happens to the line underneath the links when the user mouses over them. By default, this option is set to Always underline, which will cause the underline to always remain there. From this drop-down menu, choose Hide underline on rollover. As you can probably guess, this will cause the underlines to hide when the user mouses over the link.tools, application development features, and code With its powerful combination of visual layout editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 12. ClickOKHere to accept settings and Page Properties window. training on the developers. to get these you hands-on withclose it fastthe is the definitive project-based topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and And with a single of among the mouse, once ugly page has been instantly managing Web sites, andclick linking pages.this You'll learn about frames and forms, cascading into something more–well, orange. ;-) style transformed sheets, and Fireworks and Flashmuch integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. PressF12 to preview your page in the primary browser. While Dreamweaver MX 2004 does a great job of rendering CSS code in Design view, there are some things it cannot render, such as the Rollover link color and underline effects. When you are done marveling at your hard work, exit the browser and return to Dreamweaver. Even though you may not have been thinking about it or even aware of it, Dreamweaver MX 2004 was building an internal CSS as you fuddled with the various page properties settings. Heck, you didn't even have to do anything except pick a few colors and options. This is a great example of how Dreamweaver MX 2004 encourages you to use CSS to control the formatting and presentation of your Web pages. I think this change to Dreamweaver is great because it's about time more Web designers embraced CSS and made it part of their production process. • Table of Contents All of this CSS code was created by Dreamweaver MX 2004 automatically, and Index because it was placed inside the <head>tag of this document and only affects the Examples formatting of this one document, it is referred to as an embedded style sheet . • • Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Tip Instant CSS Reference If you are new to CSS or just need a quick reference, you might be happy to know that Dreamweaver MX 2004 includes a copy of the O'Reilly CSS reference guide (and a bunch of other O'Reilly guides)! How convenient is that? No more lugging around fat books. It is really simple to access, too. In the toolbar, click the Reference button, which will open the Reference panel–go figure. The Reference panel gives you really quick access to the O'Reilly CSS reference guide and a bunch of other ones, too. 14. Click the Code button in the Document toolbar to display the code for this page. If you have to, scroll to the top of the page (about line 30) so you can locate the internal CSS code. Take a moment to read through the CSS code that was generated. I think you will find that it's pretty easy to read and follow. 15. 15. Click the Design button in the Document toolbar to return to the visual editing environment. There you go folks–you have made it through your first CSS lesson, and you didn't even have to type a single line of code–sweet! While this exercise was a great introduction to CSS in Dreamweaver MX 2004, there is one potentially serious problem with using this workflow. Using CSS to set the page properties is a great Table thingoftoContents do, but this technique forces you to create an embedded style sheet without • your express knowledge. This prohibits you from utilizing one of the most powerful features • Index of CSS: the ability to apply the same styles to multiple pages. If you want all of the pages in • Examples your site to use the same page formatting options that you set up in this exercise, you Macromedia® Dreamweaver® MX 2004: Hands-On Training should use an external style sheet. Why? Because then you only have to define the CSS ByGaroonce Greenand , Lynda Weinman then apply it to other pages via a link. Using the workflow in this exercise requires that you repeat this process for every page in your site, which is a very inefficient way to work. Peachpit Press Publisher: Pub Date: December 22, 2003 Don't There's an easy solution! The next exercise will show you how to export the ISBN: panic! 0-321-20297-X CSS code from this page to an external style sheet and then apply that style sheet to other Pages: 720 pages. This will give you a real-world look at how things should really be done and still let you use this convenient work-flow to get there . 16. Save the changes to this file and leave it open for the next exercise. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Movie through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading csspreferences.mov style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's To learn more about the CSS preferences and default settings,built-in check graphics newest features: dynamic cross-browser validation, improved CSS support, out csspreferences.mov located in the movies folder on the editing, and more. Throughout, Garo shows you not just how to do something but why you're Dreamweaver MXactions. 2004 H·O·T CD-ROM. doing it and the results of your 2 Exporting and Linking External CSS Files One of the most powerful features of CSS is the ability to link a single external CSS file to multiple pages. This results in consistent formatting and an incredibly efficient and fast workflow. In the previous exercise, because of Dreamweaver's defaults, you were forced to • Table of Contents create an embedded style sheet when you set the various page properties. In this exercise, you • Index will learn how to export the CSS from that page into an external CSS file and then apply the • external CSSExamples file to multiple pages. This exercise will clearly show you why external style sheets Macromedia® Dreamweaver® MX 2004: Hands-On Training are as powerful as most people claim. ByGaro Green, Lynda Weinman 1. Thepageproperties.html page should still be open from the previous exercise. If it's not, Publisher: Peachpit open that filePress now. Pub Date: December 22, 2003 0-321-20297-X IfISBN: a page already contains an internal style sheet, the process to convert that into an external Pages: 720style sheet is pretty straightforward. Basically, you just export the CSS information into an external CSS file, remove the embedded CSS from the page, and then link the page to the newly exported CSS file. The next few steps will walk you though this process . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. ChooseFile > Export > CSS Styles. This will open theExport Styles As CSS File window. Browse to the stylesheets folder inside the chap_09 folder. You can save this file anywhere within the local root folder for the site, but I like keeping all of my style sheets in one folder. It helps keep things neat. Save this file as mystyles.css. Be sure to include the .css file extension. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 sure to become the constant companion of many Web 3. Even though you just exported the is style sheet information to an external file, the developers. Here to get you hands-on with it fast is the definitive project-based training on the pageproperties.html document remains open in Dreamweaver. Click the Code button in topic the from one of the master teachers at Linda.com training. Using a combination of projectDocument toolbar to view the code for this page. If necessary, scroll up the page to basedline lessons, guided Even exercises, and QuickTime tutorials, veteran Garo Green 30. Ah-hah! though you just exported the CSS codeauthor from this page intowalks an you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and external CSS file, the embedded style sheet code is still here. Since you just created an managing WebCSS sites, among pages. You'll about and forms, external fileand andlinking are going to link to that filelearn to apply theframes formatting to this cascading page and style others, sheets, there and Fireworks and Flash integration, and gobble up Garo's suggestions is no need to have the embedded CSS here. In fact, it can actuallyabout causebest you layoutproblems and typography practices. You'll also find extensive coverage of all of Dreamweaver's later on by causing conflicts with the external style sheet. It's best to get rid of it newest features: validation, improved CSS support, built-in graphics and use onlydynamic the newcross-browser external CSS file. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the resultsbutton of your 4. Click the Design inactions. the Document toolbar to return the visual editing environment. 5. Open your CSS Styles panel by choosing Window > CSS Styles. The CSS Styles panel will identify all internal and external CSS code for the page that is currently open. In this case, you can see the internal style sheet code that was created in Exercise 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 6. Click the word <style> at the top of the CSS Styles panel and click on the little trash can corner. This will remove the internal CSS code from the page. Pretty easy, huh? ByGaroicon Green Weinman in,Lynda the lower-right Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X With all the internal CSS code removed from the page, you will be left once again Pages: 720 with a horrible looking page. Don't worry, you will next see how easily this can be fixed by attaching an external CSS file to this page. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 7.Publisher: From the CSS Styles panel, click the Attach Style Sheet icon. This will open a small Peachpit Press window that lets you link to an external style sheet. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 8. Make sure the Add as option is set to Link. The other choice,Import, is not what you managing Web sites, and linking among pages. You'll learn about frames and forms, cascading want here because it would use the import attribute, which is not supported by some style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best browsers. Click Browse. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. Browse to the stylesheets folder inside the chap_09 folder and select the mystyles.css file. This is the file that you exported earlier that contains all of the CSS that was created in Exercise 1. Click OK to choose this file. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 sure to the constant companion of many Web 10. Click OK to attach this external styleissheet to become the page. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic Wow–look from one ofatthe master at just Linda.com training. a combination of projectthat! Your teachers page looks like it did at the Using beginning of the exercises, with the basedmajor lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green you difference that you now have an external style sheet attached to your page walks instead of through all the Dreamweaver MX 04 basics: navigating the new interface, creating and using embedded CSS. W hat's the big whoop, you ask? Keep reading and you will find out! managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. Open the aboutus/aboutus.html and aboutus/ourhistory.html pages. Notice that these pages are seriously lacking in some formatting. In the next few steps, you will fix this in a jiffy with the external style sheet you created earlier. 12. Make sure the aboutus/aboutus.html page is your current document. 12. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 13.Publisher: From the CSS Styles panel, click Attach Style Sheet. This will open the Attach External Peachpit Press Style Sheet window. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 14. Because you already attached an external style earlier, the path to the external style sheet managing Web sites, and linking among pages. You'll learn about frames and forms, cascading is already inside the File/URL text field. Make sure the Link radio button is selected and style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best clickOK. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. With the external style sheet attached to the aboutus.html page, the page is immediately updated. Sweet! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, MX 2004 is surestyle to become the constant companion of many Web 15. Repeat thisDreamweaver process to attach an external sheet to the aboutus/ourhistory.html developers. Here to get you hands-on with it fast is the definitive project-based training onto the page. As you can see, once you have the external style sheet created, it's really easy topic apply from one of the master teachers at Linda.com training. Using a combination of projectthat same formatting to multiple pages. In fact, you could format hundreds of pages basedinlessons, exercises, andthe QuickTime veteran author Garo Green walks you minutesguided by simply attaching external tutorials, style sheet to each of those pages. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 16. From the CSS Styles panel, double-click the a:link style. This will cause the external mystyles.css file to open in a window in Dreamweaver MX 2004 and the CSS Properties panel to open. Any time you double-click on a style in the CSS Styles panel, by default Dreamweaver MX 2004 will open the external CSS in a window and also open the CSS Properties panel. Beginners might find it a bit intimidating to edit the CSS code directly, which is understandable. Thus, you can use the CSS Properties panel instead to make changes to the CSS. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 17. From the CSS Properties panel, use the color picker to change the link color from blue to black, which has a hexadecimal value of #000000. This will immediately update the CSS style and change the appearance of the links on the page. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination of visual layout tools, application development 18. its Choose Window > pageproperties.html to see the links that have beenfeatures, changedand to code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web black. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one thethe master teachers atmystyles.css Linda.com training. a combination of project19. Close and of save changes to the file. If Using you don't save changes to this basedpage, lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you your links will remain blue. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 19. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 20. Open the aboutus/aboutus.html and aboutus/ourhistory.html pages. Notice that the links on these pages have been changed to black as well! This is a great example of how powerful external style sheets can be. W ith one change, you were able to affect the appearance of three pages. Had the mystyles.cssexternal style sheet file been linked to 100 pages, then 100 pages would have been updated. Very powerful indeed! 21. Save and close all open pages. 21. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3 Creating CSS—Redefining HTML Tags By setting the Page Properties earlier, you learned how to create some basic CSS. Well, sort of. Dreamweaver MX 2004 actually created all of the CSS for you automatically as you set the various page property settings. Now it's time to extend your CSS education by learning how to • Table of Contents create CSS manually. This will give you the experience and education you need to create CSS to • Indexyour Web pages. In this exercise, you will learn how to use CSS to redefine the help you format • Examples appearance of an XHTML tag. This is a good workflow to follow when you want to change the Macromedia® Dreamweaver® MX 2004: Hands-On Training default appearance of XHTML elements, such as heading tags. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open the redefine.html file located inside the chap_09 folder. This page consists of text, and the structure of the page has been defined using <h1>, <h2>, and tags. There is no formatting on this page at all. At least not yet. ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click the Code button in the Document toolbar to preview the code for this page. Notice With its powerful combination of visual layout tools, application development features, and code that this page uses very few XHMTL tags (<h1>, <h2>, and ) and no formatting at all. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web The XHTML tags that are used help define the structure of the page, not the appearance. In developers. Here to get you hands-on with it fast is the definitive project-based training on the its current state, the page looks really plain, and it should! XHTML tags should not be used topic from one of the master teachers at Linda.com training. Using a combination of projectto format the appearance of the page. All formatting on a page should be done with CSS, based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you and that's exactly what you will be doing in the next few steps. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 3. Click the Design button in the Document toolbar to return to the visual editing style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best environment. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. In the CSS Styles panel, clicktheNew CSS Style button. This will open the CSS Styles window, which lets you define new style sheets. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 5. Click the radio button next to Tag (redefines the look of a specific tag). Then, from the Tag dropdown menu, choose body. This tells Dreamweaver MX 2004 that you want to Publisher: Peachpit Press redefine the appearance of the <body> tag. You may not have realized this at the time, but Pub Date: December 22, 2003 in Exercise 1, you redefined the <body> tag when you modified the page properties. Make ISBN:the 0-321-20297-X sure Define in drop-down menu is set to (New Style Sheet File), which tells Dreamweaver Pages: 720 MX 2004 that you want to create a new external CSS file. Click OK. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Redefine HTML, Custom Class, or Selectors? Now that you've learned to create styles based on redefining HTML, you'll want to know about the other options available. Here is a handy chart that helps to explain when to use which type of style. • Table of Contents • Index • Examples Creating Styles in Dreamweaver MX 2004 Macromedia® Dreamweaver® MX 2004: Hands-On Training When to Use? For What Purpose? ByGaro Green, Lynda Weinman Class Use when you want to change the appearance of your document without depending on a tag. Use also when you want to format certain elements– Pub Date: December 22, 2003 ISBN: 0-321-20297-X regardless of whether they are in the headline, the body, or another part of the page. Publisher: Peachpit Press Pages: 720 Tag Use when you want to change the appearance of content based on an existing tag in HTML, such as <h1>. For example, redefining the <h1> tag will control the appearance of all <h1> tags in any file the style is applied to.tools, application development features, and code With its powerful combination of visual layout editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Advanced IDS, Contextual Selectors, and so on are more developers. Here to get you hands-on with it fast is the definitive project-based training on the advanced ways to use CSS to control the formatting topic from one of the master teachers at Linda.com training. Using a combination of projectof your pages. Using selectors, you can group tags based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you together to reformat multiple tags with one style, or through all the Dreamweaver MX 04 basics: navigating the new interface, creating and even target specific tags when found inside other managing Web sites, and linking among pages. You'll learn about frames and forms, cascading tags to limit styles being applied unless specific style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best conditions are met. You will get a chance to work layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's with contextual selectors at the end of this chapter. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, exercises, and QuickTime tutorials, author Garofolder Greeninside walksthe you 6. When youguided are prompted to save the CSS file, browse veteran to the stylesheets through all the Dreamweaver MX 04 basics: navigating the new interface, creating and chap_09 folder and save this external CSS file as redefine.css. Click Save. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. When the CSS Style Definitionwindow appears, click to select the Background category on the left side of the window. Set the Background color option to #DF9300. This will set 7. the background color of the page to a nice shade of orange. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 8. Click select the Type teachers category.atSet the Fonttraining. option to Verdana, Arial, Helvetica, topic from to one of the master Linda.com Using a combination of projectsans-serif. Set the Size option to 10 pixels. Set the Color option to #FFFFFF, which you is based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks white. This will set the default font, size, and color for all the text on your page. Click OK. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's This is what your page will look like after the <body>CSS tag has beenbuilt-in redefined. newest features: dynamic cross-browser validation, improved support, graphics Notice that all of the textGaro on the page changed, includingbut thewhy textyou're inside editing, and more. Throughout, shows youhas notbeen just how to do something <h1>, and tags. doingthe it and the <h2>, results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Because you just redefined the uppermost element on the page, the <body>tag, all of the With its powerful combination of visual layout tools, application development features, and code elements that fall beneath the <body>element will be affected by that style. This is called editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web inheritance, and it is an important concept in CSS. For example, you just redefined the developers. Here to get you hands-on with it fast is the definitive project-based training on the <body>tag to use an orange background, the Verdana, Arial, Helvetica, sans-serif font topic from one of the master teachers at Linda.com training. Using a combination of projectfamily, a size of 10 pixels, and a color of white. Since the <h1>, <h2>,and elements based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you are considered "children" of the "parent" <body>element, they are inheriting the style that through all the Dreamweaver MX 04 basics: navigating the new interface, creating and has been applied to the <body>element. Notice, however, that the <h1>and <h2>tags did managing Web sites, and linking among pages. You'll learn about frames and forms, cascading not change in size, because the heading tags do not inherit the sizeattribute. In order to style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best change their size, you need to redefine the appearance of those tags separately. That's layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's exactly what you are going to do in the next few steps . newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're 9. In the CSS Styles panel, click the New CSS Style button. doing it and the results of your actions. 10. When the New CSS Style window opens, set the Tag option to h1. Make sure the Tag (redefines the look of a specific tag) radio button is selected and the Define in option is set to redefine.css. This will create a new style that redefines the appearance of the <h1> tag and saves it inside the redefine.css external CSS file that you created in step 6. ClickOK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 11. its Within the Type category, the layout color to #000000, which is black. Since the style With powerful combination ofset visual tools, application development features, and code definition the body tag MX already the font to Verdana, Arial, Helvetica, editing support,ofDreamweaver 2004set is sure to become the constant companion sans-serif, of many Web there isHere no need to you define it againwith in this style. developers. to get hands-on it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 12. Select the Border category on the left side of the window. Remove the check for all three Same for all check boxes at the top of the window. Change your settings to match the image above. This will create a solid, thin, black border along the bottom of all <h1> elements. Click OK. After the<h1>element has been redefined, it still inherits the font from the definition of the <body>element and is able to take on additional formatting. This is an efficient way to code the CSS for your pages. Continue reading and you will redefine the appearance of the <h2>elements next. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing and linking among pages. learn about frames and forms, cascading 13. In theWeb CSSsites, Styles panel, click theNew CSSYou'll Style button. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 14. When the New CSS Style window opens, set the Tag option to h2. Make sure the Tag (redefines the look of a specific tag) radio button is selected and the Define in option is set to redefine.css. This will create a new style that redefines the appearance of the <h2> tag and saves it inside the redefine.css external CSS file. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 15. its Within the Type category, theSize option 12 pixels development and set the Style option tocode With powerful combination ofset visual layout tools,toapplication features, and Italic. This Dreamweaver will redefine the of is the <h2> andthe give them ancompanion italic style.of many Web editing support, MXsize 2004 sure to tags become constant developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 16. Within the Background category, set the Background color option to #CCCC99, which is a shade of brown. Before you go on, I want you to stop and think about what you just did. In steps 15 and 16, you set two properties that have already been defined in the style definition for the <body> element. The Size and Background color properties were both defined for the <body> element earlier. So, what's going to happen when you click OK? I don't know, but keep 17. reading and you will find out. ;-) 17. ClickOK to accept these settings and redefine the <h2> element. • • • Notice that even though the type size and background color properties were definedTable earlier for the <body>tag, you were able to override those setting by of Contents defining them again for the <h2>element . Index Examples The reason you were able to override the size and background color properties of the redefined <body>tag is the result of something called "specificity," which ByGarobasically Green, Lynda Weinman means that some rules are more powerful than others. If two rules have a conflict, the most specific rule will win, and the browser will honor that style. That'sPeachpit exactly what you saw happen here . Publisher: Press Macromedia® Dreamweaver® MX 2004: Hands-On Training Pub Date: December 22, 2003 Now that you have some experience in redefining HTML tags, you are ready to ISBN: 0-321-20297-X move on to another component of CSS. In the next exercise, you will learn how to Pages: 720 create classes to format isolated and very specific portions of a page, regardless of its XHTML element. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 18. Save and close all open files. Movie redefinehtml.mov To learn more about redefining XHTML tags with CSS, check out redefinehtml.mov located in the movies folder on the Dreamweaver MX 2004 H·O·T CD-ROM. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Creating Classes Redefining XHTML elements is one way to control the formatting of your Web pages with CSS. However, sometimes you need more flexibility in the way CSS formatting is applied to the various elements on your page. For example, maybe you want only a few words within a • Table of Contents paragraph formatted, not the entire paragraph. In instances like this, you can turn to class • styles to getIndex the job done. In this exercise, you will create several CSS style classes to format a • Examples press release. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open the pressrelease.html file from the chap_09 folder. This page contains nothing but text and a few simple XHTML elements to help define the structure of the page. 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 2. Click the Code button in the Document toolbar to switch to the Code view for this page. developers. Here to get you hands-on with it fast is the definitive project-based training on the Scroll through the code and notice that there are only basic tags in use. Click the Design topic from one of the master teachers at Linda.com training. Using a combination of projectbutton in the Document toolbar to return to the visual editing environment. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 3. In the CSS Styles panel, click the New CSS Style button. This will open the New CSS managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Style window. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Make sure the Class (can apply to any tag) radio button is selected. For the Name option, enter .topcopy (be sure to include the period at the beginning). While it certainly is good practice, Dreamweaver will do it for you if you forget. Make sure the Define in option is set to (New Style Sheet File), which will create a new external CSS file for this class. ClickOK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 5. When youof are prompted to save the external CSS file, browse the stylesheets folder topic from one the master teachers at Linda.com training. Using atocombination of projectand save the file as press.css. Click Save. The Style Definition window will open so you based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you can create the style for this class. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. In the Type category, set the Font option to Verdana, Arial, Helvetica, sans-serif. Set theSize option to 10 pixels and set the Color option to#000000, which is black. Your screen should match the image above when you are finished. This style will be used to 6. format the date and address at the top of each press release page. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. In the Block category, set the Text align option to right. This will cause any text that has this class applied to it to align to the right instead of the default, which is left. Click OK to accept these settings for this style. With its powerful combination of visual layout tools, application development features, and code If you watch the screen carefully, you will notice that Dreamweaver MX 2004 will open the editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web press.css file and move it to the background. Some people like the fact that Dreamweaver developers. Here to get you hands-on with it fast is the definitive project-based training on the opens the external CSS file when you add or modify your CSS styles, and others don't. I topic from one of the master teachers at Linda.com training. Using a combination of projecttend to find it somewhat annoying. Macromedia made this the default behavior because based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you they felt that many Web developers liked to modify the code of the external CSS file through all the Dreamweaver MX 04 basics: navigating the new interface, creating and manually, instead of using the WYSIWYG interface. However, for beginners this can be kind managing Web sites, and linking among pages. You'll learn about frames and forms, cascading of shocking and can actually cause you some problems if you choose not to save the style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best external CSS file when you close it. The next few steps will show you how to save the layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's external CSS file and then turn off this behavior . newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure become thefile constant companion many Web 8. Choose Window > press.css to bring the to external CSS to the front. Press of Ctrl+S developers. Here to get you hands-on with it fast is the definitive project-based training on the (Windows) or Cmd+S (Macintosh) to save this file and then close it. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. ChooseEdit > Preferences and choose the CSS Styles category along the left side of the window. Uncheck the Open CSS files when modified check box. Now the external CSS files will no longer open when you add or modify your CSS styles. Feel free to leave this option turned on if you prefer to have the external CSS page open in the background. Now that you have that silly issue out of the way, you can continue on with the exercise . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 10. In the CSS Styles panel, click the plus sign to the left of press.css to see what styles have Publisher: Peachpit Press been defined in that external CSS file. Surprise–you will see the .topcopy style that you Pub Date: December just defined. 22, 2003 ISBN: 0-321-20297-X In the 720 next few steps, you will create two more styles, one for the press release title and Pages: another one for the body copy on the page. Even though the steps are pretty much the same, it's great practice and will teach you a few extra things about applying class styles to your pages. 11. In the CSS Styles panel, click the New CSS Style button. This will open the New CSS With its powerful combination of visual layout tools, application development features, and code Style window. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 12. Make sure the Class (can apply to any tag) radio button is selected and the Name option is set to .header (be sure to include the period at the beginning of the name). The Define in option should already be set to press.css. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 13. its In the Type combination category, make sure your settings match the image above. features, and code With powerful of visual layout tools, application development editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 14. In the Border category, remove the check from all three Same for all check boxes. For the Style option, set the Bottom option to solid. This defines the style of the border. For the Width option, set the Bottom option to thin. For the Color option, set the Bottom option to#000000, or black. This style will create a solid, thin, black border for all objects that use this class. Click OK. 15. In the CSS Styles panel, click the New CSS Style button. This will open the New CSS Style window. 15. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Peachpit 16.Publisher: Make sure thePress Class (can apply to any tag) radio button is selected and the Name Pub Date: December 2003 option is set to22, .bodycopy (be sure to include the period at the beginning of the name). The ISBN: Define 0-321-20297-X in option should already be set to press.css. Click OK. Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 17. In the Type category, make sure your settings match the image above. Click OK to accept the settings for this class. Your CSS Styles panel should now have a total of three classes . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Now that you have the basic styles for this page set up, it's time to start applying them to the page– woo-hoo! As I've mentioned earlier, there are multiple ways to do the same thing in Dreamweaver MX 2004. To keep things sane, I am going to teach you my preferred Publisher: Peachpit Press workflow. After all, I don't want you going insane. ;-) ByGaro Green, Lynda Weinman Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 18. Click anywhere in the date area of the page. From the Style drop-down menu in the Properties inspector, choose topcopy. Notice how this drop-down menu gives you a visual preview of each class–very cool new feature! Once the topcopy class has been applied to the date, it will be formatted using the style you defined for that class . • • You might be wondering at this point why you didn't have to click and drag to select the date text; instead you simply had to click anywhere on the date text. This brings up the issue of block and inline elements and how CSS is applied to them. All block-level elements are displayed on a line by themselves and interpreted by the browser as separate elements from other content. For example, tables, paragraphs, headings, and so on are all block-level elements. Inline elements do not force anything to start on a new line and are contained within block-level elements. For example, images, links, spans, and so on are all inline Table of Contents elements. Index • Examples The basic rule of thumb when applying CSS to block-level elements is this: You apply the CSS style by clicking anywhere within the block-level element. In the ByGaroprevious Green, Lynda Weinman step, you didn't have to click and drag to select the date to format the entire line. Why? Because that line is formatted as a paragraph, which is a blocklevel element. All you needed to do (and did!) was click anywhere within the Publisher: Peachpit Press block-level element to apply the formatting to all the text contained within that Pub Date: December 22, 2003 block-level element. Applying CSS styles to inline elements is the opposite: You ISBN: 0-321-20297-X must first select the inline element before applying the CSS style. This should all Pages: 720 make more sense as you go through the rest of this chapter . Macromedia® Dreamweaver® MX 2004: Hands-On Training With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 19. Click and drag to select the four lines of the address section. 19. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 20. Click the Code button in the Document toolbar to change to the Code view of this page. developers. Here to get you hands-on with it fast is the definitive project-based training on the Did you notice that these four lines of code are contained within single paragraph , a topic from one of the master teachers at Linda.com training. Using a combination of projectblock-level element, even though you only clicked in the area and didn't select all the text based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you in Design view? Notice also that within the paragraph element are line breaks , through all the Dreamweaver MX 04 basics: navigating the new interface, creating and which are inline elements. Because all four lines of text are contained within a block-level managing Web sites, and linking among pages. You'll learn about frames and forms, cascading element, you do not need to select them before applying the CSS. Click the Design button style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best in the Document toolbar to return the visual editing environment. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project21. Click anywhere the Pressand Release line oftutorials, text. From the Style drop-down menu in the based lessons, guidedinexercises, QuickTime veteran author Garo Green walks you Properties inspector, choose the topcopy style. This will format all four lines of text through all the Dreamweaver MX 04 basics: navigating the new interface, creating and usingWeb this style. managing sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics With topcopy style applied to the paragraph tag, lines now match the editing, andthe more. Throughout, Garo shows you not just how to all do four something but why you're date line that is formatted with the same style, and you didn't have to select all doing it and the results of your actions. four lines of text first! 22. Click anywhere in the line of text that starts with the word Dedicated. From the Style drop-down menu in the Properties inspector, choose the header style. 22. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 23. Click anywhere in the first paragraph of text on the page. From the Style drop-down menu managing Web sites, and linking among pages. You'll learn about frames and forms, cascading in the Properties inspector, choose the bodycopy style. This will format the entire style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best paragraph using this style, again because it is contained within a block-level element. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 24. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 24. Repeat this process for the next five paragraphs on the page. When you are done, your developers. Here to get you hands-on with it fast is the definitive project-based training on the page should look like the one shown above. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 25. PressF12 to preview this page in a browser. You will notice that it looks exactly like it did in Dreamweaver MX 2004. That's because the CSS rendering in Dreamweaver MX 2004 is really good–it truly is a WYSIWYG Web development tool. 26. 26. Save your changes and keep this page open for the next exercise. Movie • Table of Contents • Index customclass.mov • Examples Macromedia® Dreamweaver® MX about 2004: Hands-On To learn more creating Training custom CSS classes, check out customclass.mov located in the movies folder on the ByGaro Green, Lynda Weinman Dreamweaver MX 2004 H·O·T CD-ROM. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Relevant CSS Panel Part of the new CSS workflow in Dreamweaver MX 2004 includes the new Relevant CSS panel. The Relevant CSS panel is a new addition to Dreamweaver MX 2004 and can help you quickly identify and edit the styles on your page. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers Linda.com training. Using aand combination of projectThe Tag Inspector panel contains threeattabs: Attributes, Behaviors, Relevant CSS. The title based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you bar of the Tag selector identifies which element affects the object you currently have selected or through all the Dreamweaver 04 basics: the new interface, creating andthat my where your cursor is currentlyMX placed on the navigating page. In the example above, you can see managing Web sites, among pages. using You'll the learn about frames cursor is on some textand thatlinking has been formatted Heading 1 style. and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography also find extensive coverage of the all of Dreamweaver's The Relevant CSS tab ispractices. designed You'll to help you quickly identify and edit various CSS rules on newest features: dynamic cross-browser validation, improved CSS support, built-in your page. By selecting an element or clicking within a body of text that has a style graphics applied to it, editing, more. Throughout, you notand justwhich how to do something you can and see all of the rules that Garo affect shows that element properties have but beenwhy set you're in the doing it and the results of your actions. rule. You can also use the Relevant CSS panel to quickly make changes to existing rules. This is a really nice new feature in Dreamweaver MX 2004. The Applied Rules section of the Relevant CSS tab identifies which styles affect the selected element. Because your page will often have many styles, this can be a very useful tool in determining exactly which styles are affecting the selected element. In the example above, you can see that the redefined body and h1 selectors are affecting the appearance of the text I have selected because both of those tags appear in the Applied Rules section. If I had other CSS applied to the selected text, such as a class or ID, that too would appear in this area of the panel. Selecting any of the rules in the Applied Rules area will display the style information for that rule. In the image above, you can see what properties have been set for the <body> element, which in this case is just the four properties you see displayed above. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 The lower portion of the Relevant CSS panel displays the properties of the currently selected element. All properties that have been set appear in blue. The properties that are irrelevant to With its powerful combination of visualappear layoutwith tools, application development code the selection or that are not inherited a red line through them. If features, you hoverand your editing support, Dreamweaver MX 2004 is sure to become the constant companion of many mouse over one of the properties, a small help tag appears that explains why the property isWeb developers. to get youThe hands-on withthat it fast is theindefinitive project-based irrelevant orHere not inherited. properties appear black have not been settraining and do on notthe topic from one of the master teachers at Linda.com training. Using a combination of projectaffect the selected element at all. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The lower portion of the Relevant CSS panel can be displayed in Category or List view. The Category view, shown above, divides all of the selected elements' properties into categories–makes sense, huh? By clicking on the plus signs, you can see the various properties in each category. One of the drawbacks of this view is that some set properties will not be visible if the appropriate category is not expanded. The List view displays all applied styles at the top of the list in alphabetical order, while the remaining unapplied properties are arranged after them. The List view, which is my preferred view, lists all of the properties alphabetically. You will get a chance to work with the Relevant CSS panel in the following exercise, so keep reading! ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5 Using the Relevant CSS Panel As you work with CSS, you inevitably come to a point where you need to edit your CSS. To help you quickly edit the CSS on your page, Dreamweaver MX 2004 introduces the new Relevant CSS panel. This panel can tell you what CSS has been applied to a selected element and gives • Table to of Contents you quick access all of the CSS properties. This exercise will show you how to use the • Index Relevant CSS panel to quickly change some of the CSS on your page. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Thepressrelease.html page should still be open from the previous exercise. If it's not, go ahead and open it now. In the previous exercise, this page was formatted using several different style classes. Now you will learn how to use the Relevant CSS panel to modify those classes. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With 2. its Make powerful sure the combination Relevant CSS of visual panel layout is open. tools, If it's application not, choose development Window > features, Tag Inspector and code editing and support, then click Dreamweaver on the Relevant MX 2004 CSSistab. sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Click anywhere in the line that begins with the word "Dedicated." 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. As you click in different areas of the page, you will notice that the contents of the Relevant CSS panel change to display the rules that affect the selected object. Since you clicked on some text that has the .header rule applied to it, that information is being displayed in the With its powerful combination of visual layout tools, application development features, and code Relevant CSS panel because, well, it's relevant. ;-) editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Click on the word "solid" to the right of the border-bottom-style option. This will cause a small drop-down menu to appear that lists all of the available attributes for this property. From the dropdown menu, choose dashed to change the style of the bottom border. Did you notice that the line under the header text did not change to a dashed line? Why? While Dreamweaver MX 2004 does a nice job rendering most CSS rules, it's not perfect. So, when in doubt, be sure to preview the page in a browser to make sure things are working! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 6. PressF12 to preview the page in a browser. Ah-hah, the line now has a dashed style and is developers. Here to get you hands-on with it fast is the definitive project-based training on the working just fine–phew! topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 7. Take a few moments and click on some elements that have been formatted using a through all the Dreamweaver MX 04 basics: navigating the new interface, creating and different CSS rule. Then use the Relevant CSS panel to make some changes to those rules. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading As you will quickly see, this is a really nice way to modify your styles. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 8. When you are done, save and close this file. You won't need it for the last exercise. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6 CSS Rollovers One of the coolest things about CSS is that you can use it to create visual effects such as rollovers that, in the past, could only be achieved by using JavaScript and multiple images. This exercise is only marginally more difficult than other exercises in this chapter, but it will introduce • Table of Contents a few new concepts and perhaps a new perspective on how complex formatting can be • accomplishedIndex with CSS. In this exercise, you'll learn how to apply styles to a simple, unordered • Examples list of links and create a rollover navigation that looks pretty cool. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open the rollover.html file in Split view. As you can see, this page contains an unordered list of links. You learned how to create lists similar to this in Chapter 6, "Typography." 2. Make sure the CSS Styles panel is open. If it's not, choose Window > CSS Styles to open that panel now. 3. In the CSS Styles panel, click the New CSS Style button to open the New CSS Style dialog. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 4. Make sure the radio button next to Class (can apply to any tag) is selected and type .navcontainer for the Name option. Set the Define in option to (New Style Sheet File). Publisher: Peachpit Press ClickOK. So far, this is nothing that you have not already done in this chapter! Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. When you are prompted to save the style sheet, browse to the stylesheets folder in the chap_09 folder, name this file navigation.css, and click Save to save the file. The CSS Style Definition dialog box will then open. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 6. its In the Box category, set the Width option to 200 pixels. Click OK. Thisfeatures, sets the and width of With powerful combination of visual layout tools, application development code thesupport, box thatDreamweaver contains the list, making everything within box easier to style. editing MX 2004 is sure to become thethat constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the have you determined wide you want the navigation's container to be, topic Now fromthat one you of the master teachers at how Linda.com training. Using a combination of projectneed to add aexercises, special tag to QuickTime your page, tutorials, called a <div> tag.author A <div> taghas no visual basedyou lessons, guided and veteran Garo Green walks you appearance on the page;MX instead it is used to create generic containers so theyand can be through all the Dreamweaver 04 basics: navigating the new interface, creating controlled code, such as CSS andYou'll evenlearn JavaScript. In this exercise, you are going managing Web with sites,other and linking among pages. about frames and forms, cascading createand a <div> tag that the entire unordered list on suggestions the page. Doing this style to sheets, Fireworks andwraps Flasharound integration, and gobble up Garo's about best you identify and style theYou'll unordered listextensive as a single item, which necessary to create layoutlets and typography practices. also find coverage of allisof Dreamweaver's this type of CSS rollover. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 7. Either in Code view or Split view click and drag to select the entire unordered list on the developers. Here to get you hands-on with it fast is the definitive project-based training on the page, including the opening and closing <ul> elements. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. ChooseInsert > Layout Objects > Div Tag. This will open theInsert Div Tag window. From the Class drop-down menu, choose navcontainer. This is the class you created earlier that has a width of 200 pixels. By applying this class to the <div> tag, you will then be able to apply other CSS rules to the objects within the <div> tag, such as the unordered list and the list items! Make sure the Insert drop-down is set to Wrap around selection. ClickOK. Notice how the <div>tag and navcontainerclass was added around the unordered list tag and there was no change to the visual appearance on the page. Even though nobody will ever see the <div>tag on the page, it plays an incredibly important role here! Another benefit of going through this exercise is that you will be better prepared to tackle pure CSS layouts later. Why? Because you will use <div>tags to create other generic containers and similar techniques more often when you get into pure CSS layouts. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Now that you are able to refer to the entire unordered list as a single item (via the navcontainerclass), you can format the elements within the <div>tag using CSS. To do this formatting within the <div>tag, you are going to create something called a contextual class selector, which is just a fancy way of saying you want the styles for this list to only With its apply powerful to what's combination in the<div> of tags visual that layout havetools, been application formatted with development thenavcontainer features,class. and code editing support, Dreamweaver MX 2004 is sure to become the constant companion many Web This way, you can create other styles of navigation and links elsewhere on the of page without developers. those styles Here to conflicting get you with hands-on thesewith styles. it fast Canisyou thesee definitive now how project-based the <div>tags training were used on the to topic create from one of the master at Linda.com training. Using a combination of projecta "container" thatteachers can be formatted using CSS, independent of other objects on the basedpage? lessons, guided and QuickTime tutorials, veteran author Garo Green walks you Please say exercises, yes. ;-) through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. Click the New CSS Style button. In the Name field, type .navcontainer ul. The space between the class and the ul is very important! It's also very important NOT to forget the "." in front of navcontainer here. This is how you create a contextual class selector in Dreamweaver MX 2004. This contextual class selector will only affect unordered lists that are within a <div> tag that has the navcontainer class applied to it. Then choose the Advanced radio button under Selector Type. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 10. its In the Type combination category, select Arial,layout Helvetica, sans-serif.development For Size, type 11 and and keepcode the With powerful of visual tools, application features, sizing at pixels. Set theColor to #FFFFFF (white). editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. In the Box category, uncheck both Same for all check boxes and set the Left padding option to 0 pixels. Set the Left margin to 0 pixels as well. This ensures that your list (of CSS rollovers) will be set to the left margin with no padding. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 12. its In the List category, fromofthe Type drop-down menu, choose none. Click OK. The With powerful combination visual layout tools, application development features, and code unordered on your page now appear with your font styles and no bullets. editing support, list Dreamweaver MXshould 2004 is sure to become the constant companion of many Web Because your already contains list, your page will update immediately. developers. Here topage get you hands-on withan it unordered fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectit's time to style all the and link QuickTime types . basedNow lessons, guided exercises, tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. From the CSS Styles panel, click the New CSS Style button. Notice that Dreamweaver MX 2004 remembers your last selection in terms of Selector type and the Define in options. All you have to do here is give this selector a name of .navcontainer a. This style will only affect links within elements that have the navcontainer style applied to them. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 14. its In the CSS Style Definition dialog box, tools, set theapplication type face, development size, and color exactly as With powerful combination of visual layout features, andyou code didsupport, in Step 10. Next to theMX Decoration option, check None. Don't click OK yet!of many Web editing Dreamweaver 2004 is sure to become the constant companion developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 15. In the Background category, set theBackground color text field to #DF9300. This will set the background color for your CSS rollovers. 15. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 16. its In the Blockcombination category, from the Display drop-down, choose block. Thisfeatures, will cause thecode With powerful of visual layout tools, application development and orange color to fill the entire editing support, Dreamweaver MX block. 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 17. From the Box category, enter a Width of 160 pixels. For the Padding options, leave the Same for all check box checked this time, and enter a value of 3 pixels into the available text field. This will add a small amount of padding for the text within each CSS rollover, which is nice because you don't want your text too close to the edge; that would look just plain tacky. ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 18. its From the Border category, uncheck all the Same for all check boxes. Infeatures, the Style column, With powerful combination of visual layout tools, application development and code choose solidDreamweaver from the drop-down menu for to the Bottom border, leaving the other options editing support, MX 2004 is sure become the constant companion of many Web blank. Set to 1with pixel, andisthe Color to #FFFFFF. This on willthe add developers. Herethe toBottom get you Width hands-on it fast theBottom definitive project-based training niceone white linemaster between each ofat the links. Click OK. Using a combination of projecttopic a from of the teachers Linda.com training. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading is what your page look like now–pretty slick! style This sheets, and Fireworks andshould Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 19. Create a new class called.navcontainer a:link. 19. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With 20. its In the powerful Font category, combination set of the visual Type layout options tools, so they application match the development image above, features, making andsure code editing your support, Decoration Dreamweaver is set to MX none. 2004 Click is sure OK. to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic 21. You'll from one want ofto the add master a visited teachers link. From at Linda.com the CSStraining. Styles panel, Using click a combination theNew CSS of projectStyle basedbutton lessons, to create guided aexercises, new classand andQuickTime name it .navcontainer tutorials, veteran a:visited. author IGaro set the Green same walks exact you through styles all the as you Dreamweaver did for the a:link MX 04 class basics: so navigating that the links theand newvisited interface, linkscreating are the and same. Click managing OK. Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout 22. From and the typography CSS Styles practices. panel, You'll click the alsoNew find CSS extensive Stylecoverage button toofcreate all of a Dreamweaver's new class named newest .navcontainer features: dynamic a:active. cross-browser This sets the validation, link color improved as it's clicked. CSS support, Set thebuilt-in Type options graphics the editing, same andasmore. you did Throughout, in steps 20Garo and shows 21, butyou thenot only just difference how to do here something should be but that why you you're choose doingaitdifferent and the color. resultsI of used your #660000, actions. a dark red. Click OK. 23. From the CSS Styles panel, click the New CSS Style button to create a hover class, which provides the rollover effect. Name the class .navcontainer a:hover. From the Type category, be sure your type is set to Arial, Helvetica, san-serif, 11 pixels,Decoration set to none, and the Color set to white. Don't click OK yet! 24. From the Background category, and in the Background Color text field, type #FFCC66, a light orange. Click OK. Your CSS Style panel should look just like the one shown above. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 25. Unfortunately, Dreamweaver MX 2004 won't show the hover effect in Design view, so press F12 to preview the page in a browser. Move your mouse over each of the links. Now, orange you glad you read this chapter? Hehe. 26. Save and close all open files–you are done! This chapter should help you better understand CSS and how easy it is to implement in Dreamweaver M X 2004. You deserve a little break. But hey, don't let me stop you if you want to move on to the next chapter! Chapter 10. Frames What Are Frames? • • • Table of Contents The Pros and Cons of Frames Index Saving Examples Frames Macromedia® Dreamweaver® MX 2004: Hands-On Training Frames ByGaroColoring Green, Lynda Weinman Links and Targets Publisher: Peachpit Press Pub Date: December 22, 2003 Adding a Background Image ISBN: 0-321-20297-X Background Images in Frames Pages: 720 Frame Objects So far in this book, you've learned to insert text, tables, and images into individual XHTML pages. The concept of frames is a little more challenging because, in effect, a frame is an XHTML With powerful combination of visual layout anyone tools, application development features, code page its inside another XHTML page. Why would want to put an XHTML page insideand another editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web XHTML page? So that one part of a page can update independently from another. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic say fromthat oneyou've of the created master teachers Linda.com training. Using aofcombination of projectLet's an imageat that belonged at the bottom an XHTML page. If your based lessons,100 guided exercises, and QuickTime veteran Garo Green you site contained pages, and you wanted to puttutorials, that same image author at the bottom of allwalks of them, through all need the Dreamweaver 04 100 basics: navigating creating and you would to insert that MX image times into eachthe of new thoseinterface, 100 individual pages. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Frames allowand youFireworks to reuse aand single XHTML page byand nesting it inside another XHTML document style sheets, Flash integration, gobble up Garo's suggestions about best (otherwise as a frameset). This also would make it possible to create image at the layout and known typography practices. You'll find extensive coverage of allthat of Dreamweaver's bottom of an XHTML page cross-browser only once, but validation, allow 100 other pages to load up above it. graphics If it sounds newest features: dynamic improved CSS support, built-in complex, it is. Frames have a high learning but fortunately chapter but is here walk editing, and more. Throughout, Garo showscurve, you not just how to dothis something whytoyou're you through every step of your the way. doing it and the results actions. What Are Frames? Lynda's husband, Bruce, came up with this wonderful metaphor for teaching frames. Imagine a TV dinner. You've got your peas and carrots, an entrée and, if you are really lucky, a dessert. Don't forget, though, about the tray that holds all these food items together! A frameset, if you • of Contents will, is the TVTable dinner tray that holds together multiple XHTML documents. • Index If you were to • Examples build a frameset that contained two frames—a left frame for your Web navigation element andDreamweaver® Macromedia® a right frameMX for2004: yourHands-On content—visitors Training to your site would see only two frames. What's hidden is that your visitor would actually be working with three documents: a frameset ByGaro Green, Lynda Weinman (think TV dinner tray) and two frames (the content XHTML page and the navigation XHTML page). Every time you come to a page that contains frames, it always includes a frameset that Publisher: Peachpit Press holds the frames in place. If this sounds confusing at all, welcome to frames! Conceptually, they 22, 2003 canPub be Date: a bitDecember of a brain twister. ISBN: 0-321-20297-X I promise Pages:that 720 the exercises in this chapter will help you unravel these concepts. You'll learn that frames are controversial creatures, and that they are either loved or hated by most people. I'll do my best to fill you in on the pros and cons of using frames, as well as a variety of techniques for using them effectively and creatively. In the end, you will have the honor of deciding if they are right or wrong for your site. Hey, I just teach this stuff! With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Frames: A Love-or-Hate Proposition First, a word from our sponsor (the venerable author of this book). Frames are controversial–most people either love or hate them. You may want to consider the pros and cons before you use them in your site. Here are two charts to help you if you're weighing the decision • of Contents to use or notTable use frames: • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Love Frames ByGaro Green, Lynda Weinman Pro Explanation Good workflow Publisher: Peachpit Press It's easier to update a single page than hundreds, If you put a navigation element (all your links) into a single frame of a frameset, and then your site's navigation changes, you have to update only that one page. right? Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Fixed navigation The entire page doesn't have to reload each time a link is clicked, only sections of the page. This means that you can anchor a navigation page so it doesn't have to be reloaded each new page click and With its powerful combination of visual layoutwith tools, application development features, and code alwaysMX stays consistent your site. companion of many Web editing support, Dreamweaver 2004 is sure tothroughout become the constant developers. Here to get you hands-on with it fast is the definitive project-based training on the Special effects Frames let you do cool special effects, such as topic from one of the master teachers at Linda.com training. Using a combination of projectputting a single background into multiple frames for based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you aesthetic purposes. You'll learn this technique in this through all the Dreamweaver MX 04 basics: navigating the new interface, creating and very chapter! managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash andmore gobble up Garo's suggestions about best Flexible interfaces Frames allowintegration, you to display content at one layout and typography practices. You'll also extensive coverage all on of Dreamweaver's time by giving you find the ability to have scroll of bars newest features: dynamiceach cross-browser validation, CSS support, built-in graphics frame. A common useimproved for this technique is editing, and more. Throughout, Garo shows you not justof how to dothat something displaying multiple thumbnails images would but why you're doing it and the results ofcause your an actions. ordinary HTML page to stretch wider than the available browser space. Hate Frames Con Explanation Confusing If not well implemented, frames can create confusing navigation for your audience. However, this chapter teaches you how to implement frames well, of course! Printing hassles In some browsers, it is not possible to print an entire frameset. That would be like printing three or more XHTML pages at once. Your end user can print an individual frame, but frames are often transparent to the end user so this can prove challenging. Our suggestion? If you think people are going to print a page from your site, don't put it in a frameset. Bookmark hassles The only part of a framed page that can be bookmarked easily is the frameset. Let's say you have 20 pages that load into a single frameset. If one of your end users wanted to bookmark page 11, he or she would not be able to do so, because only the first page that loads into the frameset could be bookmarked. We have no remedy for this problem, except to say that you should make it very clear • Table of Contents how to get to the other 19 pages within that • Index frameset, by adding a simple navigation path–a • Examples listing of links of all previously visited Macromedia® Dreamweaver®horizontal MX 2004: Hands-On Training pages–on the first page. ByGaro Green, Lynda Weinman Hidden security issues Publisher: Peachpit Press At the lynda.com Web site, we once made the mistake of placing a secure order form into an insecure frameset. Some of our customers Pub Date: December 22, 2003 complained because they couldn't see the lock ISBN: 0-321-20297-X symbol at the bottom left of their browsers that Pages: 720 ensures a page is secure. Although the order form page was in fact secure, we eventually took it out of the frameset so our customers would see the lock symbol and feel more confident buying from us. Too its boxy Frames an already small amountdevelopment of screen With powerful combination of divide visual layout tools, application features, and code real estate into smaller regions, which causes editing support, Dreamweaver MX 2004 is sure to become the constant acompanion of many Web boxy effect. You'll learn todefinitive make framesets developers. Here to get you hands-on with it fast how is the project-based training on the without unsightly scroll bars and borders. That will topic from one of the master teachers at Linda.com training. Using a combination of projecthelp eliminate the ugly boxy effect. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MXcan 04 basics: the newan interface, creating and Accessibility Frames be verynavigating problematic from managing Web sites, andaccessibility linking among pages. You'll learn about frames perspective. They can be difficult, if and not forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best impossible, to view on some devices, such as screen layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's readers. Navigating from frame to frame can be newest features: dynamicdifficult cross-browser CSS support, built-in graphics for somevalidation, devices asimproved well. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing Search it and engines the results ofSome your search actions.engines rely heavily on the keywords and descriptions in your <meta> tags. Since your multiple pages display in just one frameset, some search engines only see the <meta> tags for your frameset, not your entire site. 1 Saving Your First Frameset This chapter is going to build your frame-making skills gradually. This first exercise shows you how to save a set of frames properly. Sound simple? Unfortunately, saving frames is one of the more difficult aspects of learning how to build framesets. By taking you slowly through the • process, my Table hopeof isContents that you'll get through these hurdles without a problem. • Index • Examples 1. Copychap_10 from the H·O·T CD-ROM to your Macromedia® Dreamweaver® MX 2004: Hands-On Training hard drive. Define your site for Chapter 10 using the chap_10 folder as the local root folder. If you need a refresher on this ByGaro Green, Lynda Weinman process, visit Exercise 1 in Chapter 3, "Site Control." Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Start this exercise with a blank untitled document. Choose File > New to open the New Document window. Create a new XHTML document. Don't save this page just yet. You may be surprised by this advice, given our past warnings, but saving now will cause Dreamweaver MX 2004 to believe that this is a single XHTML page (which it is not!). You are going to divide this document into a frameset and frames before you save. Note:Dreamweaver M X 2004 includes a whole bunch of frameset templates that you can access from the New Document window. Once you are more familiar with framesets, you should definitely check these out! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 3. Choose Modify > Frameset SplitisFrame Thisthe puts a vertical frame divider editing support, Dreamweaver MX>2004 sure toLeft. become constant companion of many Web throughHere yourtopage. What's more,with it switches lookingproject-based at one page to looking developers. get you hands-on it fast isyou thefrom definitive training onatthe theof frameset, theteachers left frame, and the right frame.Using a combination of projecttopic three: from one the master at Linda.com training. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. ChooseFile > Save Frameset As and save the file as frameset.html inside the chap_10 folder. The frameset document will be the container for the other XHTML files. 4. Note:If you wanted this frameset to be the first page in your site (often referred to as the home page), you would save the frameset asindex.html. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project5. Click inside the left frame and Filetutorials, > Save Frame and save file as based lessons, guided exercises, and choose QuickTime veteranAs author Garothe Green walks you left.html. Make sure you are saving this file in the same location as the frameset.html through all the Dreamweaver MX 04 basics: navigating the new interface, creating and file. Web sites, and linking among pages. You'll learn about frames and forms, cascading managing style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Click inside the right frame and choose File > Save Frame As and save the file as 6. right.html. Make sure you are saving this file in the same location as the frameset.html file. • Even though you just saved these files, notice that it says "Untitled Document" at the top of each document window. What's up with that? As you learned in Chapter 4, "Basics" you've saved and named the XHTML document, but have not assigned the title yet. To set the title, be sure to follow the exact directions in the following steps, because you are juggling three XHTML Table documents and you want to put the title in the outermost page ( frameset.html). of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. ChooseWindow > Frames to open the Frames panel. This panel will give you a preview of your frameset structure and is essential for selecting different portions of your frameset. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. Click on the outermost border around the edge of the Frames panel. It has a thick black edge when it is selected. This is a quick way to select the frameset. In the Document toolbar, enter My First Frameset in the Title field and pressTab. The default untitled document title should be instantly replaced by your new title. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 9. Choose FileDreamweaver > Save All. Once you define initial frameset and frames, you can perform editing support, MX 2004 is surethe to become the constant companion of many Web one simple Frames operation save thedefinitive changes project-based to all the files training and be done. developers. HereSave to getAll you hands-on with it to fast is the on the thisof file open for Exercise topic Leave from one the master teachers2. at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Movie newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. saving_frames.mov To learn more about saving frames, check out saving_frames.mov located in the movies folder on the Dreamweaver MX 2004 H·O·T CD-ROM. Different Ways to Save Frames The previous exercise taught you to save frames by choosing File > Save Frame As. There are a few different ways to save them besides this, but the way we already showed you is the best because you always know what file you are saving. All three ways are listed in the following • handy chart.Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: to Hands-On Training Ways Save Frames ByGaro Green, Lynda Weinman Option Explanation File > Save Frame Publisher: Peachpit Press To save a document inside a frameset, click the cursor in the frame and use this method. Pub Date: December 22, 2003 File > Save Frame As ISBN: 0-321-20297-X Pages: 720Frameset File > Save To save a frameset file only, you may choose to use either of these methods. File > Save Frameset As File > Save All Frames To save all open files at once, use this method. However, we don't recommend this With its powerful combination of method visual layout tools, application features, and code until you have saved alldevelopment your files editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web once. There's a known bug on the Mac that developers. Here to get you hands-on with it fast is the definitive project-based training on the doesn't give you a good visual cue about topic from one of the master teachers at Linda.com training. Using a combination of projectwhich file is being saved using this method. based lessons, guided exercises,Using and QuickTime Garo Green walks you the File >tutorials, Save Allveteran Framesauthor method through all the Dreamweaver MXafter 04 basics: navigating the new interface, you've saved the first time using the creating and managing Web sites, and linkingother among pages. You'll is learn frames and forms, cascading listed methods fine.about Just don't start style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best the process with a File > Save All Frames, layout and typography practices.or You'll also find extensive coverage of all of Dreamweaver's you'll potentially get confused by the newest features: dynamic cross-browser process. validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2 Modifying Frames Modifying frames can be a little bit challenging at first because you're manipulating multiple XHTML documents in one Dreamweaver MX 2004 window. This exercise teaches you how to color two frames independently. You'll also learn how to turn off the borders between them, which can • Contents help hide theTable fact of that you are using frames at all. • Index • Examples 1. You should still haveMX frameset.html from Macromedia® Dreamweaver® 2004: Hands-On open Training the last exercise. In the document window, click on the left frame and make sure you see the text-insertion cursor blinking. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, 2. Choose and Modify more. Throughout, > Page Properties Garo shows (Ctrl+J you not [Windows] just howor to Cmd+J do something [Mac]). but Set why theyou're doingBackground it and the results to #DF9300, of your actions. the Text to #FFFFFF, the Links to #FFFF00, the Visited links to #FFFF99, and the Active links to #FFFFFF. You can use the colors shown above or pick your own colors. Click OK. The left frame should be orange at this point . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 3. In support, order to Dreamweaver change the color theisright click inthe theconstant right frame and make editing MXfor 2004 sureside, to become companion of sure manyyou Web see theHere text-insertion blinking. Choose > Page Properties training yet again. developers. to get youcursor hands-on with it fast is Modify the definitive project-based on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. ChooseModify > Page Properties (Ctrl+J [Windows] or Cmd+J [Mac]). Set the Background to #DF9300, the Text to #FFFFFF, the Links to #FFFF00, the Visited links to #FFFFCC, and the Active links to #FFFFFF. You can use the colors shown above or pick your own colors. Click OK. The right frame should turn orange as well. Both frames should now have a very lovely looking orange background color . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest 5. In features: the Frames dynamic panel,cross-browser click on the outer validation, border improved to select the CSSframeset support,file. built-in In the graphics editing, Properties and more. inspector, Throughout, make Garo sure shows the left you frame not justishow selected to doand something enter the but value why 150 you're into doingthe it and Column the results setting. ofThen your press actions. Enter. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, Fireworks andthe Flash integration, and gobble up Garo's suggestions about best 6. To turn and off the border on frame divider, choose Borders: No, and Border width: 0 in layoutthe and typography practices.Now You'll find extensive coverage of all Choose of Dreamweaver's Properties inspector. thealso dividing border should be gone. File > Save newest dynamic cross-browser validation, improved CSS support, built-in graphics Allfeatures: and leave this document open for the next exercise. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3 Links and Targets You'vegotten through the hardest part of making a frameset, but there's still more distance to go to the finish. This exercise shows you how to insert a link into the left side page of the frameset. You've learned about making links, so much of this should be familiar. This exercise • of Contentshowever–using a "target"—which allows you to specify which frame introduces a Table new concept, • Index the link will trigger in your frameset. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Click inside the left frame and make sure you see the blinking text-insertion cursor. Type the words Contact Us. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Select the words Contact Us and click on the folder to the right of Link in the Properties inspector. Browse to the HTML folder inside the chap_10 folder and select contactus.html. Click Open.Contact Us should now appear as an underlined link. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX in 2004: Hands-On Training 3. You can't preview links Dreamweaver MX 2004, prompted ByGaroYou'll Greenbe , Lynda Weinmanto so press F12 to preview in your browser. save your files before you preview them in a browser, so click OK. Publisher: Peachpit Press Note:We suggest that you click the Don't warn me again check box so you don't see this test your frameset in a browser . Pub Date: December 2003you message every22, time ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Once in the browser, go ahead and click the link Contact Us. You might be surprised that the contact page appears in the left frame, the exact frame where the link was in your file! Just like in any other Web page, once you click on a link, it's replaced with whatever content to which it was linked. However, in this situation, the narrow left frame isn't where you want that linked page to appear. The left frame should remain stationary, and the linked pages should open on the right. The way to make this happen is by setting up a target for the link. If you'd prefer (as I certainly do) that the link load in the larger right side of the frameset, you must first name the two frames. Giving a name to an element in XHTM L is something you haven't done yet, but you'll see that it is necessary in certain instances throughout the exercises in this book. In this situation, you can't target the right frame to receive the results of the link without first giving it a name . • • • Note:The directive to give the frame a name, because you've already saved all the documents with file names,frameset.html, left.html,and right.html,might confuse you. You also gave a title,My First Frameset,to the frameset.html document. Giving a "name" to an element in XHTM L, in order to set custom targets in links, is something totally Table of Contents different, as you'll soon see. Index Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. Return to Dreamweaver MX 2004 to fix the target problem. Make sure the Frames panel is open. If it's not, choose Window > Frames to bring it up. Notice that it reads (no name) With its combination visual layout application and code on powerful both the right and left of sides? Click on tools, the left side and itdevelopment will become features, outlined with a editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web dark line, as shown here. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 6. Theand Properties inspector should now display Frame name field. Enter editing, more. Throughout, Garo shows you notthe justsetting how tofor dothe something but why you're You could name it anything doingleft. it and the results of your actions.you want. However, you should name it something meaningful because this name will appear in a menu later on, and you'll want to easily remember what it meant. 7. Click on the right side of the Frames panel and look at the Properties inspector again. This time there is no frame name because you haven't given the right side of the frameset a nameyet. Enter right into the Frame name field. The Frames panel should now read left 7. and right in faint letters. Leave the Frames panel open—you'll need it shortly. • Table of Contents • Index • 8. Click anywhere Examples on the words Contact Us in the left frame. Click on the arrow next to the Macromedia® MXthe 2004: Hands-On Training TargetDreamweaver® field to access pop-up menu and choose right. The word right should pop into Target ByGarothe Green , Lyndafield. Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. PressF12 to preview the page again. Click on the link. If you're prompted again to save your files, click Save. This time the results should appear on the right side. You've just set up your first target in your first frameset. And you're on your way to mastering frames, which is no small accomplishment! 10. Return to Dreamweaver MX 2004 and keep the files open for the next exercise. Target Names A further explanation of target names is in order, because in the last exercise, you used only the Custom Target feature. • Table the of Contents When you access pop-up menu for Target, you may wonder what the terms _blank, • Indexand _top mean. You created the targets right and left, and those names are in _parent, _self, the menu because • Examples you added them. The other names, however, are part of the XHTML specifications. Macromedia® Dreamweaver® The following MX chart 2004: explains Hands-On their Training meanings. ByGaro Green, Lynda Weinman XHTML Specifications for Target Names Publisher: Peachpit Press Pub Date: December 22, 2003 Target Name Significance ISBN: 0-321-20297-X _blank Loads the link into a new browser window. This is the target to use if you want to keep someone inside your site, and show them another site at the same time. It opens a new browser window, so that two windows are on the screen at the same time–one containing your site, and the other containing the With its powerful combination ofthe visual tools,to. application development features, and code URL of sitelayout you linked editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web _parent Here to get you Used when framesets areisnested, to sendproject-based your end developers. hands-on with it fast the definitive training on the user to the parent of the nested framesets. topic from one of the master teachers at Linda.com training. Using a It's combination of projectpossibleand to put a frameset inside another frameset, based lessons, guided exercises, QuickTime tutorials, veteran author Garo Green walks you but that's more advanced frameset building than creating and through all the Dreamweaver MX 04 basics: navigating the new interface, bookamong covers. Frankly, welearn rarelyabout use this target, managing Web sites, andthis linking pages. You'll frames and forms, cascading because we rarely work with nested framesets. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout You'll find of load all ofin Dreamweaver's _self and typography practices. Used when youalso want theextensive results ofcoverage the link to newest features: dynamicthe cross-browser validation, improved CSS support, built-in graphics same page that the link was in. That's the editing, and more. Throughout, Garo shows you not just how to do something but why you're default behavior of XHTML anyway, so we never use doing it and the results ofthis. your actions. Pages: 720 _top Transports the end user from a frameset to a single XHTML page. This breaks the frames and loads all of the results into a single page, in the same window. Use this target when you want to exit a frameset. Note To Scroll or Not to Scroll? I keep harping on the fact that frames can look boxy, and you've already learned how to remedy this by turning off the border on the frameset. What about scroll bars, which can also make a frameset look boxed in? Scroll bars are necessary if your content is larger than the size of the frame. You can turn scroll bars off completely or allow them to appear automatically, which is the Dreamweaver MX 2004 default. I suggest you leave the program at its defaults. If the content is big enough to warrant scroll bars, they'll appear. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Adding a Background Image You've learned how to color the background of each frame, but what about adding a background image? This is similar to coloring the background of each frame, which you already did in Exercise 2. There can be unexpected alignment problems with this process, however. In this • Contents exercise, youTable will of learn how to set the left frame to a specific size so that it doesn't cut off the • Index background image unexpectedly. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Click inside the left frame and make sure you see the text-insertion cursor blinking to the right of the linked words Contact Us. Choose Modify > Page Properties. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Click the Browse button to the right of the Background Image field to browse to the images folder, and select bg_eyeglasses.jpg. Click OK and thenOK in the Page Properties dialog box. The background image should appear in the left side of the frameset. 3. Click inside the frame named right.html and make sure you see the text-insertion cursor blinking, then choose Modify > Page Properties. 4. Click the Browse button to the right of the Background Image field to locate once again bg_eyeglasses.jpg in the images folder where you just were. Click OK and then OK. The background image should appear in the right side of the frameset. There's just one problem. Notice that the image is repeating in an inconsistent way? The background image has been clipped differently within the two frames. To correct the problem, it's essential to know the dimensions of both the graphic and the two frames within the frameset. The following steps walk you through this process. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. To establish the size of the background image, click on the left frame again and make sure you see the blinking text-insertion cursor. Choose Modify > Page Properties again. Click on the Browse button to the right of the Background Image field to locate bg_eyeglasses.jpg. Make sure that you check the Preview images check box in the Select Image Source dialog box. Notice that the dimensions 150 x 120 appear in the Image preview? You now know that the width of the image is 150 pixels. Click Cancel twice to return to the document window. Why cancel? The sole purpose for doing this step was to read the dimensions of the graphic, not to actually re-insert the background image! Often, I will insert an image just to learn more about its size or downloading speed, and then cancel out of the process once the information is gathered. Next, you'll want to make the left column of the frameset match the size of that background image. Because the background image is 150 pixels wide, you could make the left frame 300 pixels wide, and it would tile twice perfectly. Question is, how do you get to the information that shows the left column's size? Frankly, it's a bit tricky and takes some clicking around. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press 6.PubInDate: the December Frames22, panel 2003 (if it's not visible, choose Window > Frames), click on the outer border of the panel. Your Frames panel might already look like this before you read this ISBN: 0-321-20297-X step. If so, click on the left side, and then click on the outer border again. Pages: 720 Sometimes you have to toggle the outer border of the Frames panel on and off to get it to show the correct information settings in the Properties inspector. What's the goal of doing this? Changing your Properties inspector to show you the frameset's column size . With its combination visual layoutoftools, application and code Thepowerful goal of clicking on theofouter border the Frames paneldevelopment is to change features, your Properties editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web inspector so that it looks like the one shown in the following screen shot, which gives you developers. Here to get you hands-on with it fast is the definitive project-based training on the access to the column value. With the left column selected in the Properties inspector, you topic can fromsee one of the Linda.com training. Using a combination of projectthat the master Columnteachers setting isat150 pixels, which is the setting that you created way basedback lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you in Exercise 2. You'll want to change this to accommodate the size of the background through all the Dreamweaver MXnext 04 basics: navigating the new image in this exercise. The steps walk you through thisinterface, process . creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. Enter the value Column: 150 into the Properties inspector, if it's not already set to that, and press Enter. The left column should have just shifted a bit to the right. Things still don't fit properly, however, because there are more steps to follow. 8. In the Properties inspector, click on the right frame icon, at the right side of the panel. ChooseUnits: Relative. Notice that the alignment problem has just resolved? Now to remove the border between the two frames. Make sure the frameset borders are selected using the Frames panel. From the Borders pop-up menu, choose No. Type 0 for the Border width. Bingo! The background image now tiles perfectly! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web and All linking pages. You'll learn about frames and forms, cascading 9. Choose Filesites, > Save and among press F12 to preview in your browser. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 10. Close the file. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, anddirections more. Throughout, showsodd youand/or not just how to dotosomething but whythey you're If the in ExerciseGaro 4 seemed mysterious you, it's because are a doinglittle it and the results of your actions. odd and mysterious! Perhaps this review will help: Clicking on the right side of the Properties inspector's Column icon allowed you to change the settings for the right column. Choosing Relative Units makes XHTML allocate to the right column whatever space is left over from the fixed-pixel left column. In Exercise 4, you wanted the left side to be fixed, but the right side to scale proportionately depending on the size of the end user's monitor . Units The following chart defines the choices you have when specifying a frame size in the Properties inspector: • Table of Contents • Index • Examples Frame Size Settings Units Function Macromedia® Dreamweaver® MX 2004: Hands-On Training By Garo Green, Lynda Weinman Pixels Sets the size of the selected column or row at an absolute value. This option is the best choice for a frame that should be the same size, such as a navigation bar. If you Publisher: Peachpitalways Press set22,one of your frame regions to Pixels, all the other frames Pub Date: December 2003 will have to yield to that size. In other words, Pixels takes ISBN: 0-321-20297-X priority over all other settings. Pages: 720 Percent Specifies that the current frame take up a specified percentage of the frameset. This causes frames to dynamically resize according to the width or height the end user's browser was opened to. If you mix Pixels and Pixels be layout honored first.application development features, and code With its powerful Percent, combination of will visual tools, editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Relative Allocates space after frames with Units set to Pixels and developers. Here to get you hands-on with it fast is the definitive project-based training on the Percent are satisfied. These frames are designed to take up topic from one of the master teachers at Linda.com training. Using a combination of projectall the remaining space in the browser window. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Frame Properties • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training What the,Lynda frame settings mean in the Properties inspector? The following chart will help you By Garo do Green Weinman understand them: Publisher: Peachpit Press Pub Date: December 22, 2003 Frame Properties In Dreamweaver MX 2004 ISBN: 0-321-20297-X Pages: 720 Setting Description Frame name Sets the name of the current frame so you can use targets (remember _blank,_parent, _self, and _top? ) when setting up links. This name must be a single word or use underscores (my_name) or hyphens With its powerful combination of visual layoutare tools, (my-name). Spaces notapplication allowed. development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Src Sets the source document frame. Enter a developers. Here to get you hands-on with it fast is for theeach definitive project-based training on the file name or click the foldertraining. icon to browse and topic from one of the master teachers at Linda.com Using atocombination of projectselect the file. You can also open veteran a file in author a frameGaro by Green walks you based lessons, guided exercises, and QuickTime tutorials, clicking the framethe inside document through all the Dreamweaver MX the 04 cursor basics:in navigating newthe interface, creating and and choosing > learn Openabout in Frame. managing Web sites, andwindow linking among pages.File You'll frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Scroll Determines whether scroll bars appear when there layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's is not enough room to display the content of the newest features: dynamic cross-browser validation, improved CSS support, built-in graphics current frame. Most browsers default to Auto. This is editing, and more. Throughout, Garo shows you not just how to do something but why you're a good thing, because you only want scroll bars if doing it and the results of your actions. they are necessary. Scroll bars aren't pretty, but they are necessary when there's more content than the frameset column size can display. No resize Prevents a frame from being resizable in browsers. Tip: If you turn the borders off in your frameset, end users won't be able to resize them even if the No resize option is left off. Borders Controls the border of the current frame. The options are Yes, No, and Default. This choice overrides border settings defined for the frameset. It's important to set the borders to No even if you've set them to 0, because of differences between Netscape and Explorer. Netscape honors 0; Explorer honors No. Border color Sets a border color for all borders adjacent to the current frame. This setting overrides the border color of the framesets. It's supported only on 4.0+ browsers, so if you choose to use it at all, we don't recommend that you make it an integral part of your design. Margin width Sets in pixels the width of the left and right margins (the space between the frame border and the content). The default is that the frame border and content are aligned, so unless you want an offset, you don't need to adjust this setting. Margin height • • • Sets in pixels the height of the top and bottom margins (the space between the frame border and Table of Contents the content). The default is that the frame border Index and content are lined up, so unless you want an Examples offset, you don't need to adjust this setting. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5 Seamless Background Across Two Frames In the previous exercise, you learned to put the identical background image into two frames and how to set a frameset's column width to correct any alignment problems. Next, you'll produce a similar exercise that uses full-screen background artwork to further alter the appearance of the • of Contentsthe background image art was created at a size large enough to fill frameset. In Table this example, • Index the entire screen (800 x 600 pixels), then sliced into two pieces, and then reassembled inside • the framesetExamples to appear as a seamless image. This technique successfully hides the unwanted Macromedia® Dreamweaver® MX 2004: Hands-On boxy appearance that results so often whenTraining creating frames. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open frameset2.html from the frameset2 folder. This is similar to the document you made before, but a lot of the early steps are already completed. Click on the left frame in the document window. Next, choose Modify > Page Properties. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click on the Browse button to the right of the Background Image field and browse to the images folder and select bg_left.gif. Notice that the dimensions appear in the Image preview of the Select Image Source window and that the width of thisfeatures, image isand 150code With its powerful combination of visual layout tools, application development pixels. ClickDreamweaver OK then OK again. editing support, MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Click on the right frame of the frameset and choose Modify > Page Properties. Select bg_right.gif as your background image. Notice that the dimensions appear in the Image preview of the Select Image Source window and that this image is 1100 pixels wide. This extra-long width will prevent the background from visually tiling horizontally in a browser. Click OK then OK again. Your screen should look funky because you haven't set the frameset's dimensions yet. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Make sure the Frames panel is open (Window > Frames), and click on the outer region (if you've forgotten how, check Exercise 4, Step 6) to make your Properties inspector display the frameset's dimensions. Click on the left side of the Column icon and choose Borders: No. Then enter Border width: 0,Column value: 150, and Units: Pixels. 5. Click on the right side of the Column icon, and choose Units: Relative. 6. PressF12 to preview in your browser. When you are done staring at the page, save and close the files. ;-) If your screen looks like this, you did everything right! If it doesn't, go back and reread all the steps (especially the part about setting the right side to Relative!) It looks like a single page with a single background, does it not? If your audience hates the way frames look, they should have no complaints with this little sleight of hand. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. Close all open files. 6 Frames Objects The previous examples taught you a lot about the basics of frames. Now that you have that knowledge under your belt and understand the concepts behind frames, you will be able to fully understand the power of the Frames panel. This exercise shows you how to use it. • Table of Contents • Index new blank document. • 1. Create a Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 2.Publisher: Make sure thePress Layout group of the Insert bar is showing. This panel group gives you quick Peachpit access to many Pub Date: December 22,layout 2003 features, one of which is preconfigured sets of frames. ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Click on the second to last icon on the right side of the Insert bar. From the drop-down menu, choose Left and Nested Top Frames. This will make Dreamweaver MX 2004 create a frameset similar to the one shown in the icon. Note:This step is an alternate method to Step 3 in Exercise 1. You don't have to choose Modify > Frameset > Split Frame anymore if you use these handy objects on the Insert panel. Tip What Does the Blue and White Mean? • You might have noticed that the icons in the Frames drop-down menu, on the Insert bar, are colored in blue and white. This has significant meaning: It tells you how the different areas have been specified with regard to size. The blue areas are set to a relative size, and the white areas have been set to an exact pixel size. Table of Contents • Index What you spent several steps establishing in Exercise 4 by setting the frames to be Examples either relative or pixel-based is accomplished automatically by using one of these Macromedia® Dreamweaver® MX 2004: Hands-On Training frames objects from the Layout group of the Insert panel. Please don't hate me for making go through all those steps in Exercise 4, though. As your teacher, I ByGaro Green , Lynda you Weinman decided it was good for your education to appreciate the frames features in Dreamweaver MX 2004 by learning how to set them up manually and painfully first. Publisher: Peachpit Press Sorry 'bout 'dat, but not really. Just think, "No pain, no gain." ;-) • Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 This is what your page should look like at this point. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. With the frameset still selected, choose File > Save Frameset As. This works just like the procedure you learned in Exercise 1. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. The first file you are going to save is the frameset file. It contains all of the information on how the entire structure of the page is set up. Save this file as frameset.html inside the With its powerful folder. combination of visual layout tools, application development features, and code frameset3 editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Before you start saving the individual frames, you should take a minute and figure through all the Dreamweaver MX 04 basics: navigating the new interface, creating and out what you are going to name each of them. I suggest using file names that are managing Web sites, and linking among pages. You'll learn about frames and forms, cascading relative to their locations on the pages or to the content that will be placed inside style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best them. I have given each one a name in this illustration . layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 6. The next file you are going to save is the left frame of your frameset. Click inside the left frame of the document window and choose File > Save Frame As. Save this file as With its powerful combination of visual layout tools, application development features, and code left.html inside the frameset3 folder. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. The next file you are going to save is the top frame of your frameset. Click in the top frame of the document window and choose File > Save Frame As. Save this file as top.html inside the frameset3 folder. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 8. The next file you are going to save is the middle frame of your frameset. Click in the middle frame of the document window and choose File > Save Frame As. Save this file With its powerful combination visual layout tools, application development features, and code asmiddle.html inside theofframeset3 folder. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. to get youahands-on with it fastthe is the definitive project-based on the As you Here can see, using frames object from Frames drop-down menu, intraining the Insert bar, topic is from one of the master teachers at Linda.com training. Using a combination of projecta pretty simple way to create a frameset. But you still need a working knowledge of basedframesets, lessons, guided exercises, and QuickTime tutorials, author to Garo Green so that's why I chose to wait until the end veteran of this chapter show you walks this you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and option. Now that you know it's here, use it! managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks integration, 9. Close this file. You are and doneFlash working with it. and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic improved CSSit's support, graphics Phew, this was a longcross-browser chapter. Take validation, a quick break, and then time tobuilt-in move on to the editing, and more. Throughout, Garo shows you not just how to do something but why you're next chapter. doing it and the results of your actions. Chapter 11. Rollovers Creating a Simple Rollover • • • Table of Contents Creating Pointer Rollovers Index Examples Creating Multiple-Event Rollovers Macromedia® Dreamweaver® MX 2004: Hands-On Training Flash Buttons ByGaroCreating Green, Lynda Weinman Inserting a Navigation Bar Rollover Publisher: Peachpit Press December 22, 2003 in Web development is to invent artwork that clearly communicates OnePub of Date: the key challenges 0-321-20297-X how toISBN: navigate through your site. Rollover graphics, which change when the end user's mouse movesPages: over720 them, are great for adding visual cues that ensure your audience knows an image has special meaning or that it is a link. Rollovers are also great if you have limited space because you can put extra information within the changing graphic. For example, you could make a button that says "Services," and when visitors place their mouse over the word, it could change to list the services you offer. With its powerful combination of visual layout tools, application development features, and code What you might not realize is that rollovers are not written in standard HTML. Instead, rollovers editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web are written in a widely used scripting language invented by Netscape, called JavaScript. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one MX of the master teachers writes at Linda.com training. Using combination of projectDreamweaver 2004 automatically JavaScript rollovers fora you without you ever having based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you to write the scripts or even understand how they are constructed. This is great news, because a through all the Dreamweaver MX 04 basics: navigating the new interface, creating and lot of people, myself included, don't know how to write JavaScript from scratch. Alternatively, I managing Web sites, and linking among You'll frames forms, cascading have trained many programmers who dopages. know how tolearn writeabout JavaScript byand hand, but enjoy style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Dreamweaver MX 2004's rollover capabilities because they can literally save days of layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's programming work. For this reason, the Dreamweaver MX 2004 rollover feature is helpful to newest both thefeatures: designerdynamic and the cross-browser programmer. validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Rollover Rules Although this book provides many exercises that teach you how to implement rollovers, it is my hope that you'll move beyond the exercises to create your own custom rollover graphics once you get the hang of this feature. If you plan to make your own rollovers from scratch, you should • Contents concepts. be aware of aTable fewofimportant • Index Rollovers require • Examples a minimum of two graphics–an "off" state and an "on" state. Because this is a book on Dreamweaver Macromedia® Dreamweaver® MXMX 2004, 2004:itHands-On doesn't Training cover how to make the graphic component of rollovers. You need an imaging program, such as Fireworks or Photoshop, to make the images. ByGaro Green, Lynda Weinman You'll learn more about creating graphics in Fireworks in Chapter 15, "Fireworks Integration." Publisher: Peachpit If you are going toPress make your own rollover graphics in an image editor, one important rule to Pub Date: December 22, 2003 understand is that the graphics for the "off" state and "on" state for each of your rollover images ISBN: the 0-321-20297-X must have same dimensions, or you risk that they will look distorted. JavaScript requires WIDTH and720 HEIGHT information, which Dreamweaver MX 2004 will add for you automatically. Pages: If you have two differentsized pieces of artwork, the JavaScript will scale both to the same width and height, causing distortion. For this reason, all the images that are provided in this chapter's exercises share the same dimensions, as they should. ;-) With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Creating a Simple Rollover This first exercise shows you how to create a simple rollover. These types of rollovers involve two pieces of artwork. The first graphic appears on the screen initially, and the second appears when the mouse "rolls over" it. In JavaScript terminology, this is called a swap image. But you will • Table Contents not be writing anyofJavaScript from scratch, because Dreamweaver MX 2004 makes creating a • Index simple rollover easier than many other operations you've already learned. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Define your site for Chapter 11. If you need a refresher on this process, revisit Exercise 1 in Chapter 3, "Site Control." ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 2. Open simple_done.html the chap_11 folder. Move your mousesuggestions over the symbol. style sheets, and Fireworks andinFlash integration, and gobble up Garo's about best happens, practices. right? Press F12also to preview the page. When of youallmove your mouse over layoutNothing and typography You'll find extensive coverage of Dreamweaver's it in your Web browser, it changes to an alternate versionCSS of the symbol. You can only view newest features: dynamic cross-browser validation, improved support, built-in graphics a rollover inside a browser Garo because Dreamweaver 2004 cannot preview within editing, and more. Throughout, shows you not justMX how to do something butrollovers why you're authoring environment. Return to Dreamweaver MX 2004 and close the file. You'll learn doingits it and the results of your actions. how to add the rollovers from scratch to an existing page in the following steps. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 3. From the Site panel, open simple.html in thetraining. html folder. Click inside the table cell shown topic from one of the master teachers at Linda.com Using a combination of projectabove. This places your cursor inside this specific table cell, which is where you want based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walksthe you rollover toDreamweaver be inserted. MX 04 basics: navigating the new interface, creating and through all the managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Making sure the Common group of the Insert panel is selected, click and hold down your mouse on the small black arrow to the right of the Image icon. This will display a list of image objects that you can insert. From the drop-down menu, choose Rollover Image to insert a rollover image in the table cell. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Insert By5. GaroThe Green , LyndaRollover Weinman Image dialog box will appear. In Image name, type about. For the Original image, click Browse to select about_off.gif located inside the images folder. For the Rollover image, click Browse to select about_on.gif located inside the same Publisher: Peachpit Press folder. In the Alternate text box, type Find out more about us! Make sure your dialog Pub Date: December 22, 2003 box looks just like the one above and click OK. ISBN: 0-321-20297-X 6. Pages: 720 Repeat the process for the other rollovers using the frames,locations, and contact images found in the images directory. Remember to give each image a unique name and an<alt rel="nofollow"> tag when inserting the rollover. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you With still selected, notice the navigating hash mark the (#) new inside the Linkcreating area of the through allthe theimage Dreamweaver MX 04 basics: interface, andProperties inspector. MX among 2004 inserted this symbol in order to create link, even managing Web Dreamweaver sites, and linking pages. You'll learn about frames and a forms, cascading specify Why? Because and a link is necessary for suggestions the JavaScript rollover style though sheets, you and didn't Fireworks andone. Flash integration, gobble up Garo's about best work. Putting a practices. hash markYou'll in thealso Link area inserts acoverage stand-inof link doesn't link to layouttoand typography find extensive allthat of Dreamweaver's anything. It dynamic simply acts as a placeholder so thatimproved you can still it andbuilt-in see thegraphics rollover . newest features: cross-browser validation, CSSclick support, editing, and more. Throughout, Garo shows you not just how to do something but why you're 7. Press F12 preview the rollover. doing it and thetoresults of your actions.Notice that as you roll over the images, the corresponding "on" image appears. Since you haven't set any links yet, clicking on the rollovers won't open up another page. Return to Dreamweaver, save, and close the document. Note Inserting Rollovers As you'll see later in this chapter, there are other ways to insert rollovers than the technique just shown. Using the Insert Rollover feature, in my opinion, is certainly the most efficient. In addition to inserting both image states, you also get to name the image (more on that later), give it an <alt rel="nofollow"> tag, and set your link, all in one dialog box! Talk about saving time. :-) Tip Creating Animated Rollovers Throughout this exercise, you'll learn different methods to insert and work with rollovers. In addition to what you're learning here, you should experiment with rollovers to examine new ways your user can interact with your pages. One such technique is an animated rollover. An animated rollover is exactly the same as a static• Table of Contents image rollover, but it uses an animated GIF in one, or both, of the rollover states. • Index While this can add a nice touch to any page, you want to be careful to not overdo it. In • the caseExamples of animated GIFs, a little goes a long way. If your animated GIF is set to loop, Macromedia® Dreamweaver® MX 2004: Hands-On Training that is, play continuously, preloading the image is fine. If it is only supposed to play ByGaro Greenmake , Lynda sure Weinman once, the Preload Rollover Image check box is unchecked when importing the image. If the animated GIF preloads, the animation will play when preloaded, and by the Peachpit time your Publisher: Pressuser ends up rolling over the image, it will no longer animate! Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2 Creating Pointer Rollovers This next exercise shows you how to create pointer rollovers. Pointer rollovers reuse one piece of artwork (in this example, the symbol that follows the mouse as you move over each word). This type of rollover involves making a table to hold all the artwork in place. You'll also get to use the • Table of Contents Behaviors feature, instead of the Insert Rollover Image object from the Insert panel. Are • Index or what? you feeling macho, • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. View the finished file first. Open pointer_done.html located in the chap_11 folder, and pressF12 to preview it inside a browser. When you're finished, return to Dreamweaver MX 2004 and close the file. You're going to re-create it using a handy table I've provided for you. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Open pointer.html from the chap_11 folder, which already contains an empty table with nine rows and two columns. When you are finished, you will have created a navigation bar that uses pointer rollovers as a visual navigation aid. Notice that the right column of the table has our orange background color applied to it. These colored cells match the background of the graphics you will be inserting here. I could have had you create this With its powerful combination of visualtolayout tools, features,the and code table from scratch, but I wanted help you getapplication to learningdevelopment about programming editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web rollovers faster. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from inside one of Cell the master teachers at Linda.com training. a combination of project3. Click K and choose Insert > Image. Select Using blank.gif from the images folder, basedand lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you then click Open. The goal of the first part of this exercise is to insert the same through all the Dreamweaver 04 basics: navigating interface, blank.gif image in everyMX location that the pointer the will new appear. Why? creating Because and rollovers managing Web sites, and linking among pages. You'll learn about frames and forms, cascading require two images: the original state and the rollover state. In this instance, the original style state sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about looks like nothing, because it is a transparent GIF that lets the background colorbest show layoutthrough. and typography practices. You'll also findimage extensive coverage of all of Dreamweaver's Be sure to choose the blank.gif and not blank1.gif, they are different newest features: dynamic cross-browser validation, sizes and would cause problems in your table. improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the your more actions. 4. Repeat thisresults processofthree times, inserting the same blank.gif file inside Cells M,O, and Q. • Table of Contents • Index • Examples • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 6. From Assets panel, click theshows Images if it is not already showing files. editing, andthe more. Throughout, Garo youbutton not just how to do something butthe whyimage you're inside A and thenactions. drag nav1.gif from the Assets panel into this cell. doingClick it and theCell results of your 7. Click inside Cell B and insert the image nav2.gif by dragging it from the Assets panel. Whilenav2.gif is selected, enter the name nav1 inside the Properties inspector. 7. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 8. Click inside Cell C and insert the image nav3.gif by dragging it into the cell from the Publisher: Peachpit Press Assets panel. Click Cell D and insert the image nav4.gif from the Assets panel. While Pub Date: December 22, 2003 enter the name nav2 inside the Properties inspector. nav4.gif is selected, ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from inside one of Cell the master teachers Linda.com training. Using ait combination of project9. Click E and insert the at image nav5.gif by dragging into the cell from the basedAssets lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you panel. Insert nav6.gif inside Cell F. While nav6.gif is selected, enter the name through all the Dreamweaver MX 04 basics: navigating the new interface, creating and nav3 inside the Properties inspector. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. Click inside Cell G and insert the image nav7.gif by dragging it into the cell from the Assets panel. Use the Assets panel to insert the imagenav8.gif inside Cell H. While nav8.gif is selected, enter the name nav4 inside the Properties inspector. 11. To finish up your table, click Cell I and insert the image nav9.gif by dragging it into the cell from the Assets panel. Take a moment to examine your finished table to make sure there are no gaps between the images. If you see any, make sure you inserted the images into the proper cells. This is whatpointer.html looks like now. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all you the Dreamweaver MX 04 basics: navigating the new interface, creating and 12. Next, will set the rollovers. Click nav2.gif (Home) to select it. Open the Behaviors managing Web sites, and linking among pages. You'll learn about frames and forms, cascading panel (if it isn't already open) by selecting Window > Behaviors or using the shortcut key style (Shift+F3). sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser improved CSS support, built-in graphics 13. With nav2.gif (Home) still selected,validation, click the plus sign above the Events column and editing, and more. Throughout, Garo shows you not just how to do something but why you're selectSwap Image from the pop-up menu. doing it and the results of your actions. 14. In the Swap Image dialog box that opens, make sure "blank1" is highlighted at the top. ClickBrowse and select pointer.gif located in the images folder. Preload images allows all images to preload before a user mouses over them. Restore images onMouseOut returns images to their original state when the user takes the mouse off of the image. Both of these check boxes are checked by default. Click Open (Windows) or Choose (Mac). In theSwap Image dialog box, click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X 15. Pages: select 720 Next, nav6.gif (frames) and click the plus sign in the Behaviors panel to select Swap Image. Select image "blank2" from the Images list and click Browse to locate pointer.gif. Click Open. Back in the Swap Image dialog box, click OK. 16. Repeat this process two more times as follows: With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the (Locations), image "blank2." topic from For onenav6.gif of the master teachersselect at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Fornav8.gif (Contact), select image "blank3." through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 17. PressF12 to preview in your browser. What you see should look just like the 17. pointer_done.html document you opened and previewed at the beginning of this exercise. To make yourself feel really good, return to Dreamweaver MX 2004 and click the Code View button to view the code. Hey, you didn't have to write any of that! Click the Design View button to return to Design view. Save and close the file to move on to the next exercise. • • • In this exercise, you learned the benefit of using a table to hold together multiple graphics. It also reinforced that you need two images for a rollover–the original state and the rollover Table of Contents state. In this instance, the original was a blank image. When you program rollovers from Index the Behaviors panel, you also must give each separate image a unique name, which you did Examples several times in this exercise! Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 Movie ISBN: 0-321-20297-X Pages: 720 rollover_pointer.mov To see this exercise in action, check out rollover_pointer.mov, located in the movies folder on the Dreamweaver MX 2004 H·O·T CD-ROM. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3 Creating Multiple-Event Rollovers A multiple-event rollover affects more than one piece of artwork in the Swap Image behavior. In this example, two pieces of artwork change for every rollover. If that sounds complicated, it is! Assembling this type of rollover can be tedious, but not nearly as tedious as writing all the • Table of Contents HTML and JavaScript from scratch. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open multiple_done.html located in the chap_11 folder, and preview this finished exercise in your browser. Roll your mouse over each item in the list and watch the navigation button change and an image appear at the top center of the navigation bar. This is a very impressive type of rollover, and you (yes you!) are going to know how to do it as soon as you follow along. Close this file. This image shows what the page looks like in Dreamweaver MX 2004. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Open multiple.html located in the chap_11 folder. This file includes an empty, pre-built 2. table. You learned to make a table similar to this in Chapter 7, "Tables." • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 3. Display theDreamweaver Assets panel MX and2004 click is the Images button if the images are not already editing support, sure to become the constant companion of many Web showing. Click inside B (rowwith 3, column anddefinitive drag about_off.gif intotraining the cell. the developers. Here to get youCell hands-on it fast 1) is the project-based onInthe theat image about. topic Properties from one of inspector, the master name teachers Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Click inside Cell C (row 3, column 2) and drag the image frames_off.gif from the Assets panel into the cell. In the Properties inspector, name the imageframes. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. Click inside Cell D (row 3, column 3) and drag the image locations_off.gif from the Assetspanel into the cell. In theProperties inspector, name the image locations. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Click inside Cell E (row 3, column 4) and drag the image contact_off.gif from the Assets panel into the cell. In the Properties inspector, name the image contact. 6. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. Click inside Cell A (row 2, column 2) and drag the image swap.gif from the Assets panel into the cell. In the Properties inspector, name the imageswap. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic This from is one what of the your master page teachers shouldat look Linda.com like now. training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press 8.PubIfDate: the Behaviors panel is not open, press Shift+F3 to open it. Select the image in Cell B December 22, 2003 (row 1, column 1). With the image selected, click the plus sign in the Behaviors panel to ISBN: 0-321-20297-X selectSwap Image. In the Swap Image dialog box that opens, notice that image Pages: 720 "about" is selected in the Images list. Be sure not to click OK just yet . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. ClickBrowse to Set source to: about_on.gif. This sets the rollover for the graphic about (about_on.gif) to change to an alternate version of the button when you move your mouse over it. Don't click OK yet! 10. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press 10.PubSelect "swap" from the same Images list. Click Browse again to Set source to: Date: December 22, 2003 m_about.gif, then click Open. You just instructed the behavior to swap the swap ISBN: 0-321-20297-X (swap.gif) artwork to the picture of the eyeglass frames (m_about.gif). Click OK! Pages: 720 The rollover now triggers two behaviors: The Tools button is instructed to switch, and an image of the eyeglass frames appears when the mouse moves over the original About button image. With powerful combination of visual layout tools, development features, and code 11. its Press F12 and test your first rollover! Move yourapplication mouse over the About button. The button editing support, Dreamweaver MX and 2004 is center sure toimage become the constant of many now changes to the rollover, the changes from acompanion blank square to an Web developers. Here to get frames. you hands-on fast the definitive training on the image of eyeglass You'vewith just itset theisrollover for theproject-based About button. topic from one of the master teachers at Linda.com training. Using a combination of projectbasedThere lessons, exercises, and QuickTime tutorials, veteran author Garo Green walks you are guided only three more items on the list to go . through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking pages. You'll learn about and forms,Select cascading 12. Return to Dreamweaver MX among 2004, and repeat this process forframes the next image. the style Frames sheets, and Fireworks Flash integration, and gobble up plus Garo's suggestions about best image in Cell and C. With the image selected, click the sign in the Behaviors layoutpanel and typography practices. You'll find extensive coverage all of Dreamweaver's and select Swap Image. In also the Swap Image dialog boxofthat opens, notice that newest features: improved CSS support, built-in graphics "frames" is dynamic selected cross-browser in the Imagesvalidation, list. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results ofsource your actions. 13. Click Browse to Set to: frames_on.gif. Don't click OK yet. 14. Select "swap" from the Images list. Click Browse to Set source to: m_frames.gif. Click OK! Two more to go! 15. Select the Locations graphic. With the image selected, click the plus sign in the Behaviors panel to select Swap Image. In the Swap Image dialog box that opens, notice that "locations" is selected in the Images list. 16. ClickBrowse to Set source to: locations_on.gif. Don't click OK yet. 17. Select "swap" from the Images list. Click Browse to Set source to: m_locations.gif. ClickOK. One more item to go! 18. Select the Contact Us graphic. With the image selected, click the plus sign in the Behaviors panel to select Swap Image. In the Swap Image dialog box that opens, notice that "contact" is selected in the Images list. 19. 20. 19. ClickBrowse to Set source to: contact_on.gif. Don't click OK yet. 20. Select "swap" from the Images list. Click Browse to Set source to: m_contact.gif. Click OK. 21. You're done. Press F12 to preview your work in a browser, then close the file and move on to the next exercise. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Movie ByGaro Green, Lynda Weinman Publisher: Peachpit Press swap_image.mov Pub Date: December 22, 2003 ISBN: 0-321-20297-X This isn't the most intuitive operation in the universe, so don't kick if you don't get it right the first time. If you are interested in watching me perform the exercise, please view the movie swap_image.mov, located in the movies folder on the Dreamweaver MX 2004 H·O·T CD-ROM. Pages: 720yourself With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Are Flash Buttons? Dreamweaver MX 2004 lets you create something called Flash Buttons. These buttons have very similar characteristics to other rollovers that you have worked with in this chapter. For example, like other rollovers, Flash Buttons have an Up state and an Over state. They can be set • Contents up to link to Table otherofpages, both internal and external. However, unlike other buttons, they are • Index created from within Dreamweaver MX 2004. This means that they can be quickly changed with • Examples just a few clicks, which can save you time. You don't need to use an image editor like Fireworks Macromedia® Dreamweaver® MX 2004: or ImageReady to work with FlashHands-On Buttons.Training ByGaro Green, Lynda Weinman Creating Flash Buttons is fairly simple, as you will see by following the next exercise. What is different is that Dreamweaver MX 2004 creates the rollover images in the SWF file format, Publisher: Peachpit Press instead of GIF or JPG, after you click OK in the easy-to-use Flash Button interface. In other Pub Date:you December 2003 worked with existing images and set the behavior to write the exercises, have22, simply ISBN:JavaScript 0-321-20297-X necessary to enact a rollover. With Flash Buttons, you are creating actual image files Pages: 720 from Dreamweaver MX 2004. This can be wonderfully convenient! In order to view Flash content on the Web, you must have the Flash plug-in installed in your browser. If you don't have this plug-in, you can download it for free at http://www.macromedia.com/software/flashplayer/. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get youCreating hands-onFlash with Buttons it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectPros Explanation based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Font all the Dreamweaver With Flash Buttons, you cannavigating use any font in yourcreating and through MX 04 basics: the installed new interface, integrity Web sites, system, and theamong visitorspages. to your pagelearn don'tabout need frames to haveand forms, cascading managing and linking You'll font installed. gives youand much moreup flexibility style sheets, and that Fireworks and FlashThis integration, gobble Garo's suggestions about best when practices. you are designing your layout and typography You'll also findpages. extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Easily With just a few clicks, you can change the text and entire editing, and more. Throughout, Garo shows you not just how to do something but why you're updated look of your Flash Buttons. This can save you a lot of time doing it and the results of your actions. when you need to make changes to your site. Complex animations Some of the Flash Buttons available to you in Dreamweaver MX 2004 have more complex animation than you could easily achieve with animated GIF files. Design consistency Because a navigation system that uses Flash Buttons can be set up in minutes, it's easy to get a consistent look and feel to your site without spending a lot of time designing your own rollover art. This helps to bring consistency to the overall design of your site. Cons Explanation Plug-in required All Flash content on the Web requires the Flash Player plugin in order to be viewed properly. Flash Buttons are no different. Limited linking Certain types of links, called site-root relative links, don't work with Flash buttons. If you're not sure what a site-root relative link is, don't worry, plenty of web designers go their whole careers without using them. Just be aware that certain types of links don't work with Flash buttons. Fixed button sizes Although the Flash buttons allow you to use any font installed in your system and choose the font size, the buttons themselves don't change to fit the text. Often you'll find your text too big for the button you've chosen. Usually a small modification to your text can cause it to fit inside the button, but you need to design with this limitation in mind. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Creating Flash Buttons Dreamweaver MX 2004 enables you to create Flash rollover buttons from a predefined set of styles without ever leaving Dreamweaver MX 2004. This exercise shows you how to work with this cool feature. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 1. Open the flash.html file located inside the chap_11 folder. page built-in containsgraphics a table at newest features: dynamic cross-browser validation, improved CSSThis support, theand top more. that isThroughout, set up to hold theshows Flash Buttons this exercise. editing, Garo you not you just will howcreate to do something but why you're doing it and the results of your actions. 2. Click inside the cell to the right of the laEyeworks logo in the first row of the table. You should see a blinking cursor inside the cell. This indicates that your content will be inserted in this cell. Warning Flash Plug-In Required One advantage of Flash Buttons is that you can use any font you want and end users do not have to have that font on their computers. All Flash content on the Web requires that end users have the Flash plug-in installed in their browsers. According to Macromedia, about 436 million people have a version of the plug-in installed. That's a lot of people. Different ways to detect whether users have this plug-in installed are described in Chapter 14, "Behaviors". • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press 3. From the Common Objects in the Insert panel, click and hold your mouse down on the Pub Date: December 2003 Media button.22, This will bring up the Media objects; click the Flash Button object. This ISBN: 0-321-20297-X will open the Insert Flash Button dialog box. Pages: 720 The Insert Flash Button dialog box will display a preview of the button settings at the top. As you select different styles, the Sample area will change. Moving your cursor overcombination the Sampleofarea will display a preview of development the rollover features, effect . and code With its powerful visual layout tools, application editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Under the Style option, select Beveled Rect-Bronze. This will change theSample area at the top. Move your mouse over the Sample area to preview the rollover effect for this 4. style. For the Button text option, type About Us. This option defines the text you want to appear on the button. If you leave this option blank, no text will appear on the button. Make sure the Font option is set to Verdana and the Size option is set to 12. • • • By default, the Flash Buttons will have a white background. You can use the eyedropper match the background of the buttons with other colors in your site, Table ofto Contents such asIndex the background color . Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Click the Bg Color box and move your mouse over the background of your document. This will let you sample the orange color so that both backgrounds match. 6. In the Save As dialog box, type About.swf. This saves the new Flash Button in the same folder as our HTML page. Note:It may seem odd to save the file, but remember that you're actually creating a SWF file each time you add a Flash Button to your page. It also may not seem important to pay attention to where you save this file, but there are some things about adding links to Flash Buttons that you need to be aware of. Even though you are not linking your Flash Buttons in this exercise, you will link your Flash Buttons to other pages 99% of the time. They are, after all, navigation items! When linking Flash Buttons, it is best to save the SWF file in the same folder as the HTML page it resides on. It's actually a common practice to save all Flash content into a special folder in order to keep yourself organized. Flash Buttons, however, are a little different. If you add a link to your Flash Button and try to save the file into another directory, Dreamweaver will warn you that the link may not work in older browsers. What's worse, you have to describe the link relative to the location of the SWF file, not the HTML page it's on! Sound confusing? It can be! Just remember to save the Flash Button in the same directory as your HTML page, and you'll be fine . This is what the dialog box should look like at this point in the exercise . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. ClickOK to complete this process and create the Flash Button. This is what your page should look like when the first button is inserted . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 8. PressTab to move your cursor to the next table cell. With powerful combination of visual layout tools, application code 9. its Using the same steps, create a Flash Button in each cell fordevelopment the followingfeatures, options: and Frames, editing support, Dreamweaver MX 2004 sure to to save become the constant companion of many Locations, and Contact Us. Don't is forget each file, with a unique name, inside Web the developers. Here to get you hands-on with it fast is the definitive project-based training on the same folder. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, andpage linking among pages. about added frames the andother forms,Flash cascading This is what your should look likeYou'll afterlearn you have style Buttons. sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing 10. Press support, F12 toDreamweaver preview this page MX 2004 in a is browser. sure to Return becometothe Dreamweaver constant companion MX 2004.ofSave many and Web developers. close this Here file. to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5 Inserting a Navigation Bar Rollover So far, you have created simple rollovers, multiple-event rollovers, and Flash Buttons. You have one more type of rollover to learn to create before you finish this chapter–the navigation bar rollover. A navigation bar-style rollover allows each button to display four states: up,over, • Table while of Contents down, and over down. Instead of working with two images for each rollover, this type of • Index rollover requires that you work with four, one for each separate state. This might sound • intimidating,Examples but the Dreamweaver MX 2004 Insert Navigation Bar feature makes it much Macromedia® Dreamweaver® MX 2004: Hands-On Training easier than you might imagine. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 1. Toand view a sample of what you are also aboutfind to extensive create, open navbar_done.html, located in the layout typography practices. You'll coverage of all of Dreamweaver's chap_11 folder. Press F12 to preview this page in a browser. Move your mouse over the newest features: dynamic cross-browser validation, improved CSS support, built-in graphics images and click a few as well. arejust more than twosomething rollover states? This is what editing, and more. Throughout, GaroNotice showsthere you not how to do but why you're to buildofinyour this actions. exercise. Pretty neat-o! doingyou'll it andlearn the results 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Return to Dreamweaver MX 2004. Close navbar_done.html and open navbar.html located in the chap_11 folder. This is simply a blank file that has been saved for you already. You are going to use it as a starting point to create your own navigation bar. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Select the Images dropdown menu from the Common objects panel. Choose the Navigation Bar object. As an alternative, you could select Insert > Image Objects > Navigation Bar. Either way is fine and will opentheInsert Navigation Bar dialog box. (And a big dialog box it is at that!) Different Rollover States Keeping track of the different types of rollover states can be a little tricky. Heck, I have a hard enough time keeping track of my car keys, not to mention my rollover states. This chart outlines what the different states mean: • Table of Contents • Index • Examples Rollover States Macromedia® Dreamweaver® MX 2004: Hands-On Training State What It Does ByGaro Green, Lynda Weinman Up The graphic that appears on the Web page when it is loaded. This is also referred to as the "static" or "off" state. Pub Date: December 22, 2003 Publisher: Peachpit Press Over ISBN: 0-321-20297-X The graphic that appears when the end-user's Pages: 720 mouse moves over the image. Most often, this image will revert back to the Up state when the mouse is moved off of the image. This is sometimes referred to as the "on" state. Down The graphic that will appear after the end user has With its powerful combination of visual layout tools, application development features, and code clicked on the Over state. This state will not change editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web again until the end-user's mouse moves over this developers. Here to get you hands-on with it fast is the definitive project-based training on the image or clicks on another image. topic from one of the master teachers at Linda.com training. Using a combination of projectbased guided exercises, and QuickTime tutorials, veteran Over lessons, While Down This appears when the end-user's mouse author moves Garo Green walks you through all the Dreamweaver basics: navigating the new interface, over MX the 04 Down state. It works just like the Over creating and managing Web sites, andstate, linking among pages. You'll aboutstate frames and forms, cascading except that it works onlearn the Down only. style sheets, and Fireworks and Flash integration, gobble up Garo's about best Because the user's mouseand is only depressed on suggestions a layout and typography practices. You'll alsotime, find extensive of very all of Dreamweaver's button for a short this state coverage is not used newest features: dynamicoften. cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. This is what the Insert Navigation Bar dialog box looks like by default. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Enter Element name: about. This assigns a name to the first rollover image in this navigation bar. Each element (rollover) must have a unique name. I suggest you name them in relationship to their function on the page. The first button will access the About Us page, so you will name this first element about. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. ClickBrowse next to the Up image field. Browse to the images/navbar folder and select about_up.jpg. Click Open to select this image. You've just specified the image for the Up state of the rollover. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 6. ClickBrowse Over image. Browse folder and selecton the developers. Here tonext get to you hands-on with it fasttoisthe theimages/navbar definitive project-based training Click Open to select this image. You've justaspecified the image for the topic about_over.jpg. from one of the master teachers at Linda.com training. Using combination of projectstateguided of the exercises, rollover. and QuickTime tutorials, veteran author Garo Green walks you basedOver lessons, through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 7. ClickBrowse next to linking Down among image.pages. BrowseYou'll to the images/navbar and select managing Web sites, and learn about frames folder and forms, cascading Click Open select this image. You've specified the image forbest the style about_down.jpg. sheets, and Fireworks and Flashtointegration, and gobble upjust Garo's suggestions about state of the practices. rollover. You'll also find extensive coverage of all of Dreamweaver's layoutDown and typography newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 8. Click Browse to Over Garo whileshows downyou image. Browse images/navbar and editing, and more. next Throughout, not just how to the do something but whyfolder you're Click Open to select this image. You've just specified the doingselect it andabout_overdown.jpg. the results of your actions. image for the Over While Down state of the rollover. Do not click OK yet! This is what your screen should look like at this point in the exercise. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Now that you have added the first rollover button in your navigation, it's time to add the next one. Bycombination the end of this exercise, thistools, will allapplication be second development nature to you! With its powerful of visual layout features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. Click the plus sign at the top of the dialog box. You will see that a new unnamed element is added. This will let you add the second rollover image to the navigation bar. 10. Enter Element name: frames. This will assign a name to the second rollover image in this navigation bar. Remember, each element must have a unique name. 11. ClickBrowse next to Up image. Browse to the images/navbar folder and select frames_up.jpg. Click Open to select this image. This option lets you specify the image for the Up state of the rollover for the second element in the navigation bar. 12. 12. ClickBrowse next to Over image. Browse to the images/navbar folder and select frames_over.jpg. Click Open to select this image. This option lets you specify the Over state of the second rollover. 13. ClickBrowse next to Down image. Browse to the images/navbar folder and select frames_down.jpg. Click Open to select this image. This option lets you specify the Down state of the second rollover. • Table of Contents 14. ClickBrowse next to Over while down image. Browse to the images/navbar folder and Index selectframes_overdown.jpg. Click Open to select this image. This option lets you specify • Examples the Over While Down state of the second rollover. Again, don't clickOK! • Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: This isPeachpit whatPress your dialog box should look like with the second rollover settings. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Adding Elements to the Navigation Bar Element State File locations Up Over Down Over While Down locations_up.jpg locations_over.jpg locations_down.jpg locations_overdown.jpg contact Up Over Down Over While Down contact_up.jpg contact_over.jpg contact_down.jpg contact_overdown.jpg 15. Now that you know how to add new elements to the navigation bar, go ahead and add two more four-state buttons, using the chart above. 15. This is what the dialog box should look like when you are finished . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 16. After you have added the fourth element, click OK. Dreamweaver MX 2004 will automaticallycreate a table, insert the images you specified, and create all of the complex JavaScript necessary for the rollovers to function. It does all of this in about two seconds. I dare any JavaScript programmer to compete with this time! Here you can see the four possible states in the navigation bar. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 17. Go ahead and press F12 to preview your navigation bar in a browser. Make sure you roll over each of the images, click them, and then roll over them again to see the four different states of each. With its powerful combination of visual layout tools, application development features, and code 18. Return to Dreamweaver and thethe file.constant companion of many Web editing support, DreamweaverMX MX2004. 2004 Save is sure to close become developers. Here to get you hands-on with it fast is the definitive project-based training on the another chapter youratbelt, congratulations. I knowa itcombination was a lot ofof hard work, topic Wow, from one of the masterunder teachers Linda.com training. Using projectbut you are well on your way to becoming a Dreamweaver MX 2004 expert . based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 12. XHTML Viewing Your XHTML • • • Table of Contents Editing in Code View Index Examples Using the Quick Tag Editor Macromedia® Dreamweaver® MX 2004: Hands-On Training Tag Chooser ByGaroUsing Green,the Lynda Weinman and Tag Editor Adding XHTML Using a Code Snippet Publisher: Peachpit Press Pub Date: December 22, 2003 Cleaning Up XHTML ISBN: 0-321-20297-X Cleaning Pages: 720 Up Word HTML I am frequently asked whether it's necessary to know HTML or XHTML to be a successful Web designer. Several years ago, the answer was a resounding yes, because there were no alternatives to writing HTML to create Web pages. However, since the introduction of WYSIWYG editors such as Dreamweaver MX 2004, Web developers are shielded from writing the markup With its powerful combination visual layout tools, applicationThe development features, and code and can create Web pages in aof completely visual environment. invention of the WYSIWYG editing support, Dreamweaver MX 2004 is sure to become the constant companion of many editor brought Web page publishing within the reach of almost anyone. However, it's still myWeb developers. get you hands-on with it is the definitive training onfield the belief that a Here basicto understanding of XHTML is fast beneficial to anyoneproject-based planning to work in this topic from one of the master teachers at Linda.com training. Using a combination of projectprofessionally. This book doesn't teach XHTML, but you can teach it to yourself by looking at the based lessons, guided exercises, and QuickTime tutorials, veteran author Green walks markup while building pages visually within Dreamweaver MX 2004. This Garo chapter shows youyou how through all the Dreamweaver MX 04 basics: navigating the new interface, creating and to do this, of course! managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and and Flash integration, andthe gobble up Garo's suggestions about Dreamweaver MXFireworks 2004 gives you three ways to view document window, combining the best best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's of both the visual and the code environment. The Design view is the visual WYSIWYG editing newest features: dynamic cross-browser validation, improved CSS lets support, built-in graphics MX environment where you will do most of your work. The Code view you use Dreamweaver editing, and more. Throughout, Garo shows you not just how to do something but why you're 2004 like other full-featured text editors that specialize in HTML, such as BBEdit or HomeSite. doing it and the results of your actions. TheSplit view lets you work with both the code and the visual elements of your page within the same document window. A lot of what is covered in this chapter will appeal to people who already know how to handauthor their pages, but don't be afraid to read on and dig into the exercises in this chapter, even if you are not familiar with HTML or XHTML. 1 Viewing the Markup The Dreamweaver MX 2004 interface has three extremely useful buttons: the Code View button, the Split View button, and the Design View button. The ability to toggle quickly between editing your code and working in the visual editing environment makes working with HTML or XHTML • Table of Contents intuitive for anyone. For those of you who are familiar with HTML or XHTML, you won't feel so far • Index using Dreamweaver MX 2004. Those of you who are less familiar with markup from home when • will find that Examples you can watch Dreamweaver MX 2004 create that markup as you use the visual Macromedia® Dreamweaver® MX 2004: Hands-On editing environment. Observing this processTraining is actually a great way to teach you good authoring techniques. By Garo Green, Lynda Weinman This first exercise exposes you to the Design view, the Code view, and the Split view to show you Publisher: Peachpit Press how to edit your XHTML effectively. Even if you don't know a whole lot about XHTML, you should Date: December 22, 2003 stillPub work through this exercise. It's not that hard, and it will show you that learning XHTML is ISBN: 0-321-20297-X truly within your reach. Pages: 720 1. Copychap_12 from the H·O·T CD-ROM to your hard drive. Define your site for Chapter 12, using the chap_12 folder as the local root folder. If you need a refresher on this process, visit Chapter 3, "Site Control." With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Open the inspector.html file from the chap_12 folder. This is just a blank file that has been saved for you. By default, your page will open in what's known as the Design view. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 3. Click the Show Code View button to view the XHTML of your document window. Even though the page looks empty in the Design view, there is some important XHTML and thatcode With its powerful combination of visual layout tools, application development features, already exists in the Code view. This window doesn't have much in it, but neither does your editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web page yet! developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. To return to the Design view, click the Show Design View button. As you can see, switching between these different views is really easy. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 5. Click the Insert bar. Whentraining. the Table dialog box appears, sure topic from the oneTable of the object masterinteachers at Linda.com Using a combination ofmake projectsettings match those shown here, and then click OK. basedthe lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Click the Code View button. Check out all the XHTML that was generated to create the 6. table. Would you like to have typed all this? Your answer most likely is, "Heck, no!" • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 7. Click the Split View button so that you can see the markup and the table on your page at managing Web sites, and linking among pages. You'll learn about frames and forms, cascading the same time. This splits your document window so you can see both the code and the style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best visual elements. Pretty neat, huh? layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 8. Click the cell and drag toat the right. This lets youUsing selecta the entire firstofrow. Notice topic from in one of first the master teachers Linda.com training. combination projectthat the associated XHTML is also selected. This level of visual feedback is really great based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks for you identifying how the markup the visual results are at the hip. Nice! and through all the Dreamweaver MX and 04 basics: navigating the joined new interface, creating managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project9. Inlessons, the Properties inspector, click the Bg color swatch and choose color of red. based guided exercises, and QuickTime tutorials, veteran author any Garo Green walksThis you changes the background of the selected row. Notice how the background color was through all the Dreamweaver MX 04 basics: navigating the new interface, creating and applied to the <tr> attribute rather than each <td> tag? Applying the background attribute to one managing Web sites, and linking among pages. You'll learn about frames and forms, cascading rather three tags an example of learning efficient coding. style tag sheets, andthan Fireworks and is Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're the Codeof window. See how the XHTML is updated to reflect the changes doingLook it andatthe results your actions. you just made? This is a great way to learn XHTML. You can literally watch the markup being generated as you add, modify, and remove content from your page. Go ahead and make some more changes to your page, but leave the Code window open so you can watch all the XHTML being created. To think that people used to type all of this by hand! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 10. When you are finished, save your changes and leave the file open for the next exercise. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Options in Code View Several options are available in the Code view. The following table outlines each of these options. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Code View Options Option Description Word Wrap Wraps code within the window so you don't have to scroll to the left and right, making large amounts of code easier to see. With powerful combination of Adds visualline layout tools,along application Lineits Numbers numbers the leftdevelopment side of the features, and code editing support, Dreamweaver MX 2004 is sure to become the constant of many Web window. This is especially helpful when companion you developers. Here to get you hands-on with it fast is the definitive project-based training on the need to identify a specific line of code, such topic from one of the master teachers at Linda.com training. Using a combination of projectas when you're troubleshooting an XHTML based lessons, guided exercises,error. and QuickTime tutorials, author Garo Green walks you The numbers won't veteran appear in the final through all the Dreamweaver MXXHTML 04 basics: navigating the new interface, output; they're just there for your creating and managing Web sites, and linkingreference. among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout Highlight and typography Invalid HTML practices.Invalid You'll also HTML find code extensive will be highlighted coverage of in all of Dreamweaver's newest features: dynamic cross-browser yellow. This validation, is reallyimproved helpful when CSS you support, are built-in graphics editing, and more. Throughout, Garo looking shows for errors you not in just yourhow code. to When do something bad but why you're doing it and the results of your actions. code is selected, look in the Properties inspector for ways to correct the problem. Syntax Coloring Color-codes parts of your XHTML based on your Code Color preferences. This helps you quickly spot the different elements of code. Auto Indent Automatically indents code, which helps with readability. Design View on Top Available only in Code and Design view, this option inverts the positioning in the document window. The Code Inspector • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Although the three document views are really useful, there is one more way to view through all the Dreamweaver MX 04 basics: navigating the new interface, creating and the markup in your pages. The Code Inspector is identical to the Code view, with managing Web sites, and linking among pages. You'll learn about frames and forms, cascading the exception that the Code Inspector is a floating window above the document style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best window. You can access the Code Inspector by choosing Window > Code layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Inspector or by pressing F10. This floating window can be resized and moved newest features: dynamic cross-browser validation, improved CSS support, built-in graphics around the screen without affecting the main document window. This can be nice if editing, and more. Throughout, Garo shows you not just how to do something but why you're you have a large monitor (or multiple monitors) and want to see the markup next to doing it and the results of your actions. the visual editing environment. 2 Editing in Code View Now that you have an idea of how the Code window works, you will learn how to use it to modify your page. In fact, if you wanted to hand-code a page, you could create your entire page right within the Code window. • Table of Contents • Indexyou will use the Code window to add content to your page and then make In this exercise, modificationsExamples • to it. The purpose of this exercise is to make you more comfortable with the Code window. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Click anywhere below the table and type Learning Dreamweaver MX 2004 is so easy, anyone can do it! Look inside the Code window and watch as your text is created. 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Inside the Code window, click and drag to select the word easy. Once you have it selected, typesimple. When you are done typing, click anywhere in the Design window to see the With its powerful combination of visual layout tools, application development features, and code changes updated. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 3. In the Design window, click and drag to highlight the word simple. With the word newest features: dynamic cross-browser validation, improved CSS support, built-in graphics highlighted, click the B button in the Properties inspector to make the word bold. Notice editing, Throughout, Garo shows you not to do something whyshows you'reyou thatand themore. tags were added around the just wordhow in the Code window,but which doing it and the results of your actions. the tag required to achieve bolded text. 4. In the Code window, change the tags to tags. The tag will format the text so it's in italics instead of bold, whereas the tag was used to bold the text. You don't have to know HTML tags, such as and ,but if you do know them, you can type them right into the code. We think it's easier to use the Properties inspector for this type of formatting. This exercise is here simply to show you that you can edit the code directly if you want to, and it achieves the same result as if you had used the Properties inspector. Tip Code Preferences • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Dreamweaver MX 2004 gives you several ways to control the view and behavior of layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's the Code view. Under Edit > Preferences, you can use the Code Coloring, Code newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Format, Code Hints, and Code Rewriting options to set everything from how the editing, and more. Throughout, Garo shows you not just how to do something but why you're XHTML code appears to how it is formatted. So if you find yourself working in the doing it and the results of your actions. Code view a lot, be sure to look over these different options. You can begin to see how you can use the Design window and the Code window in tandem to create and modify your documents. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. When you are finished, save your changes and close this file. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and XHTML or HTML? managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and that Fireworks Flash integration, gobble up Garo's suggestions about best XHTML is HTML followsand XML syntax rules. It'sand considered a more contemporary layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's means of marking up documents for the Web, and is supported by all browsers, even newest features: dynamic cross-browser validation, improved CSS support, built-in graphics older ones, because it uses the same tags as HTML, with only slight differences. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Do you have to use XHTML? No, you can use HTML if you prefer, or if your developers. Here to get you hands-on with it fast is the definitive project-based training on the organization requires you to do so. It won't cause any problems with browsers. topic from one of the master teachers at Linda.com training. Using a combination of projectFortunately, Dreamweaver MX 2004 allows you to choose either. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all an theHTML Dreamweaver 04 basics: the new interface, creating To create documentMX rather than annavigating XHTML document, simply choose Fileand > managing Web sites, and linking among pages. You'll learn about frames and forms, New and highlight HTML under the Basic page list in the New Document dialog cascading style and Fireworks anddocument Flash integration, gobble up Garo's about best box.sheets, Then, be sure the Make XHTML and compliant check box suggestions is unchecked. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's It's that simple! newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, more.existing Throughout, you not just how pages to do something but why you're You canand convert HTML Garo pagesshows into XHTML-compliant by choosing File doing it and the results of your actions. > Convert > XHTML. 3 Using the Quick Tag Editor TheQuick Tag Editor gives you instant access to the XHTML on your page without forcing you to access the Code window or an external HTML editor. This is great if you want to make a quick change to a tag or attribute. This exercise will show you how to use the Quick Tag Editor to • Table of file. Contents make changes to a • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 1. Open quicktag.html from the chap_12 folder. editing, andthe more. Throughout,file Garo shows you not just how to do something but why you're doing it and the results of your actions. This file needs a few changes. First, the large cell on the right has a white background and is not allowing the orange background to show through. Second, the South Coast image is aligned with the bottom of the table cell and should be aligned with the top of the table cell. These problems can be easily fixed with the Quick Tag Editor . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click inside the large white cell on the left side of the table, so that your cursor is blinking With its powerful combination visual development and code inside the cell. Next, clickof the <td>layout (tabletools, data)application tag in the Tag Selector features, at the bottom of editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web the document window. This selects the entire large white cell. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. PressCtrl+T (Windows) or Cmd+T (Mac) to access the Quick Tag Editor. (You could also chooseModify > Quick Tag Editor.) The Quick Tag Editor appears at the top of the document window. It currently displays the active attribute settings for the selected <td> tag. Notice that the bgcolor attribute is set to #FFFFFF, which is the hexadecimal value for white. Note Elements, Tags, Attributes, and Values, Oh My! • • Just as spoken languages are made up of nouns, verbs, adjectives, and other grammatical components, HTML and XHTML also have such structural parts. A few important components that you should know about are elements, tags, attributes, andTable values. of Contents Index Anelement is a tag or set of tags that help define content and structure within a Examples document. A tag is the actual tag within an element. Think of the paragraph Macromedia® Dreamweaver® MX 2004: Hands-On Training element. The element helps structure a paragraph, and it is made up of two tags, ByGaro Green Weinman an,Lynda opening and a closing . There are some elements made up of only one tag, such as the line break element, . • Publisher: Peachpit Press Elements are modified using attributes. Attributes are made of an attribute name and an attribute value. So, if you want to align a paragraph to the left, you can ISBN: 0-321-20297-X usecontent. If you look in the opening tag, you'll see that Pages: 720 align is the attribute's name, and left is its value. Pub Date: December 22, 2003 Dreamweaver MX 2004 comes with the complete O'Reilly HTML Reference Guide. This guide can help you learn more about specific HTML elements, tags, attributes, and their values. You can access this guide by choosing Window > Reference and then choosing O'Reilly Reference the Book drop-downfeatures, menu. It's a code With its powerful combination of HTML visual layout tools,from application development and great resource for learning more editing support, Dreamweaver MX 2004 is about sure toHTML! become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbasedSelect lessons, the guided tag exactly exercises, as shown and QuickTime here . tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 4. Click and dragThroughout, inside the Quick Tag Editor to select theto bgcolor attribute. sure to editing, and more. Garo shows you not just how do something butBe why you're exactly as of you seeactions. here—don't select the last close bracket. Press the doingselect it anditthe results your Delete/Backspace key to remove this attribute. Press Enter/Return to accept the changes you made. With the bgcolor attribute removed, the orange background is allowed to show through the table cell. This is what your page should look like with thebgcolorattribute removed . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project5. Click the South image (on the right),tutorials, which is veteran currently aligned with the bottom of based lessons, guidedCoast exercises, and QuickTime author Garo Green walks you the cell. With the image selected, click the <td> tag in the Tag Selector, at the bottom of through all the Dreamweaver MX 04 basics: navigating the new interface, creating and the document window. This among selects the cell You'll so youlearn can about changeframes the vertical alignment managing Web sites, and linking pages. and forms, cascading attribute tag by using the Quick Tag Editor. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 6. Press Ctrl+Tdynamic (Windows) or Cmd+T validation, (Mac) to access the Quick Tag Editor. (You could also newest features: cross-browser improved CSS support, built-in graphics choose Modify > Quick Tag Editor.) editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. The image should really be aligned with the top of the cell, not the bottom. Click and drag to select the word bottom in the Quick Tag Editor. Be careful to select just the word and not the quotation marks that surround it. 8. Delete the word bottom, then double-click the word top in the small pop-up menu that appears. This changes the valign (vertical alignment) attribute to top and moves the image accordingly. Press Enter/Return to accept your changes. The Quick Tag Editor is a great tool if you want quick access to the XHTML. As you just saw, you can make changes to the XHTML without ever leaving the visual environment, which is very cool! 9. Save your changes and close this file. 4 Using the Tag Editor and Tag Chooser Another way to add markup to a document is to use the Tag Editor and Tag Chooser. This purpose of this exercise is to expose you to alternate ways to add and modify the markup code on your page. Which method you choose depends upon what your workflow and personal • TableIn of this Contents preferences are. exercise, you will learn how to use the Tag Editor and the Tag Chooser in • Index Dreamweaver MX 2004. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Open the tag-editor.html file in the chap_12 folder. This is just an empty XHTML page that has already been saved for you. ByGaro Green, Lynda Weinman Peachpit 2.Publisher: Choose InsertPress > Tag from the main menu. This will open the Tag Chooser window. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. In the top-left pane, highlight HTML tags. The top-right pane will load all of the available HTML tags. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 4. Scroll downDreamweaver until you find MX h1.2004 Onceisyou've found it, select it and click theInsert editing support, sure to become the constant companion of button. many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. TheTag Editor for the h1 element opens. In the Header field, type in Welcome to l.a. Eyeworks. Click theTag info triangle to open a dialog box that will tell you more about the tag you've chosen. It's a great way to learn as you go! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project6. Click OK, then click Close onand theQuickTime Tag Chooser to exitveteran out of the dialog box. The walks Tag you based lessons, guided exercises, tutorials, author Garo Green Editor has inserted the header tags and the content you've typed into the document. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing and the results of your actions. TheitCode Validator Validation is a process with which you can check your work against the language you're writing it in. For example, if you're writing HTML, you can check it for problems. You can do the same if your document is written in XHTML. This is very helpful for two reasons. First, you'll find any errors you've made that could cause problems with your page, and second, it makes sure your documents conform to Web standards, which in turn means the markup you're using will work in the largest number of browsers possible. Sweet! You can access the Code Validator by choosing File > Check Page > Validate Markup. A listing of errors will appear in the Results panel, which identifies the problem and the exact line of markup where the error occurs. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web The Validator Preferences you choose your markup is validated. For example, developers. Here to get youlet hands-on withhow it fast is the definitive project-based training on the you might choose to use very strict forms of HTML or XHTML, and you can set thisofup topic from one of the master teachers at Linda.com training. Using a combination projectin preferences. This flexibility makes the validation process more efficient by letting based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you you exclude languages or language versionsnavigating that you're not using. Dreamweaver through all the Dreamweaver MX 04 basics: the new interface, creating MX and 2004's Code Validator is very powerful, allowing you to validate even server-side managing Web sites, and linking among pages. You'll learn about frames and forms, cascading code, such as ASP and ColdFusion. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5 Adding XHTML Using a Code Snippet A very useful tool in Dreamweaver MX 2004 is code snippets. These are pieces of HTML/XHTML code that you can add to your documents. Dreamweaver MX 2004 comes complete with its own set of predefined snippets and you can even create your own. This exercise will show you how to • Table of Contents add one of the predefined code snippets to your page. • Index • Examples 1. Open the file snippet.html. again, I have Macromedia® Dreamweaver® MX 2004: Once Hands-On Training saved you a tremendous amount of time by saving a blank page for you. ;-) ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. ChooseSplit view by clicking the Split button in the Document toolbar. Click once in the Design window, this will determine where your snippet will be placed. 3. ChooseWindow > Snippets. If you are more of a keyboard person, you can press F9 instead of using the menu. 4. In the Snippets panel, scroll down until you find the Navigation folder. The predefined code snippets are neatly arranged into categories to make it easier for you to locate and use them. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Expand the Navigation > Breadcrumb folder. Inside the Breadcrumb folder, you will see two code snippet entries. Notice that the code snippets have a different icon than the folders. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project6. Double-click the Colon as Separator snippet. The snippet will be added your walks page you based lessons, guided exercises, and QuickTime tutorials, veteran author Garoto Green wherever you have your cursor placed. You'll see in the Code window the snippet through all the Dreamweaver MX 04 basics: navigating the new interface, creating andmarkup and aWeb preview the linking breadcrumb thatlearn the snippet createdand in the Design managing sites,ofand amongnavigation pages. You'll about frames forms, cascading window. Isn't that a cool way to add great features to your pages? Even though you have style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best to change the links manually, it can still save you a lot of time. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 7. I suggest you Throughout, take a few minutes and add of the snippets to why youryou're page. editing, and more. Garo shows yousome not just howother to docode something but You can't break anything, and the chance of you finding a code snippet that you can use is doing it and the results of your actions. very high. And hey, if you don't find anything you like, at least you will look busy for a few minutes. ;-) 8. Save your changes and close this page, you won't be working with it anymore. 6 Cleaning Up XHTML There might be times when you have to work with XHTML that was written by another person or in a program other than Dreamweaver MX 2004. The XHTML may not be the best markup you have ever seen and might need to be cleaned up a little. Dreamweaver MX 2004 has a useful • TableClean of Contents command called Up XHTML that automatically removes empty tags, redundant nested • Index tags, non–Dreamweaver MX 2004 XHTML comments, Dreamweaver MX 2004 XHTML comments, • Examples nested font tags, and any tag you specify. This exercise shows you how to use the feature. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open the cleanup.html file from the chap_12 folder. The text on this page has been formatted extensively using the tag. In Chapter 9, "Cascading Style Sheets," I explained that mixing the tag with CSS can cause problems. So, to prepare this page for CSS, you will learn how to quickly remove the and all HTML formatting tags from this page by using the Clean Up HTML command. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project2. Click the Code View button to show the Code window. Notice the tag that has based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you been throughout this As younavigating can imagine, would be rather painful to remove through allused the Dreamweaver MXpage. 04 basics: the itnew interface, creating and all of those tags one at a time. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 3. Click Show Design View button return to the visual editing layout and the typography practices. You'll alsotofind extensive coverage of allenvironment. of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. ChooseCommands > Clean Up HTML to open the Clean Up HTML / XHTML dialog box. This is where you can specify the parts of the XHTML you want to clean up. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press 5. Click the Specific tag(s) check box to put a check there. In the text field, enter font,b,i, Pub Date: December 22, 2003 em. These are the XHTML formatting tags that were used on this page. Click OK. ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 6. Dreamweaver MX 2004 analyzes the XHTML in your document and cleans it upand based on through all the Dreamweaver MX 04 basics: navigating the new interface, creating the selections you made. It also produces dialog boxabout with aframes brief summary of the actions managing Web sites, and linking among pages.aYou'll learn and forms, cascading OK. and Flash integration, and gobble up Garo's suggestions about best style performed. sheets, and Click Fireworks layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project7. Open the Code again byQuickTime clicking the Show Code View button. down and based lessons, guidedwindow exercises, and tutorials, veteran author GaroScroll Green walks you look for the tag, or any of the other XHTML formatting tags. Notice that they have through all the Dreamweaver MX 04 basics: navigating the new interface, creating and all been removed. Aslinking you can imagine, theYou'll Cleanlearn Up XHTML command be a very managing Web sites, and among pages. about frames and can forms, cascading useful tool, especially when you get a file that was not written properly. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 8. Save and close this file. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Options for Cleaning Up XHTML The following chart lists the different options available in the Clean Up XHTML dialog box and outlines what each does: • Table of Contents • Index Options in the Clean Up XHTML Dialog Box Examples • Option Purpose Macromedia® Dreamweaver® MX 2004: Hands-On Training By Garo GreenEmpty , Lynda Weinman Remove: container tags Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: Redundant 0-321-20297-X Remove: Pages: 720 nested tags Removes any tags that have no content between them. For example, would be removed because there is nothing between the two tags. Removes tags that are redundant and not needed. For example, This is a redundant tag has two redundant tags that would be removed because they are not needed. Remove: NonRemoves any HTML comment tags that are With its powerful combination of visual layout tools, application development features, and code Dreamweaver HTML not specific to Dreamweaver MX 2004, but editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web comments does not remove comments that are native developers. Here to get you hands-on with it fast is definitive to Dreamweaver MXthe 2004. ,Using for example, based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you would not be removed, because it is native through all the Dreamweaver MX 04 basics: navigating the new interface, creating and to Dreamweaver MX 2004 to designate the managing Web sites, and linking among pages. You'll learn about frames and forms, cascading end of an editable area of a template. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and Dreamweaver typography practices.Removes You'll also extensive coverage of all of Dreamweaver's Remove: allfind HTML comments that are native newest validation, improved CSS support, specialfeatures: markupdynamic cross-browser to Dreamweaver MX. However, it does not built-in graphics editing, and more. Throughout, Garo shows you not justcomments. how to do something but why you're remove standard HTML doing it and the results of your actions. Remove: Specific tag(s) Removes specific tags that you specify in the text field. For example, you could remove all of the <blink> tags in a document, or any other tag that you specify. Options: Combine nested tags when possible Combines nested tags when they control the same block of text. Options: Show log on completion Summarizes how the HTML was modified, in a small dialog box, after the Clean Up HTML command has been applied. 7 Cleaning Up Word HTML Dreamweaver MX 2004 lets you import HTML files that were saved in Microsoft Word. This is a nice feature, because more and more business professionals are using Word to author Web pages. However, Microsoft Word has a reputation for generating a lot of unnecessary HTML and • Table of Contents XML. Fortunately, the Clean Up Word HTML command will help you remove this extra code to • Index ensure that your pages are written in the most appropriate and concise manner. This exercise • Examples walks you through the process of using the Clean Up Word HTML command. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open the winXP.html file from the chap_12 folder. This file was created in Microsoft Word 2003 (XP) on a Windows machine. 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project2. Click the Code View buttonand to display the Code window. Scroll down to the bottom of you the based lessons, guided exercises, QuickTime tutorials, veteran author Garo Green walks window. This page has more than 400 lines of HTML and XML. If you are using a Mac, you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and mightWeb havesites, fewerand lines of code. Regardless, that'slearn an awful lotframes for thisand very simple page. managing linking among pages. You'll about forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 3. Click Show Design View button return to the Design view. layout and the typography practices. You'll alsotofind extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Warning Make a Backup Before you use the Clean Up Word HTML command, make sure you have a backup copy of the file. When you apply this command, it will make changes to the HTML that will cause it to look different if opened in Microsoft Word. You never know when you might need to refer back to the original Word file. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. ChooseCommands > Clean Up Word HTML. This opens the Clean Up Word HTML dialog box, which may take a few seconds to appear while Dreamweaver MX 2004 tries to detect which version of Word the file was created in. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Click the Detailed tab at the top of the dialog box. This displays the more advanced options you can control with this command. Unless you are really comfortable with XML and CSS, I suggest you leave these options at their default settings. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 6. Click the Basic tab. Uncheck the Set background color check box. The background color for this page was set properly in Microsoft Word, so there is no need to change it here. Click OK. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. A dialog box appears summarizing the modifications that were made to the page. When you are finished reviewing this information, click OK. 8. Click the Show Code View button to open the Code window. You should see significantly less HTML now. The HTML was reduced from more than 238 lines down to 36. Now, that's something you'll want to show all your friends! Note: If you are using the Macintosh version of Dreamweaver MX 2004, your numbers may vary slightly. 9. Save and close this file. That's all for now folks! If you were intimidated by editing XHTM L before you read this chapter, we hope you are more at ease with it now. Move on to the next chapter if you have the stamina—there's still more to learn! Otherwise, pick this up another day. Chapter 13. Forms Working with Form Objects • • • Table of Contents Laying Out a Form with Tables Index Examples Creating a Jump Menu Macromedia® Dreamweaver® MX 2004: Hands-On Training Forms are one of Weinman the most important elements of a Web site, because they enable you to ask By Garo Green , Lynda questions of your end user and receive answers. Forms can be identical to those you're accustomed to in the nonvirtual world (think IRS, car insurance, or loan paperwork), but they Publisher: Peachpit Press can also be used for more exciting things, such as voting, guest books, interactive poetry, or ePub Date: December 22, 2003 commerce. In general, forms-based pages are much more interactive than other types of HTML 0-321-20297-X pages,ISBN: because they can collect and report information to you and give feedback to your users. Pages: 720 There are two aspects to creating forms: creating the Form objects (text fields, check boxes, Submit buttons, and so on) and making the forms function properly. This chapter focuses on the creation of Form objects, not on the programming required to make forms transmit data to and from your server. Unfortunately, making the forms operational involves programming that goes beyond scope combination of Dreamweaver MX 2004 and thisapplication book. At first, forms might not sound With its the powerful of visual layout tools, development features, and like code much fun, but they are at the heart of what makes the Web different from paper and publishing editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web mediums of Here the past. developers. to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Forms Panel The objects you use to create a form, in Dreamweaver MX 2004, are referred to as Form objects. These include text fields, check boxes, images, buttons, and so on. You'll find all the Form objects on the Forms panel. Instead of working with the Common panel, as you have in most of • Table ofso Contents the other chapters far, this chapter requires that you set your Insert panel to Forms. This will • Index display the Form objects, as shown here. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman The Forms group of the Insert bar is the easiest way to access many of the objects you will add Publisher: Peachpit Press to your forms. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Form Objects The following table outlines the different objects available on the Forms panel. As you become more familiar with forms, you will not need this table. Meanwhile, it should help you get a better idea of what each of the objects does: • Table of Contents • Index • Examples Form Objects in Dreamweaver MX 2004 Macromedia® Dreamweaver® MX 2004: Hands-On Training Icon Name Function Form This is the very first step in creating a form. It inserts the <form> tag into your document. If you do not place all of your objects inside the <form> tag, your form will not work! ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Text Field Inserts a Text Field object on your form. Hidden Field Stores information that does not need to be displayed but is necessary for processing the form layout on the tools, server.application development features, and code With its powerful combination of visual editing support, Dreamweaver MXInserts 2004 isasure to become thefield constant Textarea multiple-line text at thecompanion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the insertion point. topic from one of the master teachers at Linda.com training. Using a combination of projectCheckbox Inserts a Checkbox object on your form.Garo Green walks you based lessons, guided exercises, and QuickTime tutorials, veteran author These check boxes arethe used tointerface, select an creating and through all the Dreamweaver MX 04 basics: navigating new option pages. on a form. managing Web sites, and linking among You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Radio Button Inserts a Radio Button object on your form. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Radio buttons are used to select one item newest features: dynamic cross-browser validation, improved CSS support, built-in graphics out of a list of available options. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results Radio Group of your actions. Inserts a group of Radio Button objects on your form. List/Menu Inserts a List object or Menu object on your form. These two objects (List or Menu) allow you to make single or multiple selections in a small area of space. Jump Menu Inserts a jump menu that allows the user to select a URL from the menu and then jump to that page. Image Field Inserts an image on a form, which the user can click. This can be used to make graphicbased buttons. File Field Inserts a text box and button that lets the end user browse to a file on his or her hard drive, for uploading. Button Inserts a Submit Button object (Dreamweaver MX 2004 default) on your form. You can also make this a Reset button, or set it to None. Label Allows you to set an association of the text label for a field with the field itself. Fieldset Inserts a Container tag for a logical group of form elements. • Table of Contents • • Index Note Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Making Forms Function with CGI ByGaro Green, Lynda Weinman Dreamweaver MX 2004 gives you complete control over the layout of your form and objects. This is great, but the truth is that there is a bit more to Pub creating Date: December forms 22, than 2003 just a pretty interface. Publisher: Peachpitof Press the creation Form ISBN: 0-321-20297-X Forms are interactive elements that are driven by "scripts." This means that when the Pages: 720 Submit or similar button is clicked, the information from the form is sent to your server or database, at which point the form is processed. This processing is more than HTML alone can handle. So, in order to process forms, you need to use some type of additional scripting beyond HTML. Although it is possible to process form data through JavaScript or even Java, most Web developers agree that the most foolproof way to With program its powerful combination visual layout application development features, and code forms is throughof CGI, PHP, ASP,tools, or CFM. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Herefor to Common get you hands-on with it fastInisessence, the definitive on the CGI stands GatewayInterface. CGI isproject-based a protocol to training send topicinformation from one ofto the master teachers at Linda.com training. Using a combination of projectand from a Web server. CGI scripts can be written in a variety of based lessons, guided exercises, and QuickTime veteran author Garo Green walks you programming languages, ranging from Perl tutorials, to C to AppleScript. If that doesn't sound through all the Dreamweaver MX 04 basics: navigating the new interface, creating and complicated enough for you, consider that different types of CGI scripts work with managing Web sites, and linking among You'll frames different Web servers, ranging from pages. UNIX to Mac learn OS toabout Windows NT. and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout If and you typography have a Web practices. site, chances You'll arealso very find high extensive that your coverage Internetofservice all of Dreamweaver's provider or newest Web features: administrator dynamic has cross-browser existing CGI scripts validation, you improved can use. Because CSS support, there built-in are so many graphics editing, variables and more. to CGI, Throughout, and it is outside Garo shows the scope you not of this justbook, how to it will do something be up to you buttowhy you're doingcoordinate it and the obtaining results of the your scripts actions. and implementing the processing of your forms. Here are some online resources for CGI scripts: HotScripts.com http://www.hotscripts.com The CGI Resource Index http://www.cgi-resources.com/ Script Search http://www.scriptsearch.com/ 1 Working with Form Objects In this exercise, you will get hands-on experience with each of the various form elements. You won't be adding any scripts because doing that would require another book, but you will get everything set up so that when you do want to add a CGI script, your pages will be ready! • Table of Contents • Index chap_13 from the H·O·T CD-ROM to your hard drive, and press F8 to define the • 1. Copy the Examples site. If Dreamweaver® you need a refresher this process, Macromedia® MX 2004:on Hands-On Trainingrevisit Exercise 1 in Chapter 3, "Site Control." ByGaro Green, Lynda Weinman 2. Open the objects.html file. It's just a blank page, but at least I put in a page title for you! Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing and linking pages. bar You'll about frames and forms, cascading 3. MakeWeb sure sites, the Forms groupamong of the Insert is learn visible. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. 4. Click the Form object in the Forms panel. This inserts the <form> tag into your document. You should see red dashed lines on your page. If you do not see them, select View > Visual Aids > Invisible Elements. • • • The visibility of the Form object doesn't matter in terms of its functionality. But, it does let you know that any form element that appears outside of the form border is NOT a part of their current form. This is very helpful when working in a more complex layout. I prefer turning Table on itsofvisibility so I can ensure that it was added properly. You can work with it off Contents or on; just know that it's there for the viewing if you feel more secure seeing it, as I do! Index Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, shows youlines, not just do something butspacebar why you're 5. Position your cursor inside Garo the red dashed andhow typetoName:. Press the once doingto itcreate and the results of your actions. a single space. 6. Click the Text Field object in the Forms panel. This inserts a blank text field onto your 6. page. With the text field highlighted, notice that the Properties inspector options change. Also notice that the TextField name is set at the default name, which is textfield. This needs to be changed to something that is more descriptive of the content that will be entered by the user. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 7. In the TextField field in the Properties inspector, replace the existing text with the word name. This gives a unique name to the text field. Enter Char width: 30. This sets the length of the text field. It does not limit the amount of text that your user can enter, just Publisher: Peachpit Press how much will be visible in the browser. To limit the amount of text entered (which you Pub Date: December 22, here), 2003 don't want to do you would enter a value for Max Chars. ByGaro Green, Lynda Weinman ISBN: 0-321-20297-X 8. Click the right of the text field in your document and press Enter/Return. Type Pages:to 720 Address: and press thespacebar to create one space. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. Click the Textarea object. This inserts another text field onto your page. In the Properties inspector, enter the word address in the TextField field. Choose Type: Multi line, set Num Lines: 2, and set Char width: 40. This Form object is great for larger areas of text when you don't know how much will be inserted. 10. Click to the right of the multiline text field in your document, and press Enter/Return. TypeState: and insert one space by pressing the spacebar. 10. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 11. Click the List/Menu object. By default, this inserts a Menu object onto your form. In the type state in the List/Menu field. Next, click the List Values button. ByGaroProperties Green, Lynda Weinman inspector, Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 12. For all thethe first Item Label,MX type and then press For the first Value, through Dreamweaver 04California, basics: navigating the newTab. interface, creating and type CA, and then press Tab. Repeat this same process using Hawaii and HI. This object managing Web sites, and linking among pages. You'll learn about frames and forms,Form cascading will give you a pop-up menu displaying the information in the Item Label column. The style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best in the practices. Value column what a CGI or JavaScript program process with layoutinformation and typography You'llisalso find extensive coverage of all ofwould Dreamweaver's the form. Click OK. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. In the Properties inspector, select Initially selected: California. This determines what menu item is visible before the user clicks on the pop-up menu. 14. Click to the right of the State pop-up menu, and press Enter/Return. Tip Initially Selected Values in Menus Sometimes, when you are creating menus, you would like a default value to appear in the menu. For example, if you were building a menu with a list of all U.S. states, you might want to have California appear in the menu automatically. Selecting the value from the Initially Selected option in the Properties inspector can do this. The value you select here appears as the default value for the menu. 15. ClicktheCheckbox object. This inserts a check box onto your page. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 16. In the Properties inspector, name the check box catalog. For the Checked value, type send a catalog. Publisher: Peachpit Press This information will appear next to the check box name when a CGI script Pub Date: processes December 22,the 2003form. This information is hidden from your end user, but it is useful to aISBN: programmer who 0-321-20297-X is setting up the CGI because it tells him or her what the check box relates to. Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 17. Click to the right of the checkbox and type Please check this box if you would like to receive our monthly catalog. This will help end users understand what information they are requesting by checking this box. Press Enter/Return. 18. Click the Button object. This inserts a Submit button on your page, which is Dreamweaver MX 2004's default button type. Because you need to have a button to submit the form, leave the options at their default values. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 19. Click to the right of the Submit button. Click the Button object again. This inserts another Submit button on your page. In the Properties inspector, change the Action to Reset Publisher: Press a button that clears the form, just in case your end user makes a form. Peachpit This creates Pub Date: December 22, 2003 mistake and wants to start over. Change the Label to Clear Form and the Button name 0-321-20297-X toISBN: Clear. Pages: 720 20. Save your file. Press F12 to preview your form in a browser. Remember, the Submit button will not work because you did not attach any CGI scripts. 21. Return to Dreamweaver MX 2004. Save and close the document. With its powerful combination of visual layout tools, application development features, and code As you have just seen, the purpose of this exercise was to get you comfortable inserting editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web different Form objects and modifying some of their properties. Remember, to make a form developers. Here to get you hands-on with it fast is the definitive project-based training on the perform its functions, you would need to attach a CGI or other scripting program to it . topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2 Laying Out a Form with Tables This exercise is designed to help you become more familiar with creating a layout for your forms. Forms can combine other HTML elements such as background images and tables. By the end of this exercise, you should be comfortable combining your new form-creation skills with your • Table of Contents existing Web-layout skills. • Index • Examples 1. Open the form.htmlMX file. Notice that itTraining already Macromedia® Dreamweaver® 2004: Hands-On contains a background image, a graphic, and a table. Click your cursor in the middle cell of the table. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Click the Form object in the Forms panel. Red dashes should appear in the table cell, indicating that you have inserted a <form> tag. If you don't see these red dashes, choose View > Visual Aids > Invisible Elements. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 3. Choose Insert Table.teachers (If you'reatused to clicking on the Table object in theof Insert panel, topic from one of the>master Linda.com training. Using a combination projectwouldguided need to switch back the Common panel. For convenience's useyou the basedyou lessons, exercises, andto QuickTime tutorials, veteran author Garo sake, Greenjust walks Insert menu right now.)MX Change the settings to Rows: 8,Table width: 100 Percent, through all the Dreamweaver 04 basics: navigating the new interface, creating and Border thickness: Cell padding: 2,Columns: 2, and Cellframes spacing: Clickcascading OK. managing Web sites, and 0, linking among pages. You'll learn about and 0. forms, style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics A table appears inside the redshows dashes, here. editing, and more. Throughout, Garo you as notshown just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and and typography practices. also in find coverage of all of Dreamweaver's 4. Click drag to select all ofYou'll the cells theextensive first column. Use the Properties inspector to newest features: dynamic cross-browser validation, improved CSS support, built-in graphics set all the widths to 200 pixels. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 5. Click inside the second cell in column 1 and type Name:. Click inside the second cell in editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web column 1 and type Address:. Click inside the third cell in column 1 and type City:. Click developers. Here to get you hands-on with it fast is the definitive project-based training on the inside the fourth cell in column 1 and type State:. Click inside the fifth cell in column 1 topic from one of the master teachers at Linda.com training. Using a combination of projectand type Zip:. Finally, click inside the sixth cell in column 1 and type Email:. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Click and drag to select all the cells in column 1 and then change the Horz option to Right in the Properties inspector. This will align all of the text to the right side of the table cells. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 7. Next, you'll add some entry fields thefind form. Click inside column row 2 and choose layout and typography practices. You'll to also extensive coverage of all2,of Dreamweaver's the Text Field object in the Forms panel. In the Properties inspector, name the newest features: dynamic cross-browser validation, improved CSS support, built-in graphics TextField name. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 8. Repeat this same process for the next five cells in column 2. Make sure you give each text editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web field a unique name that describes the associated column. Your page should like the one developers. Here to get you hands-on with it fast is the definitive project-based training on the shown here. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Warning layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: Strangedynamic Table Behavior cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're As you work with forms and tables in Dreamweaver MX 2004, you might notice that doing it and the results of your actions. sometimes it looks as though your Form objects are jumping out of their cells. Don't worry; they really haven't moved at all. This is just a little visual glitch in Dreamweaver MX 2004. You can get them back to their correct places by simply clicking outside the table. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 9. Click row 8 in column 2, You'll then click object in the of Forms In the layout and in typography practices. also the findButton extensive coverage all of panel. Dreamweaver's Properties inspector, change the Label to Send Form. The Action should be set to newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Submit form. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 10. Click row 8 in column 2, You'll then click object in theofForms panel again. In the layout and in typography practices. also the find Button extensive coverage all of Dreamweaver's Properties inspector, change the Action to Reset form, the Label to Clear graphics Form, and newest features: dynamic cross-browser validation, improved CSS support, built-in the Button name to Clear. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. You've just designed a simple custom-formatted form using form and table elements . 11. Save and close this file; you won't be needing it again. 3 Creating a Jump Menu Dreamweaver MX 2004's Jump Menu object combines a forms element for lists and a JavaScript behavior that causes the menu to go to its target without the use of a Go button. Adding this specialized kind of form can be very useful when you have a small amount of screen real estate • Table a oflot Contents in which to place of navigation choices. This exercise shows you how to use Dreamweaver • Index MX 2004 to create a jump menu on your page. The jump menu works really well as a navigation • Examples which is what you'll get to try in this hands-on exercise. tool within framesets, Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Here's a look at the jump menu you will learn to build in this exercise. The jump menu is a special kind of Dreamweaver MX 2004 object that combines a form element with JavaScript. It allows the page visitor to select a choice and have that choice load without having to first click a Go button. 1. Open the jumpmenu_done.html file in the chap_13 folder. Press F12 to preview and try out the jump menu in the browser. When you are finished exploring, close the file. 2. Open the jumpmenu.html file in the chap_13 folder. This is a frameset that I have created for you. You are going to add a jump menu to one of these pages. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 3. Click to the right of Select a Frame Type in the top frame. Choose Insert > Form > Jump Menu. This opens the Insert Jump Menu window and automatically inserts the <form> tag on your page. As an alternative, you could have clicked on the Jump Menu With its powerful combination of visual layout tools, application development features, and code object in the Forms panel. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. In the Text field, type eyeglasses. This option sets the actual text that appears in the menu when the user clicks on it. Notice that the text in the Menu items field updates as you do this! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. Click the Browse button next to the When selected, go to URL field. This lets you browse to the HTML file you want to jump to when this menu item is selected. Navigate to the frames_eyeglasses.html file located inside the frames inside the chap_13 folder. Select it and click OK. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Click the pop-up menu next to the Open URLs in option and select frame"bottom". This option determines what frame the Web page will load into. 6. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. Click the plus (+) button at the top of the dialog box to add another item to your jump menu. This interface is very similar to the Insert Navigation Bar dialog box you learned about in Chapter 11, "Rollovers." It's nice to see the continuity in the interface; you gotta love it! With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. Enter sunglasses for the Text field. Click the Browse button next to the When selected, go to URL option. Browse to the frames_sunglasses.html file located inside the frames folder inside the chap_13 folder. Select it and click OK. You've just finished setting up your jump menu. Click OK to close the Insert Jump Menu window. Notice how Dreamweaver MX 2004 automatically added the <form>tag. Nice. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 9. PressF12 to preview and try out the jump menu in the browser. Pretty cool navigation system! With its powerful combination of visual layout tools, application development features, and code 10. Return to Dreamweaver closetothe document. editing support, DreamweaverMX MX2004 2004and is sure become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the Another your Don't you just love theashort chapters!? Move to the topic Phew! from one of thechapter master under teachers atbelt. Linda.com training. Using combination of projectnext chapter if you feel ready. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 14. Behaviors What Is a Behavior? • • • Table of Contents Setting Status Bar Text Index Setting Examples Text Field Text Macromedia® Dreamweaver® MX 2004: Hands-On Training a New Browser ByGaroOpening Green, Lynda Weinman Window Validating Forms Publisher: Peachpit Press Pub Date: Decemberand 22, 2003 Downloading Installing Dreamweaver MX 2004 Extensions ISBN: 0-321-20297-X Dreamweaver Pages: 720 MX 2004 uses the termbehaviors to describe its pre-built scripts, written in JavaScript, that extend HTML to do things that it can't do on its own. Dreamweaver MX 2004 ships with various behaviors that allow you to do all kinds of cool things, such as open a browser in a smaller window or detect the version of your end-user's browser. The Macromedia Extension Manager program lets you easily install and remove extensions from With its powerful of visual layoutof tools, applicationyou development features, and code Dreamweaver MXcombination 2004. In previous versions Dreamweaver, had to download and install editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web the Extension Manager application yourself. In Dreamweaver MX 2004, the Extension Manager is developers. Here to get you hands-on with it fast is the definitive project-based training on the pre-installed for you and ready for use. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided and QuickTime tutorials, veteran Garo Green walks you This chapter shows youexercises, how to use some of the behaviors that shipauthor with Dreamweaver MX 2004 through all the Dreamweaver MX 04 basics: navigating the new interface, creating and right out of the box. You also learn how to download additional behaviors from Macromedia managing sites, and linkingbureau amongthat pages. You'll learn about frames and forms, cascading Exchange, Web a free online-service Macromedia provides, which houses hundreds of style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best additional Dreamweaver MX 2004 behaviors that don't ship with the program! layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Creating a Set Text of Status Bar Behavior The status bar is located at the bottom of a browser window and can display text in addition to what is on the Web page. By using the Set Text of Status Bar behavior, you can display any text that you want in the status bar of the browser window. This is often used in conjunction with • Table of Contentsdetails about the destination page. This exercise shows you how to links to provide additional • Index add the Set Text of Status Bar behavior to a page. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training This what theWeinman status text looks like in a browser status bar . ByGaroisGreen , Lynda Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open index.html from the chap_14 folder from the H·O·T CD-ROM. You are going to add theSet Text of Status Bar behavior to several of the links on this page to provide additional feedback to the user. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click the about us (homepage_about.gif) image to select it. In the Properties inspector, notice that this image already links to another page. Some behaviors, such as theSet Text of Status bar, require a link to be attached to the object. In cases where you With its powerful combination visual tools, application development don't know what page youofwant tolayout link to, simply put a # (hash mark) infeatures, the Link and fieldcode in editing support, Dreamweaver MX 2004 is sure to become the constant companion of many theProperties inspector. This creates the appearance of a link without really linking Web developers. HereThese to getare youaffectionately hands-on with it fast to is the definitivelinks. project-based anywhere. referred as nowhere Go figure!training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 3. With image still selected,You'll in thealso Behaviors panel, click the plus to access the poplayout andthe typography practices. find extensive coverage of allsign of Dreamweaver's up menu, and choose Set Text > Set Text of Status Bar. This action opens Set Text newest features: dynamic cross-browser validation, improved CSS support, built-inthe graphics of Status Bar dialog box. Notice that this image already has a rollover (swap image) editing, and more. Throughout, Garo shows you not just how to do something but why you're applied doingbehavior it and the resultstoofit.your actions. 4. Enter about l.a. Eyeworks in the Message text box. Click OK. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 5. Notice that the Set Text of Status Bar behavior now appears in the Behaviors panel with theonMouseOver event. If your event is not set to onMouseOver, click on the event and chooseonMouseOver from the drop-down menu. With its powerful combination of visual layout tools, application development features, and code editing support, MXof 2004 surebuttons, to become the constant companionfor of each manyone. Web 6. Repeat thisDreamweaver process for each the is other adding a short description developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. After you finish, press F12 to preview your page in a browser. Move your mouse over any of the four images and look at the text displayed in the browser window's status bar. 8. Return to Dreamweaver MX 2004, and save your changes and close this file. You won't need it any longer. 2 Creating a Set Text of Text Field Behavior InChapter 13, "Forms," you learned how to create forms. This exercise shows you how to create preset content that fills specific form fields as the user interacts with your form. It uses the Set Text feature of the Text Field behavior. • Table of Contents • Index Your file will look like this when you finish this exercise. Press • 1. Open prices_done.html. Examples F12 to Dreamweaver® preview this in browser. Macromedia® MXa2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Click the radio button next to any of the frame names. Notice that dollar amounts automatically appear in the Price text field in the upper-right area of the page. Set Text behavior, which ships with Dreamweaver MX 2004, created this effect. Close this file for now. You will create this effect in the following steps. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 3. Return to Dreamweaver MX 2004 and open prices.html from the chap_14 folder. This file consists of a form that I created for you. You learn how to use the Set Text of Text Field behavior to dynamically update this form as the user interacts with it. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Click the radio button next to Warp. You must apply the Set Text of Text Field behavior to this form element so that the Price for Selected Pair text field (in theEyeglasses section) is automatically updated with the correct price for the eyeglasses when a user selects this button in the browser. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 5. From Behaviors panel, click thealso plus sign and choose Set Text Text of Text layout and the typography practices. You'll find extensive coverage of all>ofSet Dreamweaver's Field from the pop-up menu. This opens the Set Text of Text Field dialog box. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Make sure that text "eyePrice" in form "form1" is selected for the Text field option. This setting determines which text field on your page will be updated. Don't click OK just yet. The pop-up menu lists each of the form objects with their newly assigned names. As you can see, it's a good idea to use descriptive names that relate to the information being requested so they can easily be found and identified in this dialog box. The Text Field option determines which text field in the form automatically displays the text . 7. Enter 200.00 in the New Text field. This replaces any text that is in the eyePrice text field 7. when the user clicks the Warp radio button. Click OK, and you're ready to set up the next button. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination of to visual layout tools, application development features, and code 8. its Click the radio button next Bean. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on withplus it fast is the project-based the 9. From the Behaviors panel, click the sign anddefinitive choose Set Text > Settraining Text ofon Text topic Field from one of the master teachers at Linda.com training. Using a combination of projectfrom the pop-up menu. This opens the Set Text of Text Field dialog box. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. Make sure that text "eyePrice" in form "form1" is selected for the Text field option. Enter 250.00 in the New Text field. This replaces any text that is in the eyePrice text field of the form when the user clicks the Bean radio button. Click OK. 11. PressF12 to preview this page in your primary browser. Click each of the radio buttons and watch the Price for Selected Pair text field (in the Eyeglasses section) change automatically. Return to Dreamweaver MX 2004. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 12. Scroll down the page and click the radio button next to Mix. The Sunglasses section has its own Price text field that needs to be updated when the user chooses a pair of sunglasses. With powerful combination of visual layout application features, and code 13. its From the Behaviors panel, click the plustools, sign and choose development Set Text > Set Text of Text editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Field from the pop-up menu. This opens the Set Text of Text Field dialog box. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 14. Make sure that text "sunPrice" in form "form1" is selected for the Text field option. This ensures that the Price text field is updated in the Sunglasses section and not in the Eyeglasses section. 15. Enter 275.00 in the New text field. This replaces any text that is in the sunPrice text field 15. of the form when the user clicks the Mix radio button. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 16. Press preview yourMX page again innavigating a browser.the Click the radio button nextand to Mix and through allF12 the to Dreamweaver 04 basics: new interface, creating watchWeb the sites, price instantly appear in the Price textlearn field about in the frames Sunglasses section. Cool! managing and linking among pages. You'll and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best 17. Return to Dreamweaver MX You'll 2004. also Savefind andextensive close thiscoverage file. You of won't need it for the layout and typography practices. all of Dreamweaver's remainder this book. newest features:ofdynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3 Opening a New Browser Window Times arise when you just can't cram everything onto a single Web page. An option that many Web developers use is to open additional, yet related, information in another window. In this exercise, you open a new browser window to display information that wouldn't comfortably fit on • Table of Contents a single page. • Index • Examples Macromedia® Dreamweaver® 2004: Hands-On Training This is the example thatMX you build in this exercise. When you click a link on the main browser page, second, smaller browser window opens without any of its own By Garo Green , Lyndathis Weinman navigation bars. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open index.html from the chap_14 folder. 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click to select the crisp digital site logo at the bottom of the page. This image serves as a trigger for the new browser window behavior. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. From the Behaviors panel, click the plus sign and choose Open Browser Window from the pop-up menu. This opens the Open Browser Windowdialog box. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 4. ClickBrowse and browse to credits.html. Click OK. This HTML file will be displayed in editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web your new window. The link can be an internal or external link. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectNext, you specify the size of your new browser window . based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Back in the Open Browser Window dialog box, enter Window Width: 400 and Window Height: 166. This specifies the pixel size of your window when it opens. ClickOK. I specified 400 x 166 pixels because those dimensions fit the contents of credits.html, the page you are going to display in the second browser window. On other projects, you could specify any size that's appropriate to the content of your second window. The Behaviors panel should now look like this . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Click the small arrow to the right of the Events column and select onClick as the event. This option determines what the user must do before the new browser window can open. TheonClick event means that the user must click the link for the new window to open. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 7. Save your page and press F12 to preview all your hard work. Click the crisp logo at the developers. Here to get you hands-on with it fast is the definitive project-based training on the bottom of the page. Voila! A new browser window opens, displaying credits.html in a topic from one of the master teachers at Linda.com training. Using a combination of projectwindow set to 400 x 166 pixels. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 8. Return to Dreamweaver MX 2004, and save and close the file. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Validating Forms w ith Behaviors Now that you know how to create forms and lay them out with tables, it's a good time to show you how to validate the information being typed into the form. What does that mean? Giving users a place to enter information doesn't guarantee that they will enter the information • Tabledoesn't of Contents correctly. It also guarantee that they will enter any information at all. What's a Web • Index designer to do? Well, by using Dreamweaver MX 2004's behaviors, you can validate, or check, • the type and Examples format of the information being provided. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 1. Open prices.html from the chap_14 folder. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Clickto select Submit at the bottom of the page. By attaching the Validate Form behavior to this button, you can verify that the required information has been entered before a CGI script processes the form. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 3. From theBehaviors click the plus sign and select Validate Form from the pop-up newest features: dynamicpanel, cross-browser validation, improved CSS support, built-in graphics menu. This opens the Validate Form dialog box. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Make sure that the text "email" in form "form1" option is highlighted. This requires the user to enter a proper email address before the form can be processed. It won't check to make sure it's a valid email address, just one that follows the something@something format. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 5. PressF12 to preview this page in a browser. In the text field at the bottom, enter editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web fakeaddress and click Submit. You get a JavaScript warning that indicates that some developers. Here to get you hands-on with it fast is the definitive project-based training on the fields are required. Click OK. This kind of warning can be useful to alert your end users that topic from one of the master teachers at Linda.com training. Using a combination of projecta field has been incorrectly filled in. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 6. Returnto Dreamweaver MX 2004, and save and close this file. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Macromedia Dreamweaver Exchange • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics http://www.macromedia.com/exchange/dreamweaver/ editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and has the set results your actions. Macromedia up aofsection of its Web site to be a portal for Dreamweaver users, called the Macromedia Dreamweaver Exchange. On this site, you can find hundreds of free extensions (and some you have to purchase!) written by third-party users and developers for Dreamweaver MX 2004 (and previous versions of Dreamweaver). These extensions can help you build new features into your Web site. Many of these are advanced features that normally would require the skills of a programmer to create. For example, some of these behaviors can give you the ability to perform complex browser detection, password-protect areas of your site, connect to backend databases, and so on. The Macromedia site is not just for developers; it's for any Dreamweaver MX 2004 user who wants to take Dreamweaver MX 2004 to the next level. If you're a developer, this is a great place to learn how to write your own behaviors that take advantage of the Dreamweaver MX 2004DOM (DocumentObjectModel). The DOM for Dreamweaver MX 2004 is a specification that enables increased levels of extensibility not afforded by standard HTML and JavaScript. 5 Downloading from Dreamweaver Exchange Macromedia Exchange for Dreamweaver MX 2004 offers a gold mine of behaviors in the form of widgets and add-ons to help you add life to your Web pages. In this exercise, you learn how to download one of these cool extensions from the Exchange and install it using the Extension • Table of Contents Manager. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open a Web browser and go to http://www.macromedia.com/exchange/dreamweaver/. This action takes you to the Macromedia Exchange for Dreamweaver MX 2004 Web site. If you have not created an account yet (it's free), you need to do so before downloading any of the extensions. If this is the case, click My Account and follow the instructions to set up an account before proceeding with the exercise. Note Behaviors, Commands, and Objects As you start downloading extensions from the Exchange and other Web sites, you need to know more about where to find your installed behaviors, commands, and/or objects. These are accessed from different places in the Dreamweaver MX 2004 interface. Behaviors are accessed from the Behaviors panel, commands are accessed from the Commands menu, and objects are accessed from the Insert panel. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through allyou the have Dreamweaver 04 basics: new interface, andof the 2. After your own MX account, click navigating the Searchthe Exchanges buttoncreating at the top managing Web sites, and linking among pages. You'll learn about frames and forms, cascading screen. This is the quickest way to find an extension; trying to scroll through each category style would sheets,take and several Fireworks and Flash integration, and gobble up Garo's suggestions about best hours! layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project3. In the text field in the upper-left corner of the page, type calendar. From the drop-down based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you menu to the right, choose Dreamweaver Exchange. This ensures that you search only through all the Dreamweaver MX 04 basics: navigating the new interface, creating and through the Dreamweaver extensions. Click the Search button to start the search. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project4. Scroll down the page until you find the Calendar Object by srichards. Click the Download based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you link to download this extension to your hard drive. Note: If you want to learn more about through all the Dreamweaver MX 04 basics: navigating the new interface, creating and an extension, click the extension name itself, and you are redirected to a page that offers managing Web sites, and linking among pages. You'll learn about frames and forms, cascading an in-depth explanation of that extension. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. When you are prompted to save the extension, choose a location on your hard drive and clickSave. Remember where you saved this file because you need to access it later. The best place to store it is in the Downloaded Extensions directory within the Dreamweaver MX 2004 application directory; this way, you'll know where it is in the future. Note:Under OS X on the Macintosh, the Extension Manager automatically launches after the extension is downloaded. You can jump to Step 10 if this occurs. 6. You're done with the Macromedia Exchange for Dreamweaver MX 2004 site for now, and you can log off before continuing with the exercise, if you wish. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. find extensive coverage of all of Dreamweaver's 7. Return to Dreamweaver MX You'll 2004. also Select Commands > Manage Extensions. This newest features: dynamic cross-browser validation, improved CSS support, built-in graphics launches the Extension Manager. Now, you use the Extension Manager to install the editing, and more. Garo shows you not just how to do something but why you're extension thatThroughout, you just downloaded. doing it and the results of your actions. 8. In the Extension Manager, select File > Install Extension. This opens a dialog box so you can browse to the extension file you just downloaded. Note: All extension files you download should have an extension of .mxp. 9. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X 9. Locate the file on your hard drive and click Install. Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. The disclaimer that appears is one that you have seen before. Click Accept, and the installation continues. 11. 10. • Table of Contents • Index • Examples 11. When the installation process is finished, the above dialog box displays. Click OK. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaroAfter Green,the Lynda Weinman installation is complete, your new extension appears in the Extension Manager window. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 12. SelectFile > Quit (Mac) or File > Exit (Windows) to exitExtension Manager. 13. Return to Dreamweaver MX 2004. Quit, and then re-launch so you can check out your new extension. 14. From the Files panel, open the calendar.html file. This is nothing more than a blank file that I created for you. 15. SelectInsert > Calendar, which opens the Insert Calendar dialog box. This menu option was created when you installed the Calendar extension. Cool, huh? This extension, complete with the great interface, was designed by Scott Richards. Creating extensions requires a working knowledge of JavaScript and the Dreamweaver MX 2004 DOM. Read the upcoming tip to discover available resources that teach more about Extension creation. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of project16. Iflessons, you want to modify some and of the options, you can. When you are finished, click walks OK. Ifyou you based guided exercises, QuickTime tutorials, veteran author Garo Green don't OK button, simply thenavigating red X in the corner (Windows) through all see the an Dreamweaver MX 04 click basics: theupper-right new interface, creating and or the red close on the upper-left managing Webbutton sites, and linking amongcorner pages.(Mac). You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Tip doing it and the results of your actions. Extending Dreamweaver MX 2004 If you're well versed in JavaScript, you can learn to write your own custom extensions, and you'll find plenty of great resources on the Macromedia Exchange for Dreamweaver MX 2004. If you want, you can download a PDF version of the Extensibility Manual from the Macromedia Web site and/or subscribe to their Extensibility newsgroup. Both are great resources for extensibility authors. The calendar looks like this within Dreamweaver MX 2004. Pretty slick, huh? Can you imagine having to create that table and insert all the correct dates yourself? Now, any time you want to add a calendar to a Web page, it's as simple as choosing a menu item. This is definitely a handy and useful extension to Dreamweaver MX 2004. Note: If you modified some of the options, your calendar might look different than the one shown here. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 17. Save and close this file. MX 2004 is sure to become the constant companion of many Web editing support, Dreamweaver developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectThis is just one example of the many cool extensions you can download from the Macromedia based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Exchange. You definitely should bookmark this site and visit it on a daily or weekly basis, because through all the Dreamweaver MX 04 basics: navigating the new interface, creating and new extensions are constantly added. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best If you have the energy, move to the next chapter. If not, that's OK. It will be waiting when you layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's are ready. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 15. Fireworks Integration External Image Editor Preferences • • • Table of Contents Inserting Fireworks MX 2004 Images Index Editing Examples Images with Dreamweaver MX 2004 Macromedia® Dreamweaver® MX 2004: Hands-On Training Fireworks Tools ByGaroBuilt-in Green, Lynda Weinman Roundtrip Editing a Fireworks MX 2004 Image Publisher: Peachpit Press Pub Date: December 22, 2003 Inserting Fireworks MX 2004 Rollovers ISBN: 0-321-20297-X Updating Pages: 720 Fireworks MX 2004 XHTML Fireworks MX 2004 Pop-Up Show Pop-Up Menu Behavior With its powerful combination visualcannot layoutbe tools, development features, and Designing and developing Webof pages doneapplication with Dreamweaver MX 2004 alone. Atcode editingpoint, support, MX 2004 is sure toas become the constant of many Web some you Dreamweaver will need a graphics editor, such Fireworks MX 2004,companion to create the various developers. Here and to get you visual hands-on with itfor fast is the definitive on the images, buttons, other elements your pages. Sure, project-based you could hiretraining a designer to do topic one of the teachers Linda.com training. Using a combination projectall of from the graphics for master your Web pages,atbut if you want to create graphics on your of own, based lessons, guided exercises, and QuickTime author Garo Greenwith walks you Macromedia has a graphics tool called Fireworks tutorials, MX 2004 veteran that integrates beautifully through all theMX Dreamweaver basics: navigating the new interface, and Dreamweaver 2004. WhenMX you04export images from Fireworks MX 2004,creating the application managing sites, and linking pages. You'll learn about frames forms, cascading places bitsWeb of comment code dataamong into a separate HTML document as well and as creating the graphic styleFirework's sheets, and andcode Flash and gobble up Garo's suggestions about best file. MXFireworks 2004 HTML is integration, easily understood by Dreamweaver MX 2004, which layout and typography practices. You'll alsowell. findPlus, extensive of Dreamweaver's makes these two tools work together very if youcoverage just needoftoall make some simple edits newest dynamic cross-browser validation, support, built-in graphics to your features: images, Dreamweaver MX 2004 has a great improved new set ofCSS Fireworks editing tools right onediting, and more. Throughout, Garo shows you not just how to do something but why you're board. doing it and the results of your actions. In this chapter, you will learn how to insert graphics into your HTML pages that were created with Fireworks MX 2004, how to edit images in Fireworks MX 2004 from within Dreamweaver MX 2004, how to use the Fireworks editing tools inside of Dreamweaver MX 2004 to edit graphics, how to insert rollovers created in Fireworks MX 2004, and much more. Dreamweaver MX 2004 and Fireworks MX 2004 have been designed to provide you with a smooth and integrated workflow for designing, generating, editing, optimizing, and placing Web graphics into your HTML and XHTML pages. Like yin and yang, Dreamweaver MX 2004 and Fireworks MX 2004 were meant to be together. The following chart outlines some of the ways that Dreamweaver MX 2004 and Fireworks MX 2004 can work together to accomplish many of your Web design tasks. Dreamweaver MX 2004 to Fireworks MX 2004 Workflow Feature What It Does Launching Fireworks MX 2004 to optimize an image Launches the Fireworks MX 2004 Optimize panel in Dreamweaver MX 2004. Fireworks MX •Inserting aTable of Contents in a •2004 image Index Dreamweaver MX 2004 • Examples document Macromedia® Dreamweaver® MX Inserting MX By Garo Green, Fireworks Lynda Weinman 2004 HTML code in a Dreamweaver MX 2004 Publisher: Peachpit Press document Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pasting Fireworks MX Pages: 720 2004 HTML code into a Dreamweaver MX 2004 document Inserts a GIF or a JPG image that is linked by a MNO file or design note to a Fireworks MX 2004 PNG image file. 2004: Hands-On Training Inserts Fireworks MX 2004 HTML code into a Dreamweaver MX 2004 document with the push of a button. The HTML code is linked by a MNO file or design note to a Fireworks MX 2004 PNG image file. A method of placing Fireworks MX 2004 HTML code into a Dreamweaver MX 2004 document. The code can be pasted with or without the reference to the file design note or MNO file. With its powerful combination of Launches visual layout tools, application development features, and code Editing a Fireworks MX Fireworks MX 2004 through the editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 2004 image or table design note, for the purpose of modifying developers. Here to get you hands-on with it fast is the definitive project-based training on the images and tables. Revisions are then topic from one of the master teachers at Linda.com training. Using a combination of projectupdated and sent back to Dreamweaver MX based lessons, guided exercises,2004 and QuickTime tutorials, veteran author Garo Green walks you smoothly by the click of a button. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and InsertingWeb an image to create blankabout graphic of the managing sites, and linkingAllows amongyou pages. You'llalearn frames and forms, cascading placeholder right size to fit your design in up Dreamweaver style sheets, and Fireworks and Flash integration, and gobble Garo's suggestions about best 2004. layout and typography practices.MX You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Updating a Dreamweaver Launches Fireworks MX 2004 and opens the editing, and more. Throughout, Garo shows you not just how to do something but why you're MX 2004 image Dreamweaver MX 2004 placeholder image doing it and the results of your actions. placeholder in Fireworks for design. Then the image is saved and sent MX 2004 back to Dreamweaver MX 2004. Opening a Fireworks MX 2004 pop-up menu in Dreamweaver MX 2004 Allows you to view Fireworks MX 2004 image pop-up menus and HTML-based pop-up menus in Dreamweaver MX 2004. Show pop-up menu Allows you to set options to create and edit both image-based and HTML pop-up menus in Dreamweaver MX 2004. Allows round-trip graphic editing with Fireworks MX 2004 through Design Notes. The Importance of Design Notes Design Notes are a key component to Dreamweaver MX 2004 and Fireworks MX 2004 integration. When you export a GIF or a JPG file from Fireworks MX 2004 to a Dreamweaver MX 2004 site folder, a folder is automatically created named notes within your local root folder. This • Table ofDesign ContentsNotes file, which uses the Macromedia note file extension (.mno). folder contains the • Index Design Notes contain information about the graphic files that you exported from Fireworks MX • Examples 2004, such as where the source PNG file is located. PNG is the native file type for Fireworks MX Macromedia® Dreamweaver® MX 2004: Hands-On Training 2004, and the PNG files generated there contain crucial information about the graphic that other formats cannot store. The information from Design Notes is used when you launch and edit a By Garo Green , Lynda Weinman Fireworks MX 2004 table or image from Dreamweaver MX 2004. When an image is exported from Fireworks MX 2004, Design Notes are automatically created. When a graphic or table is Publisher: Peachpit Press selected in Dreamweaver MX 2004, the Properties inspector will display the Fireworks MX 2004 Pub Date: December 22, 2003 icon and the path to the source file. ISBN: 0-321-20297-X Pages: 720 A Fireworks MX 2004 graphic selected in Dreamweaver MX 2004 with the Properties inspector displaying the path to the source file. Notice how Dreamweaver locates and displays the Fireworks PNG source file–this is all possible because of the Design Notes . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The best thing about Design Notes is there is really not much you have to do. All of the Design Notes' magic between Fireworks MX 2004 and Dreamweaver MX 2004 goes on behind the scenes, letting you focus on creating your Web pages. External Image Editor and Launch and Edit Preferences When you install the Macromedia Studio MX 2004 suite, preferences for an external image editor are set for you automatically. Fireworks MX 2004 is selected as the default external image editor for Dreamweaver MX 2004. This is what allows you to go between Dreamweaver MX 2004 and • of smoothly Contents and effortlessly. It is these preferences that launch Fireworks MX Fireworks MXTable 2004 • Index 2004 when you edit an image in a Dreamweaver MX 2004 document. • Examples Macromedia® If your preferences Dreamweaver® aren't MX set2004: properly, Hands-On you Training can set them yourself by following these steps: ByGaro Green, Lynda Weinman 1. ChooseEdit > Preferences (Windows) or Dreamweaver > Preferences (Mac) and Publisher: Peachpit Press selectFile Types/Editors in the Category list on the left. Pub Date: December 22, 2003 2. InISBN: the 0-321-20297-X Editors panel of the Preferences window, you should see Fireworks MX 2004 selected Pages: 720as your primary image editor. 3. In the Extensions panel of the Preferences window, you can scroll through the extension types that Fireworks MX 2004 will edit upon selection. Click OK when you are done exploring. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the The preference settings for file types/editors in Dreamweaver MX 2004 . topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Inserting Fireworks MX 2004 Images Now that you have a general understanding of what is going on behind the scenes, it is time to have some fun with Dreamweaver MX 2004 and Fireworks MX 2004. In this first exercise, you will practice the simple technique of inserting a Fireworks MX 2004 image into a Dreamweaver • Table of Contents MX 2004 document. • Index • Examples 1. Copychap_15 to your Define your Macromedia® Dreamweaver® MXhard 2004:drive. Hands-On Training site for Chapter 15, using the chap_15 folder as the local root folder. If you need a refresher on this process, visit Exercise 1 in ByGaro Green, Lynda Weinman Chapter 3, "Site Control." Peachpit 2.Publisher: Open the file Press insert.html from the chap_15 folder. This file is a simple page containing a Pub Date: December 2003 you will be inserting the Fireworks MX 2004 graphic. table, which is22, where ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Make sure that the Assets panel is open; if it is not, choose Window > Assets. Click the Images: Site radio button to display your image assets for this site. This will ensure you are viewing all of the images within the chap_15 local root folder. As you will see, the Assets panel contains an assortment of GIF, PNG, and JPG images. The PNG files are the original Fireworks MX 2004 graphics files for use for integrating updates between Dreamweaver M X 2004 and Fireworks MX 2004. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. Selectbanner_grfk_01.jpg in the Assets panel and drag it into the table cell. The l.a. Eyeworks artwork fills the cell, and your page should look like the image shown here. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the The Fireworks MX 2004 graphic inserted into the Dreamweaver MX 2004 topic from one of the master teachers at Linda.com training. Using a combination of projectdocument. You can tell that this is a graphic created in Fireworks MX 2004 based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you because when you click it, the Src field in the Properties inspector tells you so! through all the Dreamweaver MX 04 basics: navigating the new interface, creating and This means this graphic is linked to a PN G file, and this is happening due to the managing Web sites, and linking among pages. You'll learn about frames and forms, cascading design note. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Save this page and keep it open for the next exercise. That was easy, huh? With this image inserted onto the page, you can continue learning more Fireworks MX 2004 and Dreamweaver MX 2004 integration magic. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2 Editing Images with Built-in Fireworks MX 2004 Tools In this exercise, you will learn to how to edit and manipulate images using the new set of built-in graphics editing tools inside Dreamweaver MX 2004. This new feature can be helpful for those small adjustments that don't require the full set of Fireworks MX design tools. Once you get the • Tablesee of Contents hang of it, you'll that these tools can help enhance production because you can crop, resize, • Index and make other minor edits with Fireworks MX 2004 tools without having to leave Dreamweaver • Examples MX 2004. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman When an image is selected, the built-in editing tools are activated on the Properties inspector. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Sharpen tooltip. 1. Withinsert.html still open from the previous exercise, select the l.a. Eyeworks graphic (banner_grfk_01.jpg). In the Properties inspector, select theSharpen tool. It's the one that looks like a light blue triangle. When you place your cursor over one of the tools, the tooltip displays. When an editing tool is clicked, a dialog box will appear telling you that you are about to make changes that will soon become permanent. If you don't like the way the image looks after you have adjusted it, you can only undo it for a certain amount of time . The image edit alert dialog box warns you that you are making permanent changes to the image, but choosing Edit > Undo will let you undo those changes. That doesn't sound very permanent to me. ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X 2. ClickOK. The Sharpen control appears, and you can begin sharpening the image. Pages: 720 The Sharpen tool in action. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Click and drag the Sharpen slider to the right to increase the image sharpness. To decrease the sharpness, drag the slider back toward the left. When you are happy with the result, click OK. Be careful! It's really easy to over sharpen the image. You might want to toggle the Preview check box on and off to see the changes you are making. 4. When you are finished experimenting, close this file. You will not need it for the next exercise. Now that you have an idea of what to expect, you can use the following chart to guide you through your experimentation with these tools. Built-In Editing Tools The following table outlines the built-in editing toolset in Dreamweaver MX 2004. As you become more familiar with these tools, you won't need this table. For now, it should give you a better idea of what each of the tools does. • • • Table ofBuilt-In Contents Editing Tools in Dreamweaver MX 2004 Icon Index Name Function Examples EditMX 2004: Hands-On Training Macromedia® Dreamweaver® ByGaro Green, Lynda Weinman Publisher: Peachpit Press Launches Fireworks MX 2004 for full featured roundtrip editing of individual images and Fireworks MX 2004 tables. Pub Date: December 22, 2003 Optimize ISBN: 0-321-20297-X Pages: 720 in Fireworks Opens the Fireworks MX 2004 Optimize panel, allowing compression changes to images. Crop Activates cropping handle controls, allowing for image cropping inside Dreamweaver With its powerful combination of visual layout tools, application development features, and code MX 2004. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the Resample Allows scaling of image files topic from one of the master teachers at Linda.com training. Using a combination of projectto the desired size. Use image based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you handles for resampling and through all the Dreamweaver MX 04 basics: navigating the new interface, creating and resizing of images within managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Dreamweaver MX 2004. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typographyBrightness practices. You'll find extensive coverage of all of Dreamweaver's and also Contrast Activates brightness and newest features: dynamic cross-browser validation, improved support, built-in graphics contrast CSS controls, allowing editing, and more. Throughout, Garo shows you not just how to doto something adjustments be made but to why you're doing it and the results of your actions. image brightness and contrast directly within Dreamweaver 2004. Sharpen Activates sharpen control used to increase overall image sharpness. 3 Editing a Fireworks MX 2004 Image In this exercise, you will learn to use roundtrip editing to edit an image that was created in Fireworks MX 2004 while you have Dreamweaver MX 2004 open and active. This exercise demonstrates that you can go between the two programs easily. • Table of Contents • Indexhave Fireworks MX 2004 installed in order to complete this exercise. I have Note: You must included a trial • Examples version of Fireworks MX 2004 on the H·O·T CD-ROM for your convenience. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open the file round_trip.html from the chap_15 folder. This file looks familiar doesn't it! It is a simple page containing a table, with a Fireworks graphic called banner_grfk_02.jpg inserted inside the table cell. 2. Select the l.a. Eyeworks graphic (banner_grfk_02.jpg). In the Properties inspector notice the Src field beneath the Target option. The source text field is displaying the path to the source file for the selected image. In this case, it is pointing to the banner_grfk_02.png file. This option appears only when you have selected an image that has been exported from Fireworks MX 2004. Click the Edit button in the Properties inspector. As a general rule of thumb, it is always best to work with the source file for an image, especially if you are going to resize and recompress the image, as will be the case in this exercise. Because the PNG file that was saved from Fireworks MX 2004 is in the local root folder, you would click Yes in theFind Sourcedialog box. If you don't have the source file, your only option is to click No and work with a compressed graphic. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X You are now in Fireworks MX 2004 viewing the source document. At the top of the window, Pages: 720 notice that it says, "Editing from Dreamweaver," which indicates that you are editing this image while you have Dreamweaver MX 2004 open and active. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. ChooseModify > Canvas > Image Size. This will open the Image Size dialog box. 3. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X 4. Make sure that both the Constrain proportions and Resample image check boxes are Pages: 720 checked. Change the Pixel dimensions for width to 300 pixels. You will see that the Height attribute automatically updates to 163. 5. ClickOK. The graphic has now become much smaller. Because you edited the source file, the image will scale perfectly without distortion. This is one reason you want to work with With its combination of visual layout tools, and code thepowerful source file whenever possible, because GIF application or JPG files development do not alwaysfeatures, rescale without editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web distortion. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Click the Done button. This will close Fireworks MX 2004 and return you to the document window in Dreamweaver MX 2004. The image is resized and uses compression settings from the last time the file was exported. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 7. Right-click (Windows) or Ctrl+click (Mac) the image, and project-based select Reset Size fromon the developers. Here to get you hands-on with it fast is the definitive training the contextual menu. This will cause the display to refresh, and the resized image to appear topic from one of the master teachers at Linda.com training. Using a combination of project- in document window. basedthe lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Note: As an alternative, you can also use the Resize button in the Properties inspector. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics When you click in the empty area of your document, the table cell the graphic is editing, and more. Throughout, Garo shows you not just how to do something but why you're placed in will also resize to fit your new graphic . doing it and the results of your actions. Because there are so many different things you can do to edit graphics between Dreamweaver MX 2004 and Fireworks MX 2004, I have included a handy little chart at the beginning of this chapter to provide you some more possibilities . 8. Save and close this file now. You won't need it for the next exercise. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Inserting Simple Rollovers from Fireworks MX 2004 Like peanut butter and jelly, Dreamweaver MX 2004 and Fireworks MX 2004 were made to go together. But once you've created your rollovers in Fireworks MX 2004, how do you get them into Dreamweaver MX 2004 and still have them work? This exercise shows you how to import • of HTML Contents Fireworks MXTable 2004 files that contain JavaScript rollovers into a page in Dreamweaver MX • Index 2004. You'll see that it's as easy as clicking a button. • Examples Note: You need Macromedia® Dreamweaver® to have Fireworks MX 2004: Hands-On MX 2004Training installed to complete this exercise. There is a 30-day demo installer on the H·O·T CD-ROM if you don't already have this program installed. ByGaro Green, Lynda Weinman Peachpit Press 1.Publisher: Open fw_simple.html from the html folder of chap_15. This is simply a blank file that I Pub Date: December 22, 2003 created for you. ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing sites, and linking among pages. You'll learn about frames and forms, 2. Click Web the Image button in the Insert bar and select Fireworks HTML from the cascading drop-down style menu. sheets,This and will Fireworks and Flash integration, and gobble up Garo's suggestions about best open theInsert Fireworks HTML dialog box. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout 3. Click andBrowse typography and locate practices. the You'll simple_roll.html also find extensive file inside coverage the chap_15 of all of Dreamweaver's folder. This file was newest exported features: from dynamic Fireworks cross-browser MX 2004, and validation, it contains improved the JavaScript CSS support, rollover built-in code.graphics Click Open. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. You'll be returned to theInsert Fireworks HTML dialog box. Click OK. Note:If you check the Delete file after insertion check box, the original HTML file you selected will be deleted after it is inserted into your document. I recommend that you don't delete the file unless you are sure you don't want to import it into another page . NOTE Import from Outside Your Local Root Folder If you try to import an HTML file that is not within your local root folder, you will see the following dialog box. Click OK and choose a place inside your local root folder to save the files. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press This what your page Pub Date:is December 22, 2003 should look like now . ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 5. PressF12 to test the rollovers in your browser. With the click of a few buttons, newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Dreamweaver MX 2004 imported the images and the necessary JavaScript to make this editing, and more. Throughout, Garo shows you not just how to do something but why you're rollover work. doing it and the results of your actions. 6. Save and close this page. 5 Updating Fireworks HTML in Dreamweaver After you start working with Dreamweaver MX 2004 and Fireworks MX 2004 in tandem, there will most likely be times when you will want to make changes to the original Fireworks MX 2004 HTML that you placed in your Dreamweaver MX 2004 document. This exercise steps you through • Table of Contents the process of applying a simple modification to a Fireworks MX 2004 HTML file that has been • Index placed in a Dreamweaver MX 2004 page. • Examples In this example, Macromedia® Dreamweaver® you will modify MX 2004: the Hands-On l.a. Eyeworks Training navigation bar that was created in Fireworks MX 2004 and then inserted into a Dreamweaver MX 2004 page. You will go back and forth ByGaro Green, Lynda Weinman between Dreamweaver MX 2004 and Fireworks MX 2004, accessing and modifying the original Fireworks PNG file. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 1. In Dreamweaver MX 2004, opennav_bar.html from theUsing chap_15 folder. topic from one of the master teachers at Linda.com training. a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Click anywhere in the table to activate the Tag Selector at the lower-left of the document window. You should see the <table> tag appear in the Tag Selector. Click the <table> element in the Tag Selector to select the entire table. 3. 3. With the <table> tag selected, the Properties inspector indicates that you have a Fireworks MX 2004 table selected by displaying Fireworks Table in the upper-left corner of the Properties inspector. The source file for this table is nav_bar.png, as indicated at the bottom of the Properties inspector. 4. Click the Edit button at the bottom of the Properties inspector. This will launch Fireworks MX 2004 (if it is not already open) and open the file nav_bar.png. • • • Table of Contents Now that you are in Fireworks MX 2004 and the PNG file is accessed, you will make some Index simple edits to it. Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout typography practices. You'll also findtool extensive coverage of all Dreamweaver's 5. Inand Fireworks MX 2004, use the Selection to select the about usof text block. (I have newest features: dynamic cross-browser validation, improved CSS support, built-in locked all the other layers in the document so that you don't accidentally selectgraphics something editing, and;-) more. Throughout, Garo shows you not just how to do something but why you're else.) doing it and the results of your actions. 6. Hold down theShift key and click to select the remaining text elements for frames,faces, locations and contact us. 6. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. In the Properties inspector, click the text color box and change the color of the text elements from white to black (#000000 is the hexadecimal value for black). With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MXthis 2004 is sure to becomeMX the2004 constant companion of many Web Your file should look like now in Fireworks . developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. Click the Done button in the upper-left corner of the document window. 9. You are switched back to Dreamweaver MX 2004, and your table has been updated automatically. 10. Save and close this page. Based on settings applied to the Web layer and within the export settings in Fireworks MX 2004, 10. the HTML has been updated. At the same time, it has exported the updated graphics and placed them in the correct folder. Additionally, the Fireworks M X 2004 PNG file has been updated and saved. This is all going on behind the scenes with the help from the data comments in the Fireworks MX 2004 HTM L, the MNO file (a.k.a., the Design Notes file), and the HTML export preference settings in Fireworks MX 2004 . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. About Fireworks MX 2004 Export Settings Because Fireworks MX 2004 allows you to export both graphics and HTML, I thought it would be helpful for you to understand how Fireworks MX 2004 export settings are controlled. • of Contents In Fireworks Table MX 2004, there are settings that control the type and amount of compression your • graphics will Index receive, and there are separate settings for controlling various attributes of your Fireworks MXExamples • 2004 HTML. Macromedia® Dreamweaver® MX 2004: Hands-On Training There is a special layout layer in Fireworks MX 2004 called the Web layer that allows you to ByGaro Green, Lynda Weinman assign interactivity and HTML information to areas of your document that you assign as slices. Publisher: Peachpit When preparing a Press document as a Web page in Fireworks MX 2004, you use the Web layer to add Pub Date: December 22, 2003 interactivity and define page layout. On export, Fireworks MX 2004 uses this information to generate the HTML and ISBN: 0-321-20297-X JavaScript code that will display and animate your images according to your designs. Pages: 720 Note With its powerful combination of visual layout tools, application development features, and code editing support, MX Dreamweaver MX 2004 is sure to become the constant companion of many Web Fireworks Pop-Up Menus developers. Here to get you hands-on with it fast is the definitive project-based training on the topicFireworks from one MX of the master teachers Linda.com training. Usingmenus a combination of project2004 lets you createatboth image-based pop-up and HTML-based based lessons, guided exercises, and veteran author Garo Green walks pop-up menus. Dreamweaver MXQuickTime 2004 lets tutorials, you create HTML pop-up menus as well. If you through the Dreamweaver MX 04 basics: navigating newchanges interface, and yourallpop-up menu is image-based and you want tothe make to creating it, you will need managing and linking among pages. You'llrather learn than aboutinframes and forms, to editWeb the sites, pop-up menu in Fireworks MX 2004, Dreamweaver MX cascading 2004. style But sheets, Fireworks and Flash integration, Garo's suggestions don'tand worry, you'll learn how to work withand bothgobble types up of pop-up menus next!about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6 Editing an HTML-Based Pop-Up Menu As you may have guessed from its title, this exercise gives you some experience making edits in Dreamweaver MX 2004 to an HTML-based pop-up menu originally created in Fireworks MX 2004. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 1. Open nav_bar_pop.html from the chap_15 folder. This file is an example of an HTML pop-up menu created in Fireworks MX 2004. 2. PressF12 to preview this page in a browser. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Move your cursor over one of the navigation images, and you will see a pop-up menu appear. The menu items are not linked to anything yet, so if you click them, they won't take you anywhere. Don't worry, you'll learn about linking them in a minute or two. 4. Switch back to Dreamweaver MX 2004 and click the about us image to select it. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 5.Publisher: You should see the word <table> appear in the Tag Selector. Click the <table> element Peachpit Press inDate: the December Tag Selector Pub 22, 2003to select the entire table. Notice that this is a Fireworks MX 2004 table. ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Click the about us image to select it. Open the Behaviors panel by choosing Window > Behaviors (Shift+F3). Notice that some JavaScript behaviors are attached to this image. Now you are going to edit these behaviors in Dreamweaver MX 2004 . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. Double-clicktheShow Pop-Up Menu behavior or the gear icon to open the Show PopUp Menu dialog box.Note: Double-clicking on the onMouseOver event modifies the event, not the action. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. Within the Contents tab, click the words Our History in the text window to activate it in theText field. Now, click before the word History (which appears automatically in the Text field) and type the word Company. Click OK. 9. When you look at the file, no change is evident. Press F12 to preview the page in a browser. Your pop-up menu now looks like this in the browser. N otice that O ur History now appears at the top of the pop-up menu instead of just the word styles. That was pretty easy to do, and you will be happy to know that editing the text in image-based popup menus works exactly the same way. Editing the images in image-based pop-ups, however, is a different story. In the next exercise, you will get a chance to modify an image-based pop-up menu. Woo-hoo! • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 10. Save and close this file. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7 Editing an Image-Based Pop-Up Menu Now that you understand how to edit an HTML-based pop-up menu, you are ready to learn how to make changes to an image-based pop-up menu. In this exercise, you will be working with a page in Dreamweaver MX 2004 that contains an image-based pop-up file. I have created this for • ContentsMenu behavior in Fireworks MX 2004 and selecting image-based for you using theTable AddofPop-Up • Index the button type. • Examples When I exported Macromedia® Dreamweaver® the Fireworks MX 2004: MXHands-On 2004 fileTraining into the Dreamweaver MX 2004 site, I got the HTML and all the graphics required to "run" the menu. Plus, Fireworks MX 2004 exported the MNO (or ByGaro Green, Lynda Weinman Design Notes) file as well. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 1. Open the image_pop_up.html the chap_15 folder. looks suggestions just like the about HTML best style sheets, and Fireworks and Flash from integration, and gobble upItGaro's version, but it isn't. Press F12 to preview this page in a browser. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics As and you can see, the pop-upGaro menushows itemsyou looknot three-dimensional. That's because thisyou're is an editing, more. Throughout, just how to do something but why image-based pop-up menu that I created in Fireworks MX 2004. If you want to change the doing it and the results of your actions. text on the buttons, you can follow the steps in Exercise 6. However, if you want to modify the backgrounds of the buttons, you must perform the steps that follow . 2. Switch back to Dreamweaver MX 2004. 3. Click anywhere inside the table. Using the Tag Selector, select the table. The filename image_pop.png is displayed in the Src field. This path appears here because of the 3. information stored in the Design Notes, which were automatically transferred when the Fireworks MX 2004 file was saved to the root directory. Click the Edit button. Fireworks MX 2004 will launch automatically and open the image_pop.png file. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. You might want to expand the document window so you have some empty workspace around the navigation bar. over the about us imagedevelopment and you seefeatures, red lines,and which With its powerful combination of Mouse visual layout tools, application code indicate that there is a pop-up menu to the image. editing support, Dreamweaver MX 2004 is attached sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Click the about us image. The lines turn blue, indicating that the image is selected and that the menu is now ready to select. Double-click the blue lines of the pop-up menu to open the Pop-Up Menu Editor. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. 6. Click the Here Appearance to get you tab hands-on to modify withthe it fast appearance, is the definitive including project-based the background training graphics, on the of topic the from pop-up one ofmenu. the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. Use this image to set the options. When you are finished, click Done. 7. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 8.Publisher: RepeatPeachpit this process for the other four menus. When you are finished, click the Done Press button. Pub Date: December 22, 2003 ISBN: 0-321-20297-X 9. Back in Dreamweaver MX 2004, there is no obvious change to see until you press F12 to Pages: 720this page in a browser. preview The image-based pop-up menu has been changed to reflect the modifications you With its made powerful in Fireworks combination MX 2004. of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. Save and close this file. In the final exercise of this chapter, you will learn to create an HTML popup menu from Dreamweaver MX 2004 and attach it to an existing Fireworks MX 2004 navigation bar. 8 Adding a Dreamw eaver MX 2004 Pop-Up Menu Behavior As you saw in a previous exercise, the Dreamweaver MX 2004 Show Pop-Up Menu behavior lets • of Contents you edit and Table update the contents of your Fireworks MX 2004 HTML-based pop-up menus. You • Index Pop-Up Menu behavior in Dreamweaver MX 2004 to create, add to, delete, or can use the Show change menuExamples • items, and rearrange and set menu items positioned within the page. In this exercise, youDreamweaver® Macromedia® will attach an MXHTML-based 2004: Hands-On pop-up Training menu to a navigation bar that I have already created for you using Fireworks MX 2004. The pop-up menu is created using the Show behavior ByGaro Green, Lynda Weinman in Dreamweaver MX 2004. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open dw_pop.html from the chap_15 folder and click the about us graphic. Make sure theBehaviors panel is showing. 1. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to (+) get sign you hands-on with it fast is the definitive project-based training on the 2. Click the plus on the Behaviors panel and scroll down to selectShow Pop-Up topic Menu from one of the master teachers at Linda.com training. Using a combination of projectfrom the behaviors list. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. TheShow Pop-Up Menu dialog box opens. You will create your pop-up menu by clicking on the tabs and entering your settings. The Contents tab is selected by default. This tab allows you to set the name, structure, URL, and target of the individual menu items. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 4. In support, the TextDreamweaver field, select the that Item the andconstant change itcompanion to Our History. Click in editing MXtext 2004 is says sure New to become of many Web theLinkHere fieldtoand are finished,project-based click the plustraining (+) button to developers. gettype you history.html. hands-on with When it fast you is the definitive on the this entry and begin teachers the next at menu item. training. Using a combination of projecttopic set from one of the master Linda.com based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading is how the menuand looks with all threeand menu items style This sheets, and Fireworks Flash integration, gobble up added Garo's .suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. 5. Add the text Our Staff in the Text field and enter staff.html for the Link. Click the plus (+) button. Add the text Our Mission in the Text field and enter mission.html for the Link. 6. Click the Appearance tab to see more options. This tab lets you set the look of the menu's Up and Over states. It also lets you specify the font for the menu's text. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and sure typography practices. also find extensive coverage of all of Dreamweaver's 7. Make you have VerticalYou'll menu selected at the top of the menu. For the Font, choose newest features: dynamic cross-browser validation, improved CSS support, built-in Verdana, Arial, Helvetica, sans-serif. Select 10 for the Size and click the B graphics button to editing, andthe more. Garo shows you not just how to do something but why you're make text Throughout, bold. doing it and the results of your actions. 8. Click the color box to set the colors for the Up and Over state text. For the Up state, selectwhite for the Text and select light yellow ochre for the Cell. For the Over state, useblack for the Text and use light yellow for the Cell. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination visual layout you tools, development and code 9. its Click the Advanced tab. of This tab allows to application set the properties of the features, menu cells. You editing support, Dreamweaver MX 2004 is sure to become the constant companion of many can set cell width and height, cell color and border, text indentation, and the length of Web developers. Here to get you appears hands-onafter withthe it fast the definitive project-based training onor the delay before the menu userismoves the pointer over the trigger link topic object. from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. Click the Position tab. This tab lets you set where the menu is positioned relative to the triggering link or image. You can either set the position manually by entering numbers into theX and Y fields, or you can select one of the presets by clicking the Menu position buttons on the panel. Select Below and at Left Edge of Trigger. Make sure the Hide Menu on onMouseOut Event check box is checked. This will hide the menu when the user's mouse is no longer on it. Click OK. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 11. When the about us graphic is selected now, the Behaviors panel should look like this. PressF12 to test your pop-up menu in the browser. 12. its Save and close this page.of visual layout tools, application development features, and code With powerful combination editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the Great job! You thereat are a numbertraining. of ways Using that Dreamweaver and topic from one have of thelearned master that teachers Linda.com a combinationMX of 2004 projectFireworks MX 2004 work together. If you have the energy, turn the page and move on to the based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you next chapter. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 16. Automation Using the History Panel for Undo/Redo • • • Table of Contents Using Find and Replace Index Examples Creating a Web Photo Album Macromedia® Dreamweaver® MX 2004: Hands-On Training If Garo you Green design WebWeinman pages, you will quickly notice that an abundance of incredibly repetitive and By , Lynda boring tasks are required to do your work. Publisher: Peachpit Press Fortunately, Dreamweaver MX 2004 has several features that help you automate many of these Pub Date: December as 22, the 2003History panel and the use of custom objects and commands. In this boring tasks—such ISBN: 0-321-20297-X chapter, you learn about the History panel, which memorizes and replays steps you've Pages: while 720 performed creating a Dreamweaver MX 2004 document. This panel can be scripted to replay these steps, which is one great way to automate repetitive tasks. This chapter also introduces you to the powerful Find and Replace function, which can efficiently make changes to your current page, a range of pages, or your entire site. You also work with one of the preexisting commands that ships with Dreamweaver MX 2004 right out of the box: Create Web Photo With itsAlbum. powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is the History Panel? • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 The History panel displays up to 50 steps that have been performed since you created or opened With its powerful combination of visual layout tools, application development features, and code your file. This offers a nice visual overview of the different steps you've completed. You can use editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web the slider to quickly undo and redo these steps. This visual approach to stepping backward and developers. Here to get you hands-on with it fast is the definitive project-based training on the forward through your document gives you more feedback than pressing Ctrl+Z and Ctrl+Y or topic from one of the master teachers at Linda.com training. Using a combination of project(Cmd+Z and Cmd+Y). The steps in the History panel can be copied from one document to based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you another, which is helpful when you want to share information between documents. You can also through all the Dreamweaver MX 04 basics: navigating the new interface, creating and copy steps from the History panel and save them as commands, which allows them to be managing Web sites, and linking among pages. You'll learn about frames and forms, cascading replayed at a later time, in any document, with a just single click. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Using the History Panel for Undo/Redo This first exercise gets you comfortable working with the History panel. You learn how to use this panel to repeat or delete operations you've performed. Working with the History panel can be much easier than choosing Undo and/or Redo multiple times. • Table of Contents • Index • 1. Copychap_16 Examplesfrom the H·O·T CD-ROM to your hard drive. Define your site for Chapter 16, using the chap_16 folderHands-On as the local root Macromedia® Dreamweaver® MX 2004: Training folder. If you need a refresher on this process, visit Exercise 1 in Chapter 3, "Site Control." ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Open sunglasses.html. For viewing text online, a sans-serif font, such as Verdana, makes the text easier to read. For this reason, you will learn to change the serif font used in the text in the middle of the screen (and learn about the History panel at the same time). • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided andparagraphs QuickTime of tutorials, 3. Click and drag to exercises, highlight the text. veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. In the Properties inspector, choose the Font pop-up menu and select Times New Roman, Times, serif. This changes the font used to display this text. 5. Make sure your History panel is open. If it is not, choose Window > History ( Shift+F10). The History panel displays the change you made to the block of text in Step 4. As you continue to make additions and changes to your document, your steps are displayed here. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 6. With the block of text still selected, change the font to Verdana, Arial, Helvetica, sansWith its serif. powerful Noticecombination that the History of visual panellayout records tools, thisapplication step as well. development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. In the History panel, click and drag the History slider up so that the first step is highlighted. This undoes the last formatting you applied to the text, just as though you had used the Undo command. Click and drag the History slider down to the bottom of the list to reapply the text formatting. This is a nice way to step through the changes you have made to your document. It beats having to press Ctrl+Z (Windows) orCmd+Z (Mac), because it gives you feedback about what change you are undoing. Note The History Slider • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Dragging the History slider up allows you to step back through each of your steps and undo them one at a time. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Dragging the History slider down allows you to reapply your steps one at a time. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. With the block of text still selected, reduce the Size to 2. The History panel also records this action. 8. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 9. Click and drag the History slider to the very top of the panel, just above the first entry. This undoes all the formatting you just applied using tags. Since I prefer using CSS Publisher: Peachpit Press to format text, which you learned about in Chapter 9, "Cascading Style Sheets," I want to Pub Date: December 2003 make sure you22, remove all the tag formatting before closing this file. ISBN: 0-321-20297-X Even Pages:though 720 you didn't keep any of the font formatting, this work flow isn't a bad way to try out different font faces before you go to the trouble of creating a CSS rule . 10. Save the changes and leave this page open for the next exercise. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectNote based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX the 04 basics: the new interface, creating and Saving Files and Clearing Historynavigating Panel managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style The sheets, and panel Fireworks Flashautomatically integration, and gobble up Garo's History is notand cleared when you save a file.suggestions This is greatabout if youbest layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's want to use it to make changes even after you save the document. If you close the file newest dynamic cross-browser validation, andfeatures: reopen it, however, the history is removed.improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doingItitisand the results of the yourHistory actions. possible to clear panel at any time. Why would you want to clear the History panel? Because it uses a lot of RAM if you have made a lot of changes. Clear the history by clicking the arrow in the upper right of the History panel and choosing Clear History from the pop-up menu. This action cannot be undone, so be careful when you use it. 2 Using Find and Replace One of the most powerful (and least recognized) features in Dreamweaver MX 2004 is the Find and Replace feature. Learning how to use this feature allows you to perform what would normally be very time-intensive tasks in an incredibly short amount of time. The Find and • Tableisofsimilar Contents Replace feature to the Find and Replace feature in other programs, such as Microsoft • Index Word. In this exercise, you learn how to use this feature to replace text on a page and how to • Examples within a specific XHTML tag. While it may not be the sexiest exercise in replace text contained Macromedia® Dreamweaver® MXof 2004: Training this book, it is certainly one the Hands-On most useful. ;-). ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. From the Files panel, open sunglasses.html. Notice that this page incorrectly used "l.a. Eyewear" in the page title and within the body text. The proper name for this company is l.a. Eyeworks. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combinationNotice of visual layout tools,also application development features, 2. its Open eyeglasses.html. that this page uses "l.a. Eyewear" instead of and l.a. code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Eyeworks. Man, someone sure needs to fire the copy editor. ;-) developers. Here to get you hands-on with it fast is the definitive project-based training on the topic While from one the open master teachers atyour Linda.com training. Using a combination of projectyou of could each page in site and make the corrections manually, that would basedbelessons, guided exercises, and QuickTime tutorials, veteran author Garo Green a very inefficient way to work. This site has only two pages with the improper walks name you through all the MX a04 basics: navigating new interface, creating shown, butDreamweaver what if you had site that had a similarthe problem in hundreds of itsand pages? As managing Web sites, and linking among pages. You'll learn about frames and forms, cascading you can now see, making these types of corrections manually is not the most efficient way style to sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about handle the problem. However, by using the Find and Replace feature, you can makebest layoutthese and changes typography practices. You'll also find extensive coverage of all of Dreamweaver's quickly and accurately. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, andEdit more. Throughout, Garo shows you not just how to do something but why you're 3. Select > Find and Replace. This opens the Find and Replace window, where you doingcan it and the results of your actions. set the necessary options. 4. From the Find In drop-down menu, choose Entire Current Local Site. This ensures that Dreamweaver searches all the pages within the current local site. Take a moment to examine the other options available to you. As you can see, Dreamweaver allows you to modify as little or as much of your site as you wish. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 5. Make sure the Search option is set to Text. This ensures that Dreamweaver searches the Publisher: text onPeachpit all thePress pages within your current local site. You can see that you have some other options available here as well, such as searching the Source Code and Specific Tag. Pub Date: December 22, 2003 ISBN: 0-321-20297-X 6. In the Find text field, enter l.a. Eyewear. This defines that text you are looking for. In this Pages: 720 case, you want to find all instances of the incorrect company name. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it the andReplace the results of field yourenter, actions. 7. In text l.a. Eyeworks. This defines what text should replace the text in the Find text field. Make sure that Match Case is left unchecked. You might have noticed that some of the "Eyeworks" were capitalized and some weren't. By telling Dreamweaver to ignore the case, you make sure that all instances of it are changed. Click Replace All to have Dreamweaver search the text on all the pages in your site and make the necessary replacements. 8. Because you have some pages in the current local site open, Dreamweaver displays a warning telling you that this operation cannot be undone in pages that are open. That's okay; just click Yes. Dreamweaver then proceeds with the find-and-replace functions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 9. its Notice how only the text on the page wastools, replaced, not thedevelopment text in the Page Title. Why? With powerful combination of visual layout application features, and code Because earlier you set the Search option to become Text, which finds only text withinofthe <body> editing support, Dreamweaver MX 2004 is sure to the constant companion many Web tag of the page. Since the <title> tag is outside the <body> tag, that text was not developers. Here to get you hands-on with it fast is the definitive project-based training on the Don't anat easy way to replace the text awithin a specific too! topic replaced. from one of the panic—there's master teachers Linda.com training. Using combination of tag, projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 10. SelectEdit > Find and Replace again. Notice how the Find and Replacetext from the last few steps is retained in the text fields. 11. 10. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 11. From the Search drop-down menu, chooseSource Code. This causes Dreamweaver to Publisher: Press searchPeachpit through all the source code on the page, including the <title> tag, instead of just Pub the Date: text December contained 22, 2003 within the <body> tag. In the Find text field, enter l.a. Eyewear, and in the Replace text field, enter l.a. Eyeworks. Click Replace All. ISBN: 0-321-20297-X Pages: 720 12. Again, because you have pages open, Dreamweaver gives you a warning; just click Yes. Dreamweaver proceeds with the find-and-replace function. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. Because you are replacing text in the source code of the page, Dreamweaver opens the pages in Split view and highlights one instance of the text that has been changed. As you can see from the above image, the page title has now been properly changed. 14. Save and close all open pages. Note What Is a Command? Acommand is a small JavaScript file that records specific functions performed in Dreamweaver MX. These files are stored inside the Commands folder within the Configuration folder. Some commands come with Dreamweaver MX, such as the Create Web Photo Album command, while others can be downloaded from a different Web sites, as I'll describe later. You can even create your own custom commands, using the History panel, or write them from scratch with JavaScript. For example, you can copy steps from the History panel and save them as a command. Dreamweaver MX 2004 converts the selected steps into JavaScript so that they can be replayed from any document. As you can see, commands can be very powerful and can save you a lot of time. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is a Web Photo Album? TheCreate Web Photo Album command is a great feature in Dreamweaver MX 2004. It lets you quickly create a small Web site–based catalog of images. If you are a designer, photographer, or just someone who has a bunch of images to share with friends and family, you • Table of Contents will really appreciate this feature. This command, which comes with Dreamweaver MX 2004, • Index works in conjunction with Macromedia Fireworks MX 2004 to batch-process a collection of • Examples images and create a set of Web pages that links them all together. You must have Fireworks 4 or Macromedia® Dreamweaver® MX 2004: Hands-On Training MX installed to use this command. You simply tell Dreamweaver MX 2004 where your source images are ,located, and it launches Fireworks MX 2004 to optimize them and create thumbnails By Garo Green Lynda Weinman (smaller versions of your images). Then use Dreamweaver MX 2004 to create a page for each and link them all together. In the end, you have a great way to share your image collections Publisher: Peachpit Press with the world. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages:Photo 720 Web The Album is created automatically from a folder of images. Dreamweaver MX 2004 creates a catalog page of thumbnail images (shown on the left) and individual pages for larger images. You learn how to make this photo album in the next exercise . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Getting More Commands It is possible to create commands that are far more complicated than the ones this chapter describes, such as ones that script complex interactions between Dreamweaver MX 2004 and Fireworks MX 2004. However, creating this type of command requires very strong JavaScript • Tableway of Contents skills, which are beyond the scope of this book. • Index The good news • Examples is that the JavaScript jocks who can create more complicated custom commands often distribute Macromedia® Dreamweaver® these fromMX their 2004: own Hands-On sites. Training There is actually a sizable third-party market for Dreamweaver MX 2004 commands. Below, you'll find information on the Macromedia ByGaro Green, Lynda Weinman Dreamweaver Exchange and a couple of the third-party sites I've found most useful. Make sure you also check out Appendix B, "Online Resources," for a listing of these sites. In addition, you Publisher: Peachpit Press can choose Commands > Get More Commands to access Dreamweaver Exchange, the online Pub Date: December 22, 2003 developers. community for extensibility ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Dreamweaver Exchange If you are proficient in HTML and/or JavaScript, the Macromedia Web site offers a great resource for developers who plan to create custom commands and other extensions for Dreamweaver MX. Macromedia has prepared a comprehensive document that gives detailed information on the extensive Dreamweaver MX 2004 API ( ApplicationProgrammingInterface), which you can also download at the URL listed below. The API refers to the methods a programmer can use to make requests of the application: http://dynamic.macromedia.com/bin/MM/exchange/main.jsp?product=dreamweaver • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Massimo's Corner layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Massimo's is more. a great Web site forGaro getting some useful commands: editing, and Throughout, shows youreally not just how to do something but why you're doing it and the results of your actions. http://www.massimocorner.com • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Yaromat layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics This Web site is another great repository for Dreamweaver MX 2004 behaviors, commands, and editing, and more. Throughout, Garo shows you not just how to do something but why you're objects: doing it and the results of your actions. http://www.yaromat.com/dw/index.php 3 Creating a Web Photo Album TheCreate Web Photo Album command automatically creates a complex Web site that displays your images. An online photo album is great way for artists to display their work, for architects to show renderings to clients, for photographers to show proofs to clients, for families • Table of Contents to share personal photos, and for other purposes too numerous to list here. All you need is a • Index folder of images on your hard drive, and the Create Web Photo Album command converts them • Examples into an elaborate Web site, complete with thumbnails and larger images and links to help Macromedia® Dreamweaver® MX 2004: Hands-On Training navigate through them. You'll be impressed by how easy it is to create this complex site with just a Garo folder of images and the Dreamweaver MX 2004 Create Web Photo Album command. By Green , Lynda Weinman Note:Before completing this exercise, you must have Fireworks 4 or MX installed on your Publisher: Peachpit Press computer. If you don't own a copy of Fireworks MX, don't worry. A free, 30-day trial demo copy Pub Date: in December 22, 2003 folder of the H·O·T CD-ROM . is included the software ISBN: 0-321-20297-X Pages: 720 1. ChooseFile > New to create a new blank document. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. ChooseCommands > Create Web Photo Album. This opens theCreate Web Photo Album dialog box. If you don't have Fireworks installed yet, Dreamweaver MX 2004 displays a Download Fireworks trial link. 3. Enter Photo album title: Sunglasses Gallery. This text, along with the other information you enter on this page, appears at the top of the home page of your completed Web album site after you complete this exercise. 4. Enter Subheading info: presented by l.a. eyeworks. This text appears immediately below the Photo album title field on your Web album site. 5. Enter Other info: (805) 555-1212. This text appears immediately below the Subheading info field. 5. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 6. ClickBrowse to the right of the Source images folder field. Browse to the photos folder chap_16 ByGaroinside Greenthe , Lynda Weinmanfolder. Publisher: Peachpit Press Pub Date:Mac December 22, 2003 users: Click Choose. ISBN: 0-321-20297-X Pages:Windows 720 users: Highlight the folder, click Open, then click Select. This option determines which folder contains the source files you want to use to create your Web photo album. With its powerful combination ofAlbum visual command layout tools, development features, and code Tip: The Create W eb Photo canapplication process only whole folders of images. So editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web be sure to place all of your images in one folder before you create your web album! developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managingTip Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Web Photo Album Source Files layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics The source files for your Web photo album must be saved in the .gif, .jpg, .png, editing, and more. Throughout, Garo shows you not just how to do something but why you're .psd, .tif, or .tiff file format. The files must have the proper extension in order to be doing it and the results of your actions. included in the Web photo album. If they are in another file format, you receive an error message that says no files exist in your source folder. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 7. ClickBrowse to the right of the Destination folder field. Navigate inside the chap_16 editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web folder to select the photo_album folder. I made this empty folder for you to serve as the developers. Here to get you hands-on with it fast is the definitive project-based training on the destination folder for the Web photo album after Dreamweaver MX 2004 finishes executing topic from one of the master teachers at Linda.com training. Using a combination of projectthis command. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks Flash integration, and gobble up Garo's suggestions about best Mac users: Click and Choose. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser improved CSS click support, built-in graphics Windows users: Highlight thevalidation, folder, click Open, then Select. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. Make sure the rest of the Thumbnail size,Columns,Thumbnail format, and Photo format settings match the image shown above. 9. 8. 9. ClickOK. This causes Fireworks to launch and start processing the images. You see a window like this while Fireworks processes the images in your source folder. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 10. When Fireworks is done processing the images, you are returned to Dreamweaver MX, and topic from one of the master teachers at Linda.com training. Using a combination of projectyou see this dialog box. Click OK. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best This is what your Dreamweaver MX 2004 page should look like after the photo layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's album is created. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 11. PressF12 to preview your page in a browser. Click any of the images to see the larger version. Dreamweaver MX 2004 and Fireworks worked together to modify your images, create several Web pages, insert the images, and create links to all the pages. It all happened in just a few seconds! Sweet. 12. Save and close all open files. 12. Note • Web Photo Album 2.1 Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Macromedia has released the Web Photo Album 2.1 for Dreamweaver MX 2004 extension, a new (and improved) version of the Create Web Photo Album command that ships with Dreamweaver MX. The new version includes more features and options for customizing a Web photo album in Dreamweaver MX. You can download the new version from the Macromedia Exchange for Dreamweaver. Woo-hoo! Another chapter under your belt. Congrats! If you feel up to it, move to the next chapter. Chapter 17. Templates/Libraries Templates in Action • • • Table of Contents Creating and Modifying Templates Index Library Examples Items in Action Macromedia® Dreamweaver® MX 2004: Hands-On Training andWeinman Modifying ByGaroCreating Green, Lynda Library Items Two of the biggest challenges that face Web designers are making pages look consistent and Publisher: Peachpit Press updating changes throughout a site. Templates and Library items can help you meet both Pub Date: successfully, December 22, 2003 challenges because they make it easy to create consistent pages and page elements 0-321-20297-X and to ISBN: automatically update multiple pages when changes are made. Pages: 720 Templates are useful for entire page designs. They can lock in colors, fonts, Cascading Style Sheets, tables, images, and even behaviors while leaving other parts of the document editable. Once you have created a template, you use it by requesting a copy of it. Instead of creating a new untitled document, you request a new page based on a template that you have designed. With its powerful combination of visual layout tools, application development features, and code Library items are useful for page-design elements, such as a navigation bar or copyright notice. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web They are little pieces of HTML or text that can be dropped anywhere in a page. You will soon developers. Here to get you hands-on with it fast is the definitive project-based training on the learn the differences between these two Dreamweaver features by following the hands-on topic from one of the master teachers at Linda.com training. Using a combination of projectexercises in this chapter. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Templates in Action The best way to understand templates in Dreamweaver MX 2004 is to observe them in action. For this first exercise, you will modify an existing template, which will show you how quickly templates can update across multiple pages in your site. You will also see how, with just a few • Table of Contents clicks, you can change your color scheme across several pages for pages that are subscribed to a • Index master template. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Copychap_17 from the H·O·T CD-ROM to your hard drive. Define your site for Chapter 17 using the chap_17 folder as the local root folder. If you need a refresher on this process, visit Exercise 1 in Chapter 3, "Site Control." ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 Tip Templates and Library Folders You might have noticed that there are two folders inside the chap_17 folder called Templates and Library. Dreamweaver MXapplication 2004 automatically creates these and code With its powerful combination of visual layout tools, development features, folders Dreamweaver for you on anyMX site2004 that is uses templates or the Library items. If you do not use Web editing support, sure to become constant companion of many templates items, Dreamweaver will not put these folders in on your developers. Here to or getLibrary you hands-on with it fast is MX the 2004 definitive project-based training the directory structure. folders (Templates and Library) do not need of to projectbe topic from one of the master These teachers at Linda.com training. Using a combination uploaded to your Web site you publishtutorials, it to the veteran Web. They are Garo for internal based lessons, guided exercises, andif QuickTime author Green walks you purposes only. If Dreamweaver MX navigating 2004 sees that these folders are present through all the Dreamweaver MX 04 basics: the new interface, creating andin your structure, it knows to insert new templates or Library that you managingdirectory Web sites, and linking among pages.any You'll learn about frames anditems forms, cascading create the appropriate (Templates or Library) without your having to best style sheets, andinto Fireworks and Flashfolder integration, and gobble up Garo's suggestions about dotypography so. layout and practices. You'll also find extensive coverage of all of Dreamweaver's 2. Open eyeworks_color_01.html from the chap_17 folder. This file and several others newest features: dynamic cross-browser validation, improved CSS support, built-in graphics inside chap_17 folder Garo have shows a coloryou scheme template eyeworks_color already editing, andthe more. Throughout, not just how tocalled do something but why you're to them, eyeworks_color_02.html, eyeworks_color_03.html, and doingapplied it and the resultsincluding of your actions. eyeworks_color_04.html. If you want, go ahead and open these other files and examine their page properties. You will notice that they all share the same color scheme. Make sure you close all of the files except eyeworks_color1.html. When you open a file that has a template applied to it, you will see a tab in the upper-right corner that identifies the name of the template file and a tab around each of the template's editable areas. The colors of these areas are set in the Highlighting category of the Preferences dialog box. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing 3. Before support, you Dreamweaver work with templates MX 2004 in Dreamweaver is sure to become MX 2004, the constant you willcompanion typically want of many to have Web developers. theAssets Herepanel to getopen you and hands-on the Templates with it fastcategory is the definitive button clicked project-based so that you training can see on the the topic templates from one of you thehave master within teachers your site. at Linda.com By default, training. the Assets Using panel a combination is part of the of projectdocked basedpanels. lessons, If guided this panel exercises, has been and closed, QuickTime you can tutorials, open itveteran by choosing author Window Garo Green > Assets. walks you Then through click allon the the Dreamweaver Templates category MX 04 basics: buttonnavigating to view the the templates new interface, within creating your site. and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Highlight the template called eyeworks_color in the Assets panel, and then click the Edit icon at the bottom of the panel. This opens the template so you can start editing it. Tip: As an alternative, you can switch to the Site panel to open eyeworks_color.dwt from the Templates folder. It's easy to tell when you are editing a template because the title bar displays <<Template>>, the template file name, and a .dwt extension. Note: Windows users will not see the .dwt extension unless they are working with file extensions turned on. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. ChooseCommand > Set Color Scheme. This opens theSet Color Scheme dialog box. SelectBackground: White and Text and links: Purple, Orange. Click Apply to see the result of your selection. Click OK to set the changes. Note:You could also modify the colors manually via the Page Properties if you want more control over which colors are used. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 6. Close the eyeworks_color.dwt template and save your changes when prompted. You With its powerful combination layout tools,ofapplication features, and code have just saved a changeof tovisual the color scheme the masterdevelopment template. This saved change editing support, Dreamweaver MX 2004 is sure to become the constant companion of many affects the multiple pages that were created with this template that you viewed in StepWeb 2 of developers. Here to get you hands-on with it fast is the definitive project-based training on the this exercise. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Note style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Templates, Library Items, and HTML improved CSS support, built-in graphics newest features: dynamic cross-browser validation, editing, and more. Throughout, Garo shows you not just how to do something but why you're The Dreamweaver MX 2004 template format (.dwt) and Library format (.lbi) are doing it and the results of your actions. internal file-naming conventions only. These files do not mean anything to other HTML editors, nor are they meant to be viewed on the Web from a browser. Templates and Library items are used internally in Dreamweaver MX 2004 and function only in Dreamweaver MX 2004. If you base an HTML page on a template or use Library items in it, it will appear as a normal page in the browser, the same as any other HTML page. It will be regarded differently in Dreamweaver MX 2004 only in that it will be updated if the original template or Library items are changed. 7. After you close and save the modified template, you are notified that you have modified a 7. template and asked if you want to update all the files in your site that use this template. Because you want to apply the new color scheme to all four pages, click Yes. If you are presented with the Update Template Files dialog box, click Update. Dreamweaver MX 2004 will scan your site to determine whether any files are using this template. It will update any files that it finds during the scan. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading 8. In this case, the four files updated, whichand are gobble listed inupUpdate Pages dialogabout box. best Once style sheets, and Fireworks andare Flash integration, Garo's suggestions aretypography finished reviewing this screen, Close. layoutyou and practices. You'll also click find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're youresults have eyeworks_color1.html open while performing this operation, the color doingNote: it andIfthe of your actions. scheme will be updated, but if you close the file without saving the changes, you'll lose them. Make sure you save your changes when you close any open files . Tip Templates and Page Properties Once a template has been applied to a page, you can no longer edit any of the Page Properties options, with the exception of the page title. Therefore, the only way to change the color scheme is by opening and editing the template itself, as you just did in this exercise. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination of visual layout tools, application development features, and code 9. its Open eyeworks_color_02.html, eyeworks_color_03.html, and editing support, Dreamweaver MX 2004 is sure to become the constant companion many Web eyeworks_color_04.html, and you will see that each now has the new color of scheme. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic Imagine from onehow of the master atsave Linda.com training. Using a combination much timeteachers this could you if you had hundreds or thousandsofofprojectpages that basedwere lessons, guided exercises, and QuickTime tutorials, veteran author created using a template and shared the same color scheme . Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing sites, and among you pages. You'll learn about frames forms,Incascading 10. CloseWeb all the files. In linking this exercise, worked with a template that Iand created. the next style exercise, sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best you will learn how to make a template from scratch. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: cross-browser validation, improved CSS support, built-in graphics Working withdynamic templates is an excellent technique to ensure design consistency. The only editing, and more. Throughout, Garo shows you not just how to do something butdo why you're caveat is that you must work from a template file to begin with. How do you that? Check doingout it and the results of your actions. the next exercise to find out. 2 Creating a New Template In this next exercise, you are going to create a new template from an existing document. The objective is to make parts of your template editable and other parts non-editable. Making part of the template non-editable allows part of the template to be locked so no one can alter it, which • Table of Contents is a good thing when teams of people or clients are working on a site. The portions of the • Index template that you define to be editable can be easily updated. Once you have this skill under • Examples your belt, you will understand the capabilities and limitations of templates much more clearly. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open sunglasses_01.html from the chap_17 folder. This document was created for you, but the following steps would also work on a document of your own creation. Once you have created the basic layout of your document, the next step is to save it as a template. 2. ChooseFile > Save As Template. 3. 3. When the Save As Template dialog box opens, the file name sunglasses_01 should appear. Dreamweaver MX 2004 will automatically enter the name of the HTML file in the Save As field. You can see that the other template that you worked with in Exercise 1, eyeworks_color, is already listed in this box. Make sure the file is named sunglasses_01 and click Save. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press 4. A dialog box will appear asking you to Update Links. This is irrelevant at this point Pub Date: December 22, 2003 becausethis template file does not link to any pages. Click Yes to close the dialog box. ISBN: 0-321-20297-X Pages: 720 Your new template appears in the Templates category of the Assets panel. The top portion of the Assets panel displays a preview of the template . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Now that you have created your template, you need to decide which areas you want to be able to modify and which areas you want to lock. By default, the entire document is designated as non-editable. This means that if you were to close the file now, it would be impossible for anyone to modify it later. I walk you through the process of making editable regions in the next couple of steps. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 5. Click cell of the nested table in the center Using of theadocument. Choose Insert > topic from inside one of the the top master teachers at Linda.com training. combination of projectTemplate Objects > Editable Region to designate this area as an editable region soyou that based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you or other members of your design team can place photos of the various sunglasses through all the Dreamweaver MX 04 basics: navigating the new interface, creating and here. Web sites, and linking among pages. You'll learn about frames and forms, cascading managing style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. When the New Editable Region dialog box appears, enter sunglasses_photo and click OK. Notice that the name you entered appears in that cell and as a label, surrounded by a highlighted box. This indicates that this area of the template is editable–you or other members of your team can enter information inside this cell. By naming this region sunglasses_photo, you can help others know what type of content should be entered there. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination of of visual layout tools, application features, and code 7. its Click inside the bottom cell the nested table in the centerdevelopment of the document. Choose editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Insert > Template Objects > Editable Region. When the New Editable Region dialog developers. Here to get you hands-on with it fast is the definitive project-based training on the box appears, type sunglasses_info and click OK. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, andtemplate linking among pages. learn frames and forms, This is what your should lookYou'll like at thisabout point. Notice that the cascading two style editable sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about regions are aligned differently. You will learn how to adjust that laterbest in layoutthis andchapter. typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 8. Now that have the necessary areas as editable, go ahead and close this managing Webyou sites, anddesignated linking among pages. You'll learn about frames and forms, cascading When sure integration, that you save your changes. style file. sheets, andprompted, Fireworksmake and Flash and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Congratulations–you have just created a customimproved template! Next, you will creategraphics a new page newest features: dynamic cross-browser validation, CSS support, built-in based yourThroughout, newly created template. editing, andon more. Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 9. For this step, there are different instructions Mac and users;companion please choose the Web editing support, Dreamweaver MX 2004 is sure to for become the PC constant of many appropriate one: developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through allPC theUsers: Dreamweaver MX 04 basics: navigating the new creating Choose File > New from Template. This interface, will open the New and from managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Template dialog box. Click the Templates tab to select it. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout andMac typography practices. You'll also find of all of Dreamweaver's Users: Choose File > New. This extensive will open coverage the New Document window. Choose newest features: dynamic cross-browser validation, improved CSS support, built-in graphics theTemplate tab at the top. Choose Site "Chapter 17" to view the templates that editing, and more. Throughout, Garo shows you not just how to do something but why you're have been created for this site. doing it and the results of your in actions. 10. Highlight sunglasses_01 the list and click Create. This creates a new document based on the sunglasses_01 template. 10. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 11. ChooseFile > Save As and save the file asgo.html inside the chap_17 folder. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you This is what the page looks like with a template applied to it. The highlighted through all the Dreamweaver MX 04 basics: navigating the new interface, creating and areas are non-editable. The two areas you designated as editable are labeled and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading are ready to be edited . style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Tip I Don't See Any Highlighting! • • • If you don't see any highlighting on your screen, make sure that you have the View > Visual Aids > Invisible Elements option enabled. If you disable this feature, Table of Contents you will not see any highlighting. You can choose View > Visual Aids > Invisible Index Elements to disable/enable this feature. Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Tip Publisher: Peachpit Press Pub Date: December 22, 2003 Highlighting Preferences ISBN: 0-321-20297-X You can Pages: 720 modify your document's highlighting colors in Dreamweaver's Preferences dialog box. By choosing Edit > Preferences and then selecting Highlighting underCategory, you can set the highlighting colors to any color you want. 12. Highlight the text "sunglasses_photo" in the top cell and then press Delete. Click the Insert Image object in the Insert panel. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the This is what the page looks like with the Go sunglasses photo inserted . topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 13. Browse to the images folder inside thechap_17 folder to locate go.jpg. Click Open (Windows) or Choose (Mac) to insert the image into this editable region. 14. Highlight the text "sunglasses_info," press Delete, and type 14. Go These groovy shades are great for the gal or guy who loves to make a statement. Not only are they stylin' to the max, they're also lightweight and provide 100% uv protection. • Our Go sunglasses come in a variety of color combinations that will suit your every mood. Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 15. Save and keep this file open. You'll be using it in the next exercise. Tip Detaching a Template You are not going to do this now, but it's good to know for future reference. There may come a time when you want to modify sections of a page that has a template applied to it. Because some areas are locked, you can't modify them with the template still applied to the page. By choosing Modify > Templates > Detach from Template, you can detach the template from the page and make the entire document editable. 3 Modifying a Template Now that that you have created your first template, you are ready to learn how to update it. In this exercise, you will change the alignment of the text in your layout, causing the text to move to the center. Then all you have to do is sit back and watch Dreamweaver MX 2004 update all • Contents the pages in Table your of site that use this template! • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Make sure that go.html from the previous exercise is open. Before you can modify a template, you must open it from the Assets panel. Double-click the sunglasses_01 template in the Assets panel to open that template. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 2. The actual template file opens for you to edit. Click inside the sunglasses_info editable editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web region. developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. In the Properties inspector, click the Align Center button, changing the text alignment fromLeft to Center. This moves the text to the center of the cell. 3. Formatting Table Regions A great way to leverage the power of Dreamweaver MX 2004 templates is to format your editable regions. For example, you can set the editable region so that text entered will automatically be formatted using a specific font such as • Table of Contents Verdana, a size such as 2, and cell alignment such as top or right. You can apply • Index a color to specified tables and cells. Best of all, you can also apply styles from • Examples an attached style sheet and employ a number of attributes and controls. Macromedia® Dreamweaver® MX 2004: Hands-On Training Information on Cascading Style Sheets is found in Chapter 9. ByGaro Green, Lynda Weinman 4. Close this template file. When prompted, make sure that you save your changes. A dialog Publisher: Peachpit Press box appears, asking if you wish to update the files in your site that use this template. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble upFiles Garo's suggestions about best 5. Click Yes. If you are presented with theUpdate Template dialog box, click Update. layoutAny andfiles typography practices. You'll also find extensive coverage of all of Dreamweaver's using this template (in this case, the go.html file) will be updated, and a dialog newest features: dynamic cross-browser validation, improved CSS support, built-in graphics box will list which files were updated. Click Close. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. This is what go.html looks like with the revised template applied to it. Note the centering of the text in the sunglasses_info region? • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the Templates used in teachers this fashion are helpfultraining. only if the pages share the same layout topic Note: from one of the master at Linda.com Using a combination of projectand the same editable region names. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 6. Save close all open MX files04 and movenavigating on to the next exercise. through all and the Dreamweaver basics: the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Warning doing it and the results of your actions. Template Beware! Once you have applied a template to a page, you can no longer edit any information in the<head> tag. This means you can't add any JavaScript, styles, behaviors, or anything else that would be contained within a <head> tag. If you do need to add this type of code to a page that is based on a template, you need to break the template by choosingModify > Templates > Detach from Template. This removes the page's link to the original template and allows you to edit anything within the <head> element. The downside to this, of course, is that if you make changes to the template, this unlinked copy will not be able to refer to it. 4 Library Items in Action Library items and templates are somewhat similar in function. Both are used to apply changes to multiple pages with ease. The difference is that templates affect the entire page design, whereas Library items are used for individual page elements. You will start by working with an existing • of quickly Contents see how helpful these Library things are and how much time they can Library item.Table You'll • Index save you! • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1. Open library_01.html from the chap_17 folder. At the bottom of this page, you will see a copyright notice that is highlighted in yellow. The yellow highlight is an indication that this text is a Library item. You can change the highlight color in the Preferences. 2. To modify the Library item, you need to open the Assets panel. Choose Window > Assets if it's not already open and then click Library. You will see that one Library item already exists. This is what you will modify. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 3. Highlight the copyright Library item and click the Edit icon at the bottom of the panel. ISBN: 0-321-20297-X Pages: 720 Just as with template, it's easy to tell when you are editing Library items. The title bar displays <<Library Item>> and the file name. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Highlight the text "2003" and type 2004. Can you believe yet another year has gone by? Sheesh. 5. Close this file. If you are prompted, make sure to save your changes. 5. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 6. When you are asked to update the pages in your site that use this Library item, click Yes. If you see the Update Library Items dialog box, click Update. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 7. TheUpdate Pages dialog box appears. Just as with templates, this dialog box gives you all the details of how many and which files were updated in your site. Click Close when you are finished reviewing this screen. This is what your page should look like with the updated Library item. Can you imagine how long it would take to update this text on a hundred pages? Library items can offer incredible time savings . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 8. Save your changes and close this file. You will not need it for the next exercise. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5 Creating a Library Item Now that you understand how efficient Library items can be, it's time to create your own. In this exercise, you will create a text navigation bar. You will then apply it to several pages by simply dragging it onto a page. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 1. Open library_02.html. This is a just a simple file with text navigation already created. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 2. TheAssets panel should be open, and the Library category should be selected. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. In the library_02.html file, highlight all of the text. In the Library category of the Assets panel, click New Library Item. Your new Library item instantly appears in the category. It needs a name, so type text_nav. 4. Now that you have created your Library item, you can apply it to a page. Create a new blank document by choosing File > New > General > HTML. Save this file inside the chap_17 folder as my_page_01.html. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press 5.PubInDate: the December Assets 22, panel, 2003 highlight the text_nav and drag it onto the page. As an alternative, you can also click Insert at the bottom of the Assets panel. ISBN: 0-321-20297-X Pages: 720 Pow! The Library item is applied to the page. Notice that it did not retain the center alignment you applied when creating it. You'll fix that next . With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 6. Select all and then, in the Properties inspector, click theCenter Align button to centerediting, and more. Throughout, Garo shows you not just how to do something but why you're align both lines of text. doing it and the results of your actions. 7. Save and close the my_page_01.html page. Leave library_02.html open; you will be working with it in the next exercise. 6 Modifying a Library Item Now that you know how to create Library items, you are going to modify the one you just created and then watch Dreamweaver MX 2004 quickly update your page. Can you imagine how joyous you would be if this were a change that needed to be made over hundreds or thousands • Table of Contents of pages? • Index • Examples 1. Thelibrary_02.html file2004: should still be open from Macromedia® Dreamweaver® MX Hands-On Training the previous exercise. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, andAssets more. Throughout, Garothe shows you not just how do something buticon. why This you're 2. In the panel, highlight text_nav Library itemtoand click the Edit doingopens it andthe theLibrary results item of your actions. for editing. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 3. Highlight word andamong type Information. This will replace theand word but maintain the managing Webthe sites, and"Us" linking pages. You'll learn about frames forms, cascading link. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 4. Close this file, and when you are prompted, make sure you save and update your changes. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics If you see the Update Library Items dialog box, click Update. Close the Update Pages editing, and more. Throughout, Garo shows you not just how to do something but why you're dialog box when you are done reviewing it. doing it and the results of your actions. Check out what my_page_01.html looks like now with the new Library item applied. 5. Close all documents and save your changes. 5. You've just conquered making and modifying a Library item. It's all very simple once you know how. If you are in the mood, move on to the next chapter. If not, don't worry; it will be there tomorrow ;-) . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 18. Accessibility What Is Accessibility? • • • Table of Contents W3C Accessibility Guidelines Index Examples Accessibility Preferences Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaroAccessible Green, LyndaImages Weinman Accessible Tables Publisher: Peachpit Press Pub Date: December 22, 2003 Accessible Frames ISBN: 0-321-20297-X Accessible Pages: 720 Form Objects Accessibility remains one of the hottest buzzwords in the Web-design industry today. This is because it remains as one of the most significant issues facing Web designers in the past few years.Accessibility means making your Web pages accessible to everyone, including people with disabilities. With the passing, and more recent enforcement, of Section 508 of The Rehabilitation With its powerful combination of visual layout tools, application features, and Act, Web designers are now charged with not only making their development sites visually appealing, butcode also editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web "accessible." I must point out that this law applies mostly to federal and state agencies, schools, developers. Here vendors. to get you with it is the definitive project-based on the and government Itshands-on direct impact onfast most other sites is expected to betraining less serious. topic from one of the master teachers at Linda.com training. Using a combination of projectRegardless, I still believe every Web designer should make his or her pages as accessible as based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you possible. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. learnmake about frames and forms, cascading Making your Web sites accessible does not meanYou'll that you them accessible "only" to style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best persons with disabilities, but that you make them more accessible to "all" people who visit your layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's site, including those with disabilities and those without disabilities. For example, if you newest features: dynamic cross-browser validation, improvedtoCSS support, built-in graphics implement a technique that makes your site more accessible a person with impaired vision, editing, and more. Throughout, Garo shows you not just how to do something but why and it now becomes less accessible to someone who has good vision, you have failed in you're making doing it and the results of your actions. your site accessible. Dreamweaver MX 2004 has a suite of features that aid you in creating accessible Web pages. It even has a great reporting feature that can help you identify accessibility problems in existing Web pages. In this chapter, I show you how to use the accessibility features in Dreamweaver MX 2004 to make the process of creating accessible Web pages within your grasp. W3C Accessibility Guidelines To help you create accessible Web sites, theW3C (WorldWideWebConsortium) has developed a collection of documents to help you understand accessibility and how to create documents that are accessible. Don't feel as though you have to memorize these four documents, but • of Contents familiarizing Table yourself with what's contained within each will be of great help when you have an • Index accessibility question and no one is around to ask. • Examples These four documents, Macromedia® Dreamweaver® published MX 2004:by Hands-On the W3C, Training are the de facto standard for understanding, creating, and developing accessible Web pages. Listed below are the document names, where ByGaro Green, Lynda Weinman each can be downloaded, and a brief explanation of each one: Publisher: Peachpit Press Pub Date: December 22, 2003 Web ISBN: Content Accessibility Guidelines 1.0 0-321-20297-X Pages: 720 http://www.w3.org/TR/WCAG10/ This is one of the most important documents on Web accessibility. It identifies and explains the 14 guidelines and their checkpoints, and prioritizes each. This is the place to start learning more about Web accessibility. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the Techniques Guidelines 1.0 topic from one offor the Web masterContent teachers atAccessibility Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you http://www.w3.org/TR/WCAG10-TECHS/ through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading This gives you techniques examplesand for making your Web suggestions sites accessible. Once styledocument sheets, and Fireworks and Flashand integration, gobble up Garo's about best you understand the 14 practices. guidelines You'll of Web accessibility, this coverage documentofhelps create accessible layout and typography also find extensive all ofyou Dreamweaver's pages giving you sample code and different scenarios that you encounter. might newestby features: dynamic cross-browser validation, improved CSSmight support, built-in You graphics want to print this document andGaro keep shows a copyyou nearby. editing, and more. Throughout, not just how to do something but why you're doing it and the results of your actions. CSS Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-CSS-TECHS/ This document focuses on creating accessible Web pages using CSS ( CascadingStyleSheets). You can find examples using CSS in addition to deprecated code, which illustrates something developers should not do! This is an important document and you should carefully read it. HTML Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-HTML-TECHS/ This document focuses on creating accessible Web pages using HTML ( HyperTextMarkup Language). You can probably imagine why this document is so important. ;-) Similar to the CSS Techniques document, this one also provides readers with good code examples and bad examplesthat illustrate what developers should not do. 1 Accessibility Preferences The first step is to learn how to turn on the Accessibility preferences in Dreamweaver MX 2004, which you learn about in this exercise. These options let you create accessible pages as you add content to your pages, instead of adding them when the page is finished. This proactive • Table of Contents approach saves you time and ensures that you don't forget something later. If you learn to work • Index with these options turned on, you will discover that creating accessible Web pages is no more • difficult than Examples creating non-accessible Web pages. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 1. In Dreamweaver MX 2004, choose Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) to open the Preferences dialog box. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Select the Accessibility option in the Categorysection to see what accessibility options are available in Dreamweaver MX 2004. By default, the Offscreen Rendering (need to disable when using screen readers) check box is selected. Note: The check box at the bottom of this dialog box is available to Windows users only. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination visualinlayout tools,image. application development features, andto code 3. its Check each check box, asof shown the above As you can see, you don't have editing support, Dreamweaver MX 2004 is sure to become the constant companion of many turn all the accessibility options on; you can turn on only the options you want. At any Web developers. Here toreturn get you fastuncheck is the definitive project-based on the time, you can tohands-on this dialogwith boxitand any of these options totraining turn them off. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, exercises, and QuickTime tutorials, veteran author Garo Green walks you 4. Click OK toguided close the Preferences dialog box. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading styleget sheets, and Fireworks andallFlash integration,features and gobble up following Garo's suggestions about You a chance to work with the accessibility in the exercises, so keepbest layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's reading! newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. IBM Home Page Reader • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets,this andchapter, Fireworks andread Flashabout integration, andcalled gobble Garo's suggestions about Throughout you'll something a up screen reader. This refers to best all layout and typography You'll collectively. also find extensive of all of screen-reader Dreamweaver's screen-reading softwarepractices. and hardware One of coverage the most popular newest features: dynamic cross-browser improved CSS and support, built-in graphics programs is IBM Home Page Reader 3.0. validation, This program helps blind visually impaired users editing, Throughout, Garo shows notaloud. just how to do something but why you're surf the and Webmore. by reading the contents of Webyou pages doing it and the results of your actions. I suggest that you download and install a trial version of the Home Page Reader, close your eyes, and experience firsthand what it is like surfing the Web as a person who is blind or visually impaired. You'll be amazed at how much you take your ability to see for granted. Hopefully, this experience further convinces you that making accessible Web pages is the right thing to do! ;-) You can download a trial version of IBM Home Page Reader at http://www3.ibm.com/able/solution_offerings/hpr.html. Currently, only a Windows version is available. 2 Inserting Accessible Images Millions of people in the world have some type of visual impairment, such as color blindness and partial and/or total blindness. Because the Web is a visual-centric environment, making the images on your pages accessible should be a priority for every Web designer. In this exercise, • Table of Contents you learn how to add alternate text (alt attribute) and a long description for images on a Web • Index page. The alt attribute is important because its information is read aloud by a screen reader. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Copychap_18 from the H·O·T CD-ROM to your hard drive. Define your site for Chapter 18 using the chap_18 folder as the local root folder. If you need a refresher on this process, visit Exercise 1 in Chapter 3,"Site Control." ByGaro Green, Lynda Weinman Publisher: Peachpit Press Date:images.html December 22, 2003 2.PubOpen from the chap_18 folder. Right now, this is just a blank page, but it ISBN: be 0-321-20297-X won't for long. ;-) Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Make sure the Assets panel is open. If it's not, selectWindow > Assets (F11). 4. From the Assets panel, click and drag the sunglasses.jpg image onto the page. When 4. you release the mouse button, the Image Tag Accessibility Attributes dialog box appears. This is a direct result of turning the accessibility options on. Warning • • Table of Contents Accessibility and the Files Panel Index Throughout Examples this book, I have instructed you to drag images from the Files and Assets panels onto ThisTraining technique ensures that your images are always Macromedia® Dreamweaver® MXyour 2004:page. Hands-On selected from within the current local root folder, which in turn ensures that the ByGaro Green, Lynda Weinman path to the image is correct. Unfortunately, this workflow is best suited to take advantage of Dreamweaver MX 2004 the application, but is counter-productive to Publisher: Peachpitaccessible Press making Web sites. The problem is that if you drag an image from the Pub Date: December 22, 2003 Files or Assets panel onto your page, you are not prompted for the accessibility ISBN: 0-321-20297-X options, even if they have been turned on. This is one of those "gotchas" that you need Pages: 720 to be aware of when you create accessible, conscientious Web pages. • With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 5. In the Alternate Text text enter the words image ofinterface, sunglasses. This and creates an through all the Dreamweaver MXfield, 04 basics: navigating the new creating alt tag for this image with whatever text is entered in this text field. You want make managing Web sites, and linking among pages. You'll learn about frames and forms, to cascading sure that whatever text you enter here describes the image. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're altthe attribute doingThe it and results helps of yourvisually actions.impaired people because that text is read aloud by the screen-reader programs. Additionally, in some browsers, the text appears in a smallhelp tag (tooltip) when the mouse hovers over the image . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, CSStext support, built-in to graphics 6. Click the small folder to the right of the Long improved Description field. Browse the editing, and more. Throughout, Garo shows you not just how to do something but why you're chap_18 folder and select sunglasses_longdesc.html and click OK. Click OK again to doingclose it and the results of your actions. the Image Tag Accessibility Attributes dialog box. Note The longdesc Attribute Adding the alt attribute to all the images on your pages is a big part of making accessible Web pages. However, times might arise when you want to offer a more verbose explanation of an image. In these cases, you should use the longdesc attribute as well. The longdesc attribute lets you link to a text file that contains a longer description of the image. The link is no different than any other link, except it won't appear to people who aren't using a screen reader. If an image has a longdesc attribute applied, and a screen-reader program encounters the image on the page, it is read as a link so a person with a visual impairment knows that particular image contains a longer description. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 7. Click the Show Code View button. This changes your document view so you can see the With its code powerful being used combination to construct of visual your layout page. Notice tools, application the alt anddevelopment longdesc attributes features,that andwere code editing added support, to the Dreamweaver <img> tag. Dreamweaver MX 2004 is sure MX to 2004 become added the this constant code when companion you entered of many Web developers. Here in to the get Image you hands-on with it fast isAttributes the definitive project-based training on the information Tag Accessibility dialog box. topic from one of the master teachers at Linda.com training. Using a combination of projectbasedAdding lessons, theguided altandexercises, longdescattributes and QuickTime to all tutorials, the images veteran on your author page Garo is oneGreen of thewalks easiest you through the significant Dreamweaver 04can basics: interface, creating and andall most waysMX you help navigating make your the Webnew pages accessible to everyone . managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and andpage Flash and gobble Garo's suggestions about best 8. Press F12 to Fireworks preview this inintegration, a browser. Because youup aren't using a screen reader to layoutview andthis typography practices. You'llanything also findvisually extensive coverage of all ofhover Dreamweaver's page, you won't notice different unless you your mouse newest over features: the image dynamic of thecross-browser sunglasses. For validation, any image improved that contains CSS support, analt attribute, built-in graphics that text editing, and more. Throughout, Garo shows notwhen just how to do something but why you're appears as a tooltip (a small yellow textyou box) the mouse hovers over that image. doingNote: it andThis the results actions. by all browsers. Return to Dreamweaver MX 2004. featureof is your not supported 9. Click the Show Design View button. Save and close this file; you won't need it for the next exercise. 3 Inserting Accessible Tables According to the Web Accessibility Initiative Guidelines, you should not use tables to control the layout of your pages. Instead, you should use layers and style sheets, as I demonstrated in Chapter 9, "Cascading Style Sheets." However, this does not mean that you cannot use tables at • Table Contents all. Tables are stillofvery useful for displaying data in columns and rows. In this exercise, you • Index learn how to make a table more accessible. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Open the table.html file from the chap_18 folder. Woo-hoo–another blank page! Hey, at least I didn't make you create and save it yourself. ;-) ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Click the Insert Table button in the Common panel. This opens theTable dialog box that contains the Accessibility options at the bottom. Make sure your options match the ones shown in the above image. Note The Summary Attribute and Caption and TH Tags The Web Content Accessibility Guidelines 1.0 dictates that you should not use HTML tables for layout purposes. However, there might be times when using a table makes sense, such as displaying a spreadsheet of numerical data online. In these cases, you want to make sure you use the proper supporting table attributes so your table is accessible to those with screen-reading programs. You should know about a couple of tags and an attribute: • • • <caption>: This tag provides a brief description of a table's content. The screen-reading software reads the caption first to let the user know that he has encountered a table and what is contained inside the table. For example, Table of Contents "A list of bonsai classes" is an appropriate caption for an HTML table that Index contains information on bonsai classes. The caption appears as the first row in Examples the table and is visible on the page. Macromedia® Dreamweaver® MX 2004: Hands-On Training Summary: ByGaro Green, Lynda Weinman This attribute provides a detailed explanation of the HTML table. For example, "This table lists the available bonsai classes, instructor, classroom number, and date of class in chronological order" is a good table Publisher: Peachpit Press summary. The summary is not seen in the browser; it is read only by screenPub Date: December 22, 2003 reading programs. ISBN: 0-321-20297-X This tag identifies certains cells as header cells. This lets the user know if the information in the table is organized horizontally or vertically and what the major groups of data are. In most cases, the first row serves as the headers in a table. 3. For the Caption option, enter styles of sunglasses. The caption tag should describe the purpose of the table. Thisoftext appears intools, a rowapplication at the top of the table. features, and code With its powerful combination visual layout development editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 4. For theHere Align option, choose aligns theproject-based caption text along the on topthe developers. toCaption get you hands-on with itRight. fast isThis the definitive training right of the table. This is purely a visual preference and has no impact on the accessibility topic from one of the master teachers at Linda.com training. Using a combination of projectthe table. basedoflessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 5. For the Summary option, This tableYou'll lists learn the twelve styles and of sunglasses in managing Web sites, and linkingenter among pages. about frames forms, cascading descending alphabetical order. The summary should explain the structure of the table style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best relationship of the information in the table cells and rows. layoutand andthe typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics 6. Forand the more. Header option, choose This first rowsomething as headers forwhy the you're table editing, Throughout, GaroTop. shows youspecifies not justthe how to do but using <th> tags. Screen readers read table headers with more importance than normal doing it and the results of your actions. cells. The header typically identifies the types of data in a table. Pages: 720 <th>: 7. ClickOK. At this point, here is what the table should look like. The caption for the table has been added to the top row. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 8. its Click the Show Code View buttonlayout to view the HTML code for this page. features, Here, youand cancode see With powerful combination of visual tools, application development thesupport, various Dreamweaver tags that wereMX added this table accessible. editing 2004toismake sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 9. Click View button. Save andtraining. close this page. topic from the oneShow of the Design master teachers at Linda.com Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Inserting Accessible Frames Most accessibility experts recommend that you avoid using frames because they present problems for people using screen readers. Heck, frames have been known to cause problems for people with and without disabilities, but that's a whole separate book. ;-) Although I agree, I • Table of there Contents also recognize that might be times when you just have to use frames. This exercise shows • Index you how to add frames to a page and make them as accessible as possible by adding a title to • each frame. Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 1. Create a new blank HTML document. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. ClicktheLayout tab in the Insert panel. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3. Click the Frame button and select Bottom Frame from the Frame pop-down menu. This automatically creates a frameset with a small frame at the bottom and a large frame at the top. The Frame Tag Accessibility Attributes dialog box appears. 4. • Table of Contents • Index • Examples • Table of Contents • Index • 6. From the Examples Frame drop-down menu, select bottomFrame. This lets you specify the Title Macromedia® Dreamweaver® MX 2004: Hands-On Training from the bottomFrame (bottom) portion of this frameset. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With powerful combination of visual layout area. tools, This application development features, code 7. its In the Title text field, enter navigation adds the title attribute to theand <frame> editing support, Dreamweaver MX 2004 is sure to become the constant companion of many tag, and when a screen reader reads the page, the title is read aloud so that the personWeb developers. to gethas youa hands-on with it fast is theon definitive project-based training visitingHere the page better idea of the content the page. In this example, the on the topic bottomFrame from one of thearea master teachers at Linda.com training. Using a combination of projectis where the buttons and other navigation elements will be placed. basedClick lessons, OK. guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web and Frameset linking among pages. about frames andthe forms, cascading 8. Choose Filesites, > Save As and saveYou'll it as learn frameset.html inside chap_18 style folder. sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved graphics 9. Click inside the top frame and choose File > Save FrameCSS As support, and savebuilt-in it as top.html editing, and more. Throughout, Garo shows you not just how to do something but why you're inside the chap_18 folder. doing it and the results of your actions. 10. Click inside the bottom frame and choose File > Save Frame As and save it as bottom.html inside the chap_18 folder. 11. 11. Select the <frameset> tag in the Tag Selector. Click the Show Code View button. Notice that the title attribute has been added to the <frame> tags. Note • • Table of Contents Title Attribute versus Page Title Index TheExamples title attribute is not the same as the page title. The page title appears at the topDreamweaver® of the browser and is set using the <title> tag for each HTML page. Macromedia® MXwindow 2004: Hands-On Training Thetitle attribute is added to HTML tags to give an object a name. The title ByGaro Green, Lynda Weinman attribute is read aloud by screen readers to help visually impaired users navigate around a Web page, but it is not visible to regular browsers. Peachpit 12.Publisher: Close all openPress files; you won't be using them anymore. • Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5 Inserting Accessible Form Objects Form objects tend to be one of the most overlooked elements on an accessible Web page. For some reason, many people don't know that there are problems with forms and accessibility, as well as good ways to make form objects accessible. Fortunately, Dreamweaver MX 2004 has a • Tablehelp of Contents feature that can you make your form objects accessible, which is exactly what you learn to • Index do in this exercise. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 1. Open forms.html from the chap_18 folder. Yup, you guessed it–another blank page. Hey, I had to leave something for you to do. ;-) ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 2. Click the Forms tab in the Insert panel. This displays a collection of buttons that let you add various form objects to your page. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to Field get you hands-on it fast is the definitive project-based training onopens the 3. Click the Text button in thewith Forms panel to insert a text field on the page. This topic the from one of the master teachers at Linda.com training. Using a combination of projectInput Tag Accessibility Attributes dialog box. This occurs because you selected this basedoption lessons, guided exercises, preferences and QuickTime tutorials,1.veteran author Garo Green walks you in the Accessibility in Exercise through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Input Tag Accessibility Attributes • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 The chart below outlines the various options available in the Input Tag Accessibility Attributes With powerful combination of visual layout tools, application development features, and code dialogitsbox. editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectInput Tag Accessibility Attributes based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through 04 basics: navigating the new interface, creating and Option all the Dreamweaver MXDescription managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Label This text appears and next gobble to the form object. style sheets, and Fireworks and Flash integration, up Garo's suggestions about best Depending on which Position option you layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's choose, the text appears before or support, after the built-in graphics newest features: dynamic cross-browser validation, improved CSS form object. editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it Wrap and the results of your This option places a <label> tag around the Style: with Label Tag actions. form object. Style: Attach Label Tag Using 'for' Attribute This option uses the for attribute to place a <label> tag around the form object. This causes a focus rectangle to appear around the form object and label. This is the recommended choice for accessibility. Note: Behavior varies between browsers. Style: No Label Tag This option does not add a <label> tag around the form object. Position: Before Form Item This radio button places the label text before the form object. Position: After Form Item This radio button places the label text after the form object. Access Key Windows only–whatever key you enter here + the Ctrl key can be used to select this object in the browser window. Tab Index This option sets the tab order of the form object. This helps you specify how the form is navigated by someone using the Tab key to move from one form object to the next. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. tooption, get youenter hands-on with it fast the appears definitive on the 4. For theHere Label First Name. Thisistext onproject-based the Web pagetraining as normal text topic and fromlets onethe of the master teachers at Linda.com training. Using a combination of projectuser know what information should be entered into this text field. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all sure the Dreamweaver MX 04 basics: new interface, creating and 5. Make the Style: Attach label tabnavigating using 'for'the attribute radio button is selected. This managing Web sites, and linking among pages. You'll learn about frames and forms, cascading causes a focus rectangle to appear around the form object and the label, which lets the style user sheets, andthe Fireworks and Flash integration, andwithin gobblethe up focus Garo's suggestions about best select form object by clicking anywhere rectangle. layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved support,This built-in graphics 6. Make sure the Position: Before form item radio button CSS is selected. places the label editing, and more. Throughout, Garo shows you not just how to do something but why text before the form object. You probably already guessed that, huh? ;-) Click OK.you're doing it and the results of your actions. 7. ClickYes when you are prompted to Add form tag? The form object won't work properly unless it's enclosed within the <form> tag. I discuss forms in greater detail in Chapter 13, "Forms." This is what the text field looks like on the page. How about that for excitement? ;-) • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 8. Click the Show Code View button. This code was added to the form object to make it more accessible. Isn't it nice that you don't have to manually enter all that code? Now, instead of just normal text in front of an element, the <label> tag allows that text to identify with a specific form element within screen readers. It won't appear any different to other users, but it will be more accessible to those with disabilities. Phew! Note Accessibility Testing This chapter showed you how to create accessible Web pages as you created the pages. What can you do if you already have a completed Web site and you want to make sure it's accessible? There is good news, folks! Dreamweaver MX 2004 has a feature that analyzes your Web pages and reports back any accessibility errors it finds. Simply choose File > Check Page > Check Accessibility, and Dreamweaver MX 2004 analyzes the page you have open and provides you with a list of errors. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman The Results panel provides reports on the Web pages in your site, including the Check Accessibility report. If you right-click one of the entries and choose More Pub Date: December 22, 2003 Info, you can access the UsableNet Accessibility Reference Guide to get more ISBN: 0-321-20297-X information. Publisher: Peachpit Press Pages: 720 The UsableNet Accessibility Reference Guide helps you make sense of the accessibility errors in the Results panel. This fantastic resource is built right into Dreamweaver MX 2004. Sweet! With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 9. If you want, try adding other form objects to your page. There's no harm in experimenting with these settings, and practice will definitely make you feel more comfortable. 10. 9. 10. Save and close this page. Wow, another chapter under your belt–congratulations. If you have the energy, turn the page and move on to the next chapter. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Chapter 19. Inserting Media Objects Linking to Sounds • • • Table of Contents Embedding Sounds Index Examples Inserting Flash Content Macromedia® Dreamweaver® MX 2004: Hands-On Training Director (Shockwave) ByGaroInserting Green, Lynda Weinman Content Inserting QuickTime Content Publisher: Peachpit Press Pub Date: December 22, 2003 the book! There's still another important Dreamweaver MX 2004 Hey, you're almost through 0-321-20297-X featureISBN: to learn about–how to work with media objects. What are media objects, you might ask? MediaPages: objects 720are items that you add to your pages that typically require a plug-in to play back properly in a browser, such as Flash movies or objects, QuickTime or Shockwave movies, Java applets, ActiveX controls, or other audio or video objects. Plug-ins are special-program extensions installed in your end user's browser that allow the user to view plug-in-based content, such as Flash, Shockwave, Real Audio, QuickTime, and so on. With its powerful combination of visual layout tools, application development features, and code It's good to understand how to work with media objects and their associated plug-ins in editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Dreamweaver MX 2004 because you might want to publish multimedia effects to your page that developers. Here to get you hands-on with it fast is the definitive project-based training on the require plug-ins, such as sound, Flash content, Director (Shockwave) content, or QuickTime topic from one of the master teachers at Linda.com training. Using a combination of projectcontent. In this chapter, you learn how to add this type of content in Dreamweaver MX 2004 based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through various media objects, and you learn how to set parameters in the Properties inspector through all the Dreamweaver MX 04 basics: navigating the new interface, creating and to control how and when your media objects play. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, andalso Flash gobble up Garo's suggestions about As exciting asand thisFireworks sounds, it's theintegration, area of Weband development where compatibility issuesbest layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's between browsers really get intense. Not everyone has the same plug-ins loaded to support newest features: validation, improved CSS support, playback of mediadynamic objects,cross-browser and some plug-ins work differently on Macs than built-in they dographics in Windows. editing, and more. Throughout, Garo shows you not just how to do something why Dreamweaver MX 2004 does a great job of letting you put this content on yourbut site. It'syou're the rest doing and the results of your actions. of the it Web's limitations that you'll likely have to struggle with! Note What Is a Plug-In? In the early days of the Web, any file that wasn't an HTML file had to be downloaded and required a separate "player" for the content to be seen. This was a hassle for most Web users because it meant that you had to break the flow of a good "surf" to view material in an external application. In response to this problem, Netscape introduced the idea of plug-ins, which extended the capability of HTML pages to display content that wasn't HTML-based. Today, a variety of plug-ins is pre-installed in most browsers, including QuickTime, Flash, and RealPlayer. This chapter focuses on techniques to insert plug-in–based content into HTML pages so it can be viewed as an "inline" element, without requiring the use of an outside-player application. Plug-Ins Require Viewer Participation As you work through these exercises, you might find yourself being directed to download plugins from the Internet or reassign them in your browser preferences. If this seems like a hassle, remember that you ask your audience to do the same thing when you present plug-in–based • Table of Contents content to them! • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training URLs for Downloading Plug-Ins ByGaro Green, Lynda Weinman Plug-Ins Publisher: Peachpit QuickTime Press URL http://www.apple.com/quicktime/download/ Pub Date: December 22, 2003 FlashISBN: 0-321-20297-X http://www.macromedia.com/software/flashplayer/ Pages: 720 Shockwave http://www.macromedia.com/software/shockwaveplayer/ Acrobat Reader http://www.adobe.com/products/acrobat/readermain.html Real Player http://www.real.com/realone/index.html? src=player_redct With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 1 Linking to Sounds You can add sound to your page in multiple ways. In this first exercise, you learn to add sound to your page simply by creating a link to a sound file. As you will see, you must consider some nuances when you work with sound files. For example, no standard format for sounds exists on • Table are of Contents the Web. Sounds handled differently between browsers and operating systems (as if • Index designing Web pages wasn't difficult enough). Fortunately, by the time you finish the hands-on • Examples exercises in this chapter, you'll have a better understanding of how to add sound to your site. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman 1. Define your site for Chapter 19. Copy the contents of chap_19 from the H·O·T CD-ROM to your hard drive and press F5 to define it. For a refresher on this process, revisit Exercise 1 Publisher: Peachpit Press Control". inChapter 3,"Site Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. Open sounds.html. You see two links at the top of the page. These two links point directly totwo different sound files. The first link points to a WAV file, and the second link points to an AIF file. 3. Click the .wav link at the top of the page. In the Properties inspector, notice that this links to the tell-me-about.wav file. That's all there is to it. When the user clicks this link in a Web browser, the sound plays. You need to preview this file in a browser to play the sound. 4. Click the .aif link. This link points to the sound.aif file. Nothing too complicated about this so far. You are simply creating a link, but instead of pointing to an HTML document, you • of Contents point toTable a sound file. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training the page is previewed ByGaroWhen Green, Lynda Weinman in Internet Explorer 6.02 on the PC, clicking the .wav link opens the Media Bar Settings dialog box . In the Windows version of Internet Explorer 6.02, you have the option of playing the sound through the Media Player Publisher: Peachpit Press in Internet Explorer by clicking Yes, or saving the sound file to your hard drive by Pub Date: December 22, 2003 clicking No. As you will see shortly, clicking the .aif link does not have the same ISBN: 0-321-20297-X effect. Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're can see .wav file being played back through Internet Explorer 6.02 doingHere, it andyou the results ofthe your actions. on the PC. You can close the Media Bar in Internet Explorer by clicking the small black X in the upper-right corner of the Media window . • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code Tip editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Different Here to Sound get youPlayers hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectBoth Netscape Navigatorand andQuickTime Internet Explorer you choose what application or you based lessons, guided exercises, tutorials,letveteran author Garo Green walks plug-in plays the audio you findnavigating on Web pages. In interface, fact, you can set a and different through all the Dreamweaver MXfiles 04 basics: the new creating forsites, eachand typelinking of audio format. For example, you might choose to forms, have the managingone Web among pages. You'll learn about frames and cascading QuickTime plug-in and playFlash AIF and WAV filesand andgobble have the play SWF style sheets, and Fireworks integration, up Flash Garo'splug-in suggestions about best files. You can control thisYou'll by modifying browser preferences. these layout and typography practices. also find your extensive coverage of all ofCheck Dreamweaver's settings dynamic if you experience any problems while trying to play sound files. Forgraphics newest features: cross-browser validation, improved CSS support, built-in instructions on how to change theseyou settings, see your Helpbut feature. editing, and more. Throughout, Garo shows not just how to browser's do something why you're doing it and the results of your actions. Clicking the .aif link launches the QuickTime plug-in if you have QuickTime Player installed. Note:This works identically on the M ac and Windows operating systems . 5. PressF12 to preview this page in a browser. Click each of the links. Clicking the .wav link playsthe sound of a man saying, "Tell me about your childhood." Clicking the .aif link plays 5. a beeping sound. You have to use the Back button in the browser after clicking the first link. Depending on how your browser preferences are set up and what operating system you use, clicking the links might launch different audio players–or none at all! • • • Clicking the links in Netscape Navigator 7 on the PC is similar, but not identical, to Internet Explorer 6.02. This inconsistent behavior is just one of the problems with Table of Contents playingIndex audio files in a Web browser. It has nothing to do with Dreamweaver MX 2004, but everything to do with incompatibilities between browsers, file formats, Examples and platforms. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Return to Dreamweaver MX 2004 and close the file. Different Sound Formats One of the problems in adding sound to your Web page is deciding which format to use. Most Web publishers use either AIF or WAV files–the two native sound formats for the Mac and Windows operating systems. It is a good idea, however, to be familiar with the other formats • Table of into Contents that you might run on the Web. The chart below gives you an idea of what's out there. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Sound Formats ByGaro Green, Lynda Weinman Extension Publisher: Peachpit .au Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 .aiff/.aif Description This format was one of the first introduced on the Internet. It was designed for NeXT and Sun Unix systems. The .aif (AudioInterchangeFormat) was developed by Apple and is used on SGI machines. It is the main audio format for Macintosh computers. With .midi/.mid its powerful combination of The visual .midi layout (Musical tools,Instrument applicationDigital development features, and code editing support, Dreamweaver MX Interface) 2004 is sure format to become was designed the constant to translate companion of many Web developers. Here to get you hands-on how music with itisfast produced. is the definitive MIDI files project-based store just training on the topic from one of the master teachers the sequencing at Linda.com information training. (notes, Using a timing, combination of projectbased lessons, guided exercises, and voicing) QuickTime required tutorials, to play veteran backauthor a musical Garo Green walks you through all the Dreamweaver MXcomposition, 04 basics: navigating rather than thea new recording interface, of the creating and managing Web sites, and linking composition among pages. itself, You'll solearn theseabout files are frames usually and forms, cascading style sheets, and Fireworks and Flash small,integration, but playback andquality gobbleisup unpredictable. Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's .MP3 features: dynamic cross-browser The .MP3validation, (MPEG-1 improved Audio Layer-3) format is newest CSS support, built-in graphics the hottest audio file format on the Web. It but why you're editing, and more. Throughout, Garo shows you not just how to do something offers superior compression and great doing it and the results of your actions. quality. This file format is widely used in Macromedia Flash content. .ra/.ram The .ra (Real Audio) format was designed to offer streaming audio on the Internet. .rmf The .rmf (RichMusicFormat) was designed by Headspace and is used in the Beatnik plug-in. This format offers good compression and quality. .swa The .swa (ShockwaveAudio) format was developed by Macromedia and is used in Flash. .wav This format was developed by IBM and Microsoft. This is the main audio format for the Windows operating system, but WAV files play on Macs and other systems. 2 Embedding Sounds In addition to linking to a sound file, there is another approach to adding sound to your Web pages. You ca embed the sound so that it plays from your page, instead of linking to it (as shown in the last exercise). Th approach is good if you just want to play–not download–sounds within the Web browser. Embedding sound • Table of Contents gives you more control over them because they actually appear inside your HTML files, along with the othe • Index content. By modifying specific parameters, you can control when the sound plays and how it appears on th • Examples page, whether it loops (continuously plays) or not, and several other settings. So if you embed your sound Macromedia® Dreamweaver® 2004: Hands-On you get more control, andMX hey, that's what Training most people want in life, right? ByGaro Green, Lynda Weinman 1. Open embed.html inside the chap_19 folder. This is simply a blank file that I created. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 2. From Web the Insert Menu, select Media. Then, select Plugin in frames theMedia menu. Browse to the managing sites, and linking among pages. You'll learn about andpop-out forms, cascading folder and highlight sound.aif. Click This up inserts a small plug-inabout icon on your page. style chap_19 sheets, and Fireworks and Flash integration, andOK. gobble Garo's suggestions best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's In features: this example, it doesn't matter where the sound file is physically placed on the page. If you had a newest dynamic cross-browser validation, improved CSS support, built-in graphics page where you wanted theGaro sound controllers Rewindbut buttons) to appear, you editing, and more. Throughout, shows you not(the justPlay, how Stop, to do and something why you're position this actions. element like any other image or text component . doingwould it andsimply the results of your 3. With the sound still selected, click the Parameters button in the Properties inspector.This opens th Parameters dialog box, which is where you would insert any parameters and values you needed. I've listed some URLs at the end of this exercise that give you more information about parameters and values; there are too many to list in this book. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training 4. Under Parameter in the Parameters dialog box, typeautoplay, then pressTab. Type false, and then the sound file from playing automatically and causes it to wait until the user clicks the Play button. This is a useful parameter! ;-) ByGaroclick Green , Lynda OK. ThisWeinman prevents Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. PressF12 to preview your page in a browser. Click the Play button to hear the sound. Here, you can see that QuickTime is being used to play AIF files in Netscape Navigator 7 for the PC. Note: If you ge broken image icon, you might have to download the plug-in from http://www.apple.com/quicktime. 6. Return to Dreamweaver MX 2004 to save and close the file. Note What Is a Parameter? Most plug-in content is controlled by various parameters (sometimes referred to as attributes), which are different for each kind of plug-in. A parameter is an option passed to the plug-in that tells it how to behave. In Exercise 2, you learned how to set the autoplay parameter to off. That parameter is part of the QuickTime specification. • • • This chapter covers sound, Flash, Shockwave, and QuickTime, but many other types of plug-ins are on the Web. To learn what all the parameters are for a plug-in, it's best to visit the site from which the plug-in be downloaded. Here's a list of sites with more information on plug-in parameters Tablecan of Contents from a variety of vendors: Index Examples LiveAudio Plug-In Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman http://devedge.netscape.com/library/manuals/2000/javascript/1.3/guide/liveaud.html Apple's QuickTime Plug-In Publisher: Peachpit Press Pub Date: December 22, 2003 http://www.apple.com/quicktime/download/ ISBN: 0-321-20297-X Pages: 720 Macromedia's Flash Plug-In http://www.macromedia.com/shockwave/download/download.cgi? P1_Prod_Version=ShockwaveFlash Macromedia's Shockwave Plug-In With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web http://sdc.shockwave.com/shockwave/download/download.cgi?&P5_Language=English developers. Here to get you hands-on with it fast is the definitive project-based training on the topicNetscape's from one of Plug-In the master teachers at Linda.com training. Using a combination of projectRegistry based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and http://wp.netscape.com/plugins/ managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 3 Inserting Flash Content Because both Dreamweaver MX 2004 and Flash MX are Macromedia products, it is not surprising that Dreamweaver MX 2004's support for Flash MX is superb. Instead of the generic Insert plugin object that you used in the last exercise, Dreamweaver MX 2004 has a Flash object all its own. • Table of Contents • Index new document and save it as flash.html inside the chap_19 folder. • 1. Create a Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. From the Insert menu, select Media > Flash from the pop-out menu, and browse to insert splash.swf. Click OK. (This Flash piece was donated courtesy of Greg Penny of Flower Records [http://www.flowerrecords.com and was designed by Richard Joffray [http://www.joffray.com].) 3. Notice that the Properties inspector has aPlay button. You should be able to play the content in Dreamweaver MX 2004, unlike DHTML or generic plug-in content. Press F12 to view the content in your browser to check it again. It's that simple. 4. 4. Return to Dreamweaver MX 2004. Because Flash is vector-based, it can scale. Change both theW and H properties to 100%, and press F12. Now, change the size of your browser. The content your browser scales, too! This happens only if you set the width and height • Table in of Contents information to percentages. • Index • Examples 5. Save and close the file. Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman The next exercise explains how to embed Shockwave content . Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Inserting Director (Shockwave) Content Now, you get a chance to work with some Director (Shockwave) content. Again, because this is a Macromedia product, you have the advantage of using an Insert Shockwave object instead of the generic Plugin object. • Table of Contents • Index new document and save it as director.html inside the chap_19 folder. • 1. Create a Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. From the Insert menu, select Media, select Shockwave from the pop-out menu, and browse to leroy.dcr. Click OK. 3. Notice that the Properties inspector has W 32 and H 32 as the dimensions. You'll see these default dimensions for Director or QuickTime content because Dreamweaver MX 2004 can't automatically detect the size of these two formats. You must type the correct dimensions to get this object to work. 4. 4. Enter the values W 640 and H 480, and press F12 to preview the content. How did I know that the width and height of the piece were 640 x 480? Because Bruce, Lynda's husband, createdTable it! Sadly, you must know the dimensions of the Shockwave piece before you enter • of Contents the values because Dreamweaver MX 2004 doesn't detect them for you. • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Try to pull Leroy's eyeglasses off. Lots of parts come off, so keep pulling things. ;-) 6. Return to Dreamweaver MX 2004. Save and close the file. Note What Is Shockwave? Shockwave is a plug-in that allows a Web audience to view Macromedia Director content online. The plug-in is over 1MB in size, whereas the Flash plug-in is under 200K. Macromedia Director, like Flash, is an authoring tool that supports better animation, sound, and interactivity than HTML pages. The differences between Flash and Director relate to how the authoring tool is structured, how the interactivity is programmed, and how images are formatted for the Web. Flash is installed in more browsers than Shockwave, and many more people know and use the Flash authoring tool. Director is by far a more powerful authoring tool with more sophisticated programming capabilities, but because of the larger download and smaller amount of Director content on the Web, it doesn't have the installed user base of Flash. For more information about the two, visit http://www.macromedia.com to read the specifications and features. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is QuickTime? QuickTime is both a file format and a plug-in that includes sound and movies. It is one of the most versatile file plug-ins on the Web because it plays all the formats listed in the chart below. • Table of Contents • Index • Examples What QuickTime Supports 3dMF Sequence Macromedia® Dreamweaver®Image MX 2004: Hands-Onmovie Training PLS exporters ByGaro Green, Lynda Weinman AIFF JPEG/JFIF PNG Karaoke QuickTime image MacPaint QuickTime movie Macromedia Flash SGI Cubic VR MIDI System 7 DLS MPEG1 Sound Publisher: Peachpit Press AU Pub Date: December 22, 2003 AVI BMP ISBN: 0-321-20297-X Pages: 720 DV Stream MP3 of visual layout tools, application Targa With its powerful combination development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Flash PIX Photoshop Text developers. Here to get you hands-on with it fast is the definitive project-based training on the topic Using a combination of projectFLC from one of the master PICTteachers at Linda.com training. TIFF based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you GIF Picture WAV through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5 Inserting a QuickTime Movie QuickTime content is inserted in Dreamweaver MX 2004 using the Plugin object. This exercise shows you how to embed the content and preview the results. • Table of Contents new document and save it as quicktime.html inside the chap_19 folder. • 1. Create a Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. From the Insert menu, select Media, select Plugin from the pop-out menu, and browse to the file LAeyeworks.mov. Click OK. 3. Change the width and height information in the Properties inspector to W 480,H 380. Note: Dreamweaver MX 2004 can detect the dimensions of a Flash movie but not the dimensions of QuickTime or Director content. It's important that you know the dimensions of the file before you embed it into Dreamweaver M X 2004 so you can insert the correct values into the Properties inspector. In this instance, the movie was 240 x 360, but I've added an extra 20 pixels to make room for the controller below the movie. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 4. PressF12 to preview the movie in your browser. Note: If you get a broken image icon, you managing Web sites, and linking among pages. You'll learn about frames and forms, cascading might have to download the plug-in from http://www.apple.com/quicktime. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 5. Return to Dreamweaver MX 2004. Save and close the Dreamweaver file. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Phew! Another chapter bites the dust. Good work! If you feel up to it, move to the next and doing it and the results of your actions. final chapter. Chapter 20. Getting It Online Signing Up with Tripod • • • Table of Contents Setting the FTP Preferences Index Putting Examples Files onto the Web Server Macromedia® Dreamweaver® MX 2004: Hands-On Training Site Weinman Reports ByGaroGetting Green, Lynda It's one thing to design a Web page, and an entirely different thing to get what you've designed Publisher: Peachpit Press online for everyone else to see. One of the features I have always felt was missing from other Pub was Date: concrete December 22, 2003 books instructions on how to access, upload, and update files to a Web server. ISBN:you 0-321-20297-X Until now, were forced to struggle through this process on your own, which could prove Pages: 720 frustrating. Fortunately, this chapter walks you through the process of uploading your pages to a real-live Web server. This means that you, your colleagues, your family, and your friends will be able to see the results of whatever you publish on the Web. This chapter shows you how to create a free Web hosting account with Tripod and then use Dreamweaver MX 2004 to upload a Web site so that it can be viewed live on the Internet. You do With its powerful combination of visual layout tools, application development features, and code not have to sign up for the Tripod account unless you want to follow along with the exercises. If editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web you already have a Web hosting account, you can learn to use it by reading this chapter as well. developers. Here to get you hands-on with it fast is the definitive project-based training on the Either way, this chapter shows you how to set up your FTP preferences and upload your site to a topic from one of the master teachers at Linda.com training. Using a combination of projectWeb server using Dreamweaver MX 2004. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Free Web Hosting with Tripod Tripod– http://www.tripod.lycos.com is one of the many free Web hosting services available on the Internet. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing itisand resultsWeb of your actions. Tripod onethe of many services to offer free Web hosting to anyone who wants to sign up. Within just a few minutes, you can have a place to upload your files to on the Web if you don't already have another spot reserved. You will be pleasantly surprised by how much you get for free. The Tripod free Web hosting package includes a lot of extras. All you need to complete the exercises in this chapter are the 20MB of free disk space and FTP access, which are provided with the free Web hosting account. The only disadvantage to the free service is that it does include advertising. It's the perfect place to get started, though, and when you're ready to go "pro" and get rid of the ads, you can upgrade to a low-cost service with Tripod, or seek out other service providers that will meet your needs. If you already have a hosting service of your own, feel free to work with your own settings in the exercises, rather than those described for Tripod. For the FTP settings, just substitute your own settings instead of Tripod's. You can acquire your FTP settings by asking your own hosting service or the Web administrator for your company. 1 Signing Up with Tripod The first step in getting your free Tripod Web site online involves filling out a form on Tripod's site. This exercise shows you what parts of the form need to be completed. If you plan to use your own Web server instead of Tripod's, you can skip this exercise. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're 1. Launch your preferred Webactions. browser and browse to the Tripod home page at doing it and the results of your http://www.tripod.lycos.com. Here you'll find a complete rundown of their services. 2. ClickSign Up at the top of the page. This takes you to another Web page where you can create your own Tripod account. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 3. Onsupport, the Membership PlanMX page, click the Sign Up link under the "Try Tripodof for FREE!" editing Dreamweaver 2004 is sure to become the constant companion many Web heading. This option lets you create a free Web hosting account with Tripod. You'll be developers. Here to get you hands-on with it fast is the definitive project-based training on taken the a new sign up for your new membership. topic to from onepage, of thewhere masteryou'll teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. Complete all of the information requested on the form. Your Member Name will appear as part of your Tripod URL. For our ID, I used dwmxhot2004; so when the account is set up, our URL will be http://dwmxhot2004.tripod.com. Note:Do not use dwmxhot2004 as your ID; be sure to use your own unique ID. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure toclick become the constant companion many Web 5. When you finish entering your information, I Agree at the bottom of the of page. This developers. Here to get you hands-on with it fast is the definitive project-based training on the submits your information for processing. topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Note style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Privacy dynamic Policiescross-browser validation, improved CSS support, built-in graphics newest features: editing, and more. Throughout, Garo shows you not just how to do something but why you're Anythe time you provide doing it and results of your personal actions. information about yourself on a Web site, you should be familiar with the recipient's privacy policy. Some sites gather personal information and then sell it to marketing companies. This can result in some extra and unsolicited emails in your inbox. If this is of serious concern to you, make sure you review Tripod's privacy policy before you provide them with information. You can review their privacy policy at http://www.lycos.com/privacy/. This is the confirmation page that appears after you've successfully registered with Tripod. Remember, you are supposed to use your own ID, so your screen won't display "Thank you, dwmxhot2004!"; instead it will display whatever ID you selected. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 6. Once you have set up this Tripod account, you will be ready to set up your FTP preferences in Dreamweaver MX 2004 and begin uploading your site. Quit the browser; you will come back to it later after you have uploaded your site from Dreamweaver MX 2004. 2 Setting the FTP Preferences In order for your site to be seen on the World Wide Web, your files need to be uploaded to a live Web server. Most Web developers and designers build pages on their hard drives (as you have done in this book) before transferring them to a live Web server. In Dreamweaver MX 2004 • of Contents terminology,Table the files on your hard drive are referred to as local files, and the files on a live Web • Index server are referred to as remote files. You can upload your files from Dreamweaver MX 2004 by • Examples using the Site Definitions FTP settings. Macromedia® Dreamweaver® MX 2004: Hands-On Training In order to ,complete this exercise, you need to know the member name and password you ByGaro Green Lynda Weinman selected when you created your Tripod account or have the information handy from your own account. If you forgot that information or have not signed up for a Tripod account yet, you need Publisher: Peachpit Press to go to http://www.tripod.lycos.com and complete Exercise 1 before completing this Pub Date: December 22, 2003 exercise. ISBN: 0-321-20297-X Pages: 720 1. Copychap_20 to your hard drive. Define your site for Chapter 20, using the chap_20 folder as the local root folder. If you need a refresher on this process, visit Exercise 1 in Chapter 3, "Site Control." With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. SelectSite > Manage Sites. In the dialog box, choose Chapter 20 and clickEdit. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you 3. Make the AdvancedMX tab selected. Click on the Remote Info in the Category through all sure the Dreamweaver 04isbasics: navigating new interface, creating and list, and then choose FTP from the Access pop-up menu. This will give you access to the various managing Web sites, and linking among pages. You'll learn about frames and forms, cascading FTP settings you will need to modify before you upload files to your site. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're FTP Information for Tripod doing it and the results of your actions. (Note: This information will be different if you have another account.) FTP Host ftp.tripod.com Host Directory (Leave this blank) Login (Your Tripod ID) Password (Your password) If you signed up for the free Tripod account, your FTP information should be similar to the information shown above, except that you would enter your own ID, not the one shown here. However, if you are using your own Web hosting service, you should enter that information instead. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. Enter the information for the Remote Info options, as shown above. 5. its Click OK. Thiscombination returns youoftovisual the Manage Sitesapplication dialog box.development Click Done. features, and code With powerful layout tools, editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. What Is FTP? FTP stands for FileTransfer Protocol. This term is usually associated with the process of uploading Web files to a live Web server. You will hear this term used as a noun ("I used an FTP program to upload my files") and as a verb ("I am going to FTP all of my files now!"). • Table of Contents • Index It is important to note that you do not have to use Dreamweaver MX 2004 to exchange files with the remote server. • Examples You can use other FTP applications as well, such as WS_FTP (Windows) or Fetch (Mac).Dreamweaver® Macromedia® There are advantages MX 2004: Hands-On to usingTraining Dreamweaver MX 2004 over these applications, however, such as file synchronization and site management. You'll learn about these advantages ByGaro Green, Lynda Weinman shortly. Publisher: Peachpit Pressthat describes the FTP settings in Dreamweaver MX 2004. Here is a handy chart Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 FTP Settings in Dreamweaver MX 2004 Setting Description FTP Host This will typically be an address similar to the URL of your Web site. In some cases, it may begin with the prefix "FTP." With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Host Directory If you have a specific directory on the server where developers. Here to get you hands-on with it fast is the definitive project-based training on the you are supposed to place your files, you would topic from one of the master teachers at Linda.com training. Using a combination of projectenter it here. This option is not always used. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through MX be 04 given basics: navigating theID new interface, creating and Login all the Dreamweaver You will a user name or to use to access managing Web sites, andthe linking among pages. You'll learn about frames and remote server. It is important that you enter this forms, cascading style sheets, and Fireworks and Flashexactly integration, and gobble up Garo's suggestions about best information as it is given to you; otherwise layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's you will have problems connecting. newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Password In addition a user name ID, youtowill be editing, and more. Throughout, Garotoshows you not or just how do also something but why you're password to use when accessing the remote doing it and the results ofgiven your aactions. server. If you don't want to enter the password every time you connect to the remote server, select the Save check box, and Dreamweaver MX 2004 will remember your password! Note: The password you enter here is just stored in a text file on your hard drive, so anyone can read it. Don't check the Save check box if security is a concern at your location. Use Passive FTP The Passive FTP option enables your local software to set up the FTP connection rather than the remote server. Leave this option unchecked unless directed by your system administrator. Use Firewall Check this box if you are connecting to the FTP server from behind a firewall. Use SSH encrypted (Windows only) Check this option if your FTP server requires that you log in in using SSH authentication. 3 Putting Files onto the Web Server Now that you have set up your FTP preferences, you are ready to use Dreamweaver MX 2004 to connect to a Web server and upload your files. Once you have completed this exercise, you will be able to see your Web site live on the Internet. Woo-hoo! • Table of Contents • Index try to upload your files to the Web server, make sure you have established a • 1. Before you Examples connection to the Internet. You shouldTraining be able Macromedia® Dreamweaver® MX 2004: Hands-On to browse the Web and look at other sites as a test to see that your Web connection is working. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003panel The Windows Site collapsed. ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Windows Site panel expanded. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Hereyour to get youpanel hands-on withif itit fast is the definitive project-based trainingbutton, on the 2. Make sure Files is open; is not, press F8. Notice that the Connect topic at from one of the master teachers at Linda.com training. Using a combination of projectthe top of the panel, is no longer dimmed. Once you enter your FTP preferences, you will basedhave lessons, guided exercises, QuickTime tutorials, veteran author Garo Green walks you access to the Connectand feature. through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout andWindows typography practices. find extensive coverage of panel all of to Dreamweaver's users only: You'll Click also Expand/Collapse in the Site expand the Site newest features: dynamic validation, improved built-in panel so you cancross-browser see both the local files and remoteCSS site support, at the same time.graphics Macintosh editing, and more. Throughout, Garo you not Site just how something but why you're users won't have to do this shows because their paneltoisdo already displaying both Local doing it and the and results of yourSite actions. Files Remote views. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 3. ClickConnect. This will connect Dreamweaver MX 2004 to your Web server. If you have developers. Here to get you hands-on with it fast is the definitive project-based training on the not established a connection to the Internet with your modem or network, you will get an topic from one of the master teachers at Linda.com training. Using a combination of projecterror message. based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best After making a successful connection to the Web server, the contents of the Web layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's server are displayed in the left side of the window . newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 4. its With the local root folder of selected, you are ready to uploaddevelopment your site. Click Put Files. With powerful combination visual layout tools, application features, andNote: code If support, you wanted to upload aMX single file, select local root folder; of instead editing Dreamweaver 2004 is you surewouldn't to become the the constant companion manyyou Web would select the particular file and then clickisPut developers. Here to get you hands-on with it fast theFiles. definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. You are asked whether you want to upload your entire Web site. Because this is the first time you are uploading your site, click OK. Thisis what the Site panel should look like after the Web site has been uploaded. Note: If an error occurs during the transfer process, Dreamweaver MX 2004 maintainsa log of FTP errors that you can review to help troubleshoot the problem. You can access this log by selecting Window > Results > FTP Log (Windows) or Site > FTP Log (Mac). • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectNote based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all theDifference Dreamweaver MX 04 Getting basics: navigating the new interface, creating and The Between and Putting managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash and between gobble up Garo's There are two different ways integration, to transfer files the local suggestions site and the about remotebest layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's site (the Web server). The Get command copies the selected files from the remote newest features: dynamic validation, improved CSS support,Inbuilt-in graphics site to your local cross-browser site. This process is referred to as downloading. addition, if you editing, and more. Throughout, Garo shows you not just how to do something but why you're are using the Check In and Check Out options, the Get command copies the file to doing it and the results of your actions. the local site as a read-only file, leaving the original on the Web server for others to download. The Put command copies the selected files from the local site to the remote site. This process is referred to as uploading. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code 6. Open a browser. Because MX my 2004 TripodisID is dwmxhot, the constant URL will companion be editing support, Dreamweaver sure to become the of many Web http://dwmxhot.tripod.com. Of course, your URL will be different. Just training replace on the developers. Here to get you hands-on with it fast is the definitive project-based own Tripod ID and voila–your WebUsing site isalive on the Web! topic dwmxhot from one ofwith the your master teachers at Linda.com training. combination of projectCongratulations! Make sure you show all your friends. ;-) based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 4 Getting Site Reports As your sites get larger, you will find it increasingly difficult to manage all of the files. Trying to locate files with missing alt text descriptions, untitled documents, redundant nested tags, etc. can prove to be a very time-consuming task. Dreamweaver MX 2004 has a feature that lets you • Table offiles Contents identify and locate that meet specific criteria. This feature can save you time hunting for the • Index files manually, and will make sure your files are in good shape. • Examples This exerciseDreamweaver® Macromedia® has you run MX a report 2004: Hands-On on a finished Training site and fix some of the problems identified in the report. ByGaro Green, Lynda Weinman Peachpit 1.Publisher: SelectSite > Press Reports. This opens the Reports dialog box, where you can specify the type Pub December 22, 2003 ofDate: report you would like to generate. ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 2. From the Report on drop-down menu, selectEntire Current Local Site. This ensures that all of the files within the local root folder are processed. 2. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With 3. its Click powerful the Untitled combination Documents of visual check layout box. tools, Thisapplication option causes development all of the page features, titlesand of the code editing documents support, Dreamweaver within your site MX to2004 be examined is sure totobecome make sure the constant each has companion a unique name. of many ThisWeb is a developers. good thing Herebecause to get you some hands-on search with engines it fast useisthe thepage definitive title as project-based part of their training listings. on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased 4. Click lessons, Run. guided Dreamweaver exercises, willand begin QuickTime to scan all tutorials, of the files veteran in your author site,Garo looking Green for walks ones that you through have allUntitled the Dreamweaver DocumentMX as04 their basics: pagenavigating title. the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style When sheets,Dreamweaver and Fireworks MX and 2004 Flash is finished integration, scanning and gobble your site, up Garo's it will produce suggestions a Results aboutdialog best layoutbox and that typography displays the practices. files thatYou'll meetalso the find criteria extensive you specified. coverage Inof this all case, of Dreamweaver's you are looking newest forfeatures: files thatdynamic have Untitled cross-browser Documentvalidation, as their page improved title . CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. 5. Double-clickindex.html to open that file so you can correct the problem. It's really nice that you can open the files directly from this dialog box. 5. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X 6. Notice that the Title option is set to Untitled Document. Change the Title option to Pages: 720 Welcome to la Eyeworks.com. 7. Save and close this file. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. The Reports Dialog Box • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and The Reports dialog box has several features that offer you a wide range of options and flexibility. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading The table below outlines these options and offers a brief description of each. style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Reports editing, and more. Throughout, GaroDialog showsBox you Options not just how to do something but why you're doing it and the results of your actions. Option Description Report On Workflow Current Document Checks only the active document. Entire Local Site Checks every file within the local root folder. Selected Files in Site Checks only the files that are selected within the Site window. You must have the files selected before choosing this option. Folder Checks a specific folder. When you choose this option, you can browse to the specific folder you want to process. Checked Out By Identifies files that have been checked out by a specific user. When this option is selected, you can specify the name by clicking on the Report Settings button. Design Notes HTML Reports • • • Searches all of the Design Notes in your documents. The Report Settings button will give you access to specific search criteria. Combinable Nested Font Tags Combines all possible nested tags. For example, Hello Index would be reported. Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Accessibility Analyzes ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 the Web pages against the Section 508 Guidelines to determine if your pages meet these accessibility requirements. This is a very useful feature and can even help you make existing Web pages accessible. This feature is covered in detail in Chapter 18, "Accessibility." Missing ALT Text Identifies all images that do not have an <alt rel="nofollow"> tag applied to them. This is good option to run With its powerful combination of visual layout tools, application development features, and code to make sure your site has good editing support, Dreamweaver MX 2004 is sure toaccessibility. become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of Redundant the master Nested teachers Tags at Linda.com Reports training. nested Using tags a combination that can be of projectbased lessons, guided exercises, and QuickTime tutorials, cleaned up. veteran For example, author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating Welcome theto new Bonsaihut.com interface, creating and is a greatframes place to learn managing Web sites, and linking among pages. You'll learn about and forms, cascading style sheets, and Fireworks and Flash integration,about and gobble bonsai up Garo's would suggestions be about best layout and typography practices. You'll also find extensive reported. coverage This option of helps all of Dreamweaver's clean newest features: dynamic cross-browser validation, up improved your HTML. CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're Removable Empty Tags Removes any empty tags, which doing it and the results of your actions. can help clean up your HTML. This is another option that will help clean up unnecessary HTML code. Untitled Documents Searches the document to see if it has a page tile of Untitled Document. It's always best to give your documents page titles that reflect their content. Congratulations! You certainly deserve it! You've made it through all the chapters!! We hope that this book helped you get up to speed with Dreamweaver MX 2004 quickly, and that you now feel ready to use your skills to create just about any Web site project. W e wish you the best of luck with all of your future projects. Rock on! Appendix A. Troubleshooting FAQ and Technical Support • • • Table of Contents Appendix A Index Examples If you run into any problems whileHands-On followingTraining the exercises in this book, this FAQ is intended to Macromedia® Dreamweaver® MX 2004: help. This document will be maintained and expanded upon at this book's companion Web site: ByGaro Green, Lynda Weinman http://www.lynda.com/books/HOT/dw04/. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Macromedia Technical Support http://www.macromedia.com/support/ 415.252.9080 • Table of Contents If you are having • Index problems with Dreamweaver MX 2004, please contact Macromedia Technical Support at the number listed here. Macromedia staff will be able to help you with such typical • Examples problems as:Dreamweaver® the trial version has expired your computer; your computer crashes when you Macromedia® MX 2004: Hands-Onon Training try to launch the application; and so on. Please note that lynda.com cannot help troubleshoot ByGaro Green, Lynda Weinman technical problems with Dreamweaver. Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Peachpit Press tell@peachpit.com If your book has a defective CD-ROM, please contact the customer service department at the • Table of Contents email address listed here. I do not have extra CDs at lynda.com, so they must be requested • directly fromIndex the publisher. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. lynda.com http://www.lynda.com/books/HOT/dw04/ dw04hot@lynda.com • Table of Contents I have created a companion Web site for this book, which can be found at • Index http://www.lynda.com/books/dw04hot. Any errors in the book will be posted to the Web • Examples site, and it'sDreamweaver® always a good toHands-On check there for up-to-date information. I encourage and Macromedia® MXidea 2004: Training welcome you to send your comments and error reports to dw04hot@lynda.com. ByGaro Green, Lynda Weinman If you don't find what you're looking for here or there, please send an email to Publisher: Peachpit Press dw04hot@lynda.com. Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Dreamweaver MX 2004—Emerging Issues http://www.macromedia.com/support/dreamweaver/ts/documents/emerging_issues.htm Macromedia has developed a Web page at that outlines some of the emerging technical issues with • Table Contents Dreamweaver MXof 2004. If you are having problems with the program itself, you should definitely look • Index here before you do anything else. This page will be updated as new problems are identified and resolved. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Frequently Asked Questions Q1: When I preview my files locally, I get an error that the file or image cannot be found. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading styleA1: sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best This is one of the most common problems beginners encounter when creating links in Dreamwea layout andThis typography practices. You'll also find extensive coverage of all of Dreamweaver's almost always occurs when you create a link that is Site Root relative instead of Document r newest features: dynamic cross-browser validation, CSS to support, graphics of the path t Creating a Site Root relative link will causeimproved a / character appearbuilt-in at the beginning editing, and more. Throughout, Garo shows you not just how to do something but why will cause images to disappear, frames to not function properly, and file links you're to break when prev doing it and the results of this yourproblem actions.by relinking the file/image and making sure you are using the Docu You can correct option. Q2: I can't find a feature that existed in previous versions of Dreamweaver. What happened A2: Some features found in previous versions of Dreamweaver have been removed from Dreamweav This was done because these features were obsolete and/or recommended a workflow that is no with modern Web practices. You can find a complete list of which features have been removed at http://www.macromedia.com/support/dreamweaver/ts/documents/features_remove Q3: How do I call up the Properties inspector? • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're A3: If you can't see doing it and the results of the yourProperties actions. inspector or, for that matter, any of Dreamweaver's panels, pull d Window menu and click on the one you want to open. A list of shortcut keys that will help you q all of Dreamweaver's panels can be found at the end of chapter 2, "Interface." Q4: I defined my site for a chapter, but files that are listed in the exercises aren't there. Wh happened? A4: This could be because when you were defining the site, you specified a folder that was inside the folder, instead of the chapter folder itself. Go ahead and redefine the site. (If you need to revisit visit Exercise 1 in chapter 3, "Site Control.")Note: Selecting the correct folder is done differently Windows, as shown here: Windows: When you're browsing to define the chapter folder, and the Choose Local Fold pops up, select the chapter folder. First, click Open. After the folder is opened, click Select opposite to the way Macintosh users define their sites. Mac: When you're browsing to define the chapter folder, and the Choose Local Folder dia highlight the chapter folder and click Choose. Q5: • • Where's the Color panel? Table of Contents A5: • Index it's context-sensitive, the Color panel appears only when you click in one of Dreamweav Because Examples color wells. Color wells appear inside the Properties inspector and the Page Properties dialog Macromedia® Dreamweaver® MX 2004: Hands-On Training Q6: I ,put layer ByGaro Green Lyndaone Weinman on top of another! How do I delete it? A6: Todelete a layer, select it by the handle at its top and press Delete. You can also use the Layers select the layer, which might be easier in some cases where they overlap. Of course, there's alwa Pub Date: December 22, 2003 universal undo command, Ctrl+Z (Windows) or Cmd+Z (Mac). Publisher: Peachpit Press ISBN: 0-321-20297-X Pages: Q7: I 720 just specified a tracing image in my Page Properties window, but I can't see it when I page in my browser. Panic is starting to set in! A7: The tracing image is a template to be used for layout in Dreamweaver. It is invisible in the brows if you don't see it, that's the whole point! It's there for your reference only, and your end users w it. With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Q8: Why dotoIget getyou thehands-on message, "To document-relative path,training your document should developers. Here with it make fast is a the definitive project-based on the can't figure out what this gibberish means! topic fromfirst"? one of I the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you A8: allHey, with you. ItMX would be nicenavigating if the dialog simply stated, "Saveand your file now, or Dream through the I'm Dreamweaver 04 basics: thebox new interface, creating your files," because that's all it's asking you to do.and Sigh. If only developers knew ho managing keep Web track sites, of and linking among pages. You'll learn about frames forms, cascading nontechnical terms at Flash times,integration, eh? All you and needgobble to do up is click OKsuggestions and save your filebest (inside the defi style sheets, and Fireworks and Garo's about MX 2004 You'll won't also barkfind anyextensive more. layout andDreamweaver typography practices. coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Q9: and Why do I get the message that you my not file just is located of the root editing, more. Throughout, Garo shows how to outside do something but whyfolder? you're doing it and the results of your actions. A9: Dreamweaver MX 2004 is asking you to move the file into the root folder that you've defined as you work with files outside your defined root folder, Dreamweaver MX 2004 cannot keep track of manage your site, which is counterproductive to the way the program is structured and to your w Though this message is annoying, it is actually helping you maintain a healthy site without exper broken links and problems uploading your files when you publish it. Note: There are different wa this message, depending on the system you are running. Windows: You should click Yes, and Dreamweaver MX 2004 will automatically pop you int folder. Click Save, and the file will be moved. Mac: You should click Yes, and then browse to the correct folder. At that point, you will be save, which you should do. Q10: Why aren't my templates working? A10: If you leave a template file open and work on another site (such as another chapter in this book defined as a different site), Dreamweaver MX 2004 can't keep track of your templates. It's best t single site at a time, and not flip between sites while leaving files open from another defined site with all Dreamweaver MX 2004 documents, although templates and libraries are particularly sen definition confusion. Q11: When I try to locate class files, why can't I see the file extensions at the end of file nam .gif, .jpg, and .html? A11: On Windows, you will need to change your Preferences to view file name extensions. Instructio are inside the "Introduction" at the beginning of this book • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Appendix B. Online Resources Appendix B • Table of Contents The Web is full of great resources for Dreamweaver users. You have ample choices among a • Index variety of newsgroups, listservs, and third-party Web sites that can really help you get the most • Examples out of the new skills you've developed by following the exercises in this book. This appendix lists Macromedia® Dreamweaver® MX 2004: Hands-On Training some of the best resources for learning and extending Dreamweaver MX 2004. ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Discussion Groups Macromedia has set up several discussion boards (newsgroups) for Dreamweaver. This is a great place to ask questions and get help from thousands of Dreamweaver users. The newsgroup is composed of beginning to advanced users, so you should have no problem finding the type of • Table of Contentsof your experience with the program. In order to access these help you need, regardless • Index newsgroups, you will need a newsgroup reader, such as Microsoft Outlook or Free Agent. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training Dreamweaver ByGaro Green, Lynda Weinman Publisher: Peachpit Press news://forums.macromedia.com/macromedia.dreamweaver Pub Date: December 22, 2003 ISBN: 0-321-20297-X Dynamic HTML Pages: 720 news://forums.macromedia.com/macromedia.dynamic.html With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Listservs A listserv is different from a newsgroup, and offers another way people can ask questions and get help with Dreamweaver. Questions and answers are exchanged through the email application of your choice. Blueworld, the developers of Lasso for Dreamweaver, for example, • of Contents maintains anTable active and very useful listserv for Dreamweaver at • Index http://www.blueworld.com/blueworld/lists/dreamweaver.html. • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. A Few Third-Party Dreamweaver Web Sites DWFAQ.com • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. http://www.dwfaq.com DMXZONE.com • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you http://www.dmxzone.com through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Community MX layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you http://www.communitymx.com through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Massimo's Corner layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you http://www.massimocorner.com/ through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Yaromat layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you http://www.yaromat.com/dw/index.php through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Project VII layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projecthttp://www.projectseven.com based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Dreamweaver MX 2004 H·O·T: What's Inside (artwork included on CD-ROM): • • • Table of Contents Create Index rollovers using Cascading Style Sheets. Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Makhe your Web pages more accessible. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through the Dreamweaver MX 04 basics: navigating the new interface, creating and Usealltables to create basic page layouts. managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Upload pages to the Web for your friends and family to see. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the 2004 at into your workflow. topic Integrate from one ofFireworks the masterMX teachers Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. Use JavaScript Behaviors to add complex functionality. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. On the CD-ROM Exercise Files & MovieBased Training: • • • Table of Contents MoviesIndex narrated by the author to help you understand difficult concepts. Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages.exercises. You'll learn about frames and forms, cascading Source files provided for all hands-on style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] # (hash mark) nowhere links 2nd element (non-breaking space) in tables 2nd deleting 2nd • inserting Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] absolute links 2nd 3rd 4th 5th 6th 7th accessibility enabling preferences for 2nd 3rd form object accessibility 2nd 3rd 4th 5th 6th 7th frame accessibility 2nd 3rd 4th 5th 6th 7th 8th 9th • IBM Home Page Reader Table of Contents • image accessibility Index2nd 3rd 4th 5th 6th 7th • table accessibility 2nd 3rd 4th 5th Examples W3C accessiblity guidelines 2nd Macromedia® Dreamweaver® MX 2004: Hands-On Training adding ByGaro Green, Lynda Weinman CSS to XHTML tags 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th folders Publisher: text 2nd 3rdPeachpit 4th 5th Press 6th 7th 8th 9th 10th 11th 12th 13th Pub[See Date: December 22, 2003 adding. inserting] Adobe Reader ISBN: plug-in 0-321-20297-X downloading Pages: 720 aligning images with tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th text 2nd 3rd 4th 5th 6th with images With its powerful combination of visual layout tools, application development features, and code with tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web aligning. [See also page layout] developers. Here to get you hands-on with it fast is the definitive project-based training on the alignment topic from one of the master teachers at Linda.com training. Using a combination of projectcentering images and text 2nd 3rd 4th based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you alternate text for images 2nd 3rd through all the Dreamweaver MX 04 basics: navigating the new interface, creating and anchors. 2nd [See named anchors] managing Web sites, and linking among pages. You'll learn about frames and forms, cascading applications (Web) style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best applying layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's CSS newest features: dynamic cross-browser validation, improved CSS support, built-in graphics to block-level elements editing, and more. Throughout, Garo shows you not just how to do something but why you're to inline elements doing it and the results of your actions. Assets panel inserting images 2nd 3rd templates attaching HTML-based pop-up menus to navigation bars with Show Pop-Up Menu behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th attaching. [See linking] audio. [See sounds] automatically updating pages. [See Library items, templates] [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] background colors changing background color for Flash text • formatting tables with 2nd 3rd 4th 5th 6th 7th Table of Contents background images • Index • for frames 2nd 3rd 4th 5th 6th 7th 8th Examples seamless images across frames 3rdHands-On 4th 5th 6thTraining 7th 8th Macromedia® Dreamweaver® MX 2nd 2004: size of ByGaro Green, Lynda Weinman verifying behaviors Publisher: Peachpit Press Open Browser Window behavior 2nd 3rd 4th 5th 6th 7th 8th 9th PubText Date: December 2003 2nd 3rd 4th 5th 6th 7th 8th Set of Status Bar 22, behavior Set Text of Text Field behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th ISBN: 0-321-20297-X Show Pop-Up Menu behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Pages: 720 Swap Image behavior Validate Form behavior 2nd 3rd 4th 5th block elements versus inline elements block-level elements With its powerful combination of visual layout tools, application development features, and code applying CSS to editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web blueprint developers. Here to get you hands-on with it fast is the definitive project-based training on the for table layout topic from one of the master teachers at Linda.com training. Using a combination of projectbody tag (XHTML) based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you bold text through all the Dreamweaver MX 04 basics: navigating the new interface, creating and borders managing Web sites, and linking among pages. You'll learn about frames and forms, cascading of tables style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best changing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's creating outlines for 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics on frames 2nd editing, and more. Throughout, Garo shows you not just how to do something but why you're browsers doing it and the results of your actions. \#211cascading\#211 rules 2nd opening separate windows 2nd 3rd 4th 5th 6th 7th 8th 9th plug-ins. [See plug-ins] setting default 2nd bulleted lists. [See unordered lists] [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Cascading Style Sheets. 2nd [See CSS] cells in tables merging selecting • • spacing between 2ndContents Table of layout cells 2nd 3rd Index 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th • Examples of tables Macromedia® Dreamweaver® MX 2004: Hands-On Training empty cells ByGaro Green, Lynda Weinman width settings 2nd 3rd 4th 5th centering Publisher: images 2nd Peachpit 3rd 4th Press Pub2nd Date: text 3rdDecember 4th 5th 22, 2003 changingISBN: 0-321-20297-X default browser Pages: 720 2nd document window size 2nd 3rd font lists 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th fonts 2nd 3rd 4th preferences table borders 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th With its powerful combination of visual layout tools, application development features, and code text color editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web text size 2nd developers. Here to get you hands-on with it fast is the definitive project-based training on the text to bold topic from one of the master teachers at Linda.com training. Using a combination of projecttext to italic based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you workspace setup through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Choose Spacer Image dialog box managing Web sites, and linking among pages. You'll learn about frames and forms, cascading class styles style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's 25th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Clean Up HTML/XHTML dialog box editing, and more. Throughout, Garo shows you not just how to do something but why you're options doing it and the results of your actions. Clean Up Word HTML dialog box Clean Up Word HTML feature 2nd 3rd 4th 5th 6th 7th Clean Up XHTML feature 2nd 3rd 4th 5th 6th 7th 8th closing pages before moving code viewing source code XHTML example code 2nd 3rd 4th Code and Design view (Document toolbar) code snippets inserting 2nd 3rd 4th 5th Code view 2nd 3rd changing to 2nd editing in 2nd 3rd 4th 5th 6th for inserting images for tables highlighted code importance of options selections in appearing in Design view switching to Design view Code view (Document toolbar) code. 2nd [See also XHTML] [See also tags (XHTML)] color background color for Flash text formatting tables with 2nd 3rd 4th 5th 6th 7th of text • • changing setting Color panel • Table of Contents Index Examples color pickers (Page Properties panel) Macromedia® Dreamweaver® MX 2004: Hands-On Training color schemes 2nd 3rd 4th By Garo Green, Lynda Weinman colors changing 2nd 3rd 4th 5th 6th frames 2nd Peachpit 3rd 4th Press Publisher: columns Pub Date: December 22, 2003 in tables ISBN: 0-321-20297-X merging 2nd 3rd Pages: 720 width settings 2nd 3rd 4th 5th commands Create Web Photo Album 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th obtaining 2nd 3rd 4th Community MX Web site 2nd With its powerful combination of visual layout tools, application development features, and code conflicts editing in CSS support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here browser rules forto 2ndget you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectconsistent pages. [See Library items, templates] based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you contextual class selectors through all the Dreamweaver MX 04 basics: navigating the new interface, creating and contracting managing Web sites, and linking among pages. You'll learn about frames and forms, cascading panels style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Convert Layers to Table dialog box layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's options newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Convert Tables to Layers dialog box editing, and more. Throughout, Garo shows you not just how to do something but why you're converting doing it and the results of your actions. layers to tables 2nd 3rd 4th 5th 6th versus Layout view tables to layers 2nd 3rd 4th 5th 6th 7th 8th Create Web Photo Album command 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Create Web Photo Album dialog box creating CSS class styles 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th documents 2nd 3rd 4th 5th 6th 7th email links 2nd 3rd 4th 5th 6th 7th 8th 9th 10th embedded style sheets Flash Buttons 2nd 3rd 4th 5th 6th 7th 8th 9th Flash text 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th image maps 2nd 3rd 4th 5th 6th 7th jump menus 2nd 3rd 4th 5th 6th 7th 8th 9th layers 2nd 3rd layout cells layout tables Library items 2nd 3rd 4th 5th 6th links 2nd 3rd 4th 5th 6th to files 2nd 3rd 4th 5th 6th with Point to File feature 2nd 3rd 4th 5th 6th 7th 8th 9th 10th lists 2nd 3rd 4th 5th multiple-event rollovers 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th named anchors 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th navigation bar rollovers 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th outlines for table borders 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th pointer rollovers 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th rollovers 2nd 3rd 4th 5th 6th • • • with Flash text Table of Contents rounded-corner tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th Index site maps 2nd 3rd 4th 5th 6th Examples sites 2nd 3rd 4th 5th 6th Macromedia® Dreamweaver® MX 2004: Hands-On Training styles ByGaro Green types of , Lynda Weinman tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th templates 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th Publisher:2nd Peachpit Press titles of documents Pub Date: December 22, 2003 Web Photo Album 2nd 3rd 4th 5th 6th 7th 8th 9th ISBN: 0-321-20297-X XHTML documents Pages: 720 creating. [See also inserting] CSS (Cascading Style Sheets) 2nd 3rd adding to XHTML tags 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th and DHTML With its powerful combination of visual layout tools, application development features, and code applying to block-level elements editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web applying to inline elements developers. Here to get you hands-on browser rules for \#210cascading\#211 2nd with it fast is the definitive project-based training on the topic classfrom styles one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided and10th QuickTime tutorials, veteran author Garo walks creating 2nd 3rd 4th 5thexercises, 6th 7th 8th 9th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20thGreen 21st 22nd 23rd you 24th through all the Dreamweaver MX 04 basics: navigating the new interface, creating and 25th managing sites, and linking among pages. You'll learn about frames and forms, cascading contextualWeb class selectors style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best CSS1 and CSS2 recommendations layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's declarations 2nd newest features: dynamic disabling default formatting 2ndcross-browser validation, improved CSS support, built-in graphics editing, editing and more. Throughout, Garo shows you not just how to do something but why you're doingwith it and theCSS results of your actions. Relevant panel 2nd 3rd 4th 5th 6th 7th embedded style sheets creating exporting to external style sheets 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th external style sheets disabling viewing of inheritance linking external style sheets 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th page properties setting 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th preferences setting in Dreamweaver MX 2004 2nd Relevant CSS panel 2nd 3rd 4th rollovers 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd rules 2nd selectors specificity types of style sheets 2nd versus font tag CSS mode (Page Properties panel) CSS Page Properties window CSS Properties panel 2nd 3rd CSS Style Definition dialog box CSS Style Definition window CSS Styles panel 2nd 3rd CSS(Cascading Style Sheets) CSS1 recommendation CSS2 recommendation • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] data-driven sites. [See Web applications] database-driven sites. [See Web applications] declarations (CSS) 2nd default browser setting 2nd default CSS formatting • Table of Contents disabling 2ndIndex • defining • Examples sites 2nd 3rdDreamweaver® 4th 5th 6th 7th 8th 10thHands-On 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th Macromedia® MX9th 2004: Training definition lists ByGaro Green, Lynda Weinman creating 2nd 3rd 4th 5th deleting Publisher: Peachpit Press element (non-breaking space) in tables 2nd Pub Date: December 22, 2003 image placeholders layersISBN: 0-321-20297-X delimited data. 720 [See tab-delimited data] Pages: Design Notes 2nd Design view 2nd selections in appearing in Code view switching to Code view With its powerful combination of visual layout tools, application development features, and code Design view (Document toolbar) editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Designer interface developers. Here to get you hands-on with it fast is the definitive project-based training on the designers topic from one of the master teachers at Linda.com training. Using a combination of projectopinion of Dreamweaver MX 2004 based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you DHTML through all the Dreamweaver MX 04 basics: navigating the new interface, creating and (Dynamic HTML) managing Web sites, and linking among pages. You'll learn about frames and forms, cascading dimensions style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best of rollovers 2nd layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Director content newest features: dynamic cross-browser validation, improved CSS support, built-in graphics inserting 2nd 3rd 4th 5th editing, and more. Throughout, Garo shows you not just how to do something but why you're disabled people. [See accessibility] doing it and the results of your actions. disabling default CSS formatting 2nd start page viewing external style sheets discussion groups div tag 2nd contextual class selectors docking panel groups panels Document Object Model (DOM) Document toolbar 2nd in document window Document Type Definition. [See DTD] document window 2nd multiple document windows 2nd preset window sizes 2nd 3rd viewing views available documents ***combine with pages*** colors changing 2nd 3rd 4th 5th 6th creating 2nd 3rd 4th 5th 6th 7th email links creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th image maps creating 2nd 3rd 4th 5th 6th 7th images centering 2nd 3rd 4th • Table of Contents inserting 2nd 3rd 4th 5th 6th • Index replacing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th • Examples index.html file Macromedia® Dreamweaver® MX 2004: Hands-On Training importance of 2nd ByGaro links Green, Lynda Weinman creating 2nd 3rd 4th 5th 6th previewing Publisher: Peachpit Press to Date: files 2nd 3rd 4th 22, 5th 2003 6th Pub December meta tags ISBN: 0-321-20297-X inserting 2nd 3rd 4th Pages: 720 named anchors creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th placeholders replacing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th saving With its powerful combination of visual layout tools, application development features, and code templates editing support, selecting 2nd Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the text topiccentering from one 2ndof 3rdthe 4th master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you inserting 2nd 3rd through all the Dreamweaver MX 04 basics: navigating the new interface, creating and titles managing Web sites, and linking among pages. You'll learn about frames and forms, cascading creating style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best DOM (Document Object Model) layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's downloading newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Adobe Reader plug-in editing, and more. Throughout, Garo shows you not just how to do something but why you're Flash plug-in doing it and the results of your actions. from Dreamweaver Exchange Web site 2nd 3rd 4th 5th 6th plug-ins Dreamweaver Exchange Web site 2nd downloading from 2nd 3rd 4th 5th 6th Dreamweaver MX 2004 acceptance by programmers and designers emerging issues extending 2nd features removed from integration with Fireworks. [See Fireworks MX 2004 integration] interface. [See interface] need for learning XHTML 2nd DTD (Document Type Definition) DWFAQ.com Web site 2nd DWXZONE.com Web site 2nd Dynamic HTML. [See DHTML] dynamic sites. [See Web applications] [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] editable regions inserting in templates editing CSS with Relevant CSS panel 2nd 3rd 4th 5th 6th 7th • HTML-based pop-up menus 2nd 3rd 4th 5th 6th 7th 8th Table of Contents • image-based Index pop-up menus 2nd 3rd 4th 5th 6th 7th 8th 9th • images Examples in Fireworks MX 2004 2nd 3rd 5th 6th 7th 8th Training Macromedia® Dreamweaver® MX4th 2004: Hands-On with built-in Fireworks MX 2004 tools 2nd 3rd 4th 5th ByGaro Green, Lynda Weinman in Code view 2nd 3rd 4th 5th 6th source files (images) Publisher: Peachpit Press XHTML Pub Date: December 22,2nd 2003 with Quick Tag Editor 3rd 4th 5th 6th 7th with Tag 0-321-20297-X Editor and Tag Chooser 2nd 3rd 4th 5th ISBN: editing. Pages: 2nd [See also changing] [See also modifying] 720 editors external editors selecting 2nd elements. [See tags] Email Link dialog box With its powerful combination of visual layout tools, application development features, and code email links editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th developers. Here to get you hands-on with it fast is the definitive project-based training on the embedded style sheets topic from one of the master teachers at Linda.com training. Using a combination of projectcreating based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you embedding through all the Dreamweaver MX 04 basics: navigating the new interface, creating and sounds 2nd 3rd 4th 5th managing Web sites, and linking among pages. You'll learn about frames and forms, cascading empty table cells style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best enabling layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's accessiblity preferences 2nd 3rd newest features: dynamic cross-browser validation, improved CSS support, built-in graphics error messages editing, and more. Throughout, Garo shows you not just how to do something but why you're moving files to root folder doing it and the results of your actions. saving files errors FTP error log expanding Files panel panels export settings Fireworks MX 2004 2nd Export Styles as CSS File window exporting CSS files to external style sheets 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th extending Dreamweaver MX 2004 2nd eXtensible HyperText Markup Language. [See XHTML] eXtensible Markup Language. [See XML] Extension Manager installing extensions 2nd 3rd 4th 5th 6th 7th extensions Dreamweaver Exchange Web site downloading from 2nd 3rd 4th 5th 6th for file names installing with Macromedia Extension Manager 2nd 3rd 4th 5th 6th 7th extensions. [See also file extensions] external editors selecting 2nd external image editor preferences setting 2nd external style sheets • • • disabling viewing of Table of Contents exporting to 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th Index linking to 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] features. [See options] file browser moving files with 2nd 3rd 4th 5th 6th 7th 8th 9th file extensions viewing file • formats • SWF Table of Contents Index file formats] • formats. [SeeExamples file managementDreamweaver® 2nd 3rd 4th 5th MX 2004: Hands-On Training Macromedia® file management. [See also site management] ByGaro Green, Lynda Weinman File name section (document window) File Transfer Protocol. [See FTP] files Publisher: Peachpit Press Pub Date: December 22,4th 2003 creating links to 2nd 3rd 5th 6th extensions ISBN: 0-321-20297-X finding Pages: 720 with site reports 2nd 3rd 4th 5th moving to root folder with file browser 2nd 3rd 4th 5th 6th 7th 8th 9th naming With its powerful combination of visual layout tools, application development features, and code from Files panel editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web naming conventions developers. Here to get you hands-on with it fast is the definitive project-based training on the opening topic from one of the master teachers at Linda.com training. Using a combination of projectfrom Files panel based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you path structures 2nd 3rd 4th 5th 6th 7th 8th 9th 10th through all the Dreamweaver MX 04 basics: navigating the new interface, creating and notation for managing Web sites, and linking among pages. You'll learn about frames and forms, cascading previewing 2nd style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best saving layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's error messages newest features: dynamic cross-browser validation, improved CSS support, built-in graphics selecting for moving editing, and more. Throughout, Garo shows you not just how to do something but why you're updating links to doing it and the results of your actions. uploading 2nd 3rd 4th 5th 6th 7th FTP preferences for 2nd 3rd 4th Files panel adding folders expanding file browser moving files with 2nd 3rd 4th 5th 6th 7th 8th 9th moving files naming files opening files from path structures 2nd 3rd 4th 5th 6th 7th 8th 9th selecting files for moving files. 2nd [See also pages] [See also documents] Find and Replace feature 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th finding files with site reports 2nd 3rd 4th 5th Fireworks MX 2004 integration 2nd attaching HTML-based pop-up menus with Show Pop-Up Menu behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th Design Notes 2nd editing HTML-based pop-up menus 2nd 3rd 4th 5th 6th 7th 8th editing image-based pop-up menus 2nd 3rd 4th 5th 6th 7th 8th 9th editing images 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th export settings 2nd external image editor preferences 2nd importing rollovers 2nd 3rd 4th 5th inserting images 2nd 3rd 4th updating HTML 2nd 3rd 4th 5th 6th 7th 8th 9th fixed-pixel tables • combining with percentage-based tables 2nd 3rd 4th 5th 6th Flash Buttons • • Table of Contents Index creating 2nd 3rd 4th 5th 6th 7th 8th 9th Examples linking Macromedia® Dreamweaver® MX 2004: Hands-On Training saving By Garo Green, Lynda Weinman Flash content inserting 2nd 3rd 4th FlashPublisher: plug-in Peachpit Press downloading Pub Date: December 22, 2003 Flash text ISBN: 0-321-20297-X creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Pages: 720 folder management 2nd 3rd 4th 5th folders adding new local root folder 2nd moving files into 2nd 3rd 4th 5th 6th 7th 8th 9th With its powerful combination of visual layout tools, application development features, and code font lists editing support, Dreamweaver 2004 is 12th sure to become the constant companion of many Web changing 2nd 3rd 4th 5th 6th 7th 8th MX 9th 10th 11th developers. Here to get you hands-on with it fast is the definitive project-based training on the font tag topic from one of the master teachers at Linda.com training. Using a combination of projectversus CSS based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you fonts through all the Dreamweaver MX 04 basics: navigating the new interface, creating and changing 2nd 3rd 4th managing Web sites, and linking among pages. You'll learn about frames and forms, cascading font lists style changing sheets,2nd and Fireworks and Flash integration, and gobble up Garo's suggestions about best 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's fonts. [See also text, typography] newest features: dynamic cross-browser validation, improved CSS support, built-in graphics form objects 2nd editing, and more. Throughout, Garo shows you not just how to do something but why you're accessibility 2nd 3rd 4th 5th 6th 7th doing it and the results of your actions. inserting 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th Format Table dialog box 2nd formats for sounds supported by QuickTime plug-in formatting tables with color 2nd 3rd 4th 5th 6th 7th text. [See CSS, typography] forms form objects 2nd inserting 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th Forms panel 2nd jump menus creating 2nd 3rd 4th 5th 6th 7th 8th 9th layout with tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th text fields Set Text of Text Field behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th Validate Form behavior 2nd 3rd 4th 5th Forms panel 2nd Frame Tag Accessibility Attributes dialog box • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Getting Started in Layout Mode dialog box graphics. [See images] grouping panels. [See panel groups] • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] handicapped people. [See accessibility] hash mark (#) nowhere links 2nd head tag (XHTML) highlighted code • in Code view Table of Contents History panel • Index for Undo and Examples Redo operations 2nd 3rd 4th 5th 6th 7th 8th 9th History slider Macromedia® Dreamweaver® MX 2004: Hands-On Training HomeSite/Coder-Style interface ByGaro Green, Lynda Weinman hosting. [See Web hosting services] • HTML Publisher: Peachpit Press (HyperText Markup Language) Pub Date: December 22, 2003 Clean Up Word HTML feature 2nd 3rd 4th 5th 6th 7th Fireworks MX0-321-20297-X 2004 HTML ISBN: updating 2nd Pages: 720 3rd 4th 5th 6th 7th 8th 9th text formatting. [See font tag] versus XHTML 2nd 3rd HTML tables. [See tables] html tag (XHTML) HTML-based pop-up menus With its powerful combination of visual layout tools, application development features, and code attaching to navigation bars with Show Pop-Up Menu behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web editing 2nd 3rd 4th 5th 6th 7th 8th developers. Here to get you hands-on with it fast is the definitive project-based training on the HTML. [See also XHTML] topic from one of the master teachers at Linda.com training. Using a combination of projectHTML/XHTML mode (Page Properties panel) 2nd based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you hyperlinks. [See links] through all the Dreamweaver MX 04 basics: navigating the new interface, creating and HyperText Markup Language. [See HTML] managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] IBM Home Page Reader image maps creating 2nd 3rd 4th 5th 6th 7th image placeholders deleting Image Size dialog box of Contents • Table Image Tag Accessibility • Index Attributes dialog box image-based pop-up menus • Examples editing 2nd 3rd 4th 5th 6th 7thMX 8th2004: 9th Hands-On Training Macromedia® Dreamweaver® images ByGaro Green, Lynda Weinman accessibility 2nd 3rd 4th 5th 6th 7th aligning Publisher: Peachpit Press with tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th Pub Date: 22, 2003 aligning textDecember with background ISBN: images 0-321-20297-X for frames 2nd 3rd 4th 5th 6th 7th 8th Pages: 720 seamless images across frames 2nd 3rd 4th 5th 6th 7th 8th verifying size of centering 2nd 3rd 4th Fireworks MX 2004 integration 2nd attaching HTML-based pop-up menus with Show Pop-Up Menu behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th With its powerful combination of visual layout tools, application development features, and code Design Notes 2nd editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web editing HTML-based pop-up menus 2nd 3rd 4th 5th 6th 7th 8th developers. Here to get you hands-on with it fast is the definitive project-based training on the editing image-based pop-up menus 2nd 3rd 4th 5th 6th 7th 8th 9th topic from one of the master teachers at Linda.com training. Using a combination of projectediting images 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you export settings 2nd through all the Dreamweaver MX 04 basics: navigating the new interface, creating and external image editor preferences 2nd managing Web sites, and linking among pages. You'll learn about frames and forms, cascading importing rollovers 2nd 3rd 4th 5th style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best inserting images 2nd 3rd 4th layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's updating HTML 2nd 3rd 4th 5th 6th 7th 8th 9th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics inserting 2nd 3rd 4th 5th 6th editing, and more. Throughout, Garo shows you not just how to do something but why you're inserting into layers doing it and the results of your actions. links creating 2nd 3rd 4th naming for rollovers replacing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th rollovers. [See rollovers] source files editing spacer.gif files inserting 2nd 3rd 4th tracing images 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Web Photo Album creating 2nd 3rd 4th 5th 6th 7th 8th 9th Import Tabular Data dialog box 2nd options importing rollovers from Fireworks MX 2004 2nd 3rd 4th 5th tab-delimited data to tables 2nd 3rd 4th index.html file importance of 2nd inheritance (CSS) inline elements applying CSS to versus block elements inline style sheets Input Tag Accessibility Attributes dialog box options Insert bar 2nd • • • Table of Contents menu interface of Index object categories 2nd Examples tabbed interface of Macromedia® Dreamweaver® MX 2004: Hands-On Training Insert Calendar dialog box By GaroDiv Green , Lynda Weinman Insert Tag window Insert Fireworks HTML dialog box Insert Flash Button dialog box 2nd Publisher: Peachpit Press Insert Navigation Bar dialog 2nd Pub Date: December 22,box 2003 Insert Rollover Image dialog box ISBN: 0-321-20297-X Insert Table dialog box 2nd 3rd Pages: 720 inserting element (non-breaking space) in tables accessible form objects 2nd 3rd 4th 5th 6th 7th accessible frames 2nd 3rd 4th 5th 6th 7th 8th 9th accessible images 2nd 3rd 4th 5th 6th 7th With its powerful combination of visual layout tools, application development features, and code accessible tables 2nd 3rd 4th 5th editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web code snippets 2nd 3rd 4th 5th developers. Here to get you hands-on with it fast is the definitive project-based training on the editable regions in templates topic from one of the master teachers at Linda.com training. Using a combination of projectFireworks MX 2004 images 2nd 3rd 4th based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Flash content 2nd 3rd 4th through all the Dreamweaver MX 04 basics: navigating the new interface, creating and form objects 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th managing Web sites, and linking among pages. You'll learn about frames and forms, cascading images 2nd 3rd 4th 5th 6th style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best images into layers layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's meta tags 2nd 3rd 4th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics QuickTime content 2nd 3rd 4th editing, and more. Throughout, Garo shows you not just how to do something but why you're rows in tables doing it and the results of your actions. Shockwave content 2nd 3rd 4th 5th spacer.gif files 2nd 3rd 4th tab-delimited data in tables 2nd 3rd 4th text 2nd 3rd text into layers inserting. 2nd [See also creating] [See also importing] installing extensions with Macromedia Extension Manager 2nd 3rd 4th 5th 6th 7th integrated workspace (Windows) integration with Fireworks. [See Fireworks MX 2004 integration] interface Document toolbar 2nd document window 2nd multiple document windows 2nd preset window sizes 2nd 3rd views available Insert bar 2nd menu interface of object categories 2nd tabbed interface of on Macintosh 2nd on Windows 2nd panels 2nd 3rd 4th 5th 6th 7th preferences changing Property Inspector 2nd shortcut keys • • • list of Table of Contents start page 2nd disabling Index Examples workspace setup 2nd Macromedia® Dreamweaver® MX 2004: Hands-On Training changing By Garo style Green , Lynda Weinman internal sheets removing italicPublisher: text Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] JavaScript 2nd and DHTML JavaScript rollovers. [See rollovers] jump menus creating 2nd 3rd 4th 5th 6th 7th 8th 9th • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] keyboard shortcuts. [See shortcut keys] keywords meta tags inserting 2nd 3rd 4th • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] layers 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th converting tables to 2nd 3rd 4th 5th 6th 7th 8th converting to tables 2nd 3rd 4th 5th 6th versus Layout view creating 2nd 3rd • deleting • inserting images into Index Table of Contents inserting textExamples into renaming Macromedia® Dreamweaver® MX 2004: Hands-On Training resizing ByGaro Green, Lynda Weinman selecting • layout cells 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th Peachpit Press 25thPublisher: 26th Pub Date: December 22, 2003 creating layout ofISBN: tables0-321-20297-X planning Pages: 720 layout tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th creating resizing Layout view With its powerful combination of visual layout tools, application development features, and code layout tables and cells 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web 23rd 24th 25th developers. Here to get you hands-on with it fast is the definitive project-based training on the versus converting layers to tables topic from one of the master teachers at Linda.com training. Using a combination of projectlayout. [See also page layout] based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Library items 2nd 3rd 4th 5th 6th 7th 8th through all the Dreamweaver MX 04 basics: navigating the new interface, creating and creating 2nd 3rd 4th 5th 6th managing Web sites, and linking among pages. You'll learn about frames and forms, cascading modifying 2nd 3rd 4th 5th 6th 7th 8th 9th 10th style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best linking layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's external style sheets 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Flash Buttons editing, and more. Throughout, Garo shows you not just how to do something but why you're to sounds 2nd 3rd 4th 5th 6th 7th 8th doing it and the results of your actions. links absolute links 2nd 3rd 4th 5th 6th color schemes 2nd 3rd 4th colors changing creating 2nd 3rd 4th 5th 6th with Point to File feature 2nd 3rd 4th 5th 6th 7th 8th 9th 10th email links creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th image maps creating 2nd 3rd 4th 5th 6th 7th in framesets 2nd 3rd 4th 5th 6th 7th 8th 9th named anchors creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th nowhere links 2nd previewing relative links 2nd 3rd 4th 5th 6th to files creating 2nd 3rd 4th 5th 6th updating lists creating 2nd 3rd 4th 5th listservs local files local root folder 2nd moving files into 2nd 3rd 4th 5th 6th 7th 8th 9th specifiying long descriptions for images 2nd lynda.com technical support • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Macintosh interface on 2nd Macromedia Dreamweaver Exchange. [See Dreamweaver Exchange Web site] Macromedia Dreamweaver MX 2004. [See Dreamweaver MX 2004] Macromedia Extension Manager • installing extensions 3rd 4th 5th 6th 7th Table of2nd Contents Macromedia technical • Indexsupport Manage Sites window 2nd • Examples Map Only view (Files panel) Macromedia® Dreamweaver® MX 2004: Hands-On Training markup. [See XHTML] ByGaro Green, Lynda Weinman Massimo\#213s Corner Web site 2nd 3rd Media Bar Settings dialog box (Internet Explorer) Publisher: media objects Peachpit Press Pub content Date: December 22, 2003 Flash inserting 2nd 3rd 4th ISBN: 0-321-20297-X QuickTime content Pages: 720 inserting 2nd 3rd 4th Shockwave content inserting 2nd 3rd 4th 5th sounds embedding 2nd 3rd 4th 5th With its powerful combination of visual layout tools, application development features, and code formats for editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web linking to 2nd 3rd 4th 5th 6th 7th 8th developers. Here to get you hands-on with it fast is the definitive project-based training on the menu interface topic from one of the master teachers at Linda.com training. Using a combination of projectof Insert bar based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you merging through all the Dreamweaver MX 04 basics: navigating the new interface, creating and table cells managing Web sites, and linking among pages. You'll learn about frames and forms, cascading table columns 2nd 3rd style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best meta tags layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's inserting 2nd 3rd 4th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics modifying editing, and more. Throughout, Garo shows you not just how to do something but why you're frames 2nd 3rd 4th 5th 6th 7th doing it and the results of your actions. Library items 2nd 3rd 4th 5th 6th 7th 8th 9th 10th templates 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th modifying. 2nd [See changing] [See also editing] movies QuickTime content inserting 2nd 3rd 4th moving files to root folder with file browser 2nd 3rd 4th 5th 6th 7th 8th 9th multimedia. [See media objects] multiple document windows 2nd multiple frames seamless background images across 2nd 3rd 4th 5th 6th 7th 8th multiple-event rollovers creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Named Anchor dialog box named anchors creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th naming files • from Files Table panel of Contents • frames 2nd 3rd Index • images Examples for rollovers Macromedia® Dreamweaver® MX 2004: Hands-On Training sites 2nd ByGaro Green, Lynda Weinman targets naming conventions Publisher: Peachpit Press file name extensions Pub Date: December 22, 2003 for files navigation bar rollovers ISBN: 0-321-20297-X creating 2nd720 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th Pages: nesting tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th XHTML pages. [See frames] New CSS Style window 2nd 3rd New Document dialog box 2nd With its powerful combination of visual layout tools, application development features, and code New Editable Region dialog box editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web newsgroups developers. Here to get you hands-on with it fast is the definitive project-based training on the non-breaking space ( ) element topic from one of the master teachers at Linda.com training. Using a combination of projectin tables 2nd based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you deleting 2nd through all the Dreamweaver MX 04 basics: navigating the new interface, creating and inserting managing Web sites, and linking among pages. You'll learn about frames and forms, cascading notation style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best for path structures layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's nowhere links 2nd newest features: dynamic cross-browser validation, improved CSS support, built-in graphics numbered lists. [See ordered lists] editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] object categories for Insert bar 2nd objects form objects 2nd inserting 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th • frames objects 2nd 3rd 4th 5th 6th 7th 8th Table of Contents objects. [See alsoIndex form objects] • obtaining • Examples commands 2nd 3rd 4th Macromedia® Dreamweaver® MX 2004: Hands-On Training online resources ByGaro Green, Lynda Weinman discussion groups Dreamweaver extensions 2nd Publisher: Peachpit Press for XHTML 2nd Pub Date: for XML 2ndDecember 22, 2003 listservs ISBN: 0-321-20297-X third-party Pages: Web 720 sites 2nd 3rd 4th 5th 6th online resources. [See also Web sites] opacity. [See also transparency] Open Browser Window behavior 2nd 3rd 4th 5th 6th 7th 8th 9th opening files With its powerful combination of visual layout tools, application development features, and code from Files panel editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web separate browser windows 2nd 3rd 4th 5th 6th 7th 8th 9th developers. Here to get you hands-on with it fast is the definitive project-based training on the options topic from one of the master teachers at Linda.com training. Using a combination of projectClean Up HTML/XHTML dialog box based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you Code view through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Convert Layers to Table dialog box managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Document toolbar style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best document window layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's Import Tabular Data dialog box newest features: dynamic cross-browser validation, improved CSS support, built-in graphics Input Tag Accessibility Attributes dialog box editing, and more. Throughout, Garo shows you not just how to do something but why you're Reports dialog box doing it and the results of your actions. Sort Table dialog box ordered lists creating 2nd 3rd 4th 5th outlines for table borders creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] page layout Layout view layout tables and cells 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th versus converting layers to tables • of forms Table of Contents with tablesIndex 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th • • tracing images Examples with layers 2nd 3rd 4th 5th 6thMX 7th2004: 8th 9th 10th 11thTraining Macromedia® Dreamweaver® Hands-On converting to tables 2nd 3rd 4th 5th 6th 7th ByGaro Green, Lynda Weinman with tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th converting to layers 2nd 3rd 4th 5th 6th 7th 8th Publisher: Press with tracingPeachpit images 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Date: December 22, 2003 pagePub layout. [See also aligning, positioning] page properties ISBN: 0-321-20297-X setting for CSS Pages: 720 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th Page Properties panel color pickers colors changing 2nd 3rd 4th 5th 6th HTML/XHTML mode With its powerful combination of visual layout tools, application development features, and code Page Properties window editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Page title field (Document toolbar) developers. Here to get you hands-on with it fast is the definitive project-based training on the Page title section (document window) topic from one of the master teachers at Linda.com training. Using a combination of projectpage titles. [See titles] based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you pages through all the Dreamweaver MX 04 basics: navigating the new interface, creating and ***combine with documents*** managing Web sites, and linking among pages. You'll learn about frames and forms, cascading closing before moving style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best pages. [See also files] layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's panel groups 2nd 3rd 4th 5th 6th 7th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics panels 2nd 3rd 4th 5th 6th 7th editing, and more. Throughout, Garo shows you not just how to do something but why you're viewing 2nd doing it and the results of your actions. Parameters dialog box 2nd path structures 2nd 3rd 4th 5th 6th 7th 8th 9th 10th notation for PDF (Portable Document Format) files 2nd 3rd Peachpit Press technical support people with disabilities. [See accessibility] percentage-based tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th combining with fixed-pixel tables 2nd 3rd 4th 5th 6th pixels. [See also fixed-pixel tables] placeholders image placeholders deleting replacing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th planning table layout plug-in Flash plug-in downloading plug-ins downloading QuickTime Point to File feature creating links 2nd 3rd 4th 5th 6th 7th 8th 9th 10th replacing images and placeholders 2nd 3rd 4th 5th 6th 7th 8th 9th 10th pointer rollovers creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th pop-up menus HTML-based pop-up menus attaching with Show Pop-Up Menu behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th • • • editing 2nd 3rd 4th 5th 6th 7th 8th Table of Contents image-based pop-up menus Index editing 2nd 3rd 4th 5th 6th 7th 8th 9th Examples Portable Document Format (PDF) files 2nd 3rd Macromedia® Dreamweaver® MX 2004: Hands-On Training positioning. [See also page layout] By Garo Green, Lynda Weinman preferences changing CSS Publisher: Peachpit Press setting Pub Date:2nd December 22, 2003 external image editor preferences ISBN: 0-321-20297-X setting 2nd Pages: 720 FTP preferences setting 2nd 3rd 4th 5th Preferences dialog box enabling accessiblity preferences 2nd 3rd presentation With its structure powerful combination of visual layout tools, application development features, and code versus editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Preview in Browser preference developers. Here to get you hands-on with it fast is the definitive project-based training on the setting 2nd topic from one of the master teachers at Linda.com training. Using a combination of projectPreview/Debug menu (Document toolbar) based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you previewing through all the Dreamweaver MX 04 basics: navigating the new interface, creating and files 2nd managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Flash text 2nd style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best links layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's programmers newest features: dynamic cross-browser validation, improved CSS support, built-in graphics opinion of Dreamweaver MX 2004 editing, and more. Throughout, Garo shows you not just how to do something but why you're programming code. [See code] doing it and the results of your actions. Project VII Web site properties of frames Property Inspector 2nd Property inspector viewing 2nd Property Inspector panel links creating 2nd 3rd 4th 5th 6th [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q] [R ] [S] [T] [U] [V] [W] [X] [Y] Quick Tag Editor 2nd 3rd 4th 5th 6th 7th QuickTime content inserting 2nd 3rd 4th QuickTime plug-in • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Redo and Undo operations with History panel 2nd 3rd 4th 5th 6th 7th 8th 9th Refresh Design view button (Document toolbar) refreshing Site panel relative links 2ndTable 3rd 4th 6th 7th • of 5th Contents Relevant CSS panel 2nd 3rd 4th • Index • editing CSS with 2nd 3rd 4th 5th 6th 7th Examples remote files Macromedia® Dreamweaver® MX 2004: Hands-On Training removing ByGaro Green, Lynda Weinman internal style sheets renaming Publisher: Peachpit Press layers Pub Date: December 22, 2003 replacing images and 0-321-20297-X placeholders 2nd 3rd 4th 5th 6th 7th 8th 9th 10th ISBN: text Pages: 720 with Find and Replace feature 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Reports dialog box options resizing layers With its powerful combination of visual layout tools, application development features, and code layout tables editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web resources developers. Here to get you hands-on with it fast is the definitive project-based training on the Dreamweaver extensions 2nd topic from one of the master teachers at Linda.com training. Using a combination of projectfor XHTML 2nd based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you for XML 2nd through all the Dreamweaver MX 04 basics: navigating the new interface, creating and resources. [See online resources, Web sites] managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Results dialog box style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best rollovers layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's creating 2nd 3rd 4th 5th 6th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics with Flash text editing, and more. Throughout, Garo shows you not just how to do something but why you're CSS rollovers 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd doing it and the results of your actions. dimensions of 2nd Flash Buttons creating 2nd 3rd 4th 5th 6th 7th 8th 9th importing from Fireworks MX 2004 2nd 3rd 4th 5th multiple-event rollovers creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th navigation bar rollovers creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th pointer rollovers creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th states of Swap Image behavior root folder moving files to rounded-corner tables creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th Roundtrip XHTML 2nd rows in tables inserting rules (CSS) 2nd • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Save As Template dialog box saving documents files error messages • Flash ButtonsTable of Contents frames 2nd 3rd 4th 5th 6th 7th 8th 9th 10th Index • framesets 2ndExamples 3rd 4th 5th 6th 7th 8th 9th 10th • site maps Macromedia® Dreamweaver® MX 2004: Hands-On Training screen readers ByGaro Green, Lynda Weinman IBM Home Page Reader scripts. [See also behaviors] Publisher: Peachpit Press seamless background images Pub Date: December across frames 2nd 3rd22, 4th2003 5th 6th 7th 8th search engines ISBN: 0-321-20297-X metaPages: tags 720 inserting 2nd 3rd 4th searches Find and Replace feature 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Select Image Source dialog box selecting With its powerful combination of visual layout tools, application development features, and code external editors 2nd editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web files for moving developers. Here to get you hands-on with it fast is the definitive project-based training on the in Design view topic from one of the master teachers at Linda.com training. Using a combination of projectappearing in Code view based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you layers through all the Dreamweaver MX 04 basics: navigating the new interface, creating and table cells managing Web sites, and linking among pages. You'll learn about frames and forms, cascading tables style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best templates 2nd layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's selectors (CSS) newest features: dynamic cross-browser validation, improved CSS support, built-in graphics server. [See Web server] editing, and more. Throughout, Garo shows you not just how to do something but why you're Set Color Scheme dialog box doing it and the results of your actions. Set Text of Status Bar behavior 2nd 3rd 4th 5th 6th 7th 8th Set Text of Text Field behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th setting. [See changing] SGML (Standard Generalized Markup Language) Sharpen tool Shockwave content inserting 2nd 3rd 4th 5th shortcut keys list of Show Pop-Up Menu behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Show Pop-Up Menu dialog box 2nd signing up with Tripod Web hosting service 2nd 3rd 4th 5th 6th 7th Site Definition window 2nd 3rd 4th 5th 6th 7th 8th 9th site management creating site maps 2nd 3rd 4th 5th 6th defining sites 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th file and folder management 2nd 3rd 4th 5th file browser moving files with 2nd 3rd 4th 5th 6th 7th 8th 9th local root folder 2nd naming sites path structures 2nd 3rd 4th 5th 6th 7th 8th 9th 10th notation for relative and absolute links 2nd 3rd 4th 5th 6th Site Map view (Files panel) site maps creating 2nd 3rd 4th 5th 6th Site panel refreshing • • uploading files 2nd 3rd 4th 5th Table of Contents visual display of local root folders Index site reports 2nd 3rd 4th 5th • Examples sites Macromedia® Dreamweaver® MX 2004: Hands-On Training creating 2nd 3rd 4th 5th 6th ByGaro Green , Lynda Weinman defining 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th naming 2nd sitesPublisher: maps Peachpit Press saving Pub Date: December 22, 2003 sites. [See also Web sites] ISBN: 0-321-20297-X size Pages: 720 of background images verifying of frames settings for verifying With powerful combination of visual layout tools, application development features, and code size of its document window editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web changing 2nd 3rd developers. Here to get you hands-on with it fast is the definitive project-based training on the size of text topic from one of the master teachers at Linda.com training. Using a combination of projectchanging 2nd based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you snippets through all the Dreamweaver MX 04 basics: navigating the new interface, creating and inserting 2nd 3rd 4th 5th managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Sort Table dialog box style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best options layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's sorting newest features: dynamic cross-browser validation, improved CSS support, built-in graphics table contents 2nd 3rd 4th 5th editing, and more. Throughout, Garo shows you not just how to do something but why you're sounds doing it and the results of your actions. embedding 2nd 3rd 4th 5th formats for linking to 2nd 3rd 4th 5th 6th 7th 8th source code. 2nd [See code] [See XHTML] source files (images) editing spacer.gif files inserting 2nd 3rd 4th spacing between table cells 2nd specificity (CSS) Split view 2nd Standard Generalized Markup Language (SGML) start page 2nd 3rd disabling states of rollovers status bar Set Text of Status Bar behavior 2nd 3rd 4th 5th 6th 7th 8th structure versus presentation Style Definition window style sheets. 2nd [See CSS] styles creating types of support. [See technical support] Swap Image behavior Swap Image dialog box 2nd SWF file format switching • • syntax • Table of Contents between Code view and Design view Index Examples XHTML tags Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] tab-delimited data inserting in tables 2nd 3rd 4th tabbed interface of Insert bar Table dialog box table tag • Table of Contents tables 2nd 3rd 4th • Index • element (non-breaking space) 2nd Examples deleting 2nd Macromedia® Dreamweaver® MX 2004: Hands-On Training inserting ByGaro Green, Lynda Weinman accessibility 2nd 3rd 4th 5th aligning images and text with 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th Publisher: Peachpit Press borders Pub Date: December 22,5th 2003 changing 2nd 3rd 4th 6th 7th 8th 9th 10th 11th 12th creating for 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th ISBN: outlines 0-321-20297-X cells Pages: 720 empty cells merging selecting spacing between 2nd width settings 2nd 3rd 4th 5th With its powerful combination of visual layout tools, application development features, and code columns editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web merging 2nd 3rd developers. Here to get you hands-on with it fast is the definitive project-based training on the width settings 2nd 3rd 4th 5th topic from one of the master teachers at Linda.com training. Using a combination of projectconverting layers to 2nd 3rd 4th 5th 6th based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you versus Layout view through all the Dreamweaver MX 04 basics: navigating the new interface, creating and converting to layers 2nd 3rd 4th 5th 6th 7th 8th managing Web sites, and linking among pages. You'll learn about frames and forms, cascading creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best formatting layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's with color 2nd 3rd 4th 5th 6th 7th newest features: dynamic cross-browser validation, improved CSS support, built-in graphics formatting text in 2nd 3rd 4th 5th editing, and more. Throughout, Garo shows you not just how to do something but why you're laying out forms with 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th doing it and the results of your actions. layout tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th nesting 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th percentage-based tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th combining with fixed-pixel tables 2nd 3rd 4th 5th 6th planning layout rounded-corner tables creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th rows inserting selecting sorting contents 2nd 3rd 4th 5th tab-delimited data importing 2nd 3rd 4th Tag Chooser 2nd 3rd 4th 5th Tag Editor 2nd 3rd 4th 5th Tag Selector (document window) tags div 2nd contextual class selectors font versus CSS table td tr tags (XHTML) body for typography list of 2nd • • • head html Table of Contents Index meta 2nd 3rd 4th Examples syntax basics Macromedia® Dreamweaver® MX 2004: Hands-On Training title ByGaro , Lynda Weinman Web Green sites for information tags (XHTML). [See also code] targets Publisher: Peachpit Press for frameset links 2nd 22, 3rd 2003 4th 5th 6th 7th Pub Date: December naming ISBN: 0-321-20297-X td tag Pages: 720 technical support Dreamweaver MX 2004 emerging issues lynda.com technical support Macromedia technical support Peachpit Press technical support With its powerful combination of visual layout tools, application development features, and code templates editing support, Dreamweaver MX10th 2004 sure to 14th become the constant companion of many Web creating 2nd 3rd 4th 5th 6th 7th 8th 9th 11this12th 13th developers. Here to get you hands-on with it fast is the 15th definitive project-based training on the modifying 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th topic from one of the master teachers at Linda.com training. Using a combination of projectselecting 2nd based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you troubleshooting through all the Dreamweaver MX 04 basics: navigating the new interface, creating and text managing Web sites, and linking among pages. You'll learn about frames and forms, cascading adding 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best aligning 2nd 3rd 4th 5th 6th layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's with images newest dynamic cross-browser improved CSS support, built-in graphics withfeatures: tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10thvalidation, 11th 12th 13th editing, and more. Throughout, Garo shows you not just how to do something but why you're alternate text for images 2nd 3rd doing it and the results of your actions. as bold changing as italic changing centering 2nd 3rd 4th color changing setting color schemes 2nd 3rd 4th colors changing Flash text creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th fonts changing 2nd 3rd 4th formatting. [See CSS, typography] in tables formatting 2nd 3rd 4th 5th inserting 2nd 3rd inserting into layers links creating 2nd long descriptions for images 2nd replacing with Find and Replace feature 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th setting in status bar Set Text of Status Bar behavior 2nd 3rd 4th 5th 6th 7th 8th setting in text fields Set Text of Text Field behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th • size Table of Contents changing 2nd • text fields • Index Examples Set Text of Text Field behavior 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th Macromedia® Dreamweaver® MX 2004: Hands-On Training text. [See also fonts, typography] By Garo Green Weinman third-party Web, Lynda sites 2nd 3rd 4th 5th 6th title tag (XHTML) titlesPublisher: Peachpit Press for framesets Pub Date: December 22, 2003 of documents ISBN: 0-321-20297-X creating Pages: 720 tooltips tr tag tracing images 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th transparency of tracing images With setting its powerful combination of visual layout tools, application development features, and code 2nd editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web transparency. [See also opacity] developers. Here to get you hands-on with it fast is the definitive project-based training on the Tripod Web hosting service 2nd 3rd topic from one of the master teachers at Linda.com training. Using a combination of projectsigning up 2nd 3rd 4th 5th 6th 7th based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you troubleshooting through all the Dreamweaver MX 04 basics: navigating the new interface, creating and Color panel managing Web sites, and linking among pages. You'll learn about frames and forms, cascading defining sites style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best deleting layers layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's error messages newest features: dynamic cross-browser validation, improved CSS support, built-in graphics moving files to root folder editing, and more. Throughout, Garo shows you not just how to do something but why you're saving files doing it and the results of your actions. features removed from Dreamweaver MX 2004 FTP error log previewing files 2nd site reports 2nd 3rd 4th 5th templates tracing images viewing file extensions viewing Property inspector 2nd troubleshooting. [See also technical support] turning on. [See enabling] type. [See text, typography] typefaces. [See fonts] typography adding text 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th aligning text 2nd 3rd 4th 5th 6th with images color schemes 2nd 3rd 4th disabling default CSS formatting 2nd Flash text creating 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th font lists changing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th font tag versus CSS lists creating 2nd 3rd 4th 5th text in tables formatting 2nd 3rd 4th 5th XHTML tags • list of 2nd Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Undo and Redo operations with History panel 2nd 3rd 4th 5th 6th 7th 8th 9th undocking panel groups unordered lists • creating 2nd 3rd 4thof5th Table Contents Update Library Items dialog box 2nd • Index Update Pages dialog box 2nd 3rd • Examples Update TemplateDreamweaver® Files dialog box 2nd Macromedia® MX 2004: Hands-On Training updating ByGaro Green, Lynda Weinman Fireworks MX 2004 HTML 2nd 3rd 4th 5th 6th 7th 8th 9th links to files Publisher: [See Peachpit Press templates] templates. modifying Pub Date: 22, 2003 updating pagesDecember automatically. [See Library items, templates] uploading ISBN: 0-321-20297-X files Pages: 2nd 3rd720 4th 5th 6th 7th FTP preferences for 2nd 3rd 4th URLs. [See Web sites] With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Validate Form behavior 2nd 3rd 4th 5th viewing document window external style sheets disabling • file extensions Table of Contents Property inspector Index2nd • source code Examples • XHTML 2nd 3rd 4th 5th 6th 7thMX 8th2004: 9th 10th Macromedia® Dreamweaver® Hands-On Training viewing. [See also Code view, Design view, Split view] ByGaro Green, Lynda Weinman views for document window Publisher: Peachpit Press visibility Date: December 22, 2003 ofPub form objects visual impairment. [See accessibility] ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] W3C accessiblity guidelines 2nd Web applications Web hosting services Tripod 2nd 3rd signing up 2nd 3rd 4th 5th 6th 7th Web Photo Albums • Table of Contents Create Web Photo • IndexAlbum command 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th Web server • Examples uploading files. [See uploadingMX files] Macromedia® Dreamweaver® 2004: Hands-On Training Web sites ByGaro Green, Lynda Weinman Community MX 2nd CSS1 and CSS2 recommendations Publisher: Peachpit downloading plug-insPress Pub Date: December 22,2nd 2003 Dreamweaver Exchange downloading from 2nd 3rd 4th 5th 6th ISBN: 0-321-20297-X Dreamweaver extensions information 2nd Pages: 720 Dreamweaver MX 2004 emerging issues DWFAQ.com 2nd DWXZONE.com 2nd lynda.com technical support Macromedia technical support With its powerful combination of visual layout tools, application development features, and code Massimo\#213s Corner 2nd 3rd editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web Project VII developers. Here to get you hands-on with it fast is the definitive project-based training on the W3C accessibliity guidelines 2nd topic from one of the master teachers at Linda.com training. Using a combination of projectXHTML information 2nd based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you XHTML tag information through all the Dreamweaver MX 04 basics: navigating the new interface, creating and XML information 2nd managing Web sites, and linking among pages. You'll learn about frames and forms, cascading Yaromat 2nd 3rd style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best Web sites. 2nd [See also sites] [See also online resources] layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's What You See Is What You Get (WYSIWYG) newest features: dynamic cross-browser validation, improved CSS support, built-in graphics width settings editing, and more. Throughout, Garo shows you not just how to do something but why you're table columns and cells 2nd 3rd 4th 5th doing it and the results of your actions. Window size menu (document window) Window Sizes menu (document window) 2nd 3rd Windows interface on 2nd multiple document windows 2nd windows opening separate browser windows 2nd 3rd 4th 5th 6th 7th 8th 9th Windows workspace setup 2nd Word HTML Clean Up Word HTML feature 2nd 3rd 4th 5th 6th 7th workspace setup changing in Windows 2nd WYSIWYG (What You See Is What You Get) [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] XHTML (eXtensible HyperText Markup Language) and DHTML Clean Up XHTML feature 2nd 3rd 4th 5th 6th 7th 8th code snippets inserting 2nd 3rdof 4th 5th Table Contents • • description ofIndex 2nd • editing Examples with QuickDreamweaver® Tag Editor 2nd 3rd 5th 6th 7th Macromedia® MX4th 2004: Hands-On Training with Tag Editor and Tag Chooser 2nd 3rd 4th 5th ByGaro Green, Lynda Weinman editing in Code view 2nd 3rd 4th 5th 6th example code 2nd 3rd 4th Publisher: Peachpit need for learning 2ndPress Pub Date: December 22, 2003 online resources for 2nd Roundtrip 2nd ISBN:XHTML 0-321-20297-X tags.Pages: [See tags (XHTML)] 720 typography tags list of 2nd versus HTML 2nd 3rd viewing 2nd 3rd 4th 5th 6th 7th 8th 9th 10th Web sites for information With its powerful combination of visual layout tools, application development features, and code XML relationship with editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web XHTML documents developers. Here to get you hands-on with it fast is the definitive project-based training on the creating topic from one of the master teachers at Linda.com training. Using a combination of projectXHTML Frameset DTD based lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you XHTML namespace through all the Dreamweaver MX 04 basics: navigating the new interface, creating and in XHTML code managing Web sites, and linking among pages. You'll learn about frames and forms, cascading XHTML pages style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best nesting. [See frames] layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's XHTML Strict DTD newest features: dynamic cross-browser validation, improved CSS support, built-in graphics XHTML tags editing, and more. Throughout, Garo shows you not just how to do something but why you're adding CSS to 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th doing it and the results of your actions. XHTML Transitional DTD XHTML. 2nd [See also code] [See also HTML] XML (eXtensible Markup Language) 2nd online resources 2nd XHTML relationship with XML declaration in XHTML code [SYMBOL] [A] [B] [C ] [D] [E] [F] [G] [H] [I ] [J] [K ] [L] [M] [N] [O ] [P ] [Q ] [R ] [S] [T] [U] [V] [W] [X] [Y] Yaromat Web site 2nd 3rd • Table of Contents • Index • Examples Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720 With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, and more. Throughout, Garo shows you not just how to do something but why you're doing it and the results of your actions. </div> </div> </div> <div class="row hidden-xs"> <div class="col-md-12"> <h2></h2> <hr /> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-magic.html"> <img src="https://epdf.tips/img/300x300/macromedia-dreamweaver-mx-2004-magic_5b6be30fb7d7bc2341bc392e.jpg" alt="Macromedia Dreamweaver MX 2004 Magic" /> <h3 class="note-title">Macromedia Dreamweaver MX 2004 Magic</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-dreamweaver-mx-2004-magic.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-demystified.html"> <img src="https://epdf.tips/img/300x300/macromedia-dreamweaver-mx-2004-demystified_5b4a911bb7d7bc5e7af24d94.jpg" alt="Macromedia Dreamweaver MX 2004 Demystified" /> <h3 class="note-title">Macromedia Dreamweaver MX 2004 Demystified</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-dreamweaver-mx-2004-demystified.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/-macromedia-dreamweaver-mx.html"> <img src="https://epdf.tips/img/300x300/-macromedia-dreamweaver-mx_5b97c4bdb7d7bcfc70cc6246.jpg" alt="Самоучитель Macromedia Dreamweaver MX" /> <h3 class="note-title">Самоучитель Macromedia Dreamweaver MX</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/-macromedia-dreamweaver-mx.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-.html"> <img src="https://epdf.tips/img/300x300/macromedia-dreamweaver-mx-2004-_5c0b3bddb7d7bcfb22094dc6.jpg" alt="Macromedia Dreamweaver MX 2004 в подлинике" /> <h3 class="note-title">Macromedia Dreamweaver MX 2004 в подлинике</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-dreamweaver-mx-2004-.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-web-application-recipes.html"> <img src="https://epdf.tips/img/300x300/macromedia-dreamweaver-mx-2004-web-application-rec_5a63de30b7d7bcea6639a07b.jpg" alt="Macromedia Dreamweaver MX 2004 Web Application Recipes" /> <h3 class="note-title">Macromedia Dreamweaver MX 2004 Web Application Recipes</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-dreamweaver-mx-2004-web-application-recipes.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mx-2004-solutions.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx-2004-solutions_5b97c4d6b7d7bcfd708b88ff.jpg" alt="Dreamweaver MX 2004 Solutions" /> <h3 class="note-title">Dreamweaver MX 2004 Solutions</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mx-2004-solutions.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mx-2004.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx-2004_5adeb633b7d7bc1e0d67cd4d.jpg" alt="Dreamweaver MX 2004" /> <h3 class="note-title">Dreamweaver MX 2004</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mx-2004.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mx-2004-bible88a976f3976d45d6e9e86b9c686d1fae44989.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx-2004-bible_5bfb0e81b7d7bcf41f503f83.jpg" alt="Dreamweaver MX 2004 Bible" /> <h3 class="note-title">Dreamweaver MX 2004 Bible</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mx-2004-bible88a976f3976d45d6e9e86b9c686d1fae44989.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/beginning-dreamweaver-mx-2004.html"> <img src="https://epdf.tips/img/300x300/beginning-dreamweaver-mx-2004_5b58ca12b7d7bcad3874f220.jpg" alt="Beginning Dreamweaver MX 2004" /> <h3 class="note-title">Beginning Dreamweaver MX 2004</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/beginning-dreamweaver-mx-2004.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mx-2004-bible.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx-2004-bible_5ab6eac4b7d7bcb11aa4914a.jpg" alt="Dreamweaver MX 2004 Bible" /> <h3 class="note-title">Dreamweaver MX 2004 Bible</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mx-2004-bible.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-studio-mx-2004-bible.html"> <img src="https://epdf.tips/img/300x300/macromedia-studio-mx-2004-bible_5a49ae51b7d7bc506bddedb0.jpg" alt="Macromedia Studio MX 2004 Bible" /> <h3 class="note-title">Macromedia Studio MX 2004 Bible</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-studio-mx-2004-bible.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/sams-teach-yourself-macromedia-dreamweaver-mx-2004-in-24-hours.html"> <img src="https://epdf.tips/img/300x300/sams-teach-yourself-macromedia-dreamweaver-mx-2004_5afad022b7d7bc6524a06ec7.jpg" alt="Sams teach yourself Macromedia Dreamweaver MX 2004 in 24 hours" /> <h3 class="note-title">Sams teach yourself Macromedia Dreamweaver MX 2004 in 24 hours</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/sams-teach-yourself-macromedia-dreamweaver-mx-2004-in-24-hours.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-dynamic-applications-advanced-training-from-the-source.html"> <img src="https://epdf.tips/img/300x300/macromedia-dreamweaver-mx-dynamic-applications-adv_5a49ac35b7d7bc506bdded90.jpg" alt="Macromedia Dreamweaver Mx Dynamic Applications: Advanced Training from the Source" /> <h3 class="note-title">Macromedia Dreamweaver Mx Dynamic Applications: Advanced Training from the Source</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-dreamweaver-mx-dynamic-applications-advanced-training-from-the-source.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/aspnet-web-development-with-macromedia-dreamweaver-mx-2004.html"> <img src="https://epdf.tips/img/300x300/aspnet-web-development-with-macromedia-dreamweaver_5a45769bb7d7bc2c74dd2818.jpg" alt="ASP.NET Web Development with Macromedia Dreamweaver MX 2004" /> <h3 class="note-title">ASP.NET Web Development with Macromedia Dreamweaver MX 2004</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/aspnet-web-development-with-macromedia-dreamweaver-mx-2004.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/coldfusion-web-development-with-macromedia-dreamweaver-mx-2004.html"> <img src="https://epdf.tips/img/300x300/coldfusion-web-development-with-macromedia-dreamwe_5a4577a5b7d7bc2d74408dce.jpg" alt="ColdFusion Web Development with Macromedia Dreamweaver MX 2004" /> <h3 class="note-title">ColdFusion Web Development with Macromedia Dreamweaver MX 2004</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/coldfusion-web-development-with-macromedia-dreamweaver-mx-2004.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-flash-mx-2004-.html"> <img src="https://epdf.tips/img/300x300/macromedia-flash-mx-2004-_5b965b9bb7d7bc1230f184ea.jpg" alt="Macromedia Flash MX 2004. Самоучитель" /> <h3 class="note-title">Macromedia Flash MX 2004. Самоучитель</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-flash-mx-2004-.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-studio-mx-2004-training-from-the-source.html"> <img src="https://epdf.tips/img/300x300/macromedia-studio-mx-2004-training-from-the-source_5a49aeaeb7d7bc506bddedb3.jpg" alt="Macromedia Studio MX 2004: Training from the Source" /> <h3 class="note-title">Macromedia Studio MX 2004: Training from the Source</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-studio-mx-2004-training-from-the-source.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-flash-mx-2004-actionscript-training-from-the-source.html"> <img src="https://epdf.tips/img/300x300/macromedia-flash-mx-2004-actionscript-training-fro_5a599ffbb7d7bcf00c2fa627.jpg" alt="Macromedia Flash MX 2004 ActionScript: Training from the Source" /> <h3 class="note-title">Macromedia Flash MX 2004 ActionScript: Training from the Source</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-flash-mx-2004-actionscript-training-from-the-source.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mx.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx_5b03b1fab7d7bc766941cbc0.jpg" alt="Dreamweaver MX" /> <h3 class="note-title">Dreamweaver MX</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mx.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mx627969916a90ecdff7226a1865b22fcc18153.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx_5c0adfacb7d7bc6215587a83.jpg" alt="Dreamweaver MX" /> <h3 class="note-title">Dreamweaver MX</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mx627969916a90ecdff7226a1865b22fcc18153.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-dreamweaver-8-training-from-the-source.html"> <img src="https://epdf.tips/img/300x300/macromedia-dreamweaver-8-training-from-the-source_5a72768ab7d7bc500ad601e4.jpg" alt="Macromedia Dreamweaver 8: Training from the Source" /> <h3 class="note-title">Macromedia Dreamweaver 8: Training from the Source</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-dreamweaver-8-training-from-the-source.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mxb9bf426487f919a055f941a5867bdad936708.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx_5c0c533fb7d7bcfd025a40ee.jpg" alt="Dreamweaver MX" /> <h3 class="note-title">Dreamweaver MX</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mxb9bf426487f919a055f941a5867bdad936708.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/special-edition-using-macromedia-studio-mx-2004.html"> <img src="https://epdf.tips/img/300x300/special-edition-using-macromedia-studio-mx-2004_5b5d94b8b7d7bc3e2e12e649.jpg" alt="Special Edition Using Macromedia Studio MX 2004" /> <h3 class="note-title">Special Edition Using Macromedia Studio MX 2004</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/special-edition-using-macromedia-studio-mx-2004.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-flash-mx-2004-actionscript-bible.html"> <img src="https://epdf.tips/img/300x300/macromedia-flash-mx-2004-actionscript-bible_5b52aa26b7d7bcc501de0a96.jpg" alt="Macromedia Flash MX 2004 ActionScript Bible" /> <h3 class="note-title">Macromedia Flash MX 2004 ActionScript Bible</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-flash-mx-2004-actionscript-bible.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/design-and-deploy-websites-with-macromedia-dreamweaver-mx-2004-and-contribute-3-.html"> <img src="https://epdf.tips/img/300x300/design-and-deploy-websites-with-macromedia-dreamwe_5a3db612b7d7bc70565fff3a.jpg" alt="Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source" /> <h3 class="note-title">Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/design-and-deploy-websites-with-macromedia-dreamweaver-mx-2004-and-contribute-3-.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/show-me-macromedia-flash-mx-2004.html"> <img src="https://epdf.tips/img/300x300/show-me-macromedia-flash-mx-2004_5b4f14ceb7d7bc981760c72c.jpg" alt="Show Me Macromedia® Flash MX 2004" /> <h3 class="note-title">Show Me Macromedia® Flash MX 2004</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/show-me-macromedia-flash-mx-2004.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mx-2004-the-missing-manual61f18edb61ed83037c451fdf27f00b2050184.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx-2004-the-missing-manual_5b75b771b7d7bc3d2fdbd0d3.jpg" alt="Dreamweaver MX 2004: The Missing Manual" /> <h3 class="note-title">Dreamweaver MX 2004: The Missing Manual</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mx-2004-the-missing-manual61f18edb61ed83037c451fdf27f00b2050184.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-flash-mx-professional-2004-973fc611fa2e13ade8a4c0ba889f8b5f84338.html"> <img src="https://epdf.tips/img/300x300/macromedia-flash-mx-professional-2004-_5b9b837eb7d7bc0113768b9e.jpg" alt="Macromedia Flash MX Professional 2004. Полное руководство" /> <h3 class="note-title">Macromedia Flash MX Professional 2004. Полное руководство</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-flash-mx-professional-2004-973fc611fa2e13ade8a4c0ba889f8b5f84338.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-flash-mx-professional-2004-.html"> <img src="https://epdf.tips/img/300x300/macromedia-flash-mx-professional-2004-_5b9b8378b7d7bcfd12c5c1c3.jpg" alt="Macromedia Flash MX Professional 2004. Полное руководство" /> <h3 class="note-title">Macromedia Flash MX Professional 2004. Полное руководство</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-flash-mx-professional-2004-.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/macromedia-flash-mx-2004-game-programming.html"> <img src="https://epdf.tips/img/300x300/macromedia-flash-mx-2004-game-programming_5a8b66c1b7d7bc4412fbab04.jpg" alt="Macromedia Flash MX 2004 Game Programming" /> <h3 class="note-title">Macromedia Flash MX 2004 Game Programming</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/macromedia-flash-mx-2004-game-programming.html">Read more</a> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-xs-12"> <div class="panel-recommend panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">Recommend Documents</h4> </div> <div class="panel-body"> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-magic.html"> <img src="https://epdf.tips/img/60x80/macromedia-dreamweaver-mx-2004-magic_5b6be30fb7d7bc2341bc392e.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-magic.html"> Macromedia Dreamweaver MX 2004 Magic </a> </label> <div class="note-meta"> <div class="note-desc">Macromedia Dreamweaver MX 2004 Magic • Table of Contents Macromedia® Dreamweaver® MX 2004 Magic ByMassimo Foti, Ange...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-demystified.html"> <img src="https://epdf.tips/img/60x80/macromedia-dreamweaver-mx-2004-demystified_5b4a911bb7d7bc5e7af24d94.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-demystified.html"> Macromedia Dreamweaver MX 2004 Demystified </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/-macromedia-dreamweaver-mx.html"> <img src="https://epdf.tips/img/60x80/-macromedia-dreamweaver-mx_5b97c4bdb7d7bcfc70cc6246.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/-macromedia-dreamweaver-mx.html"> Самоучитель Macromedia Dreamweaver MX </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-.html"> <img src="https://epdf.tips/img/60x80/macromedia-dreamweaver-mx-2004-_5c0b3bddb7d7bcfb22094dc6.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-.html"> Macromedia Dreamweaver MX 2004 в подлинике </a> </label> <div class="note-meta"> <div class="note-desc">Владимир Дронов M a c r o m e d i a D Г5 r e a m w e a v e r Владимир Дронов • Macromedia D r e a m...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-web-application-recipes.html"> <img src="https://epdf.tips/img/60x80/macromedia-dreamweaver-mx-2004-web-application-rec_5a63de30b7d7bcea6639a07b.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/macromedia-dreamweaver-mx-2004-web-application-recipes.html"> Macromedia Dreamweaver MX 2004 Web Application Recipes </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/dreamweaver-mx-2004-solutions.html"> <img src="https://epdf.tips/img/60x80/dreamweaver-mx-2004-solutions_5b97c4d6b7d7bcfd708b88ff.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/dreamweaver-mx-2004-solutions.html"> Dreamweaver MX 2004 Solutions </a> </label> <div class="note-meta"> <div class="note-desc">Dreamweaver MX 2004 Solutions This page intentionally left blank Dreamweaver MX 2004 Solutions ® E t h a n W...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/dreamweaver-mx-2004.html"> <img src="https://epdf.tips/img/60x80/dreamweaver-mx-2004_5adeb633b7d7bc1e0d67cd4d.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/dreamweaver-mx-2004.html"> Dreamweaver MX 2004 </a> </label> <div class="note-meta"> <div class="note-desc">SAVVY Dreamweaver MX 2004 This page intentionally left blank SAVVY Dreamweaver MX 2004 ® CHRISTIAN CRUMLISH |...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/dreamweaver-mx-2004-bible88a976f3976d45d6e9e86b9c686d1fae44989.html"> <img src="https://epdf.tips/img/60x80/dreamweaver-mx-2004-bible_5bfb0e81b7d7bcf41f503f83.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/dreamweaver-mx-2004-bible88a976f3976d45d6e9e86b9c686d1fae44989.html"> Dreamweaver MX 2004 Bible </a> </label> <div class="note-meta"> <div class="note-desc">Dreamweaver MX 2004 Bible ® Joseph W. Lowery Dreamweaver® MX 2004 Bible Published by Wiley Publishing, Inc. 10475 Cro...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/beginning-dreamweaver-mx-2004.html"> <img src="https://epdf.tips/img/60x80/beginning-dreamweaver-mx-2004_5b58ca12b7d7bcad3874f220.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/beginning-dreamweaver-mx-2004.html"> Beginning Dreamweaver MX 2004 </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/dreamweaver-mx-2004-bible.html"> <img src="https://epdf.tips/img/60x80/dreamweaver-mx-2004-bible_5ab6eac4b7d7bcb11aa4914a.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/dreamweaver-mx-2004-bible.html"> Dreamweaver MX 2004 Bible </a> </label> <div class="note-meta"> <div class="note-desc">Dreamweaver MX 2004 Bible ® Joseph W. Lowery Dreamweaver MX 2004 Bible ® Dreamweaver MX 2004 Bible ® Joseph W. Lo...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://epdf.tips/report/macromedia-dreamweaver-mx-2004-hands-on-training" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Macromedia Dreamweaver MX 2004 Hands-On Training"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6Lemmz0UAAAAAANSnNH_YtG0406jaTUcUP7mxrLr"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div> </div> </div> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 EPDF.TIPS. All rights reserved. <div class="pull-right"> <a href="https://epdf.tips/about">About Us</a> | <a href="https://epdf.tips/privacy">Privacy Policy</a> | <a href="https://epdf.tips/term">Terms of Service</a> | <a href="https://epdf.tips/copyright">Copyright</a> | <a href="https://epdf.tips/dmca">DMCA</a> | <a href="https://epdf.tips/contact">Contact Us</a> | <a href="https://epdf.tips/cookie_policy">Cookie Policy</a> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close">×</button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://epdf.tips/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> Remember me </label> <label class="pull-right"><a href="https://epdf.tips/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> <hr style="margin-top: 15px;" /> <a href="https://epdf.tips/login/facebook" class="btn btn-facebook btn-block"> Login with Facebook</a> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111550345-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-111550345-1'); </script> <script src="https://epdf.tips/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://epdf.tips/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://epdf.tips/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="EPDFTIPS_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://epdf.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_EPDFTIPS_cookie_box();return false;">Agree & close</a> </div> <script> function accept_EPDFTIPS_cookie_box() { document.cookie = "EPDFTIPS_cookie_box_viewed=1;max-age=15768000;path=/"; hide_EPDFTIPS_cookie_box(); } function hide_EPDFTIPS_cookie_box() { var cb = document.getElementById('EPDFTIPS_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var EPDFTIPS_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('EPDFTIPS_cookie_box_viewed'); if (EPDFTIPS_cookie_box_viewed) { hide_EPDFTIPS_cookie_box(); } })(); </script>  </body> </html>