HTML Çerçeveler (Frame)

06 Ekim 2009, admin

Çerçevelerle, aynı browser’ın penceresi içinde, birden fazla web sayfası görüntüleyebilirsiniz.

Örnekler

Dikey çerçeve grupları

<html>

<frameset cols="25%,50%,25%">

<frame src="cerceve_a.html"> <frame src="cerceve_b.html"> <frame src="cerceve_c.html">

</frameset>

</html>

Bu örnek 3 değişik döküman ile dikey çerçeve gruplarının nasıl yapılacağını göstermektedir.

Yatay çerçeve grupları

<html>

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

<frame src="cerceve_a.html"> <frame src="cerceve_b.html"> <frame src="cerceve_c.html">

</frameset>

</html>

Bu örnek 3 değişik doküman ile yatay çerçeve gruplarının nasıl yapılacağını göstermektedir.
(Daha fazla örneği bu sayfanın sonunda bulabilirsiniz)

Çerçeveler

Çerçevelerle, aynı browser’ın penceresi içinde, birden fazla web sayfası görüntüleyebilirsiniz.Her HTML dokümanına çerçeve denir ve her çerçeve diğerlerinden bağımsızdır.

Çerçeve kullanmanın dezavantajları;

Web geliştirici birden çok HTML dokümanını aklında tutmak zorunda kalır.
Bütün sayfayı yazdırmak zordur.

Çerçeve grupları etiketi

<frameset> etiketi çerçeverler içindeki pencerenin nasıl bölündüğünü sınırlar.
Her çerçeve grupları satır veya sütun grubunu tanımlar.
Satır/sütunların değeri her satır/sütunun meşgul edeceği ekran alanının toplamını göstermektedir

Çerçeve etiketi

<frame> etiketi her çerçevenin içine konacak HTML dökümanıyla sınırlıdır.

Aşağıdaki örnekte 2 sütunluk bir çerçeve grubumuz vardır. İlk sütun browser penceresinin %25 lik bölümüne yerleşir. İkinci sütun da browser penceresinin %75 ine yerleşir. “cerceve_a.html” ilk sütunu yerleşir, ve HTML dokümanı “cerceve_b.html” ikinci sütundaki yerini alır.

<frameset cols="25%,75%"> <frame src="cerceve_a.html"> <frame src="cerceve_b.html"> </frameset>

Not : Çerçeve grupları sütunlarının değeri pixel cinsinden de hazırlanabilir. (cols=”200,500″), ve sütunlardan biri artakalan boşluğu kullanmak için hazırlanmış olabilir(cols=”25%,*”).

Notlar – Kullanışlı ipuçları

Şayet çerçevenin kenarları şeffafsa, kullanıcı kenarları sürükleyerek yeniden boyutlandırabilir. Bu yapmaktan kullanıcıyı engellemek istiyorsanız <çerçeve> etiketine noresize=”noresize” ekleyebilirsiniz.

Browser’ınıza <noframes> etiketi eklemek çerçeveleri desteklemez

Önemli: <frameset></frameset> etiketlerini <body></body> etiketleriyle birlikte kullanamazsınız. Bununla birlikte, şayet browser’ınız için çerçeveleri desteklemeyen yazı içeren bazı metinler eklediyseniz, metini <body></body> içinde kapamalısınız. Aşağıda ilk örnekte bunu nasıl yapıldığını görelim.

<html>

<frameset cols="25%,50%,25%"> <frame src="cerceve_a.html"> <frame src="cerceve_b.html"> <frame src="cerceve_c.html">

<noframes> <body>Tarayıcınız çerçeveleri desteklemiyor!</body> </noframes>

</frameset>

</html>

Bu örnek <noframes> etketinin nasıl kullanıldığını gösteriyor

Karışmış çerçeve grupları

<html>

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

<frame src="cerceve_a.html">

<frameset cols="25%,75%"> <frame src="cerceve_b.html"> <frame src="cerceve_c.html"> </frameset>

</frameset>

</html>

Bu örnek 3 doküman ile nasıl bir çerçeve grubu yapıldığını ve nasıl bunların satır ve sütunlarının ayarlandığını göstermektedir.

Çerçevelerin ebatlandırılmasını engellemek

<html>

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

<frame noresize="noresize" src="cerceve_a.html">

<frameset cols="25%,75%"> <frame noresize="noresize" src="cerceve_b.html"> <frame noresize="noresize" src="cerceve_c.html"> </frameset>

</frameset>

</html>

Bu örnek ebatlandıramama vasfını göstermektedir. Çerçeve tekrar boyunlandırılamaz. Farnizi çerçeve kenarlarının üzerinde hareket ettirmeniz , kenarları hareket ettirmeyecektir

Çerçevelerin Yönlendirilmesi

<html>

<frameset cols="120,*">

<frame src="deneme_icerik.html"> <frame src="cerceve_a.html" name="showframe">

</frameset>

</html>

Bu örnek çerçeveleri yönlendirmenin nasıl yapılacağını göstermektedir. Yönlendirme çerçeveleri hedef olan ikinci çerçeveyle birlikte linklerin listelerini ihtiva eder. “tryhtml_contents.htm” olarak adlandırılan dosya 3 link ihtiva eder. Bu linklerin kaynakları;
<a href ="cerceve_a.html" target ="showframe">Frame a</a><br> <a href ="cerceve_b.html" target ="showframe">Frame b</a><br> <a href ="cerceve_c.html" target ="showframe">Frame c</a>
İkinci çerçeve link verilmiş dokümanı gösterecektir.

İç çerçeve

<html> <body>

<iframe src="icerik.php"></iframe>

<p>Bazı eski tarayıcılar iframe desteklemez.</p> <p>Desteklemediğinde iframe tarayıcıda görünmez.</p>

</body> </html>

Bu örnek nasıl bir iç çerçeve (HTML sayfası içinde bir çerçeve) oluşturulacağını gösterir.

Çerçeve yardımıyla belirlenmiş bölgeye atlamak

<html>

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

<frame src="cerceve_a.html"> <frame src="link.html#C10">

</frameset>

</html>

Bu örnek iki çerçeve göstermektedir.Çerçevelerden biri dosya içinde özel bölümün kaynağına sahiptir.Bu özel bölüm <a name=”C10″> in the “link.htm” doyası ile yapılmıştır.

Çerçeve yönlendirmesiyle özel bölüme atlamak

<html>

<frameset cols="180,*">

<frame src="icerik.html"> <frame src="link.html" name="showframe">

</frameset>

</html>

Bu örnek iki çerçeve göstermektedir.Birincisi hedef olan ikinci çerçeve (link.html) ile linklerin listelerini ihtiva eden sol taraftaki yönlendirme çerçevesi (icerik.html). İkinci çerçeve doküman linklerini gösteren çerçevedir. Yönlendirme çerçevesinin içindeki linklerden bir tanesi hedef dosyadaki özel bölüme bağlanmıştır. “content.htm” dosyanın içindeki HTML kodları <a href =”link.html” target =”showframe”>Link without Anchor (çapasız link) </a><br><a href =”link.html#C10″ target =”showframe”>Link with Anchor((çapalı link) </a> benzemektedir.