Ders Adı: Web Tasarımı - Frame
Kategorisi: Tablolar, Frameler, Formlar
Ekleyen: zebaniz - Tarih: 07.11.2005 - 21:38

Web Tasarımının bu bölümünde browser penceresinde görünen birden fazla HTML sayfasını içeren "Frame" leri inceleyeceğiz.
Frame'ler [1]

Bölünen Pencereler:
Sayfalarınızın aşağılara doğru çok uzun olduğu zaman "navigasyon" menülerinin yukarıda kalması ve sayfanızda aşağıya gidildiğinde kaybolması pek çok zaman ciddi bir sorun olarak karşımıza çıkıyor. FRAME'ler burada yardımımıza koşuyor, internet Explorer ve Netscape'in 3. kuşak browser'larından beri frame yapısı destekleniyor.
Peki 3 tane pencere tek bir HTML'i mi kullanıyor? Tabii ki hayır. FRAME yapısını belirten bir HTML dosyamızın yanında her pencere için ayrı bir HTML dosyası kullanacağız. Karışık gibi görünse de örnekleri verdiğimizde daha iyi anlayacağınızdan eminiz.
Frame sayfası nasıl hazırlanır?
Frame aslen bir kalıp nileliğindedir. Kalıbın şeklini belirlemek size kalmış. Bu kalıpla hangi bölüme hangi sayfa gelecek, boyutu kaç olacak gibi değişkenler belirtilir.
Günümüzün web tasarım araçları frame'leri başarıyla desteklemektedir.
FrontPage 2000, Dreamweaver, 1st Page 2000 gibi... Ama ne yazık ki kullandığımız FrontPage Express'in çıkış tarihi itibariyle böyle bir desteği bulunmuyor. Ama sonuçla frame'lere hakim olmak için her durumda Notepad desteği gerekiyor.
Emre, sayfalarında frame yapısı kullanmayacak olsa da gelin, hep beraber onun sayfalarım frame'li bir yapıya dönüştürelim. Ama öncelikle FRAME komutu nasıl kullanılır, parametreleri nelerdir bir gözden geçirelim.
Frame tanımlama sayfamızda BODY komutunu kullanmamız gerekmekte. Klasik girişimizi yazalım:

<HTML>
<HEAD>
<TITLE>
Frame'li ilk sayfamız</TITLE>
</HEAD>


Normal sayfalarımızda BODY komutunun yerine burada FRAMESET komutunu kullanacağız. Ama sayfamızın nasıl görüneceğini de önceden belirlememiz gerekiyor.
Örneğin önce iki dikey parçaya, sonra da sağda kalan dikey parça iki yatay bölüme ayrılsın diye planlayalım.
Solda kalan dikey parçanın genişliği 150 piksel olsun.

<FRAMESET cols="150,*" framespacing="0" frameborder="0" border="0">

Bu komutta * işareti "ekranın kalan bölümünü kapla" anlamına gelir.
FRAMESPACİNG, FRAMEBORDER ve BORDER komutlarının yaptığı görev aynıdır: framelerin arasında kalan kenar boşlukları veya kenar kalınlığı. Burada neden birtanesini kullanmadık diye sorabilirsiniz. FRAMESPACING ve BORDER komutları internet Explorer, FRAMEBORDER komutu ise Netscape'in değişik versiyonlarında kullanılması gereken kumutlardır. 
Kodlamaya devam edersek;

<FRAME name="soltaraf" target="sag_alt" NORESIZE scrolling="no" src="menu.html">

Soldaki frame'mimizin ismini "Soltaraf" olarak belirlediğimiz görüyorsunuz. Frame'lerimize isim vermek, Linklerimizde sayfaların hangi frame'de açılacağını belirtmek içindir.
TARGET parametresi ile linklerimizin "sag_alt" isimli frame penceresine açılacağını göstermiş olduk.
NORESIZE parametresi frame sınırlarımızın mouse'la hareket ettirilemenesi içindir, Eğer site zıya retçiler iniz tarafından kenarların hareket ettirilebilmesini istiyorsanız bu parametreyi kullanmayın. Ama sol tarafta değişik arkaplanlar kullanabileceğinizi göz önüne alarak tasarımın bozulmaması için N0RESIZE komutunu kullanmanızı önerebiliriz.

SCROLLING parametresi kullanarak yanda kaydırma çuıbuğunun çıkıp çıkmamasını belirtebilirsiniz.
Scrolling="yes" her zaman yanda kaydırma çubuğunu çıkarır. Scrolling="no" sayfa aşağılara kadar uzasa da kaydırma çubuğu çıkmayacaktır. Scrolling="auto" komutu ile de sayfa ekrandan uzunsa ancak kaydırma çubuğu görüntülenir.
SRC parametresi ile de soldaki frame'mimize hangi HTML dosyasının yükleneceğini belirlınektir. Bu örneğimizde soldaki framemimiz " menü.html" dosyası olacaktır.
Burada unutulmaması gereken nokta ise frame sıralarıdır. Dikey frameler ise soldan sağa, yatay frameler ise yukarıdan aşağıya konumlanırlar.
Şimdi sağdaki Frame'mimize geldi sıra. Bu frame'mizi de ikiye ayıracaktık. Üstteki bölüme farklı bir HTML sayfası gelecektir. Burada verilen linkler yine sağ alttaki bölüme gitsin. Bunun için tekrar FRAMESET açmak gereklidir.

<fameset rows="65,'">
<frame name="sag_ust" target="sag_alt" scrolling="no" src="ust.html"> <frame name="sag_alt" scrolling="auto" noresize src="alt.html"> </frameset>

Burada da dikkat ettiğiniz üzere FRAMESET içerisinde kullandığımız ROWS parametresi ile burada açtığımız frame'in yatay iki pencereden oluştuğunu ve de üst frame'in genişliğinin 65 piksel olduğunu belirttik.
Hemen altındaki FRAME komutları ile üst taraftaki frame isminin sag_ust olduğunu ve ust.html adlı dosyayı yüklemesini, alttaki framede ise yandaki kaydırma çubuğunun sayfanın uzunluğuna göre ayarlanmasını belirttik.
Farkettiyseniz </FRAMESET> komutu ile en son açtığımız FRAMESET'i kapatmış olduk. Fakat ilk FRAMESET'imiz hala açık. Onu kapamadan önce tercihen ekleyebileceğimiz bir iki komut daha bulunuyor.

<NOFRAMES> komtu bize, browserlarında FRAME desteği olmayan veya bu özelliği kapatılmış olan ziyaretçiler İçin ayrı bir bilgi veya ayrı bir sayfa kullanma olanağı veriyor.

<NOFRAMES>
<BODY>
<H1>
FRAME Lİ SAYFA</H1><BR>
Bu Sayfa Frame destekleyen browser'larda
görülebilmektedir.
</BODY>
</NOFRAMES>

Yukandaki koddan da anlayabileceğiniz üzere NOFRAMES komutları arasında tıpkı normal bir web sayfası gibi BODY komutunu kullanabileceğiz. Tabii kapatmak kaydıyla.
Böylelikle FRAME desteği olmayan eski browser kullanıcılarına, bu sayfanın FRAME'li bir sayfa olduğunu ve de kullandığı browser'la bu sayfayı göremeyeceğine dair bir mesaj vermiş olduk. Ve de son noktayı koyarsak

</FRAMESET> </HTML>

Böylelikle ana omurga sayfasını bitirmiş olduk. Web üzerinde kullanılan belli başlı FRAME çeşitlerini ve HTML kodlarını sıralarsak

Ana ve İçerik Menüsü

 
   

Üstteki ana menü bölümünden giden linkler alt menüsü olan içerik menü bölümüne gider, içerikten ise ana sayfaya yönlenir.

<frameset rows="64,*" framespacing="0"
frameborder="0" border="0">
<frame name="anamenu" scrolling="no" noresize target="icerikmenu" src="banner.html">
<frameset cols="150,*" framespacing="0"
frameborder="0" border="0"><frame name"="icerikmenu" target="anasayfa" src="menu.html"><frame name="anasayfa" src="anasayfa.html">
</frameset>
<noframes>
<body>
<H1>FRAMELİ SAYFA</H1><BR>
Bu Sayfa Frame destekleyen browserlarda
görülebilmektedir.
</body></noframes>
</frameset> 
Frame'ler [2]
Tek Sol Menü
Bu tip frame'de sadece solda bir menü bulunmakta.Tıklanan linkler, sağdaki pencerede açılıyor. Genelde en çok kullanılan frame tipidir.

frameset cols="150,*" framespacing="0"
frameborder="0" border="0"
frame name="menu" target="anasayfa"
src="menu.html"
frame name="anasayfa"
src="anasayfa.html"
</noframes>
</body>
<H1>
FRAMELİ SAYFA</H1><BR>Bu Sayfa Frame destekleyen browserlarda
görülebilmektedir.
</body>
</noframes>
</frameset> 


Alt Menü
Bu örnekteyse altta küçük bir menü frame'i görüyoruz. Tıklanan linkler üstteki ana sayfa bölümüne gelmekteler.
 

<frameset rows="*,64" framespadng="0"
frameborder="0" border="0">
<frame name="anasayfa" src="anasayfa.html">
<frame name="altmenu"
scrolling="no" noresize target="anasayfa"
src="menu.html">
<noframes>
<body>
<H1>
FRAMELİ SAYFA</H1> <BR>Bu Sayfa Frame destekleyen browserlarda
görülebilmektedir.
</body>
</noframes>
</frameset>
Üst-Alt Menüler ve İçerik Menüsü
 
 
Bu tip frame yapısı ekranda biraz fazla yer kaplaması haricinden oldukça dekoratif olabiliyor. Kodda da dikkat edeceğiniz üzere üst frame ( orta frameset - sağ ve sol ) ve alt frame şeklinde düzenlenmiş...

<frameset rows="64,*,64" framespacing="0" frameborder="0" border="0"> <frame name="ust" scrolling="no" noresize target=" icerik" src="ust.html"> <frameset cols="150,*" framespacing="0" frameborder="0" border="0"> <frame name="icerik" target="anasayfa" src="sol_menu.html">
<frame name="anasayfa"
src="anasayfa.html">
</frameset>
<frame name=
"alt" scrolling="no" noresize
target=
"icerik" src="alt.html">
<noframes>
<body>
<H1>
FRAMELİ SAYFA</H1><BR>
Bu Sayfa Frame destekleyen browserlarda
görülebilmektedir.
</body>
</noframes>
</frameset>


Genel Yapı

Tipik hiyerarşik düzendir. Web sitelerinde en çok kullanılan bir diğer frame yöntemidir.

<frameset cols="150,*" framespacing="0"
frameborder=
"0" border="0">
<frame name=
"sol" scrolling="no" noresize
target=
"sag_ust" src="menu.html">
<frameset rows=
"20%,'" framespacing="0"
frameborder=
"0" border="0">
<frame name=
"sag_ust" target="sag_alt"
src=
"sagust.html">
<frame name=
"sag_alt" src="sagalt.html">
</frameset>
<noframes>
<body>
<H1>
FRAMELİ SAYFA</H1><BR>
Bu Sayfa Frame destekleyen browserlarda
görülebilmektedir.

</body>
</noframes>

</frameset>

Sizde buradaki verilmiş belirli değerleri degiştirerek kendinize uygun bir FRAME yapısı çıkarabilirsiniz. Gelin şimdi Ahmet'in sayfasını FRAME'li bir yapı haline getirelim...
Daha önceden tablolu yapı kullanarak hazırladığımız sayfayı nasıl FRAME'li biryapıya dönüştürebiliriz.
Ahmet'in sayfasında çok kolay ikiye böleceğimiz bir yapı görüyoruz. Soldaki alanı seçip menu.html olarak ayrı bir dosyaya kaydedin. Sayfamızın diğer kısmını ise anasayfa.html olarak ayırın.
Şimdi "Web Sayfam" klasörünüze sağ tuşla tıklayıp, yeni bir metin belgesi oluşturun. Dosyanın ismini index2.html olarak değiştirin. Hala dosya simgesi metin belgesi olarak görünüyorsa, herhangi bir klasörden "Klasör Seçenekleri (Polder Options)"a gelin. Görünüm (View) sekmesinden "Bilinen dosya türleri için dosya uzantılarını gizle (Hide file extensions lor known file types)'in seçimini kaldırın ve tekrar deneyin.
Donatılar'dan Not Defterini açın ve bu dosyayı yükleyin.
Şimdi HTML kodumuzu yazmaya başlayalım. Soldaki frame'in genişliği oradaki tablomuz kadar olacaktır. 150 genişlik olarak belirtelim ve kaydırma çubuğu olmasın.

 

Frame'ler [3]
<HTML> <HEAD> <TITLE>Ahmet'nin Web Sayfası</TITLE></HEAD>
<FRAMESET cols=
'150,*' framespacing="0" border="0" frameborder="0">
<FRAME name="solmenu" target="anaframe" src="menu.html" NORESIZE scrolling="no">
<FRAME name="anaframe"
src="anasayfa.html" scrolling="auto">
<NOFRAMES>
<BODY>

Bu sayfa ancak Frame Destekli Browserlarda Görünebilir
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Böylelikle 2 ayrı web sayfasını birleştirmiş olduk. Ana sayfa ne kadar uzun olursa olsun, kaydırma çubuğu çıkacaktır.
Burada dikkat edilmesi gereken püf noktalarından bir kısmı ise söyle:
1.Link hedeflerinin doğruluğu:
Verdiğiniz linklerin değişik pencerelere gitmesi oldukça kötü görünlüler yaratabilir. Örneğin menü için ayırdığınız dar alanda ana sayfanın çıkması. Bu tip hatalardan kullanıcıların sayfanızı iyi görememesi hatta hiç okuyamaması gibi problemler çıkabilir. Frame sayfasında verdiğiniz isimleri ve hedefleri kontrol edin. Tanımlanmamış bir isime yapılan "target" parametresi ile verilen link bulunduğu frame'e döner. Genişliği az bir frame de örneğin anasayfanızın görünmesi hoş olmaz tabii.

 

 

2.Kaydırma çubuğu ve sayfa orantıları:
Yaptığımız sayfalarda eğer bir frame'i kaydırma çubuğu olmaksızın yapacaksanız, o sayfayı en küçük çözünürlüklerde dahi denemeniz, sayfa bütünlüğünüz açısından önemlidir. Ahmet'in sayfasında olduğu gibi bir frame görünmesi hoş olmaz. Frame yapısı kullanıyorsanız (bir frame'inizi menü için ayırdıysanız) menü uzunluğuna bağlı olarak sizin kullandığınız çözünürlükle güzel gürünmesine rağmen 640x480 çözünürlükte menü öğelerinizin bir kısmı aşağıda kalabilir. Kaydırma çubuğunuz olmadığı için sayfanızın bir kısmına ulaşamayabilir.
3. Başka frame'li sayfalara link:
Başka frame'li sayfalara verdiğiniz linklerde frame içinde başka frame açılacağı için görüntü oldukça çirkin olacaktır. Bunu engellemek için frame'li sayfalarda verdiğiniz linklerde target="_top" parametresini kullanmak en akıllıca fikir olacaktır, örnek vermek gerekirse: <a href="http://baskaframelisayfa.com" target="_top">. Eğer ziyaretçilerinizin sizin sayfanızdan çıkmadan diğer sayfaya gitmesini isterseniz target="_blank"
parametresi işinizi görecektir, örneğin <a href="baska.html" target="_blank">
4.Bir başka bilgisayarda daha büyük veya daha küçük olan frame'ler;
Genelde ana veya açıklama yapacağınız uzun sayfaların görüntülenmesinde böyle sorunlar çıkabilmektedir. Bir çok kişinin ekran çözünürlüğünün değişik olabileceği göz önüne alınırsa, frame boyutlarının iyi hesaplanması gerekmektedir. Ama önemli olan en büyük frame'in büyüklüğünün * (asteriks) ile gösterilmesidir.

Örneğin: Alt alta üç yatay frame'in HTML kodu:

FRAMESET rows="60,*,30" framespading="0" frameborder="0" border="0">
<FRAME name="ust" src="ust.html" target="engenisbolum>
<FRAME name="engenisbolum" src="anasayfa.html">
<FRAME name="alt" src="alt.html" target="engenisbolum">
</FRAMESET> 

Gördüğünüz üzere Üst bölümde 60 piksel, alt bölümde 30 piksel yüksekliklerinde 2 frame ve ortada, genişçe bir frame oluşacaktır. Ekran çözünürlüğü ne otursa olsun yukarıda ve alttaki frame'lerin boyutları aynı kalacaktır.
Frame boyutlarını hep piksel olarak verdik. Bunları Yüzde değer olarak da verebiliriz.

<FRAMESET cols="25%,*">

gibi.. Ama verdiğimiz tüm yüzde değerlerde de söylediğimiz gibi tasarımın akıcılığını bozabilecek bir çok öğe bulunmaktadır.
HTML 3.0'ın çıkışı ile birlikte oldukça popüler olan FRAME'li sayfaların sayısı günümüzde giderek azalmaktadır. Sebebi ise gelişen tasarım ve interaktif sayfaların frame yapısna ihtiyaç duymadan kullanıcılarına oldukça etkileyici sunumlar yapabilmeleridir.
Siz de sayfalarmızda FRAME yapısı kullanmak istiyorsanız, yapmanız gereken yukarıda anlattığımız kademeleri izleyerek, adım adım ilerlemek. Unutmayın ki iyi bir web sayfası hazırlamak istiyorsanız, Not Defteri'ne oldukça işiniz düşecektir.

 

Web sayfalarınızı öncelikle kağıt üzerinde ayırdıktan sonra FRAME'lere ayırın.


Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=69
Web Sitesi: http://www.aeyStudio.com