Dreamweaver CS6: The Missing Manual

Tutorial: Inserting and Formatting Graphics

In this tutorial, you’ll learn how to insert a photo, add a rollover image, and apply CSS to improve the look of a web page. You’ll also learn how to use background images to enhance the look of headlines.

Tip

You’ll need to download the tutorial files from http://www.sawmac.com/dwcs6 to complete this tutorial. See the note on for more details.

Setting Up

Once you download the tutorial files and open Dreamweaver, set up a new site as described on Setting Up a Site. You should be pretty good at this routine by now, but here’s a quick recap, as well as an introduction to another setting that’s helpful when you work with images.

1. Choose Site→New Site.

   The Site Setup window appears.

2. For the Site Name, type Images Tutorial. To the right of the Local Site Folder box, click the folder icon.

   The Choose Local Root Folder window appears. This is just a window into your computer’s file system; navigate to the proper folder just as you do when you work with other programs.

3. Navigate to MM_DWCS6 folder, and then select Chapter05. Click Select (Choose) to identify this folder as the local root folder.

   These steps are the only ones required to define a new site; however, you’ll find one other setting useful when working with images.

4. Click the Advanced Settings option in the left-hand side of the window to reveal seven additional categories.

   Most of the options are related to Dreamweaver’s site-management tools, its Spry widgets, and the Contribute web-editing program, ...