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.
Another feature which adds a lot of flexibility to prototyping with Fireworks is the ability to share layers across pages. Now with a Master Page, when you put elements on that Master Page, all the elements get shared across every single page. When you are dealing with layers, though, and sharing them across pages, you can actually pick and choose which layers receive the elements on each page. So let's have a look at this. We'll first do a little Overview of our starting point for our Web site. We have three pages here: the index page, the mission page, which is noticeably missing its navigation.
And the tourMain page, which has its navigation, but it's a lot different from the index page. Notice that we have got some sublevel Navigation in here. So I have a couple of examples of locations here where I could share content in areas where I definitely don't want to share any content. So I am going to go back up to my index page here. And as I just sort of flip back-and- forth you can see that, now there's a perfect spot for my Navigation. Now before I actually share the layer I want to point out one of the thing. This particular page has two States.
If I go down to my Layers panel and click on the State Navigator, I'll see State 1 and I'll see State 2, and State 2 basically represents the Rollover Effects for my Navigation. If you're planning to share a layer from a page that has multiple States, and in our case, this is the situation, you want to make sure that the destination or target page also has multiple States as well. So if I switch over to mission, and go down to my Layers panel, you'll see I actually have, already displayed, State 2. There is also State 1. There is no real difference between these two, State 1 and 2, because the main difference even on the index page was just the Navigation.
Now if you did need to add an extra State to this page or any other page, just go to the States panel, and you can choose right from the options here, to add a State. We don't need to that in this case, so we'll leave it as it stands for the time being. I am going to switch back to my index page, and I am going to switch over to my Layers panel, and I am going to select my Navigation layer. Now take a look at this. You'll notice that Navigation layer is separate from everything else. There are all my different elements for my Navigation layer, all the different Navigation bits. And l am looking at these. I am thinking, well, what I should do with these before I do anything is I should name them.
So I am just going to double-click on each one, and name them based on the Navigation button. This way it is a little easier for me to find them later on if I need to. I am just double-clicking on each of the object names, and then I can then I type in whatever name I like. And the last one is tours. Okay, so now they are all properly named. That makes life a little easier.
And an important to note is that this Navigation layer that I am planning to share is separate from everything else. The rest of the design has been grouped inside of one main layer. So I have got a whole range of content, a whole series of sublayers inside of that main layer. If you want to share a layer across pages, it has to be independent and on its own. I can't share a sublayer inside of my main page design. I could only share the main page. And the last thing I want to do is share everything in this layer, my main page layer, with all the other pages.
And we will be ending up having problems with the content display. But the Navigation is something I do want to share, so it's on its own separate layer. I am going to choose that layer. I am going to go into my Options for my Layers panel and choose Share Layer to Pages. Little dialog box comes up, and you'll see on the left-hand side, the pages that aren't sharing the layer, and you'll see on the right-hand side the pages which are sharing the layer. So I can just select my mission page, and I am just going to click Add. And then all I have to do is click OK.
And as soon as I switch over to the mission page, you'll see I now have my Navigation, which is great, it means I've got the same content on both pages. Now as I mentioned earlier, this is a real time saver. I am just going to select my Navigation layer. If I need to change anything inside this Navigation layer, for example, oh, let's move the Tours link up a little higher. Just hold down my Shift key and press the arrow key once, and it shifted up a little bit higher. Changing in one location, and it didn't matter which page I was on, automatically updates that change on the other page.
So that's a really important and time- saving feature, the fact that I can edit the content anywhere, on any one of the pages that's sharing the layer, and all the other layers take on those properties. So I am just going to go back to my mission page, select my tours and bring it back down again. And then if I go back to index, you'll see everything is back in place again. Sharing layers across pages is a pretty powerful and flexible feature, and as your designs become more complex, I think you find this to be a really helpful tool.
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.