Main top graphic - Mt Ruapehu

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.

Example top graphic preparing for top background graphic.

Increase the canvas size to 100px wide with the image on the right side

Example 1 top background graphic.

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.

Example 2 top background 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

Example top right corner graphic.

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

Home | Photos | Photo Gallery | My Blog | Personal | Tutorials | Contact

Copyright © Denis Wilford 2001-2014.

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License.