Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan CSS dersinin son bölümünü içeren eğitim içeriğidir. Eğitmen, izleyicilere adım adım footer oluşturma sürecini göstermektedir.
- Videoda, HTML ve CSS kullanarak footer'ın nasıl oluşturulacağı detaylı olarak anlatılmaktadır. Eğitmen önce footer'ın genel boyutlarını belirleyip, ardından widget'lar, sosyal medya ikonları ve copyright bölümü gibi footer'ın farklı bölümlerini CSS ile biçimlendirmektedir. Ayrıca base color kullanımı, fontasm kullanımı ve PSD dosyasından CSS'e aktarma gibi konular da ele alınmaktadır.
- Video, CSS 3 kullanarak web sayfası tasarımı yapmak isteyenler için float, padding, font size, color gibi CSS özellikleri kullanılarak tasarımın düzenlenmesi konusunda faydalı bilgiler içermektedir.
- 00:01Footer Tasarımına Başlangıç
- PS3 CSS dersinin son bölümünde footer tasarımı yapılacak.
- Footer'ın genel yüksekliği 366 piksel olarak belirleniyor.
- Footer'ın en alt kısmı copyright olarak kullanılacak.
- 01:25Footer İçeriği Oluşturma
- Footer'a widget, text, twitter ve flicker başlıkları ekleniyor.
- Flicker için 6 adet 76x56 piksel boyutunda resim kullanılacak.
- HTML kısmında widget, text, twitter ve flicker başlıkları oluşturuluyor.
- 03:58Widget ve Text Stil Ayarları
- Widget class'ı için h6 piksel başlık, 14 piksel font size ve italik yazı stili ayarlanıyor.
- Her widget'ın padding top'u 30 piksel, padding bottom'u 10 piksel olarak belirleniyor.
- Widget'ların genişliği 260 piksel olarak ayarlanıyor.
- 07:07Twitter ve Flicker Stil Ayarları
- Twitter kısmındaki ul ve li elemanları için italik yazı stili ve 12 piksel font size ayarlanıyor.
- Flicker için 76x56 piksel boyutunda resimler kullanılıyor ve float left ile yan yana getiriliyor.
- Flicker'ın margin right ve margin bottom değerleri 8 piksel olarak belirleniyor.
- 10:14Footer Alt Kısmı
- Footer alt kısmına center ve footer border top ekleniyor.
- Footer alt kısmına margin top 30 piksel veriliyor.
- Widget'ların margin top değeri 45 piksel olarak ayarlanıyor.
- 11:34Sosyal İkonlar ve Buton
- Facebook, Twitter, Google Plus, LinkedIn ve Flicker ikonları ekleniyor.
- News letter kutusu 250x36 piksel boyutunda oluşturuluyor.
- Buton 36x36 piksel boyutunda, text line center ve pointer hover efekti ile ayarlanıyor.
- 16:00Sosyal İkonlar ve Copyright
- Sosyal butonlar için float left ve display block ayarları yapılıyor.
- Sosyal butonların genişliği ve yüksekliği 36x36 piksel, font size 18 piksel olarak belirleniyor.
- Copyright bölümü 89 piksel yüksekliğinde oluşturuluyor ve "Copy 2013 Design by Code by Prototurk.com" yazısı ekleniyor.
- 22:13Footer Menüsü Oluşturma
- Sağdaki menü (footer menü veya copyright menü) oluşturuluyor ve linklendiriliyor.
- Menü sağ tarafa atılıyor, padding top 25 piksel ve font size 12 piksel olarak ayarlanıyor.
- Menüde 82 piksel uzunluğunda bir çizgi ekleniyor ve kurum bilgisi ekleniyor.
- 24:04Tasarım Düzenlemeleri
- Menüdeki yazıların renk efekti ekleniyor ve text decoration kaldırılıyor.
- Header'a background rengi olarak beyaz verilerek tasarımın eski tatlılığına geri dönülüyor.
- Base color tanımlanarak tüm renk sisteminde kolayca değişiklik yapılabiliyor.
- 25:27Video Kapanışı
- Tasarım sadece Chrome'da test ediliyor, diğer tarayıcılarda sıkıntılar çıkabilir.
- Video boyunca CSS3 kullanımı, Font Awesome kullanımı ve PSD dosyasından CSS'e aktarım pekiştirilmiş.
- Bu video yılın son günü yılbaşı hediyesi olarak sunulmuş.