Chapter 4: Adding Text To Your Pages

<<< Back to Page 1

Applying Character Formats

Character formatting is styling that you can apply to words and individual characters, rather than to blocks such as paragraphs. This formatting includes changing the font, font size, and font color.

Beginning with Dreamweaver MX 2004, and continuing through Dreamweaver 8 to Dreamweaver CS3, the program dispensed with the old method of applying these sorts of character formatting (which was to use the HTML <font> tag), in favor of using CSS styles. This change happened mostly behind the scenes in Code view, so if you have been using Dreamweaver for quite some time, you may not have even noticed the change.

The reason for this change is important. Pages styled with CSS are much more flexible than pages that use HTML <font> tags, and they can be maintained more easily. For example, when a site is redesigned, every page that uses <font> tags must be individually changed to match the new design. If you have hundreds or thousands of pages in your site, that's a lot of work. Sites that use CSS to style text only need to change the stylesheet document, and the changes automatically ripple through the whole site. You'll learn more about using CSS to style text in Chapter 5.

Changing Fonts and Font Sizes

In Dreamweaver, you have the ability to set the typeface, or font, for any text on your page. But not all computers or Web browsers use the same fonts. If you specify a font that your site visitor doesn't have on his or her computer, chances are the content won't look the way you intend. Because neither you nor Dreamweaver can be sure what fonts will be available to your site visitors, Dreamweaver uses font combinations (also called font groups) to work around the problem. Font combinations allow you to provide options for the browser by creating multiple font choices. For example, a font combination could include Arial, Helvetica, and Geneva fonts, and the Web browser would render the page using the first choice available to the browser. If none of the fonts in the combination are installed, the browser will display the text using whatever font is set as the default in the browser's preferences. Dreamweaver comes with six predetermined font combinations, and you can add more as you need them. Each choice in the Font pop-up menu in the Property Inspector represents the first font in that font combination (Figure 4.14).

Although Dreamweaver is reminiscent of a word processor, it's really not one, and it has the font-handling characteristics of HTML and CSS. Dreamweaver allows users to apply several font sizes from the Font Size pop-up menu in the Property Inspector, which it implements as CSS styles (Figure 4.15). You also have the option to choose the units of measurement used for font sizes (Figure 4.16).

To set a font:

1. Select the text you want to modify.

2. Choose a different font combination from the Font pop-up menu in the Property Inspector, or choose Text > Font, and then choose the font combination from the submenu.

   The text changes appearance.

   TIP

   • Dreamweaver's preset font combinations include fonts that are found on nearly every computer sold in the last several years. Most of these fonts are available for both Windows and Macintosh. For example, Arial, Courier, Georgia, Helvetica, Times New Roman, Verdana, and Trebuchet are all fonts that come standard on both platforms.

To set font size:

1. Select the text you want to modify.
2. Choose a different size from the Font Size pop-up menu in the Property Inspector.

3. Choose the unit of measurement you want from the units pop-up menu, next to the Font Size pop-up menu.

   The text changes appearance.

   TIP

   • The sizes listed in the Font Size pop-up menu in the Property Inspector that are not numbers (e.g., x-small, medium, xx-large) are relative sizes, meaning they set a font size to be larger or smaller relative to the default font size.

Making Your Own Font Lists

You can modify the preset font combinations, and you can also create new font combinations.

To edit the Font List:

1. Choose Text > Font > Edit Font List.

   The Edit Font List dialog appears (Figure 4.17).

   

   Figure 4.17 The Edit Font List dialog lets you define new font combinations.

2. To add a font combination, click the plus button, then click the arrow buttons next to the Available fonts list and select fonts to move them to the Chosen fonts list.

   or

   Select a font combination in the Font list, and click the minus button to remove it.

   or

   Use the arrow buttons above the Font list to move a selected font combination up or down in the list.

3. Click OK to save your changes.

   TIPs

   • You can type the name of a font not on your system in the field below the Available fonts list, then click the left-facing arrow button to add that font to the Chosen fonts list. You might choose to add a font when you want to use one you know is available on the systems of users who will be visiting your site. For example, if your site will attract many Mac OS X visitors, you can use some of the OS X system fonts, such as Lucida Grande, that are common on the Mac but not on Windows.
   • If you add specialized fonts to your own font lists, you must remember that most users on the Internet may not have access to those fonts. If you're designing a site for a specific client base, such as a corporate intranet, and you know all of the machines that will be viewing the site will have your specialized fonts available, then go for it.

Changing Font Color

You can select text and change its color, which applies a CSS style to the text. You'll use the color well in the Property Inspector and the color picker to do the job.

To color text:

1. Select the text you want to color.
2. Click the color well in the Property Inspector (Figure 4.18).
   

   Figure 4.18 Click the color well in the Property Inspector to set the font color.

   The color picker appears (Figure 4.19).
   

   Figure 4.19 Use the eyedropper on the color picker to choose your new text color.

3. Click a color with the eyedropper to select it; it can be any color in the color picker or any color visible on your desktop or the page you are editing.

   When you select the color, the color picker closes and the text changes color.

Applying Text Styles

The most common text formatting is to make text bold or italicized, and of course Dreamweaver can do that. But it can also apply several other text styles, some of which are for specialized uses, as shown in Figure 4.20 and Table 4.1.

Table 4.1. Text Styles

Style	Description
Bold	Makes text boldface.
Italic	Italicizes text.
Underline	Underlines text.
Strikethrough	Text is shown with a line through it.
Teletype	Reminiscent of an old typewriter. Usually shows text in a monospaced font such as Courier.
Emphasis	Italicizes text on screen. Causes screen readers to stress importance in speech.
Strong	Bolds text on screen. Causes screen readers to add additional importance to speech.
Code	Depicts programming code, usually in a monospaced font.
Variable	Marks variables in programming code. Usually displayed as italics.
Sample	Meant to display sample output from a computer program or script. Usually displayed in a monospaced font.
Keyboard	Meant to depict text a user would type on the keyboard. Usually displayed in a monospaced font.
Citation	Used to mark citations and references. Usually displayed as italics.
Definition	Used to mark the first, defining usage of a term in a document. Usually displayed as italics (Safari on the Mac displays this as regular text).
Deleted	Marks deleted text. Shown the same as strikethrough.
Inserted	Marks inserted text. Shown the same as underlined.

Many of these text styles are meant for displaying programming or script code, so they won't be used at all on many sites. Others, such as Underline and Strikethrough, are deprecated in the HTML 4.01 standard, which means that they are obsolete and may not work in future browsers.

To apply a text style:

1. Select the text you want to change.

2. Choose Text > Style, then choose the style you want from the submenu.

   The text's appearance changes.

   TIP

   • Actually, by default Dreamweaver does not use the traditional <b> and <i> HTML tags for bold and italic, respectively. Instead it uses <strong> and <em> (for emphasis). The latter tags are preferred as part of best practices, because they are better handled by screen readers used by visually impaired users. If you want to switch Dreamweaver back to using <b> and <i>, choose Edit > Preferences (Dreamweaver > Preferences), and in the General category of the Preferences dialog, deselect "Use <strong> and <em> in place of <b> and <i>."

Using Preformatted Text

Browsers usually ignore invisible formatting that doesn't affect page content, such as tabs, extra spaces, extra line feeds, and the like. If you need to display text exactly as entered, however, you can use the Preformatted paragraph format, which wraps the text in the <pre>...</pre> tags and makes browsers display all of the text characters.

Originally, preformatted text was meant to display tabular data in rows and columns, such as the output of a spreadsheet. In order to make the information line up, browsers display preformatted text in a monospaced font such as Courier (Figure 4.21).

To apply preformatting:

1. Select the text you want to change.

2. From the Format pop-up menu of the Property Inspector, choose Preformatted.

   or

   In the Text tab of the Insert Bar, click the Preformatted Text button (Figure 4.22).

   

   Figure 4.22 Apply the style with the Preformatted Text button.

   or

   Choose Text > Paragraph Format > Preformatted text.

   The text changes appearance.

   TIP

   • If you want to display tabular data, it often makes more sense to use a table, rather than preformatted text. You get much more control over the table style and spacing of the items in the table, and you can add CSS to style the table's contents if needed. See Chapter 10 for information about using tables.

Adding Line Breaks

Just as in a word processor, you press Enter (Return) in Dreamweaver to create a new paragraph. This is fine when you want to actually create a new paragraph, but not so great when you just want to move the cursor down a line, as you might want to do when entering an address. That's because Web browsers (and Dreamweaver) insert a blank line above and below a paragraph, so if you make each line of the address its own paragraph, it looks goofy (Figure 4.23).

What you want to do is add a line break, which moves the cursor down one line without creating a new paragraph. In the code, Dreamweaver adds the HTML <br /> tag to the end of the line.

To insert a line break:

• At the end of the line you want to break, press Shift-Enter (Shift-Return).

  or

  At the end of line you want to break, in the Text tab of the Insert Bar, select Line Break from the Special Characters pop-up menu.

  The text changes (Figure 4.24).

  

  Figure 4.24 After you replace the paragraph tags with line breaks, the address looks better.

  TIP

  • Line breaks are invisible characters in both Dreamweaver and Web browsers, but you can make them visible in Dreamweaver if you want. Choose Edit > Preferences (Dreamweaver > Preferences), then click the Invisible Elements category. Click the check box next to "Line breaks," then click OK. Dreamweaver then displays line breaks in Design view (Figure 4.25).
    

    Figure 4.25 With the appropriate preference enabled, you can see the invisible line break characters.

Indenting Text

You won't indent text in Dreamweaver as you would with a word processor. The most common kind of indenting, indenting the first line in a paragraph, is usually done with a tab in a word processor, but tabs have no effect in HTML. Instead, you can use the text-indent CSS style rule. See Chapter 5 for more about using CSS.

You can add whitespace to text—and simulate a tab—with non-breaking spaces. See "Inserting Special Characters," later in this chapter.

When you are indenting paragraphs to set them apart from preceding and following paragraphs, Dreamweaver uses the HTML <blockquote> tag. This indents both the left and right margins of the block quoted paragraph. You aren't limited to paragraphs; you can block quote any block element, such as headings.

To block quote text:

1. Click in the paragraph or other block element you want to indent.

2. Click the Indent button on the Property Inspector (Figure 4.26).

   

   Figure 4.26 Use the Indent button to apply a block quote to your text.

   or

   In the Text tab of the Insert Bar, click the Block Quote button.

   or

   Choose Text > Indent or press Ctrl-Alt-] (Cmd-Opt-]).

   The text changes (Figure 4.27).

   

   Figure 4.27 The block quote nicely sets off the sonnet from the commentary text.

   TIPs

   • To add more indenting, click the Indent button on the Property Inspector again. This nests the <blockquote> tags.
   • The CSS margin style rule is a much more flexible way to indent block elements. See Chapter 5.

To remove block quoting:

1. Click in the paragraph or other block element you want to indent.

2. Click the Outdent button on the Property Inspector.

   or

   Choose Text > Outdent or press Ctrl-Alt-[ (Cmd-Opt-[).

   The text changes.

Aligning Text

Dreamweaver can align text with the left margin, right margin, or center of the page. You can also justify text, which adds space as needed between words so that both the left and right margins are aligned.

To align text:

1. Click inside the paragraph you want to align.
2. Click one of the alignment buttons in the Property Inspector (Figure 4.28).
   

   Figure 4.28 The text alignment buttons in the Property Inspector.

   After you click the button, it appears highlighted, so you know which alignment has been selected.

   or

   Choose Text > Align > Left, Center, Right, or Justify.

   or

   Use one of the keyboard shortcuts listed in Table 4.2.

   Table 4.2. Alignment Shortcut Keys

   Shortcut Key (Windows)	Shortcut Key (Mac)	What It Does
   CTRL-ALT-SHIFT-L	CMD-OPT-SHIFT-L	Left alignment
   CTRL-ALT-SHIFT-C	CMD-OPT-SHIFT-C	Center alignment
   CTRL-ALT-SHIFT-R	CMD-OPT-SHIFT-R	Right alignment
   CTRL-ALT-SHIFT-J	CMD-OPT-SHIFT-J	Full justification

   TIP

   • You can also use Cascading Style Sheets to align text. See Chapters 5 and 6.

Continued on Page 3 >>>