HTML

30 Kasım 2007

HTML çerçeveleri (Frames)

Çerçevelerle, birden çok WEB sayfasını aynı tarayıcı penceresinde aynı anda görüntüleyebilirsiniz.

Çerçeveler (Frames)

Çerçevelerle, birden çok WEB sayfasını aynı tarayıcı penceresinde aynı anda görüntüleyebilirsiniz. Görüntülenen her HTML bir çerçeve olur ve her biri de diğerinden bağımsızdır.

Çerçeve kullanımının yarasız olduğu konular şöyledir:
  • WEB geliştiren daha çok HTML sayfasıyla uğraşmak zorunda kalır
  • Tüm sayfayı yazdırmak çok zordur

Çerçeve-kurma (Frameset) Biçimi

  • <frameset> etketi sayfayı çerçevelere nasıl bölüneceğini tanımlar
  • Her çerçeve-kurma işlemi satırlar ve kolonlar tanımlar
  • Satır/Kolon değerleri görüntü alanının ekranda ne kadar yer kaplayacağını belirtir.

Çerçeve (Frame) Biçimi

  • <frame> biçimi her çerçeveye ne tür HTML sayfası yerleştirileceğini belirtir.
Aşağıdaki örnekte iki kolonlu bir "framset" biçimi vardır. İlk kolon tarayıcı eninin %25 kadarını kapsar. İkinci kolonsa %75 oranındadır. "frame_a.htm" adlı HTML dosyası ilk kolona, "frame_b.htm" ise ikinci kolona yerleşir: 
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
Not: frameset kolon boyu değeri pixel türünden de olabilir (cols="200,500"), ve kolonlardan biri kalan alanı kullanmak üzere tanımlanabilir (cols="25%,*").

Temel Notlar - Kullanışlı ipuçları

Eğer bir çerçevenin sınırları varsa, kullanıcı sınırları çekiştirerek çerçevenin değerini değiştirebilir. Bunu önlemek için noresize="noresize" niteliği <frame> biçiminde yer alır.

<noframes> biçimi çerçeveleri desteklemeyen tarayıcılar için kullanılır.
 
<pre>
<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">

<noframes>
<body>Your browser does not handle frames!</body>
</noframes>

</frameset>

</html>

Önemli: <body></body> biçimleri <frameset></frameset> biçimleriyle birlikte kullanılabilir! Ancak çerçeve desteklemeyen tarayıcılar için <noframe> kullanılırsa ve içinde yazı da varsa bu tanımın <body> ile </body> arasında olmalıdır.

karışık çerçeve-kurma (Mixed frameset)

Bu örnek çerçeve-kurma işleminin üç belgeyle nasıl yapıldığını anlatmak ve satırlarla kolonlar arasına nasıl karıştırılacağını göreceğiz.
 
<html>

<frameset rows="50%,50%">

<frame src="frame_a.htm">

<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>

</frameset>

</html>

Çerçeve-kurma (Frameset) noresize="noresize" niteliğiyle

Bu örnekte noresize niteliğini gösterilmektedir. Çerçeveler değiştirilebilecek biçimde değildir. Sınırlara fareyi götürseniz de sınırları yerinden oynatmak olanaksızdır.
 
<html>

<frameset rows="50%,50%">

<frame noresize="noresize" src="frame_a.htm">

<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>

</frameset>

</html>

Gezgin (Navigation) çerçevesi (frame)

Bu örnek gezgin çerçevesinin nasıl yapılacağını anlatır. Gezgin çerçevelerinde bir dizi bağ vardır ve bağlardaki HTML adreslerinin amacı (target) bu çerçevelerdir.
 
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>

<html>

<frameset cols="120,*">

<frame src="tryhtml_contents.htm">
<frame src="frame_a.htm" 
name="showframe">

</frameset>

</html>
İkinci çerçeve bağlanan belgeyi gösterir.

İçsel çerçeve (Inline frame)

Bu örnek içsel çerçevenin nasıl yapıldığını gösterir (bir HTML sayfası içinde çerçeve tanımı olması).
 
<html>
<body>

<iframe src="default.asp"></iframe>

<p>Bazı eski tarayıcılar iframes desteklemez.</p>
<p>Eğer desteklenmiyorsa, iframes görünmez.</p>

</body>
</html>

Bir çerçeve içinde beliritlen bölüme gitme

Bu örnek iki çerçeveyi tanımlar. Bir çerçevede bir dosyadaki bölümü belirten kaynak vardır. Belirtilen bölüm "link.htm" dosyasında <a name="C10"> olarak tanımlanmıştır.
 
<html>

<frameset cols="20%,80%">

 <frame src="frame_a.htm">
 <frame src="link.htm#C10">

</frameset>

</html>

Gezgin çerçeveyle seçilen bölüme sıçrama

Bu örnekte iki çerçeve tanımlanmıştır. Soldaki gezgin çerçeve (content.htm), bir dizi bağlantıları içerir. Bu bağların amaç alanı ikinci çerçevedeir (link.htm). İkinci çerçeve bağlanan belgeyi gösterir. Gezgin çerçevesi içindeki bir bağ, amaç dosya alanı içindeki bir bölümü gösterir. HTML kodu şöyledir:
<a href ="link.htm" target ="showframe">Çapasız bağ</a><br><a href ="link.htm#C10" target ="showframe">Çapalı bağ</a>. 
<html>

<frameset cols="180,*">

<frame src="content.htm">
<frame src="link.htm" name="showframe">

</frameset>

</html>

Çerçeve (Frame) Biçimleri

BiçimAçıklama
<frameset>Bir dizi çerçeveyi tanımlar
<frame>Alt pencereyi tanımlar (bir çerçeve)
<noframes>Çerçeve desteklemeyen tarayıcılar için çerçevesiz bölümü tanımlar
<iframe>Görüntülenen satıriçi alt pencereyi tanımlar (çerçeve)