How to Change an Image Border Color in Dreamweaver

Change the image border with CSS style.

Dreamweaver can implement complete stylized Web pages. Learn how to change the image border using Dreamweaver, with little knowledge about HTML coding.

Things You'll Need

• Dreamweaver MX 2004

Instructions

1. 

   Create a new page using a Dreamweaver template under Page Designs (CSS). Save the template in a folder. CSS is an acronym for cascading style sheet, which is used to modify the look and presentation of a document in XML, or Extensible Markup Language. XML is used for viewing, parsing, displaying and transforming data on the Internet. Dreamweaver will accomplish this for you without any specialized knowledge.

2. 

   Saving the page, select the image and look at the image properties. The Properties panel in Dreamweaver will give an option to set the border. Set the border to 10. A black border will appear. Choose "Window" in the menu panel, and in the drop-down box select "CSS Styles." A box will open that lists the CSS styles used in your document.

3. 

   Select the image and adjust the properties of the style in the CSS panel. Choose the option to go to the code, and the CSS code will open separately. Choose the option by right-clicking or holding down the mouse.

4. 

   Modify the image tag in the CSS panel. Scroll to the image and choose the color desired. For this example, I chose red.

5. 

   Change the black border to any color on the pallet using the CSS style panel. Select the image to bring the image properties to the panel.

Tips & Warnings

• To learn more about CSS Styles and how it changes your HTML document, experiment with the CSS panel in Dreamweaver and note how it changes the look of your page.

• Save all files in the correct directory. Be sure to include the CSS file when uploading.

Resources

• Experiment with CSS at the CSS Zen Garden.