Using Dreamweaver
by Vivienne Trulock
Users of this site also found these sites useful
Dreamweaver MX Tutorial
Created and designed by Vivienne Trulock for ilikecake, 2005
Images
Now we need to know how to make our pages visually appealing. One of the ways we can do this is to use graphics. There are 3 types of image formats supported on the internet.
GIF: Graphic Interchange Format
- compressed format
- normally used for simple graphic images
- not suitable for photos or images with gradiations
- file sizes are normally very small
- supports maximum of 256 colours
- can be wholly or partially transparent, but may get jagged edges
The 8 images below illustrate how additional colours improve the image, but even 256 colours cannot smooth the gradient if it is saved in gif format
The first image on the green background is a gif image with alpha transparency. The second image on the green background is a gif image with index transparency. Both give reasonable transparency quality although some white edging can be seen.
JPEG: Joint Photographic Experts Group
- compressed format
- suitable for photos or images with gradiations
- file sizes can be very small, depending on percentage of compression
- higher compression correlates to poorer image quality (lossy compression)
- transparency not supported
- supports millions of colours
The 10 images below illustrate how improving the quality improves the overall image, however higher qualities are very similar in quality but the 90% image is 3kb in size, while the 100% image is 5kb.
The image below illustrates that when an image with a transparent background is saved as a jpeg the background is displayed as white.
PNG: Portable Network Graphics
- lossless compression - no change in image quality
- supports millions of colours
- file size usually larger than equivalent gifs or jpegs
- can be wholly or partially transparent, with no jagged edges
- not supported by older browsers
The 4 images below illustrate the different qualities of the png formats
Some png formats support transparent backgrounds and others don't.
The first image is saved as a png 8 with alpha transparency. This displays perfectly in Firefox, but in Internet Explorer 6 is very rough around the edges.
The second image is saved as a png 8 with index transparency. This displays with some white edging in both browsers.
The third image is saved as a png 24. This displays the same as the jpeg above - with a white background.
The fourth image is saved as a png 32. This displays perfectly in Firefox, but in Internet Explorer 6 the background will display as a gray-blue colour.
Inserting images
The next exercise talks you through inserting graphics into your page. For images you can use, click here.
Exercise - inserting an image
Open your page and click where you want your image to go. Go to 'Insert
> Image'.
Click on the browse icon and search for your image - images you can use in your web-site must be either gifs, jpegs or pngs.
Click 'Select' to insert the picture into your page.
Properties Window
The properties window changes to reflect the image properties, when the image is selected.
Width and Height
The width and height of an image is shown below. This can be changed by typing in new values. It is not recommended to resize images in Dreamweaver as you will lose quality. Small images stretched bigger will appear pixelated. Large images squashed up will appear blurred. It is best to use an image editor such as Fireworks or Photoshop to resize images as they have algorithms which optimise image quality.
If you accidentaly resize an image in Dreamweaver, the figures in the window will appear in bold. To return the image to its original proportions, just click on the W or H to the left.
Image Location
The location of the image itself is stored in the Src box. Image files should be located inside your site folder, normally in a subfolder, called images.
Image Links
Some images are just nice pictures to look at, while others can become hyperlinks themselves. Image links work the same way as text links.
Click on the image on your page to select it. If you don't select the
image you won't be able to access the image properties window. Go to 'Modify
> Make Link' or right-click and select 'Make Link' or
click on the browse button (folder) beside the link box in the image properties
window.
Select the page you want to make the link to, from the list and press 'Select'. Save your page and check your link in a browser.
Image Alignment
The best way to align images is by aligning the table
cell contents, but this is only possible if the image is inside a table.
If your image is not inside a table you can set the alignment of an image
directly by selecting the alignment from the dropdown menu, or using the
alignment buttons.
NOTE: The image alignment option as outlined above uses the <IMG align=""> attribute, which has been deprecated. Therefore, it is not recommended to use this option. the style sheets method of aligning images is preferred.
Alternative Text
Alt text is required by visually impaired people using screen readers so that they can understand what the image is. Alt text should be meaningful and add to the users understanding. If the image has no function set the alt text to <empty>.
Borders
Images can have borders if you like. Simply put a number in the border
box to put a border on the image. If the image is a link the border colour
will take on the default link colours of the document.
NOTE: The image border option as outlined above uses the <IMG border=""> attribute, which has been deprecated. Therefore, it is not recommended to use this option. the style sheets method of specifying image border size is preferred.
Image Position
To position the image exactly, insert the number of pixels from the top
(V space) and the number of pixels from
the left (H space).
NOTE: The image position option as outlined above uses the <IMG hspace="" vspace=""> attribute, which has been deprecated. Therefore, it is not recommended to use this option. the style sheets method of specifying image position is preferred.
Image Maps & Hotspots
What happens if you want to create links to several pages from one large image. Well, you can. It's called an image map, and the clickable areas are called hotspots.
Exercise - image maps and hotspots
Insert an image that you want to create into an image map. This image
will do. To get this image into your images folder, just right-click on
it, and select 'Save Picture As'. Then browse to your images folder, and
'Save'.
First create 4 pages, corresponding to the site map for you to link to - home.htm, family.htm, hobbies.htm, work.htm.
Select the image so that you can access the image properties window.
In the images properties window, there is a section called map, where
you will find blue coloured hot-spot tools.
Use the square one to draw a square hotspot around the 'home' box.
When a hotspot is selected, its properties can be accessed in the hotspot
properties window.
Once you have drawn the hotspot, you can allocate a URL
to it by selecting it and using the folder icon to browse for a file,
or by typing in a URL
into the link text-box.
Repeat for the remaining boxes on the image. Save it and view in the browser (F12 key) to check the links.
Rollover Images
Lots of web-sites have rollover images as an aid to navigation - the user knows where to click to follow a link. Here's how to do it. The important thing to remember is that both images - the original and the rollover - need to be exactly the same size. For images you can use, click here.
Exercise - inserting rollover images
Open your page and click where you want your image to go. Go to 'Insert > Interactive Images > Rollover Image'.
Click on the first browse icon and search for your original image - the image you want the user to see when they open your web-site. Click Select. Click on the second browse icon and search for your rollover image - the image you want the user to see when they rollover the original image. Type in alternate text. You can select the page or anchor you want the image to link to now. Just click on the last browse button and browse to your page. Click OK.
You should end up with something looking like this.
Remember: Dreamweaver won't allow you the see the effect of your rollover, you need to go to your browser to see that (F12 key).
