Modifying Images

This tutorial will illustrate modifying images in Dreamweaver CS5.

Now that we've seen how to get an image onto a page, let's see how we can modify images to suit our specific requirements.

Let's start with one of the images on the page about Sydney. Select the image and you can see the image's properties in the Properties Panel at the bottom of the screen.

One of the things we will most frequently want to do is to resize the image. There are a few ways of doing this. One of them is to grab the image by one of its resizing handles and drag it to the required smaller or larger size. As you do this, you'll notice that the H (Height) and W (Width) in the Properties Panel change.

The handles at the corners of the image maintain proportions when you resize, whereas those on the top bottom and sides don't and height and width can be changed independently.

If you want to reset the size to its original value there is a reset Size button between the H and W boxes.

The other way of doing this is to type the required H and W values directly into the boxes.

When you resize an image like this, note that this does not change the source image itself, so the size of the file your visitors need to download doesn't change. However, you can overcome this by resampling the source. There is a button in the Properties Panel for just this purpose.

Note that if you resample you will be warned about the permanent change to your image.

There are various other things we can do to modify an image using the controls in the Properties Panel. Here I've entered 10 (the number of pixels) into the Border box and this has produced a border around the selected image.

We'll be looking at the use of Vspace and Hspace later.

Note also that we could enter or update the Alt text using the Properties Panel.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Working with Tables in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!