Index > Design Tutorials > Iframe Tutorial

Part one | Parttwo
Yay! You've made it onto part two of learning how to make frame layouts! Aren't you excited? I know I am :DDDD >>;; Okay! Now that you have your images saved, it's time to code it! Now, open your folder that you saved all those little images in on windows explorer. If you are using windows XP I can help you, otherwise I can't at this time. Go to Start>My Computer/then the exact folder where you saved those images(Not the images folder that Photoshop made, one up)

Now see the icon named Toejam.html(Your name will be different: It will be whatever you named it in Photoshop after the splicing ex: yourname.html), well you are going to be needing that little icon there! You need to open it in notepad, or the html editor of your choice :D Mine is Notepad xD To do that, right click the icon and choose open with then Notepad, or editor of choice ;D

When you open it you can see how nice ImageReady was to you! It pretty much coded your layout XDD Personally, now I like to rename the file to index.htm at this point. I would reccomend it if you are using this as a downloadable layout. Now, you can't have a pa-ritty full layout with CSS!! So, use you own CSS coding from another layout and use it for this one. I reccomend naming it CSS.htm, or style.css xD I usually use CSS.htm, donno why. So, put the CSS.htm(I am going to use this name from now on so there is no confusion) in the folder that you have the images folder in. Now you can add other files too that you might want for your layout, like I am going to add a link effect file. Also, make a file named main.htm for later use :D Below is my progress.

Note: Make sure that when you are doing all this naming that the CaPiTaLs are lower case. You can make them upper and lower case but that might lead to some confusion. Sometimes for certain file managers the capitals must be exact, if they aren't the pages and images would not link properly. Bob.htm and bob.htm would be two completely different pages. So make sure that they are all right. That's why I suggest that you use only lowercases, makes it easier :D (if you used a capital in the name when you saved in photoshop, make sure that you use the capital when you link to the image is essential!)

Now that we have that settled we can move on xDD If you haven't already, open the index.htm file (if you renamed it, if not open the name.html file from PS). After that, open your index.htm file(as I will refer to it from now on) with a browser. Do the same steps that you did before to open it in notepad but choose the browser instead this time. It should open up :D

It may not be pretty yet, but we will get to adding the CSS later to make it pretty! :D Okay! So let's edit the code! I usually like my layouts centered, so I am going to put [center] and center it! When PS codes a layout for you it adds this code: [body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"] I would suggest removing it :D You don't have to though XD But! I do suggest leaving the [leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"] part if you want the layout to touch the very top and bottom of the page. This I usually use for tables though, not frames which this tutorial is for XD

Okay, the layout is centered and you've gotten rid of that code, it is time to add the iframe. The basic coding for a frame is [iframe name="frame" iframe frameborder="0" border=0 width=widthheight=height src="main.htm" allowtransparency="true"] [/iframe] See the main.htm, that will be the page that is seen in the iframe when it first loads, which is why I had you make it earlier! :D If you want the iframe to have transparent scrollbars insert the following code after the "true" style="filter: chroma(color=#FF8FF8)";

Now, you're most likely asking Where the heck do I put it?! Don't worry! I will tell you! The problem is it is different for every layout. To find out where to put it specifically on your layout you need to view your index.htm file in a browser. In the area that you know you wanted your text to go you must right click and choose properties. A window will pop up. This window is your friend! It will tell you the name of the slice that is where you want the text under the Address(url) section. If you can't see the name of the image because the URL is too long click the text and hold it down while moving you mouse down to make it scroll. It should look like this...

NoteAt this time make sure that you copy the name that is there to be sure that you make no mistakes in the capitalization or names! This is what I always do so that it does not lead to more problems later :DD Nome no likey problems xD

Okay! Go back to your index.htm file and find exactly where that elusive /images/Toejam_07.gif file is in the coding! (It will be different to you depending on your name and slices, so don't panic because you don't have a toejam file...hehe XD) make sure that you keep the /images part if you don't it won't link to it. Also, make sure you do not keep the / before the images, only the one after :D You can do it!

So, once I've found /images/Toejam_07.gif in my coding I hilight [img src="images/Toejam_07.gif" width="416" height="215" alt=""] and delete it. YAY DESTROY DESTROY o___o I mean...-Cough- back to the tutorial. After I delete it I replace the code for the iframe EXACTLY where that coding is. If you think it would be easier you can hilight the image code then directly paste the iframe code so that you don't mess up...but I like destroying :D Make sure that you size the frame so that it is the EXACT size of the image it is replacing. In this instance Toejam_07.gif is 416x215 (to find this go to the same place where you found the URL but under dimensions :D) Edit main.htm and add some the text that you want to be seen ^^ Here is what it should look like!

Yup! Ugly, but right now that doesn't matter :DD Sooo, now to do what's left. I am going to do the image maps :DD Do like you did in order to find Toejam_07.gif to find the image where the imagemaps are located.

NoteIf you want a page from a link to go into the frame that you make the target frame ( [a href="" " target="frame"]) In the code for the iframe I named it frame. If you want the link to send the page to the iframe you need to have the target be its name(in this came frame is its name). If you have more than one iframe, make sure the names are different and you target to the right one :D

After image mapping we should really make the layout presentable with CSS. Edit your CSS.htm file and change the background color. Changing the scrollbar color might be nice too :D

If you're worried about the iframe uglyness, don't be! Nome will tell you how to make that pretty too! So, make a file named CSS2.htm and link it to main.htm the same way you did with the first CSS file to index.htm :D Remember that Toejam_07 image that we removed to make room for the iframe? Well we are going to put that as the background in the CSS2 file :DD But, to make it not repeat or be lost you have to add background-repeat: no-repeat; background-attachment:fixed; to the css in the body section :DD then it will look nice and pretty! Yay prettyness!
OR You can make the Toejam_07 the background of that [td] by using background="Toejam_07.gif". Use this if you are using transparent scollbars

Annnnd!! Thank goodness we're done!!! Do a happy dance! Here is the final result! ^^-

I hope the tutorial helped you and you learned to make frame layouts XDD This tutorial is dedicated to Megz ^^ <3333 Megz! Remember, if you have any questions at all Email me!! I am here to help :D I love helping! Thanks for visiting Koodori!

Sitemap | Copyright 2008