Navigation Bars: Dreamweaver Activity #1
The class navigation bar above, was made as a Dreamweaver
template. Templates are sort of like traditional film negatives or other
mechanical reproduction, in the sense that they can be reproduced (as
an imprint or positive) in different documents ( templates in web documents).
Unlike traditional film negatives, they can be edited and linked to their
copies. What this linking allows one to do is update all the copies by
only changing the one template.
I constructed the navigation bar above with an image
generated from a 3d program, I added the text in PhotoShop, feathered
the edges, and brought it into a template page in Dreamweaver.
You will practice making templates and navigation bars
to begin to familiarize yourself with Dreamweaver.
1.The first step is to collect the image or images
to be used in the navigation bar.
This procedure may involve one large image or smaller
individual images that represent the different categories in your
site,
the different narrative directions of your interactive story. Too for
this exercise, feel free to obtain images from the web. You may also
create
graphics in PhotoShop or Illustrator. Or you may use the following image:
Use the following image in
Image Ready (a companion program to PhotoShop, for the web), having
witnessed the demonstration by the instructor. Ctrl-Click on the image
to download
it to disk.
You will have to move the images in the "images" folder
generated by Image Ready to inside your site's own images folder. (You
must have a site set up to make the navigation bar a library item).
You must have the same name for your images folder as the one generated
by Image Ready, or you can edit the code, so that all the images in
the rollovers have the same directory path. IMPORTANT: move your images
to the site "images" folder before creating your
library item and new pages and
deploying/using your library component.
2. Open the web page generated by Image Ready for
the navigation bar, in Dreamweaver, and then select the entire code
in the code view. Choose the Create New Library Item Button on the
Assets palette, and name the resulting item in this Assets/Files
window.
If you have different directory paths (note two image folders in the
last image tag):
<TD>
<A HREF="#"
ONMOUSEOVER="changeImages('nav1A_Layer_2', '../images/nav1A_Layer-2-over.png');
return true;"
ONMOUSEOUT="changeImages('nav1A_Layer_2', '../images/nav1A_Layer-2.png');
return true;">
<IMG NAME="nav1A_Layer_2" SRC="../images/images/nav1A_Layer-2.png" WIDTH=108
HEIGHT=132 BORDER=0 ALT=""></A></TD>
<TD>
Then you need:
<TD>
<A HREF="#"
ONMOUSEOVER="changeImages('nav1A_Layer_2', '../images/nav1A_Layer-2-over.png');
return true;"
ONMOUSEOUT="changeImages('nav1A_Layer_2', '../images/nav1A_Layer-2.png');
return true;">
<IMG NAME="nav1A_Layer_2" SRC="../images/nav1A_Layer-2.png" WIDTH=108
HEIGHT=132 BORDER=0 ALT=""></A></TD>
<TD>
The two periods before the forward-slash means "go up one level in the
directory to outside the current folder, and then go into the images
folder that
is on the same oustide level. This type of link is a "document relative"
link (i.e. relative to a given document). You may have site root relative
links, which start with the root directory, a forward-slash, too.
Now you may use the library item in any of your pages
to provide navigation. To edit where the bar takes you (its links),
open the library item by double clicking from the assets/files palette.
Then click
on
the images of the bar
(corresponding to the slices of the image made in Image Ready) in order
to set the links (place an address in the link box, or drag with the
point and shoot to a page in the site window.
|
