Dreamweaver memudahkan untuk membuat menu drop-down untuk laman web anda. Tetapi seperti semua bentuk HTML mereka boleh sedikit rumit. Tutorial ini akan membimbing anda melalui langkah-langkah untuk membuat menu drop-down dalam Dreamweaver.
Dreamweaver Jump Menus
Dreamweaver 8 juga menyediakan wizard untuk membuat menu lompat untuk navigasi di laman web anda. Tidak seperti menu drop-down asas, menu ini sebenarnya akan melakukan sesuatu apabila anda selesai. Anda tidak perlu menulis sebarang JavaScript atau CGI untuk mendapatkan borang lungsuran anda untuk berfungsi. Tutorial ini juga menerangkan cara menggunakan wizard Dreamweaver 8 untuk membuat menu lompat.
01 dari 20
Buat Borang Pertama
Nota Penting Mengenai Borang HTML dan Dreamweaver:
Kecuali ahli-ahli sihir khas seperti menu lompat, Dreamweaver tidak membantu anda membuat bentuk HTML "kerja". Untuk ini, anda memerlukan CGI atau JavaScript. Sila lihat tutorial saya Membuat Borang HTML Kerja untuk maklumat lanjut.
Apabila anda menambah menu lungsur ke laman web anda, perkara pertama yang anda perlukan adalah bentuk mengelilinginya. Dalam Dreamweaver, pergi ke menu Sisip dan klik Borang, kemudian pilih "Borang".
02 dari 20
Borang Memaparkan dalam Paparan Reka Bentuk
Dreamweaver menunjukkan lokasi borang anda secara visual dalam paparan reka bentuk, jadi anda tahu di mana untuk meletakkan elemen bentuk anda. Ini penting, kerana teg menu drop-down tidak sah (dan tidak akan berfungsi) di luar elemen bentuk. Seperti yang anda lihat dalam imej, bentuknya adalah garis putus-putus merah dalam pandangan reka bentuk.
03 dari 20
Pilih Senarai / Menu
Menu drop-down dipanggil item "senarai" atau "menu" dalam Dreamweaver. Jadi untuk menambah satu ke borang anda, anda perlu masuk ke menu Form pada menu Insert dan pilih "Senarai / Menu". Pastikan bahawa kursor anda berada dalam garis putus merah kotak borang anda.
04 dari 20
Tetingkap Pilihan Khas
Dalam Pilihan Dreamweaver terdapat skrin mengenai Kebolehcapaian. Saya memilih untuk mempunyai Dreamweaver menunjukkan kepada saya semua ciri-ciri aksesibiliti. Dan skrin ini adalah hasilnya. Borang adalah tempat di mana banyak laman web jatuh dalam kebolehaksesan dan dengan mengisi lima pilihan ini, menu drop-down akan segera diakses.
05 dari 20
Borang Kebolehaksesan
Pilihan Kebolehaksesan adalah:
Label
Ini adalah nama untuk bidang ini. Ia akan muncul sebagai teks di sebelah elemen borang anda.
Tulis apa yang anda ingin panggil menu lungsur anda. Ini boleh menjadi soalan atau frasa pendek bahawa menu drop-down akan menjawab.
Gaya
HTML termasuk tag label untuk mengenal pasti label bentuk anda pada penyemak imbas. Pilihan anda adalah untuk membungkus menu lungsur dan teks label dengan tag, untuk menggunakan atribut "untuk" pada label label untuk mengenal pasti form tag itu, atau untuk tidak menggunakan label label sama sekali.
Saya lebih suka menggunakan atribut itu, kerana jika saya perlu memindahkan label untuk beberapa sebab ia masih akan dilampirkan ke medan borang yang betul.
Jawatan
Anda boleh meletakkan label anda sebelum atau selepas menu lungsur.
Kunci akses
Ini adalah kunci yang boleh digunakan bersama dengan kunci Alt atau Pilihan untuk mendapatkan terus ke medan borang itu. Ini menjadikan borang anda sangat mudah digunakan tanpa memerlukan tetikus. Cara Menyediakan Kunci Akses dalam HTML
Indeks Tab
Inilah urutan di mana medan borang harus diakses apabila menggunakan keyboard ke tab melalui laman Web. Memahami Tabindex
Apabila anda telah mengemas kini pilihan aksesibiliti anda, klik OK.
06 dari 20
Pilih Menu
Sebaik sahaja anda mempunyai menu drop-down yang dipaparkan dalam paparan reka bentuk, anda perlu menambah pelbagai elemen kepadanya. Pertama pilih menu lungsur dengan mengklik padanya. Dreamweaver akan meletakkan satu lagi garis putus-putus di sekeliling menu drop-down, untuk menunjukkan bahawa anda telah memilihnya.
07 daripada 20
Ciri-ciri Menu
Menu sifat akan berubah ke senarai / sifat menu untuk menu drop-down. Di sana anda dapat memberikan menu ID anda (di mana ia mengatakan "pilih"), tentukan apakah anda mahu menjadi menu atau menu, beri kelas gaya dari lembaran gaya anda, dan serahkan nilai ke drop-down.
Apakah Perbezaan antara Senarai dan Menu?
Dreamweaver memanggil menu drop-down menu mana-mana drop-down yang hanya membenarkan satu pilihan. "Senarai" membolehkan pelbagai pilihan dalam drop-down dan boleh menjadi lebih daripada satu item yang tinggi.
Jika anda ingin menu lungsur turun menjadi banyak baris, ubahnya ke jenis "senarai" dan biarkan kotak "pilihan" tidak dicentang.
08 dari 20
Tambah Item Senarai Baru
Untuk menambah item baru ke menu anda, klik pada butang "Senarai nilai ...". Ini akan membuka tetingkap di atas. Taip label item anda di kotak pertama. Inilah yang akan dipaparkan pada halaman. Jika anda meninggalkan nilai kosong, itu juga yang akan dihantar dalam bentuk.
09 dari 20
Tambah Lagi dan Susun semula
Klik pada ikon tambah untuk menambah item. Jika anda ingin menempah semula mereka dalam kotak senarai, gunakan anak panah atas dan ke bawah di sebelah kanan.
10 daripada 20
Berikan Semua Nilai Item
Seperti yang saya nyatakan di langkah 8, jika anda meninggalkan nilai kosong, label akan dihantar ke borang. Tetapi anda boleh memberi semua nilai item anda - untuk menghantar maklumat alternatif kepada borang anda. Anda akan menggunakan ini untuk perkara seperti menu lompat.
11 daripada 20
Pilih Default
Laman web lalai untuk memaparkan mana-mana item drop-down disenaraikan dahulu sebagai item lalai. Tetapi jika anda mahu yang lain dipilih, serlahkannya dalam kotak "Awal yang dipilih" pada menu Properties.
12 daripada 20
Lihat Senarai Anda dalam Paparan Reka Bentuk
Sebaik sahaja anda selesai mengedit sifat, Dreamweaver akan menunjukkan senarai lungsur anda dengan nilai lalai yang dipilih.
13 daripada 20
Lihat Senarai Anda dalam Paparan Kod
Jika anda menukar ke paparan kod, anda dapat melihat bahawa Dreamweaver menambah menu lungsur anda dengan kod yang sangat bersih. Satu-satunya sifat tambahan ialah yang kami tambah dengan pilihan kebolehaksesan. Kod ini semua terenkripsi dan sangat mudah dibaca dan difahami. Ia juga meletakkan pada atribut = = dipilih "dipilih kerana saya telah memberitahu Dreamweaver bahawa saya lalai menulis XHTML.
14 daripada 20
Simpan dan Lihat dalam Penyemak Imbas
Jika anda menyimpan dokumen dan melihatnya dalam penyemak imbas Web, anda dapat melihat bahawa menu lungsur anda kelihatan seperti yang anda harapkan.
15 dari 20
Tetapi Ia Tidak DO apa-apa
Menu yang kami buat di atas kelihatan baik, tetapi ia tidak melakukan apa-apa. Untuk mendapatkannya untuk melakukan sesuatu, anda perlu menyediakan tindakan bentuk pada borang itu sendiri, yang merupakan tutorial sepenuhnya.
Nasib baik, Dreamweaver mempunyai bentuk menu lungsur terbina dalam yang boleh digunakan dengan serta-merta di laman web anda tanpa perlu mempelajari bentuk, CGI, atau skrip. Ia dipanggil Jump Menu.
Menu Jump Dreamweaver menyediakan menu drop-down dengan nama dan URL. Kemudian anda boleh memilih item dalam menu dan halaman Web akan berpindah ke lokasi itu, sama seperti jika anda telah mengklik pautan.
Pergi ke menu Sisip dan pilih Borang dan kemudian Jump Menu.
16 daripada 20
Jump Window Menu
Tidak seperti menu lungsur yang standard, menu Lompat membuka tetingkap baru untuk anda namakan item menu anda dan menambah butiran mengenai cara bentuknya berfungsi.
Untuk item pertama, tukar teks "untitled1" kepada apa yang anda mahu ia baca dan tambahkan URL yang dihubungkan itu.
17 daripada 20
Tambah Item ke Menu Langsung Anda
Klik pada item tambah untuk menambah item baru ke menu lompat anda. Tambah seberapa banyak item yang anda mahu.
18 dari 20
Lompat Pilihan Menu
Sebaik sahaja anda telah menambah semua pautan yang anda mahu, anda harus memilih pilihan anda:
Buka URL Dalam
Jika anda mempunyai frameset, anda boleh membuka pautan dalam bingkai yang berbeza. Atau anda boleh menukar pilihan Window Utama ke sasaran khusus supaya URL akan dibuka di dalam tetingkap baru atau di tempat lain.
Nama Menu
Beri menu anda ID unik untuk halaman. Ini diperlukan agar skrip berfungsi dengan betul. Ia juga membolehkan anda untuk mempunyai beberapa menu lompat dalam satu bentuk - hanya memberi mereka semua nama yang berlainan.
Masukkan Butang Go Selepas Menu
Saya suka memilih ini kerana kadangkala skrip tidak berfungsi apabila menu berubah. Ia juga lebih mudah diakses.
Pilih Item Pertama Selepas Perubahan URL
Pilih ini jika anda mempunyai permintaan seperti "Pilih satu" sebagai item menu pertama. Ini akan menginsuranskan bahawa item itu kekal sebagai lalai pada halaman tersebut.
19 daripada 20
Lompat Paparan Reka Bentuk Menu
Sama seperti menu pertama anda, Dreamweaver menetapkan menu lompat anda dalam paparan reka bentuk dengan item lalai kelihatan. Anda kemudian boleh mengedit menu lungsur seperti yang anda kehendaki.
Jika anda mengeditnya, pastikan anda tidak mengubah mana-mana ID pada item, jika tidak skrip mungkin tidak berfungsi.
20 daripada 20
Jump Menu dalam Penyemak Imbas
Menyimpan fail dan memukul F12 akan memaparkan halaman dalam penyemak imbas pilihan anda. Di sana anda boleh memilih pilihan, klik "Pergi" dan menu lompat berfungsi!