I will switch back to the original view and we are just about ready to export our final set of files. Let me zoom out and we will do a final cleanup pass just to make sure all the settings are correct for our final export. Now one thing I like to do before I finish my export out is to make sure that I have got all my slices named and covered.

I can see one slice that is still just called slice, and once again for house keeping purposes, I like to clean those up and just make sure that I have got everything labeled. When I come back in to the file, I want to be able to find things very quickly and the layer names help out quite a bit in that regard. So let us just change that one.

When I selected in the layer menu, I can see that it is my top_nav slice up here so somehow that name did not get entered properly. Let us just fix that and we will call it top_nav again. I will hit Enter to confirm and we can see that name pops in and I just want to make sure I have my HTML slice is set for both the left content and the bottom navigation area as well.

Now you will notice I left two areas with no slices in them. That is primary so we could see what would happen in our final file, but I am also leaving them empty because we are really not going to have anything located in here except a background color. We will fix that up in our Dreamweaver files when we start working on the site later.

Now it looks like we are ready to go so I will finish things off by doing our final export. We will go up to file, we will choose export again and one last change I am going to make to my settings, instead of having all the image piled right into the workflow project files folder, I am going to use this option down here at the bottom. Put images into a sub-folder that way Fireworks will automatically create a new folder called images and place all of our graphics inside there. That is going to help keep our website clean and a lot easier to manage if we start sorting things now.

Alright we are ready. Let us click export and the last thing I want to do is just create one reference image of what a website should look like when it is completed. This can help in our assembly stage when we get into Dreamweaver in our later lessons. To make a single image off the page, all I need to do is go up to file, choose export just like before but this time I will export not HTML and images, but I will set it to images only and I will set it to none on slices.

Now you can see by the alert our slice objects will be ignored and we will get a single image as a result of our file. Now while we are here you can see the result of our last export. You can see that the HTM file is located right in our workflow project files folder and you can see the new images folder that has been created. I would like to place this tracing image right in the images folder with the rest of the elements so let us just double click in to there. You can see all of the images that we have created from our slices all ready for our website.

And I will just name this one “tracing reference”. We will see how we are going to use that in our next lesson. We will click export. In our next lesson we are going to move over to Dreamweaver and we are going to begin constructing our entire website.