Adding a Border Around an Image


At times, you will need to set an image apart from the background or surrounding content to make it stand out. One way to create this effect is to place a border around the image. A border can draw attention to an image and it can be part of a stylistic look throughout a site. Sometimes, a border can also indicate a link. There are two ways to define a borderin this exercise, you'll use CSS to create the border but you'll also learn about the second method of applying the border attribute to the image tag.

1.

Select the studioPhoto rule from the All Rules list in the CSS Styles Panel and click the Edit Style button in the bottom of the panel.

Rules appear in the order that you created them, with the oldest at the top of the list and the newest at the bottom.

2.

In the CSS Rule Definition dialog box, select the Border category. Choose solid from the Style options, enter 1 into the top text field for the Width section, and choose #747E3F. Click OK to close the dialog box and apply the change.

Dreamweaver adds a one-pixel border around the image. The border setting uses pixel-based measurement, the default in the Rule Definition dialog box. You can set the width of the border to any number you want.

Note

You can also apply a border to an image using the border attribute of the <img> tag. To do so, select the image and enter a value for the desired thickness into the Border text field in the Property inspector. If you assign a link to an image, the border color will be the same as the default Link Color specified in Page Propertiesunless a CSS style is applied, in which case a link will not cause any change in the border color. The border color will be the same as the default text color that was specified in the Page Properties dialog box. The following example shows an image that has a border attribute applied through the Property inspector. Avoiding the border attribute in favor of using CSS to define image borders, as you have done in this exercise, is a better coding process.





Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net