iFrame Kullanımı (Floating Frame)

Daha öncelerde atlanan fakat DW MX sürümünden itibaren yer verilen iFrame kavramı bildiğimiz Framelerden biraz daha farklı bir frame türüdür.

Bu doküman toplam 1 sayfadan oluşmaktadır. Gösterilen 1/1 İlk sayfadasınızSon sayfadasınız

iFrame'i anlatmak için şöyle bir örnek verebiliriz. Sayfamızın içerisinde tıpkı bir katman (Layer) gibi istediğimiz bir alanda harici bir sayfayı dokümanımızın içine oturtma işlemidir.

iFrame eklemek için;

Öncelikle iFrame olarak çağıracağınız doküman önceden hazırlanmış ve kaydedilmiş olmalıdır.

Daha sonra içerisine iFrame eklemek istediğiniz dokümanı DW içerisinde açıp kod görünümüne geçip Insert panel altındaki HTML sekmesine seçiyoruz. Panelin sağ kısmına doğru Frames isimli düğmenin bir alt düğmesi olan Floating Frame isimli düğmeye tıklıyoruz. Sayfamıza <iframe></iframe> şeklinde bir kod eklenecektir. Aynı işlemi Insert / HTML / Frames menüsü ile de yapmak mümkün.

Insert panelden HTML sekmesi altında yer alan Frames düğmesinden sayfanıza iFrame ekleyebilirsiniz

Insert panelden HTML sekmesi altında yer alan Frames düğmesinden sayfanıza iFrame ekleyebilirsiniz

İşin bundan sonraki kısmını DW'ın Code hints'leri ile halledebiliriz. Şimdi kürsör ile <iframe> tagının içine giriyoruz ve tagın sonunda bir kez boşluğa basıyoruz ve code hints'ler listeleniyor.

Bu listeden SRC‘yi bulup ENTER'a basıyoruz ve SRC kısmına hedef iframe dosyasının adresini giriyoruz.

iFrame için ilgili ayarları Code hints'ler sayesinde zahmetsizce yapabilirsiniz

iFrame için ilgili ayarları Code hints'ler sayesinde zahmetsizce yapabilirsiniz

Ya da Browse diyerek dosyayı seçebiliriz.

Browse ile kaynak dosyayı seçebilirsiniz

Browse ile kaynak dosyayı seçebilirsiniz

Daha sonra sırasıyla

  • NAME="frame_adi"
  • MARGINWIDTH="0" (İçeriğin kenarlara olan yatay uzaklığı)
  • MARGINHEIGHT="0" (İçeriğin kenarlara olan dikey uzaklığı)
  • FRAMEBORDER="0" (Çerçeve kalınlığı)
  • SCROLLING="YES" (Kaydırma çubuğu)
  • STYLE="WIDTH: 200; HEIGHT: 225"

Gibi ek parametreleri de yollayabilirsiniz. Kodumuzun son hali şuna benziyor;

  1. <iframe style="width: 200px; height: 225px" name="frame_adi"
  2. marginWidth="0" marginHeight="0" src="iframe.htm" frameBorder="0"
  3. scrolling="yes"></iframe>
  4.  

Bu şekilde gerekli ayarları yaptıktan sonra iFrame'imiz kullanıma hazır. Sayfayı kaydedip deneyebilirsiniz.

DW içerisinde iFrameler ile çalışırken tasarım görünümünde iFrameleri aşağıdaki şekilde görürsünüz. Bu şekil iFrame için yer ve büyüklük bakımından bize fikir vermesi açısından oldukça kullanışlı bir özellik olarak karşımıza çıkıyor. Fakat daha önce de belirttiğimiz gibi ince ayarları ve parametreli kod görünümünden halletmemiz gerekiyor.

iFramelerin DW içerisinde görünüşü

iFramelerin DW içerisinde görünüşü

 

Bu işlem için bu kadar uğraşmak yerine piyasada ücretli veya ücretsiz bulabileceğiniz birçok eklenti ile de aynı işlemleri çok daha zahmetsiz bir şekilde yapmanız mümkün. Dreamweaver Sayfasi dosya arşivinde de bulabileceğiniz birçok eklenti işinizi görecektir.

Bu doküman toplam 1 sayfadan oluşmaktadır. Gösterilen 1/1 İlk sayfadasınızSon sayfadasınız

Ilgili makaleler

 

Yorumlar

1

Yorum 08 Aralık 2007 Cumartesi 03:38:20 | Yazan: Kartal23

çok güzel fakat bunu uyguladım. sağ rataftaki blok direk framenin alt hizasın da aşşağı doğru kaydı.. bir türlü siteyi bitiremiyorum yardım edebilecek varmı? cemilkaynak@hotmail.com

Toplam 1 adet yorum mevcut « - 1 - »

Yorum ekleyebilmek için öncelikle üye girişi yapmanız gerekmektedir

Son eklenenler

Bölüm 4 - Fancybox ile Resim Galerisi Oluşturma Bölüm 4 - Fancybox ile Resim Galerisi Oluşturma (72) - 31 Ağus 2010 Sal 01:06:40
Bölüm 3 - Resimleri Kategorilerine Göre Listeleme Bölüm 3 - Resimleri Kategorilerine Göre Listeleme (47) - 31 Ağus 2010 Sal 01:05:12
Bölüm 2 - Upload And Resize Image With Developer Toolbox Bölüm 2 - Upload And Resize Image With Developer ... (45) - 31 Ağus 2010 Sal 01:03:46
Bölüm 1 - Tablosuz Tasarım ( Div ) Bölüm 1 - Tablosuz Tasarım ( Div ) (114) - 31 Ağus 2010 Sal 01:02:06
Adobe Developer Toolbox CS4 ve Duyuru Sayfası Adobe Developer Toolbox CS4 ve Duyuru Sayfası (40) - 31 Ağus 2010 Sal 00:59:19

Yazan

Orhan

Ekleyen Orhan Veli Firik
  Orhan
Tarih Eklenme tarihi
  29 Kasım 2006 Çarşamba 23:19:34
Oy ver Puan ver
 
1 puan ver2 puan ver3 puan ver4 puan ver5 puan ver Ortalama: 5.00

Üye girişi

Kullanıcı e-mail
Parola

Üye ol Üye olmak istiyorum

Parolamı unuttum Şifremi hatırlamıyorum

Üyelik aktivasyon Üyelik aktivasyon

Eklentiler (extensions)

Sitemizden indirdiğiniz eklentileri nasıl yükleyeceğinizi ve kullanacağınızı bilmiyorsanız bu makaleden başlayabilirsiniz. Genel olarak Dreamweaver eklentileri üzerine kısa bir yazı buyrun...

 

eXTReMe Tracker

ana sayfa | makaleler | dosyalar | forum | kitaplar | linkler | reklam | iletişim | Prefabrik | oyun oyna | Borsa | canli imkb | mirc indir | Nakliyat ankara | ankara nakliyat | ankara web tasarım| imkb canli |

dw.gen.tr © 2010 Tüm hakları saklıdır ®

Valid HTML 4.01 Strict Valid CSS!
Macromedia Inc MacromediaTURK Atlantik Bilgisayar