Kata pengantar
Pertama kali saya menjelajahi Internet, saya menggunakan terminal bodoh. Tak lama kemudian, monitor monokrom di Minnesota dapat memutar film "Monty Python and the Holy Grail" melalui server. Tidak ada mouse, tidak ada antarmuka pengguna yang bagus, apalagi warna 24-bit. Gopher adalah satu-satunya alat yang tersedia. Pencarian hanya bisa menggunakan Archie dan Veronica. Tidak ada seorang pun yang pernah mendengar tentang W3 (World Wide Web), dan web sepertinya sudah memadai pada saat itu.
Catatan penerjemah:
1. Terminal bodoh. Mirip seperti PC, tetapi tanpa CPU, memori, dan hard drive sendiri. Transaksi diproses melalui host bersama.
2.Gopher. Aplikasi klien/server yang menampilkan semua informasi kepada pengguna akhir dalam bentuk menu dengan melakukan transfer FTP, login jarak jauh, pencarian Archie, dll., memungkinkan pengguna untuk menelusuri sejumlah besar informasi. Dengan cara ini, pengguna tidak perlu mengetahui (atau memasukkan) alamat mereka saat mengakses sumber daya Internet.
3.Archie adalah program pertama yang secara otomatis mengindeks file situs web FTP anonim di Internet, tetapi ini belum menjadi mesin pencari yang sebenarnya.
4.Veronica adalah sumber daya tipe Gopher yang dapat Anda gunakan untuk mengambil semua item menu yang berisi kata-kata khusus tertentu di ruang Gopher.
Setelah beberapa saat, kode aneh mulai membanjiri hasil pencarian saya. Saya masih bisa membaca apa yang saya butuhkan, tapi itu mengganggu. Seorang rekan memberi tahu saya bahwa itu adalah HTML, bahasa grafis untuk Internet. Saya telah mempelajari beberapa metode untuk mencoba memfilter HTML. Belakangan, monitor 256 warna dan versi pertama browser Mosaik muncul, dan segalanya mulai berubah.
Sudah lama sekali sejak saat itu, teknologi telah meningkat pesat, dan antarmuka web telah dirombak, dipikirkan ulang, dan diciptakan kembali berkali-kali. Sejak saya mulai bekerja sebagai desainer web, saya telah mengalami secara langsung berbagai fase desain berbasis tabel, kesulitan JavaScript, kesulitan dalam CSS, dan yang lebih penting, standar web yang lebih diterima secara universal.
Pada awalnya internet hanya dibuat berdasarkan ide para Geeks (fanatik teknologi). Yang ada hanyalah konten murni di internet, tidak memperhatikan warna background dan gambar yang indah. Namun kenyataannya, orang suka melihat ekspresi yang lebih kaya saat berselancar. Munculnya metode desain tabel memecahkan kesulitan ini. Kita dapat mengontrol tata letak melalui tabel! Kita semua mulai "mencurangi" sistem. Tidak bisakah kita membuat garis tipis 1 piksel? Cukup masukkan titik GIF transparan ke dalam baris tabel dan atur warna latar belakang dan selesai! Tidak dapat mengontrol font? Kemudian gunakan tag lain <font>!
Sebelum saya diperkenalkan dengan CSS dan standar web, saya telah mendesain dengan tabel selama bertahun-tahun. Metode desain standar web benar-benar berbeda dari sebelumnya. Metode ini efisien dan menawan. Saya sangat jatuh cinta dengan metode desain baru. Itu dapat menggunakan kode yang bermakna untuk memisahkan konten dari tata letak, tetapi tetap mempertahankan ruang putih dan desain yang indah. Saya langsung "menyukai yang baru dan membenci yang lama" dan tidak lagi menggunakan metode desain yang lama.
Sampai hari ini.
Ada banyak diskusi tentang standar web dan CSS. Seperti setiap kata kunci yang bagus, kata kunci ini akan menjadi "nama besar" berikutnya dalam sejarah perkembangan teknologi web. Ini dimulai dengan Dougl saat Bowman mendesain ulang Wired.com dan terus berkembang. Pada tahun 2003, buku "Designing with Web Standards" yang ditulis oleh Zeldman diterbitkan, memungkinkan kita semua untuk melihat cahayanya. Desainer di seluruh dunia menerima dan mendukung metode desain baru. Terstruktur, semantik, cepat dan ringan.
Namun masih ada sebagian orang yang masih menggunakan cara desain meja tradisional, bahkan menggunakan tag <font>. Mereka mengatakan cara tradisional lebih mudah, nyaman perawatannya, dan perkembangannya pesat. Siapa yang benar?
Saya memutuskan untuk melakukan percobaan sendiri untuk melihat bagaimana keadaan berubah dan metode mana yang kami pilih lebih baik.
tantangan
Saya merancang situs web hipotetis menggunakan perangkat lunak grafis. Kemudian gunakan dulu HTML4.01 untuk membuatnya, gunakan tabel tanpa CSS sebagai pembanding, lalu gunakan XHTML1.0 Transitional untuk membuatnya, kodenya sesuai dengan spesifikasi kegunaan dan aksesibilitas, dan sebisa mungkin gunakan CSS untuk menghindari tabel; (kecuali tabel Digunakan untuk mewakili data tabel.)
Proses produksinya dibagi menjadi tiga tahap, prosesnya dicatat secara detail, lalu dibandingkan pro dan kontranya untuk melihat apa yang didapat? Apa yang hilang? Kita harus berada di pihak mana.
Fase Satu: Rancang Situs
Saya mulai merancang situs fiksi. Saya berasumsi saya sedang membuat situs web untuk organisasi bernama "Asosiasi Pengamat Kupu-Kupu". Haha, ini mungkin klien terbaik saya yang tidak akan terlibat dalam proses desain. Saya mencoba membuatnya serealistis mungkin, membayangkan target pengguna situs web, menggunakan tata letak tradisional dan font resmi.
Saya ingin situsnya kompak, efektif, dan ringkas. Selain itu, saya pikir pasti ada kupu-kupu di halaman tersebut, jadi saya mencari gambar kupu-kupu yang cocok ke mana-mana dan segera menemukannya di stock.xchng. Kupu-kupu biru yang beristirahat di antara dedaunan hijau sangat cocok dengan gambar situs tersebut. Setelah beberapa pemrosesan dan modifikasi, gambar ini menjadi header halaman kami.
Selama proses desain, saya mematuhi beberapa prinsip kegunaan. Misalnya, usahakan ukuran file gambar sekecil mungkin. Awalnya saya berencana menggunakan font Garamond untuk navigasi. Kemudian, mengingat mesin pengguna mungkin tidak memiliki font ini, saya memutuskan untuk menggunakan font Georgia (font ini mirip dengan Times New Roman, dan dalam kasus terburuk, bisa diganti dengan font Times New Roman) . Namun untuk gambar headernya saya tetap menggunakan Georgia karena berupa gambar.
Teksnya berlatar belakang abu-abu dan menggunakan font Trebuchet MS; beritanya menggunakan font Verdana, yang juga terlihat bagus saat diperkecil. Ada aturan praktis tidak tertulis untuk menggunakan 4 font dalam sebuah desain, dan saya kurang setuju dengan itu.
Tahap kedua: "Gunakan metode sebelumnya dan gunakan gambar GIF transparan untuk mengontrol jarak."
Jika Anda sudah menjadi seorang desainer web yang telah berpartisipasi dalam banyak proyek, struktur berikut ini sangat familiar bagi Anda:
<tabel bgcolor="#ffffff" cellpacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Konten ada di sini.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </tabel>
Kami terbiasa menggunakan tabel untuk berbicara karena tabel adalah "blok penyusun" kami yang paling dasar. Misalnya: menggunakan gambar GIF transparan untuk mengontrol jarak, dan menggunakan berbagai atribut tabel untuk mengontrol posisi. Seseorang menjelaskannya seperti ini: Tabel dapat diandalkan, dan halaman yang ditata dengan tabel dapat kompatibel ke depan! Tidak ada css yang berani bersaing dengan tabel, tabel bisa muat semua browser dan lain sebagainya.
Mari kita mulai dengan mereproduksi seluruh proses desain langkah demi langkah.
jam 1
Oh. Sepertinya kita bisa kembali ke masa lalu. Bagaimana kita bisa menentukan warna latar belakang tanpa menggunakan CSS? Oh ya... itu bgcolor, terima kasih atas tipnya. Oke, mari kita mulai membuat formulir dan melihat dulu efeknya. Saya mendefinisikan "align=center" sehingga akan terpusat di semua browser, bagus, betapa mudahnya! Bentuknya tidak terlihat buruk, dan saya merasa seperti bertemu kembali dengan teman lama. Saya ahli menggunakan gambar GIF transparan untuk mengontrol jarak, dan pekerjaan berjalan dengan cepat! kebaikan? Mengapa ada ruang kosong antara header dan menu? Oh ternyata ada spasi tambahan setelah kode gambar, dan browser IE akan menampilkannya. Ini mudah diubah, cukup hapus spasinya.
Jam 2
Saya menggunakan javaScript untuk membuat efek flip untuk menu navigasi:
<td ... onMouseOver="chBg(ini);" onMouseOut="chBg2(ini);"
JavaScript ditulis seperti ini:
fungsi chBg(obj) { obj.bgColor = "#E1E5DB"; } fungsi chBg2(obj) { obj.bgColor = "#CBD1C3";
Selain fakta bahwa saya sedikit lupa tentang metode desain lama, keseluruhan kemajuannya cukup cepat. Meskipun saya mencoba mengurangi susunan tabel sebanyak mungkin, kodenya masih terlihat agak rumit, jadi saya menambahkan beberapa komentar untuk memudahkan menemukan tempat yang perlu kita modifikasi.
Saya mengalami masalah kecil: Saya tidak dapat menghapus garis bawah tautan tanpa menggunakan css. Mungkin ada solusinya, yuk cari di google.
Jam 3
Setelah mencari di google, saya masih belum menemukan caranya. Bagaimana cara membuat link tanpa garis bawah? Pasti ada solusinya!
jam ke-4
Mari kita lihat hasil 4 jam pertama di browser selain IE6. Oh! Sangat jelek di Firefox, terlihat bagus di Opera dan Netscape.
Jam 5
Silakan kode..., debug dan modifikasi.
Di tempat kerja, saya menyadari keterbatasan tag <font> untuk mengontrol ukuran font. Brengsek!
Saya juga mengalami masalah dengan tata letak teks di bagian Berita untuk membuat indentasi, saya harus menggunakan lebih banyak tabel yang disusun untuk mencapai efeknya. Untuk menyusun gambar kupu-kupu pada teks di sebelah kanan teks, saya juga harus menambahkan tabel untuk menyelesaikan masalah. Penyusunan huruf yang "curang" seperti ini membuat saya merasa tidak berdaya.
Jam 6
Desainnya sudah selesai dan tampilannya hampir sama dengan desain aslinya, Anda dapat klik di sini untuk melihatnya.
Klik di sini untuk melihat berapa banyak tabel yang disertakan.
Fase 3: Kami tidak memerlukan formulir!
Di bawah ini kita akan melihat apa itu desain berdasarkan standar web dan ditata dengan CSS. Saya akan mulai dengan identifikasi konten. Saya akan mencoba membuat logo menjadi semantik dan menghindari tag yang berlebihan.
Headernya berupa gambar, tapi juga judul, jadi saya tulis kodenya seperti ini:
<h1>Asosiasi Pengamat Kupu-Kupu. Mereka beterbangan. Kami mengawasinya.</h1>
Saya akan memikirkan cara menampilkan judul ini dengan benar nanti (idealnya, kami sebisa mungkin memperhatikan konten dan sesedikit mungkin memperhatikan tata letak). Judul lainnya (berita, penampakan dan keanggotaan) akan diidentifikasi sebagai <h2>.
Suatu menu pada dasarnya merupakan suatu daftar (list) yang tidak berurutan, sehingga akan dikenali sebagai suatu daftar. Paragraf tidak perlu diklasifikasikan (kami menggunakan pemilih warisan untuk "menggantungnya" di lapisan yang memuatnya). Saya akan membandingkannya dengan teks konten asli untuk melihat berapa banyak tag tambahan yang perlu saya tambahkan untuk mencapai tata letak (saya akan mencoba menghindari penambahan tag sebanyak mungkin).
Ini adalah teks konten asli. Lihatlah kode aslinya, ini sesuai dengan spesifikasi transisi xhtml1.0. Perhatikan bahwa semua elemen sudah ada di dalam <div> dengan nama yang ditentukan. Tanggal pada berita juga telah ditambah dengan kelas tanggal. Anda dapat melihat kodenya sangat sederhana.
jam 1
Tentukan batas lapisan "wadah" menjadi 1px. Pusatkan konten dengan mendefinisikan "text-align: center" dalam gaya isi. Agar terpusat di semua browser, margin: 0 auto; (artinya top=0, right=auto, bottom=0, left=auto) juga didefinisikan dalam "container". Pemusatan dapat dilakukan semudah dengan tabel.
Tentukan nilai padding "atas" dan "bawah" dari "body" menjadi 20px (tidak secara langsung mendefinisikan padding di "container" agar sesuai dengan semua browser).
Daftar tak berurutan (li) harus didefinisikan sebagai "display:inline" sehingga menu akan ditampilkan dalam satu baris. Saya menambahkan ikon navigasi antar menu. Ikon navigasi ini ditentukan menggunakan metode latar belakang yang tidak berulang, yang dapat menentukan posisi (x, y) secara akurat, serupa dengan ini:
latar belakang: url(menuBullet2.gif) no-repeat 4px 9px; Efek perubahan warna klik pada menu mengadopsi gaya hover tautan, tidak lagi memerlukan JavaScript.
Saya mengatur gambar kupu-kupu di bagian atas halaman sebagai latar belakang <h1>, sehingga saya tidak perlu khawatir tentang kemudahan penggunaan, dan judul dapat dibaca secara normal pada perangkat yang tidak dapat menampilkan gambar (seperti layar pembaca dan robot pencari).
Jam 2
Item menu pertama (HOME) menggunakan ikon yang berbeda dan saya harus menyembunyikan latar belakang asli dan menambahkan id tambahan (pertama) ke menu HOME:
#hMenu ul li #pertama
Ikon (KONTAK) lainnya:
background: url transparan(menuBullet3.gif) no-repeat 615px 9px; Saya tidak dapat menggunakan CSS untuk mengontrol dua kolom agar memiliki ketinggian yang sama. Saya mendefinisikan "wadah" yang mengulangi latar belakang secara vertikal.
latar belakang: #fff url(bgMain.gif) ulangi-y;
Jam 3
Kotak definisi CSS jauh lebih nyaman daripada tabel, terutama karena banyaknya properti batas yang sangat berguna.
Sekarang saya mulai mendefinisikan header <h2>. Pengertian icon sama seperti di atas.
Saya melayangkan layer "berita" di sebelah kanan "penampakan" dan "keanggotaan". Definisikan layer "hak cipta" dengan "clear: keduanya;" sehingga mengikuti lapisan mengambang. Apungkan gambar kupu-kupu pada teks ke sebelah kanan, dan teks secara otomatis dapat membungkus gambar tersebut. Menentukan batas 1 piksel gambar dan mengatur jarak padding dapat mencapai efek bersarang dari dua tabel asli.
Beberapa masalah ditemukan: lapisan hak cipta dan lapisan konten sebagian tumpang tindih.
jam ke-4
Kesalahan yang ditampilkan terkait dengan definisi "penampakan" dan "keanggotaan" float:right; Mengambangnya ke kiri memecahkan masalah ini, yang tampaknya aneh. Saya menggunakan Firefox untuk pengujian pertama. Yah, tampilannya tidak buruk, hanya saja ikon menunya telah digeser beberapa piksel.
Ada beberapa teknik CSS yang dapat memperbaiki efek tampilan di browser non-IE, seperti memberikan nilai properti yang berbeda ke browser yang berbeda.
Saya menggunakan nilai !important dalam definisi elemen yang sama. Definisi yang sama yang ditulis di depan dapat dieksekusi terlebih dahulu.
latar belakang: url(menuBullet2.gif) tanpa pengulangan 4px 6px !penting;
latar belakang: url(menuBullet2.gif) tanpa pengulangan 4px 9px;
Dalam CSS, jika ada beberapa definisi untuk elemen yang sama, yang terakhir akan valid. Namun karena IE tidak mendukung !important, IE akan menggunakan nilai yang ditentukan kedua, dan browser lain akan menggunakan nilai yang ditentukan pertama.
Selesai semua, lihat hasilnya disini.
sebagai kesimpulan
desain berbasis tabel
Saya menguji halaman tersebut menggunakan setiap browser yang dapat saya temukan, termasuk browser untuk platform Linux, Windows, dan Macintosh. Halaman tata letak tabel terlihat sama di browser yang berbeda. "Ini sekokoh batu", ini adalah komentar pertama yang diberikan pada tata letak tabel.
Namun, jika perlu mengubah sebagian konten halaman, mengubah tata letak tabel cukup melelahkan. Ini yang menjadi masalah, jika kita menggunakan CMS (content management system) akan merepotkan konten yang akan diformat.
Keseluruhan waktu desain agak lama karena saya lupa cara lama. Kalau saya ulangi, saya rasa bisa menghemat 1-2 jam.
Saya menggambarkan desain berbasis tabel sebagai "pekerjaan kasar", meskipun saya sering terkejut dengan teknik desain tingkat lanjut. Dengan desain berdasarkan CSS murni, saya biasanya terbiasa memecah desain dan menganalisis bug langkah demi langkah. Namun, menggunakan desain meja tidak memerlukan pekerjaan ini. Anda hanya perlu terus memasukkan tabel ke dalam desain. Mari kita lihat lagi proses CSSnya.
Desain berbasis CSS
Mendesain dengan CSS terasa jauh lebih baik. Perubahan kode bersifat langsung dan transparan, dan saya dapat dengan jelas mengontrol seluruh proses. Sebaliknya, desain tabelnya seperti memasang batu bata. Semakin besar perubahan pada halaman, desain CSS menjadi lebih nyaman dan efisien.
Desain CSS juga sangat berarti untuk menghemat bandwidth. Mengekstrak semua gaya ke dalam file terpisah dan menggunakan satu atau beberapa file style sheet untuk keseluruhan situs dapat membuat keseluruhan situs menjadi lebih kecil.
Memisahkan informasi tata letak dari konten juga memiliki banyak manfaat. Kedepannya, saya dapat mengubah seluruh situs kapan saja tanpa mengubah apa pun, sama seperti CSS Zen Garden. Ini juga meningkatkan kemudahan penggunaan, sehingga memudahkan robot pencari menemukan halaman Anda (ingat: Google adalah sumber pengunjung terpenting Anda).
Meskipun efisiensi kerja Anda sangat tinggi ketika Anda sudah familiar dengan desain berbasis CSS, Anda harus menghabiskan banyak waktu mempelajari aturan, perbedaan model kotak, teknik pemrosesan browser, dan banyak teori, serta memerlukan latihan terus menerus untuk menguasainya. . Singkatnya, CSS lebih sederhana daripada tabel, tetapi jika Anda ingin mendesain menggunakan CSS murni, bersiaplah untuk menginvestasikan banyak waktu untuk mempelajarinya. Bahkan jika Anda seorang pengembang berpengalaman, Anda harus siap menghadapi berbagai bug. Terkadang diperlukan waktu beberapa jam untuk mengatasi suatu bug.
pemenang
CSS dan desain berbasis standar web menang. Hanya dengan melihat kode untuk kedua metode sudah cukup untuk membuat pilihan. CSS menawarkan lebih banyak manfaat (terutama dalam hal kemudahan penggunaan). Faktanya, alasan mendasarnya adalah kemalasan saya. Jika saya menggunakan desain tabel dan klien menghubungi saya setahun kemudian dan mengatakan bahwa itu perlu direvisi, saya dapat memberi tahu dia bahwa saya telah bergabung dengan tentara dan berada di negara asing. Jika saya menggunakan CSS, saya akan mengubahnya untuk klien tanpa berpikir dua kali karena saya tidak perlu menemukan kembali rodanya.