Dreamweaver Horizontal Spry Menu Bar: Explained in Depth (Drop down menubar, cs5, cs5.5)

Creating a dreamweaver spry menubar / menu bar/ Navigation Bar also called a Drop down menu bar using css styles or rules
Dreamweaver Horizontal Spry Menu Bar: Explained in Depth , using DW cs5 , working with colors & background Images

Mohit Manuja

Trainer for Adobe Products
Dreamweaver, Flash and fireworks cs5

My Forte: Online teaching , education using Skype and screenshare
skype id. mohit.manuja
email: mohit@qualitylessons.net
http://qualitylessons.net

+91-9022995952 , mumbai

---

Closed Caption:

already good day to you people
my name is smart and today i'll teach
you in adobe dreamweaver cs5 I don't
know how to make a horizontal stripe
minibar
let's start let's click on create new
HTML guys I'm and presented with a stage
rather a blank document which has a
ruler's in case you don't have the
rulers done turned on what you need to
do is you need to go and click on View
go down to rulers and make sure that the
show rulers is checked on
right next one I'll do is I will say
insert only objects spry menu bar or
else I'll say inserts try prime anywhere
or else what i can do is i can be in the
classic view and say arrived from the
top spy minibar green we were promised
me to save this document before it can
actually insert the widget
it's okay and i'll save it under the
same name try which is anywhere
horizontal which already exists when I
was destined for this tutorial and made
that file and it says would you like to
write this problem i'll say okay yes and
then dream your wishes to know if I
would like to make a horizontal one
particle 1 i'll go with the horizontal
one and i'll say okay next dream you
were actually inserts a very basic plain
simple wanelo kind of many well our dual
color many well let me just go inside
the library and show you what it has
said well colored and grey and blue
colored blue and harbor otherwise gray
colored very simple boring kind of menu
bar I need to tweak it
I need to make it look much more
beautiful
next what i'll do is i will
and give it give it a title i'll call it
too many well it's always a good idea
guys to you know save the file first
with a title and then actually set to do
your work
ok what I need to do next is I want to
create them anywhere which is exactly
400 pixels in width so how do i do that
first things first align the 00 of the
ruler to the top left one of the many
bar
ok so it kind of there okay
roughly placed it there i may not be one
person accurate but that's okay i just
want you to understand the concept next
what I'll do is since the origin of the
rulers 00 of the rulers have been set
according to the top left of the many
where I'm going to pull up a guide and
take a dragon 2 400 ok roughly there
ok guys
I'm not one hundred percent accurate but
I know it's is roughly around 400 and
that's the way you do it i'm ok i'm a
little bit here in the ER I just want
you to understand the concept next since
i only have the ruler sitting at 400 I
would want you to adjust the size of the
many were so that it only occupies 400
pixels in width and how to achieve that
guys sitting on the right-hand side
panel here under the CSS Styles all
roads we have 18 rules which control one
single horizontal primary were 18 rules
for you see one single primary bar so
it's a it's a lot confusing but guys I'm
here to make life very simple for you
and I have done it several times once
you get into the routine of doing it
again and again you wouldn't find it so
difficult probably is the first time
you're doing it that's why you probably
watching this tutorial but it's not so
difficult at all once you know it and
once you actually do it let's say half a
dozen a dozen times it becomes pretty
easy so what I need to do is first I'll
courage them anywhere in such a manner
that it actually occupies only 400
pixels and how do i do that is very
simple
i'm going to click on these rules and
down below in the properties panel
properties panel we will be seeing the
properties for these different rules but
initially the the balance was looking
like this they actually looked something
like this one second to show you a set
the reset plastic and you know the
the the fonts panel was here the assets
panel was here the status panel was here
and the rules were here so my my panels
were and looking like this what i did
was actually grab all you know i just
took this window out here and I I
crashed it by compressed it and I
dragged it out here like this
so then i could see this year starts all
the 18 CSS styles of the rules and I
could see their properties here then
what i'm going to do is I want to drag
this window right here so I can see them
much clearly ok i made my code area very
small let's try a little further
no that's too much
let me just take this little bit back
drag it here it was the right that's
just fine
ok alright guys I need to want to the
sides to make it wanted pictures in with
what i'm going to do is the third room
from the top which is ul minibar ally
has a bit of atms advice whenever the
values are in ems they are scalable
that's one thing you need to know i'm
going to do is I'm going to change this
ATM 26.25 p.m. $TIME p.m. already done
my calculation earlier that if i change
the ATM 26.25 pm's the size that i get
for the four buttons
I don't want item to item 3 or that and
item for actually equals exactly 400
texts
ok guys
let me be sure just give me a sec okay
guys I had to pause the video and make
sure that the many where was exactly 400
pixels and with what happened here was
the origin 0 0 was not properly aligned
to the top left corner which had have
actually done now I i drag the the 00
out like this
the origin out and aligned perfectly
with the top left corner and once I did
that then I could actually see that once
i have the width of the minibar set at
6.25 pm's it exactly equals 400 pixels
in width so guys I have also check that
the height of the minibar is 35 pixie's
I've just drawn a guideline from the top
ok to the bottom of the minibar and it
says that the height of the many of our
is 35 pixels and the bit
no disguise here is 400 pixels what
happens here is this small distance is
10 pixels
ok that was the reason I to drag the
origin of the 00 of the X&Y axis I'll
aligned it to the top left corner of the
many well okay so absolutely sure that
the but now is 100 pixels the height of
the minibar as 35 pictures now I can
actually get rid of
all the guides and the rulers I'm going
to drop you don't drop them back onto
the rulers Caleb in drag and drop it
back
also now I can actually get rid of the
rulers themselves so guys this primary
horizontal is 400 pixels in wet and 35
pixels in height next what I need to do
is I need to check other rules for the
wit and wherever I see eight or eight
point two M's I need to reset it back to
6.25 what's the reason for that let me
show you let me go to live you and show
you guys
although the main menu bar on the top
has been reset to 6125 these sub menus
are still wider so i need to reset these
values to so the rule just below the UL
many were horizontal alli is um anywhere
horizontal UL the fourth root from the
top says the way it is 6.25 I need to
reset it to 6.25 as well have done let
me take a live view good what's happened
here is the border you see this the
border kind of has aligned itself to
6.25 the bet is still
812 am so i need to change the letter
from some other CSS rule as well
ok now notice the UL many are
horizontally well I also says that the
bit is 8.2 reset it to a change to 6.25
and now everything should be fine what
I've done is guys have not changed with
through three different CSS rules
the first rule said that it was aight
this unit second and third rule said it
was aight . to teach all of them to 6.25
and I can take a live you want to show
you that it's in perfect order in good
health
all is good everything's fine now very
good
so what I've done so far is using the
rulers and the guides I've actually made
sure that the width of the many were is
400 pixels that is either one item two
and three and our item for combined so
also i would showed the drop-down menus
and each and every button or the anchor
tax on the top are not more than 6.25
pm's 400 pixels each very very good
next what I'm going to do is I'm going
to change the color and guys the key
rule when it comes to changing the color
is the 10th from the top which is ul
menubar horizontal a day for bank attack
this is the 10th through from the top
123456789 10 is why drive here you sick
leave enactments and yeah shop this is
the 10th through from the top that is
responsible for changing the colors of
the many well now the in the properties
for UL many bar falls onto a it says the
background color is set to a hastily
which is a very plain simple when he
lock on the color will change it to
let's say a hash 060 ok notice the
change here guys
ok then since it's a very dark color i
need to change the font color as well
which is set to a hash 333
that's where a darkish 30 31 change it
to a hash FF which is white and notice
guys that changes are happening now
ok what next
first we'll be working with the colors
and then we'll beat you working with the
background images
okay so since I'm finished with the
tenth rule and when I can know the 11
through completely
i'm going to jump to the to work through
know guys that tore through from the top
is the longest rule in terms of
characters UL many were horizontal a .
many of our items our blah blah blah
blah blah and goes on and on and on
it's a long room ok let me drag this
window the Spanish and CC guys notice
this is by far the longest route and
this rule will guys control ha ha state
ok
for the background image i'm gonna
change the background color to a hash
090 okay and let me keep the the part of
the phone to a hash of F and let's check
be live you okay this is looking very
cool let me take a live view our preview
in Firefox dream your would want me to
save the changes obviously and it gives
me a message with says this page uses an
object of behavior that requires
supporting pass the following files have
been copied to your local site folder
and you must upload them to your seller
in order for the object of behavior to
function correctly that's understandable
ok ok and guys this is the firefox
preview
it's looking beautiful wonderful very
good guys at a later stage i'll change
the item one item to item 32 something
like home services about us contact us
except etc but let's do the important
work first
ok I'll come back to that so back to
Dreamweaver now guys as I promise you
I'm going to work with the background
image now this is how you actually work
with the colors just for the colors
let's see how many minutes has this
video already run into is actually run
into 15 minutes already so might take
around fight wait minutes more trying to
explain how to work with the the
background images
ok so i'll need to have at least two
background images i'm going to use and
i'm going to use fire works to adobe
fireworks are launched it will be
fireworks and i'm going to create two
background images guys
not write create new fireworks document
ok next what I'm going to do worse
let me change the fill color
let me make the outline none and then
i'm going to select the rectangle tool
draw a small rectangle since i already
know that the height of the many well as
35 pixels are the garage of constrained
the high 235 ok next what I would want
to do is I would want to change the
solid food to a gradient want to choose
a gradient let's say a linear gradient
that loop guys haha sorry about that
I need to love ya missin you're just a
minute place
next what I need to do is I need to
branch this many bar to just let's say
two pixels wide by 35 pixels in height
ok that do then i will make it fit the
canvas
okay i'm going to use this image will
save it as a gift image and this small
thin strand kind of a structure or
column is going to be used as the
background image for the medevac eyes on
save it and
save it in these fri assets folder and
i'll call it PG
save ass gif file inside these prices
for the quality BG that's a safe
next what I'm going to do is guys this
has a gradient i'm going to shift the
gradient now by clicking on this small
symbol want to drag the gradient
slightly up and this will be the harbor
or the overstate ok i'm going to save
this to save us and BG our state once
they see you again
so guys if i go inside my best side the
root folder and inside the stresses
folder you'll notice that I have now two
images they are like hair strands now
okay
the BG and the BG ha state that i'll be
using in my project for around creating
a menu bar so instead of colors i'll be
using the background images school let
me return back to Dreamweaver and let's
start the constructing using a
background image guys this 10 through
from the top which is um anywhere
horizontal is the key room i'm going to
click on that double click on that and
make sure that i remove the background
color set it to none and instead use the
background image inside the spots folder
and choose the BG gift and say okay and
since it's just a pins you know is very
thin structure like a column standing
column I need to make it repeat along
the x-axis so i'll say that beat along
the x-axis and that's it i'm gonna say
pliancy ok
and notice guys are changes have started
to happen okay
well almost where you see the down arrow
and where you see the writer is still
not happened on doors menu items but
everywhere else it's showing up nicely
very cool not a problem i can then skip
the 11 through let me tackle the 12
through and this is for the harvest 81 a
double click whir go to the background
section section remove the background
color set it to default on none and
grounds for the image which is the BG
our state and make sure that I repeated
along the x-axis and i'm also okay okay
so guys notice for item number two an
item number for the whole state is
working very nicely
even try to remember 3.2 3.3 ok well
it's not working is the areas where i
have this down arrow and the right angle
ok so i need to tackle the rules which
which actually control the Down arrows
and the United right hours
ok guys there are four rules that i need
to tackle on which are the which ended
with these you know item submenu items
submenu items so many power and items of
you our and how do I know that these are
the rules that will actually affect the
areas that have the down a door the
United it's pretty simple guys notice if
i click on the rule which is ul many of
our horizontal a minibar item submenu
which is 123456 rule from the bottom of
the seventh from the bottom the case
from the bottom and a rather the third
from the bottom of the fourth from the
bottom the through from the bottom and
six from the bottom these four rules
guys all of them have a background image
either down arrow gift as you can see
here stream anywhere right Erica the
harvest state has a minibar down our
gift so basically these animals are
coming from these four rules these two
are for normal states these two are for
our state's all the four of them control
the submenu items so wherever guys i
still can see the effect properly
exactly those areas we don't have the
down arrow and the right arrow will now
be controlled through these for CSS room
let me get going then i'll click on this
rule which is the sixth rule from the
bottom double click and go to the
background section and choose my own
background image
gg-get say okay I may be pronouncing
ship as gift guys I'm not the one
percent sure what should be the
pronunciation you take whatever you like
i'm going to say okay and make it to
read along the x-axis get rid of the
values 95 and fifty this values 9550
responsible for tracking that down arrow
at that specific place 95 person on the
x-axis and I think that was 50 / sand
from top to bottom but here we are just
repeating the background BTW gift along
the x-axis making it appear I'm not say
okay
notice the change guys it's taking shape
very well I'll go to the runners will
below that which is the fifth root from
the bottom UL many were horizontal UL a
many well items sub-menu double-click
and then i'm going to say a background
browse for my image
again choose BG say ok the beat along
the x-axis get rid of the X&Y positions
was ok and keep notice keep noticing the
changes guys it's looking pretty good
now
ok very good now i just need to change
the other states and these are
controlled by the fourth rule from the
bottom and the third from the bottom
namely UL many were horizontal a minibar
item submenu power double click on that
go to the background section
browse for my power state image BG our
state gift say ok repeat along the
x-axis get rid of the nine percent
position 50 plus in position the those
were for the right and the Down arrows
guys unless they're okay right
we are almost done we just need to
tackle the one in the last rule that is
the third rule from the bottom double
click and go to the background category
again the background image guys is up
you know
alright haha at all going to browse for
my own image of DG harvest eight going
to say ok say it beat along the x-axis
get rid of x and y position i'm gonna
say okay I should be done which me luck
very very good
so guys this is actually how you control
the various rules p CSS rules and come
up with a horizontal menu bar the way
you like using either background image
to be added or of all just colors
ok i also control the width of the menu
bar so also I i created to background
images with the help of adobe fireworks
cs5 and use them in this example guys
that just before I ice you know finish
this video I would like to tell you that
if these rules sound too confusing if
you really don't understand which rule
does what controls which area what's
responsible
all you need to do is you need to go
inside this prime anywhere horizontal .
is fine
you need to just click and open it up
and then guys please go through these
comments these comments have been left
for you
for example let's say it says you know
many well you know disappointment that
has been left here it says that many
were items that have a submenu that have
something you have the class designation
many of our items of men you are set to
use the background image position on the
far left 90 represents one so forth so
basically whatever you see in gray is
actually telling you which will does
exactly what ok and this one more cheese
guys that I would like to know you know
may go on this many bar notice guys that
item number three . 1.1 is in fact
overlapping item number 3.1 just that we
bit and i'll tell you where it is coming
from it's coming from this one okay if I
go inside the rule and check the margins
this minus five percent and ninety-five
percent are the two values which are
responsible for the submenu overlapping
other menu items let me show you how now
item number three . 1.1 it slightly
overlapping item number for also is
overlapping item number 3.1 so if i need
to actually make changes to that what
I'll do is I'll go back to this rule and
the box category i will set this minus
52 a+ 10 that will actually have the
effect of the rather make it 12 that
will have the effect of not overlapping
the button about but that'll take the
sub menu item slightly below that will
push it down and when I keep the left
too
you do not need it to a 95 i can
actually set it to a hundred that will
not allow these are menu item to you no
overlap the item on the Left let me just
show you what i mean and say okay now
item number three . 1.1 has actually
been pushed down earlier it was
overlapping item number for so-and-so
also it was set to 95 i made it hundred
which means now that item number three .
1.1 is no more overlapping item number
3.1 and also is being pushed a little
bit down so guys this is also how I can
actually control the position of the
drop-down menus that you know open up
into more buttons or more items this is
how i can actually control them and yes
just before actually finish this video
yet another thing that I needed to point
out was that if I looking income of the
live view and then click on this spy
many were blue collect tab I can click
here and then I can add more items if I
say a-plus-plus ok notice guys that i've
added two more items i'm going to say
$OPERAND minus $OPERAND minus again to
delete the two more items motor work
I can come here I can you know give them
names something like a home here okay
and something like that
services
okay you okay
I i can have as many some menu items
here i can change the order through
these arrows move the item up and down
and also i can have these submenu items
have some menu items
ok just by pressing this add menu item
button here and the third window in the
third window this window
okay so guys there's so much more that I
can do I can make every menu item become
a link
okay i can give it a title I can get the
target target something like underscore
self that will have the effect of
opening the link in the same window or
something like a under spoke blank
ok so that would make the link open up
in a fresh new window
ok guys so i can use the properties
inspector and these three windows to
have some menu items up some menu items
I can also make them more links okay i
can change the link names from the text
feel here so guys that's all about
horizontal minibars i hope i've actually
layered almost all your doubts
still if you feel that I missed out on
something and still if you feel you have
some doubts please feel free to get in
touch with me i'll try to help the art
so guys see you next time with yet
another a dreamweaver our last tutorial
you take very good care of yourself
keep rocking and please do comment
subscribe
that's like a shot in the arm for us