dinmo - Çerçeveler Hakkında

Çerçeveler Hakkında

Çerçeveler birden çok html sayfasını birleştirerek tek bir sayfaya hapsetmek gibidir.Yani iki web sayfanızı tek bir sayfaya koyuyorsunuz.İki sayfa tek bir sayfa oluyor.

   Çerçevelerin yüklenmesi normaline göre daha zordur.Tasarlayacağınız sayfalarda çerçeveler kullanacaksanız bunun 3 den fazla olmamasına dikkat edin.Aslında üç de fazla en ideali iki çerçeve kullanmaktır.
     Çerçeveler <HEAD></HEAD> imlerinden sonra gelir ve yazılır.Çerçeve sayfalarında <BODY></BODY></HTML> imleri kullanılmaz, kullanılsa da bir şey oluşmaz. Siz sadece <META> imlerini gerekli yerlere yazmakla yetinin.

Çerçeve Yaratmak

Çerçeve yaratmak zor bir iş değildir.Ayrıca karmaşık da değildir.Bunu iyi anlayacağınızı umuyorum.

   Çerçeve yaratma imleri <FRAMESET></FRAMESET> imleridir.Ancak bu imler yalnız başına kullanılmaz. Hangi sayfaların ekleneceğini belirtmek için <FRAMESET> imi ile birlikte <FRAME></FRAME> imi de kullanılır.Tıpkı tablolarda kullanılan satır ve sütun imleri gibi.

     <FRAMESET> çerçevenin başladığını belirtir.</FRAMESET> ise bittiğini belirtir.

     <FRAME> imi eklenecek sayfayı belirtmek için başlangıcı belirtir.</FRAME> ise bitişi belirtir.

   Çerçeveler yatay ve dikey konumlandırılır.Eklenecek sayfaların bir isim özniteliği olan NAME ile bu sayfaların yerini belirtecek SRC özniteliği vardır.

   Bir çerçeve yaratalım;
<HTML>
<HEAD>
<TITLE>SAYFANIN BAŞLIĞI</TITLE>
</HEAD>
<FRAMESET>
<FRAME NAME="sayfa için bir isim" SRC="dosya adı ve yolu"></FRAME>
<FRAME NAME="sayfa için bir isim" SRC="dosya adı ve yolu"></FRAME>
......................................Buraya istediğimiz kadar FRAME koyabiliriz.
</FRAMESET>

     Görüldüğü gibi <BODY> iminden sonra kullanılan imler kullanılmadı.

   Bu çerçeve setinde sayfaların dikey mi yoksa yatay mı olacağı belirtilmedi.Aşağıda buna değineceğiz.

Yatay Çerçeve Yaratmak

Çerçevelerin yatay olabilmesi için <FRAMESET> imi içine onun özniteliği olan ROWS kullanılır.Bu özniteliği daha önce de biliyordunuz. ROWS özniteliğinin bir de sayı değeri vardır. Bu değer sayfanın yüksekliğini ayarlamak için kullanılır.

     Kullanımı:
<FRAMESET ROWS="x,y">
<FRAME NAME="isim" SRC="dosya adı"></FRAME>
<FRAME NAME="isim" SRC="dosya adı"></FRAME>
</FRAMESET>

   Dosyaların yükseklik ve genişliklerini ayarlamada kullandığımız ROWS ve COLS 'ın değerlerinin biri istenildiği bir sayı olur.Diğeri de yıldız(*) olabilir.

   Örneğin üç dosya eklemişseniz ROWS="40,*,50"

şeklinde yazabiliriz. Bunun anlamı üstteki dosyanın yüksekliği 40, alttaki dosyanın yüksekliği 50 ve ortadakinin ise sayfaya göre değişir.
     Diyelim ki sayfanın yüksekliği 600.Bu durumda ortadakinin yüksekliği=600-(40+50)=600-90=510 olur.Bu COLS için de geçerlidir.

   Ne kadar çok dosya eklerseniz ROWS değerleri o kadar artar.Ben burada iki dosya eklediğim için ROWS 'ın iki değerini yazdım.

     Eğer 5 tane dosya eklemiş olsaydım ROWS değerlerini şöyle yazmalıydım: ROWS="a,b,c,d,e" buradaki her harf bir sayının yerine kullanılmıştır.

  Dikey Çerçeve Yaratmak

Dikey çerçeve yaratmak için de <FRAMESET> imi içine onun özniteliği olan COLS imi ve değeri kullanılır.Bunu da hatırlamanız gerekir.

   Kullanımı:
<FRAMESET COLS="x,y">
<FRAME NAME="isim" SRC="dosya adı"></FRAME>
<FRAME NAME="isim" SRC="dosya adı"></FRAME>
</FRAMESET>

   Burada da COLS 'ın değerleri eklenen dosya sayısına göre artar ya da azalır.

Yatay ve Dikey Çerçeveleri Birlikte Kullanmak

Biz tabloları öğrenirken tablo içinde tablo oluşturmayı da öğrenmiştik. Çerçevelerde de çerçeve içinde çerçeve oluşturabilirsiniz. Bu da yine çerçeve kullanmaktan başka bir şey değildir.

   Örneğin;üstte bir dosya olsun.altta da iki dosya olsun.

<FRAMESET ROWS="30,*">
<FRAME NAME="ust" SRC="merhaba.html"></FRAME>

<FRAMESET COLS="50,*">
<FRAME NAME="orta_sol" SRC="sol.html"></FRAME>
<FRAME NAME="orta_sag" SRC="sag.html">/FRAME>
</FRAMESET>

</FRAMESET>

   Bunun sonucu;

üst dosya
alt çerçevenin sol dosyası	alt çerçevenin sağ dosyası

şeklinde olacaktır.

Çerçevenin Kenarlıklarını ve Renklerini Ayarlamak

Biz tabloya ya da bir resme kenarlığı BORDER imi ile eklemiştik.Çerçevelerde de bu imi kullanacağız.

   Kullanımı:
<FRAMESET COLS="x,y" yada ROWS="x,y" BORDER="n">
<FRAME NAME="isim" SRC="dosya adı"></FRAME>
<FRAME NAME="isim" SRC="dosya adı"></FRAME>
</FRAMESET>

     Ancak çerçevelerde oluşturulan kenarlıklar pek hoş görünmez.Kenarlığı yok etmek için BORDER="0" yazmanız yeter.Fakat yine de tam olarak kenarlık silinmez.Tamamen silmek için bir de FRAMEBORDER vardır.Bunun değerini de sıfır yapmalısınız.Yani BORDER="0" FRAMEBORDER="0" yazmalısınız.

     Bir çerçevenin kenarlık rengini de ayarlayabilirsiniz.Bunun için BORDERCOLOR imini kullanabilirsiniz.

   Kullanımı:
<FRAMESET BORDER="n" BORDERCOLOR="renk adı ya da kodu" COLS yada ROWS>

Kaydırma Çubuklarını Göstermek ve Gizlemek

Bazı durumlarda kaydırma çubukları işe yarayabilir bazı durumlarda ise hiç hoş görünmeyebilir.

   Kaydırma çubukları için kullanılan öznitelik SCROLLING dir. Bu im <FRAME> iminin içine yazılır.
     Kaydırma çubuklarının görünmesi için SCROLLING="YES", görünmemesi için de SCROLLING="NO" yazmalısınız.

   Kullanımı:
<FRAMESET COLS yada ROWS>
<FRAME NAME="isim" SRC="dosya adı" SCROLLING="YES yada NO">
...........................
</FRAMESET>

Ziyaretçilerin Çerçeveleri Yeniden Boyutlandırmasını Engellemek

Siz çerçeveye müdahale etmezseniz ziyaretçileriniz sayfayı istediği gibi büyütüp küçültebilir.Bu da sayfanızı altüst edebilir.Ama bazen de gerekli olabilir.

   Ziyaretçilerinizin çerçeve boyutlarında oynama yapmamaları için <FRAME> imi içine NORESIZE özniteliğini yazmanız yeter.

     Eğer ziyaretçilerinizin çerçevenin boyutlarını değiştirmelerini isterseniz hiç bir şey yazmayın.

Linkleri Çerçevelere Hedeflemek

Link konusunda bağlantıları istediğimiz bir yere hedeflemeyi öğrenmiştik. Ve bu hedeflemenin en iyi fark edildiği yerin çerçeveler olduğunu söylemiştik.

   Linklerde hedefleme yapmak için TARGET imini ve onun yöneleceği hedefin ismini yazmayı öğrenmiştik.

   Çerçevelerde ise yine aynısını kullanacağız.Ama buradaki en önemli şey çerçevelerde biz NAME özniteliğini kullanmıştık.İşte hedef ismini bu isimlerle aynı tutacağız.

     Bir örnekle daha iyi anlarsınız.

   Bir çerçeve oluşturalım.Bu çerçeve yatay iki dosyadan oluşsun.Soldaki çerçeve sitemizin "Menü" bölümü olsun.Sağdaki ise içeriğin görüntüleneceği bölüm olsun.Ziyaretçi soldaki menülere tıkladığında dosya sağdaki çerçeve içinde açılsın.İşte buradaki tamamen hedeflemenin işi var.

<FRAMESET ROWS="50,*" BORDER="1" BORDERCOLOR="blue">
<FRAME NAME="sol" SRC="menu.html" SCROLLING=NO" NORESIZE></FRAME>
<FRAME NAME="sag" SRC="icerik.html" SCROLLING="YES" NORESIZE></FRAME>
</FRAMESET>

   Bunun sonucu:

Çerçevenin adı:sol

Hakkımda şeklinde bir menü başlığımız olsun. (Buna verilecek link şöyle olmalıdır.

<A HREF="ben.html" TARGET="sag">)

Çünkü içeriğin sag isimli çerçevede görünmesini istiyoruz.Hiçbir şey yazmazsak linkin olduğu sayfada açılır.Bu da hiç güzel olmaz.
Diğer linkler
Resimlerim
Fıkralarım

Çerçevenin adı:sag

İçeriğimiz.

İç Çerçeve Yaratmak

İç çerçeve sayfanız yine tek bir sayfa ama bir kaç sayfanın birleşmesinden değil de bir sayfanın sadece eklenmesi anlamındadır.Böyle bir sayfa çerçeveli değil dosya ekli bir sayfadır.

   Bu şekilde bir ekleme işinize yarayabilir.Başka bir sitenin sayfası bu şekilde sizin sayfanıza dahil edilebilir. Bazı siteler ücretsiz hava durumu kodları verir.Bu kodlar kendi sitelerinin hava durumu içeriğini sizin sitenize eklerler.Bu da iç çerçevelerle olur.Bu kötü bir şey değil.Bilakis çok güzel bir şey.Bu şekilde başka bir web alanınızdan kendi sitenize ek yapabilirsiniz.

   Bu im <IFRAME></IFRAME> imidir.

     Yine dosya adresini belli etmek için SRC özniteliği kullanılır.

     İsim NAME özniteliğini de kullanabilirsiniz.

     Sayfanıza eklenecek dosyanın boyutlarını belirtmek için WIDTH ve HEIGHT kullanabilirsiniz.

     Kenarlık eklemek ya da silmek için BORDER imini kenarlık rengi için BORDERCOLOR imini kullanabilirsiniz.

     Kaydırma çubuğunu yok etmek için SCROLLING="NO" var etmek için NO yerine YES özniteliğini kullanabilirsiniz.

     Kullanımı:
   <IFRAME NAME="isim" SRC="dosya adı ve adresi" WIDTH="n" HEIGHT="n" BORDER="2" BORDERCOLOR="red" SCROLLING="NO"></IFRAME>