Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
The ability to share graphical or object layers is really handy, because it means you can basically manage identical content across multiple pages from one location, but you can also share your interactive elements, your Web layer across multiple pages. We're going to take a look at how to do that in this lesson. So if take a look here at my index page, I've got slices for all of my different buttons on my Navigation bar. But if I switch over to the mission page, you'll notice that there are no slices. Just to double-check, I'll just turn these slices back on and off. You'll see nothing appears.
So this page, while it does have my shared layer with my different buttons on it, it doesn't have the navigational component. So I'm going to switch back over to my index page. Let's take a look at what's going on here. What we're going to be dealing with are the objects inside the Web layer. The Web layer is where Fireworks places hotspot and slice information. If I expand that down, you'll see we've got a hotspot here. That's little bit lower on my page. We've also got a range of slices that have yet to be named. A little bit lower down though, just past those slices, we see another layer called shared navigation.
I'm going to collapse that for a minute. I just want you to see the structure here. We've got our Web layer. Then we've got, inside of that, a nested or sublayer called shared navigation. Now the way the Web layer works is that anything that's in the main Web layer, like we see here, is specific to that page. If I want to share interactivity across multiple pages, I have to create a sublayer for those Web slices or Web objects. Creating a sublayer for the Web layer is just as easy as creating it for a regular layer.
All you need to do is select the layer where you want the sublayer to go. Then go down to the bottom of your Layers panel, and click on the New Sub layer icon. When I click on that, I'll get a brand-new generic sublayer. That one is currently empty, just wanted to show you the process there. So I'll just select that one and get it out of the way again. So that layer has already been created for us. If I take a look inside that sublayer, you'll see there are all the hotspots for my different navigational elements.
It looks like I have one more in there, ah, my logo! So I'm going to change the name of that from Slice to logo. Now, sharing this is actually very similar to sharing a standard layer. Just select the sublayer, go into your Layer Options, and choose Share Layer To Pages. Then select the layer at which you want to share that navigation. So I'm going to choose mission, click Add and click OK. Now, if I switch back over to my Pages panel, and switch over to my mission page, you'll see that my navigation is now part of that page as well.
It's a shared layer. It actually even shows up inside my Web layer here as shared navigation. We've also got a little generic layer in there that came up, not sure why that's there, so we'll just delete it. It's completely empty anyway. So there is my shared navigation, and just like a regular shared layer, I can click on these individual slices. If I reposition one of them, I'm just going to go ahead and change the location of my Tours slice. Then I switch back to my index page. You'll notice that the navigation has altered there too. That slice is basically being maintained across multiple pages.
So sharing Web layers is a great way to save a bit of time and to be able to share common elements, in this case, interactivity, across multiple pages.
There are currently no FAQs about Fireworks CS5 Essential Training.
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.