Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

1 İNTERNET PROGRAMLAMA - 1 Çerçeveler Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu.

Benzer bir sunumlar


... konulu sunumlar: "1 İNTERNET PROGRAMLAMA - 1 Çerçeveler Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu."— Sunum transkripti:

1 1 İNTERNET PROGRAMLAMA - 1 Çerçeveler Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu

2 2 GİRİŞ Çerçeve (frame), Çerçeveler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir.

3 3 GİRİŞ Çerçeve (frame), Ç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 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekliyor).

4 4 GİRİŞ Çerçeve (frame), Ç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.

5 5 ÇERÇEVELER Çerçevelerin özellikleri; Her çerçeve kendi URL’sine sahiptir. Her çerçeveye ad verilebilir. Her çerçeve kullanıcı tarafından boyutlanabileceği gibi, kendi kendini de otomatik olarak boyutlayabilir.

6 6 ÇERÇEVELER Çerçevelerin kullanım alanları; İçindekiler sayfası hazırlanarak, metin okunurken bir tarafta sürekli içerik görüntülenebilir. Bir çerçevede kriter verilerek yapılan işlemler diğer çerçevede de görüntülenebilir. Sürekli görünmesi istenen mesajlar için kullanılabilir.

7 7 ÇERÇEVELER Bir frame belgesi normal bir HTML belgesine çok benzer. Tek farkı içinde elemanı (tag) yerine, elemanı kullanılmasıdır.

8 8 ÇERÇEVELER …. …..

9 9 Çerçeve oluşturmada kullandığımız etikettir. Tag ile birlikte kullanılabilecek iki adet parametre vardır. Bunlar cols ve rows’dur. Bu parametreler oluşturulacak pencerelerin cinsini belirler.

10 10 cols Virgülle ayrılmış değerler girilerek oluşturulacak çerçevelerin yan yana sütunlar şeklinde olmasını sağlar. Bu değerler pixel olarak verilebileceği gibi, 1 ile 100 arasındaki bir yüzde ile ya da göreceli boyutlar olarak tanımlanabilir. Tabiî ki belirtilen sütun sayısı,oluşturulacak olan çerçeve sayısını da belirleyecektir. “*” ile göreceli değer verilirken, sütunun geriye kalan bütün alanı kapsaması için kullanılır. “*” işareti önünde bir sayı varsa, sütun diğer göreceli değerlerden daha büyük olacaktır.

11 11 cols Örnek 1: İlk ve sonda tanımlanan çerçeve ortadaki çerçeveden daha küçük olacaktır.

12 12 cols Örnek 2: İlk ve sonda tanımlanan çerçeve sabit aralıklı, ortadaki çerçeve ise geriye kalan aralığı kullanır.

13 13 cols Yeni Sayfa2

14 14 cols Aşağıdaki örneği inceleyelim:

15 15 cols Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor (yani ana dosya). Bu komutlar browser'a, görüntülenmekte olan pencereyi ikiye bölmesini bildirmektedir. Browser’ın bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.

16 16 cols 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. Sonuç gördüğünüz gibi.

17 17 Çerçeveler frame.htm

18 18 htm1.htm htm1.htm

19 19 htm2.htm htm2.htm

20 20 rows Cols etiketinde değerler verilirken kullanılan formatın aynısı kullanılarak çerçevelerin alt alta satırlar görünümünde açılmasını sağlar.

21 21 rows Yeni Sayfa2

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

23 23 cols cols (sütunlar)

24 24 rows rows (satırlar)

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

27 27... FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlardır; 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

28 28 ile çerçeveleri böldükten sonra içlerine konulacak sayfaları tanımlama işi elemanı ile yapılır. frame name="..." src="..." name bağlantıların TARGET kısmında kullanabilmek amacıyla çerçevelere isim (name) vermeyi sağlıyor. src pencerede görüntülenecek html dosyasının yerini gösteriyor. Resimler konusunda belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerlidir. Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketi kullanıyoruz.

29 29 etiketi ile kullanılan parametreler şunlardır: name Çerçevenin adıdır. En önemli parametre sayılabilir. Çünkü frameset’lerde bir çerçevenin içindeki bir link bir başka çerçevenin içeriğini değiştirebilir. Bunu da name parametresini kullanarak yapar.

30 30 etiketi ile kullanılan parametreler şunlardır: src İçine yerleştirilecek dosyanın URL’sini belirtir. src’u belirtmediğiniz takdirde; Tarayıcı herhangi bir hata vermeyecektir. Buraya varsayılan renkte boş bir sayfa koyacaktır.

31 31 etiketi ile kullanılan parametreler şunlardır: RESIZE/NORESIZE Çerçeve büyüklüğünün değiştirilip değiştirilmeyeceği bilgisini içerir. resize Pencere boyutlarının değiştirilebilmesini sağlar. noresize Pencere boyutlarının sabit olmasını sağlar.

32 32 etiketi ile kullanılan parametreler şunlardır: marginwidth="..." marginheight="..." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler. MARGINHEIGHT Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler. MARGINWIDTH Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.

33 33 etiketi ile kullanılan parametreler şunlardır: scrolling (yes, no, auto) Çerçevenin içeriğinin bir ekrana sığmaması halinde tarayıcının kenara bir kayma çubuğu ekleyip eklemeyeceğini belirler (yes, no, auto). Varsayılan değeri auto’dur. (yes, no, auto) kaydırma çubuklarının durumunu belirler.

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

35 35 etiketi, Eğer ziyaretçinin istemcisinin çerçeve desteği yoksa ziyaretçiye görüntülenecek sayfayı belirlemede kullanılır. Daha çok eski ve Linux altında kullanılan metin tabanlı istemcilerde çerçeve desteği yoktur.

36 36 ÇERÇEVELER Browser'ınızın sürümü sayfamızı görüntülemeye uygun degil, lütfen daha yeni bir sürüm yükleyip tekrar deneyin

38 38 Daha Karmaşık Çerçeveler

39 39 Daha Karmaşık Çerçeveler

40 40 Daha Karmaşık Çerçeveler

41 41 Daha Karmaşık Çerçeveler

42 42 Daha Karmaşık Çerçeveler

43 43 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ırmaktan geçtiğini unutmayın. Hepinize başarılar...

44 44 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 1.Web tarayıcınızın penceresini yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesini sağlayan etiket hangisidir? A B C D

45 45 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 1.Web tarayıcınızın penceresini yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesini sağlayan etiket hangisidir? A B C D

46 46 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 2.Aşağıdakilerden hangisi ile beraber kullanılan parametrelerden değildir? Aname Bscrolling Cresize Dcolspan

47 47 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 2.Aşağıdakilerden hangisi ile beraber kullanılan parametrelerden değildir? Aname Bscrolling Cresize Dcolspan

48 48 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 3.Çerçeve desteği olmayan tarayıcılarda görüntülenecek sayfayı belirlemede kullanılan etiket hangisidir? A B C D

49 49 ÖLÇME VE DEĞERLENDİRME A-OBJEKTİF TESTLER(ÖLÇME SORULARI) Aşağıdaki sorulardan; sonunda parantez olanlar doğru / yanlış sorularıdır. Verilen ifadeye göre parantez içine doğru ise “D”, yanlış ise “Y” yazınız. Şıklı sorularda uygun şıkkı işaretleyiniz. 3.Çerçeve desteği olmayan tarayıcılarda görüntülenecek sayfayı belirlemede kullanılan etiket hangisidir? A B C D

50 50 UYGULAMA FAALİYETİ İşlem BasamaklarıÖneriler Web sayfanızı dikey olarak iki çerçeve olacak şekilde bölünüz. Web sayfanızda çok fazla çerçeve kullanmak sayfanın yüklenmesini zorlaştıracaktır. Çerçevelerin arka plan rengini değiştiriniz. Çerçevelerin boyutlarının değişmesini engelleyiniz. Kaydırma çubuğu kullanmayınız. Her bir çerçeve için ayrı bir html dosyası hazırlamanız gerekecektir. Sol taraftaki çerçevede menü oluşturunuz. Bu menülere tıkladığınızda içeriğinin sağ taraftaki çerçevede açılması için bağlantı ekleyiniz. Menü oluşturacağınız çerçevenin genişliğini az tutup diğerine daha fazla yer ayırabilirsiniz. Böylece menülerin içeriği daha rahat gözükecektir.

51 51 PERFORMANS TESTİ Değerlendirme ÖlçütleriEvet / Hayır etiketini kullandınız mı? COLS ve ROWS parametrelerini kullandınız mı? etiketini kullandınız mı? MARGINWIDTH ve MARGINHEIGHT parametrelerini kullandınız mı? SCROLLING parametresini kullandınız mı? NORESIZE parametresini kullandınız mı? etiketini kullandınız mı? Bir arkadaşınızla birlikte yaptığınız uygulamayı değerlendirme ölçeğine göre değerlendirerek eksik veya hatalı gördüğünüz davranışları tamamlayınız.

52 52 UYGULAMA DEĞERLENDİRMESİ Yaptığınız değerlendirme sonunda hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Eksiklerinizi araştırarak ya da öğretmeninizden yardım alarak tamamlayabilirsiniz. Cevaplarınızın tamamı evet ise bir sonraki faaliyete geçiniz.


"1 İNTERNET PROGRAMLAMA - 1 Çerçeveler Öğr.Gör. Serkan KORKMAZ Harran Üniversitesi Birecik Meslek Yüksekokulu." indir ppt

Benzer bir sunumlar


Google Reklamları