Embedding Graphics

Graphics (GIF images) can be embedded in the document using the Insert Image command in the HTML Author menu, or by clicking on the Image button in the HTML Author toolbar. You will then see a dialogue box labelled Embedded Image as shown below.

If you press the Browse button HTML Author will then display a list of all the .GIF files in the same directory as the document you are editing, using the Browse Files Dialogue Box. You should select the GIF image that you want to insert. The OK button will cause the image to be inserted in the document. An image may be deleted by selecting it with a single mouse click and pressing the delete key.

The Alt text field allows you to create some text that will be used instead of the image on cases where the image cannot be displayed by the browser (e.g. text only browsers).

If the Image Map check box is filled, the image may be used as an image map in an HREF anchor. This will cause the browser to send the coordinates of the mouse within the image to the server when the image is clicked.

The Alignment attribute influences the relationship between the image and adjacent text. The options are described in Table 1.

You may edit the properties of an embedded image by selection the image (with a single mouse click), then clicking on the Image button or selecting the Insert Image command in the HTML Author menu. HTML Author will then display the dialogue box for the currently selected image. (Take care not to double click the image - see the note below.)

If Left or Right alignment is specified, the image will be placed in a frame on the Word for Windows screen so that the text is able to wrap around the image in the Page Layout View. By switching to Page Layout View in Word, you should be able to see roughly how the page will look when rendered in an HTML browser such as Netscape. Note, however, that the precise appearance will depend on the browser, and various factors such as the screen width and resolution, etc. The Top and Middle alignments are not displayed as WYSIWYG in the source document as it has not been possible to obtain these alignments on the Word screen.

Notes on the Treatment of Embedded Images

Layout problems may sometimes be encountered in Page Layout View when using Left or Right alignment, particularly if the image to be displayed is quite large. If an Anchor field is included in the text that wraps around the image, there may not be enough space to display the anchor on the screen. This problem will disappear if you switch back to Normal View in Word.

It is possible to move the frame of left or right aligned images on the page using the mouse. This will not affect the HTML generated, but the screen display will no longer reflect the format expected in the HTML browser. The correct position on the page may be recovered by bringing up the dialogue box for the image as described above, and pressing the OK button. The positioning of all such images may be restored using the Restore Layout command from the HTML Author menu. This will reposition all Right or Left aligned images, and will also adjust the width of all horizontal rules.

HTML Author stores relative pathnames for all images inserted by means of the Insert Image command or the Image button. (Relative to the path of the current file.) It is also possible to insert GIF images by using the Picture command from the Microsoft Word for Windows Insert menu. However if you do this, the absolute filename (relative to the root directory) will be stored and will be inserted into the HTML generated. In this case, you must also ensure in this case that the graphic is linked to a file, or it will not be referenced at all in the HTML file generated.

Finally, you must avoid double clicking on embedded graphical images in the HTML source document (unless they appear in an anchor field). This causes Word for Windows to edit them, which breaks the link with the file. If you do this by accident, then close the picture, and immediately click on the Undo button in the toolbar. (This is a Word for Windows button.)

Refreshing Embedded Graphics

To refresh embedded graphics fields, so that the source document shows the latest version of the image, use the Update Pictures command in the HTML Author menu. This command ensures that relative filenames for images are treated correctly. (The Word for Windows "Update Links" command will not guarantee this.)