Dreamweaver CS4 Tutorial - 38 - Tabbed Panels Video Lecture | How to create Responsive Websites with DreamWeaver - Software Development

what's up guys and welcome to the first
interactive web pages tutorial using
spry by now if you've been watching my
tutorials you're probably getting
familiar with spry and you notice that
it does a lot of a lot of sophisticated
programming for you what's Frey is is
it's a technology that was developed by
Adobe and it's been distributed freely
actually you can go to the adobe labs
website at labs that adobe com /
technology / spry to read more about it
but it's officially called the Spry
framework for ajax and it's a collection
of JavaScript programs that you as a web
developer or web designer you can offer
sophisticated control of a web page to
your visitors through widgets effects
and data sets and basically what we're
going to start looking at in this next
group or this next series of tutorials
is what else that spry has to offer us
as web designers so in this first
tutorial we're going to go over what are
called tabbed panels and I guess the
best way to describe a tabbed panel is
basically a web page or a panel that has
different tabs at the top that you can
move in and out of without actually
leaving the web page so it's all in the
one specific HTML document and so let's
let's get started in creating some
tabbed panels to get started all we need
to do is go over here I changed my not
forms it's not forms anymore it's
actually spry so we can see all of the
different spry elements that are inside
Dreamweaver so the first thing I'm going
to do is click on spry tabbed panels
and you can see that it just imported a
fair amount of code imported this parent
div it's called tab panels one and also
created this unordered list and another
div called tab panels content group so
what's going on here is let's look at it
in the browser so we can see what what
we have done we have created two tabs
that each have content inside them and
you can see that there's that blue color
there because I was just messing with it
before I started this tutorial and
changing a few of the colors and so now
that we've created our tabs I'm going to
show you how to customize them how to
edit them and make them look a bit more
stylish or a bit more customized so
let's go over here and look inside of
our CSS styles and make sure that all is
selected and you can see that you can
scroll through each individual style and
you can see this is where the the color
of the text came from I'm going to go
ahead and change that back to black save
that and run that again make sure that I
there we go so you can see now that that
text is black so I'm going to go in and
before I do this I'm going to add one
more tab here and that's easy as
clicking on the parent div and clicking
on this plus down here no admin tab for
us and you can see that it added in the
middle of tab 1 + tab 2 we actually
control the text of our tab right here
and we control over the content right
here and all of the the styles are
controlling our CSS so you can see that
with a little tiny bit of code not
including the CSS that
this is a pretty powerful little tool
that is very user-friendly inside of
Dreamweaver as easy as just clicking on
our sprite tab panels and adding a few
panels and then changing the content to
whatever you want to change it to and
that is basically how you define and
create some tabbed panels I'm not going
to go into detail on one what we can
change here we've already gone through a
lot of the CSS styles in the past
tutorials if you are unfamiliar with
what all these CSS Styles mean then I
recommend that you go back in time and
check out all the CSS tutorials that
were done in this Dreamweaver cs4 series
of tutorials in the next tutorial we're
going to be going over the spry
accordion so make sure that you guys
stay tuned subscribe and I'll see in the
next tutorial