Adobe Photoshop

Creatimg Navigation Bars

In this unit, we create a navigation bar using ImageReady’s Image Map and Slicing features.

Tables and HTML Layout
In 3.x browsers or lower, advanced, pixel perfect layout capability is achieved by a combination of intricate tables and transparent GIF spacers.  If you want your image to appear 70 pixels from the top and 90 pixels from the left of the browser window you have to generate a table with multiple cells and place your image within one of the cells.  Because some browsers collapse empty cells, designers use 1x1 pixel transparent GIFs to fill empty cells by specifying various width and height attributes.  You can use ImageReady to build the layout for your web pages and use Slicing to generate an HTML Table.  In addition, you can apply separate optimization settings to each Slice (a slice becomes a cell in the generated Table.)  ImageReady automatically generates the HTML Table, saves the images with the optimization settings of your choice, generates JavaScript  if you’ve created Rollovers, and generates Image Map code if you’ve created an Image Map.  We’re going to generate a Navigation Bar , complete with Rollovers, by using ImageReady’s Slicing features and Image Map features.

Back to Index