How to Insert & Edit a Horizontal Line in Dreamweaver

In Dreamweaver there is a html line called a Horizontal Rule. The Horizontal Rule or Line is often used for a divider or dividers in the page. You can edit the Horizontal Line by editing the tag. This tutorial will show you how to insert a horizontal line and show you how to edit the horizontal line.

Inserting a Horizontal Line in Adobe Dreamweaver

Let’s start out by inserting the horizontal line. Create a new document to work on for this tutorial and save it. Click Insert > HTML > Horizontal Rule at the top of Dreamweaver. The horizontal rule will be inserted into your document. If you want the horizontal rule inserted into a particular place, you will need to place your mouse on that spot before inserting it. You can drag the line to where you want it too. Click the line with your mouse and drag it to where you want it on your document.

Editing the Horizontal Line in Dreamweaver

Now, let’s take a look at editing the horizontal line. Let’s start off with the simple editing. Click the horizontal rule and you will see the properties in the bottom panel. You will see the height and width field. Let’s change the width of the line to make it shorter. Enter 200 in the width field. See how short your line is now. You can change the width by changing the size. You can also change the height of the line. Enter 3 in the height field and notice the change. Enter 10 in the height field and notice the change.

Now we will do more editing to the horizontal line. Right click on the horizontal line and click Edit Tag in the menu that drops down. On the right side of the box, click the General link. On the left side, you can drop the box down and select the alignment. You can also change the height and width here.

Click the Browser Specific link in the left side of the box. On the right side, you will see where you can change the color of the horizontal rule. Drop the color box down and click the color that you want to use. The color horizontal line only works in Internet Explorer. In other browsers, the line will be gray. You can click OK now to close the box.

That’s how you insert and edit a horizontal line in Adobe Dreamweaver. You can use these lines to separate paragraphs, images, or wherever you find you need a line in your web development.

This post is part of the series: Dreamweaver Tutorials

This collection of articles is aimed at providing education about the software program Dreamweaver.
  1. Beginner’s Guide to Creating and Saving an HTML Document in Dreamweaver
  2. Dreamweaver Tutorial: Tips for Link Management
  3. Creating a New CSS Text Style in Dreamweaver
  4. Creating a Jump Menu in Dreamweaver
  5. Create a Photo Album for Your Website in Dreamweaver
  6. Dreamweaver Tutorial: Mapping and Linking Images
  7. Use CSS Styles to Create Solid Color Rollover Buttons in Dreamweaver
  8. Incorporating Flash Buttons Into Your Dreamweaver Designs
  9. Creating a Rollover Button in Dreamweaver Without Using CSS
  10. Dreamweaver Tutorial: Creating and Inserting Flash Text into Your Document
  11. Dreamweaver Tutorial: Inserting and Editing a Horizontal Line
  12. How to Modify Your Page Properties in Dreamweaver
  13. Adding Guestbook to Your Site Using Dreamweaver
  14. Applying Pop Up Messages to Links In Dreamweaver
  15. A Guide to Understanding the Properties Panel in Dreamweaver
  16. Create a Tab Menu in Dreamweaver
  17. Creating a List Menu in Dreamweaver
  18. How to Create HTML Email with Dreamweaver