Join Ray Villalobos for an in-depth discussion in this video Working with Fireworks sprites, part of Fireworks CS6 New Features.
So I want to show you how to prepare a simple HTML page using sprites from Fireworks. And I set up a simple page here. This is just a very basic navigation with rollovers. You can see that when I roll over each one of these graphic elements here, you see a little bit of a yellow bar underneath. If we see the HTML, you can see there's just a basic list of items. Inside each of the list elements, I also have an anchor tab with the text, and all that is wrapped around in nav tag that is wrapped around a header tag.
You could see that it's calling a style sheet right over here. So let's take a look at that style sheet that's over here on this side. I'm basically setting up just some basic background colors here, clearing out the margins on the body, setting up my navigation by giving it a width of 100%, another background color, some fonts, and other basic styles right there, clearing out the margin and padding that would normally be on list items, and setting the list-style to none so I get rid of the bullets. And then on each list item, I want to make sure that I float them to the left to make sure they appear side by side; normally, these would appear on top of each other.
And then just setting up this border- bottom--that is, the border down here--as well as the border to the left and to the right that gives you that separator in between. Also, when we hover over each one of these elements, you could see that they turn yellow, and that's what this does. And then finally, we get rid of the underline that normally would appear underneath an anchor tag and set up some other basic styles. So now we just need the graphics from Fireworks. I am going to switch over to Fireworks and show you this file. And this file is just a series of symbols. I've created symbols that are button symbols, because button symbols give you the two states that you need for this rollover effect automatically.
So if I double-click on any one of these, you could see that under the States menu, when you create button symbols, they automatically give you four different states. I'm really just interested in the up state as well as the over state. If we go to the over state, you'll see that we see a yellow version of this graphic, which that's exactly what we want. So, all of these are done in the exact same way. Each one of these buttons has an instance name right here. That's what Fireworks is going to use to write to CSS with. So to export this, we also need to hide this background right here, as well as the text underneath each one of these elements, because we're going to do those with HTML and CSS.
So what we need to do is open this up, find all the text items, just get rid of them, hide them, and then we can hide this background, and we can also hide this underline border here. It's not really going to export, because our slices are on top of that. So now that we've got this ready to export, we're going to go to the File menu and select Export. And from there, we need to go and make sure that under Export, we have CSS Sprites selected. And then I'm going to click on this Options button. And in here I've set the CSS selector to be a class selector. You can choose an ID if you want, right there.
You can also choose to have a prefix so that it writes the CSS with this prefix before the name. I'm just going to use essentially this, plus whatever instance name we've given to each one of these slices. So it's going to use nav_ and then whatever instance name you've given to each of the slices. We can add a suffix if we want to. I don't really want to do that. We can add additional padding as well right here. I don't need to do that with this type of graphic. And choose a layout. It doesn't really matter with this graphic what layout I choose, because it's just the right size. And then we can choose the Format. PNG32 is what I'm going to use.
So I'm going to hit OK and then hit Export. And when I go back over here, if I open up my folder, I can see that it's generated two documents for me. This is the PNG file. So if I take a look at that, you can see the graphics are right there with the normal and the hover states, and the background of the graphic is transparent. You can see the CSS is almost ready to go. It has the single call to the graphics right here and then some adjustments for each one of the different slices.
So I'm going to pull this up into my text editor, and I'll make this a little wider. Go ahead and hide this one over here, because we need to reprogram our HTML pages a little bit. We'll add a class here, and this class will be "nav symbols," and we're going to add also a class to each one of these list items. And the class name will be nav_, because that's what we chose as the prefix, and then the name of this particular element. And do that for all these right here. Okay, I'm going to go ahead and save that.
And now I can switch over to this CSS. I'm going to grab all this and copy it, so you can go to Edit > Copy here. And I'm going to come down here and paste it. Now, nothing is happening yet, because we need to rewrite the way our CSS is done. So what we need to do is come over here and add an li selector to the nav symbol's class, and then we're going to go in to each one of these other elements and we're going to add the words "li" right before their name. So you should see them changing whenever I get to their name on the right-hand side.
And since we've modified the hover classes, whenever we hover over these elements, you can see that the tasting and the picking are done, and some of these other ones look like they're pretty good. So let me just go ahead and modify these, just by adding the li everywhere. And our rollover should be working now. So you could see that Fireworks does a really good job of creating both these sprite graphic as well as the CSS for you. When working with sprites that have rollovers, I recommend that you also work with button symbols.
Working with symbols means that you will get to hover CSS written automatically for you.
- Exploring overall user interface improvements
- Understanding the style workflow enhancements
- Working with the new document titles
- Working with CSS gradients
- Exporting sprite graphics
- Skinning with jQuery Mobile
- Modifying a jQuery Mobile template