•
Table of Contents
•
Index
•
Examples
Macromedia® Dreamweaver® MX 2004: Hands-On Training ByGaro Green, Lynda Weinman
Publisher: Peachpit Press Pub Date: December 22, 2003 ISBN: 0-321-20297-X Pages: 720
With its powerful combination of visual layout tools, application development features, and code editing support, Dreamweaver MX 2004 is sure to become the constant companion of many Web developers. Here to get you hands-on with it fast is the definitive project-based training on the topic from one of the master teachers at Linda.com training. Using a combination of projectbased lessons, guided exercises, and QuickTime tutorials, veteran author Garo Green walks you through all the Dreamweaver MX 04 basics: navigating the new interface, creating and managing Web sites, and linking among pages. You'll learn about frames and forms, cascading style sheets, and Fireworks and Flash integration, and gobble up Garo's suggestions about best layout and typography practices. You'll also find extensive coverage of all of Dreamweaver's newest features: dynamic cross-browser validation, improved CSS support, built-in graphics editing, 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. | 