Using IFrames in Adobe Dreamweaver
Follow along with this tutorial and learn how to create an IFrame on your website using Dreamweaver.
This video requires Adobe Flash Player.
Visitor Comments »
Comment by Brandon | November 12, 2008 @ 6:37 pm
Thanks! This really came in handy for my new website!
Z33STUDIOS.COM
Comment by Thomas Daugherty | November 12, 2008 @ 11:13 pm
Great tutorial, many thanks!
I was wondering if the iFrame has the same SEO problems that traditional frames have?
Cheers
Comment by Clint_M | November 13, 2008 @ 8:10 am
this seems like a great feature, but I have used “frames” before. and the one problem I noticed if you search for something in google or any any other search engine and it relates to something specific in your webpage the browser will only show the specific frame that the content is in and the user is left no way to navigate. will these “iframes” produce the same result?
Comment by Josh | November 13, 2008 @ 12:41 pm
[...] Click on this link to get to the tutorial [...]
Pingback by Red Shoots One Over The Bow | Iframe in Dreamweaver | Layers TV Winner | Layers Magazine | November 13, 2008 @ 2:56 pm
Why is my custom code being stripped?
JavaScript, i-frames, style tags and other custom code are removed to prevent their use by potential Web intruders. Quote: Google Sites
Does this mean that i-frames won’t work on Google? Does this mean i-frames are a potential risk?
Comment by Scott Rudy | November 13, 2008 @ 9:41 pm
Hi there,
Since IFRAMES are a cool way to an page into another one, its has some SEO issues, so an possible alternative is to use CSS property:
“overflow:auto; ” ina tag and you can have the same scroll effect inside your page, without SEO problems. Of course if the content to show is in different html page this one won’t work.
You can define a div like this:…….. long content …….
and the box will show the content in 200px height in a scrolling window.
Comment by Paul Garcia | November 26, 2008 @ 3:32 pm
Sorry this post system dont allow me to write CODE but google overflow:auto for CSS and you will see what I am talking about
Comment by Paul Garcia | November 26, 2008 @ 3:33 pm
Awesome tutorial! Fantastic!
Comment by Colin Bent | November 26, 2008 @ 7:53 pm
Wow that is the coolest feature I have seen in a long time, thanks for the tip!
Comment by sheri hulan | November 27, 2008 @ 6:28 pm
I am getting in on the Adobe bandwagon for developing web late. However, having Layers Magazine and quality tutorials like this one makes it seem just in time to be developing web pages using the Adobe suite of applications.
Comment by Balynskee | December 16, 2008 @ 9:16 am
thanks just what i needed for my new website
Comment by achazia lewis | December 18, 2008 @ 3:38 pm
HI I am a self tought and this was very very useful
THANKS
Comment by saphira | January 2, 2009 @ 6:31 am
excellent guide ! thanks !
Comment by Sebastian | January 23, 2009 @ 1:34 pm
Good tutorial but it’s too darn small. Cannot really follow cause I can’t really see it. Would be nice if it could open full screen or at least in a larger format.
Comment by Connie | February 16, 2009 @ 4:03 pm
every comment seems to be added as a new RSS post.. please make it atop
Comment by Chuck | February 19, 2009 @ 2:54 pm
geoff blake is an excellent teacher.
Comment by tyler | February 23, 2009 @ 1:16 pm
Thank you. Tremendously helpful.
Comment by Bill Travers | March 9, 2009 @ 2:04 pm
Thanks so much for this tutorial!! Never knew what iframes were as i’m new to web design, but these are defo what i’m gonna include on my website!!!
Comment by Chantell | March 22, 2009 @ 3:28 pm
You freakin’ legend! You have just saved my proj! xxxxxxx
Comment by Vicky | April 11, 2009 @ 12:11 pm
i cannot right click copy from the reference panel.
Copy is being disabled !!! HELP !!!
Comment by felice | May 8, 2009 @ 2:08 am
THANK YOU!!! You just made my day.
Comment by Kristian | June 9, 2009 @ 1:54 pm
Thank you!
Nice tutorial its really useful!
I love it!
Comment by Casu | June 25, 2009 @ 10:49 pm
[...] a little post about a tutorial which might be of interest………..it’s on the Layers Magazine website but by Tenton Books. Interesting links all [...]
Pingback by Dreamweaver Tutorial « Photo Nomads Blog | July 4, 2009 @ 2:47 pm
Using Win XP & DW, in code view, right click where you want iframe, choose “insert tag…”. In the tag chooser window, click HTML in the left pane and iframe in the right pane and then the insert button bottom right. The Tag Editor window will appear and the most common parameters for iframes can be added. Much faster than copying/pasting.
Comment by Jim | July 10, 2009 @ 9:49 am
You are my hero! Needed to embed a camtasia video into a webpage for a grad school project. I found a tutorial on iframes, but it wasn’t for dreamweaver. I had just about given up! Thanks! great tutorial.
Comment by Courtney | July 16, 2009 @ 4:06 am
Fantastic! Thank you! I’ve been searching for this all morning. You have made my day.
Comment by skiwebgirl | August 13, 2009 @ 3:08 pm
Thank you so much!!!!! your tutorial made complete sense to me.
Thank you for explaining the little things !!!!
Thank you!
Comment by Kate | August 29, 2009 @ 3:04 am
Great tutorial! Only wish I would’ve found this a couple of days ago, it would’ve saved me hours of frustration and grief!
Comment by Brent Thomsen | September 16, 2009 @ 9:30 pm
How to work with iframes in design view:
1) select iframe
2) in the TAG INSPECTOR panel, click attributes tab
3) you can now define the paramaters it lists (src, scrolling, style, class and other useful parameters)this means YOU CAN WORK WITH IFRAMES IN DREAMWEAVER DESIGN VIEW,
***YOU DO NOT HAVE TO BE IN CODE VIEW TO WORK WITH IFRAMES IN DREAMWEAVER***
Comment by p | October 5, 2009 @ 3:27 am
Is it possible to insert an Iframe within a slice? without distorting the page that I created in photoshop and sliced and saved for web and devices? I havent tried this yet, but was just wondering if it’s possible.
Comment by Michael | November 12, 2009 @ 6:42 pm
I should have know tis earlier. Thanx a lot!
Comment by joost | November 29, 2009 @ 7:55 am
Great class!!
You have saved my life with the Iframe!Really usefull and easy.Thanks!
Comment by Laura | December 19, 2009 @ 4:32 pm
Having recently become a Dreamweaver convert from the dreaded MS Frontpage this has been most helpful! Frontpage tend to refer to these as Inline Frames and I was wondering why I couldn’t find these in Dw! Many thanks, very helpful!
Comment by James Fenwick-Smith | December 30, 2009 @ 9:12 am
Jim,
Will the iFrame work if I want to place a news feed in it ? How would I code that ? When I attempt to place http:// or www. it is looking for it on my hard drive and giving me an error.Any suggestions ?
Comment by stephen brust | January 28, 2010 @ 3:05 am
How do you get rid of the scroll bar and make the iframe autofit the page it is displaying?
Comment by jerri | February 6, 2010 @ 10:07 pm
Thank you SO much. Excellent tutorial. You’re a lifesaver!
Comment by leetwid | March 2, 2010 @ 10:36 pm
I’m having a very hard time with this. New to Dreamweaver and old to Front Page…with Front Page I was able to put the content of my source url (which is located on a computer behind me) so that it showed the word game. Now when I try to do it in Dreamweaver (this is the only page I am working on to try go get just this part going) all I am seeing is the scoring table, the game is not showing at all. How on earth is Dreamweaver considered WYSIWYG when you cannot alter the spot on the src url? It was so easy in Front Page! I’m trying to learn Dreamweaver, but so little reference is given to inline frames!
Anyone with proper info on this, I certainly would appreciate it. I can give you the site as it is now, with Front Page, just click on “the game” so you can see how it shows up now. I’m trying to get Dreamweaver to do the same.
It is at http://www.indymcduff.com, then click on “the game”…this is where I need the advice.
Comment by IndyMcDuff | March 11, 2010 @ 10:46 am
Leave us a comment

- Dragging an Object Between Documents
- TV Scanline Effect
- Trick to the Glossy Effect
- 3D Text
- Changing Type on a Path





Photoshop
Illustrator
Indesign
Dreamweaver
Fireworks
Premiere
Flash
After Effects
Lightroom
Acrobat














