Dreamweaver - CS3

Lesson 12: Images (4)

12/58 Lessons 

Background Image

To use an image as background for your page, click the “Page Properties” in the properties window.

This opens the “Page Properties” dialog.
Click the “Browse” button to navigate to the image on your computer.
Select it and click the “OK” button.
In the pop-up window that appears, it will ask you if you want to copy this image to the sitemap. Select “Yes”.
Select the folder where you want to save this image, in this case the “images” folder and click “Save”.

Click the downward pointing arrow next to the “Repeat” box.
This opens a drop-down menu with four options.
The first option “No repeat” will display your image only once on your page.
The second option is “Repeat” will repeat your image both on the x-axis and the y-axis.
The third option “Repeat-x” will only repeat this image on the x-axis, that is only horizontally.
And the last option “Repeat-y” will only repeat this image on the y-axis, that is only vertically.

In this example I choose the “repeat-y” option and click the OK button.
The picture is added as a background image on your page.
Result:

You can do this with any image, but do not push, the visitors should still be able to read what’s on the page.

 

Image Cropping

If you want to “crop” an image that you have inserted into your page, first select the image and click the “Crop” button in the properties window.
This opens a window with a warning that this change is permanent.
You have the possibility to undo the crop by clicking on the “Edit” button in the menu bar and selecting “undo crop”.

By clicking and dragging the blocks on the edge of the selected portion of the cutout, you can change the size of that.

Place your mouse pointer on the selected part of the cutout, when it changes into a four-arrow, you can move it by clicking and dragging.
If you are satisfied, click the Enter key on your keyboard and your image is cropped.
If you do not want to crop the image, click the Esc-key on your keyboard.

With the remaining buttons under the “Edit” section in the properties window, you can adjust the picture even more. For example, there are the buttons to “Optimize”, “Sharpen” and adjust “Brightness & Contrast”. But all these seem obvious to me.

Awesome!
You've completed Lesson 12
START NEXT LESSON