Buradasın
Web Sitesi Hazırlama Eğitimi: Konteyner ve Header Şekillendirme
youtube.com/watch?v=1n2SaDGvVxYYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web sitesi hazırlama projesinin ikinci bölümüdür. Eğitmen, izleyicilere adım adım web sitesi oluşturma sürecini göstermektedir.
- Videoda öncelikle konteynerin şekillendirilmesi anlatılmakta, ardından header'ın oluşturulması detaylı olarak gösterilmektedir. Eğitmen, konteynerin genişliğini %80 olarak ayarlama, marjinat ile ortalamak, otomatik yükseklik ayarlamak, header'a resim ekleme, div etiketi kullanma, CSS ile genişlik, yükseklik, kenar yuvarlama, gölge ekleme, yazı pozisyonlandırma ve Google Fonts kullanarak yazı tipi değiştirme işlemleri göstermektedir.
- Videoda ayrıca headerın opaklığının 0,80'e düşürülmesi, içeriklerin arasında boşluk bırakılması için margin bottom özelliğinin kullanılması ve headerın alt kısmına 5 piksellik dış boşluk ekleyerek içeriklerin daha düzenli görünmesi için gerekli ayarlar da anlatılmaktadır.
- 00:03Web Sitesi Hazırlama Projesi - Konteyner Şekillendirme
- Web sitesi hazırlama projesinin ikinci videosunda konteyner şekillendirilecek ve header'ın gerekli değerleri verilecek.
- Konteynerin genişliği sayfanın yüzde seksenini kaplayacak, sayfa içerisinde ortalayacak ve yüksekliği otomatik olarak ayarlanacak.
- Konteynerin içeriği sayfa aşağı kaydırıldığında da birlikte hareket edecek.
- 02:24Header İçeriği Ekleme
- Header'a bir resim ve yazı eklenecek, resimler "img" klasöründe hazır edilmiş.
- Header'a "header resim" id'si verilmiş ve "paylaştıkça" yazısı "center" id'si olan bir div içerisine yerleştirilmiş.
- Sayfa ikiye bölünerek aynı ekranda CSS ve HTML kodları arasında geçiş yapılmadan çalışılacak.
- 04:41Header Stil Ayarları
- Header'ın genişliği konteynerin tamamını kaplayacak şekilde yüzde yüz, yüksekliği ise 250 piksel olarak ayarlanmış.
- Header resminin genişliği yüzde yüz, yüksekliği 250 piksel olarak belirlenmiş ve kenarları oval hale getirilmiş.
- Header'a gölge vermek için box-shadow özelliği kullanılmış, gölge rengi RGB-A formatında belirlenmiş.
- 08:35Yazı Konumlandırma ve Font Ayarları
- Header'daki yazı (paylaştıkça) absolute pozisyonla, header'a göre top ve left değerleri yüzde elli olarak ayarlanarak ortalanmış.
- Yazı rengi beyaz, font ailesi Google Fonts'tan "Teko" olarak değiştirilmiş ve font büyüklüğü 35 piksel olarak belirlenmiş.
- Header'ın arka planı siyah olarak ayarlanmış, resmin opaklığı 0,80 olarak düşürülmüş ki yazı daha net görünsün.
- 12:37Header Düzenlemesi
- Opaklık değeri sıfır virgül seksen'e düşürülmüştür.
- İçerikler menü kısmında peş peşe geliyor, aralarında belirli bir boşluk olması isteniyor.
- Header içine "margin bottom" özelliği eklenerek alt kısımdan beş piksellik dış boşluk oluşturulmuştur.
- Bu düzenleme sayesinde içerikler aşağıya doğru atılmış ve header kısmı hazır hale getirilmiştir.