Web Arayüz Tasarımı 12. Sınıf Yıllık Plan

Web Arayüz Tasarımı 12. Sınıf Yıllık Plan — Kaynaklar ve İçerik

• Grafik ve Fotoğraf 12. Sınıf Çerçeve Öğretim Programı (ÇÖP)
• Web Arayüz Tasarımı Ders Bilgi Formu (DBF)
• Web Arayüz Tasarımı Ders Materyali (DM)
• Ders İçeriği

  Grafik ve Fotoğraf - Fotoğraf (Mesleki ve Teknik Anadolu Lisesi) alanında Web Arayüz Tasarımı dersi 12. sınıf 2025-2026 eğitim öğretim yılı yıllık planı. Haftalık 5 ders saati.

  Üniteler ve Konular

  1. Web Arayüzü (40 ders saati)

  • 1. Tasarıma ön hazırlık
    • 1. Müşterinin amaç ve isteklerine uygun konuya ön hazırlık yapar.
    • Web sitesi ile ilgili bilgilendirme dosyası hazırlatılır.
    • Kurum renklerine bağlı olarak kullanılacak renk paleti yaptırılır.
    • Alanda kullanılan diğer çalışmalar inceletilir.
    • Tasarımda kullanılabilecek görsel materyaller buldurulur.
    • Materyalleri elektronik ortama aktarıp, kullanıma uygun hale getirmesi sağlanır.
  • 2. Web sayfası eskizi
    • 2. Konuya uygun renk seçip, kompozisyon kurallarına göre birden fazla eskizi istenilen sürede çizer.
    • Ana sayfanın taslağı ve sayfa menüleri hazırlatılır.
    • Menülere ilişkin ara yüzler gösterilir.
    • Ana sayfa ve ara yüz taslağı renk paletine göre renklendirilir.
    • Web ara yüzlerinde yer alacak görsellerin yerleri gösterilir.
  • 3. Tasarımın oluşturulması
    • 3. Karar verilen eskizi bilgisayar ortamında istenilen sürede geliştirerek orijinal haline getirir.
    • Yeni bir belge açtırılır.
    • Seçim araçları ile nesneler düzenletilir.
    • Bitmap araçları, nesne özellikleri, bilgi paneli, resim boyutu, damga aracı kullandırılır.
    • Vektör araçlarını kullanarak çizimler yaptırır.
  • 4. Görseller üzerinde işlemler
    • 4. Bilgisayar ortamında hazırlanan görsel ögeler üzerinde gelişmiş işlemler yapar.
    • Katman paneli ve renk seçenekleri ayarı yaptırılır.
    • Nesneleri hizalama, şekilleri birleştirme, nesneleri çoğaltma, paklığı değiştirme, bir yol boyunca metin ekleme, metni yollara dönüştürme uygulatılır.

  2. Web Araçları (50 ders saati)

  • 1. Düğmeler
    • 1. Web sayfası düzenlemelerine uygun düğmeleri oluşturur.
    • Yeni bir düğme ekleme, değiştirme, isim verme, düğmelere bağlantı ekleme, düğmeleri aktarma (import), grafikleri düğmeye dönüştürme işlemleri uygulatılır.
  • 2. Grafikler
    • 2. Düzenlemede belirlenen etkin resim bölgelerini oluşturur.
    • Image map (etkin resim noktası) oluşturma, web katmanıyla çalışma, bir resmi dilimleme, ayrık rolloverlar oluşturma, kareler ekleme, bir davranış ekleme, tam ekran görüntüleme, yeni dilimler ekleme işlemleri yaptırılır.
  • 3. Aktarma işlemi ve optimizasyon
    • 3. Aktarma ve optimizasyon (en uygun şekle sokma) işlemlerini yapar.
    • Aktarma sihirbazı gösterilir.
    • Resmin dosya türü, ön izleme düğmesi, mevcut optimizasyon ön ayarları üzerinde durulur.
  • 4. Hareketli resimler
    • 4. Düzenlemede belirlenen hareketli resimleri oluşturur.
    • Animasyon oluşturma, bir katmanı paylaşma, animasyon sembollerini kullanma, oynatımı kontrol etme açıklanır.
    • Bir GIF animasyonunu aktarma, aktarma ön izlemesini animasyonlarla kullanma, ara kareler doldurma (teennin) işleri uygulatılır.
  • 5. Açılır menüler
    • 5. Düzenlemede belirlenen açılır menüleri oluşturur.
    • Şablon oluşturma, resmi maskeleme, katman paneli kullanarak maskeleme, metni bir maske olarak kullanma, metin dilimi oluşturma işleri yaptırılır.
    • Açılır menü ekleme, açılır menüyü düzenleme örneklerle gösterilir.

  3. Web Tasarım Editörü (90 ders saati)

  • 1. Temel web komutları
    • 1. Temel web komutları ile html belgesi oluşturur.
    • Proje ihtiyaçları açıklanır.
    • HTML belgesi oluşturma ve kaydetme gösterilir.
    • Oluşturulan HTML belgesi internet tarayıcısına aktarılır.
    • HTML sayfasında bulunması gereken standart etiketler kullanılır.
    • Dil desteği, metinleri düzenleme, görünümü düzenleme, resim ekleme işlemleri uygulatılır.
  • 2. Tablo işlemleri
    • 2. Tasarıma uygun şablonu editör programında oluşturur.
    • Editör programının açılış ayarları gösterilir.
    • Araç çubukları, panellerle çalışma uygulatılır.
    • Site tanımlama sihirbazında sitenin tanımlaması sağlanır.
    • Tasarıma uygun temel tabloları oluşturma açıklanır.
    • Layout ve Expanded modunda tabloları şekillendirme uygulatılır.
  • 3. Görsellerin eklenmesi
    • 3. Tasarıma görselleri ekler.
    • Metin biçimlendirme, liste oluşturma, harici Metinler, web sayfasına resim ekleme, resim biçimlendirme işlemleri uygulatılır.
    • Harici düzenleme programlarını kullanma ve flash animasyon, düğme, metin, video ekleme işlemleri gösterilir.
    • Ses oynatıcısı, uygulama ekleme, param ekleme, activex komutları ekleme, harici ses ve video ekleme komutları uygulatılır.
  • 4. Bağlantıları oluşturmak
    • 4. Bağlantıları oluşturur.
    • Metinlere ve resimlere bağlantı ekleme, özelliklerini ayarlama uygulatılır.
    • Sayfa içi bağlantıları ekleme, e-posta bağlantısı ekleme işlemi gösterilir.
  • 5. Css paneli
    • 5. CSS panelinde stiller oluşturur.
    • Web editöründe CSS ile stilleri oluşturma açıklanır.
  • 6. Site yönetimi
    • 6. Site yönetim işlemlerini yapar.
    • Site erişebilirliğini test etme, dosya transferini yapma, siteyi yayınlama, sunucu bağlantısı yapması sağlanır.

  Dersin Amaçları

  • Bu derste öğrenciye; iş sağlığı ve güvenliği tedbirleri doğrultusunda web sayfası oluşturma ile ilgili bilgi ve becerilerin kazandırılması amaçlanmaktadır.