İNTERNET PROGRAMCILIĞI I

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "İNTERNET PROGRAMCILIĞI I"

Ahmet Bakkal
8 yıl önce
İzleme sayısı:

1 BÖLÜM Ç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. Bir uyarı: Netscape 2.0 ve Explorer 3.0 altı browser'lar, çerçeveleri tanımazlar! 11.1 Ç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 set> etiketini inceleyelim. Önce ana pencereyi hazırlayalım: <html>< BR><head> <title>çerçeveörneği</title> <METAcontent=text/html;CHARSET=iso http-equiv=content-type </head> set cols="150,*"> name="menu" name="esas" <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> 27

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.

2 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 set> 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ğimiz dizine kaydedelim. <html> <head> <title>menu</title> <METAcontent=text/html;CHARSET=iso http-equiv=content-type> </head> <body bgcolor="teal"> </body> </html> <html> <head> <title>esas</title> <METAcontent=text/html;CHARSET=iso http-equiv=content-type> </head> <body bgcolor="red"></body> </body> </html> Son olarak tekrar ana sayfayı açtığımızda (ismi önemli değil, yeter ki diğer iki sayfa ile aynı dizinde bulunsun!) sonuç böyle olacaktır: 28

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

3 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 set> etiketinin parametrelerini görüyorsunuz : rows Safayı enine bölmenizi sağlar set rows="150,*"> name="menu" name="esas" cols Sayfayı boyuna bölmenizi sağlar set cols="150,*"> name="menu" name="esas" cols ve rows parametreleri piksel değeri alabilecekleri gibi '%' cinsinden de değer alabilirler, örneğin: set cols="%20,%80"> Daha önce kullandığımız '*' ifadesi ile bölünecek alanın genişliğini browser'a bırakabiliriz: set cols="%20,*"> Son olarak sayfayı üçe veya daha fazlaya da böşebiliriz: set rows="150,200,100,*"> ifadesi ile ana pencereyi dörde böleriz. 29

Sayfayı boyuna bölmenizi sağlar set cols="150,*"> name="menu" name="esas" cols ve rows parametreleri piksel değeri alabilecekleri gibi '%' cinsinden de değer alabilirler,

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) set cols="150,*" frameborder="1"> name="menu" name="esas" border Çerçeveler arasındaki sınırın kalınlığını piksel cinsinden belirler. set cols="150,*" border="10"> name="menu" name="esas" Şimdi de >; etiketinin parametreleri: src marginwidth marginheight noresize scrolling Bunu zaten biliyorsunuz, çerçeve içinde görüntülenecek sayfanın yeri Sayfanın solundaki kenar boşluğunu belirtir Sayfanın üstündeki kenar boşluğunu belirtir '1' veya '0' değerlerini alır, '1' verilirse pencere boyutları sabitlenir. 'yes', 'no', 'auto' değerlerini alır, kaydırma çubuklarının durumunu belirler. 30

set cols="150,*" border="10"> name="menu" name="esas" Şimdi de >; etiketinin parametreleri: src marginwidth marginheight noresize scrolling Bunu zaten biliyorsunuz, çerçeve içinde

5 11.3 FRAME UYGULAMALARI Aşağıda bazı çerçeve örnekleri ve bu örneklerin kodları verilmiştir: set rows="150,*" cols="150,*" > name="kirmizi" src="kirmizi.html"> name="yesil" src="yesil.html"> name="sari" src="sari.html"> name="siyah" src="siyah.html"> set rows="150,*"> name="kirmizi" src="kirmizi.html"> set cols="30%,*"> name="yesil" src="yesil.html"> name="sari" src="sari.html"> set rows="150,*"> set cols="*,*"> name="kirmizi" src="kirmizi.html"> name="yesil" src="yesil.html"> name="sari" src="sari.html"> set cols="150,*"> set rows="*,*,*"> name="yesil" src="yesil.html"> name="kirmizi" src="kirmizi.html"> name="sari" src="sari.html"> name="siyah" src="siyah.html"> Çerçevelerle çalışmaya başlamadan önce bilmeniz gereken önemli bir nokta: <a> etiketinin target isimli bir parametresi vardır ve bu parametre 'Çerçeveadı' değerini alabilir. Bu parametre bize bağlantının belirttiği adresteki 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: 31

html"> name="yesil" src="yesil.html"> name="sari" src="sari.html"> set cols="150,*"> set rows="*,*,*"> name="yesil" src="yesil.html"> name="kirmizi" src="kirmizi.html"> name="sari" src="sari.html"> name="siyah" src="siyah.

6 'İ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=" target="sari">bu link saril bölümde görüntülenecek!</a> Gördüğümüz gibi çerçevelere verdiğimiz isimler (name) bu noktada önem kazanıyorlar 32

$sarı bölümde görüntülensin. İşte aşağıdaki kod bunu sağlar: <a href="www.sayfaadi.com\secenek1.$

Benzer belgeler

Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.

Note: If you want to validate a page containing frames, be sure the DTD is set to Frameset DTD. Read more about XHTML Validation. 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ç