Cara Membuat Menu Drop-Down dalam Dreamweaver

Isi kandungan:

Cara Membuat Menu Drop-Down dalam Dreamweaver
Cara Membuat Menu Drop-Down dalam Dreamweaver
Anonim

Apa yang Perlu Diketahui

  • Pergi ke Insert > Borang > Borang. Klik garis merah bertitik pada borang dan pergi ke Insert > Borang > Senarai/Menu. Pilih pilihan kebolehaksesan.
  • Klik menu dan pilih sifatnya, kemudian pilih Nilai senarai untuk menambah item menu baharu. Klik tanda tambah untuk menambah lebih banyak item.
  • Tambahkan nilai item dan pilih item lalai. Untuk menambah tindakan, pergi Insert > Borang > Menu Lompat. Tambahkan item pada menu Lompat dan simpan.

Dreamweaver memudahkan anda membuat menu lungsur untuk tapak web anda. Tetapi seperti semua bentuk HTML, ia boleh menjadi agak rumit. Tutorial ini akan membimbing anda melalui langkah-langkah untuk membuat menu lungsur dalam Dreamweaver.

Menu Lompat Dreamweaver

Dreamweaver 8 juga menyediakan wizard untuk mencipta menu lompat untuk navigasi dalam tapak Web anda. Tidak seperti menu lungsur asas, menu ini akan melakukan sesuatu apabila anda selesai. Anda tidak perlu menulis sebarang JavaScript atau CGI untuk membolehkan borang lungsur turun anda berfungsi. Tutorial ini juga menerangkan cara menggunakan wizard Dreamweaver 8 untuk mencipta menu lompat.

Pertama, Buat Borang

Image
Image

Kecuali ahli sihir khas seperti menu lompat, Dreamweaver tidak membantu anda menjadikan borang HTML "berfungsi". Untuk ini, anda memerlukan CGI atau JavaScript.

Apabila anda menambahkan menu lungsur ke tapak Web anda, perkara pertama yang anda perlukan ialah borang untuk mengelilinginya. Dalam Dreamweaver, pergi ke menu Sisipkan dan klik Borang, kemudian pilih "Borang."

Paparan Borang dalam Paparan Reka Bentuk

Image
Image

Dreamweaver menunjukkan lokasi borang anda secara visual dalam paparan reka bentuk, jadi anda tahu tempat meletakkan elemen borang anda kerana teg menu lungsur tidak sah (dan tidak akan berfungsi) di luar elemen borang. Seperti yang anda boleh lihat dalam imej, borang ialah garis putus-putus merah dalam paparan reka bentuk.

Pilih Senarai/Menu

Image
Image

Menu lungsur dipanggil item "senarai" atau "menu" dalam Dreamweaver. Jadi untuk menambah satu pada borang anda, anda perlu pergi ke menu Borang pada menu Sisip dan pilih "Senarai/Menu." Pastikan kursor anda berada dalam garis putus-putus merah kotak borang anda.

Tetingkap Pilihan Istimewa

Image
Image

Dalam Pilihan Dreamweaver, terdapat skrin pada Kebolehcapaian. Menu lungsur turun anda akan segera lebih mudah diakses daripada tapak web lain jika anda mengisi lima pilihan ini.

Kebolehcapaian Borang

Image
Image

Pilihan kebolehaksesan ialah:

Label

Medan label dipaparkan sebagai teks di sebelah elemen borang anda. Taipkan nama untuk menu lungsur anda. Ia boleh menjadi soalan atau frasa pendek yang akan dijawab oleh menu lungsur.

Gaya

HTML termasuk tag label untuk mengenal pasti label borang anda pada penyemak imbas web. Pilihan anda adalah untuk membalut menu lungsur turun dan teks label dengan teg, untuk menggunakan atribut "untuk" pada teg label untuk mengenal pasti teg borang yang dirujuk atau tidak menggunakan teg label sama sekali.

Kedudukan

Anda boleh meletakkan label anda sebelum atau selepas menu lungsur.

Kunci Akses

Pelawat boleh menggunakan kunci akses dengan kekunci "Imej" atau Pilihan untuk terus ke medan borang tersebut. Pintasan papan kekunci ini menjadikan borang anda sangat mudah digunakan tanpa tetikus. alt="

Indeks Tab

Indeks tab ialah cara pengguna harus mengakses medan borang apabila menggunakan papan kekunci untuk tab melalui halaman web.

Apabila anda telah mengemas kini pilihan kebolehaksesan anda, klik OK.

Pilih Menu

Image
Image

Setelah menu lungsur anda dipaparkan dalam paparan reka bentuk Dreamweaver, anda perlu menambah pelbagai elemen. Mula-mula, pilih menu lungsur dengan mengklik padanya. Dreamweaver akan meletakkan garis putus-putus lain di sekeliling menu lungsur sahaja untuk menunjukkan bahawa anda telah memilihnya.

Menu Properties

Image
Image

Menu sifat akan bertukar kepada senarai/sifat menu untuk menu lungsur itu. Di sana anda boleh memberikan menu anda ID (di mana ia mengatakan "pilih"), memutuskan sama ada anda mahu ia menjadi senarai atau menu, berikannya kelas gaya daripada helaian gaya anda dan tetapkan nilai pada menu lungsur.

Apakah Perbezaan Antara Senarai dan Menu?

Dreamweaver memanggil menu lungsur turun menu mana-mana lungsur turun yang hanya membenarkan satu pilihan. "Senarai" membenarkan berbilang pilihan dalam menu lungsur dan boleh menjadi lebih daripada satu item yang tinggi.

Jika anda mahu menu lungsur menjadi berbilang baris tinggi, ubahnya kepada jenis "senarai" dan biarkan kotak "pilihan" dinyahtandai.

Tambah Item Senarai Baharu

Image
Image

Untuk menambah item baharu pada menu anda, klik pada butang "Senaraikan nilai…", yang membuka tetingkap di atas. Kemudian, taip label item anda dalam kotak pertama. Ia akan dipaparkan pada halaman.

Tambah Lagi dan Susun Semula

Image
Image

Klik pada ikon tambah untuk menambah lebih banyak item. Jika anda ingin menyusun semula mereka dalam kotak senarai, gunakan anak panah atas dan bawah di sebelah kanan.

Berikan Semua Nilai Item

Image
Image

Jika anda membiarkan nilai kosong, label akan pergi ke borang. Tetapi anda boleh memberikan semua nilai item anda - untuk menghantar maklumat alternatif ke borang anda. Anda akan banyak menggunakan ini untuk perkara seperti menu lompat dan hiperpautan.

Pilih Lalai

Image
Image

Halaman web lalai untuk memaparkan mana-mana item lungsur yang disenaraikan dahulu sebagai item lalai. Tetapi jika anda mahu yang lain dipilih, serlahkannya dalam kotak "Dipilih pada mulanya" pada menu Properties.

Lihat Senarai Anda dalam Design View

Image
Image

Setelah anda selesai mengedit sifat, Dreamweaver akan menunjukkan senarai lungsur anda dengan nilai lalai yang dipilih.

Lihat Senarai Anda dalam Pandangan Kod

Image
Image

Jika anda bertukar kepada paparan kod, anda dapat melihat bahawa Dreamweaver menambahkan menu lungsur anda dengan kod bersih. Satu-satunya atribut tambahan ialah pilihan kebolehaksesan. Kod ini semuanya inden dan sangat mudah dibaca dan difahami.

Simpan dan Lihat dalam Penyemak Imbas

Image
Image

Jika anda menyimpan dokumen dan melihatnya dalam penyemak imbas web, anda dapat melihat bahawa menu lungsur turun anda kelihatan seperti yang anda jangkakan.

Tetapi Ia Tidak Melakukan Apa-apa…

Image
Image

Menu yang kami buat di atas kelihatan baik, tetapi ia tidak melakukan apa-apa. Untuk membuatnya melakukan sesuatu, anda perlu menyediakan tindakan borang pada borang itu sendiri.

Nasib baik, Dreamweaver mempunyai borang menu lungsur terbina dalam yang boleh anda gunakan serta-merta di tapak anda tanpa perlu mempelajari tentang borang, CGI atau skrip. Ia dipanggil Menu Lompat.

Menu Lompat Dreamweaver menyediakan menu lungsur 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.

Tetingkap Menu Lompat

Image
Image

Berbeza dengan menu lungsur turun standard, menu Lompat membuka tetingkap baharu untuk anda menamakan item menu anda dan menambah butiran tentang cara borang itu berfungsi.

Untuk item pertama, tukar teks "un titled1" kepada perkara yang anda mahu ia baca dan tambahkan URL.

Tambahkan Item pada Menu Lompatan Anda

Image
Image

Klik pada tambah item untuk menambah item baharu pada menu lompat anda. Tambahkan seberapa banyak item yang anda mahu.

Pilihan Menu Lompat

Image
Image

Setelah anda menambahkan semua pautan yang anda inginkan, anda harus memilih pilihan anda:

Buka URL Dalam

Jika anda mempunyai set bingkai, anda boleh membuka pautan dalam bingkai yang berbeza. Atau anda boleh menukar pilihan Tetingkap Utama kepada sasaran khas supaya URL akan dibuka dalam tetingkap baharu atau di tempat lain.

Nama Menu

Berikan menu anda ID unik untuk halaman tersebut. Ia diperlukan supaya skrip berfungsi dengan betul. Ia juga membolehkan anda mempunyai berbilang menu lompat dalam satu bentuk - berikan mereka semua nama yang berbeza.

Masukkan Butang Pergi 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 gesaan seperti "Pilih satu" sebagai item menu pertama. Ini akan memastikan item itu kekal lalai pada halaman.

Pandangan Reka Bentuk Menu Lompat

Image
Image

Sama seperti menu pertama anda, Dreamweaver menyediakan menu lompat anda dalam paparan reka bentuk dengan item lalai boleh dilihat. Anda kemudian boleh mengedit menu lungsur seperti yang anda lakukan yang lain.

Jika anda mengeditnya, pastikan anda tidak menukar sebarang ID pada item; jika tidak, skrip mungkin tidak berfungsi.

Menu Lompat dalam Penyemak Imbas

Image
Image

Menyimpan fail dan menekan F12 akan memaparkan halaman dalam penyemak imbas pilihan anda. Di sana anda boleh memilih pilihan, klik "Pergi," dan menu lompat berfungsi.

Disyorkan: