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]
