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

Chapter 4. Working with Text > Text Formatting with the Dreamweaver HTML Styles...

Text Formatting with the Dreamweaver HTML Styles Feature

If you are working with a large amount of text, it pays to explore options for automating the process.

The following section takes you through the ins and outs of a non-CSS, Dreamweaver-specific way to add automation to your text formatting: HTML Styles.

The Dreamweaver HTML Styles feature works in this way: A user-determined set of specific HTML tags is saved within Dreamweaver and then can be applied to selected text using the HTML Styles panel. This method enables you to quickly re-apply a set of HTML tags anywhere in your site.

It’s important to understand, however, that HTML Styles uses no CSS whatsoever, but uses presentational HTML formatting, usually based heavily on the <font> tag. As discussed earlier, this type of formatting is not ideal; and in fact, in the HTML 4.0 specification released by the W3C in early 1998, the use of HTML formatting tags is deprecated. However, because it is available to you in Dreamweaver, it is explained here.

In some ways, this feature mimics CSS. However, it is important to be aware of one major difference: If an HTML style is changed or edited, only future uses of that HTML style will reflect the changes; past instances of that HTML style will not be updated to reflect those changes. In contrast, CSS styles in a linked style sheet, when updated, instantly update instances of that style sitewide.

Dreamweaver HTML Styles are created by first formatting some text with the Property inspector, then saving this combination as an HTML Style in the HTML Styles panel. Figure 4.13 shows the HTML Styles panel.

Figure 4.13. The HTML Styles panel.


To access the HTML Styles panel, choose Window > HTML Styles.

Create a New HTML Style Based on Existing Text

You can create a new HTML Style from scratch, or based on formatting you have already applied to existing text. To create a new HTML Style based on existing text, follow these steps:

1.
If you have some already formatted text you want to use as the basis of the HTML style, select it.

2.
Select text that has the HTML formatting you want to use as the basis of your new HTML Style. (You’ll need some existing formatted text to create an HTML Style.) In the HTML Styles panel, click the new style icon (the plus [+] button) in the lower-right corner.

3.
In the Define HTML Style dialog box, name the style. If you had formatted text selected before you started, its formatting will appear in the dialog box. If not, choose the formatting you want here. You also can adjust the formatting if you like.

4.
Determine whether you want to apply the HTML Style to selected text or to entire paragraphs. A paragraph style is applied to the entire paragraph in which the insertion point is located, whether or not the text is selected. Determine whether you want the HTML Style applied in addition to, or instead of, any existing formatting, either HTML or in-line CSS.

5.
Make selections from the Font Attributes or Paragraph Attributes fields as desired, to alter or add to the style already present in the selection.

6.
Click OK to close the dialog box and create the style.

Create a New HTML Style from Scratch

In the HTML Styles panel, click the New Style icon, and proceed in the same manner as when creating a new HTML Style based on existing text, as discussed in the preceding section.

Apply an HTML Style to Text

To apply a paragraph style, place the cursor within the paragraph. To apply a selection style, select the text. Then, follow these steps:

1.
In the HTML Styles panel, select the desired style.

2.
Apply the style one of two ways, depending on whether the Apply check box at the bottom of the panel is selected:

  • With Apply checked (selected), just click the style once.

  • With Apply unchecked (deselected), click the style and then click Apply.

Edit an HTML Style

To edit an existing HTML Style, follow these steps:

1.
In the HTML Styles panel, deselect the Apply check box to turn off the Auto Apply option. (If the Auto Apply option is not turned off, selecting a style will automatically apply that style to text in your document.)

2.
In the HTML Styles panel, select a style, and then click the triangle in the upper-right corner of the panel to display the drop-down context menu. Choose Edit. Or, you can double-click the style name.

3.
In the Define HTML Style dialog box, edit the style as desired. When you’re finished, click OK.

Delete an HTML Style

To remove an HTML Style, follow these steps:

1.
In the HTML Styles panel, deselect the Apply check box to turn off the Auto Apply option.

2.
Select an HTML Style. Click the Delete Style (trash can) icon in the lower-right corner of the panel.

Note

When using HTML Styles, it is important to understand the difference between a paragraph style and a selection style.

A paragraph style, indicated on the HTML Styles palette with a paragraph symbol, applies that style to the entire paragraph, no matter whether any text is selected. In other words, if your cursor is blinking inside a paragraph, and you click a paragraph style in the HTML Styles palette, the style will be applied.

A selection style can be applied only if text is selected. A selection style is indicated in the HTML Styles palette by a lowercase a with a line beneath it (a).


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