FRAME Tagı Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Ç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 Differences Between HTML and XHTML Tips and Notes Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation. Important: You cannot use the <body></body> tags together with the <frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! <frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> <frame src ="sun.htm" /> <frame src ="mercur.htm" /> dersmax.net FRAME Tagı 1
Optional Attributes DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD cols pixels % * Defines the number and size of columns in a frameset F rows pixels % * Defines the number and size of rows in a frameset F Standard Attributes Only allowed in XHTML 1.0 Frameset DTD!! id, class, title, style Örnek: dersmax.net FRAME Tagı 2
<title>cerceveler</title> <frameset rows="*,*,*"> <frame src="1.html"> <frame src="2.html"> <frame src="3.html"> Örnek: <title>cerceveler</title> <frameset cols="*,*,*"> <frame src="1.html"> <frame src="2.html"> <frame src="3.html"> Örneklerde gördüğünüz * miktar? e?it miktarda kaç tane çerçeve olaca??n? gösterir.<frameset> etiketinde kaç tane * belirttiysek o kadar <frame src=""> belirtmemiz gerekir.* yerine pixel cinsinden bir sayi ya da % cinsinden oran da belirtebiliriz.cols, sayfalar?n yanyana ç?kmasini, rows ise üstüste ç?kmas?n? sa?lar. 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>... 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: < BR> <title>çerçeveörne?i</title> <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=content-type <frameset cols="150,*"> <frame name="menu" src="menu.html"> <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> dersmax.net FRAME Tagı 3
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 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. <title>menu</title> <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=content-type> <body bgcolor="teal"> </body> <title>esas</title> <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=content-type> <body bgcolor="red"></body> </body> 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... <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"> cols Sayfayı boyuna bölmenizi sağlar <frameset cols="150,*"> <frame name="menu" src="menu.html"> 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ölebiliriz: <frameset rows="150,200,100,*"> ifadesi ile ana pencereyi dörde böleriz. dersmax.net FRAME Tagı 4
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"> 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">?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: dersmax.net FRAME Tagı 5
<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 rows="150,*"> <frame name="kirmizi" src="kirmizi.html"> <frameset cols="30%,*"> <frame name="yesil" src="yesil.html"> <frame name="sari" src="sari.html"> <frameset rows="150,*"> <frameset cols="*,*"> <frame name="kirmizi" src="kirmizi.html"> <frame name="yesil" src="yesil.html"> <frame name="sari" src="sari.html"> <frameset cols="150,*"> <frameset rows="*,*,*"> <frame name="yesil" src="yesil.html"> <frame name="kirmizi" src="kirmizi.html"> <frame name="sari" src="sari.html"> <frame name="siyah" src="siyah.html"> Ç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.comsecenek1.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 dersmax.net FRAME Tagı 6
<title>cerceveler</title> <frameset rows="*,*" frameborder="1" > Ana Çerçeve <frameset cols="30%,*,*" frameborder="1" > <frame src="cerceve1.html" /> <frame src="cerceve2.html" name="aramamotoru" /> <frame src="cerceve3.html" name="mail" /> <frame src="cerceve4.html" /> Çerçeve 1 <body> <table> <tr><td><a href="http://www.google.com" target="aramamotoru">google</a></td></tr> <tr><td><a href="http://www.yahoo.com" target="aramamotoru">yahoo</a></td></tr> <tr><td><a href="http://www.altavista.com" target="aramamotoru">altavista</a></td></tr> </table> <hr /> <table> <tr><td><a href="http://www.gmail.com" target="mail">gmail</a></td></tr> <tr><td><a href="http://www.mail.yahoo.com" target="mail">yahoo Mail</a></td></tr> </table> Çerçeve 2 Çerçeve 3 Çerçeve 4 </body> <body background="wallpaper0027.jpg"></body> <body background="wallpaper3_b.jpg"></body> <body background="wallpaper0027.jpg"></body> dersmax.net FRAME Tagı 7
<title>çerçevelerim</title> <frameset rows="10%, *" frameborder="1" border="50"> <frame name="ust" src="ust.htm" /> <frame name="alt" src="alt.htm" /> Kaynak www.htmldersleri.org/htmlders11.htm www.w3schools.com/tags/tag_frameset.asp dersmax.net FRAME Tagı 8