Raisons et principes pour créer un site Web sans table Translation_Experience Exchange

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. Jadi 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 membuat reka bentuk tanpa meja, 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.
D'accord, donc la solution à ce temps de chargement est de définir toutes les valeurs explicitement, n'est-ce pas ? Alors maintenant, nous voyons un autre inconvénient. Encombrement de code qui augmente le temps de chargement. Tout d'abord, à elles seules, les tables nécessitent beaucoup de code. Combien de balises td d'ouverture et de fermeture votre disposition moyenne basée sur un tableau possède-t-elle ? Des tonnes. Le fait de devoir définir toutes les valeurs explicitement ne fait qu'augmenter la taille de la page et le temps de chargement. Il de de nombreuses expériences qui ont été réalisées sur ce sujet, je vous diriger vers ce ce que StopDesign a fait sur un remake du site Web de Microsoft d'un site basé sur des tables à une mise en page sans table. Ce remake a montré une réduction de 62 % de la taille de fichier du site et en utilisant leurs visites moyennes par mois pour le site Microsoft, calculé que Microsoft économiserait 924 GIGS en bande passante par jour et 329 Téraoctets de bande passante par an. Pour toute entreprise qui paye pour la bande passante, ces éléments sont importants. 
因此，我们必须把所有的值设置清楚，从而减少下载的时间。接下来让我们看看其它的缺点吧：代码的混乱会增加加载的时间。首先，表格本身包含了大量的代码， "td"一点，必须增加网页的尺寸从而导致下载时间延长。关于这个主题，我们已进行了多次实验。尽量不要再使用表格进行布局了，看看微软的做法吧，他们原来是使用表格布62 %的空间大小；通过每月平均点击率计算，微软将每天节省924 GIGS的带宽，一年将节省329Terabytes的带宽。这样做都是非常必要的。
Code plus facile à lire
增加代码的易读性
Si vous utilisez du code standard, des conventions de documents sémantiques et une mise en page sans table symboles. 
如果使用的是标准代码，标准语义文档和非表格布局，那么你的代码将看上去非常清楚，简
C'est un grand avantage car non seulement cela facilite la mise à jour pour vous, mais cela permet également à un utilisateur non technique d'y apporter de petites modifications. De plus, si vous travaillez en tant que développeur Web à titre indépendant, il est courant qu'il y ait un développeur Web à temps plein qui doit gérer ce site. Un code clair et simple à lire facilite cette transition. Nous aimons que les gens nous laissent un code facile à comprendre, n'est-ce pas ? Renvoyons la pareille. 
使用非表格布局的好处不仅在于方便你对网页进行更新，而且还可以使非转业的人对其进行细微地修改和转换。另外，如果你是一个自由职业的网页设计师，你也可以让专业网页设计师记住你的网站。代码的简明性可以使代码转化工作变得非常容易。我们都希望代码开发者们为我们留下的是简单的代码，所以，当我们书写代码时，也考虑考虑这点吧。
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.
C'est très important car le code propre et la possibilité de modifier la présentation signifient que votre site peut être consulté par quelqu'un sur un petit écran de téléphone mobile. La flexibilité et l'organisation permettent de créer un site Web puissant qui tire parti de certaines des possibilités du XHTML
Parce que la simplification du code est si importante, elle peut contrôler l'expression et l'emplacement du contenu à volonté, même sur. un écran de téléphone portable, vous pouvez facilement afficher votre page Web. Nous pouvons utiliser l'extensibilité et l'organisation de XHTML pour créer d'excellents sites Web.
Optimisation des moteurs de recherche
Optimisation des moteurs de recherche
Étant donné que vous pouvez organiser votre contenu le plus important en haut de votre page, sans affecter la mise en page, votre page peut être mieux optimisée pour les moteurs de recherche. Par exemple, disons que j'ai une barre de navigation sur le côté gauche de la page qui répertorie des tonnes de parties du site qui sont en fait d'excellents mots-clés. Je pourrais déplacer ce code à barres de navigation plus haut dans mon code HTML actuel, sans modifier la mise en page, car. J'utilise le CSS pour positionner la navigation là où je le souhaite.
Parce que vous pouvez utiliser une mise en page sans table pour placer le contenu le plus important en haut de la page sans affecter la mise en page entière, votre page peut alors effectuer une optimisation pour les moteurs de recherche. dans la mesure maximale. Par exemple, j'ai placé une barre de navigation sur le côté gauche de la page et j'y ai écrit des mots-clés avec des taux d'attention très élevés. Par conséquent, je peux écrire le code à barres de navigation avant le code HTML sans affecter la mise en page entière. Parce que j'utilise CSS pour ajuster sa position.
Ces moteurs de recherche peuvent également trouver plus clairement les mots courants dans votre document sans avoir à filtrer le code. Les moteurs de recherche donnent la priorité aux sites Web qui ont un rapport contenu/code plus élevé, donc en plaçant tous vos éléments de style dans votre feuille de style CSS externe, vous créez votre site. Les mises en page sans table, comme mentionné précédemment, réduisent la taille de la page et le temps de chargement - un autre avantage pour les moteurs de recherche
Les moteurs de recherche peuvent trouver des mots-clés communs dans tout le document sans filtrer le code. Les moteurs de recherche rechercheront les pages dont la proportion de contenu occupe une plus grande proportion de la page. Par conséquent, placer des éléments de style dans une feuille de style externe peut faire ressortir le contenu. La présentation sans tableau mentionnée ci-dessus réduit considérablement la taille de la page et le temps de téléchargement, et permet une plus grande utilisation des moteurs de recherche.
Flexibilité de la présentation
Adaptabilité totale
Apporter des modifications à une mise en page sans table basée sur CSS est simple. Vous pouvez modifier uniquement le fichier CSS, en modifiant autant de styles et de graphiques que vous le souhaitez. Les effets se répercutent sur tous les éléments. pages de votre site Web et éliminez le besoin de mettre à jour manuellement de nombreuses pages
La mise en page sans table basée sur CSS est une méthode très simple. Vous pouvez modifier les styles et les images souhaitées en transformant les fichiers CSS. L’utilisation de feuilles de style en cascade sur votre site Web peut réduire la charge de travail liée aux mises à jour quotidiennes des pages.
Pour l'un des exemples les plus connus de la puissance d'une présentation, vous pouvez visiter le CSS Zen Garden et parcourir les liens « Sélectionner un design » pour voir les différences. Chacun des différents designs utilise exactement le même fichier HTML. contenu. La seule chose qui change c'est le fichier CSS pour chacun
Vous pouvez visiter le fameux site : CSS Zen Garden, qui est un classique au niveau de la mise en page entière.Sie können verschiedene Layoutstile anzeigen, indem Sie in der Navigationsleiste auf „Design auswählen“ klicken. Jeder unterschiedliche Designstil verwendet genau den gleichen HTML-Inhalt. Es ändert lediglich den Inhalt des HTML durch die Verwendung unterschiedlichen CSS.
Verkaufen Sie sich mit Standards
Verkaufen Sie sich mit verschiedenen Standards
Manchmal reicht es nicht aus, zu wissen, wie man Standards codiert und flexible tabellenlose Layouts erstellt. Am häufigsten stoßen sie auf Schwierigkeiten Diese Schwierigkeiten liegen darin begründet, dass sich das Management der Vorteile der Verwendung von tabellenlosen Inhalten und CSS-gesteuerten Layouts nicht bewusst ist. Der Punkt hier ist: Die Verwendung von Standardcode zur Erstellung skalierbarer tabellenloser Layouts reicht nicht aus. Einige Website-Designer stoßen immer noch auf viele Schwierigkeiten bei der Website-Verwaltung. In den meisten Fällen wird dies dadurch verursacht, dass der Inhalt des tabellenlosen Layouts und der CSS-Layoutmethode ignoriert wird.
Wenn Sie für Standards entwerfen möchten, aber für ein Unternehmen arbeiten, das nicht sehr zukunftsorientiert ist und Ihnen nicht die Zeit gibt, an den Änderungen zu arbeiten, versuchen Sie Folgendes: Lassen Sie es über seinen Geldbeutel nachdenken die Kosteneinsparungsvorteile.
Wenn Sie ein standardisiertes Design durchführen möchten, Ihr Unternehmen dies jedoch nicht zulässt, da dies zu Zeitverzögerungen führen kann. So gehen Sie also vor: Schreiben Sie sie in ein Notizbuch und zeigen Sie auf, wo Sie Geld sparen können.
Versuchen Sie beispielsweise, eine einzelne Seite des vorhandenen Codes zu übernehmen. Vergleichen Sie die Seitengröße mit der vorherigen (einschließlich Bildoptimierung) und multiplizieren Sie dies mit der Anzahl der gespeicherten Seiten. und die Anzahl der Tage pro Monat. Erklären Sie ihnen dann, wie viel Bandbreite monatlich eingespart wird, wenn dies nicht ausreicht. Zeigen Sie ihnen, wie schnell Sie Änderungen an einer Website vornehmen können, sobald sie CSS ist angetrieben und fördern Sie die Idee, dass Sie die Site schneller ändern können, wenn Aktualisierungen erforderlich sind, und dass Sie mehr Zeit haben, sich auf das Hinzufügen neuer Funktionen zur Site zu konzentrieren – anstatt Ihre Zeit mit der Wartung zu verbringen >Ergreifen Sie beispielsweise so viele vorhandene Codepages wie möglich und schreiben Sie den Code in einem prägnanten und standardisierten Codeformat neu. Vergleichen Sie dann den Größenunterschied zwischen den beiden Seiten vorher und nachher (einschließlich der Bildoptimierung) und berechnen Sie den Größenunterschied. Erklären Sie dann, wie viel Bandbreitenkosten jeden Monat eingespart werden können, wenn Sie dem neuen Layout folgen. Wenn dies nicht ausreicht, können Sie detailliert erläutern, um wie viel sich die Download-Geschwindigkeit verbessert, wenn das CSS-Layout verwendet wird, und wie viel Aktualisierungszeit bei der Aktualisierung der Seite eingespart werden kann. Auf diese Weise können Sie Ihre Zeit nutzen, um die Funktionalität Ihrer Website zu verbessern – und so den größten Teil der Wartungszeit einsparen.
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 Layout Gala-Website 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.