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.
One of the other great things about Fireworks is the entire team can be involved in working on a single project. For example, I've got this five-page mockup here: index, mission, tourMain, tourSpecific and cycling. And I've just heard from my designer that they've completed the snowboarding tour page. So I want to insert this into this design before I preview it or turn it into a clickable mockup for the client to look at. And bringing a new page into a Fireworks design is actually pretty easy to do. I want to put this page at the very end of my pages, so I'm going to select cycling, and I'm going to choose File > Import, and I'm going to locate my completed snow page.
There it is there, okay. And you can see a little preview of it. If you look really closely, you can see that the only thing apparently missing is the navigation, and that's fine because we're going to share the navigation from other pages with this design. So I'm going to click Open, and we'll get a little Import dialog box popping up. Now this is an important step. You have to watch for this one. Throughout the course when we've imported graphics, we've put them onto the same page. In this particular case, I want this page to be imported on its own. So I have an option here that says Insert after current page, and I want to make sure that that is checked.
This tells Fireworks to generate a brand-new page for this content that's coming into the design. I'm going to click Insert and within a few seconds, Fireworks drops the page in, and you'll see down below cycling, we now have a new page called Page 1. Double-click on that and rename it snowboarding. There we go. And I want to add in my navigation. As you recall, we've got different navigation for some of the touring pages. We have some dropdown elements here. Some sub-level navigation, and I want to include that navigation with this specific page, and all I have got to do is go to a page that's currently sharing that information, and we'll see on the cycling page, there's my shared navigation in my Web layer, and there's my shared buttons, the actual graphics.
So I'm going to start by selecting my tour nav layer, going to my Options, choosing Share Layer To Pages and then adding snowboard to my list of pages to share that layer. When I click OK, I come back to my design. If I click on snowboarding, there's my navigation. Just like that, all the graphics in the same place. Now I also want to share the interactivity. If I'm going to turn this into a clickable prototype, I want to make sure that the client can actually click on things. So I'm going to go to my cycling page again. Go up to my shared navigation, the sublayer inside of my Web layer, and choose to Share that Layer To Pages.
And again, I'll just add my snowboarding page and click OK and if I go back to snowboarding, you'll see that indeed that element has been added. So this is a real time saver I think from my perspective. You can have multiple people working on the same project, and as they're completing their side of the job, they can hand things off to you, and you can insert them into one completed prototype for export as an HTML clickable prototype or a PDF file, whatever your preferences maybe.
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.