Tata letak halaman web CSS juga dapat dianggap sebagai pekerjaan yang sistematis. Pengembangan situs DIVCSS dapat diselesaikan oleh sebuah tim dengan kerja sama dari banyak orang. Hal ini melibatkan banyak masalah operasi normatif diperlukan pengetahuan. Terorganisir dan terstandar, ini adalah artikel yang dicetak ulang dari Blue, yang sangat efektif. Penulis telah merangkum banyak pengalaman praktis, dan semua orang dapat merujuk dan belajar darinya. Ringkasan Spesifikasi ini merupakan spesifikasi pengembangan dan referensi bahasa skrip. Spesifikasi ini bukan merupakan ketentuan yang tidak dapat diubah dan harus dipatuhi secara ketat. Spesifikasi ini harus digunakan secara fleksibel dan modifikasi tertentu dilakukan dalam keadaan khusus. Namun, mohon jangan mengubah spesifikasi sesuka hati. Jika Anda memiliki pertanyaan, silakan hubungi saya tepat waktu dan saya akan segera mengubah contoh kode dan dokumen yang relevan dari spesifikasi ini. Persyaratan dasar 1. Buka tiga subdirektori gambar temp umum di direktori root situs web, lalu buka subdirektori media sesuai kebutuhan. Direktori gambar berisi gambar publik yang digunakan oleh halaman di kolom berbeda, seperti logo perusahaan, spanduk, menu, dan tombol. Dll; subdirektori umum berisi file publik seperti css, js, php, include, dll.; subdirektori temp berisi berbagai teks, gambar, dan materi asli lainnya yang disediakan oleh pelanggan; flash, avi, waktu cepat, dll. 2. Pada prinsipnya, direktori harus dibuka untuk setiap kolom di direktori root sesuai dengan struktur kolom di beranda. Jika perlu, subdirektori gambar dan media harus dibuka di direktori setiap kolom untuk menempatkan gambar dan media eksklusif untuk kolom ini. Untuk file multimedia, jika kolom ini memiliki banyak konten dan terbagi menjadi banyak kolom bawahan, maka direktori lain dapat dibuka. 3. Seringkali terdapat banyak file di direktori temp. Disarankan untuk membuka direktori yang diberi nama berdasarkan waktu untuk mengklasifikasikan dan mengatur informasi yang diberikan oleh pelanggan satu demi satu. 4. Kecuali ada keadaan khusus, nama direktori dan file harus menggunakan kombinasi huruf kecil bahasa Inggris, angka, dan garis bawah. Karakter Cina, spasi, dan karakter khusus tidak boleh disertakan direktori. Jangan gunakan pinyin kecuali benar-benar diperlukan. Sebagai nama direktori, pengalaman telah membuktikan bahwa direktori yang diberi nama pinyin seringkali sulit dipahami bahkan sebulan kemudian. skrip Kita harus memiliki konsep yang konsisten tentang gaya naskah secara keseluruhan, artinya gaya naskah yang Anda tulis satu bulan kemudian konsisten dengan gaya naskah yang Anda tulis sebulan yang lalu, dan gaya naskah yang ditulis oleh orang yang berbeda. pengembang dalam kelompok kerja yang sama konsisten, karena kami tidak dapat Berkembang secara terpisah selamanya, Anda mungkin berkolaborasi dengan diri Anda sendiri tiga bulan yang lalu kapan saja (klien Anda memerlukan revisi), dan Anda sering kali harus mengembangkan proyek dengan rekan kerja yang berbeda dalam kelompok studio, dan Anda mungkin juga diminta untuk memodifikasi skrip yang telah mengundurkan diri, tentu saja, Anda juga dapat menyerahkan proyek kepada rekan-rekan berikutnya. 1. Templat universal untuk file HTML: div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com] Tag meta lainnya div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com] Style sheet mendefinisikan definisi fungsi Javascript sisi klien dan operasi inisialisasi div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com] Mengisi kembali: 2. Untuk halaman yang memungkinkan pengambilan teks lengkap, untuk memungkinkan pengambilan efektif oleh mesin pencari di Internet, tag meta Kata Kunci dan Deskripsi harus ditambahkan di antara <head></head> html di beranda saluran , Misalnya: div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com] 3. Kode contoh format file CSS: div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com] Yang perlu diperhatikan secara khusus di sini adalah urutan a:link a:visited a:hover a:actived harus benar-benar sesuai dengan kode contoh di atas, jika tidak maka akan terjadi lebih banyak atau lebih sedikit masalah. Selain itu, kami menetapkan bahwa redefinisi adalah yang utama, kelas semu adalah yang kedua, dan penyesuaian adalah yang terakhir, sehingga memudahkan Anda dan orang lain untuk membaca! Untuk memastikan bahwa ukuran font konsisten pada browser yang berbeda, disarankan untuk menggunakan titik pt dan piksel px untuk menentukan ukuran font. pt umumnya menggunakan 9pt dan 11pt di Dinasti Song Cina, dan px umumnya menggunakan 12px dan 14.7px di Dinasti Song Cina. Songti Cina. Ini adalah ukuran font yang dioptimalkan, tebal atau Saat menebalkan font Lagu, ukuran font 11pt dan 14,7 piksel umumnya lebih sesuai. Saat menulis <table> untuk saling bertumpuk, ikuti standar dengan ketat. Untuk satu <table>, <table><tr> harus disejajarkan, <td> harus diindentasi dengan dua spasi setengah lebarnya, dan jika ada ada spasi. other Untuk tabel bertingkat, <table> juga diberi indentasi dua spasi setengah lebarnya. Jika tidak ada tabel bertumpuk di <td>, tag penutup </td> harus berada pada baris yang sama dengan <td>, tanpa garis. istirahat. Seperti yang kami perhatikan, kode sumber tidak boleh berisi kode seperti itu: div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com] Sebaliknya, seharusnya terlihat seperti ini: div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com] Hal ini dikarenakan browser menganggap baris baru sama dengan spasi setengah lebar. Cara penulisan tidak beraturan di atas sama dengan menambahkan spasi setengah lebar secara tidak sengaja ditulis seperti ini: div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com] <table> yang berada pada level yang sama harus rata kiri. Selain itu, sel kosong tanpa konten apa pun tidak boleh ada. Sel dengan tinggi 12 piksel atau lebih harus ditulis di antara <td> dan </td> tingginya kurang dari 12 piksel, gambar gif transparan berukuran 1*1 harus disisipkan di antara <td> dan </td>. Hal ini karena beberapa browser menganggap sel kosong ilegal dan tidak akan menafsirkannya. Jika urutan kode kacau, Anda dapat mengatur ulang melalui perintah->terapkan pemformatan sumber di DW3! 5. Ada pula patokan terpadu dalam penulisan lebar dan tinggi. Umumnya, untuk tabel yang hanya memiliki satu kolom, lebarnya ditulis pada tag <tabel>. Untuk tabel yang hanya memiliki satu baris, tingginya ditulis pada tag <tabel> Untuk tabel dengan banyak baris dan banyak kolom, Tabel, lebar dan tinggi ditulis dalam tag <td> pada baris atau kolom pertama. Singkatnya, ikuti satu prinsip: tidak boleh ada lebih dari satu tinggi dan lebar yang mengontrol ukuran sel yang sama. Pastikan lebar dan tinggi apa pun valid kodenya, seharusnya di Perubahan terlihat di browser. Memang tidak mudah untuk melakukan hal ini, memerlukan waktu latihan dan pemikiran yang panjang. Prinsip umum 1. Sebelum menata tabel, harap pikirkan baik-baik solusi terbaik. Cobalah untuk mengontrol susunan tabel dalam tiga tingkat, dan cobalah untuk menghindari dua tag <colspan> <rowspan> banyak masalah. 2. Halaman web harus menghindari penggunaan tabel besar secara keseluruhan. Semua konten disarangkan dalam tabel besar ini, karena ketika browser menafsirkan elemen halaman, ia akan menampilkannya satu per satu dalam satuan tabel jika halaman web disematkan Jika ditempatkan pada tabel yang besar, kemungkinan konsekuensinya adalah ketika pengunjung mengetikkan URL, pertama-tama ia akan menghadapi ruang kosong dalam waktu yang lama, kemudian semua konten web akan muncul secara bersamaan. Jika Anda harus melakukan ini, gunakan tag <tbody> agar tabel besar dapat ditampilkan dalam potongan. 3. Dalam penyusunan huruf, kita sering menemui kebutuhan untuk membuat indentasi pada baris pertama. Jangan gunakan atau spasi lebar penuh untuk mendapatkan efek. Pendekatan standar adalah dengan mendefinisikan p { text-indent: 2em } di style sheet dan kemudian tambahkan setiap tag <p> paragraf, harap dicatat bahwa dalam keadaan normal, mohon jangan menghilangkan tag penutup </p>. 4. Pada prinsipnya, kami melarang penggunaan <img width=? height=?> untuk mengganggu ukuran tampilan gambar secara artifisial, dan disarankan untuk tidak menyertakan lebar dan tinggi dalam tag <img> Dua atribut. Hal ini karena selama proses produksi, gambar sering kali perlu dimodifikasi berulang kali. Hal ini dapat menghindari campur tangan manusia dalam ukuran tampilan gambar dan memaksimalkan fungsi browser itu sendiri halaman belum memuat gambar, Saat gambar ditambahkan, ukuran situs gambar tidak akan ketinggalan, yang dapat menyebabkan halaman web Jitter saat memuat (jika gambar dimasukkan ke dalam tabel dengan ukuran tetap, fenomena ini tidak akan terjadi), terutama bila ukuran gambar besar, fenomena ini akan terlihat jelas, jadi ketika diharapkan hal ini akan terlihat jelas. situasi yang menyebabkan halaman web menjadi jitter, pastikan untuk melampirkan lebar ke <img> di bagian akhir. dan atribut tinggi. 5. Untuk memaksimalkan fungsi pengaturan huruf otomatis pada browser, cobalah untuk tidak menggunakan <br> untuk mengintervensi segmentasi teks lengkap secara manual. 6. Harus ada spasi setengah lebar di antara kata-kata dalam bahasa yang berbeda, kecuali sebelum simbol header dan setelah simbol ekor. Tanda baca di antara karakter Cina harus menggunakan tanda baca lebar penuh, dan tanda kurung di sekitar huruf dan angka bahasa Inggris harus menggunakan setengah lebarnya. -tanda kurung lebar. 7. Semua ukuran font harus diimplementasikan menggunakan style sheet, dan tag <font size=?> dilarang muncul di halaman. 8. Harap tidak memiliki lebih dari satu spasi berturut-turut di halaman web dan gunakan spasi lebar penuh sesedikit mungkin (di bawah kumpulan karakter bahasa Inggris, spasi lebar penuh akan menjadi karakter kacau). , hspace, vspace dan transparansi untuk mencapai gambar gif. 9. Saat mencampurkan bahasa Mandarin dan Inggris, kami berusaha sebaik mungkin untuk mendefinisikan bahasa Inggris dan angka sebagai font verdana dan arial. 10. Disarankan untuk menentukan spasi baris dalam persentase. Dua nilai spasi baris yang umum digunakan adalah tinggi baris: 120%/150%. 11. Semua path di website menggunakan path relatif. Umumnya path link ke file default di direktori tertentu tidak perlu dituliskan nama lengkapnya =”aboutus/index.htm”> tetapi seharusnya seperti ini :<a href=”aboutus/”> 12. Gunakan font yang lebih besar saat menyematkan teks dalam grafik. Disarankan untuk tidak menyertakan teks dalam grafik. 13. "Ukuran halaman web" didefinisikan sebagai jumlah ukuran file semua halaman web, termasuk file HTML dan semua objek yang disematkan. Pengguna lebih memilih situs yang cepat daripada yang baru. Bagi pengguna modem, sebaiknya menjaga ukuran halaman di bawah 34K. Aturan penamaan file 1. Setiap direktori harus berisi file html default, dan nama file harus index.htm. 2. Nama file harus berupa kombinasi huruf kecil bahasa Inggris, angka, dan garis bawah. 3. Ideologi penuntun prinsip penamaan adalah agar diri Anda sendiri dan setiap anggota kelompok kerja dapat dengan mudah memahami arti dari setiap file. Yang kedua adalah ketika kita menggunakan perintah "urutkan berdasarkan nama" dalam sebuah folder, sama Besar kategori file dapat disusun bersama sehingga kita dapat mencari, memodifikasi, mengganti, menghitung beban, dll. 4. Berikut ini penggunaan kolom "Berita" (termasuk "Berita Domestik" dan "Berita Internasional") untuk menggambarkan prinsip penamaan file html: 5. Prinsip penamaan gambar mengikuti standar sebagai berikut: ☆Bagian ekor digunakan untuk mengungkapkan arti spesifik dari gambar. ☆ Berikut beberapa contohnya. Anda seharusnya dapat memahami arti gambar secara sekilas: div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com]
<html>
<!–
Generator: Sub Studio Desain ( www.eastline.net.cn )
Data Penciptaan: 2000-8-1
Penulis asli: eastline
–>
<kepala>
<title>Judul dokumen</title>
<meta http-equiv="content-type" content="teks/html; charset=gb2312">
<meta name="penulis" content="garis timur">
<link rel="stylesheet" type="text/css" href="style/style.css">
</kepala>
<tubuh bgcolor="#ffffff">
… …
</tubuh>
Untuk memastikan bahwa situs web kompatibel dengan standar XML bahasa web generasi berikutnya, semua atribut tag HTML harus diapit dalam tanda kutip tunggal atau tanda kutip ganda, yaitu, kita harus menulis <a href="url"> alih-alih < href=url >.
<meta name=”keywords” content=”Shinkansen Oriental, mobil, membeli mobil”/>
<meta name=”description” content=”Oriental New Kanjin Line, perhentian pertama di dunia untuk informasi otomotif Tiongkok”/>
<gaya tipe="teks/css">
<!—
p { indentasi teks: 2em }
body { font-family: "宋体"; ukuran font: 9pt; warna: #000000; margin-atas: 0px; margin-kanan: 0px; margin-bawah: 0px margin-kiri: 0px}
tabel { keluarga font: "宋体"; ukuran font: 9pt; tinggi garis: 20 piksel; warna: #000000}
a:link { ukuran font: 9pt; warna: #FFFFFF;
a:dikunjungi { ukuran font: 9pt; warna: #99FFFF;
a:hover { ukuran font: 9pt; warna: #FF9900; dekorasi teks: tidak ada}
a:aktif {ukuran font: 9pt; warna: #FF9900; dekorasi teks: tidak ada}
a.1:link { ukuran font: 9pt; warna: #3366cc; dekorasi teks: tidak ada}
a.1:dikunjungi { ukuran font: 9pt; warna: #3366cc; dekorasi teks: tidak ada}
a.1:hover { ukuran font: 9pt; warna: #FF9900; dekorasi teks: tidak ada}
a.1:aktif { ukuran font: 9pt; warna: #FF9922; dekorasi teks: tidak ada}
.blue { font-family: "宋体"; ukuran font: 10,5pt; tinggi baris: 20 piksel; warna: #0099FF;
–>
</gaya>
<td><img src=”../images/sample.gif”>
</td>
<td><img src=”../images/sample.gif”></td>
<td><img src=”../images/sample.gif”> </td>
☆ Buat direktori berita di direktori root ☆ Item berita default pertama diberi nama index.htm
☆ Semua berita yang termasuk dalam "berita domestik" diberi nama secara berurutan: china_1.htm, china_2.htm, …
☆ Semua berita milik "Berita Internasional" diberi nama secara berurutan: internation_1.htm, internasional _2.htm, …
☆ Jika jumlah file dua digit, harap beri nama sembilan file pertama: china_01.htm, china_02.htm untuk memastikan semua file dapat diurutkan dengan benar di dalam folder.
☆ Nama dibagi menjadi dua bagian, bagian pertama dan terakhir, dipisahkan dengan garis bawah.
☆ Bagian header menunjukkan sifat umum gambar, seperti iklan, logo, menu, tombol, dll.
☆ Secara umum:
Kami menamai gambar persegi panjang seperti iklan dan pola dekoratif yang ditempatkan di bagian atas halaman: spanduk
Kami menamai gambar ikonik itu: logo
Gambar kecil tersebut kita beri nama dengan link yang tidak tetap pada tombol halaman
Kita beri nama gambar kolom link yang muncul terus menerus pada posisi tertentu pada halaman dan mempunyai sifat yang sama: menu
Kami memberi nama foto untuk dekorasi: pic
Kami memberi nama gambar tanpa tautan untuk menunjukkan judul: judul
Ikuti prinsip ini dan seterusnya.
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menu_pekerjaan.gif
title_news.gif
logo_polisi.gif
logo_nasional.gif
pic_people.jpg
pic_hill.jpg