Images: Copying, Inserting, Resizing, Rollovers.
Copying an image from a website
To copy an image from a website:
- Find the image you want to copy.
- Right-click on it.
- Choose Save Picture As….
- Change the name of the picture to something
meaningful to you.
- Browse to a location such as your Desktop
and choose Save. I like to store images in a
folder named Internet Images.
Note: Remember to
respect copyright laws when using images. If the picture belongs
to someone else, you should ask their permission before you use
it. You could send them an email asking them if it’s ok to
use it. If they give you permission, consider adding an acknowledgement
of them on your webpage, including a link to their website.
Inserting images
1. Put your pointer where you want to insert the image on your
website.
2. Go to Insert.
3. Select Image.
4. In the window that opens, browse to the image.
5. Double-click on the image once you find it.
6. Dreamweaver will warn you that the image is not in Dreamweaver,
and it will ask you if you want to copy it there. Click Yes.
7. Open your images folder.
8. Rename your picture if you want to.
9. Choose Save.
Remember that the name of your picture should be no more than 8
characters long if possible, that the name should have no spaces
between words, and that you have to include the proper extension
(.gif or jpeg).
Changing image properties
In the image below, we see how the Properties Inspector changes
depending on what you are doing in Dreamweaver. The image of the
Canadian Flag has been selected so the Properties Inspector gives
options for changing the image.
Changing the properties of an image: You can
see a small version of the image on the left of the inspector, with
the file size of the image next to it. In this case it is 2k.
W: Refers to the width of the image in pixels.
Pixels are a kind of measurement unit, like centimeters. In the
above example the width is 256 pixels.
H: The height is 180.
Src: (source) This refers to where the image is
stored on your computer. If you want to link the image to another
webpage, you can paste the URL in the box next to link.
Link: If you want to link the image to another
page in your website, click on the yellow folder, browse to the
page you want to link to, and double-click on that page.
Alt: (alternate text) This is the text that shows
up in a little yellow box when you keep your mouse over a picture
on a website. According to the ADA (American Disabilities Act),
all websites should conform to this. An alt tag should contain a
description of the image so it can be read by screen-reading software,
which is used by blind people. Remember to always include the alt
tags on every image.
V Space and H Space: This is where you can create
a white space around the image.
Border: Create a black border around an image
here.
Align: Move the image to the left, right or center
of the page.
Creating rollover images
A rollover is an image that changes to another image when you move
your mouse pointer
over it. In order to make a rollover, you have to have two images
that are either the same height and width or very close. To make
a rollover:
- Click on the Insert menu.
- Go to Interactive Images.
- Choose Rollover Image.
- In the Insert Rollover Image box that comes
up, put in a name next to Image Name. This name
will not be visible on your website and is just so you know what
this rollover will be called.
- Next to Original Image,
browse to and select the first image you want to show.
- Next to Rollover Image,
browse to and select the second image you want to show (it will
show only when the mouse moves over the first image).
- Leave the Preload Rollover Image option
checked so both of the images will load automatically as the page
first opens. This prevents a delay in having the picture change
when someone puts their mouse over the image.
If you want your rollover to act as a link to another page when
the image is clicked:
- Copy and paste the URL (address) into the
last box.
- Click OK to close the
box.
- Hit <F12> to test
the rollover image in a browser.
|
