Enhancing Your Web Site with Graphics

Core Training for Microsoft Office FrontPage 2003

Adding Pictures to a Web Page

1	To begin adding clip art to a Web page, click the Insert menu, point to Picture, and then click Clip Art.
2	To begin searching for a clip art image, in the Clip Art task pane, click in the Search for box, and for the purposes of this exercise, press SPACEBAR to have leaves typed for you.
3	To specify where FrontPage must search, click the Search in arrow, as indicated.
4	In the drop-down list, verify that the My Collections and Office Collections check boxes are selected, and clear the Web Collections check box.
5	To close the Search in drop-down list, click the Search in arrow.
6	To search for clip art only, click the Results should be arrow, as indicated.
7	In the drop-down list, verify that the Clip Art check box is selected, and clear the Photographs, Movies, and Sounds check boxes.
8	To begin the search, to the right of the Search for box, click Go.
9	To display the keywords, dimension, file size, and format of a clip art image, in the Results box, place the mouse pointer over the indicated clip art.
10	To insert this clip art into the page, click the arrow on the right side of the clip art, as indicated, and then click Insert.
11	To begin adding a digital photograph to a Web page, on the Standard toolbar, click the Create a new normal page button.
12	To insert the photograph, click the Insert menu, point to Picture, and then click From File.
13	In the Picture dialog box, on the Places bar, click My Documents, double-click The Garden Company folder, double-click the Pictures folder, and then double-click the parrot1.jpg file.
14	To close the Clip Art task pane, on the title bar of the pane, click the Close button.
15	To begin creating a thumbnail image of the photograph on this page, click the photograph.
16	On the Pictures toolbar, click the Auto Thumbnail button, as indicated.
17	To display the HTML code that links the thumbnail to the original photograph, at the bottom of the Page view editing window, click the Show Split View button.
18	To return to the Design pane, at the bottom of the Page view editing window, click the Show Design View button.
19	To experience the thumbnail link as your Web visitors will, on the Standard toolbar, click the Preview in Microsoft Internet Explorer 6.0 button, as indicated.
20	In the message box that appears, prompting you to save the page before previewing it, click Yes.
21	In the Save As dialog box, on the Places bar, click My Documents, double-click The Garden Company folder, double-click the Pictures folder, and then click Save.
22	To save the embedded graphics in the page, in the Save Embedded Files dialog box, click OK.
23	To display the full-size graphic of the thumbnail, in the browser window, click the thumbnail.

Editing and Formatting Pictures

1	To begin cropping a picture, in the Page view editing window, click the picture to select it, and then on the Pictures toolbar, click the Crop button, as indicated.
2	Drag the handle at the bottom-right corner of the crop box towards the center of the picture, until the bottom of the crop box appears just below the sphere at the bottom, as indicated.
3	Drag the handle at the top-left corner of the picture towards the center of the picture, until the top of the crop box appears just above the sphere at the top, as indicated.
4	To crop the picture to the specified shape and size, on the Pictures toolbar, click the Crop button again.
5	To begin resizing the picture, double-click the picture.
6	In the Picture Properties dialog box, on the Appearance tab, under Size, verify that the Specify size and Keep aspect ratio check boxes are selected, and double-click the contents of the Width box.
7	To set the width, for the purposes of this exercise, press SPACEBAR and the width will be entered for you in the Width box.
8	Notice that the height setting automatically changes to match the new width. To close the Picture Properties dialog box and apply your changes, click OK.
9	To convert the picture to black-and-white, on the Pictures toolbar, click the Color button, as indicated, and then click Grayscale.
10	To add a beveled frame to the picture, on the Pictures toolbar, click the Bevel button, as indicated.

Adding a Line, Shape, or Drawing to a Web Page

1	To add a line across the top of the page, click the Insert menu, and then click Horizontal Line.
2	To begin modifying the look of the horizontal line, double-click the line.
3	To decrease the width of the line, for the purposes of this exercise, press SPACEBAR and the width will be entered for you in the Width box.
4	To increase the height of the line, on the right of the Height box, click the indicated arrow once.
5	To change the color of the line, click the Color arrow, and then click the indicated square for the color Green.
6	To apply the changes and close the dialog box, click OK.
7	To deselect the horizontal line and view the effect of the changes, click below the line.
8	To begin creating a new drawing, click the Insert menu, point to Picture, and then click New Drawing.
9	To begin drawing a flower, on the Drawing toolbar that appears at the bottom of the editing window, click AutoShapes, point to Stars and Banners, and on the top row, click the indicated symbol for Explosion 2.
10	To use this shape as the "head" of the flower and insert it into the drawing, click in the indicated area of the drawing canvas.
11	To create a "stem" for the flower, on the Drawing toolbar, click AutoShapes, point to Flowchart, and on the third row from the top, click the Terminator symbol, as indicated.
12	Click below the Explosion 2 shape, and drag downward until it takes the shape of a thin stem.
13	To create a "leaf" for the flower, on the Drawing toolbar, click AutoShapes, point to Flowchart, and on the first row from the top, click the Decision symbol, as indicated.
14	To place the shape in the drawing canvas, click the blank area on the left of the drawing canvas.
15	To resize the Decision shape, point to its top-left resize handle and drag towards the center of the shape.
16	To rotate a shape, point to the rotating handle on the Decision shape and drag downward and to the right.
17	To position the Decision shape as a leaf on the stem of the flower, drag the leaf to the middle of the stem.
18	To join the head of the flower to the stem, point to the Explosion 2 shape and drag downward until it just touches the top of the stem.
19	To position the head of the flower so that it overlaps the stem, on the Drawing toolbar, click Draw, point to Order, and then click Bring to Front.
20	To begin coloring the flower, on the Drawing toolbar, click the Fill Color arrow, as indicated, and then click the indicated square for the color Yellow.
21	To select all parts of the flower, click the head of the flower, hold down the CTRL key, click the stem, click the leaf on the left, click the leaf on the right, and then release the CTRL key.
22	To group all the elements of the flower so that you can work with the flower as a whole, on the Drawing toolbar, click Draw, and then click Group.
23	To copy the entire flower, on the Standard toolbar, click the Copy button.
24	To create a garden with many flowers, on the Standard toolbar, click the Paste button.
25	To resize the flower you just pasted, click the flower, point to the resize handle in the top-left corner, and drag toward the center of the flower.

Creating a Photo Gallery and Adding Decorative Text

1	To begin creating a photo gallery, click the Insert menu, and then click Web Component.
2	In the Insert Web Component dialog box, in the Component type list, click Photo Gallery.
3	In the Choose a Photo Gallery Option box, notice that the first option, Horizontal Layout, is selected. To view another option, in the same row, click the second option, Montage Layout.
4	To select a layout for your photo gallery, click the first option, Horizontal Layout, and then click Finish.
5	To begin adding the pictures, in the Photo Gallery Properties dialog box, on the Pictures tab, click Add, and then click Pictures from Files.
6	To add the pictures, in the File Open dialog box, double-click The Garden Company folder, and then double-click the Graphics folder.
7	To include all of the photos in this folder in the photo gallery, click the plant1.jpg file, hold down the SHIFT key, click the plant12.jpg file, and then click Open.
8	To add a caption to a photo, in the Photo Gallery Properties dialog box, in the file list, click above the scroll box on the list scroll bar, and then click plant1.jpg.
9	To enter the caption, click in the Caption box, and for the purposes of this exercise, press SPACEBAR to have the caption typed for you.
10	To format the caption text, select the Override and use custom font formatting option, and triple-click the text in the Caption box.
11	To select a font type, click the Font arrow, as indicated, click twice above the scroll box in the drop-down list scroll bar, and then click Georgia.
12	To specify a font size, click the Font Size arrow, as indicated, click above the scroll box in the drop-down list scroll bar, and then click 2 (10 pt).
13	To specify a font color, click the Font Color arrow, as indicated, and in the color palette, click the indicated square for the color Purple.
14	To apply bold formatting to the caption text, click the Bold button.
15	To close the Photo Gallery Properties dialog box and generate the photo gallery, click OK.
16	To preview the gallery in your default browser, on the Standard toolbar, click the Preview in Microsoft Internet Explorer 6.0 button, as indicated.
17	In the message box that appears prompting you to save the page before previewing it, click Yes.
18	In the Save As dialog box, on the Places bar, click My Documents, double-click The Garden Company folder, and then double-click the TGCCorporate Web site.
19	To save the page, in the Save As dialog box, click Save.
20	To save the embedded graphics in the page, in the Save Embedded Files dialog box, click OK.
21	To display the full-size graphic for a thumbnail, in the Internet Explorer window, click the thumbnail above Four Deadly Beauties.
22	To close the browser window and return to FrontPage, on the title bar of the browser window, click the Close button.
23	To move the insertion point to the top of the page, above the gallery, press the UP ARROW key, and then press ENTER.
24	To begin creating a WordArt page title, click the Insert menu, point to Picture, and then click WordArt.
25	To select a style for the page title, in the WordArt Gallery dialog box, under Select a WordArt style, click the indicated WordArt style, and then click OK.
26	To specify text for the page title, in the Edit WordArt Text dialog box, in the Text box, press SPACEBAR to have text typed for you.
27	To close the Edit WordArt Text dialog box and insert the page title, click OK.
28	To close the WordArt toolbar, on the toolbar window, click the Close button.
29	To save changes made to the page, on the Standard toolbar, click the Save button.
30	To preview the page in your default browser, on the Standard toolbar, click the Preview in Microsoft Internet Explorer 6.0 button.