Adobe Fireworks CS3 Tutorials
Exporting / Setting HTML Export Options
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Exporting / Setting HTML Export Options)
In this movie, let me review in more detail how to set up your HTML export options. Now any document that has slices, behaviors, symbols, hot spots, image maps, pop-up menus, and other kinds of interactive components involving slices and behaviors will require Fireworks to export an HTML file with all of the code to assemble these images and then make them work in a browser. HTML code is generated by Fireworks when you export copy or update your HTML. Now you don't need to understand HTML in order to use it in Fireworks. After it's generated there's no need to change it or work with it in any way, as long as you don't rename or move files. That's going to be very important. Don't rename or move the HTML files in other ancillary files that Fireworks will create when you export. Fireworks generates rather pure HTML that can be read by most Web browsers and HTML editors. There are a variety of ways to export Fireworks HTML. You can choose File, Export, and then here in the HTML drop-down, make sure that you choose Export HTML File. This will create a stand-alone HTML file. You can also copy the HTML to the clipboard and then open up a Text Editor, or an HTML Editor, and paste in all of that HTML content. You can also export each page in a Fireworks file to a separate HTML file. I demonstrated that technique earlier in this tutorial. Now the Copy to Clipboard option copies the code to the clipboard in Fireworks and then you can paste that code directly into an existing HTML document. If you choose the Export to HTML File option you can always open this HTML file in an Editor and then manually copy sections of the code from the file and paste that code into another HTML document. Now, you can also export HTML as cascading style sheet layers, or CSS layers, and XHTML. Now, to define how Fireworks exports HTML you can use this HTML drop-down. You can also use the HTML setup dialog box. The settings can then be document-specific or used as your default settings for all HTML that Fireworks exports. You can access this HTML setup dialog box here in the Export dialog by clicking on the options button adjacent to the HTML drop-down. I'll be reviewing all of these options shortly. But getting back to my HTML drop-down, in additional to creating an HTML file, you can also copy the HTML to the clipboard, this is one of two ways to copy HTML to a clipboard in Fireworks. The other option is to choose the Edit, Copy HTML Code, from the Main menu. I'll be reviewing these options also shortly, but getting back to the File Export dialog, this option will copy Fireworks HTML to the clipboard and generate the associated image files in the location that you specify. You'll later paste this HTML into a document in your preferred HTML editor. Although copying to the clipboard is a fast way to get Fireworks HTML into other applications, it's not probably the best in every situation. Copying HTML to the clipboard has a variety of disadvantages. If I go to the Help, Adobe Fireworks Help area, and if we do a search on copying HTML to the clipboard, there is a list of disadvantages here. One, you don't have the option to save images into a sub-folder. This is quite a disadvantage because anytime you're slicing documents in Fireworks you're creating a lot of little sliced images that can really clutter up your workspace. Also, any links or paths used in Fireworks pop-up menus will map to your hard drive, which is definitely a problem. If you use an HTML editor other than Dreamweaver or Microsoft Front Page, the JavaScript code associated with buttons, behaviors, and rollover images are copied, but may not function correctly. So in these cases it's probably better to go ahead and create a stand-alone HTML file. Let me now review the HTML setup dialog box. This is a pretty important one. It's a little bit hidden here in this Export dialog but find it by clicking on the Options adjacent to the HTML drop-down menu. Notice that this dialog has three tabs. First tab, the General tab, allows you to set your HTML style. If you're going to be working with Dreamweaver, choose Dreamweaver HTML. Likewise Front Page. If you don't have an editor, choose Generic HTML, also, set your extension, I actually like to do htm lower case with no "L" but you can also choose other extensions here. You'll want to make sure that you include comments. This will explain the functions of the various code and where to start copying and pasting code into your layout. I recommend this option if your document contains any interactive elements, including buttons, behaviors, or rollover images. The HTML comments will help you determine which parts of the code to copy and paste. Also, I recommend checking lower case file names. This will ensure that no upper case letters are used in naming any of the files that Fireworks creates. I never like to use uppercase letters because I forget which ones are upper case and lower case. Also, you can check Use CSS for Pop-up Menus, check this if you want to use CSS, or Cascading Style Sheets, rather than JavaScript for your pop-up menu code. This will make it easier to understand and maintain the code. Also, you'll be able to index the menus as well as update the links within the code using Dreamweaver. In general, I try to use CSS rather than JavaScript whenever I can. It just makes it easier to update things. And lastly, I recommend that you check Write CSS to an External File. That CSS will then be much easier to maintain and update. If you leave that unchecked, the CSS will be written in with all the other HTML code that Fireworks generates, making it harder to find and maintain. Now the next tab, the Table tab, includes additional options here, so for more details on these settings, let me now move on to the next movie.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
