Training
Certifications
Books
Special Offers
Community




 
Troubleshooting Microsoft® FrontPage® 2002
Author Jim Buyens
Pages 384
Disk N/A
Level Beg/Int
Published 03/27/2002
ISBN 9780735614895
ISBN-10 0-7356-1489-X
Price(USD) $19.99
To see this book's discounted price, select a reseller below.
 

More Information

About the Book
Table of Contents
Sample Chapter
Index
Related Series
Related Books
About the Author

Support: Book & CD

Rate this book
Barnes Noble Amazon Quantum Books

 


Formatting



Formatting

Click to view graphic
Click to view graphic

Changing the font attributes of a Table Of Contents has no effect

Source of the problem

When you apply font formatting to a Table Of Contents component, the formatting appears in the Page view editor but not in Preview mode or when you view the page in a Web browser.

FrontPage doesn't write the font information for the Table Of Contents to the page. The Table of Contents component uses only heading tags (such as H1, H2, or H3). FrontPage doesn't apply any other font or style formatting to the list.

How to fix it

To work around this behavior, use Cascading Style Sheets (CSS) to define the styles for the heading attributes. To do this, follow these steps:

  1. Open the page that contains the Table Of Contents component.
  2. On the Format menu, click Style.
  3. When the Style dialog box appears, click HTML Tags in the List drop-down list.
  4. Select a in the Styles list, and click Modify.
  5. When the Modify Style dialog box appears, click the down arrow to the right of the Format box, and then click Font in the drop-down list.
  6. Any styles you define using this procedure will apply to all hyperlinks and paragraphs with the heading size you specified.

  7. When the Font dialog box appears, click the format that the table of contents entries for ordinary Web pages should have. For example, in the Font Style area, click Italic.
  8. Any styles you define at this point will apply to the entire Web page, and not just to the Table Of Contents component. This isn't a problem if, as is common, the Web page contains only the Table Of Contents. If, however, the page contains any other content, you might have to override the formatting you selected for the Table Of Contents.

  9. Click OK to close the Font dialog box.
  10. Click OK to close the Modify Style dialog box.
  11. Click H1 in the Styles list.
  12. Repeat steps 5-8 for the H1 tag and others, as necessary.

More information

The Table Of Contents component works by first listing all the links in a starting page that you specify when you configure the component. Many designers call these "level two" pages because they have links directly from the home page.

Under each level two page, FrontPage lists all the hyperlinks from that page to a level three page. Under each level three page it lists all the hyperlinks from that page to a level four page, and so forth.

The text that identifies each page is the Title text. To enter or modify this text, open the page in Page view and then, on the File menu, click Page Properties.

It's quite common after creating a new Table Of Contents component to find many of the Web pages identified with names like New Page 2 or New Page 683. This is because you haven't yet given your pages meaningful titles. Because the title of each Web page is quite evident to Web visitors—it appears in the browser's Title bar—you really should go back and give all your pages reasonable titles.

A more difficult problem with the Table Of Contents component is that it picks up various Web pages you'd rather it didn't. Most Web pages contain not only "primary" hyperlinks—meaning those that truly reflect your Web's intended structure—but also various "convenience" links that point to almost random but nevertheless useful locations. Unfortunately, the Table Of Contents component doesn't know the difference and displays all links, significant or not. There's really no fix for this other than removing the extraneous links, and that might be something you're not prepared to do.

The Table Of Contents component, like most things in life, is neither a quick and universal fix nor a useless failure. If it meets your needs, don't hesitate to use it. But if your needs differ from what the component provides, forcing the labor-saving component to do what you want might be more work than creating a clickable site map by hand.

Changing the background color of a shared border changes the wrong border

Source of the problem

When you change the background color of a shared border, the Border Properties dialog box defaults to the first available border, not to the last border you clicked in the Shared Borders dialog box.

When the Border Properties dialog box appears, you must use the Border drop-down box to select the border you want.

How to fix it

To change the background color of a shared border, be sure to select the correct border in the Border list in the Border Properties dialog box. To do this, follow these steps:

  1. Open the page you want to change.
  2. On the Format menu, click Shared Borders.
  3. In the Shared Borders dialog box, activate the shared borders you want by selecting or clearing the corresponding check boxes.
  4. Click to view graphic
    Click to view graphic

    Note that if you clear all the check boxes, no shared borders will be in effect and FrontPage therefore dims the Border Properties button. However, because this problem assumes you're using one or more shared borders, the Border Properties button should be available. Click it.

  5. Click the down arrow to the right of the Border box, and select the border you want in the drop-down list.
  6. Click to view graphic
    Click to view graphic

  7. To specify a background color for that border, select the Color check box, and then open the associated Color picker.
  8. Click to view graphic
    Click to view graphic

  9. To specify a background picture, select the Picture check box, and then use the Browse button to locate the picture file.
  10. Click OK twice to close the Border Properties and Shared Borders dialog boxes.

The hyperlink rollover effects built into FrontPage aren't sufficient

Source of the problem

You can make your Web pages more interactive by opening them in Page view and selecting the Enable Hyperlinks Rollover Effects check box on the Page Properties dialog box. (To display this setting, click Properties on the File menu, and then click the Background tab.)

This check box and the options available after clicking the associated Rollover Style button provide a fair number of options but don't exploit the full flexibility of Cascading Style Sheets (CSS). But by hand-entering CSS code, you can obtain several effects not available through the Rollover Style button.

How to fix it

Open a new or existing Web page and make sure it contains one or more ordinary text hyperlinks. Here's the procedure to create a new page for experimentation:

  1. On the Standard toolbar, click the New Page button to create a new, blank Web page.
  2. Type, "Search Microsoft Knowledge Base."
  3. Select the text, "Microsoft Knowledge Base."
  4. On the Standard toolbar, click the Insert Hyperlink button.
  5. When the Insert Hyperlink dialog box appears, in the Address field, enter http://search.microsoft.com, and click OK.

Make underlines a different color

In this effect, the hyperlink text color will be the same as the text color of the document. Only the line under each hyperlink will appear in a different color:

  1. Open the page in which you want the effect to occur.
  2. At the bottom of the Page View window, click the HTML tab.
  3. Insert the following code as a new block of lines between the <HEAD> and </HEAD> tabs near the top of the page:
  4. <style>
    body { color: black; background-color: white;
    font-family: sans-serif }
    a { color: black; text-decoration: none;
    border-bottom-style: solid;
    border-bottom-width: 1px }
    a:link { border-bottom-color: blue }
    a:visited { border-bottom-color: purple }
    a:hover { border-bottom-color: green }
    a:active { border-bottom-color: red }
    </style>

    At the bottom of the Page view window, click the Preview tab to see the effect of your changes.

    The <style> and </style> tags mark these lines as CSS code that applies to the entire Web page.

The second and third lines constitute a CSS rule that applies to the entire body of the Web page. They contain three formatting commands:

  • One to make the default text color black.
  • Another to make the background color white.
  • A third that tells the browser to display the entire page in the browser's default sans-serif font.

The next three lines constitute a rule that applies to all hyperlinks. (The HTML tag for a hyperlink is <a>, for anchor.) It contains four specifications:

  • The specification color:black makes all hyperlink text black.
  • The specification text-decoration: none turns off text underlining.
  • The specification border-bottom-style: solid draws a solid border beneath all hyperlinks.
  • The specification border-bottom-bottom-width: 1px makes the solid border one pixel in thickness.

The last four lines set the border color to different colors for ordinary hyperlinks, recently visited hyperlinks, hyperlinks currently beneath the mouse pointer, and whatever hyperlink the visitor clicks. The hyperlink text itself will remain black.

If you have trouble seeing the underline color change, increase the thickness to 3 or 5 pixels.

Outline buttons

This effect is similar to the previous one, except that it draws a border around all four sides of each hyperlink. The following code creates the effect of hyperlink text within a hollow square button:

<style>
body { color: black; background-color: white;
font-family: sans-serif }
a { color: black; text-decoration: none;
border-style: solid; border-width: 2px;
padding: 2px }
a:link { border-color: blue }
a:visited { border-color: purple }
a:hover { border-color: green }
a:active { border-color: red }
</style>

Here's how this code differs from that in the previous example:

  • All the border-bottom attributes are now simply border attributes. This applies them to all four borders.
  • The a rule contains the property padding: 2px. This adds two pixels of empty space around each hyperlink.

Hover buttons

This effect creates solid hover-style buttons. Change the CSS code to the following:

<style>
body { color: black; background-color: white;
font-family: sans-serif }
a { text-decoration: none; padding: 3px }
a:link { color: white; background-color: blue }
a:visited { color: white; background-color: purple }
a:hover { color: white; background-color: green }
a:active { color: white; background-color: red }
</style>

Here's how this code differs from that in the previous example:

  • The a rule no longer specifies a border, but does specify "padding" of three pixels. This adds three pixels of empty space around each hyperlink.
  • The last four rules specify text and background colors for each hyperlink state: link (meaning normal), visited, hover (meaning mouse over), and active (just clicked). Note that the text color is always white but the background color is different. This makes the hyperlink look like a solid rectangle that changes colors as you pass the mouse pointer over it, click it, and so forth.

Alter text styles

This effect formats all hyperlink text as non-underlined, italicized, and lowercase. Unvisited links appear in bold text, and links are converted to uppercase text when a Web visitor rests the mouse pointer over the link:

<style>
body { color: black; background-color: white;
font-family: arial }
a { text-decoration: none; font-style: italic;
text-transform: lowercase }
a:link { color: blue; font-weight: bold }
a:visited { color: purple }
a:hover { color: green; text-transform: uppercase }
a:active { color: red }
</style>

Here's how this code differs from that in the previous example:

  • There are no borders or padding.
  • There are no special background colors.
  • The a rule specifies that all hyperlink text should appear in italic and lower case.
  • The a:link rule specifies that ordinary hyperlink text should appear in bold face.
  • The a:hover rule specifies that the hyperlink text should appear in upper case whenever the mouse is over that hyperlink.

More information

Like the hyperlink rollover effects built into FrontPage, these examples barely scratch the surface of what is possible. Working with this code, however, should give you the ability and incentive for further experimentation and investigation.

For additional references on this topic, browse http://search.Microsoft.com, and search for the following article numbers:

  • Q196488 What Are Cascading Style Sheets?
  • Q205996 How to Create Cascading Style Sheets in FrontPage
  • Q240972 How to Remove Underlines from Hyperlinks
  • Q222949 Hover Effects for Form Buttons using DHTML and CSS

I can't get rid of the underlining on hyperlinks

Source of the problem

From the standpoint of typography, underlining is an archaic technique that dates back to the early days of typewriters. Now that computers handle fonts and other typographical effects with ease, underlined hyperlinks are quite a throwback. This solution explains how to remove underlining from hyperlinks in Microsoft FrontPage 2002.

How to fix it

Remove the underline from a single hyperlink

To remove the underline formatting from a single hyperlink:

  1. Select the hyperlink you don't want to be underlined.
  2. On the Formatting toolbar, click the Underline button to remove the underline formatting.

Remove the underline from all hyperlinks

You can remove the underline from all hyperlinks in a page by adding a <STYLE> section to the page. To do this:

  1. On the Format menu, click Style.
  2. When the Style dialog box appears, locate the list box titled List, and select HTML tags.
  3. In the Styles list box, select a.
  4. Click the Modify button.
  5. When the Modify Style dialog box appears, click the Format button, and then click Font.
  6. When the Font dialog box appears, select the No Text Decoration check box.
  7. Click to view graphic
    Click to view graphic

  8. Click OK three times to close the Font, Modify Style, and Style dialog boxes.

Cellspacing or cellpadding attributes disappear from HTML

Source of the problem

FrontPage might remove the cellspacing or cellpadding table attributes from your HTML when you set the Cell Padding attribute of a table to 2 pixels or when you set the Cell Spacing attribute of a table to 1 pixel.

These values are the browser defaults for the given properties. FrontPage removes both the attribute and the value because they're unnecessary.

How to fix it

To work around this behavior, change attribute values in the HTML source. To do this, follow these steps:

  1. Right-click the table, and then click Table Properties on the shortcut menu.
  2. When the Table Properties dialog box appears, type 0 in the Cell spacing and Cell padding boxes, and then click OK.
  3. Select the table.
  4. Click the HTML tab at the bottom of the Page view window.
  5. Locate the attributes for the table. The code will look somewhat like the following:
  6. <table border="1" cellpadding="0" cellspacing="0"
    width="100%" id="AutoNumber1">

  7. Change the cellpadding and cellspacing attribute values, so that your code looks similar to the following:
  8. <table border="1" cellpadding="1" cellspacing="2"
    width="100%" id="AutoNumber1">

  9. Switch back to Normal view.

I right-clicked an inline frame, but the Inline Frame Properties command didn't appear

Source of the problem

When you use FrontPage to open a Web page that contains an inline frame (IFRAME), and then right-click the inline frame, the resulting shortcut menu doesn't contain an Inline Frame Prop-erties command.

You can select an inline frame only by clicking its outer edges. When you click in the middle of the IFRAME, you select the properties for the underlying page.

How to fix it

To work around this problem, follow these steps:

  1. Move the mouse pointer over the edge of the frame.
  2. When the mouse pointer turns into an arrow, right-click to select the frame.
  3. Click to view graphic
    Click to view graphic

    An Inline Frame Properties option will appear on the shortcut menu.

I can't create an inline frame with a margin width of zero

Source of the problem

Even though 0 is a valid value for the margin width of an inline frame, entering a Margin Width of 0 in the Inline Frame Properties dialog box will cause this error message to appear:

"Please enter an integer between 1 and 100000."

Click to view graphic
Click to view graphic

How to fix it

To work around this problem:

  1. To avoid the error message, temporarily set the margin width to 1.
  2. Click OK to close the Inline Frame Properties dialog box.
  3. With the inline frame still selected, at the bottom of the Page view window, click the HTML tab.
  4. Locate this value:

    marginwidth="1"

    Change it to:

    marginwidth="0"

The WordArt gallery doesn't provide enough formatting options

Source of the problem

Inserting WordArt is simple but might not produce the appearance you had in mind. Fortunately, FrontPage has far more options than the WordArt Gallery provides.

How to fix it

If none of the styles in the WordArt Gallery meet your needs, choose the style that's closest to what you want and then modify the results using these tools:

  • Sizing Handles To resize a WordArt object, select it, and then drag one of the eight circular sizing handles. There's one sizing handle at each corner and one in the middle of each side.
  • Rotation Handle To rotate a WordArt object, select it, and then drag the green rotation handle in a clockwise or counterclockwise direction. This handle appears above and connected to the white sizing handle in the middle of the top edge.
  • Format WordArt dialog box To display this dialog box, right-click the WordArt object and then, on the resulting shortcut menu, click Format Word Art. This dialog box has six tabs but only four of them apply to WordArt objects.
  • Click to view graphic
    Click to view graphic

  • Colors and Lines The Fill section of this tab controls the WordArt's color and transparency. If you open the Color drop down box and click Fill Effects, you can specify gradients as well as solid colors. The Line section and the Arrows section don't apply to WordArt objects and are always dimmed.
  • Size Click this tab to specify exact measurements for height, width, and rotation.
  • Layout Click this tab to specify how other content on the Web page should flow around the WordArt object.
  • Picture This tab doesn't apply to WordArt objects and will always be dimmed.
  • Text Box This tab doesn't apply to WordArt objects and will always be dimmed.
  • Web This tab modifies the verbiage that the WordArt Object displays.
  • Enter WordArt Text dialog box This dialog box modifies the font, font size, bold, and italic properties of the WordArt text, as well as the text itself. To display it, double-click the WordArt object.
  • WordArt toolbar To display this toolbar, on the View menu click Toolbars, and then click Word Art.

To modify a WordArt object, first select the object, and then use the following toolbar buttons:

  • Insert WordArt Creates a new WordArt object at the current insertion point.
  • Edit Text Displays the Edit WordArt Text dialog box.
  • Click to view graphic
    Click to view graphic

  • WordArt Gallery Displays the WordArt Gallery dialog box.
  • WordArt Shape Displays an assortment of shapes that can form the boundary of your WordArt text. For example, you can fit the WordArt text inside an octagon, triangle, parallelogram, or circle rather than the default rectangle.
  • WordArt Same Letter Heights Toggles the WordArt object between normal text display and a mode where all letters-even upper case and lower case, for example-are the same height.
  • WordArt Vertical/Horizontal Text Toggles the WordArt object between right-to-left and top-to-bottom text display.
  • WordArt Alignment Sets text alignment to left, center, right, word, or stretch.
  • WordArt Character Spacing Modifies the spacing between letters. Typographers call this "kerning."
  • Drawing toolbar To display this toolbar, on the View menu click Toolbars, and then click Drawing.

To modify a WordArt object, first select the object, and then use the following toolbar buttons:

  • Fill Color This button provides the same options as the Color drop-down box in the Colors And Lines tab of the Format WordArt dialog box. As before, click Fill Effects to specify a gradient.
  • Shadow Style This button displays an assortment of preconfigured shadow styles, plus a Shadow Settings choice that displays a Shadow Settings toolbar. This toolbar turns shadowing on and off, nudges the shadow left, right, up, or down, and modifies the shadow color.
  • 3-D Style This button displays an assortment of three-dimensional styles, plus a 3-D Settings choice that displays a 3-D Settings toolbar. This toolbar turns 3-D effects on or off and also controls tilt, depth, direction, lighting, surface, and 3-D color.

More information

FrontPage displays Word Art objects—and a range of other drawing objects as well—using a technology called Vector Markup Language (VML). VML describes pictures as a series of points, lines, and curves, and not—like a GIF or JPEG file—as a series of colored dots. Pictures consisting mostly of lines and colored shapes are drastically smaller when expressed as VML rather than GIF or JPEG files.

Because not all browsers support VML, FrontPage:

  • Creates a GIF picture equivalent to each drawing area.
  • Creates HTML to display this picture but surrounds it with VML code that tells the browser not to display it.

Together, these actions produce the following results:

  • If the browser understands VML, it displays the picture as VML and ignores the HTML to display the equivalent GIF picture.
  • If the browser doesn't support VML, it ignores the VML code, finds the HTML to display the GIF picture, and therefore displays the GIF version.

To control the details of this approach:

  1. On the Tools menu, click Page Options.
  2. When the Page Options dialog box appears, click the Compatibility tab:
  3. The VML Graphics check box controls whether options—such as WordArt—that create VML graphics are enabled or dimmed.

The Down Level Image File check box controls the creation of GIF files that correspond to each VML picture. Selecting this box tells FrontPage to create such files. Clearing it means browsers that don't support VML will bypass the picture.



Last Updated: March 1, 2002
Top of Page