|
Alright, yet another layout tutorial! Whoo! So this one is a little different since there is no stable image slicer in GIMP. Before you start, make sure that you have the image mapper plugin. Mine came with GIMP 2.2, so it should be in your Filter > Web > Image map.
For this tutorial in fullscreen w/o the background, click here
Part I: Image Mapping
Anyways, the first thing you need for this tutorial is the layout designed. Handily enough, I already have one. Just make sure that you have an area for the box (iframe) and your links for your site done.
After that is all done, you need to go to the image mapper. Filter > Web > Image map.
A new window should pop up. You want to select the rectangle form the left hand side of the screen. ( ) And drag the selection over your iframe box. You have to left click when you have the entire thing selected. Another window will pop up, and just hit OK. You should now see that an "Area #1" is added to the right frame.
Now, depending on how you did your links, you can use either of the three selection modes from the left. The rectangle is for sqaures/rectangles, the circle for circles, and the weird shaped on is a polygon which allows you to select anything by connecting point to point. For me, all I have to use is the rectangle one for my links. I'll walk you through how to do one of those.
Like you did with the box. Take your selection tool, I'm using the rectangle one, and outline the link. This time, when the window pops up...Make sure the link type is "Website" and in the "url to activated" box, type in the page name you want to link to. My first link is "Adopt" so I'm linking to the "adopt.html" page. I'm also going to be using the iframe that I made in the first step (we'll finish later), so I need to make my target go to "main" which is the next box. Remember what you set it to, you'll need it later. Also, if you have a picture for a link instead, and want the user to be able to hover over the picture and see "Adopt" come up, then enter that in the Alt Text box. I'm not going to use it. After you completed that, click OK.
Now, complete the same steps for all of your links.
Now we are ready to save the coding and move onto the coding section.
Part II: Coding and Finishing
Once you are done with all the links and mapping out. You need to go to file > save as.
Name it "index.htm", and save it in the folder you want to. Save.
Now you can close the image mapper, but DON'T close out of the image yet. You also need to save your image. Select your image window, and go to file > save as. If you have alot of intricate colors, save as a .jpg, but if you don't, like mine, save it as a .gif.
Next, go to the index.htm page you saved, and open it in notepad. This is now the meat of your image, and if you open the page in your web browser, you should see that the image is now "mapped", meaning that you can hover over the links so that they will work. We need to now make the iframe. If you don't see the image there, in the <img src="gimp_layout.gif" width="500" height="300" border="0" usemap="#map" /> has the name of the image you used for your layout correct.
Look for the link that has "nohref="nohref" in the coding. This is the first area selection we made. This is your iframe. We are now going to have to use Div Layers to position the iframe. Scary thought, huh?
Add this code as the first line in your index.htm page:
<div style="top: 0px; left:0px; z-index: 0; position: absolute">
And add this: </div> after the </map>
You have now made the map, "layer one" of your layout. We need to now put the iframe on "layer two" or above it. Take the coding for your iframe, and cut (crtl + x) and paste it (crtl + v) above the first line again.
Now, take this iframe/div code and put it as the first line: (Again, I know!)
<div style="top: 0px; left:0px; z-index: 1; position: absolute">
<iframe src=main.html name=main width= height= frameborder=0 border=0></iframe>
</div>
Now, look at your iframe coding from the image mapper. Take the 1st number, and insert it into the div code for the "left pixels", and put the 2nd number as the "top pixels".
Example:
<div style="top: 46px; left:101px; z-index: 1; position: absolute">
<iframe src=main.html name=main width= height= frameborder=0 border=0></iframe>
</div>
<area shape="rect" coords="101,46,494,259" nohref="nohref" />
Then we need the width and height for the iframe. Take the 4th number and subtract the 2nd number. (259 - 46 = 213) This is the height, insert it into the iframe code.
And take the 3rd number and subtract the 1st. (494 - 101 = 393) This is the width, insert it into the iframe code.
Example:
<div style="top: 46px; left:101px; z-index: 1; position: absolute">
<iframe src=main.html name=main width=393 height=213 frameborder=0 border=0></iframe>
</div>
<area shape="rect" coords="101,46,494,259" nohref="nohref" />
Finally, cut the iframe coding from the image mapper. (crtl + x) Just in case it doesn't work, you can paste it back in and try again.
*sweatdrop* Well, there you have it. It should all be working right. It's a little complicated because I had to blend in some layout techniques that are more advanced. Hopefully it wasn't too bad. I'll continue on a ways to explain how to edit the layout more since some of you probably never use Div Layers.
Part III: Editing the HTML Layout
To make your layout even better, more than likely you want to make it a full working one. You'll probably want to add the HTML tags to your layout. So, add these above everything:
<html>
<head>
<title></title>
</head>
<body>
And add this at the end:
</body>
</html>
You can now add a background for the entire layout. Add this after the <body> tag: <body bgcolor=#8a82f6>
If you don't know the hex color code to match your layout, open the image back up in GIMP. Select the eye dropper and click on the background color. A new window will pop up. Look at the bottom right for the Hex: part. The following 6 numbers is the color for your background.
A word of caution. When you are switching the position of your layout, you have to use the Div layers. So, if you wanted to move it down by 50, you would need to add 50 to the 1st div layer (iframe one), and put 50 for the second one (image map). Same goes with moving it left. Just make sure you move them both equally..
Now for the background for the layout. If you have an image, you need to make the iframe transparent. If you have a color, just find the color using GIMP.
To make the iframe transparent add this: allowtransparency=true into the iframe code, like so:
<iframe src=main.html name=main width=393 height=213 frameborder=0 border=0 allowtransparency=true></iframe>
And add this: <body bgcolor=transparent> into your body pages.
Well, I think that just about explains it. Let me know if you run into any problems. You shouldn't though, since I created a layout along with the tutorial. ^^
|
