MS FrontPage Tips

Picture of a keyboard.

 

Back to Training
Home Page

TIP #1: FIND OR REPLACE A WORD (All Versions)

FrontPage looks a great deal like a word processor at times. For example, in the EDIT MENU you'll find both FIND and REPLACE commands. These don't have all the special options of the Find and Replace in Word, but they will let you search for -- any typed phrase.  And you can search only for whole words or matching case (the same upper -- and lower-case letters in the word).  And because it has combined the Explorer and Editor of previous versions, you'll see that versions 2000 and later also let you choose whether to search all pages of a web or just the current page.


TIP #2: HOME PAGE NAME (All Versions)

What should you name your Web site's home page? Only your web server administrator knows for sure, so you'll have to ask him or her. Some servers need "index.htm." Others need "default.htm". And some require the ".html" ending on either "index" or "default." If you use the wrong name, the server won't even know it has a home page for your site.


TIP #3: MAGNIFY CLIPS

FrontPage comes with 1600 pieces of clipart in the Microsoft Clip Gallery.  You can add any of these to a Web page by clicking on the page where you want the clipart, then:

FrontPage 2000:

  •  INSERT menu/ CLIPART  
  • In the Clip Gallery window, you choose the category of art on the left, and then the particular image on the right. 
  • If you're not entirely sure which clip you want, maybe you're not seeing them well enough because of the tiny size of the thumbnail versions of the pictures. Click to check the Magnify box on the right side of the Clipart Gallery window. That will give you a better view.

FrontPage 2002 & 2003:

  • Insert menu, Picture, ClipArt
  • In the Task Pane, enter a keyword to search the clipart gallery
  • click once on  the clipart image you want inserted into your page

TIP #4: MARQUEE FOR FREE

A "Marquee" will scroll text, moving it past the web page visitor's eyes without any mouse efforts by the visitor.  To create this effect:

Versions Prior to 2000:

  • In the EDITOR select the TEXT
  • Open INSERT/MARQUEE
  • Click OK

Of course there are alot of options in that Marquee Properties dialog box, and you can play with them before clicking OK.  But this simple approach will make that selected text scroll in from the right toward the left.

FrontPage 2000:

  • highlight the text
  • Insert menu/Component
  • choose Marquee

FrontPage 2002 & 2003:

  • highlight the text
  • Insert menu/Web Component
  • In the left pane, choose Dynamic Effects and in the right pane, choose Marquee
  • You can type new text in the text box or your highlighted text will appear in the text box

TIP #5: CUT, COPY, AND PASTE SHORTCUTS (All Versions)

Frontpage comes with shortcuts  that are faster when cutting, copying and pasting.

  • Ctrl/X  -  to cut
  • Ctrl/C  -  to copy
  • Ctrl/V  -  to paste

NOTE:  Your text must be HIGHLIGHTED in order to do these tasks


TIP #6: TARGET YOUR WEB OR WEB PAGE FOR INTERNET EXPLORER AND NAVIGATOR (Versions 2000 - 2003)

With FrontPage 2000 - 2003, you can target your web for compatibility with specific browsers.
To target your web or web page for Internet Explorer and Navigator, do the following:

  •  Open FrontPage and open your web project.
  •  Choose Tools, and select Page Options.
  •  Select the Compatibility tab (Authoring tab for FrontPage 2003).
  •  In the Browser box, select "Both Internet Explorer and Navigator".
  • You can select the specific versions of browsers in the Browser versions box.

    It is a good idea to test your web pages in multiple browswers while they are being created and tested and before they are actually published. This allows you as the developer, t
    o see the pages through many different points of view. It may necessitate more development time, but helps to ensure your pages will be easy for everyone to read and follow.

TIP #7: CORRECTING LINKS OF AN IMPORTED WEB TO REFER TO THE URL RATHER THAN A NETWORK DRIVE (All Versions)

After you Import a web, edit your pages, and republish the web to the Web Server mapped as a network drive, you may find that your hyperlinks point to the network drive as opposed to the appropriate URL

For example, you may find that your links look similar to Y://folder_name rather than to a URL such as http://www.ee.psu.edu/acadaff/ (for Electrical Engineering's academic web pages) or http://www.ie.psu.edu/courses (for Industrial Engineering's course web pages) or http://www.engr.psu.edu/www/trg (for our training pages).

This is a problem since visitors who aren't mapped to the network drive will get a "Page not found" notice when they follow your links.

To correct this, select the 'Edit' menu and then choose 'Replace'. In the Find text box, enter 'file:///Y://trg/' (substituting Y: for the letter of the network drive and the appropriate directory). Using the Electrical Engineering example above, you would enter 'file:///Y://acadaff/'. For the Industrial Engineering example, you would enter  'file:///Y://courses/'. 

In the Replace text box, enter 'http://www.engr.psu.edu/www/trg/ (substituting the URL to your web space given to you by your web master). In the Electrical Engineering example, you would enter 'http://www.ee.psu.edu/acadaff/'. For the Industrial Engineering example, you would enter  'http://www.ie.psu.edu/courses/'. 

This action will replace all links pointing to the network drive to URLs and therefore, allow your links to be followed by all visitors, regardless if they are mapped to the network drive or not.


TIP #8: EDITING HYPERLINKS WHEN SPELL CHECKER HAS IDENTIFIED TEXT AS MISSPELLED (All Versions)

If your hyperlink text triggers the spell-checker the text will get a  red squiggly line under it and when you right mouse click on the link, you'll see spell checking options but not the hyperlink options.

To edit the hyperlink, highlight the hyperlink text and press Ctrl + K. This will open the Insert Hyperlink dialog box and you can edit your hyperlink.


TIP #9: USE THUMBNAILS TO REDUCE YOUR WEB PAGE'S DOWNLOAD TIME (All Versions)

You can create a thumbnail for your images to reduce the time it takes to download your web page(s).  A thumbnail is a smaller version of the actual image and when site visitors click on the thumbnail, a full size version of your image is displayed. This allows visitors to download your page quickly while still giving them the option to view the larger, more detailed version of your image.

To create a thumbnail:

  • Insert the image into your web page.
  • Select the image and from the Picture toolbar (View menu, Toolbars, Picture), click on the Auto Thumbnail icon. This will change the image to a thumbnail.
  • To test the thumbnail, click the Preview tab and click once on the thumbnail. A full size version of you image will display.

TIP #10: REDUCING THE SIZE OF GRAPHICS IN YOUR WEB (All Versions)

Here are four ways you can reduce the size of graphics in your web and consequently, decrease the download time of your web pages:

1. Cropping the Graphic

  • In Normal View, click on the graphic to select it and from the Pictures toolbar (View menu, Toolbars, Pictures), select the Crop icon. A "Crop box" will appear on your selected graphic. 
  • Drag the handles of the crop box to include the area of the graphic that you want to keep
  • Click on the Crop icon from the Pictures toolbar to remove the areas that are outside the crop box.

2. Resize the Graphic Proportionally

  • In Normal View, click on the graphic to select it and place your cursor on one of the four resize handles that appear in the corners of your graphic. 
  • Drag one of the resize handles inward
  • From the Pictures toolbar (View menu, Toolbars, Pictures), select the Resample icon. This will reduce the size of the file/web page.

3. Create a Thumbnail for your Graphic - A thumbnail is a smaller version of the graphic that a user can click on to see a full sized version of the graphic. 

  • In Normal View, click on the graphic to select it and from the Pictures toolbar (View menu, Toolbars, Pictures), select the Auto Thumbnail icon. You will see your graphic change to a thumbnail. 
  • Save your page and select the Preview tab
  • In preview, click on the thumbnail and a full sized version of your graphic will display.

4. For GIF Images, you can use a graphics editing program to reduce the number of colors in the graphic. If you reduce the number of colors from 256 to 32 (or even 16), often the reduction in the number of colors is unnoticeable but the size of the file is greatly reduced. Also, you can set your graphics program to store GIF graphics in an interlaced format and this allows visitors to see a blurry version of the image while it is still downloading.


TIP #11: CLICK HERE TO ACCESS A MICROSOFT KNOWLEDGE BASE ARTICLE - HOW TO RESOLVE PROBLEMS IN A FRONTPAGE WEB WHEN THE STANDARD RESOLUTIONS DO NOT WORK


TIP #12 - HIDE WEB PAGES (All Versions)

In FrontPage you can Hide a Web Page:

If you do not want site visitors to see certain pages in a web, you can hide these pages by placing them in the hidden folder _private, a folder that is in every web site. 

1. In Folders view (in version 2003, select the View menu and then choose Folders), select the pages you want to hide by holding the CTRL key down and clicking on the pages.
2. Drag the selected pages to the _private folder.
 
FrontPage automatically updates any hyperlinks to and from these pages to reflect their new location. 

You can also create subfolders in the _private folder to organize pages, because subfolders in the _private folder are also inaccessible to Web browsers.


Tip #13 - Adding Keywords to Your FrontPage Web Pages (All Versions)

To make your web pages more accessible to search engines, you can add Keywords to your pages.

Here's how:

1. From the File menu, select Properties and then click on the Custom tab.

2. Under the User Variables section (second half), click the Add button.

3. In the Name box, type "keywords".

4. In the Value box, type the index keywords for your web pages separating each keyword with a comma.

5. Click Ok and Save your page.


Tip #14 - Add Text that Describes a Graphic/Alternative Text (All Versions)

1. In Page view, right click on the graphic and select 'Picture Properties' from menu that appears.

2. Select the 'General' tab.

3. In the Text box, under Alternative representations, type the alternative text that describes the meaning of the graphic.

Note: Some Web browsers also display alternative text while the graphic is downloading, or when a site visitor moves the mouse pointer over the graphic.


Tip #15 - BELOW ARE USEFUL SITES FOR PSU Graphics…

You can get logo style pictures at: http://www.psu.edu/ur/webstyleguide/marksnew.html
Scenes from around campus at:
http://www.psu.edu/ur/webstyleguide/campus.html
Page banners at:
http://www.psu.edu/ur/webstyleguide/marks.html
And if you go to http://www.psu.edu/ur/webstyleguide, you will see an index listing with the above options.


Tip #16 - Inserting an Existing Web Site into FrontPage (Versions 2002 & 2003)

You can import an existing web site into FrontPage, make edits and then republish the web site to your web server. To import an existing web site, follow these steps:

  1. From the File menu, select Import.
  2. Choose Import Web Site Wizard.
  3. You can specify a location for the imported web site under the "Specify the location of the new web:" text box or you can click Browse and browse to the location for the imported web site.
  4. Click the Open button.
  5. Click Ok.
  6. The Import Web Wizard asks you to specify the current location of the web site you wish to import. You can enter the URL of the web site and then click Next.
  7. If you want to limit the imported web site, you can by specifying to limit it by pages, disk space or limit it to text and image files. If you do not wish to limit the imported web site, make sure all these check boxes are cleared and then click Next.
  8. At the final screen of the Import Web Site wizard, click the Finish button.

Tip #17 - Using the Find and Replace Feature to Search and Replace HTML Code in Web Pages (Version 2002 and above)

When you work with web pages in HTML view, you are only working with a representation of the actual HTML code for the page (not the actual HTML code as it appears when the page is saved to the file system). For this reason, it is not recommended that you use the Find and Replace to perform bulk, HTML code editing because you may not find all the web pages that contain the code/tag for which you are searching. To work around this, search for a tag without the closing tag indicator, such as <body rather than <body>.


Tip #18 - Create a Custom Confirmation Web Page for Web Forms(Version 2002 and above)

When you work with forms, FrontPage will provide the user with a default confirmation page displaying the fields and values the user submitted. However, you can create a custom confirmation page to display to the user when they click the Submit button on the form. In FrontPage 2002 & 2003, these are the steps you would follow to create a custom confirmation page:

  1. From the File menu, select New and select New Page or Web and then select Blank Page (you can also press CTRL+N or click on the New page icon from the standard toolbar).
  2. Type the text you want to display after a site visitor submits the form.
  3. Save the page and give it a name such as Confirmation.htm.
  4. In the original form, right click anywhere on the background of you page and select Form Properties.
  5. Click the Options button and then select the Confirmation Page tab.
  6. Click Browse and browse to the path of the Confirmation.htm file. Click Ok.
  7. Click Ok to close the "Options for saving results of form" dialog box. Press Ok again to close the Form Properties dialog box.
  8. Give both the Form and the Confirmation web pages to your web master and explain you would like both to be published on the web server. The webmaster will review your form and confirmation page.

Tip # 19 - GIF, JPG or PNG File Format for Images - Which One Should I Choose (All Versions)

GIF Format

  • allows for transparent color
  • can contain up to 256 colors

JPG or JPEG Format

  • commonly used for photo-realistic pictures containing thousands or millions of colors
  • you can control the file compression by changing the picture quality. The lower the quality, the higher the file compression and the file size is decreased.

PNG Format

  • an alternative for GIF that supports transparency for pictures containing thousands or millions of colors.
  • Some older Web browsers cannon display PNG pictures without a special plug-in

Tip #20 - Using Page Templates and Web Site Wizards (Versions 2002 and above)

Page Templates

You can use Page Templates to quickly and easily create web pages. You can make changes to your created pages based on page templates to suit your purposes. Here's how to create a page based on a page template:

  1. From the File menu, select New
  2. In the Task Pane, choose 'More Page Templates'.
  3. From the Page Templates dialog box that appears, select a page template depending on the type of page you wish to create. Your choices include Normal page, Bibliography, Photo Gallery, Search page, Guest Book, etc.

Note: For additional templates (including those for other MS Office programs), please visit: http://office.microsoft.com/en-au/templates/default.aspx.

Web Site Wizards

You can use Web Site Wizards to quickly and easily create entire web sites. You can make changes to any or all of the pages in the web site to suit your purposes. Here's how to create a web site based on a web site wizard:

  1. From the File menu, select New
  2. In the Task Pane, choose 'More Web site templates'.
  3. From the Web Site Templates dialog box that appears, select a web site wizard depending on the type of web site you wish to create. Your choices include Corporate Presence, Customer Support Web Site, Personal Web Site, Project Web Site, etc.

Tip #21 - Creating List to Break Up Your Web Page and Make It Easier To Read (All Versions)

You can create lists to make the information on your web page easier to read. Here's how:

Create an Unordered List (Bulleted List)

Type in the information and press Enter to move an item to a new line. After all the text is typed, highlight the text and click on the bullet icon from the Formatting toolbar. If you want to change the style of the bullet, select the Format menu and then choose Bullets and Numbering, select the Plain Bullets tab and choose the bullet style you prefer.

Create an Ordered List (Numbered List)

Type in the information and press Enter to move an item to a new line. After all the text is typed, highlight the text and click on the Number list icon from the Formatting toolbar. If you want to change the style of the Numbering, select the Format menu and then choose Bullets and numbering and then select the Numbers tab. Select the numbering style of your choice.


Tip #22 - Frames: Why or Why Not? (All Versions)

Frames allow you to divide your web page into specific areas, allowing you to make updates to an area while other areas remain unchanged.

However, frames have proved to be less popular and the following list provides some reasons:

  • they are hard to create and manage especially when attempting to create frames for various screen resolution settings
  • users have a hard time scrolling through pages with frames because as they scroll, it is sometimes difficult to determine which frame is scrolling
  • Back or Forward buttons may behave differently than pages without frames
  • Frames do not always resize when the browser window is resized
     

Tip #23 - Tips to Reduce Graphic File Sizes (All Versions)

Here are a few tips you can use to reduce the download time for pages containing graphics:

  • If your graphic contains multiple colors, choose a color to be transparent. This will make one less color for the browser.
  • Rather than using a graphic, perhaps you can use a background title.
  • If a graphic will be repeated on the page or on another page, reuse the same graphic file rather than inserting a new graphic file. This allows the graphic to be cached in memory allowing the browser to retrieve it from memory and therefore, a lot faster than re-downloading the same graphic.

Tip #24 - Create a Copy of Original Graphic Files Before Editing

Before you insert and edit graphic files, it's a good idea to first make a copy of the original file and work with this copy rather than the original. That way, if you make a mistake, you will not have altered the original and you can always start over by opening the original graphic file and saving it as another copy.


Tip #25 - Specifying Fonts for Browsers (All Versions)

You can specify the font and font characteristics (such as bold or color) for your web pages. However, if the visitor of your site's computer does not have the specified font installed, their browser will substitute a font to be used for display. Different browsers interpret fonts differently and therefore, Netscape and Internet Explorer may display the same page differently. Use common fonts for your web pages to increase the chance that your visitors will have this font installed on their machines.


Tip #26 - Using Photos in Web Sites - Do You Have a Right? (All Versions)

When you insert a photo on a web page within your web site, consider whether or not you have a right to use this photo. The publication of the photo may involve others, such as:

  1. Subjects in the Photograph itself - any recognizable person in the photograph has rights to the use of their image.
  2. Photographer - the photographer has rights to the photo.
  3. Developer - the developer of the photograph could have rights to the photo.
  4. Publisher - the publisher of the photograph has rights to the photo.
  5. Viewer - viewers of your photo have protection rights against certain kinds of photos (varies by country, state, or city).

Tip #27 - Three Items Every Web Page Should Contain (All Versions)

When you create a web page (or edit an existing page), you should verify that you have included the following three items:

Page Title - The page title will appear in the upper left hand corner when the page is displayed in the browser. If the visitor bookmarks your page, the page title will be the default bookmark title so it's important that the title describes the contents of the page.

Navigation Links - Include navigation links to other pages within your web site and remember that every page should at least have a link back to your site's home page.

Author and Copyright Information - Include Author and Copyright information on every page within your web site.


Tip #28 - Tips for Creating Great Web Sites (All Versions)

Here's some Web Site Design Tips:

  • Always provide a Page Title - make the title brief and descriptive.
  • The Home Page - make the site's purpose and navigation clear. The navigation section should include between five to seven links. If more links are necessary, consider organizing your links within five to seven areas.
  • Page Length - when possible, keep the page length to one screen length so the user does not have to scroll.
  • Buttons - make sure your buttons look and act like buttons.

Tip #29 - Add a Background Sound to a Page (All Versions)

You can add a background sound to your web page. Here's how:

  1. Right click anywhere on the background of the page and choose Page Properties from the menu that appears.
  2. In the Page Properties dialog box, select the General tab. Within the Background Sound section, click the Browse button. Browse to the sound file.
  3. So that the sound will NOT play repeatedly, uncheck the Forever option button and enter 0 for the Loop field (so the sound does not loop through and play again).
  4. Click Ok to close the Page Properties dialog box. Preview the page to test the sound.

Tip #30 - Converting Colors to Hexadecimal (All Versions)

A Color's hexadecimal code allows you to specify the amount of red, green and blue (RGB) to display in a web browser. A computer monitor displays colors in RGB and every color can be defined by a hexadecimal code (a mixture of red, green, and blue - RGB).

You have several options for finding out the hexadecimal code for your color of choice:


* On the Web:  Access hexadecimal color charts at: http://www.hypersolutions.org/pages/rgbhex.html

* Using a converter: If you already know the RGB percentages for a particular color, you can plug them into an online converter at: http://www.univox.com/home/support/rgb2hex.html

* Using image-editing software: Many software applications, including FrontPage, display the hexadecimal notation for any chosen color.

If you want to know more about the hexadecimal system or find out how to convert numbers from decimal to hexadecimal, visit Dr. Math
http://mathforum.org/library/drmath/view/55830.html


Tip #31 - Method to Change Character Spacing (All Versions)

Here's a method to change the amount of space separating characters (character spacing):

  1. Select the text for which you wish to change the character spacing. From the Format menu, choose Font. The Font dialog box will appear.
  2. In the Font dialog box that appears, select the 'Character Spacing' tab and select 'Expanded' or 'Condensed' in the Spacing list box. Select the number of pixels in the By list box. You can use the Position list box to specify the type of text this change will effect, such as baseline, superscript or subscript text.
  3. Click the Apply button, view the results, and click Ok to save the changes and close the Font dialog box.

Tip #32 - RSS Defined

Really Simple Syndication (RSS) is designed for sharing web content between sites. Specifically, it is an XML file you create that contains information about your site as well as changing information such as news stories, events listings, project updates, etc. If you want other sites to publish some of your content, create an RSS document and register the document with an RSS publisher.

For more information and an Introduction to RSS, visit http://www.webreference.com/authoring/languages/xml/rss/intro/.


Tip #33 - The Importance of Using Browser Safe Colors

If you use colors on your web pages that are not "browser safe", site visitors may experience dithering. Dithering is the process where a color that can not be shown on a computer is approximated by mixing two other colors. The result may not always be the color you had intended for your page. For this reason, it is important to always use "browser-safe" colors.

Table of Contents

Tip #33 - The Importance of Using Browser-Safe Colors

Tip #32 - RSS Defined

Tip #31 - Method to Change Character Spacing

Tip #30 - Converting Colors to Hexadecimal

Tip #29 - Add a Background Sound to a Page

Tip #28 - Tips for Creating Great Web Sites

Tip #27 - Three Items That Every Web Page Should Contain

Tip #26 - Using Photos in Web Sites - Do You Have a Right?

Tip #25 - Specifying Fonts for Browsers

Tip #24 - Create a Copy of Original Graphic Files Before Editing

Tip #23 - Tips to Reduce Graphic File Sizes

Tip #22 - Frames: Why or Why Not?

Tip #21 - Creating Lists to Break-Up Your Web Page and Make it Easier to Read

Tip #20 - Using Page Templates and Web Site Wizards

Tip # 19 - GIF, JPG or PNG File Format for Images - Which One Should I Choose?

Tip # 18 - Create a Custom Confirmation Web Page for a Web Form

Tip # 17 - Using Find and Replace in FrontPage Web Pages

Tip #16 - Importing an Existing Web Site into FrontPage

Tip #15 - Good Sites for Penn State Graphics

Tip #14 - Adding Alternative Text to Images

Tip #13 - Adding Keywords to your Web Pages

TIP #12 - Hide Web Pages

TIP #11 - How to Resolve Problems when the Standard Resolutions do not Work

TIP #10 - Reducing the Size of Graphics and Download Time

TIP #9 - Use Thumbnails to Reduce Your Web Page's Download Time

TIP #8 - Editing Hyperlinks When Spell Checker Marks it as Misspelled

TIP #7 - Correcting Links of an Imported Web to Refer to the URL Rather than a Network Drive

TIP #6 - Target Your Web or Web Pages

TIP #5 - Cut, Copy and Paste Shortcuts

TIP #4 - Marquee for Free

TIP #3 - Magnify Clips

TIP #2 - Home Page Name

TIP #1 -
Find or Replace a Word

Updated 08/23/05 - ABG