Images

Before you put any images in your web page, you must first put the images into the same folder where you have saved your web page. YOU MUST DO THIS FIRST.

Remember:

  • Check the names of the image files, and remove uppercase, spaces, or symbols
  • DO NOT use bmp or png images. They must be jpg or gif. DO NOT change the filename extensions! That will not change the image type.
  • If you are using large images, for example from a digital camera, remember you must size them down first! If you don't know how, see Mr. Poza for help.

Okay, so now you have the images in your web page folder, and they are named correctly.

Next, select the location you want for the image; click there.

Next, click on the image button in the toolbar:

You will see a dialog box open, like this one:

First, click on the CHOOSE FILE button. That will allow you to locate the image file. MAKE SURE you choose the image in the same folder as your web page!

Next, make sure the URL is relative to the page location. This means that the "Image Location" is the exact same as the image filename. If the Image Location begins with "file:///" that means the URL is not relative, and the web page will have problems later!

Now, you should be able to see the image in the "Image Preview" box at bottom left. If not, then there is a problem, and you must find it and fix it.

Finally, click on the "Don't use alternate text" button. Or, if you prefer, you can type in some alternate text (anything is fine). If you don't do one of those two things, then you can't close this dialog box!

When you have finished these points, just click "OK" and you will see the image in your page!

If you ever want to edit the image again, just double-click it.


Image Size

Another tab in the Image dialog box is the DIMENSIONS tab:

Here, you can change how big the image appears in the web page. Remember, this does not change the REAL size of the image--it just tells the browser to make it look a different size, that's all.

"Constrain" means that if you change one size, the other size number will change by the same percent.


Image Appearance

Next, you can change the appearance of an image, including the border, extra space around the image, and how the text on the web page wraps around the image:

First, Spacing (all numbers are in pixels):

  • Left and Right: adds extra space to the left and right of the image.
  • Top and bottom: adds extra space to the top and bottom of the image.
  • Solid Border: changes the thickness of the border. Type "0" for no border.

Next, Align Text:

  • At the top: only one line of text will be on the left or right of the image; that text will appear along the TOP of the image.
  • In the center: only one line of text will be on the left or right of the image; that text will appear along the CENTER of the image.
  • At the bottom: only one line of text will be on the left or right of the image; that text will appear along the BOTTOM of the image.
  • Wrap to the left: the image will appear on the RIGHT side of the page, and many lines of text will go around it on the left side.
  • Wrap to the right: the image will appear on the LEFT side of the page, and many lines of text will go around it on the right side.

Image Link

The last tabe allows you to make the image into a link, so if someone clicks on the image, they will go to the linked page.

Just type in the address of the other page, just like when you make a regular link.


Next, we'll use some tables.