Rumah > hujung hadapan web > tutorial css > Sebab dan Prinsip Mencipta Laman Web Tanpa Jadual Terjemahan_Pertukaran Pengalaman

Sebab dan Prinsip Mencipta Laman Web Tanpa Jadual Terjemahan_Pertukaran Pengalaman

WBOY
Lepaskan: 2016-05-16 12:08:15
asal
1614 orang telah melayarinya

Pada zaman pembangun web yang hanya suka mengatakan bahawa 'Jadual adalah Jahat' dan tidak dapat (atau tidak akan) menjelaskan sebabnya, artikel ini akan cuba memberi anda beberapa sebab kukuh bahawa orang membuat reka bentuk tanpa meja faedah mencipta tapak tanpa meja, dan cara menjual keinginan anda untuk mengubah tapak web anda kepada pengurus yang tahan
Untuk sementara waktu, pereka web berkata: Meja adalah syaitan! Tetapi mereka tidak dapat memberitahu mengapa. Di sini saya akan memberikan anda beberapa sebab yang meyakinkan mengapa orang enggan menggunakan jadual untuk membuat halaman web. Disertakan empat faedah mencipta tapak web bebas bentuk, serta cara mengubah tapak web anda menjadi "domerator" yang berkekalan dan memasarkannya.
Mari kita mulakan dengan faedah susun atur tanpa meja Ini hanya mengikut urutan yang saya rasa ia perlu dimasukkan, beberapa perkara lebih penting kepada orang lain, jadi letakkan kedudukan mereka mengikut kehendak anda
Mari kita mulakan dengan Mari mulakan dengan faedah susun atur meja. Ia disertakan di sini kerana ia penting kepada ramai orang.
Memaksa Anda Menulis Kod Yang Dibentuk Dengan Baik
Memaksa anda menulis kod yang dibentuk dengan baik
Anda tidak boleh mempunyai reka letak tanpa meja yang dibuat dengan betul, dan menggunakan kod yang tidak betul dan bukan standard Baik, biar saya betulkan -. anda boleh (secara teknikal anda boleh melakukannya) tetapi ia mengalahkan keseluruhan tujuan Apabila anda mencipta reka bentuk tanpa meja, anda sepatutnya menggunakan kod yang mematuhi piawaian Perkara yang baik.
Anda tidak boleh menggunakan kod yang tidak sesuai atau tidak standard untuk reka letak tanpa meja. Izinkan saya membetulkan anda - anda boleh (secara teknikal sahaja), tetapi berbuat demikian mengalahkan semua matlamat. Apabila anda mereka bentuk tanpa jadual, anda mesti menggunakan set kod standard yang sesuai. Saya fikir apa sahaja yang membantu anda membangunkan tabiat pengaturcaraan yang baik adalah perkara yang baik.
Masa Pemuatan Lebih Cepat
Muat turun dengan lebih pantas
Ini benar-benar merupakan faedah reka letak tanpa meja, dan atas beberapa sebab Pertama, pada tahap asas - jadual dimuatkan dengan perlahan, melainkan anda menetapkan ketinggian dan lebar elemen jadual anda, semua teks perlu dimuatkan dan diberikan SEBELUM saiz jadual itu sendiri ke halaman Sudah tentu, ini adalah perkara yang begitu ramai orang suka tentang jadual, bukan? . Kelemahannya ialah berapa banyak masa yang mereka ambil untuk memuatkan
Susun atur tanpa meja adalah sangat berfaedah, termasuk sebab berikut: 1. Dari prinsip asas, menggunakan susun atur jadual akan memperlahankan kelajuan muat turun Tidak kira bagaimana anda menetapkan ketinggian dan lebar elemen jadual, semua elemen dalam jadual akan dimuatkan sebelum memuatkan jadual. Ini mungkin sebab mengapa ramai orang berminat pada susun atur meja. Sebenarnya, jadual cenderung bersaiz besar, jadi ia sebenarnya mengambil masa yang lebih lama untuk dimuatkan. Kita tidak boleh mengabaikan masa muat turunnya.
Baiklah, jadi penyelesaian untuk masa pemuatan itu ialah menetapkan semua nilai secara eksplisit, kan? Jadi sekarang kita lihat satu lagi keburukan. Kekacauan kod yang meningkatkan masa pemuatan. Pertama sekali, hanya dengan sendirinya, jadual mengambil banyak kod. Berapa jumlah teg buka dan tutup purata ada pada susun atur berasaskan jadual anda? tan. Perlu menetapkan semua nilai secara eksplisit hanya menambah pada saiz halaman dan masa pemuatan. Terdapat banyak percubaan yang telah dilakukan dalam topik ini, saya akan menunjukkan anda ke arah yang ini yang StopDesign lakukan pada                                                                                                                                                                                                                                  Pembuatan semula itu menunjukkan pengurangan saiz fail 62% tapak dan menggunakan purata pukulan setiap bulan untuk tapak Microsoft, mengira bahawa Microsoft akan menjimatkan 924 GIGS dalam lebar jalur dan tempoh 3 2 hari setiap tahun. Untuk mana-mana syarikat yang membayar untuk lebar jalur, perkara ini penting. 
因此,我们必须把所有的值设置清楚,从而减少下载的时间。接下来让我们们物让我们物码的混乱会增加加载的时间。首先,表格本身包含了大量的代码,你可以数数看其中包含了几个“td”开始和结束标签,我想应该是很多吧。上了了吧。为了了点,必须增加网页的尺寸从而导致下载时间延长。关于这个主题,我们已进行了多次实验。尽量不要再使用表格进行布局了,看看微软的做法吧,他们家家的已经开始使用非表格布局了。研究表明,这种做法为该网站节省了62%的空间大小;通过每月平均点击率计算,微软将每天节省924 GIGS的带宽,一年将作住的2。任何一家带宽占用较大的公司,这样做都是非常必要的。
Lebih mudah dibaca Kod 
增加代码的易读性
Jika anda menggunakan kod standard, konvensyen dokumen semantik dan susun atur tanpa meja, kod anda hanya tidak selaras beberapa tambahan simbol.  🎜如同一个带有一些特殊符号的惯用文本。
Itu adalah faedah yang besar kerana ia bukan sahaja memudahkan anda untuk mengemas kini, malah ia memudahkan pengguna bukan teknikal untuk membuat perubahan kecil. Selain itu, jika anda bekerja sebagai pembangun web dalam lebih kapasiti bebas, adalah biasa ada pembangun web sepenuh masa yang perlu menyelenggara laman itu. Kod yang bersih dan mudah dibaca menjadikan peralihan yang mudah. Kami suka apabila orang membiarkan kita mudah memahami kod, kan? Mari kita membalas budi. 
使用非表格布局的好处不仅在于方便你对网页进行更新,而且还可以佬还可以佬使靑微地修改和转换。另外,如果你是一个自由职业的网页设计师,你也可以让专业网页设计师记住你的网站。代码的简明性可以使代码转化工作变得。望代码开发者们为我们留下的是简单的代码,所以,当我们书写代码时,也考虑考虑这点吧。
Cetak Paparan Bergantian
Takrifan gaya yang mudah
Apabila anda membuat halaman menggunakan susun atur jadual, malangnya anda terkunci ke dalam reka letak tertentu Pembangun yang telah mencipta tapak web berasaskan jadual, seperti yang dilakukan oleh kebanyakan kita pada satu ketika - terutamanya jika anda berada dalam industri sebelum pergerakan tanpa meja besar, ketahui bahawa anda sering perlu membuat versi boleh cetak yang berasingan bagi halaman anda Ini boleh, tidak perlu dikatakan, agak memenatkan
Apabila kita mencipta halaman web menggunakan susun atur jadual, anda tidak seharusnya berpegang pada satu kaedah susun atur tertentu. Pembangun yang menggunakan reka letak jadual, seperti kebanyakan kita, mesti sedar bahawa jika anda mereka bentuk sebelum pergerakan "tanpa jadual", anda perlu membuat reka letak yang berasingan untuk setiap gaya, adalah sangat membosankan untuk melakukannya.
Kemudahan kawalan gaya pencetakan adalah faedah besar dengan reka letak tanpa meja Anda boleh membuat satu gaya cetakan baharu dengan mudah yang terpakai pada semua halaman anda, bukannya menjadikannya secara individu, tetapi ada lagi.
Kawalan gaya keluaran yang mudah ialah kelebihan besar bagi reka letak tanpa meja. Anda boleh membuat reka letak baharu yang mudah dan menerapkannya pada semua halaman web anda tanpa perlu mereka bentuk gaya untuk setiap halaman. Ini sudah pasti akan menjadi penjimat masa yang besar.
Walaupun anda boleh mengawal semua elemen dengan pendekatan ini, kunci terbesar ialah penyusunan maklumat dalam halaman itu sendiri dengan menggunakan contoh, mari kita anggap bahawa susunan paparan kita mahu semua halaman kita dicetak menggunakan susunan berikut: Pengepala halaman. pertama, kandungan seterusnya, berita istimewa selepas itu, kemudian senarai pautan, dan kemudian pengaki Walau bagaimanapun, kami masih mahu ia dipaparkan seperti biasa apabila melihat (bermaksud pengepala di bahagian atas, pautan di sebelah kiri. kandungan di tengah, berita di sebelah kanan dan pengaki di bahagian bawah). Dengan reka letak berasaskan jadual, anda perlu membuat halaman baharu untuk melakukan organisasi percetakan khas itu kerana gaya cetakan akan membaca lajur anda dari kiri ke kanan. Dengan reka letak tanpa jadual, anda tidak terikat dengan ini. Anda boleh memesan kandungan dalam halaman anda mengikut cara yang anda suka, dan masih mengawal penampilannya... semuanya dengan menggunakan CSS sahaja
Apabila anda menggunakan ini Apabila mengawal semua elemen dengan cara ini, perkara utama pertama yang perlu dipertimbangkan ialah: cara mengatur semua maklumat pada halaman itu sendiri dengan berkesan. Mari kita bayangkan pengisihan berikut: pertama bahagian atas halaman, kemudian kandungan, kemudian maklumat berita khusus dan senarai pautan, dan akhirnya pengaki. Walau bagaimanapun, kami masih mahu ia dipaparkan mengikut tabiat penyemakan imbas biasa kami (iaitu: pengepala di bahagian atas; senarai pautan di tengah kiri; kandungan di tengah; berita di tengah kanan; pengaki di bahagian bawah). Jika anda menggunakan reka letak jadual, anda perlu membuat halaman baharu kerana jadual dibaca dari kiri ke kanan namun, jika anda menggunakan reka letak tanpa meja, anda tidak terikat dengan borang ini. Anda boleh meletakkan kandungan mengikut cara yang anda mahukan dan mempunyai kawalan yang hebat ke atasnya. Anda hanya perlu menggunakan CSS untuk mencapai tujuan di atas dengan lancar.
Selain itu, kerana kami boleh meletakkan kandungan dalam apa jua susunan yang kami mahukan dalam HTML, dan kemudian mengalihkan blok kandungan untuk tontonan tapak web menggunakan CSS - kami boleh mempunyai kawalan tertinggi ke atas pembentangan CSS meletakkan semua atau sebahagian daripada kandungan di mana-mana sahaja dalam halaman HTML, jadi kami boleh mempunyai kawalan sewenang-wenang ke atas cara ia muncul.
Itu sangat penting kerana kod yang bersih dan keupayaan untuk mengubah persembahan bermakna tapak anda boleh dilihat oleh seseorang pada skrin telefon mudah alih yang kecil. Fleksibiliti dan organisasi membawa kepada keupayaan untuk mencipta tapak web yang berkuasa yang mengambil kesempatan daripada beberapa kemungkinan dengan XHTML
Oleh kerana penyederhanaan kod sangat penting, ia boleh mengawal ekspresi dan lokasi kandungan sesuka hati, oleh itu, Walaupun pada. skrin telefon mudah alih, anda boleh memaparkan halaman web anda dengan mudah. Kami boleh menggunakan kebolehlanjutan dan organisasi XHTML untuk mencipta tapak web yang sangat baik.
Pengoptimuman Enjin Carian
Pengoptimuman Enjin Carian
Disebabkan fakta bahawa anda boleh menyusun kandungan anda yang paling penting di bahagian atas halaman anda, tanpa menjejaskan reka letak, halaman anda boleh dioptimumkan dengan lebih baik untuk enjin carian contohnya, katakan bahawa saya mempunyai bar navigasi di sebelah kiri halaman yang menyenaraikan banyak bahagian tapak yang sebenarnya merupakan kata kunci yang hebat. Saya boleh memindahkan kod bar navigasi itu lebih tinggi dalam HTML sebenar saya, tanpa mengubah reka letak, kerana Saya menggunakan CSS untuk meletakkan navigasi di tempat yang saya inginkan
Oleh kerana anda boleh menggunakan reka letak tanpa meja untuk meletakkan kandungan paling penting di bahagian atas halaman tanpa menjejaskan keseluruhan reka letak, maka halaman anda Boleh melakukan pengoptimuman enjin carian. ke tahap maksimum. Sebagai contoh, saya meletakkan bar navigasi di sebelah kiri halaman dan menulis beberapa kata kunci dengan kadar perhatian yang sangat tinggi padanya. Oleh itu, saya boleh menulis kod bar navigasi sebelum kod HTML tanpa menjejaskan keseluruhan susun atur halaman. Kerana saya menggunakan CSS untuk menyesuaikan kedudukannya.
Enjin carian tersebut juga boleh mencari perkataan biasa dengan lebih jelas melalui dokumen anda tanpa perlu menapis melalui kod Enjin carian mengutamakan tapak web yang mempunyai nisbah kandungan kepada kod yang lebih tinggi, jadi meletakkan semua elemen gaya anda ke dalam helaian gaya CSS luaran anda menjadikan tapak anda. sangat kandungan berdasarkan enjin carian, seperti yang dinyatakan sebelum ini, mengurangkan saiz halaman dan masa pemuatan - satu lagi bonus kepada enjin carian
Enjin carian boleh mencari kata kunci biasa di seluruh dokumen tanpa kod penapis. Enjin carian akan mencari halaman yang bahagian kandungan mengambil bahagian yang lebih besar daripada halaman Oleh itu, meletakkan elemen gaya dalam helaian gaya luaran boleh menyerlahkan kandungan. Reka letak tanpa jadual yang dinyatakan di atas dengan ketara mengurangkan saiz halaman dan masa muat turun, serta boleh menggunakan enjin carian dengan lebih baik.
Fleksibiliti Persembahan
Kebolehsuaian menyeluruh
Membuat perubahan pada reka letak Tanpa Meja berasaskan CSS adalah mudah Anda boleh mengubah fail CSS sahaja, menukar seberapa banyak gaya dan grafik yang anda mahukan halaman di tapak web anda dan menghapuskan keperluan untuk mengemas kini banyak halaman secara manual
Reka letak tanpa meja berdasarkan CSS ialah kaedah yang sangat mudah. Anda boleh menukar gaya dan imej yang anda inginkan dengan mengubah fail CSS. Menggunakan helaian gaya berlatarkan di seluruh tapak web anda boleh mengurangkan beban kerja kemas kini halaman harian.
Untuk salah satu contoh yang paling terkenal tentang betapa hebatnya persembahan, anda boleh melawati CSS Zen Garden dan menavigasi pautan 'Pilih Reka Bentuk' untuk melihat perbezaan Setiap reka bentuk yang berbeza menggunakan fail HTML yang sama kandungan. Satu-satunya perkara yang berubah ialah fail CSS untuk setiap satu
Anda boleh melawati tapak web terkenal: CSS Zen Garden, yang merupakan klasik dari segi reka letak halaman keseluruhan.Anda boleh melihat gaya reka letak yang berbeza dengan mengklik "Pilih Reka Bentuk" pada bar navigasi. Setiap gaya reka bentuk yang berbeza menggunakan kandungan HTML yang sama. Ia hanya mengubah kandungan HTML dengan menggunakan CSS yang berbeza.
Menjual Diri Anda Dengan Piawaian
Menjual Diri Anda Dengan Piawaian Berbeza
Kadangkala mengetahui cara mengekodkan piawaian dan mencipta reka letak tanpa meja yang fleksibel tidak mencukupi. Terdapat beberapa pereka web yang paling kerap menghadapi kesukaran kesukaran tersebut berpunca daripada pihak pengurusan yang tidak menyedari faedah menggunakan kandungan tanpa meja dan reka letak dipacu CSS
Maksudnya di sini ialah: menggunakan kod standard untuk mencipta reka letak tanpa meja boleh skala tidak mencukupi. Sesetengah pereka laman web masih menghadapi banyak kesukaran dalam pengurusan laman web. Dalam kebanyakan kes, ini disebabkan oleh mengabaikan kandungan susun atur tanpa meja dan kaedah susun atur CSS.
Jika anda ingin mereka bentuk untuk standard, tetapi anda bekerja untuk syarikat yang tidak terlalu berfikiran ke hadapan dalam memberi anda masa untuk melakukan perubahan -- cuba ini: Buat mereka berfikir tentang buku poket mereka faedah penjimatan kos
Jika anda ingin menjalankan reka bentuk standard, tetapi syarikat anda tidak membenarkan ini kerana ia mungkin melambatkan masa. Jadi inilah yang anda lakukan: tuliskannya dalam buku nota poket dan tunjukkan tempat anda boleh menjimatkan wang.
Sebagai contoh, cuba ambil satu halaman kod sedia ada. dan bilangan hari setiap bulan Kemudian terangkan kepada mereka jumlah kos lebar jalur yang dijimatkan setiap bulan jika ini dilakukan di seluruh tapak. Jika itu tidak mencukupi, tunjukkan kepada mereka seberapa cepat anda boleh membuat perubahan pada tapak web apabila ia adalah CSS didorong, dan mendorong idea bahawa anda akan dapat menukar tapak dengan lebih pantas apabila terdapat kemas kini yang diperlukan, dan anda akan mempunyai lebih banyak masa untuk menumpukan pada menambah fungsi baharu pada tapak - dan bukannya menghabiskan masa anda melakukan penyelenggaraan
Sebagai contoh, ambil sebanyak mungkin halaman kod sedia ada dan tulis semula kod dalam format kod yang ringkas dan standard. Kemudian, bandingkan perbezaan saiz antara dua halaman sebelum dan selepas (termasuk pengoptimuman imej), dan kira perbezaan saiz. Kemudian, terangkan berapa banyak kos lebar jalur yang boleh dijimatkan setiap bulan jika anda mengikut reka letak baharu. Jika ini tidak mencukupi, anda boleh menerangkan secara terperinci berapa banyak kelajuan muat turun akan dipertingkatkan jika reka letak CSS digunakan dan berapa banyak masa kemas kini boleh disimpan apabila halaman dikemas kini. Dengan cara ini, anda boleh menggunakan masa anda untuk meningkatkan kefungsian tapak web anda - sekali gus menghapuskan sebahagian besar masa penyelenggaraan.
Zusammenfassung
Zusammenfassung
Hoffentlich hilft Ihnen dieser kleine Artikel dabei, zu verstehen, warum Sie ein tabellenloses Layout verwenden sollten, welche Vorteile es hat, und Sie können ganz einfach einen Blick auf Layout Gala und werfen Laden Sie nur 1 oder alle 40 tabellenlosen Layoutbeispiele herunter, um den Einstieg zu erleichtern. Der beste Schritt beim Umstieg auf ein tabellenloses Design besteht jedoch darin, Ihre Website zunächst langsam auf eine standardkonforme Version umzustellen, bevor Sie die Tabellen entfernen Studieren Sie bis dahin so viel wie möglich über CSS, lesen Sie die Artikel hier und anderswo im Internet, und der Übergang von Tabellenlayouts zu tabellenlosen Layouts wird nur eine Frage der Zeit sein.
Der Zweck des Schreibens dieses Artikels ist: Damit jeder seine Bedenken hinsichtlich der Verwendung eines tabellenlosen Layouts überwinden und diese Methode für das Layout verwenden kann. Hier ist eine Abkürzung: Sie können die 40 vorgefertigten Vorlagenhüllen direkt auf der Website von Layout Gala für das Layout herunterladen. Bevor Sie auf die Verwendung von Tabellen verzichten, sollten Sie den Prozess, Ihre Website tabellenlos zu machen, so weit wie möglich verlangsamen. Sie sollten sich vollständig mit der CSS-Technologie vertraut machen. Nachdem Sie diesen Artikel und andere verwandte Artikel auf der Website gelesen haben, ist es nur eine Frage der Zeit, bis Sie eine Website mit einem tabellenlosen Layout erstellen.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan