Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim dersi formatında olup, bir eğitmen tarafından PSD dosyasını CSS-HTML dönüştürme serisinin bir parçası olarak sunulmaktadır.
- Videoda, önceki derste 768 piksel genişliğinde responsive tasarım yapılmış bir sayfanın, bu derste 640 piksel ve 480 piksel genişliklerinde nasıl düzenleneceği gösterilmektedir. Eğitmen, media query kullanarak farklı ekran genişliklerinde sütunların düzenini, başlık boyutlarını ve boşlukları nasıl ayarlayacağını adım adım anlatmaktadır. Video, bir sonraki derste navigation menüsü üzerine konuşulacağı bilgisiyle sonlanmaktadır.
- Responsive Tasarım Giriş
- Önceki derste sayfa genişliği 768 piksel olarak ayarlanarak responsive tasarım yapılmıştı.
- 768 piksel genişliğinde sayfa düzgün çalışıyor ancak 640 piksel genişliğinde görseller karışık hale geliyor ve imaj dosyaları dar görünüyor.
- Bu derste 640 piksellik genişlik için responsive tasarım yapılacak.
- 01:10640 piksel Genişliğinde Tasarım
- 640 piksel genişliğinde her bir sütunun sayfanın tamamını kaplaması için "col-4" class'ı kullanılıyor.
- Sütunlar birbirinin altına gelecek şekilde düzenleniyor ve float özelliği "float-none" olarak değiştiriliyor.
- Sütunlar arasında 40 piksellik margin bottom eklenerek boşluklar oluşturuluyor.
- 04:10Başlık ve Form Düzenlemeleri
- H1 başlığı 56 pikselden 48 piksele düşürülerek daha iyi görünüm sağlanıyor.
- 480 piksel genişliğinde form kısmı düzgün çalışıyor ancak başlık daha da küçültülebilir.
- 480 piksel genişliğinde h1 başlığı 48 pikselden 36 piksele düşürülerek daha iyi görünüm sağlanıyor.
- 06:26Sonuç ve Gelecek Ders
- Yükseklik açıldığında tasarım düzenli bir şekilde ilerliyor ve ufak bozulmalar görmezden gelinebilir.
- 480 piksellik durumda bile tasarım responsive olarak başarılı görünüyor.
- Bir sonraki derste navigation menüsü üzerine konuşulacak.