HTML Çerçeveler

WebMaster bölümünde yer alan bu konu SüKuN tarafından paylaşıldı.

  1. SüKuN

    SüKuN Harbi Aktif Üye

    site çerçeveleri, sayfa çerçeveleri, html kodları ile web sayfaları için basit işlemler yapmak
    Web sayfalarının bir özelliği de çerçevelerin (frame) 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 (üstte veya başka yerde de olabilir) 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. (Bunun nedeni sizin tasarım özürünüz de olabilir, kullanıcının veri akışının zayıflığı da) 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 (çerçeve) kullanana hırbo derler" veya "frame'siz web sayfası olur mu be!" gibi uç (ekstremum) 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 (sütunsal) çerçeveler istiyorsanız, cols="..." parametresini, eğer birbiri aşağısına (satırsal) çerçeveler istiyorsanız, rows="..." parametresini kullanırsınız. Tırnak içine kullanacağınız çerçevelerin genişliklerini (satırsal çerçevelerde yüksekliklerini) yazacaksınız. Genişlikleri (veya yükseklikleri) piksel cinsinden yazabileceğiniz gibi, yüzde olarak da yazabilirsiniz. İsterseniz çerçevenin genişliğini (veya yüksekliğini) belirlemek zorunda değilsiniz; genişliğini (yüksekliğini) belirtmek istemediğiniz çerçeve için "*" (asteriks) 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 (yükseklikleri) 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ı (sırasal veya sütunsal) veya büyüklükleri (genişlik veya yükseklik) belirtmek yeterli değildir. O çerçevelerin hangi sayfayı göstereceğini belirtmeliyiz. Bunun için <frame src="..."> kodu kullanılır. Buradaki src (source; kaynak) parametresi çerçevenin göstereceği çerçevenin url (web sayfası yani) adresini belirtiyor. (daha önceki konularda url adresinin nasıl yazıldığı ayrıntılı olarak açıklanmıştı) 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.

    HTML:
    <html> 
    <head> 
    <title>Sütunsal Çerçeveler</title> 
     </head>
    <body>
    <frameset cols="25%,*,25%"> 
    <frame src="frame1.html"> 
    <frame src="frame2.html"> 
    <frame src="frame3.html"> 
    </frameset>
    </body>
    </html>
    Uygulamada neler yaptığımızı sizler anlamışsınızdır ama ben yine de anlatayım. (Anlayanlar anlamayanlara anlatacak değil ya!) 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. (Tablo biçimi sayfasındaki konuya biraz benziyor değil mi?) Şimdi kenarlıksız, satırsal çerçevelere örnek verelim. Yine aynı sayfaları kullanacağım.

    HTML:
    <html> 
     <head> 
    <title>Satırsal Çerçeveler</title> 
    </head>
    <body>
    <frameset rows="100,*,60" border="0" frameborder="0" framespacing="0"> 
    <frame src="frame1.html"> 
    <frame src="frame2.html"> 
    <frame src="frame3.html"> 
    </frameset> 
    </body>
    </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.

    HTML:
    <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. (Bu kodu her gözatıcı desteklemez!) Atayacağınız width ve height parametreleriyle çerçevenin boyutlarını belirleyebilirsiniz

    HTML:
    <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 (kullanıcının seçmesi halinde) 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.

    HTML:
    <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.

    HTML:
    <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. (tabi bunu JavaScript öğrenirken göstereceğim)

    Ç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.
     
    Son düzenleme moderatör tarafından: 15 Eylül 2011