MS FrontPage —

Creating Styles

When you create a style, you're really just creating style rules. If you want, you can type rules directly into a style sheet or into an HTML file. But, once again, there's no need tax your keyboardFrontPage walks you through the rules-creation process with its Style dialog box. You'll use the Style dialog box to create a style, set formatting, and even preview the effects.

Creating a Style

Whether you're creating an embedded (page-level) or external (site-level) style, the process is the same. Begin by opening the HTML page or style sheet and selecting Format » Style. The Style dialog box displays (Figure 7-2), which you'll use to set the characteristics of a style and to name it.

Figure 7-2. The Styles dialog box features a pane on the left called Styles, though at first, it doesn't show any styles. Instead, it shows HTML tags to which you can apply a style. Use the List drop-down menu, beneath it, to switch between HTML tags and user-defined styles. If you select a style or tag, you get a preview of what it looks like on the right side of the Styles dialog box.

To create a new style:

  1. Choose a style selector so that FrontPage knows what element this style will modify.

    • If you're applying a style to an HTML tag, select the tag from the list and click Modify.

    • If you're creating a class (user-defined) style (Styles an Introduction), click New.

  2. Confirm or name the selector.

    • If you selected Modify in step 1, confirm that the tag you want to modify appears in the Selector Name field.

    • If you selected New in step 1, type in a name for your class selector (don't use any spaces in the name). Class selector names always need to be preceded by a period, but FrontPage inserts this for you automatically. Use the drop-down listbox on the right to specify whether the style will apply to paragraphs or characters.

  3. Define the style.

    Click Format to display a list of style properties (see Figure 7-3). Each of these selections opens a dialog box, which lets you set specific formatting.

    Figure 7-3. Click Format to display the Style Properties menu, which lets you control a style's settings for things like position, border and shading, and font style.

  4. Save the style.

    To confirm that you've created a new style, you can click the List drop-down menu below the Styles pane and select User-Defined Styles. Your new style should appear in the Styles pane. (Switch between the tags and styles lists at any time, using the List drop-down menu.) Click OK to save and close the dialog box.

Embedded Styles in HTML

Embedded style rules are stored inside the <head> tags of a Web page (HTML 101). To see what an embedded style looks like, switch to Split or Code view and locate the <head> tags. Nested within the <head> tags are <style> tags. For instance, if you created an embedded style to make hyperlinks red, you'd see this:

    <style>
    <!--
    a { color: #FF0000 }
    -->
    </style>

As you can see here, FrontPage does you the favor of placing embedded style rules within comment tags (<!-- and -->) as a safety measure. Why? Browsers never display tex-within comment tags, so coders use this trick to hide style rules from browsers that can't display CSS. Otherwise, the rules might appear as text within older browsers.

Embedded styles work only for the pages in which they're stored. If you want to copy an embedded style to another page, just copy the HTML code. To do so, select the <style> tags and their contents, copy, and then paste the selection into the <head> section of another Web page. If you find yourself frequently copying styles between pages in that way, you're probably better off using an external style sheet.

Setting Style Properties

Cascading Style Sheets provide many more formatting options than plain old HTML. Click Format within the Style dialog box to launch the style properties dialog boxes that are described next.

Fonts

The Font dialog box (see Figure 7-4) is pretty similar to the one you get by selecting Format » Font. Some optionslike Strong, Emphasis, and othersare missing here, because those are HTML-specific tags, whereas the ones in this dialog box show all the options CSS gives you.

To remove underline formatting from all your hyperlinks, modify an <a> tag style font by turning on the No Text Decoration checkbox.

Figure 7-4. When you're setting a style's font attributes, FrontPage offers the dialog box pictured here. If you want to condense characters (bring them closer to together so they take up less horizontal space) or spread characters out, click the Character Spacing tab and select your preference.

While CSS gives you a few new font formatting options, the basic rules that govern how text displays within a browser still apply. If you select a font that's not loaded on a viewer's system, the browser replaces it with a similar font (or what it thinks is a similar font). Again, stick to the common fonts you learned about back on Formatting Characters.

Adding Font Families

A font won't display in a browser, unless a viewer has that font on his system. A lot of Web designers get around this problem by specifying a family, or group of similar fonts, from which a browser can choose. That way, if a viewer doesn't have the first font in the list, the browser loads the second, or third font, and so on.

While this is a common practice, FrontPage doesn't give you an easy way to include these font families. Your only option is to type alternative fonts in your style sheet yourself.

The program does give you a small head start, though. When you add a font to a style sheet, it appears like this:

    h1 { font-family: Verdana }

What you need to do is type additional fonts after your first font and separate them with commas. (If the family name includes a space, be sure to enclose it in quotation marks.) You'll end up with something like this:

    h1 { font-family: Verdana, Arial,
    Helvetica, sans-serif; }
    h2 { font-family: "Book Antiqua", "Times
    New Roman", serif; }

How do you know which font family to use? An old-school, ink-stained finger designer would probably tell you the following: Serif fonts, like Times New Roman, feature small flourishes at the ends of each letter to help lead a reader's eye to the next letter. This makes these Serif fonts easier, especially when it comes to long paragraphs. Sans-serif fonts don't have these flourishes, or serifs, and are more often used as headings due to their bold, blocky appearance.

Those guidelines were gospel back in the days of print-only typesetting. But Web authoring has changed the rules of font selection. Reading on a pixilated screenthat is, one made up of thousands (or millions) of tiny dotsdiffers from reading print on paper. Because a screen pixilates (renders in little squares) serifs, they're actually harder to read on a computer screen. Most Web designers therefore now use a sans-serif font, like Verdana, for large passages of text.

Paragraph

FrontPage's CSS paragraph settings are identical to those you saw on FrontPage's regular paragraph format dialog box (Formatting Paragraphs). In fact, when you're editing a Web page and select Format » Paragraph, you actually create an inline style. Setting paragraph spacing and alignment works the same on a style sheet, except that you get to apply it across your entire site, of course.

Border

You can set borders for any page element, including the entire body of a page, text, pictures, tables, rows, and cells. Speaking of cellsyou can also use the Border dialog box to set cell padding by creating a style for the <td> tag (Inserting a Table) and editing the Padding fields. (As you learned in Improving a Web Page, padding is the space between a border and its content.) Setting cell padding on a style sheet instead of on every table in your site can save you tons of time.

Want to set the background of a particular element? Just click the Shading tab. The Background Color field sets the color behind any elements you've specified. This might be the background of a cell, list, paragraph, or an entire pagedepending on the tag or selector you've chosen. Foreground Color sets the color of the element itself, like text.

The Shading tab also gives you more control than HTML property settings if you want to use background images. For example, if you don't want your picture to tile (appear multiple times when it's not big enough to fill the space), select No Repeat from the Repeat drop-down menu. You can also have the background picture scroll along with content by selecting Scroll within the Attachment drop-down menu. Neither of these settings is possible if you're just using HTML.

Netscape Navigator 4.0 doesn't support most border background settings.

Numbering

Because you can control more than just numbering, a better title for this style properties dialog box might be Lists. You already know that numbered and bulleted lists work in pretty much the same way (Creating Lists). Use this styles dialog box to format both. As with the standard List Properties box, you can control the appearance of numbered or bulleted lists, and include picture bullets if you want.

Position

While you'll want to use HTML tables (Improving a Web Page) for complex layout, CSS is better for controlling the positioning of individual elements.

CSS gives you two types of position control options:

  • Relative positioning places objects according to the position of elements that precede and follow them on the page (see Figure 7-5). HTML automatically arranges items relatively, sounless you've "absolutely positioned" an element (see below)everything on your pages should already be positioned relatively. But you can make adjustments here. For example, you can set wrapping (Formatting Pictures) and width options for relatively positioned objects.

  • Absolute positioning lets you set an exact location on your page's x-y axis for the placement of an object. For example, to position an image, click the Absolute button in the Position dialog box and set Top = 20 and Left = 40. This sets the location of the top-left corner of the image at 20 pixels from the top of the page and 40 pixels from the left side of the page. Be careful with absolute positioning. Text won't flow around an absolutely positioned item, but will appear behind or, if you specify, in front of it (see Figure 7-5).

Figure 7-5. The picture on the first line is positioned relatively. The text pushes it across the page and determines its position. The second picture is positioned absolutely. It sits in an assigned spot that you've selected, uninfluenced by the position of other elementseven to the point that it obscures a line of text.

You can position elements like paragraphs, images, and tables. Web developers use absolute positioning most often when they're working with layers. For detailed information on positioning layers and using other controls in the Position dialog box, see Layers Tutorial.

Many developers are using CSS positioning to lay out pages instead of using tables. This is the next big wave in page design. Advantages include quicker page load times and easier access for handheld browsers like cellphones, which often can't read tables. While you can attempt this kind of layout in FrontPage 2003 using layers and CSS, many hope that the next FrontPage release will include features to make this method a lot easier.