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
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:
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).
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 -->
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
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.
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
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
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:
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.
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 :
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:
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
Creating a list using multiple styles of numbers can be tricky. Section 22.214.171.124 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.
126.96.36.199 Procedure 1
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.