Start Basics Color Forms Frames Images Links Lists Tables Type

 

Images: Dreamweaver 4:
Add Images to a Page

Insert an Image

Set Image Properties

When you start to add images to your web pages, you should organize your images by saving them to an images folder within your web site folder.

Before you insert an image on a page in Dreamweaver, you should save your page to your web site folder.  If you have not yet saved your page, Dreamweaver will prompt you to do so when you try to insert your first image.

Dreamweaver prompts this action to ensure that your images and your web page files stay in the same web site folder so that when you publish your web site the images will accompany the pages.

Insert an Image There are two ways to insert an image in your web page using Dreamweaver:
  • Position your cursor at the location where you want to place your image.
  • Choose Insert, Image  on the main menu
  • Or click on the Insert Image button on the Objects Panel.

The Select Image Source dialog box will appear.

Insert Image button
Insert Image button

Select Image Source
NOTE:  If you have not yet saved the web page you are working on, Dreamweaver will prompt you to save the page before you insert an image.
Navigate to the image location on your drive or diskette and choose your image.
NOTE: If you choose an image that is not yet stored in a folder in your web site, Dreamweaver will display a warning message.
Outside Warning box
Click on Yes to copy the file to your root folder. 

When the Copy File As dialog box appears, navigate to and open your images folder. Click on Save to save the image to your images folder.

Note the information in the bottom panel of the dialog box:

  • The URL of the image appears in the URL text box
  • The Relative To: text box displays the default choice of Document

Dreamweaver is ensuring that the pathname of the image in the HTML code is connected to the document i which the image appears.

Click on Select
Set Image Properties When you select the image on your page, the Property Inspector will display the image properties.
Images Property Inspector
Type a short description of your image in the Alt box on the far right of the Property Inspector.

This short description will pop up on the web page when a visitor moves the mouse button across the image.  This is also the text that will be displayed in a browser set to load a page without images.

You can further control your image from the Property Inspector.
Note that the Border text box in the lower right corner of the Property Inspector is blank by default.  Set a border around the image by typing in a number corresponding to the width in pixels of the border you desire.
If you wish to change the default size of the image, insert width and height values in pixels in the W and H text boxes just to the right of the thumbnail of the image.

Remember that changing the size of the image changes only the way the image displays on the page. Changing these values does not affect the size of the image file itself. 

If you wish, use the Align dropdown menu to change the alignment of the image relative to any text on the page. 

If you wish, add horizontal and vertical spacing around the image by entering values in pixels to the V space and H space text boxes below and to the right of the thumbnail image on the Property Inspector.

Align menu

Images: Dreamweaver 4:
Overview
Add Images to a Page

Add a Background Image to a Page
Turn an Image into a Hyperlink
Create an Image Map

Start Basics Color Forms Frames Images Links Lists Tables Type

 

Personal Home PageWCB Main MenuUnit Lesson MenuEng 295 Main MenuTop of Page

Web Design Center
Last Revised: June 8, 2006
© Agatha Taormina