SePortal
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
Parlak Buton Yapımı
Flash Araç Kutusu (Toolbox)
Butonlar
3 D Küb Yapımı
Katmanlar
Araç Kutusu (Toolbox)
Kenar Süsleri
CSS - Örnekleri
Illustrator Plug-ins (Geliştiriciler)
Efektler

Site Bilgileri
Sitede 27 kategoride, toplam 93 ders,
Toplam 85 indirilebilir dosya, 63.832 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.301 kayıtlı üyemiz var. En yeni üyemiz: asz

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 311 - Tarih: 21.07.2016 19:15

Toplam ziyaret: 1.934.697
Bugünkü ziyaret: 0

Aktif Kullanıcılar: 1
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 1 ziyaretçi online.
Ana Sayfa / Dersler / Web Tasarımı / Tablolar, Frameler, Formlar / Web Tasarımı - Frame

Web Tasarımı - Frame
RSS Feed: Web Tasarımı - Frame (Dersler)
Eklenme Tarihi: 07.11.2005 - 21:38   (İzlenme: 65551)
Yorumları Oku (-)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır

Sayfalar:

Web Tasarımının bu bölümünde browser penceresinde görünen birden fazla HTML sayfasını içeren "Frame" leri inceleyeceğiz.
Frame'ler [1]

Bölünen Pencereler:
Sayfalarınızın aşağılara doğru çok uzun olduğu zaman "navigasyon" menülerinin yukarıda kalması ve sayfanızda aşağıya gidildiğinde kaybolması pek çok zaman ciddi bir sorun olarak karşımıza çıkıyor. FRAME'ler burada yardımımıza koşuyor, internet Explorer ve Netscape'in 3. kuşak browser'larından beri frame yapısı destekleniyor.
Peki 3 tane pencere tek bir HTML'i mi kullanıyor? Tabii ki hayır. FRAME yapısını belirten bir HTML dosyamızın yanında her pencere için ayrı bir HTML dosyası kullanacağız. Karışık gibi görünse de örnekleri verdiğimizde daha iyi anlayacağınızdan eminiz.
Frame sayfası nasıl hazırlanır?
Frame aslen bir kalıp nileliğindedir. Kalıbın şeklini belirlemek size kalmış. Bu kalıpla hangi bölüme hangi sayfa gelecek, boyutu kaç olacak gibi değişkenler belirtilir.
Günümüzün web tasarım araçları frame'leri başarıyla desteklemektedir.
FrontPage 2000, Dreamweaver, 1st Page 2000 gibi... Ama ne yazık ki kullandığımız FrontPage Express'in çıkış tarihi itibariyle böyle bir desteği bulunmuyor. Ama sonuçla frame'lere hakim olmak için her durumda Notepad desteği gerekiyor.
Emre, sayfalarında frame yapısı kullanmayacak olsa da gelin, hep beraber onun sayfalarım frame'li bir yapıya dönüştürelim. Ama öncelikle FRAME komutu nasıl kullanılır, parametreleri nelerdir bir gözden geçirelim.
Frame tanımlama sayfamızda BODY komutunu kullanmamız gerekmekte. Klasik girişimizi yazalım:

<HTML>
<HEAD>
<TITLE>
Frame'li ilk sayfamız</TITLE>
</HEAD>


Normal sayfalarımızda BODY komutunun yerine burada FRAMESET komutunu kullanacağız. Ama sayfamızın nasıl görüneceğini de önceden belirlememiz gerekiyor.
Örneğin önce iki dikey parçaya, sonra da sağda kalan dikey parça iki yatay bölüme ayrılsın diye planlayalım.
Solda kalan dikey parçanın genişliği 150 piksel olsun.

<FRAMESET cols="150,*" framespacing="0" frameborder="0" border="0">

Bu komutta * işareti "ekranın kalan bölümünü kapla" anlamına gelir.
FRAMESPACİNG, FRAMEBORDER ve BORDER komutlarının yaptığı görev aynıdır: framelerin arasında kalan kenar boşlukları veya kenar kalınlığı. Burada neden birtanesini kullanmadık diye sorabilirsiniz. FRAMESPACING ve BORDER komutları internet Explorer, FRAMEBORDER komutu ise Netscape'in değişik versiyonlarında kullanılması gereken kumutlardır. 
Kodlamaya devam edersek;

<FRAME name="soltaraf" target="sag_alt" NORESIZE scrolling="no" src="menu.html">

Soldaki frame'mimizin ismini "Soltaraf" olarak belirlediğimiz görüyorsunuz. Frame'lerimize isim vermek, Linklerimizde sayfaların hangi frame'de açılacağını belirtmek içindir.
TARGET parametresi ile linklerimizin "sag_alt" isimli frame penceresine açılacağını göstermiş olduk.
NORESIZE parametresi frame sınırlarımızın mouse'la hareket ettirilemenesi içindir, Eğer site zıya retçiler iniz tarafından kenarların hareket ettirilebilmesini istiyorsanız bu parametreyi kullanmayın. Ama sol tarafta değişik arkaplanlar kullanabileceğinizi göz önüne alarak tasarımın bozulmaması için N0RESIZE komutunu kullanmanızı önerebiliriz.

SCROLLING parametresi kullanarak yanda kaydırma çuıbuğunun çıkıp çıkmamasını belirtebilirsiniz.
Scrolling="yes" her zaman yanda kaydırma çubuğunu çıkarır. Scrolling="no" sayfa aşağılara kadar uzasa da kaydırma çubuğu çıkmayacaktır. Scrolling="auto" komutu ile de sayfa ekrandan uzunsa ancak kaydırma çubuğu görüntülenir.
SRC parametresi ile de soldaki frame'mimize hangi HTML dosyasının yükleneceğini belirlınektir. Bu örneğimizde soldaki framemimiz " menü.html" dosyası olacaktır.
Burada unutulmaması gereken nokta ise frame sıralarıdır. Dikey frameler ise soldan sağa, yatay frameler ise yukarıdan aşağıya konumlanırlar.
Şimdi sağdaki Frame'mimize geldi sıra. Bu frame'mizi de ikiye ayıracaktık. Üstteki bölüme farklı bir HTML sayfası gelecektir. Burada verilen linkler yine sağ alttaki bölüme gitsin. Bunun için tekrar FRAMESET açmak gereklidir.

<fameset rows="65,'">
<frame name="sag_ust" target="sag_alt" scrolling="no" src="ust.html"> <frame name="sag_alt" scrolling="auto" noresize src="alt.html"> </frameset>

Burada da dikkat ettiğiniz üzere FRAMESET içerisinde kullandığımız ROWS parametresi ile burada açtığımız frame'in yatay iki pencereden oluştuğunu ve de üst frame'in genişliğinin 65 piksel olduğunu belirttik.
Hemen altındaki FRAME komutları ile üst taraftaki frame isminin sag_ust olduğunu ve ust.html adlı dosyayı yüklemesini, alttaki framede ise yandaki kaydırma çubuğunun sayfanın uzunluğuna göre ayarlanmasını belirttik.
Farkettiyseniz </FRAMESET> komutu ile en son açtığımız FRAMESET'i kapatmış olduk. Fakat ilk FRAMESET'imiz hala açık. Onu kapamadan önce tercihen ekleyebileceğimiz bir iki komut daha bulunuyor.

<NOFRAMES> komtu bize, browserlarında FRAME desteği olmayan veya bu özelliği kapatılmış olan ziyaretçiler İçin ayrı bir bilgi veya ayrı bir sayfa kullanma olanağı veriyor.

<NOFRAMES>
<BODY>
<H1>
FRAME Lİ SAYFA</H1><BR>
Bu Sayfa Frame destekleyen browser'larda
görülebilmektedir.
</BODY>
</NOFRAMES>

Yukandaki koddan da anlayabileceğiniz üzere NOFRAMES komutları arasında tıpkı normal bir web sayfası gibi BODY komutunu kullanabileceğiz. Tabii kapatmak kaydıyla.
Böylelikle FRAME desteği olmayan eski browser kullanıcılarına, bu sayfanın FRAME'li bir sayfa olduğunu ve de kullandığı browser'la bu sayfayı göremeyeceğine dair bir mesaj vermiş olduk. Ve de son noktayı koyarsak

</FRAMESET> </HTML>

Böylelikle ana omurga sayfasını bitirmiş olduk. Web üzerinde kullanılan belli başlı FRAME çeşitlerini ve HTML kodlarını sıralarsak

Ana ve İçerik Menüsü

 
   

Üstteki ana menü bölümünden giden linkler alt menüsü olan içerik menü bölümüne gider, içerikten ise ana sayfaya yönlenir.

<frameset rows="64,*" framespacing="0"
frameborder="0" border="0">
<frame name="anamenu" scrolling="no" noresize target="icerikmenu" src="banner.html">
<frameset cols="150,*" framespacing="0"
frameborder="0" border="0"><frame name"="icerikmenu" target="anasayfa" src="menu.html"><frame name="anasayfa" src="anasayfa.html">
</frameset>
<noframes>
<body>
<H1>FRAMELİ SAYFA</H1><BR>
Bu Sayfa Frame destekleyen browserlarda
görülebilmektedir.
</body></noframes>
</frameset> 





Yazan: Yorum:
Bu ders için yorumlar yok

RSS Feed: Web Tasarımı - Frame (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar