Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Microsoft FrontPage

To use FrontPage’s style sheet functions, you need to work in the FrontPage Editor—the FrontPage component used to create Web documents.

In the FrontPage Editor, choosing Format, Stylesheet will reveal the Format Stylesheet dialog box you see in Figure 9.5. As you see in the figure, FrontPage assumes you’re embedding your style information in the document head when you choose this option, as evidenced by the <STYLE> and </STYLE> tags you see in the dialog box.

FIGURE 9.5  The FrontPage Editor enables you to create embedded style specifications.

You can type the style information you want to apply directly into the dialog box, or you can click the Style button near the bottom left to open up the Style dialog box into which you can enter the information. Figure 9.6 shows you the Alignment tab of this dialog box, which enables you to specify values for margins, padding, and floating properties. Other tabs include

•  Borders—For specifying type, color and width of borders.

•  Font—For choosing a type family and size.

•  Color—For choosing a background color, a foreground color, or a background image (including how to tile the image).

•  Text—For choosing text style, weight, and decoration, line height, letter spacing, and alignment properties.

When you’re done setting up the style information, click the OK button to apply the styles. Depending on what characteristics you’ve specified, you may not see any effect on the FrontPage Editor’s Normal tab. To make sure that your style information was properly built into the source code of the document, click the HTML tab to look at the raw code. You should see your style information contained in the document head.

FIGURE 9.6  If you can’t remember all those style characteristics, don’t worry! FrontPage has them all stored in the Style dialog box.

FrontPage can also help you if you want to place style information in a separate file, or if you want to use inline styles. If you need to create a separate style sheet file, you can still use the dialog boxes you see in Figures 9.5 and 9.6 to set up the style information. Then, after the style specifications are written into the document, you can copy and paste them to a blank document and then save the document as a text file with a .css extension.

If you plan to use inline styles, you’ll find that many dialog boxes that insert tags have a Style button in them. Clicking the Style button will call up a dialog box much like the one you see in Figure 9.6, enabling you to specify the style information you want to associate with that instance of the tag.

---

NOTE:  The themes that come with FrontPage are not implemented by means of CSS style instructions. Rather, the server implements the theme (fonts, sizes, bullet graphics, and so on) according to instructions it gets in a <META> tag in the document head.

---

Allaire HomeSite

Another software package that can help you with the incorporation of style information is Allaire’s HomeSite. HomeSite is not a WYSIWYG editor like the FrontPage Editor. Rather, it is focused on the composition of the raw HTML source code.

HomeSite has particularly good support for defining inline styles. When you have HomeSite’s “What-You-See-Is-What-You-Need” (WYSIWYN) feature active and your cursor placed inside of a tag, the program will display a context-sensitive list of attributes that are appropriate to the tag (see Figure 9.7). HomeSite “knows” that the STYLE attribute is available for most HTML tags, and you’ll typically find STYLE listed among the acceptable attributes in the context-sensitive list.

After you’ve placed the STYLE attribute, HomeSite can take you a step further by helping you to specify the style properties. When your cursor is between the quotation marks of the STYLE=“” attribute, the WYSIWYN feature kicks in again and gives you the option to define an inline style (see Figure 9.8). Selecting this option launches HomeSite’s Inline Style dialog box (see Figure 9.9). The dialog box has four tabs—Font, Text, Margins, and Position—where you can assign specific values to the properties grouped under the tab. You also get a small preview window in the dialog box and a button that will enable you to see the style sheet in an external browser.

FIGURE 9.7  HomeSite’s WYSIWYN feature detects which tag you’re inserting and provides a list of possible attributes to use inside the tag.

FIGURE 9.8  HomeSite offers to help you define an inline style when it senses that you’re placing a tag that has the STYLE attribute.

FIGURE 9.9  When you input the values you want for various font, text, margin, and positioning properties, HomeSite writes out the corresponding style sheet code.