Formatting Graphics

Manipulating Images in Dreamweaver

What kind of standard graphic images can be used?

Image formats supported are as follows

  1. JPEG format (Joint Photographic Experts Group) - often compressed files used for photos and artwork with a wide colour spectrum. Used for photos.
  2. GIF format (Graphics Interchange Fprmat) - only 256 colours. Compressed to about 50%, so takes up less space and loads fast. Used for simpler images with blocks of colours but small colour range.
  3. PNG (Portable Network Graphic) images are a web standard designed to replace GIFs. Can handle 24 bit colour . A new standard, growing in popularity.

Sample images

A jpeg 400*300, space 32kb Click to view

A thumbnail jpg size100*100 pixels storage space 3,767bytes, takes 2 secs to load. Click to view

A GIF! 400*300, size 64KBClick to view

A PNG file. This would be very expensive on space, but very high quality!
Size 400*300 storage space 192KB Click to view

What to use?

Some images (photographic) do not look good as GIF's. Others (clip art) are best saved as GIF's

Gifs are common for clip art and small art images made with a drawing program such as this: Bart with a spray can being a vandal

 

Thumbnails Thumbnails are small versions of the image. This loads much faster and takes up much less space.

The thumbnail can hyperlink to a large version of the image. This is a common practice to save loading time and space.

More detail and Examples

Inserting Images into your page.

  1. Put the cursor where you want the image.
  2. Insert menu, IMAGE. (or icon in the Objects Panel) A dialogue box comes up to allow you to select the image.


Manipulating images

When an image is selected it can be manipuated via its handles to make it bigger or smaller.
To change other attributes use the Property Inspector.

This is the Property Inspector as it appears when you are editing images

Alternative Text is used to display written information about image - for slow connections or where images cannot be displayed. - also widely used to give information over an image when the user moves the mouse over it. Move the mouse over the image above to see this.


External Editor can be linked to edit images directly. This is linked to MGI Photosuite on my computer.
Have a look at the Preferences for file types/editors.


The Low Scr option allows you to initally load a low resolution image of an image. This will be followed by the full version. This option decreases loading time for the page. The low resolution image will either be a greyscale or a thumbnail version. This option only has effect when loading from the Web.    

Text Alignment to image has a number of options. The default is baseline. The example shows middle. Text entered will go to the edge of page and then jump below the image.

The Point To tool allows you to set a link by dragging to it.

  1. Set an Anchor somewhere on the page
  2. Drag over where you want the link to be and drag from the Point To tool to the anchor.
  3. Try this - Go to top of page

Text and Images

You can write alongside images, but not on both sides.
There can only be one line of text. Alignment is set using the alignment box

The alignment for this toy duck image is set to absolute middle