Web Page Design
Image Maps in Dreamweaver
An image map contains hotspots, which are areas of the
image that contain links.
To make an image an image map, click on the image and
look at the bottom left of your screen. Then draw
hotspots over the areas you want to be links by using the
hotspot tools (the little shapes).
Hotspots can be circles, rectangles, or polygons.
Select each hotspot and choose where you want each
one to link to.
Don’t forget to add alt text!
Rollover Images in Dreamweaver
A rollover image is an image that changes to
another image when the mouse pointer moves
To create a rollover image, go to Insert, Image
Objects, Rollover Image.
Give the image a name, and select the original
image and rollover image. You should also
give it alt text, and you may want to make it a
link as well.
To add a popup message, you need to open the
Behaviors Panel by going to Window, Behaviors.
To add a popup when the page loads, make sure you
are in an unformatted part of your page (you may
have to go into the code and click inside the body tag
to do this). Then click on the + sign in the panel to
see available actions. Change the type of event to
OnLoad, if necessary.
Click on Popup Message, and type in your message.
To make a popup appear when you click something,
you need to select that object and add an OnClick
event to the list of behaviors.
• Items (pics, tables, links) from a webpage that can be used in
other web pages
• These are stored as special library files
• These files can be updated and changed and the changes can be
propagated throughout an entire website.
• EXAMPLE: you make a navigation bar that will be used in
multiple pages. You then save it as a library item. You then can
insert that navigation bar into other web pages without having to
retype it. WHY IS THIS IS A GOOD IDEA? Any changes you
need to make later on (such as an additional link) can be made
ONCE to the library item and the changes will be applied to all
pages in which the library item is used.
• ANYTHING THAT MAY CHANGE FREQUENTLY, BUT WILL BE
USED IN MULTIPLE PAGES SHOULD BE CONVERTED INTO A
Creating a Library Item
Select the items you wish to place in a
library file from your webpage.
Go to MODIFY -> LIBRARY -> ADD
OBJECTS TO LIBRARY
Save the objects using a descriptive
name (this will create a file in the library
folder which is created automatically
using the .lbi file extension)
Using a Library Item
To insert a library item, open the “Assets”
tab next to the “Files” tab. Find the library
item you wish to use, and drag it over to the
page you want to insert it in to.
To Update a library item (make changes),
open the library item from the “Files”
section, make the changes, save the file
and select “update” when prompted to
update the item on all pages.
Files that have editable regions and
fixed regions (meaning they stay the
same throughout the entire site)
Global changes to your site can be
made by editing the template file (which
is saved as .dwt)
Portions of the template are left
editable so that individual page content
can be added, while keeping the look of
the entire site very consistent
Creating a Template File
Go to FILE->NEW then select Blank Template and under
Template Type select HTML Template.
Save the template using a descriptive name (make sure
you keep the extension as .dwt).
Design the template as you would any other page (only
items that will remain constant throughout the site, such
as title, navigation bar, etc., should be inserted here.
Insert editable regions (the regions that will change as
you create each page in the site) by using INSERT ->
TEMPLATE OBJECTS -> EDITABLE REGION
When you save the template, by default it is saved in the
“template” folder (which will be created automatically if it
does not exist already)
Using a Template File
Go to FILE->NEW then select Page from Template
and then locate the template file that you saved.
The only areas that you are allowed to change will
be editable regions. Design those regions as you
would a regular webpage (tables, CSS, etc…)
Save the webpage as you would a normal webpage
NOTE: To make changes to the other sections of
your page, open the template. These changes will
affect ALL pages created with the template.