|
11. ÇERÇEVELER (FRAME)
Çerçeve
tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu
sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu
tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst
kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu
küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl
içeriğini yerleştirmektir.
Fakat şunu da belirtmekte fayda var, birçok
tasarımcı estetik açısından çerçevelere pek sıcak bakmaz; genelde
üst üste tablolar kullanmayı tercih eder. Yine de pek sık
kullanılmayan bu tekniği aklınızın bir yerinde tutun, belki faydalı
olabilir...
Bir uyarı: Netscape 2.0 ve Explorer 3.0 altı
browser'lar, çerçeveleri tanımazlar!
ÇERÇEVE TEKNİĞİNİN GENEL MANTIĞI
Çerçeve tekniğinde, ilk önce parent(ana) frame
denilen bir sayfa oluşturmak gerekir. <Frameset>... </frameset>
etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfayı
dikey ve yatay olarak ne oranda bölmek istediğimizi browser'a bildiririz.
Src parametresi ile ana çerçevenin bölümlerinde görüntülenecek
sayfaların adreslerini bildirdikten sonra, geriye biraz önce
adreslerini bildirdiğimiz sayfaları uygun bir şekilde hazırlamak
kalır. Şimdi bu biraz karışık ifadeyi bir örnekle daha
iyi anlayalım, sonra da <frameset> etiketini inceleyelim.
Önce ana pencereyi hazırlayalım:
|
<html>< BR><head>
<title>Çerçeveörneği</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type
</head>
<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
<noframes>
<body>
<h1>Browser'ınızın sürümü sayfamızı görüntülemeye uygun degil,
lütfen daha yeni bir sürüm
yükleyip tekrar deneyin!</h1>
</body>
</noframes>
</html> |
Burada yaptığımız şey ana sayfayı soldan 150
piksel genişliğinde bölüp iki sayfa elde etmekten ibaret. Ayrıca
browser'a soldan ilk bölüme (150 px olan bölüm) 'menu.html', ikinci
bölüme ise 'esas.html' sayfalarını yerleştirmesini bildirdik. Burada
dikkat edilmesi gereken nokta <frameset> etiketinin </head> ile
<body> etiketleri arasına yerleştirilmesidir.
<Noframes>...</noframes>
etiketleri içinde yer alan bölüm ise çerçeveden anlamayan eski sürüm
browser'lar içindir. Şimdi aşağıdaki kodlardan ilkini
'menu.html',
ikincisini ise
'esas.html'
adıyla ana pencereyi kaydettiğiniz dizine kaydedin.
|
<html>
<head>
<title>menu</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body bgcolor="teal">
</body>
</html>
|
<html>
<head>
<title>esas</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
</head>
<body bgcolor="Red"></body>
</body>
</html> |
Son olarak tekrar ana sayfayı açtığınızda (ismi önemli değil,
yeter ki diğer iki sayfa ile aynı dizinde bulunsun!) sonuç böyle
olacaktır:
Artık çerçevelerin mantığını anladığımıza göre bu tekniğin
detaylarını inceleyelim...
11/2. <FRAMESET> ve <FRAME> ETİKETLERİ
Aşağıda <frameset> etiketinin parametrelerini görüyorsunuz :
|
rows |
Safayı enine bölmenizi sağlar |
<frameset rows="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset> |
|
|
cols |
Sayfayı boyuna bölmenizi sağlar |
<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset> |
|
|
cols ve rows parametreleri
piksel değeri alabilecekleri gibi '%' cinsinden de değer
alabilirler, örneğin:
<frameset cols="%20,%80">
Daha önce kullandığımız '*' ifadesi ile bölünecek alanın
genişliğini browser'a bırakabiliriz:
<frameset cols="%20,*">
Son olarak sayfayı üçe veya daha fazlaya da böşebiliriz:
<frameset rows="150,200,100,*"> ifadesi ile ana pencereyi
dörde böleriz. |
|
frameborder |
Ana sayfanın bölümleri arasında sınır
çizgisi olup olmamasısını belirler.('yes', 'no'; veya '1', '0'
değerlerini alır) |
<frameset cols="150,*" frameborder="1">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset> |
|
|
border |
Çerçeveler arasındaki sınırın kalınlığını
piksel cinsinden belirler. |
<frameset cols="150,*" border="10">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset> |
|
Şimdi de <frame>; etiketinin parametreleri:
|
src |
Bunu zaten biliyorsunuz, çerçeve içinde
görüntülenecek sayfanın yeri |
|
marginwidth |
Sayfanın solundaki kenar boşluğunu belirtir |
|
marginheight |
Sayfanın üstündeki kenar boşluğunu belirtir |
|
noresize |
'1' veya '0' değerlerini alır, '1'
verilirse pencere boyutları sabitlenir. |
|
scrolling |
'yes', 'no', 'auto' değerlerini alır,
kaydırma çubuklarının durumunu belirler. |
11/3. FRAME UYGULAMALARI
Aşağıda bazı çerçeve örnekleri ve bu örneklerin kodları
verilmiştir:
|
|
<frameset rows="150,*" cols="150,*" >
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
<frame name="siyah" src="siyah.html">
</frameset> |
|
|
<frameset rows="150,*">
<frame name="kirmizi" src="kirmizi.html">
<frameset cols="30%,*">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
</frameset> |
|
|
<frameset rows="150,*">
<frameset cols="*,*">
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
</frameset>
<frame name="sari" src="sari.html">
</frameset> |
|
|
<frameset cols="150,*">
<frameset rows="*,*,*">
<frame name="yesil" src="yesil.html">
<frame name="kirmizi" src="kirmizi.html">
<frame name="sari" src="sari.html">
</frameset>
<frame name="siyah" src="siyah.html">
</frameset> |
Çerçevelerle çalışmaya başlamadan önce bilmeniz
gereken önemli bir nokta:
Hatırlarsanız bağlantılar konusunda <a> etiketinin
target isimli bir parametresi olduğundan ve bu
parametrenin 'Çerçeveadı' değerini alabileceğinden bahsetmiştik. Bu
parametre bize bağlantının belirttiği adresdeki sayfanın adını
verdiğimiz çerçeve içinde açılmasını sağlar. Örneğin bu sayfadaki
ikinci örneği ele alalım:
'İstiyoruz ki sayfanın yeşil bölümü sayfamızın menüsü
olsun. Ziyaretçi buradaki bağlantılara tıklayarak sitenin diğer
sayfalarına ulaşsın, ama bu diğer sayfalar sarı bölümde
görüntülensin.'
İşte aşağıdaki kod bunu sağlar:
|
<a href="www.sayfaAdi.com\secenek1.html
target="sari">Bu link saril bölümde görüntülenecek!</a> |
Gördüğünüz gibi çerçevelere verdiğimiz isimler
(name) bu noktada önem kazanıyorlar |
ANASAYFA
