Produced by KelbyOne

Using IFrames in Adobe Dreamweaver

SHARE
, / 3902 45

Follow along with this tutorial and learn how to create an IFrame on your website using Dreamweaver.

45 Comments

  • Brandon says:

    Wow, Window/Results/Reference seems to be the key to the Dreamweaver Universe. Thanks for one of those small tips that makes a world of difference!

  • Thomas Daugherty says:

    Thanks! This really came in handy for my new website!

    Z33STUDIOS.COM

  • Clint_M says:

    Great tutorial, many thanks!

    I was wondering if the iFrame has the same SEO problems that traditional frames have?

    Cheers

  • Josh says:

    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?

  • Scott Rudy says:

    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?

  • Paul Garcia says:

    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.

  • Paul Garcia says:

    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

  • Colin Bent says:

    Awesome tutorial! Fantastic!

  • sheri hulan says:

    Wow that is the coolest feature I have seen in a long time, thanks for the tip!

  • Balynskee says:

    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.

  • achazia lewis says:

    thanks just what i needed for my new website

  • saphira says:

    HI I am a self tought and this was very very useful
    THANKS

  • Sebastian says:

    excellent guide ! thanks !

  • Connie says:

    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.

  • Chuck says:

    every comment seems to be added as a new RSS post.. please make it atop

  • tyler says:

    geoff blake is an excellent teacher.

  • Bill Travers says:

    Thank you. Tremendously helpful.

  • Chantell says:

    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!!!

  • Vicky says:

    You freakin’ legend! You have just saved my proj! xxxxxxx

  • felice says:

    i cannot right click copy from the reference panel.
    Copy is being disabled !!! HELP !!!

  • Kristian says:

    THANK YOU!!! You just made my day.

  • Casu says:

    Thank you!
    Nice tutorial its really useful!
    I love it!

  • Jim says:

    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.

  • Courtney says:

    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.

  • skiwebgirl says:

    Fantastic! Thank you! I’ve been searching for this all morning. You have made my day.

  • Kate says:

    Thank you so much!!!!! your tutorial made complete sense to me.
    Thank you for explaining the little things !!!!
    Thank you!

  • Brent Thomsen says:

    Great tutorial! Only wish I would’ve found this a couple of days ago, it would’ve saved me hours of frustration and grief!

  • p says:

    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***

  • Michael says:

    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.

  • SEOP.com says:

    Great tutorial. But I agree, SEO doesn’t really advise using iFrames because of some limitations. But this certainly gave some alternative. Thanks.

  • chaz says:

    hi…I am learning dreamweaver and have often been confused by the graphic interface vs. using line coding.
    I’m no expert…but omg this helped me better than any other tutorial yet. Next steps…how to make frames nice and printer-friendly (cringe). And..oh..Ajax? lots to learn here!

  • Doebert Cubillas says:

    That is best tutorial I have ever seen… great presentation, great side comments.. not only did I learn about iframes., I learn about preferences.. thank you…

  • hans says:

    Brilliant tuturial, Thank you.

  • Nakia says:

    wonderful tutorial!!

  • Alicante says:

    Thanks Geoff, those are some great tips! I am going to try it for myself right after finishing this comment 🙂

  • rooly says:

    Thank you SO SO SO much for this. You really saved my ass. I know my comment is waaay after the fact, but I just wanted to say thanks for this.

  • Karls says:

    Couldn’t you you just style the iFrame with CSS?

  • Ivan says:

    Cab this video be downloaded from this site with a video down loader for my own personal use or is it not allowed?

  • max says:

    I thought this might be the answer to my problem, I’ve made a web gallery in bridge and needed a back button.
    I followed your great iFrame tutorial hoping it would be the solution but when I browsed it non of the links in the web gallery worked. Could you help me with this as well? Thanks

  • Kelly says:

    That’s all fine and dandy… but does it work in IE? I have code that I can’t for the life of me get to work in IE, it works in FF and Safari just fine… but IE makes me want to smash my head in with a sharp brick. There is even some IE mention in the Reference section… still not working.

  • great tutorial. with all the changes that Adobe is making to their software it is nice to see guys like you putting great info to keep my stuff fresh and clean and still keep my same software and web design. Thanks so much.
    jnetti

  • kbcasttv says:

    great tutorial indeed. I followed your great iFrame tutorial hoping it would be the solution.

    for flash tv iframe

    kbcast.tv