Dreamweaver mempermudah pembuatan menu drop-down untuk situs Web Anda. Tetapi seperti semua bentuk HTML mereka bisa sedikit rumit. Tutorial ini akan memandu Anda melalui langkah-langkah untuk membuat menu drop-down di Dreamweaver.
Dreamweaver Jump Menus
Dreamweaver 8 juga menyediakan wizard untuk membuat menu lompat untuk navigasi di situs Web Anda. Tidak seperti menu drop-down dasar, menu ini benar-benar akan melakukan sesuatu ketika Anda selesai. Anda tidak perlu menulis JavaScript atau CGI apa pun untuk mendapatkan formulir drop-down agar berfungsi. Tutorial ini juga menjelaskan cara menggunakan wizard Dreamweaver 8 untuk membuat menu lompatan.
01 dari 20
Pertama Buat Formulir
Catatan Penting Tentang Formulir HTML dan Dreamweaver:
Kecuali untuk penyihir khusus seperti menu lompatan, Dreamweaver tidak membantu Anda membuat formulir HTML "berfungsi". Untuk ini, Anda memerlukan CGI atau JavaScript. Silakan lihat tutorial saya Membuat Formulir HTML Bekerja untuk informasi lebih lanjut.
Saat Anda menambahkan menu drop-down ke situs Web Anda, hal pertama yang Anda butuhkan adalah formulir untuk mengelilinginya. Di Dreamweaver, buka menu Sisipkan dan klik Formulir, lalu pilih "Formulir".
02 dari 20
Menampilkan Formulir dalam Tampilan Desain
Dreamweaver menunjukkan lokasi tampilan Anda secara visual dalam tampilan desain, sehingga Anda tahu di mana harus meletakkan elemen formulir Anda. Ini penting, karena tag menu tarik-turun tidak valid (dan tidak berfungsi) di luar elemen formulir. Seperti yang Anda lihat pada gambar, bentuknya adalah garis titik-titik merah dalam tampilan desain.
03 dari 20
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 Form pada menu Sisipkan dan pilih "Daftar / Menu". Pastikan kursor Anda berada dalam garis titik-titik merah pada kotak formulir Anda.
04 dari 20
Jendela Opsi Khusus
Dalam Pilihan Dreamweaver ada layar di Aksesibilitas. Saya memilih Dreamweaver untuk menunjukkan kepada saya semua atribut aksesibilitas. Dan layar ini adalah hasil dari itu. Formulir adalah tempat di mana banyak situs Web jatuh dalam aksesibilitas dan dengan mengisi kelima opsi ini, menu drop-down Anda akan segera lebih mudah diakses.
05 dari 20
Akses Formulir
Opsi Aksesibilitas adalah:
Label
Ini adalah nama untuk lapangan. Ini akan muncul sebagai teks di samping elemen formulir Anda.
Tulis apa yang Anda inginkan untuk memanggil menu drop-down Anda. Ini bisa berupa pertanyaan atau frasa singkat yang akan dijawab oleh menu drop-down.
Gaya
HTML menyertakan label label untuk mengidentifikasi label formulir Anda ke browser. Pilihan Anda adalah untuk membungkus menu drop-down dan teks label dengan tag, untuk menggunakan atribut "untuk" pada label tag untuk mengidentifikasi tag formulir mana yang dirujuk, atau untuk tidak menggunakan label label sama sekali.
Saya lebih suka menggunakan untuk atribut, karena kemudian jika saya perlu memindahkan label untuk beberapa alasan itu akan tetap melekat pada bidang formulir yang benar.
Posisi
Anda dapat menempatkan label Anda sebelum atau sesudah menu drop-down.
Kunci akses
Ini adalah kunci yang dapat digunakan bersama dengan tombol Alt atau Option untuk langsung ke kolom formulir tersebut. Ini membuat formulir Anda sangat mudah digunakan tanpa perlu mouse. Cara Mengatur Kunci Akses dalam HTML
Indeks Tab
Ini adalah urutan di mana kolom formulir harus diakses saat menggunakan keyboard ke tab melalui halaman Web. Memahami Tabindex
Ketika Anda memperbarui opsi aksesibilitas Anda, klik OK.
06 dari 20
Pilih Menu
Setelah Anda memiliki menu drop-down yang ditampilkan dalam tampilan desain, Anda perlu menambahkan berbagai elemen ke dalamnya. Pertama pilih menu drop-down dengan mengkliknya. Dreamweaver akan menempatkan garis putus-putus lainnya di sekitar hanya menu drop-down, untuk menunjukkan bahwa Anda telah memilihnya.
07 dari 20
Properti Menu
Menu properti akan berubah menjadi properti daftar / menu untuk menu drop-down itu. Di sana Anda dapat memberikan menu Anda ID (di mana dikatakan "pilih"), memutuskan apakah Anda ingin menjadi lis atau menu, berikan kelas gaya dari style sheet Anda, dan berikan nilai ke drop-down.
Apa Perbedaan Antara Daftar dan Menu?
Dreamweaver memanggil menu drop-down setiap drop-down yang hanya memungkinkan satu pilihan. "Daftar" memungkinkan beberapa pilihan dalam drop-down dan bisa lebih dari satu item tinggi.
Jika Anda ingin menu drop-down menjadi beberapa baris tinggi, ubah ke jenis "daftar" dan biarkan kotak "pilihan" tidak dicentang.
08 dari 20
Tambahkan Item Daftar Baru
Untuk menambahkan item baru ke menu Anda, klik tombol "Daftar nilai ...". Ini akan membuka jendela di atas. Ketik label item Anda di kotak pertama. Inilah yang akan ditampilkan di halaman. Jika Anda membiarkan nilai kosong, itu juga yang akan dikirim dalam formulir.
09 dari 20
Tambahkan Lagi dan Susun Ulang
Klik pada ikon plus untuk menambahkan lebih banyak item. Jika Anda ingin mengatur ulang mereka di kotak daftar, gunakan panah atas dan bawah di sebelah kanan.
10 dari 20
Berikan Semua Nilai Item
Seperti yang saya sebutkan di langkah 8, jika Anda membiarkan nilai kosong, label akan dikirim ke formulir. Tetapi Anda dapat memberikan semua nilai barang Anda - untuk mengirim informasi alternatif ke formulir Anda. Anda akan menggunakan ini banyak untuk hal-hal seperti menu melompat.
11 dari 20
Pilih Default
Halaman web standar untuk menampilkan item drop-down mana yang didaftar pertama sebagai item default. Tetapi jika Anda ingin yang berbeda dipilih, sorot di kotak "Initially selected" pada menu Properties.
12 dari 20
Lihat Daftar Anda di Tampilan Desain
Setelah selesai mengedit properti, Dreamweaver akan menampilkan daftar drop-down Anda dengan nilai default yang dipilih.
13 dari 20
Lihat Daftar Anda dalam Tampilan Kode
Jika Anda beralih ke tampilan kode, Anda dapat melihat bahwa Dreamweaver menambahkan menu drop-down Anda dengan kode yang sangat bersih. Satu-satunya atribut tambahan adalah atribut yang kami tambahkan dengan opsi aksesibilitas. Kode ini semuanya menjorok dan sangat mudah dibaca dan dipahami. Ia bahkan memasukkan atribut yang dipilih = "dipilih" karena saya telah memberi tahu Dreamweaver bahwa saya secara default menulis XHTML.
14 dari 20
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.
15 dari 20
Tapi Itu Tidak Melakukan Apa pun
Menu yang kami buat di atas terlihat baik-baik saja, tetapi tidak melakukan apa-apa. Untuk membuatnya melakukan sesuatu, Anda perlu menyiapkan aksi formulir pada formulir itu sendiri, yang merupakan tutorial lain.
Untungnya, Dreamweaver memiliki bentuk menu buka-bawah yang dapat Anda gunakan langsung di situs Anda tanpa perlu mempelajari formulir, CGI, atau scripting. Ini disebut Menu Langsung.
The Dreamweaver Jump Menu menyiapkan menu drop-down dengan nama dan URL. Kemudian Anda dapat memilih item di menu dan halaman Web akan pindah ke lokasi itu, sama seperti jika Anda telah mengeklik tautan.
Buka menu Sisipkan dan pilih Formulir lalu Lompat Menu.
16 dari 20
Jendela Menu Langsung
Tidak seperti menu drop-down standar, menu Jump membuka jendela baru bagi Anda untuk menamai item menu Anda dan menambahkan rincian tentang bagaimana form harus berfungsi.
Untuk item pertama, ubah teks "untitled1" menjadi apa yang Anda inginkan untuk dibaca dan tambahkan URL yang harus dibawa oleh tautan itu.
17 dari 20
Tambahkan Item ke Menu Langsung Anda
Klik pada item tambah untuk menambahkan item baru ke menu lompat Anda. Tambahkan barang sebanyak yang Anda inginkan.
18 dari 20
Opsi Menu Langsung
Setelah Anda menambahkan semua tautan yang Anda inginkan, Anda harus memilih opsi Anda:
Buka URL Di
Jika Anda memiliki frameset, Anda dapat membuka tautan dalam bingkai yang berbeda. Atau Anda dapat mengubah opsi Main Window ke target khusus sehingga URL akan terbuka di dalam jendela baru atau di tempat lain.
Nama Menu
Berikan menu Anda ID unik untuk halaman tersebut. Ini diperlukan agar skrip akan berfungsi dengan benar. Ini juga memungkinkan Anda memiliki beberapa menu lompatan dalam satu formulir - cukup beri mereka semua nama yang berbeda.
Masukkan Tombol Go Setelah Menu
Saya suka memilih ini karena terkadang skrip tidak berfungsi ketika menu berubah. Ini juga lebih mudah diakses.
Pilih Item Pertama Setelah Perubahan URL
Pilih ini jika Anda memiliki prompt seperti "Pilih satu" sebagai item menu pertama. Ini akan memastikan bahwa item itu tetap default pada halaman.
19 dari 20
Tampilan Desain Menu Langsung
Sama seperti dengan menu pertama Anda, Dreamweaver menyiapkan menu lompatan Anda dalam tampilan desain dengan item default terlihat. Anda kemudian dapat mengedit menu drop-down seperti yang Anda lakukan dengan yang lain.
Jika Anda mengeditnya, pastikan untuk tidak mengubah ID apa pun pada item, jika tidak skrip mungkin tidak berfungsi.
20 dari 20
Lompat 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 bekerja!