Web Resources

Tips

from  DUMMIES.com

 Rollover Effects with FrontPage
 

With FrontPage 2002, you can add a rollover effect to a text link to make the link more interesting on the Web page. A rollover is a special effect that occurs when the mouse pointer rolls over the text link. The rollover effect can change the color, size, or style of the font.

A rollover lasts as long as the mouse pointer passes over the text. When you move the mouse pointer away from the text, the link changes back to normal.

top
Image Crunching
 

Spinwave does just one thing, but it does it very well. The handy tool optimizes image files to save space and decrease download time. Spinwave handles not only GIFs, but also JPEGs, each file type having its own "image cruncher." Both an online version and a regular program that you can run on your own computer are available. The online version is free.

Here's how Spinwave works:

  1. Go to Spinwave. JPEG Cruncher is on top.  Beneath it is GIF Cruncher.

 

  1. Click the Browse button in the cruncher that matches the file type that you want to work with.

     

  2. Select the file on your system.

     

  3. If you're using JPEG Cruncher, choose a JPEG image quality setting from the drop-down list to the right of the Crunch button.

     

  4. Click the Crunch button.   In a few moments, a new page appears, showing a series of images.  The top one is the original one, for comparison purposes.  Each lower one is of slightly lesser quality but has a smaller file size.
 
  1. Scroll down until you find an image that still looks good but takes up less space than the original and download it.

    top
 Adding Space around an Image
 

You can increase the amount of space around an image on a Web page. This is useful when you want to add space between an image and text that wraps around the image. FrontPage enables you to add space on both the left and right sides of an image or both above and below an image. You cannot increase the amount of space on just one side of an image.

Here's how you add space:

  1. Click the image you want to add space around.

     

  2. Click Format.

     

  3. Click Properties.   The Picture Properties dialog box appears. Note: If Properties does not appear on the menu, position the mouse over the bottom of the menu to display all the menu options.
  
  
  1. Click the Appearance tab.

     

  2. To change the amount of space on both the left and right sides of the image, double-click this area and type a number for the amount of space in pixels.

     

  3. To change the amount of space both above and below the image, double-click this area and type a number for the amount of space in pixels.

     

  4. Click OK to confirm your changes.

    The image appears with the spacing you specified. To deselect the image, click outside the image.

    top

 
 
Creating a Hover Button
 

Hover buttons are useful when you want to make your Web pages more interactive. For example, you can create a hover button for each item in a menu. When a reader moves the mouse over a menu item, the appearance of the item will change. This can help readers determine which menu item they are selecting. Here's how to create a hover button:

  1. Click the location on your Web page where you want to add a hover button.

     

  2. Click the Insert Component Button icon on your toolbar to display a list of components that you can add to your Web page.

     

  3. Click Hover Button. The Hover Button Properties dialog box appears.

     

  4. Type the text you want to appear on the hover button.

     

  5. Click Browse to select the Web page you want to appear when readers click the hover button. The Select Hover Button Hyperlink dialog box appears. This area displays all the Web pages in the current Web site.

     

  6. Click the Web page you want to link to in the current Web site list. If you want to link to a page on the Web, click the URL box and type in the address of the Web page.

     

  7. Click OK. The Web page you specified appears in the Link to: box.

     

  8. Click the Button color: box to select a color for the hover button when the button initially appears on your Web page.

     

  9. Click the color you want to use.

     

  10. Click the Effect: drop-down box to select the effect you want to occur when a reader moves the mouse over the hover button.

     

  11. Click the Effect color: drop-down box to select a color for the effect. Make sure you choose a different color than the color you selected in Step 9. You need to select a color only if you chose the Color fill, Color average, Glow, or Reverse glow effect in Step 10.

     

  12. Click OK to confirm your selections.
     

top
 Dealing with Navigation Design
 

Here are a few kernels to consider as you craft your Web site navigation:

Don't overuse real-world metaphors. For example, design buttons to look like those on a camera instead of making the whole interface look like one.

Leave a breadcrumb trail for users -- a trail of text links that traces a user's path through a site like this: Home, Category, Subcategory, Story.

Use a cross-navigation button scheme, with one button for each main category of your Web site.

Differentiate the visual design of nonclickable and clickable elements: Don't use the same graphic as a button on one page and a headline on another.

  • Use rollover animation on buttons to enhance interaction and usability.

     

  • Always place buttons in the same location on the page and don't change their appearance: Consistency is key.

     

  • Always label icons and buttons by their function.

top
 Including Copyright Information on a Site

You can include a copyright statement for your Web page. Specifying copyright information enables you to indicate that you do not want the information on your Web page copied without your permission. Only visitors who view the HTML code for your Web page will see the copyright information you specify.

  1. Click anywhere on the Web page you want to specify copyright information for.

     

  2. Click File.

     

  3. Click Properties. The Page Properties dialog box appears.
 
  1. Click the Custom tab.

     

  2. Click Add to specify the copyright information for the Web page. The User Meta Variable dialog box appears.
 
  1. Type Copyright in the Name field.

     

  2. Value field - Click this area and type the copyright information for the Web page.

     

  3. Click OK to confirm the information you entered.
     

top
 Adding Author Info to Your Page

You can specify the name of the author of your Web page. When specifying the name of the author, you may also want to include the names of any people who helped create the Web page. Only visitors who view the HTML code for your Web page will see the author information you specify.

  1. Click anywhere on the Web page for which you want to specify author information.

     

  2. Click File.

     

  3. Click Properties. The Page Properties dialog box appears.
 
  1. Click the Custom tab.

     

  2. Click Add to specify the author information for the Web page. The User Meta Variable dialog box appears.
 
  1. Type the word author in the Name space.

     

  2. Type the name of the Web page author in the Value field. To specify more than one name, separate each name with a comma.
 
  1. Click OK to confirm the information you entered.

top
 Thumbnails Trim Download Time
 

Thumbnail versions of images have a special function -- they present the Web page visitor with an option. By creating a hyperlink from the thumbnail version of an image to the full-size version of the image, thumbnails enable visitors to download the page rapidly but still view the larger, more detailed version, if they want to see it. They simply have to click the thumbnail image link to see the full version. Of course, at that point, they have to wait for the larger image to download, but the use of thumbnails gives them the choice of whether to wait for it to download or not.

top
 Digital Images on Your Web Site
 

Now that you've got your own Web site, it's time to use your digital camera or scanner and place some images online. Keep these tips in mind for the best results:

  • Save your images as .jpg only.

     

  • Make sure your image is no larger than 72 dpi (dots per inch).

     

  • Choose RGB (red, green, blue) for your image, which is what monitors use. CMYK is for print purposes only.

    top

Date and Time


Some folks like their Web pages to display the date and time the page was last edited, so visitors know they are looking at timely information. FrontPage can automate this task for you, as follows:

  1. Place the cursor in the page where you want the time stamp to appear.

     

  2. Choose Insert, Date and Time. The Date and Time Properties dialog box appears.
 
  1. In the dialog box, choose a display option. If you want the time stamp to reflect when you last edited the page, choose Date This Page Was Last Edited. If you want the time stamp to reflect edits and automatic updates (such as if a Component automatically inserts information into the page), choose Date This Page Was Last Automatically Updated.
    
  1. In the Date Format list box, choose the date format you prefer.

     

  2. In the Time Format list box, choose the format you prefer.

     

  3. Click OK to close the dialog box and insert the time stamp into your page.

top
  Creating a Photo Gallery in FrontPage 2002
Adapted From: FrontPage 2002 For Dummies

With a FrontPage Photo Gallery, you can easily add a professional-looking digital photo album to your Web site.

Think of Photo Galleries as thumbnails on caffeine. You select the photos that you want to appear in your Photo Gallery, and FrontPage generates thumbnails, lays them out nicely (in some cases with captions and descriptive text), and links the thumbnails to the full-sized photos.

First things first: How do you get your photos onto your computer? If you use a digital camera, the process is as easy as transferring the photo files from your camera's memory card to your computer's hard drive.

Film camera users must scan their photos — devices called scanners create a digital file from a photo print. If you happen to own a scanner, that's great. If not, you can take your photos to a well-stocked copy shop (most have scanning services), or you can send your film to a developer who scans the photos and sends you the digital files as well as the prints.

Digital cameras and scanners can save photo files as Web-friendly JPEGs. If your photos are saved in another graphic format, you need to convert them to JPEG in order to use them in your Web site. FrontPage converts files automatically, or you can convert the files using a separate graphics program.

After you save your photos as JPEGs on your hard drive or network, you're ready to begin. To create a photo gallery, follow these steps:

1. Create a new page, or open the existing page into which you want to insert a Photo Gallery.

If you're starting by creating a new page, save time by using the Photo Gallery page template. This template creates a page containing a Photo Gallery plus a placeholder heading and introductory text. If you use the Photo Gallery template, in the page, double-click the Photo Gallery to display the Photo Gallery Properties dialog box and then skip ahead to Step 7.

2. In the page, place the cursor where you want the Photo Gallery to appear.

3. Click the Web Component button on the Standard toolbar or choose Insert-->Web Component.

The Insert Web Component dialog box appears.

4. In the dialog box's Component Type list box, click Photo Gallery.

5. In the Choose a Photo Gallery Option list box, click the icon that corresponds to the page layout you want.

6. Click Finish.

The Insert Web Component dialog box closes and the Photo Gallery Properties dialog box appears with the Pictures tab visible, as shown in Figure 2. This dialog box enables you to select the photos that will appear in the Photo Gallery; choose design details, such as the thumbnail size, caption and descriptive text; and, if you like, select a whole new layout for the Photo Gallery.

figure

Figure 2: The Photo Gallery Properties dialog box.

7. In the dialog box, click Add, and choose Pictures from Files from the drop-down menu.

After you choose Pictures from Files, the File Open dialog box appears, enabling you to navigate your hard drive or network and select the photos that you want to appear in the Photo Gallery.

8. In the dialog box, navigate to the location of your photo files, select them, and then click Open.

After you click Open, the File Open dialog box closes and the Photo Gallery Properties dialog box becomes visible again. The filenames for the photos you've selected appear in the dialog box's file list, and thumbnail previews of the photos appear alongside the filenames.

To change the size of the thumbnail image that appears in the Photo Gallery, change the numbers in the Width and Height boxes (be sure Maintain Aspect Ratio is checked or the thumbnails will appear distorted when you change their dimensions). Click Set As Default Size if you'd like FrontPage to use the current thumbnail dimensions in future Photo Galleries.

To change the order of the photos as they appear in the Photo Gallery, click the photo's filename in the file list, and then click Move Up or Move Down.

You can also edit the full-sized photos. To do so, click the photo's filename in the file list, and then click Edit. The Edit Picture dialog box appears. This dialog box contains options that allow you to change the photo's resolution, rotate, or crop the photo. When you're done editing the photo, click OK to close the Edit Picture dialog box and return to the Photo Gallery Properties dialog box.

9. To add a caption and a description to each picture, click the picture's filename in the file list, and then type a caption and a description in the corresponding text boxes.

You can format the text in either of these boxes using the formatting options in the dialog box.

Note: If the Description text box appears dimmed, the layout you've chosen for your Photo Gallery doesn't display a text description.

10. To change the Photo Gallery's layout, click the dialog box's Layout tab, and then choose a new layout from the Choose a Layout box.

11. When you're finished, click OK.

The Photo Gallery Properties dialog box closes, and the Photo Gallery appears in the page.
Related Articles
Verifying Hyperlinks in FrontPage 2002
Creating a Custom Link Bar in FrontPage 2002
Importing an Existing Web Site into FrontPage 2002
Applying Web Site Themes via FrontPage 2003
Related Titles
FrontPage 2002 For Dummies
Front Page 2003 For Dummies
About Dummies   |   Register for eTips   |  

top

Creating a Custom Link Bar in FrontPage 2002
Adapted From: FrontPage 2002 For Dummies

To understand link bars, think of a scene from a Saturday morning cartoon: Bugs Bunny is lost in the desert, and while searching for an oasis, he comes upon a signpost stuck into sand. The signpost contains markers pointing every which way: "This way to Cairo," "This way to New York," "This way to Mars."

Link bars give your visitors a similar array of choices. Link bars are a collection of hyperlinks leading to the other pages inside your Web site. By placing a link bar inside each page of your site, you help your visitors find their way around. Think of link bars as signposts: "This way to the home page," "This way to the feedback form." With a single click, visitors are whisked off to the destination of their choice.

FrontPage 2002 gives you two methods for creating link bars. You can let FrontPage generate link bars based on a navigation structure you build, or you can create custom link bars containing links of your choosing.

Custom link bars require a little more initial work than navigation structure-based link bars, but are more flexible and will save you lots of time as your site grows. You can also create several custom link bars that you can insert in different pages or sections of your Web site.

To insert a custom link bar, follow these steps:

1. In the page, place the cursor where you want the link bar to appear.

2. Choose Insert-->Navigation.

The Insert Web Component dialog box appears, with the Link Bars component type selected.

3. In the dialog box's Choose a Bar Type list box, click Bar with Custom Links, and then click Next.

New options appear in the dialog box. These options enable you to choose how the link bar looks.

4. In the Choose a Bar Style list box, click the illustration that reflects how you'd like the link bar to look, and then click Next.

After you click Next, new options that enable you to choose whether you want a horizontal or vertical link bar appear in the dialog box.

5. In the Choose an Orientation box, click either the horizontal or vertical orientation illustration, and then click Finish.

Nope, you're not really finished. The Create New Link Bar dialog box appears prompting you to name your link bar.

6. In the dialog box's Name text box, type a brief name.

Depending on the setup of your Web site, you can create more than one custom link bar (say, one link bar for the site's top-level pages, and another for the site's individual sections). So, choose a name that reminds you of the link bar's placement or purpose in the site.

7. Click OK.

The dialog box closes, and the Link Bar Properties dialog box appears (see Figure 1). Note that, despite the same name, this dialog box is different than the dialog box that appears when you create a link bar based on your site's navigation structure.

 

figure

Figure 1: The Link Bar Properties dialog box appears when you insert a custom link bar into your page.

 

8. In the dialog box, click Add Link.

The Add to Link Bar dialog box appears. This dialog box looks and acts very much like the Insert Hyperlink dialog box.

9. In the dialog box, specify the details for the first hyperlink in the custom link bar, and then click OK.

The Add to Link Bar dialog box closes, and the Link Bar Properties dialog box comes back into view.

10. To add another link, click Add Link, and repeat Step 9 as many times as is necessary to complete the link bar.

If you want the link bar to contain links to the home page or the current page's parent page, in the Add to Link Bar dialog box, click the corresponding check boxes.

11. When the link bar is complete, click OK in the Link Bar Properties dialog box.

The dialog box closes, and the link bar appears in the page.

FrontPage can also generate link bars containing a linear set of back and next links. These link bars lead the visitor through links you specify sequentially (similar to a slide show). You can either create a new custom link bar with back and next links, or you can convert a link bar you created earlier.