Join Tom Green for an in-depth discussion in this video Using the CSS Properties panel, part of Fireworks CS6 Workshop.
As we move into a multi-screen universe, where your designs will appear on everything from a smartphone in your hand to your home TV's, the concept of small and fast takes on added importance. Optimizing graphics in Fireworks CS6 is one way of dealing with this issue. But with rise of HTML5 and CSS3, letting the software do the work is even more efficient than a browser grabbing an image from a server and placing it on a web page. New to Fireworks CS6 is the CSS Properties panel.
What it does is allow you to draw vector shapes such as rounded, rectangles or circles with solid, transparent or even gradient fills and strokes. And have those objects complete with drop-shadows, transforms, and even font properties. Transformed into CSS code which are then added to a CSS style sheet, and the browser draws the shapes at run time. Just keep in mind the purpose of this lesson is to show you how this process works not the subtle nuances of using cascading style sheets. Let's get started.
And to get yourself started, open the extract CSS.png file located in your Exercise folder. And when it opens, you'll notice that our friends at Fireworks User have put a box around this little text area here, just to make it a little more noticeable. Not only that, they have put rounded corners on the box. You can see it's rounded off about 36%. There's a stroke color which is pulled from the roof of the building here. And if you look at the bottom here, there's a bit of a drop shadow. And the plan is not to make this one great big graphic, but to actually just take this content here and put it in this box.
Now, it's going to go in a CSS DIV. And we're going to let the browser draw it. But first, what we have to do is pull out the CSS Properties. And here's how you do that. You go to the Window menu and you look for CSS Properties, right down here. And when you open it, the new CSS Properties dialog box in Fireworks opens up. To extract the properties or to see the properties of this box just click on it, and you can see they all appear. You can see the background color, the width, the height, the border color, the border width, the radius, the style of the border, and even the shadow. And then, down here is all of the CSS that will be generated by this selection. And it will be CSS that allows you to run it in Firefox, Opera, Webkit, and Internet Explorer.
The other thing you can do here is, if you don't want all of the CSS, you can just grab the individual properties. So you can say, look just give me the height. Or if you hold down the Shift key, you can select the border color, border width, border radius, and the style and leave it the shadow. Other things you can do with this is if you hold down the Cmd or the Ctrl key, you can select individual properties and just export them. Now, there's a check box down on the bottom here for Include Comments.
And what this will do, before I do that, I just want to get all of the properties selected here. There we go. And what this will do is add comments to the the codes. So, if you include the comments, you can see there they are FireFox, Safari, Chrome. And it's pretty heavily commented if you go through it. If you don't need the comments in the CSS code, don't bother with them. The two buttons down on the bottom allow you to grab the properties for selected properties. As you can see, I've got that and I can just click Select It, and it will just copy just these, or if I Select All, I can just say Copy All.
And that little clipboard that you see there is pretty important. Because what will happen is, the CSS code will be pulled out of the CSS Properties dialog box and put on the clipboard. So, I'm going to click All. Okay, it's now sitting on the clipboard. And how does that look, say in Dreamweaver? I'm going to pop over to Dreamweaver and let's take a look at that. So, I've got a typical page here. I've got a little DIV with an idea of FW CSS prop, and I want to get those properties from Fireworks into a page.
What you do is you click just outside that first curly brace, press the Return key, and Paste, Ctrl + V or Cmd + V if you're on Mac. Click the Refresh button in Dreamweaver, and you can see there's the box. Now, it doesn't look quite like the box. And if I click the Live View, not only do I get the box and the shadow, but I'm not getting the rounded corners. Well actually, they're there. If you come over to Preview in browser and choose say Chrome, it's going to ask you to save the changes. So, I'm just going to save them. And then, it's going to launch Chrome, and there's the box with the rounded corner.
Let's take a look at it in Firefox. And there's the rounded box with the drop shadow. And let's take a look at it in Safari. Safari launches, and there's our rounded box. So, there you go. That's, kind of, how you do it. Simply select the object that you want to add to your CSS style sheet. Come to the Window menu, choose CSS Properties, decide which properties you want.
You can chose all of them or some of them. You can include the comments in it, if you want commented CSS code. and you can just click the Copy All button, and that will copy all of this code in here to the clipboard. Or you can chose Select It, and only the properties you've selected will be copied to the clipboard. From there, it's over to your favorite HTML Editor. In this example, I use Dreamweaver CS6, but you can use any HTML Editor. Paste the code into place, and away you go.
- The Fireworks interface
- Vector drawing
- Working with bitmaps
- Image retouching and color correction
- Masking in Fireworks
- Working with text
- Creating symbols
- Creating for Edge and mobile
- Importing Photoshop and Illustrator documents