Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In addition to HTML 5, Dreamweaver offers robust support for CSS3. In CS5.5, Dreamweaver upgraded the CSS Styles panel to complement the CSS3 support that it had already been added earlier to the 11_03 update. Let's take a closer look at how Dreamweaver can help you add CSS3 to your sites. So, I have the mission.htm in the 02_04 folder open, and the first thing I want to do is I am just going to turn Live view on so that I can preview my page and discuss a couple of the changes that I wan to make. So, if I scroll down, I can see that I have these callOut boxes on left-hand side and they are pretty bland.
So, what I would like to do is just round just this corner to add a little bit of flair to these boxes. And if I look at the text over here on the right-hand side, I can see it's really wide, so I wouldn't mind splitting that into multiple columns to make it a little bit easier to read. So, I am going to turn Live view off, and the first thing I want to do is show off some of the changes that they have made to the CSS Styles panels. So, I am going to go over to the CSS Styles panel. I want to make sure that I am looking at the All view. If you go to the main.css, kind of scroll down a little bit, you will find this callOut class, so I want to make sure that that's highlighted, callOut, because that of course is the rule that's driving the callOut boxes.
Now, I want to make sure also that in my Property views, I am looking at the Category view, So we have these three icons right down here at the bottom of the CSS Styles panel. They show only the set properties. We have a List view, and then we have a Category view. Now the reason that I want to use the Category view is because we are going to be setting the Border Radius property. Now, one of the things that we have to deal with when writing CSS3 is dealing with these vendor-specific properties that are sometimes needed. So, basically, when a browser manufacturer decides to support a CSS3 property, they might initially use a vendor prefix.
The vendor prefix helps them keep their syntax clean so that you can use this experimental implementation, and then once the specification has been finalized and the implementation has been finalized, you can just sort of remove the vendor prefix. One of the nice things that Dreamweaver has done for us is it went ahead and categorized all those vendor prefixes, so it's really easy for us to find when maybe one of these prefixes is needed. So, if I go down to Mozilla and I expand this, I can scroll down a little bit and I can see right here that we have moz-border-radius and we have bottom-left, bottom-right, top-left, and top-right. Perfect! Well, the moz-border-radius property is a shorthand notation, and you can see that just beside that, we have this little Plus symbol.
Basically, what that means is that if you see this, you can click and you will get a dialog box that comes up that allows you to go ahead and enter all of those shorthand properties at once. Now, I only want to round one corner, so I don't really need a shorthand notation. So, I want to go back into this, find bottom-right, and type in 20 pixels, so 20 PX, hit Enter or Return, and there we go. Now the next thing I wanted to know is what other vendor specific properties might I need to use. So, if I scroll up and close the Mozilla category--now if this happens to you, don't freak out.
I am using pre-release software and sometimes in pre-release software, interfaces aren't quite finalized. So I can see some categories have just sort of disappeared. It's okay. They are not gone. All I have to do is click on them and they will come right back up. So no worries if that happens to you. I am going to go ahead and open up Microsoft, and I don't see anything there about border radius, so nothing there. And if I go into Opera's and open that up, again I don't see anything there. But I go to all the way to Webkit and scroll down, I can see that it does have border radius.
And what I'm looking for again is the webkit-border-bottom-right, so the syntax is not always the same from vendor prefix to vendor prefix. And I am just going to type in 20 pixels. Now, in addition to the vendor- specific properties, most of the time you'll just have the default specification implementation. And what's interesting is you will notice I went ahead and did the vendor- specific properties first. Well, the most recent versions of Firefox and the Webkit-based browsers Chrome or Safari don't really need the vendor prefixes; they now support the default implementation.
So why did we go ahead and do them? Well, we did them just in case somebody is using one of the older browsers that still needs it. You also notice that we did them first. In this case, the older browsers would take the first value since they don't support the default implementation, whereas the later browsers would go ahead and go all the way down through the cascade to the proper that we are about to set. So, I am going to scroll back up and find Border, open this up, and as I scroll down, I am looking for border radius, so I can find border-bottom-radius. Type in 20 pixels.
And I am going to turn Live view on, scroll back down, and there we go. There is our rounded bottom right-hand corner, which makes those a little bit more visually appealing. Now, in addition to all the changes to the CSS Styles panel that we have been talking about, Dreamweaver has also added code hinting support for CSS 3 as well. Now, it added this back in the HTML 5 pack update, which later on was released again as 11_03 update, but in CS5.5, it's the first release where CSS3 code hinting support was baked into the initial install.
So, let's go ahead and take a look at that. Now, I what I want to do, again, is I want to separate this column into multiple columns. So, what I am going to do is use my Code Navigator to help me find a rule that's going to allow me do this. So, on the PC, I am going to hold the Alt key down and click on this, and on the Mac I need to hold Command+Option down and then click. My Code Navigator comes up, and the rule that I am looking for is mainContent, mainArticle, multipleColumn, so that's the rule that's going to help me split this text into multiple columns.
So, I am going to go ahead and click on that, and that should open up my page in a split screen view, and it should take me right to line 400. Now, if you don't want to do that, just switch over to your main.css in Code view and find, on line 400, this selector. So, I am going to place my selector inside the curly braces, and again, I want to start out by using these vendor-specific properties. So, if I type in a dash, notice that code hinting support gives me Mozilla, Microsoft, Opera, and Webkit. I am just going to start with Mozilla. And if a hit Enter again, by the way, I can now get all of the different vendor- specific properties for Mozilla. So I am going to type in col to find column count, and now it will finishes that out for me, so moz-column-count, and I want two columns.
Now, if I go down to the next line, what I want to do now is I want to specify the gutter, or the gap between those columns. So, I am just going to do that again. I will type in an m, go down to Mozilla, and then type in a c, and I want to find column-gap from my list and hit Return, and it will go ahead and finish that for me. And I want to do 25 pixels there. Now, once again, I am going to follow this up with Webkit. So, I will type in a dash and a w, it will go down to webkit for me, and in webkit, I am going to type in a c. It goes down to columns.
And you will notice there are slightly different options. Webkit has more options involving multiple columns than Mozilla does at the moment. So, I am going to go down to webkit-column-count and again, we want two. We need to specify the gap here as well, so I am going to do webkit-column-gap. And you will notice that I'm just using my arrow keys to scroll down through the list, but you can certainly just continue to type if you wanted to. And we will do 25 pixels. Now, we are just going to follow that up with the default implementation. So, I am just going to type in column-count:2 and then column-gap:25px.
I will go ahead and save that, click back over on Design view, and if you Live view turned on, you will see what I see, which is multiple columns now for our text. Now, that's really cool, but one of the things we need to realize is that the CSS3 support hasn't made it to every single dialog box yet. If I go back over here to CSS Styles panel and scroll down in to my classes and find that callOut class, if I double-click this, you can see I don't really have any categories over here for the vendor- specific properties, and I if I click on Border, there is no hint of border radius in this dialog box.
So, while support has been added to the majority of the Dreamweaver interface, it's not everywhere yet, so you need to make sure that you're familiar with the properties that you are looking for. Don't just assume because it's not in a dialog box that it doesn't exist. That being said, however, the addition of CSS3 support and improvements that they've made to the CSS Styles panel really do make it easier than ever to create standards-compliant sites in Dreamweaver. Although changes aren't really fully integrated yet all the way into the interface, it's nice that we can start taking advantage of the CSS3 support in Dreamweaver right now.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.