Pin Me

Dreamweaver Tutorial: Inserting and Editing a Horizontal Line

written by: Amanda Presley•edited by: Michele McDonough•updated: 11/2/2010

Adobe Dreamweaver is a web development software aimed at providing tools to create web pages and websites. In this tutorial I will show you how to insert and edit a horizontal line in Dreamweaver.

  • slide 1 of 1

    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.