iWeb Tip #2 – iFrames in iWeb (Websites within Websites)
This page lets you load another webpage (whether made in iWeb or not) into your site. Very helpful if you have a page made somewhere else and want to put it directly onto your webpage. Some things you might want to iFrame on your page are:
- iCal published calendars
- Aperture made photo galleries
- Pages made in 3rd party web software such as RapidWeaver, DreamWeaver, Sandvox, etc.
- HTML Flash Galleries with XML files
- and many more
Here’s how to do it:
Full iFrame:
1-Copy the code below by doing a triple click and then pressing (command + C)
<IFRAME SRC = "https://www.iwebunlimited.com" WIDTH="600px" HEIGHT="425px" FRAMEBORDER="0" --if "0" no border, otherwise "1" with border MARGINWIDTH ="0px" MARGINHEIGHT="0px" SCROLLING="auto" --"no" no scrolling bar, "yes" show always, "auto" showed when need > Your browser does not support IFRAME </IFRAME>
2-Paste into an HTML Snippet in iWeb
3-Replace the items highlighted in red in the code. First the website that you want to display in your page, second the width and height of the site. If your not sure the width and height, just enter some values and keep changing it till your page fits. You also have some option to have a frameborder, margin, and scrolling. For scroll bars you can put in yes or auto (auto will auto detect if you page needs scroll bars or not).
Partial iFrames:
There are times when you only want to iFrame portions of a site. This code will help you do that.
1- Copy the code below into an HTML Snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""https://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"><!--#container{width:340px;height:290px;border:0px solid #000;overflow:hidden;margin:auto;}#container iframe {width:670px;height:1200px;margin-left:10px;margin-top:-560px;border:0 solid;}--></style></head><body><div id="container"><iframe src="https://www.iwebunlimited.com"; scrolling="no"></iframe></div></body></html>
2- Then you need to modify the items in red to get the portion of the site you want to iFrame in iWeb. What is going on here, is we have the container size, then we have the iFrame size, the we have where on the page the container is located using the left and top margins.
How I’d recommend going about this is to first put in the URL of the site your iFraming in the last item highlighted in red, then hit apply in the snippet. Now we just need to modify the sizing to show the portion of the iFrame you want to show.
3-Let’s size your iFrame dimension. So to size your iFrame dimensions in correctly, first put in the width and height that the actual page your iFraming in is. A quick way to do this is to visit your actual page your iFraming in and press Command + Shift + 4, you’ll then get a cross hair instead of your arrow for your mouse. This is ordinarily how we take screenshots of items on our screen, but we are using it just to get the dimensions of our site. You see when we drag our mouse in this mode (in Snow Leopard & Leopard OS only) you’ll see dimensions in pixels of how large the area is. Once you have your width and height dimensions by dragging your mouse in this mode hit the escape key on your keyboard before letting go of your mouse button, that way you won’t actually take a screenshot and we can just take the info that it gave us in the width and height pixels to enter into our iFrame snippet here.
4- Then adjust the container size. Adjust the container width and height to be the size that you want to show of the iFramed site.
5-Then use the margin-left and margin-top to move the container around the iFramed page so that the container is located in the spot you want.
You should now have an iFrame that only shows the portion of a site that you want to be shown. Yay! Don’t you love little tricks like this in iWeb! Hope that helped.
If this tip helped you, consider donating to the iWebUnlimited cause by clicking below;
[iWeb-Code=’donation’]
Another question (sorry), when viewing my site from an iPhone, the iFrames where the linked page extends horizontally beyond the frame appear ok (though i’m yet to figure out how scrolling/gliding works), but those that extend vertically appear in a very messy way. If you are able… visit “La Galerie” as a horizontal example which appears ok, and in the Public Events, Hult GCC 2010 event, looking at “Teams” or “All Photos”, the page does not appear well at all! Any simple advice? Or a case of more advanced coding specifically for mobile devices?
Just found your site via Google. Wow…what a great resource!
Just have one question about using the iFrame within iWeb. I would like the new page to open in a new window and have not been able to find that code. Is this possible?
I will watch for your response…thanks.
Yes, it is possible. You just need to make sure the links that are on the page that is being iFramed have “_top” or “_blank” in the link. If it’s not your page, then there is nothing you can really do about it, but if you are framing in your own page, just be sure to add that code to your links. So the full link would look like this:
Link TextIf you unfamiliar with code and it’s just another iWeb page that you are iFraming in, you could just check the box that says open in new window, but if you want it to stay on the same window, open up that iWeb published page with an HTML editor and find your links (the ones with the href and add the “target=”_top” to your link like I showed above.
Hope that helps.
Hi there i like to frist thank You for all ur help here it is great to find something like this not too many people share know how as u did. thx again
I like to ask u is it posible to create payment buttons and option in Iweb ?
Hey what about if you want the frame to show a page you created (but not published) on iWeb? I’d like to design a site where it stays on one page but clicking on a link will display a page under the navigation. Can this be done and how?
Hello, Thank you for this great website!!!!
why would it not support youtube?
like, it shows on the iweb, but after publishing, you go to the browser and there’s nothing, and it happens only with youtube… weird hey?
Hello! Thanks for these tips. I am curious- about iframes within iframes.
I have set up different iframes and in one particular one, I need another iframe within it. I have set that part up already but I need to have buttons or text to the side that can navigate the frames that can be seen.
In case I am not making any sense…
Page A has iframeB set within it. I need sub iframeC (in iframeB; pageA) to show iframesD, E, F with buttons or navigation control.
THANKS SO MUCH.
Hello,
Great web site!! I’m just getting more into iWeb.
As you suggested the iframe was a great way to display your ical calendar. I say was because it seems Apple have removed the ability to publish ical to the web and in the process removed on of the features I loved and used a lot. I’m wondering if you have a good work around for this unfortunate decision.
Thanks..
I have iWeb 3.0.2 on an iMac G5 running OS 10.5. I cannot get a basic iFrame link in iWeb to work. I paste the text (below) in the HTML snippet and it just displays the “Your browser does not support IFRAME” text. I see how it should work but it does not.
Your browser does not support IFRAME
Thanks
a friend made me a contact form but it wouldn’t work on iweb so he put it on another page for me, but when I published iweb it deleted the page.
He made me a new one but it wasn’t formatted nicely. but in iweb I was able to make it look like one of my pages thanks to you.
and it works PERFECTLY!!! I am soooo happy. thank you thankyou!
Love esther
I have followed each of these steps, and when I publish the files, all works just fine locally. When I place the files onto my site, and open the link to the html, its not showing what I show locally when I open the html via Google Chrome. PLEASE HELP!
Thanks!
I have the same problem. Everything appears to be working in iWeb, but when I publish to my server the iframe appears to have no content. I’m trying to embed a Vanilla forum.
How to you make your this comment box?
no Qs, just a big thank you!
Is it possible to send the iframe behind other layers in my iweb page?
This would be a huge help if possible. thanks!
I made a flash menu for my Iweb. I use two different codes to try and put it in. Firth the code you offer to place flash inside Iweb directly and the second one was the Iframe code. In both cases I am able to place the SWF flash menu inside Iweb and it seems to work. I export the website locally but place all my SWF in the server to get a real time preview in Iweb. I go to my navigator the SWF loads and the animation reacts to my clicks but it wont take me to the link i set up in flash for the SWF generated. HELP what am i doing wrong?
[…] iWeb Tip #2 – iFrames in iWeb En ik ben wel tevreden met het uiteindelijke resultaat. Het moeilijkste is de layout in die van de website te laten passen. Het is misschien niet ideaal qua layout maar de extra mogelijkheden die ik nu heb waren toch een te groot voordeel om het niet te doen. Share this:TwitterFacebookVind ik leuk:LikeWees de eerste om post te waarderen. Dit bericht is geplaatst in Algemeen door janajakubowski. Bookmark de permalink […]
I have a Vimeo account and I’m wanting to have several different video thumbnails, but when you click on them, they all load and play in 1 larger video box like this:
http://www.heartlandbowhunter.com/media/season-four/
How can I make this happen?
Thanks,
Brett
Is there a way to load another page into the frame with links. I would like to have a mainpage with links to other pages that would load into the frame on the mainpage.
Thanks
Mark
How did you make the arrow in the corner that if you press it goes down and how did you change the favicon
Hi all.
Anyone have some experience with fade in single pictures in iWeb? Please share with me. And also with iFrame on black coloured background pages? all the time showing a white box while loading in. So any chance to fade in a black iFrame, and single photos? Please visit the sample page below, I wish all this content to fade in.
http://www.robertvoller.com/fade/photo_fade_in.html
Many thanks. Rob
hi there i’m trying to put one of the pages that i have created in the iframe and as i have been just publishing the pages to my local drive i thought in source i just have to put the pagename.html as they are in the same folder but it didn’t work can anyone help me please thank you
Awesome!
Initially I had the same problem with only the code showing.
I downloaded “Text Wrangler” (really cool html editor) as suggested and saved as a .html file.
The only thing I think should have been mentioned in this video is that you will need to make a duplicate file with a different name, for use on multiple blog posts etc.
So if you have a post called : Purple Dogs, you should save it as Purpledogs.html in your folder
Post: Purple Dogs Save As: purpledogs.html
Post: Blue Cherry Save As: bluecherry.html
and so on.
You can edit posts from your site or your dashboard in Disqus (which I’m using)
Works like a charm!