Dreamweaver MX/ Fireworks MX Savvy Christian Crumlish Associate Publisher: Dan Brodnitz Acquisitions and Developmental Editor: Willem Knibbe Editor: Rebecca Rider Production Editor: Liz Burke Technical Editor: Scott Onstott Production Manager: Amy Changar Cover and Interior Designer: Caryl Gorska Technical Illustrator: Caryl Gorska Icon Illustrator: Tina Healey Illustrations Compositors: Maureen Forys, Kate Kaminski, Happenstance Type-O-Rama Proofreaders: Emily Hsuan, Dave Nash, Laurie O'Connell, Nancy Riddiough, Nelson Kim Indexer: Ted Laux CD Coordinator: Dan Mummert CD Technician: Kevin Ly Cover Photographer: Monty Fresco, Hulton Archive Copyright © 2002 Christian Crumlish World rights reserved The author(s) created reusable code in this publication expressly for reuse by readers Sybex grants readers limited permission to reuse the code found in this publication or its accompanying CD-ROM so long as the author(s) are attributed in any application containing the reusable code and the code itself is never distributed, posted online by electronic transmission, sold, or commercially exploited as a stand-alone product Aside from this specific exception concerning reusable code,] No part of this publication may be stored in a retrieval system, transmitted, or reproduced in any way, including but not limited to photocopy, photograph, magnetic, or other record, without the prior agreement and written permission of the publisher Library of Congress Card Number: 2002101986 ISBN: 0-7821-4111-0 SYBEX and the SYBEX logo are either registered trademarks or trademarks of SYBEX Inc in the United States and/or other countries Screen reproductions produced with FullShot 99 FullShot 99 © 1991-1999 Inbit Incorporated All rights reserved FullShot is a trademark of Inbit Incorporated The CD interface was created using Macromedia Director, COPYRIGHT 1994, 1997-1999 Macromedia Inc For more information on Macromedia and Macromedia Director, visit http://www.macromedia.com Internet screen shot(s) using Microsoft Internet Explorer 5.0 reprinted by permission from Microsoft Corporation TRADEMARKS: SYBEX has attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer The author and publisher have made their best efforts to prepare this book, and the content is based upon final release software whenever possible Portions of the manuscript may be based upon pre-release versions supplied by software manufacturer(s) The author and the publisher make no representation or warranties of any kind with regard to the completeness or accuracy of the contents herein and accept no liability of any kind including but not limited to performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged to be caused directly or indirectly from this book Manufactured in the United States of America 10 Dear Reader, Thank you for choosing Dreamweaver MX / Fireworks MX Savvy This book is part of a new line of Sybex web publishing and graphics books that features beautiful designs, great quality throughout, and above all, outstanding authors who really know their stuff Christian Crumlish and a team of experts deliver one of the most comprehensive and truly useful Dreamweaver books ever published, continuing the trend for top-notch quality established with our Flash MX Savvy and Photoshop Savvy books With each book, we're working hard to set a new standard, both for the industry and for ourselves From the quality of the contents to the paper it's printed on, from the cover to the interior design, our goal is to publish the best graphics and Web design books available I hope you see all that reflected in this book I'd be very interested in hearing your feedback on how we're doing To let us know what you think about Dreamweaver MX / Fireworks MX Savvy, please visit us at www.sybex.com Once there, go to the book's page, click Submit a Review, and fill out the questionnaire Your input is greatly appreciated Best regards, Daniel A Brodnitz Associate Publisher Sybex Inc Software License Agreement: Terms and Conditions The media and/or any online materials accompanying this book that are available now or in the future contain programs and/or text files (the 'Software' to be used in connection with the book SYBEX hereby grants to you a license to use the Software, subject to the terms that follow Your purchase, acceptance, or use of the Software will constitute your acceptance of such terms * The Software compilation is the property of SYBEX unless otherwise indicated and is protected by copyright to SYBEX or other copyright owner(s) as indicated in the media files (the 'Owner(s)') You are hereby granted a single-user license to use the Software for your personal, noncommercial use only You may not reproduce, sell, distribute, publish, circulate, or commercially exploit the Software, or any portion thereof, without the written consent of SYBEX and the specific copyright owner(s) of any component software included on this media * In the event that the Software or components include specific license requirements or end-user agreements, statements of condition, disclaimers, limitations or warranties ('End- User License'), those End-User Licenses supersede the terms and conditions herein as to that particular Software component Your purchase, acceptance, or use of the Software will constitute your acceptance of such End-User Licenses * By purchase, use or acceptance of the Software you further agree to comply with all export laws and regulations of the United States as such laws and regulations may exist from time to time Software Support Components of the supplemental Software and any offers associated with them may be supported by the specific Owner(s) of that material, but they are not supported by SYBEX Information regarding any available support may be obtained from the Owner(s) using the information provided in the appropriate read.me files or listed elsewhere on the media * Should the manufacturer(s) or other Owner(s) cease to offer support or decline to honor any offer, SYBEX bears no responsibility This notice concerning support for the Software is provided for your information only SYBEX is not the agent or principal of the Owner(s), and SYBEX is in no way responsible for providing any support for the Software, nor is it liable or responsible for any support provided, or not provided, by the Owner(s) Warranty SYBEX warrants the enclosed media to be free of physical defects for a period of ninety (90) days after purchase The Software is not available from SYBEX in any other form or media than that enclosed herein or posted to www.sybex.com If you discover a defect in the media during this warranty period, you may obtain a replacement of identical format at no charge by sending the defective media, postage prepaid, with proof of purchase to: SYBEX Inc Product Support Department 1151 Marina Village Parkway Alameda, CA 94501 Web: http://www.sybex.com After the 90-day period, you can obtain replacement media of identical format by sending us the defective disk, proof of purchase, and a check or money order for $10, payable to SYBEX Disclaimer SYBEX makes no warranty or representation, either expressed or implied, with respect to the Software or its contents, quality, performance, merchantability, or fitness for a particular purpose In no event will SYBEX, its distributors, or dealers be liable to you or any other party for direct, indirect, special, incidental, consequential, or other damages arising out of the use of or inability to use the Software or its contents even if advised of the possibility of such damage In the event that the Software includes an online update feature, SYBEX further disclaims any obligation to provide this feature for any specific duration other than the initial posting * The exclusion of implied warranties is not permitted by some states Therefore, the above exclusion may not apply to you This warranty provides you with specific legal rights; there may be other rights that you may have that vary from state to state The pricing of the book with the Software by SYBEX reflects the allocation of risk and limitations on liability contained in this agreement of Terms and Conditions Shareware Distribution This Software may contain various programs that are distributed as shareware Copyright laws apply to both shareware and ordinary commercial software, and the copyright Owner(s) retains all rights If you try a shareware program and continue using it, you are expected to register it Individual programs differ on details of trial periods, registration, and payment Please observe the requirements stated in appropriate files Copy Protection The Software in whole or in part may or may not be copy-protected or encrypted However, in all cases, reselling or redistributing these files without authorization is expressly forbidden except as specifically provided for by the Owner(s) therein About the Authors Born in a log cabin on the Missouri river… no wait, wrong bio Born and raised on the mean streets of New York City, Christian Crumlish matriculated at the school of hard knocks (OK, and Princeton) and has since pursued a number of exciting career options, including typist, gopher, editor, and small-business owner Since the early '90s Christian has been writing about technology, music, popular culture, and the media He co-founded a webzine, Enterzone, in 1994, and a web-solutions consultancy in 1996 He has registered far too many domain names, most of which will probably never see the light of day Christian has packaged books and e-books, consulted on matters of information architecture and content-management strategy with Fortune 500 companies, represented other authors as a literary agent, and written nearly 20 books on technology, the Internet, and web development He maintains the website for this book at http://dreamweaversavvy.com/ Christian is the lead author of Dreamweaver MX/Fireworks MX Savvy and he recruited the other writers (collectively known as the 'Dream Team') to contribute their specialized expertise and help make this book as well-rounded and packed with useful information as possible The Dream Team The writers who've contributed to this book all have a great deal of experience with Dreamweaver and/or Fireworks and the Web, as well as hands-on experience and thriving training or consulting practices As the lead author, Christian tried to maintain a consistent voice throughout the book, not to smother the individual voices of the contributors, but to make the experience for you, the reader, as seamless as possible Some of the chapters were written outright by the contributor while others contain incorporated examples, suggestions, or sections prepared by the contributors Joyce J Evans Joyce J Evans has over 10 years of experience in educational teaching, tutorial development, and web design For additional tutorials and updated information, visit http://www.JoyceJEvans.com She has received Editors Choice Awards for her Fireworks f/x & Design book (Coriolis Group, 2001), and has authored numerous graphic design titles including Dreamweaver MX Complete Course (Hungry Minds, Inc., 2002) She has also contributed to several books, such as Dreamweaver MX Magic (New Riders Publishing, 2002), Fireworks MX Magic (New Riders Publishing, 2002), and Dreamweaver 4: The Complete Reference (Osborne McGraw-Hill, 2001) Joyce actively writes reviews and articles for several graphic design magazines Lucinda Dykes Lucinda Dykes has been writing code and developing websites since 1994, and she teaches web-related classes at Santa Fe Community College in Santa Fe, New Mexico Her students claim her most-used phrase is 'Show me the code!' She is the coauthor of XML Schemas (Sybex, 2002) and Mastering XHTML (Sybex, 2002) Heather Williamson Heather Williamson manages a small Internet and Web Design consulting firm in northeast Oregon, where she uses Dreamweaver and Fireworks every day in the process of completing her client's requests She has written numerous books on Internet technology, and she was the compilation editor for XHTML Complete (Sybex, 2002) Greg Holden Greg Holden has written about Dreamweaver and other web software in the course of producing 16 books on computer- and Internet-related subjects He's also the author of Literary Chicago: A Book Lover's Tour of the Windy City (http://www.literarychicago.com ), which includes walking and driving tours of the city where he lives with his two daughters and an assortment of fish Guy Rish Guy Rish is an independent consultant specializing in Web technologies and object-oriented design He holds instructor certifications from Rational Software and Macromedia and has taught both in corporate and academic settings Guy has recently contributed work to books from Sybex and New Riders on ColdFusion MX, Flash MX, and Dreamweaver MX Michele Davis Michele Davis is a technical consultant for companies implementing new documentation for pdf manuals, websites, marketing brochures, training, and online help She is savvy in Oracle, Retek, as well as numerous other applications, and she has written and coauthored several trade publications and works of fiction She can be found on the Web at http://www.krautgrrl.com Rita Lewis Rita helped me develop the original outline for this book and helped with some early drafts of the chapters in Part I Rita's website is http://lewiswrite.com/ Rick Tracewell Rick writes an excellent Dreamweaver column for Mac Design Magazine and helped with the development of Chapters 13 and 18 Acknowledgments Writing a book this long, this detailed, and this timely is a labor of many hands and minds I'd like to try to thank and acknowledge the contributions of those who helped in many different ways If I have forgotten to mention any names, please forgive me First, I have to thank Briggs Nisbet for her forbearance during a very difficult and challenging writing schedule Without her love and support, none of this would have been possible Next, I would like to acknowledge the work of Macromedia's developers, especially those involved in running the beta test, which was a model of how you'd like beta tests to work I'm not allowed to go into much detail about that, but I think it's safe to say that they endeavored mightily to address and accommodate the assiduous suggestions made by the dedicated (sometimes to the point of being fanatic) beta testers I'd like to thank Jacques Vigeant of Enterpulse, whose timely loan of a mostly functioning Dell enabled me to test the Windows version of Dreamweaver MX and capture the lion's share of the screenshots in this book This book would not have been at all possible in its present form without the contributions of my 'Dream Team' of other writers who stepped in to cover some of the more specialized and tricky features of web development for me, enabling me to put together a better book than I could have done by myself, and on a shorter timeline Please see the introduction for a full listing about each writer's contribution I'd also like to thank contributors to the book's CD, namely Alien Skin, Rabi S Raj, David G Miles, and Nathan Pitman For more information about these contributors please see the Introduction Richard Frankel and Scot Hacker are always available to me with advice and suggestions, and I've benefited from their greater experience countless times Thanks, guys! Since I am not myself a graphic designer, no matter how hard I try, I'd like to thank Sarah Murgel, Josh Rose, and Dan Shearer, who've taught me a lot about how to read and understand design, and how to solve problems with design I'd recommend their work to anybody I'd like to thank people on the Antiweb mailing list who encouraged me and who are always ready with advice when web conundra present themselves Speaking of mailing lists, I'd also like to thank the Merry Punsters who helped keep my spirits up when the hours were ticking by faster than the pages Similarly, I'd like to thank the members of the Web conference on the Well, whose lively debates informed a number of the insights I've passed off here in this book as my own! For Smee People I don't know personally but whose work and ideas have inspired me include Jeffrey Zeldman and Eric Costello At Sybex, I'd like to thank Associate Publisher Dan Brodnitz and Acquisitions and Developmental Editor Willem Knibbe, who convinced me to this book Willem's developmental editing evoked a much better book from me than I had any right to produce Production Editor Liz Burke handled a nearly impossible schedule with aplomb, juggling like mad and still somehow keeping the trains running (mostly) on time Copyeditor Rebecca Rider read each line with an attentive eye, posing well informed queries and bringing about a degree of consistency I find unattainable on my own Scott Onstott, the technical editor for this book, gently corrected my wildly unsustainable assertions and added real gold from time to time where additional nuance was welcome Caryl Gorska created the beautiful book design Rarely does an author of technical books get to see his or her work looking this good in print Maureen Forys and Kate Kaminski of Happenstance Type-O-Rama did the actual page makeup, which is tricky in a design as complicated and yet elegant as this book's-I appreciate their skillful work A lot of other people at Sybex helped on this project without interacting with me directly, and I'd like to acknowledge their contributions (most are listed on the copyright page) as well Thank you all! I'd like to thank my agent, Danielle Jatlow of Waterside Productions, Inc., for dealing with the paperwork, and Maureen Maloney, also of Waterside, for processing my checks so efficiently I learned a lot doing web consulting with the now defunct Groundswell The Groundswell 'hogs went through a lot together, in the trenches of the dotcom boom-and-bust, and I know I'll be working with people I met there on and off for the rest of my life Before Groundswell, I knew how to throw together a one-person site, but from my colleagues there, I learned how to collaborate on large-scale production-ready sites It was quite thrilling Thanks also to clients at Sprint, Visa USA, Executive Greetings, and All Charities, whose real-world projects gave me all kinds of work to sink my teeth into Similarly, I'd like to thank the people I've worked with at Enterpulse (another consultancy) which has survived the worst part of the crash and will probably be around for a long time Lastly, I'd like to thank the people at Open Publishing, for supporting all of my writing work Introduction In the old days, we made websites by typing one tag at a time, uphill both ways, in the snow, against the wind You've heard this story before haven't you? Well, we've come a long way baby, and Macromedia's Dreamweaver MX and Fireworks MX now make the process of developing robust, production-ready websites almost easy This is a book by and for professionals working in any of the fields now affected by the Web, which is to say, the entire global economy You can work your way through this book from Chapter to Chapter 32, or you might find it more productive to jump around, especially if you are already experienced with web development, or with earlier versions of Dreamweaver or Fireworks Who Needs This Book Most early users of Dreamweaver (and Fireworks) were designers Interactive designers, perhaps, but still graphic or visual designers trained at art schools and used to working in the agency model (based on the structure of advertising agencies) Today, designers are one of many different job types and backgrounds involved in the development of sites To get the benefits of working with Dreamweaver, you don't necessarily have to be a designer (although it helps) Other specialties that might make up a collaborative team that could use Dreamweaver and Fireworks as a common development environment include the following: • Graphic designers • • • • • • • • • • • • • • • Information architects Database architects Interface designers Usability experts Developers Coders Producers Project managers Artists Writers Managers Agencies Consultancies Website owners Students All should get something of value from this book Conventions Used in This Book In a technical book such as this one, we try to make it as easy as possible for you to pick out the information you need (Even our parents don't read these books from cover to cover.) To help you find your way through the book as effectively as possible, we've incorporated a number of design elements to call out material that may (or may not) be of interest to you New Feature New features in Dreamweaver or Fireworks MX are marked with this margin icon References to the book's website are Reference website http://dreamweaversavvy.com singled out with this icon We didn't use this one too often, but we hope you will visit the site (http://dreamweaversavvy.com) We think you'll find it a useful complement to the book and a valuable resource as you learn Dreamweaver and Fireworks On the CD References to the accompanying CD are indicated with this margin icon In addition, many procedures are broken down into numbered steps, and many chapters also include tutorials that enable you to try out what you've learned with a specific project Sidebars Occasionally, interesting bits of information that may not be essential to your understanding of Dreamweaver or Fireworks will be boxed as standalone sidebars, like so These are usually much longer than notes and you can feel free to skip over them if you are in a hurry to get to the next paragraph Because there are many different ways of working on the Web and you may not need to make use of every possible feature of Dreamweaver, you should feel free to skip around from chapter to chapter as necessary To minimize redundancy and pack as much fresh information as possible into this book, we've liberally included cross-references throughout to suggest when you might profit from looking at another chapter How This Book Is Organized This book has six parts composed of 32 chapters and one appendix Here's a quick rundown of what you'll find inside: Part I * Planning Your project and Setting up Dreamweaver This part is all about getting your project started and your site set up to optimize the development process Chapter covers what to before you even take Dreamweaver out of the box, including the essentials of website planning and preparation Chapter breaks down web pages into their component parts, based on how Dreamweaver works with HTML files and other web documents Chapter shows you how to get the Dreamweaver workspace set up for efficiency and comfort, and how to set up a website for the first time Chapter explains how to use sitewide components-templates, assets, and library items-to save effort and maintain consistency Part II * Using Fireworks This part is all about helping you get your graphical design work done with Fireworks Chapter gets you started with Fireworks Chapter covers the elements of a Fireworks file (strokes, fills, and live effects) Chapters and cover vector and bitmap images and tools; Fireworks enables you to use both types of effects together Chapter shows you how to design menu bars and other navigation objects Chapter 10 explains how to prepare images for exporting into Dreamweaver by cutting them into slices (when necessary) and how to optimize them for rapid download (Joyce J Evans handled this entire part.) Part III * Building a Web Page This part is the heart of the matter: how to assemble the essential elements needed to construct a web page Chapter 11 covers layout with tables or layers Chapter 12 is all about working with text Chapter 13 shows you how to apply what you learned in Part II by adding graphics to your pages in Dreamweaver Chapter 14 explains how to set up framesets and work with frames Chapter 15 discusses how to use Dreamweaver's CSS 2.0 (Cascading Style Sheets) features to develop cutting-edge standards-compliant designs Chapter 16 covers how to insert local and external hyperlinks into your pages (Greg Holden did the heavy lifting for Chapters 11 and 14.) Part IV * Inserting Dynamic Content This part takes you a step beyond flat, static web pages and shows you how to add movement and interactivity to your pages Chapter 17 discusses adding multimedia objects to your pages Chapter 18 shows you how to incorporate 'rollovers,' dynamic navigation bars, and jump menus Chapter 19 introduces Dreamweaver's behaviors-pre-made JavaScript routines you can add to your pages without learning how to code Chapter 20 covers everything you need to know about web forms Chapter 21 is a little bonus that walks you through developing an e-commerce site (Lucinda Dykes handled Chapters 17 and 19, Michele Davis contributed to Chapter 18, Heather Williamson put together Chapter 20, and Greg Holden wrote Chapter 21.) Part V * Developing Web Applications This part takes you into the world of dynamic, database-backed websites, also known as web applications At this point, you are developing software that happens to run over web protocols Chapter 22 gets you started setting up web applications with Dreamweaver Chapter 23 helps you customize your coding environment Chapter 24 is a crash course in database development for the Web Chapter 25 shows you how to use Dreamweaver with ColdFusion sites Chapters 26 and 27 get you up to speed with some of the most recently emerged web standards: using XML, XHTML, NET, and the concept of web services in general (Michele Davis did Chapter 24, Guy Rish pinch-hit for Chapter 25, and Lucinda Dykes stepped in to handle Chapters 26 and 27.) Part VI * Site Administration from Start to Finish This part is about wrapping up your development project and handing over a site that doesn't just look cool but actually works! Chapter 28 explains how to set up administration modules for managing a new site Chapter 29 shows how to verify browser compatibility before going live Chapter 30 discusses the issues involved with launching a site or turning it over to a client Chapter 31 covers maintaining a site long after the hoopla of opening day has passed And Chapter 32 is a bonus, explaining how to customize and extend Dreamweaver to get the maximum use out of it as your primary web development tool (Michele Davis put together Chapter 28, Lucinda Dykes handled Chapter 29, Greg Holden composed Chapter 31, and Heather Williamson took care of Chapter 32.) Appendices * Web Resources The Appendix includes a set of useful Dreamweaver resources that are available on the Web We'll update this information and add to it from time to time at the book's website (see 'Visit Our Website,' later in this introduction) Appendix B includes a comprehensive list of keyboard shortcuts for Dreamweaver MX Note to Macintosh (and PC) Users I wish we could have done two editions of this book, one just for Windows users and one just for Mac users Although I work on both systems myself, out of necessity, my 'home base' computer is a titanium PowerBook G4 (a 'tiBook'), running OS X, and that should tell you where my aesthetic preferences lie Unfortunately for me, the majority of users of Dreamweaver and Fireworks are, and the majority of readers of this book will turn out to be, Windows users, and so most of the illustrations in this book show either Windows XP or Windows NT screens Figure 32.6: The History panel When you are replaying steps from the History panel, you don't have the option of changing their order, but you can selectively choose which steps to replay By pressing Ctrl while you click steps in the History panel, you can select just the steps you want to repeat For example, you could select the first five steps that you took, and then skip to step 10 and continue making your selections Once you hit the Replay button, only the steps that you have selected will be played Note If you see a step in your History panel with a red 'X' in the lower-right corner of the icon, or one that is marked by a thin black line between steps, you won't be able to repeat that step It will be skipped when the steps are replayed, and therefore it may cause your results to be skewed Creating Commands from the History Panel You can save yourself a lot of work by recording the steps that you have already taken and saving them as a Dreamweaver command on the Commands menu To create a command from your History panel of precompleted steps, follow these instructions Select the steps you wish to save from the History panel You can use the Ctrl key to select multiple discontinuous steps Click the Save Selected Steps as Command button in the lower-right corner of the History panel In the Command Name dialog box, type in a name for the new Dreamweaver command When you are done, click the OK button Open the Command menu, and you will be able to see your new command, shown highlighted in Figure 32.7, at the bottom of this menu Figure 32.7: New option on the Command menu Recording Commands In addition to converting precompleted steps into a Dreamweaver command, you can also record the steps for these commands as you perform them To start the command recorder, select Commands Start Recording or press Ctrl + Shift + X (Cmd + Shift + X on the Macintosh) With the recorder going, you will be able to see that your mouse pointer has a cassette tape attached to it, and you can perform all of the steps required for your command When you are done recording your steps, press Ctrl + Shift + X (Cmd + Shift + X) again to stop the recorder You won't be able to find the commands recorded in this fashion on your Commands menu because they are stored for immediate playback, and can be accessed by selecting Commands Play Recorded Command or by pressing Ctrl + P (Cmd + P on the Macintosh) If you wish to save your recorded command so that it can be used outside of this current document, you need to save the command from the History panel as addressed in the previous section Creating Custom Menus It might seem drastic to be changing around the menus for Dreamweaver, but once you've worked with the program for a while, you'll realize that there are some features you (and your team) rely on heavily and some that just aren't part of your normal routine You can create a custom configuration of the Dreamweaver menus to maximize your efficiency and put the most useful commands all together Dreamweaver menus are stored in Dreamweaver's Configuration/Menus/menus.xml file The menus.xml file defines all of the menus, menu bars, menu options, and even the primary shortcut keys included in Dreamweaver Despite the xml extension, this file isn't true XML, and therefore, it can't be modified using an XML compliant editor However, it can be modified in any text editor, such as Windows' WordPad (the file is too large for Notepad) or the Mac's BBEdit But don't try to edit the menu files from within Dreamweaver! If Dreamweaver is running, then those files are in use Before you make any of these changes to your Dreamweaver installation, be sure you have made a backup copy of any of the Dreamweaver configuration files you plan to change This way, if your changes don't work, then you still have a sure fire way to restore your Dreamweaver installation If you create a file with invalid menu options, a variety of results could occur You might simply have a few menu options that won't work, or you could end up with Dreamweaver not even being capable of loading correctly Most of the time, you will end up with an entire menu, rather than just a menu option, that won't work, or even open Here is a segment of the menus.xml file This file is used to specify the name, shortcut key, platform, command, and so on, that is used by Dreamweaver when the menu option is selected The part of the file shown defines the menu item name and key for the New Window, Open, Close, Rename, and Delete commands If you are familiar with JavaScript, a quick read of this code shows you that many of the commands invoked to perform the menu options are based on JavaScript As a result, once you learn JavaScript, you can easily modify your menus to add functionality Simply create a JavaScript (.js) file containing all of the code for creating your function's interface, such as an HTML form, and then write the JavaScript code that will generate the appropriate HTML, and/or JavaScript, into your document If this sounds complicated, simply read through some of the existing Dreamweaver command files and study how they accomplish their given tasks These files are all stored in the /Configurations/Commands directory or the /Configurations/Shared/ directory Adding Menus and Menu Bars Menus and menu bars can be added quite easily Menu items, on the other hand, can be a bit more difficult because they have additional attributes and command requirements To add a menu bar to Dreamweaver, you simply need to type in the code As you can see from the previous code sample, the code must precede, with following, each set of menus you wish to appear on a single bar in your document The element has the following attributes that can be set: id (required) Defines the unique id of the menu bar or menu Note Do not change the id's of existing menus because doing so prevents them from displaying properly in Dreamweaver name (required) Defines the name of the menu bar or menu that appears If you are creating a shortcut menu, this would be left blank (""), but the attribute must be present app Defines whether the menu is available in ultradev (UltraDev) or dreamweaver (Dreamweaver) When this attribute is omitted, the menu is available in both applications platform Defines whether the menu is available on the mac (Macintosh), win (Windows), or both (attribute omitted) Menu bars must contain at least one tag, which in turn must contain at least one or element Individual menus are created by adding the tags between your tags So, imagine you want to create a menu bar called "Popup Menu" to let you quickly access a set of folders; your code might look like this: As you can see from the previous example, both the and the elements have the same attributes, so once you become familiar with one, you can implement the other You can add submenus to your menus by inserting tags within other tags, as shown here: Note To create a menu name with a shortcut key, such as Ctrl + F (Command + F for the Mac), place the underscore character in front of the letter that should serve as the hot key In the previous example, the Open Image menu could be opened by pressing Ctrl + O (Command + O on the Mac) Adding Menu Items Once you have created your menu bar and menus, you are ready to create individual menu items Menu items can be created using the tag in conjunction with these attributes: id (required) Defines the unique id of the menu item name (required) Defines the name of the menu item as it should appear in the menu Place an underscore in front of the character that you wish to serve as the hot key to activate that menu in Windows app Defines whether the menu item is available in ultradev (UltraDev) or dreamweaver (Dreamweaver) When this attribute is omitted, the menu item is available in both applications arguments Allows you to specify a comma-separated list of arguments that should be passed to the file, specified by the file attribute Each argument should be enclosed within single quotations (‘) inside the attribute value's double quotations (") For example, to pass the information that a table cell should get a background color and that the color should be yellow, you might use the following: arguments="'true','yellow'" checked Specifies a JavaScript function that will return a value of true if the menu item should have a check mark appearing next to it in your Dreamweaver menus when it's active command Specifies the JavaScript function that is executed whenever this menu item is selected domrequired Controls whether both the Design and Code views should be synchronized before the code specified by the menu item is executed If set to true, then the document must be synchronized prior to running the code specified by this menu When set to false, the document does not need to be synchronized dynamic Identifies a menu item that is configured dynamically by an HTML file If you include this attribute, you must also include the file attribute enabled Specifies a JavaScript function that will return a value of true if this menu item should be currently enabled For instance, this attribute causes a script to run to ensure that a table is selected before the Insert Row function is available in the Table menu file Specifies the file used to dynamically configure a menu item as specified by the dynamic attribute The documents specified here are HTML documents that use JavaScript code to manipulate the Dreamweaver interface, such as opening a dialog box key Defines the shortcut key that can be used to activate this menu option When you are specifying a key combination, use the plus (+) sign to separate each key, for instance Ctrl + Alt + F Options for your keys include the following: Alt or Opt Indicates the Alt key in Windows or the Option key on a Macintosh Cmd Indicates either the Ctrl key in Windows or the Cmd key on a Macintosh Ctrl Indicates the Ctrl key for either Windows or Macintosh Shift Indicates the Shift key for either Windows or Macintosh Special Keys Such as F1 through F12, Home, End, Ins, Del, Tab, Esc, Backspace, Space, PgUp, and PgDn Note It is easier to use the Keyboard Shortcuts editor to modify these values than it is to modify them yourself in the menus.xml file The Keyboard Shortcuts editor dialog box was discussed earlier in the chapter in the section entitled "Creating Custom Shortcut Keys." platform Defines whether the menu is available on the mac (Macintosh), win (Windows), or both (attribute omitted) If you add a new menu and menu items to your Dreamweaver interface, you could end up with a screen somewhat similar to Figure 32.8 Figure 32.8: Customized Dreamweaver menu and menu items The following code is used to create the sample menu shown in Figure 32.8 Note The tag is used to create a gray line in the middle of your menu to separate the menu contents into sections of more closely related options This tag has no attributes Adding Objects to the Insert Bar The Insert bar provides shortcuts for inserting all of the objects (images, horizontal rules, layers, and tables) that we used in earlier chapters to create our web pages If you find that there are elements that you commonly need to insert that Dreamweaver may or may not use as you wish it to, such as (an HTML 4.0 tag used to group related information within a form, such as contact information), you can add them to the Insert bar This may sound similar to what a Library object does, but the effect is much different A Library item can only insert HTML code, while an object on the Insert bar can insert both HTML code and JavaScript into your document Most objects will use JavaScript to add the function itself into your document, as you can see by viewing the following The JavaScript referenced here is also located in Dreamweaver's Configuration/Objects/ folders When creating your own object, you should always place all of the files related to a single object in the same folder This will reduce confusion on your part and it will help you take advantage of Dreamweaver's built-in functionality, which automatically displays every icon and its associated HTML and JavaScript files in its Objects directories Copyright 1999 Macromedia, Inc All rights reserved > Insert Form function isDOMRequired() { // Return false, indicating that this object is //available in Code view return false; } function objectTag() { return ‘'; } One of the easiest ways to add a new object to the Insert bar is by starting with the code of an existing object of similar functionality For instance, if you wanted the Insert bar to include a shortcut for inserting the element, then you may wish to start with the Form.htm file in your Dreamweaver's Configuration/Objects/Forms folder because a fieldset is a group of entry elements within a form You can then modify this code to insert the object, rather than the form object In order to modify this existing code to add the element rather than the object, you simply need to edit the following statement: return ‘'; Once edited to reference the object, this statement could look like this: return ‘ '; Note You should also change the content of the element if you wish to have your tool tip on the Insert bar say "Insert Fieldset" rather than "Insert Form." After you make your changes, save the file as fieldset.html, or the name of the object for which you are modifying your document In addition to creating the HTML file, you need to create a GIF image to display on the Insert bar This image must be 18 ∞ 18 pixels and have the same name as the HTML file For instance, if your modified object document is myfieldset.html, then the name of your GIF image should be myfieldset.gif You can create this image in Fireworks Both the GIF image and the HTML file should be saved back in the Configuration/Objects/Forms directory Once you have added the files to your Forms configuration directory, you need to modify the Insertbar.xml document First you need to scroll through this file and find the statement: This denotes the start of the Forms category of your Insert bar Now you simply need to copy and paste the existing fieldset information, shown at the beginning of the following example, and modify it so it reads like the second section of code Save the Insertbar.xml file Now you are ready to restart Dreamweaver and view the additional icon on the Forms category of your Insert bar, as shown in Figure 32.9 Figure 32.9: New Fieldset icon located on the Forms category of the Insert bar When the new Fieldset button, which you created, is clicked, you will add the following code into your HTML document, at the current cursor location: Note You can modify your menus.xml file to add your fieldset.html objects See "Creating Custom Menus" earlier in this chapter for directions on how this is done You can also create your own categories on the Insert bar by creating a new folder inside your Dreamweaver's Configuration/Objects folder This is how most of the downloadable Dreamweaver extensions (discussed earlier in this chapter in the section entitled "Using the Extension Manager") create their own command objects Updating Dreamweaver Dialog Boxes Did you know that all of the dialog boxes you see when you open up a function in Dreamweaver are created from HTML forms? Because they are all HTML documents, you can make changes to a form and then have that change made active for all uses of Dreamweaver, not just the one site with which you may currently be working There are many reasons why you may wish to modify Dreamweaver's dialog boxes You might simply want to add an additional comment to a dialog box so that you don't forget to something that you have a tendency to forget Or you might want to add a field to a dialog box in order to set the values for an option, or an attribute, that wasn't previously available through Dreamweaver but is available in your browser base The hardest part of modifying your dialog boxes' content is finding the code for the dialog boxes in the first place Most of the documents that make up the Dreamweaver dialog boxes can be found in Dreamweaver's Configuration/Commands folder There are a few dialog boxes that are stored in the Configuration/Shared folder also (Their names are fairly selfexplanatory, such as "Create Web Photo Album.htm," "Modify NavBar.htm," and so on.) To modify the appearance of the dialog box, edit the HTML file To modify the function of the dialog box's options, edit the JavaScript document(s) that is called from within the HTML document Take, for instance, the Flash Button dialog box Figure 32.10 shows you what the dialog box looks like when it is opened in Dreamweaver This dialog box, stored as Configuration/ Commands/Flash Button.html, appears almost identical to the actual dialog box shown in Figure 32.11 A few things to note about these dialogs boxes include the following: Figure 32.10: The Insert Flash Button form opened for editing Figure 32.11: The Insert Flash Button dialog box as it is normally seen in Dreamweaver • • The title of the HTML document is the title used for the dialog box The buttons on the form might not show up the same as they on the actual dialog box, or they might not be there at all JavaScript generates most of those buttons To modify the Insert Flash Button dialog box, open the Flash Button.html file in Dreamweaver and modify it as you would any other document Be sure not to remove any of the scripting code at the top of the document or you will lose part of your dialog box's functionality In Figure 32.12, you can see the modified version of the dialog box made by adding the following code to the Flash Button.html document Be sure to save your Flash Button in a folder accessible through your templates. that will be uploaded and Figure 32.12: The modified Insert Flash Button dialog box Note If you want to share these types of customizations with other users, simply copy the files you have modified and manually install them in each user's Configuration/Commands folder Hands On 1: Using the Advanced Random Images Extension There are a wide variety of extensions available, but one of the most useful is the Advanced Random Images extension Not only is this extension one of the most usable, but it is also one of the most popular This extension allows you to display a random image, a daily image, or even a set of sequential images on your website This is a great tool if you wish to create a series of rotating banners for advertising, or even if you want to easily change the appearance of your website for daily visitors To download, install, and use this extension, follow these steps Open the Macromedia Exchange for Dreamweaver website from http://www.macromedia.com/exchange/dreamweaver and type Advanced Random Images in the Search field, or select the Scripting category Search through the list of your results, and select Advanced Random Images This will open the Advanced Random Images extension's information page On the right side of this screen are links to download either the Windows or the Macintosh versions of the MXP file for this extension Click the filename for your operating system to start the download In this case, the extension is named MX323286_advRandImage.mxp for both OS's Save the extension to the same directory in which all uninstalled extensions reside This might be a shared directory for your entire network, or it may be in a Downloaded Extensions folder inside your Dreamweaver installation With the extension downloaded, you are ready to start the Extension Manager Use one of the following methods to so: o Select Start Programs Macromedia Extension Manager Macromedia Extension Manager from your Windows desktop Double-click the Extension Manger application in your Finder window on your Macintosh In the Extension Manager window, select File Install Extension This will open the Select Extension to Install dialog box shown in Figure 32.13 This dialog box will automatically open to the location where extensions were last installed Click Install to start the installation procedure o Figure 32.13: The Select Extensions to Install dialog box with the Advanced Random Images extension selected Click Accept to agree to the terms of the licensing agreement for the extension The rest of the installation should complete, and you should be returned to the Extension Manager with the Advanced Random Image extension selected and checked Open Dreamweaver and the document to which you wish to add the random images This document must be saved into your current site for the extension to work properly Select Commands Random Images to open the Random Images dialog box shown in Figure 32.14 Figure 32.14: The Random Images dialog box, which allows you to configure the Advanced Random Images extension 10 In the Random Images dialog box, select the type of display you wish to create Your options include the following: Normal Images in the list are displayed randomly Slideshow Images are displayed randomly in a slideshow format Sequential Images are displayed in their listed order in a slideshow format Daily One image is displayed to all visitors each day 11 Use the Browse and Add Folder buttons to add images to your Image List If you wish to delete some, select them and click Delete 12 Set the following properties for each image in your list Width Controls the width, in pixels, of the image Height Controls the height, in pixels, of the image Name Provides a unique name for the image Align Sets the image alignment Alt Sets the alternate text for the image Border Controls the width of the images border Link Specifies the document to open when that image is clicked Target Specifies the target of the link 13 Click the Update Image Properties button to update the properties of the currently selected image to the settings currently visible in your dialog box Click Update All Images to update the properties of all the images simultaneously 14 Click OK when you are done Note The code created by this extension is only visible when you have View Invisible Elements turned on, so don't worry if you don't see any results on your Design view screen You can see them in Code view When you view this page in your browser, you will see that the images appear in the order, and sizes that you configured in the dialog box Hands On 2: Add Custom Characters to the Insert Bar The steps outlined in this tutorial allow you to create your own custom characters and add them to the Character tab of the Insert bar Open one of the HTML files in your /Macromedia/Dreamweaver MX/Configuration/ Objects/Characters directory in Dreamweaver For instance, you can use the Trademark.html file shown in this example Change to Code view, by selecting View Code This opens the Trademark.html file shown below > Copyright 1999 Macromedia, Inc All rights reserved Trademark 10 11 function isDOMRequired() { 12 // Return false, indicating that this 13 // object is available in Code view 14 return false; 15 } 16 17 function objectTag() { 18 // Return the html tag that should be inserted 19 // return "™"; 20 // Supported only in the (4?-5 browsers) 21 checkEncoding(); 22 return "™"; // Generally supported 23 } 24 25 26 27 28 Note In this file, there are two JavaScript functions that insert a named entity-such as ¡, which inserts an inverted exclamation point-into your document This entity is also referred to numerically by ¡ 29 Modify the Trademark.html file so that it inserts your entity item, ¡ This is done by replacing the existing entity string on line 18 (you can view the line numbers in your document by selecting View Code View Options Line Numbers) with either the ¡ or the ¡ numerical entity Note The named entity ¡ is only supported by 4.0 and newer browsers such as Internet Explorer 4, Netscape Navigator 4, and Opera For users of your site that are using other browsers or devices, you may want to consider using the numerical entity ¡ because it has more global support 30 When you have finished completed, and as long as you are using the ¡ character, your document will appear as follows: 31 32 33 > 34 35 36 37 38 39 40 41 42 43 44 45 Copyright 1999 Macromedia, Inc All rights reserved -Inverted Exclamation Point function isDOMRequired() { // Return false, indicating that this object // is available in code view return false; } function objectTag() { 46 47 48 49 50 51 52 53 54 55 56 57 // Return the html tag that should be inserted // return "¡"; // Supported only in the (4?-5 browsers) checkEncoding(); return "¡"; // Generally supported } 58 Select File Save As and save your new character description in the /Macromedia/ Dreamweaver MX/Configuration/Objects/Characters directory Name the file iexcl.html 59 Using your favorite graphics program, such as Fireworks, create an 18 ∞ 18 pixel GIF image that contains the image you wish to serve as the button that will represent your new character in the Character category on the Insert bar This graphic file also needs to be saved in your /Macromedia/Dreamweaver4/Configuration/Objects/Characters directory 60 Restart Dreamweaver When you restart Dreamweaver, your new icon will appear as the last icon in the Character category view of the Insert bar You can add as many characters to your panel in this fashion as you want Note Be careful that you only use valid named entities within your modified configuration files If these entities are invalid, you will insert non-supported information into your document that may be viewed incorrectly, or not at all by web browsers Ready, Set, Go! You're now some kind of cyclone ranger with these Dreamweaver and Fireworks apps! We think you're ready now to go where few dare to tread: into the fast paced world of developing applications with Dreamweaver If you still have some questions, try the Online Resources listed in the appendices that follow ... Software and Macromedia and has taught both in corporate and academic settings Guy has recently contributed work to books from Sybex and New Riders on ColdFusion MX, Flash MX, and Dreamweaver MX Michele... technology, the Internet, and web development He maintains the website for this book at http://dreamweaversavvy.com/ Christian is the lead author of Dreamweaver MX /Fireworks MX Savvy and he recruited... Dreamweaver MX / Fireworks MX Savvy This book is part of a new line of Sybex web publishing and graphics books that features beautiful designs, great quality throughout, and above all, outstanding