How to work with HTML style in Dreamweaver?

HTML style are he pre-formatted (pre-defined) styles, which are used to format contents of a page (normally texts; headings; body text etc.) more easily and quickly. An new style can also be created as well as can also be edited existing formats.

Creating an HTML style

            You can create styles in two ways; you can format the text in the document and then create a style based on the selected text or you can create a style in the HTML Styles  panel by selecting the formatting attributes you want to apply.

To create a new HTML style:

1.                  In the HTML panel, click the New Style icon; you can also choose Text > HTML Style > New  Style. The Define HTML Style dialog box appears.

2.                  In the Name text box, enter a name for the style.

3.                  Under Apply To, choose how this style will be applied by doing one of the following:

To set a selection style, choose selection.

To set a paragraph style, choose Paragraph.

        Note: A paragraph style applies to the entire text block in which the insertion point

                  is located, regardless of what text is actually selected.

4.                  For when Applying, choose whether to apply the HTML style in addition to the existing style of the selected text or paragraph, or to clear the formatting of the selection or paragraph and apply the new HTML style.

5.                  Under Font Attributes, use the pop-up menus to select the formatting options you want to apply.

6.                  If you are creating a paragraph style, under Paragraph Attributes, in the Format pop-up menu, choose a paragraph tag (for example, paragraph, Heading1, Preformatted).

7.                  For Alignment, click the left, center, or right alignment button to set the paragraph alignment you want.

8.                  Click OK.

Applying an HTML style

      Applying a style is as selecting the text or paragraph you want the style applied to , and then selecting the style in the HTML styles panel.

1        In the lower left corner of the HTML Styles panel make sure the apply option is selected to automatically apply the style you select.

2        In the Document window do one of the following to select the text you want the style applied to:

Place the inserting point anywhere in a paragraph to apply a paragraph style.

Use the cursor to select the text you want a selection style applied to.

3.      In the HTML Styles panel, click the HTML Style you want to apply to the text.

The text automatically updates in the Document window.

Editing an HTML Style

            When you edit and HTML Style, Dreamweaver does not automatically update text that was previously formatted using the HTML Style. To update the style to previously formatted text, you must manually re-apply the style.

To edit an existing HTML style:

1.                  Make sure no text is selected in the Document window.

2.                  In the HTML Style panel, make sure the Auto Apply checkbox is deselected.

If the Auto Apply option is turned on, the HTML style will be applied when you select it in the HTML Style panel.

3.                  In the HTML styles panel, do one of the following:

Right-click the style, then choose Edit from the context menu.

The Define HTML Style dialog box appears.

4.                  In the dialog box, set style attribute options for the style.

5.                  To reset it to the default options click clear.

About the Quick Tag Editor

            The quick Tag editor has three modes:

·                    Insert HTML mode to insert new HTML CODE.

·                    Edit Tag mode to edit an existing tag.

·                    Wrap Tag mode to wrap a new tag around the current selection.

The mode in which the Quick Tag Editor opens depends on the current selection in Design view. In all there modes, the basic procedure for using the Quick Tag Editor is the same:  open the editor, enter or edit tags and attributes, and then close the editor.

      You can cycle through the various modes by pressing Control+T while the Quick Tag Editor is active.

      If you use any invalid HTML in the Quick Tag Editor, Dreamweaver attempts to correct it for you by inserting closing quotation marks and closing angle brackets where needed.

Inserting an HTML tag with the Quick Tag Editor

      You can use the Quick Tag Editor to insert an HTML tag in your document.

1. In Design view, click in the page to place the inserting point where you want ot insert code.
2. Press Control+T.

The Quick Tag Editor opens in Insert HTML mode.

3. Enter the HTML tag and press Enter.

The tag is inserted into your code.

       4.   Press Escape to exit without making any changes.