Graphics fill pages all across the Web. For better or for worse, if something can be photographed, illustrated, animated, or videotaped, you can probably find it online. Miss the news on CNN? Just go to their Web site and watch the streaming video.
Whether you plan to use images as an integral part of your site or just for visual accent, FrontPage makes it easy to include graphics. After you read about the basics of image file formats, you'll learn how to place a picture, video, or Flash animation anywhere on your page. Or why not let FrontPage create an instant photo gallery for you? You can then annotate each snapshot with your own clever commentary. Images can even display as a page background or act as hyperlinked navigation buttons. Read on to learn how.
Graphics fill pages all across the Web. For better or for worse, if something can be photographed, illustrated, animated, or videotaped, you can probably find it online. Miss the news on CNN? Just go to their Web site and watch the streaming video.
Whether you plan to use images as an integral part of your site or just for visual accent, FrontPage makes it easy to include graphics. After you read about the basics of image file formats, you'll learn how to place a picture, video, or Flash animation anywhere on your page. Or why not let FrontPage create an instant photo gallery for you? You can then annotate each snapshot with your own clever commentary. Images can even display as a page background or act as hyperlinked navigation buttons. Read on to learn how.
Know your medium. Before you start loading up your site with image files, it helps to know a little bit about the many graphical species roaming around out there and which ones make sense for you to use.
4.1.1. Image File Formats 101
Graphic files today come in all shapes, sizes, and types. Some high-quality graphic file formats, like TIF (Tapped Image Format) and BMP (Windows bitmap), provide terrific detail and color, which is a big reason why these formats are popular with people who want to print their images. But, as in real life, quality costs. The bandwidth and disk space these files require can slow the speed at which your Web pages load.
Tip: You can tell a file's format by its file suffix. For example, house.jpg, house.gif, house.tif, and house.bmp are all different formats of the same image file.
Most Web browsers are limited and can display only two image types: GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). These two formats take image information and compress it, while retaining the most important details so that the image remains recognizable. FrontPage also supports a new technology called PNG (Portable Network Graphics). PNG is an improvement on the GIF format, but isn't recognized by all browsers, especially older ones. As you add images to your pages, you'll probably want to use the two more standard file types, GIF and JPEG. GIF files are best for displaying images that have flat areas of color and simple lines, like a cartoon or company logo. JPEGs are good for images that contain subtle color variations, like photographs.
Tip: GIF files can also include multiple images within a single file. These simple GIF animation loops are usedannoyingly, for some peoples' tastesthroughout the Web to add movement to pages. Viewers don't need any special software to view them.
The bottom line: go with a GIF or a JPEG and be careful not to use too many images on one page since they'll affect your page's download time.
FrontPage's talents as a visual Web page editor really start to shine as you begin to add graphics to your site. The program provides a few easy options for inserting images.
4.2.1. Inserting Pictures
To insert a picture on a page, place your cursor wherever you want the picture to appear and select Insert 
Image From File, or click the Insert Picture button on the Pictures toolbar. (To access the toolbar, select View Toolbars Pictures.) A Picture dialog box like the one in Figure 4-1 opens. Browse to your image file and click Insert. The picture then displays on your Web page.
Note: FrontPage lets you retrieve a graphic that's stored anywhere on your computer so that you can add it to a page on your site. The program prompts you to save the image file in your site when you save the Web page. However, you may want to import a graphic into your site's images folder before you insert it on a pageespecially if the picture's a JPEG (see the "Editing JPEGs" sidebar on Section 4.3.2 to learn why and how).
|
4.2.2. Dragging Pictures onto Your Page
You may find yourself using the same images over and over on many different pages throughout your Web site. To speed things up, FrontPage lets you drag images directly onto your page.
To insert a picture that's already saved within your site, find it within the Folder List and drag it onto your page within the document window. The image appears wherever you drop it.
You can also drag an image file from another location, outside your site's directory. If you've used Windows Explorer to find a file, just drag it onto the page you're editing. When you save your Web page, FrontPage prompts you to save the image file as part of your site. If you want to get a picture file into your site, but not necessarily onto a page right away, you can also drag a file directly into your images folder.
Or, you can drag your pictures around within an individual page. If you drag a picture from one page onto another page within the same Web site, FrontPage moves it to the new location. If the destination page is in a different Web site, the program copies the image, leaving the original in place.
Okay, so you've got an image on your page, which is very exciting. But perhaps it came out larger than you wanted it to? Also, maybe it's shoved your text off to the side, and the page layout is now a disaster.
Inserting the image was a breeze, but you may need to work a bit harder to make it fit nicely and really look good. FrontPage is far from a sophisticated image editor, but it offers a handful of tools to help you edit, resize, and adjust the placement of your graphics.
4.3.1. Editing Appearance
Web designers who edit pictures extensively rely on software programs created for the job, like Adobe Photoshop. For best results, you should, too. But if all you need to make are simple edits or small tweaks, like cropping or rotating an image, FrontPage can save you the trouble of opening a separate program. To access FrontPage's rudimentary editing features, open the Pictures toolbar (see Figure 4-2). Select View Toolbars Pictures and run your cursor over each toolbar button to display a tool tip, which tells you what each button does.
|
To edit a graphic within FrontPage, select the image, and then choose from the following options on the Pictures toolbar:
Rotate images with the four rotate and flip buttons. Rotate buttons turn the picture 90 degrees, while flipping creates a mirror image.
To place text over a picture, click the Text button and type within the box that appears. Click and drag to move the text box around. FrontPage adds the text to the image itself, so you'll be prompted to resave the image when you save the page.
Click the Color button and you can change an image from color to grayscale or black and white. Choosing Washout lightens an image, which may be handy for background pictures, or to show that a button on your page is temporarily inactive.
Adjust contrast and brightness with the more and less buttons for each of these attributes. These two controls often work together to pep up an ailing image. For instance, if you have a dark, muddy image and increase the brightness, your picture can look washed out. You can fix this by upping the contrast, which increases the darkness of dark colors and lightens light colors. If, after trying these, your picture still needs help, turn to a real image editor.
Click the Set Transparent Color button and click on a color within the image to make all similarly colored areas see-through. This button is great for eliminating a picture's monochrome background. This feature works well only if your picture has simple lines and areas of flat color. It doesn't work on photographs. In fact, if you try to use this tool on a JPEG, FrontPage converts it to a GIF. (Don't know the difference? See "Image File Formats 101" on Section 4.1.) And converter beware: if you're converting an image in order to set a transparent color, don't botherthe results are lousy.
To crop a picture, click the crop button, use the cursor to outline the area you want to keep, and click the crop button again. Anything outside the area you selected disappears.
Click Bevel to bevel, or angle, a picture's edges. FrontPage lightens the top and left edges while darkening the bottom and right ones. This creates a 3-D effect, which is handy if you're using pictures as buttons.
| UP TO SPEED Editing JPEGs |
One important thing to understand about JPEG files is that each time you edit one (in any program), you reduce the image's quality. That's because JPEGs stay lean and mean by automatically discarding data when saved. Not surprisingly, this data loss degrades image quality. Graphics professionals call the JPEG's format "lossy" because of this trait. (GIF files, in contrast, aren't lossy.) Before tossing an image on a page, a lot of Web developers edit and compress their JPEGs as much as they can while still maintaining an acceptable level of quality. You measure compression in percent. For instance, you could tell a program that you want to compress a JPEG to 85 percent of its current size. The lower the percentage, the lower the quality. (Though even at 100 percent, some compression takes place.) FrontPage has a bad habit of compressing JPEGs even further if you insert them on a page without first importing them into your site. When FrontPage saves a copy of the JPEG with your page, it automatically compresses the file up to 70 percent, which can really degrade your picture. To avoid this:
Due to the JPEG's talent for losing quality with each save, edit your JPEG files as few times as possible. You also might want to consider keeping unedited copies of these files in a safe place so that you can go back to the original file if the JPEG on your site grows worse for wear. Better yet, keep a backup copy of the picture in a format that doesn't lose informationlike TIF, for instance. |
4.3.2. Resizing
Even when you find the perfect picture for your page, it doesn't always fit perfectly. You'll often need to change a picture's dimensions to make it look good.
When it comes to resizing, you're almost always better off using a full-blown graphics editing programespecially if you're drastically changing the image size. FrontPage offers its own unique options for resizing pictures, which may suffice if your needs are very simple.
4.3.2.1 Resizing by pixel
You resize a digital image by changing the height and width of a picture, which are usually measured in pixels. FrontPage's pixel-editing controls look like those in any image-editing program. But they're deceiving.
To take a look, open the Picture Properties dialog box pictured in Figure 4-3. Right-click an image and select Picture Properties.
|
On the Appearance tab, under the Size heading, you'll see two boxes, which display the height and width of the image. To activate these, turn on the "Specify size" checkbox. You can then readjust the size using pixels or percent.
Note: When you're resizing in pixels, make sure that the "Keep aspect ratio" checkbox is turned on. This keeps the height and width of your picture in proportion. Without it, you could distort the image, making it look squeezed in one direction or another.
When you resize in pixels, with "Keep aspect ratio" on, you need only edit one number. The other one changes automatically.
So far, these height and width fields look like resizing tools you'd find in any image editor. But in reality, FrontPage's pixel-editing controls are just a smokescreen. Say you go in and shrink a 400 x 400 pixel image down to half its size. You may believe you've changed the size of the image file, but you haven't. FrontPage has fooled you. The actual image remains 400 x 400 pixels. What you've changed is the space on the page that the picture occupies. The 400 x 400 image now displays on the screen within a 200 x 200 pixel space. FrontPage doesn't edit the file itself, but instead tells the browser to display the picture at whatever size you've specified. FrontPage adjusts what it calls the "appearance attributes" of a picture, not the actual size of the image.
If you're resizing by very little, this approach is fine. But if you're making a drastic change, your image will appear rough or distorted. If your picture looks bad after you resize, try resampling (explained below). Another important point: if your plan is to shrink your picture's size in order to speed page download, resizing by pixel in FrontPage won't do the trick. Again, resample insteador use a real image editor like Adobe Photoshop or Photoshop Elements to change the actual picture size.
Note: While you can shrink a picture easily, you can't really make an image much larger than it already iseven in professional quality image-editing software. Doing so inevitably makes your picture jagged and distorted. The only thing to do is start over. Go back to your scanner or digital camera and create a larger picture.
4.3.2.2 Resize by percent
Resizing by percent may also not work as you expect. In other programs, like Photoshop and Microsoft Word, you can resize pictures by percent. The key question here is: percent of what? In Word, the percentage always refers to the image itself. The image begins at 100 percent. So, if you want it half as big, you enter 50 percent and Word shrinks it. In FrontPage, percent means something very different. The percentage is relative to the browser window (orif the image is contained in a tablethe table cell size). In other words, an image set at 100 percent takes up the entire browser. One set at 50 percent takes up half the browser window. This is your first taste of fixed (pixel-specific) vs. relative (percent) sizing on a Web page. Later in this book, you'll read more about these issues. For ease of use, you probably should stick with resizing in pixels for now, but keep your percentage option in mind. It may come in handy when you start using tables.
4.3.2.3 Resampling your picture
Unlike "resizing" by pixel, resampling does change the image's actual size. You can resample at any time by right-clicking on an image and selecting Resample. When you resample, FrontPage saves a new instance of the image file within your site, using the new dimensions. In other words, if you shrink a 400 x 400 pixel image down to half its size, FrontPage will resave it as a 200 x 200 pixel image.
When should you resample? If you've shrunk an image and want the page to download faster, resample. Resampling can also smooth out a resized image that looks rough or pixilated. But beware: after you resample, you won't be able to enlarge the image again. If you do, the picture will look terrible. In fact, resampling more than once can really blur a graphic and compromise image quality.
Tip: Keep backup copies of your graphic files in a folder outside your Web site. This way, if the FrontPage picture editor ruins an image, you can import a new copy and start over.
4.3.2.4 Resizing by dragging
If accessing Picture Properties seems like one step too many, you might want to resize by dragging directly on your image. In Design view, select the image. Resizing handles appear around the picture in the form of tiny squares around the edges. Grab a corner handle and drag it until the image is the size you want. (Why grab a corner? Because, if you grab a handle on a side, top, or bottom and drag, the picture expands only in one direction and becomes distorted.)
Resizing by dragging is the same as readjusting pixels in Picture Properties. This means that FrontPage doesn't change the size of the picture fileonly the picture's display size on the page.
After you resize by dragging, FrontPage displays a Picture Actions box beneath the image. Click it to display a shortcut menu, pictured in Figure 4-4.
|
4.3.3. Setting Picture Placement
When you plunk an image down on a page, your job has often just begun. You'll need to spend some time fine-tuning your picture's placement. The best way to control your pictures so they play nicely with the surrounding text is to place everything within a table, which you'll learn about in Tutorial 5. Meanwhile, you can make do with a few simple tools that FrontPage provides to tweak your page layout.
4.3.3.1 Text wrapping
Whenever you insert a large picture on a line with text, it looks awkward and out of place. The cure? If you want your text to flow around your pictures gracefully, turn on text wrapping. If you do, words "wrap" around the side of your picture instead of treating the image like just another character on a line (one which happens to be huge). When you insert a picture, wrapping is automatically set to None. Unless a picture is going have a paragraph all to itself, the None setting tends to look clunky and unprofessional.
A simple click on either the Left or Right wrapping button in the Picture Properties dialog box (see Figure 4-3) can really help make a picture look like it belongs with the text around it. If you need to set a buffer between the picture and the surrounding text, use the Horizontal spacing and Vertical spacing fields.
4.3.3.2 Alignment
Alignment settings available in the Picture Properties dialog box (see Figure 4-3) control picture placement for small images plopped down in the middle of a chunk of text. If you place an image within a line of text, you can set the image to align with the bottom or top of the letters, or to be centered vertically within a line. You'll find that if a picture is larger than the text, inserting it within a line disturbs the line spacing of the paragraph. If you're inserting picture within a line of text, keep it small and use the alignment drop-down menu to reduce its impact on line spacing.
4.3.3.3 Absolute positioning
If you're a real control freak, simple alignment choices might not satisfy you. Absolute positioning is the final word in picture placement. You can set the position of your image at a precise location on your Web page and even position pictures in front of or behind each other. But this feature has its pitfalls.
Click to select an image and then click the Position Absolutely button on the Picture toolbar. A blue box surrounds the graphic. Drag the box to wherever you want it to appear on the page. If you're creating a collage of images, use the Bring to Front and Send to Back buttons on the toolbar to place images in front of or behind each other.
Note: FrontPage actually places your picture in a layer to allow you to position it. Tutorial 8 covers layers and absolute positioning in depth.
Use absolute positioning with caution. While the positioning of these pictures may be absolute, other elements on your page may not be, resulting in hidden text or a confusing layout. Not to mention that some older browsers don't even support absolute positioning.
4.3.4. Alternative Representations
A picture illustrates something that you couldn't express with words. In spite of that, you may want to add some text that briefly describes your image. The truth is, on the Web, a picture is just not enough. You should always include a short description of whatever it is you're showing. Why? See the box "Accessibility on the Web."
So how do you include a text alternative? The way you'd add any other property: right-click the image and select Picture Properties. Then click the General tab. FrontPage offers options for adding additional property information, as pictured in Figure 4-5.
|
| FREQUENTLY ASKED QUESTION Accessibility on the Web |
Why do I need to write out a description for each of my pictures? Common courtesy. There are people out there who might not be able to see your images. Visually disabled Web surfers use screen readers that read a page's text to them. A screen reader can't read a picture, but it can read a picture's alternative text and at least give a blind or partially sighted person a better idea of what's on your page. Many people with perfect eyesight may also need this alternative text. For reasons of security, or to speed download time, lots of folks set their browsers not to display images. Use a description to let them know whether or not they should take the extra step of actually displaying a graphic (see Figure 4-6). You'll learn more about making your site fully accessible to people of all abilities in Tutorial 12. Meanwhile, don't leave visitors wondering what's on your page. Create alternative text for all your pictures. |
The Text field is where you'll enter a description of the image. This description displays as a screen tip when a visitor passes a cursor over the picture, or appears in place of the image when the browser doesn't or cannot display graphics (see Figure 4-6).
|
Note: For pictures that serve as buttons, just enter the text that's on the button. If you've used transparent or one-color images to space out your page, don't bother to type any alternative text. You'll just confuse visitors.
Images can take a long time to load. If you want to give readers a preview of what they'll eventually see, you can designate a low-resolution image of the same picture as an alternative representation. A low-resolution image contains less color and detail, so it loads faster. For example, a simple black-and-white version of a picture might serve nicely. This simpler image displays temporarily in the time it takes for the actual image to fully load within the browser. If you want to use a low-resolution image, click the browse button to the right of the Low-Res field and select the alternative picture. Make sure that it has the same dimensions as the real image.
Static pictures don't seem to be enough in today's world. Flash animations and videos add life to Web sites around the globe. In fact, many sites' sole purpose is to present videos, movies, and other moving images.
FrontPage makes incorporating moving images just as easy as adding still picturesall you need to do is click a button.
4.4.1. Inserting Video Files
It's easy to add videos to your site. But make sure you've considered all the angles first. Video files are large. As you'll see, it's easy to embed a video directly within your page, but your page could then take forever to download. To avoid frustrating your visitors, you might want to place a hyperlink to the video on your page, instead of inserting the file itself. This way, your page will load quickly but viewers still have access to the video.
Also, video files require their own players in order to function. Are your visitors likely to have this software installed on their systems? Even if you think so, make sure you provide information on what's required. You could even include a link to a site that offers downloads.
What kinds of moving images can you add? FrontPage can handle the following digital video file types: WMV, MPEG, AVI, RAM, and QuickTime (MOV files).
4.4.1.1 Displaying a video as a picture file
FrontPage lets you embed a video directly within your page. Inserting it is fast and easy. Place your cursor on the page and select Insert Picture Video. Once you browse and select the file, your video then appears on the page. You can also just drag a video file from the folder list onto the page.
If it seems almost too easy to be true, it may well be. The big drawback to using this method is that people who use Netscape Navigator won't see your video. When you use this shortcut method, FrontPage generates HTML that Navigator doesn't understand, so a broken picture icon will appear in place of your video. If that thought bothers you, then you probably want to display the video as a plug-in. When you insert the video as a plug-in, the file calls whatever separate software a viewer's installed with her browser to view video fileslike Windows Media Player or QuickTime. One additional advantage is that your viewers now get controls so that they can stop, play, fast forward, and so on. To add a plug-in, see the section on "Inserting Plug-Ins" on Section 4.4.2.
4.4.1.2 Setting video properties
If you've embedded your video on the page, you can control its placement as you would any other picture: right-click the video file and select Picture Properties. The dialog box you see now includes a Video tab, as illustrated in Figure 4-7.
|
FrontPage automatically sets the video to play when the page opens. Your only other choice is to have it start when a cursor passes over the image. To change this setting, select "On mouse over" within the Start section.
4.4.2. Inserting Flash Movies
If you think videos are too large to include on your site, you have another animation alternative. Macromedia Flash movies (which bear the SWF file extension) are smaller than regular video files. Flash movies use vector graphics, which are composed of lines and geometric shapes (as opposed to videos, which are bitmapped, or made up of individual pixels).
To insert a Flash Movie, select Insert Picture Movie in Flash Format. Browse to your SWF file and select it. A blue box for the Flash graphic appears on your page. To view it, preview the page or right-click and select Play Movie in Flash Format.
Note: You must have the Macromedia Flash player installed to preview any Flash animations. Viewers must have this player, too, to see Flash content. Don't worry about directing them to download sites. Most browsers come with Flash, but for those that don't, your Flash movie includes an automatic link that will take a viewer where he needs to go.
4.4.2.1 Setting movie properties
Most likely, you'll want to keep all of FrontPage's automatic settings in place when you insert your Flash movie. However, if you want to change the movie's size or placement on the page, right-click and select Movie in Flash Format Properties. Selections under Layout are just like those for arranging any graphic and surrounding text (Section 4.3.2.4).
4.4.3. Inserting Plug-Ins
A plug-in is a separate software program that works in conjunction with a browser. Plug-ins are helper applications that let Web surfers watch movies and listen to audio files that appear on Web pages. Macromedia Flash is actually a plug-in, but it's so common that FrontPage lets you insert it directly on a page. Likewise, videos often require the presence of RealPlayer or Windows Media Player on the system.
You can insert any file type you want as a plug-in. Plug-ins give visitors control over media filesvideo programs will open with controls to play and rewind, for example. But keep in mind that visitors might not have the necessary software installed on their system. If you think they won't mind, go ahead. But be sure to provide a link to the plug-in they may need to download.
To insert a plug-in:
Select Insert
Web Component and, within the Component type list, click Advanced Controls.Within the "Choose a control" list, select Plug-in and click Finish.
A Plug-in Properties dialog box appears.
Browse to the file you want to insert and select it.
Enter a message for browsers without plug-in support.
You might want to say something like: "You need the QuickTime player in order to view this animation."
Set preferred alignment and dimensions, then click OK.
FrontPage usually sets the dimensions automatically based on the file you selected, and so typically you don't have to make changes here. But if you do ever need to, you can return to this dialog box at any time to make adjustments. Right-click the plug-in file and select Plug-in Properties.
Though graphics are a part of your Web pages, FrontPage saves images as separate, individual files. Eventuallyeven if your site is smallyou're going to have a whole lot of image files to contend with. You may need to use certain images on multiple pages or go back and edit a picture or two, so you'll want to find them easily and quickly.
Keep your picture management chores hassle-free by naming and organizing your image files intelligently. Give each file a name that's appropriate and describes the picture. Keep all your images in the same folder, called images. FrontPage even creates an images folder automatically when you create a new Web site. Put it to good use. If you have a lot of Flash or video files, gather them in a folder called media. You can manage this process as you go, saving image files in the correct folders as you insert them on pages.
4.5.1. Saving Files with a Page
When you've inserted a new image or video within a page and try to save the page, FrontPage displays the Save Embedded Files dialog box, illustrated in Figure 4-8. Since the graphic file hasn't yet been saved within the Web site, FrontPage needs to know where to put it.
Save your file by setting the following options:
Click Rename to give the file a name that you can easily identify later on.
Use Change Folder to browse to your site's images folder. Once you set this folder, it appears in the Folder column.
Click Picture File Type if you want to change the file type to another Webfriendly format.
Figure 4-8. Click any of the three buttons at the bottom of the Save Embedded Files dialog box to change the settings in the columns above.
Note: When you save a JPEG file with a page, FrontPage automatically compresses the file, which can diminish picture quality. To avoid this, click the Picture File Type button, select JPEG, and then change the Quality setting to 100 percent. Another way to avoid FrontPage's compression mania is to import the image into your Web site before inserting it on a page. The program doesn't attempt to compress imported images. (See the "Editing JPEGs" box on Section 4.3.2 for details.)Steer clear of the Set Action button. The only option it offers is letting you link to the image file somewhere on your computer outside of your Web site. Why is that a bad idea? Because it means that when you upload your site to a Web server, the link to the image will be broken and the image won't display.
Note: The Save Embedded Files dialog box sometimes automatically changes the format of files so that they're appropriate for the Web. For instance, FrontPage converts clip art images from WMF files, which browsers can't display, into the GIF format.
Using an image as a hyperlink can create a nice effect on a Web page. Even better, FrontPage lets you turn one picture into a collection of hyperlinks.
By divvying your image into what are called hotspots (invisible hyperlink areas), you can make separate clickable regions that link to different locations. These can be square, round, or any shape you wish. A collection of hotspots on an image creates what's known as an image map.
This is a great tool for creating a single reference point that leads a viewer to further details on separate pages. For example, if you sell bicycle parts, you could place hotspots on a picture of a bike. Make the wheel a hotspot that leads to a page of wheel types for sale. If a visitor clicks on the pedals, your shop's selection of pedals displays. And so on. You may have seen this effect used on images like actual maps, as in Figure 4-9.
|
To create an image map, using buttons on the Pictures toolbar, follow these steps:
Select the picture you want to use as an image map.
Select an image map tool.
Three buttons on the Pictures toolbar offer different shapes: rectangle, circle, and polygon. Click the button that's most appropriate for the shape of the hotspot you want to create.
Draw the hotspot.
Draw rectangle and circle spots with one stroke, by dragging diagonally through the area you want the shape to cover. Polygons require more steps. Click to create a corner, then click to create another corner, and another, until you click back on the first spot again to complete a closed shape. After you've drawn a shape, the hyperlink dialog box displays. If you don't like the placement of a hotspot, just click cancel and try again.
Choose a destination for the hotspot's hyperlink.
Set a hotspot hyperlink just as you would any other link (Section 3.2.1).
Tip: If your image is intricate, you may have trouble distinguishing where you've applied hotspots. FrontPage can help. Select the image and then click the Highlight Hotspots button on the far right side of the Pictures toolbar. The image disappears temporarily, leaving only your hotspots visible.
4.6.1. Editing a Hotspot
You can change the shape of a hotspot by dragging one of its handles. To edit a hotspot hyperlink, right-click the hotspot and select Picture Hotspot Properties. An Edit Hyperlink dialog box appears. You can remove a hotspot entirely by selecting it and pressing delete.
4.6.1.1 Create screen tips for your hotspots
Don't leave visitors in the dark. Let them know where a link will take them. Sure, the pictures underneath your image map help, but you can also create a screen tip for each hotspot to make its destination even more obvious. To do so, right-click a hotspot, and then select Picture Hotspot Properties. Click ScreenTip on the upper right and enter the text that you want viewers to see when their cursor passes over the hotspot.
Sometimes you need to include a group of pictures on one page, but in trying to do this, you encounter some problems. Maybe the pictures are too big to fit on one page, or your page is taking ages to download.
FrontPage includes a handy feature for inserting pictures as thumbnails, which are just miniature versions of graphic files. This section shows you how to create thumbnails. For a similar effect, skip ahead to Section 4.7.2 to learn about FrontPage's Photo Gallery option, which helps you add some nifty formatting and commentary options to a collection of photos.
4.7.1. AutoThumbail Feature
You can create a thumbnail out of any image file in your site. First, insert the fullsized picture on your Web page. Select it and choose Tools Auto Thumbnail, or press Ctrl+T. You can also right-click and select Auto Thumbnail, or click the Auto Thumbnail button on the toolbar.
Tip: If you drag the picture onto the page with your right mouse button, a menu displays. Select Auto Thumbnail.
FrontPage converts the picture to a thumbnail. Thumbnails automatically link to their larger versions. During this process, FrontPage actually creates a new smaller image file, which the program prompts you to save next time you save the page.
FrontPage also adds a border to the thumbnail. If you want to get rid of it, right click the thumbnail and select Picture Properties. On the Appearance tab, change Border thickness to zero.
4.7.2. Sizing AutoThumbnails
FrontPage automatically formats thumbnails to be the same size: 100 x 100 pixels. You can resize these pictures (Section 4.3.2.1) as you would any other. Chances are you'll want them to be consistent, so FrontPage lets you change the size for all thumbnails on a page with one setting. Select Tools Page Options and click the Auto Thumbnail tab. Here, you can change size, set border width, and apply beveling. Unfortunately, these settings won't apply to any work you've already done. Only thumbnails created after you make changes in Page Options take on these settings.
Some people put up a Web site simply to display the pictures of their last trip to the mountains or their party at the Tiki lounge. Often the task of formatting a page to display and write about these photos involves more work than most people are willing to invest.
FrontPage now offers a quick, automated solution. A photo gallery is page of pictures and text with a professional-looking layout that FrontPage creates for you. The gallery page features thumbnail photos, which your visitors can click to see the full-size image, and includes space for you to name and discuss each picture.
4.8.1. Creating a Photo Gallery
You can place a photo gallery within an existing page, or on its own page. Here's what you need to do:
Create a new gallery.
Select Insert
Picture New Photo Gallery.Add pictures.
The Photo Gallery Properties dialog box displays (see Figure 4-10). Click Add to bring new images into your gallery. Browse and select the pictures that you wish to include. Enter a caption and description for each picture.
Select a Layout.
Click the Layout tab to preview your layout options and select the one you prefer. If you find later on that you don't like it, you can come back and change it.
After you click OK, your gallery displays in FrontPage. You can continue to add pictures and edit the layout at any time. Right-click the Photo Gallery and select Photo Gallery properties to make changes.
|
4.8.1.1 Using the Photo Gallery template
FrontPage offers an already populated gallery for you. Select File New and within the Task pane, click "More page templates" and select Photo Gallery.
The program creates a photo gallery that already contains a handful of pictures, as illustrated in Figure 4-11. This might be a nice way to preview what the gallery looks like, but otherwise, having to replace these photos with your own makes extra work for you. You might as well create a blank photo gallery following the instructions above.
4.8.2. Editing Pictures Within a Photo Gallery
You can't edit Photo Gallery pictures by using the Pictures toolbar. The gallery feature comes with its own, more limited editing feature. If you click Edit within the Photo Gallery dialog box, a special Edit Picture dialog box appears. Use it to rotate, crop, or change the size of a picture. Previous and Next options, at the bottom, allow you to access all your photos without leaving the dialog box, which you may find handy. If you need to edit a picture more extensively, use an image-editing program. Again, you may want to keep backup copies of your images in a folder outside your Web site for safekeeping. This way if FrontPage's editor mangles a picture, you can import a fresh copy.
|
| WORKAROUND WORKSHOP Getting Photos to Open in a New Window |
The Photo Gallery (with the exception of the Slide Show layout) has one trait that's not really viewer friendly. When a visitor clicks a thumbnail, the large version of the photo opens in the same browser window. This forces the viewer to hit the back button to return to the page of thumbnails. If you want a full-size picture to open in a new instance of the browser, don't waste your time looking for that setting in the Photo Gallery Properties dialog box. Like other Web page features that FrontPage provides ready-made for you, the Photo Gallery isn't very flexible. Fortunately, there's a workaround. To change the target of your thumbnail links, do the following: look in your site's folder list and locate the photogallery folder. Open the folder and then open the folder that contains your Photo Gallery. (This folder's name begins with the word "photo" followed by a series of numbers. FrontPage creates one of these folders for each gallery in your site. If you have more than one, compare them by checking the folders' image file contents.) Open the real.htm file, and you'll see your gallery appear in the document window. Right-click a picture and select Hyperlink Properties. Set a different target for the hyperlink (Section 3.3.1). Repeat for each picture you want to open in a new window. While you have real.htm open, you can also turn any caption text into a hyperlink, if you want. When you're done, save the real.htm file. |
Now that you know how to stick images all over your Web pages, you can get even crazier and place an image behind your page. In other words, you can use an image as your page's background. This can be a fancy landscape photograph or something subtle, like a washed-out image of you, pale from hours spent in front of your computer. A background picture displays behind all the other elements on a page, such as text and inserted images. If you do decide to use an image as a background, make sure that the image doesn't obscure your page's text (patterns often work well).
With your Web page open, select File Properties or right-click the page and select Page Properties. Then click the Formatting tab. Turn on the Background Picture checkbox and browse to find and select the image. If you want the image to remain fixed in the background as a viewer scrolls down your page, turn on the "Make it a watermark" checkbox.
Note: If your background picture creates a tile effect, appearing multiple times within the page, then it's too small. Edit the image to make it large enough so that only one picture appears in a browser window. The problem is your visitors will all have different size windows. To keep the picture from tiling, you can give it a "no repeat" style. To do so, Select File
Properties and click the Advanced tab. Then click Body Style. Within the Modify Style dialog box that opens, click Format and select Border. Within the Borders and Shading dialog box, click the Shading tab. Under Background Picture, browse to and select the image. Then within the Repeat drop-down list, select No Repeat. Preview this effect in browsers with varying screen dimensions (Section 12.4).
discuss this topic to forum
