How to Format H1 and H2 in Dreamweaver

Dreamweaver is arguably the greatest piece of software available to the amateur web designer. With its "what you see is what you get," or WYSIWYG interface, you can visually design websites without worrying about the background code, which Dreamweaver applies for you. "H1" and "H2" are HTML paragraph formatting codes, which are considered "headers" with the smaller numbers corresponding to larger sizes. You can also use CSS rules to easily format any text in "H1" or "H2" tags, so you do not have to manually apply the formatting each time you enter new header text.

Instructions

Formatting Text as H1 or H2

1. Open your HTML page in Adobe Dreamweaver, or create a new one.

2. Type the text you want formatted in H1 or H2 in the composition window at the position you want it to appear.

3. Click "Format" in the top menu, point to "Paragraph Format" and select "Heading 1" for "H1," or "Heading 2" for "H2." This formats the entire paragraph without needing to select the entire passage. If you check the HTML code, you will see the "H1" or "H2" formatting marks entered in the code.

Formatting H1 or H2 Using CSS

1. Click "Window" and select "CSS Styles" to open its panel.

2. Click the plus, "New CSS Rule" icon at the bottom of the "CSS Styles" panel to open the "New CSS Rules" window.

3. Click the drop-down menu under "Selector Type" and select "Tag (redefines an HTML element)."

4. Type "H1" or "H2" in the "Selector Name" field and click "OK."

5. Choose the formatting options you wish to apply to the "H1" or "H2" tags in the definitions window. Standard formatting options, such as font, font size, color and bold text, are available in the left-hand "Type" tab. Click "OK" to apply the formatting.

References

• Adobe: Use HTML Formatting