Çerçeveler, sayfamızı parçalara ayırmamızı sağlar.Böylece 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.Söylediklerimizi biraz daha açacak olursak, sayfamızı yukarıdan aşağıya doğru ayrılan iki çerçeve olsun.Bizim bu amaçla sayfanın iki çerçevede görüntüleneceğini söyleyen bir html dökümanımız ve çerçevelerde görüntülenmesini istediğimiz iki html dökümanımız olmalıdır. Şimdi anlatımımıza çerçeve oluşturmada kullanılan etiketi anlatarak devam edelim.
Frameset Etiketi :
Çerçeve oluşturmada kullanılan etiket framesettir.Cols parametresi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını, rows parametresi ise çerçevelerin alt alta satırlar şeklinde görüntüleneceğini belirtmekte kullanılır.
Çerçeve konusunu bir örnek üzerinden anlatalım.
Örneğimizde 3 adet html dosyası olsun.Bunlardan cerceve.htm dosyası çerçeve komutlarını içersin.Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde sag.htm dosyasını, diğerinde sol.htm dosyasını görüntülemesini bildirmeye yarar.
Şimdi çerçeveyi ve gerekli htm dosyalarını oluşturalım.
cerceve.htm dosyası:
<html>
<head>
<title>Çerçeve Oluşturma</title>
</head>
<frameset cols="*,*">
<frame name="sol" src="htmlders_cerceve/sol.htm">
<frame name="sag" src="htmlders_cerceve/sag.htm">
</frameset>
<body>
</body>
</html> |
cols="*,*" parametresi, çerçeve sayısını ve boyutlarını belirtmemizi sağlıyor.Burada yıldız yerine sayı veya oran yazılabilir.Yıldız koyma çerçeve oranlarının browsera bırakılması anlamına gelir.Bunun dışında, cols="120,560" gibi sayı yazılabilir, cols="30%,70%" ile browser penceresinin o anki ebadına göre verilen %(yüzde) oranlarına göre şekil alması sağlanabilir.cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösterir.Bunlar cols ve rows parametrelerinin değişik kullanım şeklidir.
Bu örnekte sayfa iki sütuna ayrımıştır.Eğer sayfa iki satıra ayrılmak istenseydi, yukarıdaki<frameset cols="*,*"> etiketi, <frameset rows="*,*">şeklinde yazılmalıydı.
Eğer sayfayı üç sütuna ayırmak isteseydik bu seferde <frameset cols="*,*,*"> şeklinde yazılmalıydı.
<frame name="..." src="..."> etiketi çerçevelere, bağlantıların target kısmında kullanabilmek amacıyla isim vermeye yarar.src ise pencerede görüntülenecek html dosyasının yerini göstermek için kullanılır.Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketi kullanılmalıdır.
NOT: Frameset etiketinin html dosyasının </head>...<body> etiketleri arasında kullanıldığına dikkat edin.Yapacağınız uygulamalarda bunu unutmayın.
sol.htm dosyası:
<html>
<head>
<title>Solda açılacak sayfa </title>
</head>
<body bgcolor="#ff1493">
<font size="7">sol.htm</font>
</body>
</html> |
sag.htm dosyası:
<html>
<head>
<title>Sagda açılacak sayfa </title>
</head>
<body bgcolor="#7cfc00">
<font size="7">sag.htm</font>
</body>
</html> |
Şimdi yaptığımız bu örneği uygulayarak neler olduğunu görelim.
Yukarıdaki örnek kodlarda <frameset cols="*,*"> yerine <frameset rows="*,*"> yaparak, sayfanın satırlara ayrıldığını görebilirsiniz.Bunu yanı sıra yıldız yerine oran veya sayı girerek meydana gelecek değişimleri gözleyebilirsiniz.
Frameset etiketine ait bazı parametreler:
Frame etiketi ile kullanılan parametreler:
Çerçeve örnekleri:
1. Sayfayı iki satır ve iki sütuna yani dört çerçeveye ayırma:
<frameset rows="*,*" cols="*,*">
<frame name="bir" src="htmldersleri/bir.htm">
<frame name=iki" src="htmldersleri/iki.htm">
<frame name="uc" src="htmldersleri/uc.htm">
<frame name="dort" src="htmldersleri/dort.htm">
</frameset> |
2. Bu örneğimizde sayfayı önce %25 ve %75 oranında iki sütuna ayırıyoruz.Daha sonra ise ikinci sütunu, ilk çerçevesi 120 piksel ikinci çerçevesinin ölçüsü browsera bırakılan iki satıra ayırıyoruz.
<frameset cols="25%,75%">
<frame name="bir" src="htmlders_cerceve/bir.htm">
<frameset rows="120,*">
<frame name="iki" src="htmldersleri/iki.htm">
<frame name="uc src="htmldersleri/uc.htm">
</frameset>
</frameset> |
Sizde kendiniz bu örneklere benzer çalışmalar yapabilirsiniz.
