Adding a Line, Shape, or Drawing to a Web Page | MicrosoftВ® Office ExcelВ® 2003 Step by Step (Step By Step (Microsoft))

When it comes to dressing up your pages with graphic elements, you are not limited to clip art, pictures, and photographs. You can also create designs with lines, squares, circles, and other shapes , and if you are artistically inclined, you can even create entire drawings from within FrontPage. For professional-quality art, you should use a dedicated graphics program, but you can use FrontPage to turn out simple, Web-ready artwork.

FrontPage 2003 includes drawing tools that make it easy to incorporate specially formatted lines, a wide variety of preformed shapes, WordArt objects, text boxes, and shadows. These tools are similar to those in Microsoft Office Word and Microsoft Office PowerPoint. You can also copy drawings from other Microsoft Office System applications and paste them directly into your FrontPage-based Web site.

The commands you use to work with most graphics are represented as buttons on the Drawing toolbar and on the Drawing Canvas toolbar. Both of these toolbars can be opened at any time by right-clicking the toolbar area and clicking their names on the toolbar shortcut menu. The Drawing toolbar contains these commands:

The commands on the Draw menu control the grouping, position, and movement of objects.
You can use the Select Objects command to change the insertion point to a pointer so that you can select a drawing object for editing.
You can use the AutoShapes command to display a menu from which you can choose any of 130 shapes, ranging from basic geometric shapes and arrows to fully formed weather indicators. Special flowchart, banner, and call-out symbols are also included. Clicking More AutoShapes at the bottom of the menu displays an additional 73 basic clip art items that you can build on. You can drag the AutoShapes menu or any of its submenus away from the Drawing toolbar so that they become floating toolbars.
You can use the Line, Arrow, Rectangle, and Oval commands to draw these basic shapes in any size by clicking and dragging the shape onto the page.
You can use the Text Box command to insert a text frame within a drawing.
You can use the Insert WordArt, Insert Clip Art, and Insert Picture From File commands to insert existing graphic elements from your local computer or the Internet into your drawing.
You can use the Fill Color, Line Color, and Font Color commands to control the colors of their respective elements.
You can use the Line Style, Dash Style, and Arrow Style commands to format the thickness , color, solidity, and end caps of line elements.
You can use the Shadow Style command to apply a variety of shadows to graphic elements. Clicking Shadow Settings opens a separate toolbar with which you can move an existing shadow or change its color.
You can use the 3-D Style command to give graphic elements a three-dimensional look.

You can group several drawing elements together so that you can treat them as one. In this way, you can create a drawing out of several shapes, and then copy and paste the entire drawing, or reduce or enlarge it. If you want to treat the drawing as individual elements again, you can ungroup them at any time.

The frame in which drawings are created in FrontPage is called the drawing canvas . You can use the drawing canvas as an actual frame by formatting it with visible borders and background colors, but its main purpose is to contain all the elements of the drawing, so that the underlying HTML code for the drawing can be selected and treated as a unit. The formatting of the drawing canvas also determines the way in which text wraps around the drawing and the position of the drawing in relation to other objects on the page.

The Drawing Canvas toolbar opens when you insert a new drawing.

You can use the Fit Drawing to Contents command to enlarge or shrink the drawing canvas to the same size as the drawing it contains.
You can use the Expand Drawing command to stretch the drawing to the current size of the canvas.
You can use the Scale Drawing command to enlarge the drawing to the current size of the canvas, but maintain its original height-to-width ratio.

In this exercise, you will first draw a horizontal line, create and insert a drawing that incorporates predefined shapes, and insert a shape directly into a Web page.

On the Standard toolbar, click the Create a new normal page button to create a new page.
On the Insert menu, click Horizontal Line to draw a simple line across the top of the page.
Right-click the line, and then click Horizontal Line Properties on the shortcut menu.

The Horizontal Line Properties dialog box appears.
In the Horizontal Line Properties dialog box, do the following:
- Set the Width to 80 percent of the window.
- Set the Height to 3 pixels.
- In the Color drop-down box, click the Green square.
  
  Tip
  Move the mouse over the colors in the Color drop-down list to see each color s name displayed as a ScreenTip.
- Click OK to close the dialog box and apply your settings, and then click any where on the page to deselect the horizontal line.
Press [CONTROL]+[END] to move the insertion point to the end of the page.

On the Insert menu, point to Picture , and then click New Drawing .

FrontPage displays an empty drawing canvas, the Drawing Canvas toolbar, and the Drawing toolbar.

Tip	Depending on your previous actions, the Drawing toolbar might open as floating or docked . If it opens as a floating toolbar, you can dock it to keep it out of the way while you re working.

On the Drawing toolbar, click the AutoShapes button to display the menu of available shapes.

Tip	When you see a drop-down list with a handle on it (horizontal lines in a shaded stripe), you can drag the menu onto the work area, and it will float there as a toolbar until you click its Close button. Alternatively, you can dock it at the left, right, or bottom edge of the window.

Point to Stars and Banners , and then click the Explosion 2 symbol (the second symbol in the top row).

Tip
Move the pointer over a symbol to see the symbol s name displayed as a ScreenTip.
Point to the upper-right corner of the drawing canvas, and drag downward to create a small explosion shape.

This shape will become the head of a flower.
Use the Terminator and Decision shapes available on the AutoShapes Flowchart menu to create a stem and leaves for your flower.
To rotate the leaves to appropriate angles, click each in turn, and drag its rotate handle (the green dot) in a clockwise or counterclockwise circle.
After the leaves are rotated , drag them into position against the stem.
Right-click the explosion, and on the shortcut menu, point to Order , and then click Bring to Front .

The head of the flower now appears in front of the stem. Depending on how closely you overlapped your stem and flower head, this repositioning might be difficult to see.
Experiment with the available shapes to create a garden scene.
Click the head of the flower to select it, hold down the [SHIFT] key, and click the stem and each of the leaves so that they are all selected.
Right-click the selected elements, and on the shortcut menu, point to Grouping , and then click Group .

The elements are grouped so that you can work with the flower as a whole.
On the Standard toolbar, click the Copy button to copy the picture to the Office Clipboard.
On the Standard toolbar, click the Paste button several times to paste multiple copies of the flower into your drawing to create an entire field.

Troubleshooting
If you find that you are pasting copies of the flower outside the drawing canvas, delete those flowers, click inside the drawing canvas, and paste again.
Drag each flower s sizing handles to move the flowers and make a field of flowers of different sizes.
Right-click each flower, point to Grouping on the shortcut menu, and click Ungroup to separate the elements so that they can be individually colored.
Right-click the sun in your picture, and click Format AutoShape on the shortcut menu to display the Format AutoShape dialog box.
In the Format AutoShape dialog box, do the following:
- On the Colors and Lines tab, set the Fill Color to Yellow .
- Click OK to close the dialog box and apply your settings.
Color the flower elements to create a cheerful garden scene.

CLOSE the Drawing toolbar, and then close the practice file, saving your work if you want.