A rchive Date
[ 13-06-2000 ]
Category
[ Information Technologies ]
sub-Categoy
[ Computers ]
|
[Insert drawing objects in HTML documents (97)
August 1999
As you've probably discovered, HTML doesn't support Word's drawing objects. This means that if you save a Word document in HTML format, you lose any Autoshapes or WordArt text effects your document includes. Fortunately, you can convert those items to pictures before you save a document as HTML. Word then saves the pictures as individual GIFs so that Web browsers can display them. But what if you're creating or developing an HTML document in Word's Web-authoring environment? Suppose, for example, that you've used Word's Blank Web Page template to create a new HTML file, and you want to add a fancy heading. WordArt could supply the text effects you're after, but a glance at the Drawing toolbar in the Web-authoring environment reveals no Insert WordArt button. In fact, none of the regular drawing tools are available.
If you need to add a drawing object to an HTML document, you can achieve the results shown in Figure A by creating it as a picture. When you save the document, Word then saves that picture as a separate GIF file. The only catch is that you'll no longer be able to edit the picture in your document (since it no longer exists in the document). However, assuming you format the picture to look the way you want before you save changes to the HTML document, this shouldn't pose a problem. Let's work through a couple of examples to see how the process works.
Creating a WordArt picture
To take advantage of this technique, you first need to open an HTML document. For our examples, we'll use Word's Web Page Wizard to create a new file. To do this, choose File/New from the menu bar and click on the Web Pages tab. Then, select Web Page Wizard and click OK. As the wizard guides you through the process, click Next in the first screen and Finish in the second screen to accept the default options. Word creates the new HTML document and switches to the Web-authoring environment.
Once Word opens the new document, you can create a picture. Let's assume you want to use WordArt to insert a heading at the top of the page. Begin by selecting the first line of placeholder text--Insert Heading Here--and pressing [Enter]. This deletes the text and inserts a new paragraph. Now, move the insertion point to the new paragraph and choose Insert/Object from the menu bar. When the Object dialog box opens, select Microsoft Word Picture from the Object Type list box, and click OK. Word switches to the picture editing window and displays the Drawing toolbar.
Now you can insert and format your WordArt as you ordinarily would. Click the Insert WordArt button on the Drawing toolbar. Then, select the desired design option (we chose the first option in the third row) and click OK. When the Edit WordArt Text dialog box appears, type Third Quarter Objectives and click OK. Word inserts the WordArt text in the picture editing window--but not within the picture boundaries. If you close the picture editing window at this point, your picture would display only the portion of the WordArt text that appears within the boundaries.
To make sure the entire object is visible, click the Reset Picture Boundary button on the Edit Picture toolbar. Word then expands the boundaries to encompass all the WordArt text. (In the event that your WordArt text is smaller than the picture boundaries, clicking this button shrinks the boundaries to eliminate excess space around your text.) When you've finished, click Close Picture.
As we mentioned, you can also insert an AutoShape as a picture in an HTML document. For instance, suppose you want to insert an AutoShape object that contains the text Updated Weekly!. Begin by positioning the insertion point where you want the item to appear on the page. Then, choose Insert/Object from the menu bar, select Microsoft Word Picture, and click OK to open the picture editing window. Now, click AutoShapes on the Drawing toolbar, choose Stars And Banners from the AutoShapes menu, and select the Wave button from the submenu.
The AutoShape can be any kind of object you want; simply drag across the picture editing window to draw it. Note that you can draw the object anywhere in the window and make whatever size and shape adjustments you need to.
After you draw the AutoShape, right-click on it and choose Add Text from the shortcut menu to insert a text box. Choose any font (we used Arial) and font size (we used 24) from the Font and Font Size dropdown lists. Then, select a color from the Font Color dropdown list and click the Center button. Now.
To improve the effect, click the arrow beside the Fill Color button on the Drawing toolbar and select a fill color for the AutoShape. We opted for Light Turquoise. We'll refrain from anymore fine-tuning here, but bear in mind that you can format an AutoShape in the picture editing window just as you'd format a regular AutoShape. When you're satisfied with the object's appearance, click the Reset Picture Boundary button on the Edit Picture toolbar, and then click Close Picture. When you've finished, your HTML document will look similar to the one shown in Figure A.
Conclusion
To use Word's drawing objects in your HTML documents, all you need to do is create and save them as pictures. Then, when you save the HTML document, Word converts your pictures to GIFs and saves them in the same folder as the HTML file.
Copyright © 1999, ZD Inc. All rights reserved. ZD Journals and the ZD Journals logo are trademarks of ZD Inc. Reproduction in whole or in part in any form or medium without express written permission of ZD Inc. is prohibited. All other product names and logos are trademarks or registered trademarks of their respective owners. ]
|