Learn How To Set Up the HTML File for Export in Fireworks
Tags:adobe creative suite 2,adobe dreamweaver,adobe fireworks,adobe flash 8 professional,adobe illustrator,adobe photoshop,adobe web bundle,cascading style sheets,cmyk,html,jpeg,live,mac,macromedia studio 8,microsoft windows,rgb,total training
Grab video code:
I am going to just go up to ‘File’ then choose ‘Export’. Now, before we export this time, let us take a quick look at the ‘Options’, so we can se how we can control how Fireworks is going to write our HTML file.
I will just click on ‘Options’ over here, and you will see we get a few different selections that we are going to run through and see what kind of changes we can make in our HTML file. The first one is the HTML style.
Notice we can write a page targeted towards any type of environment we would like to. Also, you will notice that in addition to standard HTML, we have the option of being able to write extended HTML. I would recommend that as most browsers are moving into the XHTML format.
This is a very small change in the HTML code that is written but it will ensure that your code is compatible to all future browsers as well as the ones that have worked up in the past. I am going to leave that at Dreamweaver XHTML. You will notice, we can also choose the extension.
Now, quite honestly, it really does not matter whether you use HTM or HTML or capital or lower case letters. Your files will all be the same. Now, I am going to leave ours on HTM but I am going to make sure as we go forward in Dreamweaver that we just choose a consistent file format extension name. It just makes things a little bit easier for you.
There is an option to include HTML comments and if you are coder, what this will mean is it will include comments inside the HTML file it writes to mark off certain locations. If you are planning on hand inserting code yourself, you may just want to leave this out.
We also got some options for CSS that we will be using later. In the table specifications, it gives us spacing options and this is where you can choose that one pixel transparent spacing that we saw earlier in the top row and the right hand column.
I actually recommend leaving that set. It will make your job a lot easier and making sure that your table lines up. If you choose one of the other two options, it will make it much simpler table but it will also mean you have to manually go and adjust it any time any changes occur.
We got some ‘Cell Color’ options which just set the background of the page. I will be doing that in Dreamweaver later, so I will just leave that blank.
In the document specific settings, this is where you can choose how the automatic names will be generated, this whole set of hold down tabs up here allows you to choose from lots of different naming options, so that when it auto names your slices, it will generate things exactly the way you want.
My personal preference is to name the slices as we did, just because I get names that are much more easy to understand. So, I am going to leave all these defaults at reset values. I will click ‘OK’ and we will export our file once again.
Now, it should write over the existing HTML file and the GIF files and we will switch right on over to Dreamweaver and see how our changes look.
Once again, Dreamweaver is going to reload to show our new changes instead of the old files and we can see all of our new slices that have been inserted just exactly as we would like and we can see what the HTML slices look like.
We got a blank cell in a table to set just the right size and our placeholder content in the HTML setting has been inserted already for us.