|
Theory | Behaviors | Resources
JavaScript and Beyond
Endless Possibilities
Behaviors can
be very complex and will probably go beyond our current understanding
of the code. We will simply have to trust the code. But not completely.
While we may not completely understand the code to write it directly,
we can understand enough when we read it to make simple decisions
and modifications. While there may endless possibilities we will
start with three. These three can brighten our webpages if we
use them correctly.
Behaviors can
be very complex and will probably go beyond our current understanding
of the code. We will simply have to trust the code. But not completely.
While we may not completely understand the code to write it directly,
we can understand enough when we read it to make simple decisions
and modifications. While there may endless possibilities we will
start with three. These three can brighten our webpages if we
use them correctly.
Rollover images and hotlinks
A rollover image
appears on the browser as an image that changes when the mouse crosses
over the top of that image. Straight logic hence says there most
be two images saved on the server. So we need to start by saving
two images of the same size in the "images" folder. This
probably will require using PhotoShop (and later FireWorks after
we've mastered it) to make two images for each rollover image.
- Open Photoshop and File>New; set you size (for a button
h=35 and w=150 may be good)
- Choose a color for the background and use the Paintbucket
to color the background (this works best if it's the same color
as the background color of your webpage)
- Make a New Layer (triangle in the upper right of Layer window
which can be opened from the Menu bar Windows)
- Using the Selection tool (upper left of tool bar) make a rectangle
in the new layer
- Select another color and using the Paintbucket color your
new rectangle
- Select the "T" (text) tool from the tool bar and
choose your color, style and font along the top of the page
- Type a word or two which will identify your link, such as
"Home" for a button to go to the homepage
- Close the "eye" by the background layer in the Layer
window and Merge Visible under the Layer menu item
- Save the image with Save for Web using a .jpg format; save
in your "images" folder, use a reason name like home1.jpg
- In the History window select the history item that preceded
the Merge action
- Change your button as you want (consider the Filter menu item
or just moving the image slightly)
- Save your second image with Save for Web as a.jpg using a
name like home2.jpg (in your "images" folder
Now that we got two images in the
"images" folder, in DreamWeaver place your cursor where
you want the rollover image and Insert>Interactive Images>Rollovers
from the menu. A prompt window will open and you will use the browse
button at the right of the text box to select your two images. Save
your DreamWeaver document in your cse625 folder. Open a browser
and open this document in the browser. Try the rollover. Bravo!
Navigation Bar
The navigation
bar works much like the rollover image except you need up to four
images: one as it first appears on the browser page, one when
you cross over it with a mouse, a third so that if you use the
link (click on it and go to another webpage) when you return to
this page this third image appears and last an image that appears
when you cross of the image with a mouse after you visited the
linked webpage.
So the process will be to create
four images of the same size in PhotoShop or FireWorks, and in
DreamWeaver select Insert>Interactive Images>Navigation
bar and select the four images.
Draggable Layers
While we may
not have mastered the use of layers yet, particulalrly when it
comes to uderstanding how different browsers can treat layers
so differently, a brief walk through how to make draggable may
find some intriguing results.
To insert draggable layers using
Dreamweaver, we can follow the steps below.
- Choose Insert> Layer (we'll adjust the position (location)
and size later)
- Repeat the above step for each intended draggable layer (let's
start with just two layers)
- Select the first layer, give it a name in the Property inspector,
set L to 75, T to 75, W to 50 and H to 50, and set the background
like to a red
- Select the second layer, give it another name, set L to 300,
T to 75, W to 50 and H to 50, and set the background to a color
like blue
- Now to make them draggable:
- Open the Behaviors panel and click on the + button
- Click on Drag Layer in the pop-up menu
- In the next dialog box, select Layer by the name you gave
the layer in the above step from the drop-down list
- Set the Drop Target as Left at 300, Top at 200 and Snap it
Within at 200
- Repeat the above steps for for the second layer setting the
Left at 75 and leaving other settings the same
- (Note all the coding that Dreamweaver is doing for you in
both the <body> and the <head> of the document.
While you will not recognize all the coding, you can recognize
some of the logical terms and the names of your layers and images
- Save the Dreamweaver HTML document and open it in a browser
- Click on one of the layers and drag it to another position
on your webpage
Now that we have several new tools,
how can we use then effectively now only to entice clients to our
website, but to use them to enhance education, learning and teaching?
Building on our Final Class Project
We've looked
at enough tools and discussed some design features and strategies
so that we can start putting together our final class project.
While the final details of the final project will evolve and change
as we continue through the course, there are some basic requirments.
For starters, the final project will include
- A homepage with links to at least 5 other
webpages (call these webpages topics) designed by you the students
- The homepage will include some text, at least
one image and several hyperlinks
- At least 5 "topic" webpages all
having the same basic layout and consistent fonts for headings
and the body. You may use the <font> tag to format some
text and you may use CSS within any webpages, but you will use
one linked CSS stylesheet
- All webpages designed by you the student
will fit from left to right on a typical screen
without using the scroll bar
- You may link to websites of other webmasters
for additional information but these websites may not be your
primary links and are only supplemental; websites of others
cannot serve as the "topic" webpages
- All images will either by originals (photos
taken by you or images made in PhotoShop or FireWorks) or will
be referenced as to where you gathered the images.
This reference may be placed on a separate webpage or at the
bottom of the webpage where the image occurs
- There will be advanced features relevant
to your skills, including such features as rollovers, flash
or QT movies, forms, php, JavaScripts, special behaviors
- There will be at least one library item used
on several of the webpages
|
