Using the Properties Panel | Using the Text Insert Toolbar | Creating and Applying Styles

Using the Properties Panel

The Properties panel is used for most text formatting tasks. To view the Properties panel, choose Window > Properties. Place your cursor in a text paragraph and the panel will display the properties of the paragraph.

Choosing paragraph formats and styles

To change the format of a paragraph, you can place the cursor anywhere in the paragraph and choose the format from the Format dropdown menu in the properties panel.  Any changes you make to the Format setting will apply to the entire paragraph of text, not only the letters that are selected.

The following are examples of formats that were applied using the Format dropdown menu:

        This is preformatted text.

Alternatively, if you have defined styles for text, you can choose a style from the Style dropdown menu. Styles are described in more detail below.

Links

To link text to another file or url, first highlight the text with the cursor. Then, in the Link box in the properties panel, enter the url or filename.

Other formatting attributes

Font and Size can be assigned from the properties panel but we recommend that you define these attributes with stylesheets.

Various text attributes can be assigned from the properties panel or from the Text menu, including font, size, color, bold, italics, alignment, bullets, step numbers, and indents.

For example, you could highlight some text and assign a color to it by clicking on the square text color box in the Properties panel (just to the right of the text size dropdown box):

In most cases, Dreamweaver automatically creates styles for these attributes. For example, if you make some text blue, Dreamweaver will automatically create a style for the color, and the name will be added to the list of styles you can apply from the Style dropdown menu in the Properties panel, as shown below (the style name Dreamweaver assigned in this case is style3).

The new style name also appears in the list of styles in the CSS Styles panel:

Using the Text Insert Toolbar

The Text version of the Insert Toolbar is useful for inserting special characters and for related text formatting tasks, so it is a good idea to keep it displayed while doing tasks related to text formatting.  (See instructions on displaying toolbars in "Setting Up a Web Site".)

Inserting special characters

Click the down arrow at the right end of the Insert Text toolbar to access additional special characters. To insert a character, click an item in the drop down list.

Other text tricks

• For a line break, press Shift-Enter.

• For a non-breaking space (i.e.    ), press Ctrl-Shift-Spacebar (you can also click the non-breaking space icon in the Insert Toolbar dropdown menu).

Use preformatted text if you want
                                  Dreamweaver to allow you
                    to put the text anywhere you like
          (sort of like a typewriter)

Creating and Applying Styles

In Dreamweaver, you can define styles to apply formatting to text. These are called CSS (Cascading Style Sheet) styles. There are two important types of CSS styles for formatting text:

• Class styles can be applied to any tags. For example, you could define a style called blue that you could apply to any text format (h1, h2, p, etc.) to make it blue.
  
• Tag styles redefine the format of a specific tag.  For example, you could redefine the format for h1.  The new style would only apply to h1 and not to any other tags.

To work with CSS styles, open the Design panel and click on the CSS Styles tab (if necessary) to bring it to the front.

You can create stylesheets, create, edit, and delete styles by clicking the buttons at the bottom of the panel.

Defining a Style for a Tag

To create a new tag style, go to the CSS Styles panel and click the New Style button.

When you click the New Style button, the New CSS Style dialog box appears. From the Tag dropdown menu, choose a tag to redefine. Under Selector Type, choose Tag.

When you define a style, you assign attributes for a style that are stored either in the Head portion of your html page or in a separate style sheet.

The advantage of a separate style sheet is that it allows you to define styles for multiple Web pages at the same time.  If you choose to define the style in a style sheet file, your style definition will apply to any Web page that you choose to associate with the style sheet. If you choose "This document only" the style will only be applied to the current Web page.

Click OK. If you are saving the style in a style sheet the following dialog box will appear:

You can either browse to an existing stylesheet (if you already created one), or you can type in a filename for your new stylesheet. Save it within your local site folder.

When you click Save, the New CSS Style dialog box will be replaced by the CSS Style definition dialog box that allows you to define the new style. In the following example, the h1 format is being defined.  Enter the font, size, or any other information you want to specify for the tag.

Note: If you are storing the definition of the style in the head portion of the current document (you chose "This document only"), you may need to click on the Edit Style button in the CSS Styles panel in order to get to the CSS Style definition dialog box.

When you click OK to exit the Style definition dialog box, the definition of the tag is changed. This changes the format of the text with that tag wherever the tag appears in your Web page.

Attaching a Style Sheet to a Web page

If you have defined styles in a style sheet, you can easily attach any Web page you are working on to that style sheet. This is a great way to ensure that the formatting of text is consistent throughout your Web site.

To attach a Dreamweaver file to a style sheet, click the Attach Style Sheet icon in the CSS Styles panel. The following dialog box appears, which allows you to browse to the style sheet. Click the Link radio button (if it is not already selected). Then click OK to attach the style sheet to your file.

Applying Styles

To apply a tag style you have already defined to some text, select the text to which you want to apply the style. Then choose the style in the Style dropdown box of the properties panel.