MÜFREDAT

GİRİŞ

•Sıınıfla tanışma ve eğitmenin tanıtımı

•Rehberlik, bina, bilgi işlem departmanlarının tanıtımı ve genel bilgilendirme

•Ders işlenişinin anlatımı

•Müfredat

•Soru cevap

 

 

WEB TASARIM KURSU EĞİTİMİ  TEKNİK İÇERİK:

 

•-Web Tasarım Nedir ?

•-Web Kavramı

•-İnternet ve Terminoloji - Web Tasarımcının Kültürü

•(internet gezgini (internet explorer), modem, hız, alan, domain, html, ...)

 

 

WEB TASARIM KURSU EĞİTİMİ  PHOTOSHOP

                Web Tasarım; Dünyanın en ünlü programlarından biri olan Adobe Photoshop, bitmap – piksel tabanlı bir program olup, bir fotoğraf modifikasyon yazılımıdır. Aynı zamanda web siteleri ve projelerinin arayüz tasarımlarında da yoğun olarak kullanılmaktadır.sayfalarda bulunan butonlar, arkaplan, kutular, alanlar, bannerlar (reklam alanları) ve her türlü görsel elemanlar photoshop ile tasarlanabilir, ve siteniz için fark yaratacak tasarımlara imza atabilirsiniz.

•-Photoshop ve Web Tasarım

•Web sektöründe kullanım alanları

•-Arayüz Mantığı ve Kültürü

•-Photoshop'ta Web için Döküman Oluşturmak

•-Web sayfası boyutu - çözünürlük kavramları

•-Photoshop ile sayfa arkaplanı oluşturmak

•-Renk ile arka plan

•-Desen ile arka plan (Pattern)

•-Renk geçişi (Gradient) ile arka plan

•-Resim ile arka plan

•-Photoshop ve seçimler

•Seçim (selection) mantığı

•Seçim araçları ve kullanımları

•-Photoshop'ta katmanlarla çalışmak (Layers)

•Katman mantığı ve webde kullanımı

•-Photoshop'ta şekiller ile çalışmak (Shapes)

•Şekilleri birleştirmek, çıkarmak, kesiştirmek

•Şekillerle sayfa tasarımı yapmak

•Dolgu, desen, çerçeve ve efektler

•-Photoshop'ta buton yapmak

•-Photoshop'ta bir web sayfası arayüzü oluşturmak

•Arayüz elemanları

•Göze hitap eden arayüz tasarlayabilmek

•-Dilimleme (Slice) mantığı / Dilimleme aracı

•Sayfayı kodlamaya hazır hale getirmek

•"Save for web" ( Web için kaydetmek)

•Optimizasyon ayarları

•-Resimleri Photoshop'tan web sayfası için dışarıya almak (Save for Web)

•Photoshop ve Optimizasyon (Boyut / Kalite Ayarlaması)

 

•-HTML

•-Html Nedir ?

•-xHtml - Html

•-Html Etiket Mantığı

•Etiket yazmak

•Doğru yazım kuralları

•-Özellikler (Attribute)

•-Bilinen Yapısal Etiketler

•-Başlıklar

•-Paragraflar

•-Linkler ve Çapalar (Anchors)

•Resimler

•Resme link vermek

•Listeler

•Tablolar

•-Html ile sadece kod yazarak bir sayfa örneği çalışması

 

•-CSS

•-Css Nedir ? Ne işe yarar ?

•-Css anatomisi

•-Seçiciler (Seçici türleri)

•-Özellikler

•-Değerler

•-Css kullanarak html etiketlerinin stillerini - görünümlerini düzenlemek / değiştirmek

•-Css kullanarak sayfanın genel yapısını belirlemek (Arka plan, siteyi ortalama...)

•-Css kullanarak resim kullanmadan sayfayı photoshop tasarımına ulaştırmak

 

•-Dreamweaver ile site tasarlamak

•-DW nedir ? Ne işe yarar ?

•-Kök Klasör mantığı

•-Site tanımlama ve yeni Html dökümanı oluşturma

•-Sayfaya obje eklemek

•-Link eklemek

•-Başlık eklemek

•Yazı eklemek

•Liste eklemek

•Tablo eklemek

•-Resim eklemek

•Div mantığı ve divlerle web tasarım

•-Divlerle tasarımın avantajları

•Kutu modeli (box model)

•-İç - dış boşluk kavramları (margin & padding )

•-Pozisyonlama ile sayfa elemanlarını yerleştirmek

•-Sayfa içi linklendirme (Anasayfa, Hakkımızda, İletişim...)

•Liste yöntemi ile menü oluşturmak

•Navigasyon mantığı

•-Photoshop'ta tasarlanmış bir siteyi DW'a aktarmak, çalıştırmak

•DW ve CSS

•DW da css kuralları oluşturmak

•Dahili ve harici css dokümanları hazırlamak

•Sayfaya dışarıdan css bağlamak

•Class ve ID seçicileri kullanarak bir e-ticaret sitesi oluşturma mantığı

•Yeni css özellikleri ile sayfaya interaktivite katmak

•-DW ile iletişim formu tasarlamak

 

•-HTML 5 ve Css 3

•-Neden Html 5 ?

•-Html 5 yenilikleri ve avantajları. Html 5 nedir ?

•-Html 5 etiketlerinin kullanımı

•Html 5 etiketleri ve avantajları

•Kullanım alanları

•Html 4 bir sayfayı Html 5 e çevirmek

•Sayfaya video eklemek

•-CSS 3.0

•-Kenar ovalliği, gölge verme, font gömme

•-Css 3 ile geçiş efektleri (Uzama, genişleme, mouse ile etkileşim...)

•CSS 3.0 ve explorer ilişkisi

•-Javascript

•Javascript ve jquery bilgisi

•javascript nasıl eklenir ?

•Nasıl kullanılmalı, nereye yazılmalı ?

•Javascript / Jquery ile efektler

•Sayfa kaydırma efekti (parallax)

•Resmi sayfa içinde büyütme (lightBox)

 

•Responsive Design (Web sitesini ekrana göre tasarlama)

•-Flash ile web tasarım

•-Flash nedir ? ne işe yarar ?

•-Program arayüzü ve döküman özellikleri

•-Yeni döküman oluşturma ve yapılandırma

•-Zaman çizelgesi (Timeline) mantığı

•-Kare (Frame), Anahtar kare (KeyFrame) mantığı

•-Hareket nedir ? Animasyon mantığı nedir ?

•-Frame ile animasyon yapımı

•-Tween modları ile animasyon yapımı

•-Örnek web banner (web sayfası reklamı) çalışması

 

•S.E.O. (Arama motoru optimizasyonu)

•Siteyi Google'a tanıtmak

•Siteye anahtar kelime eklemek

•SEO için gerekli elemanlar

•Başlıklar

•Resim bilgileri

•İsim verme teknikleri

•Sayfa başlığı

•Alan adı önemi

•Anahtar kelime

•Organik içerik hazırlama

•BackLink

•-Web sitesini yayınlamak

•-Alan adı, domain kavramları

•-Alan(Hosting) kavramı

•-İnternetten alan adı ve alan satın almak

•-Ftp protokolü ve kullanımı

•-Siteyi internete yüklemek

•Siteyi güncellemek