Microsoft FrontPage 2003 Illustrated Complete Working with Pictures

Unit D 2Working with Pictures  Insert a picture  Change a picture’s properties  Add text over a picture  Create an image map Objectives

Unit D 3Working with Pictures Objectives  Create WordArt  Create a thumbnail picture  Create a photo gallery  Change a photo gallery’s properties

Unit D 4Working with Pictures  Pictures can enhance a site’s appearance and add functionality  Pictures used in a Web page can be taken with a standard or digital camera  You can also add clip-art images, WordArt, drawings, and shapes  You can create a photo gallery in which to store a collection of pictures

Unit D 5Working with Pictures Inserting a Picture  In FrontPage, a picture might be a photograph, a clip-art image, or a shape or image you create using the Drawing toolbar  You can also format text as a picture

Unit D 6Working with Pictures Inserting a Picture (cont.)  Pictures in Web pages are usually one of three formats: –GIF, which displays pictures with up to 256 colors in a compressed format that supports animation –PNG, which displays pictures with up to 16 million colors in a compressed format –JPEG (JPG),which is used for photographs and other high-quality digital images

Unit D 7Working with Pictures Inserting a Picture (cont.)  You can use pictures as hyperlinks  When you insert a picture in a Web page, the picture file is separate from the Web page itself and must be saved  To save a picture as part of a Web site, you embed it in the site  You usually save all picture files in the Images folder, which FrontPage automatically creates when you create a new Web site

Unit D 8Working with Pictures Inserting a Picture (cont.)  You can also add a background picture, which is a picture that appears behind text and other objects in a page

Unit D 9Working with Pictures Changing a Picture’s Properties  Use the Pictures toolbar to change a picture’s characteristics  You can change: –Contrast –Brightness –Position –The way text flows around the picture –Orientation –Size

Unit D 10Working with Pictures Changing a Picture’s Properties (cont.)  Position dialog box

Unit D 11Working with Pictures Changing a Picture’s Properties (cont.)  You should consider the amount of time that pictures will take to download  You can decrease a picture’s size and download time by using the sizing handles and using the Picture Actions or Resample button

Unit D 12Working with Pictures Adding Text over a Picture  You can wash out a picture so that the colors in the picture appear with less intensity and brightness  You can change a picture to black- and-white or to grayscale, which changes the picture to use shades of gray

Unit D 13Working with Pictures Adding Text over a Picture (cont.)  Text added over a picture

Unit D 14Working with Pictures Creating an Image Map  An entire picture, or part of a picture, can serve as a hyperlink to a location in the same Web site or a different site  An image map is a picture that contains one or more hotspots  A hotspot is an area of a picture that, when clicked, opens the hyperlink target

Unit D 15Working with Pictures Creating an Image Map (cont.)  A hotspot can be rectangular, circular, or polygonal  To use a hotspot, you use the pointer to draw a shape on the picture, then you use the Insert Hyperlink dialog box to specify the hyperlink target  To identify hotspots in Design view, click a picture to select it, then click the Highlight Hotspots button

Unit D 16Working with Pictures Creating WordArt  WordArt is an object that uses text and special effects to create a picture  You can create WordArt objects using existing or new text  Shorter phrases and single words work best for WordArt  After creating WordArt, you can change its colors, direction, style, and content using the WordArt toolbar

Unit D 17Working with Pictures Creating WordArt (cont.)  WordArt Gallery dialog box

Unit D 18Working with Pictures Creating WordArt (cont.)  Resized WordArt object

Unit D 19Working with Pictures Creating a Thumbnail Picture  Because large picture can take a long time to download, they should be used sparingly  When you must include large, complex pictures, but want to keep the download time to a minimum, you can create a thumbnail picture  A thumbnail picture is a small version of a larger picture that, when clicked, activates a hyperlink and opens the original, larger picture

Unit D 20Working with Pictures Creating a Thumbnail Picture (cont.)  When a thumbnail picture appears in a Web page, it reduces the download time for the page  Users who need to view the original, larger picture can click the thumbnail picture to open a new page containing the full-sized picture  FrontPage creates the thumbnail picture and the hyperlink to the original image automatically

Unit D 21Working with Pictures Creating a Thumbnail Picture (cont.)  Thumbnail picture

Unit D 22Working with Pictures Creating a Photo Gallery  A photo gallery is a FrontPage component that displays pictures, thumbnail pictures, photo captions, and photo descriptions  You can use a photo gallery to display multiple pictures related to a specific category  A photo gallery organizes picture and provides predefined layout options for their placement, arrangement, and appearance in the page

Unit D 23Working with Pictures Creating a Photo Gallery (cont.)  Photo Gallery Properties dialog box

Unit D 24Working with Pictures Changing a Photo Gallery’s Properties  After creating a gallery, you can add, delete, and rearrange pictures  You can also add captions and descriptions, change the font and style of captions and descriptions, or use a different photo gallery layout to arrange the pictures

Unit D 25Working with Pictures Changing a Photo Gallery’s Properties (cont.)  Adding a caption to a picture

Unit D 26Working with Pictures Summary  You can insert picture in Web pages  Picture in Web pages can be one of three formats: –GIF –PNG –JPEG (JPG)  You must embed pictures to save them as part of a Web site

Unit D 27Working with Pictures Summary  FrontPage automatically creates the images folder, where you save all picture files  After you insert a picture, you use the Pictures toolbar to change the picture’s characteristics  You can wash out pictures  You can change pictures to grayscale

Unit D 28Working with Pictures Summary  You can add text over a picture  You can use pictures to create image maps  You create hotspots in pictures  You can create WordArt, an object that uses text and special effects to create pictures

Unit D 29Working with Pictures Summary  You can use thumbnail pictures in place of large pictures to reduce download time  A photo gallery is a FrontPage component that displays pictures, thumbnail pictures, photo captions, and photo descriptions  After inserting a photo gallery, you can change its properties