How to Add Borders in Dreamweaver Video Tutorial

by Hough on June 27, 2012


How to add borders in Dreamweaver Video Tutorial

Instructions for Adding Borders in Dreamweaver

The above video shows how to add borders to text. However the same method can be applied to images.

1. First create a new style by going to the CSS styles panel and select “New CSS Rule”.
CSS styles panel

2. Next create a class style. This is a class so don’t forget the period before the name. Click OK
New CSS Rule

3. In the CSS Rule definition dialogue box define your style by creating a border. Leave the “same for all option” selected if you want all sides of the border the same.
CSS Rule Definition Border

4. It is a good idea to add padding and a margin to your border. Padding appears inside a border and a margin on the outside. To do this click the Box category and select the thickness of the padding and margins. Click OK

5. Select/highlight the content you want the border to appear around. If there is more than one image you should press SHIFT and select the second image. Then select the “insert Div Tag” option from the insert panel. By selecting “Insert Div Tag” you can apply a div to the selected content. The div tag will wrap around that content. You can then apply a class style to that div.
Insert Div Tag

6. In the “Insert Div Tag” Dialogue box for the class option apply your class and for the Div ID option provide a unique name.
Insert Div Tag Dialogue Box

7. If you have any other images or text you wish to apply the Class style to simply highlight/select and go through the same process.

8. The Class Style should now be applied

Editing a Class Style
Now let’s say you wanted to edit and update your style. Just select the class style from the rules list then select the “Edit Rule” icon to edit your style.
CSS styles edit rule

From the CSS Rule definition dialogue box make the necessary changes and click OK

Leave a Comment

Previous post:

Next post: