|
Çerçeveler (frame), HTML'e sonradan
eklenmiştir. Bu yüzden eski sürüm browser'lar çerçeve kullanılmış
bir sayfayı görüntüleyemezler. (Microsoft Internet Explorer 3.0
ile Netscape Navigator 2.0 ve üstü sürümleri frameleri
destekliyor). Bunun yanında çerçeve kullanımına karşı düşmanca (!)
tavır sergileyen tasarımcılar da hatırı sayılır miktarda ve hala
birçok site, ziyaretçisine çerçeveli ve çerçevesiz sunum seçeneği
sunuyor.
Çerçeveler sayfanın bazı kısımlarını sabit
bırakırken, diğer kısımlarını 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
(yani ana dosya). 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 artalan rengi kırmızı, htm2.htm
dosyasının artalanı 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>
Ç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 çerçeve aç anlamındadır, 3
değer 3 çerçeve 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. Resimler bahsinde
belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerli.
Açılacak çerçeve sayısı kadar frame name="..." src="..."
etiketi kullanıyoruz.
Eski sürüm browserların çerçeve etiketini
tanımadıklarından bahsetmiştik, 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>
|
|
Çerçeveler konusu ile birlikte HTML
öğreniyorum yazı dizimiz sona erdi, buraya kadar
öğrendiklerinizle internette siz de kendinize ait sayfalarınızı
inşa edebilirsiniz, eğer bu konuda ciddi düşünüyorsanız bunun
yolunun çok çalışmaktan geçtiğini sakın unutmayın, hoşunuza giden
sitelerin dizayn mantığını anlamaya çalışın, hatta bunun için
kaynak kodlarını inceleyin. Görsel editörleri kullanarak sayfalar
hazırlayın ve sonra da editörün kodları nasıl oluşturduğuna bakın.
Son olarak; iyi bir tasarımcı olmanın yolunun çok çalışmak ve
devamlı araştırmakan geçtiğini unutmayın. Hepinize başarılar...
|