• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



Welcome to the Dreamweaver MX 2004 for Windows and Macintosh: Visual QuickStart Guide! Dreamweaver (Figures 1 and 2) is exciting software: It's simple to use and it's one of the very best WYSIWYG (What You See Is What You Get) Web-page editing tools ever to come down the pike.

Figure 1. Here's Dreamweaver MX 2004, including the Document window, where you edit your pages.

Figure 2. The Files panel lets you manage your files locally and on your Web site.

Dreamweaver isn't just another visual page-making tool. It does do what all the best editors do: creates tables, edits frames, and switches easily from page view to code view.

But Dreamweaver goes way beyond the other editors to allow you to create Dynamic HTML (DHTML) gadgets and pages. Dreamweaver fully supports Cascading Style Sheets (CSS), as well as layers and JavaScript behaviors. And Dreamweaver flexes great site-management muscles, including a built-in, full fledged FTP client, complete with visual site maps and a link checker.

What's New?

Dreamweaver MX 2004 introduces several new features that simplify page production and site management.

If you've used past versions of Dreamweaver, you'll notice the way the software looks has changed, and everything is a bit more streamlined.

New in Dreamweaver overall

Panel groups (Chapter 1 and throughout the book): Dreamweaver's various panels (Figure 3) have changed a bit; for one thing, they load much faster, and I find the entire program to be more stable and easier to use. The Insert bar now works much more quickly, and it now offers an easy-to-use Favorites category. While you work you can view either a menu (Figure 4) or tabs (Figure 5) when changing categories on the Insert bar.

Figure 3. Dream weaver's panel groups are faster and easier to work with in MX 2004.

Figure 4. The Insert bar now lists its categories in a menu . . .

Figure 5. . . . but you can still display them as tabs, if you like.

The Document window (Figure 6), which we use in every chapter, has updated its look, and the View buttons are easier to read. Windows users who maximize their Document windows will find the tabs at the top, above the Document toolbar.

Figure 6. Dreamweaver's Document window, where we create pages, is spruced up, and the buttons on its toolbar are easier to read.

The new Start page (Chapters 1 and 3 and throughout this book): This page (Figure 7) opens when you start Dream-weaver and reappears if you aren't currently editing any documents. It offers quick access to blank pages, your recent files, and page designs you can use as starter kits.

Figure 7. Use this Start page to quickly open recent documents and create new ones.

Find and Replace features (Figure 8) have been upgraded and more fully integrated into the software; for instance, you can now select a piece of text and use the Find Selection feature (Chapter 8) to locate your highlighted text anywhere on your page.

Figure 8. The Find and Replace dialog box offers a few more features, as described in Chapter 8.

New features for making pages

Fireworks image editing (Chapter 5) has been integrated into Dreamweaver to the extent that you can now do a limited image edit right in the Dreamweaver Document window using the Property inspector (Figure 9) without even opening Fireworks.

Figure 9. Borrowing the technology from its pal Fireworks, Dreamweaver can now edit digital images right in the Document window by using the Property inspector (See Chapter 9).

Expanded Table Editing Mode (Chapter 12) is a neat trick that temporarily puffs out the spacing in a table so you can better see things like very small cells and how adjacent cells look when resized (Figure 10).

Figure 10. Using Expanded mode to check out and edit your pages is like inflating them with air to get a better look.

All new pages in Dreamweaver use CSS now by default. One of the first places you may notice this is the Page Properties dialog box (Figure 11), which now works as a sort of CSS command center you can use to set not only backgrounds and encoding but page margins, first-choice text attributes for links (Figure 12), headings (Figure 13), and more.

Figure 11. The Page Properties dialog box, which sets basic attributes for an entire page, now uses CSS to do so and offers many more features (Chapters 3 and 8).

Figure 12. The Page Properties dialog box offers mondo link settings.

Figure 13. Now you can set up multiple headline levels for an entire page at once in the Page Properties dialog box.

Dreamweaver improves its CSS Style Sheet Management (Chapters 8 and 11) with each new version, but this time I have to stand up and cheer out loud: CSS is much easier to use, and there are no awkward dual-use features that disguise their func-tionality. You can now create and apply simple CSS styles with the Property inspector (Figure 14), and it is so easy! All CSS styles are listed in a more readable fashion in the CSS Styles panel (Figure 15), and they can be edited from that panel.

Figure 14. It's amazing how quickly you can create simple CSS text styles using the Property inspector.

Figure 15. The CSS Styles panel lists all styles at work on a page so you can edit them without guesswork.

You can also edit styles with a single click once you get the hang of the new Tag inspector/Rule inspector panel, which contextually displays either the Relevant CSS panel (Figure 16) or the CSS Properties panel (Figure 17), both of which are contextual style inspectors that change based on your selection.

Figure 16. The Tag Inspector panel group, displaying a panel called Relevant CSS, which shows all the styles that are applied to your selection.

Figure 17. Select a CSS style rule in the CSS Styles panel, and the Tag Inspector panel group will magically transform into the Rule Inspector panel group, showing all the attributes of the selected style.

✓ Tip

  • One caveat about CSS and Dreamweaver: All those pages that still use the <font> tag or old-style background and link settings are still supported by Dreamweaver, which makes for a potentially confusing dual set of tools in the Property inspector and the Page Properties dialog box. All of this is explained to the letter in Chapters 3 and 8.

The Tag I nspector panel (Figure 18) has entirely changed its functionality and is now a context-sensitive tool—quite sensitive, in fact—used for editing tag attributes. You can browse an alphabetical or categorical (Figure 19) listing of all the attributes applied to your tag. This quite handy tool lets you edit whatever is listed and now serves as an umbrella for both the Behaviors panel and the Relevant CSS/CSS Properties panel.

Figure 18. The Tag Inspector panel will display every attribute available to the tag currently selected. This is List View, an alphabetical array.

Figure 19. Here is the Tag Inspector panel in Category view.

Other code editing tools that have been improved and updated for Dreamweaver MX 2004 include the Tag Library, the Snippets panel, and the Tag Chooser, all of which are discussed in Chapter 4.

New site, file, and FTP tools

The Files panel (Chapters 2 and 17): This file-management tool (formerly the Site window or Site panel) works like a dream. The differences between the panel on Windows and the Mac have mostly been eliminated—you can now dock the Files panel into the stack of panels on the Mac (Figure 20) just as you can on the PC (Figure 21). The expand/collapse feature works well on both platforms; we saw the expanded Files panel in Figure 2. This not only makes it much easier to work with, but it no longer constantly auto-expands and takes over the entire desktop of its own volition.

Figure 20. Now the Files panel collapses into the stack of panel groups on the Mac ...

Figure 21. ...just as it does in Windows.

Also new in the Files panel are two more options for sharing your files over networks and getting them online in general. In Dreamweaver MX, we gained the ability to browse not only our local sites but also our entire local computer setup, including the desktop, local networks, and CDs. This functionality is improved, and added to it is the option to set up direct FTP server connections (Figure 22).

Figure 22. Now you can set up easy drag-and-drop connections to your most-used FTP directories.

After you add one of these direct links, you can browse your FTP server and get and put files right in your desktop listings. These connections do not have access to the vast array of Dreamweaver site management tools, but you also do not have to manage local and remote site versions, which make these ideal for dealing with all kinds of FTP servers, not just your Web server.

The second new file management option that's such a joy to have is the Save to Remote Server dialog box (Figure 23), which makes it much faster and easier to save the current file directly onto a live site, network drive, or testing server.

Figure 23. Save the file you 're working on directly to a folder on a remote server.

QuickStart Conventions

If you've read any other Visual QuickStart Guide, you know that this book is made up of two main components: numbered lists that take you step by step through the things you want learn, and illustrations that show you what the heck I'm talking about.

I explain what needs to be explained, but I don't pontificate about the acceleration of information technology or wax dramatic about proprietary tags.

✓ Tips

  • In every chapter, you'll find tips like these that point out something extra handy.

  • Sometimes you can find extra tidbits of info in the figure captions, too.

  • Code in the book is set off in code font.

  • When I refer to the menu bar, it's the main Document window menu bar unless I specify otherwise.

My technology

This book was written and researched on several computers, but mostly on an Apple PowerBook G4 running OS 10.2.8 and a parts-assembled desktop PC running Windows XP. Excepting the first chapter, in which I use the “round” XP Appearance Settings, I used the “oldschool” Windows Classic Style Appearance Settings in the PC screen shots to try to represent what the average Windows user would see when using Dreamweaver. My Mac OS X machine used standard factory appearance preferences.

Who Should Use This Book?

No matter what your level of Web experience, you can use Dreamweaver and this book. I'm assuming you've used some sort of page-creation tool before, even if it's just a text editor. You should use this book if you're:

  • An absolute beginner who wants to create a site without having to look under the hood.

  • Someone who knows that great code is important, but is still learning and wants an editor that will help them write clean code.

  • A graphic designer who's used to using document editors like Illustrator, Page Maker, or Photoshop, but who isn't as proficient with HTML.

  • An HTML expert who likes to hand code but wants automation of simple tasks.

  • Frightened of tables, layers, or CSS.

  • Someone who needs to learn Dream weaver quickly.

What's in This Book

Here's a quick rundown of what I cover in this book.

Getting started

In the first three chapters, I introduce you to the Dreamweaver interface, setting up local file management, and creating a basic page. Chapter 2 walks you through setting up a local site, which is the first thing you should do so that all of Dreamweaver's site management, linking, and updating tools will work for you. Chapter 3 presents a walk-through of how to set up a basic page. We'll take our first look at Web typography, links, images and media, and tables in that chapter. Chapter 3 also provides a detailed look at applying color to various Web page elements.

Writing code

Chapter 4 discusses Dreamweaver's code editing tools and learning HTML. If you never want to look at any HTML when you use Dreamweaver, you don't have to; on the other hand, if you want to learn HTML, there's no better way than by creating a page and looking at the code you just made. And if you want to control tiny, nitpicky little things on your page, you need to get comfortable going backstage into Code view and moving things around. In this chapter I explain the wide variety of code-editing tools that Dream weaver presents, all offering variations on hand coding: the Code inspector, Code view, the Snippets panel, the Tag selector and Tag Inspector panel, the Edit Tag command, the Quick Tag editor, and the Tag Chooser.

Links and media

It's simple to insert images, sound files, Flash, and other media using Dreamweaver. Basically, all media on Web pages is inserted using links, and you'll find out about those in here, too.

Chapter 6 describes linking in more detail than you thought possible. Chapter 5 includes everything you need to know about inserting images, and Appendix A, on the Web site for this book, describes how to make client-side image maps with the image map editor. Chapter 7 includes multimedia basics, including creating Flash buttons and Flash text; inserting Flash and other plug-ins; and designing image rollovers and navigation bars.

Text and typography

Chapters 8 through 11 talk about text and all the things you can do with it. Text is the meat of most pages, and we'll go into detail about how to format it, how paragraphs and block formatting work, and how to make useful things like lists and headlines.

Chapter 10 offers an in-depth look at the relationship Dreamweaver now has with Microsoft Word and Excel—bunches of tips regarding how best to deal with getting your text from Word and Excel onto the Web. A new feature now lets you import Word text directly onto a page in Dreamweaver, and there are other useful commands you can use when pasting or importing Word text.

Chapter 11 covers Cascading Style Sheets, which also allow you to reuse your formatting—CSS formatting is infinitely updateable, across any number of pages, and offers a panoply of typographic and layout settings.

HTML Styles have been retired in favor of moving forward into using CSS for all text modifications. Refer to Chapter 8 to find out how to deal with migrating from <font> tag formatting to CSS styling.

Page layout

Chapters 12 through 14 are what most folks consider the “intermediate” range in HTML. Chapter 12 is tables, 13 is frames, and 14 is layers. Chapter 12 discusses both the standard and layout views for creating tables. Chapter 13 makes it easy to use a complex layout with frames. And Chapter 14 introduces layers, which are part of dynamic HTML. All these layout tools are much easier to construct in Dreamweaver than by hand coding.

Browser Wars

FYI, this is a sidebar. You'll often find advanced, technical, or interesting additions to the how-to lists in sidebars like these throughout the book.

Netscape Navigator and Microsoft Internet Explorer (IE) have a few display differences that may affect your pages subtly. The best way to design for both browsers is to test your pages on both browsers and to compromise where you see differences. Fonts may appear slightly larger in IE (as pictured in Chapter 11). Margins may appear off in IE (or off in Netscape, if you prefer Explorer's way). Table and layer placement are mostly the same, but they're based on slightly different browser margins, so you need to check your work. And there are some differences in how style sheets are processed, the most common of which are covered in Chapter 11.

In this book, I show pages in a combination of Netscape 4 through 7, Internet Explorer 4, 5, and 6, Opera, Firefox, and Safari. Netscape 6 differs in a few places from Navigator 4.x—mostly by supporting former Internet Explorer-only features. Just as Explorer supported more and more Netscape-only features in each subsequent release, Netscape is picking up some W3C specifications that formerly only Explorer supported. These newly supported attributes appear mainly in style sheets (Chapter 11), layers (Chapter 14), and behaviors (Chapter 16), and I mention, where relevant, what Netscape 4.x does not support and what Netscape 6 does.

Netscape isn't as stable as it could be in terms of displaying tables and layers. The first thing you should try when addressing strange placement problems is the Netscape Resize Fix (Commands > Add Netscape Resize Fix), which is covered in Chapter 12. Netscape 6 is also a stickler for correct code, more than earlier versions of Navigator.

When I mention features that work in, for example, “version 4 and later browsers,” that number refers to the version numbers of Netscape and IE. While browsers such as Mozilla and Safari haven't yet made it to version 4 yet, their capabilities are definitely up to speed, so don't think that they're being ruled out. For our purposes, consider them to be version 6 browsers.

Appendix C on the Web site for this book goes into more detail about browser compatibility issues, including designing for older and text-only browsers and considering the accessibility specifications.


The Web is about interaction, from simple guestbooks to complicated user interfaces that change the way the page looks based on preferences. Chapter 15 introduces forms, the basic way to collect user input on everything from shopping sites to online quizzes. Chapter 16 covers behaviors, in a “buffet style” way of putting together JavaScript actions—choose one from column A and one from column B. Appendix N on the Web site, which previously appeared in this book, discusses Timelines, Dreamweaver's DHTML animation tool.

Putting it online

Chapter 17 is all about site management with Dreamweaver's Files panel, a full-fledged FTP client. You can upload and download files easily. You can also track links across your entire site and have Dreamweaver fix them for you. You can use the Site Map to visually examine and add links. You can also use different checkout names to keep track of who's working on which file.

But Wait, There's More on the Web Site!

The companion Web site for this book contains lots and lots of links to developers' pages, handy shareware tools, and example sites, and because the page is on the Web, you don't have to type in a bunch of URLs. You'll also find online appendixes covering the image map editor, HTML preferences, and browser compatibility.

Visit http://www.peachpit.com/vqs/dreamweavermx04/ and let me know what you think of the book and the Web site by emailing dreamweaver@tarin.com.

Special to Mac Users

I wrote this book, for the most part, on two computers sitting three feet from one another: a PC running Windows XP, and an Apple Macintosh Powerbook G4 running OS 10.2.8. Most of the screen shots are from the Windows version, but wherever there are any observable differences, I include Mac screen shots. Chapters 14, 16, and 17 were shot largely on the Mac.

The differences between the Mac and Windows versions are minimal, as you can see in Figures 24 and 25.

Figure 24. Dreamweaver's Document window and some of its panels, as seen on the Mac.

Figure 25. Dreamweaver's Document window and some of its panels, as seen in Windows. Not many differences, other than the title bar and menu bar, and the way the tops of the panels look.

The largest difference between the Windows version and the Mac version is in the Files panel, so to balance the chapters that focus on that tool, I used mostly the Mac view in Chapter 17 and mostly the Windows view in Chapter 2. In Figures 20 and 21, we saw how the docked files panel is quite similar between the Mac and Windows, with the exception that the Windows version features a set of menus that do not appear on the Mac. These items are all available from the Options menu on either platform.

The Mac no longer features a completely different menu bar for the Files panel, formerly known as the Site window and a completely different Site menu than the Windows version, which is great news for those of us who need or want to work with Web sites seamlessly between different machines.There are some basic platform differences that will cause screen shots of Dreamweaver taken on Mac or Windows to look slightly different. Windows windows (ha ha) have a menu bar affixed to each and every window; the Mac menu bar is always at the top of the screen, and it changes based on the program that you've got open and in the front (as in the Mac command Window > Move to Front).

Windows windows close by clicking on the close box on the upper right, whereas on the Mac, close boxes (or buttons, on OS X) are on the upper left.

Keyboard and button conventions

When I refer to key commands, I put the Windows command first and the Mac command in parentheses, like this: Press Ctrl+L (Command+L). Occasionally, you'll see both commands in parentheses, but the Windows command is always printed first.

And finally, on Mac OS X, each application has its own menu to the right of the Apple menu and to the left of the File menu (Figure 26). The Preferences dialog box in Windows (and Mac OS 9) is found by selecting Edit > Preferences, but on OS X, you'll find it by selecting Dreamweaver > Preferences.

Figure 26. On Mac OS X, there's an Application menu, containing commands such as Preferences and Quit for each program.

But Mommy, I Don't WANT to Buy a New Machine!

Dear fellow Mac lovers: You must upgrade to Mac OS X, version 10.2.6 or later, in order to use Dreamweaver MX 2004 (aka Version 7 or later). I know for many of you this would require purchasing new hardware, which is not necessarily an option open to you or your organization (or your budget). As far as I can tell, Macromedia will continue to support Dreamweaver 4 and Dreamweaver MX (2003), both of which for the time being run on earlier systems. These products work fine; the differences between each version of Dream weaver consist mainly of the addition of new tools. Basic page creation has stayed and will remain basically the same, although the exact set of steps in between points A and Z may not concur. CSS, for example, relies on the exact same code and uses most of the same tools, such as the New CSS Style dialog box, the Edit Style dialog box, and the Style Definitions dialog box. Getting to those tools, however, might be rather like orienteering if your book and software edition don't match.

But keep in mind two things: First, you can buy a used OS X-capable Mac on eBay for less than half the list cost of Dream weaver MX 2004; and second, both OS X 10.3 (Jaguar) and Dreamweaver MX 2004 have significant features that make upgrading from previous versions worth it.

Mouse conventions and context menus

Some Mac mice have more than one button; some don't. For that matter, some folks don't really use mice at all, they have those touchpad and stylus thingies. That said, I do refer to right-clicking a lot. On a Windows machine, when you click the right (rather than the left) mouse button, a contextual pop-up menu appears (Figure 27).

Figure 27. If you're a Windows user, you can right-click on an object to pop up a contextual menu. Here, I've got the context menu for an image.

Pop-up menus, or context menus, are available on all Mac systems that can run Dreamweaver MX 2004. To make a pop-up menu appear on a Mac, Control+click on the object. Options available from pop-up menus are always available as menu bar options, too, so you'll never miss functionality in Dreamweaver even if you don't right-click (Control+click).

That said, you ought to get used to Control+clicking if you can help it: An awful lot of very cool and useful commands have “secret” shortcuts available from the context menu in both the Files panel (Figure 28) and the Document window (Figure 29).

Figure 28. If you're a Mac user, just click on the object while holding down the Ctrl (Control) key. The context menu will appear in a second or two—here I'm looking at options for a selected file in the Files panel.

Figure 29. A context menu I got in the Document window.

About Application Servers and Dynamic Sites

If you're creating a dynamic site, you will need some of the information in this volume to construct Web pages and user interfaces. This book is designed to help you learn Dream weaver's features and shortcuts, including its myriad code-editing tools; maintain a site structure both locally and remotely; create both basic and complex layouts using tables, frames, and layers; work with typography, CSS forms, and JavaScript; and insert and manage images and media, including Flash. In other words, everything you need to know to construct those front-end interfaces is in here. Please feel free to peruse the table of contents and the index to decide whether this book belongs on your desk.

Because of size limitations, this book does not cover setting up and connecting to a testing server and an application server, although those processes are quite similar to setting up a remote server, as described in Chapter 17.

This book does not cover the Applications panel group, which contains the panels Databases, Bindings, Server Behaviors, and Components.

This book does not cover inserting the server objects in the Insert menu and on the Application tab of the Insert bar.

This book does not cover using Dreamweaver Templates and Library items, which use Template regions to invoke HTML, XML, and other updateable information on your pages. In particular, Optional and Repeating regions involve an ability to hand code XML and JavaScript.


Like the song, HTML remains the same, whether you construct it on a Mac or in Windows.

No matter how you produce a Web page, it can transport from computer to computer—there's really no such thing as “Mac HTML” or even “Dreamweaver HTML.”

Even better, Dreamweaver's Roundtrip HTML feature ensures that HTML you create outside the program will retain its formatting—although obvious errors, like unclosed tags, will be fixed.

If you like hand coding, Dreamweaver MX 2004 comes with HomeSite+, a powerful code-editing tool with lots of time-saving features. You can set up Dream weaver to work with any HTML editor you like, however. See Appendix D, on the companion Web site for this book, to find out how to set up an external editor and how Dreamweaver will treat your HTML.

What if this database stuff scares me?

Dreamweaver MX 2004 now includes so many features that it can be hard to tell what you need to know in order to produce a simple Web site.

Chapter 2 in this book helps you organize your files so you can capitalize on Dream weaver's extremely helpful link management features. And Chapter 3 introduces every feature you'll need to know in order to produce a real Web page.

The rest of the book goes into detail about those features, adding advanced features as the book progresses. If all you want is to put up a Web site for your small business, nonprofit organization, university, or family; or your rock band, art portfolio, or interest in KungFu movies; you can use this book. Once you get into the swing of Dream weaver, you can start toying around with the fancy tricks, but you don't have to get fancy just to have a Web site of your own.

And now . . . on to the book!

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint