|
Take some
time and design your site's hierarchy (navigation), it's
look (interface), and content. First write them down on
a paper, and when you're ready and after you've finished
the graphics for the buttons, work with JSMOC.
What you must already have decided before you start working
with JSMOC is:
 |
What
options / selections you are going to use - this is
the navigation system of your site. |
|
What
kind of mouse over effect you need to use. You need
a horizontal menu, a vertical menu, do you want a
second image to be shown when you are over a button,
do you want a message displayed when you are over
a button, where to go when user clicks on a button
(the link pages - it helps if you know the filenames
of the pages) |
|
The
graphics and style of your buttons, at all their stages
(normal, when mouse is over, on click (optional),
second image (optional). |
Let's say you want to make your home page and you'd like
to have some cool graphic navigation menu at the left
of your non-framed site.
| Options
- selections (navigation menu) |
|
For
our example we need the following buttons:
1. Home
2. Design
3. Coding
4. Contact
|
|
We
want a horizontal menu, with all the buttons and
when the visitor moves over the buttons, we want
to display another image and a status bar message.
|
|
If
you don't know how to use image processing programs
or you don't have installed any related software
at your PC, you can always use Windows PaintBrush
or search for ready made pictures/icons/images/clipart
from the web.
Here are some usefull links to start: altavista,
clipart.com,
animation
Central, Andy
Graphics, Animation
Factory, Prodraw
button gallery and many more...
My best pre-made button can be found at: Pankpages,
Freeweb
Templates,
You can use Buttonz
and tilez. A freeware for creating beveled
buttons and seamless textures. Other titles like
this, are: Border
Mania, Harmwave,
Just
Buttons
There are also some online tools for button creation
around the web: Button
maker, Flaming
Text (free buttons!), 3D
Web Button
(To create well designed graphics and cool navigation
menus, you can always use some professional programs
like: Photoshop
or Paint
Shop Pro. Here you can read some tutorials,
how to create rollover
menu bars, another
one at adobe, and a jasc
tutorial for Paintshop)
Let's go:
|
|
|
|
|
|
|
|
|
Step
3
I placed all the graphics in the same folder
(example1).
Now we can run JSMOC. Double click at the
"Normal Button" field (or
click browse) and then select the btn-home-normal.gif
inside your images folder. Double click the
"Mouse Over" field and select
btn-home-over.gif, double click on "on
click" and select btn-home-clicked.gif
and on "Highlight Image"
browse or type btn-home-highl.gif
Type http://www.code.gr at the "Link
to" field (if you want to link to
a saved file, double click the "Link
to" and select your file, or type
it's name at the field). Select hlp-bg.gif
for BG Image (background) and type "Home
- :: code ::" to "Status Bar
text".
Hit the 
to add a new button. (with 
you can always delete it later). Click on
to change first button's name to "Home"
(or double click "New button" in
the list) and the new one to "Design".
Again, double click at "Normal Button"
field, select btn-design-normal.gif, at Mouse
Over select btn-design-over.gif, click=btn-design-clicked.gif,
highlited=btn-design-highl.gif, Link
to=http://www.code.gr/services, Status
bar=Web design. Click the add again:
name the new button "Coding" and
for Normal Button=btn-coding-normal.gif,
Mouse Over=btn-coding-over.gif, click=btn-coding-click.gif,
highlited=btn-coding-highl.gif, Link to=http://www.code.gr/coding,
Status bar=Web Authoring - Programming.
Add the final button, name it:"Contact"
and for Normal Button=btn-contact-normal.gif,
Mouse Over=btn-contact-over.gif, click=btn-design-clicked.gif,
highlited=btn-contact-highl.gif,
Link to=mailto:dimitris@siskopoulos.gr
(if you want to create a link for sending
mail, type mailto:youremail@address.com and
you're ready), Status bar=Email. Now
save your site's scheme, click 
type "code_gr" and press enter.
Now if you want to change anything from your
selection in the future, you can use the 
to open the code_gr.jsm scheme and make your
changes. It's time to test it live with your
default browser by pressing  .
What do you think? Are you satisfied with
the result, now you can create the final file
by clicking  .
And don't forget you can always use the 
for help.
|
In
JSMOC 2.0 folder you can find two folders named
"example1"
and "example2".
You can download their scheme files and check them
out. Click on the hyperlinks to see them on line.
TIP 1:If you want to add sound to your mouse
over's, you might get some ideas from here!
TIP 2: Don't forget! You can also have animated
gifs at any button stage!
TIP 3: If you want to sent email when the
user click on one of your buttons, then you must
type mailto:youremail@yourprovider.com at
the Link to field.
TIP 4: If you have your images in a folder
(different from the HTML files), then you must type
imagedir/yourimage.gif at the images fields
and then click the "write code" button.
TIP 5: For anchors type #anchor at
the link to field
TIP 6: It's recommended to build
the Navigation menu with JSMOC first and then add
the content to your pages. You can create the final
index.htm page with JSMOC and then rename it, copy
or use it like a template file. Use DreamWeaver
(it also has a built in "rollover images"
effect) or a simple text editor (for advanced users)
to add the content.
NOTICE: If you use Frontpage or another HTML
editor that changes the code, then the JavaScript
MouseOVer Effect may not working properly.
|
|
