In the ten-plus years that I've been writing about Web design, I've seen many changes — from the early days (before Dreamweaver even existed) when you could create only simple pages with HTML 1.0, to the elaborate designs you can create with Dreamweaver today using XHTML, CSS, AJAX, multimedia, and more.
If you're not sure what those acronyms mean yet, don't worry. I remember what it was like to figure out all this stuff, too, so I designed this book to introduce you to the basic concepts. I also want to prepare you for the ever-changing world of Web design, so I show you how to use Dreamweaver to create Web sites that take advantage of the latest advances in Web technologies, such as CSS and AJAX.
One of the challenges of Web design today is that Web pages are not only being displayed on different kinds of computers, but are also being downloaded to computers with monitors that are as big as widescreen televisions and as small as cell phones. As a result, creating Web sites that look good to all visitors is a lot more complex than it used to be, and standards have become a lot more important. That's why in this book, you find out not only how to use all the great features in Dreamweaver but also how to determine which of those features best serve your goals and your audience.
I designed Dreamweaver CS4 For Dummies to help you find the answers you need when you need them. You don't have to read this book cover to cover, and you certainly don't have to memorize it. Consider this a quick study guide and a reference you can return to. Each section stands alone, giving you easy answers to specific questions and step-by-step instructions for common tasks.
Want to find out how to change the background color in page properties, design styles to align images, or add an interactive photo gallery with the Swap Image behavior? Jump right in and go directly to the section that most interests you. Don't worry about getting sand on this book at the beach or coffee spilled on the pages at breakfast — I promise it won't complain!
Dreamweaver's high-end features make it the preferred choice for professional Web designers, and its easy-to-use graphical interface makes it popular among novices and hobbyists as well. With each new version, Dreamweaver's become more powerful and feature-rich, but this upgrade is arguably the most dramatic, with the following new features:
Gray interface: The first change you notice when you launch Dreamweaver CS4 is that it's all shades of gray. This change to the interface wasn't intended to make the program look dull — it's designed to help you work better with color in your own designs. If you miss all the colorful icons, don't fret. When you roll your cursor over the icons, their colorful designs reappear, making it easier to recognize and select them.
Customizable interface: Dreamweaver now comes with more preset layout options. Dreamweaver CS3 offered three choices, but when you choose Workspace
Enhanced CSS support: Among the most dramatic (and welcome!) changes to Dreamweaver CS4 are better CSS (Cascading Style Sheets) support and a new host of CSS features. Creating and editing styles is now better integrated throughout Dreamweaver, especially in the Property inspector. Creating Web sites with CSS is by far the best option today. That's why so many of the improvements to Dreamweaver are related to CSS, and why I've dedicated more of this book than ever to the best strategies for creating styles and CSS layouts. Chapters 5 and 6 explain what you need to know in detail.
Property inspector: The Property inspector has been split in two in Dreamweaver CS4 to better separate HTML (HyperText Markup Language) options from CSS. You can also create and edit styles as you specify settings in the Property inspector — a welcome addition that makes working with styles much faster and more intuitive (after you get the hang of it). See Chapter 5 for more.
Better integration with Photoshop, Flash, and other design programs: Some of the coolest improvements to Dreamweaver CS4 include greater integration among Adobe's suite of programs. If you're a former GoLive user, you'll be pleased to find that Adobe added Smart Objects to CS4 (the lack of this feature was a big complaint among former GoLive users who tried Dreamweaver CS3). Smart Objects makes it possible to drag and drop a Photoshop (PSD) file into a Web page in Dreamweaver and then use the Image Preview dialog box to optimize and resize the PSD file on the fly. Another great benefit — if you update the original PSD file later, Dreamweaver adds a little, red arrow to the optimized version in your Web page. Click the Update from Original button, and the changes are applied automatically. Working with graphics is the focus on Chapter 3, and multimedia with Flash is covered in Chapter 11.
Spry features for AJAX: If you want to create drop-down menus, collapsible panels, and other interactive AJAX features, you'll appreciate the Spry menu in the Insert panel and all the ways you can use Spry to save time (and coding) with AJAX. See Chapter 13.
Live View: CS4's new Live View makes it possible to render a page as it'd be displayed in a browser so you can see AJAX and other interactive features in action without leaving Dreamweaver. Live View uses the WebKit rendering engine (the same open source option used in Safari). Not only does the new Live View feature save you from launching a browser to test these kinds of features, but you can disable JavaScript while you use Live View to do things, such as freeze a drop-down list in action so you can more easily edit the CSS that controls the drop-down list display.
Code Navigator: The new Code Navigator is a handy way to keep an eye on the CSS code for your pages. Anywhere in a Web page, you can right-click (Windows) or Control-click (Mac) and choose Code Navigator to open a small window that details the CSS on the page. Roll your cursor over any of the listed styles and you see a little pop-up with details of the style rule. Double-click a style name, and Dreamweaver takes you to the style in the CSS code, which makes editing styles quick and easy while you work in design view.
Related Files bar: Just above the workspace, you find a handy list of associated files and scripts for any open document in the new Related Files bar. The files you find listed include external CSS files, JavaScript files (such as those created with the Dreamweaver Spry feature), and other programming files. Not only is the Related Files bar a handy reference that can help you keep track of all the files in your site, but it's also a shortcut. Click any filename to open it, and you can edit and apply the changes automatically to the HTML page you're working on.
Dreamweaver works almost identically on Macintosh or Windows computers. To keep screenshots consistent throughout this book, I've used a computer running Windows Vista. However, I've tested the program on both platforms, and whenever there is a difference in how a feature works, I indicate that difference in the instructions.
Keeping things consistent makes them easier to understand. In this book, those consistent elements are conventions. Notice how the word conventions is in italics? I frequently put new terms in italics and then define them so that you know what they mean.
When I type URLs (Web addresses) or e-mail addresses within regular paragraph text, they look like this: www.digitalfamily.com. Sometimes, however, I set URLs off on their own line, like this:
www.digitalfamily.com
That's so you can easily spot them on a page if you want to type them into your browser to visit a site. I also assume that your Web browser doesn't require the introductory http:// for Web addresses. If you use an older browser, remember to type this before the address (also make sure you include that part of the address when you're creating links in Dreamweaver).
Even though Dreamweaver makes knowing HTML code unnecessary, you may want to wade into HTML waters occasionally. I include HTML code in this book when I think it can help you better understand how things work in design view. Sometimes it's easier to remove or edit a tag in code view than design view. When I do provide examples, such as the following code which links a URL to a Web page, I set off the HTML in the same monospaced type as URLs:
<A HREF="http://www.digitalfamily.com">Janine's Digital Family Web Site</A>
When I introduce you to a new set of features, such as options in a dialog box, I set these items apart with bullet lists so you can see that they're all related. When I want you to follow instructions, I use numbered step lists to walk you through the process.
If you're like most of the Web designers I know, you don't have time to wade through a thick book before you start working on your Web site. That's why I wrote Dreamweaver CS4 For Dummies in a way that makes it easy for you to find the answers you need quickly. You don't have to read this book cover to cover. If you're in a hurry, go right to the information you need most and then get back to work. If you're new to Web design or you want to know the intricacies of Dreamweaver, skim through the chapters to get an overview and then go back and read what's most relevant to your project in greater detail. Whether you're building a simple site for the first time or working to redesign a complex site for the umpteenth time, you'll find everything you need in these pages.
Although Dreamweaver is designed for professional developers, I don't assume you're a pro — at least not yet. In keeping with the philosophy behind the For Dummies series, this book is an easy-to-use guide designed for readers with a wide range of experience. Being interested in Web design and wanting to create a Web site is key, but that desire is all that I expect from you.
If you're an experienced Web designer, Dreamweaver CS4 For Dummies is an ideal reference for you because it gets you working quickly with this program, starting with basic Web page design features and progressing to more advanced options. If you're new to Web design, this book walks you through all you need to know to create a Web site, from creating a new page to publishing your finished project on the Web.
To ease you through the learning curve associated with any new program, I organized Dreamweaver CS4 For Dummies as a complete reference. This section provides a breakdown of the five parts of the book and what you can find in each one. Each chapter walks you through the features of Dreamweaver step by step, providing tips and helping you understand the vocabulary of Web design as you go along.
Part I: Creating Great Web Sites
Part I introduces you to the basic concepts of Web design as well as the main features of Dreamweaver. In Chapter 1, I give you an overview of the many approaches to Web design, so you can best determine how you want to build your Web site before you get into the details of which features in Dreamweaver are best suited to any particular design approach. In Chapter 2, I start you on the road to your first Web site, including creating a new site, importing an existing site, creating new Web pages, applying basic formatting, and setting links. To make this chapter more interesting and help you see how all these features come together, I walk you through creating a real Web page as I show you how the features work.
In Chapter 3, I move onto graphics, with an introduction to creating graphics for the Web, an overview of the differences in formats (GIFs, JPEGs, and PNG files), and detailed instructions for adding and positioning graphics in your pages. In Chapter 4, you discover Dreamweaver's testing and publishing features, so you can start uploading pages to the Internet as soon as you're ready. If you work with a team of designers, you may be especially interested in the Check In/Check Out feature, which makes it easier to manage a site when several people are working together. You'll also find instructions for using integrated e-mail for communicating with other team members.
Part II: Appreciating Web Design Options
Chapter 5 provides an overview of how Cascading Style Sheets work and how they can save you time. CSS has become the way to create page designs and manage formatting on Web pages, and these features have been nicely improved in Dreamweaver CS4. In this chapter, you find descriptions of the style definition options available in Dreamweaver as well as instructions for creating and applying styles. In Chapter 6, I take you further into CSS, introducing you to the power of <div> tags and how to create CSS layouts. Here you'll find instructions for working with Dreamweaver's Layers features, as well as how to create centered CSS designs and fluid layouts.
In Chapter 7, you discover how to use HTML table features (and when they're still recommended on the Web). In Chapter 8, you find all you need to know about designing a site with frames and iframes. (This chapter also includes tips about when frames are useful and why they should generally be avoided.)
In Chapter 9, I introduce you to some of my favorite Dreamweaver features, including sophisticated template capabilities, that enable you to create more consistent designs and make global updates across many pages at once. I also cover Dreamweaver's Library items, which can be used to place and update commonly used elements, such as navigation bars or copyright tags.
Part III: Making It Cool with Multimedia and JavaScript
In Part III, you discover how cool your site can look when you add interactive image features, audio, video, and Flash. In Chapter 10, you find instructions for creating an interactive photo gallery with the Swap Image behavior, as well as how to use other features in Dreamweaver's Behaviors panel, including the Open New Browser behavior. In Chapter 11, you find out what it takes to add multimedia to your Web pages, including how to insert and create links to a variety of file types — from Flash to video and audio files. In Chapter 12, I cover Dreamweaver's HTML form options, which you can use to add feedback forms, surveys, and much more. In Chapter 13, you discover how great the Spry features are for adding AJAX interactivity to your site. In this chapter, you find instructions for creating and customizing drop-down lists, collapsible panels, and more.
Part IV: Working with Dynamic Content
Part IV features three chapters that cover the most advanced features in Dreamweaver CS4. Chapter 14 is designed to help you understand how database-driven Web sites work and why they're so important on the Web. In Chapter 15, you discover how to add dynamic content to your pages, define data sources, display recordsets, and take advantage of Dreamweaver CS4's new Spry features.
Part V: The Part of Tens
Part V features three quick references to help you develop the best Web sites possible. Chapter 16 provides a collection of online resources where you can register domain names and find hosting services, as well as a few services that can help you take care of more advanced challenges, such as setting up an e-commerce system. In Chapter 17, you find ten design tips to help you get the most out of Dreamweaver.
Note
When I want to point you toward something you can download for your use, I use this icon.
Note
This icon points you toward valuable resources on the Web.
Note
This icon reminds you of an important concept or procedure that you'll want to store away in your memory banks for future use.
Note
This icon signals technical stuff that you may find informative and interesting but that isn't essential for using Dreamweaver. Feel free to skip over this information.
Tip
This icon indicates a tip or technique that can save you time and money — and a headache — later.
Warning
This icon warns you of any potential pitfalls — and gives you the all-important information on how to avoid them.
If you want to get familiar with the latest in Web design strategies and options, don't skip Chapter 1, which is designed to help guide you through the many ways to create Web sites today. If you're ready to dive in and build a basic Web site right away, jump ahead to Chapter 2. If you want to find out about a specific trick or technique, consult the Table of Contents or the index; you won't miss a beat as you work to make those impossible Web design deadlines. Most of all, I wish you great success in all your Web projects!