Working with Graphics

Dreamweaver lets you choose how it references (constructs the pathway) images: with document-relative or site-relative references. Generally you should use the document-relative links and paths. If you have an extremely large site or plan to move pages frequently within the server, you might want to use the site-root-relative referencing.

Until you save your file, Dreamweaver has no way to make the reference. You should always save your file before your insert graphics or anything else, for that matter. If you don't, Dreamweaver displays an alert box and the fixes the file name path when you do save the Dreamweaver file.

To insert a graphic:

There are two easy ways to insert graphics: using Insert Image on the Common Objects Panel or using Image from Insert on the tool bar. The instructions below apply specifically to the use of the Common Objects Panel, but the basics are the same for both approaches.

1. Position the insertion point (you cursor) in your document where you want the image to appear.
2. Click Image on the Common Objects Panel. The Select Image dialog box opens.
3. In the dialog box, activate the Preview Images option to see a thumbnail of the images you select and choose Document from the Relative To menu. The file name for your document appears to the right of the menu.
4. Locate the image file you wish to insert. A thumbnail of the selected image appears in the Image Preview area of the dialog box.
5. Click Select. The image appears at the point of insertion in your document. If you select an image that is not included in the root folder for your website, an alert box will appear asking if you want to add a copy of it to that folder. Say "Yes". This will prevent all of those broken image things from appearing on your webpages.
6. In the Property Inspector, type the name of your image in the text box under Image. Although naming your images is not essential, it is a good practice.
7. Type a descriptive name for the image in the Alt text box.

Notes:

When you import a graphic, the width and height of the graphic are automatically added to the Property Inspector. This gives the browser the information it needs to define the layout of the page.

This important option can make a difference in the speed of loading your graphics. You can change these numbers in Dreamweaver, but don't! If you scale the image larger, the image quality will diminish. You can scale it smaller and it will look okay, but the file size will remain the same. Changes in the sizes of graphics should always be made with image-editing software (Photoshop or Paint Pro) to ensure that you have the smallest file possible.

The Alt option in the Property Inspector lets you specify text to be displayed on browsers whose graphics don't display. This is a nice feature to add to all your graphics that are critical to users for navigation. If users have graphics disabled or are using a text-only browser, at least they can see some of the information they are missing. People with vision disabilities use a reader that speaks the Alt tags along with the text on the page. The Alt text is briefly displayed when the user moves the pointer over the graphic.

To align a graphic:

1. Click on the image to select it.
2. Use the align right, align center, or align left text tools on the Property Inspector to align the image.

   These work the same as in Word.

3. Save the file and preview in browser.

   Note: You can add a border around images by typing the size of the border (1, 2, etc.for the pixel size) in the Border text box on the Property Inspector. You can also add space around an image by typing the desired pixel size in the H (space on either side) or V (space above and below) text boxes on the Property Inspector.

To wrap text around an image:

The Property Inspector Align tool positions the image in relation to text.

The Align options available on the pop-up menu are designed for two categories of text: single line and multiple line.

Multiple Line Options:

• Left: Positions the image on the left side of the page and wraps the text to the right of the image.
• Right: Positions the image to the right side of the page and wraps the text to the left of the image.

Single Line Options:

• Baseline: Aligns the bottom of the image with the baseline of the line of text.
• Top: Aligns the image with the top of the tallest item in the line.
• Middle: Aligns the baseline of the text line with the middle of the image.
• Bottom: Identical to Baseline.
• Text Top: Aligns the image with the top of the tallest text in the line.
• Absolute Middle: Aligns the middle of the text line with the middle of the image
• Absolute Bottom: Aligns the bottom of the image with the bottom of the text line.

You can either create or import your text first and then bring in the image or bring in the image first and the add the text.

1. Insert image.
2. Select the image.
3. In the Property Inspector, select the Align option best suited for your needs.
4. Position the insertion point to the right of the image.
5. Add text.
6. Save file and preview in browser.