Macromedia DreamWeaver MX Help Files and Tutorials

Formatting Text:
Formatting Text | Changing Font Properties | Cascading Style Sheets | Using HTML Styles to Format Text | Creating Tag Selectors | Exporting CSS Style | Attaching External Style Sheets

JNCNET Home | Help Files | Tutorials | Formatting Text

Formatting Text on the Web:

When you apply HTML text formatting, you use the Property inspector and commands in the Text menu, such as Text > Paragraph Format and Text > Style

Changing the Font Properties:

Setting Fonts preferences:

Use Fonts preferences to set the fonts that Dreamweaver uses to display each font encoding. A document’s encoding determines how the document is displayed in a browser. Dreamweaver font settings let you view a given encoding in the font and size you prefer without affecting how the document appears when viewed by others in a browser. See Setting Up a Document for information on setting a default encoding for new documents.

To set the fonts to use in Dreamweaver for each type of encoding:

   1. Choose Edit > Preferences and click Fonts in the Category list.

   2. Select an encoding type (such as Western (Latin1) or Japanese) from the Font Settings list, then    choose fonts to use within Dreamweaver for that encoding, using the font pop-up menus below the Font    Settings list.

Note: The fonts you choose do not affect how the document appears in a visitor’s browser.

The following is a more detailed description of the options.

Font Settings lets you specify the set of fonts to be used in Dreamweaver for documents that use a given type of encoding. For example, to specify fonts to use for Japanese documents, select Japanese from the Font Settings list and then choose a proportional font, a fixed font, a Code view font, and a Tag inspector font from the menus below; all documents in Japanese encodings are then displayed using those specified fonts.

Note: To appear in the font pop-up menus, a font must be installed on your computer. For example, to see Japanese text you must have a Japanese font installed.

To specify the fonts used for U.S. English and all Western European languages, choose Western from the Font Settings list, and then choose a set of four fonts from the font pop-up menus. To set appropriate double-byte fonts for Asian languages, choose Japanese, Traditional Chinese, Simplified Chinese, or Korean. (To display an Asian language, you must be using an operating system that supports double-byte fonts.) You may also choose fonts for Central European, Cyrillic, Greek, Icelandic Mac, or Other encodings.

Proportional Font is the font Dreamweaver uses to display normal text (for example, text in paragraphs, headings, and tables). The default depends on your system’s installed fonts. For most U.S. systems, the default is Times New Roman 12 pt. (Medium) on Windows and Times 12 pt. on the Macintosh.

Fixed Font is the font Dreamweaver uses to display text within pre, code, and tt tags. The default depends on your system’s installed fonts. For most U.S. systems, the default is Courier New 10 pt. (Small) on Windows and Monaco 12 pt. on the Macintosh.

Code View is the font used for all text that appears in the Code view and Code inspector. The default depends on your system’s installed fonts.

Tag Inspector is the font used for text that appears in the Tag inspector.

Introducing Cascading Style Sheets:

Creating a new CSS style:

Create a CSS style to automate the formatting of HTML tags or a range of text identified by a class attribute.

To create a new CSS style:

   1. Place the insertion point in the document, then do one of the following to open the New CSS Style dialog    box:

• In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button (+) located in the lower right area of the panel.
• In the text Property inspector, click the Toggle CSS/HTML Mode button, if necessary, to switch to CSS Mode, then in the CSS Style pop-up menu, select New CSS Style.
• Choose Text > CSS Styles > New CSS Style.
  The New CSS Style dialog box appears.

   2. Define the type of CSS style you want to create:

• To create a custom style that can be applied as a class attribute to a range or block of text, select Make Custom Style (Class), then in the Name field, enter a name for the style.
• Note: Custom style (class) names must begin with a period and can contain any combination of letters and numbers. For example, .myhead1. If you don’t enter a beginning period, Dreamweaver automatically enters it for you.
• To redefine the default formatting of a specific HTML tag, select Redefine HTML Tag, then in the Tag field, enter an HTML tag or choose one from the pop-up menu.
• To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute, select Use CSS Selector, then in the Selector field, enter one or more HTML tags or choose one from the pop-up menu. The selectors available from the pop-up menu are a:active, a:hover, a:link, and a:visited.

   3. Select the location in which the style will be defined:

• To create an external style sheet, choose New Style Sheet File.
• To embed the style in the current document, choose This Document Only

   4.Click OK. The Style Definition dialog box appears.

   5. Choose the style options you want to set for the new CSS style.

   6. When you are done setting style attributes, click OK.

Using HTML Styles to Format Text:

By setting up HTML styles you can quickly and consistently apply font formatting to text in your documents. HTML styles can consist of single or multiple HTML font tag attributes such as color, face, size, as well as other formatting attributes such as bold or italic. For example, you can create an HTML style for text which is Arial, size 4+, green, and italic. You can then quickly apply the style by selecting the text you want it applied to and then selecting the HTML style from the HTML Styles panel.

Since HTML styles consist only of font tags, they can be viewed by browsers that don't support cascading style sheets (CSS), such as 3.0 and earlier browsers.

One disadvantage of HTML styles is that changes you make to an HTML style aren't automatically updated in the document. If you applied a style and later change it, you'll have to reapply the style to the text in order to update the formatting.

Unlike CSS styles, HTML style formatting only affects text that you apply it to, or text that you create using a selected HTML style. If you want the ability to change formatting, and automatically update all instances of that formatting, use CSS styles; see About Cascading Style Sheets.

You can use the HTML Styles panel to set up the HTML styles you use in your site, and then share them with other users, local sites, or remote sites. For information, see Using your HTML styles in other sites.

To display the HTML Styles panel, do one of the following:

• Choose Window > HTML Styles.
• Press Control + F11 (Windows) or Command + F11 (Macintosh).
• Click the HTML Styles icon in the Launcher.

Using the HTML styles panel:

The HTML Styles panel displays the HTML Styles that are available for the current local site.

There are two types of HTML Styles: Paragraph Styles and Selection Styles. They can be identified by the symbol in the first column of the HTML Styles panel:

   1. Paragraph Styles are preceded by a paragraph mark and allow you to format paragraphs.

   2. Selection Styles are preceded by an a and allow you to format text you have selected.The first two styles in    the HTML Styles panel, Clear Selection Style and Clear Paragraph Style, let you remove all format tags from the text you select and apply them to.

In the HTML Styles panel above, notice the Bold style. A plus sign (+) preceding a style indicates the style adds formatting to the text it is applied to. If a style doesn't have a plus sign, any existing style is cleared before the selected style is applied. For example, using the HTML Style "a+ Red" simply adds red to any formatting which has already been applied to the selected text, while using the HTML style "Emphasis" clears any existing formatting before applying this style.

To view the style attributes of an existing HTML style

• In the HTML Styles panel, select a style.
• While in the HTML Styles panel, right-click (Windows) or Control-click (Macintosh) and choose Edit   from the context menu, or double-click the HTML style and choose Edit from the context menu.
• In the Define HTML Style dialog box, specify the settings for the style.

The Apply To options determine whether the style applies to the selected text (Selection) or the current text block (Paragraph). The When Applying options determine whether the settings for the style are added to the original text formatting (Add to Existing Style), or removed from the existing formatting and replaced with the new settings (Clear Existing Style).

To apply an existing HTML style:

In the HTML Styles panel, select a style.

• If the Auto Apply checkbox at the bottom of the panel is selected, click the style once.
• If the Auto Apply checkbox is not selected, click the style, then click Apply.

To clear text formatting in your document:

1. Select the formatted text.
   
2. In the HTML Styles panel, click Clear Paragraph Style or Clear Selection Style.

Clear Paragraph Style removes any formatting from the current text block in the document. Clear Selection Style removes any formatting from the selected text.

Note: You can use Clear Paragraph Style and Clear Selection Style to remove any formatting (except CSS formatting), regardless of how the original formatting was applied (for example, through the HTML Styles panel or the Property inspector).

To remove a style from the HTML Styles panel:

• In the HTML Styles panel, deselect the checkbox to turn off the Auto Apply option
• Select an HTML style
• Click the Delete Style (trash can) icon in the lower right corner of the panel.

Creating Tag Selectors:

Editing code with the tag selector:

You can use the tag selector to select, edit, or remove tags without leaving Design view. The tag selector is located in the status bar at the bottom of the Document window and shows a series of tags, as follows.

To edit a tag:

   1. Click in the document.
   The tags that apply at the insertion point appear in the tag selector.

   2. Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
   A pop-up menu appears.

   3. Select Edit Tag from the menu.
   The Quick Tag Editor appears. For more information, see Editing an HTML tag with the Quick Tag Editor.

To remove a tag:

   1. Click in the document.
   The tags that apply at the insertion point appear in the tag selector.

   2. Right-click (Windows) or Control-click (Macintosh) a tag in the tag selector.
   A pop-up menu appears.

   3. Select Remove Tag from the menu.

To select an object represented by a tag:

   1. Click in the document.
   The tags that apply at the insertion point appear in the tag selector.

   2. Click a tag in the tag selector.
   The object represented by the tag is selected on the page.

Tip: Use this technique to select individual table rows (tr tags) or cells (td tags).

Exporting CSS Style Definitions:

Export styles to create an external style sheet:

The CSS styles you’ve created so far have only applied to this document. Internal style sheets apply only to the document in which they were created. Now, you’ll learn how to create an external style sheet which contains the styles you defined in this document.

• Choose File > Export > Export CSS Styles.
  In the Export CSS Styles dialog box appears.
• In the dialog box, in the Save In (Windows) or Where (Macintosh) pop-up menu, navigate to your local site folder.
• In File Name (Windows) or Save As (Macintosh), name the file mystyle.css

Note: You can name a CSS style sheet any name you want, with the following exceptions; the name must be lowercase and contain no spaces.

• Click Save

Exporting styles to create a CSS style sheet:

You can export styles from a document to create a new CSS style sheet. You can then link to other documents to apply these styles.

To export CSS styles from a document and create a CSS style sheet:

• Choose File > Export > Export CSS Styles or choose Text > Export Style Sheet.
  The Export Styles as CSS File dialog box appears.
• Enter a name for your style and click Save.
  The style is saved as a CSS style sheet.

Attaching External Style Sheets:

You’ll attach the CSS style sheet you just created to another document in your site. The document you’ll work with is the same as the original css_start.htm file, before you added style to it.

• In Dreamweaver, open the Site panel (Window > Site), if it isn’t already open.
• In the Site panel, locate the file named css_start2.htm, then double-click it to open it in the Document window.
• In the CSS Styles panel, click the Attach Style Sheet button located at the bottom of the panel. The Link External Style Sheet dialog box appears.
• In the File/URL text box, enter the path to mystyle.css or click Browse and in the dialog box that appears navigate to the mystyle.css file, then click OK to select it.
• In the Link External Style Sheet dialog box, for Add As, select Link.
• Click OK.

The selected style sheet links to the current document, and the style attributes are immediately applied.

[back to top]