Subtitles of the Movie

Continuing from the previous movie, techniques and skills for preparing your hotspots and slices for export, notice you also have an Options Button right here. This is where you can specify how Fireworks will automatically name unnamed slices. You will find these settings in the Document ÐSpecific Tab. Here are your default slice file names, starting with the document underscore and then you can either use letters, numbers, periods and spaces, hyphens and so on. You also have options for naming your state names here. Remember that for each state, Fireworks will export a separate graphic image so that you can name them based on the state name or number, by rollover or abbreviations here, O-D and O-D. That stands for over, over and down and so on with underscores and so on. So I recommend, this is a little bit tricky and confusing. I'd recommend experimenting with these document-specific slice names and state names. Place all of these in a sub-folder and have a look at the names and see if they make sense to you. The idea here is you want to make sure that you can identify these various slices and states based on their names in your Images Sub-Folder. Here in the HTML Setup Dialog you also have another tab here labeled Table. In review, remember that slicing defines how the HTML table structure appears when a Fireworks document is exported for use on the web. When you export a sliced Fireworks document to HTML, you document will be reassembled using an HTML table. Each sliced element from the Fireworks document resides in a table cell and then once exported, a Fireworks slice translates to a table cell in HTML. So you can specify how Fireworks tables are reconstructed in the browser here. Among other options, you can choose whether to use spaces or nested tables when exporting to HTML. Those options are here; Spacers, Nested Tables, Single Table, No Spacers and so on. Again, I recommend that you experiment with these settings, although I generally find the default settings seem to work pretty well. Once you've chosen your responses there or your options, click OK and then go ahead and save the document. Double check that you're saving it to the right location. You have a good file name and then click on Save and then Fireworks goes ahead and creates all of those extra slices, converts them to tables and table cells as well as the states. In this case I've already exported once and so Fireworks is asking me since I already have some files that already exist, do you want me to replace them? I say yes. That'll keep your Images Folder tidy as well if you overwrite older versions of those slices. Now, immediately after publishing the file, visit the folder where you exported the files to and make sure that everything is there. There's my hotspot rollover HTML file. All my images are here in the Images Folder. Look how many of them there are there. I have some other pages that I published earlier, Page 1 and 2 and 3 and all of their images are also organized here in this sub-folder. And then go ahead and double click on the HTML File or go to your browser and open the file in the browser to make sure that it exported OK. In this case here is the file with my Products Menu working and my Services Sub-Menu also working. So that will then conclude this section of the tutorial covering hotspots and slices and behaviors. In this section of the tutorial we learned how to create image maps, how to work with slices, how to add simple interactivity to slices, how to add interactivity with behaviors. We've learned about the swap image behavior, the set nav bar image behavior and the set pop-up menu behaviors. Also you've learned how to use hotspots on top of slices and then how to prepare slices for export. That'll take us to the next section of the tutorial about button symbols where you'll learn how to use button symbols and create them, how to use the Button Editor, all about nine-slice scaling and creating navigation bars and much, much more.