WEB TASARIMI DERSİ WEB ARAÇLARI 40/32

Transkript

1 WEB TASARIMI DERSİ MODÜL ADI SÜRESİ WEB ARA YÜZÜ 40/32 WEB ARAÇLARI 40/32 WEB TASARIM EDİTÖRÜ 40/32

2 DERS BİLGİ FORMU DERSİN ADI ALAN MESLEK/DAL DERSİN OKUTULACAĞI SINIF/YIL SÜRE DERSİN AMACI DERSİN TANIMI DERSİN ÖNKOŞULLARI DERS İLE KAZANDIRILACAK DERSİN İÇERİĞİ YÖNTEM VE TEKNİKLERİ WEB TASARIMI GRAFİK VE FOTOĞRAF GRAFİK OPERATÖRÜ 11. SINIFLAR 12. SINIFLAR İŞLETMELERDE BECERİ EĞİTİMİ Haftalık 4 Ders saati önerilmektedir. (Bölgesel özellikler, okuldaki donanım ve çerçeve öğretim programı doğrultusunda zümre kararı ile seçilen modüllere göre ders süresi hesaplanır.) Bu derste öğrenciye, web sayfası oluşturma yeterliklerinin kazandırılması amaçlanmaktadır. Web sayfası tasarlama ile ilgili konuların verildiği derstir. Temel Tasarım ve Temel Desen Dersi Modüllerini başarmış olmak Derste; 1- Web Sayfası Düzenlemek 2- Web Araçlarını Hazırlamak 3- Web Tasarım Editöründe Siteyi Yayına Hazır Hale Getirmek yeterlikleri kazandırılacaktır. Ders; 1. Tasarıma ön hazırlık 2. Web sayfası eskizi 3. Tasarımın oluşturulması 4. Görsel öğeler üzerinde gelişmiş işlemler 5. Düğmeler 6. Grafikler 7. Aktarma işlemi ve optimizasyon 8. Hareketli resimler 9. Açılır menüler 10. Temel web komutları 11. Tablo işlemleri 12. Görselleri eklemek 13. Bağlantıları oluşturmak 14. Css paneli 15. Site yönetimi konularını içermektedir. Gösteri, anlatım, problem çözme, soru-cevap, grup çalışması, tartışma, uygulamalı gösteri, grafik atölyelerinin ilgili bölümlerinde gözlem yapma, araştırma, görüşme, uygulama, bireysel öğrenme, v.b. yöntem ve teknikleri uygulanabilir. 1

3 EĞİTİM-ÖĞRETİM ORTAMI VE DONANIM ÖLÇME VE DEĞERLENDİRME EĞİTİMCİLER İŞBİRLİĞİ YAPILACAK KURUM VE KURULUŞLAR Ortam: grafik atölye ve laboratuarları, sınıf, işletme, kütüphane, ev, bilgi teknolojileri ortamı v.b. Donanım: Bilgisayar, Tarayıcı, Yazıcı, çizim masası, ışıklı masa, internet, projeksiyon, vektörel çizim programları, resim işleme programları Modül faaliyetlerinin sonunda öğrenci kazandığı becerileri ölçebilecektir. Modülün sonunda öğrencinin kazandığı yeterlikler ölçülerek değerlendirilecektir. Millî Eğitim Bakanlığı Ortaöğretim Kurumları Sınıf Geçme ve Sınav Yönetmeliği doğrultusunda ö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 taraflar, çevrede bulunan işletmeler ve ilgili yerlerle işbirliği yaparak öğrencinin çevrede konuyla ilgili olarak iletişim kurabileceği araştırma, gözlem ve uygulama yapabileceği her türlü kurum ve kuruluşlar vb. 2

4 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : GRAFİK VE FOTOĞRAF : GRAFİK OPERATÖRÜ : WEB TASARIMI : WEB ARA YÜZÜ : 482BK0126 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA : Temel Tasarım ve Temel Desen dersi modüllerini başarmış olmak. : Grafik tasarım programları, bilgisayar, internet, tarayıcı ve yazıcı sağlanmalıdır. ÖĞRETİM YÖNTEM VE TEKNİKLERİ : Anlatım, araştırma, uygulama, bireysel öğrenme, demonstrasyon yöntem ve teknikleri uygulanabilir. GENEL AMAÇ : Öğrenci bu modül ile, gerekli ortam sağlandığında internet ortamına uygun web arayüzü oluşturabilecektir. AMAÇLAR : 1. Müşteri amaç ve isteklerine uygun konuya ön hazırlık yapabilecektir. 2. Konuya uygun renk seçip, karakalem ve boyama teknikleriyle kompozisyon kurallarına uygun birden fazla eskizi istenilen sürede çizebilecektir. 3. Karar verilen eskizi bilgisayar ortamında istenilen sürede geliştirerek orijinal haline getirebilecektir. 4. Bilgisayar ortamında hazırlanan görsel öğeler üzerinde gelişmiş işlemler yapabilecektir. İÇERİK : 1. TASARIMA ÖN HAZIRLIK 1.1. İnternet Tanımı Web tarayıcıları Web sunucuları IP (Internet Protocol) Numarası İnternet Alanı (Domain) Alan adı 1.2. Tasarımda öncelikli İlkeler İşlevsellik Web tarayıcıları ile uyumluluk Hız Beklentisi Sadelik Kullanılabilirlik İçerik 3

5 2. WEB SAYFASI ESKİZİ 2.1. Ölçüleri 2.2. Web sayfa çeşitleri 2.3. Ana sayfa tanımı 2.4. Ara yüz tanımı 2.5. Tasarımlarda yer alabilecek birimler 2.6. Kurumsal görseller 2.7. Menüler 2.8. Reklam alanları 2.9. Metin alanları Diğer görseller Hikaye tahtası (Storyboard) 3. TASARIMIN OLUŞTURULMASI 3.1. Seçim araçları 3.2. Bitmap araçları 3.3. Bilgi (Info) Paneli 3.4. Düzeyleri Ayarlama 3.5. Gama Ayarı 3.6. Vektör araçları 3.7. Geçmiş (History) Paneli 3.8. İçine Yapıştırma (Paste Inside) ile Maskeleme 3.9. Aktif Filtreler Stiller Nesneleri Gruplama Grafikler 4. GÖRSEL ÖĞELER ÜZERINDE GELIŞMIŞ İŞLEMLER 4.1. Katman (Layer) Paneli 4.2. Katman Ekleme ve Adlandırma Yeni Katman Ekleme Katmanları Yeniden Adlandırma 4.3. Nesne Boyutunu ve Yerleşimini Ayarlama 4.4. Katman Kilitleme 4.5. Renk Seçme 4.6. Yuvarlak Köşeli Dikdörtgenler Çizme 4.7. Otomatik Şekiller 4.8. Doku ve Gölge Ekleme Doku Ekleme Gölge ekleme 4.9. Katman Yığın Sırası Tek Katmanlı Düzenleme Varsayılan Renkleri Ayarlama Nesneleri Hizalama Şekilleri Birleştirme Nesne (Repeat) Çoğaltma Bir Yol Boyunca Metin Ekleme Kesişme (Intersect) ve Kırpma (Crop) Komutları Metni Yollara Dönüştürme 4

6 ÖLÇME VE DEĞERLENDİRME: Öğrencinin, programda amaçlanan Web Sayfası Düzenlemek yeterliğini kazanıp kazanmadığını aşağıdaki performans ölçütlerine göre uygun ölçme araçlarıyla ölçünüz. 1. Web tasarımında öncelikli ilkeleri açıklar. 2. Renk paletini belirler. 3. Kullanılacak materyalleri elektronik ortamda kullanıma uygun hale getirir. 4. Ana sayfa taslağını oluşturur. 5. Ana sayfa taslağını renk paletine göre renklendirir. 6. Ara yüz taslağını oluşturur. 7. Ara yüz taslağını renk paletine göre renklendirir. 8. Karar verilen eskizi bilgisayar ortamında istenilen sürede geliştirerek orijinal haline getirir. 9. Bilgisayar ortamında hazırlanan görsel öğeler üzerinde gelişmiş işlemleri yapar. 5

7 İŞLEM NUMARASI 1 İŞLEMİN ADI Web sayfası için hazırlık çalışmalarını yapmak Web arayüzü oluşturmak ORTAM (Araç Gereç, Ekipman ve Koşullar) Bilgisayar, projeksiyon, internet bağlantısı, atölye ortamı. İnternet ortamına uygunluk 1. Web sitesi ile ilgili bilgilendirme dosyasını incelemek 2. Kurum renklerine bağlı olarak kullanılacak renk paletini belirlemek 3. Alanda kullanılan diğer çalışmaları incelemek 4. Tasarımda kullanılabilecek görsel materyalleri temin etmek 5. Kullanılacak materyalleri kullanım alanlarına göre sınıflandırmak 6. Tasarımda yer alacak materyalleri seçmek 7. Elektronik ortama aktarmak 8. Materyalleri kullanıma uygun hale getirmek SÜRE: İşlemin Yapılış Süresi: 3 saat 1. TASARIMA ÖN HAZIRLIK 1.1. İnternet Tanımı Web tarayıcıları Web sunucuları IP (Internet Protocol) Numarası İnternet Alanı (Domain) Alan adı 1.2. Tasarımda öncelikli İlkeler İşlevsellik Web tarayıcıları ile uyumluluk Hız Beklentisi Sadelik Kullanılabilirlik İçerik 1. Araştırma yapmak 2. Bilgilendirme (Brief) çalışmalarını incelemek 3. Hızlı karar vermek 4. Bilgisayarda görüntü işlemek 1. Detaylara özen göstermek 2. Planlı ve organize olmak 3. Zamanı iyi kullanmak 4. Firmaya özel bilgilerin gizliliğine özen göstermek 5. Düzenli olmak İşlemin Öğrenme Süresi: 6 saat 6

8 İŞLEM NUMARASI 2 İŞLEMİN ADI Konuya uygun eskiz çalışmaları yapmak Web arayüzü oluşturmak ORTAM (Araç Gereç, Ekipman ve Koşullar) Grafik tasarım programları, bilgisayar, projeksiyon, internet bağlantısı, kağıt, kalem, renklendirme araçları, atölye ortamı. İnternet ortamına uygunluk 1. Ana sayfanın taslağını oluşturmak 2. Ana sayfa menülerini belirlemek 3. Ana sayfada yer alacak görsellerin yerlerini belirlemek 4. Menülere ilişkin ara yüzleri belirlemek 5. Ana sayfa taslağını renk paletine göre renklendirmek 6. Web ara yüz taslaklarını oluşturmak 7. Web ara yüzlerinde yer alacak görsellerin yerlerini belirlemek 8. Ara yüz taslağını renk paletine göre renklendirmek 2. WEB SAYFASI ESKİZİ 2.1. Ölçüleri 2.2. Web sayfa çeşitleri 2.3. Ana sayfa tanımı 2.4. Ara yüz tanımı 2.5. Tasarımlarda yer alabilecek birimler 2.6. Kurumsal görseller 2.7. Menüler 2.8. Reklam alanları 2.9. Metin alanları Diğer görseller Hikaye tahtası (Storyboard) 1. Araştırma yapmak 2. Sayfa düzenlemesi yapmak 3. Hızlı karar vermek 4. Çalışmada kullanılacak görselleri renklendirmek 1. Detaylara özen göstermek 2. Planlı ve organize olmak 3. Zamanı iyi kullanmak 4. Firmaya özel bilgilerin gizliliğine özen göstermek 5. Düzenli olmak SÜRE: İşlemin Yapılış Süresi: 3 saat İşlemin Öğrenme Süresi: 8 saat 7

9 İŞLEM NUMARASI 3 İŞLEMİN ADI Görsel öğeleri bilgisayar ortamında hazırlamak/oluşturmak Web arayüzü oluşturmak ORTAM (Araç Gereç, Ekipman ve Koşullar) 1. Yeni bir belge oluşturmak 2. Seçim araçlarını kullanarak nesneleri düzenlemek 3. Bitmap araçlarını kullanarak nesne özelliklerini ayarlamak 4. Bilgi panelini kullanmak 5. Resim boyutunu değiştirmek 6. Damga aracını kullanmak 7. Vektör araçlarını kullanarak çizimleri yapmak 8. Bir nesneyi döndürmek 9. Geçmiş panelini kullanmak 10. Maskeleme yapmak 11. Aktif efektler vermek 12. Filtreler uygulamak 13. Bir stil olarak kaydetmek 14. Nesneleri gruplamak 15. Grafikleri almak Grafik tasarım programları, bilgisayar, internet bağlantısı İnternet ortamına uygunluk 3. TASARIMIN 1. Resmi yeniden boyutlandırmak OLUŞTURULMASI 2. Resimde istenilen yeri seçmek 3.1. Seçim araçları 3. Resimde seçili bir alanı 3.2. Bitmap araçları taşımak 3.3. Bilgi (Info) Paneli 4. Resmi kırpmak 3.4. Düzeyleri Ayarlama 5. Resmi ölçeklendirmek 3.5. Gama Ayarı 6. Seçim araçlarını kullanmak 3.6. Vektör araçları 7. Seçili alanı filtrelemek 3.7. Geçmiş (History) Paneli 3.8. İçine Yapıştırma (Paste Inside) ile Maskeleme 3.9. Aktif Filtreler Stiller Nesneleri Gruplama Grafikler SÜRE: İşlemin Yapılış Süresi: 2 saat 1. Seçim özelliklerine dikkat etmek 2. Resmi boyutlandırma ve ölçeklendirme işlemlerinde dikkatli olmak 3. Nesneleri gruplandırırken dikkatli olmak İşlemin Öğrenme Süresi: 8 saat 8

10 İŞLEM NUMARASI 4 İŞLEMİN ADI Web arayüzü oluşturmak Görsel öğeler üzerinde gelişmiş işlemler yapmak ORTAM (Araç Gereç, Ekipman ve Koşullar) Grafik tasarım programları, bilgisayar, internet bağlantısı İnternet ortamına uygunluk 1. Katman panelini kullanmak 2. Katmanlar eklemek ve adlandırmak 3. Bir katmanı yeniden adlandırmak 4. Bir katmanı kilitlemek 5. Bir katmanı göstermek ve gizlemek 6. Renkleri seçmek 7. Yuvarlak köşeli dikdörtgenler çizmek 8. Otomatik şekilleri kullanmak 9. Doku ve gölge eklemek 10. Bir katman üzerindeki yığın sırasını değiştirmek 11. Tek katmanlı düzenlemeyi kullanmak 12. Varsayılan renkleri ayarlamak 13. Nesneleri hizalamak 14. Şekilleri birleştirmek 15. Nesneleri çoğaltmak 4. GÖRSEL ÖĞELER ÜZERINDE GELIŞMIŞ İŞLEMLER 4.1. Katman (Layer) Paneli 4.2. Katman Ekleme ve Adlandırma Yeni Katman Ekleme Katmanları Yeniden Adlandırma 4.3. Nesne Boyutunu ve Yerleşimini Ayarlama 4.4. Katman Kilitleme 4.5. Renk Seçme 4.6. Yuvarlak Köşeli Dikdörtgenler Çizme 4.7. Otomatik Şekiller 4.8. Doku ve Gölge Ekleme Doku Ekleme Gölge ekleme 4.9. Katman Yığın Sırası Tek Katmanlı Düzenleme Varsayılan Renkleri Ayarlama 1. Katman işlemlerini yapmak 2. Katmanda bulunan nesnelere doku ve gölge eklemek 3. Katmanları sıralamak 4. Birden fazla şekli birleştirmek 1. Planlı olmak 2. Düzenli olmak 3. Sabırlı olmak 4. Katman özelliklerine dikkat etmek 5. Şekilleri birleştirme işlemlerinde dikkatli olmak 6. Şekillerin birleştirilmesi sırasında kullanılan komutlara dikkat etmek 9

11 16. Opaklığı değiştirmek 17. Bir yol boyunca metin eklemek 18. Metni yollara dönüştürmek 19. Dönüşümler uygulamak Nesneleri Hizalama Şekilleri Birleştirme Nesne (Repeat) Çoğaltma Bir Yol Boyunca Metin Ekleme Kesişme (Intersect) ve Kırpma (Crop) Komutları Metni Yollara Dönüştürme SÜRE: İşlemin Yapılış Süresi: 2 saat İşlemin Öğrenme Süresi: 10 saat 10

12 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : GRAFİK VE FOTOĞRAF : GRAFİK OPERATÖRÜ : WEB TASARIMI : WEB ARAÇLARI : 482BK0125 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Temel Tasarım, Temel Desen dersi modüllerini ve Web ara yüzü modülünü başarmış olmak : Grafik tasarım programları, bilgisayar, internet, tarayıcı ve yazıcı sağlanmalıdır. : Anlatım, araştırma, uygulama, bireysel öğrenme, demonstrasyon yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile, gerekli ortam sağlandığında web araçlarını hazırlayabilecektir. AMAÇLAR : 1. Web sayfası düzenlemelerine uygun düğmeleri oluşturabilecektir. 2. Düzenlemede belirlenen etkin resim bölgelerini oluşturabilecektir. 3. Aktarma ve optimizasyon işlemlerini yapabilecektir. 4. Düzenlemede belirlenen hareketli resimleri oluşturabilecektir. 5. Düzenlemede belirlenen açılır menüleri oluşturabilecektir. İÇERİK : 1. DÜĞMELER 1.1. Düğme Düzenleyicisi (Buton Editor) 1.2. Yeni Bir Düğme Ekleme 1.3. Düğmeleri Değiştirme 1.4. Düğmelere Ad Verme ve Bağlantı Ekleme 1.5. Düğmeleri Alma 1.6. Grafikleri Düğmeye Dönüştürme 2. GRAFİKLER 2.1. Etkin Resim Bölgesi (Image Map) Oluşturma 2.2. Web Katmanıyla Çalışma 2.3. Resmi Dilimleme 2.4. Dönüşümlü Resimler (Rollover) Oluşturma 2.5. Kareler Ekleme 2.6. Davranış Ekleme 2.7. Yeni Dilimler Ekleme 2.8. Tam Ekran Görüntüleme 11

13 3. AKTARMA İŞLEMİ VE OPTİMİZASYON 3.1. Aktarma Sihirbazı (Export) 3.2. Resmin Dosya Türünü Seçme 3.3. Ön izleme Düğmesi 3.4. Mevcut Optimizasyon Ön Ayarları 3.5. Aktarma İşlemleri JPEG Resimlerini Gönderme Tarayıcıda Önizleme HTML Olarak Aktarma Hızlı Aktarma Düğmesi 4. HAREKETLİ RESİMLER 4.1. Animasyon Oluşturma 4.2. Çoklu Çerçeve (Onion Skin) Kullanma 4.3. Katman Paylaşma 4.4. Animasyon Sembolleri 4.5. Oynatımı Kontrol Etme 4.6. Bir GIF Dosyasını Aktarma 4.7. Aktarma Ön izlemesini Kullanma 4.8. Ara Kareler Doldurma (Tweening 4.9. Efektlere Dolgu Uygulama 5. AÇILIR MENÜLER 5.1. Bir Şablon Oluşturma 5.2. Bir Resmi Maskeleme 5.3. Katman Panelini Kullanarak Maskeleme Yapma 5.4. Metni Bir Maske Olarak Kullanma 5.5. Metin Dilimi Oluşturma 5.6. Açılır Menü Ekleme 5.7. Açılır Menüyü Düzenleme ÖLÇME VE DEĞERLENDİRME: Öğrencinin, programda amaçlanan Web araçlarını hazırlamak yeterliğini kazanıp kazanmadığını aşağıdaki performans ölçütlerine göre uygun ölçme araçlarıyla ölçünüz. 1. Web tasarımına düğme oluşturur. 2. Tasarımındaki resimler üzerinde etkin bölgeleri oluşturur. 3. Aktarma işlemlerini yapar. 4. Hareketli resimler oluşturur. 5. Hareketli resimleri aktarır. 6. Açılır menüler oluşturur. 12

14 İŞLEM NUMARASI 1 İŞLEMİN ADI Düğmeleri oluşturmak Web araçlarını hazırlamak ORTAM (Araç Gereç, Ekipman ve Koşullar) Grafik tasarım programları, bilgisayar, internet bağlantısı 1. Yeni bir düğme eklemek 2. Düğmeleri değiştirmek 3. Düğmelere isim vermek 4. Düğmelere bağlantı eklemek 5. Düğmeleri aktarmak (import) 6. Grafikleri düğmeye dönüştürmek 1. DÜĞMELER 1.1. Düğme Düzenleyicisi (Buton Editor) 1.2. Yeni Bir Düğme Ekleme 1.3. Düğmeleri Değiştirme 1.4. Düğmelere Ad Verme ve Bağlantı Ekleme 1.5. Düğmeleri Alma 1.6. Grafikleri Düğmeye Dönüştürme 1. Düğme eklemek 2. Düğme düzenleyicisini kullanmak 3. Düğme özelliklerini değiştirmek 4. Grafikleri düğmelere dönüştürmek 1. Düğmelerin adlandırılması işlemlerinde yazılım dili özelliklerine dikkat etmek SÜRE: İşlemin Yapılış Süresi: 2 saat İşlemin Öğrenme Süresi: 6 saat 13

15 İŞLEM NUMARASI 2 İŞLEMİN ADI Etkin resim bölgeleri oluşturmak Web araçlarını hazırlamak ORTAM (Araç Gereç, Ekipman ve Koşullar) Grafik tasarım programları, bilgisayar, internet bağlantısı 1. Image map (etkin resim noktası) oluşturmak 2. Web katmanıyla çalışmak 3. Bir resmi dilimlemek 4. Ayrık rolloverlar oluşturmak 5. Kareler eklemek 6. Bir davranış eklemek 7. Tam ekran görüntülemek 8. Yeni dilimler eklemek 2. GRAFİKLER 2.1. Etkin Resim Bölgesi (Image Map) Oluşturma 2.2. Web Katmanıyla Çalışma 2.3. Resmi Dilimleme 2.4. Dönüşümlü Resimler (Rollover) Oluşturma 2.5. Kareler Ekleme 2.6. Davranış Ekleme 2.7. Yeni Dilimler Ekleme 2.8. Tam Ekran Görüntüleme 1. Nesnenin aktif bölge alanını ile çalışmak 2. Nesneye Web katmanıyla eklemek ve çalışmak 3. Resimleri dilimleme işlemlerini yapmak 4. Nesnelere davranış eklemek 1. Aktif bölge alanı özelliklerine dikkatli olmak 2. Nesnelerin dilimleme işlemlerine dikkat etmek 3. Davranış ekleme işlemlerinde dikkatli olmak 4. Düzenli olmak 5. Sabırlı olmak 6. Titiz olmak SÜRE: İşlemin Yapılış Süresi: 2 saat İşlemin Öğrenme Süresi: 6 saat 14

16 İŞLEM NUMARASI 3 İŞLEMİN ADI Aktarma (export) işlemi ve optimizasyon yapmak Web araçlarını hazırlamak ORTAM (Araç Gereç, Ekipman ve Koşullar) Grafik tasarım programları, bilgisayar, internet bağlantısı 1. Aktarma sihirbazını kullanmak 2. Resmin dosya türünü seçmek 3. Ön izleme düğmesini kullanmak 4. Mevcut optimizasyon ön ayarlarını kullanmak SÜRE: İşlemin Yapılış Süresi: 4 saat 3. AKTARMA İŞLEMİ VE OPTİMİZASYON 3.1. Aktarma Sihirbazı (Export) 3.2. Resmin Dosya Türünü Seçme 3.3. Ön izleme Düğmesi 3.4. Mevcut Optimizasyon Ön Ayarları 3.5. Aktarma İşlemleri JPEG Resimlerini Gönderme Tarayıcıda Önizleme HTML Olarak Aktarma Hızlı Aktarma Düğmesi 1. Aktarma sihirbazını kullanarak hazırlanan nesneyi aktarmak 2. Kullanılacak dosya türünü doğru seçmek 1. Aktarma sihirbazı işlemlerine dikkat etmek 2. Dosya türünün doğru seçildiğinden emin olmak İşlemin Öğrenme Süresi: 8 saat 15

17 İŞLEM NUMARASI 4 İŞLEMİN ADI Hareketli resimler (gif) oluşturmak Web araçlarını hazırlamak ORTAM (Araç Gereç, Ekipman ve Koşullar) Grafik tasarım programları, bilgisayar, internet bağlantısı 1. Animasyon oluşturmak 2. Bir katmanı paylaşmak 3. Animasyon sembollerini kullanmak 4. Oynatımı kontrol etmek 5. Bir GIF animasyonunu aktarmak 6. Aktarma önizlemesini animasyonlarla kullanmak 7. Ara kareler doldurmak (tweening) SÜRE: İşlemin Yapılış Süresi: 4 saat 4. HAREKETLİ RESİMLER 4.1. Animasyon Oluşturma 4.2. Çoklu Çerçeve (Onion Skin) Kullanma 4.3. Katman Paylaşma 4.4. Animasyon Sembolleri 4.5. Oynatımı Kontrol Etme 4.6. Bir GIF Dosyasını Aktarma 4.7. Aktarma Ön izlemesini Kullanma 4.8. Ara Kareler Doldurma (Tweening) 4.9. Efektlere Dolgu Uygulama 1. Çoklu çerçeve işlemlerini kullanmak 2. Katman paylaşımı işlemlerini yapmak 3. Animasyonu GIF dosyası olarak aktarmak 4. Animasyona ara kareler eklemek 5. Animasyon ara karelerini değiştirmek 1. Planlı olmak 2. Düzenli olmak 3. Sabırlı olmak 4. Titiz olmak 5. Çoklu çerçeve işlemlerine dikkat etmek 6. Katman paylaşımı işlemlerinde dikkatli olmak 7. Animasyon ara karelerine dikkat etmek İşlemin Öğrenme Süresi: 8 saat 16

18 İŞLEM NUMARASI 5 İŞLEMİN ADI Açılır menüler oluşturmak. Web araçlarını hazırlamak ORTAM (Araç Gereç, Ekipman ve Koşullar) Grafik tasarım programları, bilgisayar, internet bağlantısı 1. Bir şablon oluşturmak 2. Bir resmi maskelemek 3. Katman panelini kullanarak maskeleme yapmak 4. Metni bir maske olarak kullanmak 5. Metin dilimi oluşturmak 6. Açılır menü eklemek 7. Açılır menüyü düzenlemek 5. AÇILIR MENÜLER 5.1. Bir Şablon Oluşturma 5.2. Bir Resmi Maskeleme 5.3. Katman Panelini Kullanarak Maskeleme Yapma 5.4. Metni Bir Maske Olarak Kullanma 5.5. Metin Dilimi Oluşturma 5.6. Açılır Menü Ekleme 5.7. Açılır Menüyü Düzenleme 1. Maskeleme işlemleri yapmak 2. Açılır menü işlemlerini yapmak 1. Şablon oluşturma işlemlerinde dikkatli olmak 2. Maskeleme işlemlerine dikkat etmek 3. Açılır menü işlemlerine dikkat etmek 4. Planlı olmak 5. Düzenli olmak 6. Sabırlı olmak SÜRE: İşlemin Yapılış Süresi: 1 saat İşlemin Öğrenme Süresi: 4 saat 17

19 MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : GRAFİK VE FOTOĞRAF : GRAFİK OPERATÖRÜ : WEB TASARIMI : WEB TASARIM EDİTÖRÜ : 482BK0127 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Temel Tasarım, Temel Desen dersi ile Web ara yüzü ve Web araçları modüllerini başarmış olmak : Grafik tasarım programları, bilgisayar, internet, tarayıcı ve yazıcı sağlanmalıdır. : Anlatım, araştırma, uygulama, bireysel öğrenme, demostrasyon yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile, gerekli ortam sağlandığında Web sayfası için hazırlanan parçaları Web editöründe birleştirebilecektir.. AMAÇLAR : 1. Temel web komutları ile html belgesi oluşturabilecektir. 2. Tasarıma uygun şablonu editör programında oluşturabilecektir 3. Tasarıma Görselleri ekleyebilecektir 4. Bağlantıları oluşturabilecektir 5. CSS panelinde stiller oluşturabilecektir 6. Site yönetim işlemlerini yapabilecektir İÇERİK : 1. TEMEL WEB KOMUTLARI 1.1. HTML Komut Yapısı <HTML> <HEAD> <BODY> <TITLE> 1.2. Dil desteğinin belirlenmesi 1.3. Listeleme Etiketleri <OL> <UL> <LI> 1.4. Metin Düzenleme Etiketleri <HX> <B> <U> <I> <BR> <P> 18

20 <FONT> 1.5. Görünüm Düzenleme Etiketleri BGCOLOR 1.6. Resim Ekleme 2. TABLO İŞLEMLERİ 2.1. Çalışma Alanı Editör Ara yüzü Çalışma Ekranları Araç Çubukları ve Paneller 2.2. Site Tanımlama Site Tanımı Sunucu Türleri 2.3. Tablolar ile Çalışmak 2.4. Tablosal Veriler 2.5. Sayfa Düzeninde Tablo Kullanımı 2.6. Layout Modu 2.7. Expanded Modu 3. GÖRSELLERİ EKLEMEK 3.1. Metin türleri ve özellikleri 3.2. Listeler 3.3. Harici metinler 3.4. Resimlerle çalışma 3.5. Resim türleri 3.6. Resim düzenleme 3.7. Çoklu Ortam Bileşenleri Ekleme 3.8. Dreamweaver ve Flash Video Ekleme 4. BAĞLANTILARI OLUŞTURMAK 4.1. Linkler ile çalışma 4.2. Link türleri 4.3. E-posta linkleri 5. CSS PANELİ 5.1. Dream weaver ile Sayfa içinde CSS kullanımı 5.2. CSS ile tasarım 5.3. Davranışlar 6. SİTE YÖNETİMİ 6.1. Site Yönetimi 6.2. Yayınlama ÖLÇME VE DEĞERLENDİRME: 1. Temel web komutlarını bilir. 2. Temel web komutları ile html belgesi oluşturur. 3. Web tasarım editöründe site tanımlamasını yapar. 4. Tasarıma uygun tabloları oluşturur. 5. Tablo özelliklerini ayarlar. 6. Tasarıma uygun metinleri oluşturur. 7. Tasarıma uygun şekilde resimleri ekler. 8. Tasarımda düşünülen flv dosyalarını ekler. 9. Harici ses ve video ekler. 19

21 10. Metinlere bağlantı ekler. 11. Resimlere bağlantı ekler. 12. Sayfa içi bağlantı ekler. 13. E-posta bağlantısı ekler. 14. CSS panelinde stiller oluşturur. 15. Siteyi yayınlar. - 20

22 İŞLEM NUMARASI 1 İŞLEMİN ADI Temel web komutlarını kullanmak YETERLİK Siteyi Yayına Hazır Hale Getirmek ORTAM (Araç-Gereç, Ekipman ve Koşullar) Bilgisayar, İnternet Bağlantısı, Web Tasarım Yazılımları Kodları hatasız, kod yazım kurallarına uygun yazmak 1. Proje ihtiyaçlarını belirlemek 2. HTML belgesi oluşturmak 3. HTML belgesini kaydetmek 4. Oluşturulan HTML belgesini internet tarayıcıda görüntülemek 5. HTML sayfasında bulunması gereken standart etiketleri kullanmak 6. Dil desteğini belirlemek 7. Metinleri düzenlemek 8. Görünümü düzenlemek 9. Resimler eklemek SÜRE: İşlemin Yapılış Süresi: 4 saat 1. TEMEL WEB KOMUTLARI 1.1. HTML Komut Yapısı <HTML> <HEAD> <BODY> <TITLE> 1.2. Dil desteğinin belirlenmesi 1.3. Listeleme Etiketleri <OL> <UL> <LI> 1.4. Metin Düzenleme Etiketleri <HX> <B> <U> <I> <BR> <P> <FONT> 1.5. Görünüm Düzenleme Etiketleri BGCOLOR 1.6. Resim Ekleme 1. Web tarayıcılar ile çalışmak 2. Web tasarım temel ilkelerini uygulamak 3. Web sitesi kullanırlığını arttıracak işlemler yapmak 4. HTML belgesi oluşturma işlemleri yapmak 5. HTML sayfasında bulunması gereken standart etiketlerin kullanım işlemlerini yapmak 6. HTML sayfası için metin biçimlendirme etiketlerini kullanmak 7. HTML sayfası için görünüm biçimlendirme etiketlerini kullanmak 8. HTML belgesi içine resim ekleme işlemlerini yapmak 1. İş disiplinine sahip olmak 2. Planlı ve organize olmak 3. Sabırlı olmak 4. Tasarım ilkelerini dikkat etmek 5. Detaylara özen göstermek 6. HTML belgesi oluşturulurken dikkatli olmak 7. Standart etiketlerin kullanımında dikkatli olmak 8. Mantıksal metin biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak 9. Fiziksel metin biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak 10. HTML sayfası için görünüm biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak 11. HTML belgesi içine resim ekleme işlemlerini hatasız yapmak İşlemin Öğrenme Süresi: 10 saat 21

23 İŞLEM NUMARASI 2 İŞLEMİN ADI Siteyi Yayına Hazır Hale Getirmek Tasarıma uygun şablonu editör programında oluşturmak ORTAM (Araç-Gereç, Ekipman ve Koşullar) Bilgisayar, Web Ara yüz Programı, İnternet Bağlantısı Tasarım düzenine uygun, kaymaları önleyecek tablolama yapmak 1. Editör programının açılış ayarlarını yapmak 2. Araç çubuklarını kullanmak 3. Panellerle çalışmak 4. Site tanımlama sihirbazında sitenin tanımlamasını yapmak 5. Tasarıma uygun temel tabloları oluşturmak 6. Tablo özelliklerini ayarlamak 7. Tablo zemin biçimlerini ayarlamak 8. Tablolara zemin görseli eklemek 9. Layout ve Expanded modunda tabloları şekillendirmek SÜRE: İşlemin Yapılış Süresi: 2 saat 2. TABLO İŞLEMLERİ 2.1. Çalışma Alanı Editör Ara yüzü Çalışma Ekranları Araç Çubukları ve Paneller 2.2. Site Tanımlama Site Tanımı Sunucu Türleri 2.3. Tablolar ile Çalışmak 2.4. Tablosal Veriler 2.5. Sayfa Düzeninde Tablo Kullanımı 2.6. Layout Modu 2.7. Expanded Modu 1. Çalışma alanı özellikleri kullanmak 2. Site tanımlama işlemlerini yapmak 3. Tablo oluşturma işlemleri yapmak 4. Tablo özellikleri ile çalışmak 5. Layout modunda tablo oluşturmak 6. Expanded modunda tablo oluşturmak 1. Detaylara özen göstermek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat etmek 5. Çalışma alanı özelliklerine dikkat etmek 6. Site tanımlama işlemlerini hatasız yapmak 7. Tablo oluşturma işlemlerinde dikkatli olmak 8. İsteğe uygun olarak tablo özelliklerini ayarlamak 9. Layout ve Expanded modunda tablo oluşturulken dikkatli olmak İşlemin Öğrenme Süresi: 5 saat 22

24 İŞLEM NUMARASI 3 İŞLEMİN ADI Görselleri eklemek Siteyi Yayına Hazır Hale Getirmek ORTAM (Araç-Gereç, Ekipman ve Koşullar) İŞLEMİN STANDARD Bilgisayar, Web Ara yüz Programı, İnternet Bağlantısı İnternet özeliklerine uygun görseller eklemek 1. Metin biçimlendirme işlemlerini yapmak 2. Liste oluşturmak 3. Harici metinleri kullanmak 4. Web sayfasına resim eklemek 5. Resim biçimlendirme işlemlerini yapmak 6. Harici düzenleme programlarını kullanmak 7. Flash animasyon eklemek 8. Flash düğme eklemek 9. Flash metin eklemek 10. Flash video eklemek 11. Ses oynatıcısı eklemek 12. Uygulama eklemek 13. Param eklemek 14. Activex komutları eklemek 15. Harici ses ve video eklemek SÜRE: İşlemin Yapılış Süresi: 1 saat 3. GÖRSELLERİ EKLEMEK 3.1. Metin türleri ve özellikleri 3.2. Listeler 3.3. Harici metinler 3.4. Resimlerle çalışma 3.5. Resim türleri 3.6. Resim düzenleme 3.7. Çoklu Ortam Bileşenleri Ekleme 3.8. Dreamweaver ve Flash Video Ekleme 1. Metin biçimlendirme işlemlerini yapmak 2. Liste oluşturma işlemlerini yapmak 3. Harici metinlerin kullanım işlemlerini yapmak Resim ekleme işlemlerini yapmak 4. Resim biçimlendirme işlemlerini yapmak 5. Resim düzenleme işlemlerini yapmak 6. Web sitesine flash nesneleri eklemek 7. Web sitesine çoklu ortam nesnelerini eklemek 8. Çoklu ortam nesnelerini düzenlemek 1. Detaylara özen göstermek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat etmek 5. Metin biçimlendirme işlemlerini hatasız yapmak 6. Liste oluşturma işlemlerinde dikkatli olmak 7. Resim ekleme işlemlerinde dikkatli olmak 8. Çoklu ortam bileşenlerinin eklenmesi işlemlerini hatasız yapmak 9. Çoklu ortam bileşenlerinin düzenlemesi işlemlerini hatasız yapmak İşlemin Öğrenme Süresi: 5 saat 23

25 İŞLEM NUMARASI 4 İŞLEMİN ADI Bağlantıları oluşturmak Siteyi Yayına Hazır Hale Getirmek ORTAM (Araç-Gereç, Ekipman ve Koşullar) Bilgisayar, Web Ara yüz Programı, İnternet Bağlantısı Web sayfasına bağlantıları sorunsuz çalışacak şekilde eklemek 1. Metinlere bağlantıları eklemek 2. Resimlere bağlantılarını eklemek 3. Resmin bir bölümüne bağlantı eklemek 4. Bağlantı özelliklerini ayarlamak 5. Sayfa içi bağlantıları eklemek 6. E-posta bağlantısı eklemek 4. BAĞLANTILARI OLUŞTURMAK 4.1. Linkler ile çalışma 4.2. Link türleri 4.3. E-posta linkleri 1. Web sayfasında bağlantılar oluşturmak 2. Bağlantı özelliklerini düzenlemek 3. E-posta bağlantıları oluşturmak 1. Detaylara özen göstermek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat etmek 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ılış Süresi: 30 dakika İşlemin Öğrenme Süresi: 4 saat 24

26 İŞLEM NUMARASI 5 İŞLEMİN ADI CSS panelinde stilleri oluşturmak Siteyi Yayına Hazır Hale Getirmek ORTAM (Araç-Gereç, Ekipman ve Koşullar) Bilgisayar, Web Ara yüz Programı, İnternet Bağlantısı 1. Web editöründe CSS ile stilleri oluşturmak 2. Davranışları eklemek SÜRE: İşlemin Yapılış Süresi: 1 saat 5. CSS PANELİ 5.1. Dream weaver ile Sayfa içinde CSS kullanımı 5.2. CSS ile tasarım 5.3. Davranışlar 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 1. Detaylara özen göstermek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat etmek 5. CSS sayfalarının kullanım işlemlerinde dikkatli olmak 6. Davranış türlerine ve kurallarına dikkat etmek 7. Davranış ekleme ve düzenleme işlemlerini hatasız yapmak İşlemin Öğrenme Süresi: 4 saat 25

27 MESLEĞİN ADI RAFİK OPERATÖRÜ İŞ Web Sayfası Tasarlamak İŞLEM NUMARASI 6 İŞLEMİN ADI Siteyi yönetmek Siteyi Yayına Hazır Hale Getirmek ORTAM (Araç-Gereç, Ekipman ve Koşullar) Bilgisayar, Web Ara yüz Programı, İnternet Bağlantısı Web sitesini internette sorunsuz şekilde yayınlamak 1. Site erişebilirliğini test etmek 2. Dosya transferini yapmak 3. Siteyi yayınlamak 4. Sunucu bağlantısı yapmak SÜRE: İşlemin Yapılış Süresi: 1 saat 6. SİTE YÖNETİMİ 6.1. Site Yönetimi 6.2. Yayınlama 1. Erişebilirlik ve test işlemlerini gerçekleştirmek 2. Bağlantıları kontrol etmek 3. Dosya ve klasörleri aktarmak 4. Sunucu tarafında çalışmak 1. Detaylara özen göstermek 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat etmek 4. İsimlendirme işlemlerinde yazım kuralarına dikkat etmek 5. Dosya ve klasörlerin aktarılması işlemlerini hatasız yapmak 6. Web sitesinin sunucu tarafında hatasız çalıştığından emin olmak İşlemin Öğrenme Süresi: 4 saat 26