Click on any phrase to play the video from that point.
Hi, I'm Greg Rewis, Principal Evangelist at Adobe.
And I'd like to talk to you about Creative Suite® Web Premium 5.5,
and specifically the improvements that we have made in Dreamweaver® CS5.5
surrounding CSS3. Boy, that was a lot of letters and a lot of numbers,
but I'm sure you've heard of CSS3 because, of course, everybody's talking about it,
although they generally say HTML5.
CSS3 is, of course, just as important for the Web as HTML5
because CSS is the presentation layer of all that beautiful Web content
that we see out there.
And, again, I'm sure your customers are asking you to support CSS3
or add CSS3 support to their sites.
And, of course, our designer was absolutely ready to do this with the comp
that he delivered to it.
Let's take another look at that comp.
Well, we can of course see that we have--wow--transparencies,
rounded corners, things sitting askew--again, all sorts of things that we're going
to have to tackle using CSS3.
Thankfully, again, Dreamweaver® CS5.5 actually supports CSS3,
not only in code view but also visually as well.
Let's return back over to Dreamweaver®, and you can see that I have a little
bit of the design already going.
So it's looking okay but, again, not completely the way that our designer envisioned it.
Of course, this is, first of all because I'm currently
just looking at the page in design view.
Now you might remember that we added live view back in a previous version
of Dreamweaver®, which of course enabled us to see the page exactly
the way it appears in standard-space browsers such as Chrome or Safari,
because we built the WebKit browser engine into Dreamweaver®.
So let's go ahead and turn that on first
and see that, well, okay, it looks a little bit better than it did before
but still does not match the design that our designer had in mind.
Now, a few things I have already added. You might notice up here along the top of the page
I have a colored bar that is semi-transparent.
Now, our designer called out that very same transparency for the three columns
of content that we have here on the page.
So the first thing we need to do is to create a rule or a selector to identify
these individual columns and then apply that color transparency.
Now, as I begin to click through the individual columns themselves,
keep an eye over here on my CSS panel.
I'll make this area here where the rules appear a little bit easier to see,
and as I am moving between these, you will notice that I have a rule called
Equal Height, or EQ Height, that has been applied to each one of these.
That's a perfect, then, selector for that transparency since it is already applied
to all three elements.
Let's go ahead then and add our background color.
Well, actually, our background color has already been added.
You can see; here is our background color declaration,
and it is currently white, or FFF.
I'm sure you all remember that that is actually white in the hexadecimal color value scale
that we've been using on the Web since, well, the Web basically began.
Again, we don't want to use that anymore. We want to switch to something different.
We want to allow for transparency.
And that's all part of a new color spectrum--well, not really new, but new to us,
in CSS called RGB.
Now, RGB is red, green, blue. I'm sure you're already familiar with that.
But we've not had support for that in previous versions of Dreamweaver®, but in
Dreamweaver® CS5.5, we do.
And we find that by simply selecting our color value.
I'm going to use my color pop-up here, and then I'm going to go over to
my little submenu where I can now specify the color format
either in that 3-digit hexadecimal value or 6-digit hexadecimal value that we've
been using all along or, as I said, using these exciting new color spaces of RGB or HSL,
or RBGa and HSLa.
Pop quiz: What's the A mean?
I'm sure you're guessing Alpha, and you'd be right.
So as we choose the RGBa value, you'll notice that as I move around
my color wheel you're seeing that that value is actually being reflected
right up here along the top. Our white has been translated from that #FFF
into an RGBa value of 255255255,1.
Now--oops, and I need to actually select it so that it actually is applied.
We'll do that once again. Here we go. Select it. There we go.
So that we have that white as that 255255255,1 value.
Now, where's the alpha?
Well, that little last value, that number 1.
Being 1 means that this is completely opaque.
So we're going to need to change this value. We can add any value between 1 and 0.
So I'm going to go and just say all right, let's give it a little bit of transparency.
Let's say .8 [point eight].
Now when I choose .8 and hit my return key, you'll notice that immediately
over here in the live view, Dreamweaver® has updated to show us that
slight transparency peeking through the white.
We didn't even have to reload the page because as we work within
our CSS rules panel in Dreamweaver® CS5.5, Dreamweaver's live view is updating
to reflect those changes dynamically. Now that means that we also could do
something like, maybe, the rounded corners that our designer had called out
for those same three columns.
To do that, we're going to need to add a new property.
Now that property you probably are familiar with if you've ever worked in, say,
Fireworks or Illustrator or any graphics program that allows you to create
rectangles with rounded corners.
That property is called border radius.
Now, we're going to go to our Add Property link here, and I want to open up
my long list of CSS properties. Now there's a whole long list of these now
because CSS3 adds even more to the party.
What we're looking for is that border radius and, sure enough, all of our CSS3
properties are displayed here within my list.
I'm going to choose that new border radius, and then you'll notice a new little icon
in the CSS panel indicating that I can assign the corner radius to the value or
this particular rule by simply clicking upon it and popping up a new dialog here
to say, well, how much would you like?
I don't know. Let's go with 10 pixels, and let's go on all four corners.
Notice I've not even released the dialog, and yet over in the Dreamweaver's live view
we've actually seen that value change and update.
Let's go for 20--ahh. Much nicer. I sort of like that.
Twenty pixels of rounding on all the corners.
Now, again, if I uncheck this "Same for all" then I can apply that value to
individual corners as well.
Now, of course that gets all of the modern browsers.
What do I mean by that?
Well, all of the most current browsers. So, Chrome and Safari--the most
current browsers out there using that WebKit engine understand border radius.
Older versions of Chrome and Safari do sort of kind of. And what about Firefox?
Or Opera? Or any of those other browsers out there?
Well, in order to support them, we actually have to use something called
a vendor-specific prefix.
Now, I'm going to show this to you. Since I haven't shown you code,
I'm actually going to go to code and do it there just to show you that not only
do we have this support in our CSS panel, but we also, of course, can hand-type
if we would like to do so, if we find that faster.
Now I'm just going to go ahead and hit my return key to give me
all of the CSS values here.
Now, that vendor-specific prefix actually is not going to be here in my list,
because it begins with a dash.
Now watch what happens when I type the dash.
Dreamweaver® suddenly changes that list and says
"These are the prefixes that belong to those individual vendors
or those individual browsers." We see four of them.
Now, the first one: -moz. That's Moz, or Mozilla.
That's actually for all of the Firefox-based browsers.
We have -ms. That, of course, is Microsoft.
And this is the vendor prefix that they are beginning to use in Internet Explorer 9.
We have -o for Opera. And, again, -w for WebKit.
Now, the WebKit browser, again, is the one that we're already using.
Let's start with that one. I'm going to go ahead and just hit my return key,
and you'll notice my list once again appears.
However, this list is actually much shorter than that list that we saw earlier on
because these are just the properties that are supported
through that WebKit vendor-specific prefix.
So, now, I want to go ahead and get down to border radius, so obviously I'll begin
by typing B and O and R. And, of course, as I type you can see that Dreamweaver®
is narrowing down my selection until I get down to the one that I'm interested in.
I'll just go ahead now and select border radius, and we'll assign it that same 20 pixels.
And again, let's try that with -moz; M, O, Z, and again we have another list,
a list that is different once again from the WebKit list because these are the things
that are supported by Mozilla or the Firefox browsers themselves.
So let's go ahead and just choose that since it's right there, border radius, and
there we have it.
Now, again, if we were to do it once again and type O, you'll see--ooh--a much
shorter list because at this time, Opera had not supported those border radius
properties here with a prefix.
That means, again, that the vendors, the browser makers themselves,
are gradually implementing support for these new CSS3 technologies.
And Dreamweaver® is smart enough to realize which ones are needed
in order to display for those older browsers.
Now, there's one last little thing that I want to point out to you
so you don't make a mistake along the way.
Always remember, never forget...the real property, border radius in this particular case,
should always be the last one in the cascade.
Remember, CSS is all about cascading, or the order, the logical order in which things flow.
So we always want to put our vendor-specific attributes such as WebKit border radius,
Moz border radius before the actual one that does not contain
a vendor-specific prefix.
Why? Because in the future, browsers are not going to need these
vendor-specific prefixes, and we want to make sure that
the last thing we leave them with is always the right thing,
the standards-compliant thing.
So with that you've already seen how Dreamweaver® can support
some really cool CSS3 properties--transparency and rounded corners.
But we've got one more little surprise for you.
If we go back over to our layout here--let's just sort of scroll over
to the right-hand side and up just a little bit, I've got a sort of a round badge here
for a wine tasting, and of course what I really like, and what the designer had called out
in our comp, was for that thing to actually be sitting sort of rotated on our page.
Now, think about this. Try to do this in HTML--without CSS3, that is.
How would you do it? Well, first, you'd have to probably go make an image
in Illustrator or Fireworks or PhotoShop.
And you'd have to--well, it looks like there's a gradient there,
so you'd have to do a gradient as well on that image.
You'd have to export it, bring it in, and--ooh, wait.
How are you going to do that text? How are you going to rotate that?
Well, I guess you're going to have to put that into the image itself, which
of course means it's no longer searchable. It can't be found by search engines, etc., etc.
Wow [drawn out]. A lot of problems there.
So that's why CSS3 is so amazing.
Let me go ahead and click upon this badge here and show you that this is
actually using a class called reminder. I'm going to go just expand my CSS list here
so that you can see my properties here are very, very interesting.
We have things like, well! Ooh, border radius. Hey, wow. Border radius. Huh.
We've already learned that. In fact. what you're looking at, this rounded object, is not
an image at all. It's a box that has a border radius set evenly across all four corners
to actually make it become a circle.
And the gradient? That's not an image either. In fact, let me just go straight to code
so we can view this a little bit nicer. You can see that, actually, we have a
WebKit gradient right here in the background.
We also have a Mozilla gradient in the background.
So both Firefox and Chrome and Safari are actually seeing the gradient
as part of CSS3. Now you'll also notice for those older browsers that don't
support those newfangled gradients, we've actually got an image
back up here that they're going to see.
So it doesn't matter across the board what we're looking at.
All of the browsers are going to see the same thing.
Now, we were talking, though, about rotating or changing--transforming is the word
I'm going to use--that object. So the last thing that I'm going to do is go down
here in the CSS for this object and tell it to turn using CSS.
Now, again, the way we do that is by using some CSS3.
So I'm just going to go ahead and bring my list back up.
You'll notice that I actually used a keyboard shortcut; I'll fill you in.
If you type your Control and tap your spacebar at any time, you're going to get
the CSS3 list of properties. In fact, any code hinting that is available in Dreamweaver's
code view is available through that control plus spacebar.
Now, what I need to do is actually something called a transform.
So as I begin to type, I'm going to get down to transform.
And there are a lot of transformations--really, really exciting things that we can do,
things that we're familiar with from our graphics applications, but we can do it
all in pure CSS.
The one that I'm going to do is, obviously, rotate.
So I'm going to say let's go ahead and rotate this. Let's say we'll rotate it 25 degrees.
Whoops--not 235 degrees, but rather 25 degrees. There we go.
And, again, I'll ask Dreamweaver® to update.
Now because I'm working over here in the code view, I'm going to need to hit my
refresh or use my keyboard shortcut, and as we look at our page,
we'll notice--ahhhh. Nothing happened.
Why? Because this is one of those properties that is specified in CSS
but that browsers have not yet begun to implement on its own.
So, if you were paying attention from earlier, what do we need?
A vendor-specific prefix. I'll type my WebKit. We'll go ask for that transform.
We'll do that very same rotate, and we'll say let's do it 25 degrees.
And now we'll again ask for Dreamweaver® to update our view,
and as we scroll over there, there we have our badge rotated magically.
We didn't have to go to a graphics application. It's all being done with pure CSS.
Of course, for production I would go ahead and add my Mozilla support as well.
So I hope this has, again, gotten you really excited about the possibilities
of not only CSS3 but, specifically, CSS3 supported in Dreamweaver® CS5.5.
[Adobe TV - tvadobe.com]
