|
Prof. Dr. Sinsi
|
Html Nedir ?(Açıklamalı Anlatım Web Dizayn)
Çerçeveler (frame), HTML'e sonradan eklenmiştir Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler (Microsoft Internet Explorer 30 ile Netscape Navigator 20 ve üstü sürümleri frameleri destekliyor) Bunun yanında çerçeve kullanımına karşı düşmanca (!) tavır sergileyen tasarımcılar da hatırı sayılır miktarda ve hala birçok site, ziyaretçisine çerçeveli ve çerçevesiz sunum seçeneği sunuyor
Çerçeveler sayfanın bazı kısımlarını sabit bırakırken, diğer kısımlarını değiştirme imkanı verir Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir Browser, çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir
Aşağıdaki örneği inceleyelim:
Örneğimizde 3 adet html dosyası var Bunlardan framehtm dosyası çerçeve komutlarını içeriyor (yani ana dosya) Bu komutlar browser'a, görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1htm dosyasını, diğerinde htm2htm dosyasını görüntülemesini bildiriyor
<body bgcolor=""> etiketi ile htm1htm dosyasının artalan rengi kırmızı, htm2htm dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmış ve sonuç gördüğünüz gibi
Şimdi bu çerçeveyi birlikte oluşturalım:
framehtm dosyası:
<html>
<head>
<title>Çerçeveler</title>
</head>
<frameset cols="*,*">
<frame name="sol" src="htm1htm">
<frame name="sag" src="htm2htm">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
htm1htm dosyası:
<html>
<head></head>
<body bgcolor="red">
<font size="7" color="#ffffff">htm1htm</font>
</body>
</html>
htm2htm dosyası:
<html>
<head></head>
<body bgcolor="blue">
<font size="7" color="#ffffff">htm2htm</font>
</body>
</html>
--------------------------------------------------------------------------------
<frameset></frameset>
Çerçeve oluşturmada kullandığımız etiket: frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, buraya row yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır
cols (sütunlar)
rows (satırlar)
cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, buraya örneğin cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor
Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz cols="" ifadesine iki değer (ya da yıldız) verirsek bu iki çerçeve aç anlamındadır, 3 değer 3 çerçeve açar
frame name="" src="" etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya aşağıda değineceğiz) src pencerede görüntülenecek html dosyasının yerini gösteriyor Resimler bahsinde belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerli Açılacak çerçeve sayısı kadar frame name="" src="" etiketi kullanıyoruz
Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik, işte noframes kısmı bu browserlara hitap ediyor body kısmını bu eski browserlar görüntüleyebiliyor Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz
FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar;
frameborder="" (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler
border="" (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler
FRAME etiketi ile kullanabileceğimiz parametreler;
marginwidth="" marginheight="" (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler
scrolling="" (yes, no, auto) Kaydırma çubuklarının durumunu belirler
noresize Pencere boyutlarının sabit olmasını sağlar
Daha karmaşık Çerçeveler
Yan yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı öğrendik peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün
Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz, içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz
Örnekleri ve yanlarındaki kodları inceleyip, farklı çerçeve türlerini kendi bilgisayarınızda oluşturmaya çalışın,
--------------------------------------------------------------------------------
<frameset rows="*,*" cols="*,*">
<frame name="a" src="htm1htm">
<frame name="b" src="htm2htm">
<frame name="c" src="htm3htm">
<frame name="d" src="htm4htm">
</frameset>
--------------------------------------------------------------------------------
<frameset cols="150,*">
<frame name="a" src="htm1htm">
<frameset rows="100,*">
<frame name="b" src="htm2htm">
<frame name="c" src="htm3htm">
</frameset>
</frameset>
<frameset rows="50%,50%">
<frameset cols="*,*">
<frame name="a" src="htm1htm">
<frame name="b" src="htm2htm">
</frameset>
<frame name="c" src="htm3htm">
</frameset>
<frameset rows="*,*,*">
<frame name="a" src="htm1htm">
<frameset cols="*,*">
<frame name="b" src="htm2htm">
<frame name="c" src="htm3htm">
</frameset>
<frame name="d" src="htm4htm">
</frameset>
<frameset cols="*,*">
<frameset rows="*,*">
<frame name="a" src="htm1htm">
<frame name="b" src="htm2htm">
</frameset>
<frame name="c" src="htm3htm">
</frameset>
Çerçeveler konusu ile birlikte HTML öğreniyorum yazı dizimiz sona erdi, buraya kadar öğrendiklerinizle internette siz de kendinize ait sayfalarınızı inşa edebilirsiniz, eğer bu konuda ciddi düşünüyorsanız bunun yolunun çok çalışmaktan geçtiğini sakın unutmayın, hoşunuza giden sitelerin dizayn mantığını anlamaya çalışın, hatta bunun için kaynak kodlarını inceleyin Görsel editörleri kullanarak sayfalar hazırlayın ve sonra da editörün kodları nasıl oluşturduğuna bakın Son olarak; iyi bir tasarımcı olmanın yolunun çok çalışmak ve devamlı araştırmakan geçtiğini unutmayın Hepinize başarılar
|