Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, konuşmacı Dreamweaver programında web sayfası tasarımı konusunda bilgi vermektedir.
- Video, Fireworks'tan Dreamweaver'a aktarılan menü dosyalarının CS sprite tekniği ile nasıl kullanılacağını anlatmaktadır. İçerikte, menü dosyalarının Dreamweaver'a aktarılması, reset CSS dosyasının eklenmesi, CSS dosyalarının düzenlenmesi ve menü seçeneklerinin oluşturulması adım adım gösterilmektedir. CS sprite tekniğinin temel prensibi, küçük bir kutu arkasındaki büyük bir resmi sürekli hareket ettirerek farklı menü seçeneklerini oluşturmaktır.
- 00:01Dreamweaver'da Menü Tasarımı
- Önceki videoda Firefox'ta yapılan web sayfası tasarımı Dreamweaver'a aktarma işlemi gösterilmişti.
- Bu videoda CS Sprite tekniği ile dışarı aktarılan menü dosyalarının menü bölgesine aktarılması anlatılacak.
- Menüde anasayfa, hakkımızda, şirketimiz gibi linkler bulunuyor ve bunlar genellikle GS'te yapıldığı için live a tagları kullanılıyor.
- 01:09CSS Dosyalarının Hazırlanması
- Fireworks'ta dışarı aktarılan menü için men.png ve men.css dosyaları bulunuyor.
- Reset.css dosyası Google'da aratılarak Eric Mayer'in web sitesinden indirilip CSS klasörüne kaydediliyor.
- CS Styles panelinde Attach Style Sheet butonu ile reset.css dosyası çalışmaya ekleniyor ve sıralama koddan da değiştirilebiliyor.
- 02:31Menü Tasarımının Yapılması
- Fireworks, menü için gerekli CSS dosyasını da veriyor ve bu dosya CSS klasörüne taşınıyor.
- Menü butonları için box özelliği 210x38 piksel ve display blok olarak ayarlanıyor.
- Menü seçeneklerine class uygulanıyor ve CS Sprite'da arka planda bir resim var ve bu resim menü içerisine yüklenmiş.
- 04:48CS Sprite Tekniğinin Uygulanması
- CS Sprite'ın özelliği, küçük bir kutunun arkasına kocaman bir resim koymak ve mouse üzerine geldiğinde (hover) resmin pozisyonunu değiştirmek.
- Menü seçenekleri için ana sayfa, servisler, foto galeri, şirketimiz ve iletişim gibi class'lar kullanılıyor.
- Menü arasındaki boşluklar için box özelliğinde bottom 15 piksel verilerek araları açılıyor.
- 06:43Sonuç
- CS Sprite tekniği, küçük bir kutu arkasındaki bir resmi sürekli hareket ettirerek diğer resim içerisinde bulunan diğer bölümleri kutuların içine yerleştirmeyi sağlar.
- Menü seçenekleri başarıyla oluşturulmuş ve sayfa yenilendiğinde menü çalışıyor.