HTML Styles

Team-Fly    

Macromedia® DreamWeaver® MX Unleashed
By Matthew Pizzi, Zak Ruvalcaba
Table of Contents
Chapter 4.  Dreamweaver MX Essentials


When using HTML styles, you can offer a consistent look throughout your Web site by applying formats that you've set up in the HTML Styles panel. It's important to note that HTML styles are not nearly as powerful as cascading style sheets, nor as style sheets in desktop publishing programs such as Quark or InDesign.

The HTML Styles panel is an area where you can store HTML formats. A downside to this panel is that text or documents have no links associated with them. Therefore, if you apply a style to a body of text and then later update the style to a different color, the body of text will not be updated automatically. Instead, you have to reapply the format to the body of text to reflect the new changes.

Notice in Figure 4.26 that four possible icons can appear in the Styles panel. Each has a different meaning, and those meanings will basically describe how the HTML Styles panel works. The top two, however, are always present, whereas the others appear only if you define them.

  • Clear Selection Style This option removes a style that you created to be applied to selected text.

  • Clear Paragraph Style This enables you to remove any style that you may have applied to a paragraph.

Figure 4.26. The HTML Styles panel.

graphics/04fig26.jpg

Creating Styles

When creating styles, you have a couple of choices. You can either create a style that will be applied to a selection of text or to text that appears between opening and closing <p> paragraph tags. One style, oddly enough, is called a selection style, and the other is called a paragraph style.

The other choice you must consider is whether you want to remove existing format attributes to text before you apply the HTML style or add to the existing style and formatting of the text. You can add to an existing style only if the existing style does not conflict with an HTML style. For example, if the text you're about to apply the style to is the color green, but the HTML style is set to change the text to red, the HTML style will override the existing color, even though the HTML style is set to add to an existing style.

Creating HTML Styles

In this exercise we'll be going through the necessary steps to create an HTML style. You can download the HTML file called newsletter, located on our companion Web site at http://www.dreamweavermxunleashed.com, to use in this exercise.

  1. Open the document newletter.html. You'll notice there are several lines and paragraphs of text, as pictured in Figure 4.27. What you're going to do is set up some style to format the text in this document.

    Figure 4.27. The document newsletter.html is a document filled with unformatted text.

    graphics/04fig27.jpg

  2. The first thing to make consistent is the font and color of the headings. To do this, open the HTML Styles panel by choosing Window, HTML Styles. In the HTML Styles panel, click the New Style button located at the bottom-right corner of the panel. You can also create a new style by choosing New Style from the panel submenu. Notice this launches the Define HTML Style dialog box, as shown in Figure 4.28.

    Figure 4.28. The Define HTML Style dialog box offers options for creating a new HTML style.

    graphics/04fig28.jpg

  3. The Define HTML Style dialog box has several options. First, name the style. Let's name this subheadings.

  4. Next, determine whether this is going to be a style that will be applied to a selection or a paragraph. For this exercise, choose the Selection option button.

  5. The next decision you have to make when defining a style is whether you prefer to add to the existing style of the text as you apply this HTML style or if you want to remove any formatting to the text before your HTML style is applied. For this exercise, add to an existing style.

  6. You now have to configure the font attributes. Here, you decide what typeface you want to use and the size and color. There are also options for style, such as bold and italic. If you press the other button next to the style section, you'll get a drop-down menu with additional styling options, such as strikethrough and underline. For this exercise I'm going to choose Arial, Helvetica, sans-serif for the font. I'm then going to choose a size of 3, but I'm not going to select color. I want you to see the advantage of using the Add to Existing Style option. Feel free to choose your own styles.

  7. Finally I'm going to press OK to exit the Define HTML Style dialog box. Notice back in the document, in the HTML Style panel, your style named subheadings.

  8. To apply this style to some text, simply highlight a word or section text, and with it selected click the subheadings style located in the HTML Styles panel. Notice in Figure 4.29 the text has been modified, but the original color has been preserved because we chose Add to Ex.

    Figure 4.29. The Insert Date dialog box offers formatting options for the date and time.

    graphics/04fig29.jpg

  9. If for some reason you decide you no longer want the style applied to a particular piece of text, highlight the text you want to remove the style from and click the Clear Selection Style option in the HTML Styles panel.

Creating and applying HTML Styles is simple. You can also create a paragraph style, which give you the capability to change the text in the same way you just did in this exercise to an entire paragraph of text. You create a paragraph style in the same way, but you have the additional options for alignment and format (Heading, Paragraph, or Preformat styles).

When applying a paragraph style, it is not necessary to select the entire paragraph; simply have a blinking cursor within the paragraph you want to apply the style to when you click the style in the HTML Styles panel. You can remove a paragraph style in the same way, but by using the Remove Paragraph Style option.

Editing HTML Styles

HTML Styles do not behave like CSS Styles in the sense that there is no connection between the Styles panel and the text you've applied a style to. When applying an HTML style, you're more or less adding a <font> tag with attributes around the selected text. You can edit an HTML style, but after editing it, the text you've applied the style to previously will not be updated; it's up to you to update it manually by reapplying the style.

Nevertheless, it is possible to change or edit the style you have setup in the HTML Styles panel. Simply highlight the style in the panel and choose from the submenu on the top-right corner of the panel, and in that menu choose Edit. This launches the Define HTML Styles dialog box.

Even though you can remove styles from text, you may want to delete them completely from the panel. To do this, highlight the style in the panel and click the Trash Can button in the bottom-right corner of the panel. You can also choose Delete from the panel's submenu.

Finally, you can also move HTML styles to other Web sites. CSS styles will often use an external file, which is easy to locate and share. HTML styles are a bit different, but it is possible to move the styles you set up in one site to another. To share HTML styles, locate the Library folder inside your local root folder. There you'll see a file called styles.xml. This is the file you can copy and move to different sites to move your HTML styles to another location.


    Team-Fly    
    Top


    Macromedia Dreamweaver MX Unleashed
    Macromedia Dreamweaver MX 2004 Unleashed
    ISBN: 0672326310
    EAN: 2147483647
    Year: 2002
    Pages: 321

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net