|
Çerçeve
(frame)
|
|
Bazı sayfalarda görmüş olmalısınız. Yanda yeni bir pencere içinde linkler diğer
yanda ise yazılar.. Yani sayfa sanki 2 tane pencereden oluşuyor ama tek pencere
içerisinde görüntüleniyor...
Web tasarımcıları çerçeveyi pek sevmez.
Yani hoş bir görüntü kazandırmaz sayfaya. Web tasarımcısı kadar ziyaretçi de bundan
pek hoşlanmaz.. Ama bazı zamanlar da bir kolaylıktır Çerçeveler.. Ve ayrıca Çerçeve
teknolojisi HTML' e sonradan dahil edilmiş.. Buna göre eski browserlar bunu anlamayacak!
Bir kuralı daha hatırlayalım: Yaptığımız sayfalar bizim bilgisayarımızdaki gibi
görünmez ziyaretçimize hiçbir zaman!
Bu derste Çerçeve yani Frame etiketini
göreceğiz..
|
| Çerçeve
içinde Çerçeve.. Her yer çerçeve.. |
|
Çerçeveleri oluşturan etiket <frameset>
etiketidir. <frame>
etiketi ile de her bir frame'in (çerçevenin) özelliklerini ve frame'de gösterilecek
sayfayı belirtiyoruz...
Şimdi örneklerimizi yapalım ve inceleyelim:
|
| Örnekler:
|
|
cerceve1.htm dosyası:
<html>
<head>
<title>Sol çerçeve</title>
</head>
<body bgcolor="#FF0000">
<font size=7>Sol Çerçeve</font>
</body>
</html>
cerceve2.htm dosyası:
<html>
<head>
<title>Sağ Çerçeve</title>
</head>
<body bgcolor="#000099">
<font size=7>Sağ
Çerçeve</font>
</body>
</html>
Şimdi
de bu iki çerçeveyi içine koyacağımız Ana Çerçeveyi yapalım ve frame.htm adı ile
kaydedelim:
<html>
<head>
<title>Çerçeveli bir sayfa</title>
</head>
<frameset
cols="30%, 70%">
<frame name="solcerceve"
src="cerceve1.htm">
<frame name="sagcerceve" src="cerceve2.htm">
<noframes>Browser'ınız çerçeve teknolojisini desteklemiyor.
Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html>
|
| Şimdi
de yazdığımız kodlamayı inceleyelim: |
|
Yukarıdaki
butona basarak örneği inceleyebilirsiniz.
Örneği incelediyseniz şimdi
de yapımında kullandığımız kodlamayı bir inceleyelim:
Öncelikle normal
olarak 2 tane HTML sayfası yazdık. Ve bunları cerceve1.htm ve cerceve2.htm adı
ile kaydettik. Daha sonra bu yaptığımız sayfaları içine alacak olan frame.htm
' yi yazdık.. Burada diğer sayfalardan farklı olarak <frameset>
etiketini kullandık.. <frameset
cols="30%, 70%"> bu etiket ile sayfaların bir tanesini sayfanın
yüzde 30'unu kaplayacak şekilde diğerini ise sayfanın yüzde 70'ini kaplayacak
şekilde ayarladık..
Daha sonra da sayfamızın içine çerçeveleri yerleştirdik
<frame name="solcerceve" src="cerceve1.htm">
ile sol çerçeveyi,
<frame
name="sagcerceve" src="cerceve2.htm"> ile
de sağ çerçeveyi sayfamıza yerleştirdik. Burada dikkatinizi çekti mi bilmem? <noframes>
etiketi ile tarayısıcı eski olan ziyaretçimizi uyarıyoruz ve çerçeve teknolojisini
destekleyen bir browser yüklemesini söylüyoruz. (biz de çok oluyoruz:) )
|
| Bir
sayfaya 4 tane çerçeve sığar mı? |
|
Bu bir arabaya 4 filin sığması kadar olağan bir durum! 
Şimdi biraz önce yazdığımız çerçevelere 2 çerçeve daha ilave edelim. Ve cerceve3.htm
ile cerceve4.htm isimleri ile kaydedelim. Oldu mu? O zaman bunları bir sayfada
birleştirelim:
|
<html>
<head>
<title>Çerçeveli Sayfa</title>
</head>
<frameset cols="50%, 50%" rows="50%, 50%">
<frame
name="bir" src="cerceve1.htm">
<frame name="iki"
src="cerceve2.htm">
<frame name="uc" src="cerceve3.htm">
<frame name="dort" src="cerceve4.htm">
<noframes>Browser'ınız
çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html> |
Bu
sayfayı frame2.htm adı ile kaydedin..
Şimdii, bu sayfanın diğer sayfadan
bir farkı var. Haydi şimdi bunu bulun. Demiyeceğim..
Bu sayfadaki fark <frameset
rows=""> etiketidir. Bu etiket çerçevelerimizi yatay bir şekilde
sayfaya yerleştirir.. (cols' da dikey öyle değil mi?)
|
| Şimdi
de bir başka örnek: |
|
<html>
<head>
<title>Çerçeveli Sayfa</title>
</head>
<frameset rows="50%, 50%" frame border="yes"
border="5" bordercolor="#000000">
<frame name="bir"
src="cerceve1.htm" noresize >
<frameset cols="*,*">
<frame name="iki" src="cerceve2.htm" scrolling="yes">
<frame name="uc" src="cerceve3.htm">
<noframes>Browser'ınız
çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html>
|
|
| Şimdi
de inceleyelim: |
|
Örneğimizi incelediyseniz eğer bu sayfanın diğer yaptığımız
çerçeveli sayfalardan farklı var değil mi? Eveet, bayağı bir farklı
Sayfamızın kodlamasına baktığımızda:
frameborder="yes" border="5" bordercolor="#000000">
ilk dikkatimizi çeken etiket frameset etiketimize ekledğimiz bu etiket
çerçevelerimizin kenarlarının ölçülerini belirlemeye yarar. "frameborder"
etikenin iki şekli vardır. "Yes" çerçevenin kenarlıklı olmasını, "no"
ise kenarlıksız olmasını sağlar.
<frame
name="bir" src="cerceve1.htm" noresize > etiketinin
sonunda bulunan "noresize" etiketi çerçevelerin ölçülerinin değişmesini
önlüyor. Yani alttaki çerçeve bakarsanız bunun ölçülerini mouse işaretçiniz ile
değiştirebileceğinizi görüyorsunuz.
Son olarak Çerçeve 2 de uyguladığım
bir yöntem olan;
scrolling="yes"> etiketi ile kaydırma çubuklarının olmasını
istiyorum. Bunu 3 şekilde ayarlayabiliyoruz: "yes" kaydırma çubuğu olsun,
"no" kayfırma çubuğu olmasın ve "auto" gerektiği zaman kaydırma
çubuğu aktif olsun.
Ayrıca;
<frame
name="uc" src="cerceve3.htm" marginwidth="0" marginheight="0">
marginwidth ve marginheight
etiketleri ile çerçevenin içini de kontrol edebiliyoruz. marginwidth="50"
yaparsak çerçevenin içine yazdığımız yazı kenarlardan bir hayli uzaklaşacaktır.
|
|
Bu derste de çerçeveleri inceledik. Bir sonraki ders de
çerçevelerin inceliklerini öğreneceğiz.. Çerçevelerde yapılan en sık hatalardan
söz edeceğiz.
Anlayamadığınız ya da öğrenmek istediğiniz konuları bana
sorabilirsiniz.. Her zaman cevap alacağınızdan emin olun.. |
|
|
|
|
|
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
TOPLİSTLER
