Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

Frame (Çerçeve) Kullanımı Çerçeve (frame) ’yi bir browser penceresinden birden fazla web sayfasını görüntülemek olarak tanımlayabiliriz. Çerçeveler (frames),

Benzer bir sunumlar


... konulu sunumlar: "Frame (Çerçeve) Kullanımı Çerçeve (frame) ’yi bir browser penceresinden birden fazla web sayfasını görüntülemek olarak tanımlayabiliriz. Çerçeveler (frames),"— Sunum transkripti:

1

2 Frame (Çerçeve) Kullanımı Çerçeve (frame) ’yi bir browser penceresinden birden fazla web sayfasını görüntülemek olarak tanımlayabiliriz. Çerçeveler (frames), HTML'e sonradan eklenmiş bir özelliktir. Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekler. Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Görüntülenen sayfalardan birindeki linkin tıklanması ile başka bir çerçevedeki içeriği değiştirebiliriz.

3 Frame (Çerçeve) Kullanımı Aşağıdaki etiketleri kullanarak ana frame penceresini oluştururuz. İLK ETİKET SON ETİKETAÇIKLAMA Çerçeveli sayfayı belirtmede kullanılır. yok Bir çerçeve sayfası için ad ve kaynak belirtmede kullanılır. Çerçeveyi desteklemeyen browserların göstereceği alternatif sayfa bu etiket arasına yazılır.

4 Etiketi Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını belirtmek için ve etiketlerini kullanırız. i kullanarak çerçeveleri satırlar ve sütunlar olarak ya da her ikisini kullanacak şekilde tanımlayabilirsiniz. etiketi iki tane özelliğe sahiptir; COLS: Sütun çerçevenin sayısını ve büyüklüğünü belirler ROWS: Satır çerçevenin sayısını ve büyüklüğünü belirler. Aşağıdaki üç metottan birini kullanarak satır ve sütunları tanımlayabiliriz. Sayfa yüksekliği ve genişliğinin bir yüzdesi olarak (“50%” gibi) Piksel cinsinden sabit bir sayı ile (“100” gibi) Kullanılabilir boşluğun kalanını kullanarak (“*” ile)

5 Etiketi Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının birkaç örneği vardır. Üç sütunlu çerçeve; ilk ikisi 100 piksel genişliğinde, üçüncüsü ise kalan boşluğun tamamı büyüklüğünde. Üç sütunlu çerçeve; birincisi 100 piksel, ikincisi browserın %30 u ve üçüncüsü de kalan boşluğun tamamı büyüklüğünde. Dört satırlı çerçeve; birincisi web tarayıcısının %20 si yüksekliğinde, ikincisi kullanılabilecek alanın tamamı, üçüncüsü ise tarayıcının %30 u yüksekliğindedir. Not: etiketi ve etiketinin dışında kullanılması nedeni ile diğer çoğu etiketlerden farklıdır.

6 Etiketi ile çerçeve sayfası tanımlandıktan sonra her bir çerçeve penceresinin kaynağını belirtmeliyiz. Bunu da etiketi ile yaparız. Özellikleri; etiketinin içerisinde her bir satır ya da sütun çerçeve için etiketini kullanmak gerekir. ÖZELLİK AÇIKLAMA NAME Pencerenin adını belirler SRC Pencerede gösterilecek kaynak dosyayı belirler FRAMEBORDER Piksel olarak Çerçeve kalınlığı NORESIZE Bu özellik yazıldığında çullanıcı çerçeveyi boyutlandıramaz. SCROLLING Kaydırma çubuğunun olup olmayacağına işaret eder. Auto, Yes ya da No değerlerini alabilir. Varsayılan Auto dur.

7 Çerçeveler Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.

8 Çerçeveler

9 Çerçeveler etiketi ile htm1.htm dosyasının artalan rengi kırmızı, htm2.htm 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ıştır.

10 ... Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, rows yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır.

11 ... 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, * 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.

12 ... 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 pencere aç anlamındadır, 3 değer 3 pencere açar. etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor. src pencerede görüntülenecek html dosyasının yerini gösteriyor. Açılacak çerçeve sayısı kadar etiketi kullanıyoruz.

13 ... Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik. İş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.

14 ... FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar; frameborder="...“ (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler. FRAMESET etiketini HTML dosyanızın... etiketleri arasında kullanmayı unutmayın !

15 ... 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.

16 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.

17 Daha karmaşık çerçeveler

18

19

20 Çalışma: Uygulamada en az üç çerçeveden oluşan sayfa hazırlanıp sol çerçevede linkler olacak ve target özelliğinin farklı değerleri bu örnek üzerinde denenecek…

21 Çerçeveler Etiketi Eğer Web Tarayıcısı FRAME i desteklemiyorsa alternatif gösterilecek sayfa bu etiket arasında oluşturulacak olan etiket bloğuna yazılır. Çerçeveler Browserınız çerçeveleri desteklemiyor

22 Çerçeveler Etiketi Bu tag ile HTM kodları arasına bir çerçeve açılıp bu çerçevede başka bir sayfa gösterilebilir. Özellikleri: ÖZELLİK AÇIKLAMA SRC Çerçevede gösterilecek kaynak web sayfası WIDTH Çerçevenin genişliği HEIGHT Çerçevenin yüksekliği SCROLLING Kaydırma çubuğu durumu (yes, no, auto) FRAMEBORDER Çerçevenin kalınlığı ALIGN Çerçevenin sayfadaki hizalaması

23 Çerçeveler Örnek:

';
Google Reklamları