Click on any phrase to play the video from that point.
[CS6]
As a web professional, I'm sure you're as excited as I am
about CSS3, and you'll remember that in Dreamweaver CS5.5,
we introduced support for CSS3,
and with Dreamweaver 6, we continue that support
and even add a few new options.
Let's have a look.
Here I am in my Pluralist page where I've got my Pluralist logo
up here at the top of the page, but it's not exactly the way
that the designer called out.
The designer wanted some rounded corners here at the bottom,
but of course to do that, in the past I would have had to use an image.
But today with CSS3, of course, we can do a lot of these great graphic effects
without actually generating images using CSS3.
Let's go ahead and do that here.
I've selected my logo rule, and what I'd like to do
is just add a property, and that property, of course,
is my border radius property.
I can, again, just pop my list open,
scroll up to the top to find border radius.
Of course, if I know how to type it, I could type it just as quickly.
In fact, I do know how to type it, so let's go ahead and do that
because it is a long list of great new properties that we have
with CSS3.
I'm simply going to say "border radius," and as I tab,
you'll remember in Dreamweaver CS5.5 we introduced this little icon here
to help us create the syntax for these CSS3 properties.
I'll click the button and see, oh, do I want corners
on all 4 sides, or do I just want to do individual corners?
Let's go ahead and just do the bottom right.
Let's maybe test it out,
and that's one of the great things about this panel is I can actually begin to experiment.
You'll notice as we look back over here at The Pluralist logo,
we're actually seeing that change already taking place.
30 is probably way too much, and my designer would kill me
if I did that, so let's just make it 10 pixels on the bottom left
and on the bottom right, and with that, we're done,
and we've created a nice rounded effect that, again,
would have required an image in the past.
But sometimes it gets even more complex,
and then there's a lot more that you have to
be thinking about.
Well, that is unless you know a secret,
and I'm going to let you in on the secret right now.
I've got a badge down here, this Plural To Go badge,
and you'll notice that behind the scenes it sort of looks like
there's a rounding happening over here
just on that one corner.
I want to get that rounding, and I also need the background,
which happens to be a gradient.
Now, I don't know about you, but if you've tried the gradient syntax,
you know that it's crazy,
and it seems like it changes every time I get it memorized,
and so instead of even trying to remember the syntax anymore,
I use the trick.
Let's go over into Fireworks CS6.
In Fireworks CS6, I'll just zoom out so you can see
this is in fact the layout that the designer provided me.
We'll zoom back in here on that Plural To Go area.
Now, I want to take this entire box, that entire shape,
and again, rebuild that as CSS instead of using an image.
In the past, again, that would have been a complicated process,
but with Fireworks CS6, I can simply select the object
and then go up to my Window menu and choose to
open up my CSS Properties.
The CSS Properties panel is going to show me
the CSS necessary to build that shape.
You'll notice as I begin to sort of click around on individual pieces and areas,
you can see that it's changing because it's telling me
what those individual items are in CSS.
Now, I have the option of several possibilities here
where I can take all of the things, the width, the height,
the border radius, the gradient, everything,
and if that's what I'm after, I can simply click All
to collect them all on to the clipboard.
Now, the other possibility is to uncheck
the properties or the browsers that I'm not interested in.
If I, for example, was only going to WebKit mobile-based browsers,
I wouldn't need all of those others, but of course,
I'm going to go ahead and take them all and cover all my bases.
But instead of taking the width and height because I've already got that defined
over in my CSS, I'm just going to select the border radius,
hold down my Command or Control key there to do a multi-select,
and take the gradient, and then I'll just copy
those selected properties.
We'll head back over into Dreamweaver,
and now I'm going to take my Plural To Go,
and I want that entire emblem, if you will,
that item here, so I'm just going to select that rule,
and I'll go to code, which will give me my split view,
and here you can see the code that I've already written,
and now I'll just place my cursor into that spot and paste.
Now as we go back over and take a look at our emblem,
we now have a beautiful, rounded corner on the top,
on the bottom, and that beautiful gradient
that our designer was after without ever
having to remember all of that complicated gradient syntax.
One last thing that you might have noticed.
This text, it's real text,
but it certainly doesn't look like any web-safe font that I've ever seen,
and that's true because another great thing about CSS3
is the ability to use real fonts, not just those standard
5 or 6 fonts that we've been stuck with all these years.
Now, there's a couple of ways to go about that.
One, of course, is through the TypeKit service,
and of course, I would encourage you to do that.
Check out TypeKit. There's a boatload of fonts there.
But if you don't want to use that, the TypeKit service,
and you want to have the fonts locally on your own server,
then there's also that option as well,
and we've added support for it right here in Dreamweaver CS6.
See, what I'm going to do is first of all,
in my site definition, I'm simply going to
go to my Advanced Settings where you'll notice
the web fonts section, and that's going to simply point
Dreamweaver at where I want to store my web fonts.
Now I can begin adding fonts,
so I'm going to go up to my Modify menu
and choose my Web Fonts command,
and then I'm going to say I want to add a font.
Now, the first thing I'm going to do is give the font a name.
This is going to be Madrone, the font that I'm going to use,
and then pick one of the formats that I'm interested in.
I'll just take my EOT, and I've got my Madrone folder right here,
and I'm just simply going to select that.
And you'll notice that as I do so, Dreamweaver has already seen
the other fonts and has listed them for me.
The last thing is--and the most important thing actually
about using fonts on the Web is you have to have a license for them,
and that means a license to use them on the Web.
And so Dreamweaver is going to make sure that we have that,
and when I click my checkbox the OK button is going to be enabled,
and I can say great, now I'm done,
and now I can begin using Madrone as part of my font families,
and the moment I do so, Dreamweaver is going to copy those files
over into my own site definition for me.
As you can see, there's a lot of great things happening with CSS3,
and of course, Dreamweaver CS6 is right there to support you.
[Adobe]
