This Dreamweaver tutorial will show you how to format text in a variety of ways using the Text sub-menu and the Property Inspector.
In previous Dreamweaver tutorials you learned how to Create a Web Page, to Add Paragraphs and Headings, and to Align Paragraphs and Headings. Once it is placed on your Web page, you can format the text in many ways. You can change the font style, font size, font typeface, text color, and the alignment of the text. You can also indent or outdent paragraphs of text to make it stand out from the rest of the page.
You can apply individual formatting to any text on your page. It could be a character, a word, a sentence, or a paragraph. Dreamweaver provides an HTML Style menu item to facilitate formatting text.
Bold and Italic are the two most common types of styles. The Strong style has the same effect as Bold and Emphasis has the same effect as Italic. By default, Dreamweaver uses the <strong> and <emphasis> tags when you format text to be Bold or Italic. Like a word processor, there are other styles available such as Teletype, Underline, Strikethrough, and the others shown below.
|This is an example of normal text.
This is an example of a Bold style using the <strong> tag.
This is an example of the Italic style using the <emphasis> tag.
This is an example of the Teletype style using the <tt> tag.
This is an example of the Underline style using the <u>tag.
This is an example of the Variable style using the <var> tag.
This is an example of the Sample style using the <samp> tag.
This is an example of the Keyboard style using the <kbd> tag.
This is an example of the Citation style using the <cite> tag.
This is an example of the Definition style using the <dfn> tag.
Highlight the text to be formatted on the web page. Right-click the highlighted text or click on the Text menu and then click Style. From the Style sub-menu select the style type you want to apply to the selected text. Dreamweaver applies the style to the text.
You can combine styles to create more complicated effects. For example, you can apply Bold and Italic to get Bold Italic.
You can also select the Text menu from the Insert Menu options. The Text menu will appear with several options for formatting text.
Note: The most commonly used styles, the Bold and Italic style have shortcuts on the Property Inspector and the Text sub-menu.
In the Property Inspector, click on B for Bold text or I for Italic text.
With the text selected, click on a font family from the Font drop-down menu in the Property Inspector. Dreamweaver applies the font family to the selected text.
You can also right-click the highlighted text and choose Font from the menu, then select a font family to apply to the text.
he <font> tag has been deprecated in the HTML standards. Most browsers still accept the <font> tag and render it properly, but it is better to use CSS styles to set font size. If your Dreamweaver preferences are set to use CSS instead of HTML, then you must use CSS to change the font size. The fonts sizes will be not be available if you've selected CSS in your Dreamweaver preferences.
Using the Property Inspector, you can set a relative font size by choosing x-small, medium, large and so on. Small is normal. You can set a specific size measured in pixels by selecting the pixel size from the Size drop-down list or by typing a value in the Size box in the Property Inspector. To specify the size using something other than pixels, such as points or picas, select the measurement from the second drop-down list.
To make selected text bold or italic, click the Bold or Italic button in the Properties Inspector. To underline selected text, choose Text, Style, Underline from the menu bar. Think twice about using the Underline style on your web page. Most web site visitors expect underlined text to be hyperlinks. You may confuse them if they yours are not.
You can change the color for part of the text on your Web page such as characters, words, or paragraphs. Dreamweaver provides an easy to use palette of Web-safe colors that you can apply to selected text. Web-safe colors are those that display accurately in any browser on any platform and monitor setting the viewer uses.
You can choose the color of your text by clicking on a color chip from the color palette or you can enter the color's hexadecimal code.
View a related Dreamweaver tutorial:
Creating a Web Site
Using HTML Tables
Web Site Management
Cascading Style Sheets