Adding Graphics to Your Web Site

Core Training for Microsoft FrontPage 2002

Adding Pictures and Clip Art

1	To display the Insert Clip Art task pane, click the Insert menu, point to Picture, and then click Clip Art.
2	To import clip art from the media folder listings, in the Add Clips to Organizer dialog box, click Options.
3	To accept the default import settings in the Auto Import Settings, click Cancel.
4	To begin cataloging the media files available on your computer, click the Insert menu, point to Picture, and click Clip Art.
5	To catalog the media files on your computer, in the Add Clips to Organizer dialog box, click Now.
6	To search for a gardening-related clip art image, in the Insert Clip Art task pane, click in the Search text text box, and type garden, and then click Search.
7	To display the description of a graphic, in the Insert Clip Art task pane, under Results, position the mouse pointer over the first graphic in the first row, and then point to the page.
8	To expand the search results, in the Insert Clip Art task pane, click the icon between Results, and the window in which the search results are displayed.
9	To collapse the search results, in the Insert Clip Art task pane, click the icon between Results, and the window in which the search results are displayed.
10	To insert a clip art image on the page, in the Insert Clip Art task pane, click the first image in the first row.
11	To open a new page, on the Standard toolbar, click the Create a new normal page button.
12	To open a picture file, click the Insert menu, point to Picture, and then, click From File.
13	To browse for a picture file, in the Picture dialog box, double-click the Garden Company folder, double-click the Pictures subfolder, and then click the GardenCo file.
14	To preview the selected picture file, in the Picture dialog box, click the Views arrow, and click Preview.
15	To insert the selected picture into the page, in the Picture dialog box, click Insert.

Editing and Formatting Pictures

1	To modify the search criteria, in the Insert Clip Art task pane, click Modify.
2	To begin searching for roses, in the Insert Clip Art task pane, in the Search text text box, type roses.
3	To search for photographs only, click the down arrow next to the Results should be box, and then click the Clip Art check box, the Movies check box, and the Sounds check box.
4	To collapse the Results should be list, in the Insert Clip Art task pane, click the arrow next to the Results should be box.
5	To search for photographs of roses, in the Insert Clip Art task pane, click Search.
6	To insert a photograph on the page, in the window in which the search results are displayed, in the first row of the left column, click the first picture.
7	To close the Insert Clip Art task pane, click the close button in the upper-right corner of the Insert Clip Art task pane.
8	To display the Pictures toolbar, click the View menu, point to Toolbars, and then click Pictures.
9	To reposition a toolbar, position the mouse pointer over the title bar of the Pictures toolbar, press and hold down the mouse button, drag the mouse down until it merges into the bottom bar, and release the mouse button.
10	To select the photograph, position the mouse pointer over the photograph of the rose, and click the mouse button.
11	Notice that the Pictures toolbar is activated. To crop the selected photograph, on the Pictures toolbar, click the Crop button.
12	To select the crop area, position the pointer over the handle in the center of the right edge of the cropping box until a double-headed arrow appears, press and hold down the mouse button, drag the mouse to the left, until the dashed line aligns with the edges of the outer petals, and then release the mouse button.
13	To crop the photograph to the selected area, on the Pictures toolbar, click the Crop button.
14	To begin resizing the photograph, position the pointer over the center of the photograph, and double-click the mouse button.
15	To resize the photograph, in the Picture Properties dialog box, in the Appearance tab, click the Specify Size check box, double-click in the Width text box, type 200, and then click OK.
16	To change the color of the selected image to shades of gray, on the Pictures toolbar, click the Color button, and then click Grayscale.
17	To give the center of the photograph a raised effect, on the Pictures toolbar, click the Bevel button.

Creating and Displaying Thumbnails

1	To select the picture, position the mouse pointer over the picture, and click the mouse button.
2	To create a thumbnail of the selected picture, on the Pictures toolbar, click the Auto Thumbnail button.
3	To view the HTML code of the selected picture, click the HTML tab at the bottom of the Page view editing window.
4	To return to the Normal pane, at the bottom of the Page view editing window, click the Normal tab.
5	To resize the thumbnail, place the mouse pointer on the lower-right corner of the photograph until the pointer changes into a double-headed arrow, press and hold down the mouse button, drag the picture down until the lower border of the picture aligns with the Navigation icon in the Folder List, and then release the mouse button.
6	To undo the grainy effect, on the Standard toolbar, click the Undo button.
7	To test the thumbnail link, at the bottom of the Page view editing window, click the Preview tab.
8	To open the original image, in the Preview window, click the thumbnail.

Adding a Line, Shape, or Drawing

1	To insert a horizontal line at the top of the page, click the Insert menu, and then click Horizontal Line.
2	To display the properties of the horizontal line, double-click the line.
3	To increase the height of the line, in the Horizontal Line Properties dialog box, click the up arrow by the side of the Height text box.
4	To decrease the width of the line, in the Horizontal Line Properties dialog box, double-click the Width text box and then type 80.
5	To change the color of the line, in the Horizontal Line Properties dialog box, click the arrow by the side of the Color selection box, and then, in the first row, click the third color from the left.
6	To apply the changes made to the line, in the Horizontal Line Properties dialog box, click OK.
7	To deselect the horizontal line, press END.
8	To open a drawing canvas, click the Insert menu, point to Picture, and then click New Drawing.
9	To reposition the toolbar, position the mouse pointer over the title bar of the Drawing toolbar, press and hold the mouse button, drag the mouse down until it merges into the bottom bar, and release the mouse button.
10	To display the list of pre-defined shapes, on the Drawing toolbar, click the AutoShapes button.
11	To select a symbol that you can use to create a flower head, point to Stars and Banners and then, in the first row, click the second symbol from the left.
12	To insert the symbol on the canvas, position the mouse pointer inside the upper-right corner of the drawing canvas, press and hold down the mouse button, drag the mouse down and to the left, until the symbol's lower edges align with the Reports icon in the Folder List, and then release the mouse.
13	To align the right leaf with the stem, click the leaf to select it, position the mouse pointer over the green dot until a semi-circular arrow appears, press and hold down the mouse button, turn the leaf so that the lower left corner of the leaf touches the stem, and then release the mouse button.
14	To move the stem behind the flower head, click the stem, on the Drawing toolbar, click the Draw button, point to Order, and then click the Send to Back button.
15	To select the flower and its elements, click the flower head, press and hold down the CTRL key, click the core, click the stem, click the right leaf, click the left leaf, and release the CTRL key.
16	To group the selected elements, on the Drawing toolbar, click the Draw button, and then click Group.
17	To copy the flower head, on the Standard toolbar, click the Copy button.
18	To insert the copied flower head on the canvas, on the Standard toolbar, click the Paste button.
19	To move the copied flower away from the original flower, position the mouse pointer over flower until a four-headed arrow appears, press and hold down the mouse button, drag the flower to the left of the original until it is directly below the new_page_1.htm tag, at the upper edge of the Page view editing window, then release the mouse button.
20	To enlarge the new flower, position the mouse pointer on the upper-left corner of the flower head until a double-headed arrow appears, press and hold down the mouse button, drag the flower to the left until it is in line with the Normal tab at the lower edge of the Page view editing window, and then release the mouse button.
21	To ungroup the flower, on the Drawing toolbar, click the Draw button, and then click Ungroup.
22	To color the symbol that resembles the sun, click the symbol, click the Format menu, and then click AutoShape.
23	To choose a color for the sun, in the Format AutoShape dialog box, in the Colors and Lines tab, in the Fill area, click the arrow next to the Color box, in the fourth row, click the third color from the left, and then click OK.

Creating a Photo Gallery

1	To begin searching for photo gallery layout styles, click the Insert menu, and then click Web Component.
2	To preview the available photo gallery layout options, in the Insert Web Component dialog box, in the Component type window, click Photo Gallery.
3	To display the description of the Montage Layout, in the Insert Web Component dialog box, in the Choose a Photo Gallery Option window, click the second layout in the top row.
4	Notice that the description of the layout is displayed in the lower half of the Insert Web Component dialog box. To use the selected layout, in the Insert Web Component dialog box, click Finish.
5	To add images to the photo gallery, in the Photo Gallery Properties dialog box, click Add, and then click Pictures from Files.
6	To browse for a picture file, in the File Open dialog box, double-click the Garden Company folder, double-click the Pictures subfolder, and then double-click the Photo Gallery subfolder.
7	To select photos for the photo gallery, press and hold down the SHIFT key, click plant12, release the SHIFT key, and click Open.
8	To preview a photo, in the Photo Gallery Properties dialog box, in the Pictures tab, click plant7.jpg.
9	To give a caption to the selected photo, in the Photo Gallery Properties dialog box, click in the Caption text box, and then type Flowers.
10	To change the default font settings, in the Photo Gallery Properties dialog box, click the Override and use custom font formatting option.
11	To change the font style of the caption, in the Photo Gallery Properties dialog box, double-click Flowers, click the arrow next to the Font box, and then click Verdana.
12	To change the size of the caption, in the Photo Gallery Properties dialog box, click the arrow next to the Size box, and then, click 4 (14 pt).
13	To change the color of the caption, in the Photo Gallery Properties dialog box, click the arrow next to the Font Color box, and then, in the first row, click the fourth color from the left.
14	To make the caption bold, in the Photo Gallery Properties dialog box, click the Bold button.
15	To generate the photo gallery, in the Photo Gallery Properties dialog box, click OK.
16	To preview the photo gallery and display the added caption, at the lower edge of the Page view editing window, click Preview, and then, in the list of displayed images, in the third row, position the pointer over the third picture from the left.

Adding Stylized Text to a Web Page

1	To begin creating a heading for your Web page, on the Insert menu, point to Picture, and then click WordArt.
2	To select a style for the heading, in the WordArt Gallery dialog box, in the third row, click the third style from the left, and then click OK.
3	To type a new heading, in the Edit WordArt Text dialog box, type Carnivorous Plants.
4	To select a new font for the text, click the arrow next to the Font box, and then click Tahoma.
5	To change the size of the text, in the Edit WordArt Text dialog box, click the arrow next to the Size box, and then click 24.
6	To make the text bold, in the Edit WordArt Text dialog box, click the Bold button.
7	To close the dialog box, click OK.
8	To close the WordArt toolbar, click the close button on the upper-right corner of the toolbar.
9	To shift the text, click once to the left of Carnivorous Plants, click the Format menu, and then click Paragraph.
10	To move the heading to the center of the page, in the Paragraph dialog box, click the arrow next to the Alignment box, click Center, and then click OK.