Çerçeveler Web sayfalarının bir özelliği de çerçevelerin kullanılabilmesidir. Çerçevelerin herbiri aslında ayrı birer sayfadır, ancak hepsi bir sayfada kullanıcıya sunulmuştur. Çerçeveleri iki soylu amaç için kullanmak mübahtır: 1. Sayfayı gezerken, yanda bulunan yönlendiricilerin her zaman görülebilmesi için çerçeve kullanabiliriz, böylece kullanıcı sayfanın neresinde olursa olsun yönlendiricileri görebilir ve yönlendiricilere hemen ulaşabilir. 2. Sayfada yüklenmiş bazı yerler, diğer sayfalar boyunca sabit kalıyorsa, kullanıcıya durmadan aynı yerleri yükleteceğimize, o kısmı çerçeve halinde kullancıya bir defalığına yükletebiliriz. Bunlar çerçeve kullanmak için çok iyi nedenler. Ama kullanmamak için de güzel nedenlerimiz var. 1. Herkesin sizin gibi son model bilgisayar kurulumu yok ve her browser çerçeveleri desteklemiyor. Bana ne elalemin bilgisayar eskilerinden diyorsanız, şunu da ekleyim, her arama motoru da çerçeveleri desteklemez. 2. Paralel kayan çerçeveler kullandığımızda, sayfadaki konumumuzu gösteren scroll bar, sayfa tasarımımızın estetiğine pek birşey katmıyor açıkçası. 3. Bazen çerçevenin biri yükleniyor, diğeri yüklenmiyor. Ve yarım yüklenen siteler kullanıcıyı pek cezbetmiyor. Bunlar da olumsuz etkenler. Ama kullanıp kullanmamanız sizin kendi tercihiniz olmalı. Piyasada "frame kullanana hırbo derler" veya "frame'siz web sayfası olur mu be!" gibi uç kesimlerin propagandalarını dinlemek yerine, sayfanızın özelliklerine göre karar vermenizi tavsiye ederim. Çerçeve Oluşturma Çerçeveler <frameset>...</frameset> kodları arasında tanımlanır. Eğer yanyana çerçeveler istiyorsanız, cols="..." parametresini, eğer birbiri aşağısına çerçeveler istiyorsanız, rows="..." parametresini kullanırsınız. Tırnak içine kullanacağınız çerçevelerin genişliklerini yazacaksınız. Genişlikleri piksel cinsinden yazabileceğiniz gibi, yüzde olarak da yazabilirsiniz. İsterseniz çerçevenin genişliğini belirlemek zorunda değilsiniz; genişliğini belirtmek istemediğiniz çerçeve için " " işaretini koyabilirsiniz. Örneğin <frameset cols="200, ,50"> ifadesi, ilki 200 piksel genişliğinde, üçüncüsü 50 piksel genişliğinde üç sütunsal çerçeve söz konusudur; ikinci çerçevenin genişliği belirlenmemiştir, diğer iki çerçevenin genişliğini sağlayacak genişlikte olacaktır. Zaten tüm çerçevelerin genişlikleri belirtilmez, en az bir tanesine işareti konur. Çerçeveler; daha önce tanımladığımız üzere, sayfada başka sayfaların beraber gösterilmesini sağlarlar. Yani her çerçeve aslında bir web sayfasına bağlıdır. Bu nedenle çerçevelerin konumları veya büyüklükleri belirtmek yeterli değildir. O çerçevelerin hangi sayfayı göstereceğini belirtmeliyiz. Bunun için <frame src="..."> kodu kullanılır. Buradaki src parametresi çerçevenin göstereceği çerçevenin url adresini belirtiyor. Dilerseniz bir örnek yapalım. Bu örnekte daha önceden yazdığım ve isimlerime frame1.html, frame2.html ve frame3.html gibi üç web sayfasını kullanacağım. Dikkat etmeniz gereken şey: Çerçeve kullanacağınız zaman <body> kodunu kullanamazsınız. Kod: Tümünü seç<html> <head> <title>Sütunsal Çerçeveler</title> </head> <frameset cols="25%, ,25%"> <frame src="frame1.html"> <frame src="frame2.html"> <frame src="frame3.html"> </frameset> </html> Uygulamada neler yaptığımızı sizler anlamışsınızdır ama ben yine de anlatayım. Bu uygulamamızda <frameset cols="25%, ,25%"> ifadesi ile ikisi pencerenin %25'ini kaplayan üç sütunsal çerçeve tanımladık. Daha sonra herbirinin gösterdiği sayfaların adreslerini <frame src="..."> koduyla belirttik. Ve üç tane yanyana çerçevemiz oldu. İlk çerçevemiz "frame1.html" sayfasını, ikinci çerçevemiz "frame2.html" sayfasını ve sonuncu penceremiz "frame3.html" sayfasını gösteriyor. Dikkatinizi çekmiştir, son uygulamamız da çerçevelerin kalın kenarlıkları vardı. Bu kenarlıklar estetik açıdan pek tercih edilmez, bu nedenle <frameset> koduna border="0" parametresini atarız. Ne yazık ki her navigator bu parametreyi desteklemiyor. O nedenle frameborder="0" framespacing="0" border="0" parametrelerini kullanmanızı tavsiye ederim. Şimdi kenarlıksız, satırsal çerçevelere örnek verelim. Yine aynı sayfaları kullanacağım. Kod: Tümünü seç<html> <head> <title>Satırsal Çerçeveler</title> </head> <frameset rows="100, ,60" border="0" frameborder="0" framespacing="0"> <frame src="frame1.html"> <frame src="frame2.html"> <frame src="frame3.html"> </frameset> </html> Sanırım uygulamada neler yaptığımızı anlamışsınızdır; anlamayanlar zaten ilk örneği de anlamamışlardır, o örneğin açıklamalarına tekar baksınlar. İlk örnekte sütunsal dizili çerçeveleri, ikinci örnekte ise satırsal dizili çerçeveleri gördük. Şimdiki uygulamamız ise karma dizili çerçevelerdir. Bunun için <frameset> kodu iç içe uygulanır. Kod: Tümünü seç<html> <head> <title>Karma Çerçeveler</title> </head> <frameset rows="100, " border="0" frameborder="0" framespacing="0"> <frame src="frame1.html"> <frameset cols="200, " border="0" frameborder="0" framespacing="0"> <frame src="frame2.html"> <frame src="frame3.html"> </frameset> </frameset> </html> Nasıl? Bir şeyler yaratmak zevkli değil mi? Sizler de isterseniz beğendiğiniz karma çerçeveleri oluşturabilirsiniz. İçsel Çerçeve Çerçevelerin bir başka şekli daha da vardır: <iframe> Bu komut sayfanın istediğiniz bir bölümünde çerçeve açar. Atayacağınız width ve height parametreleriyle çerçevenin boyutlarını belirleyebilirsiniz Kod: Tümünü seç<html> <head> <title>İçsel Çerçeve</title> </head> <body> Aşağıdaki içsel çerçevede "frame1.html" isimli web sayfası gözükmektedir:<br><br> <iframe src="frame1.html" width="300" height="200"></iframe> </body> </html> Bu örnekte dikkatimizi çeken neler? İçsel çerçevelerde <body> kodunu kullanabiliyoruz. İçsel çerçeveyi görünmez tablolarla istediğimiz yere kolaylıkla yerleştirebiliriz. İnternette gezinirken, içsel çerçeveler kullanarak oluşturulmuş, estetik açıdan çok zengin sitelere rastlayacağınızdan eminim. Bizim uygulamamızda dikkati çeken birşey daha var: İçsel çerçeve gölgeli kenarlıkla çevrilmiş. Eğer kenarlık istemiyorsanız frameborder="0" parametresini kullanırsınız. Buradaki "0" kenarlığın olmadığı anlamına gelir. Eğer kenarlığın olmasını istiyorsanız ve kalınlığını belirleyecekseniz border="..." parametresini kullanacaksınız, tabi bu durumda frameborder="1" olmalıdır. (yazmaya gerek yoktur, frameborder parametresinin varsayılan değeri 1'dir zaten) Çerçeve Yönlendirme Çerçevelerin bir web sayfasını gösterdiğini daha önce defalarca belirtmiştik. Bazı durumlarda bir çerçevenin, kullanıcının belirttiği web sayfasını göstermesini isteyebiliriz. İki sütunsal çerçeveden oluşan bir sayfa düşünün. İlk kısmında yönlendiriciler olsun. Bu yönlendiricilerden kullanıcı hangisini seçerse, ikinci çerçevede o sayfa görünsün. Bunu yapabilmek için ikinci çerçeveye name parametresiyle bir isim veririz ve birinci çerçevedeki yönlendiriciler target parametresiyle o çerçevedeki sayfayı değiştirebilirler. Şimdi bir uygulama yapacağız. İlk çerçeve için yönlendiricilerin bulunduğu, frames.html isimli bir sayfa hazırlayacağım önce. İkinci çerçevenin yönlendiricilerle göstereceği sayfalar ise daha önce kullandığımız frame1.html, frame2.html ve frame3.html isimli sayfalar olacaktır. Şimdi frames.html isimli sayfanın kodlarını göreceksiniz. Kod: Tümünü seç<html> <head> <title>Yönlendiriciler</title> </head> <body> <br> <a href="frame1.html" target="pencere">Frame1</a><br> <a href="frame2.html" target="pencere">Frame2</a><br> <a href="frame3.html" target="pencere">Frame3</a><br> </body> </html> Bu sayfa aşağıdaki uygulamada ilk çerçeve olarak yeralacak. Ama verdiği linkler "pencere" isimli bir çerçeveye ait olacak. İkinci çerçeveye bu ismi koyacağımızı anlamışsınızdır sanırım. Kod: Tümünü seç<html> <head> <title>Yönlendirici Çerçeveler</title> </head> <frameset cols="150, " frameborder="0" border="0"> <frame src="frames.html"> <frame src="frame1.html" name="pencere"> </frameset> </html> Çerçeve Desteklemeyen Gözatıcılar için Önlemler Çerçeveler konusunda öğrenmemiz gereken birkaç şey daha var. Her browser çerçeveleri desteklemediği için, onlara hitaben <noframe>...</noframe> kodları geliştirilmiştir. Bazı browser'lar <frameset>...</frameset> ve <frame> kodlarını görmemektedir ama <noframe>...</noframe> kodları arasına yazacaklarınızı görebileceklerdir. Mesela şöyle yazılabilir: <noframe>Bu web sitesi çerçevelerden oluşuyor, ancak sizin browser'ınız desteklemediği için göremiyorsunuz.</noframe> gibi. Tabi çerçeveyi desteklemeyen browser'lar için aynı kodu kullanarak, biraz da JavaScript ile çerçevesiz başka bir sayfaya yönlendirmek de mümkün. Çerçeve Özellikleri Kısaca <frame> kodunun parametrelerine de değineyim; name parametresine değinmiştik, şimdi scrolling="no" parametresine değinelim. Eğer bu parametreyi kullanırsanız, söz konusu çerçeve "scrollbar" aracını kullanmayacaktır. Bunun anlamını, kendi uygulamalarınız geliştirirken daha iyi anlarsınız. Bir başka parametre daha: noresize. Eğer çerçevelerin kenarlıkları "0" değilse, çerçeveyi fare ile genişletmek veya daraltmak mümkündür. Bunu engellemek isterseniz bu parametreyi yazmanız yeterli olacaktır. Volkan Derinbay'a tşkler.