• Buradasın

    Web Tasarımı Eğitim Serisi: Fireworks, Photoshop ve Dreamweaver

    youtube.com/watch?v=hEIuEuD7nFs

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan kapsamlı bir web tasarımı eğitim serisidir. Eğitmen, web sitesi tasarımı için gerekli olan temel adımları ve programları adım adım göstermektedir.
    • Video, web sitesi tasarımı için gerekli dosya yapısının oluşturulmasıyla başlayıp, Fireworks, Photoshop ve Dreamweaver programlarının kullanımını detaylı şekilde anlatmaktadır. Eğitim içeriği, halk eğitim merkezi projesi üzerinden ilerleyerek, resimlerin dilimlendirilmesi, banner tasarımı, web sayfası düzeni, şablon oluşturma ve içerik yönetim sistemleri hakkında bilgiler içermektedir.
    • Eğitim serisi ayrıca, web tasarımında arka plan resmi ekleme, CSS stil oluşturma, değişken ve sabit alanları belirleme, sayfa oluşturma ve linkleme işlemleri gibi teknik konuları da kapsamaktadır. Son bölümde ise Adobe programlarının lisanslı ve crack sürümleri arasındaki farklar, Milli Eğitim Bakanlığı'nın Adobe CS4 lisansı ve Türkçe/İngilizce kullanım avantajları hakkında bilgiler verilmektedir.
    00:12Web Tasarım Dosyaları ve Klasör Yapısı
    • Oluşturulan dosya C sürücüsünde yer alıyor ve üç ana klasör oluşuyor: resimler, stil ve şablon.
    • Web sitesi tasarımı için üst ve alt kısımlar oluşturulurken, orta kısım yazı ve resimler için boş bırakılır.
    • Resimleri dilimlere ayırmak sayfaların daha hızlı açılmasını sağlar ve büyük resimlerin önce kısmen görüntülenmesini sağlar.
    01:46Klasörlerin Amacı
    • Dilimlenmiş resimler imaj klasörünün içerisinde saklanır.
    • PNG klasöründe oluşturulan dosyalar, daha sonra değişiklik yapmak için kullanılabilir.
    • Resimler klasörü internetten alınan resimlerin atılacağı kendi oluşturulan bir klasördür.
    02:43Şablon ve Stil Dosyaları
    • Sitenin tanıtımı için şablon dosyası oluşturulur.
    • Stil.css dosyası başlıklar, alt başlıklar ve içeriklerin stillerini içerir.
    • Tüm sayfaların stilleri .css dosyasından, tasarımları ise şablon dosyasından alır.
    03:49Fireworks Programı
    • Fireworks açıldığında karşımıza hoş geldiniz ekranı (splashscreen) gelir ve buradan yeni bir Fireworks belgesi oluşturulabilir.
    • Fireworks'de oluşturulan tüm dökümanlar PNG uzantısı ile oluşturulur.
    • New Documents bölümünde with (genişlik), high (yükseklik) ve resolution (her inç başına düşen piksel sayısı) değerleri ayarlanabilir.
    05:09Resolution Değerleri ve Kullanım Alanları
    • Resolution değeri maksimum 100.000 olabilir ancak bu kadar yüksek değer için güçlü bir bilgisayar gereklidir.
    • Web tasarımı için 72 resolution değeri, baskı için 300 resolution değeri kullanılır.
    • Fireworks bitmap tabanlı bir program olduğu için yazılar ve resimlerde bozulmalar olabilir, bu nedenle afiş veya broşür tasarımları için Illustrator önerilir.
    08:47Fireworks Kullanımı
    • Fireworks'ta beyaz bir zemine sahip web sayfası tasarımı yapılabilir.
    • Rectangle tool ile kenarları yuvarlatılmış kutular, oval veya istenilen herhangi bir şekil oluşturulabilir.
    • Oluşturulan objenin rengi ve diğer düzenlemeleri Properties Inspector panelinden yapılabilir, ancak kenarları yuvarlatılmış dikdörtgenlerin genişletilmesi için sadece resize bölümü kullanılmalıdır.
    11:00Photoshop'ta Web Sayfası Tasarımı
    • Web sayfası tasarımı için elle hizalama yaparken pointer tool (taşıma aracı) kullanılır ve büyüteç aracı için Ctrl+Space tuşlarına basılır.
    • Web sayfasının görünümünü kontrol etmek için zoom tool kullanılarak yüzde yüz görüntüye ulaşılır.
    • Web sayfasının üst kısmında "Halk Eğitim Merkezi" yazısı yerleştirilir ve alt tarafta footer oluşturulur.
    15:49Renk Ayarlamaları ve Tasarım Detayları
    • Renk ayarlamaları için Sys Color Piksel paneli kullanılır ve buradan kırmızı, yeşil, mavi renklerinin tonları maksimum 255'e kadar ayarlanabilir.
    • Kenarların yuvarlaklığı ayarlanırken Alt tuşuna basarak sadece istenilen bölgede düzeltme yapılabilir.
    • Web sayfasının arka planı için farklı renkler kullanılabilir ve öğeler arasında nesne sıralaması yapılarak arka plan resimleri eklenebilir.
    19:48Slice (Dilimleme) İşlemi
    • Web sayfası tasarımı için üst ve alt kısımlar ayrı dilimler (slices) olarak ayarlanır.
    • Dilimleme yapılırken tüm öğelerin dilimin içerisine alınması gerekir, aksi takdirde boşluklar oluşabilir.
    • Web tasarımlarında kenarları yuvarlatılmış öğeler kullanılamaz, çünkü HTML tabanlı sistem düz slaytları gerektirir.
    21:56Fireworks'ta Çerçeve Oluşturma ve Dilimleme
    • Fireworks'ta çerçevenin kenar çizgisini siyah olarak ayarlayıp, sahneye göre genişletme işlemi yapılıyor.
    • Çerçeve stilini değiştirmek için çizgi stili ayarlanıyor ve sahne boyutuna göre çerçeve genişletiliyor.
    • Dilimleme işlemi yaparken sağ ve sol taraflarda kenar boşluğu bırakmak gerekiyor ve dilimlere ayırma işlemi tamamlanıyor.
    23:54Dosyaları Kaydetme ve Dreamweaver'a Aktarma
    • Dilimlere ayrılmış dosyalar masaüstüne yeni bir klasöre kaydediliyor ve PNG uzantılı olarak kaydediliyor.
    • Fireworks'ta dosyalar HTML formatında dışarı aktarılıyor ve imajlar bir klasör içerisinde kaydediliyor.
    • Dreamweaver'da yeni bir site tanımlaması yapılıyor ve yerel klasör belirleniyor.
    26:07Dreamweaver'da Site Yapılandırması
    • Default imaj klasörü olarak yeni bir klasör oluşturuluyor, böylece dilimlendiği resimlerle yeni eklenen resimler karışmamak için ayrı bir klasör oluşturuluyor.
    • Site yapılandırmasında remote info bölümüne geçilmiyor, sadece lokal erişim yapılandırılıyor.
    • HTML dosyası açılarak sayfa düzenlemesi yapılıyor ve yazılar ekleniyor.
    27:37Arka Plan Resimleri ve SEO Önemi
    • Resimler arka plan olarak ayarlanıyor ve tekrar eden arka plan özelliği kullanılıyor.
    • Resim halindeki yazıların yerine normal yazı kullanmanın öneminden bahsediliyor.
    • Google'da indeksleme ve portal olarak çıkabilme açısından yazıların resim yerine normal metin olarak kullanılmasının avantajları açıklanıyor.
    31:21Web Sayfası Tasarımı
    • Arka plan resmi olarak atılıp üstüne tablo oluşturuluyor.
    • Tablo için padding ve spacing değerleri ayarlanıyor, tablo genişliği yüzde yüz olarak belirleniyor.
    • Menü için CSS sınıfı oluşturuluyor ve yazı tipi, boyut ve renk ayarları yapılıyor.
    33:01CSS Sınıfları Oluşturma
    • Başlık, alt başlık ve içerik için ayrı CSS sınıfları oluşturuluyor.
    • Tüm CSS sınıfları kod olarak görüntülenebiliyor ve kaydedilebiliyor.
    • Menü öğeleri (anasayfa, hakkımda, eğitimler, kurslar, personel, iletişim) oluşturuluyor.
    35:35Şablon Oluşturma
    • Tasarım hazırlandığında şablon oluşturuluyor ve "Save as Template" seçeneği kullanılıyor.
    • Şablonda sabit ve düzenlenebilir alanlar belirleniyor.
    • Farklı sayfalar (index, hakkımda, personel, kurslar, iletişim) şablondan oluşturuluyor.
    37:22Linklerin Ayarlanması
    • Şablonda linkler veriliyor ve CSS sınıfları yeniden uygulanıyor.
    • Linklerin altı çizili olup olmayacağı "Page Properties" bölümünden ayarlanabiliyor.
    • Tüm sayfalara "Update" işlemi yapılıyor.
    39:05Başlık ve Hedef Ayarları
    • Web sitesinin başlığı (title) tüm sayfalarda aynı şekilde ayarlanıyor.
    • İletişim sayfası için "target" özelliği "blank" olarak ayarlanarak yeni sekmede açılması sağlanıyor.
    • Tüm sayfalar kaydedildikten sonra test ediliyor.
    43:53Hazır Sistemler Hakkında Bilgi
    • WordPress ve Joomla gibi hazır content management system'ler (CMS) bulunuyor.
    • Bu sistemler genellikle ücretsiz ve PHP tabanlı olup yönetim panelleri sunuyor.
    • Hazır sistemler kullanıldığında Google'da üst sıralara çıkması zor olabilir ve özelleştirme imkanları sınırlı olabilir.
    45:02İçerik Yönetim Sistemleri ve Lisanslar
    • Her sayfadaki tabandaki yazıları silmek yasalara aykırıdır.
    • Uzaktan eğitim sistemleri (Moodle) hem içerik yönetim sistemi (CMS) hem de öğrenim yönetim sistemi (LMS) olarak kullanılır.
    • Jumla ve WordPress gibi sistemlerde modül açıklamaları bulunur, ancak Jumla'nın kod yoğunluğu ve açıklama satırları yetersiz olabilir.
    46:19Adobe Programlarının Lisansları
    • Adobe programları lisanslıdır ve 30 günlük ücretsiz deneme sürümü bulunmaktadır.
    • Milli Eğitim Bakanlığı'nın özel AB-CS4 lisanslı ürünü var, ancak bu lisans sadece halk eğitimi için verilmiştir.
    • Kurumsal lisansları kişisel bilgisayarlarda kullanmak yerine, crack'lerin kullanılması tavsiye edilmektedir.
    49:36Programların Dil Seçimi
    • Milli Eğitim Bakanlığı ile Adobe arasında anlaşmalar vardır ve bazı programlar türkçeleştirilmiştir.
    • Türkçe kullanmak daha kolay olsa da, programın yeni sürümlerinde Türkçe isimlerin değişebileceği için İngilizce bilmenin önemlidir.
    • Programlarda Türkçe hatalar çıkabilir, ancak Türkçe kullanım talebi arttıkça türkçeleştirme çalışmaları hızlanabilir.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor