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.
- In Design view, click in the page to place the inserting point where you want ot insert code.
- Press Control+T.
The Quick Tag Editor opens in
Insert HTML mode.
- Enter the HTML tag and press Enter.
The tag is inserted into your code.
4. Press Escape to exit without making any
changes.