Tutorial tentang cara cepat membuat menu navigasi CSS_CSS/HTML

Memandangkan konsep penyeragaman halaman web berakar umbi dalam hati orang ramai, semakin banyak tapak web menggunakan seni bina CSS. Halaman web berstruktur CSS bukan sahaja mematuhi piawaian W3C, tetapi juga sangat cantik. Halaman web standard bermula dengan menu CSS yang cantik. Seperti yang kita sedia maklum, menu CSS ditulis dalam sekeping kod untuk menghasilkan menu yang cantik Hari ini saya akan memperkenalkan anda kepada perisian kecil: CSS Tab Designer!

CSS Tab Designer ialah perisian visual yang menggunakan CSS untuk mereka bentuk menu navigasi Perisian ini mempunyai lebih daripada 60 gaya terbina dalam yang berbeza Anda hanya perlu mengubah suai templat gaya sedia dibuat untuk menjana menu CSS dengan cepat. Perlu dinyatakan secara khusus bahawa kod XHTML yang dijana oleh perisian mematuhi piawaian web dengan ketat, dan menu CSS yang dibuat adalah serasi dengan pelbagai penyemak imbas arus perdana, sama ada Internet Explorer yang disertakan dengan sistem, atau Firefox, Opera dan Netscape.

Pengendalian Pereka Tab CSS adalah sangat mudah Antara muka utama menggunakan reka letak tiga lajur: item (Item), gaya (Gaya Tab) dan pratonton (Pratonton) disusun mengikut urutan antara muka utama, seperti yang ditunjukkan dalam rajah .

Langkah-langkah untuk mencipta menu baharu adalah sangat mudah Terdapat lebih daripada 60 gaya menu dengan gaya yang berbeza yang telah dibuat dalam "Gaya Tab" Mula-mula pilih gaya yang anda perlukan, dan kemudian klik pada "Item" pada kiri "Isi dengan sampel", anda boleh segera melihat kesan dalam "Pratonton", dan menu dijana.

Sudah tentu, item menu dalam templat gaya terbina dalam perisian semuanya dalam bahasa Inggeris, yang tidak sesuai untuk pengguna Cina Kami masih perlu membuat beberapa pengubahsuaian. Item menu semasa dipaparkan dalam "Item" di sebelah kiri tetingkap utama Bar alat item disusun dengan berbilang butang, dari kiri ke kanan: Tambah Berbilang Item, Tambah Item, Padam Item (Padam Item), Move Up, Bergerak ke Bawah, Edit Item Terpilih, seperti yang ditunjukkan dalam rajah.

Klik dua kali mana-mana projek semasa untuk memasuki kotak dialog penyuntingan Di sini kita boleh mengubah suai bahasa Inggeris asal kepada bahasa Cina yang diperlukan, seperti yang ditunjukkan dalam gambar.

Selepas mengubah suai semua kandungan, anda boleh melihat kesannya di kawasan pratonton. Pada masa ini, kami mendapati bahawa teks pada menu bukanlah bahasa Cina yang dijangkakan, tetapi beberapa aksara yang bercelaru Mengapa ini? Seperti yang ditunjukkan dalam gambar.

CSS Tab Designer ialah perisian Inggeris dan pengekodan pratetap adalah untuk halaman web Inggeris, jadi kami perlu mengubah suai pengekodan secara manual kepada bahasa Cina. Memandangkan perisian itu sendiri tidak mempunyai fungsi penyuntingan kod, kami akan membuat pengubahsuaian selepas fail halaman web menu CSS dijana.

Masih tidak baik untuk menghadapi watak bercelaru semasa pratonton Anda boleh klik kanan di ruang kosong kawasan pratonton dan pilih "Pengekodan → Bahasa Cina Ringkas (gb2312)" dalam menu klik kanan dan kesan pratonton. akan kembali normal, seperti yang ditunjukkan dalam gambar.

Sebelum anda tahu, menu CSS sudah sedia, mari eksport fail. Klik butang "Jana HTML" pada bar alat perisian, dan sistem akan memasuki kotak dialog simpan. Contoh ini: Pilih folder simpan: D:web, masukkan menu nama fail: dan klik butang "Simpan" untuk melengkapkan.

Seperti yang dinyatakan sebelum ini, pengekodan halaman web yang dijana oleh perisian secara lalai adalah berasaskan Bahasa Inggeris Seterusnya, kami mula mengubah suai pengekodan.

Masukkan direktori D:web dan anda biasanya akan melihat dua fail:

menu.html, halaman web menu CSS yang dihasilkan.

menu1.gif, gambar berkaitan yang dipanggil oleh menu CSS, nama fail mungkin berbeza sedikit dalam keadaan sebenar.

Anda boleh membuka fail menu.html dengan mana-mana editor teks Pengarang menggunakan "Notepad" yang disertakan dengan sistem Selepas membuka fail, anda akan menemui kandungan berikut:

Pengekodan lalai fail yang dijana oleh Pereka Tab CSS ialah "ISO-8859-1", yang boleh ditukar kepada pengekodan Cina "gb2312", seperti yang ditunjukkan dalam rajah:

Semudah itu, simpan hasil pengubahsuaian, buka menu.html sekali lagi dan lihat, bagaimana ia, tiada kod yang bercelaru!