Style sheets give your Web pages a unified look and feel.
When you work with style sheets, you refer to each element by its unique identifier, called a selector. The selector is simply the markup tag for the element without the first and last
When you want to apply a style definition to multiple elements, you can use a style class. After you create the style class, you can apply the class to any element in your Web page.
The best way to apply style definitions to multiple pages is to use a linked style sheet. With linked style sheets, you store the style definitions in separate files and reference the style sheet file in the pages that should use them.
When they are no longer required, you can remove style sheet definitions from Web pages quickly and easily.
Add pictures to Web pages
Size and align pictures
Obtain pictures from clip art and more
Use background pictures
Cut, copy, paste and save pictures
In this chapter, you ll learn how to obtain pictures from various sources, and how to use background pictures. Web pages without pictures are dull. If you really want to promote your organization, sell your goods or services, or
The sections that follow discuss how to add pictures to pages, and how to
FrontPage uses the
Microsoft Office FrontPage 2003 makes it easy to insert and precisely place pictures. Your pictures can come from a variety of sources, including local files, the current Web site, the network and the World Wide Web. When you insert a picture that is not in the GIF or JPEG format, FrontPage needs to convert the picture to either GIF or JPEG format before saving it. You ll find complete details on the conversion process in the section of this chapter entitled Saving Pictures to the Current Web.
To insert a picture into a Web page
Move the insertion point to where you want to insert the picture, and then choose Insert, Picture, From File.
Using the Picture dialog box, locate and double-click the file
After you add a picture, right-click it, and then select Picture Properties. This displays the Picture Properties dialog box.
Click the General tab, as shown in Figure 7-1, and then type a description or title of the picture in the Text field under the Alternative Representations section. The text you enter is displayed whenever the cursor is over the picture. Click OK when you re finished.
Figure 7-1: Add a text description to your pictures to help
Wondering why you d want to add text descriptions to pictures? Well, the text you enter is displayed whenever the cursor is over the picture. The text is also displayed if, for some reason, the user s browser cannot display pictures ”if the
Adding a picture to a page is one thing, but getting the picture so it is just right in size, alignment, and spacing is something else entirely. Pictures can be
The default layout may work in some cases, but it probably isn t optimal. In most cases, you ll want to use a different layout. For example, you may want to center the picture on the page, and add a 5-pixel border. Or, you may want to align the picture to the left or right of existing text on the page, and use vertical spacing to ensure that the picture is set clearly apart from the text.
You can change the layout for pictures by completing the following steps:
Right-click the picture, and then select Picture Properties. This displays the Picture Properties dialog box shown in Figure 7-2.
Figure 7-2: Use the Picture Properties dialog box to specify the layout and sizing of pictures.
Use Wrapping Style to specify how text wraps around the picture:
None Ensures the text doesn t wrap around the picture.
Left Wraps text around the left side of the picture.
Right Wraps text around the right side of the picture.
Use the Alignment drop-down list to set the picture s alignment. The available options are:
Absbottom Aligns the bottom of the picture with the bottom of the line of text associated with the picture.
Absmiddle Aligns the middle of the picture with the middle of the line of text associated with the picture.
Baseline Aligns the picture and text along the baseline of the text. Text elements like s, k and l are aligned along the baseline, and text elements like j, g and p extend below the baseline.
Bottom Same as baseline.
Center Centers the picture on the page.
Left Aligns the picture in the left margin.
Middle Aligns the middle of the picture with the bottom of the text.
Right Aligns the picture in the right margin.
Texttop Aligns the top of the picture with the top of the tallest element in the line of text associated with the picture.
Top Aligns the top of the picture with an imaginary line slightly above the text.
Use Border Thickness to set the pixel size of the border around the picture. Set the value to zero to display the picture without a border.
Use Vertical Spacing to set the spacing above and below the picture in pixels. If you set the vertical spacing to zero, you remove any extra spacing above or below the image.
Use Horizontal Spacing to set the spacing to the left and right of the picture in pixels. If you set the horizontal spacing to zero, you remove any extra spacing to the left or right of the image. Click OK when you re finished.
Most pictures are sized using pixels, to ensure that they are displayed at a specific fixed size, such as 150 pixels wide and 120 pixels high. Pictures can also be sized as a percentage of the window size, which allows the picture size to change, based on the width and height of the browser window. For example, if you created a page banner using a picture, you might want the banner to fill the width of the browser window. To do this, you would set the picture width to 100 percent of the browser window.
You can size pictures by completing the following steps:
Right-click the picture, and then select Picture Properties.
On the Appearance tab of the Picture Properties dialog box, select Specify Size, then type the desired width and height for the picture.
Use the In Pixels or In Percent options to specify whether the width and height values are
Preserve the Original
FrontPage lets you manipulate pictures in much the same way as you manipulate text, using the familiar Cut, Copy, and Paste commands. You can also cut a picture from your favorite paint program, and paste it directly into a Web page. Here s how you would do this:
In your favorite paint program, create, or open for editing, the picture you want to use.
Select the picture, and copy it to the Windows Clipboard.
In FrontPage, open a Web page for editing, then move the insertion point to where you want to add the picture. Press Ctrl+X to paste the picture into the page.
FrontPage 2003 automatically converts the picture to either GIF or JPEG format, if necessary. Pictures with 256 or fewer colors are converted to GIF. Pictures with more than 256 colors are converted to JPEG.
Pictures can be clickable entryways to other pages and files. You could, for example, show a small picture of your new digital music player on your home page and link it to a product page that provides more detailed information. When a customer clicks on the picture, they quickly and easily access the product page.
If you want to link a picture to a Web page or file, complete the following steps:
Right-click the picture, and then select Picture Properties.
On the General tab of the Picture Properties dialog box, click Browse (to the right of the Location field).
Specify whether you want to link to an existing Web page, a new document, or an email address, by clicking the appropriate Link To option. The options of the dialog box change, based on your selection.
Choose the file to which you want to link, if it is displayed in the Look In list, or enter the Web address in the Address field. Click OK to close the Picture dialog box.
Test the Link
It really is true that a picture is worth a thousand words, and sometimes the best way to showcase your organization s products or services is to do so with high-resolution pictures. You don t, however, want visitors to get bored waiting for large pictures to download. Remember, not everyone has a fast connection to the Internet ”even some businesses have slow speed dial-up connections.
One way to make it seem as if your pages load faster is to specify low-resolution pictures that browsers can download before they download your high-resolution pictures. In this way, compliant browsers, such as Internet Explorer 6.0, load the low-resolution pictures first ”and then, when all other page elements are loaded, they go back and get the high-resolution pictures you ve specified. These high-resolution pictures are faded in over the low-resolution pictures.
To specify a low-resolution picture as an alternate picture for an existing picture, follow these steps:
Right-click the picture, and select Picture Properties.
On the General tab of the Picture Properties dialog box, click Browse (to the right of the Low-Res field).
Use the Select Alternate Picture dialog box to locate the low-resolution picture, then double-click its file name. You can use pictures from the current web, your hard drive, the network, or the Web. Click OK when you re finished.
Your low-resolution pictures should act as placeholders, and should be the same size on the page as the high-resolution picture. This will ensure the text on the page doesn't shift when the high-resolution picture is displayed.