Dreamweaver Tutorial

In this tutorial you are going to learn how to:

Create Tables
Create Hotspots
Embed sound

Creating the Animals of the World website.

You should make sure that you receive all the files required to create this website. The files are as follows:

A folder called Animal Images containing the images of the animals, 7 in all.
A folder called Animal Sounds containing animal sounds, 6 in all.
A Word file containing text for each animal named text.doc.

Defining your Site

Make sure before you start that you define your site as you did in the previous tutorial, refer to those notes to
remind you.

Creating the Home Page

Start Dreamweaver and start a new page. You are going to insert two tables :

Table 1

Table 2
To draw tables on the Home page, select Insert table from the Common options.

Make sure you insert 1 Row and 1 Column in the options. The width of the table should be set at 100 Percent
with a Border size of 0.

Follow the same steps for the second table, with the same options as above. Dont be alarmed if the size of the
2nd table doesnt appear to be as the example provided on the previous page, we are going to insert an image
here later so the table will change in size to accommodate the image.

Enter the following text in the 1st table Animals of the World, make sure you check the following properties:

Arial font
Size 6+
Colour #339933
Centred

Hint: use the Properties Inspector at the bottom of the page.

Insert an Image

Select the second table and select Image from the Common options.

You will need to select the image map.jpg.

The file will be located in the
Animal Images folder.
Your page should now look like this:

Save this file as index.htm. Make sure you save your files often, especially when you have made some
changes.

Creating Hotspots

We are going to create 5 hotspots on the image one for each region on the map.

2
1

3
5
4
Go to the Properties Inspector and select the Polygon Hotspot Tool. This will enable you to draw freeform
link areas over any image.

Place your cursor on the map, starting at a convenient point on the image (top left hand corner of AFRICAN
SAVANNAH is a good place to start). All you need to do is click and drag your way around the selection. A
green area will appear, showing you the proposed link area.

Dont worry at this stage if it looks untidy, once you have completed selecting your area you can use the
Pointer tool to go back and tidy up.

Once youve completed the selection it should look

like the image on the right. The selected area on the
map should now be shaded light green. Carry on
repeating the process for the remaining four areas on
the map. You need to make sure that all the areas are
selected making sure that you dont overlap the
points.

Save your file as index.htm and view it in the

browser. When you move the mouse over the map
your mouse cursor should change shape.
Setting up the Elephant Webpage

Create 3 tables on the page.

Table 1

Table 2

Table3

Table 1 1 col x 1 row

Table 2 2 col x 1 row
Table 3 3 col x 1 row

Dont worry about the size of the tables for the moment just make sure that they are all set to Width = 100%.

In the first table enter the text Elephant, to make sure you keep the website consistent throughout Ive kept the
same settings:

Arial font
Size 48 pixels
Colour #339933
Centred

Inserting the elephant image

Place the cursor in the left hand column of Table 2. Click on the Image icon as you did for the map previously
and insert the file elephant.jpg. You may need to resize the image, you can either drag the handles on the
image itself or you can be more specific by entering the Width and Height in the Property Inspector:
Entering a text file

We are going to enter text in the right hand column in Table 1, place the cursor in the correct cell.
In the folder called Animal Web you will find a Word document named Text.doc. Open the file and
highlight the appropriate text. Copy this text and paste it into the correct cell in the Elephant web page under
construction. You may need to reformat the text after pasting i.e. colour and alignment.

In the middle column of Table 3 only enter the text Home.

Creating a link to the Home page

Highlight the word Home in Table 3.

In the Property Inspector create a link back to the Home page by typing the name of the page i.e. index.htm in
the area adjacent to Link. Make sure you type in the name of the file correctly.
Inserting a Sound into a web page

In the first column of Table 3 we are going to insert a sound file. Make sure you place the cursor in the correct
cell.

First you will need to select the Media icon

in the menu bar.

Then select the Plugin icon from the

drop down options.

You will now need to select a file from the options available in the Select File window. Open the folder named
Animal Sounds and select the file bullele.wav, this is the sound file of a bull elephant.

Click on OK and the file should be inserted as a plug in on your web page.

Save your file as elephant.htm, making sure that you save it in the correct site folder and view your web page in
the browser (F12). To hear the sound you will need a set of ear phones.
Save the same page also with the following filenames:
Bear.htm
Leopard.htm
Orang-utan.htm
Parrot.htm

Your site should now contain 6 html files. Check this out, if you have not then there is something wrong.

You will need to open each of the files for Bear, Leopard, Orangutan and Parrot individually and change the
following on each page:

The Animal Title at the top of the page

The image of each animal
The text for each animal
The sound of each animal

You will need to check that all files are able to link back to the Home page. This can only be tested in the
browser (F12). Make sure you save your files.

Linking all the pages from the Home Page

Hopefully now that you have created all 5 pages for all areas on the map we can link them from the index.htm
page. Make sure that you have the index.htm page open in Dreamweaver.

Select the area AFRICAN

SAVANNAH. You will know
when this has been selected
when the area is surrounded
by square points
In the Link area you will need to type in the name of the file associated with the area in this example it is
elephant.htm or you can select the yellow folder at the side and select the file from there. To finish off this
selection on the map enter the word Elephant in the Alt area.

Carry out the same procedures for the remaining four areas on the map making sure that you point to the correct
files and the Alt tag is appropriately labelled for each area.

Save your file and view it in the browser.

Image Rollover
A rollover is an image that, when viewed in a browser, changes when the pointer moves across it. A rollover
actually consists of two images: the primary image (the image displayed when the page first loads) and a
secondary image (the image that appears when the pointer moves over the primary image). Both images in a
rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the
second image to match the properties of the first image.

To create an image rollover select Insert, Image Objects, Rollover Image from the drop down menu.

In the Insert Rollover Image window enter the name of the image which is only a label. You will need two
files, the Original Image will be the image seen when the web page opens and the Rollover Image will be the
image displayed when the mouse moves over the image. This is known as a Behavior in Dreamweaver, the
image swaps when the mouse moves over and out of the way of the image.

Carry out this exercise using the two images of the Leopard in the Images folder. Open the webpage created for
the leopard and modify the image behaviour as shown above.