HTML KODLARI & WEBMASTER SİTESİNE HOŞGELDİNİZ -_
  Html Dersleri 10
 

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


ikinci örneğimizi inceleyin..!

Ş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..

 
 
 
ONLİNE İLETİŞİM



HABERLER




TOPLİSTLER

toplistsitene eklefoorex Toplist
Ask Sevgi SohbetWebparki.Net Toplist Site Ekle Hit Al Pagerank3 Link Ekle Link Paylas Toplist, Site Ekle warez toplist Toplist Gündem Toplist TOPlist google-site-verification: googlef7e0d7b695354174.html Siteni Ekle!




 
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=

© Copyright 2009 Her hakkı saklıdır
mesacet@hotmail.com

mesanet.tr.gg|www.kpss-sinavi.tr.gg|gif-resim.tr.gg|sanalkodlama.tr.gg

Pagerank