1. Page Formatting via OUTPUT SETTINGS
Click file=>Output Settings=>Background. Set the fo[You must be registered and logged in to see this image.]llowing:
BACKGROUND

• View document as image
  
• BG color=> other
  
• Set the BG color on the color palette that comes up to Hex #333399
  

[You must be registered and logged in to see this image.]Change the output settings catagory to each of the following and make sure the highlighted area is set as in the images below.
Slices

• Generate table
  
• Empty cells Gif, IMG W&H
  
• TD W&H = ALWAYS
  
• Spacer cells= automatic
  

[You must be registered and logged in to see this image.]Saving Files:
Put images in folder- images

[You must be registered and logged in to see this image.]HTML:
Include Zero Margins on body tag so the template sites in the upper left corner of the webpage without margins.




2. SLICING and OPTIMIZING
This template should be sliced to reflect the type of outputted image you want:

• Smallest kilobyte size
  
• least lossy
  
• Separate slices for areas you want mouse rollover effects to occur
  
• Isolation of the Photo image into a slice that can easily be changed for different pages.
  
• Cells produced with single colors that can be produced with a 1 by 1 pixel gif stretched or a background cell color change.
  

Guide Image for slicing- An overview image of how I sliced this template is provided here

• You will use your slice tool to slice the image.
  
• You will use your slice select tool to select slices to specify options and to resize.
  
• Use your magnifying glass to magnify your image so you can be more specific in your slices
  
• Use your Hand tool to move your image up and down right and left when it takes up a larger area then your viewing area.
  

1. Open the slice palette. The blanks are as follows:

• type= image or no image. Solid colors can have no image so the cell will take on the background color or the color of the cell.
  
• BG is the background color. You can set the background color for the cell if there is a transparent gif in the cell or if you are specifying if no image, the cell color will be the color that shows up in that space.
  
• The name is the name of the image when we save it, the extension of the image will be set on the optimize panel.
  
• the URL is a link if any that it will link to. In this case it will be the index page,
  
• The target is where you want the URL to show up when the link is clicked if the image is a link.
  

2. Slice the company logo from left border to just beyond the text.

• [You must be registered and logged in to see this image.]type = image
  
• bg = none (the main color matches the page background set in the output settings.
  
• name= logo
  
• url= index.html (the main index page.)
  
• Target =_top. This will load the page in the same window on top, so it may break out of frames if it was opened in a frameset.
  
• Optimize palette settings
  
  
  
  • gif
    
  • 16 colors
    
  • Lossey = 0
    
  </LI>
  

3. Slice the 4 stroke lines, two up in the top menu bar, and two in the bottom menu bar. Use the slice select tool to select each slice. Make sure they are just the 1 pixel height. Set each of these slices to the following slice settings.[You must be registered and logged in to see this image.]

• color = hex # CCCCFF
  
• Type = no image
  

4. Use the Slice tool to slice up each of the 6 menu items, going from the stoke slice on top to the stoke slice on the bottom, but not including. Use the slice select tool to make sure these slices are butted up against each other and meet in the middle. Make sure the 1st button has about the same about of blue on the left side as on the right, and that the home button goes all the way to the template border. type=image BG = none Name=Same as text in template, but without spaces or special characters, all lower case. URL= Page url associated with the image name. Make sure it ends in .html Target=_top Optimize palette settings gif 8 colors lossey = 0 </LI>

[You must be registered and logged in to see this image.]

5. Click on the left side of the menu bar between the top and bottom stroke.

• [You must be registered and logged in to see this image.]type= no image
  
• BG= color hex #666699
  

6. Slice up the copyright on the bottom like the menu, in that you have two slices in this bar, one is your copyright and you can name this slice copyright, no url etc. The other is just a color, so set the slice type to No image. and set the color to hex #666699 again.
7. There are solid bands of color that span from left to right, with under the menu bar stroke, and then above and below the copyright bar strokes. Slice these and set the Slice panel to show no image, but a BG color of NONE since we set the page as the same color background in the output settings.
8. Slice the left and right solid color areas, setting them to no image and NO BG color.
[You must be registered and logged in to see this image.]9. Slice out the Photo AREA. This will take a small section of the gold curve in the corners, which is ok. Set the image as the keyboard image as the only photo available. Set the following slice panel options:

• [You must be registered and logged in to see this image.]Type = image
  
• BG = none
  
• Name= keyboard
  
• URL = blank
  
• Optimize settings should include 16 million colors so it will be a jpg.
  
  
  
  • JPG
    
  • Quality = 30%
    
  </LI>
  

[You must be registered and logged in to see this image.]10. Slice the rectangular slice for the main white content area. It will be solid white and go from the top gold stoke to the bottom, but will not include the corner so it is totally white. Set the slice to no image and white bg.
11. The other images that are created by image ready must be named. Name them 1, 2, 3, 4, 5, etc. They have no links, or bg color, and they should be optimized at 4 colors gif.]