Creating a Layout with Fireworks MX 2004 and Dreamweaver MX 2004
Table of Contents
Creating the Ultraweaver Design
- Creating the Ultraweaver Design
- Creating the Shape Outline
- Adding Content Areas
- Fills and Effects - Adding Shadow and Color Fill
- Fills and Effects - Adding the Glass Effects
Slicing and Exporting Fireworks HTML
Importing and Editing Fireworks HTML in Dreamweaver
Slicing
In the beginning of the previous section, Creating the Ultraweaver Design, I talked about some things that you want to keep in mind when designing layouts in Fireworks. One of those items was being flexible enough in your design that you are not creating huge graphic files or a design that limits you on how much content you can place within it.
To give you an example, if you were to export the Ultraweaver design as one graphic file and import it into a web page, you would run into several problems: the graphic would be fairly large in file size and you would also have to include your content in the graphic itself. This would bring up even more issues, such as accessibility, content management, search engine ranking, and so forth.
With slicing, you can eliminate all the problems mentioned above as long as you stay flexible in your design. To better help understand what I mean, let's look at the layout created in the previous section with slices in place, as shown in Figure 38 below.
Figure 38. Slices for the completed interface
I placed key slices so that I do not limit myself when it comes time to export the Fireworks HTML. The Navbar, Main Content, and Right Column slices are where I will place my content when it comes time to edit the layout in Dreamweaver. I will use the left and right tiles so that as I add content, the interface expands vertically.
Note: I have presliced the interface.png. In real life it may take several attempts at slicing a layout. The only way to get the slicing right is by planning ahead the best you can and then exporting the Fireworks HTML for editing. I generally edit the HTML in Dreamweaver so that the HTML will allow me to add content and tile predefined images (left, middle, and right tiled slices in Figure 38 above). Sometimes I may need to go back and reslice, export, and edit them in Dreamweaver until the slicing helps me edit the HTML and maintain my layout.
Let's skip the wordy explanations and actually see what is happening. Instead of using the layout, you created in the previous section, you will use the file I have supplied in the source downloads named interface.png. This file is already sliced.
