Campbell M. Dreamweaver 8 Design and Construction / Section 5.3. Naming Images for the Web

Computers & Technology
Education & Reference
Business & Investing
Science & Math

Dreamweaver 8 Design and Construction
Authors: Campbell M.
Published year:
Pages: 36-37/154

<< Previous page
Table of contents
Next page >>

5.3. Naming Images for the Web

When you store images on your computer, you probably prefer long, descriptive names like "Lloyd and Deborah investigate the meteor, May 2013." For personal use, these kinds of names are fine, but for the Web, you want something a bit more compact. Here are some suggestions:

Always include a standard extension: An extension is a short label that you attach to the end of a filename with a dot (.). In the case of image files, the extension tells the browser what type of file the image happens to be. For JPEGs, it's .jpg or .jpeg ; for GIFs, it's .gif ; for PNGs, it's .png . Good graphics programs automatically append the correct extensions to your files.
Stick to alphanumeric characters: Don't use punctuation or other typographical marks in your filenames. Use letters and numbers only. Instead of spaces, use the underscore character (_) or hyphen (-).
Try for eight characters maximum (not counting the extension): If you really want to act like an old-school web designer, try keeping your filenames to eight characters maximum, not counting the extension. Vintage software and hardware insist upon the eight-character cap. The newer stuff isn't so picky, so if you find yourself going beyond eight characters, you should be all right.
Use plain language whenever possible: Why choose flwr.jpg when you can have flower.jpg instead? Plain-language names are easier and clearer.

TIP

There are at least two side benefits to using plain-language names for your images. First, your images appear in search-engine results. Second, your images have built-in text equivalents (but don't forget the actual alternate textsee Chapter 15).

Use prefixes for images that belong to a group or set: When you build your site, you'll store all the images for all the pages in a single folder. As you might imagine, your image folder fills up quickly, and it's no joke trying to find a particular image when you have five or six hundred items to weed through. To save yourself some hassle, try attaching prefixes to images that belong together. For instance, you might decide that the filenames for all product images should begin with prod_ or simply p_ . This way, when you view the contents of your image folder in Dreamweaver, all the p_ images appear together in the alphabetical listing of files.
Use suffixes for different versions of the same image.: When you have two different versions of the same imagea small thumbnail version for one page and a full- sized version for another page, or a default button state and a rollover button state for your main navigationuse the same general filename for both images, but attach a short suffix to one or both that explains the difference. The filenames flower_sm.jpg and flower_lg.jpg tell you exactly what you need to know when you're scanning the contents of your image folder. For rollovers, you might use the _ro suffix. Save your default-state image as button.gif and your rollover-state image as button_ro.gif .

TECHTALK

A tracing image is a to-scale mockup of your layout for use in Dreamweaver .

5.4. Creating a Tracing Image

A tracing image is a to-scale mockup of your layout. You draw the tracing image in your graphics software, save it, and file it away. When design time rolls around, you attach your tracing image to the document window in Dreamweaver and literally draw your layout on top of the mockup .

This isn't a mandatory step. If you don't have graphics software, or if you'd rather not bother with a tracing image, then you may certainly proceed in Dreamweaver without one. Still, having the tracing image almost always works to your advantage.

Toward the end of Chapter 4, you assigned pixel measurements to the widths and heights of the areas in your layout sketch. Most of these measurements were probably estimates, not that anyone can blame you for guessing. You were working in the abstract, with empty rectangles standing in for the sections of your design. Making the tracing image is your first step toward finalizing those measurements. You see firsthand what a 100-pixel-wide navigation area looks like in relation to the rest of your design, and if the area seems too narrow, you can widen it.

You might also take the opportunity to start filling the areas of your tracing image with sample content. You can design the banner of your page and connect it to the navigation bar that you envision running down the left side of the screen. You can type some sample text in the main content area. You can try out different color schemes. Experiment as much as you like, and save when you're happy with the results. As long as you build your layout in Dreamweaver to match the size of the areas in your tracing imagewhich is extremely easy, since you're tracing over themthere's no reason why your design can't look exactly like your mockup. You don't even need to recreate the art. Simply export the graphics from the tracing image.

To create a tracing image, here's what you do:

Get out the sketch of your design from Chapter 4, and open a new document window in your graphics software.

Start by setting the canvas size of your document to match the dimensions of the browser window. Your tracing image should be to scale, so make sure the width of the canvas is exact. Refer back to the page width that you chose for your layout sketch in Chapter 4. (If you're planning to build a liquid layout, use the page width on which you initially based your design.) The height doesn't matter so much in this case, because the height of your main content area is variableit changes from page to page depending upon the content. Make the height of the canvas a hundred pixels or so longer than the above-the-fold cutoff. You may want to draw a line to mark the above-the-fold threshold. Also, for your convenience later, you can label the areas and give their dimensions.

TIP

To resize the canvas in Macromedia Fireworks, choose Modify Canvas Canvas Size, or click the Canvas Size button on the Property Inspector. Type the width and height values for your page in the appropriate fields of the Canvas Size dialog box, and click OK.

Now, simply draw rectangles for each of the areas in your design, following the width and height guidelines that you established in your sketch. If your guesses were off, feel free to adjust them as needed.

When you finish, your document window looks something like Figure 5-7. This is all you need for a tracing image, so feel free to stop here. Save your file in GIF, JPEG, or PNG format, and you're done. But if you're feeling inspired, by all means, flesh out your tracing image with sample graphics, as shown in Figure 5-8. The more you do now, the less you have to do later.

Figure 5-7. An example of a tracing image

Figure 5-8. Flesh out your tracing image with art and sample content

TIP

The art that you mock up in your tracing image doesn't have to go to waste. You can use the very same art on your site. To do this, export the desired areas as separate image files. Eventually, you'll place these image files into your Dreamweaver document.

If you're using Macromedia Fireworks, select the rectangle from Step 4 that you want to export. Right-click the mouse button, and choose Insert Slice from the context menu. Fireworks adds an identical, rectangular slice to the web layer. Right-click again, and choose Export Selected Slice. You now have a web-ready image, tailored exactly to size, for your layout.