WEB TASARIMI VE PROGRAMLAMA

Transkript

1 WEB TASARIMI VE PROGRAMLAMA MODÜL ADI SÜRESİ TASARIMIN TEMEL İLKELERİ 40/8 HTML İLE BASİT WEB İŞLEMLERİ 40/32 HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 40/32 STİL ŞABLONU (CSS) 40/32 WEB TASARIM EDİTÖRÜNE GİRİŞ 40/32 WEB TASARIM EDİTÖRÜNDE İLERİ UYGULAMALAR WEB TASARIM EDİTÖRÜ İLE VERİ TABANI İŞLEMLERİ 40/32 40/32 BETİK DİLİ (JAVASCRİPT) 40/32 ETKİLEŞİMLİ WEB UYGULAMALARINA GİRİŞ 40/32 ETKİLEŞİMLİ WEB UYGULAMALARI İÇİN TEMEL KOMUTLAR ETKİLEŞİMLİ WEB UYGULAMALARINDA WEB FORMLARI ETKİLEŞİMLİ WEB UYGULAMALARINDA VERİ TABANI IŞLEMLERİ 40/32 40/32 40/32

2 DERS BİLGİ FORMU DERSİN ADI ALAN MESLEK/DAL DERSİN OKUTULACAĞI SINIF/YIL ÖNERİLEN SÜRE DERSİN AMACI DERSİN TANIMI DERSİN ÖN KOŞULLARI DERS İLE KAZANDIRILACAK WEB TASARIMI VE PROGRAMLAMA BİLİŞİM TEKNOLOJİLERİ WEB PROGRAMCILIĞI 11. veya 12. SINIF Haftalık 10 Ders Saati (Teknik Lise ve Anadolu Teknik Liselerde 12 saat) Bu derste öğrenciye; HTML dili komutları ve/veya web tasarım editörü yardımıyla web sayfaları oluşturma, programlama kodlarını kullanarak etkileşimli web uygulamaları yapma yeterliklerini kazandırmak amaçlanmaktadır. Tasarımda dikkat edilecek temel ilkeler, HTML dili komutlarını kullanma, web tasarım editörünü ve stil şablonlarını kullanarak web sayfası tasarımı yapma, betik dilini kullanma ve etkileşimli web uygulamaları için programlar hazırlama ile ilgili konularda gerekli bilgilerin verildiği derstir. Bu ders için ön koşul yoktur. Bu dersin sonunda; 1. Web projesinin analizini gerçekleştirerek tasarım ilkelerine uygun hazırlıkları yapmak 2. HTML kodları ile basit web işlemlerini yapmak 3. HTML kodları ile gelişmiş web işlemlerini yapmak 4. Stil şablonu (CSS) yapılandırmasını gerçekleştirmek 5. Web projesi için temel düzenlemeleri yapmak 6. Nesne işlemlerini yapmak ve site yönetimini gerçekleştirmek 7. Veri Tabanı işlemlerini yapmak 8. Betik dili yardımıyla script oluşturmak 9. Programlama için gerekli yazılımı kullanmak 10. Web sitesi yapısını oluşturmak 11. Web sayfalarını biçimlendirmek 12. Veri Tabanı işlemlerini yapmak yeterlikleri kazandırılacaktır. 1

3 DERSİN İÇERİĞİ 1. Web tasarımında temel ilkeler 2. Web sitesi taslağı oluşturma 3. İnternet ortamı ve web tasarımı 4. Html (hyper text markup language) temel etiketleri 5. Metin ve görünüm düzenleme etiketleri 6. Bağlantı (köprü) oluşturma 7. Tablolar 8. Formlar 9. Çerçeveler 10. Stil şablonları 11. Çoklu ortam araçları 12. Stil şablonu (css) temelleri 13. Stil şablonu (css) özellikleri 14. Stil şablonu (css) menü işlemleri 15. Tarayıcı sorunları 16. Temel işlemler 17. Metin işlemleri 18. Tablolar 19. Resimler 20. Çoklu ortam bileşenleri 21. Bağlantılar (linkler) 22. Css 23. Spry 24. Formlar 25. Site yönetimi ve yayını 26. Veri Tabanı panelleri 27. Detay sayfalar 28. Arama arayüzleri 29. Veri Tabanı işlemleri 30. Kullanıcı adı ve şifre işlemleri 31. Programlama dili 32. Kodlama yapısı 33. Komutlar 34. Olaylar ve nesneler 35. Visual studio Asp.net 2.0 programlama modeline giriş 37. Web site işlemleri 38. Uygulama dosyaları 39. Web sayfalarını oluşturmak ve değiştirmek 40. Kaynak kod ile çalışmak 41. Web kullanıcı denetimlerini oluşturmak ve kullanmak 42. Ana sayfaları kullanarak sayfaları düzneleme 43. Geçişli stil sayfaları kullanma 44. Asp.net temalarıyla görünüşü düzenleme 45. Sitedeki sayfaları otomatik olarak bağlamak 46. Asp.net durum yöneticisi 47. Veritabanları oluşturma ve onları bağlama 48. Veri Tabanı bilgilerini görüntüleme 49. Veri Tabanı bilgilerini yönetme ile ilgili konuları içermektedir. 2

4 YÖNTEM VE TEKNİKLER EĞİTİM ÖĞRETİM ORTAMI VE DONATIM ÖLÇME VE DEĞERLENDİRME EĞİTİMCİLER İŞBİRLİĞİ YAPILACAK KURUM VE KURULUŞLAR Bu derste anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, beyin fırtınası, uygulamalı çalışma; işletmelerde gözlem yapma, uygulama, araştırma, bireysel ve modüler öğretim yöntemleri, yenilikleri takip etme vb. yöntem ve teknikler uygulanabilir. Ortam: Bilişim Teknolojileri laboratuarı, işletme ortamı. Donanım: Projeksiyon, bilgisayar,web tasarım editörü programı Millî Eğitim Bakanlığı Ortaöğretim Kurumları Sınıf Geçme ve Sınav Yönetmeliği ne uygun olarak modül ve ders sonunda ölçme araçları kullanılarak ölçme ve değerlendirme yapılacaktır. 1. Millî Eğitim Bakanlığına bağlı eğitim kurumlarına öğretmen olarak atanacaklardan atamalarına esas olan alanlar ile mezun oldukları yükseköğretim programları ve aylık karşılığı okutacakları derslere ilişkin çizelgeye uygun olanlar görev almalıdır. 2. Programın uygulanmasında gerektiğinde alanında sektör deneyimi olan usta öğretici, teknisyen ve meslek elemanlarından yararlanılabilir. Diğer alan öğretmenleri, üniversiteler, sosyal ortaklar, sivil toplum kuruluşları, çevrede bulunan işletmeler, özel, kamu kurum ve kuruluşlarıdır. 3

5 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : TASARIMIN TEMEL İLKELERİ : 482BK0171 SÜRE : 40/8 ÖN KOŞUL : Bu modül için ön koşul yoktur. AÇIKLAMA : ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci, bu modülle gerekli ortam sağlandığında; web projesinin analizini gerçekleştirerek tasarım ilkelerine uygun hazırlıkları yapabilecektir. AMAÇLAR : İÇERİK : 1. Web tasarımında temel ilkeleri uygulayabilecektir. 2. Web sitesi taslağı oluşturacaktır. 1. WEB TASARIMINDA TEMEL İLKELER 1.1. Web Tasarımında Temel İlkeler İçerik Tasarım İşlevsellik Kullanılabilirlik Web Tarayıcıları ile Uyumluluk 1.2. Hedef Kitle Beklentileri 1.3. Müşterinin Web Projesi İhtiyaçları Müşterinin Sunduğu Hizmetlerin Web Projesi ile Tanıtılması Müşterinin Sunduğu Ürünlerin Web Projesi ile Tanıtılması Müşterinin Kişisel Web Projesinin Tanıtılması 1.4. Biçimsel özellikler Renk Dengesi Okunabilirlik Hizalama Metin ve Nesne Arası Boşluklar 4

6 1.5. Ses ve Görüntü Ekleme Prensipleri 1.6. Projede Kullanılacak Yazılımların Belirlenmesi 1.7. Maliyet 2. WEB SİTESİ TASLAĞI OLUŞTURMA 2.1. Web Sitesi Taslağı Bütünlük Güvenirlik Güncellik Bağlantı Hızı Sunulacak İçerik Kategorilerini Oluşturma Tutarlı Sayfa Hazırlama 2.2. Ana Sayfa Düzeni Sayfa İçi Yerleşim Planı Sayfa Çözünürlüğü Reklam Alanlarını Belirleme 2.3. Dil Desteğinin Belirlenmesi 2.4. Mobil Cihazlarla Uyumluluk 2.5. Yardım Sayfaları 2.6. Site Haritası ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Web tasarımının temel ilkelerine ve hedef kitle beklentilerine göre web projesinin biçimsel ve yazılımsal özelliklerini belirler. 2. İhtiyaca uygun web tasarımının gerektirdiği maliyet hesabını yapar. 3. Kullanılabilirlik kriterlerine göre site haritasını planlar. 4. Site altyapısına ve tasarım kurallarına uygun web sitesi ana sayfa şablonunu oluşturur. 5

7 MESLEĞİN ADI Web Programcısı İŞ Web projesi hazırlama İŞLEM NUMARASI 1 İŞLEMİN ADI Proje ihtiyaçlarını belirlemek YETERLİK Web projesinin analizini gerçekleştirerek tasarım ilkelerine uygun hazırlıkları yapmak Bilgisayar, İnternet Bağlantısı, Web Tasarım Yazılımları İhtiyaca uygun tasarım yapısını planlamak 1. Web tasarımının temel ilkelerini belirlemek 2. Proje ihtiyaçlarını belirlemek 3. Projenin biçimsel özelliklerini belirlemek 4. Projede kullanılacak yazılım ihtiyaçlarını belirlemek 5. Proje maliyetini hesaplamak 1. WEB TASARIMINDA TEMEL İLKELER 1.1. Web Tasarımında Temel İlkeler İçerik Tasarım İşlevsellik Kullanılabilirlik Web Tarayıcıları ile Uyumluluk 1.2. Hedef Kitle Beklentileri 1.3. Müşterinin Web Projesi İhtiyaçları Müşterinin Sunduğu Hizmetlerin Web Projesi ile Tanıtılması Müşterinin Sunduğu Ürünlerin Web Projesi ile Tanıtılması Müşterinin Kişisel Web Projesinin Tanıtılması 1.4. Biçimsel özellikler Renk Dengesi Okunabilirlik Hizalama Metin ve Nesne Arası Boşluklar 1.5. Ses ve Görüntü Ekleme Prensipleri 1.6. Projede Kullanılacak Yazılımların Belirlenmesi 1.7. Maliyet 6 1. Web tasarım temel ilkelerini uygulamak 2. Proje ihtiyaçlarına uygun yazılımları seçmek 3. Web projesinin ihtiyaçlarını belirlemek 4. Web projesinin biçimsel özelliklerini belirlemek 5. Web projesine ses ve görüntü ekleme işlemlerini yapmak 6. Web projesinin maliyet hesabını yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Sabırlı olmak 5. Tasarım ilkelerini dikkat 6. İhtiyaçlarının belirlenmesinde müşteri fikirlerine önem vermek 7. Web projesinin biçimsel özelliklerine dikkat 8. Verim-maliyet dengesine dikkat SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 4 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti olmasına dikkat ediniz.

8 MESLEĞİN ADI Web Programcısı İŞ Web projesi hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Site taslağını oluşturmak YETERLİK Web projesinin analizini gerçekleştirerek tasarım ilkelerine uygun hazırlıkları yapmak Bilgisayar, İnternet Bağlantısı Tasarım kurallarına uygun site altyapısını oluşturmak 1. Web sitesi taslağı hazırlamak 2. Web sitesi anasayfa şablonu hazırlamak 3. Kullanılabilirlik kriterlerini belirlemek 4. Sitenin yardım sayfalarını planlamak 5. Site haritasını planlamak 2. WEB SİTESİ TASLAĞI OLUŞTURMA 2.1. Web Sitesi Taslağı Bütünlük Güvenirlik Güncellik Bağlantı Hızı Sunulacak İçerik Kategorilerini Oluşturma Tutarlı Sayfa Hazırlama 2.2. Ana Sayfa Düzeni Sayfa İçi Yerleşim Planı Sayfa Çözünürlüğü Reklam Alanlarını Belirleme 2.3. Dil Desteğinin Belirlenmesi 2.4. Mobil Cihazlarla Uyumluluk 2.5. Yardım Sayfaları 2.6. Site Haritası 1. Web sitesi için taslak çalışması yapmak 2. Ana sayfa için düzen işlemlerini yapmak 3. Web sitesi kullanırlığını arttıracak işlemler yapmak 4. İhtiyaç halinde, siteyi mobil cihazlarla uyumlu çalışacak şekilde hazır hale getirmek 5. Site haritasının oluşturulması ile ilgili işlemleri yapmak 7 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Sabırlı olmak 5. Hukuksal sorumluluklara dikkat 6. Web sitesi için taslak çalışması yapılırken bütünlüğe dikkat 7. Web sitesi için taslak çalışması yapılırken güvenirliliğe dikkat 8. Web sitesi için taslak çalışması yapılırken güncelliğe dikkat 9. Web sitesi için taslak çalışması yapılırken içerik kategorilerinin oluşturulmasına dikkat 10. Web sitesi için taslak çalışması yapılırken tutarlı sayfa oluşturmaya dikkat 11. Bakımı kolay site planlaması eğiliminde olmak 12. Açılış sayfasının öneminin farkında olmak 13. Ana sayfa düzen işlemlerinde ergonomiye dikkat 14. Site içi öğeler arasındaki uyuma dikkat 15. Sayfalar arasında kopuk bağlantıların olmamasına önem vermek SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 4 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti olmasına dikkat ediniz.

9 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : HTML İLE BASİT WEB İŞLEMLERİ : 482BK0152 SÜRE : 40/32 ÖN KOŞUL ÖĞRETİM YÖNTEM VE TEKNİKLERİ AÇIKLAMA GENEL AMAÇ : Bu modül için ön koşul yoktur. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğrenci bu modül ile gerekli ortam sağlandığında; HTML kodları ile basit web işlemlerini yapabilecektir. AMAÇLAR : İÇERİK : 1. İnternetle ilgili temel araçları kullanabilecektir. 2. HTML dili temel etiketlerini kullanabilecektir. 3. HTML dili metin biçimlendirme etiketlerini kullanabilecektir. 4. HTML etiketleri ile bağlantılar oluşturabilecektir. 5. HTML etiketleri ile tablolar oluşturabilecektir. 1. İNTERNET ORTAMI VE WEB TASARIMI 1.1. İnternet IP (Internet Protocol) Numarası İnternet Alanı (Domain) 1.2. WEB Tarayıcılar WEB Tarayıcıların Çalışması 1.3. Arama Motorları Arama Motorlarının Çalışması Arama Motorları ile Arama Yapma 1.4. WEB Tasarımı Sayfa Hazırlarken Dikkat Edilecek Noktalar Görsel Tasarım 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ 2.1. HTML Komut Yapısı <HTML> <HEAD> 8

10 <BODY> <TITLE> 2.2. Listeleme Etiketleri <OL> <UL> <LI> 3. METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ 3.1. Metin Düzenleme Etiketleri <HX> <B> <U> <I> <BR> <P> <FONT> 3.2. Görünüm Düzenleme Etiketleri <HR> 4. BAĞLANTI (KÖPRÜ) OLUŞTURMA 4.1. Sayfa İçi Bağlantı Oluşturma 4.2. Sayfa Dışı Bağlantı Oluşturma 4.3. E-Posta Adresine Bağlantı Oluşturma 5. TABLOLAR 5.1. <TABLE> TR TD Border Bgcolor Background Width Height Colspan Rowspan Cellspacing Cellpadding ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. HTTP kurallarına uyarak arama motorları ile belirli bir konuda internet üzerinden veri toplayabilir. 2. HTML sayfasında bulunması gereken standart etiketleri kullanarak basit bir HTML belge oluşturur. 3. HTML komut yapısına dikkat ederek, basit bir liste gösteren HTML belge oluşturur. 4. Görsel tasarım kurallarına dikkat ederek HTML sayfa üzerinde metin biçimlendirme işlemlerini yapar. 5. HTML belgesinden istediği yere (belge içi-belgeler arası-e-posta) bağlantı oluşturur. 6. Görsel tasarım kurallarına uyarak HTML belge üzerinde tablo düzenleme işlemlerini hatasız yapar. 9

11 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 1 İŞLEMİN ADI İnternetle ilgili temel araçları kullanmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Internet kavramını açıklamak 2. Web tarayıcılarını kullanmak 3. Arama motorlarını kullanmak 4. Web tasarım kurallarını uygulamak SÜRE: İşlemin Yapılma Süresi: 1 saat 1. İNTERNET ORTAMI VE WEB TASARIMI 1.1. İnternet IP (Internet Protocol) Numarası İnternet Alanı (Domain) 1.2. WEB Tarayıcılar WEB Tarayıcıların Çalışması 1.3. Arama Motorları Arama Motorlarının Çalışması Arama Motorları ile Arama Yapma 1.4. WEB Tasarımı Sayfa Hazırlarken Dikkat Edilecek Noktalar Görsel Tasarım 1. İnternet kavramlarını kullanmak 2. Web tarayıcılar ile çalışmak 3. Arama motorları ile çalışmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Sabırlı olmak 5. İnternet kavramları arasındaki farklara dikkat 6. Web tarayıcılar arasındaki farklara dikkat 7. Arama motorlarının çalışma özelliklerine dikkat İşlemi Öğrenme Süresi: 4 ders saati 10

12 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Temel HTML Etiketlerini Kullanmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. HTML belgesi oluşturmak 2. HTML belgesini kayd 3. Oluşturulan HTML belgesini internet tarayıcıda görüntülemek 4. HTML sayfasında bulunması gereken standart etiketleri kullanmak 5. Listeleme etiketlerini kullanmak 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ 2.1. HTML Komut Yapısı <HTML> <HEAD> <BODY> <TITLE> 2.2. Listeleme Etiketleri <OL> <UL> <LI> 1. HTML belgesi oluşturma işlemleri yapmak 2. HTML sayfasında bulunması gereken standart etiketlerin kullanım işlemlerini yapmak 3. HTML sayfası için listeleme etiketlerini kullanmak 1. HTML belgesi oluşturulurken dikkatli olmak 2. Detaylara özen göstermek 3. İş disiplinine sahip olmak 4. Planlı ve organize olmak 5. Sabırlı olmak 6. Standart etiketlerin kullanımında dikkatli olmak 7. Listeleme etiketlerinin kullanımında dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 11

13 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 3 İŞLEMİN ADI Metin Biçimlendirme Etiketlerini Kullanmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Mantıksal metin biçimlendirme etiketlerini kullanmak 2. Fiziksel metin biçimlendirme etiketlerini kullanmak 3. METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ 3.1. Metin Düzenleme Etiketleri <HX> <B> <U> <I> <BR> <P> <FONT> 3.2. Görünüm Düzenleme Etiketleri <HR> 1. HTML sayfası için metin biçimlendirme etiketlerini kullanmak 2. HTML sayfası için görünüm biçimlendirme etiketlerini kullanmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Mantıksal metin biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak 5. Fiziksel metin biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak 6. HTML sayfası için görünüm biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 6 ders saati 12

14 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 4 İŞLEMİN ADI Bağlantılar Oluşturmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Belge içi bağlantılar oluşturmak 2. Başka bir belgeye bağlantı oluşturmak 3. Mail yönlendirmesi yapmak 4. BAĞLANTI (KÖPRÜ) OLUŞTURMA 4.1. Sayfa İçi Bağlantı Oluşturma 4.2. Sayfa Dışı Bağlantı Oluşturma 4.3. E-Posta Adresine Bağlantı Oluşturma 1. HTML belgesinin sayfaları içerisinde bağlantılar oluşturmak 2. HTML belgesinin saylarının başka bir belge sayfasına bağlantısını yapmak 3. E-posta yönlendirilmesi işlemlerini yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. HTML belgesinin sayfaları içerisinde bağlantılarını hatasız yapmak 5. HTML belgesinin saylarının başka bir belge sayfasına bağlantısını hatasız yapmak 4. E-posta yönlendirilmesi işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 6 ders saati 13

15 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 5 İŞLEMİN ADI Tablolar Oluşturmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Tablo oluşturmak 2. Oluşturulan tabloları düzenlemek 5. TABLOLAR 5.1. <TABLE> TR TD Border Bgcolor Background Width Height Colspan Rowspan Cellspacing Cellpadding 1. Tablo oluşturma işlemlerini yapmak 2. Tablo düzenleme işlemleri yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. İhtiyaca uygun tablonun oluşturulmasına özen göstermek 5. Tablo düzenleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 14

16 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : HTML İLE GELİŞMİŞ WEB İŞLEMLERİ : 482BK0153 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : HTML İle Basit Web İşlemleri modülünü tamamlamış olmak. : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile gerekli ortam sağlandığında; HTML kodları ile gelişmiş web işlemlerini yapabilecektir. AMAÇLAR : İÇERİK : 1. Formlar oluşturabilecektir. 2. Çerçeveler oluşturabilecektir. 3. Stil şablonları oluşturabilecektir. 4. Web sayfaları için çoklu ortam araçları ekleyebilecektir.. 1. FORMLAR 1.1. <form> Action Method Target 1.2. <input> 1.3. Form nesneleri CheckBox Radio Text Image Password Textarea Reset Submit 15

17 2. ÇERÇEVELER 2.1. <frameset> Cols Rows 2.2. <frame> 2.3. <noframes> 3. STİL ŞABLONLARI 3.1. Stil şablonlarının komut yapısı 3.2. Stil şablonlarının çeşitleri, seçiciler Stil şablonlarının çeşitleri Seçiciler (Selectors) 3.3. Stil şablonlarının genel kullanım şekilleri A etiketinin CSS ile kullanımı Bağlantılı CSS dosyalarının hazırlanması 4. ÇOKLU ORTAM ARAÇLARI 4.1. Resim ekleme 4.2. Ses araçları ekleme 4.3. Video ekleme ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Türkçe karakter kullanımına dikkat ederek ihtiyaca uygun form nesnesini HTML belgeye ekler. 2. Web tasarım ilkelerine dikkat ederek oluşturulan form nesnelerinin düzenlenmesi işlemlerini hatasız yapar. 3. Web sayfalarının özelliklerine göre uygun sayıda ve büyüklükte çerçevelere bölme işlemini hatasız yapar. 4. Site haritasına uygun olarak çerçeveler arası bağlantıları oluşturur. 5. Stil şablonlarının komut yapısına dikkat ederek stil tanımlamalarını yapar. 6. Görsel tasarım ilkelerine dikkat ederek HTML belgeye uygun olan multimedya araçlarını hatasız ekler. 16

18 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 1 İŞLEMİN ADI Formlar Oluşturmak HTML kodları ile gelişmiş web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Form nesneleri oluşturmak 2. Oluşturulan formları düzenlemek 1. FORMLAR 1.1. <form> Action Method Target 1.2. <input> 1.3. Form nesneleri CheckBox Radio Text Image Password Textarea Reset Submit 1. Form nesnelerinin oluşturulması işlemlerini yapmak 2. Form nesnelerinin düzenlenmesi işlemleri yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. İhtiyaca uygun form nesnelerinin oluşturulmasına özen göstermek 5. Form nesnelerinin düzenlemesi işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 17

19 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Çerçeveler Oluşturmak HTML kodları ile gelişmiş web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Web sayfalarını çerçevelere bölmek 2. Çerçeveleri düzenlemek 3. Çerçevelere bağlantılar eklemek 2. ÇERÇEVELER 2.1. <frameset> Cols Rows 2.2. <frame> 2.3. <noframes> 1. Web sayfalarını çerçevelere bölme işlemlerini yapmak 2. Çerçevelerin düzenlenmesi işlemleri yapmak 3. Çerçevelere bağlantılar oluşturmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Web sayfalarının özelliklerine uygun çerçevelere bölmeye özen göstermek 5. Çerçevelerin düzenlemesi işlemlerini hatasız yapmak 6. Çerçeve bağlantılarını hatasız oluşturmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 18

20 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 3 İŞLEMİN ADI Stil Sayfaları Oluşturmak HTML kodları ile gelişmiş web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Stil tanımlamaları yapmak 2. Stil tanımlamalarını düzenlemek 3. STİL ŞABLONLARI 3.1. Stil şablonlarının komut yapısı 3.2. Stil şablonlarının çeşitleri, seçiciler Stil şablonlarının çeşitleri Seçiciler (Selectors) 3.3. Stil şablonlarının genel kullanım şekilleri A etiketinin CSS ile kullanımı Bağlantılı CSS dosyalarının hazırlanması 1. Stil tanımlama işlemlerini yapmak 2. Stil tanımlamalarının düzenlemesi işlemleri yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Stil şablonlarının komut yapısına dikkat 5. Stil tanımlama işlemlerini hatasız yapmak 6. Stil tanımlamalarının düzenlemesi işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 19

21 MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 4 İŞLEMİN ADI Çoklu Ortam Araçları Eklemek HTML kodları ile gelişmiş web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Hareketli resimler eklemek 2. Ses dosyaları eklemek 3. Video filmi eklemek 4. Java appletleri eklemek 4. ÇOKLU ORTAM ARAÇLARI 4.1. Resim ekleme 4.2. Ses araçları ekleme 4.3. Video ekleme 1. HTML belgesi içine resim ekleme işlemlerini yapmak 2. HTML belgesi içine ses araçlarını ekleme işlemlerini yapmak 3. HTML belgesi içine video ekleme işlemlerini yapmak 4. HTML belgesi içine Java appletleri eklemek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. HTML belgesi içine resim ekleme işlemlerini hatasız yapmak 5. HTML belgesi içine ses araçlarını ekleme işlemlerini hatasız yapmak 6. HTML belgesi içine video ekleme işlemlerini hatasız yapmak 7. HTML belgesi içine Java appletleri ekleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 20

22 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : STİL ŞABLONU (CSS) : 482BK0170 SÜRE : 40/32 ÖN KOŞUL : Bu modül için ön koşul yoktur. AÇIKLAMA : ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci, bu modül ile gerekli ortam sağlandığında; Stil Şablonu (CSS) yapılandırmasını gerçekleştirebilecektir. AMAÇLAR : İÇERİK : 1. CSS yapıları oluşturabilecektir. 2. CSS özelliklerini kullanarak görsel sayfalar oluşturabilecektir. 3. CSS menüleri oluşturarak sayfa içinde kullanabilecektir. 4. Tarayıcı sorunlarını tanıyacak ve bu sorunlar için çözümler üretebilecektir. 1. STİL ŞABLONU (CSS) TEMELLERİ 1.1. CSS in Yapısı Sınıf Seçicisi Id Seçicisi Etiket (Tag) Seçicisi 1.2. CSS Kullanım Alanları Yerel Kullanım Alanı Global Kullanım Alanı Bağlantılı Kullanım Alanı 1.3. CSS Birimleri Uzunluk Birimleri Yüzde Birimleri Renk Birimleri 21

23 2. STİL ŞABLONU (CSS) ÖZELLİKLERİ 2.1. Zemin Özellikleri Zemin Rengi Zemin Resmi Zemin Resmi Tekrarı Zemin Resmi Pozisyonu Zemin Rengi İliştirme 2.2. Font ve Metin Özellikleri Font Özellikleri Metin Özellikleri 2.3. Kutu Modeli Özellikleri Kenar Dışı Boşluğu Özellikleri Kenar Çizgisi Özellikleri Kenar İçi Boşluğu Özellikleri 2.4. Tablo Özellikleri Tablo Kenar Çizgileri Kapsayıcı Kenar Çizgisi Ayarı Tablo Genişliği ve Yüksekliği Tabloda Metin Hizalama Tablo Kenar Çizgi İçi Mesafesi Tablo Hücre Rengi 2.5. Konumlandırma Özellikleri Statik Konumlandırma Sabit Konumlandırma Göreceli Konumlandırma Mutlak Konumlandırma Örtüşen Öğeler 2.6. Liste Özellikleri Sıralı Listelere Stil Verme Sırasız Listelere Stil Verme Madde İmi Olarak Resim Belirleme 3. STİL ŞABLONU (CSS) MENÜ İŞLEMLERİ 3.1. Dikey Menü Yapımı 3.2. Yatay Menü Yapımı 3.3. Dikey Açılır Menü 3.4. Yatay Açılır Menü 3.5. Sekmeli (Tab) Menü Yapımı 3.6. Resimli Menüler 4. TARAYICI SORUNLARI 4.1. Tarayıcı Çeşitleri 4.2. CSS Hata Ayıklama Yöntemleri Hata Ayıklamak İçin Şartlı Yorumlar Kullanmak Tarayıcıda Geriye Uyumluluk Tarayıcı Uyumluluğu İçin CSS Sıfırlama 22

24 ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Kullanıma alanlarına dikkat ederek web sitesine uygun Stil Şablonunu (CSS) seçer. 2. Kısaltma işlemlerine ve CSS birimlerinin özelliklerine dikkat ederek Stil Şablonunu (CSS) oluşturur. 3. Web tasarımının tutarlılığına dikkat ederek metin-tablo-liste gibi görsel nesnelerin biçimlendirilmesi işlemlerini CSS şablonunu kullanarak hatasız yapar. 4. Tasarım tutarlılığına ve sayfa özelliklerine dikkat ederek siteye uygun ergonomik menü tasarımını CSS şablonunu kullanarak hatasız yapar. 5. Tarayıcı özelliklerine dikkat ederek CSS dosyalarında oluşan hataları düzeltir. 23

25 MESLEĞİN ADI Web Programcısı İŞ Web sitesi için HTML işlemlerini yapmak İŞLEM NUMARASI 1 İŞLEMİN ADI CSS yapısı oluşturmak YETERLİK Stil Şablonu (CSS) yapılandırmasını gerçekleştirmek Bilgisayar, CSS editör programı Sitemize uygun CSS tipini seçmek 1. Yerel Stil Şablonu (CSS) 1. CSS in kullanım alanını Oluşturmak 1. STİL ŞABLONU (CSS) belirlemek 2. Global Stil Şablonu (CSS) Oluşturmak TEMELLERİ 2. Web projesine uygun CSS yapısı oluşturmak 3. Bağlantılı Stil Şablonu (CSS) Oluşturmak 1.1. CSS in Yapısı Sınıf Seçicisi Id Seçicisi Etiket (Tag) Seçicisi 1.2. CSS Kullanım Alanları Yerel Kullanım Alanı Global Kullanım Alanı Bağlantılı Kullanım Alanı 1.3. CSS Birimleri Uzunluk Birimleri Yüzde Birimleri Renk Birimleri 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. CSS in kullanım alanına uygun olarak oluşturmak 6. CSS birimlerinin özelliklerine dikkat 7. CSS kısaltma işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 30 dakika İşlemi Öğrenme Süresi: 6 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti oluşturulmasına dikkat ediniz. 24

26 MESLEĞİN ADI Web Programcısı İŞ Web sitesi için HTML işlemlerini yapmak İŞLEM NUMARASI 2 İŞLEMİN ADI CSS Özelliklerini Kullanmak YETERLİK Stil Şablonu (CSS) yapılandırmasını gerçekleştirmek Bilgisayar, CSS editör programı Sayfamızdaki nesneleri CSS yardımıyla düzenlemek 1. Metin özelliklerini kullanmak 2. Tablo özelliklerini kullanmak 2. STİL ŞABLONU (CSS) 3. Görsel nesnelere özellik kazandırmak ÖZELLİKLERİ 2.1. Zemin Özellikleri Zemin Rengi Zemin Resmi Zemin Resmi Tekrarı Zemin Resmi Pozisyonu Zemin Rengi İliştirme 2.2. Font ve Metin Özellikleri Font Özellikleri Metin Özellikleri 2.3. Kutu Modeli Özellikleri Kenar Dışı Boşluğu Özellikleri Kenar Çizgisi Özellikleri Kenar İçi Boşluğu Özellikleri 1. CSS özelliklerini kullanarak Web sayfalarında görselliği arttırmak 2. Tablo etiketleri kullanmadan web sayfaları oluşturmak 3. Web sayfalarının kullanımı kolaylaştırmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. CSS özelliklerinin kullanımında web sayfasının ergonomisine dikkat 6. Görsel nesnelere özellik kazandırılması işlemlerinde dikkatli olmak 25

27 2.4. Tablo Özellikleri Tablo Kenar Çizgileri Kapsayıcı Kenar Çizgisi Ayarı Tablo Genişliği ve Yüksekliği Tabloda Metin Hizalama Tablo Kenar Çizgi İçi Mesafesi Tablo Hücre Rengi 2.5. Konumlandırma Özellikleri Statik Konumlandırma Sabit Konumlandırma Göreceli Konumlandırma Mutlak Konumlandırma Örtüşen Öğeler 2.6. Liste Özellikleri Sıralı Listelere Stil Verme Sırasız Listelere Stil Verme Madde İmi Olarak Resim Belirleme SÜRE: İşlemin Yapılma Süresi: 8 saat İşlemi Öğrenme Süresi: 10 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti oluşturulmasına dikkat ediniz. 26

28 MESLEĞİN ADI Web Programcısı İŞ Web sitesi için HTML işlemlerini yapmak İŞLEM NUMARASI 3 İŞLEMİN ADI CSS Menü İşlemlerini Yapmak YETERLİK Stil Şablonu (CSS) yapılandırmasını gerçekleştirmek Bilgisayar, metin editörü veya CSS editör programı CSS yardımıyla sitemize uygun menü hazırlamak 1. CSS Menüleri Hazırlamak 2. Web Sayfasında menüleri uygun yerlere yerleştirmek 3. STİL ŞABLONU (CSS) MENÜ İŞLEMLERİ 3.1. Dikey Menü Yapımı 3.2. Yatay Menü Yapımı 3.3. Dikey Açılır Menü 3.4. Yatay Açılır Menü 3.5. Sekmeli (Tab) Menü Yapımı 3.6. Resimli Menüler 1. Sekmeli menüler oluşturmak 2. Dikey menüler oluşturmak 3. Yatay menüler oluşturmak 4. Dikey açılır menüler oluşturmak 5. Yatay açılır menüler oluşturmak 6. Resimli menüler oluşturmak 7. Web sayfalarına menüleri yerleştirmek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Sayfa özelliklerine uygun menüler tasarlamaya dikkat 6. Menülerin yerleşiminde ergonomiye özen göstermek SÜRE: İşlemin Yapılma Süresi: 6 saat İşlemi Öğrenme Süresi: 10 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti oluşturulmasına dikkat ediniz. 27

29 MESLEĞİN ADI Web Programcısı İŞ Web sitesi için HTML işlemlerini yapmak İŞLEM NUMARASI 4 İŞLEMİN ADI Tarayıcı Sorunları ve Çözümlerini Belirlemek YETERLİK Stil Şablonu (CSS) yapılandırmasını gerçekleştirmek Bilgisayar, metin editörü veya CSS editör programı CSS Dosyalarında Tarayıcı Uyumluluğunu Sağlamak 1. CSS dosyalarını farklı tarayıcılarda test 2. Hataları tespit 3. Hatalar için çözüm önerileri ür 4. TARAYICI SORUNLARI 4.1. Tarayıcı Çeşitleri 4.2. CSS Hata Ayıklama Yöntemleri Hata Ayıklamak İçin Şartlı Yorumlar Kullanmak Tarayıcıda Geriye Uyumluluk 4.3. Tarayıcı Uyumluluğu İçin CSS Sıfırlama 1. CSS dosyalarını tarayıcılarda test 2. CSS dosyalarında oluşan hataları tespit 3. CSS dosyalarında oluşan hataları düzeltmek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Tarayıcı özelliklerine dikkat 6. CSS dosyalarının tüm tarayıcılarda hatasız çalıştığından emin olmak 7. CSS dosyalarında oluşan hataların giderildiğinden emin olmak SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 6 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti oluşturulmasına dikkat ediniz. 28

30 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : WEB TASARIM EDİTÖRÜNE GİRİŞ : 482BK0175 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Stil Şablonu (CSS) modülünü tamamlamış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile gerekli ortam sağlandığında; Web tasarım editörü ile temel metin ve nesne düzenleme işlemlerini yapabilecektir. AMAÇLAR : İÇERİK : 1. Web projesi için temel tanımlama işlemlerini yapabilecektir. 2. Metin işlemlerini yapabilecektir. 3. Tablo işlemlerini yapabilecektir. 4. Resim düzenlemelerini gerçekleştirebilecektir. 5. Çoklu ortam düzenlemelerini yapabilecektir. 6. Bağlantılar oluşturabilecektir. 1. TEMEL İŞLEMLER 1.1. Çalışma Alanı Editör Arayüzü Çalışma Ekranları Araç Çubukları ve Paneller 1.2. Site Tanımlama Site Tanımı Sunucu Türleri 1.3. Ön İzlemde Kullanılacak Web Tarayıcılarının Belirlenmesi 1.4. Yeni Bir Sayfa Oluşturma ve Kaydetme 29

31 2. METİN İŞLEMLERİ 2.1. Metin Türleri ve Özellikleri Satır Sonu Ekleme Bölünmez Boşluk Ekleme Metin Hizalama ve Girinti Verme Karakter Biçimlendirme Yazı Tipi Değiştirme 2.2. Listeler 2.3. Harici metinler 3. TABLOLAR 3.1. Tablolar ile Çalışmak 3.2. Tablosal Veriler 3.3. Sayfa Düzeninde Tablo Kullanımı Tablo Hücrelerini Seçme ve Kopyalama/Taşıma Tablo Hücrelerini Biçimlendirme Tablolarda Değişiklik Yapma Tablolarda Resim Kullanma Tablolarıo İç İçe Yerleştirme 3.4. Expanded Modu 4. RESİMLER 4.1. Resimlerle Çalışmak Arka Plan Resmi Kullanma Sayfaya Resim Ekleme Varlıklar Paneli Kullanarak Resim ekleme Resimlri Sık Kullanılanlar Listesi İle Yönetme Metni Resim etrafına Sarma Resmin Etrafındaki Boşluğu Ayarlama Görüntü Yer Tutucu Ekleme Rollover Görüntüsü Ekleme 4.2. Resim Düzenleme 5. ÇOKLU ORTAM BİLEŞENLERİ 5.1. Çoklu Ortam Bileşenleri Ekleme Ses Oynatıcısı Ekleme Shockwave Ekleme Uygulama Ekleme Param Ekleme Activex Komutları Ekleme 5.2. Animasyon Ekleme Flash Animasyon Ekleme Flash Video Ekleme 6. BAĞLANTILAR (LİNKLER) 6.1. Bağlantılar İle Çalışma Bağlantı Özelliklerini Düzenleme Bağlantı Adreslerinin Açılış Şekilleri 6.2. Bağlantı Türleri Resim Tabanlı Bağlantılar 30

32 Etkin Resim Noktaları Oluşturma Yer İmleri Ekleme 6.3. E-posta Bağlantıları ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Çalışma alanı özelliklerine dikkat ederek web arayüz programında site tanımlama işlemlerini hatasız yapar. 2. Görsel tasarım ilkelerine ve tasarım tutarlılığına dikkat ederek web tasarım editörü ile metin ve liste düzenleme işlemlerini isteğe uygun şekilde hatasız yapar. 3. Görsel tasarım ilkelerine ve tasarım tutarlılığına dikkat ederek web tasarım editörü ile isteğe uygun olarak tablo özelliklerini ayarlar. 4. Farklı modlarda tablo oluşturma işlemlerini hatasız yapar. 5. Görsel tasarım ilkelerine ve tasarım tutarlılığına dikkat ederek web tasarım editörü ile resim biçimlendirme işlemlerini hatasız yapar. 6. Görsel tasarım ilkelerine ve tasarım tutarlılığına dikkat ederek web tasarım editörü ile çoklu ortam bileşenlerinin düzenlemesi işlemlerini hatasız yapar. 7. Tasarım tutarlılığına ve site haritasına dikkat ederek web tasarım editörü ile web sayfalarında isteğe uygun bağlantıları oluşturur. 31

33 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 1 İŞLEMİN ADI Arayüzü kullanmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü ile isteğe uygun site tanımlamak 1. Dreamweaver ekranını kullanmak 2. Araç çubuklarını kullanmak 3. Panellerle çalışmak 4. Site tanımlama sihirbazını kullanmak 1. TEMEL İŞLEMLER 1.1. Çalışma Alanı Editör Arayüzü Çalışma Ekranları Araç Çubukları ve Paneller 1.2. Site Tanımlama Site Tanımı Sunucu Türleri 1.3. Ön İzlemde Kullanılacak Web Tarayıcılarının Belirlenmesi 1.4. Yeni Bir Sayfa Oluşturma ve Kaydetme 1. Çalışma alanı özellikleri kullanmak 2. Site tanımlama işlemlerini yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Çalışma alanı özelliklerine dikkat 6. Site tanımlama işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 6 ders saati 32

34 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 2 İŞLEMİN ADI Metin işlemlerini yapmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü ile metin ve liste düzenleme işlemlerini isteğe uygun şekilde yapmak. 1. Metin biçimlendirme işlemlerini yapmak 2. Liste oluşturmak 3. Harici metinleri kullanmak 2. METİN İŞLEMLERİ 2.1. Metin Türleri ve Özellikleri Satır Sonu Ekleme Bölünmez Boşluk Ekleme Metin Hizalama ve Girinti Verme Karakter Biçimlendirme Yazı Tipi Değiştirme 2.2. Listeler 2.3. Harici metinler 1. Metin biçimlendirme işlemlerini yapmak 2. Liste oluşturma işlemlerini yapmak 3. Harici metinlerin kullanım işlemlerini yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Metin biçimlendirme işlemlerini hatasız yapmak 6. Liste oluşturma işlemlerinde dikkatli olmak 7. Harici metinlerin kullanımı işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 30 dakika İşlemi Öğrenme Süresi: 6 ders saati 33

35 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 3 İŞLEMİN ADI Tablo işlemlerini yapmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü ile tablo üzerinde istenilen işlemleri yapabilmek 1. Tablo oluşturmak 2. Tablo özelliklerini ayarlamak 3. Layout ve Expanded modunda tablo hazırlamak SÜRE: İşlemin Yapılma Süresi: 30 dakika 3. TABLOLAR 3.1. Tablolar ile Çalışmak 3.2. Tablosal Veriler 3.3. Sayfa Düzeninde Tablo Kullanımı Tablo Hücrelerini Seçme ve Kopyalama/Taşıma Tablo Hücrelerini Biçimlendirme Tablolarda Değişiklik Yapma Tablolarda Resim Kullanma Tablolarıo İç İçe Yerleştirme 3.4. Expanded Modu 1. Tablo oluşturma işlemleri yapmak 2. Tablo özellikleri ile çalışmak 3. Layout modunda tablo oluşturmak 4. Expanded modunda tablo oluşturmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Tablo oluşturma işlemlerinde dikkatli olmak 6. İsteğe uygun olarak tablo özelliklerini ayarlamak 7. Layout ve Expanded modunda tablo oluşturulurken dikkatli olmak İşlemi Öğrenme Süresi: 6 ders saati 34

36 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 4 İŞLEMİN ADI Resim işlemlerini yapmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Resimleri,istenilen biçimde web sitesine eklemek 1. Web sayfasına resim eklemek 2. Resim biçimlendirme işlemlerini yapmak 3. Harici düzenleme programlarını kullanmak 1. Resim ekleme işlemlerini yapmak 2. Resim biçimlendirme işlemlerini yapmak 3. Resim düzenleme işlemlerini yapmak SÜRE: İşlemin Yapılma Süresi: 30 dakika 4. RESİMLER 4.1. Resimlerle Çalışmak Arka Plan Resmi Kullanma Sayfaya Resim Ekleme Varlıklar Paneli Kullanarak Resim ekleme Resimlri Sık Kullanılanlar Listesi İle Yönetme Metni Resim etrafına Sarma Resmin Etrafındaki Boşluğu Ayarlama Görüntü Yer Tutucu Ekleme Rollover Görüntüsü Ekleme 4.2. Resim Düzenleme 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Resim ekleme işlemlerinde dikkatli olmak 6. Resim biçimlendirme işlemlerinde dikkatli olmak 7. Resim düzenleme işlemlerini hatasız yapmak İşlemi Öğrenme Süresi: 4 ders saati 35

37 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 5 İŞLEMİN ADI Çoklu ortam işlemlerini yapmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sitemize flash nesneler eklemek 1. Flash animasyon eklemek 2. Flash düğme eklemek 3. Flash metin eklemek 4. Flash video eklemek 5. Ses oynatıcısı eklemek 6. Uygulama eklemek 7. Param eklemek 8. Activex komutları eklemek 9. Harici ses ve video eklemek SÜRE: İşlemin Yapılma Süresi: 3 saat 5. ÇOKLU ORTAM BİLEŞENLERİ 5.1. Çoklu Ortam Bileşenleri Ekleme Ses Oynatıcısı Ekleme Shockwave Ekleme Uygulama Ekleme Param Ekleme Activex Komutları Ekleme 5.2. Animasyon Ekleme Flash Animasyon Ekleme Flash Video Ekleme 1. Web sitesine flash nesneleri eklemek 2. Web sitesine çoklu ortam nesnelerini eklemek 3. Çoklu ortam nesnelerini düzenlemek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Flash nesnelerinin eklenmesi işlemlerini hatasız yapmak 6. Çoklu ortam bileşenlerinin eklenmesi işlemlerini hatasız yapmak 7. Çoklu ortam bileşenlerinin düzenlemesi işlemlerini hatasız yapmak İşlemi Öğrenme Süresi: 4 ders saati 36

38 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 6 İŞLEMİN ADI Bağlantılar oluşturmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sayfalarımızda isteğe uygun bağlantılar oluşturmak 1. Metne bağlantı eklemek 2. Resme bağlantı eklemek 3. Bağlantı özelliklerini ayarlamak 4. E-posta bağlantısı eklemek 6. BAĞLANTILAR (LİNKLER) 6.1. Bağlantılar İle Çalışma Bağlantı Özelliklerini Düzenleme Bağlantı Adreslerinin Açılış Şekilleri 6.2. Bağlantı Türleri Resim Tabanlı Bağlantılar Etkin Resim Noktaları Oluşturma Yer İmleri Ekleme 6.3. E-posta Bağlantıları 1. Web sayfasında bağlantılar oluşturmak 2. Bağlantı özelliklerini düzenlemek 3. E-posta bağlantıları oluşturmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Web sayfası bağlantılarını hatasız yapmak 6. Bağlantı özelliklerini ayarlarken dikkatli olmak 7. E-Posta bağlantılarını hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 30 dakika İşlemi Öğrenme Süresi: 6 ders saati 37

39 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : WEB TASARIM EDİTÖRÜNDE İLERİ UYGULAMALAR : 482BK0174 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ : Web Tasarım Editörüne Giriş modülünü tamamlamış olmak. : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; Web tasarım editörü ile sayfa içerisindeki CSS ve SPRY nesneleri düzenleyip web sitesini internet ortamında yayınlayabilecektir. AMAÇLAR : İÇERİK : 1. CSS dosyaları düzenlemek ve sayfamıza javascript kodları eklemek 2. SPRY nesneler kullanmak 3. Form nesneleri kullanmak 4. Web sitesini yön ve internette yayınlamak 1. CSS 1.1. Dreamweaver ile Sayfa içinde CSS kullanımı 1.2. Dreamweaver ve Harici CSS sayfaları 1.3. CSS ile tasarım 1.4. Davranışlar 1.5. Ziyaretçi tarafı etkileşim 1.6. Javascript 1.7. Davranış türleri ve kurallar 1.8. Davranışları ekleme ve düzenleme 2. SPRY 2.1. SPRY framework 38

40 2.2. SPRY nesneleri ekleme ve düzenleme 3. FORMLAR 3.1. Formlar ile çalışma 3.2. Form temelleri 3.3. Form bileşenleri 3.4. Eylem türleri 4. SİTE YÖNETİMİ VE YAYINI 4.1. Site Yönetimi Site yönetimi Raporlar Dosya Transferleri 4.2. Yayınlama Yayınlama Seçenekleri Sunucu Bağlantısı Sitenin Yayınlanması ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Tasarım tutarlılığına dikkat ederek web arayüz programını aracılığıyla Stil Şablonunu (CSS) oluşturur. 2. Görsel tasarım ilkelerine ve sayfaların tutarlılığına dikkat ederek web arayüz programında CSS yardımıyla sitenin görsel tasarımını yapar. 3. Davranış türlerine ve kurallarına dikkat ederek web arayüz programı aracılığıyla siteye davranış ekler. 4. Davranış türlerine ve kurallarına dikkat ederek web arayüz programı aracılığıyla siteye eklenen davranışları düzenler. 5. Görsel tasarım ilkelerine ve sayfaların tutarlılığına dikkat ederek web arayüz programında Javascript kodlarını kullanarak sitenin görselliğini düzenler. 6. Tasarım tutarlılığına dikkat ederek web arayüz programı aracılığıyla web sayfalarına SPRY nesnelerini hatasız ekler. 7. Görsel tasarım ilkelerine ve sayfaların tutarlılığına dikkat ederek web arayüz programında sayfalara eklenen SPRY nesnelerini hatasız düzenler. 8. Tasarım tutarlılığına dikkat ederek web arayüz programı aracılığıyla sayfalara form ekler. 9. İsimlendirme işlemlerinde yazım kurallarına dikkat ederek ihtiyaca uygun form nesnelerini web arayüz programı aracılığıyla sayfalara ekler. 10. Tasarım tutarlılığına dikkat ederek web arayüz programı aracılığıyla form nesnelerini hatasız düzenler. 11. Web arayüz programı aracılığıyla sitenin erişilebilirliğini test eder. 12. Web arayüz programı aracılığıyla dosya ve klasörlerin aktarılması işlemlerini hatasız yapar. 13. Web arayüz programı aracılığıyla web sitesini sunucu tarafında hatasız çalıştırır. 39

41 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 1 İŞLEMİN ADI CSS kullanmak Nesne işlemlerini yaparak site yönetimini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sayfamıza Javascript kodları ekleyip, CSS yardımıyla sitemizin görselliğini ayarlamak 1. Web editöründe CSS kullanmak 2. Harici CSS sayfalarını kullanmak 3. Davranış eklemek 4. Javascript kullanmak 1. CSS 1.1. Dreamweaver ile Sayfa içinde CSS kullanımı 1.2. Dreamweaver ve Harici CSS sayfaları 1.3. CSS ile tasarım 1.4. Davranışlar 1.5. Ziyaretçi tarafı etkileşim 1.6. Javascript 1.7. Davranış türleri ve kurallar 1.8. Davranışları ekleme ve düzenleme 1. CSS sayfalarını kullanmak 2. CSS ile tasarım yapmak 3. Davranış türünü seçmek 4. Davranış ekleme ve düzenleme işlemleri yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. CSS sayfalarının kullanım işlemlerinde dikkatli olmak 6. Davranış türlerine ve kurallarına dikkat 7. Davranış ekleme ve düzenleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 8 ders saati 40

42 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 2 İŞLEMİN ADI SPRY nesnelerini düzenlemek Nesne işlemlerini yaparak site yönetimini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sayfamızda SPRY nesneler kullanmak 1. SPRY menü çubuğunu kullanmak 2. SPRY sekmeli panelleri kullanmak 3. SPRY Akordeonu kullanmak 4. SPRY efektlerini kullanmak 2. SPRY 2.1. SPRY framework 2.2. SPRY nesneleri ekleme ve düzenleme 1. SPRY nesnelerinin eklenmesi işlemlerini yapmak 2. SRPY nesnelerinin düzenlenmesi işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. SPRY nesnelerinin eklenmesi işlemlerini hatasız yapmak 5. SRPY nesnelerinin düzenlenmesi işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 41

43 MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 3 İŞLEMİN ADI Formlarla çalışmak Nesne işlemlerini yaparak site yönetimini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sayfamıza görsel form nesneleri eklemek 1. Web sayfalarında form oluşturmak 2. Form nesneleri eklemek 3. Formları biçimlendirmek 4. Nesneleri biçimlendirmek 3. FORMLAR 3.1. Formlar ile çalışma 3.2. Form temelleri 3.3. Form bileşenleri 3.4. Eylem türleri 1. Form nesnelerinin oluşturulması işlemlerini yapmak 2. Form nesnelerinin eklenmesi işlemlerini yapmak 3. Form nesnelerinin özelliklerini ayarlamak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Form nesnelerini isimlendirirken yazım kurallarına dikkat 5. İhtiyaca uygun form nesnelerinin oluşturulmasına özen göstermek 6. Form nesnelerinin eklenmesi işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 42