Adding Images To Your Web Page

Fun time! Images liven up your Web page like nothing else... and WebExpress is the best editor there is for positioning images on your page.

Before beginning, you'll need to save the two images we're going to use in this section. They are shown at right. To save them to your hard drive:

  • Click on the image in your browser using your right mouse button.

  • From the menu that appears, select 'Save Image As'.

  • A file window will appear. Save the image in the same folder or directory where your "My Sample Web Page" document is saved.


AIMAGE1.GIF


AIMAGE2.GIF


Step 1: We'll begin by placing the image of the globe (aimage1.gif) at the very top of your Web page.

  • Move the cursor to the beginning of your page heading, the paragraph that says, "My Sample Web Page".

  • Press the 'Enter' key. A blank line will be inserted at the top of the page, and all the other paragraphs will move down. The blank line will already be centered, since the new paragraph adopts the format of the paragraph below.

  • Move the cursor up to the new blank line. From the WebExpress Menu, select 'Insert' then 'Image'. The Picture Dialog Window will appear, as shown at left.

  • On the Picture dialog, click the button that says 'File...'. A file window will appear. Locate the image aimage1.gif that you saved from this page, highlight the name of that image, and click 'OK'.

  • Back in the Picture Dialog Window, enter the words "Globe Image" in the text box that's entitled 'Alternate Text'. A user's browser will display this text while the image is loading, or instead of the image if the user has image loading disabled in his/her browser.

Note: You can also enter the URL for a "remote" image rather than specifying a file name for a local image. More information on this and other advanced image options available from the Picture Dialog Window, like special border and positioning functions, are discussed in detail in the Advanced Image Functions.

  • Now click the 'OK' button on the Picture dialog window. Your page should now appear as shown at right:

 

It's important to remember that in WebExpress your image will be treated as part of a paragraph, whether on a line by itself or inserted between text. You can even place an image in the middle of a sentence, if you wish. When you change the paragraph's format or alignment, the image is repositioned accordingly.

For example, if you move your cursor up to the top of your page where the globe image is and click the center, right, or left alignment buttons, you'll see your image change position in the same way that text within a paragraph would.

Assignment: Place the other image, the WebExpress logo (aimage2.gif), on the bottom of your sample page. Center it, then turn it into an image hyperlink to the MicroVision Home Page. To do this, use the instructions for creating a text hyperlink but instead of highlighting any text, highlight the image after you've placed it at the bottom of your page.

When you're finished, your page will appear similar to the page reproduced at left. 'View' it with your browser and make sure the image hyperlink works!


When you complete your assignment, you are ready for the next section
of the tutorial, 'Tables: Positioning Text and Images'. Be there!

 

Copyright © 1997 by MicroVision Development, Inc