Use style sheets in FrontPage XP

FrontPage XP ensures that users can design Web pages that are compatible with different browsers, and that the style sheet (CSS) feature provided is one of them. FrontPage XP uses style sheets to widen or tighten font spacing for page elements, set paragraph indents and paragraph spacing, set borders and shading, and more. FrontPage XP can create external and inline cascading style sheets, so let's do it one at a--.

Create an external CSS

This is a style sheet that can be applied to multiple Web pages. That is, you can link pages within a Web site to an external style sheet file with a CSS extension that allows multiple pages to use the same stylesheet file, preserving the theme style of the entire page, and editing the CSS file in any text handler. In FrontPage XP, you provide a template for creating CSS files, and you can customize the template styles that interest you as you want.

1. Build Style

To execute the file/new/Web page or Site command, in the new page or Web Task window, under new from template, click Page template to open the Page Template dialog box. Click the Style sheet tab, and then click the type of CSS you want to create, such as the Weeping Willow style, and then click OK.

At this point, FrontPage XP creates a new page with a file name extension of CSS and opens it for editing in Page view mode, which you must save before you can apply the style sheet file later.

When you create the CSS, the Styles toolbar appears, as shown in Figure 1. Click on this toolbar to activate the Style dialog box. If you want to modify a saved style sheet file, you can click the menu view/folder, and then in the Folders list, double-click the CSS file you want to open.


Figure 1 Style Tools

2. Edit Style

Let's take a look at how to edit the style. Click the Style button on the Styles toolbar or click Style on the Format menu to enter the Style dialog box, as shown in Figure 2.


Figure 2 Editing the style sheet here

In the list of styles, there are multiple styles, where "a:link" means the link text is valid, "a:active" is valid for the active link, "a:visited" is valid for the accessed text, and "a:hover" means that when the mouse hovers, it is valid.

First, in the Style box on the left, click the type of style you want to modify, such as A:link, and then in the list below, select the user-defined style option, and note that if you want to modify the standard HTML tags at this point, you can select HTML tags. Then, in the list of styles, double-click the A:link style to open the Modify Style dialog box, as shown in Figure 3. If you want to set alignment, indentation, or paragraph spacing, you can select paragraph, set borders and shading to select borders, set bullets and Numbering styles, and select Numbering. When you finish setting up, close all dialog boxes and return to the CSS file. This completes a style setting that can be applied directly to the text and paragraphs specified in the Web page file.


Figure 3 Formatting the style in this setting

After you return to the main interface, execute the menu file/Save command and save the style as a link.css standby.

To create an inline CSS

In Page view, follow the format/Style command, open the Style dialog box, and then click the New button, and in the Name box, enter the name of the new style as. Pal, and then under Style type, select paragraph. Then click Format, and then follow the previous method to set the formatting characteristics of the new style, such as fonts, paragraphs, and so on.

Apply Style

First, in Page view, open the page that you want to apply a style sheet (CSS) to, then on the Format menu, click Style Sheet links, open the Link Style Sheets dialog box, click the Add button, in the Open Select Style sheet dialog box, select the CSS style file you just created, and click OK , you can add it to the URL list. If you select the All Pages option, you can apply the style file to all pages in your site, and selecting current page will only be used in the current editing page. In addition, if you want to apply a style to paragraphs or text on a page, you can first select the text to which you want to apply the style, and then select the name of the style you want to apply in the Style list box in the toolbar.

Arrival tip: Style in the web design process is more common, clever use of style can not only make the page more beautiful, but also can be very good to standardize the Web page display effect. Next stop, we'll use FrontPage XP to design our web page form.