EREVELER ereve frame ereveler web taraycnzn penceresini birbirine
ÇERÇEVELER Çerçeve (frame), Çerçeveler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir. 1
ÇERÇEVELER l Çerçevelerin özellikleri; l Her çerçeve kendi URL’sine sahiptir. l Her çerçeveye ad verilebilir. l Her çerçeve kullanıcı tarafından boyutlanabileceği gibi, kendini de otomatik olarak boyutlayabilir. 2
ÇERÇEVELER l Çerçevelerin kullanım alanları; l İçindekiler sayfası hazırlanarak, metin okunurken bir tarafta sürekli içerik görüntülenebilir. l Bir çerçevede kriter verilerek yapılan işlemler diğer çerçevede de görüntülenebilir. l Sürekli görünmesi istenen mesajlar için kullanılabilir. 3
ÇERÇEVELER l Bir frame belgesi normal bir HTML belgesine çok benzer. l Tek farkı içinde <body> elemanı (tag) yerine, <frameset> elemanı kullanılmasıdır. 4
ÇERÇEVELER l l l l <HTML> <HEAD> …. </HEAD> <FRAMESET> …. . </FRAMESET> </HTML> 5
<frameset> l Çerçeve oluşturmada kullandığımız etikettir. l Tag ile birlikte kullanılabilecek iki adet parametre vardır. l Bunlar cols ve rows’dur. l Bu parametreler oluşturulacak pencerelerin cinsini belirler. 6
cols l Virgülle ayrılmış değerler girilerek oluşturulacak çerçevelerin yana sütunlar şeklinde olmasını sağlar. l Bu değerler pixel olarak verilebileceği gibi, 1 ile 100 arasındaki bir yüzde ile ya da göreceli boyutlar olarak tanımlanabilir. l Tabiî ki belirtilen sütun sayısı, oluşturulacak olan çerçeve sayısını da belirleyecektir. l “*” ile göreceli değer verilirken, sütunun geriye kalan bütün alanı kapsaması için kullanılır. l “*” işareti önünde bir sayı varsa, sütun diğer göreceli değerlerden daha büyük olacaktır. 7
cols l Örnek 1: l <frameset cols=” 20%, 60%, 20%”> l İlk ve sonda tanımlanan çerçeve ortadaki çerçeveden daha küçük olacaktır. 8
cols l Örnek 2: l <frameset cols=” 100, *, 100”> l İlk ve sonda tanımlanan çerçeve sabit aralıklı, ortadaki çerçeve ise geriye kalan aralığı kullanır. 9
cols l l l l l <html> <head> <title>Yeni Sayfa 2</title> </head> <frameset cols="30%, 70%"> <frame name="sol" src="sol. htm"> <frame name="sag" src="sag. htm"> </frameset> </html> 10
cols l Aşağıdaki örneği inceleyelim: 11
cols l Örneğimizde 3 adet html dosyası var. l Bunlardan frame. htm dosyası çerçeve komutlarını içeriyor (yani ana dosya). l Bu komutlar browser'a, görüntülenmekte olan pencereyi ikiye bölmesini bildirmektedir. l Browser’ın bunlardan birisinde htm 1. htm dosyasını, diğerinde htm 2. htm dosyasını görüntülemesini bildiriyor. 12
cols l <body bgcolor=". . . "> etiketi ile; l htm 1. htm dosyasının artalan rengi kırmızı, l htm 2. htm dosyasının artalanı ise mavi yapılmış, l Kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmıştır. l Sonuç gördüğünüz gibi. 13
frame. htm <html> <head> <title>Çerçeveler</title> </head> <frameset cols="*, *"> <frame name="sol" src="htm 1. htm"> <frame name="sag" src="htm 2. htm"> </frameset> <noframes> <body> </noframes> </html> 14
htm 1. htm <html> <head> </head> <body bgcolor="red"> <font size="7" color="#ffffff">htm 1. htm</font> </body> </html> 15
htm 2. htm <html> <head> </head> <body bgcolor=“blue"> <font size="7" color="#ffffff">htm 2. htm</font> </body> </html> 16
rows l Cols etiketinde değerler verilirken kullanılan formatın aynısı kullanılarak çerçevelerin alta satırlar görünümünde açılmasını sağlar. 17
rows l l l l l <html> <head> <title>Yeni Sayfa 2</title> </head> <frameset rows="100, *"> <frame name="ust" src="ust. htm"> <frame name="alt" src="alt. htm"> </frameset> </html> 18
<frameset>. . . </frameset> l Çerçeve oluşturmada kullandığımız etiket: l frameset, l cols ifadesi açılacak çerçevelerin yana sütunlar şeklinde olacağını belirtiyor, l buraya rows yazarsak çerçeveler alta satırlar görünümünde açılacaktır. 19
cols (sütunlar) 20
rows (satırlar) 21
<frameset>. . . </frameset> l cols="*, *" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz. l Buraya örneğin cols="140, 500" gibi sayı yazılabilir. l cols="25%, 75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir l yada * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır. l cols="140, *" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor. 22
<frameset>. . . </frameset> l Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. l cols=". . " ifadesine iki değer (ya da yıldız) verirsek bu iki çerçeve aç anlamındadır. l 3 değer 3 çerçeve açar. 23
<frameset>. . . </frameset> l FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlardır; l frameborder=". . . " (yes, no) l Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler. l border=". . . " (sayı) l Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler 24
<frame> l <frameset> ile çerçeveleri böldükten sonra içlerine konulacak sayfaları tanımlama işi <frame> elemanı ile yapılır. l frame name=". . . " src=". . . " l name bağlantıların TARGET kısmında kullanabilmek amacıyla çerçevelere isim (name) vermeyi sağlıyor. l src pencerede görüntülenecek html dosyasının yerini gösteriyor. l Resimler konusunda belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerlidir. l Açılacak çerçeve sayısı kadar frame name=". . . " src=". . . " etiketi 25 kullanıyoruz.
<frame> l <frame> etiketi ile kullanılan parametreler şunlardır: l name l Çerçevenin adıdır. l En önemli parametre sayılabilir. l Çünkü frameset’lerde bir çerçevenin içindeki bir link bir başka çerçevenin içeriğini değiştirebilir. l Bunu da name parametresini kullanarak yapar. 26
<frame> l <frame> etiketi ile kullanılan parametreler şunlardır: l src l İçine yerleştirilecek dosyanın URL’sini belirtir. l src’u belirtmediğiniz takdirde; l Tarayıcı herhangi bir hata vermeyecektir. l Buraya varsayılan renkte boş bir sayfa koyacaktır. 27
<frame> l <frame> etiketi ile kullanılan parametreler şunlardır: l RESIZE/NORESIZE l Çerçeve büyüklüğünün değiştirilip değiştirilmeyeceği bilgisini içerir. l resize l noresize Pencere boyutlarının sabit olmasını sağlar. Pencere boyutlarının değiştirilebilmesini sağlar. 28
<frame> l <frame> etiketi ile kullanılan parametreler şunlardır: l marginwidth=". . . " marginheight=". . . " (sayı) l Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler. l MARGINHEIGHT l Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler. l MARGINWIDTH l Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler. 29
<frame> l <frame> etiketi ile kullanılan parametreler şunlardır: l scrolling (yes, no, auto) l Çerçevenin içeriğinin bir ekrana sığmaması halinde tarayıcının kenara bir kayma çubuğu ekleyip eklemeyeceğini belirler (yes, no, auto). l Varsayılan değeri auto’dur. l (yes, no, auto) kaydırma çubuklarının durumunu belirler. 30
<noframes> l Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik. l İşte noframes kısmı bu browserlara hitap ediyor. l body kısmını bu eski browserlar görüntüleyebiliyor. l Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir. l Böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz. 31
<noframes> l <noframes> etiketi, l Eğer ziyaretçinin istemcisinin çerçeve desteği yoksa ziyaretçiye görüntülenecek sayfayı belirlemede kullanılır. l Daha çok eski ve Linux altında kullanılan metin tabanlı istemcilerde çerçeve desteği yoktur. 32
l l l l <html> <head><title>ÇERÇEVELER</title></head> <frameset cols="100, *"> <frame name="sol" src="sol. htm" scrolling=”no” marginwidth=” 10” marginheight=” 10” noresize> <frame name="sag" src="sag. htm" marginwidth=” 0” marginheight=” 0” > </frameset> <noframes> <body> <h 1>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</h 1> </body> </noframes> </html> 33
Daha Karmaşık Çerçeveler l Yan yana sütunlar ya da alta satırlar görünümünde çerçeveler açmayı öğrendik. l Peki tablolardan bildiğimiz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? l Maalesef yok, fakat aynı görünümü elde etmek mümkün. l Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz. l İç içe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz. 34
Daha Karmaşık Çerçeveler <frameset rows="*, *" cols="*, *"> <frame name="a“ src="htm 1. htm"> <frame name="b" src="htm 2. htm"> <frame name="c" src="htm 3. htm"> <frame name="d" src="htm 4. htm"> </frameset> 35
Daha Karmaşık Çerçeveler <frameset cols="150, *"> <frame name="a" src="htm 1. htm"> <frameset rows="100, *"> <frame name="b" src="htm 2. htm"> <frame name="c" src="htm 3. htm"> </frameset> 36
Daha Karmaşık Çerçeveler <frameset rows="50%, 50%"> <frameset cols="*, *"> <frame name="a" src="htm 1. htm"> <frame name="b" src="htm 2. htm"> </frameset> <frame name="c" src="htm 3. htm"> </frameset> 37
Daha Karmaşık Çerçeveler <frameset rows="*, *, *"> <frame name="a" src="htm 1. htm"> <frameset cols="*, *"> <frame name="b" src="htm 2. htm"> <frame name="c" src="htm 3. htm"> </frameset> <frame name="d" src="htm 4. htm"> </frameset> 38
Daha Karmaşık Çerçeveler <frameset cols="*, *"> <frameset rows="*, *"> <frame name="a" src="htm 1. htm"> <frame name="b" src="htm 2. htm"> </frameset> <frame name="c" src="htm 3. htm"> </frameset> 39
- Slides: 39