| Now that your design is complete and exported, you are ready to edit it
manually. Open your HTML editor (I am using
Macromedia Dreamweaver )
and open the HTML file that was created. It should be in the same location where
you exported your layout. |
| Hopefully, when you open the layout, it should appear almost as you created
it. (a) Some layouts require more changes and are trickier to edit than others;
it all depends on how many slices you have, how everything fits in your layout,
and how complicated the design is. |
 (a) |
| You will see that any part of your layout that was not "sliced"
is filled with a spacer.gif image that is the proper width and height of the blank
space. There is also a row of spacer images at the top of the table and one column
on the right of spacer images. Sometimes if you delete the spacer rows and columns,
the layout will still look aligned. It is generally best to keep these images
in place. The spacer image will make sure that your layout will appear correctly
in almost all browsers (not just the one you are using). |
| For the layout I've created, I would like to replace the big white spot
in the middle with an iframe. If you are adding an iframe to your layout, click
on the spacer image to see it's width and height. The width and height should
appear in the Selection Properties menu. If you don't see that menu, click on
Modify > Selection Properties to open that menu. |
| Write down or remember the width and height of the spacer image. You will
need them for the dimensions of your iframe. (b) |
 (b) |
| Get your HTML code for your iframe ready. The code for a basic iframe
is:
<iframe name="frame" width="267" height="269"
src="note.htm" frameborder="0"></iframe> |
| The only 4 things that should be changed with the above code is the name
(of the iframe), width, height, and src (URL of the page that will load in the
iframe). My page is named note.htm but yours will probably have a different name. |
| Click on the spacer image you are going to replace with the iframe. Hit
the Delete key. Your cursor should still be in the table cell where you iframe
belongs. Now go to Edit > Paste HTML (or hit Ctrl+Shift+V). The iframe has
now replaced the blank spot. Once you've created your subpage that will load in
the iframe, you can preview your layout to make sure that everything looks ok. |
| Another thing that you may want to add to your layout are the links. I've
decided that I would like the links to be on top of my left graphic (the flower).
The easiest way to do this is delete the image and make the image the background
for that cell. |
| Click on the image. In the Selection Properties menu, copy the Src (the
name/location of the image). The text I've copied is: FlowerB.gif. (c) Now, click
on the image and hit delete. Your cursor should still be in the cell where the
image used to be. In the Selection Properties menu, paste the text in the Bg (background)
field. (d) Your image should now reappear as the background image of that cell.
 (c)
 (d) |
| Now add your links inside of that cell. Don't forget to target your links
to the iframe (my iframe name is frame). |
| There are many other changes that you can make to your layout. For example,
you can change the background color, add links below your layout, place banners
above your layout, etc. If for some reason your layout does not export anything
like you'd like it to look, it's easier to create your layout from scratch than
to modify the file that Fireworks created for you. Your best bet working from
scratch is to create a table with a bunch of columns and rows. It takes some practice
to figure out how many rows and columns your layout will need, but you'll get
the hang of it. It's sort of like a puzzle that you have to piece back together. |
| Open your layout in your browser to see how it looks. Once you've edited
everything and you like how it looks, you're done. (e) |
 (e) |
