One of my visitors, after reading the article on creating hanging indents using CSS wanted to know how she could perform the procedure in Dreamweaver. She wasn't familiar with CSS and wanted a step-by-step guide for achieving the same effect using this web editor. This article shows how it is done.
You will (of course) need Dreamweaver for this tutorial. Note that I've only tried out the procedure below using Dreamweaver CS4. It's possible, however, that the procedure for other versions of Dreamweaver is similar, if not identical, so give it a shot if you have a different version.
I will assume here that you already know how to create a web page using Dreamweaver. That is, I will not go through the basics here. If you are new to the editor, please see one of the following tutorials first (depending on which version of Dreamweaver you have):
For the newcomer to website design, I recommend that you read How to Start / Make a Website: The Beginner's A-Z Guide as well.
To make sure we're talking about the same thing when I say "hanging indent", let me show you an example:
Heng, Christopher. "How to Create a Hanging Indent Using Dreamweaver". thesitewizard.com. Christopher Heng. 16 July 2009. Web. 16 July 2009.
As you can see, the first line of the paragraph hangs out to the left while the rest of it is indented. Such formatting is often used in things like bibliographies.
Start up Dreamweaver and load the page where you want to create a hanging indent.
Put your cursor at the start of the paragraph that you want to indent.
Click "Format | CSS Styles | New...". That is, click the "Format" on the main menu at the top of the Dreamweaver window, followed by the "CSS Styles" item on the menu that appears. A sub-menu will appear. Click on the "New..." item on that menu.
Note that I shall use this same convention in the rest of this article to refer to the sequence of clicking various menu items. For example, "File | Save" means click the "File" menu followed by the "Save" line on the menu that appears.
A dialog box should appear. Make sure that the "Selector Type" field states "Class (can apply to any HTML element)". If not, click the drop down arrow in that field and select that option.
In the field "Selector Name", enter "hangingindent" (without the quotes). Do not put any spaces in "hangingindent" or change the capitalization (case). Click the "OK" button.
A dialog box called "CSS Rule definition for .hangingindent" will appear. In the left hand "Category" list box, click the "Box" item.
Look for the "Padding" section in the right hand side of the dialog box. Directly under the "Padding" section title is a check box for "Same for all". There should be a tick in this box. Uncheck it.
The fields for "Top", "Right", "Bottom" and "Left" should now be enabled. It was greyed out (or "grayed out" if you use a different variant of English) before.
Click the field for "Left" to put your text cursor into the empty box, and type "22" (without the quotes). This number indicates the number of pixels your paragraph is to be indented by. Note that the number does not really have to be 22. It can be any other number you want. For example, if you want your paragraph to be indented even deeper, put a bigger number here. If you want a shallower indentation, enter a smaller number. For now, since it's probably difficult for you to guess what the best number for your page is, just put 22. I will show you how to change that number later.
Next, click the "Block" line in the "Category" list box. (The "Category" list box, if you will remember, is the leftmost column of the dialog box.)
The contents of the right side of the dialog box should change again. Click the field beside "Text-indent". Enter "-22" (without the quotes). Note that this is the hyphen or minus character, "-", followed by whatever number you used earlier for the left padding field in the previous step. For example, if you previously enter "25" for the "Left" field, you should now enter "-25" in the "Text-indent" field.
Select "pixels" from the drop down box next to the field where you just entered "22" (or whatever number you used).
Click the "OK" button.
Click somewhere in the paragraph that you want to indent to move your cursor back to the relevant paragraph. (If your Dreamweaver behaves anything like mine, it has probably moved your cursor somewhere else after you clicked the OK button above.)
Look at the bottom of your Dreamweaver window to locate the "PROPERTIES" panel. Make sure that "HTML" in the leftmost column of the PROPERTIES panel is selected. (Click the word "HTML" if you're not sure.) The "Format" field should read "Paragraph". Next to that is the "Class" field. Click the drop down arrow beside the class field to reveal a pop-up list box. Select "hangingindent" (which you created above) from that list.
Your paragraph should now be shown with a hanging indent.
If the indentation is not to your liking, for example, because it isn't deep enough or it is too much, click the "Modify | CSS Styles". Notice that on the rightmost column of your Dreamweaver window, the "CSS STYLES" panel is expanded (if it was previously collapsed). If it is still collapsed, click "Modify | CSS Styles" again.
Notice that there are 2 lines in that panel: "text-indent: -22px" and "padding-left: 22px". The number may be something
other than "22" if you have entered a different number earlier. Double-click either of
these lines (it doesn't matter which). You'll be returned to the same dialog box you met earlier where you can adjust the numbers you previously entered.
Remember to click the OK button when you're done.
Should you wish to apply the hanging indent style to any other paragraphs on the same web page, simply click somewhere in that paragraph to put your text cursor there and select the "hangingindent" style from the "Class" drop down box in the PROPERTIES panel like you did earlier.
For the technically inclined: if you know CSS and are interested to know how and why the above method works, see How to Create Hanging Indents in HTML and CSS for the explanation. Note: you do not have to read that article if all you want is to create the hanging indent. It's only for people who want to understand the code generated.
When you're done with your changes, save your page and publish it to your site.
Copyright © 2009-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create a Hanging Indent Using Dreamweaver
