• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Working with Text > Formatting Text with the Property Inspector

Formatting Text with the Property Inspector

When working in Design view in Dreamweaver, and when portions of text are selected, the Property inspector can be used to format and style it in a number of ways. New in Dreamweaver MX is the ability to apply CSS classes to your text using the Property inspector; this is covered in Chapter 13. Here, however, we will be looking at the non-CSS text-formatting capabilities in Dreamweaver.

The Dreamweaver MX Text Property inspector has two modes that can be toggled: HTML Mode and CSS Mode. The options available to you from the Property inspector depend upon which mode you’re working in. To apply HTML formatting, as we will be doing in the rest of this chapter, you want to be in HTML mode (see Figure 4.7).

Figure 4.7. The Toggle CSS/HTML Mode button.


Throughout this chapter, it is assumed that you are working in Dreamweaver Standard view, not in Layout view.


Remember that text in the Dreamweaver Document window must be selected to apply any formatting with the Property inspector (see Figure 4.8).

Figure 4.8. Text-formatting options of the Property inspector.

Paragraphs, Headings, and Preformatted Text

The drop-down list in the upper-left corner of the Property inspector enables you to style selected text as a paragraph, as any one of the six heading sizes, or as preformatted text. You’ve already read about paragraphs and headings earlier in this chapter; they are essential structural page elements.

The Preformatted Text option is used when the exact formatting of certain text must be preserved, including its spacing, returns, and tabs. Because HTML default behavior is to ignore this type of spacing, Preformatted Text is provided to enable you to retain them; the text won’t reflow when the browser is resized, as with ordinary HTML text. Two instances in which preformatted text might be used are when formatting poetry or source code on an HTML page. Browsers generally render preformatted text in a monospaced font such as Courier.

Choosing Fonts

The next option to the right on the Property inspector is an unlabelled drop-down list that enables you to choose a font face (or typeface) for your text.


You also can access most of the formatting options for selected text available in the Property inspector by pulling down the Text menu.

Choosing a font for your text is simple: Just select the text, and in the drop-down list, click your choice. However, some explanation of why Dreamweaver offers these lists of fonts is called for.

It’s important to understand how browsers work with regard to fonts. The crucial thing to remember is that the end user will see only fonts that he has installed on his local hard drive. If you specify a font that a particular user doesn’t have installed, your text will display in his browser’s default font, usually Times New Roman.

Because most web designers want to have as much control as possible over the font that displays on a web page they’ve created, the <font> tag’s face attribute is usually written so that it includes a list of fonts, beginning with the designer’s first choice, including several more choices, and finishing with a generic font category. This way, if the designer’s first choice isn’t available, hopefully the second or third choice is. If none of the specific font face choices are available on the user’s computer, at least some font from the generic font family will be used.

On Windows, the most commonly installed fonts are Times New Roman, Arial, Courier New, Verdana, Georgia, Trebuchet MS, and MS Comic Sans. On a Mac, the most commonly installed fonts are Times, Helvetica, Courier, Verdana, Georgia, Trebuchet MS, and MS Comic Sans.

The Dreamweaver Property inspector offers you the following font-face combinations:

  • Arial, Helvetica, sans serif

  • Times New Roman, Times, serif

  • Courier New, Courier, mono

  • Georgia, Times New Roman, Times, serif

  • Verdana, Arial, Helvetica, sans serif

Although this might seem at first glance to be a rather limited selection, these combinations have been chosen carefully to present a first choice for both Windows and Mac platforms and a generic font family. By using one of these combinations, you can be confident that your text will display in the font you’ve chosen, or at the very least, a similar font.


Verdana (sans serif) and Georgia (serif) are both good choices for body text on web sites. A type designer named Matthew Carter, who was hired by Microsoft to create two very readable screen-based families, developed them especially for screen reading.

Adding and Removing Fonts and Font Combinations

You can add or edit this list of font combinations. On the Property inspector, at the bottom of the drop-down list of font combinations, you’ll see the Edit Font List option. Click that to open the Edit Font List dialog box (see Figure 4.9).

Figure 4.9. The Edit Font List dialog box.

The Available Fonts listing shows the fonts installed on your computer’s hard drive; this is the list from which you can choose. To add a new combination, first be sure that Add Fonts in List Below is selected in the Font List at the top of the dialog box. You can then add a new font by selecting one from the Available Fonts list and then clicking the button with the double left-pointing arrows. Add as many as you want to your new combination. Always finish a font combination with a generic font family; these can be found at the very end of the Available Fonts list. When your combination list is complete, click the plus (+) button at the top of the dialog box; your new combination will now be available in the Property inspector. You can remove a font combination completely by selecting it and clicking the minus (-) button at the top of the dialog box.

Editing existing font combinations is easy; just select the font combination and use the double arrows to add or subtract fonts from the combination.

When you’re finished, click OK to close the Edit Font List dialog box.


Text must be selected to apply any <font> tag styles with the Property inspector. There is no way to set a default font face, size, and/or color for an entire site or even an entire page using this method. However, a pagewide or sitewide style can be easily specified with Cascading Style Sheets; this is one of the primary strengths of CSS.

Setting Font Sizes

To the right of the font face drop-down list is a drop-down menu of font sizes. You can use the Property inspector to specify relative sizes (which are preceded by a plus or minus sign) or absolute sizes (plain numbers) for your fonts. What’s the difference?

Relative font size values define the font size relative to the primary font size of a document. In most browsers, this default font size is 3. So, if you specify a font size of -1, the result will be the same as an absolute font size of 2.

Using absolute fonts enables you to override the font preferences selected in your user’s browser, giving you more control over the way your pages look. If you specify a font size of 5, for instance, the font appears in your user’s browser as size 5, regardless of the browser’s default font size. Be aware, however, that some newer browsers are allowing the user to override even absolute font settings. It is best to never base a page design on the assumption that your text will render in precisely the way you specify.

When working using the Property inspector to format text with the <font> tag, you might become frustrated at the limited number of available font sizes. If so, it is time to learn how to use CSS.


If you have trouble applying font faces, it could be that you have inadvertently doubled your <font> tags by applying them too many times. Use the Clean Up HTML command (default settings) from the Commands menu to remove extra tags.

Text Colors

Colored text can increase the visual impact of your web pages. For instance, you might want to put your body copy in a color that contrasts against your heads and subheads. You also might want to use other techniques—for example, make colorful headlines, subtle footnotes, or white text that pops out against a black background. Although it’s not always easy to make design choices about text color, Dreamweaver helps you to implement those choices after you make them.

In the Property inspector, click the text color box. From the color palette that pops up, you can select your text color.

In the Property inspector, click the text color box. This accesses the standard Dreamweaver color palette, from which you can select your text color. (See “Working with the Color Picker” in Chapter 2, “Setting Up the Dreamweaver Workspace,” for a discussion of how to use the color palette. If you want to learn more details about web color, see Chapter 8, “Design Issues.”)

Bold and Italic

You can use the Property inspector to style your type as bold or italic, using the buttons marked B and I (see Figure 4.7). This will add <b> and <i> tags to your formatted text:

<font face="Arial">This is your <b><i>chance</b></i>!</font>

When text formatted as bold or italic is selected, the corresponding button will appear pressed down; the button can be used to toggle bold or italic formatting on and off.

New in Dreamweaver MX is the option to set a preference (Edit > Preferences > General) that will make using the B button insert a pair of <strong> tags and the I button insert a pair of <em> tags. Because <strong> and <em> are structural tags—specifying the role of the text they are applied to—rather than presentational tags, which specify only the how the text should be presented, their use is preferred by many web developers.


The Property inspector offers four tools for aligning your text left, right, center, or fully justified (see Figure 4.8). The text-alignment tools are to the far right, on the top row, next to the question mark icon.

To align text to the right, left, or center, select it and then click the icon of the alignment type you want to use. To remove alignments, select the type again and click the button off.


When text is contained within a table cell, it can be aligned left, right, or center by setting the table cell alignment. Select the table cell using the tag selector (at the bottom of the Dreamweaver Document window) and from the drop-down Horizontal list, choose Left, Right, or Center.


Don’t confuse text alignment with image alignment. When an image is selected, the Property inspector will display a drop-down list of image alignment choices; these affect the placement of the image in relationship to the text around it. Text alignment works very much the way it does in a word processor, and affects only the text itself.

Making Lists

Numbered and bulleted lists have been around since the beginning of HTML.

The two icons on the Property inspector used to make lists are located below the bold and italic icons (see Figure 4.7). To create a list, click the list button (either bulleted or numbered) on the Property inspector, and then type your first list item. When you’ve finished typing the item, press Enter; the cursor will move to the next line, and a new list item will be created.

Another way to create a list is to type the list items one by one, separating them by pressing Enter at the end of each line. Then, select the whole list and click the desired list button on the Property inspector. Note that if your list items are separated with simple line breaks (using the <br> tag), the list function considers everything on your list to be one single item, and only one bullet point appears, adjacent to the topmost list item.

To make a nested list, or a list inside a list, separate the nested list items with hard returns, select them, and press the Indent button on the Property inspector.

To remove numbered or bulleted list formatting, select the list item or items and click the Bulleted List or Numbered List icon.

The List Item button, below the two list icons, can be clicked when the cursor is within an existing list, and enables you to edit a number of list-formatting options.

Indenting Text

Sometimes you want to indent text without adding bullets or list numbers. You can do so by using the Indent and Outdent icons on the Property inspector. See Figure 4.7.

Select the text you want to indent and click the Indent icon. This moves your text inward, indenting from both the left and right margins. You can click the icon again to move the text in even more. However, it’s important to remember that when using these indent icons you are actually inserting <blockquote> tags into your code, and when you click the icon several times, you’re inserting several pairs of tags. The <blockquote> tag pair is intended to display quoted blocks of text; using multiple nested pairs of these tags is not good HTML.

The best way to indent text is with CSS (covered in Chapter 13). The indent icons provide a workaround, which can suffice in a pinch.

To remove indents, select the text and click the Outdent icon. This moves the text back to the left side of your document.

Exercise 4.2 Formatting Text with the Property Inspector

This exercise is divided into two parts. In this first part, you learn how to mark up the document structure.

If you haven’t done so yet, copy the chapter_04 folder on the CD to your hard drive. Define a site called Chapter 4, with this folder as the local root folder.

Open the file nc_facts.html that you created in Exercise 4.1.

In the Dreamweaver Document window, place the cursor after the words North Carolina and press Enter.

Select the words North Carolina. In the Property inspector, from the Format drop-down list, click H1 to wrap this text in <h1> tags and make it a top-level heading (see Figure 4.10).

Figure 4.10. Formatting paragraphs and headings with the Property inspector.

Now place the cursor after the words Essential Facts and press Enter. Select Essential Facts, and in the Format drop-down list, click H3 to style this text as a subheading. (You’re skipping H2 and going straight to H3 for this next level of subheadings simply because H2 is usually rendered rather large in browsers.)

Place the cursor after the words per square mile and press Enter. Notice that Paragraph appears in the Format drop-down list; this block of text is now formatted as a simple paragraph.


In Dreamweaver MX, there is now a preference which will cause it to revert automatically to paragraph formatting after creating a heading and pressing Enter. This is usually more convenient than having the ensuing line made into a heading as well. To be sure this preference is chosen, go to Edit > Preferences > General and check Switch to Plain Paragraph After Heading.

Place the cursor after State Nickname and press Enter. Select State Nickname and use the Property inspector’s Format drop-down list to style it as another H3 heading.

Place the cursor after the words tar their heels and press Enter.

Select the words The Tar Heel State and from the menus, choose Text > Style > Strong.

With the cursor after State Motto, press Enter.

Select State Motto and again, in the Property inspector, choose H3.

With the cursor after the words rather than to seem, press Enter. Select the complete quotation—"To be, rather than to seem"—and in the Property inspector, on the right side, press the button with the right arrow to wrap this text with <blockquote> tags.

Place the cursor after Largest Cities and press Enter. Select Largest Cities and style it as another H3 heading.

One at a time, place the cursor after each of the numbers in the last paragraph and press Enter. Then, select all four city names and population count numbers. In the Property inspector, on the right side, click the button that shows bulleted text to format this as an unordered list.

Save your work, and if you want to, view the document in your favorite browser by pressing F12 (see Figure 4.11). This is very basic structural formatting; in the next part of this exercise, you try some more advanced text formatting using the Property inspector.

Figure 4.11. Fully formatted page from the first part of Exercise 4.2 as it appears in Internet Explorer.

In the second part of this exercise, you’ll add some presentational styling to the document using the Property inspector.

With the document from the first part of this exercise, nc_facts.html, still open, select the words North Carolina. In the Property inspector, from the Fonts drop-down list, choose the combination beginning with Courier New. Then click the color box and choose a nice Carolina blue, such as #3399FF, for this main heading.

Select all the text from just below North Carolina to the end of the document, and choose the font combination that begins with Verdana.

Select each of the H3 subheadings, one by one, and to each one do the following: Using the color palette, make them green (your choice of shades), and then make each italic by clicking the I button.

Select the paragraphs of body text under each heading, one by one, and from the Font Size drop-down list, choose 2.

Save your document and press F12 to view it in your default browser (see Figure 4.12).

Figure 4.12. Fully formatted page from the second part of Exercise 4.2 as it appears in Internet Explorer.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint