Images:
Dreamweaver 4:
Add Images to a Page
| 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:
The Select Image Source dialog box will appear. |
|
|
![]() |
|||
| 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. | |||
![]() |
|||
| 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:
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. | ||
![]() |
|||
| 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. |
![]() |
||
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
Web Design Center
Last Revised:
June 8, 2006
© Agatha Taormina