2.4 Text Formatting

Dreamweaver supports the entire gamut of HTML page- and object-formatting elements. This section describes how to format paragraphs, fonts, and lists, plus how to create horizontal rules and set page properties. Chapter 10 discusses the augmentation of these elements with CSS properties. The HTML Styles panel, discussed in Chapter 11, can also be used to set text formatting properties.

2.4.1 Paragraph Formatting (Alignment and Styles)

Table 2-9 lists paragraph and text formatting options. These options also work on other objects, such as images, that are embedded within a paragraph. Many of these options can also be set via the Property inspector. See Table 2-11 for character formatting commands.

Table 2-9. Paragraph formatting and alignment options

HTML	Menu access	Windows	Macintosh
<blockquote>	Text Indent	Ctrl+Alt+]	Cmd+Opt+]
Removes <blockquote>	Text Outdent	Ctrl+Alt+[	Cmd+Opt+[
<div>	Text Paragraph Format None	Ctrl+0 (zero)	Cmd+0 (zero)
<p>	Text Paragraph Format Paragraph	Ctrl+Shift+P	Cmd+Shift+P
<h1> ... <h6>	Text Paragraph Format Heading 1. . . Heading 6	Ctrl+1. . . Ctrl+6	Cmd+1. . . Cmd+6
<pre>	Text Paragraph Format Preformatted Text	Alt-T, F, R	N/A
align="left"	Text Align Left	Ctrl+Alt+Shift+L	Cmd+Opt+Shift+L
align="center"	Text Align Center	Ctrl+Alt+Shift+C	Cmd+Opt+Shift+C
align="right"	Text Align Right	Ctrl+Alt+Shift+R	Cmd+Opt+Shift+R

Use Preformatted Text ( <pre> ) to display verbatim text, such as a programming code example, in Courier. Use tables instead of preformatted text to align tabular data.

2.4.2 Horizontal Rules

Horizontal rules (horizontal lines used as visual separators on your page) are inserted by using the Insert Horizontal Rule icon in the Objects panel's Common category, or by selecting Insert Horizontal Rule.

While a rule is selected, the Property inspector offers these formatting options:

Width (W)

Specifies the horizontal length of the rule in either pixels or as a percentage.

Height (H)

Specifies the vertical height ( thickness ) of the rule in pixels or as a percentage.

Alignment

Specifies the horizontal alignment of the rule across the page or within the left and right edges of an object containing the rule, such as in a table cell . Options are left, right, center, or default (which uses the browser's setting, usually left).

Shading

Specifies whether shading should be used to make the rule appear three-dimensional.

You can set the color of a horizontal rule by setting the color attribute in a CSS rule that customizes <hr> elements, as described in Chapter 10 (not supported in NN4).

You can simulate a vertical rule by placing a tall, thin graphic in a table column and placing other elements in columns to either side of it.

2.4.3 Date and Time

To insert today's date into your web page, use the Date icon in the Common category of the Objects panel (see Figure 1-4). In the Insert Date dialog box (not shown) you can choose from a variety of date formats. You can optionally include the time and day of the week. By default, Dreamweaver inserts today's date, but if you enable the Update Automatically on Save checkbox, Dreamweaver inserts code similar to the following:

 <!-- #BeginDate format:Am1 -->August 27, 2001<!-- #EndDate --> 

Dreamweaver updates the date automatically each time the file is saved. This feature conveniently alerts your visitors of the day that a page on your site was last updated. Use JavaScript, as shown in Chapter 15, to display today's date. To insert a date other than today's date, just enter the text by hand.

2.4.4 Font Formatting

Table 2-10 lists the default font selections, accessible under Text Font or from the Font list in the Property inspector. These fonts, or near equivalents, are available under most operating systems. If you select an option that specifies multiple fonts, such as "Verdana, Arial, Helvetica, Sans Serif," the visitor's web browser uses the first available font from the list. For example, the browser uses the Verdana font if it is available. If not, it falls back to Arial and then to Helvetica. If none of the chosen fonts are available, the default sans serif font will be used to display the indicated text.

New paragraphs will inherit the font formatting from previous paragraphs until a new font format is explicitly set.

Table 2-10. Default font options

Font	Comments
Default browser font	Typically Times New Roman or Arial
Arial, Helvetica, sans serif	Proportional, sans serif font
Times New Roman, Times, serif	Proportional, serif font
Courier New, Courier, mono	Mono- spaced , serif font
Georgia, Times New Roman, Times, serif	Proportional, serif font
Verdana, Arial Helvetica, sans serif	Proportional, sans serif font
Geneva, Arial Helvetica, sans serif	Proportional, sans serif font
Edit font list	Add more fonts to menu

There are two basic types of font styles: serif and sans serif. Characters in a serif font have serifs , the little "feet" and "hats" that help a reader distinguish similar letters . Sans serif fonts (literally "without serif") lack these embellishments. In print, sans serif font faces are typically used for headings and subheadings , whereas serif fonts are used for the body text.

Because serif fonts are harder to read on screen, you should use a sans serif font for your web pages' body text. Consider using serif fonts, which are more legible at larger point sizes, for headings.

Fonts that are available locally or from a web server can be added to the default font list using the Edit Font List dialog box, shown in Figure 2-16. Access this dialog box using Text Font Edit Font List or via the Edit Font List option from the Font drop-down list in the Property inspector.

Figure 2-16. The Edit Font List dialog box

The default fonts are grouped by font style. For example, Arial, Helvetica, and Verdana are sans serif fonts, whereas Times, Georgia, and Times New Roman are serif fonts. You can group your fonts by type, size, or any other criterion. You can attempt to download a font or exercise greater control over font substitution by incorporating the CSS @font-face rule in your document, as described in Chapter 10.

Table 2-11 shows how to apply standard HTML character-formatting tags and attributes in Dreamweaver. See Table 2-9 for paragraph formatting commands.

Table 2-11. HTML text styles

HTML	Menu	Windows	Macintosh
<b>	Text Style Bold	Ctrl+B	Cmd+B
<i>	Text Style Italic	Ctrl+I	Cmd+I
<u>	Text Style Underline	Alt-T, S, U	N/A
<s>	Text Style Strikethrough	Alt-T, S, S	N/A
<tt>	Text Style Teletype	Alt-T, S, T	N/A
<em>	Text Style Emphasis	Alt-T, S, E	N/A
<strong>	Text Style Strong	Alt-T, S, R	N/A
<code>	Text Style Code	Alt-T, S, C	N/A
<var>	Text Style Variable	Alt-T, S, V	N/A
<samp>	Text Style Sample	Alt-T, S, A	N/A
<kbd>	Text Style Keyboard	Alt-T, S, K	N/A
<cite>	Text Style Citation	Alt-T, S, O	N/A
<dfn>	Text Style Definition	Alt-T, S, D	N/A
No formatting	Text Paragraph Format None	Ctrl+0 (zero)	Cmd+0 (zero)

2.4.5 Text Size

Dreamweaver can control the relative or absolute font size used to display text (the default font size is typically 10 pt or 12 pt). You can specify absolute type sizes from 1 to 7 and relative sizes from +1 through +4 or -1 through -3. Normal text is equivalent to a 3, so a relative value of +1 indicates an absolute size of 4 and a relative value of -1 indicates an absolute size of 2. Table 2-12 provides a list of various HTML font sizes and their approximate point sizes when displayed in a browser.

Table 2-12. Text sizes based on standard 12-pt default font

Absolute size	Relative size	Point size	Percentage of default
1	-2	8 pt	60%
2	-1	10 pt	80%
3		12 pt	100%
4	+1	14 pt	120%
5	+2	16 pt	140%
6	+3	18 pt	160%
7	+4	20 pt	180%

2.4.6 Text Color

The text color pop-up palette, shown in Figure 2-17, lets you set the color of the selected text. To limit yourself to web-safe colors supported across all operating systems, select the Snap to Web Safe option from the palette options arrow menu.

Figure 2-17. Text color pop-up palette

There are several ways to adjust the color of a selected text object:

• Type in the hexadecimal value of the color in the Property inspector's Color field.

• Select the color from the text color pop-up palette, opened using the Text Color button in the Property inspector.

• Apply a color from the Colors category of the Assets panel (see Chapter 6).

• Select Text Color and choose the color in the Windows color selection pane (Figure 2-18) or the Macintosh color picker (Figure 2-19).

Figure 2-18. Windows color selection pane

Figure 2-19. Macintosh color picker

Use web-safe colorsto ensure consistent color display on all platforms. The web-safe palette is a set of 216 colors that are supported on both Macintosh and Windows. Color display on Unix and Linux is still somewhat erratic, but the web-safe palette is also the best choice for these operating systems. Web Design in a Nutshell (O'Reilly) contains an extensive discussion of the web color palette and color usage.

Use the web-safe palette when creating graphics in such programs as Fireworks or Photoshop to avoid dithering (splotchy or freckled patches of color) when they're displayed in a browser.

In the Windows color selection pane, you can select from 48 basic colors that are part of a web color palette (i.e., web-safe palette ). Additional colors, 1 of up to 16 million, can be selected from the graduated rainbow box to the right of the basic color selectors seen in Figure 2-18. When you select a color, the gradations of that hue are shown in the selection bar on the far right of the Windows color selection pane. Click the Add to Custom Colors button to define shades for easy access.

You can maintain sets of custom colors for each web site by adding them to the Assets panel (discussed in Chapter 6) as follows :

1. If using Windows, right-click on any text that uses the desired color. (Ctrl-click if using a Macintosh.)

2. Select Add to Color Favorites from the contextual menu that appears.

3. The color will be available from the Colors category of the Assets panel.

2.4.7 List Styles

Dreamweaver can create numbered, bulleted, and definition-style lists. The following list-formatting options are accessed from the Text List submenu:

None

Reverts text that was previously formatted as a list back to plain body text.

Ordered List

Creates a numbered list.

Unordered List

Creates a bulleted list.

Definition List

Creates a definition-style list from alternating items in a text block. For example, Item 1 is treated as a " term "; Item 2 is indented and acts as Item 1's "definition," etc.

You can also format the selected text as a list using the Ordered List and Unordered List buttons in the Property inspector (see Figure 1-5). You can remove list formatting by selecting the text and untoggling the appropriate button. You can also select a list type (using the buttons or menu options) prior to entering your text; the text will be formatted automatically as you type.

You can control the appearance of your list bullets or numbers using the List Properties dialog box, shown in Figure 2-20. It is accessible via the Text List Properties menu option, which is active only when the cursor or selection occupies a single line in an ordered or unordered list (it is not applicable to definition lists).

Figure 2-20. The List Properties dialog box

The List Properties dialog box includes the options shown in Table 2-13.

Table 2-13. List Properties options

Control	Description
List Type	Selects a numbered, bulleted, directory, or menu list. The last two list types are deprecated and should be avoided. (Directory lists were glossary-style lists and menu lists were one-level bulleted lists.)
Style	Select Roman, Arabic, or alphabetic (I, i, 1, A, or a) ordinals for numbered lists. Select round bullets or hollow squares for bulleted lists. Setting applies to all entries in the list (both preceding and following the selected item).
New Style	Specifies the number style or bullet style for the currently selected items and subsequent items whose New Style option is set to Default. It does not affect items preceding the selected item.
Start Count	An integer specifying the starting value for the first ordinal in a numbered list. Use an integer even if the Style setting is not Arabic. For example, the number 3 is shown as III or iii in Roman lists and is shown as C or c in alphabetic lists.
Reset Count To	Reset the item numbers in a numbered list, beginning with the selected item. It does not affect the numbering of preceding items.

Creating a list using multiple styles of numbers can be tricky. Section 2.4.7.1 creates a list that uses traditional outline nomenclature Roman numerals (I, II, III) for the top level and capital letters (A, B, C) for the major subheadings.

2.4.7.1 Procedure 1

1. Enter the text for the list, without formatting, in the Design pane of the Document window. Select the text for the list, and use Text List Ordered List to convert it to an ordered (i.e., numbered) list.

2. Select the first item in the list (the entry to be designated I). Choose Text List Properties .

3. In the List Properties dialog box, set the Style to Roman Large. The List Type should already be set to Numbered List and the Start Count should default to 1 if left blank. Click OK.

4. Select the second item in the list (the entry to be designated A). Use Text Indent, Ctrl+Alt+] (Windows), or Cmd+Opt+] (Macintosh) to indent the item. The numeral should default to 1.

5. Choose Text List Properties while this item is still selected.

6. In the List Properties dialog box, set the Style to Alphabet Large. The List Type should already be set to Numbered List and the Start Count should default to 1 if left blank. Click OK.

7. Use the Text Indent option to indent subsequent elements (B, C, D, etc.).

8. To create a third tier to the outline (such as i, ii, iii), indent the text items twice and then repeat Step 6 using the Roman Small style.

9. Repeat Steps 4 through 8 for items to be indented under Roman numerals II, III, IV, and so on.

You must go through your list line by line, formatting the numbers for each item in sequence. If you skip a line and corrupt the numbering scheme, you must start over or correct the HTML code by hand.