USING IMAGES IN DREAMWEAVER

Most web browsers will only display images that have been saved in the gif or jpg format. PNG is a newer format that combines the best of both—the high quality of jpg’s and the transparency of gifs. Unfortunately, it’s not supported by most browsers yet (they do work in Safari, Apple’s OSX native browser, however, and Firefox). Creating a balance between file size, quality, and download time is important, and may require some experimentation. You can prepare Photoshop files, EPS and TIFF files for the web using either Fireworks or Photoshop.

Two important pieces of housekeeping: remember to name your images and to give them an “alt” tag in the properties panel. This helps you keep track of what you’re doing, and provides a text alternative for people with disabilities.

TYPES OF IMAGES

There are essentially two kinds of graphic images: full color continuous-tone illustrations and photographs, and flat color graphics.

Flat color images have little, if any, gradation of color. There may be only one color in a graphic image, or millions, depending on how it was created. Within a one or two color image, you can have many tints, or percentages, of that color. When displayed by the web, images typically have a range of 256 colors.

The sunflower on the left has 3 distinct colors. When optimized as a gif, it breaks down into 128 colors. As a gif, it is 4.2K in size. When optimized as a jpg (better quality) it is 8K in size and will take twice as long to display on a web page. There is no visual difference in the appearance between the gif and the jpg versions. Therefore, it makes sense to export the image as a gif.

The sunflower to the right has hundreds of colors. When optimized as a gif, it breaks down into 256 (the maximum) and is 35K in size. Optimized as a jpg, it still displays 256 colors and is about 19K in size and will load in half the time. What you can’t see here is that, when formatted as a gif you get distinct bands of color in the gradient areas, rather than a smooth blend. So, this image should be exported as a jpg to maintain the quality.

The sunflower on the left is better saved as a gif, and the one on the right is better saved as a jpg.

Both Photoshop and Fireworks can preview images as gifs and jpgs, showing you both file size and estimated download time so you can make smart decisions.

As you can see, the file size of the image plays a direct role in how quickly a web browser can display it. The dimensions of an image directly contribute to the file size as well. Higher resolution images create larger files. Images that are physically larger than what is needed create larger files.

When optimizing an image, make sure it’s no larger than 72–93 pixels per inch, and is within the dimensions you need. If you’re using a thumbnail image on one page to link to a larger version, save it as two separate files, each in the appropriate dimensions.

That said, placing images in a Dreamweaver document is a piece of cake. Simply click on the “import image” button on the Insert bar. It looks like a tree.

Dreamweaver opens a dialog box asking you to select an image, and then places it in your document wherever the cursor was blinking. You can place images directly on the page, within the cell of a table, or in a layer. Remember to name it and add an alt tag.

By the same token, you can use your Assets panel; click on the "images" category and drag the image you want to your document window.

If your image file is fairly large and will download slowly—but it’s got to be that big no matter what—you can specify a “lowsrc” image to be visible while the larger file downloads. To do this, create an image of the same dimensions as the larger file, but much simpler, so that it’s file size is a fraction of the larger file (a black and white gif file, for instance). After you’ve placed the large file in Dreamweaver (and it’s selected), use the “lowsrc” browse button in the properties panel to locate the smaller file. In a browser, the lowsrc image displays almost instantly and is gradually replaced by the larger image as it downloads.

The other options for images include selecting a placeholder, a rollover image, the HTML file from a Fireworks image, or a navigation bar.

Placeholders are used to set aside space for an image that is not yet available. When you select this, Dreamweaver asks you to name the image and specify a size for it. You also need to select a color for the placeholder. When you click OK, Dreamweaver places a colored box in your document with a name attached to it.

You’ll note that in the properties panel, there is an option to create the missing image in Fireworks.

Clicking on “create” launches Fireworks and opens a blank document in the size you specified in Dreamweaver. Import or create the image and select an optimization format. When you’re finished, you’ll note a “done” button at the to leftp of the document window. Click on that to save your file and export it in one step. You’ll be whisked back to Dreamweaver in time to see your new image replace the placeholder box. Very nice.

Of course, you don’t have to create your image the minute you insert a placeholder. Take your time. You can even create the image in Fireworks or Photoshop once you’ve saved and quit Dreamweaver. To replace a placeholder with an image, select it to activate the image portion of the properties panel. Then use the folder icon next to the “source” box to navigate your way to the new image, or drag the registration icon to the appropriate picture file in your files panel.

Rollover images are pictures that change as a mouse rolls over them. If you want to create a rollover in Dreamweaver, you need to create two images of the same dimensions. If they’re different sizes, the second one will be distorted to fit in the space determined by the size of the first. You can also create a third image to use as the "down" state of a button.

When you choose insert rollover image, you get a dialog box that asks your to locate the image files. Make sure to choose the “up” state of your rollover first, and the “over” state second. And make sure to include an alt tag.

You can also assign a link to a rollover image. Just select it and add the URL to the Link field in the Properties panel.

Fireworks HTML is a different sort of animal that deserves attention. When you’ve optimized a plain old image in Fireworks, it’s exported as a gif or jpg file. You use the import image icon (the tree) to bring it into Dreamweaver.

But if you’ve created an image in Fireworks that slices an image into smaller files (to speed loading time) or that included slices and/or hotspots for interactivity (a drop down menu, or disjoint rollover, for instance) you’re exporting several gif or jpg files that correspond to the slices, as well as an HTML file (the default file extension for Fireworks HTML files is htm, which is a good thing because it helps you differentiate between a Dreamweaver document and a Fireworks image).

If you want to import just one slice of a larger image, insert it as an image. If you want to import the entire image, including any interactivity assigned to it, you must choose “insert Fireworks HTML.” Rather than navigating to your gif or jpg file, you need to find the file that Fireworks created called (name).htm and select that. When you do, Dreamweaver will import all the slices needed to recreate the image as a whole and incorporate the coding that makes it work.

While some people suggest checking the “delete file after insertion” button when importing Fireworks HTML, I never do. I find I insert the same file several times before I’m satisfied with it. What a waste of time to have to open Fireworks and export it over and over again!

Dreamweaver treats inserted navigation bars much like rollovers, except that you can import up, over, down, and over while down states. Bring the four states of each button in one at a time. Click on the + button at the top of the import dialog box to add buttons to the navbar. Dreamweaver will arrange them horizontally or vertically, according to your specifications.

A final word about inserting images: if you have your site/files panel visible, you can just drag images from the files or assets panel right into Dreamweaver. Nice.

MANAGING IMAGES IN DREAMWEAVER

Use the properties panel to make adjustments to images.

Image preview and name: you get a file size and the opportunity to name your image. This is important for scripting purposes.

If you resize an image, you get an icon that looks like a rotate tool. Click on it to scale the image back to it’s original size. To resize in proportion, use a corner point and hold your Shift key down as you drag.

Source file: this is the gif or jpg file, with a “path” to where it’s located.

Link: To link an image either type in an absolute url, or browse to the file you want the linked picture to go to.

Alt: always type something here so people with disabilities can at least hear what the image is about.

Edit: click on an icon to edit the image in Fireworks, compress it, crop it, resample it, adjust the contrast, or adjust the sharpness. Choosing any of these options permanently alters your original gif or jpg, so use with caution.

Class: if you’ve created a CSS style that affects images, assign that style.

Map: use the drawing tools to create hot spots that can be used as links to other web pages. (See IMAGE MAPS in your Fireworks handout.)

V & H space: adds white space around an image to prevent other elements from bumping into it.
Target: open the link in a new window, or _self (the same window)

Low Src: choose a smaller (in file size, not dimensions) image to display while a larger file is downloading.

Border: don’t use this. If you want a border, create a CSS style for it.

Align: to get text to wrap around your image, choose align “left” or “right.”

Text alignment: formats the text surrounding your image.