Tata letak halaman web CSS juga dapat dianggap sebagai pekerjaan yang sistematis. Pengembangan situs DIVCSS dapat diselesaikan oleh banyak orang secara berkolaborasi dan oleh sebuah tim. Ini melibatkan banyak masalah operasi normatif Diperlukan pengetahuan yang terorganisir dan terstandarisasi, 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.
Ikhtisar
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, dan buka subdirektori media sesuai kebutuhan. Direktori gambar berisi gambar publik yang digunakan oleh halaman di kolom berbeda, seperti logo perusahaan, spanduk, dan menu., 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; avi, waktu cepat, dll. File multimedia.
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 dengan nama 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, angka, dan garis bawah bahasa Inggris. 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 sering kali tidak dapat Anda pahami satu bulan kemudian.
Saat menulis skrip
,kita harus memiliki konsep yang konsisten tentang gaya skrip secara keseluruhan. yang berarti Anda menulisnya satu bulan kemudian dan satu bulan yang lalu. Gaya skrip tetap konsisten, begitu pula gaya skrip yang ditulis oleh pengembang berbeda dalam kelompok kerja yang sama, karena kami tidak dapat mengembangkan secara terpisah selamanya, dan Anda mungkin selalu bekerja. dengan diri Anda sendiri tiga bulan lalu (pelanggan Anda meminta revisi), Anda sering kali harus mengembangkan proyek bersama dengan rekan kerja yang berbeda di studio, dan mungkin diminta untuk memodifikasi skrip yang dikembangkan oleh orang yang telah mengundurkan diri menyerahkan proyek kepada rekan-rekan berikutnya.
1. Template universal untuk file Html:
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="text/html; charset=gb2312">
<meta name="author" content="eastline">
Meta tag lainnya
div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
Klien definisi style sheet Definisi fungsi Javascript dan operasi inisialisasi
div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css ]
</kepala>
<tubuh bgcolor="#ffffff">
… …
</body>
Ditambahkan:
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 < a href=url >.
2. Untuk halaman yang memungkinkan pengambilan teks lengkap, untuk mengaktifkan pengambilan efektif oleh mesin pencari di Internet, tag meta Kata Kunci dan Deskripsi harus ditambahkan di antara <head></head> html pada halaman beranda channel, contoh:
div css xhtml xml Contoh Source Code Contoh Source Code [www.52css.com]
<meta name=”keywords” content=”Shinkansen Oriental, mobil, membeli mobil”/>
<meta name=”description” content=”Oriental New Kanjin Line, perhentian pertama di dunia untuk informasi mobil Cina”/>
3. Kode contoh format file CSS:
div css xhtml xml Contoh Source Code Contoh Source Code [www.52css.com ]
<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;
–>
</style>
Yang harus 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 menentukan ukuran font dalam poin pt dan piksel px. pt umumnya menggunakan 9pt dan 11pt dalam bahasa Cina Dinasti Song, dan px umumnya menggunakan 12px dan 14.7px dalam bahasa Cina Songti. 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. other Untuk tabel bertumpuk, <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 kita catat di Seharusnya tidak ada kode seperti itu di kode sumber:
div css xhtml xml Contoh Kode Sumber Contoh Kode Sumber [www.52css.com]
<td><img src=”../images/sample.gif”>
</td>
Seharusnya seperti ini:
div css xhtml xml Contoh Source Code Contoh Source Code [www.52css.com]
<td><img src=”../images/sample.gif”></td>
Hal ini karena browser menganggap baris baru setara dengan spasi setengah lebar. Cara penulisan tidak beraturan di atas setara dengan penambahan yang tidak disengaja spasi setengah lebarnya. Jika memang perlu ditambah spasi setengah lebarnya, maka penulisannya seperti ini:
div css xhtml xml Contoh Source Code Contoh Source Code [www.52css.com]
<td><img src=”../images/sample.gif”> </td>
<tabel> yang berada pada level yang sama harus rata kiri, dan sel kosong tanpa konten apa pun tidak boleh ada tinggi lebih besar dari atau sama dengan 12px harus ditulis antara <td> dan </td>. Jika tingginya kurang dari 12px, gif transparan ukuran 1*1 harus disisipkan di antara <td> dan </td> Gambar, 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 standar terpadu cara penulisan lebar dan tinggi. Umumnya, untuk tabel yang hanya memiliki satu kolom, lebarnya ditulis dalam tag <tabel>, untuk tabel yang hanya memiliki satu baris, tingginya ditulis dalam 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 menyusun tabel, harap pikirkan baik-baik solusi terbaik. Cobalah untuk mengontrol susunan tabel dalam tiga tingkat, dan cobalah untuk menghindari dua tag <colspan> dan <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 atribut lebar dan tinggi dalam tag <img> selama proses produksi, gambar Seringkali memerlukan modifikasi berulang-ulang, yang dapat menghindari campur tangan manusia dalam ukuran tampilan gambar dan memaksimalkan fungsi browser itu sendiri, namun efek sampingnya adalah ketika halaman web belum memuat gambar tersebut; , ukuran situs gambar tidak akan dicadangkan. Hal ini dapat menyebabkan halaman web bergetar saat memuat (jika gambar dimasukkan ke dalam tabel berukuran tetap, fenomena ini tidak akan terjadi), terutama bila ukuran gambarnya besar. besar, fenomena ini akan terlihat jelas, jadi ketika diharapkan Jika situasi ini terjadi yang jelas akan menyebabkan halaman web bergetar, pastikan untuk melampirkan atribut lebar dan tinggi ke <img> di bagian akhir.
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 menggunakan persentase untuk menentukan spasi baris. Dua nilai spasi baris yang umum digunakan adalah tinggi baris: 120%/150%.
11. Semua jalur di situs web menggunakan jalur relatif, dan umumnya tertaut ke file default di direktori tertentu. Jalur tautan tidak harus nama lengkap. Misalnya, kita tidak perlu melakukan ini: <a href=”aboutus/index.htm”> tetapi harus seperti ini: <a href=”aboutus/”>
12. Disarankan untuk menggunakan font yang lebih besar saat menyematkan teks 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.
Prinsip 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 Dalam Negeri" dan "Berita Internasional") untuk menjelaskan prinsip penamaan file html:
☆ 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.
5. Prinsip penamaan gambar mengikuti standar sebagai berikut:
☆ 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.
☆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]
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