Add special effects to your Web site in Office

Applies to
Microsoft Office 2000

Does your Web site looks like everyone else's? If you would like it to stand out more, you might consider adding some special effects. It doesn't require as much technical expertise as you might think, and it can make your Web page much more exciting.

Some of the effects that you can achieve quite easily are:

  • Font effects, such as changes in size and color, and other style elements, with Hypertext Markup Language (HTML) tags.
  • Style sheet changes, such as page margins, spacing between lines, and background colors.
  • Animations that you can create yourself or use from the Microsoft Clip Gallery.
  • Dynamic Hypertext Markup Language (DHTML) effects, such as blinking/flashing text or interactive outlines.

Use special effects wisely

Before you change the look of your Web page, you should first determine the purpose, or theme of your page. It's also important to know your audience so that you project the appropriate image. Are you trying to attract customers to your business or visitors to your hobby page? What image would you like to project — serious, fun, or something in between? After you've answered these questions, you will have a better sense of how special effects can purposefully enhance your content. You don't want to use or overuse special effects that may just annoy visitors to your site.

HTML tags for fonts

If you don't specify a particular font, your Web page will probably have Times New Roman as its default. For this article, the Arial font is specified. Specifying a font (and its size, color, and style) that is different from the default is easy with Microsoft Word 2000, Microsoft Excel 2000, Microsoft PowerPoint® 2000, Microsoft Publisher 2000, and Microsoft FrontPage® 2000. These programs automatically generate the HTML tags that determine style elements, such as <b> to indicate bold font. Just create your Web page in Word, for example, and save it as a Web page.

To change fonts and their sizes, styles, and colors on a Web page in Word, Excel, PowerPoint, Publisher, and FrontPage

  1. Select the text whose font you would like to change.
  2. On the Format menu, click Font. (In Excel, click Cells on the Format menu, and then click Font.)
  3. On the Font tab, select the Font, Font style, Size, and Color.
  4. In Word, Excel, PowerPoint, and FrontPage, click Save As on the File menu, and select Web Page in the Save as type box.
    In Publisher, click Create Web Site from Current Publication on the File menu.

If you are building your Web page by using Microsoft Notepad or another text program that does not automatically generate HTML tags, you can manually type the tags.

To change fonts and their sizes, styles, and colors manually on a Web page

You can manually type the following to change the font from the default to Comic Sans MS, for instance:
<font face="Comic Sans MS">your text</font>

To make this font bold, blue, and two sizes bigger, you can type:
<b><font color="Blue" size=+2 face="Comic Sans MS">your text</font></b>
You can specify a color either by its name (such as "blue") or by its hexadecimal or Red-Green-Blue (RGB) value (such as 0000FF). For a list of color names and corresponding hexadecimal RGB values, see Colors By Name.

 Note    If you do not see the font changes that you have made, your browser may not support this particular font, or it may not be installed. Or you may simply need to refresh the page. To refresh the page in Microsoft Internet Explorer 5, just click the Refresh button.

For more information on tags and how to use them, see HTML for Beginners. For help in deciding on a font, as well as fonts you can install, see Microsoft Typography.

Style sheets

If you want to specify styles for an entire Web page or Web site, you can use a style sheet, a template that controls the HTML formatting of your Web page or site, much like a Word template controls the formatting of your document. The World Wide Web Consortium (W3C) recommends using style sheets. See Web Style Sheets on the W3C Web site.

With a style sheet, you can specify page margins, spacing between lines, background colors, and so on, and this information will override the browser's default settings. For example, a browser by default may show black text and a white background, but you can change that to white text on a black background with your style sheet. (Just keep your audience and their eyesight in mind when you make your choices!)

With a style sheet, you can revise an entire Web page or Web site without having to revise every line of your HTML code. This can save you a lot of time, especially if you update your Web page or site frequently. For more detailed information on creating style sheets, and for examples that you can use, see CSS Overviews and Tutorials.

Cascading style sheets (CSS)     A CSS is a style sheet that anticipates the possibility of other style sheets filling in or overriding its style. It is called "cascading" because a browser follows a cascading order of styles by trying to determine which style takes precedence. For example, not only can you attach one or several style sheets to a Web page, but your visitor can as well, so you may have multiple style sheets vying for control. You may have a preferred style, but a visitor with disabilities may attach a different style sheet for accessibility, and accessibility style sheets usually take precedence.

For more information, and for examples that you can use, see Cascading Style Sheets and Cascading Style Sheets, level 1 . For information on how to use a CSS with FrontPage, type working with cascading style sheets or create an external style sheet in the Office Assistant or on the Answer Wizard tab in the FrontPage 2000 Help window, and then click Search.

Animations

Animations are eye-catching and can capture the attention of a visitor to your Web page, but too many animations can be distracting. It is best not to overwhelm a visitor's visual senses. In general, animations are useful in the following cases:

  • To highlight an item on your Web page
  • To demonstrate a simple procedure
  • To illustrate the theme of your page (such as a sports motion clip for your football fan page)

You can create an animation yourself with a Graphics Interchange Format (GIF) image editing program, or use an animation from Clip Art and Media on Microsoft Office Online or the Office Clip Gallery.

To insert an animation from the Clip Gallery in Word, Excel, PowerPoint, and Publisher

  1. In Word, Excel, PowerPoint, and Publisher, click Picture on the Insert menu, and then click Clip Art.
  2. Click the Motion Clips tab.
  3. Select your motion clip category, select the clip, and then select Insert clip.
  4. In Word, Excel, and PowerPoint, click Save As on the File menu, and select Web Page in the Save as type box.
    In Publisher, click Create Web Site from Current Publication on the File menu.

 Note   The motion clip will not appear animated until viewed as a Web page. To play a motion clip, you must have a media player on your computer.

To create your own animations in PhotoDraw® 2000 version 2

  1. On the Web Effects menu, click Animated GIF.
  2. On the workspace, select the object that you want to animate.
  3. In the gallery on the work pane, click the effect that you want to apply.
  4. On the work pane, click Finish.
  5. Follow the steps in the Save Animated GIF Wizard, and click Save.

For suggestions about optimizing animations on your Web page, see Using graphics on your Publisher 2000 Web site.

DHTML

DHTML is a combination of HTML tags, style sheets, and programming (such as in animations) that makes your Web page interactive.

Mouseover effect     One example of DHTML is a mouseover effect that visually shows the visitor that the cursor is over a certain element (menu item, hyperlink, and so on) on a Web page. For examples of mouseover effects you can use, see The Mouseover that Roared. These effects can include:

  • Blinking/flashing -- by changing font or background colors.
  • Enlarging/shrinking text -- by changing font sizes.

"Flying" text     You can use DHTML to make words fly on or off the page. See HTML and DHTML Overviews and Tutorials for instructions on how to create this and similar effects.

Interactive outline     You can also create an interactive outline that expands and collapses when you click items to show or hide text. This is not only a great space-saving feature when items are initially collapsed, but it also allows visitors to decide what they would like to expand for more information. See MSDN Online Samples to learn how to create such an outline.

If you are not comfortable writing DHTML manually yourself, you can use FrontPage to automatically generate DHTML code for effects, such as flying out, or formatting changes associated with certain events (a click, double-click, mouseover, or page load).

To generate DHTML automatically and animate a Web page event in FrontPage 2000

  1. Select an event that you want to animate.
  2. On the Format menu, click Dynamic HTML Effects.
  3. Select an event from the drop-down menu.
  4. Select an effect from the drop-down menu.
  5. Select settings from the drop-down menu.
  6. Select your options, and then click OK.

 Note   If the DHTML Effects toolbar is dimmed, click Page Options on the Tools menu, and then click the Compatibility tab. Make sure that the Dynamic HTML check box is selected.