Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Tayfun Erbilen tarafından sunulan bir web tasarım eğitim içeriğidir. Eğitmen, izleyicilere HTML ve CSS kullanarak bir PSD tasarımını web sayfasına dönüştürme sürecini adım adım göstermektedir.
- Videoda, bir web sayfasının tüm bölümlerinin (logo, menü, blog, now, sağ ve sol bölümler, konu bölüm, sayfalaama, footer ve iletişim bilgileri) HTML ve CSS kodlarıyla nasıl oluşturulacağı detaylı olarak anlatılmaktadır. Eğitim, temel web tasarım tekniklerini kapsayan bir rehber niteliğindedir.
- Eğitimde ayrıca Cufon kullanılarak özel font uygulama, float ve clear gibi CSS özellikleri, farklı tarayıcı uyumluluğu testleri ve jQuery ile hover efektleri gibi ileri seviye konular da ele alınmaktadır. Video, HTML ve CSS bilgisi olanlar için blog tasarımı yapmak isteyenler için faydalı bir kaynak niteliğindedir.
- 00:01CSS Tasarım Dökümüne Giriş
- Tayfun Erbilin bu videoda bir PSD tasarımı CSS'e dökmekten bahsedecektir.
- CSS öğrenmesine katkıda bulunmak için bu tür videoların çekildiğini belirtiyor.
- Dökülecek tasarım önceden gösteriliyor ve kafanın canlanması için bakılması öneriliyor.
- 00:54Arka Plan Resminin Hazırlanması
- Tasarımın arka planı elde edilerek düz bir zemine çıkarılıyor.
- Resim JPEG formatında kalitesi %60 olduğunda 40 KB'a düşürülmüş ve bu şekilde kullanılabilir hale getirilmiş.
- Resim "images" klasörüne "body bg" adıyla kaydediliyor.
- 01:57CSS Dosyasının Oluşturulması
- "css" adında bir klasör oluşturuluyor ve düzenli çalışmanın her zaman iyi olduğu vurgulanıyor.
- CSS dosyası Notepad++ ile açılıyor ve index sayfası ile birlikte düzenleniyor.
- CSS dosyasına "Tayfun Erbilin tarafından kodlanmıştır" notu ekleniyor.
- 02:29Arka Plan Stilinin Uygulanması
- Body elemanına arka plan resmi uygulanıyor ve resmin yolu belirleniyor.
- Arka planın tekrarlamaması için "no-repeat", yukarıdan ve ortasından başlaması için "top center" değerleri kullanılıyor.
- CSS dosyasının sayfaya çağrılması unutulmuş ve bu nedenle arka planın görünmemesi belirtiliyor.
- 03:49Logo Eklenmesi
- Logo, şeffaf bir şekilde PNG formatında "logo" adıyla kaydediliyor.
- Header adında bir div oluşturuluyor ve içine logo ekleniyor.
- Image tag'ında logo resminin yolu ve alt takımı belirtiliyor.
- 05:27Div Genişliğinin Ayarlanması
- Sayfanın genel boyutunun 875 piksel olduğu belirleniyor.
- Genel div'in genişliği 875 piksel olarak ayarlanıp "margin auto" ile ortalanıyor.
- Body elemanına da "margin auto" uygulanarak aradaki boşluklar siliniyor.
- 06:42Özel Font Kullanımı
- Tasarımın Myrit Pro regular font kullanıldığı belirleniyor.
- Cufon uygulanması için font dosyası masaüstüne kaydediliyor.
- Google'da Cufon araması yapılıp font seçimi yapılıyor ve Türkçe karakterler için ayarlar yapılıyor.
- 09:12Menü Yapısının Oluşturulması
- Menü için "ul" ve "li" tag'ları kullanılarak yapı oluşturuluyor.
- Ul ve li tag'larının margin ve padding değerleri sıfırlanıyor.
- List stil type none ile listedeki nokta işaretleri kaldırılıyor.
- 11:32Menü Stilinin Tamamlanması
- Menü "float right" özelliğiyle sağa dayatılıyor.
- Menüdeki li tag'ları kendi içinde sola dayatılarak yan yana getiriliyor.
- A tag'larına "text-decoration none" uygulanarak alt çizgiler siliniyor.
- 13:24Aktif Menü ve Hover Efekti
- Aktif menü için "class aktif" uygulanıyor ve renk ayarı yapılıyor.
- Hover efekti için "hover true" özelliği kullanılıyor.
- Menüye "margin top 30 piksel" verilerek hizalama yapılıyor ve li'ler arasında mesafe ayarlanıyor.
- 16:05HTML ve CSS Kodlaması
- Arka plan kesilip "block bg" olarak kaydediliyor.
- Değişen kısım için "div id block" oluşturulup "h1" etiketiyle "blog" yazısı eklendi.
- Tüm elemanların margin, padding değerleri sıfırlandırıldı ve border-none özelliği uygulandı.
- 18:44Blog Bölümünün Düzenlenmesi
- Blog içindeki "h1" elemanına font-size 26 piksel ve Cufon uygulandı.
- Yazı rengi "color f" olarak belirlendi ve gölge özelliği eklendi.
- "padding" özelliği kullanılarak görünüm ayarlandı.
- 21:20Now Bölümünün Oluşturulması
- "nowbg" olarak kaydedilen bölüm için "div id now" oluşturuldu.
- Arka planı kestiğimiz resim olarak belirlendi ve "repeat-x" özelliği uygulandı.
- Yazı boyutu 8 piksel olarak ayarlandı ve "display block" ile alt satıra indirildi.
- 24:20Ok Simgesinin Ekleme
- "a" etiketine "background url ok.png" ve "no-repeat" özelliği uygulandı.
- "padding" özelliği kullanılarak simgenin konumu ayarlandı.
- Internet Explorer tarayıcısında da düzgün görünüm sağlandı.
- 25:24İçerik Bölümünün Oluşturulması
- "div id içerik" oluşturulup arka plan rengi belirlendi.
- "padding" özelliği kullanılarak içeriğin kenar boşlukları ayarlandı.
- Sağ ve sol div'ler oluşturuldu, sağ div "float right" ile sağa dayandı.
- 27:48Sağ Bölümün Düzenlenmesi
- Sağ üst ve sağ alt kısımlar ayrı kaydedildi.
- "div class sağ" oluşturulup "float right" ve genişlik değerleri belirlendi.
- "background url" kullanılarak arka plan görüntüsü eklendi.
- 31:32Temizlik ve Düzenleme
- "float" kullanıldığında "clear bot" kullanmanın gerekli olduğu belirtildi.
- "about me" kısmı için "h2 class sağ sağ baş" oluşturuldu.
- Özel font (Myrid) kullanılması gerektiği belirtildi.
- 33:41CSS Düzenlemeleri
- "About me" yazısı için 13px boyutu ve belirli bir renk uygulanıyor.
- "About me" bloğu için padding uygulanarak dolgu oluşturuluyor.
- Resim arka planı (resim bg) için class oluşturuluyor ve boyut ayarlanıyor.
- 38:31İçerik Düzenlemeleri
- "About içerik" için font stilini oblique (eğik) yaparak ve font size 11 olarak belirleyerek düzenleme yapılıyor.
- Satır yüksekliği (line height) 170% olarak ayarlanıyor.
- Resim bg'e margin verilerek daha düzgün görünüm elde ediliyor.
- 40:09Çizgi ve Kategori Bölümü
- Çizgi için arka plan ve yükseklik (9 piksel) ayarlanıyor.
- Kategori bölümünde "design", "typography", "logo" gibi kategoriler oluşturuluyor.
- Kategoriler için display block, padding 5 piksel, font size 11 piksel ve renk ayarları yapılıyor.
- 44:15Arşiv ve Flicker Bölümü
- Arşiv bölümünde 2011, 2010, 2009 gibi yıllar listeleniyor.
- Flicker bölümünde 6 adet resim yan yana yerleştiriliyor.
- Flicker resimlerine float left uygulanarak yan yana getiriliyor ve padding, margin değerleri ayarlanıyor.
- 49:22Etiket ve Konu Bölümü
- Etiket (tags) bölümünde farklı font size'lar (14px, 12px, 17px) kullanılarak etiketler oluşturuluyor.
- Etiketler arasında boşluk bırakılarak düzenli görünüm sağlanıyor.
- Konu (topic) bölümünde özel font kullanılarak cufon uygulanıyor.
- 53:55CSS Kullanarak Konu Düzenleme
- Konu başlığı için "kb" adında bir class oluşturuluyor ve span etiketi kullanılarak düzenleniyor.
- Konu içeriği için "kb-iki" adında bir class oluşturuluyor ve font size, renk gibi özellikleri ayarlanıyor.
- Konu başlığının font size 20px olarak ayarlanıyor ve renk değiştiriliyor.
- 59:55Konu Resmi ve İçeriği
- Konu resmi için "resim-bg-üç" adında bir class oluşturuluyor ve arka plan, genişlik, yükseklik gibi özellikleri ayarlanıyor.
- Konu içeriği için "p konu-içerik" adında bir class oluşturuluyor ve font ariel, renk, line-height gibi özellikleri belirleniyor.
- Sol kısmın genişliği 490 piksel olarak belirleniyor ve text-align center kullanılarak ortalanıyor.
- 1:03:32Readmore ve Çizgi Ekleme
- "Readmore" adında bir class oluşturuluyor ve display block, margin, background, font size gibi özellikleri ayarlanıyor.
- Hover durumunda renk değişimi için CSS kodu yazılıyor.
- Konular arasında çizgi eklemek için "çizgi-iki" adında bir class oluşturuluyor ve margin bottom özelliği belirleniyor.
- 1:07:03Sayfalama ve Footer Oluşturma
- Sayfalama için "sayfala" adında bir class oluşturuluyor ve a etiketleri ile sayfa numaraları ekleniyor.
- Aktif sayfa için span etiketi kullanılarak font weight bold özelliği uygulanıyor.
- Footer için "footer" adında bir div oluşturuluyor ve içine ul etiketi ile "las news" başlığı ekleniyor.
- 1:13:12Footer İçeriği Düzenleme
- Footer bloğu için "footer-blok" adında bir class oluşturuluyor ve display block, font size, renk gibi özellikleri ayarlanıyor.
- "Las news" için a etiketleri kullanılarak linkler ekleniyor ve display block özelliği uygulanıyor.
- Footer bloğu için float left ve margin right özellikleri kullanılarak yan yana yerleştiriliyor.
- 1:18:15İletişim Bilgileri Ekleme
- İletişim bilgileri için "footer-blok-iki" adında bir class oluşturuluyor.
- Fon, e-posta ve messenger için a etiketleri kullanılarak linkler ekleniyor.
- İkonlar için "ikon-iki" ve "ikon-üç" adında classlar oluşturuluyor ve arka plan özellikleri ayarlanıyor.
- 1:24:24jQuery Uygulaması
- jQuery uygulaması yapılacak ve normalde a:hover durumunda renk değişimi yapılacaktır.
- jQuery çağrılıp sayfa hazırlandığında gerekli kodlar yazılacaktır.
- Hover durumunda fonksiyon oluşturulup animate metodu kullanılarak animasyon eklenecektir.
- 1:27:36Tasarım Sonuçları
- İşlem tamamlandıktan sonra altta bir saniye görüntülenmesi sağlanacaktır.
- Altta bulunan arka plan görüntüsü jpg formatında kaydedilip "body alt" olarak isimlendirilecektir.
- İd'li bir class ve genel bir class oluşturulup, bu class'lara üst ve alt arka plan tanımlanacaktır.
- 1:30:05Tasarım Tamamlanması
- Yapılan değişiklikler doğru yerlerine yerleştirildikten sonra stil dosyasına eklenecektir.
- 40 piksel değerle düzenlemeler yapıldıktan sonra blog tasarımı tamamlanmıştır.
- Blog tasarımı baştan sona kodlanmış ve hatalar doğrulanmıştır.