Dreamweaver MX: The Missing Manual

Chapter 5. Images

Nobody believes that a picture is worth a thousand words more than today’s Web designers, as evidenced by the increasingly visual nature of the Internet. In fact, it’s not difficult to stumble onto a home page these days composed of nothing but graphics (see Figure 5-1).

Figure 5-1. Some Web sites rely almost exclusively on graphics for both looks and function. The home page for the PBS Kids Web site, for instance, uses graphics not just for pictures of their shows’ characters, but also for the page’s background and navigation buttons.

Even if you don’t want to go that far, understanding how to use graphics effectively is invaluable. Whether you want to plop a simple photo onto your page, cover it with clickable “hot spots,” or design an interactive set of buttons that light up when the cursor passes over them, Dreamweaver makes the job—and the underlying JavaScript programming—easy.

Adding Images

If you were writing out the HTML instructions for your Web page by hand, you’d insert an image into a Web page using the image tag—<img>. The primary property of an image is called the source (Src), which is the URL or path to the graphics file.

Dreamweaver does all of this coding for you automatically when you insert a picture into your fledgling Web page:

1. Save the Web page that will contain the image.

   In order to insert an image, Dreamweaver must determine the path from ...