0% found this document useful (0 votes)

175 views287 pages

Peachpit Press - Macromedia Dreamweaver MX 2004 Magic

opasno

Uploaded by

vs_crni

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

175 views287 pages

Peachpit Press - Macromedia Dreamweaver MX 2004 Magic

opasno

Uploaded by

vs_crni

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 287

Macromedia Dreamweaver MX 2004 Magic

By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

Copyright
Let Us Hear Your Voice
About the Authors
About the Technical Reviewers
About the Magic Series

How to Make the Most of This Book

Conventions Used in This Book

Project1. Using CSS to Position and Style Your Pages

It Works Like This

Preparing to Work

Creating the Structure for the Page

Creating Buttons and Background Shapes

Taking Font and Link Styling to the Next Level

Selectors, Siblings, Descendants, and the Cascade

Now Try This

Project2. Creating Toggle-O-Matic Menus

It Works Like This

Preparing to Work

Forging Friendly Hyperlinks to Submenus

Time to Identify: ID Attributes for Menu Buttons

Getting Classified

Containing the Menu with <div> Tags

Inserting Submenu <div> Tags

Design Time CSS to the Rescue

CSS Requirements

Toggling with Extensions

Now Try This

Project3. Managing Navigation Button States in Template-Controlled Sites

It Works Like This

Preparing to Work

Using Editable Regions

Using JavaScript and Editable Regions

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Using Optional Regions

Now Try This

Project4. Controlling Navigation Elements with Templates

It Works Like This

Preparing to Work

Controlling Document Meta Data

Modifying the Submenu System

Validating the Template

Creating the Site Pages in Contribute

Now Try This

Project5. Integrating Dreamweaver and Fireworks in Your Projects

It Works Like This

Preparing to Work

Setting Up Dreamweaver's Launch and Edit in Fireworks Feature

Creating Fireworks Color Palettes for One-Click Access in Dreamweaver

Using Dreamweaver Image Placeholders to Design a Web Page Layout

Converting Dreamweaver Image Placeholders to Images in Fireworks

Creating Dreamweaver Library Items Within Fireworks

Editing Image Library Items in Dreamweaver

Now Try This

Project6. Translating a Fireworks Layout into a CSS + HTML Design

It Works Like This

Preparing to Work

Getting the <body> into Shape

Styling the Tables with CSS

Styling Individual Cell Properties with the Tag Inspector

Styling Page Content with CSS Selectors

Styling Individual Objects with Custom Classes

Styling Navigation Links

Inserting One Lone <div>

Now Try This

Project7. Using Flash in Dreamweaver

It Works Like This

Preparing to Work

Editing Library Items

Using Dreamweaver Flash Text

Inserting Library Item Instances into Documents

Using FlashVars

Using the Flash Date Picker Extension

Now Try This

Project8. Sending a Form to Email

It Works Like This

Preparing to Work

Adding Styling to Your Pages with CSS

Add a Contact Form

Add a Table for Form Layout

Adding Text Fields

Inserting a Radio Button Group

Inserting a Select List and Assigning the Default Display Item

Adding Check Boxes for Multiple Selectable Options

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Placing a Textarea to Accept Freeform Text Entry

Placing Buttons to Submit and Reset the Form

Build a Form-to-Email Processing Page with Server Behaviors

Editing an Existing Server Behavior

Now Try This

Project9. Setting Styles Dynamically

It Works Like This

Preparing to Work

Setting Up Your Base Styles

Build Color Scheme Style Sheets

Creating Color-Friendly Images

Using the CSS Switcher Extensions

Now Try This

Project10. Creating a Rotating Ad System in ASP.NET

It Works Like This

Preparing to Work

Serving Rotating Banner Ads

Uploading Files by Applying a Server Behavior

Creating an Upload Page for Ad Administration

Prepare a Database Connection to Track Click-Through Traffic

Writing the ADO.NET Code to Track Click-Throughs

Now Try This

Project11. Creating Dynamic Navigation with Server.Execute

It Works Like This

Preparing to Work

Designing with <div> Tags and Includes

Creating the Includes

Powering the Content Switcher with Server.Execute

Now Try This

Project12. Producing a Sophisticated Interface for CMS with ColdFusion

It Works Like This

Preparing to Work

Setting Up Your Base Pages

The Administrator Home Page

Inserting New Records

Editing and Deleting Records

Now Try This

Appendix A. Installing Extensions
Appendix B. Creating Database Connections

Creating ColdFusion Data Sources

Creating ASP.NET Database Connections

Creating PHP MySQL Database Connections

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Copyright
with Kim Cavanaugh, Danilo Celic, Kevin French, Brad Halstead, Joel Martinez, Stephanie
Sullivan, Murray R. Summers, and Edoardo Zubler
The photograph of the mask on the cover of this book was taken during the Fasnacht, a carnival
held in Basel, Switzerland. The festival is rooted in local German/Swiss tradition, and is well-
known for its party atmosphere, colorful carnival costumes, and Guggen music played by the
brass bands. Author Massimo Foti currently lives in Switzerland; the country is also the
homeland of author Edoardo Zubler.
Copyright 2004 by New Riders Publishing
All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or
transmitted by any meanselectronic, mechanical, photocopying, recording, or
otherwisewithout written permission from the publisher, except for the inclusion of brief
quotations in a review.
LibraryofCongressCatalogCardNumber:2003112374
PrintedintheUnitedStatesofAmerica
Firstprinting:December,2003
0807060504037654321
Interpretation of the printing code: The rightmost double-digit number is the year of the book's
printing; the rightmost single-digit number is the number of the book's printing. For example,
the printing code 03-1 shows that the first printing of the book occurred in 2003.
Trademarks
All terms mentioned in this book that are known to be trademarks or service marks have been
appropriately capitalized. New Riders Publishing cannot attest to the accuracy of this
information. Use of a term in this book should not be regarded as affecting the validity of any
trademark or service mark. Dreamweaver is a registered trademark of Macromedia.
Warning and Disclaimer
Every effort has been made to make this book as complete and as accurate as possible, but no
warranty of fitness is implied. The information is provided on an as-is basis. The authors and
New Riders Publishing shall have neither liability nor responsibility to any person or entity with
respect to any loss or damages arising from the information contained in this book or from the
use of the CD or programs that may accompany it.
Publisher
Stephanie Wall
Production Manager
Gina Kanouse
Senior Acquisitions Editor

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
About the Authors
Massimo Foti
Massimo began using Dreamweaver on the very day the first beta was available, and he has
used Dreamweaver ever since.
Massimo has been a prolific extension developer since the pioneering days of Dreamweaver 1.
He is the creator of www.massimocorner.com, and winner of the Macromedia Best Extension
Developer award in 2000 and Top New Extension for Dreamweaver MX. His extensions are
featured on the Macromedia Exchange for Dreamweaver and have been featured in many books
and magazines.
He is a certified Dreamweaver developer and certified Advanced ColdFusion developer. His tips,
articles and custom tags for ColdFusion are available on www.cfmentor.com, the web site of the
Italian CFUG.
Massimo works at www.amila.ch developing database driven websites using ColdFusion and PHP
with different RDMSs, his work ranges from database design to server- and client-side
programming for web-based applications.
An avid reader of computer books, he often works as tech editor, contributor, and reviewer for
publishers like Osborne, New Riders, Glasshaus, and O'Reilly.
Acknowledgment: Thanks to Angela and Dan for brilliantly taking care of all the dirty jobs,
allowing me to just have fun with code. To all the people at www.amila.ch; most of my work on
this book is inspired by what we do there day by day. As you may know, ColdFusion developers
get the best women (even if Macromedia doesn't tell you about that); so once again I had the
pleasure to work with the wonderful ladies at New Riders. Very special thanks to Federica and
Tiziana, for all the times I sit in front of a PC and forget about the rest. You are the best things in
my life.
Angela C. Buraglia
Angela used to be a makeup artist for independent film, but she needed a career that would
allow her to work from home and raise her son. Although she intended only to be a web
developer, life's path has led her to become that and more. She is perhaps best known as the

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
founder of DreamweaverFAQ.com, a site dedicated to serving the Dreamweaver community
which she continues to run today with Daniel Short. In addition to this book, Angela is also the
co-author of Dreamweaver MX Killer Tips and Dreamweaver MX 2004 Killer Tips with Joseph
Lowery. She was a contributing author to Dreamweaver MX Magic, the lead technical editor for
the Dreamweaver MX Bible (Wiley), and a contributing author to ColdFusion MX Web Application
Construction Kit (Macromedia Press). Long gone are the days of applying makeup; now Angela
applies Behaviors and CSS to web sitesand most importantlyis home with her little boy.
Acknowledgment: Massimo, your guidance since I started Dreamweaver is really worth more
than mere thanks. I'm not sure I could ever repay you (but keep reading). Daniel Short, this
book just wouldn't be the same without your magic touch. Working with my best friend is always
a pleasure. I couldn't have done this book without your help and support. Next time I see you
two, count on dinner. I would be remiss to not mention all the people who have helped and
inspired me throughout the years, unfortunately I can't name all of you in this small space. I am
forever thankful to you nonetheless. Linda Bump, I've learned so much about the authoring
process from you and I appreciate all you've done for me. Thanks to the team at New Riders. I
must say that this has been one incredible group of people to work with; thank you to all of the
contributing authors.
Daniel Short
Dan is the chief developer for Web Shorts Site Design as well as a devoted Team Macromedia
Volunteer and uses almost the entire Macromedia Studio including Fireworks, ColdFusion, and
Dreamweaver. He helps to maintain several HTML and Dreamweaver reference sites including
www.dwfaq.com, for which he created the style changer and all ASP functionality, including the
Snippets Exchange and the DWfaq Store.
He's also written articles for several resource sites, including AListApart.com, Spider-Food.net,
the MM Designer and Developer Center (www.macromedia.com/desdev) and DWfaq.com. Dan is
also a contributing author for the dynamic chapters in the Dreamweaver MX Bible (Wiley) and
the previous edition of Dreamweaver MX Magic. He has also presented at several Dreamweaver
conferences including the first two TODCONs and CFNorth.
Acknowledgment: I'd like to thank all of the wonderful people in this industry who have allowed
me to stand on their shoulders so I could reach a little higher. I wouldn't be where I am today
without the likes of Massimo (yes, even though you harass me about ColdFusion) and Angela
helping me out day to day, whether through helping me learn or simply bombarding me with
feature requests. And a special thanks to the Lindas, for keeping us artsy types in line and
making sure that we produced the best material we could.
Kim Cavanaugh

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Kim is a teacher for the School District of Palm Beach County (Florida) where he has been
teaching middle school students web design using Dreamweaver, Fireworks, and Flash since
1999. Kim is also an adjunct professor at Palm Beach Community College where he teaches
Dreamweaver and Flash.
The author of two beginner's guides for Dreamweaver and Fireworks (Osborne/McGraw-Hill),
Kim has also developed course materials for the Learning Library (UK) and contributed to the
Macromedia Studio MX Bible (Wiley). Kim has contributed numerous articles to Macromedia
DevNet and writes extensively for CommunityMX.com, covering the full range of Studio MX
products.
Kim lives in West Palm Beach with his wife and daughter and loves all things associated with life
in South Floridaespecially warm weather, the Miami Dolphins, inshore fishing, and Jimmy
Buffett tunes.
Acknowledgment: As always, my thanks to the beautiful brown-eyed girls in my life, Kayleen and
Katy, for your love, support, and patience.
Danilo Celic, Jr.
Every journey starts with an itch that needs to be scratched. For Danilo, the itch was a two
years' out-of-date company phone book. Because of that phone book, Danilo decided to take
matters into his own hands, learning HTML via the hand code in Notepad-save-preview in
browser-rinse/lather/repeat method of creating web pages. First introduced to Dreamweaver at
version 1.2 from a cover CD off an imported computer magazine, Danilo soon learned that
coding everything manually wasn't all it was cracked up to be, and jumped in using every
version since. Currently a partner at CommunityMX.com and a member of Team Macromedia,
Danilo frequently comes to the aid of budding extension developers in the Macromedia support
forums. While the languages of the web world change continuously, the late hours stay the
same, which is unfortunate for his lovely wife, Melissa.
Acknowledgment: Thanks to my wife, Melissa, for her unceasing patience when I spend way too
much time on computer stuff. Also, thanks to Angela Buraglia for being so kind and wonderful,
and mostly for never giving up when I say it can't be done. To Dan Short, for server space and
not laughing too hard at my bad jokes. To Massimo, for his generosity in sharing his expertise in
many topics, from coding to water polo coaching. And to the three of them for asking me to
participate in this wonderful little project.
Kevin French

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Kevin is the founder and president of MM2K Inc., a full service Internet company. Formed in
1998 as simply a web design agency, MM2K has expanded its suite of services to also include
Internet access, web hosting, dynamic application development, custom e-commerce solutions,
and strategic Internet consulting. On the design and development front, Kevin is a self-taught
Fireworks designer and a Macromedia Dreamweaver Developer Certified Professional. His
design, development, and project management skills have earned him and his company
numerous industry awards and accolades. His clientele list includes United States Governors,
Senators, Congressman, professional athletes, state universities, and established corporations.
Kevin has been a lifetime resident of the beautiful New Jersey shore. When he is not "plugged
in," you can find him mountain biking, hiking, and driving on the back country roads of New
Jersey.
Acknowledgment: I would like to thank my beautiful girlfriend, Jocelyn, for supporting and
motivating me to help me achieve my dreams. Together, the world and ultimate happiness is
ours. I love you. I would like to thank Mark Haynes of Macromedia for sharing his vast
knowledge of Fireworks since I began using it when it was first introduced. Mark is a true asset
to Macromedia and the entire Macromedia community. Kleanthis Economou
(www.projectfireworks.com) and Linda Rathberger (www.playingwithfire.com) have both been
instrumental in my understanding of Fireworks and I am grateful for their assistance through the
years.
Brad Halstead
Brad (www.dreamweavermx-templates.com) is a computer software engineering technologist by
trade, but deviated from that dream to join the Canadian military as an air weapons systems
technician where he learned all about various computerized aircraft weapons systems as well as
loading the munitions. Brad has dabbled in the web in various capacities since 1989 and left the
military to become a full-time computer technician. Brad tries to play an active roll in the
support forums for Dreamweaver, Contribute and Project Seven, as time permits him to. Brad is
HTML 4.01 Certified, and has contributed content to Dreamweaver MX Magic and Inside
Dreamweaver MX, in addition to being a technical editor for both publications. Recently, Brad co-
authored Dreamweaver MX Templates and has been accepted as a Team Macromedia Member
for Contribute.
He lives in London, Ontario with his cherished partner Brenda and their daughters Megan and
Amanda, son Aaron, two Yorkshire Terriers, and their newest addition, a Sheltie.
Acknowledgment: Thank you to the following people for inviting me to participate in this project:
Massimo Foti, Angela Buraglia, Dan Short, and Linda Bump. I'd like to also thank Linda
Laflamme (Copy Editor), the Tech Editors (Danilo Celic and Matt Brown), and all the other
people involved in the book's production. Of course, thanks to Macromedia for engineering
Dreamweaver MX 2004!

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Joel Martinez
Joel creates enterprise-level web applications using the .NET Framework (amongst other
technologies). He started the Orlando .NET User Group to promote the use of .NET within his
local community and strives to teach anyone who will listen the virtues of Microsoft's brainchild.
He is also a partner at Community MX (www.communitymx.com).
Acknowledgment: First and foremost I'd like to thank God for giving me the opportunity to work
on such a wonderful project. Thanks to the New Riders team for allowing me to spread the .NET
gospel. Much thanks goes out to my high school teacher, Sharon Christensen-Jones; she is a
testament to the important role teachers play in our society. To my parents for always working
hard to give me what I needed, and my brother for always lending a hand. Last, but certainly
not least, I'd like to thank my wife and daughter, Tabbitha and Layla, for being so supportive in
this and other ventures. I love you.
Stephanie Sullivan
Stephanie is a web developer, a partner at CommunityMX (www.communitymx.com), and owner
of VioletSky Design (www.violetsky.net). Somewhere in all that, she is also the wife of a
screenwriter and mother of two awesome boys who she has home schooled all their lives.
In addition to her articles at Macromedia's DevNet Center, her weekly writing and support at
CommunityMX focuses on Dreamweaver, design principles, CSS, HTML/XHTML, color, and web
business issues. Stephanie's background in art and color theory as well as her deep interest in
standards, CSS, and accessibility, allow her to create highly visual, standards-compliant, low-
bandwidth web sites.
In her spare time, of which there is sadly very little, she spends time with her family at the
beach, the historic downtown district, and geocaching with her boys. To force herself "out of the
chair" she recently joined a volleyball team.
Acknowledgment: I am deeply indebted to those who have paved the way for the standards
revolutionJeffrey Zeldman and Eric Meyer are my two favorites, as much for their humor as
their brilliance and bravery. Also, much thanks goes to my favorite bug squashers and friends:
"Big John" Gallant, Holly Bergevin, and Philippe Whittenberg who have helped me work out
numerous browser issues over the past few months. To my husband Timothy, thanks for your
support, guidance, love, and patience. I know it hasn't been easy. And to my sons Cameron and
Hunter, I know it's tough at times when mom "goes missing." Thanks for filling in the gaps
around the house. You guys are the best. I love you.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Murray R. Summers
Although a biochemist by training, Murray has spent the last 20 years working in the computer
industry. In 1998, Murray started his own web site production company, Great Web Sights
(www.great-web-sights.com). As a Team Macromedia member, he also participates in the
sponsored forums for Dreamweaver and other products. He lives in rural Philadelphia with his
lovely wife Suzanne, their teenaged daughter Carly, a Golden Retriever, an Eskipoo, a mutt of
unknown derivation, and a goldfish.
Murray is a Macromedia Certified Web Site Developer and Dreamweaver Developer, and has
contributed chapters to Dreamweaver 4 Magic by Al Sparber, and Dreamweaver 4: The Missing
Manual, by David Sawyer McFarland (Pogue Press/O'Reilly). He has authored the premier
treatment of advanced Template properties, Dreamweaver MX Templates with Brad Halstead. He
has managed to embarrass himself several times as an invited speaker at TODCON, TODCON II,
TODCON North, and TODCON MX.
Acknowledgment: Thank you to Al Sparber for his generous teaching on the Macromedia
Dreamweaver Forum. Thank you also to David McFarland for teaching me the technique of using
Optional Regions in his excellent Dreamweaver MX: The Missing Manual (Pogue Press/O'Reilly).
Edoardo Zubler
Edoardo is a multimedia developer who specializes in creating rich media applications for a wide
range of devices and platforms. He has produced both front end and back end solutions for
tablet PCs, set-top boxes, and handheld PDAs. During his career he has been involved in
pioneering projects such as the development and implementation of a content repurposing
system based on Macromedia Generator for the first regular digital terrestrial (DVB-t) data
broadcasting service in Europe. He has developed many Flash-based rich client applications for
fixed and mobile devices.
As a Team Macromedia Volunteer, Edoardo has written several articles and developed a number
extensions for many Macromedia products including FlashBang! (www.flashbangmedia.com)
with Joseph Lowery. He also runs Aftershape (www.aftershape.com), his own personal web site,
where he showcases his "digital oddities".
Acknowledgment: I'd like to thank my family for all the support. Many thanks to the authors of
this book and the people at New Riders for their friendliness. A special thank-you to Massimo
Foti for all the help he has given me and for being such a good friend.
Developing technically accurate books is a priority at New Riders. We rely on the skills and

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Preparing to Work
To prepare for this project, you will need to do the following:
Copy the Projects/01 folder from the CD to your hard drive. 1.
Define a new site using the 01 copy as your site root. 2.
Take a look at the files that came with the project as well as the markup inside them.
Rather than have you type in a lot of filler text, I've provided the XHTML document called
index.htm. In addition to the extension you just installed, the 01 folder contains
index.htm, indexfinal.htm, skater.css, and an assets folder which contains images.
The skater.css file is the completed CSS document that you may want to use for reference.
It styles the indexfinal.htm document. The CSS Snippets will be used as code snippets
throughout the project. You will need to download Andrew Clover's fixed.js document. It is
already linked in the head of both index.htm and indexfinal.htm. Due to a bug in IE6, you
won't be able to view the project properly without it in that browser
(www.dwmagic.com/go/13).
3.
Open the Extensions folder and install the extension Project 01 Snippets.mxp. See
Appendix A, "Installing Extensions," for instructions.
4.
Open the index.htm file and look at each section of the document so that you'll be familiar
with what you've got and where you're going.
5.
Preview the index page in a browser and notice the structure of the page. Although the
page is unstyled and plain, all information is available and easy to access.
The page begins with an XHTML Transitional doctype. This comprises the first two lines of
the document and comes before the <html> tag. Nothing should come before the doctype
(including the XML Prologue) or you will put IE6 into quirks mode. Quirks mode means it
will render your page according to older, less standard methods. (See
www.dwmagic.com/go/14 to learn more about doctypes and quirks mode.)
6.
Familiarize yourself with the structure of the document by viewing this page in
Dreamweaver's Code view.
7.
If you'd like to view the final project before you get started, open the indexfinal.htm
document in your browser either from your local drive or upload it to your web site (along
with the associated images, fixed.js, and CSS file) and view it there. Increase the text size
using the controls in your specific browser and make the browser window different sizes to
view the effect.
8.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Creating the Structure for the Page
Now that you've looked at the XHTML document's syntax, you're going to begin to move the
<div> tags into place. Remember that a <div> is 100% as wide as its containing element. If a
<div> tag is not contained in another <div> tag or element, its parent container is <body> and
<html> is the grand-parent. You can use <div>s rather like building blocks or stacked boxes to
create your structure.
Open the index.htm document. In the CSS Styles panel, click the New CSS Style icon to
open a New CSS Style dialog box. Choose Selector Type: Advanced, Define in: New Style
Sheet, and type html, body into the Selector text box. Click the OK button of the New CSS Sheet, and type html, body into the Selector text box. Click the OK button of the New CSS
Style dialog. Name the file project1.css, ensure the Relative to field is set to Document and Style dialog. Name the file project1.css, ensure the Relative to field is set to Document and
that you are located in the root of your site in the Save Style Sheet File As dialog, and click
the Save button.
You've now linked your style sheet to your index.htm document.
1.
In the CSS Style definition dialog that now appears, choose the following:
Category: Box
Padding: Check Same for All and enter 0 Padding: Check Same for All and enter 0
Margin: Check Same for All and enter 0 Margin: Check Same for All and enter 0
Category: Border
Width: Check Same for All and enter 0 Width: Check Same for All and enter 0
Click OK
This is done to force all browsers to begin with zero for the page margins and borders.
Browsers have different default settings, and this allows all to start on a level playing field.
Tip
Border is declared on the HTML element to get rid of the IE Windows invisible
2.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Click the OK button to save the new style definition.
The W3C specs say that Attachment: fixed, on the background image, aligns it to the
viewport (not its containing element). You'll see why this is so important for the effect
you're creating in a little while. Also, you may wonder what the font size set to 100%
means. 100% of what? The users' preferences. The browser will start with whatever they've
defined in their browser and then scale the sizes from there.
5.
Tip
You should be aware of the CSS preferences: Edit > Preferences > CSS Styles. If you
prefer to have your CSS files open when you're modifying a style, leave the check mark
in the Open CSS Files When Modified box. You will have to save your CSS page before
the styles will appear on your index.htm page. If you prefer to do your editing in the
CSS Styles panel or the Relevant CSS tab of the Tag inspector, uncheck this box or
your CSS document will open each time you make an edit.
You may also want to set your CSS to write in shorthand. This is another way to save
page weight and is what I'll be demonstrating in the code later in this chapter.
Defining the <di v>s
Now it's time to define the various <div>s. You'll start with the header <div>. If you haven't yet,
try using the Property inspector to create a style and edit your style sheet. It's good to use each
of the methods Dreamweaver offers to find what works with your personal workflow.
Make sure the index.htm document is the active document. Using the Property inspector,
select Manage Styles from the Style select box and create a CSS Selector called
div#header. In the Edit Style Sheet dialog, highlight project1.css and choose New. Use the div#header. In the Edit Style Sheet dialog, highlight project1.css and choose New. Use the
1.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Notice that the background image of the header <div> is identical to, but the opposite
colors of, the body selector? That's part of the see-through effect first invented by Eric
Meyer, CSS guru extraordinaire. Make sure you give your background the same color as
the image. This way if a browser area is larger than the image you've used, the background
color will give it a seamless transition.
Note
The selector could have been created as #header, but div#header is more specific.
It says that any <div> with the id of header should be styled as instructed. It is a
safer and more specific way to style.
For the rest of this project, I'll give you the name of the CSS code snippet to use for that
step. You can either define your selectors using the CSS Style panel, Property inspector,
insert the snippet into a blank CSS document, and paste them into your project1.css or
insert the snippet directly into your project1.css (due to the order you'll add in some of the
declarations, you may want to paste the selectors from one document to the other to keep
them in a logical order).
The position: relative is given to the header <div> because you cannot define a z-
index (stacking order) in a <div> without a position defined. (I'll discuss the reasons for
the z-index in this page further along in the project.) It doesn't adversely affect the flow of
the page, however.
Style the navigational <div>. Unless you choose to create these styles by hand, in your
Snippets panel, go to the MX Magic 2004 > Project 01 folder. Highlight the 01-DIV CSS
snippet and with your cursor at the bottom of the projects1.css document, click Insert.
Notice that you've just added three new selectors (more on these later).
3.
Save project1.css and view the index.htm page in Dreamweaver's Design view, as well as
in your favorite standards-compliant browser.
4.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
the bottom was created to give some length to the nav <div> for the image you'll
add later. It's all preference and set with my eye really, so you can have a lot of fun
personalizing the styling later.
Look at the styling of the info <div>, which has become the right column on your page.
Once again you've created an absolutely positioned <div>. This time you've positioned it
using top and right positioning. I made sure to keep it away from the right browser chrome
because of a bug in IE5 Mac that causes a horizontal scroll bar. If you don't care about
that, you can place the column right up to the edge.
Note
Once again you've used a background image fixed to the background of the
browser window. This gives you yet one more image that will appear to show
through its element.
5.
For the content and footer <div>s, look at the selectors called div#content and
div#footer that were added by the 01-DIV CSS snippet.
You'll recall you styled one absolutely positioned <div> relative to the left side of the
document and the other absolutely positioned <div> relative to the right side of the
document. Both of them have specific widths. This leaves the center of the page for the
content <div> to be molded into. I've used margins to snug the content <div> into that
space. The margins are made large enough to bypass the two outer <div>s. So although
the content <div> is actually still going all the way across the page, the margins are large
enough to clear the sides.
Notice that the footer <div> has no positioning declarations. This will allow it to flow right
beneath the element it follows in the document structurein this case, the content <div>.
Note
There is a fixed background for the content <div> as well. I wanted to make a point
with this project about the variety of ways fixed backgrounds could be applied. It is
only necessary to use two ways to get this effect. Depending on the file sizes, it
might not even be desirable to use more, so pay attention to those.
Caution
Be aware that Dreamweaver will not render the background position: fixed
properly. It renders it in relation to the element. Your page will not look the same
in a browser, so use Preview in Browser (F12) to see the effect.
Note
When using button-styled navigational lists, it's not important to use text links at
the bottom of the page as is recommended when your navigation is images. To
6.
7.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Creating Buttons and Background Shapes
Now that you have a grip on CSS selectors, you'll create some interesting button-styled
navigation using a couple of small background images and an unordered list. You'll also take
away the square look that the bottom of the navigation <div> would normally have. You already
have the actual nav <div> on the page, but it doesn't yet have any background color or styling.
You'll add the <ul>, <li>, <a>, and <p> styling. Each one carves out a specific area for itself that
contributes to the overall style of the button area.
Place your cursor in the bottom of the project1.css document. In the Snippets panel, select
the MX Magic 2004 > Project 01 > 02-Button CSS snippet and insert it into your page.
The div#nav ul selector adds margins on each side of the list. This keeps the space around
the list so that the colored background will show when the list is styled.
Note
To be accurate and specific, all the selectors for the navigation <div> begin with
div#nav and a space, and then you continue down the cascade naming each
element in the document tree until you get to the name of the element you're
styling. These are known as Descendant Selectors. You are defining rules for
elements based on the element appearing inside of a specific <div> and even inside
other specific elements.
The div#nav li selector removes the list style (bullet) and adds padding inside the <li>
itself on the top and bottom. This begins to create a more button-like look.
div#nav li a is the selector that defines the actual link itself. The link must be set to
display: block with a width of 100% to be "clickable" through the whole button area, not
just on the text itself. A left margin is set to hold the text away from the left edge.
Notice the grouping of the div#nav li a:hover, div#nav li a:focus selectors. They are
written with a comma between the selectors because they have identical declarations. The
a:focus selector applies to the look you see when tabbing through the page. This is a good
habit to get into to make your page visually more accessible.
Caution
Make sure when separating selectors with commas that you use the entire selector
each time. For example: Due to the lack of specificity, div#nav li a:hover,
a:focus is not the same as div#nav li a:hover, div#nav li a:focus.
1.
Save your document, and preview the index file in your browser. 2.
You need to add some background color and images for styling. For example, adding a
white background shape (image) to the bottom of the div#nav will get rid of the
squareness normally there. In the CSS Styles panel, highlight the selector called div#nav.
Click the Edit icon at the bottom.
3.
4.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Click OK and you'll be taken back out to the CSS Style definition for the div#header h1
selector.
Please pay close attention to the font declaration on this selector (and the ones to follow).
The font cascade is a very overlooked and highly useful item. Everyone has heard of
"browser-safe" fonts. And it is important to make sure some of the fonts you're using are
fonts that most browsers havebut they don't all have to be. Due to the cascade order, the
browser starts with the first font. If that font is found, the browser renders it on screen. If
not, the browser looks for the second font, and third, and so on until it finds one of the
fonts you've defined. This is the reason you should always define a generic font as the last
font in your declaration. The browser will at least render serif or sans-serif.
Note
What's the logic behind the list you created? I began with Ravie, a fun, funky font
that is installed with Publisher and shows up on many Windows boxes with custom
installs. Then I went to Snap ITC, which is fairly similar and much more common on
older (and some Mac) systems. This was followed by Berlin Sans FB and Beesknees.
They are similar in look but because Beesknees appears to be more common, and I
generally like the look of Berlin Sans FB more. I placed the more common one after
the less common one. Marker Felt is an OS X for Macintosh font. Impact comes
installed on many Windows and Mac machines. It's not my favorite, but it's better
than something plain like Arial, so I added it toward the end of the cascade as a
"catch-all" before Arial Black and the generic sans-serif.
Tip
Many times developers do not take advantage of this feature. There are a variety of
4.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
reasons, including wanting the web to be like the print medium where things are
identicalit's notnot knowing what fonts are available on the various platforms,
and maybe simply not realizing the possibilities. If you take a little time one
afternoon and dig around in these links, you can develop your own attractive font
cascades. Code Style provides an excellent cross-platform font sampler survey with
images of the fonts next to the survey results (www.dwmagic.com/go/16).
Microsoft's Typography area has font listings available by product
(www.dwmagic.com/go/17).
You can have headers styled with CSS instead of images. Because Windows XP now
has Clear Font rendering similar to the Quartz rendering on OS X Macintosh, it
won't be long before you can't tell a CSS styled header from a graphicat least not
by the ugly pixellation. This saves you download time and makes your page more
accessible to all technologies.
Choose the font list you just created. Set the size to 2.5em. Save the CSS and view your
index page.
Notice how the words in the black nav area magically seem to appear out of nowhere. This
is due to the cascade order. Previously, you had not assigned a color to the h1 selector, so
it was inheriting the #000 (black) from the <body> rule. The font was there, but because it
was on a black <div>, it was invisible. It's now a nice light lavender for contrast. I also
centered it, gave it a little letter spacing (space between each letter for legibility), and a
small top margin to keep it away from the top of the browser because browsers are not
consistent in their default margin and padding settings.
Note
The black text on black <div> issue is the reason applying a background color and
font color in the same rule is the best practice. If you're sure your background
below has contrast and you don't want a different background color, you can
declare background: transparent. You'll have to add this to your style sheet by
hand.
5.
Create one more font list and apply it to the div#nav li a selector. Use these fonts in
order:
Kristen ITC
Marker Felt
Tempus Sans ITC
Textile
Arial Black
Arial
sans-serif
6.
Apply the font list to the div#nav li a selector, select a font size of 1em, and click OK.
Note
7.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Selectors, Siblings, Descendants, and the Cascade
This next little trick came to my attention through my good friend, and IE5 Mac bug buster,
Philippe Whittenberg. I'll demonstrate it using the navigation for this page. It can be even more
spectacular in its style when you've got more of a "down state" button or an inline tab-styled list
of links. I call it the "you are here" trick. If you've styled CSS buttons before, you may have
shown the button for the active page in its down state by changing its class or id on each page.
If you use templates or Library Items, however, you have to place your navigation in an editable
area in order to make those changes. This technique allows you to show a page indicator
whether you use server side includes, templates, or Library Items using only the body element
and CSS.
Adjacent Sibling Selector Styles
I don't have space to get deeply into sibling, descendent, or adjacent selector
relationships, but the project web site has resources for you to learn more. These
selectors can be very powerful. Take a look at a few examples from the project.
With the last group of snippets, we placed the div#content p+h3 and div#info
h4+p selectors; these are known as Adjacent Sibling selectors. They allow you to take
advantage of two elements that come in a specific order in your page. The first one
selects any <h3> element that immediately follows a <p> element that is a
descendant of a <div> element with an id attribute that equals content. (<h3> and
<p> are siblings in the document tree and are selected only when they are adjacent
to each other.)
This particular Adjacent Sibling selector is instructing the <h3> element, which is
immediately preceded by a <p> element, to have a top border. I used a 3em line
height to force the border away from the h3 header a bit.
The second selector, div#info h4+p, selects any <p> element that immediately
follows an <h4> element (siblings) that is a descendant of a <div> with the id of
info. In our selector, this causes the first paragraph after the <h4> element in the
info div to be centered with a bolded font. Descendant selectors are, in my opinion,
underutilized. Take some time to learn more about them.
For further information about CSS Selectors, pattern matching, and Inheritance, see
Adrian Senior's article (www.dwmagic/go/18) and the W3C recommendation for CSS2
on selectors (www.dwmagic/go/19).

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
You may have noticed that the body element on the page has an id class declared. It says:
<body id="trickpage">. Here's how it works:
Insert the 04-Here CSS snippet into your page, save it, and view the selectors.
The first selector begins with body#trickpage div#nav ul li, and selects any li element
that is a descendant of an ul element that is a descendant of a <div> element with an id
attribute that equals nav that is a descendant of a body element with an id attribute that
equals trickpage. Sound confusing? Here's what's happening in plain English. I placed an
id trickpage on the <body> tag of my page about Trick Tips (each page is given a specific
id on the <body> tag that is unique; the selectors for all of them are in the 04-Here CSS
snippet). Then, through the selector, I instructed the page that if there is an id of trickpage
on the body selector, apply this style to the li in the ul in the nav <div>. That style
appears the same as the regular div#nav li selector for the button.
The second selector begins with body#trickpage div#nav ul li.tricks a, and goes one
step further. It selects any a element that is a descendant of an li element with a class
attribute named "tricks" that is a descendant of an ul element that is a descendant of a
<div> element with an id attribute that equals nav that is a descendant of a body element
with an id attribute that equals trickpage. What that one means in plain English is that if
there is an a element with the id tricks, on a page where the <body> tag has the id of
trickpage (of course in the nav <div> and in a unnumbered list), it should be rendered as it
is defined in that selector. That style is exactly like the hover/focus style from the div#nav
li a selector.
1.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Tip
There's a great resource that helps you decipher complex selectors. Use it often,
and you'll soon understand these selectors at a glance. It's called the SelectOracle
(www.dwmagic.com/go/20). You input complicated selectors into the form, click
"Explain This," and it will give you their meaning. It's an invaluable tool for
learning.
Now you can experiment with this technique. Do a "Save As" on your index page, create a
couple new pages, and give them different names. Go into each page and give the body id
one of the ids I've created in the 04-Here CSS snippet (linkspage, tourpage, gallery-
page). Now preview them in a browser and notice how the active (black background)
button changes from page to page dependant on the body ID given.
2.
Validate your pages. Get in the habit of validating both your HTML (XHTML) and CSS. This
will save you time and headache because you will have fewer problems if you are coding to
standards. Yep, there will probably always be the occasional CSS hack you'll have to use
when a browser just can't get it right, but you'll be way ahead of the game. Use
Dreamweaver's built-in validation (File > Check Page > Validate Markup) or the W3C site.
(Validate your CSS at www.dwmagic.com/go/22 and validate your HTML and XHTML at
www.dwmagic.com/go/23.)
3.
Note
I haven't discussed support for Netscape 4 type browsers in this project. If you need to
support Netscape 4, there's a simple hack to hide styles from it. For me, it's much
easier to keep all my styles in one linked CSS document and hide the things that give
Netscape 4 trouble. John Gallant and Holly Bergevin wrote an excellent article on the
Caio Hack (www.dwmagic.com/go/21).
For tips on debugging your CSS layouts, read Holly Bergevin's "Debugging CSS the
Easy Way" article at www.dwmagic.com/go/24.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Forging Friendly Hyperlinks to Submenus
There's nothing fancy about making these menu buttons. Sure they look fancy, but the code is
just a simple link. You might be thinking that a simple hyperlink will load a page in the browser
when all you really want to do is expand the submenu. As long as JavaScript is enabled, the
hyperlink will not be followed; the user will not leave the current page while he toggles
submenus with the menu buttons. The Toggle Menu extension takes care of preventing your
menu button hyperlinks from loading (if JavaScript is indeed enabled). Right now I want you to
know that by providing a real hyperlink, as opposed to a null hyperlink such as javascript:; or
#, it provides several benefits:
If JavaScript happens to be turned off, the hyperlink you use could take the user to another
page where the submenu is visible so that the user can navigate the site as intended.
Search engines can follow real hyperlinks, but hyperlinks in behavior actions are not
followed. Search engines can't follow a null hyperlink.
When users place their pointers over the hyperlink, they'll see an actual file path in their
browser's status bar. Some people are suspicious of clicking a hyperlink if they can't see
where you'll be taking them (as in the case of a null hyperlink).
With those benefits in mind, it's time to get started:
Select the Hyperlink object found in the Common category of the Insert bar, or choose
Insert > Hyperlink.
Tip
Set up a keyboard shortcut (Edit > Keyboard Shortcuts) for Insert > Hyperlink to
get to the Hyperlink dialog even quicker. There's a Help button at the bottom of the
Keyboard Shortcuts dialog if you get stuck.
1.
Complete the Hyperlink dialog. For this project, Text and Link are the only two fields you
need to complete, but if you'd like to do the rest, you're welcome. Give the menu button
whatever text you like. In the demo, I used Menu One.
2.
Repeat steps 1 and 2 for as many menu buttons as you intend to have. 3.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Note
The JavaScript block in the ER_javascriptVariables Editable Region of the template
made it on to the child pages. This is because you added the new Editable Region,
inserted the code, saved the template, and then updated the pages. Normally,
Editable Region content does not propagate to child pages once the Editable Region
exists on the child page.
Open Technique2\Tech2Button1.html using the Files panel. In Code view, scroll to
about line 70 and change the var statements for msobj and msurl as shown here before
saving:
Listing 3.6.
9.
var msobj="button1";
var msurl="../images/navigation/button1_d.jpg";
This tells the page's JavaScript function to find the button named (with the id) button1 and
set its src attribute to the down state image button1_d.jpg. set its src attribute to the down state image button1_d.jpg.
Repeat step 9 for the second child page (Technique2\Tech2Button2.html), using
button2 and ../images/navigation/button2_d.jpg, respectively, in the variable declarations. button2 and ../images/navigation/button2_d.jpg, respectively, in the variable declarations.
10.
Save and close all open files, updating if prompted, and preview the file named
Technique2\Tech2Button1.html.
11.
Note
You have now seen two ways to control button states in Template pages. The technique
described in this section has the advantage that the button's source attribute is now
located in the Template's Non-Editable Region. Template-level changes to navigation
file locations or file/pathnames that you specified in the ER_javascriptVariables
Editable Region will not propagate to all child pages. You still have a rollover on the
down-state image, however, and a redundant link. The third technique manages both
of these problems.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Preparing to Work
To prepare for this project, you will need to do the following:
Install the Project 4 snippets extension Project 04 Snippets.mxp in the
Projects\04\Extensions folder. See Appendix A, "Installing Extensions," for instructions.
1.
If you're using Dreamweaver MX (6.0 or 6.1), install the Project 4 Strip XML tag extension
StripXMLtag.mxp in the Projects\04\Extensions folder. See Appendix A, "Installing
Extensions," for instructions. Please note that you should not install this extension if
working with Dreamweaver MX 2004!
2.
Copy the contents of the accompanying CD-ROM folder Projects\04\Working_Files\ to a
new folder named Project_04 on your hard drive.
3.
Start Dreamweaver MX 2004 and create a site definition that points to the Project_04
folder; name the site Project 04. folder; name the site Project 04.
4.
Repeat steps 3 and 4 using the CD-ROM folder Projects\04\Finished\ and the local
folder Project_04_F; name the site Project 04 Finished. You can use this as the reference folder Project_04_F; name the site Project 04 Finished. You can use this as the reference
web site for this project.
The main menu links of the site are root-relative. If you wish to preview the site on your
local machine, you will need to set up a testing server such as IIS, ColdFusion Server, or
Apache and configure your site definition appropriately. Previewing a single page will be
fine as long as you don't try to use the main navigational elements. The submenu elements
work as expected from any previewed page without a testing server.
5.
Access the Dreamweaver preferences (Ctrl+U/Cmd+U) and select the Accessibility
category. Make sure there is a check in all check boxes. In the Code Rewriting category,
make sure there are checks for the top six items and the top radio button is selected. In the
Invisible Elements category, ensure there is a check in everything except CSS display:none.
In the Validator category, select XHTML 1.0 Strict and uncheck everything else. Leave the
Options at their defaults. Click OK to save the changes and close the Preferences dialog.
6.
If you have Contribute 1.0 or 2.0 installed, read and follow the instructions found in the file
Projects\04\Extensions\CT_readme.txt. Otherwise, skip this step and continue the
project as if you were developing for a Contribute user. Be sure to send the
CT_Readme.txt and CT_Commands.zip to your Contribute users or this technique will all
be for nothing!
7.
Open ParameterList.pdf, found in Projects\04\Extensions\, which contains a
breakdown of the finished template's parameters. This document will be useful to you and
your clients when you are creating or modifying documents built from the completed
template.
8.
Note
Unfortunately, due to a bug in the CSS-P engine, the Template Repeating Region Mini-

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Position your cursor at the end of line 27 and type the following (or use snippet MX Magic
2004 > Project 04 > 01-Comment_Mod_Date Param):
Listing 4.1.
4.

Note
Once a child page is created, you can use the Contribute menu selection Format >
Template Properties to modify these parameter values to the desired content. This
is the only way to modify the value of <meta> tags within Contribute to be unique
on each page.
You can repeat the process of step 3, using different values with the other <meta>
tags that you wish to make editable within Contribute.
Keywords and Description can be handled without the use of parameters by adding
these <meta> tags to the Editable Region named head. This won't meet your needs,
however, because the site is already developed, and changes to Editable Regions of
the Template file will not propagate to existing child pages. What you need to do is
insert the <meta> tags in the locked region (to avoid this propagation issue) and set
them up to use template parameters similar to step 3.
Scroll up to the Editor's Comments block (line 6) and replace the date valueJuly 20,
2003with @@(Comment_Mod_Date)@@ (or use the snippet 02-Comment_Mod_Date 2003with @@(Comment_Mod_Date)@@ (or use the snippet 02-Comment_Mod_Date
Expr). On line 7, replace the text Brad Halstead with @@(Meta_Author)@@ (or use the Expr). On line 7, replace the text Brad Halstead with @@(Meta_Author)@@ (or use the
snippet 03-Meta_Author Expr).
5.
In Code view, position your cursor at the beginning of line 18. Insert two <meta> tags using
Insert > HTML > Head Tags twice. Choose Description and then Keywords. For the value of
each, type Add Content Here!. each, type Add Content Here!.
6.
Position your cursor in the meta description tag and select Modify > Templates > Make 7.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
@@</p></div>
Examine the changes you've made, reading from left to right across the line.
You have made the submenu content into a Template Repeatable Region called RR_SubNav
that will allow you to create one or more of the submenu navigation elements. As you add
repeats of this to the page, the number of repeats is contained in the _index parameter's
value (counting from zero, of course) on the child page.
For each submenu element, the PageNumber parameter's value is compared to the
RepeatRegion's index value (_index+1). When they are the same, that submenu element
is not assigned a link (this would be a redundant link to the page itself) and is only styled
and acts as a breadcrumb marker. When they are different, that submenu element is
assigned a link, which is styled by virtue of the pseudo-class definition.
The link that is assigned to the submenu element is also determined by the value of the
_index parameter (as indicated in Table 4.1) by appending the parameter's value to the
page name to produce page1.htm, page2.htm, page3.htm, and so on (<a
href="page'+(_Index+1)+'.htm).
Table 4.1. Submenu System Patterns
First Item Second Item Third Item
href page1.htm page2.htm (Assumed) page3.htm
tabindex 7 8 (Assumed) 9
title Product 2, Page 1 Product 2, Page 2
(Assumed)
Product 2, Page 3
accesskey 1 2 (Assumed) 3
link text About Product 2 Product 2 FAQ Product 2 Demo
class N/A BreadCrumb N/A
5.
In addition, this link (when it is made) is also given a tabindex value, a title value, and
an accesskey value (all of which are based on some variant of the _index parameter's
value and the Access_SubLinkTitle parameter's value).
When these values are written to the child page, the first template expression in line 35 will
have been evaluated (from the first @@ through the second @@).
When the PageNumber parameter and the RepeatRegion index are the same, the submenu
element is styled with an opening <span> tag. When they are not the same, an anchor tag
is opened with a pagelink. These opened tags must be properly closed. The next template
expression does that by repeating the test. If it succeeds, the closing </span> tag is
written. If the test fails, the closing </a> tag is written.
A final template expression is required to determine whether another breadcrumb will be

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Preparing to Work
Obviously, you are going to need both Fireworks MX 2004 and Dreamweaver MX 2004 to
complete this project. If you do not have either of these applications, you can install the free
trials located in the Software folder on the accompanying CD.
To prepare for this project, you will need to do the following:
Copy the Projects/05/Site folder from the accompanying CD to your computer. 1.
Define a new site in Dreamweaver using the 05/Site folder as your local root folder. 2.
Install the Fireworks Harmonia extension, Harmonia.1.0.0.mxp, in the Extensions folder
for project 5. The Harmonia extension was developed by Kleanthis Economou of Project
Fireworks (www.projectfireworks.com). See Appendix A, "Installing Extensions," for
instructions on installing it.
Note
There is a strong possibility that the following steps were already configured
automatically when you installed Dreamweaver MX 2004 and Fireworks MX 2004;
however, you will not know this without following the steps. So, take a moment to
make sure everything is exactly how you need it. The setup process will take less
than a minute and has the ability to save you a considerable amount of time while
working on your projects.
3.
To achieve maximum integration between Dreamweaver MX 2004 and Fireworks MX 2004,
you need to make sure that they are configured to "talk" to each other:
Choose Edit > Preferences or Dreamweaver > Preferences on the Mac.
In the Category column, choose File Types/Editors and select .png from the
Extensions window. In the Editors window, make sure Fireworks (Primary) is listed.
If Fireworks is not listed, click on the (+) Add button above the Editors field, browse
to the Fireworks MX 2004 executable, and click Open.
Click OK to confirm your choices.
Repeat these steps for the .gif and .jpg file types in the Extensions window.
4.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Project 6. Translating a Fireworks Layout
into a CSS + HTML Design
Kim Cavanaugh
Ki m Cavan au gh has contributed numerous articles to Macromedia DevNet, has
published two books on Dreamweaver and Fireworks and writes extensively for
CommunityMX.com, covering the full range of Studio MX products. He is also a teacher
for the School District of Palm Beach County (Florida) where he has been teaching
middle school students web and graphic design using Dreamweaver, Fireworks,
Freehand, and Flash since 1999.
There's an unmistakable buzz in the web development community over the use of Cascading
Style Sheets (CSS) to replace many of the tried and true methods previously used for styling
web pages. Out are font tags, nested tables, and the use of HTML attributes for styling page
elements. In are the more efficient methods that CSS affords. The purists even go so far as to
decry the use of tables of any sort to hold page structures together. Great! And just when I was
getting good at that stuff!
Like many others, I'm a visual designer, and being required to work in a text editor to achieve a
design has always been counterintuitive for me. For this project, I wanted to show how someone
who likes to see his work unfold could bridge the world of visual design and CSS. My goal
became how to illustrate the way a page could be designed in Fireworks and then have its visual
aspects translated into a CSS design in Dreamweaver. The new tools that come built into
Dreamweaver MX 2004 make this process much easier. I hope that once you see how a design
can be put together with an eye toward maximizing your use of CSS, you too will be able to
make the transition to the brave new world of CSS design.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Preparing to Work
You are going to need both Fireworks MX 2004 and Dreamweaver MX 2004 to complete this
project. If you do not have either of these applications, you can install the free trials located in
the Software folder on the accompanying CD-ROM.
To prepare for this project, you will need to do the following:
Copy the files for this chapter from Projects/06 on the accompanying CD to your hard
drive.
1.
Define a new web site in Dreamweaver MX 2004 using the 06 folder as the site root and
name it Project 06. name it Project 06.
2.
From the assets folder in your Project 06 web site, open pbr_layout.png in Fireworks. In
the event you are prompted about missing fonts, be sure to click the Maintain Appearance
button so that all the text objects remain intact.
3.
Open the Layers panel and note how the Show/Hide Layer symbol (the eyeball icon) has
been toggled off for all the layers except Layout. Examine the layout and the notes that
have been added for the design concept.
4.
Click the Show Layer icon next to the Functional areas layer. Once the original sketch was
completed, this layer was added so the functions of the different page elements could be
seen more easily.
5.
Hide the Layout and Functional areas layers, and click the Show Layers icon next to the
other layers in the document.
6.
Open and examine the file called pbr_layout_sliced.png. Three slices have been created
for this image with each slice named and an appropriate file type set: header_photo,
header_bg, and page_bg. Note that the Logo layer has been hidden because the logo and
the photo at the top of the page overlap and can't be sliced easily. Note also that because
the header_bg and page_bg slices are repeating elements, only a portion of each of those
images has been sliced.
7.
Look at pbr_layout_logo.png. This is a duplicate of the other files, except that all of the
layers except the logo layer have been hidden and a slice has been added to capture the
logo graphic, with the file type set to GIF and the slice named pbr_logo.
8.
Export the slices from the two files or simply move on to the next section. You'll find all of
the images you need in the images subfolder of your assets folder for this project.
9.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Getting the <body>into Shape
Having examined the design concept, you should now have a good idea of how the page
elements need to be styled. In this section, you'll create an external style sheet and set the
common page properties for the page by redefining the <body> tag with CSS.
In Dreamweaver, start a new page. Create a standard HTML page, and save it as index.htm In Dreamweaver, start a new page. Create a standard HTML page, and save it as index.htm
in the root folder of your site.
1.
Open the CSS Styles panel and click the New CSS Style button at the bottom of the panel. 2.
In the New CSS Style dialog, set the Selector Type option to Tag and the Define In option
to New Style Sheet file.
3.
Use the drop-down field at the top of the New CSS Style dialog to set the tag to body and
click OK.
4.
In the Save Style Sheet As dialog, name the file pbr_style.css and save it into the root In the Save Style Sheet As dialog, name the file pbr_style.css and save it into the root
folder of the web site.
The familiar Dreamweaver interface for creating style sheets will appear after you have
completed those steps. Examining the page elements from the source Fireworks design
reveals that a common font is used throughout the page, the page is set without margins,
and the repeating graphic is used as a page background.
5.
In the Style Definition dialog, set the text style to Verdana, Arial, Helvetica, sans serif with In the Style Definition dialog, set the text style to Verdana, Arial, Helvetica, sans serif with
a color of #666666. Leave the text size unspecified, and set Line Height to 1.1 ems. a color of #666666. Leave the text size unspecified, and set Line Height to 1.1 ems.
6.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Styling Individual Cell Properties with the Tag Inspector
One of the great new additions to Dreamweaver MX 2004 is the updated and revised Tag
inspector. With this new and improved tool, applying IDs to individual page elements can be
done entirely within the Dreamweaver workspace. For a visual designer, taking the next step of
using CSS selectors to modify those objects just got a whole lot easier.
Click inside the header table to display Dreamweaver's new Table Selection tabs. Click the
tab under the second cell from the left, and choose Select Column.
1.
The first chore is setting the width of the cells in the header table. In the Tag inspector
(F9), choose the Attributes tab to open that panel, and click the + next to the
CSS/Accessibility category (if you're in Category view). In the ID field type in hdSpaceLeft. CSS/Accessibility category (if you're in Category view). In the ID field type in hdSpaceLeft.
To apply CSS selectors to individual table cells, you must give the cell an id.
2.
Click the New CSS style button in the CSS Styles panel, and choose Advanced as the
Selector Type. Type #hdSpaceLeft in the Selector field, and click OK to save the new Selector Type. Type #hdSpaceLeft in the Selector field, and click OK to save the new
settings into the pbr_styles.css file. Choose the Box category, and set the Width to 20 settings into the pbr_styles.css file. Choose the Box category, and set the Width to 20
pixels.
This new style controls the width of the table cell, preventing it from collapsing. In the past,
controlling cell widths would have been accomplished by inserting spacer images over and
over again. Using selectors is a much more efficient way to accomplish the same task.
3.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Note
I've borrowed a naming convention from Flash for applying the ids to individual
objects on the pagestarting with lowercase letters, and then uppercasing each
new word in the filename. You can choose another method if you like, but
remember that selectors cannot contain spaces or special characters, cannot start
with numbers, and are case-sensitive. Choose a standard method for yourself, and
stick to it.
Select the next cell to the right and give it an id of hdAdSpacer. Create a new style using Select the next cell to the right and give it an id of hdAdSpacer. Create a new style using
#hdAdSpacer as the selector, and set the Width to 350 pixels. This cell sets space aside for #hdAdSpacer as the selector, and set the Width to 350 pixels. This cell sets space aside for
an advertisement that may be added in the future.
4.
Provide an id for the rightmost table cell of hdSpaceRight, and create a new style that sets Provide an id for the rightmost table cell of hdSpaceRight, and create a new style that sets
the width of this cell to 20 pixels. the width of this cell to 20 pixels.
5.
Move down to the mainNav table and select the leftmost table cell and give it an id of
navSpaceLeft. Create a new style with the selector of #navSpaceLeft, and set the Width to navSpaceLeft. Create a new style with the selector of #navSpaceLeft, and set the Width to
120 pixels in the Box category. 120 pixels in the Box category.
Here you're starting to apply spacing properties to the cells on the far right and far left of
the mainNav table. This adds some control to the placement of the text links.
6.
Tab to the next table cell in mainNav, and begin adding the text below, tabbing into the
next cell as you complete each entry:
Accommodations Accommodations
Amenities Amenities
Rates Rates
7.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
This adds the text for the secondary navigation.
Select the center table cell, and apply the id of mainCenter. Create a new style with the Select the center table cell, and apply the id of mainCenter. Create a new style with the
Selector set to #mainCenter, and set the Padding to 10 pixels in the Box category, with the Selector set to #mainCenter, and set the Padding to 10 pixels in the Box category, with the
Same for All check box selected. In the Block category set Vertical Align to Top.
4.
Apply an id to the right cell of mainRight. Add a new style with the Selector set to Apply an id to the right cell of mainRight. Add a new style with the Selector set to
#mainRight. In the Box category, set the width to 150 pixels and the Padding value to 10 #mainRight. In the Box category, set the width to 150 pixels and the Padding value to 10
pixels with the Same for All check box selected. Go to the Block category, and set the
Vertical Align value to Top and Text Align to Center.
Note
As content is added into the Design view, you should see the design begin to take
shape. If you notice small discrepancies in rendering in Dreamweaver, however, be
sure to save the CSS file and check your design in a browser. While CSS rendering
in Dreamweaver MX 2004 is better than previous versions, it's still not perfect.
5.
In your Assets panel, locate the file called hammock.jpg and drag it into the center table
cell of the page, called mainCenter. In the Property inspector, set the Align value for the
image to Left. Press the right arrow key to move your cursor to the right of the image.
6.
Open the placeholder_text.txt file, and paste its contents to the right of the picture or the
hammock. As the text comes onto the page, it will be styled with the font type and size
applied when the <body> tag was redefined.
7.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Styling Individual Objects with Custom Classes
Up to now, you've been using CSS Selectors to style individual objects on the page. In this next
section, you'll see how custom classes can be used to provide styling to elements on an as-
needed basis. In particular, you'll be setting the styles that will be applied to the nested tables
that you inserted in the last section.
Click the New CSS Style button, and choose Class. Make sure that the pbr_style.css file is
still selected as the destination to save the new style. Name the style .rightHeader, and still selected as the destination to save the new style. Name the style .rightHeader, and
click OK.
1.
In the Style Definition dialog, choose the Type category and set Font Size to 0.8 ems. Set
the color of the text to #FF9966, and the Style to Italic. Switch to the Block category, and the color of the text to #FF9966, and the Style to Italic. Switch to the Block category, and
set the Text Align property to Center. Click OK to close the Style Definition dialog and
return to the page.
Note
You'll recall that 1em is equal in value to the size of the font element in use.
Because this design calls for proportional spacing of fonts based on the viewer's
settings, a value of 0.8em will show a font at 80% of its standard size.
2.
To apply the new style, click on the text at the top of the right column (Current Weather),
and then click the Style list in the Property inspector and choose rightHeader from the list.
The style is added to the first block-level element that Dreamweaver findsin this case, the
<td> tag.
3.
Repeat the process for the remaining table headings, using the same custom class for each.
As you do so, the text will be transformed to match your Fireworks design.
4.
Create a new style in the same manner, and set it as a custom class. Name the class 5.
6.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Styling Navigation Links
In this section you'll be using a different form of CSS Selector to define three link styles for the
page: the default links, the main navigation links, and the links for the secondary navigation on
the left side of the page.
Add a new CSS style and set the Selector Type to Advanced. Click the drop-down arrow,
and choose a:link. Be sure that you are still working in the pbr_style.css file.
1.
Place your cursor in front of the a in the Selector field, and type in #mainNav. The selector Place your cursor in front of the a in the Selector field, and type in #mainNav. The selector
will now read #mainNav a:link. Be sure that there is a space between the letters "v" and
"a."
2.
Click OK, and in the Style Definition dialog, set the Text Size to 10 pixels and the color to Click OK, and in the Style Definition dialog, set the Text Size to 10 pixels and the color to
white (#FFFFFF). In the Decoration settings, check None and then click OK to close the first white (#FFFFFF). In the Decoration settings, check None and then click OK to close the first
definition.
Unlike the previous text elements, the design calls for the navigation bar text to remain at
the same size, and therefore a fixed pixel size has been chosen.
3.
Add another new style using the CSS selector of a:visited. Type #mainNav in front of the Add another new style using the CSS selector of a:visited. Type #mainNav in front of the
selector. Use the same 10 pixel size, set the color to #CC99CC, and set Decoration to None. selector. Use the same 10 pixel size, set the color to #CC99CC, and set Decoration to None.
Remember that there needs to be a space between the class and the selector.
4.
Create links for the a:hover and a:active selectors, type #mainNav ahead of them. Use a Create links for the a:hover and a:active selectors, type #mainNav ahead of them. Use a
color of #FF9966 for hover and white (#FFFFFF) for active. Be sure that Decoration is color of #FF9966 for hover and white (#FFFFFF) for active. Be sure that Decoration is
None for both. This finishes the main navigation styling.
Tip
There's a well-known mnemonic device to help you remember that link styles must
always be applied in a specific order. Link-Visited-Hover-Active; or LoVeHAte. If
you can remember Love-Hate, your links will always be styled in the proper order.
5.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Inserting One Lone <div>
Remember the logo for the Resort? The one that just seemed too hard to place into the page
design? That's the very last step you need to tackle, and this time you'll get the job done by
creating an absolutely positioned <div> to handle the job.
Add a new style, set the Selector Type to Advanced, and name it #logo. Be sure you are Add a new style, set the Selector Type to Advanced, and name it #logo. Be sure you are
still working in the pbr_style.css file.
While it seems a little backwards, the first step in inserting the image is to define the
container that it will go into in CSS.
1.
Select the Positioning category and set Type to Absolute, Width to 121 pixels, Height to 127 Select the Positioning category and set Type to Absolute, Width to 121 pixels, Height to 127
pixels, Top to 0 pixels, and Left to 0 pixels. Click OK. The values used in defining the size pixels, Top to 0 pixels, and Left to 0 pixels. Click OK. The values used in defining the size
and position of the logo <div> were obtained from the Property inspector in Fireworks.
2.
Choose Insert > Layout Objects > Div Tag. In the Insert Div Tag dialog, set the ID value to
logo, the Insert list to Before tag, and choose <table id="header"> from the last list.
This is another new feature of Dreamweaver MX 2004 that allows you to work with
absolutely positioned <div> tags without having to remove the inline style that previous
versions of Dreamweaver inserted into the page.
3.
The placeholder text will already be selected, so just delete the text before you insert the
logo.
4.
With the cursor still inside the logo <div>, insert the file called pbr_logo.gif from your
images folder.
5.
Save the CSS file, and preview your work in a browser. 6.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Preparing to Work
To prepare for this project, you will need to do the following:
Install the extension flash_date_picker.mxp from the Projects/07/Extensions folder
on the CD. See Appendix A, "Installing Extensions," for more information.
1.
Copy and paste the Projects/07/project_start folder from the CD to your hard drive. 2.
Define a new site using the project_start copy as your site root. 3.
Because this project mainly focuses on integrating Flash and Dreamweaver, most of the site
structure has been created for you. A few items are still missing: a navigation bar common
to all the pages, a date picker for the contact form that enables users to ask for a free daily
pass to the park, and a few of those flashy effects that will excite visitors.
To set up the missing elements, start creating the Library Item that contains the main Flash
navigation bar. Choose File > New. From the Basic Page category, choose Library Item. The
New Document dialog appears providing you with several choices.
4.
Click the Create button. The New Document dialog closes, and you are provided with a new
blank Library Item.
5.
Switch to Show Code and Design views or Show Code view, and remove the <meta> tag at
the top of the page.
6.
Save the document as flashnav.lbi into the Library folder. Save the document as flashnav.lbi into the Library folder. 7.
Note
With more than 40 Flash Buttons styles, Dreamweaver MX 2004 has everything you
need to flash up your web pages in a snap. Nevertheless, if the buttons that ship with
Dreamweaver MX 2004 are not to your taste or are not enough for you, you can look
for additional sets on the Macromedia Exchange. To do this, simply click on the Get
More Styles button in the Insert Flash Buttons dialog box. A new browser window will
launch, displaying the Dreamweaver area of the Macromedia Exchange. Make sure you
are searching the Dreamweaver Exchange, enter the phrase Flash+buttons as your are searching the Dreamweaver Exchange, enter the phrase Flash+buttons as your
search term, choose Flash Media as the Category, and then click the Search button.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Generator Is Dead. Long Live Generator
Dreamweaver Flash Objects are created directly inside Dreamweaver thanks to an
embedded version of a program called Macromedia Generator. If you've never heard
of it, all you need to know is that Generator was a Java-based server technology
created by Macromedia, which was able to generate Flash files on-the-fly by passing
parameters to Flash Template files (SWT files).
With the release of Flash MX, Macromedia ceased further development of the
Generator Server family and replaced it with a more feasible technology called
Macromedia Flash Remoting MX, which better fit with Macromedia's new vision of
Rich Internet Application (RIA). For the same reason, the Macromedia Generator
Authoring Extension, which is required if you want to create your own custom sets of
Dreamweaver Flash Buttons and Generator templates (SWT files), is only compatible
with Flash 5 and doesn't install with any newer version of Flash.
This means that if you do not have an old copy of Flash 5, you can not create
Generator-based Flash Buttons. However, with newer versions of Flash, you can still
create Flash Buttons that replicate the functions of Generator-based buttons inside
Dreamweaver in many other ways. One is the adoption of the FlashVars property of
the Flash Player, which you will learn to use in this project. Take FlashBang! Buttons,
for instance. These are a more flexible Dreamweaver Flash Buttons-like solution,
which takes full advantage of FlashVars. Offered as an alternative to standard
Macromedia Flash Buttons, FlashBang! buttons are available as a commercial
Dreamweaver extension by Joseph Lowery and Edoardo Zubler at
www.flashbangmedia.com.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Editing Library Items
Time to insert the HTML elements that will host the navigation bar driven by Flash Objects.
With your new Library Item still open, switch back to Design view. 1.
Select Insert > Layout Objects > Div Tag. The Insert Div Tag dialog appears, letting you
specify the CSS Class you want to attach to your <div> tag and the layer's ID. Because no
CSS file has been linked to this document, both the Class and the ID list menus are empty.
2.
Type flashnavigation into the ID field, and click the OK button. Type flashnavigation into the ID field, and click the OK button.
Giving an ID to the layer helps you identify it as a distinct element of the page it is inserted
into. In addition to this, because the CSS Style provided with this project contains an ID
selector for flashnavigation, the layer ID eases the positioning of every instance of this
Library Item throughout the site.
When you click OK, the <div> tag is inserted and a sentence saying Content for id
"flashnavigation" goes here is added to the flashnav.lbi document.
Note
CSS ID selectors are used on a per-element basis and refer to the ID attribute in
HTML code.
3.
Delete the sentence Content for id "flashnavigation goes here", and click on the
Table button in the Common category of the Insert bar. The Insert Table dialog appears,
offering twice the options it did in Dreamweaver MX, thanks to the addition of graphical
elements that let you easily identify each part or attribute of the HTML table to be inserted
into the document.
4.
Enter the following values into the Insert Table dialog:
Rows: 1 Rows: 1
Columns: 3 Columns: 3
Table Width: 100% Table Width: 100%
5.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Preparing to Work
To prepare for this project, you will need to do the following:
Install the DWMagic Mailer.MXP extension located on the CD in the
Projects/08/Extensions folder. See Appendix A, "Installing Extensions," for instructions.
1.
Create a site that has a server model set to any of the following: ColdFusion, ASP VBScript,
or PHP.
2.
Be sure to set appropriate information in the Testing Server category of the Site Definitions
dialog to a hosting account where you have email capabilities so that you can upload your
pages for testing when the project is completed. For an ASP VBScript site, the hosting
account must have the CDONTS mailer component available for your use.
3.
If you already have a site defined with a ColdFusion, ASP VBScript, or PHP MySQL server
model that you'd like to use, then open that site and create the project's files within that
site.
4.
Optional: Copy the appropriate files for your server model from Projects/08/finished
into your site to see examples of completed pages for each server model.
5.
Prior to testing any of the pages in the finished folder, make sure that you make changes to
the email addresses used in the example pages. Go to the "Editing an Existing Server
Behavior" section near the end of this chapter for information on how to make changes.
6.
In the Files panel, ensure that the site created in step 2 is the active site. 7.
Create the Contact Us page by choosing File > New. On the General tab of the New
Document dialog, select Dynamic Page in the Category field. Choose the type of dynamic
page for your server model from the list on the right. Click Create.
For the duration of this project, we'll be using ColdFusion. You might want to follow along
using ASP VBScript or PHP, using the appropriate file extensions (.asp and .php,
respectively) in place of the ColdFusion file extension (.cfm).
8.
If you are interested in creating XHTML pages, prior to clicking the Create button, check the
box next to Make XHTML Compliant in the lower right of the New Document dialog.
9.
Save the file as contact.cfm with your site. Save the file as contact.cfm with your site. 10.
Give contact.cfm a title of Contact Us in the Title field of the Document toolbar. Give contact.cfm a title of Contact Us in the Title field of the Document toolbar. 11.
Repeat steps 8 through 10, titling the file Thank You and saving it as thankyou.cfm. Repeat steps 8 through 10, titling the file Thank You and saving it as thankyou.cfm. 12.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Preparing to Work
To prepare for this project, you will need to do the following:
Install IIS if you are going to test your files locallly. 1.
Install the .NET framework SDK setup, which can be found online at
www.dwmagic.com/go/8. The setup is very straightforward. Accept all of the default
options by clicking Next through each step of the installation.
2.
Install the extension MXMagic Upload.mxp, located in the Projects/10/Extensions
folder on the accompanying CD. See Appendix A, "Installing Extensions," for more
information.
3.
Import the example files included on the accompanying CD in the Projects/10 directory.
This includes the XML file that you will be creating, the example files, a click-through
Access database, and some sample image banners you can use. With the software
installed, you can set up the site in IIS and Dreamweaver.
4.
Create a Virtual Directory in IIS called advoodoo. 5.
Open the IIS Admin Snap-In by choosing Start > Control Panel, click Performance and
Maintenance, click Administrative Tools, and then double-click Internet Information
Services.
6.
Right-click the <computername>/Web Sites/Default Web Site node, and choose New >
Virtual Directory.
7.
In the Virtual Directory Creation Wizard, enter advoodoo for the Alias and click Next. This In the Virtual Directory Creation Wizard, enter advoodoo for the Alias and click Next. This
will allow you to access the project using http://localhost/advoodoo.
8.
Point the alias to the directory on your local machine where you copied the project files.
Click the Browse button, browse to the correct folder, and click Next. Click Next on the next
screen to accept the defaults and then click Finish.
9.
Create a site in Dreamweaver using the ASP.NET C# or VB server model. 10.
A Word on Workstations
At the time of this writing, the preferred OS for ASP.NET development is Windows
2000/XP Professional. The reason is that IIS comes on the OS installation disc. XP
Home, although similar to XP Pro, does not have the IIS component. If you need to
use XPHome, you might install a lightweight (and open-source) ASP.NET web server
called Cassini that works on any Windows 2000 or XP-based system. You can find it
at www.dwmagic.com/go/9.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Prepare a Database Connection to Track Click-Through
Traffic
Ok, so you've got this nifty rotating ad system. That's great, but now you want to know how
many times any given banner is clicked on. This can be easily implemented by creating a
redirect page that all banners can point to. This page would simply log the click-through and
forward the user to the advertised URL.
You will create a redirect page that you can route all banner clicks through. The data gathered
with this page is valuable information for knowing and understanding your readership. By
studying it, you can begin to understand what your visitors are interested in and, in turn, tailor
your content accordingly.
Because this page will not have an interface, you will not use Dreamweaver's built-in data server
behaviors. Instead, you will wire up your own database access code using ADO.NET. Fear not,
it's not as scary as it sounds.
Copy and paste advoodoo.mdb from Projects/10 on the accompanying CD into your
local site. The database is not very complex; in fact, there is only one table in it to hold
click-through information.
Caution
When dealing with Access databases, it is not a good idea to put them in a publicly
accessible folder as is done here. This is just for illustration purposes. All file-based
databases should be put in a folder other than your web root.
1.
Create a new database connection. Refer to Appendix B, "Creating Database Connections,"
for more information on creating one.
Note
You may access your connection string at any time by using the following code:
ConfigurationSettings.AppSettings["MM_CONNECTION_STRING_
advoodoo"];
Replace advoodoo with whatever you've named your connection.
2.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
Preparing to Work
To prepare for this project, you will need to do the following:
First, install the Server.Execute Translator extension, ServerExecute.mxp, located in the
Projects/11/Extensions folder on the CD. See Appendix A, "Installing Extensions," for
more information.
1.
Copy the necessary files from the Projects folder on the CD. If you want to start from
scratch and work each page as you go through the chapter, copy just the assets subfolder
from the Projects/11 folder to a location on your hard drive. If you want to get a sneak
peek at the files, copy the entire folder.
2.
Define a new site using the Projects/11 copy as your site root. Ensure that you specify ASP
VBScript as the server model in your site definition.
3.
To build the site structure, create a folder for each main section of the gallery, a folder for
includes, a folder for menus, and an assets folder for images and style sheets. The includes
folder will have site navigation includes as well as the content switcher, which will use
Server.Execute to load the menus. The menus folder will hold each section's individual
menu.
4.
Create a folder for each main section of the gallery: Portraits, Panels, and Whites. Under Create a folder for each main section of the gallery: Portraits, Panels, and Whites. Under
Panels, add two subfolders: ForSale and Installations. You will use these subfolders for Panels, add two subfolders: ForSale and Installations. You will use these subfolders for
testing the menu as you move deeper into a section of the site.
5.
Add a default.asp file to each folder, as well as one file for each submenu you're going to Add a default.asp file to each folder, as well as one file for each submenu you're going to
create (name them by section: portraits.asp, panels.asp, and whites.asp). Create a create (name them by section: portraits.asp, panels.asp, and whites.asp). Create a
contentswitcher.asp and nav.asp file in the includes directory. These last two will hold the contentswitcher.asp and nav.asp file in the includes directory. These last two will hold the
site navigation and the actual content switcher for the site.
6.
Server.Execute() Versus SSI
So what's the real difference between using the Server.Execute method and SSIs?
Compare the two:
Standard SSIs
Syntax: 
Either a file or virtual attribute is used depending on the type of path. A file path is
the equivalent of a document relative path in HTML, while a virtual path is the same
as a root relative path in HTML. The file/virtual path must be static; you cannot use
dynamic paths in SSI calls.
When an ASP page is requested from the server, all files called with SSI syntax are
parsed before the calling page begins processing, so that the server is certain it has
all the code it needs first. This means that if you wrote a conditional statement that

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Pub Date: December 19, 2003
ISBN: 0-7357-1378-2
Pages: 192

As a serious Web designer or developer, you'll want to do one thing and one thing only when you
lay your hands on the latest version of Dreamweaver: Start tinkering with all its new features.
Problem is that's hard to do on someone else's dime. With Dreamweaver MX 2004 Magic, you
don't have to! In these pages, Dreamweaver wizards Mossimo Foti, Angela C. Buraglia, and
Daniel Short and several other experts draw on their own professional experience to offer 12
real-world projects that let you explore Dreamweaver MX 2004 at your leisure. With a focus on
areas that can be troublesome for professional users-whether because they present thorny
issues or because they draw on completely new features-each lesson provides need-to-know
tips, proven techniques, and best practices. By working through the step-by-step tutorials
(whose project files and code you'll find on the accompanying CD), you soon will be finding your
way around all of Dreamweaver MX 2004's new features: dynamic cross-browser validation,
improved CSS support, built-in graphics editing, and more. In addition to the code listings and
exercise files on the CD-ROM, you'll find videos that clearly demonstrate step by step all the
procedures you need to complete in order to create the projects.
implements an include file based on a folder's location, each file would have to be
integrated into the page in the server's memory as if it were hard coded before it
was executed. If you had ten possible menus, all ten menus would be loaded into
memory, but only the one menu (that meets the condition) would be displayed in the
browser. That's a lot of wasted memory!
Server.Execute() Method
Syntax: Server.Execute("fileName.asp")
Unlike includes that require static paths, you can also use variables inside the
Server.Execute method, manipulating the path to the page you want to execute as
required. This means that something like Server.Execute(myVariable) is
completely acceptable; something that's impossible with standard includes.
With Server.Execute, the code is executed only when you explicitly tell the server
to process it; unlike SSI, Server.Execute is not read into memory before the page
is processed. This allows you to execute only the code you need to do the job.
Think of Server.Execute files as mini applications that are entirely self-contained,
independent of anything that is happening on the calling page. They must even have
their own language declaration. A major difference between the Server.Execute
method and SSIs is that files called with the Server.Execute method don't have
access to any of the variables on the calling page and they can't pass values back to
the calling page. They have access to the Request collections (Form, Querystring,
Cookie, and so on) and all Session and Application variables, but that's it. This
means that you can handle recordsets and other dynamic data without ever worrying
about what's happening on the parent page; there is no risk of variable clashing or
other conflicts. Server.Execute allows you to completely debug your files
independently without ever adding them to your calling page until you need them
and you're certain they work.
Browser Compatibility
The Server.Execute method discussed here is completely browser independent. As
long as the server is running ASP 3.0, the code will be processed and displayed
according to the browser's capabilities.

Table of Contents
Macromedia Dreamweaver MX 2004 Magic
By MassimoFoti, AngelaC.Buraglia, DanielShort

Publisher: Peachpit Press

Using Dwmx2004
No ratings yet
Using Dwmx2004
786 pages
Dreamweaver Cs4 Introduction
No ratings yet
Dreamweaver Cs4 Introduction
22 pages
Dreamviewer
No ratings yet
Dreamviewer
56 pages
Macromedia Dreamweaver 8 - Training From The Source Par Khristine Annwn Page
No ratings yet
Macromedia Dreamweaver 8 - Training From The Source Par Khristine Annwn Page
63 pages
Sitecore Platform Essentials For Developer Elearning Student Lab Guide
No ratings yet
Sitecore Platform Essentials For Developer Elearning Student Lab Guide
175 pages
Exploring Studio MX
100% (1)
Exploring Studio MX
388 pages
Adobe Dreamweaver CC
No ratings yet
Adobe Dreamweaver CC
10 pages
Introduction To Dreamweaver
No ratings yet
Introduction To Dreamweaver
50 pages
Presentation COMP8 Week 1
No ratings yet
Presentation COMP8 Week 1
24 pages
Microsoft Powerpoint MCQ Questions With Answers Set-4
No ratings yet
Microsoft Powerpoint MCQ Questions With Answers Set-4
5 pages
Macromedia Dreamweaver MX
No ratings yet
Macromedia Dreamweaver MX
14 pages
Have Fun With Vocabulary
No ratings yet
Have Fun With Vocabulary
153 pages
Model Question Papers of COPA Exam 01
No ratings yet
Model Question Papers of COPA Exam 01
7 pages
DNCMagazine 201401 Issue10 Tablet
No ratings yet
DNCMagazine 201401 Issue10 Tablet
63 pages
Expression Web 3 Tutorials 2ed
No ratings yet
Expression Web 3 Tutorials 2ed
60 pages
Preps User Guide en
100% (1)
Preps User Guide en
232 pages
Website Designing Lectureflow
No ratings yet
Website Designing Lectureflow
10 pages
Developing For Apple TV Using TvOS and Swift
No ratings yet
Developing For Apple TV Using TvOS and Swift
134 pages
The 2023 PHP Developer RoadMap
No ratings yet
The 2023 PHP Developer RoadMap
5 pages
Catalogue
No ratings yet
Catalogue
8 pages
Macromedia Dreamweaver MX 2004
100% (1)
Macromedia Dreamweaver MX 2004
66 pages
Dreamweaver MX Tutorial
No ratings yet
Dreamweaver MX Tutorial
8 pages
Dreamweaver: A Walkthrough Tutorial
No ratings yet
Dreamweaver: A Walkthrough Tutorial
11 pages
Web Technology: Mohamed Yasin
No ratings yet
Web Technology: Mohamed Yasin
51 pages
Internetworking With Tcpip (2015)
No ratings yet
Internetworking With Tcpip (2015)
1,187 pages
Online Crime Reporting Project
50% (2)
Online Crime Reporting Project
5 pages
PHP Form and Validation
No ratings yet
PHP Form and Validation
16 pages
Sstechnologis Webdesigning Course
No ratings yet
Sstechnologis Webdesigning Course
8 pages
XML WebServices and SOAP
No ratings yet
XML WebServices and SOAP
274 pages
Whats New in Ecto 2 0 1
No ratings yet
Whats New in Ecto 2 0 1
73 pages
ADOBE Premiere Pro Exam Notes and Tips
No ratings yet
ADOBE Premiere Pro Exam Notes and Tips
11 pages
(Methods in Molecular Biology 1579) Charles A. Galea (Eds.) - Matrix Metalloproteases - Methods and Protocols-Humana Press (2017)
100% (1)
(Methods in Molecular Biology 1579) Charles A. Galea (Eds.) - Matrix Metalloproteases - Methods and Protocols-Humana Press (2017)
309 pages
Branding Book Raeng PDF
No ratings yet
Branding Book Raeng PDF
38 pages
Crystal Ucle I C Rot Eins
No ratings yet
Crystal Ucle I C Rot Eins
460 pages
C Sharp The Nuts and Bolts
100% (1)
C Sharp The Nuts and Bolts
276 pages
Apple Pro Training Series
No ratings yet
Apple Pro Training Series
1 page
CRYENGINE Game Development Blueprints - Sample Chapter
100% (1)
CRYENGINE Game Development Blueprints - Sample Chapter
19 pages
Processing Language - Fun Approach To Learning Creative Computer Programming
100% (1)
Processing Language - Fun Approach To Learning Creative Computer Programming
20 pages
1st Quarter Exam - Publisher
No ratings yet
1st Quarter Exam - Publisher
4 pages
(Ebook) - Macro Media Flash MX Bible
100% (1)
(Ebook) - Macro Media Flash MX Bible
438 pages
Graphic Infographic Designed: ALLPPT Layout Clean Text Slide For Your Presentation
100% (1)
Graphic Infographic Designed: ALLPPT Layout Clean Text Slide For Your Presentation
42 pages
Discovering Computers 2011: Living in A Digital World
No ratings yet
Discovering Computers 2011: Living in A Digital World
40 pages
Adobe After Effects CS5 Classroom in A Book
100% (1)
Adobe After Effects CS5 Classroom in A Book
19 pages
Bluefish Doc PDF A4 1.0 4
No ratings yet
Bluefish Doc PDF A4 1.0 4
120 pages
Scrivener User Manual For Mac
No ratings yet
Scrivener User Manual For Mac
516 pages
Corel VideoStudio Pro X6 (English)
No ratings yet
Corel VideoStudio Pro X6 (English)
244 pages
Lightworks v14.5.0 User Guide
100% (1)
Lightworks v14.5.0 User Guide
288 pages
Adobe CS6 Web Edition
No ratings yet
Adobe CS6 Web Edition
3 pages
Intermediate Language
100% (1)
Intermediate Language
372 pages
Building Web Pages With HTML and CSS
100% (1)
Building Web Pages With HTML and CSS
9 pages
ABAP LIST VIEWER (ALV) - Presentation
No ratings yet
ABAP LIST VIEWER (ALV) - Presentation
37 pages
Lahore Galore: Tourism in Lahore
100% (1)
Lahore Galore: Tourism in Lahore
35 pages
Blender Python Reference 2 59 2
100% (1)
Blender Python Reference 2 59 2
1,502 pages
Inspection Basic 3d Metrology sw2016 031 008 EN PDF
100% (3)
Inspection Basic 3d Metrology sw2016 031 008 EN PDF
275 pages
Eng 116 Module 1st Month
No ratings yet
Eng 116 Module 1st Month
33 pages
Web Database
No ratings yet
Web Database
18 pages
CSS Cheat Sheet: Selecteur
No ratings yet
CSS Cheat Sheet: Selecteur
1 page
(By Kuafu) Introduction To 3D Game Programming With DirectX90c A Shader Approach
100% (1)
(By Kuafu) Introduction To 3D Game Programming With DirectX90c A Shader Approach
413 pages
MSDN Magazine
No ratings yet
MSDN Magazine
106 pages
Softimage XSI
No ratings yet
Softimage XSI
202 pages
Turbo C++ Quick Start Guide
No ratings yet
Turbo C++ Quick Start Guide
6 pages
Introduction To Web Page Design
No ratings yet
Introduction To Web Page Design
5 pages
Course Number: Course Title: Web Design Technologies Credit Hours: Instructor: Office Location: Office Hours: Telephone: E-Mail: Required Text
No ratings yet
Course Number: Course Title: Web Design Technologies Credit Hours: Instructor: Office Location: Office Hours: Telephone: E-Mail: Required Text
6 pages
1.2 Final
No ratings yet
1.2 Final
7 pages
Introduction To Web Development
No ratings yet
Introduction To Web Development
9 pages
Coding Dojo Ebook PDF
No ratings yet
Coding Dojo Ebook PDF
36 pages
Typescript Typings Crash Course
No ratings yet
Typescript Typings Crash Course
29 pages
HTML Tags Chart: Tag Name Code Example Browser View
No ratings yet
HTML Tags Chart: Tag Name Code Example Browser View
11 pages
InDesign and XML Tech Ref
No ratings yet
InDesign and XML Tech Ref
28 pages
LabWriter Operator Manual Issue 4
100% (1)
LabWriter Operator Manual Issue 4
128 pages
C Sharp Basics
100% (1)
C Sharp Basics
221 pages
Looks Menu Body Overlays Tutorial
No ratings yet
Looks Menu Body Overlays Tutorial
6 pages
Advanced Car Maze Game
No ratings yet
Advanced Car Maze Game
15 pages
The Web Dev Salary & Skills Report
No ratings yet
The Web Dev Salary & Skills Report
28 pages
Manual Libre Office - Writer
No ratings yet
Manual Libre Office - Writer
448 pages
Web Design Specialist (Adobe CS5 Web Edition)
No ratings yet
Web Design Specialist (Adobe CS5 Web Edition)
3 pages
Website Dev Questionnaire
No ratings yet
Website Dev Questionnaire
2 pages
How To Locate Elements in Chrome and IE Browsers For Building Selenium Scripts
No ratings yet
How To Locate Elements in Chrome and IE Browsers For Building Selenium Scripts
8 pages
Creating - Characters ANIME STUDIO
No ratings yet
Creating - Characters ANIME STUDIO
41 pages
Caching Architecture Guide For .NET Framework Applications
No ratings yet
Caching Architecture Guide For .NET Framework Applications
150 pages
HTML Tutorial
No ratings yet
HTML Tutorial
221 pages
Vijamukhi - The IL Disassembler
No ratings yet
Vijamukhi - The IL Disassembler
541 pages
Vbnet - Vijamukhi
No ratings yet
Vbnet - Vijamukhi
272 pages
Internship Report On: in Partial Fulfilment of The Requirements For The Awards of The Degree of
No ratings yet
Internship Report On: in Partial Fulfilment of The Requirements For The Awards of The Degree of
28 pages
CSM Coplien ScrumTwoDay A
100% (1)
CSM Coplien ScrumTwoDay A
32 pages
17 Document Production
No ratings yet
17 Document Production
42 pages
ScientificPosters 1a
No ratings yet
ScientificPosters 1a
1 page
Master Thesis Format Latex
100% (2)
Master Thesis Format Latex
8 pages
TFL Digital Display Standards
No ratings yet
TFL Digital Display Standards
47 pages
P6 View and Reporting: Training Guide
No ratings yet
P6 View and Reporting: Training Guide
50 pages
Mushir CSS
No ratings yet
Mushir CSS
13 pages
4 LCD
No ratings yet
4 LCD
4 pages
IB40-603.2 WinRCP
No ratings yet
IB40-603.2 WinRCP
66 pages
Salesforce Agent Console Cheatsheet
No ratings yet
Salesforce Agent Console Cheatsheet
5 pages
Mod4 PDF
No ratings yet
Mod4 PDF
9 pages
ST - Thomas Technical High School: School Based Assessment (Sba) Project 2023 - 2023
No ratings yet
ST - Thomas Technical High School: School Based Assessment (Sba) Project 2023 - 2023
5 pages
Samples of The 162 Data-Display Guidelines From Smith and Mosier
No ratings yet
Samples of The 162 Data-Display Guidelines From Smith and Mosier
2 pages
Quiz
No ratings yet
Quiz
5 pages
Hola, Amigos. Bye.: (Type The Document Subtitle)
No ratings yet
Hola, Amigos. Bye.: (Type The Document Subtitle)
2 pages
Contoh Surat 2 PDF
No ratings yet
Contoh Surat 2 PDF
2 pages

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.