HTML ile Frameset ~ Webkolog

Merhaba sevgili Webkolog takipçileri,

Bugün sizlere web sayfanızı birden fazla bağımsız bölüme ayırmanın ve bu bölümlerin her birinde farklı bir HTML belgesi göstermenin güçlü bir yolu olan HTML çerçevelerini (frameset) anlatacağım. Bu özellik, web tasarımcılarına sayfa düzeni konusunda esneklik sunan popüler bir araç. Daha önce iframe ve anchor ilişkisini anlattığım yazımı hatırlarsınız, işte çerçeveler de benzer bir mantıkla çalışıyor ama tüm tarayıcı penceresini etkiliyorlar.

`<frameset>` Etiketi: Çerçevelerin Mimarı

Bir HTML belgesini çerçevelere bölmek için <frameset> etiketini kullanırız. Bu etiket, sayfanın nasıl bölüneceğini belirler ve <body> etiketi yerine kullanılır. Yani bir HTML belgesinde ya <body> ya da <frameset> etiketi bulunur, ikisi bir arada olmaz.

Satır Bazında Bölümleme: `rows` Özelliği

Sayfanızı yatay olarak bölümlere ayırmak için rows özelliğini kullanırız. Her bir değer bir satırın yüksekliğini temsil eder.

<frameset rows="100,*,50">
  <!-- İlk satır 100 piksel yüksekliğinde -->
  <frame src="ust_baslik.html">
  <!-- İkinci satır kalan alanı kaplar -->
  <frame src="orta_icerik.html">
  <!-- Üçüncü satır 50 piksel yüksekliğinde -->
  <frame src="alt_bilgi.html">
</frameset>

Değerler piksel cinsinden (örneğin 100) verilebilir.
Yüzde olarak (örneğin 25%) verilebilir.
* işareti, kalan alanı otomatik olarak kaplamasını sağlar. Birden fazla * kullanıldığında, kalan alan belirtilen oranlarda bölünür (örneğin *,2*,* kalan alanı 1:2:1 oranında böler).

Sütun Bazında Bölümleme: `cols` Özelliği

Sayfanızı dikey olarak bölümlere ayırmak için cols özelliğini kullanırız. Her bir değer bir sütunun genişliğini temsil eder.

<frameset cols="25%,50%,25%">
  <frame src="sol_menu.html">
  <frame src="ana_icerik.html">
  <frame src="sag_reklam.html">
  <noframes>Tarayıcınız çerçeveleri desteklemiyor. Lütfen güncel bir tarayıcı kullanın.</noframes>
</frameset>

Yukarıdaki örnek, sayfayı üç dikey sütuna böler: sol ve sağ sütunlar %25'er yer kaplarken, orta sütun %50 yer kaplar.

`<frame>` Etiketi: Çerçevelere İçerik Yükleme

<frameset> etiketinin içine yerleştirdiğimiz <frame> etiketleri, her bir çerçevede hangi HTML belgesinin yükleneceğini belirtir.

<frame src="belge_adi.html" name="cerceve_adi">

src: Çerçeveye yüklenecek HTML belgesinin yolu veya URL'si.
name: Çerçeveye verilen benzersiz isim. Bu isim, bağlantılarda target özelliği ile kullanılabilir.
noresize: Bu özellik eklenirse, kullanıcı çerçeve boyutunu değiştiremez.
scrolling: Çerçevede kaydırma çubuklarının görünüp görünmeyeceğini belirler (yes, no, auto).
marginwidth ve marginheight: Çerçeve içeriği ile çerçeve kenarları arasındaki boşluğu piksel cinsinden ayarlar.
frameborder: Çerçeve etrafında bir kenarlık olup olmayacağını belirler (0 veya 1).

İç İçe Çerçeveler: Karmaşık Düzenler Oluşturma

Daha karmaşık sayfa düzenleri oluşturmak için <frameset> etiketlerini iç içe kullanabiliriz. Bu sayede hem yatay hem de dikey bölümlere sahip sayfalar tasarlayabiliriz.

İşte popüler bir web sitesi düzenini oluşturan bir örnek:

<frameset rows="100,*">
  <!-- Üst Kısım: Başlık ve Logo -->
  <frame src="ust_baslik.html" name="ustCer" noresize scrolling="no">

  <!-- Alt Kısım: Menü ve İçerik Alanı -->
  <frameset cols="20%,*">
    <!-- Sol Kısım: Navigasyon Menüsü -->
    <frame src="sol_menu.html" name="menuCer" noresize>
    <!-- Sağ Kısım: Ana İçerik Alanı -->
    <frame src="ana_icerik.html" name="icerikCer">
  </frameset>
</frameset>
<noframes>
  <body>
    Tarayıcınız çerçeveleri desteklemiyor. Lütfen modern bir tarayıcı kullanmayı deneyin.
  </body>
</noframes>

Bu örnekte, sayfa önce yatay olarak ikiye bölünür: üstte 100 piksellik bir başlık alanı, altta ise kalan alanı kaplayan bir bölüm. Alt bölüm de kendi içinde dikey olarak ikiye bölünür: solda %20'lik bir menü alanı ve sağda kalan alanı kaplayan ana içerik alanı. Her bir <frame>'e bir isim verdiğimizi göreceksiniz. Bu isimler, bağlantılardan bu çerçevelere içerik yüklemek için kullanılabilir (tıpkı daha önce iframe'de anlattığım gibi).

`<noframes>` Etiketi: Desteklemeyen Tarayıcılar İçin

Bazı eski veya özel tarayıcılar çerçeveleri düzgün bir şekilde desteklemeyebilir. Bu gibi durumlarda kullanıcıya bilgi vermek veya alternatif bir içerik sunmak için <noframes> etiketini kullanırız. Bu etiket içinde yer alan içerik, sadece çerçeveleri desteklemeyen tarayıcılarda görüntülenir.

<noframes>
  <body>
    Üzgünüz, tarayıcınız bu sayfanın yapısını desteklemiyor. Lütfen farklı bir tarayıcı ile deneyin.
  </body>
</noframes>

HTML 4.01'deki çerçeveler, web sayfalarınızı daha modüler ve dinamik hale getirmek için güçlü bir yol sunar. Menülerinizi veya başlıklarınızı sabit tutarken ana içeriği kolayca değiştirebilirsiniz. Bu özellik, 2006 yılında oldukça popüler ve etkili bir web tasarım tekniği.

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!

29 Temmuz 2006 Cumartesi