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

hey what's up in this tutorial we're
going to create a class full panel using
Dreamweaver cs4 alright the first thing
we need to do is create a div tag to
contain our class full panel as you can
see I just did that
and now we're going to go to our insert
group over here and go to spry and then
click on spry collapsible panel and you
can see that it has inserted some code
inside of our div tag and that is all
ready to do to create a collapsible
panel so I'm gonna run that so you guys
can see what it looks like and as you
can see here we have a collapsible panel
that goes across the whole screen and
when you click on it it goes up and down
and collapses so let's let's customize
this a little bit because this isn't
exactly what I want to see right now
so the reason that that is stretching
all the way across is because by default
the width is set to 100% on the parent
div tag as we can see on this guy
collapsible panel it has a margin of 0
which is gonna take it all the way out
to the edge there so we're gonna
customize our parent div tag a little
bit more right here and we're gonna call
it as you can see I've already created
this panel this panel ID and it has a
width of 300 pixels so I'm just going to
give this div right here at an ID of the
panel
and now that should shrink there we go
that's gonna shrink up our classful
panel right there and it's still exactly
not what I want to see when I load the
page so I'm going to click inside the
parent div of the collapsible panel with
the ID of collapsible panel 1 and I'm
gonna change some of these default
estate and display options right here so
I'm going to change these from open and
to closed
that way whenever we open up the page
the panel is going to be closed instead
of open and the reason I'm doing this is
because inside of here I'm getting ready
to create a sign up or a sign up for a
newsletter form so I'm gonna say sign up
for a news letter and inside the content
here I'm going to create a simple form
that is going to allow the user to enter
in his email address and then submit it
and that way he can get or he or she can
get the newsletter from this sample site
so the first thing I'm gonna do is
create a table to wrap my form up in you
have to think about how you're gonna
format and this time I'm going to format
it with a table using two columns one to
hold the label one to hold the text box
that's gonna grab the email from the
user so there's the first column and
there's a second column and in the
second row I'm gonna make one column but
I'm gonna give it a call span of two
that way it will span two columns just
like that okay in the first column I'm
gonna say email that way the user knows
to put in their email and here I'm gonna
go back and I'm gonna click on spry
validation text field and I'm gonna give
it an ID of email say okay
and I want to click on page properties
and say ok and now I see that I have
some options for my spry text field to
validate it so I'm gonna click on email
address that way this text field is
gonna have to look like an email address
before it is submitted so I'm gonna go
down here in the second row and I'm
gonna go back to forms in the insert
group and click on button and make it of
type submit all right now one last thing
we need to do is wrap our table inside
of a form that way it knows that these
inputs need to go somewhere in this case
it's gonna go back to the same page so
change the method to post there we go
now let's close up our form all right
and now when we launch this what we
expect to see is this text right here
this is sign up for newsletter and then
we click it and it opens up with this
form and so you put in an email and you
submit it and there you go that is how
you create a collapsible panel with a
form inside of it
in the next tutorial we're gonna be
going over tool tips and a tool tip is
it if you haven't worked them before
it's basically when you scroll over some
text it's gonna pop up with a little
little blurb about whatever text you
highlight and whatever text you you
point the tooltip to so thanks for
watching this tutorial that's all the
time I have for right now I'm gonna move
on to tool tips and don't forget to
subscribe and continue watching this
series on a spry