EFES3000!
Anasayfa Yazılar Programlar Web Tasarım İletişim

-Web Tasarım-
 Web Tasarım - Çerçeveler

Çerçeve'ler (frame) sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir. Browser çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir.

Aşağıdaki örneği inceleyelim:








Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.

<body bgcolor="..."> etiketi ile htm1.htm dosyasının arkaplan rengi kırmızı, htm2.htm dosyasının arkaplanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmış ve sonuç gördüğünüz gibi.

Şimdi bu çerçeveyi birlikte oluşturalım:



frame.htm dosyası:

<html>

<head>
   <title>Çerçeveler</title>
</head>

<frameset cols="*,*">
   <frame name="sol" src="htm1.htm">
   <frame name="sag" src="htm2.htm">
</frameset>

<noframes>
   <body>
   </body>
</noframes>

</html>



htm1.htm dosyası:

<html>
<head> </head>
<body bgcolor="red">
 <font size="7" color="#ffffff">htm1.htm</font>
</body>
</html>



htm2.htm dosyası:

<html>
<head> </head>
<body bgcolor="blue">
 <font size="7" color="#ffffff">htm2.htm</font>
</body>
</html>


<frameset>...</frameset>

(FRAMESET etiketi </head>...<body> etiketleri arasında kullanır.)
Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, buraya row yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır.




cols (sütunlar)



rows (satırlar)


cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, buraya örneğin cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor.

Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. cols=".." ifadesine iki değer (ya da yıldız) verirsek bu iki pencere aç anlamındadır, 3 değer 3 pencere açar.

frame name="..." src="..." etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya aşağıda değineceğiz). src pencerede görüntülenecek html dosyasının yerini gösteriyor. Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketi kullanıyoruz.

Eski sürüm browserların çerçeve etiketini tanımazlar, işte noframes kısmı bu browserlara hitap ediyor. body kısmını bu eski browserlar görüntüleyebiliyor. Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz.



FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar;

frameborder="..."    (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.

border="..."    (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler



FRAME etiketi ile kullanabileceğimiz parametreler;

marginwidth="..." marginheight="..."    (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.

scrolling=".."    (yes, no, auto) Kaydırma çubuklarının durumunu belirler.

noresize    Pencere boyutlarının sabit olmasını sağlar.

Daha karmaşık çerçeveler

Yan yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı öğrendik peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün.

Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz, içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz.

Örnekleri ve yanlarındaki kodları inceleyip, farklı çerçeve türlerini kendi bilgisayarınızda oluşturmaya çalışın,



<frameset rows="*,*" cols="*,*">
   <frame name="a" src="htm1.htm">
   <frame name="b" src="htm2.htm">
   <frame name="c" src="htm3.htm">
   <frame name="d" src="htm4.htm">
</frameset>


<frameset cols="150,*">
   <frame name="a" src="htm1.htm">
<frameset rows="100,*">
   <frame name="b" src="htm2.htm">
   <frame name="c" src="htm3.htm">
</frameset>
</frameset>


<frameset rows="50%,50%">
<frameset cols="*,*">
   <frame name="a" src="htm1.htm">
   <frame name="b" src="htm2.htm">
</frameset>
   <frame name="c" src="htm3.htm">
</frameset>


<frameset rows="*,*,*">
   <frame name="a" src="htm1.htm">
<frameset cols="*,*">
   <frame name="b" src="htm2.htm">
   <frame name="c" src="htm3.htm">
</frameset>
   <frame name="d" src="htm4.htm">
</frameset>


<frameset cols="*,*">
<frameset rows="*,*">
   <frame name="a" src="htm1.htm">
   <frame name="b" src="htm2.htm">
</frameset>
   <frame name="c" src="htm3.htm">
</frameset>




Böylece çerçeve konusunun sonuna geldik. Buradaki bilgileri web sitenize dilediğiniz gibi uygulayabilirsiniz. Bu konuda daha detaylı bilgi için Linkler bölümüne bakın. Takıldığınız noktaları bana emaille veya İletişim bölümündeki form yardımıyla iletebilirsiniz.

<xmp>