How to Change Text Spacing in Dreamweaver
Dreamweaver, Adobe's professional Web editing program, gives you the power to create text effects ranging from subtle to absurd. Developers and site designers often use Cascading Style Sheets to alter the spacing between words and characters on Web pages. By learning to use the CSS editor built into Dreamweaver, you can adjust these space settings quickly and achieve a variety of unique looks for text on your website.
Other People Are Reading
Instructions
-
-
1
Launch Dreamweaver. Press "CTRL" and "N," and then double-click "HTML." A new HTML document appears in the design window. Type a short sentence on the Web page, and then highlight the text using your mouse.
-
2
Click the "Code" button to view the document's HTML code. Press "SHIFT" and "F11" to open the CSS Styles panel if it is not already visible. Right-click an empty area on the page to display a menu. Click "CSS Styles." Click "New" to open the "New CSS Rule" window. This window allows you to create new Style rules for your document.
-
-
3
Type "veryWide" -- without the quotes -- in the window's "Selector Name" text box. Click "OK." Dreamweaver displays the CSS Rule Defintion window. Click the "Block" option located in the "Category" section of the window. Type 2 in the "Word-spacing" text box and 2 in the Letter-spacing text box. Each text box has a drop-down box next to it. Click each drop-down box, and then click "em." This tell Dreamweaver that you wish to set the word and letter spacing for the CSS rule to 2 em units.
-
4
Click "OK" to close the CSS Rule Definition window and return to the Web page. Highlight the text you entered on the page, and then right-click the text. A menu opens. This menu contains "veryWide," the name of the CSS style you created.
-
5
Click "veryWide." Dreamweaver applies that style to your text. Since you chose large value for the word and letter spacing attributes, the text will stretch across the page with many spaces between letters and words.
-
1
Tips & Warnings
As you create new CSS style rules, they also appear in the menu whenever you right-click text you wish to style. Click any rule in that menu to apply that style to the text. For instance, you might create a rule named "veryNarrow" that decreases the spacing between characters and words.
Use any numbers you like when entering values for the Word-spacing and Letter-spacing. Adobe notes that you can apply negative values to the Word-spacing attribute. Some browsers, however, may ignore negative values.
You can also choose other unit values besides "em" from the drop-down boxes that appear next to the boxes where you enter your numerical values. Select "px," for instance, to use pixels as the styling unit.
References
Resources
- Photo Credit Comstock Images/Comstock/Getty Images
