The Macromedia community was unique. There was a synergy among developers, designers,
marketers, and the Macromedia product teams that kept the product line alive and growing
year after year. I say “was,” because Macromedia is now part of Adobe. Since Adobe acquired
Macromedia, the community has gotten larger. Adobe did not previously have a reputation
for fostering a community spirit, however, even though the Adobe umbrella is now over the
entire former-Macromedia product line, the community has flourished and become even
more pervasive. Adobe now feels more like Macromedia than even Macromedia did, because
Adobe has somehow taken the best of Macromedia and made it even better.
With that acquisition, we have one of the largest software rollouts ever—the CS3 release,
which combined all of Macromedia’s biggest product lines with Adobe’s biggest product
lines into one massive release. If it were a normal product release cycle, that would be big
news by itself, but with all the major enhancements in most of the products in the line, it’s
even bigger. Dreamweaver CS3 contains some great new features, most of which are covered
extensively in this book, including the Spry tools, page layouts, and CSS tools. Dreamweaver
CS3 (or Dreamweaver 9, if you’re counting) is the first Adobe version of Dreamweaver, but
aside from the Adobe name and the Photoshop integration, it is instantly recognizable as the
same great program.
One of the things that make the community great is the involvement of the company
(Macromedia, now Adobe) with the designer/developer community. Adobe actively seeks
feedback on products and welcomes give and take; it doesn’t just pay lip service to the concept
of a developers’ community. The feedback forms on the website go directly to the
product team, and product engineers contact customers directly. This kind of involvement
brought PHP into Dreamweaver in the first place, and this kind of involvement keeps
Dreamweaver at the top of the heap of all the web development tools available.
To give an example of the Adobe community involvement, Adobe sent a team of representatives
to meet with everyone at the recent TODCon convention, which typically attracts a
small, closely knit group of Dreamweaver designers and developers. They didn’t just send a
couple of marketing people or low-level operatives; they flew in over a dozen of the cream
of the crop, including product managers, development team managers, quality assurance
managers, and others from locations in San Jose, San Diego, Romania, and Germany. On the
first day of the conference, Dreamweaver product manager Kenneth Berger introduced
xix
the team, which looked like a wall of Adobe at the front of the room, and led a session about
what is right and wrong with Dreamweaver, and the attendees of the conference got to give
their input as to what Dreamweaver is doing well and what could be improved. There was
plenty of praise along with plenty of venting that the product team will use directly. That
wasn’t the end of it though. The team was in attendance for the bulk of the conference,
walking around with notebooks, getting valuable feedback that will help shape the next version
of the product. This is the kind of personal contact that keeps the community and the
product thriving.
Couple the company involvement with the extensibility of Dreamweaver, which keeps the
development community buzzing with creativity by extending the program to do things that
it won’t do out of the box, and you have a program that gets exponentially better with each
release. I say the same thing every time a new version of Dreamweaver comes out: I could
never go back to the previous version. I feel the same way about the latest CS3 release.
I’ve never met David Powers, but know him well through the Adobe Dreamweaver community.
He is a fellow Adobe Community Expert who freely shares his knowledge of the product
in Adobe support forums, among other places. I know David by reputation as one of the
most thorough yet easy-to-read authors on the scene today and as one of the most passionate
and vocal Dreamweaver experts in the world. Among the scores of Dreamweaver books,
David’s are the books that I personally recommend to people as the best. This book is no
exception. Having written a few books in the past myself, I know it’s no easy task. As the
technical reviewer of this book, it was frequently a challenge for me to find things to say
about it—David leaves no stone unturned in his quest to provide the best instructional material
on the shelves today. That is exactly what you are holding in your hands right now.
Tom Muck
June 2007
FOREWORD
xx
ABOUT THE AUTHOR
David Powers is an Adobe Community Expert for Dreamweaver
and author of a series of highly successful books on PHP, including
PHP Solutions: Dynamic Web Design Made Easy (friends of ED, ISBN-
13: 978-1-59059-731-6) and Foundation PHP for Dreamweaver 8
(friends of ED, ISBN-13: 978-1-59059-569-5). As a professional writer,
he has been involved in electronic media for more than 30 years,
first with BBC radio and television and more recently with the
Internet. His clear writing style is valued not only in the Englishspeaking
world; several of his books have been translated into
Spanish and Polish.
What started as a mild interest in computing was transformed almost overnight into a
passion, when David was posted to Japan in 1987 as BBC correspondent in Tokyo. With no
corporate IT department just down the hallway, he was forced to learn how to fix everything
himself. When not tinkering with the innards of his computer, he was reporting for BBC TV
and radio on the rise and collapse of the Japanese bubble economy. Since leaving the BBC to
work independently, he has built up an online bilingual database of economic and political
analysis for Japanese clients of an international consultancy.
When not pounding the keyboard writing books or dreaming of new ways of using PHP and
other programming languages, David enjoys nothing better than visiting his favorite sushi
restaurant. He has also translated several plays from Japanese.
xxi
ABOUT THE TECHNICAL REVIEWER
Tom Muck is the coauthor of nine Macromedia-related books. Tom also writes extensions for
Dreamweaver, available at his site www.tom-muck.com. Tom is also the lead PHP and ColdFusion
programmer for Cartweaver, the online shopping cart software package, and a founding
member of Community MX, who has written close to 100 articles on PHP, ColdFusion, SQL,
and related topics.
Tom is an extensibility expert focused on the integration of Adobe/Macromedia products
with ColdFusion, ASP, PHP, and other languages, applications, and technologies. Tom was recognized
for this expertise in 2000 when he received Macromedia's Best UltraDev Extension
Award. He has also written numerous articles for magazines, journals, and websites and
speaks at conferences on this and related subjects.
xxii
ACKNOWLEDGMENTS
For an author, writing a book means long, lonely hours at the keyboard, but the volume
you’re holding in your hands—or reading onscreen if you’ve got the electronic version—is
very much a collaborative effort. The idea of writing an expanded book on the dynamic features
of Dreamweaver came from my editor, Chris Mills, who was gracious enough not to
complain each time I changed my mind about the final shape of the book. My thanks go to
him and all the production staff at Apress/friends of ED for keeping this mammoth project
on target.
I’m also indebted to the development team at Adobe, who gave me a sneak preview of their
plans for Dreamweaver CS3 very early in the development process and helped me understand
how many of the new features work. At times, I’m sure they were exasperated by my
persistent questions and the occasionally hectoring tone of my suggestions for improvements,
but they never let it show.
A particular thank you goes to my technical reviewer, Tom Muck. I’m deeply honored that
such a respected expert on Dreamweaver agreed to undertake this role. Tom’s in-depth
knowledge of Dreamweaver, PHP, and SQL saved me from some embarrassing mistakes (any
that remain are my responsibility entirely). He also provided helpful advice when he thought
my explanations were too oblique.
My biggest thanks of all go to you, the reader. Without you, none of this would be worthwhile.
If you enjoy this book or find it useful, tell all your friends and get them to buy a copy.
Don’t lend it to them. You might never get it back!
xxiii
INTRODUCTION
Dreamweaver CS3 with CSS, Ajax, and PHP . . . Wow, the title’s almost
as long as the book! And what’s that “essential” doing in there? “Essential” suggests that it’s
a book you can’t do without. So, who’s it for and why should you be reading it?
Dreamweaver isn’t a difficult program to use, but it’s difficult to use well. It’s packed with
features, and more have been added with each new version. The user interface has barely
changed in the last few versions, so it’s easy to overlook some great productivity boosters if
you don’t know where to find them. I have been using Dreamweaver on a daily basis
for about seven years, pushing it to the limit and finding out its good points—and its bad
ones, too.
So, the idea of this book is to help you get the best out of Dreamweaver CS3, with particular
emphasis on building dynamic web pages using the improved CSS management features,
Spry—the Adobe implementation of Ajax—and the PHP server behaviors. But how can you
get the best out of this book?
Who this book is for
If you’re at home with the basics of (X)HTML and CSS, then this book is for you. If you have
never built a website before and don’t know the difference between an tag and your
Aunt Jemima, you’ll probably find this book a bit of a struggle. You don’t need to know every
tag and attribute by heart, but I frequently dive into Code view and expect you to roll up
your sleeves and get to grips with the code. It’s not coding for coding’s sake; the idea is to
adapt the code generated by Dreamweaver to create websites that really work. I explain
everything as I go along and steer clear of impenetrable jargon. As for CSS, you don’t need
to be a candidate for inclusion in the CSS Zen Garden (www.csszengarden.com), but you
should understand the basic principles behind creating a style sheet.
xxiv
What about Ajax and PHP? I don’t assume any prior knowledge in these fields. Ajax comes in
many different guises; the flavor used in this book is Spry, the Adobe Ajax framework (code
library) that is integrated into Dreamweaver CS3. Although you do some hand-coding with
Spry, most features are accessed through intuitive dialog boxes.
Dreamweaver also takes care of a lot of the PHP coding, but it can’t do everything, so I show
you how to customize the code it generates. Chapter 10 serves as a crash course in PHP, and
Chapter 11 puts that knowledge to immediate use by showing you how to send an email
from an online form—one of the things that Dreamweaver doesn’t automate. This book
doesn’t attempt to teach you how to become a PHP programmer, but by the time you reach
the final chapter, you should have sufficient confidence to look a script in the eye without
flinching.
Do I need Dreamweaver CS3?
Most definitely, yes. Although the PHP features in Dreamweaver CS3 are identical to
Dreamweaver 8.0.2, you’ll miss out on roughly half the book, because the chapters devoted
to CSS and Spry are based on CS3. In a pinch, you could download the free version of Spry
from http://labs.adobe.com/technologies/spry/ and hand-code everything in an earlier
version of Dreamweaver, but the focus in this book is on using the CS3 interface for Spry. If
you want to use PHP in an earlier version, I suggest you read my Foundation PHP for
Dreamweaver 8 (friends of ED, ISBN-13: 978-1-59059-569-5) instead.
How does this book differ from my previous ones?
I hate it when I buy a book written by an author whom I’ve enjoyed before and find myself
reading familiar page after familiar page. This book is intended to replace Foundation PHP
for Dreamweaver 8, so a lot of material is inherited from that book. There’s also some overlap
with PHP Solutions: Dynamic Web Design Made Easy (friends of ED, ISBN-13: 978-1-
59059-731-6), but I estimate that at least 60 percent of the material was written exclusively
for this book. Every chapter has been completely revised and rewritten, and the chapters on
CSS and Spry are brand new.
Even where I have recycled material from the two previous books, I have revised and (I hope)
improved the scripts. For example, the mail processing script has increased protection
against email header injection attacks, and I have adapted it so that it can be reused more
easily with different online forms. The script also inserts the form content into a database
after sending the email.
I have added a section on using Dreamweaver templates in a PHP site. There’s a new chapter
on building search queries, and the chapter on multiple database tables tells you how to use
foreign key constraints if your MySQL server supports InnoDB. The final chapter shows you
how to generate XML on the fly from a database and enhance a PHP site by integrating some
features of Spry data management.
INTRODUCTION
xxv
How this book is organized
My previous books have taken a linear approach, but I have structured this one to make it
easier for you to dip in and out, using the Table of Contents and Index to find subjects that
interest you and going straight to them. So, if you want to learn how to create tabbed panels
with Spry, you can go directly to Chapter 8. Although the example pages use a design that
was created in an earlier chapter, you don’t need to have worked through the other chapter
first. Nevertheless, there is a progressive logic to the order of the chapters.
Chapters 1 and 2 serve as an overview of the whole book, explaining what’s new and what
has changed in Dreamweaver CS3. Chapter 2 also explains in detail how to use Spry effects.
They are simple to apply and don’t require knowledge of CSS or PHP. If you’re new to
Dreamweaver, these chapters help you find your way around essential aspects of the
Dreamweaver interface.
Chapters 3 and 4 show you how to set up your work environment for PHP and Dreamweaver.
If you already have a local testing environment for PHP, you can skip most of the material in
these chapters. However, I urge you to follow the instructions at the end of Chapter 3 to
check your PHP configuration. The section in Chapter 4 about defining your testing server in
Dreamweaver is also essential reading. These two subjects are the most frequent causes of
problems. A few minutes checking that you have set up everything correctly will save a lot of
heartache later.
Chapters 5 and 6 cover in depth how Dreamweaver handles CSS. If you’re relatively new to
CSS, Chapter 5 shows you how not to use Dreamweaver to create style rules. For more
advanced readers, it provides a useful overview of the various CSS management tools,
including the ability to reorder the cascade and move rules to different style sheets without
ever leaving Design view. Chapter 6 uses one of the 32 built-in CSS layouts to create an elegant
site, and in the process, unravels the mysteries of the CSS Styles panel.
Chapters 7 and 8 return to Spry, exploring the Spry Menu Bar and the tabbed panels, accordion,
and collapsible panel user interface widgets. Because these widgets make extensive use
of CSS, you’ll find these chapters easier to follow if you’re up to speed on the previous two
chapters. Of course, if you’re already a CSS whiz kid, jump right in.
Chapter 9 sees the start of practical PHP coverage, showing you how to construct an online
form. The second half of the chapter completes the roundup of Spry widgets, showing you
how to use Spry to check user input before a form is submitted. This is client-side validation
like you’ve never seen before. If you want to concentrate on PHP, you can skip the second
half of the chapter and come back to it later.
As noted earlier, Chapter 10 is a crash course in PHP. I have put everything together in a
single chapter so that it serves as a useful quick reference later. If you’re new to PHP, just
skim the first paragraph or so of each section to get a feel for the language and come back
to it later to check on specific points.
Chapters 11 and 12 give you hands-on practice with PHP, building the script to process
the form created in Chapter 9. Newcomers to PHP should take these chapters slowly.
Although you don’t need to become a top-level programmer to use PHP in Dreamweaver, an
INTRODUCTION
xxvi
understanding of the fundamentals is vital unless you’re happy being limited to very basic
dynamic pages. If you’re in a hurry, you can use the finished mail-processing script from
Chapter 12. It should work with most online forms, but you won’t be able to customize it to
your own needs if you don’t understand how it works. Chapter 12 also looks at using
Dreamweaver templates in a PHP site.
Chapter 13 gets you ready to bring out Dreamweaver’s big guns by guiding you through the
installation of the MySQL database and a graphic interface called phpMyAdmin. This chapter
also covers database backup and transferring a database to another server.
Chapters 14 through 17 show you how to build database-driven web pages using PHP,
MySQL, and Dreamweaver’s PHP server behaviors. You’ll also learn the basics of SQL
(Structured Query Language), the language used to communicate with all major relational
databases. To get the most out of this section, you need to have a good understanding of the
material in the first half of Chapter 9. You’ll learn how to create your own content management
system, password protect sensitive parts of your site, and build search forms.
The final three chapters (18–20) introduce you to working with XML (Extensible Markup
Language), the platform-neutral way of presenting information in a structured manner. XML
is often used for news feeds, so Chapter 18 sets the ball rolling by showing you how to use
Dreamweaver’s XSL Transformation server behavior to draw news items from a remote site
and incorporate them in a web page.
Chapter 19 explains how to generate a Spry data set from XML and use it to create an online
photo gallery. The attraction of Spry is that it provides a seamless user experience by refreshing
only those parts of a page that change, without reloading the whole page. The disadvantage
is that, like most Ajax solutions, the underlying code leaves no content for search
engines to index, or for the browser to display if JavaScript is disabled. So, Chapter 20 shows
how to get the best of both worlds by creating the basic functionality with PHP and enhancing
it with Spry. The final chapter also shows you how to generate your own XML documents
from content stored in your database.
What this book isn’t
I like to credit my readers with intelligence, so this book isn’t “Dreamweaver CS3 for the
Clueless” or “Dreamweaver CS3 for Complete Beginners.” You don’t need to be an expert,
but you do need to have an inquiring mind. It doesn’t teach the basics of web design, nor
does it attempt to list every single feature in Dreamweaver CS3. There are plenty of other
books to fill that gap. However, by working through this book, you’ll gain an in-depth knowledge
of the most important features of Dreamweaver.
A high proportion of the book is devoted to hands-on exercises. The purpose is to demonstrate
a particular technique or feature of Dreamweaver in a meaningful way. Rather than
racing through the steps to finish them as quickly as possible, read the explanations. If you
understand why you’re doing something, you’re far more likely to remember it and be able
to adapt it to your own needs.
INTRODUCTION
xxvii
Windows- and Mac-friendly
Everything in this book has been tested on Windows XP SP2, Windows Vista, and Mac OS X
10.4—the minimum required versions for Dreamweaver CS3. The overwhelming majority of
screenshots were taken on Windows Vista, but I have included separate screenshots from
Windows XP and Mac OS X where appropriate.
Chapters 3 and 13 have separate sections for Windows and Mac to guide you through the
setup of PHP and MySQL, so Mac users aren’t left trying to adapt instructions written for a
completely different operating system.
Keyboard shortcuts are given in the order Windows/Mac, and I point out when a particular
shortcut is exclusive to Windows (some Dreamweaver shortcuts conflict with Exposé and
Spotlight in the Mac version). The only place where I haven’t given the Mac equivalent is with
regard to right-clicking. Since the advent of Mighty Mouse, right-clicking is now native to the
Mac, but if you’re an old-fashioned kind of guy or gal and still use a one-button mouse, Ctrlclick
whenever I tell you to right-click (I’m sure you knew that anyway).
Some Mac keyboard shortcuts use the Option (Opt) key. If you’re new to a Mac and can’t
find an Opt key on your keyboard, in some countries it’s labeled Alt. The Command (Cmd)
key has an apple and/or a cloverleaf symbol.
A note about versions used
Computer software is constantly evolving, and—much though I would like it to do so—it
doesn’t stand still simply because I have written a 700-odd page book. A book represents a
snapshot in time, and time never stands still.
Everything related to Dreamweaver in this book is based on build 3481 of Dreamweaver CS3.
This is the version that was released in April 2007. The build number is displayed on the
splash screen when you launch Dreamweaver. You can also check the build number by going
to Help ä About Dreamweaver (Dreamweaver ä About Dreamweaver on a Mac) and clicking
the credits screen. This build of Dreamweaver shipped with Spry version 1.4. About one
month later, Adobe released Spry version 1.5.
At the time this book was ready to go to the printers, the information I had received indicated
that, because Spry is still evolving, Dreamweaver won’t automatically be updated for
each new release of Spry. Any changes that affect this book will be posted on my website at
http://foundationphp.com/egdwcs3/updates.php.
You should also check my website for any updates concerning PHP, MySQL, and phpMyAdmin.
The instructions in this book are based on the following versions:
PHP 5.2.1
MySQL 5.0.37
phpMyAdmin 2.10.1
INTRODUCTION
xxviii
Using the download files
All the necessary files for in this book can be downloaded from www.friendsofed.com/
downloads.html. The files are arranged in five top-level folders, as follows:
examples: This contains the .html and .php files for all the examples and exercises,
arranged by chapter. Use the File Compare feature in Dreamweaver (see Chapter 2)
to check your own code against these files. Some exercises provide partially completed
files for you to work with. Where indicated, copy the necessary files from this
folder to the workfiles folder so you always have a backup if things go wrong.
images: This contains all the images used in the exercises and online gallery.
SpryAssets: This contains the finished versions of Spry-related style sheets. With one
exception, it does not contain the external JavaScript files needed to display Spry
effects, widgets, or data sets. Dreamweaver should copy the JavaScript files and
unedited style sheets to this folder automatically when you do the exercises as
described in this book.
tools: This contains a Dreamweaver extension that loads a suite of useful PHP code
fragments into the Snippets panel, as well as a saved query for the Find and Replace
panel, and SQL files to load data for the exercises into your database.
workfiles: This is an empty folder, where you should build the pages used in the
exercises.
Copy these folders to the top level of the site that you create for working with this book (see
Chapter 4).
Support for this book
Every effort has been made to ensure accuracy, but mistakes do slip through. If you find what
you think is an error—and it’s not listed on the book’s corrections page at www.
friendsofed.com—please submit an error report to www.friendsofed.com/
errataSubmission.html. When ED has finished with the thumbscrews and got me to admit
I’m wrong, we’ll post the details for everyone’s benefit on the friends of ED site. I also plan to
post details on my own website at http://foundationphp.com/egdwcs3/updates.php of
changes to Dreamweaver or other software that affect instructions in the book.
I want you to get the best out of this book and will try to help you if you run into difficulty.
Before calling for assistance, though, start with a little self-help. Throughout the book, I have
added “Troubleshooting” sections based heavily on frequently asked questions, together
with my own experience of things that are likely to go wrong. Make use of the File Compare
feature in Dreamweaver to check your code against the download files. If you’re using a software
firewall, try turning it off temporarily to see whether the problem goes away.
INTRODUCTION
xxix
If none of these approaches solves your problem, scan the chapter subheadings in the Table
of Contents, and try looking up a few related expressions in the Index. Also try a quick search
on the Internet: Google and the other large search engines are your friends. My apologies if
all this sounds obvious, but an amazing number of people spend more time waiting for an
answer in an online forum than it would take to go through these simple steps.
If you’re still stuck, visit www.friendsofed.com/forums/. Use the following guidelines to help
others help you:
Always check the book’s updates and corrections pages. The answer may already be
there.
Search the forum to see if your question has already been answered.
Give your message a meaningful subject line. It’s likely to get a swifter response and
may help others with a similar problem.
Say which book you’re using, and give a page reference to the point that’s giving you
difficulty.
Give precise details of the problem. “It doesn’t work” gives no clue as to the cause.
“When I do so and so, x happens” is a lot more informative.
If you get an error message, say what it contains.
Be brief and to the point. Don’t ask half a dozen questions at once.
It’s often helpful to know your operating system, and if it’s a question about PHP,
which version of PHP and which web server you’re using.
Don’t post the same question simultaneously in several different forums. If you find
the answer elsewhere, have the courtesy to close the forum thread and post a link
to the answer.
The help I give in the friends of ED and Adobe forums is not limited to problems arising from
my books, but please be realistic in your expectations when asking for help in a free online
forum. Although the Internet never sleeps, the volunteers who answer questions certainly
do. They’re also busy people, who might not always be available. Don’t post hundreds of
lines of code and expect someone else to scour it for mistakes. And if you do get the help
that you need, keep the community spirit alive by answering questions that you know the
answer to.
INTRODUCTION
xxx
Layout conventions
To keep this book as clear and easy to follow as possible, the following text conventions are
used throughout.
Important words or concepts are normally highlighted on the first appearance in bold type.
Code is presented in fixed-width font.
New or changed code is normally presented in bold fixed-width font.
Pseudo-code and variable input are written in italic fixed-width font.
Menu commands are written in the form Menu ä Submenu ä Submenu.
Where I want to draw your attention to something, I’ve highlighted it like this:
Sometimes code won’t fit on a single line in a book. Where this happens, I use an arrow like
this: å.
This is a very, very long section of code that should be written all å
on the same line without a break.
Ahem, don’t say I didn’t warn you.
INTRODUCTION
xxxi
1 DREAMWEAVER CS3—YOUR
CREATIVE PARTNER
After 8, comes . . . not 9, but CS3. In the confusing world of marketing, Dreamweaver versions
have gone from straightforward numbers to a couple of meaningless letters (MX), to
MX 2004 (which didn’t reflect the year of release accurately), and back to numbers again.
So why CS3? And does it make any sense?
In one respect, the change symbolizes the fact that Dreamweaver is under new ownership.
Macromedia, the company that turned Dreamweaver, Flash, and Fireworks into must-have
tools for web developers, was acquired by Adobe at the end of 2005. And Dreamweaver
(together with former Macromedia stable mates Fireworks and Flash) is now part of
Creative Suite, Adobe’s family of web and print design tools that includes Photoshop,
Illustrator, and InDesign. Creative Suite is now in its third iteration; hence CS3. Although
each program has a long history, the idea of Creative Suite is to promote greater integration
to make it easier to switch to the best tool for a particular job, such as Photoshop for
photo manipulation and retouching, and import the results into another program. And
that’s what’s happened to Dreamweaver: although it’s available as a stand-alone program,
it’s now closely integrated with its new Adobe brothers and sisters as part of Adobe Web
Suite CS3 and Design Suite CS3.
Even the stand-alone version of Dreamweaver CS3 comes bundled with three other
programs:
Extension Manager CS3: An updated version of the program that lets you install
third-party add-ons to extend the functionality of Dreamweaver, Flash, and Fireworks.
Adobe Bridge CS3: As the name suggests, this is intended to facilitate communication
between the various parts of Creative Suite, but it also works with the standalone
version of Dreamweaver. At one level, it’s like a super-charged version of
Windows Explorer or Finder on the Mac, but it shines in the handling of visual
assets. It allows you to see inside a wide variety of formats, making it easy to find
an image by what it looks like.
Adobe Device Central CS3: This is a brand new program that allows you to visualize
what your websites will look like in a wide range of mobile devices, not only
from the layout point of view but also simulating mobile backlight and sunlight
reflections.
The integration goes further through the ability to copy and paste directly from a
Photoshop PSD file into Dreamweaver. When you do so, Dreamweaver optimizes the file
for the Web. So, yes, the “CS3” does make sense. It’s not just change for the sake of
change.
Once installed, Extension Manager, Bridge, and Device Central are separate programs and
can be launched independently, but you have no choice whether to install them. The
installer simply lists them as “Shared Components.” As a result, this version of Dreamweaver
occupies roughly four times more disk space than previous versions. Personally, I like
Bridge and think that Device Central is likely to become increasingly useful as mobile Web
access grows in popularity. Others may disagree.
If you’re a long-term Dreamweaver user, though, the program that you know and love
hasn’t changed beyond recognition. As Figures 1-4 and 1-5 show, the workspace layout is
identical to Dreamweaver 8. The development team moved with Dreamweaver to Adobe,
and the improvements to the program are a logical progression. Adobe accompanied
its decision to include Dreamweaver in Creative Suite 3 with the bold step of dropping its
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
2
own web design program, GoLive. Although GoLive has been updated, it’s not in any of the
CS3 packages. What’s more, Adobe has created an online tutorial to help GoLive users
migrate to Dreamweaver (www.adobe.com/go/learn_dw_golive). This sends a clear message
that Adobe now regards Dreamweaver as its prime tool for developing standardscompliant
websites.
In this chapter, we’ll take a look at the most important features and changes in
Dreamweaver CS3, with particular emphasis on cascading style sheets (CSS) and creating
standards-compliant Extensible HyperText Markup Language (XHTML), both of which are
essential for building any modern website. Then, in the following chapter, we’ll take a look
at the tools Dreamweaver offers for building dynamic websites: Spry—Adobe’s implementation
of Asynchronous JavaScript + XML (Ajax)—and PHP.
What this chapter covers
Finding out what’s new in Dreamweaver CS3
Exploring and organizing the Dreamweaver workspace
Using Bridge to manage visual assets
Taking a first look at Dreamweaver’s support for cascading style sheets
Getting the best out of Code view
Getting your bearings in Dreamweaver
As the title of this book says, this is an essential guide to Dreamweaver CS3. So I don’t
intend to bore you to death with descriptions of every menu and submenu. However, all
readers may not be familiar with Dreamweaver, so I’ll start with a few signposts to guide
you around the Dreamweaver interface and help set basic program preferences. Most of
this will be familiar to experienced users of Dreamweaver, but there are some important
changes. To identify these changes, look for the New and Changed graphics in the margin.
Starting up
When you launch Dreamweaver CS3, the first thing you see after the program has finished
loading is the welcome screen shown in Figure 1-1. The three columns in the top section
provide quick access to a recently opened document (this list is empty the first time you
launch Dreamweaver), create a new document or Dreamweaver site (site definition is
covered in Chapter 4), or select from a predefined layout. The Dreamweaver Exchange
option at the foot of the right column takes you directly to the Adobe Dreamweaver
Exchange (www.adobe.com/cfusion/exchange/index.cfm?view=sn120), where you can
obtain extensions to add extra functionality to Dreamweaver (many are free; others are
sold on a commercial basis). The bottom section of the welcome screen takes you to various
parts of the Adobe website and displays what Adobe considers useful information, for
example, available updates to the program.
DREAMWEAVER CS3—
3
1
Figure 1-1. The welcome screen offers access to recent documents and a quick way to
create new ones.
The Dreamweaver welcome screen reappears whenever you close all documents in the
workspace and connects to Adobe to see if there are any new announcements. In previous
versions, leaving the welcome screen enabled was a resource hog, so many developers
chose the Don’t show again option at the bottom left. This means what it says: once you
select it, the welcome screen disappears forever. If you want it back, go to Edit ä
Preferences (Dreamweaver ä Preferences on a Mac), choose the General category, and
select Show welcome screen.
Although the welcome screen no longer appears to be a resource hog, you may prefer to
switch it off because you get a much better range of options from the New Document dialog
box. You can also configure Dreamweaver to reopen on startup any documents that
are still open when you close the program. Just select Reopen documents on startup in the
General category of the Preferences panel.
Creating a new document
To create a new document, select File ä New or press Ctrl+N/Cmd+N. This opens the New
Document dialog box, which has been considerably revamped, as shown in Figure 1-2.
The biggest change is that, in addition to a completely blank page, you can now select one
of 32 CSS layouts. There are also options to change the page’s document type definition
(DTD)—by default, Dreamweaver CS3 uses XHTML 1.0 Transitional—and to attach an
external style sheet to the page at the time of creation. We’ll look at the CSS layouts and
style sheet options in Chapters 5 and 6.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
4
Figure 1-2. The New Document dialog box offers a massive range of options and preset layouts.
By selecting the appropriate option from the menu on the left side of the New Document
dialog box, you can also create new templates from scratch or a page from an existing
template (templates are covered in Chapter 12). The Page from Sample option offers a
wide range of preset layouts, but I don’t recommend using them, as many of them use oldstyle
presentational elements and deprecated attributes. The final option, labeled Other,
contains a variety of pages for programming languages such as ActionScript, C#, and
VBScript, none of which are used in this book.
Setting new document preferences
Click the Preferences button at the bottom left of the New Document dialog box.
Alternatively, choose Preferences from the Edit menu (Dreamweaver menu on a Mac), and
select the New Document category. Either presents you with the New Document Preferences
dialog box shown in Figure 1-3.
The dialog box lets you set the following global preferences:
Default document lets you choose the type of document that will be created when
you use the keyboard shortcut for a new document (Ctrl+N/Cmd+N). For this to
work, you must deselect the option at the bottom labeled Show New Document dialog
box on Control+N/Cmd+N. Otherwise, the dialog box shown in Figure 1-2 will
appear.
Default extension affects only (X)HTML files. Change the value only if you want to
use .htm to maintain unity with the naming convention of older sites.
Default Document Type (DTD) sets the default DOCTYPE declaration for all new web
pages. You cannot set one value for, say, .html and another for .php pages.
DREAMWEAVER CS3—
5
1
Figure 1-3. The New Document category of the Preferences panel
Default encoding lets you choose the character set to be used in all web pages. The
Dreamweaver CS3 default is Unicode (UTF-8). (In the Mac version, this is listed as
Unicode 4.0 UTF-8.) This is different from previous versions. The checkbox below
this option tells Dreamweaver to use the same character set to display existing
pages that don’t specify a particular encoding. It doesn’t insert any extra coding in
such pages.
Unicode Normalization Form is required only when using UTF-8 for encoding. It
should normally be set to C (Canonical Decomposition, followed by Canonical
Composition), and the Include Unicode Signature (BOM) checkbox should be deselected.
If you use any other encoding, set Unicode Normalization Form to None.
Choosing the default document type Many people misunderstand the purpose of the DTD
(the DOCTYPE declaration before the opening tag). It simply tells the browser how
you have coded your page and is intended to speed up the correct rendering of your
design. It’s not a badge of honor or magic spell that somehow renders your web pages
future-proof. The default setting in Dreamweaver CS3 is XHTML 1.0 Transitional, and this is
the appropriate choice for most people when creating a new web page as long as you
understand the stricter rules imposed by XHTML.
Visit www.w3.org/TR/xhtml1/#diffs to learn about the differences
between HTML and XHTML. Also read the frequently asked questions
at www.w3.org/MarkUp/2004/xhtml-faq.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
6
The full range of options is as follows:
None: Don’t use—all pages should have a DOCTYPE declaration.
HTML 4.01 Transitional: Choose this if you don’t want to use XHTML.
HTML 4.01 Strict: This excludes deprecated elements (those destined for eventual
elimination)—use this only if you have a good knowledge of HTML and have made
a conscious decision not to use XHTML.
XHTML 1.0 Transitional: This offers the same flexibility as HTML 4.01 Transitional by
permitting the use of deprecated elements but applies the stricter rules of XML.
XHTML 1.0 Strict: This excludes all deprecated elements—use this only if you are
competent with XHTML.
XHTML 1.1: Don’t use—this DTD should not be used on pages delivered using the
text/html MIME type, the current standard for web servers.
XHTML Mobile 1.0: This is a subset of XHTML Basic for mobile devices—you can find
the full specification at www.openmobilealliance.org/tech/affiliates/wap/
wap-277-xhtmlmp-20011029-a.pdf.
If you choose an HTML document type, Dreamweaver automatically creates code according
to the HTML specification. Similarly, if you choose XHTML, your code automatically
follows the stricter rules, using lowercase for tag names and event handlers and inserting
a closing slash in empty tags such as
code from other sources. If you’re not sure about the quality of the code, run
Commands ä Clean Up XHTML, which should correct most, if not all, problems.
If you select a Strict DTD, it’s important to realize that Dreamweaver does not prevent you
from using deprecated elements or attributes. Dreamweaver expects you to understand
the difference yourself.
Choosing the default encoding The decision to switch the default encoding in
Dreamweaver CS3 to Unicode (UTF-8) makes a lot of sense. Unicode supports nearly every
known writing system, so—as long as you have the right fonts on your computer—you can
combine Spanish, Russian, Chinese, and English all on the same web page. All modern
browsers support UTF-8, so there is no reason you shouldn’t use it. But—and it’s a big
but—this book concentrates heavily on using PHP and the MySQL database. Versions of
MySQL prior to the 4.1 series do not support UTF-8. If your hosting company uses MySQL
3.23 or 4.0, you might need to change the default encoding for your web pages. See
“Understanding collation” in Chapter 13.
Exploring the workspace
Figure 1-4 shows the default Windows workspace with a web page under construction and
all the main areas labeled. The main part of the workspace is occupied by the Document
window, which includes everything from the Document toolbar to the Tag selector.
DREAMWEAVER CS3—
7
1
Figure 1-4. The Dreamweaver workspace remains basically unchanged.
As you can see from Figure 1-5, the Mac workspace is virtually the same. In harmony with
other Mac programs, the Close, Minimize, and Zoom buttons are at the top left of the
Document window. The Document window’s tabbed interface is displayed only when more
than one document is open. If you want the Mac version to display tabs all the time, open
Preferences from the Dreamweaver menu, select the General category, and check the
option labeled Always show tabs. Alternatively, if you don’t want the tabbed interface, deselect
the Open documents in tabs option.
Two other points to note about the Mac workspace: you can close a tab by clicking the 5
in a circle to the left of the file name; and the Property inspector overlaps the Files panel
on a 10245768 resolution monitor (the minimum display required for Dreamweaver CS3).
As a result, on a small monitor the Property inspector flops in front of or behind the Files
panel, depending on whether it has focus. This results in some icons being hidden, but you
can bring them back into view by clicking in any blank space in the Property inspector.
Alternatively, resize the Files panel to make room.
The main menus run across the top just below the title bar. The menus provide access to
all features, but I prefer to work directly in the workspace with Dreamweaver’s visual tools,
each of which I’ll describe briefly.
DREAMWEAVER CS3 WITH CSS, AJAX, AND PHP
8
Figure 1-5. Apart from a few minor differences, the Mac workspace is identical to Windows.
Insert bar
The Insert bar is really a collection of toolbars used to perform the most frequently used
operations in building web pages. It’s organized as a tabbed interface. Figure 1-6 shows the
Common tab. When you first launch Dreamweaver, there are six other tabs (or categories).
Additional, context-sensitive tabs are displayed only when the features can be used in a
particular page, such as when using PHP or the XSL Transformation server behavior. The
tabs organize program features in logical groups, so some commonly used features, such
as tables and
No comments:
Post a Comment