JNCNET Home | Help Files | Tutorials | Working With Graphics

Introduction to Graphics on Web Pages:

Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. Currently, GIF and JPEG file formats are the best supported and can be viewed by most browsers.

PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and Netscape Navigator (4.04 and later browsers). So unless you are designing for a specific target audience using a browser that supports the PNG format, use GIFs or JPEGs for broader appeal.

GIF (Graphic Interchange Format) files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones.

JPEG (Joint Photographic Experts Group) file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time. You can often strike a good balance between the quality of the image and the file size by compressing a JPEG file.

PNG (Portable Network Group) file format is a patent-free replacement for GIFs that includes support for indexed-color, grayscale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks MX. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Macromedia Dreamweaver MX.

Note: PNG support in browsers is inconsistent; therefore, if you work with PNG files, you should also export them as GIFs or JPEGs to ensure you have web-ready versions of them.

Placing Graphics on Web Pages:

Inserting an image:

When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.

You can also add images as dynamic content.

To insert an image:

Place the insertion point where you want the image to appear in the Document window, then do one of the following:

• In the Common category of the Insert bar, click the Image icon.
• In the Common category of the Insert bar, drag the Image icon to the Document window (or to the Code view window if you are working in the code).
• Choose Insert > Image.
• Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window
• Drag an image from the Site panel to the desired location in the Document window
• Drag an image from the desktop to the desired location in the Document window

In the dialog box that appears, do one of the following:

• Choose File System to choose a graphic file.
• Choose Data Source to choose a dynamic image source.
• Browse to choose the image or content source you want to insert.

If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

In the Property inspector (Window > Properties), set properties for the image.

Modifying Image Properties:

Setting image properties:

This Property inspector allows you to set properties for an image. If you do not see all of the image properties as shown below, click the expander arrow in the lower right corner

To set image properties:

Set any of the following options:

Use the text field below the thumbnail image to set a name so you can refer to the image when using a Dreamweaver behavior (such as Swap Image) or when using a scripting language such as JavaScript or VBScript.

W and H are the width and height of the image, in pixels. Dreamweaver automatically updates these fields with the image’s original dimensions when you insert an image in a page. You can specify the image size in the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), and combinations, such as 2in+5mm; Dreamweaver converts the values to pixels in the HTML source code.

If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser. (To restore the original values, click the W and H field labels.)

Note: You can change these values to scale the display size of this instance of the image, but this does not reduce download time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.

Src specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.

Link specifies a hyperlink for the image. Drag the Point-to-File icon to a file in the Site panel, click the folder icon to browse to a document on your site, or manually type the URL. For information about creating links.

Align aligns an image and text on the same line.

Alt specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.

Map Name and the Hotspot tools allow you to label and create a client-side image map. See Creating image maps.

V Space and H Space add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.

Target specifies the frame or window in which the linked page should load. (This option is not available when the image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:

• _blank loads the linked file into a new, unnamed browser window.
• _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
• _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.
• _top loads the linked file into the full browser window, thereby removing all frames.

Low Src specifies the image that should load before the main image. Many designers use a 2-bit (black and white) version of the main image because it loads quickly and gives visitors an idea of what they’re waiting to see.

Border is the width, in pixels, of the image’s border. The default is no border.

Edit launches the image editor you specified in External Editors preferences and opens the selected image.

Reset Size resets the W and H values to the original size of the image.

Using an External image Editor:

You can use Macromedia Fireworks as your external image editor. Fireworks 3 and later use Design Notes to track where the original PNG file is stored on your local hard disk; when you open the image in Fireworks, it lets you edit the original PNG.

If you set any other image-editing application as the external image editor and launch the editor from within Dreamweaver, the application launches and opens the selected image. Use the image editor to modify the image, save your changes, and then view the updated image in Dreamweaver.

If the image file was generated from a PNG file, you can manually open the original file, make changes, and save the changed image. Dreamweaver still updates the image in the Document window when you return.

If you don’t see an updated image after returning to the Dreamweaver window, select the image and then click the Refresh button in the Property inspector.

Swapping Image:

Note: Because only the src attribute is affected by this action, you should swap in an image that has the same dimensions (height and width) as the original. Otherwise, the image you swap in appears compacted or expanded to fit the original image’s dimensions.

To use the Swap Image action:

• 1. Choose Insert > Image or click the Image button on the Insert bar to insert an image.
• 2. In the Property inspector, enter a name for the image in the leftmost text box.

The Swap Image action still works if you do not name your images; it names unnamed images automatically when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if all of the images are named beforehand.

• 3. Repeat steps 1 and 2 to insert additional images.
• 4. Select an object (generally the image you’re going to swap) and open the Behaviors panel.
• 5. Click the plus (+) button and choose Swap Image from the Actions pop-up menu.
• 6. From the Images list, select the image whose source you want to change.
• 7. Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To text box.
• 8. Repeat steps 6 and 7 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
• 9. Select the Preload Images option to load the new images into the browser’s cache when the page is loaded.

This prevents delays caused by downloading when it is time for the images to appear.

• 10. Click OK.
• 11. Check that the default event is the one you want.

If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.

Editing, Inserting and Optimizing Images with Fireworks:

To Edit your images in Fireworks from inside Dreamweaver do the following:

• Move you pointer over the image you want to edit and right click (Windows) or Control-click (Macintosh)
• select Edit With Fireworks and edit your image
• select Save and name your images file. It will have a .PNG extension (example: my_image.PNG)
• when editing is complete click Done

Note: PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and Netscape Navigator (4.04 and later browsers). So unless you are designing for a specific target audience using a browser that supports the PNG format, use File < Export to create a GIFs or JPEGs for broader appeal.

Inserting a Fireworks image in a Dreamweaver document:

Fireworks graphics can be placed in a Dreamweaver document a number of ways. You can place a Fireworks exported graphic directly in a Dreamweaver document using the Insert Image command, or you can create a new Fireworks graphic from a Dreamweaver image placeholder.

To insert a Fireworks image into a Dreamweaver document:

In the Dreamweaver document, place the insertion point where you want the image to appear, then

Do one of the following:

• Choose Insert > Image.
• In the Common category of the Insert bar, click the Image button or drag it to the document.
• Navigate to the desired Fireworks exported file, and click OK (Windows) or Open (Macintosh).

Note: If the Fireworks file is not in the current Dreamweaver site, a message appears asking whether you want to copy the file to the root folder. Click Yes.

Inserting Fireworks HTML code in a Dreamweaver document:
The Export command in Fireworks lets you export and save optimized images and HTML files to a location inside the desired Dreamweaver site folder. You can then insert the file in Dreamweaver.

Dreamweaver lets you insert Fireworks-generated HTML code, complete with associated images, slices, and JavaScript, into a document. This insertion feature makes it easy for you to create design elements in Fireworks then incorporate them into an existing Dreamweaver document.

To insert Fireworks HTML into a Dreamweaver document:

In Dreamweaver, place the insertion point in the document where you want the Fireworks HTML code to begin.

Do one of the following:

• Choose Insert > Interactive Images > Fireworks HTML.
• In the Common category of the Insert bar, click the Insert Fireworks HTML button.
• In the dialog box that appears, click Browse to choose the desired Fireworks HTML file.
• Select the Delete File After Insertion option to move the original Fireworks HTML file to the Recycle Bin (Windows) or Trash (Macintosh) when the operation is complete.

Use this option if you no longer need the Fireworks HTML file after inserting it. This option does not affect the source PNG file associated with the HTML file.

Note: If the HTML file is on a network drive, it is permanently deleted—not moved to the Recycle Bin or Trash.

• Click OK to insert the HTML code, along with its associated images, slices, and JavaScript, into the Dreamweaver document.

Inserting Flash movies:

When you insert a Flash movie into a document, Dreamweaver uses both the object tag (defined by Microsoft Internet Explorer for ActiveX controls) and the embed tag (defined by Netscape Navigator) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the object and embed tags.

To insert a Flash movie:

In the Design view of the Document window, place the insertion point where you want to insert the movie, then

Do one of the following:

• In the Insert bar, select Media and then click the Insert Flash icon.
• In the Insert bar, select Media and then drag the Insert Flash icon to the Document window.
• Choose Insert > Media > Flash.
• In the dialog box that appears, select a Flash movie file (.swf).

A Flash placeholder appears in the Document window (unlike Flash button and text objects).

To preview a Flash movie in the Document window:

• In the Document window, click the Flash placeholder to select the Flash movie you want to preview.
• In the Property inspector, click the Play button. Click Stop to end the preview. You can also preview the Flash movie in a browser by pressing F12.

Tip: To preview all Flash content in a page, press Control+Alt+Shift+P (Windows) or Shift+Option+Command+P (Macintosh). All Flash objects and movies are set to Play.

[back to top]