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.
Now, before you upload a mockup for your client to view online or turn it into a PDF for them to view offline, it's always a good idea to give things a test run. And the Preview button in the Document Window will work in a pinch. But it's really best suited for optimization rather than previewing a functional HTML prototype. This is where Preview in browser comes into play. So we're going to go up to our File menu and choose Preview in browser, and we've got a couple of choices here. We've got Preview in Internet Explorer, or whatever your default browser happens to be. That will preview just the existing page.
What we want to do is preview everything in the design. So I'm going to choose Preview all Pages in Internet Explorer (iexplore.exe) and it takes a few seconds for Fireworks to generate all the temporary HTML pages. But in fairly short order, it does the job and then launches your default browser. So there's my first page. Let's just take a quick peek at some of the interactivity here. I'll mouse over my navigation button. You'll see I'm getting my rollover effects as I would expect to get, just like so. And if I click on Tours, I actually go to the Tours page, and there's all the main components for the Tours page.
I can also click back on Mission and go into the Mission page and read a bit about the company. Mouse over is working in every single page, but a lot of these pages have not yet been built out because they're not necessarily going to be structurally any different from the layout that you see here. However, what I would like to be able to do is get from the Tours page to one of the Tours and right now there's no interactivity there whatsoever. And this is the great thing about previewing. You can double-check the stuff before you actually handed off to somebody. So I'm going to hop back over to Fireworks, and I'm going to go into my tourMain page and specifically, I'm going to grab the Cycle California one because we have a page for that.
So what I'm going to do is just add a Hotspot. I got my Hotspot tool and draw it over my learn more button and once that's been created, I can go down to my Properties panel, and I can choose my cycling.htm page. And that's pretty good there. I want to be able to see that snowboard page. So I'm going to go and zoom in a bit here so it's easier to see. We have the subnavigation that we've got in place. So let's use one of the subnavigation elements as a link to the snowboard page. I think we'll do Tours by Activity and again, that's just a slice at the moment for rollover effects.
There's no interactivity, in terms of a URL, at the moment. So with that slice selected, I'm going to go down to my Link menu, and I'm going to choose snowboarding. Now, one thing I do want to point out while I'm in this list. You'll notice there's a whole bunch of links above a little dividing line and a whole bunch of links below. If you want your links to work, and we usually do, make sure you pick the links from the bottom part. Everything below the divider are the actual pages in your design. Everything above the divider is a history list of pages that have been accessed in the past. So I'm going to choose snowboarding, and just a quick thing here, gone through this a couple of times, but you recall that we have did some sharing of layers and sharing of interactivity to pages.
And just to show you the power of this, I'm going to go and choose my tourSpecific page, and you'll notice that it also has a hyperlink for snowboarding. When you think about it, when you're dealing with a lot of navigation, that sharing of layers and sharing of Web layers is a real time saver. All right. So we've gone ahead and added those in. I'm going to go ahead and do another preview here. File > Preview in browser and make sure I choose Preview all pages and again, in a short time, Fireworks generates my design.
Now what's interesting here is you might notice it launched the page that I was currently on. So if I want to, I can hop back to my Mission page and go to my Tours page, and you'll see if I go to Tours by Activity, you'll notice down at the bottom of the browser window, I see a path to my snowboarding page. There is my snowboarding page, great. And if I go back, again, to my Tours, I can go into my long list, locate my Cycle California one and again mouse over that learn more button, and you see I get the indication that this is a hyperlink.
I'll click and I go to my cycling page. Previewing your designs are a great idea. It gives you a chance to double check to make sure everything is working the way you expect it to work before it get sent off to the client for any kind of feedback.
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.