Yang Perlu Diketahui
- Masuk ke Insert > Form > Form. Klik garis merah putus-putus pada formulir dan pergi ke Insert > Form > List/Menu. Pilih opsi aksesibilitas.
- Klik menu dan pilih propertinya, lalu pilih Daftar nilai untuk menambahkan item menu baru. Klik tanda plus untuk menambahkan lebih banyak item.
- Tambahkan nilai item dan pilih item default. Untuk menambahkan tindakan, buka Insert > Form > Jump Menu. Tambahkan item ke menu Langsung dan simpan.
Dreamweaver memudahkan pembuatan menu tarik-turun untuk situs web Anda. Tapi seperti semua bentuk HTML, mereka bisa sedikit rumit. Tutorial ini akan memandu Anda melalui langkah-langkah untuk membuat menu drop-down di Dreamweaver.
Menu Lompat Dreamweaver
Dreamweaver 8 juga menyediakan wizard untuk membuat menu lompat untuk navigasi di situs Web Anda. Tidak seperti menu drop-down dasar, menu ini akan melakukan sesuatu ketika Anda selesai. Anda tidak perlu menulis JavaScript atau CGI apa pun agar formulir tarik-turun berfungsi. Tutorial ini juga menjelaskan cara menggunakan wizard Dreamweaver 8 untuk membuat menu lompat.
Pertama, Buat Formulir
Kecuali untuk penyihir khusus seperti menu lompat, Dreamweaver tidak membantu Anda membuat formulir HTML "berfungsi". Untuk ini, Anda memerlukan CGI atau JavaScript.
Saat Anda menambahkan menu drop-down ke situs Web Anda, hal pertama yang Anda butuhkan adalah formulir untuk mengelilinginya. Di Dreamweaver, buka menu Insert dan klik Form, lalu pilih "Form."
Formulir Ditampilkan dalam Tampilan Desain
Dreamweaver menunjukkan lokasi formulir Anda secara visual dalam tampilan desain, sehingga Anda tahu di mana harus meletakkan elemen formulir Anda karena tag menu tarik-turun tidak valid (dan tidak akan berfungsi) di luar elemen formulir. Seperti yang Anda lihat pada gambar, bentuknya adalah garis putus-putus merah pada tampilan desain.
Pilih Daftar/Menu
Menu drop-down disebut item "daftar" atau "menu" di Dreamweaver. Jadi untuk menambahkan satu ke formulir Anda, Anda harus masuk ke menu Formulir pada menu Sisipkan dan pilih "Daftar/Menu." Pastikan kursor Anda berada di dalam garis putus-putus merah pada kotak formulir Anda.
Jendela Opsi Khusus
Dalam Opsi Dreamweaver, ada layar di Aksesibilitas. Menu drop-down Anda akan segera lebih mudah diakses daripada situs web lain jika Anda mengisi lima opsi ini.
Aksesibilitas Formulir
Opsi aksesibilitas adalah:
Label
Bidang label muncul sebagai teks di samping elemen formulir Anda. Ketikkan nama untuk menu tarik-turun Anda. Ini bisa berupa pertanyaan atau frasa singkat yang akan dijawab oleh menu drop-down.
Gaya
HTML menyertakan tag label untuk mengidentifikasi label formulir Anda ke browser web. Pilihan Anda adalah membungkus menu tarik-turun dan teks label dengan tag, menggunakan atribut "untuk" pada tag label untuk mengidentifikasi tag bentuk mana yang dirujuk, atau tidak menggunakan tag label sama sekali.
Posisi
Anda dapat menempatkan label Anda sebelum atau sesudah menu tarik-turun.
Kunci Akses
Pengunjung dapat menggunakan kunci akses dengan tombol "Gambar" atau Opsi untuk langsung masuk ke bidang formulir tersebut. Pintasan keyboard ini membuat formulir Anda sangat mudah digunakan tanpa mouse. alt="
Indeks Tab
Indeks tab adalah cara pengguna mengakses bidang formulir saat menggunakan keyboard ke tab melalui halaman web.
Saat Anda memperbarui opsi aksesibilitas, klik OK.
Pilih Menu
Setelah menu drop-down Anda ditampilkan dalam tampilan desain Dreamweaver, Anda perlu menambahkan berbagai elemen. Pertama, pilih menu tarik-turun dengan mengkliknya. Dreamweaver akan menempatkan garis putus-putus lain di sekitar menu drop-down untuk menunjukkan bahwa Anda telah memilihnya.
Properti Menu
Menu properti akan berubah menjadi daftar/properti menu untuk menu tarik-turun tersebut. Di sana Anda dapat memberikan ID menu Anda (di mana dikatakan "pilih"), memutuskan apakah Anda ingin itu menjadi daftar atau menu, berikan kelas gaya dari lembar gaya Anda, dan berikan nilai ke drop-down.
Apa Perbedaan Antara Daftar dan Menu?
Dreamweaver memanggil menu drop-down menu drop-down yang hanya memungkinkan satu pilihan. Sebuah "daftar" memungkinkan beberapa pilihan dalam drop-down dan bisa lebih dari satu item tinggi.
Jika Anda ingin menu tarik-turun setinggi beberapa baris, ubah ke jenis "daftar" dan biarkan kotak "pilihan" tidak dicentang.
Tambah Item Daftar Baru
Untuk menambahkan item baru ke menu Anda, klik tombol "Daftar nilai…", yang membuka jendela di atas. Kemudian, ketik label item Anda di kotak pertama. Ini akan ditampilkan di halaman.
Tambahkan Lebih Banyak dan Susun Ulang
Klik ikon plus untuk menambahkan lebih banyak item. Jika Anda ingin memesannya kembali di kotak daftar, gunakan panah atas dan bawah di sebelah kanan.
Berikan Nilai Semua Item
Jika Anda membiarkan nilainya kosong, label akan masuk ke formulir. Tetapi Anda dapat memberikan semua nilai item Anda - untuk mengirim informasi alternatif ke formulir Anda. Anda akan sering menggunakan ini untuk hal-hal seperti menu lompat dan hyperlink.
Pilih Default
Halaman web default untuk menampilkan item drop-down mana saja yang terdaftar terlebih dahulu sebagai item default. Tetapi jika Anda ingin yang lain dipilih, sorot di kotak "Initially selected" pada menu Properties.
Lihat Daftar Anda di Tampilan Desain
Setelah Anda selesai mengedit properti, Dreamweaver akan menampilkan daftar drop-down Anda dengan nilai default yang dipilih.
Lihat Daftar Anda di Tampilan Kode
Jika Anda beralih ke tampilan kode, Anda dapat melihat bahwa Dreamweaver menambahkan menu drop-down Anda dengan kode bersih. Satu-satunya atribut tambahan adalah opsi aksesibilitas. Kode semua menjorok dan sangat mudah dibaca dan dipahami.
Simpan dan Lihat di Browser
Jika Anda menyimpan dokumen dan melihatnya di browser web, Anda dapat melihat bahwa menu drop-down Anda terlihat seperti yang Anda harapkan.
Tapi Tidak Melakukan Apa-apa…
Menu yang kita buat di atas terlihat baik-baik saja, tetapi tidak melakukan apa-apa. Untuk membuatnya melakukan sesuatu, Anda perlu menyiapkan tindakan formulir pada formulir itu sendiri.
Untungnya, Dreamweaver memiliki formulir menu tarik-turun bawaan yang dapat Anda gunakan segera di situs Anda tanpa perlu mempelajari tentang formulir, CGI, atau skrip. Ini disebut Menu Langsung.
The Dreamweaver Jump Menu menyiapkan menu drop-down dengan nama dan URL. Kemudian Anda dapat memilih item dalam menu, dan halaman Web akan berpindah ke lokasi tersebut, sama seperti jika Anda mengklik link.
Pergi ke menu Sisipkan dan pilih Formulir lalu Menu Langsung.
Jendela Menu Lompat
Tidak seperti menu drop-down standar, menu Langsung membuka jendela baru bagi Anda untuk memberi nama item menu Anda dan menambahkan detail tentang cara kerja formulir.
Untuk item pertama, ubah teks "un titled1" menjadi apa yang Anda inginkan untuk dibaca dan tambahkan URL.
Tambahkan Item ke Menu Langsung Anda
Klik pada item tambah untuk menambahkan item baru ke menu lompat Anda. Tambahkan item sebanyak yang Anda inginkan.
Opsi Menu Lompat
Setelah Anda menambahkan semua tautan yang Anda inginkan, Anda harus memilih opsi Anda:
Buka URL Di
Jika Anda memiliki bingkai, Anda dapat membuka tautan di bingkai yang berbeda. Atau Anda dapat mengubah opsi Main Window ke target khusus agar URL terbuka di jendela baru atau di tempat lain.
Nama Menu
Berikan menu Anda ID unik untuk halaman tersebut. Ini diperlukan agar skrip berfungsi dengan benar. Ini juga memungkinkan Anda untuk memiliki beberapa menu lompat dalam satu bentuk - beri mereka semua nama yang berbeda.
Sisipkan Tombol Go Setelah Menu
Saya suka memilih ini karena terkadang skrip tidak berfungsi saat menu berubah. Ini juga lebih mudah diakses.
Pilih Item Pertama Setelah Perubahan URL
Pilih ini jika Anda memiliki prompt seperti "Pilih salah satu" sebagai item menu pertama. Ini akan memastikan bahwa item tersebut tetap default pada halaman.
Tampilan Desain Menu Lompat
Sama seperti menu pertama Anda, Dreamweaver menyiapkan menu lompat Anda dalam tampilan desain dengan item default terlihat. Anda kemudian dapat mengedit menu tarik-turun seperti yang Anda lakukan lainnya.
Jika Anda mengeditnya, pastikan untuk tidak mengubah ID apa pun pada item; jika tidak, skrip mungkin tidak berfungsi.
Langsung Menu di Browser
Menyimpan file dan menekan F12 akan menampilkan halaman di browser pilihan Anda. Di sana Anda dapat memilih opsi, klik "Pergi", dan menu lompat berfungsi.
