Computer Skills

0761111

Adobe Dreamweaver CC Tutorial

Part 4

Prepared by: Eman Alnaji

Chapter Four: Working with Images

1. Adding Imagesa. 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 ImageSometimes 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 ImageYou 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 ImagesSometimes 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 imageSometimes 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