Click on any phrase to play the video from that point.
[ADOBE CREATIVE SUITE 5.5 WEB PREMIUM]
[Greg Rewis] Hi, I'm Greg Rewis, Principal Evangelist at Adobe.
I'd like to talk to you about Creative Suite Web Premium 5.5,
and specifically, Dreamweaver CS 5.5,
and how it can help you address issues
that require a little bit of extra help beyond simple HTML and CSS,
namely JavaScript--and specifically, the jQuery framework.
Now, if you've watched some of my other videos,
you know that I've built a page that now has
different media queries to take us from a desktop view
down to my iPad and down to my mobile phone.
On my mobile phone and on my iPad,
you'll notice that my content is not complete in each of the individual sections.
In other words, we've chopped it off, so that the person doesn't have to scroll
so far with their fingers, but you'll notice
that I have some little arrow icons,
and when I tap that on both my iPad and my mobile phone,
we see that the rest of the content is then displayed.
If I go down to the bottom and want to close that back up,
I can tap to close it up, and we see that happening on both devices.
Now, that is not HTML.
That's not CSS.
That is JavaScript, and I've used the jQuery framework
to help me do that particular or add that particular functionality.
Let me show you how by returning over here to Dreamweaver,
where I'm looking at my page in Live View,
using my Media Manager here--my Media Queries Manager--
to show how this looks on my SmartPhone.
Now, as I scroll down here in Live View,
I'm still in Live View; therefore,
that means I can still interact.
If I click upon this particular button here in Live View,
I can actually see the piece expanding,
see the piece contracting back up,
just as I did over on my iPad and on my mobile device.
Again, this was all in JavaScript.
It's actually behind the scenes right now here, so let me go into my split view,
so that you can see my Live View alongside of that JS file,
that actual JavaScript file.
Now, again, if you've worked with JavaScript and specifically with the jQuery framework,
this code will look pretty familiar to you--
my dollar sign representing jQuery.
and I've opened a parenthesis and then a function getting my document ready
saying, "Let's do all of this stuff," as the page loads.
Now, up to now, jQuery and Dreamweaver were friends,
but they weren't good friends.
In other words, you could do jQuery using Dreamweaver,
but you had to really know what you were doing.
We provided no code hinting whatsoever,
but with Dreamweaver 5.5, we wanted to change all of that.
So let me show.
Now, I'm just going to repeat this line right here--
this line of code--just to show you how it was actually written.
Now, just follow along here as I create a new line of code.
I'm going to start with my dollar sign, and that open parenthesis that we see.
Immediately Dreamweaver says, "Hey, wait a second. I got it.
You're writing jQuery. I am going to help you out."
Now, when it sees that opening parenthesis sign, it says there are two things--
and only two things--that can follow this open parenthesis just like this,
and that is one--a call to my document itself or two--a call to this--
which in this case is whatever the object is that we are dealing with,
and that happens to be the more button that we are inside of.
Now, don't worry about all of that because we're just simply going to say
"Okay, Dreamweaver, that is actually what I am talking about--this button,
so help me out here and let me know what I can do."
So I'm going to close off that parenthesis--and in JavaScript and
therefore in jQuery as well, we'll use a dot to specify methods and commands, if you will.
So I'll type the dot, and there we see brand new code headings
showing us everything that you can do in jQuery.
This is a long list of code here,
and obviously, I don't want to scroll all the way through there looking for
the individual item that I"m interested in.
We know because we're copying the line above,
but I'm looking for that prevUntil.
Now, this a command in jQuery
that says navigate up the tree until we find a particular item.
So I'm just going to say, "Okay, let's do that."
Let's prevUntil and just complete that.
And now, this is where the magic gets going.
I'm going to use that open quote.
Now, I typed a single quote, but I got 2,
because Dreamweaver knows, hey, if you're going to open a quote,
you're going to have to close it because we're dealing with JavaScript here,
so it has actually already given me the closing quote and moved my cursor
back into position for me.
Now, at this moment, it's showing me my HTML library,
so it's saying hey, you can select any element in HTML,
but we know I'm not interested in that.
I'm interested in that class that has the name of eqheight,
so I want to go find that element.
When I type the period, watch what happens.
Dreamweaver has now given me a list of all of the CSS classes
that I have defined in this particular document.
If I backup and do a pound sign, here are all of the IDs in that particular page.
So let's go back and find that eqheight just like that
and let it complete that writing for us.
Again, I'll close off my parenthesis, and we will continue.
Now, this is one of the unique things about the jQuery library,
is we can string commands together.
Now, if you've done regular JavaScript development,
you know that this is not possible.
We have to declare each command--if you will--on its own line.
It's all done sequentially--a lot of trouble,
and so that's why jQuery is so popular.
It can shortcut all of that for us.
So I'm just going to simply say, "Period, let's do something else."
Now, once we've navigated up the tree--and in our case, we found the 3 columns
that we've been working with throughout all of my videos here,
and we've found those, and this is now what we want to do.
We want to go down and filter their content--find something specific.
So, again, I will begin typing filter, and we will go right down to that particular element.
We're going to say, "I want to filter a selection or selector."
And which one?
Again, we're going to say, "Well, I'm looking for one that is control."
So as I begin to type, you'll notice that I have a lot of typing that c-o-n-t.
C-o-n-t is going to be repeated 3 times here.
I want to go directly down to that control, so you know what?
I'm going to type something unique.
Let's try rol. Oh, wow, rol got me right down to that particular item,
because that was unique, and Dreamweaver is able to filter through all of its code.
Whether we're talking about jQuery, in this particular case,
or CSS or HTML or just straight JavaScript, we're able to filter that
based on what you type.
So, intelligently doing so, I'm going to say, "Let's go to that control,"
and now what we're going to do is just have it remove the class that was on there,
which is another great and wonderful thing that is so easy to do with Dreamweaver.
I want to remove class--wow, I'm going to be typing a lot.
I'll be there's no vecl.
Ah, right--that's another unique thing in there, so I'm just going to go for that.
Let's remove that class.
Again, which one?
We'll say the control--whoops--the class--sorry.
You'll notice, by the way, I didn't have to type the period,
because Dreamweaver knows.
It says hey, you're removing a class.
Obviously, the period is to say that it is a class, so class just has a name.
So let's go ahead and type type that--control--oh, I should have done that same thing again,
but there we go--to get down to control, so I didn't have to type the cont,
but there we go, and now we're removed it,
and the last thing is we're going to add on that toggle.
And you can see that that was done, just by simply--oops--adding a class--sorry.
Add a class just the same way that we did a moment ago.
And here are my available ones, and there we go.
My friends, this--whoops--that is, if I got it right here.
I should have let it close my parenthesis off.
There we go.
So as you can see, Dreamweaver CS 5.5 makes easy work of not only JavaScript,
but working with the jQuery framework, the most popular framework out there.
And combine that with features such as the media query previews,
you've seen how easy it has been for me to create a unique experience,
not only for my desktop viewers, but also for my mobile viewers,
using Dreamweaver CS 5.5
[ADOBE™ TV tv.adobe.com]
