Diced Image Layouts
Page 2
Now I believe you have to have Paint Shop Pro 7 or higher. If you are using an earlier version, you can do pretty much the same thing with a program called DICER. Just put it into a search engine and you should find it easy enough :)
Ok save your image as whatever name you are giving this layout. For me it is something like summer04.gif. Then close it and reopen it ....
Now go to FILE >> EXPORT >> Image Slicer .... A dialog box should open. The first slices I generally apply are the vertical slices.. ( Indicated by the red and green lines )
Then I go to each area and add the horizontal lines.. After adding the horizontal lines we should have clear boxes where we want our content to go... Like below you will see the iframe area highlighted in green..
And here the side menu area ...
And then I want to add some links at the top too so I made sure to get a rectangle area for that cut out as well ..
Now make sure to go into Format and choose whatever format you like, and then into Optimization because PSPs default will result in a very blotchy miscolored layout.. Optimize until it looks right to you :) Then make sure APPLY TO ENTIRE IMAGE is checked..
Click SAVE SETTINGS ( just in case you mess up editing the code.. this will make your life much much easier.. ) Save it to the same folder you are saving the rest of your layout in..
Now click Save As and name the page your layout is going on :)
Click close.. and then open the html page PSP created...
This is what mine looks like ...
My image on a plain white html page ;)
Now PSP's slicing tool has a little glitch. When it creates the spacer image ( blank.gif ) it does not save as a transparent image, which it should. So you will have a white line down the right side of your layout. You have to open blank.gif and resave it as a transparent image ( you can do this by floodfilling it with whatever color is in the foreground colors box, then going to COLORS >> SET PALETTE TRANSPARENCY >> Set the transparency to the foreground color, proof to make sure it worked, then save it. Now you should not have a white strip down the side of your layout...
Now you have to go in and edit the code for the links and content iframe to show up. Open the folder that your diced images went into.. Look through the files until you find the large rectangle where your iframe would go. Remember the file name and find it in the html code of the page..
You will notice that PSP uses tables.. This is the ideal way to create a layout. Div layers are another method you can use. But that would mean rewriting the code PSP has so kindly already provided and I don't know about you guys but I have four kids, I am not taking on any additional time consuming tasks that are already done for me when I dont have to lol..
So you found the file name in your code.. What you need to do now is edit the TD tag in front of the image..
After where it lists the height of the TD, you need to add background="yourfilename.gif" and delete the image tag.. So it would look similar to this ...
Then insert your Iframe tag between the td tags.. make your iframe tag width and height the same as the td width and height..
Repeat all of these steps with the link area... Except you don't have to use an iframe there if you don't want to. For the purpose of this tutorial, I am going to use an iframe there ;)
A quick run down.. Right click on the html page where your links would be and get the filename of that image... Find that filename and adjust the td to make that image the background.. The delete the image tag and add your iframe code where the image tag was. Make your iframe the same width and height as the TD..
Now create the pages that the iframes are linking to.. For instance, my links page is links.html and my content page is inside.html :)
Now you need to set the background of each of these pages to the image you set their respective TD backgrounds to.. So for me that would be links.html with fig_sum04_2x2.gif as the background, and inside.html with fig_sum04_4x1.gif as background. Also set bgproperties on both of these pages to fixed.. So here is an example of the code for both pages
If you want your layout centered, just center the table of the layout :)
Hope this was helpful !!! ~Faery Blessings~
~Link Hearts Enchanted~
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
