Cara menambah baik tapak web_CSS/HTML sedia ada anda

Kebanyakan pereka bentuk kami masih menggunakan susun atur meja tradisional, pembentangan dan struktur yang digabungkan bersama untuk membina tapak web. Mempelajari cara menggunakan XHTML+CSS memerlukan proses dan membuat tapak web sedia ada mematuhi piawaian tapak web tidak boleh dilakukan dalam satu langkah. Pendekatan terbaik adalah untuk meneruskan langkah demi langkah dan secara berperingkat untuk mencapai matlamat mematuhi sepenuhnya piawaian laman web. Jika anda seorang pemula atau tidak begitu biasa dengan kod, anda juga boleh menggunakan alat penyuntingan yang mematuhi piawaian, seperti Dreamweaver MX 2004, yang pada masa ini merupakan alat paling lengkap yang menyokong piawaian CSS.

1． Penambahbaikan utama
Tambahkan DOCTYPE yang betul pada halaman
Ramai pereka bentuk dan pembangun tidak tahu apa itu DOCTYPE dan untuk kegunaannya. DOCTYPE ialah singkatan jenis dokumen. Terutamanya digunakan untuk menunjukkan versi XHTML atau HTML yang anda gunakan. Penyemak imbas mentafsir kod halaman mengikut DTD (Definisi Jenis Dokumen) yang ditakrifkan oleh DOCTYPE anda. Jadi, jika anda secara tidak sengaja menetapkan DOCTYPE yang salah, hasilnya akan mengejutkan anda. XHTML1.0 menyediakan tiga pilihan DOCTYPE:

(1) Peralihan

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Tegas

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Frameset

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Untuk penambahbaikan utama kami, kami hanya perlu menggunakan pernyataan peralihan. Ia masih boleh serasi dengan reka letak meja anda, logo prestasi, dsb., supaya anda tidak akan merasakan bahawa perubahan itu terlalu besar dan sukar untuk dikuasai.

Petua: Jika anda terlalu malas untuk memasukkan kod peralihan di atas, anda boleh melawati halaman utama laman web http://www.macromedia.com/, kemudian lihat kod sumber, dan salin dan tampal kod yang sama di kawasan kepala.

Tetapkan ruang nama (Ruang nama)
Tambahkan kod berikut terus selepas pengisytiharan DOCTYPE:


Ruang nama ialah koleksi terperinci jenis elemen dan nama atribut DTD , pengisytiharan ruang nama membolehkan anda mengenal pasti ruang nama anda dengan menunjuk ke alamat dalam talian. Hanya masukkan kod seperti biasa.

Isytihar bahasa pengekodan anda
Untuk ditafsirkan dengan betul oleh penyemak imbas dan lulus pengesahan markup, semua dokumen XHTML mesti mengisytiharkan bahasa pengekodan yang mereka gunakan. Kodnya adalah seperti berikut:


Bahasa pengekodan yang diisytiharkan di sini ialah Bahasa Cina Ringkas GB2312 Jika anda perlu menghasilkan kandungan Cina Tradisional, anda boleh mentakrifkannya sebagai BIG5.

Tulis semua teg dalam huruf kecil
XML sensitif huruf besar-besaran, jadi XHTML juga sensitif huruf besar. Semua elemen XHTML dan nama atribut mestilah huruf kecil. Jika tidak, dokumen anda akan dianggap tidak sah oleh pengesahan W3C. Contohnya, kod berikut tidak betul:

Cara yang betul untuk menulisnya ialah:

Begitu juga,

ditukar kepada

, ditukar kepada , dsb. Langkah penukaran ini adalah mudah.
Tambah atribut alt pada imej
Tambah atribut alt pada semua imej. Atribut alt menentukan bahawa teks gantian dipaparkan apabila imej tidak dapat dipaparkan Ini boleh diketepikan untuk pengguna biasa, tetapi ia adalah penting untuk pelayar teks sahaja dan pengguna yang menggunakan pembaca skrin. Hanya apabila atribut alt ditambahkan, kod akan lulus semakan ketepatan W3C. Ambil perhatian bahawa kita perlu menambah atribut alt yang bermakna. Penulisan seperti berikut tidak bermakna:


Tulisan yang betul:


Beri Petikan semua nilai atribut ​​
Dalam HTML, anda tidak perlu memetik nilai atribut, tetapi dalam XHTML, ia mesti dipetik.

Contoh: ketinggian="100", bukan ketinggian=100.

Tutup semua teg
Dalam XHTML, setiap teg yang terbuka mesti ditutup. Seperti ini:

Setiap tab yang terbuka mesti ditutup.

HTML boleh menerima teg yang tidak ditutup, tetapi XHTML tidak boleh.
Peraturan ini boleh mengelakkan kekeliruan dan masalah HTML. Contohnya: Jika anda tidak menutup teg imej, anda mungkin mengalami isu paparan CSS dalam sesetengah penyemak imbas. Gunakan kaedah ini untuk memastikan halaman muncul semasa anda mereka bentuknya. Perlu diingatkan bahawa teg kosong juga mesti ditutup Gunakan garis miring ke hadapan "/" di hujung teg untuk menutup sendiri. Contohnya:



Selepas diproses oleh tujuh peraturan di atas, halaman tersebut pada asasnya akan mematuhi keperluan XHTML1.0. Tetapi kita masih perlu mengesahkan sama ada ia benar-benar memenuhi piawaian. Kami boleh menggunakan W3C untuk menyediakan perkhidmatan pengesahan percuma (http://validator.w3.org/). Betulkan ralat satu demi satu selepas menemuinya. Dalam senarai sumber berikut, kami juga menyediakan perkhidmatan pengesahan lain dan URL yang memberikan panduan tentang pengesahan, yang boleh digunakan sebagai tambahan kepada pengesahan W3C. Apabila anda akhirnya lulus pengesahan XHTML, tahniah, anda telah mengambil langkah besar ke arah piawaian tapak web. Ia tidak sesukar yang anda fikirkan!

2． Penambahbaikan pertengahan
Peningkatan seterusnya yang akan kami lakukan adalah terutamanya dalam pemisahan struktur dan prestasi Langkah ini tidak semudah langkah pertama Kami memerlukan perubahan dalam konsep, serta pembelajaran dan aplikasi CSS2 teknologi. Tetapi mempelajari sesuatu yang baru memerlukan masa, bukan? Caranya ialah belajar dengan melakukan. Jika anda sentiasa menggunakan reka letak jadual dan tidak pernah menggunakan CSS sama sekali, tidak perlu tergesa-gesa untuk mengucapkan selamat tinggal kepada reka letak jadual Anda boleh menggantikan tag fon dengan helaian gaya. Semasa anda belajar lebih banyak, anda boleh melakukan lebih banyak lagi. Okey, mari kita lihat perkara yang perlu kita lakukan:

Gunakan CSS untuk mentakrifkan penampilan elemen
Kami telah membangunkan tabiat semasa menulis logo Apabila kami mahu fon menjadi lebih besar, kami menggunakan

, dengan harapan ia berada di hadapan Untuk menambah simbol titik, gunakan

. Kami sentiasa memikirkan bermaksud besar,

bermaksud titik dan bermaksud "teks tebal". Malah,

boleh ditukar kepada apa sahaja yang anda mahukan Melalui CSS,

boleh ditukar menjadi fon kecil,

teks boleh ditukar menjadi teks besar dan tebal, dan

boleh ditukar menjadi. Sekeping gambar dan sebagainya. Kita tidak boleh memaksa elemen struktur untuk mencapai persembahan, kita harus menggunakan CSS untuk menentukan penampilan elemen tersebut. Sebagai contoh, kita boleh menjadikan tajuk lalai 6 peringkat kelihatan sama saiz:

h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif font-size: 12px; }
Ganti sampah yang tidak bermakna dengan elemen berstruktur
Ramai orang mungkin tidak pernah tahu bahawa elemen HTML dan XHTML direka untuk menyatakan struktur. Ramai di antara kita telah terbiasa menggunakan elemen untuk mengawal persembahan, bukannya struktur. Sebagai contoh, kandungan senarai boleh menggunakan teg berikut:

Ayat satu
Ayat dua
Ayat tiga

Adalah lebih baik jika kita menggunakan senarai tidak tertib sebaliknya:

• Ayat 1
• Ayat 2
• Ayat 3

Anda boleh berkata "Tetapi

menunjukkan titik, saya tidak mahu menggunakan titik.” Sebenarnya, CSS tidak menyatakan rupa sesuatu elemen Anda boleh mematikan titik menggunakan CSS.

Tambah id pada setiap jadual dan bentuk
Berikan jadual atau bentuk teg struktur yang unik, seperti


Seterusnya, dalam gaya penulisan Semasa mencipta jadual, anda boleh mencipta pemilih "menu" dan mengaitkannya dengan peraturan CSS yang memberitahu sel jadual, label teks dan semua elemen lain cara untuk dipaparkan. Dengan cara ini, tidak perlu melampirkan beberapa atribut lapisan pembentangan yang berlebihan dan memakan lebar jalur seperti ketinggian, lebar, penjajaran, warna latar belakang, dll. pada setiap teg %lt;td>. Dengan hanya teg yang dilampirkan (teg id bagi teg "menu"), anda boleh melakukan pemprosesan pembentangan ad-hoc untuk penandaan kod yang bersih dan padat dalam helaian gaya yang berasingan.

Penambahbaikan Pertengahan Kami akan menyenaraikan tiga perkara utama di sini dahulu, tetapi ia mengandungi banyak kandungan dan mata pengetahuan, yang perlu kami pelajari dan kuasai langkah demi langkah sehingga kami akhirnya mencapai reka letak menggunakan CSS sepenuhnya tanpa menggunakan mana-mana meja.