Optimize each individual
area to its best setting – jpeg or gif.
Entire table HTML is
produced, including spacers as needed to maintain structure
of table.
Predictable result – should look the same as the image
in Image editor (!)
Useful for top headers and/or links areas.
Steps in creating an HTML file of a Sliced Image:
Build the entire page visual in image editor such as Photoshop
or Fireworks.
Use the slicing tool to ‘draw’ rectangles to differentiate
areas.
Set optimization
for each slice as needed
Save the entire HTML file and images.
Import the
table HTML into your web page and make edits / add text
etc.
The FIREWORKS
interface:
The AnnaGrapics home page image ready for
slicing
With the slices applied, including right hand
slices set for HTML to be added
Each slice can be optimized individually by
selecting and setting Gif or JPEG levels. Split view allows comparison
between optimized and original image.
Resulting HTML page when
opened in Dreamweaver
The whole image is recreated within
an HTML table which is created using "0" settings
for cellspacing
& cellpadding.
Images
can
also
be
used as a CELL background to allow some content to be added
to the cell. However, that content cannot be bigger than the
cell or the entire table will stretch, and the cells will start
to separate!
Both Macromedia Fireworks and Adobe Photoshop
(full version) allow image slicing and will 'write' the complete
table HTML code. This code can then be imported into other web
pages.
See the Links page
for on-line tutorial sites for tables and table slicing.
