We have the basic layout of our home page.  In addition to the graphics, we want to have a short welcome message to the right of the image, and copyright text in the bottom right corner.  However, we want to use regular text rather than graphics for both the message and the copyright.  By using Slices  to generate a Table to maintain our layout and by modifying Auto-Slices we can successfully create the entire Home Page in ImageReady.

Use the Slice Tool  to create Slices  around the Navigation Bar , the Logo, and the Shrine image.  We also want two slices in the blank space below the logo for our message and copyright notice.  Use the Slice Select Tool  to resize the Slices you create.  Try to make them as close as possible to the edges of the image data so that when we optimize the Slices maximum optimization occurs.

Create Slices  around the Navigation Bar ,
 Logo, and shrinegate image.  Also create two Text Slices.

Select each Slice you’ve just created and use the Slice Palette to rename the Slices  “navbar”, “logo”, “photo”, “welcome” and “copyright”  Select the “welcome”.Slice and examine the Slice Palette.  By default, Slices and Auto-Slices are filled with pixel information or transparent GIF spacers (unless you specified otherwise under HTML Options .)  If Image appears beside Type it indicates that the Slice will use pixel information.  To input text into the Slice select No Image from the Type drop-down menu.  The Slice Palette changes to include a Text input box.  Input:

<font face="Arial" color="C92626" size="2"> Welcome to the Travel Japan Website.  We're sure you'll find our site both informative and educational.  You just might find a "must take" vacation in the process.</font>

You can input both HTML tags and text in the Text input box.

Select the “copyright” Slice.  Select No Image from the Type drop-down menu and input <font face="Arial" color="C92626" size="1"> Copyright: Travel Japan 2001</font>

Optimize Slices
Select each of the “navbar”, “logo”, and “photo” slices and use the Optimize Palette  to optimize the images.  Use JPEG Compression  for the photo and GIF Compression, Adaptive, for the Logo and Navigation Bar .  Select File/Save to save the image in native Photoshop  format.  Select File/Save Optimized  As to save the HTML file and the optimized images.  Remember to specify a target directory for your images under Output settings.

Launch a web browser and open “homepage.html.”  The layout we created in ImageReady remains intact and our text is visible and

Our page viewed in Internet Explorer 5.0.  Note the “contact”
alt tag that has been added to the contact button.

Congratulations!  You’ve successfully used ImageReady to create a web page, including an advanced Table, the use of spacer GIFs, optimized JPEGs and GIFs, and text.  Of course, you are responsible for creating relevant links and managing the structure of the site.