Bu wikiHow makalesi sana, bir web sayfası için açılır kutu oluşturmak üzere Adobe Dreamweaver'ı nasıl kullanacağını öğretir. Açılır kutular, web sayfanızdaki bir öğeye tıklandığında "açılan" ve süreçte daha fazla seçenek sunan menülerdir.
adımlar
Adım 1. Bir Dreamweaver projesi açın
Bunu yapmak için projenin dosyasına çift tıklayın. Yeni bir Dreamweaver projesi oluşturmak istiyorsanız, bunun yerine Dreamweaver'ı açın, Dosya, Tıklayın Yenive ekrandaki komutları izleyin.
Adım 2. Sıralı bir liste oluşturun
Açılır menü oluşturmak için en az bir madde işaretli öğeniz olmalıdır. CSS'yi kapatarak bir madde işareti oluşturabilirsiniz (görüş menü öğesi, seçin Stil Oluşturmave tıklayın Görüntüleme Stilleri işaretliyse), noktayı eklemek istediğiniz konuma tıklayın, pencerenin altındaki madde işareti simgesine tıklayın ve noktanın adını yazın. Devam etmeden önce CSS'yi tekrar açmalısınız.
- Buradaki noktanın adı, açılır menünüzün etkinleştiricisi olarak işlev görür (örneğin, açılır menüyü açmak için üzerine gelinen veya dokunulan düğme).
- Açılır menüye dönüştürmek istediğiniz bir liste öğeniz varsa bu adımı atlayın.
Adım 3. Listenizin adını belirleyin
Tıkla kod sekmesinde olduğunuzdan emin olun ve Kaynak kodu ayarını seçin, ardından sıralı listenizin koduna ilerleyin (bir arasında olacaktır)
"etiket ve bir"
"etiketi) ve üstteki " " etiketini arayın
etiketi. Tırnak içindeki kelime listenizin adıdır.
-
Bir ad görmüyorsanız, etiketi (burada ad, listede tercih ettiğiniz adı ifade eder) doğrudan
etiket.
Adım 4. Madde işaretlerini kaldırın
tıklayarak doğru yerde olduğunuzdan emin olun. Tasarım sekmesini ve ardından CSS Tasarımcısı sekmesini pencerenin sağ üst köşesinde, ardından aşağıdakileri yapın:
- Tıklamak + "Seçiciler" başlığının sağında.
- #name ul yazın, burada "name" listenizin adıdır.
- ↵ Enter tuşuna iki kez basın.
- Aşağı kaydırın ve tıklayın liste-tarzı-tipi altındaki bölmede CSS Tasarımcısı sekme.
- Tıklamak Yok çıkan açılır menüde.
Adım 5. Sıralı listenizi yatay olarak görüntülenecek şekilde değiştirin
Böyle yaparak:
- Tıklamak + "Seçiciler" başlığının sağında.
- #name li yazın, burada "name" listenizin adıdır.
- Ekranın altındaki bölmede "kayan" başlığı bulun. CSS Tasarımcısı sekme.
- Tıkla Sol "float" başlığının hemen sağındaki düğmesine basın.
Adım 6. Listeniz için aktif bir etiket ekleyin
Tıkla + "Seçiciler"in sağındaki düğmesine basın, ardından #name a yazın ("ad" listenizin adıdır) ve iki kez ↵ Enter tuşuna basın.
Adım 7. Bir arka plan rengi ekleyin
seçin #bir isim öğesini seçin, ardından ekranın üst kısmındaki kutu şeklindeki "Arka plan rengi" sekmesini tıklayın. CSS Tasarımcısı bölmesi, seçin arka plan rengi seçeneğini belirleyin ve kullanmak için bir arka plan rengi seçin.
Bu, açılır listenizdeki öğelerin kullanacağı renktir
Adım 8. Liste öğelerinizin "blok" biçimini kullanmasını sağlayın
Bu biçim, birisi listedeki bir öğeye tıklamaya veya dokunmaya gittiğinde, metni tam olarak seçmek zorunda kalmadan biraz yukarısını veya altını seçerek açabilmelerini sağlar:
- Emin ol #bir isim öğesinde seçilir CSS Tasarımcısı sekme.
- Bölmedeki "ekran" başlığına ilerleyin.
- "Görüntüle" başlığının en sağ tarafını tıklayın, ardından engellemek sonuç menüsünde.
Adım 9. Gerekirse dolgu ekleyin
Liste öğelerinizin birbirine yapıştığını fark ederseniz, aşağıdakileri yaparak aralarında biraz boşluk bırakabilirsiniz:
- Emin ol #bir isim öğesinde seçilir CSS Tasarımcısı sekme.
- Bölmedeki "dolgu" başlığına ilerleyin.
- En az 5 okumak için üst ve alt "px" metin alanlarını değiştirin.
- En az 10 okumak için sol ve sağ "px" metin alanlarını değiştirin.
Adım 10. Bir vurgulu renk oluşturun
Bu, açılır menüdeki bir öğenin üzerine fare imlecinizi getirdiğinizde görünecek olan renktir:
- Tıklamak + "Seçiciler" başlığının sağında.
- #nave a:hover yazın ("ad" listenizin adıdır) ve iki kez ↵ Enter tuşuna basın.
- "Arka plan rengi" sekmesine tıklayın.
- Seçme arka plan rengi ve ardından arka plan rengi için kullandığınızdan daha açık bir renk seçin.
Adım 11. CSS'yi kapatın
Tıkla görüş menü öğesi, seçin Stil Oluşturmatıklayın ve Görüntüleme Stilleri açılır pencerede seçeneğini belirleyin.
Eğer Görüntüleme Stilleri seçeneği grileşirse Dreamweaver belgenizde herhangi bir yeri tıklayın ve yeniden deneyin.
Adım 12. Açılır menü içeriğini oluşturun
Bunu, açılır menünün düğmesi olarak kullanmak istediğiniz madde işaretinin altına alt noktalar ekleyerek yapabilirsiniz:
- Açılır menüye dönüştürmek istediğin liste öğesinin sağına tıkla, ardından ↵ Enter'a bas.
- Sekme ↹ tuşuna basın.
- İlk açılır menü öğesinin adını yaz, ardından ↵ Enter'a bas.
- Sonraki açılır menünün adını yazın, ardından ↵ Enter tuşuna basın ve gerektiği kadar tekrarlayın.
Adım 13. Açılır menü içeriğini bir madde işareti öğesine bağlayın
Böyle yaparak:
- Tıklamak + "Seçiciler"in yanına #name ul ul yazın ve ↵ Enter tuşuna iki kez basın.
- Aşağı kaydırın ve tıklayın Görüntüle, ardından tıklayın Yok açılır menüde.
- Bul ve tıkla konum, ardından tıklayın mutlak açılır menüde.
Adım 14. Açılır menünün kendisini oluşturun
Bunu yapmak için başka bir seçici eklemeniz gerekecek:
- Tıklamak + "Seçiciler"in yanına #name ul li:hover > ul yazın ve iki kez ↵ Enter tuşuna basın.
- Bul ve tıkla Görüntüle, ardından tıklayın engellemek çıkan açılır menüde.
Adım 15. Açılır menünün içeriğinin dikey olarak görüntülenmesini sağlayın
Varsayılan olarak, açılır menü içerikleri yatay bir çubukta görüntülenir, ancak aşağıdakileri yaparak bunları dikey bir sütuna zorlayabilirsiniz:
- Tıklamak + "Seçiciler"in yanına #name ul ul li yazın ve iki kez ↵ Enter tuşuna basın.
- "Yüzer" başlığını bulun.
- "Hiçbiri" ni tıklayın () seçeneği "float" başlığının sağındadır.
Adım 16. Projenizi kaydedin
Bunu yapmak için Ctrl+S (Windows) veya ⌘ Command+S (Mac) tuşlarına basın.
