Making a Content Web Site

Site Map

Image
How do you do it?

Click to Image - Why it is important

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion
Insert Resize Frame Hyperlink Alternative Text Alignment

Go get your image. This can involve a few things beyond Right-click and Save copy as. This can involve getting the permissions for using that image. Go to the Content page to see the discussion on this.

So, I've grabbed an image from NASA to use for this demonstration.

Since I don't own the copyright on this image, I'm giving you all the information about this image I can, so you can trace the appropriate owner of the graphic and thus find the primary source for the information.

It is titled Cassini Captures Stunning View Of Saturn, and it is copyrighted by NASA/JPL/Space Science Institute.

You can find it at this NASA URL: http://www.nasa.gov/multimedia/imagegallery/image_feature_137.html

So, now with that out of the way, how do you:

  • insert the image - note the "handles"
  • manipulate the image - resizing, frames, hyperlink, alternative text
  • move the image around the text - left/right wrap around and tables.
View of the planet, Saturn

legend

Insert the image.

Top Menu Bar
  1. Put your cursor close to where you want the Image to be. (We will move it around the image later.)
  2. Insert > Image.
  3. In the window that opens, choose the right graphic filename.
  4. Click OK.

Remember a few things: the relative location of your graphic should be in the folders on the web server that you are using. In other words, the image needs to be in a folder near or actually in the folder with the web page. In fact, I would go so far as to say put your images in the server space first before using the Insert > Image feature. That way you do not have to worry if you have put the images in the right place, whether they are linked correctly to your page, or whether they will be seen by your external audience appropriately.

Resize the image

Left-Click feature
Properties Menu
  1. Click the image once. "Handles" will appear. Handles are small blocks that appear at the corners of the image.
  2. To maintain the same proportions and dimensions as you resize the image, hold down the Shift key and use the bottom right handle to resize the image.
  1. Click the image once. "Handles" will appear.
  2. Input the pixel size using the Properties menu. Change the W (width) or H (Height) numbers to the size you wish.

Resizing is particularly important. It allows you to change the size of the image, but it doesn't change the size of the file itself. It's the size of the web page with the images that determines how fast or slow a web page loads and slow loading web pages will lose audiences. Resizing is also important when remembering the monitor image size of your typical audience for your web site.

Frame the image

Properties Menu
Here's an example of framing an image:
  1. Click the image once.
  2. In Border, use numbers to change the width of the frame around your image.
Before
After

Most people do not use this feature often, but it can emphasize your image and make your image stand out from the background and the text, so it is an important feature in your arsenal.

Hyperlinking is identical to hyperlinking text.

Properties Menu
An example of hyperlinking an image:
  1. Click the image once. You are "selecting" or "highlighting" the image as you would hyperlinking text.
  2. Add the appropriate URL beside "Link".

When you click this image, you will go to the Nasa web site where his image was found.

Hyperlinking is the backbone of all web pages and ties web pages into a web site. The Hyperlinking page will give you more examples.

Alternative Text:

Properties Menu
An example of alternative text
  1. Click the image once.
  2. Add descriptive text beside "Alt".

 

Alternative text provides your audience with another opportunity for information. It is also a way from those who are visually impaired who use web page reading software to know what the image is on the page. Also, when your cursor sets on the image, you will see a text box with the alternative text. If your audience has turned off images in the browser, the alt text will appear in the box space of the image that isn't loading.

OK, all of that is nice, but what about putting the text and the image together in the web page and aligning them together?

The secret to placing images beside text is tables without borders. There it is, I've told you the big secret all web designers know. For the page with tables to see this in action, click here.

Alignment:

Properties Menu
Optional Space
  1. Click the image once.
  2. From the drop-down menu, use "align" right or left.
  1. Click Image once.
  2. Add numbers to the V (Vertical) and H (Horizontal) space around the image. This increases the amount of space between the image and the text.

 

Once again, if you can't seem to get the images and text to align like you wish, then use tables without borders to accomplish your design. Always check your web page design in a browser when aligning text and images in either fashion.

Information on Background images can be found on the Artistic Concerns page.

So, let's have a look at some examples of using images in the right way. Images should enhance your text. What might appeal to you is the "symmetry" used in the design. Things appear to be places "equally" and in proportion. Go to the Symmetry page to learn more about this.

Practice? Want some practice? I've set up a practice page for you to test yourself on the skills above.

Next on the agenda, Tables.

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion

Making a Content Web Site

Site Map

Image
How do you do it?

Click to Image - Why it is important