|
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:
- Go to
Spinwave.
JPEG Cruncher is on top.
Beneath it is GIF Cruncher.
- Click
the Browse button in the cruncher that matches the file type
that you want to work with.
- Select
the file on your system.
- If
you're using JPEG Cruncher, choose a JPEG image quality
setting from the drop-down list to the right of the Crunch
button.
- 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.
- 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:
- Click
the image you want to add space around.
- Click
Format.
- 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.
- Click
the Appearance tab.
- 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.
- 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.
- 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:
- Click
the location on your Web page where you want to add a hover
button.
- Click
the Insert Component Button icon on your toolbar to display a
list of components that you can add to your Web page.
- Click
Hover Button. The Hover Button Properties dialog box
appears.
- Type the
text you want to appear on the hover button.
- 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.
- 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.
- Click
OK. The Web page you specified appears in the Link to:
box.
- Click
the Button color: box to select a color for the hover button
when the button initially appears on your Web page.
- Click
the color you want to use.
- Click
the Effect: drop-down box to select the effect you want to
occur when a reader moves the mouse over the hover button.
- 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.
- 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. |
- Click
anywhere on the Web page you want to specify copyright information
for.
- Click File.
- Click
Properties.
The Page Properties dialog box
appears.
- Click the
Custom tab.
- Click Add to
specify the copyright information for the Web page.
The User Meta Variable dialog box
appears.
- Type
Copyright in the Name field.
- Value field
- Click this
area and type the copyright information for the Web page.
- 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.
- Click
anywhere on the Web page for which you want to specify author
information.
- Click
File.
- Click
Properties.
The Page Properties dialog box
appears.
- Click
the Custom tab.
- Click
Add to specify the author information for the Web page.
The User Meta Variable dialog
box appears.
- Type the
word author in the Name space.
- Type the
name of the Web page author in the Value field.
To specify more than one name,
separate each name with a comma.
- 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 |
|
|
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:
- Place the
cursor in the page where you want the time stamp to appear.
- Choose
Insert, Date and Time.
The Date and Time Properties dialog
box appears.
- 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.
- In the Date
Format list box, choose the date format you prefer.
- In the Time
Format list box, choose the format you prefer.
- Click OK to
close the dialog box and insert the time stamp into your page.
top |
 |
|
|
|
|
|
|
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 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. |
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
top |
|
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 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. |
|
|
|
|
|
|
|
|
|
|
|
|
|