This is the way I do some of my layout. If you use a huge image for the background, I recommend you slice it for fast loading with a 56K Modem. In this tutorial, you can also do image map and position I-frame too.
Demo
n/a.
Direction
1. Open your image in Photoshop. I used one of my free layouts as an example.
2. Click Slice Tool (
).
3. Now you see number 01 at the top left of your image with dashed border around.
4. Left click on the top left, hold down, and drag to make a square. Let go your mouse.
5. Repeat step 4, but drag from the corner of square 1.
6. Repeat until you got something like mine.
7. Now, suppose I want to make I-frame in the red square area.
8. I'll slice image around the I-frame border by dragging from right corner of the sliced image number 3.
9. You can finish here and skip to step 10. But I'll go on slicing each button on the left too.
10. Now, time for image map (image not shown). Suppose I'll add a
to the second button (sliced image number 14). Right click on the sliced image number 17. A pop-up dialog will appear and ask you to fill in the URL and the link target. When you finish, click OK.
11. You are almost done. Remember that the sliced image number 7 (if you skip step 9) will be positioned as I-frame.
12. Go to File > Save for Web....
13. In the Settings area, set output file to be JPEG, Maximum with Quality 100 > Save.
14. Now go to the directory that you just saved your file. You'll see 1 HTML file and 1 images folder. Inside the HTML file is the code you need to put on your page (it's like 1 big background image that is sliced to many pieces and placed in a table). Inside the images folder is all your sliced images. You must upload all of them to an images directory.
15. Open your HTML file in NotePad. Remember your I-frame is on the sliced image number 7. Find it.
16. Move image URL to
tag and make it a background. For example (ignore ' * ' );
17. Replace IFRAME_CODE with the iframe code below (remove ' * ' ).
18. Change the image width and height in step 16 and 17 to correspond with your image.
19. Change "YOUR PAGE URL". File > Save. If you have more than one I-frame, just mimic the code.
20. Open your HTML file with a browser, you should see your big layout show up quickly with the main page on I-frame box.
21. You are done. Slicing layout, image mapping and positioning I-frame. :-)
22. Remember when making a link, you must target to your I-frame name.