Bekir Kemal Ataman's Macworld Türkiye Articles Page

Elektronik iletisim okulu kösesi --19-- Eylül 1998

Frame'ler

Web tarayici olarak Microsoft Internet Explorer ya da Netscape Navigator'in 2.0 veya daha yeni bir sürümünü kullaniyorsaniz, baglandiginiz bir kisim sitelerde ekranin bir kaç parçaya bölündügünü ve bu parçalarin her birinin ötekinden bagimsizmis gibi hareket ettigini görmüssünüzdür. Frame adi verilen bu yapi içinde yer alan parçalarin her biri gerçekten de digerlerinden bagimsiz kendi basina birer web sayfasidir ve bütünüyle ayri bir dosyada yer alir.

Bunlari bir arada tutmak için ise yapistirici islevi gören, digerlerinden de bagimsiz ayri bir web sayfasi kullanilir. Bu yapistirici sayfayi ise normal olarak görmezsiniz. Bu tür sayfalar ancak frame desteklemeyen eski model web tarayicilarla görülebilir; o da gerekli kodlar sayfanin tasarimi sirasinda yazilmissa.

Simdi hemen örneklere geçelim ve bu isin nasil yapildigina bakalim. Ilk yapmamiz gereken is ekrani kaça bölecegimize ve bu parçalarin birbine oranlarinin ne olacagina karar vermek. Önce basit bir örnekle baslayalim ve mesela ekrani dikey olarak ikiye bölelim. Bunlarin oranlari ise sabit degil de ekranin büyüklügüyle beraber degisen cinsten olsun. Diyelim ki soldaki parça ekranin %30'sini sagdaki parça ise %70'ini kaplasin.

Bunun için solda ve sagda yer alacak iki basit sayfa hazirlayalim. Bir tanesi söyle olsun:

<HTML><HEAD>
<TITLE>A Sayfasi</TITLE></HEAD>
<BODY BGCOLOR="RED" TEXT="YELLOW">
Bu sayfanin adi <H1>"A Sayfasi"</H1> olsun
</BODY></HTML>

Ikincisi için ise yukarida "A" olan yerleri "B" yapalim ve renklerini degistirelim..

Bunlari birada tutmak için bir de yapistirici sayfaya ihtiyacimiz olacak. Bu sayfaya, server için kullanilan isletim sistemine bagli olarak genellikle index.html veya default.html gibi bir ad vermek zorunda kalabilecegimizi de hatirlattiktan sonra kodunu yazmaya baslayalim:

<HTML><HEAD>
<TITLE>Yapistirici Sayfa</TITLE></HEAD>
<FRAMESET COLS="30%, 70%">
<NOFRAMES>
<BODY BGCOLOR="PURPLE" TEXT="YELLOW" LINK="YELLOW" VLINK="YELLOW">
<CENTER><H1>DIKKAT!</H1>
Bu metni okuyabildiginize gore kullandiginiz tarayici "frame" desteklemiyor demektir. Oysa bu sayfalar "frame" destekli bir tarayici icin tasarlandi. Dolayisiyla su anki programinizi kullanarak bu sayfalardan keyif almaniz biraz zor. Iyisi mi siz "frame" destekli bir tarayici ile tekrar gelin.
<p>Hazir gelmisken bir goz atayim diye israr ediyorsaniz, o zaman <A HREF="AAA.HTML">buradan buyurun.</A>
</BODY></NOFRAMES>
<FRAME BORDER=1 SCROLLING="AUTO" NORESIZE SRC="AAA.HTML" NAME=SOL>
<FRAME BORDER=1 SCROLLING="AUTO" NORESIZE SRC="BBB.HTML" NAME=SAG>
</FRAMESET>
</HTML>

Sekil 1

Burada <NOFRAMES>...</NOFRAMES> etiketleri arasindaki bölüm, yukaridaki metinden de anlasilacagi üzere, kullandiklari program frame desteklemeyen ziyaretçiler için yazilmis bir açiklama. Buraya yazacaginiz metni kendi üslubunuza göre degistirmek mümkün. Bu tür ziyaretçilere görünecek olan ekran ise Sekil 1'dekine benzeyecek. Frame desteklemeyen bir tarayici bulamadigimdan bu sayfayi size gösterebilmek için epey canbazlik yaptigimi söyleyeyim. Ama sonunda Netscape'in Composer modülünde istedigim görünütüyü alabildim.

<NOFRAMES>...</NOFRAMES> disinda kalan komutlar ise ana çatiyi olusturan unsurlar. Görülecegi üzere, bunlar <FRAMESET>...</FRAMESET> etiketleri arasinda yer aliyor. <FRAMESET> etiketinin içindeki unsurlar ile bölümlemenin nasil yapilacagi tanimlaniyor. Burada COLS yerine ROWS ifadesi kullanilirsa, ekran dikey yerine yatay olarak bölünüyor. Ortaya çikan görüntü Sekil 2'de.

Sekil 2

<FRAME> etiketinin içindeki unsurlarda ise bir kisim özellikler tanimlaniyor. BORDER="..." ifadesi ile bir sinir çizgisi çizilip kalinligi belirtiliyor. Kalinlik ölçüsü pixel cinsinden. SCROLLING="..." ifadesi, tanimlanan sayfa kendisine ayrilan alana sigmadigi takdirde ne yapilacagini tanimliyor. Burada YES degeri kullanilirsa o frame bölümünün yanina bir kaydirma çubugu ekleniyor. Böylece ekrana sigmayan bölümler varsa, gelen ziyaretçinin o bölümleri de görmesi saglaniyor. NO degeri kullanilirsa, sayfanin estetik görünümüne fazlasiyla (belki de gereginden fazla) deger verildigi ve ekranda bir kaydirma çubugunun görüntülenmesinin istenmedigi belirtiliyor. Bu durumda, görüntü ziyaretçinin ekranina tamamen sigmiyorsa yapacagi bir sey yok demektir. Yani biraz "ekmek bulamazlarsa pasta yesinler" demek gibi bir sey. Kisaca, eger görüntünün ekrana her durum ve sartta sigacagindan emin degilseniz biraz ukalalik oluyor. AUTO degeri ise bu isi tarayicilara birakmak için düsünülmüs bir ara çözüm. Sayfayi, ekrana sigiyorsa oldugu gibi, sigmiyorsa kaydirma çubuklari ile beraber görüntülemek için bir cins joker.

Geçen sayilarda verdigim bir püfü burada tekrar hatirlatayim. Sayfalarinizi tasarlarken 14 inch bir monitör ve 640 X 480 pixel'lik bir çözünürlük kullanin. Böylece herkesin tasarladiginiz sayfayi sizin düsündügünüz sekilde görmesini garanti etmis olursunuz. Bu basit kurala riayet etmeyen kötü tasarim örnekleri görmek için ise bu tür bir monitör kullanarak surf yapmaya çikin ve mesela http://www.ankara.edu.tr adresine gidip Ankara Üniversite'sindeki herhangi birinin adresini aramayi deneyin. Arama fonksiyonu ile ilgili olarak sol tarafta verilen link, baska iki linkle beraber ekranin disinda kaldigi için kullanamayacaksiniz. Ama Allah'tan artik sag taraftaki ekranin altinda metin tabanli linkler var. Sözkonusu sitenin webmaster'i kendisine yazdigim bir dünya mesajdan sonra, SCROLLING="NO" ifadesini AUTO yapmak yerine böyle bir çözümü tercih etti. Eh bu da baska bir yogurt yeme tarzi...

NORESIZE ifadesi, sayfanizi ziyarete gelen kisinin, sizin belirlediginiz oranlari (kendi tarayicisinda) degistiremesini sagliyor. Eger ziyaretçilere bu imkani tanimak istiyorsaniz FRAME etiketi içinde bu ifadeyi kullanmamaniz yeterli.

Bundan sonra gelen unsurlar ise isin can alici kismini olusturuyor. SRC ifadesi sözkonusu frame penceresi içinde hangi dosyanin görüntülünecegini belirtiyor. NAME ifadesi ise bu pencereye verdiginiz ismi belirtiyor. Aman bu isim meselesini küçümsemeyin, çünkü frame kullanacaksaniz bu isimlere çok ihtiyaciniz olacak.

Daha karmasik yapilara geçmeden önce, örnegimizdeki FRAME etiketinin iki kez kullanildigina ve bunlarin kullanilis sirasinin önemli olduguna dikkat çekelim. FRAMESET etiketi içinde %30 ve %70 olarak verdigimiz ölçülerin ilki solda ikincisi sagda yer alacak pencereler içindi. Ayni sekilde FRAME etiketlerinin de ilki sol taraftaki ikincisi sag taraftaki pencere için

Bunlarin disinda FRAME etiketi içinde yer alabilecek ama burada kullanmadigim iki unsur daha var: MARGINWIDTH="..." ve MARGINHEIGHT="...". Bunlar, biraz kelime islem programlarindaki marj ayarlarina benziyor. Ilki sagda ve solda birakilacak bosluklari, ikincisi ise üstte ve allta kalacak bosluklari belirtiyor. Burada kullanilacak degerler yine pixel cinsinden.

Daha karmasik yapilara dogru

Simdi daha karmasik pencereler tasarlayalim. Diyelim ki penceremizi önce üstten %30'luk bir dilimle yatay olarak böldük. Sonra altta yer alan kismi solda %20'lik ortada %40'lik ve sagda %40'lik üç dilime böldük. Yerden tasarruf etmek için NOFRAME bölümünü yazmadan geçecek olursak kodumuz söyle olacaktir:

<HTML><HEAD>
<TITLE>Yapistirici Sayfa</TITLE></HEAD>
<FRAMESET ROWS="30%, 70%">
<FRAME BORDER=1 SCROLLING="AUTO" NORESIZE SRC="AAA.HTML" NAME=UST> [Bu en üstteki kisim.]
<FRAMESET COLS="20%, 40%, 40%">
<FRAME BORDER=1 SCROLLING="AUTO" NORESIZE SRC="BBB.HTML" NAME=SOL>[Bu en soldaki kisim.]
<FRAME BORDER=1 SCROLLING="AUTO" NORESIZE SRC="CCC.HTML" NAME=ORTA>[Bu ortadaki kisim.]
<FRAME BORDER=1 SCROLLING="AUTO" NORESIZE SRC="DDD.HTML" NAME=SAG>[Bu en sagdaki kisim.]
</FRAMESET>
</FRAMESET>
</HTML>

Sekil 3

Burada köseli parantez içindeki bilgiler yalniz açiklama olarak yer aliyor. Bunlari HTML kodunun içinde yazarsaniz bir etkisi olmaz. Yukaridaki kodun ekran görüntüsü sekil 3'teki gibi olacaktir.

Yukaridaki örneklerde % ile ifade edilen göreli büyüklükler yerine net ifadeler kullanmak da mümkün. Mesela 800 X 600 pixel çözünürlükteki bir monitör için <FRAMESET COLS="%20, %80"> yerine <FRAMESET COLS="160, 640"> demek de mümkün. Tabii bu sayfaya baglanacak herkesin bu çözünürlükte bir monitör kullanacagina eminseniz.

Buna karsilik, <FRAMESET COLS="75, 3*, 2*, 125"> gibi karma bir ifade kullanarak, ekranin sol tarafinda 75 pixel'lik, sag tarafinda 125 pixel'lik birer pencere açilmasini, geri kalan bölümün ise sol tarafta beste üç, sag tarafta beste iki orani korunacak sekilde bölünmesini de isteyebiliriz.

Adresleme

Frame ile tanimlanan sayfalar otomatik olarak yüklenir. Ama, bu varsayilan sayfalar yüklendikten sonra çerçevelerin herhangi birini sabit tutup digerlerinden birini degistirmek istiyorsaniz ne olacak? Yani diyelim ki tanimladiginiz parçalarin birini menü olarak kullanmak ve buradaki unsurlar üzerinde tiklandikça diger çerçevede baska baska sayfalarin görüntülenmesini istiyorsunuz. Bunu nasil yapacagiz?

Yukarida <FRAME> etiketinin içindeki unsurlari tanimlarken NAME="..." ifadesini küçümsememek gerektigini söylemistim. Iste simdi onlara ihtiyacimiz olacak. Ise basindan baslarsak: Önce ilk örnekteki yapistirici dosyayi yazip çatiyi kurduk. Sonra diyelim sol tarafta görüntülenecek dosyanin (bu örnekte AAA.HTML sayfasinin) menü islevini görmesine karar verdik. Bu durumda bu dosyanin HTML kodunu yazarken tanimladigimiz her linkin <A HREF="..."> etiketinin içine bir TARGET="..." ifadesi eklememiz gerekecek. Bu ifadenin içinde yer almasi gereken bilgi ise, <FRAME> etiketinin içinde tanimladigimiz çerçevenin adi. Bunu örnekleyerek açiklayacak olursak, AAA.HTML dosyasinin kodu su sekilde olacaktir:

<HTML><HEAD>
<TITLE>A Sayfasi</TITLE></HEAD>
<BODY BGCOLOR="RED" TEXT="YELLOW" LINK="YELLOW" VLINK="YELLOW">
Menu<UL>
<LI><A HREF="BBB.HTML" TARGET="SAG">B sayfasi</A>
<LI><A HREF="CCC.HTML" TARGET="SAG">C sayfasi</A>
<LI><A HREF="DDD.HTML" TARGET="SAG">D sayfasi</A>
<LI><A HREF="EEE.HTML" TARGET="SAG">E sayfasi</A>
</UL></BODY></HTML>

Sekil 4

Buradaki örnegin INDEX.HTML dosyasi görüntülendiginde ekrana gelecek görüntü Sekil 4'teki gibi olacaktir. Sol taraftaki linklere, örnegin en alttakine tiklandiginda olusacak görüntü ise Sekil 5'te oldugu gibi sag taraftaki çerçeve içinde görüntülenecektir.

Sekil 5

Baska yerlerde de oldugu üzere, burada kullanilacak linklerin göreli olmasi zorunlulugu yok. Yani bu örnegimizde sag taraftaki pencere içinde kendi tasarladiginiz bir sayfa yerine diyelim Macworld'ün sayfasinin görüntülenmesini istiyorsaniz, o takdirde yazacaginiz kod satiri söyle olabilir:

<LI><A HREF="http://www.macworld.com.tr" TARGET="SAG">Dergi</A>
Burada, <A HREF="..."> etiketinin içinde TARGET="..." ifadesini kullanmazsaniz, linkin üzerine tiklandiginda, ilgili sayfa sag tarafta görüntülenmek yerine tamamen yeni bir pencere açilarak orada görüntülenir.

Bir kaç küçük püf daha

Hazir pixel veya yüzde cinsinden ifade edilen araçlardan bahsetmeye baslamisken, sayfanizi güzellestirmek için kullanabileceginiz bir küçük etiketten daha bahsedeyim. Yatay çizgi çekmekte kullanilan bu etiket için kullanilabilecek ölçüler de ayni sekilde pixel ve yüzde cinsinden veriliyor.
<HR SIZE="2" WIDTH="100%">
Yalniz burada SIZE="..." ifadesi içinde yer alan deger pixel cinsinden ve çizginin kalinligini belirtiyor; WIDTH="..." ifadesi içinde yer alan deger ise yüzde cinsinden ve çizginin (ekranin büyüklügüne kiyasla) genisligini belirtiyor.
Kelime islem programlarinda ENTER tusuna bastikça bos satir eklendigini hepimiz biliriz. Ama web sayfasi içinde pespese <P> etiketi yazmakla ayni seyi yapamadigimizi sanirim simdiye kadar kesfetmissinizdir. Paragraf etiketi, beraberinde baska herhangi bir metin olmazsa etkisizdir. Bu yüzden metinler arasindaki bos satir miktarini arttirmak istiyorsaniz, her <P> etiketinin arkasindan ekranda görünmeyecek bir karakter yazmak gerekiyor. Dolayisiyla paragraf etiketlerini pespese siralamak yerine <Pi>nbsp ifadesini bir kaç kere pespese yazmayi deneyin. Istediginiz etkiyi yaratabildiginizi göreceksiniz.
Web süsleme sanatlarindan bahsederken, sayfaniza yerlestireceginiz resimlern yaninda yer alacak yazilarin nasil yerlestirilecegini de anlatmistim. Burada örnegin:
<IMG SRC="Filanca.jpg" HEIGHT="150" WIDTH="115" ALIGN="TOP">
etiketi içindeki TOP ifadesi yazilar hizalanirken resmin üst kenarinin kistas alinmasini belirtiyordu. Hizalamada resmin alt kenarinin kistas alinmasi için BOTTOM, ortasinin kistas alinmasi için ise CENTER degerlerinin kullanilmasi gerekiyordu. Yalniz bunlari yaptiginizda metnin yalnizca bir satirinin resim ile yanyana yerlestirildigini farketmissinizdir. Peki yazilarin resmin yanindan akmasini istiyorsaniz? O zaman kullanmaniz gereken deger LEFT veya RIGHT. Ilki resmi sol tarafa yerlestirip yazilari sag taraftan akitmaya yariyor. Ikincisinde ise resim sag tarafa dayanip yazilar soldan akiyor. Her ikisinde de resmin yanindan akacak metnin baslangiç noktasi <IMG> etiketinden hemen sonra gelen kisim.