WikiHow ini mengajar anda bagaimana menggunakan Adobe Dreamweaver untuk membuat kotak drop-down untuk laman web. Kotak drop-down adalah menu yang "drop down" apabila item di halaman web anda diklik, memberikan lebih banyak pilihan dalam prosesnya.
Langkah-langkah
Langkah 1. Buka projek Dreamweaver
Klik dua kali fail projek untuk melakukannya. Sekiranya anda ingin membuat projek Dreamweaver baru, anda akan membuka Dreamweaver, klik Fail, klik Baru, dan ikuti sebarang arahan di skrin.
Langkah 2. Buat senarai yang dipesan
Untuk membuat menu lungsur, anda mesti mempunyai sekurang-kurangnya satu item titik peluru. Anda boleh membuat titik peluru dengan mematikan CSS (klik Pandangan item menu, pilih Rendering Gaya, dan klik Gaya Paparan jika dicentang), mengklik lokasi di mana anda ingin menambahkan titik, mengklik ikon titik peluru di bahagian bawah tetingkap, dan mengetik nama titik. Anda kemudian harus menghidupkan kembali CSS sebelum meneruskan.
- Nama titik di sini akan berfungsi sebagai pengaktif menu lungsur anda (mis., Butang yang diarahkan atau diketuk untuk membuka menu lungsur).
- Lewati langkah ini jika anda sudah mempunyai item senarai yang ingin anda ubah menjadi menu lungsur.
Langkah 3. Tentukan nama senarai anda
Klik Kod tab dan pastikan anda berada di Kod sumber tetapan, kemudian tatal ke bawah ke kod senarai pesanan anda (ia akan berada di antara"
"teg dan a"
"tag) dan cari tanda" "di atas"
tag. Kata dalam petikan adalah nama senarai anda.
-
Sekiranya anda tidak melihat nama, masukkan tag (di mana nama merujuk kepada nama senarai pilihan anda) tepat di atas
teg.
Langkah 4. Keluarkan titik peluru
Pastikan anda berada di tempat yang betul dengan mengklik Reka bentuk dan kemudian mengklik Pereka CSS tab di sudut kanan atas tetingkap, kemudian lakukan perkara berikut:
- Klik + di sebelah kanan tajuk "Pemilih".
- Taipkan #name ul di mana "name" adalah nama senarai anda.
- Tekan ↵ Enter dua kali.
- Tatal ke bawah dan klik senarai-gaya-jenis di panel di bahagian bawah Pereka CSS tab.
- Klik tiada dalam menu pop timbul yang dihasilkan.
Langkah 5. Tukar senarai pesanan anda untuk dipaparkan secara mendatar
Untuk melakukannya:
- Klik + di sebelah kanan tajuk "Pemilih".
- Taipkan #name li di mana "name" adalah nama senarai anda.
- Cari tajuk "apungan" di panel di bahagian bawah Pereka CSS tab.
- Klik Meninggalkan butang segera di sebelah kanan tajuk "apungan".
Langkah 6. Tambahkan tag aktif untuk senarai anda
Klik + butang di sebelah kanan "Pemilih", kemudian ketik #nama a (di mana "nama" adalah nama senarai anda) dan tekan ↵ Enter dua kali.
Langkah 7. Tambahkan warna latar belakang
Pilih #nama a jika perlu, kemudian klik tab "Warna latar" berbentuk kotak di bahagian atas Pereka CSS panel, pilih warna latar belakang pilihan, dan pilih warna latar untuk digunakan.
Ini adalah warna yang akan digunakan oleh item senarai drop-down anda
Langkah 8. Jadikan item senarai anda menggunakan format "blok"
Format ini memastikan bahawa ketika seseorang pergi untuk mengklik atau mengetuk item dalam senarai, mereka dapat membukanya dengan memilih sedikit di atas atau di bawahnya daripada harus memilih teks dengan tepat:
- Pastikan anda #nama a item dipilih di Pereka CSS tab.
- Tatal ke bawah ke tajuk "paparan" di panel.
- Klik bahagian paling kanan tajuk "paparan", kemudian klik sekatan dalam menu yang dihasilkan.
Langkah 9. Tambahkan padding jika perlu
Sekiranya anda melihat bahawa item senarai anda tersekat satu sama lain, anda boleh meletakkan beberapa ruang di antara mereka dengan melakukan perkara berikut:
- Pastikan anda #nama a item dipilih di Pereka CSS tab.
- Tatal ke bawah ke arah "padding" di panel.
- Tukar medan teks "px" atas dan bawah untuk membaca sekurang-kurangnya 5.
- Tukar medan teks "px" kiri dan kanan untuk membaca sekurang-kurangnya 10.
Langkah 10. Buat warna hover
Ini adalah warna yang akan muncul ketika anda mengarahkan kursor tetikus ke atas item dalam menu lungsur:
- Klik + di sebelah kanan tajuk "Pemilih".
- Ketik #nave a: hover (di mana "name" adalah nama senarai anda) dan tekan ↵ Enter dua kali.
- Klik tab "Warna latar belakang".
- Pilih warna latar belakang dan kemudian pilih warna yang lebih terang daripada yang anda gunakan untuk warna latar belakang.
Langkah 11. Matikan CSS
Klik Pandangan item menu, pilih Rendering Gaya, dan klik Gaya Paparan pilihan di tetingkap pop timbul.
Sekiranya Gaya Paparan pilihan berwarna kelabu, klik di mana sahaja dalam dokumen Dreamweaver anda dan cuba lagi.
Langkah 12. Buat kandungan menu lungsur
Anda boleh melakukannya dengan menambahkan sub-titik di bawah titik peluru yang ingin anda gunakan sebagai butang menu lungsur:
- Klik di sebelah kanan item senarai yang ingin anda ubah menjadi menu lungsur, kemudian tekan ↵ Enter.
- Tekan Tab ↹.
- Taipkan nama item menu lungsur pertama anda, kemudian tekan ↵ Enter.
- Ketik nama menu drop-down seterusnya, kemudian tekan ↵ Enter dan ulangi mengikut keperluan.
Langkah 13. Ikat kandungan menu lungsur ke item peluru
Untuk melakukannya:
- Klik + di sebelah "Pemilih", kemudian taipkan #nama ul ul dan tekan ↵ Enter dua kali.
- Tatal ke bawah dan klik paparan, kemudian klik tiada dalam menu pop timbul.
- Cari dan klik kedudukan, kemudian klik mutlak dalam menu pop timbul.
Langkah 14. Buat menu lungsur itu sendiri
Anda perlu menambahkan lagi pemilih untuk melakukan ini:
- Klik + di sebelah "Selectors", kemudian taipkan #name ul li: hover> ul dan tekan ↵ Enter dua kali.
- Cari dan klik paparan, kemudian klik sekatan dalam menu pop timbul yang dihasilkan.
Langkah 15. Jadikan kandungan menu lungsur dipaparkan secara menegak
Secara lalai, kandungan menu drop-down akan dipaparkan di bar mendatar, tetapi anda boleh memaksanya ke lajur menegak dengan melakukan perkara berikut:
- Klik + di sebelah "Pemilih", kemudian taip #nama ul ul li dan tekan ↵ Enter dua kali.
- Cari tajuk "apungan".
- Klik "tidak ada" () pilihan di sebelah kanan tajuk "apungan".
Langkah 16. Simpan projek anda
Tekan Ctrl + S (Windows) atau ⌘ Command + S (Mac) untuk melakukannya.
