Bölüm 8

Çerçeve (Frame) Tekniği

Sayfa 2


Çerçeve İçeren Sayfaların Uygulamaları

 

Satırlar ve Sütunlar

Bir çerçeve elementinde, satır ve sütun nitelikleri, sayfa içinde bir çerçeve şebekesi oluşturmak amacı ile kullanılır. Satır niteliği, dikey koordinat için, sütün niteliği yatay koordinat için uzayın parçalanacağı alt uzay sayısını belirtir.

Eğer satır niteliği belirtilmezse, çerçeve tüm düşey alanı kapsar. Eğer sütun niteliği belirtilmezse, çerçeve tüm yatay alanı kapsar. Eğer her iki nitelik birden belirtilmezse, çerçeve tüm sayfayı kapsar.

Basit Çerçeve Uygulamaları

İlk olarak, iki yatay çerçeve içeren basit bir tasarım sunacağız.

 

Burada, yatay görüntü alanı ikiye bölünmüş ve görünen alan her iki çerçeveye eşit olarak paylaştırılmıştır. Çerçevelerin içeriği olan sayfalar, standart HTML sayfalarıdır. Bu sayfalara her türlü CSS özellği ile görüntülerinin düzenlenmesi yapılabilir. Örnek olarak, sayfa1.htm sayfasının kodları, aşağıda belirtilmiştir. Sayfa2.htm sayfasının kodları da bunlarla aynıdır.

İkinci örnek aşağıda görüldüğü gibi, biraz daha değişiktir:

 

 

Burada, yatay alanda üç HTML sayfası görüntüleniyor. Üçüncüsünün sabit olarak 200 piksel genişliğinde bir yerde görüntülenmesi gerekiyor. Geri kalan ikisi, görüntü alanının genişliğinin geri kalan kısmını paylaşırlar. Geri kalan genişlik %100 olarak belirtilirse, bu genişlik (2+3=5) kısma bölünecek ve birinci sayfa bu genişliğin yüzde 100x2/5= 40 lık kısmında, ikinci sayfa ise yüzde (100-40=60) lık kısmında görüntülenecektir. Bu hesaplama yöntemi, tabloların sütun genişliklerinin hesaplanması ile aynıdır. Öğrencilerin de bu tip uygulamalar tasarlayıp sonuçlarını kontrol etmeleri deneyim kazanmak açısından çok iyi olacaktır.

Çerçeve İçeren Sistemlerde Hedef Belgenin Belirlenmesi

Çerçeve içeren Web sayfaları, birden fazla HTML sayfası içerir. Bu sayfalar, çeşitli bağlantılar, çalıştırılacak scriptler gibi dinamik öğeler içerebilirler. Bu durumda, hedeflenen belgenin belirtilebilmesi gerçek bir sorun haline gelebilir. Bu sorunların çözümü için, <base>, <area>, <link>, <form>, <a> elementleri için target( hedef) niteliği kullanılır. target Niteliği, çerçeve isimleri ile çalışır. Çerçeve isimlerinin her zaman eşşiz (unique) olacağı yani iki ismin biribirinden farklı olacağı garanti edilemez. Doğal olarak, belge yazarları yani bir anlamda Web programcıları olabildiğince hedef isimlerini farklı olacak şekilde seçmeye çalışırlar fakat bu her zaman başarılamayabilir. Bu durumda belge çözümleyicilerin aşağıdaki işlemleri yapmaları öngörülmüştür:

Belge çözümleyiciler, hedef sayfayı bulmak için aşağıdaki yöntemleri uygularlar:

Biraz karışık olduğunu itiraf etmeliyiz. Bu konuda örnekler vererek konunun daha iyi anlaşılmasını sağlıyacağız.

Hazırlayacağımız uygulama, ilk olarak basit bir slayt gösterisi programı olacaktır. Burada iki çerçeve bulunacak ve sağdakinden çalıştırılacak olan bağlantılar ile soldaki çerçeveye çeşitli resimler yüklenecektir. Bu programın kodları aşağıda görülmektedir.

 

 

Bu çerçeve sisteminde, sabit.htm dosyasının içeriği daima birinci çerçeve olarak görüntülenecek şekilde, içeriği daima aynı HTML sayfası ile doldurulacak ve hiç değişmeyecek bir çerçeve olarak düşünülmüştür. Bu çerçeveyi oluşturan sabit.htm programının görevi, hareketli sayfaya belirtilen resimleri yönlendirmek olacaktır. sabit.htm Dosyasının kodları, aşağıda görülmektedir. Bu kodlardaki çapa elementinin, hareketli sayfaya resim yönlendirmek için, hedef nitelliğinde çerçevenin ismini belirttiğine dikkat edilmelidir. Seçeneklerden sonuncusu "reset" anlamına gelen bir yeniden başlatma komutudur. Burada hedef çapanın, _top çerçevesine yanı wiewport'un tümüne hedeflendiriği ve böylece, çerçeve sisteminin yeniden başlatılacağı görülmektedir. Sabit.htm programının kodları:

 

 

Bu şekilde, kullanıcınıın sabit.htm sabit sayfasındaki linklere tıklaması ile, ilgili sayfa, adı "hareketli" olan çerçeveye yerleştirilecektir. Ayrıca, sistemin bir şekilde karışması ile tüm slayt gösterisinin yeniden başlatılması, yani programın reset edilmesi seçeneğine de yer verilmiştir. Hareketli sayfaya resim yüklenmesinde kullanılan slide1.htm programının kodları aşağıda görülmektedir. slide2.htm Programının kodları da da bunun aynısıdır.

 

Hareketli çerçeveyi işgal edecek sayfalar sürekli değişcektir. Başlangıçta bu çerçeveyi hareketli.htm adlı sayfa doldurmaktadır ve program her reset edildikçe hareketli çerçeve, bu başlangıç sayfası ile başlayacaktır. hareketli.htm Sayfasının kodları:

Bu program, çalıştığında basit bir slide show oluşturacaktır. Buradaki CSS adımlarından float-left, metinlerin resmin solundan akmasını öngörmektedir. Böylece, resmin alt köşesine değil, üst köşesine hizalanmış bir bağlantı ifadesi, tablo kullanımına gerek olmadan oluşturulabilmektedir. Resmin yanındaki geri linki, bir önceki resme geri dönüş için bir öntanımlı metod olan JavaScript history nesnesinin back() metodunu çalıştırmaktadır.Bu programın tüm kodları iyice özümsenmelidir.

Artık daha gelişkin bir slayt gösterisi programı oluşturabiliriz. Bu program görüntü alanını üç çerçeveye bölmekte, en üstte sabit bir tanıtım logosu, altta yine sabit bir bağlantı çağırma kısmı, bir de resimlerin gösterildiği alan bulunmaktadır. Programın metni aşağıda görülmektedir.

 

 

Bu programda, içiçe çerçeve kullanıldığına dikkat ediniz. İlk olarak tüm görüntü alanı iki düşey çerçeve (satır) arasında pay edilmiştir. Birinci satır sabit bir logo satırı olacak şekilde düşünülmüştür ve toplam düşey görüntü alanının yaklaşık yüzde on dördünü (100x1/(1+6)=14.28) kaplayacaktır. Düşey alanın kalan %86 lik alt kısmı, iki yatay alana bölünmektedir. Bu alanlardan ilki, sabit bir link alanıdır ve yatay genişliğin %25 (100x1/(1+3)=25) lik kısmını kaplayacaktır. İkinci düşey alan ise, çağrılan slaytların gösterileceği alandır ve yatay genişliğin %75 (100x3/(1+3)=75) veya (100-25=75) lik kısmını kaplayacaktır.

Bu gelişkin program örneğinde, sabit sayfanın kodları aslında bir önceki ile tamamen aynıdır, fakat programın reset edilmesi yeni programın _top çerçevesine yönlendirilmesi yeni sayfa ile yapılacaktır. Yeni kodlar aşağıda görülmektedir.

Programın Logo çerçevesi olan en üstteki çerçeveyi dolduran ve tüm slayt gösterisi boyunca sabit kalan headline.htm programının kodları aşağıda görülmektedir.

Oluşturulan bu slayt gösterisi programı güzel çalışmasına karşın, slay gösterisinde gösterilecek her resmin mutlaka bir ayrı HTML sayfasında bulunmasını gerektirmektedir. Web içinde, bu slayt gösterisini daha az sayfa kullanımı ile gerçekleştirmenin bir yönteminin bulunması iyi olacaktır. Bu amaçla slayt gösterisi programının yeni bir sürümü geliştirilmiştir.

Bu yeni slayt gösterisi programı, eskisinin biraz geliştirilmiş bir sürümüdür. Programın kodları da eskisi ile aynıdır, sadece sabit navigasyon çerçevesi, aşağıda verilmiş olan sabit-xx.htm adlı yeni bir programla doldurulmaktdır.

Burada verilen programın sonucunda, çok rahat çalışan ve tüm programlama tekniğine hakim olduğumuz bir slayt gösterisi programı oluşmuştur. Son sürüm, kod ekonomisi açısından üstün olmasına rağmen erişebilirlik açısından zayıf kalmaktadır, çünkü hareketli sayfaya yüklenen resimlerin ne boyutlarını ne de alt niteliklerini belirtmek olanağı yoktur, bunun nedeni ise, bu resimlerin, <img> elementi ile değil, <a> çapa elementi ile yüklenmeleridir.

Bütün bu örnek programlar W3C nin belge değerlendirme sisteminde değerlendirilmiş ve belirttikleri DTD lere uyan geçerli HTML belgeleri olarak nitelendirilmiştir. Her yazarın tamamlanmış sayfalarını bu programdan yararlanarak doğrulatmasında büyük yarar bulunmaktadır.

Artık çerçeve içeren sayfalar konusunu tamamlıyoruz. Çerçeve içeren sayfalarla çalışmanın aslında kolay olmadığını, fakat iyi inceleyince, bu çalışmaların kolaylıkla yapılabileceğini, bu tekniği içeren belgelerin, kullanımda olan belge çözümnleyicilerde şu anda çok iyi desteklenebildiğini, bu teknikle son derece güzel görünümlü ve bu tekniğin dışında bir yöntemle oluşturulamayacak sayfaların üretilebileceğini görmüş bulunuyoruz.

Çerçeve içeren sayfalarla birlikte, HTML konusu da tamamlanmış olmaktadır. Bundan sonraki inceleme konumuz, HTML sayfalarının ayrılmaz bir parçası olan CSS program dilininin incelenmesidir. CSS HTMl gibi, XHTML ve XML sayfalarının da görüntülenmesinde yardımcı olacak gelişkin olanaklara sahip bir program dilidir ve her HTML yazarı için öğrenilmesi, olmazsa olmaz niteliğinde bir zorunluktur.

Bu konuyu ve HTML konusunu tamamlarken, kuramsal temellere dayalı kod yazmanın önemini yeniden vurgulamakta yarar görülmektedir. Kodlarımızın görüntülenebilir olması yeterli değildir. Kodlarımız, hem iyi görüntü vermeli hem de en sıkı kuralcı spesifikasyonlara uygun olmalıdır. Web okuryazarlığının anlamı budur.

 

 

Wednesday, October 5, 2005 17:48