| Draw your design however you'd like. I used simple rectangle, circle,
and oval shapes to create my sample layout. (a) |
 |
| Once you've finished, select the slice tool 
from the toolbar. This tool will break your images up into separate pieces. |
| Begin slicing your image, creating boxes around each piece. Generally,
it's best to slice your top and bottom section first, and then the sides. I left
the white box blank because that area will be replaced with an iframe later. (b) |
 |
| This next two steps are not required, however recommended. Click on the
Object menu. Then click on any one of your slices. Uncheck "Auto-Name Slices"
and type below what you'd like to name the image. When you've finished, click
on another slice and repeat until all slices have been named. (c) |
  |
| Click on the Optimize menu. Click on any of your slices. If you'd like
to export your image in a different format than what is selected (usually GIF
is default) then change it. Sometimes JPG looks better with many colors or detailed
images. For this layout, I've selected GIF. Once you've selected your format,
click on another slice and change it's settings until all slices have been changed. |
| Now it's time to export your layout. Go to File > Export (or press
Ctrl+Shift+R). In the File name field, type in whatever you'd like to name the
HTML page. Make sure Save as type is set to HTML and Images. Also make sure the
HTML field reads: Export HTML File. Chose the folder you'd like to export the
images and HTML page to and select Save. (d) |
 |
| Your layout has now been exported. For my layout, that means I have one
html page named flower.htm and 4 images, that I've named top, left, right, and
bottom. |
| Now you will have to edit the exported HTML page in your HTML editor. |
| Part 2 - The Editing
Process |
