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.
Okay. the mockup is complete. It's been previewed and tested, and now it's time to generate an entire clickthru prototype. So you can upload it for the client to comment on it, and hopefully even approve. Remember, you're still in the Design stage, so if the client has valid concerns about layout or color, it'll be a snap to update the PNG file and export a revised mockup, no coding required. So let's have a look at the process here. In our multi-page document, we've got six different pages in this design and what we want to do is export this out as a whole series of HTML pages. Now I want to stress that this is a prototype exercise only.
I'm not building my entire Web site in this manner. This is really just another step in the approval process. And the final HTML that we'll be generated from this export is not what I'd be using for my final production site. So I'm going to go to File and choose Export and inside my Chapter 9 folder, I'm going to create a new folder, and I'm going to call it clickthru, and open that up. And now in my Options area, I just want to check on a few things. I want to Export HTML and Images. What this means is that Fireworks is going to generate an HTML table-based layout with all my interactivity, my hotspots, my slices, my rollover effects, all of that stuff is going to be generated at the same time.
It's a very rigid layout, and it's not the kind of thing you would want to start experimenting with for a final Web design. But for prototyping, it's just so easy to do that it's a great option. The other thing to keep in mind too is it because we were just generating the prototype at this point, we don't even need to worry about optimizing all of the graphics on the page. As long as we have a general format that works, we don't have to slice up everything at this time because really the slicing is only there to handle the interactivity and to handle things like rollover effects. After we've gotten some more feedback from the client, we'll be taking a look at the Web page and making sure that all the elements are set up to be sliced properly for final Web page creation inside of Dreamweaver.
So we're going to Export an HTML File. We're going to Export Slices. We're going to import it, or we won't to see our rollover effects. And we want to make sure that we're exporting All the Pages. That's a really important step. And you'll also see a couple of other options down in here, Include areas without slices. Yes. We want to do that. If you keep in mind when we were to working with this document, we've only sliced up little bits of it that are really for interactive elements. If we don't include the areas without slices, our page is going to look awfully bare, because everything that isn't sliced will be totally ignored in the export.
I also want to make sure that I'm putting my images in a subfolder. There's going to be a lot of them because of all the small slices that are going to be generated for this table-based prototype. So keeping them in a folder on their own is a good idea and while it isn't selected right now, I just want to point out, if you do have inactivity, rollover effects and so on, make sure that Current state only is not selected, really important. Now we do have options for exporting, and we can certainly go and take a quick peek at those. A great deal of this information is really more focused on the CSS-based export.
For example, things like Document Properties, Background Image, the option to Repeat and scrolling, Page alignment, those are all CSS-based options for the CSS export. They'll have no impact at all on your table-based export, which also, by the way, means that when you export this design out, it'll export out left-aligned in the browser window. So you'll need to do a little bit of tweaking inside of Dreamweaver if you want it to appear to be a centered layout. We've also got control over the Table itself. And again, because this is just prototype, I'm not even really worried about what these settings are. I want it to look accurate.
I want it to be a faithful rendition of the design, and then I'll be working with Dreamweaver and CSS to actually build out the final design. So I'm just going to click OK, and I'm going to click Save and depending on the complexity of your file, how many pages there are, how many slices there are, the export process can take a few seconds, or it may take a couple of minutes. We're pretty much done here. So I'm going to go over to my folders, and I'm going to go and look inside of my folder, up a level. There's my clickthru folder. Notice all my pages have been created based on the page names. This is, again, a cool thing about the way this works.
Every single page in my design had a name, and that's what was used as the actual HTML page. The other page that was exported as well was the master page. Now it's not going to have any effect on anything. So it's file that we could easily delete and not worry about. Now we're going to look in the images folder. This is probably the scary part in some ways. There are going to be a lot of files in here. And you can see quite a range of files have been created. Notice how all these little bits and pieces have been sliced up to be used for our final design.
Now again, this is only for a prototype. So I really I am not worried about this vast number of tiny images. It's not something I'll be using in the long run. In fact, a great deal of things, for example, my main navigation, won't end up being images at all. I'll turn that into HTML text and style it with CSS. But let's go back up to our main folder here, and let's take a look at how well things got assembled for our clickable prototype. There's our first page. Looking pretty good overall. That's the entire design. Move your mouse over the individual elements.
You can see that we get our interaction happening. I'll click on Tours. We go to our Tours page, and we can see there's the list of Tours. If I move my mouse over Cycle California, I can click on that and go to the Cycling page. I can go back to my Tours. Overall, it's working out quite nicely. It's fast and easy to do and so long as you use it for the right thing, you won't have any trouble.
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.