Computer Skills
0761111
Adobe Dreamweaver CC Tutorial
Part 4
Prepared by: Eman Alnaji
Chapter Four: Working with Images
1. Adding Images
a. Make sure first that you have saved the page you want to add an image to.
You don't have to, but it is considered a good practice, so that when you
add the image directly you can view its path in the "src" field of the
"Properties" panel.
b. In the document window, position your cursor where you want the image
to appear.
c. Choose Insert  Image  Image; you can choose it from either the Insert
menu, or Insert Panel.
d. Browse to and select the graphics file you want to add to the page.
The applicable formats of the files you can add are: gif, jpeg or png.
1
If you have already the image in your website folder, you can browse it
and select it directly. If not, you can select an image from any folder on
your PC, but when pressing OK, Dreamweaver will offer you to add a
copy of the image to your "default image folder". (This message may
appear only once then whenever you add a new image it will copy it
directly)
From "Files" panel, you can check the added images to your web site.
The image will be added to your page, by using the handlers around it, you
can resize it with the size you need.
2
When you select an image on your webpage, the properties panel will be
adjusted to display some special properties for images. Check the "Src"
property that shows the path of your image.
Such as:
From the edit options above, you can edit your image, brightness and
contrast, etc.
2. Adding a Placeholder Image
Sometimes you start designing your page without having the actual images
you need to display. You can reserve space for such images, and continue
designing your web page.
3
a. Choose any image and insert it as described in the previous section.
Any image will do, it will just reserve the space.
b. In the properties panel, delete the text in the "Src" box.
The image will appear this way:
c. Adjust the Width and Height of the "Image Placeholder", either by
dragging the "Handlers", or by changing the properties "W" and "H" from
"Properties" panel.
d. Now, when the image you desire to add is ready, copy it in the "default
image folder" and you can place it in the placeholder using two methods:
a. Double-click the placeholder, will open the browse window, where
you can locate your image.
b. From
box, drag the "Point to File"
property to the image file in "Files" panel. (Hint: The same process
you used to link a page)
3. Linking an Image
You can create a link using an image, so that when the user clicks on it, it will
lead to another web page, web site, or any other file.
Merely, you have to select the image, and from "Properties" panel, "Link"
box, you can use the linking methods described earlier in chapter three.
4. Creating Rollover Images
Sometimes you need to add an effect on your image, just for fun, or for
indicating that this image is a link.
4
In this option, you can add two images, one appears first, and the other
appears whenever the user moves the mouse over it.
To create a Rollover Image, select Insert Image Rollover Image, either
from the "Insert" menu or panel.
This dialog will appear:
From this dialog, you can choose the two images desired.
- Image name: A virtual name of the inserted image.
- Original image: Browse the image file that will appear first.
- Rollover image: Browse the image file that will appear when the
mouse moves over it.
- Preload rollover image: if checked, the browser will be forced to
download the rollover image along with the rest of the page to avoid a
delay in its appearance.
- Alternate text: You can add a text description for the rollover image.
- When clicked, go to URL: you can link your image from this dialog,
either to another web page, or another website by merely adding a URL.
This link will be copied to "Link" property in "Properties" panel.
5. Adding Hotspots to your image
Sometimes you only need to activate certain area of your image to be a
hyperlink, not the entire image.
To add a hotspot:
a. Add the desired image to your web page.
b. From "Properties" panel, click one of the following hotspot area shapes:
5
You can determine, whither the hotspot shape will be a rectangle, a circle,
or a polygon.
c. Select the Rectangle shape, for example, and draw the rectangle on any
area you like on your image
d. When this shape is selected, go to "Properties" panel, and merely add the
link you desire (use the previously described link types from chapter
three).
e. When running the web page, try to move the mouse over the image, the
mouse pointer will be changed into hand-shape only when you reach this
area; when clicking on it, it will lead you to the specified link.
6. Background Image
You can set the whole background of your web site to a certain image.
From "Properties" panel, press "Page Properties…"
From "Appearance (CSS)" category, you can browse the "Background Image"
You can also set the "Repeat" option.
-
No-repeat: means that the image is displayed in the
background only once.
6
-
Repeat: repeats the image along the web page
(horizontally and vertically)
-
Repeat-x: repeats the image along the web page
horizontally only.
7
-
Repeat-y: repeats the image along the web page vertically
only.
Hint: Use a small-sized image so that you can test the
"Repeat" option more obviously.
8