Make all these designs using the techniques taught in "Web Page In A Day!" training CD. The first design for Road Runner Insurance is the one you'll build from start to finish. For more details go to The "Web Page In A Day!" order page.

   

Slice, Optimize and Export

1. Open your navigation graphic file.

Note
Be sure your canvas color is set to the same as the one it will be used on for the Web.

2. Select the Slice tool and draw a slice over the top left corner. Be sure you get the entire curve.

3. Draw another thin slice for the top bar and the side bar. Make sure you get all of the shadow.

4. Select the large corner slice and click the Preview tab.

5. Open the Optimize panel and use these settings.

You are using the GIF format because the image has a lot of flat color. JPEG is best for photos, GIF is best for flat colors. You don't need any transparency for this image. If you did need transparency then GIF wouldn't be the best option because of the drop shadow.

6. In the Property inspector, highlight the default slice name and rename it something useful.

7. Select the top slice and change the optimization to 16 colors and give the slice a name.

8. Repeat for the last slice.

9. Shift+select all three slices.

10. Right-click (Control-click) on the slice and select "Export Selected Slice".

Navigate to the folder you want to export your images into. It should be a folder within your root folder for the site you are building. Don't worry about the name of the file, it won't affect the slice names you gave the slices. Notice that the Selected Slices Only option is checked.

11. Click on Save. I opened the folder again so you could see the exported images. Notice they are all there with the specific names I gave them.

12. Save your file.

You are now ready to use these three image to make a stretchy or fluid table in Dreamweaver. Go to this tutorial to continue.

If you'd like to write the email is:Joyce@JoyceJEvans.com