Importing pages

show more Importing pages provides you with in-depth training on Web. Taught by Jim Babbage as part of the Fireworks CS5 Essential Training show less
please wait ...

Importing pages

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.

Importing pages
Video duration: 2m 47s 8h 51m Beginner


Importing pages provides you with in-depth training on Web. Taught by Jim Babbage as part of the Fireworks CS5 Essential Training

please wait ...