Selam ile. Bu dersimizde frame yani çerçeveli sayfaların kullanımını öğreneceğiz. Öncelikle frame nedir onu öğrenelim. Frame Türkçe olarak çerçeve, çerçeveletmek anlamına geliyor. Biz web tasarımcılar olarak frame'yi sayfalarımızı çerçevelerle ayırmada kullanacağız. Frame tagları kullanıldıkları sayfayı bölümlere ayırırlar. Ayırılan bu bölümlerde başka sayfalar bulunur. Mesela üç sayfa hazırlarız bunlar, sol.html, sag.html ve index.html olabilir. index.html sitemizin anasayfası oluyor tabi ki. Biz index.html sayfasını iki bölüme ayırırız sol.html sayfasında sitemizin menüsü olabilir. sag.html sayfasında da sitemizin geri kalan kısmı. sol.html sayfasındaki bir linke tıkladığımızda sag.html sayfasında açılmasını sağlarız. Böylece sitemizin sol tarafı sabit kalır... Hala sol.html ve sag.html sayfalarını oluşturmadınız mı?
Hemen oluşturun. Sayfaların renklerini de farklı seçerseniz daha iyi anlayabilirsiniz. Aşağıda index.html sayfasının kodlarını veriyorum.
KOD:<html>
<head>
<title>Çerçeveli Sayfalar</title>
</head>
<frameset cols="*,*">
<frame name="sol" src="sol.html">
<frame name="sag" src="sag.html">
</frameset>
<body>
</body>
</html>
Kodlarda gördüğünüz gibi çerçeve sayfalarının temel tagı
KOD:<frameset>......</frameset>
tagıdır. Burada dikkat etmemiz gereken önemli bir nokta var. Frame kodları head tagı kapatıldıktan ve body tagı açılmadan yazılır. Yani frame kodları head tagının kapanış ve body tagının başlangıcı arasında yer alır. Yukarıdaki kodları index.html olarak kaydedin ve çalıştırın. Gördüğünüz gibi sayfamızın ortasından bir çizgi geçiyor ve sayfamızı ikiye
ayırıyor. Ayırılan iki tarafta farklı sayfalar görüntüleniyor. Bu kodlardaki küçük bir değişiklikle sayfamızı yatay olarak ikiye bölebiliriz.
KOD:<frameset cols="*,*">
Satırındaki cols yerine rows kullanalım. Yani komut satırı şu şekilde olacak;
KOD:<frameset rows="*,*">
Bu değişiklikten sonra sayfamızın yatay olarak ikiye bölündüğünü görüyorsunuz. Şimdide sayfamızı aynı anda hem ortadan, hem üstten bölelim. index.html sayfamızın yeni hali;
KOD:<html>
<head>
<title>Çerçeveli Sayfalar</title>
</head>
<frameset cols="*,*">
<frame name="sol" src="sol.html">
<frameset rows="*,*">
<frame name="ust" src="ust.html">
<frame name="sag" src="sag.html">
</frameset>
</frameset>
<body>
</body>
</html>
Sayfamız şu anda üç'e bölünmüş durumda. Fakat pek hoş olmayan bir görünüme sahip. Sayfaların genişliği dengesiz ve ortalardan geçen çizgiler var. Hemen bunlarında icabına bakalım.
Çerçevelerin genişliğini ayarlamak için şu satırı kullanırız;
KOD:<frameset cols="%17,*"> veya rows olursa <frameset rows="%17,*">
Yani yapmamız gereken cols veya rows parametresini değiştirmek. Bu parametrelerde yer alan yıldızlar her iki tarafı simgeliyor. Hangi tarafın boyutunu değiştirmek isterseniz o taraftaki yıldız işaretini değiştirirsiniz. Burada 17 tarayıcının yüzde olarak değeridir. Şimdi de
çerçevelerin çizgilerinden kurtulal?m. Bunun içinde bir dersimizde anlattığım gibi border parametresini kullanacağız.
KOD:<frameset border="0" cols="%17,*">
veya rows olursa
<frameset border="0" rows="%17,*">
Artık sayfamızın ortasındaki çizgidende kurtulduk. Tek bir sorunumuz kaldı o da çerçeveli sayfa içindeki linkler. Çerçeveli sayfa içindeki linkleri hazırlarken, sayfanın açılacağı çerçeveyi hedef olarak göstermemiz lazım. Örnek kodlar aşağıda;
KOD:<a target="sag" href="sag.html">Tıklayın</a>
Burada da önemli olan bir çerçevedeki linki ayarlarken, sayfanın açılması istediğimiz çerçevenin ismini target ile hedef göstermektir. Bunun içinde çerçeveleri oluştururken name parametresi ile çerçeveleri adlandırmıştık.
Çalışan örneği görmek için Tıklayın
Herhangi bir sorunuz yada sorununuz olursa forumumuza yazabilirsiniz.
Html ( 15 )
