Teknik rekonstruksi web dan solusi untuk masalah umum
1. keterampilan xhtml+CSS
●Pekerjaan persiapan yang harus dilakukan sebelum melakukan refactoring:
1. Dapatkan rendering PSD, harus PSD, jadi Anda bisa mengirisnya sendiri dengan lebih leluasa;
2. Pertama buat halaman web tanpa memotong PSD, dan beri nama index_psd.html (halaman ini untuk referensi);
3. Siapkan beberapa folder yang diperlukan images (untuk gambar), css (untuk file gaya css), dan js (untuk file js);
●Setelah persiapan selesai, analisis terlebih dahulu struktur seluruh halaman. Untuk menganalisis struktur halaman, pertama-tama lihat keseluruhannya, lalu lihat bagian-bagiannya. Pertama-tama lihat bagaimana bagian-bagian terbesar halaman saling berhubungan, apakah disandingkan ke atas dan ke bawah atau diurutkan ke kiri dan ke kanan. Setelah melihat struktur bagian besar halaman dengan jelas, Anda dapat membuat blok halaman yang paling dasar. Misalnya, jika halaman kita memiliki struktur atas, tengah, dan bawah, kita dapat menulis:
<div id=”header”></div>//Tempat header dan navigasi, dll.
<div id="content"></div>//Konten tema laman
<div id=”footer”></div>//Pernyataan hak cipta footer halaman, dll.
●Saat menulis CSS, Anda perlu menggunakan file index_psd.html. Buka file ini dengan DW dan pilih mode tampilan. Anda dapat mengukur panjang dan lebar setiap blok dengan menarik garis bantu untuk memberikan referensi untuk pengaturan CSS keuntungannya adalah Halaman yang direkonstruksi dapat akurat hingga 1 piksel.
●Setiap kali Anda menulis sebuah blok, Anda perlu menggunakan IE dan ff untuk menguji efeknya sehingga masalah dapat segera ditemukan dan diselesaikan. Jika setiap blok tidak memiliki konten, yang terbaik adalah menambahkan warna latar belakang ke dalamnya.
●Setelah menulis bagian besar, lalu analisa isi di bagian besar. Prinsip yang sama adalah memulai dengan keseluruhan lalu bagian-bagiannya. Misalnya, halaman konten terlihat seperti ada dua bagian di kiri dan kanan waktu, kita dapat menulis kode sebagai:
<div id=”header”></div>//Tempat header dan navigasi, dll.
<div id="content">//Konten tema halaman
<div class="content-2-1"></div>//Kiri
<div class="content-2-2"></div>//kanan
</div>
<div id=”footer”></div>//Pernyataan hak cipta footer halaman, dll.
Tabel 2 pada konten-2-1 dibagi menjadi dua kolom, 2-1 mewakili kolom kiri, dan 2-2 mewakili kolom kanan. Cara pembagian kolom ini dapat membuat Anda lebih intuitif saat melihat kode halaman kolom, ini Keuntungannya lebih jelas.
●Daftar berita, daftar artikel, dll. paling baik digunakan:
<ul>
<li>Judul Berita 1< >
<li>Judul Berita 2< >
............
<li>Judul Berita< >
</ul>
●Daftar kolom plus deskripsi paling baik digunakan:
<dl>
<dt>Kolom 1</dt>
<dl>Deskripsi kolom 1</dl>
<dt>Kolom 2</dt>
<dl>Deskripsi kolom 2</dl>
</dl>
●Yang terbaik adalah menambahkan pernyataan berikut di awal definisi file CSS
badan,html{ tinggi:100% }
*{ margin:0 piksel; bantalan:0 piksel }
●Yang terbaik adalah mengatur overflow::hidden untuk blok besar, untuk memastikan bahwa wadah tidak meregang, sehingga merusak tata letak seluruh halaman.
2. Masalah DIV+CSS
1. Masalah kosong tak terduga IE6:
Ketika beberapa blok kecil diletakkan berdampingan dalam satu blok besar, jumlah lebar blok kecil sama dengan lebar blok besar. Ini tidak menjadi masalah di browser lain seperti FF, tetapi di IE6 hanya ada satu blok. Jika tidak dapat ditampilkan, itu akan didorong ke bawah. Saat ini, Anda dapat mengatur css dari blok kecil untuk ditampilkan: inline. Jika ini tidak berhasil, kurangi lebar setiap blok sebanyak 1 atau 2 piksel.
2. Masalah bayangan IE6:
Terkadang di IE6, beberapa karakter di akhir konten div muncul berulang-ulang di bagian bawah DIV besar, yang tidak muncul di browser lain seperti FF. Ada dua cara untuk mengatasi masalah ini: 1) Hapus komentar; 2) Tambahkan <div class="clear"></div> setelah DIV ini.
.jernih {
ukuran font: 1px;
jelas: keduanya;
visibilitas: tersembunyi;
lebar: 1 piksel;
}
Disarankan untuk menggunakan metode kedua. Jika komentar dihapus, keterbacaan kode akan terpengaruh.
3． Masalah dengan IE6 tidak dapat memusatkan:
Secara umum, selama Anda menyetel gaya css untuk sebuah div (setel idnya ke 1): margin:0px auto;, Anda dapat memusatkan div di wadah yang menampungnya (setel idnya ke 0). sebagai berikut:
<divid="0">
<div id="1"> … </div>
</div>
Tapi IE6 tidak berfungsi. Saat ini, Anda dapat mengatur css dari div0: text-align: center;
4. Batas tak terduga muncul pada gambar tertaut di IE6
Di IE6, terkadang gambar yang ditautkan akan memiliki batas yang jelek, yang disebabkan oleh <a>. Hal ini dapat dihilangkan dengan menyetel { border:0px;} di CSS.
5. Konten di dalam DIV di FF tergelincir
Terkadang konten yang terlihat normal di IE dapat dilihat di FF tetapi konten di dalam DIV telah keluar. Situasi ini terutama terlihat ketika div memiliki batas. Hal ini karena setelah tinggi div diatur di IE, jika konten di dalam div lebih tinggi dari div, otomatis div akan bertambah tinggi. Namun FF tidak begitu fleksibel, selama tingginya dibatasi maka tidak akan berubah dengan sendirinya. Saat ini, Anda dapat mengatasi masalah ini dengan mengatur ulang ketinggian, atau Anda dapat mengatur ketinggian ke otomatis.
6． Area Hilang Tiba-tiba di FF
Layout normal di IE hilang di FF. Masalah ini sering terjadi pada blok hak cipta di pojok bawah halaman. Hal ini dapat diatasi dengan menambahkan: clear:both;
Saya tidak dapat memikirkan masalah lain saat ini. Akan selalu ada beberapa masalah yang tidak dapat dijelaskan selama proses rekonstruksi. Selama Anda pandai berpikir, bersusah payah menguji, atau mencari secara online, Anda akan selalu menemukan solusinya. Solusi dari setiap masalah adalah keuntungan besar.