Defining Styles in Dreamweaver

Using Styles in Dreamweaver

What are Styles?

Styles are a new way of indicating document formatting that take the place of commonly used HTML tags.

Using Styles and Dynamic HTML allows us to do more than we could with HTML 3.0 and 3.2

In HTML 4 the use of tags within the BODY to define the style of text has been deprecated.

In the place of tags for each element in a document, the new standard advocates placement of all the style definitions in the HEAD of an HTML document.

In addition to a new location for style definitions, the formatting has also changed. There will be new style tags to replace the familiar <font face="Arial">. This means that there will be much new information to learn.

Can We Continue to Use the Old and Familiar HTML Tags?

HTML editors such as Netscape Page Composer, and most others, still interpret HTML version 3 tags. Dreamweaver is one of the first to help users incorporate the new standards.

Right now, the browsers we commonly use, (Netscape 4.x and Microsoft IE 4.x) understand both HTML 3 and the new HTML 4. Older browsers only understand HTML 3 and earlier. New browsers not yet published will move more and more toward the new way of formatting HTML.

Dreamweaver helps prepare the way by making it easier to include new formatting techniques.

Notice that using styles is independent of Dreamweaver. You can use styles by typing HTML with Notepad or any other editor that allows you to type in HTML by hand. Dreamweaver only helps the process along.

Formatting With Styles Examples

The sample of HTML code below shows how we have traditionally formatted some text using the <h3> to indicate a heading and the <font> tag to specify a specific font and font color.

<HTML>
<HEAD><TITLE>The Old Way</TITLE></HEAD>
<BODY>
<H3><FONT FACE="ARIAL" COLOR="#FF66FF">This is the heading</FONT></H3>
</BODY>
</HTML>

The code below achieves the same effect using Styles. A style was created using the <style> tag and given a name of ".h3style". Notice that the style was created in the Head and not the Body. However, the style was applied to text in the Body. The code for creating the style and applying it are shown in red.

<HTML>
<HEAD><TITLE>The New Way</TITLE>
<STYLE TYPE="TEXT/CSS">
.h3style { font-family: Arial, Helvetica, sans-serif; color: #FF0000}
</STYLE>
</HEAD>
<BODY>
<H3 class="h3style">This is the Heading<H3>
</BODY>
</HTML>

Creating and Applying a Style Using Dreamweaver

To create styles in Dreamweaver, do the following:

Decide in advance what formatting options you want to use, for example, colors, fonts and others

From the Window menu, select Styles.

Click the button called Style Sheet....

Click New to create a new style.

Type a unique name for the style to distinguish it from other styles you might create. (You can have as many as you need).

Select Make Custom Style as the Type of Style

Now, define the style using the Style Definition dialogue box.

Click OK and Done to finish defining the style.

To apply the style you have created, do the following:

Select some text in your document. With the Styles window open, double click the style to apply.

Activity------------------------------------------------------------------

Open the admissions file on the diskette if it is not already open.

If the Styles box is not open, click the Window menu and select Styles to show it.

Follow the directions above to bring up the Style Definition dialogue box. Create several new styles. Type styles are applied to text.

Create at least two different Type styles. Background styles format a document's background. Border styles place a border around selected items.

Notice that the names of all the styles you create are changed to begin with a period, ".". So if you named a style "bluetext", the style name would be saved as ".bluetext".

Defining Styles - What Styles Can We Define?

This list indicates the functions of the style types. Notice that some of the styles do not display in Dreamweaver editor. You must preview them in a browser.

Type: This style refers to typographical formatting and includes font, font size, color, line height, case (upper or lower) and others.

Background: Background color, image and placement. Several interesting and advanced options are available. You can select how a background image is displayed. Normally, a background image is tiled to take up all available space. By selecting No Repeat, the image is displayed only once at the top. Repeat-x and Repeat-y display a horizontal and verical band of images, respectively.

You can also use a background image as an Attachment that can be fixed in location, or scroll with the content. A small logo or image can be made to scroll to keep it visible at all times.

Block: Typographic formatting applied to text. Includes space between words, space between characters, and how the text is vertically aligned with other elements. We see this used frequently with the <img> tag. It can also be used with other elements.

Box: Width and Height determine the size of the element.

Float moves the element out of the page flow and places it at either the left or right page margin. Other elements wrap around the floating element as usual.

Clear defines on which sides of the element layers are not allowed. If a layer appears on the clear side, the element with the clear setting moves below it.

Padding defines the amount of space between the content of the element and its border (or its margin if there is no border).

Margin defines the amount of space between the border of the element and any other element.

Border: Places a border around the selected object or text. Border attributes include width, style and color.

List: Allows formatting of the type of bullet, a bullet image and placement of the bullet. Notice that Dreamweaver can insert the selected bullet graphic in a list for you. No need to type <img src=".......">.

Positioning: Allows an image (for example) to be placed in an absolute location on the screen by placing it inside a new layer. You can set the visibility of an object inside a layer to visible or hidden, can set z-index so that one image is behind or in front of another image.

Overflow allows you to specify what happens if an object is larger than the layer that holds it.

Clip defines the part of a layer that is visible.

Extensions: Pagebreak forces a page break when printing the page. It sounds like a nice feature, but is not supported by level 4 browsers, so at present there is no point in using it.

Cursor changes the cursor when it moves over an object.

Filter applies special effects that apply to an object. Note that this is only supported by Microsoft Internet Explorer. The effects will not appear in Netscape.

How Do You Apply a Style?

Type a block of text, or a header in the Dreamweaver WYSIWIG editor.

Select the text with your mouse.

Select a Style in the Styles Window by clicking it.

Activity------------------------------------------------------------------------------

Type several lines of text in the new Dreamweaver document.

Apply a style as indicated above. Preview the style's appearance by choosing the File menu, Preview in Browser. You may have two different browsers from which to choose. Try them both. You will find that some styles display differently (or not at all) in one browser or the other.

Return