tutorial - flexible page
Page 4
At this point your page will probably not have a coloured surround
with a white content area. Open the Page Properties panel and set
the page background to #BCE6FE, then set the nested content table
background to #FFFFFF. While you have this panel open, enter 0
in the 4 page margin boxes, or, if you are using a style sheet,
set only the Margin Width and Margin Height for Netscape 4. Now
to insert the graphics.
Insert the top graphic into the left cell on the first table,
and set the cell width to 100%. Insert the side graphic into the
left cell of the second table and set the cell width to 90px. Into
this same cell add the left side background graphic.
In the right cell of this table add the right side background
graphic and because this cell does not have any content we need
to insert a transparent gif to keep it open the width we want,
and to make it display in Netscape 4. Insert the shim (transparent)
gif and set the width of the gif and cell to 18px.
In the third (bottom) table insert into the left cell the bottom
left corner graphic, set the cell width to 126 (or the width of
the graphic you have made). Add the background graphic to the center
cell and insert a transparent gif so that the cell will appear
in Netscape 4. Set the gif to a height of 18px . Set the width
of this cell to 100%. In the right cell of this table insert the
corner graphic and set the td width to 18px.
Two more graphics to go - the top table background and the top
right corner.
For the top background I used part of the existing graphic.
From the original sliced PNG, optimize the top slice as a PNG32
and export to your working folder. Open this graphic and save again
as a new file. Crop the end 50px as shown.
Increase the canvas size to 100px wide with the image on the right
side
Clone, then Modify - Transform - Flip Horizontal. Move the clone
to the left side of the canvas. We are using the 2 mirror graphics
to make one graphic with matching left and right sides to create
a horizontally tiling seamless graphic.
This image will be used as the cell background in the top table.
Next we need to make the top right corner graphic.
For this we need to save the above graphic as a new file, then
crop the right side 18px off. Draw a small rectangle over the bottom
white area and the black line. Next draw a black line from the
bottom left corner up about 10px to give you a graphic that looks
like this. You will have to make the canvas colour to match the
page background of #BCE6FE
Insert this graphic into the top table, right cell, and set the
cell width to 18px. The previous graphic is used as the left cell
background.
See the finished effect on the next page.
<---- Back | Next
---->
Page 1 | Page
2 | Page 3 | Page
4 | Page 5 | PSP
1 | PSP 2
No tables 1 | No
tables 2 | No tables 3 | No
tables 4 | No tables 5
|
