Dreamweaver 8[c] The Missing Manual

Dreamweaver is a program for producing and managing Web sites. Whether you need a simple five-page Web site to let your friends know about your summer vacation or a thousand-page e-commerce site with database connections and dynamically generated content, Dreamweaver can help. It lets you build Web pages and sites quickly and maintain them with ease. It also lets you add interactive behavior and advanced Web technologies like Cascading Style Sheets, Dynamic HTML, and database connectivity.

1.1.1. What Dreamweaver Is All About

Dreamweaver is a complete Web site production and management tool. It works with Web technologies like HTML, XHTML, CSS, and JavaScript.

The enhancements in the latest version, in fact, make it easier than ever to design and lay out Web sites. In particular, revamped Cascading Style Sheet support lets you access the latest Web techniques for creating fast-loading, easily modified Web page designs. Dreamweaver also includes a multitude of tools for managing Web sites once you've built them. You can check for broken links, use templates to streamline site-wide page changes, and reorganize your site in a flash with the program's site management tools.

It's also a serious tool for creating dynamic (database-driven) Web sites. You can now turn your company's database of products into a constantly updated online catalogor turn that cherished recipe collection into an online culinary resource for an adoring public. You can even create Web pages for updating and deleting database records, meanwhile keeping designated areas of your site secure from unauthorized visitors . Best of all, Dreamweaver 8 does the programming for you.

If you've never used Dreamweaver before, but have already built one or more Web sites, you won't have to start from scratch. Dreamweaver happily opens Web pages and Web sites that were created in other programs without destroying any of your carefully handcrafted code. While Dreamweaver has always prided itself on leaving the HTML code you write exactly as you wrote it, Dreamweaver 8 offers more features for hand-coded Web pages.

1.1.2. Why Dreamweaver?

There are other Web design programsdozens of them, in fact. But Dreamweaver has become one of the leading programs thanks to key benefits like these:

• Visual page building . If you've spent any time using a text editor to punch out the HTML code for your Web pages, you know the tedium involved in adding even a simple item like a photograph to a Web page. When your boss asks you to add her photo to the company home page, you launch your trusty text editor and type something like this: <img src="images/staff/bigcheese.gif" width="100" height="150" alt="The Boss" border="0"> .

  Not only is this approach prone to typos, but it also separates you from what you want the page to look like.

  Dreamweaver, on the other hand, takes a visual approach to building Web pages. If you put an image on your page, Dreamweaver shows you the picture on the screen. As in a word processor, which displays documents onscreen as they look when printed, Dreamweaver provides a very close approximation of what your Web page will look like in a Web browser.

• Complex interactivity, simply . You've probably seen Web pages where a graphic (on a navigation bar, for example) lights up or changes appearance when you move your mouse over it.

  Dynamic effects like thismouse rollovers, alert boxes, and navigational popup menususually require programming in JavaScript, a programming language that most Web browsers understand. While JavaScript can do amazing things, it requires time and practice to learn.

  But Dreamweaver relieves you of having to learn JavaScript for these purposes; the program makes it easy to add complex interactivity with just a click of the mouse. Chapter 11 explains how you can use these behaviors (ready-made Java-Script programs in Dreamweaver) to bring your pages to life.

• Roundtrip code . Every now and then, even in Dreamweaver, you may sometimes want to put aside the WYSIWYG (what you see is what you get) view and look at the underlying HTML code of a page. You may feel more comfortable creating some of your HTML by hand, for example, or you may want to tweak the HTML that Dreamweaver produces.

  Macromedia realized that many professional Web developers still do a lot of work "in the trenches," typing HTML code by hand. In Dreamweaver, you can edit the raw HTML to your heart's content. Switching back and forth between the visual modecalled the Design viewand the Code view is seamless and, best of all, nondestructive. Unlike many visual Web page programs, where making a change in the WYSIWYG mode stomps all over the underlying HTML code, Dreamweaver respects hand-typed code and doesn't try to rewrite it (unless you ask it to).

  In addition, Dreamweaver can open many other types of files commonly used in Web sites, such as external JavaScript files (.js files), so you don't have to switch to another program to work on them.

  Dreamweaver 8 adds a lot more hand-coding power, including tools to make editing and viewing code easier. See Chapter 9 to learn more about how Dreamweaver handles writing and editing code.

  UP TO SPEED Hand Coding vs. WYSIWYG Editors

  Creating Web pages in a text editor was long considered the best method of building Web sites. The precise control over HTML available when code is written by hand was (and often still is) seen as the only way to assure quality Web pages. Hand coding's reputation as the only way to go for pros is fueled by the behavior of many visual page-building programs that add unnecessary code to pagescode that affects how a page appears and how quickly it downloads over the Internet. But hand coding is time-consuming and error-prone . One typo can render a Web page useless. Fortunately, Dreamweaver brings solid code writing to a visual environment. Since its earliest incarnation, Macromedia has prided itself on Dreamweaver's ability to produce clean HTML and its tolerance of code created by other programsincluding text editors. In fact, Dreamweaver includes a powerful built-in text-editing mode that lets you freely manipulate the HTML of a pageor any other code, including JavaScript, Visual Basic, or ColdFusion Markup Language. But the real story is that the code produced when working in the visual mode is as solid and well written as hand coding. Knowing this, you should feel free to take advantage of the increased productivity that Dreamweaver's visual-editing mode brings to your day-to-day work with its one-click objects, instant JavaScript, and simplified layout tools. Doing so won't compromise your code, and will certainly let you finish your next Web site in record time. Besides, no Web design program is really WYSIWYG (what you see is what you get). Because every browser interprets the HTML language slightly differently, Web design is more like WYSIRWYGOAGD: what you see is roughly what you'll get, on a good day.

• Site management tools . Rarely will you build just a single Web page. More often, you'll be creating and editing pages that work together to form part of a Web site. Or you may be building an entire Web site from scratch.

  Either way, Dreamweaver's site management tools make your job of dealing with site development easier. From managing links, images, pages, and other media to working with a team of people and moving your site onto a Web server, Dreamweaver automates many of the routine tasks every Webmaster faces. Part Four of this book looks at how Dreamweaver can help you build and maintain Web sites.

• Database-driven Web sites . Data makes the world go round. Whether you're a human-resource records manager or a high school teacher, you probably keep track of a lot of information. Today, companies and individuals store reams of information in database systems like Microsoft Access or Oracle 10g. Dreamweaver 8 can help you bring that information to life on the Web without having to learn a lot of programming along the way. From accessing informationsuch as the latest items in your company's product catalogto updating and editing databases online, Dreamweaver 8 can help you build database-driven Web sites. Part Six of this book offers a gentle introduction to building dynamic Web sites.

• Have it your way . As if Dreamweaver didn't have enough going for it, the engineers at Macromedia have created a software product that is completely customizable, or, as they call it, extensible . Anyone can add to or change the menus , commands, objects, and windows in the program.

  Suppose, for example, that you hardly ever use any of the commands in the Edit menu. By editing one text file in the Dreamweaver Configuration folder, you can get rid of any unwanted menu itemsor even add new commands of your creation. This incredible flexibility lets you customize the program to fit your work methods , and even add features that Macromedia's programmers never imagined. Best of all, the Macromedia Exchange Web site includes hundreds of free and commercial extensions to download and add to Dreamweaver. See Chapter 19 for details.