|
ANA SAYFA -
HTML DERSİ -
JAVASCRİPT DERSİ -
JAVASCRİPT KODLARI -
CSS DERSİ -
ÖNERİLER
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...
Ç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...
|
