Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir web geliştirme eğitim içeriğidir. Eğitmen, web sitelerinde menü tasarımı konusunda adım adım bir uygulama sunmaktadır.
- Video, web sitelerinde menü tasarımı sürecini detaylı olarak göstermektedir. Eğitmen önce bir div tasarlayarak menü kutusunu oluşturur, ardından linkleri yerleştirir ve CSS ile menüyü şekillendirir. Özellikle sprite tekniği kullanılarak resimlerin nasıl kaydırılacağı ve linklerin hover durumunda nasıl değişeceği gösterilir. Video boyunca menü tasarımı için gerekli CSS kuralları ve hesaplamalar adım adım anlatılmaktadır.
- 00:01Web Menüsü Tasarımı
- Web sitelerinde menüler yapılırken öncelikle menü için bir div tasarlanır ve bu div'in içerisine linkler koyulur.
- Örnek olarak bir imaj bulunup sprite tekniği uygulanacak, resmin boyutları 500x374 piksel olarak belirlenmiştir.
- Tasarıma reset CSS eklenerek yeni bir CSS kuralı tanımlanır ve kendi stil sayfası oluşturulur.
- 00:58Menü Kutusu Tasarımı
- Menü kutusu tasarlanırken, üç tane yan yana resim olacağı için toplam boyut hesaplanarak yaklaşık 820 piksel genişliğinde bir kutu oluşturulur.
- Kutunun yüksekliği 109 piksel olarak belirlenir ve içine "Anasayfa", "Hakkımızda" ve "Diğer Yazılar" linkleri yerleştirilir.
- Menü için sırasız liste oluşturulur ve her liste elemanına link verilir.
- 03:31Menü Stil Ayarları
- Menüdeki liste maddelerinin yan yana gelmesi için CSS kuralında display özelliği inline-block olarak ayarlanır.
- Kutuların boyutu 273x109 piksel olarak belirlenir ve margin-padding sıfırlanır.
- Menü kutusunun boyutu 273x109 piksel olarak ayarlanarak üç kutunun tam oturması sağlanır.
- 05:24Resim Sprite Tekniği
- Menüdeki linkler için yeni bir CSS kuralı oluşturulur ve linklerin boyutu 273x109 piksel olarak ayarlanır.
- Arka plan olarak resim sprite tekniği uygulanır ve resim x'ten -110 piksel, y'den -23 piksel kaydırılır.
- Hover durumunda arka plan resmi değişir ve y'den -241 piksel kaydırılır, böylece link üzerine gelince resim kayarak değişir.