| Ç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... |
ANASAYFA