Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Enhancing Your Web Site with ... > Creating and Displaying Thumbnails

Creating and Displaying Thumbnails

Thumbnails are small versions of graphics that are hyperlinked to full-size versions. Thumbnails are often used on Web pages that contain many graphics that Web visitors might want to see (catalog items, for example). Because thumbnails are small, they download faster, so visitors are less likely to get impatient and move to another site.

In this exercise, you create a thumbnail of a picture and test it in FrontPage.

USE the pictures Web page in the practice file folder for this topic. This practice file is located in the My Documents\Microsoft Press\FrontPage 2003 SBS\Pictures\Thumbnail folder and can also be accessed by clicking Start/All Programs/Microsoft Press/FrontPage 2003 Step By Step.

1.
On the File menu, click Open.

2.
In the Open File dialog box, browse to the practice file folder for this topic, and double-click the pictures Web page.

3.
Click the picture on the page to select it and activate the Pictures toolbar.

4.
On the Pictures toolbar, click the Auto Thumbnail button.

The picture shrinks to thumbnail size and is surrounded by a blue border that indicates the presence of a hyperlink.

The hyperlink links the thumbnail version of the graphic to the original, which is no longer displayed on the page.

5.
At the bottom of the Page view editing window, click the Show Split View button to display the HTML code that links the thumbnail to the original graphic.

The code looks something like this:

<p><a href="PH01245J[1].jpg">

<img border="2" src="file:///C:/Documents%20and%20Settings/Joan/
Local%20Settings/Temporary%20Internet%20Files/FrontPageTempDir/
PH01245J[1]_small.jpg" xthumbnail-orig-image="PH01245J[1].jpg"></a></p>

6.
At the bottom of the Page view editing window, click the Show Design View button to return to the Design pane.

7.
Drag the handles surrounding the selected thumbnail to make it bigger.

The thumbnail becomes blurry and grainy when you make it bigger because it is not as detailed as the original picture.

8.
After you have seen the effect of enlarging the thumbnail, on the Standard toolbar, click the Undo button to return the thumbnail to its original size.

9.
To experience the thumbnail link as your Web visitors will, on the Standard toolbar, click the Preview in Browser button. Save the page and embedded graphics when prompted to do so.

Your Web page opens in your browser, displaying the hyperlinked thumbnail.

10.
Click the thumbnail to display the full-size graphic, and then click the browser’s Back button to return to the thumbnail.

CLOSE the browser, and then close the practice file.

BE SURE TO close the Pictures toolbar if you don’t want to display it.

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint