Frameler 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. Yüklenen basit bir sayfayla yapılan pencereyi ayırma işlemi, her pencere için HTML standartlarına uygun bir sayfanın yüklenmesiyle tamamlanır. Frameler bulunan bir sayfa oluşturmak için herhangi bir HTML editörüne gerek yoktur. Tek ihtiyacınız olan basit bir metin editörü ve kafanızda tasarladığınız çerçeve stilini gerçekleştirmek için biraz düşünmek. Sayfanızda frame uygulamasına geçmeden önce hemen bu özelliğinin HTML 3.0 standartlarında bulunmadığını fakat en yeni web tarayıcıları tarafından desteklendiğini belirtelim. Netscape Navigatorın 2.0 ve Microsoft Internet Explorerın 3.0 ve daha üstü sürümleri frameleri destekliyor.
Frameleri destekleyen bir sayfa oluşturuyorsanız mutlaka sayfanın, bu özelliği desteklemeyen web tarayıcıları için bir alternatifini oluşturmalısınız, aksi takdirde sitenize terminal ekranından veya eski bir web tarayıcıyla bağlanan kimseler içerikten faydalanamayacak ve sayfa ziyaret sayınıza katkıda bulunmayacaklardır (!) Framelere nasıl alternatif oluşturulduğunu yazımızın ilerki bölümlerinde anlatacağız. Başlamadan önce herkesin yaptığı gibi frameler konusunda 1-2 örnek verip sadece TAGları açıklamayacağımızı belirtelim, aynı zamanda kendi özgün çerçevelerinizi oluşturmanız için işin mantığına da değineceğiz.
Frameler ne zaman kullanılmalıdır?
Hiç gereği olmadığı halde web sayfanızda framelerden faydalanmak hem sayfanızın işlevselliğini yok edip kullanıcının kafasını karıştıracak hem de sayfanın yüklenmesini zorlayacaktır, web tarayıcınız bir web sayfasının yüklenmesi için sunucudan komutlar aldığından en az iki sayfadan oluşacak çerçeveli bir sayfayı yüklemek için ana sayfa da içinde olmak üzere üç sayfa için ayrı ayrı sunucudan bilgi alacaktır. Sayfa içerisinde, yüklenmesi uzun süre alacak, büyük bir resim, menü gibi değişmeyen öğeleri her seferinde tekrar yüklememek için bu bölümler ayrı bir pencere olarak tanımlanabilir.
Sayfa içerisinde ilişkilendirmeler oluşturmak, sayfanın değişik alanlarına tıklandığında bağımsız bir yerde bir içerik oluşturmak frameler sayesinde çok kolaydır.
Nasıl oluyor da oluyor?
Framelere sahip bir sayfa oluşturmaya başlamadan önce web tarayıcılarında bu teknolojiyi destekleyen iki rakip firmanın ortak olarak kullandığı komutları açıklayalım.
<FRAMESET>
Bu tag, yatay ve dikey pencerelerin tanımına başlamak için kullanılır. Tag ile birlikte kullanılabilecek iki adet takı vardır ki bu takılar oluţturulacak pencerelerin cinsini belirler.
COL takısı dikey nitelikte ROW takısı yatay nitelikte bir pencere oluşturmak için kullanılır.
<FRAMESET COL=100,50,*> komutu bundan sonra üç sayfanın tanımı yapılacağını, bu sayfaların kolon nitelikli olacağını, bunlardan iki tanesinin sabit uzunluklu, üçüncüsünün uzunluğunun ise değişebilir olduğunu gösterir. Tırnak içinde sabit bir sayı ve yıldız kullanabileceğiniz gibi %30,%70″ bir yüzde değer de belirtebilirsiniz, bu durumda framein boyutu sayfanın boyutu göz önüne alınarak otomatik olarak ayarlanır. <FRAMESET> takısı </FRAMESET> ile bitirilmeden önce iç içe kullanılarak komplike pencere tanımları yapmanıza izin verir.
<FRAME>
Bu tag ise <frameset> ile başlayacağınızı belirttiğiniz sayfaları oluşturmakta kullanılır ve sayfanın genel yapısını belirler. <frame> takısının iki web tarayıcısının da desteklediği 6 adet takısı vardır.
SRC=URL/DOSYA_ADI Pencere içerisine yüklenecek dosyayı seçmek için kullanılır. Bu değer sunucu içinde herhangi bir dosya olduğu gibi değişik bir Internet adresi de içerebilir.
NAME=FRAME_ADI Daha sonra sayfayı çağırmak için referans olarak kullanılacak isim bu değere atanmalıdır.
MARGINWIDTH=DEĞER Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.
MARGINHEIGHT=DEĞER Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.
SCROLL=AUTO/YES/NO Kaydırma çubuklarının durumunu belirler.
NORESIZE Pencerenin fare yardımıyla genişletilip daraltılamamasını sağlar.
<NOFRAME>
Bu takı iki çerçeveyi oluşturacak sayfada kullanılır ve frameleri desteklemeyen web tarayıcısında sayfanın görünümünü oluşturur. Web tasarımcısı <noframe> ve </noframe> takıları arasına <HTML>, <BODY> taglarını barındıran tam bir HTML sayfası girebilir.
Son olarak frameleri tanımlayan sayfada bulunmayan fakat framein tanımladığı sayfaya koyabileceğiniz bir tag daha vardır. <BASE TARGET=pencere> tagı o pencere içerisinden bir linke tıklandığında kaynağın hangi pencerede açılacağını belirler.
Nelere dikkat etmeli ?
Framelerin kullanımını ve komutlarını anlatırken dikkat etmeniz gereken unsurların bir kısmındanbahsettik, ama yine de Internet üzerinde rastladığımız sayfalarda sık yapılan hataları belirtelim. Böylece siz de ilk deneyimlerinizde bu hatalardan kaçınabilirsiniz.
Frame içindeki bir sayfada dışarıya bir referans bulunuyorsa <A HREF= ile başlattığınız tag içinde mutlaka TARGET=_TOP veya TARGET=_BLANK takılarını kullanın. Bunu yapmazsanız frameli sayfanız içinda başka bir frameli sayfa açılması veya küçücük pencerenize sığmayacak bir sitenin yüklenmesi kaçınılmaz olur.
Frameinizi tasarlarken kaydırma çubuklarının otomatik olmasına özen gösterin. Sayfanın içerisinde yeterince içerik olmasa bile sayfa kenarlarında kaydırma çubuklarının bulunması kullanıcıya rahatsızlık verecektir.
Framelerin içeriğini her zaman iyi kontrol edin. Çerçevelerden birini menü olarak kullanıyorsanız o çerçeve içerisinde yanlışlıkla başka bir sayfanın açılmasına mahal vermeyin.
Pencerelerden bir tanesini kaydırılamaz olarak atıyorsanız ya bu framein genişliğini ve yüksekliğini sabit olarak atayın ya da sayfayı 640*480 çözünürlüğe uygun olarak tasarlayın. Bunu uygulamazsanız
640*480 çözünürlükte framein içeriğinin bir kısmının görülmesi kullanıcı ne yaparsa yapsın mümkün olmayacaktır. Değişik çerçeve stilleri için kaynak kodlar
<FRAMESET COLS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAME SRC=2.htm NAME=2″>
</FRAMESET>
<FRAMESET ROWS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAME SRC=2.htm NAME=2″>
</FRAMESET>
<FRAMESET ROWS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAMESET COLS=100,*>
<FRAME SRC=2.htm NAME=2″>
<FRAME SRC=3.htm NAME=3″>
</FRAMESET>
</FRAMESET>
<FRAMESET COLS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAMESET ROWS=100,*>
<FRAME SRC=2.htm NAME=2″>
<FRAME SRC=3.htm NAME=3″>
</FRAMESET>
</FRAMESET>
-
<FRAMESET COLS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAMESET ROWS=100,*>
<FRAME SRC=2.htm NAME=2″>
<FRAME SRC=3.htm NAME=3″>
<FRAME SRC=4.htm NAME=3″>
</FRAMESET>
</FRAMESET>
Frameleri destekleyen bir sayfa oluşturuyorsanız mutlaka sayfanın, bu özelliği desteklemeyen web tarayıcıları için bir alternatifini oluşturmalısınız, aksi takdirde sitenize terminal ekranından veya eski bir web tarayıcıyla bağlanan kimseler içerikten faydalanamayacak ve sayfa ziyaret sayınıza katkıda bulunmayacaklardır (!) Framelere nasıl alternatif oluşturulduğunu yazımızın ilerki bölümlerinde anlatacağız. Başlamadan önce herkesin yaptığı gibi frameler konusunda 1-2 örnek verip sadece TAGları açıklamayacağımızı belirtelim, aynı zamanda kendi özgün çerçevelerinizi oluşturmanız için işin mantığına da değineceğiz.
Frameler ne zaman kullanılmalıdır?
Hiç gereği olmadığı halde web sayfanızda framelerden faydalanmak hem sayfanızın işlevselliğini yok edip kullanıcının kafasını karıştıracak hem de sayfanın yüklenmesini zorlayacaktır, web tarayıcınız bir web sayfasının yüklenmesi için sunucudan komutlar aldığından en az iki sayfadan oluşacak çerçeveli bir sayfayı yüklemek için ana sayfa da içinde olmak üzere üç sayfa için ayrı ayrı sunucudan bilgi alacaktır. Sayfa içerisinde, yüklenmesi uzun süre alacak, büyük bir resim, menü gibi değişmeyen öğeleri her seferinde tekrar yüklememek için bu bölümler ayrı bir pencere olarak tanımlanabilir.
Sayfa içerisinde ilişkilendirmeler oluşturmak, sayfanın değişik alanlarına tıklandığında bağımsız bir yerde bir içerik oluşturmak frameler sayesinde çok kolaydır.
Nasıl oluyor da oluyor?
Framelere sahip bir sayfa oluşturmaya başlamadan önce web tarayıcılarında bu teknolojiyi destekleyen iki rakip firmanın ortak olarak kullandığı komutları açıklayalım.
<FRAMESET>
Bu tag, yatay ve dikey pencerelerin tanımına başlamak için kullanılır. Tag ile birlikte kullanılabilecek iki adet takı vardır ki bu takılar oluţturulacak pencerelerin cinsini belirler.
COL takısı dikey nitelikte ROW takısı yatay nitelikte bir pencere oluşturmak için kullanılır.
<FRAMESET COL=100,50,*> komutu bundan sonra üç sayfanın tanımı yapılacağını, bu sayfaların kolon nitelikli olacağını, bunlardan iki tanesinin sabit uzunluklu, üçüncüsünün uzunluğunun ise değişebilir olduğunu gösterir. Tırnak içinde sabit bir sayı ve yıldız kullanabileceğiniz gibi %30,%70″ bir yüzde değer de belirtebilirsiniz, bu durumda framein boyutu sayfanın boyutu göz önüne alınarak otomatik olarak ayarlanır. <FRAMESET> takısı </FRAMESET> ile bitirilmeden önce iç içe kullanılarak komplike pencere tanımları yapmanıza izin verir.
<FRAME>
Bu tag ise <frameset> ile başlayacağınızı belirttiğiniz sayfaları oluşturmakta kullanılır ve sayfanın genel yapısını belirler. <frame> takısının iki web tarayıcısının da desteklediği 6 adet takısı vardır.
SRC=URL/DOSYA_ADI Pencere içerisine yüklenecek dosyayı seçmek için kullanılır. Bu değer sunucu içinde herhangi bir dosya olduğu gibi değişik bir Internet adresi de içerebilir.
NAME=FRAME_ADI Daha sonra sayfayı çağırmak için referans olarak kullanılacak isim bu değere atanmalıdır.
MARGINWIDTH=DEĞER Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.
MARGINHEIGHT=DEĞER Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.
SCROLL=AUTO/YES/NO Kaydırma çubuklarının durumunu belirler.
NORESIZE Pencerenin fare yardımıyla genişletilip daraltılamamasını sağlar.
<NOFRAME>
Bu takı iki çerçeveyi oluşturacak sayfada kullanılır ve frameleri desteklemeyen web tarayıcısında sayfanın görünümünü oluşturur. Web tasarımcısı <noframe> ve </noframe> takıları arasına <HTML>, <BODY> taglarını barındıran tam bir HTML sayfası girebilir.
Son olarak frameleri tanımlayan sayfada bulunmayan fakat framein tanımladığı sayfaya koyabileceğiniz bir tag daha vardır. <BASE TARGET=pencere> tagı o pencere içerisinden bir linke tıklandığında kaynağın hangi pencerede açılacağını belirler.
Nelere dikkat etmeli ?
Framelerin kullanımını ve komutlarını anlatırken dikkat etmeniz gereken unsurların bir kısmındanbahsettik, ama yine de Internet üzerinde rastladığımız sayfalarda sık yapılan hataları belirtelim. Böylece siz de ilk deneyimlerinizde bu hatalardan kaçınabilirsiniz.
Frame içindeki bir sayfada dışarıya bir referans bulunuyorsa <A HREF= ile başlattığınız tag içinde mutlaka TARGET=_TOP veya TARGET=_BLANK takılarını kullanın. Bunu yapmazsanız frameli sayfanız içinda başka bir frameli sayfa açılması veya küçücük pencerenize sığmayacak bir sitenin yüklenmesi kaçınılmaz olur.
Frameinizi tasarlarken kaydırma çubuklarının otomatik olmasına özen gösterin. Sayfanın içerisinde yeterince içerik olmasa bile sayfa kenarlarında kaydırma çubuklarının bulunması kullanıcıya rahatsızlık verecektir.
Framelerin içeriğini her zaman iyi kontrol edin. Çerçevelerden birini menü olarak kullanıyorsanız o çerçeve içerisinde yanlışlıkla başka bir sayfanın açılmasına mahal vermeyin.
Pencerelerden bir tanesini kaydırılamaz olarak atıyorsanız ya bu framein genişliğini ve yüksekliğini sabit olarak atayın ya da sayfayı 640*480 çözünürlüğe uygun olarak tasarlayın. Bunu uygulamazsanız
640*480 çözünürlükte framein içeriğinin bir kısmının görülmesi kullanıcı ne yaparsa yapsın mümkün olmayacaktır. Değişik çerçeve stilleri için kaynak kodlar
<FRAMESET COLS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAME SRC=2.htm NAME=2″>
</FRAMESET>
<FRAMESET ROWS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAME SRC=2.htm NAME=2″>
</FRAMESET>
<FRAMESET ROWS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAMESET COLS=100,*>
<FRAME SRC=2.htm NAME=2″>
<FRAME SRC=3.htm NAME=3″>
</FRAMESET>
</FRAMESET>
<FRAMESET COLS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAMESET ROWS=100,*>
<FRAME SRC=2.htm NAME=2″>
<FRAME SRC=3.htm NAME=3″>
</FRAMESET>
</FRAMESET>
-
<FRAMESET COLS=100,*>
<FRAME SRC=1.htm NAME=1″>
<FRAMESET ROWS=100,*>
<FRAME SRC=2.htm NAME=2″>
<FRAME SRC=3.htm NAME=3″>
<FRAME SRC=4.htm NAME=3″>
</FRAMESET>
</FRAMESET>