Gründe und Prinzipien für die Erstellung einer tabellenfreien Website-Übersetzung_Erfahrungsaustausch

In einer Zeit, in der Webentwickler gerne sagen, dass „Tabellen böse sind“, und nicht erklären können (oder wollen), warum, versucht dieser Artikel, Ihnen einige solide Gründe dafür zu nennen, warum Menschen tabellenlose Designs erstellen. Darunter sind sechs Hauptgründe Vorteile der Erstellung tabellenloser Websites und wie Sie Ihren Wunsch, Ihre Website zu ändern, einem widerspenstigen Manager verkaufen können
Eine Zeit lang sagten Webdesigner: Tabellen sind der Teufel! Aber sie konnten nicht sagen, warum. Deshalb werde ich Ihnen hier einige überzeugende Gründe nennen, warum Menschen davor zurückschrecken, Tabellen zum Erstellen von Webseiten zu verwenden. Darin enthalten sind vier Vorteile der Erstellung einer formlosen Website sowie die Art und Weise, wie Sie Ihre Website in einen dauerhaften „Domerator“ verwandeln und ihn vermarkten können.
Beginnen wir mit den Vorteilen eines tabellenlosen Layouts. Diese sind meiner Meinung nach nur in der Reihenfolge aufgeführt, in der sie aufgeführt werden sollten. Einige Dinge sind für andere wichtiger, also ordnen Sie sie nach Belieben Beginnen Sie mit den Vorteilen des Tabellenlayouts. Es ist hier enthalten, weil es für so viele Menschen lebenswichtig ist.
Zwingt Sie dazu, wohlgeformten Code zu schreiben
Zwingt Sie dazu, wohlgeformten Code zu schreiben
Sie können kein ordnungsgemäß erstelltes tabellenloses Layout haben und falschen und nicht standardmäßigen Code verwenden. Nun, lassen Sie mich das korrigieren – Sie können es (technisch gesehen können Sie es tun), aber es macht den gesamten Zweck zunichte. Wenn Sie ein tabellenloses Design erstellen, sollten Sie meiner Meinung nach alles tun, was Sie dazu bringt, immer sauberen Code zu schreiben Gute Sache.
Sie können keinen ungeeigneten oder nicht standardmäßigen Code für tabellenloses Layout verwenden. Lassen Sie mich Sie korrigieren – Sie können es (nur technisch gesehen), aber damit werden alle Ziele zunichte gemacht. Wenn Sie tabellenloses Design durchführen, müssen Sie einen geeigneten Standardcodesatz verwenden. Ich denke, dass alles, was einem dabei hilft, gute Programmiergewohnheiten zu entwickeln, eine gute Sache ist.
Schnellere Ladezeit
Schneller herunterladen
Dies ist ein absoluter Vorteil eines tabellenlosen Layouts, und zwar aus mehreren Gründen: Tabellen werden größtenteils langsam geladen, es sei denn, Sie legen die Höhe fest und Breite Ihrer Tabellenelemente muss der gesamte Text geladen und gerendert werden, BEVOR sich die Tabelle an die Seite anpasst. Das ist es natürlich, was so viele Leute an Tabellen mochten, nicht wahr? Der Nachteil besteht darin, dass das Laden viel länger dauert.
Das tabellenlose Layout ist aus folgenden Gründen sehr vorteilhaft: 1. Grundsätzlich verlangsamt die Verwendung des Tabellenlayouts die Download-Geschwindigkeit Unabhängig davon, wie Sie die Höhe und Breite des Tabellenelements festlegen, werden alle Elemente in der Tabelle geladen, bevor die Tabelle geladen wird. Dies ist möglicherweise der Grund, warum viele Leute am Tabellenlayout interessiert sind. Tatsächlich sind Tabellen in der Regel groß, sodass das Laden tatsächlich länger dauert. Wir können die Downloadzeit nicht ignorieren.
Okay, die Lösung für diese Ladezeit besteht also darin, alle Werte explizit festzulegen, oder? Jetzt sehen wir also einen weiteren Nachteil. Code-Unordnung, die die Ladezeit verlängert. Erstens benötigen Tabellen allein für sich genommen eine Menge Code. Wie viele TD-Open- und Close-Tags hat Ihr durchschnittliches tabellenbasiertes Layout? Tonnen. Das explizite Festlegen aller Werte erhöht nur die Seitengröße und die Ladezeit. Es wurden viele Experimente zu diesem Thema durchgeführt. Ich möchte Sie auf dieses hinweisen, das StopDesign bei einem Remake der Microsoft-Website von einer tabellenbasierten Website zu einem tabellenlosen Layout durchgeführt hat. Dieses Remake zeigte eine Reduzierung der Dateigröße der Website um 62 %. Unter Verwendung der durchschnittlichen Zugriffe pro Monat für die Microsoft-Website wurde berechnet, dass Microsoft 924 GIGS an Bandbreite pro Tag und 329 Terabyte an Bandbreite pro Jahr einsparen würde. Für jedes Unternehmen, das für Bandbreite bezahlt, sind diese Dinge wichtig. 
因此,我们必须把所有的值设置清楚,从而减少下载的时间.接下来让我们看看其它的缺点吧:代码的混乱会增加加载的时间.首先,表格本身包含了大量的代码,你可以数数看其中包含了几个„td“开始和结束标签,我想应该是很多吧.为了把它们设置的清楚一点,必须增加网页的尺寸从而导致下载时间延长.关于这个主题,我们已尽量不要再使用表格进行布局了, 看看微软的做法吧, 他们原来是使用表格布局的已经开始使用非表格布局了.62 % 924 GIGS mit 329 Terabyte
Leichter lesbarer Code ein paar zusätzliche Symbole. 
如果使用的是标准代码，标准语义文档和非表格布局，那么你的代码将看上去非常清楚，简直就如同一个带有一些特殊符号的惯用文本.
Das ist ein großer Vorteil, weil Dadurch wird es nicht nur für Sie einfacher, Aktualisierungen durchzuführen, sondern auch für einen technisch nicht versierten Benutzer, der kleinere Änderungen daran vornehmen kann. Wenn Sie als Webentwickler eher freiberuflich arbeiten, ist es außerdem üblich, dass es einen Vollzeit-Webentwickler gibt, der die Website pflegen muss. Sauberer und einfach zu lesender Code erleichtert den Übergang. Wir mögen es, wenn uns die Leute leicht verständlichen Code hinterlassen, oder? Erwidern wir den Gefallen. 
使用非表格布局的好处不仅在于方便你对网页进行更新,而且还可以使非转业的人对其进行细微地修改和转换.另外,如果你是一个自由职业的网页设计师,你也可以让专业网页设计师记住你的网站.代码的简明性可以使代码转化工作变得非常容易.我们都希望代码开发者们为我们留下的是简单的代码, 所以, 当我们书写代码时也考虑考虑这点吧.
Alternative Ansichten drucken
Praktische Stildefinition
Wenn Sie eine Seite mit einem Tabellenlayout erstellen, sind Sie, wie die meisten von uns, leider an ein bestimmtes Layout gebunden Irgendwann – besonders wenn Sie in der Branche vor der großen tabellenlosen Bewegung tätig waren – müssen Sie wissen, dass Sie oft eine separate druckbare Version Ihrer Seiten erstellen müssen. Dies kann natürlich ziemlich mühsam sein Beim Erstellen einer Webseite mit Tabellenlayout sollten Sie sich nicht an eine bestimmte Layoutmethode halten. Entwickler, die wie die meisten von uns Tabellenlayouts verwenden, müssen sich darüber im Klaren sein, dass es sehr mühsam ist, vor der „tabellenlosen“ Bewegung ein eigenes Layout für jeden Seitenstil zu erstellen.
Die einfache Kontrolle des Druckstils ist bei einem tabellenlosen Layout ein großer Vorteil. Sie können ganz einfach einen einzigen neuen Druckstil erstellen, der für alle Ihre Seiten gilt, anstatt sie einzeln zu erstellen, aber das ist eine enorme Zeitersparnis mehr
Die einfache Steuerung des Ausgabestils ist ein großer Vorteil des tabellenlosen Layouts. Sie können ganz einfach ein einfaches neues Layout erstellen und es auf alle Ihre Webseiten anwenden, ohne für jede Seite einen eigenen Stil entwerfen zu müssen. Dies wird zweifellos eine enorme Zeitersparnis bedeuten.
Während Sie mit diesem Ansatz alle Elemente steuern können, ist der größte Schlüssel die Organisation der Informationen innerhalb der Seite selbst. Nehmen wir als Beispiel an, dass die Anzeigereihenfolge, in der alle unsere Seiten gedruckt werden sollen, die folgende Reihenfolge hat: Der Seitenkopf Zuerst der Inhalt, danach die Sondernachrichten, dann die Linkliste und dann die Fußzeile. Wir möchten jedoch, dass sie beim Betrachten immer noch wie gewohnt angezeigt wird (d. h. die Kopfzeile oben, die Links links). Inhalt in der Mitte, Nachrichten rechts und Fußzeile unten. Bei einem tabellenbasierten Layout müssten Sie für diese spezielle Druckorganisation eine neue Seite erstellen, da der Druckstil Ihre Spalten von links nach rechts liest. Bei einem tabellenlosen Layout sind Sie nicht daran gebunden. Sie können den Inhalt Ihrer Seite beliebig anordnen und trotzdem das Aussehen steuern ... alles nur mit CSS Wenn Sie alle Elemente auf diese Weise steuern, müssen Sie zunächst Folgendes berücksichtigen: Wie können alle Informationen auf der Seite selbst effektiv organisiert werden? Stellen wir uns folgende Sortierung vor: Zuerst der Seitenanfang, dann der Inhalt, dann spezifische Nachrichteninformationen und eine Linkliste und schließlich die Fußzeile. Wir möchten jedoch weiterhin, dass es entsprechend unseren normalen Surfgewohnheiten angezeigt wird (d. h.: Kopfzeile oben; Linkliste in der Mitte links; Inhalt in der Mitte; Nachrichten in der Mitte rechts; Fußzeile unten). Wenn Sie ein Tabellenlayout verwenden, müssen Sie eine neue Seite erstellen, da Tabellen von links nach rechts gelesen werden. Wenn Sie jedoch ein tabellenloses Layout verwenden, sind Sie nicht an dieses Formular gebunden. Sie können den Inhalt beliebig positionieren und haben eine große Kontrolle darüber. Sie müssen lediglich CSS verwenden, um den oben genannten Zweck reibungslos zu erreichen.
Da wir außerdem den Inhalt in jeder gewünschten Reihenfolge im HTML anordnen und die Inhaltsblöcke dann für die Website-Anzeige mithilfe von CSS verschieben können, können wir die Präsentation vollständig oder teilweise an einer beliebigen Stelle steuern in der HTML-Seite, sodass wir willkürlich steuern können, wie sie angezeigt wird.
Das ist sehr wichtig, denn der saubere Code und die Möglichkeit, die Darstellung zu ändern, bedeutet, dass Ihre Website für jemanden auf einem kleinen Mobiltelefonbildschirm sichtbar ist. Die Flexibilität und Organisation führt dazu, dass Sie eine leistungsstarke Website erstellen können, die einige der Möglichkeiten von XHTML nutzt.
Da die Code-Vereinfachung so wichtig ist, kann sie den Ausdruck und die Position von Inhalten nach Belieben steuern Auf dem Bildschirm eines Mobiltelefons können Sie Ihre Webseite ganz einfach anzeigen. Wir können die Erweiterbarkeit und Organisation von XHTML nutzen, um hervorragende Websites zu erstellen.
Suchmaschinenoptimierung
Suchmaschinenoptimierung
Da Sie Ihre wichtigsten Inhalte oben auf Ihrer Seite organisieren können, ohne das Layout zu beeinträchtigen, kann Ihre Seite besser für Suchmaschinen optimiert werden Angenommen, ich habe auf der linken Seite eine Navigationsleiste, die unzählige Teile der Website auflistet, die eigentlich tolle Schlüsselwörter sind. Ich könnte diesen Navigationsbarcode in meinem tatsächlichen HTML nach oben verschieben, ohne das Layout zu ändern Ich verwende CSS, um die Navigation dort zu positionieren, wo ich sie haben möchte.
Da Sie das tabellenlose Layout verwenden können, um den wichtigsten Inhalt oben auf der Seite zu platzieren, ohne das gesamte Layout zu beeinträchtigen, kann Ihre Seite eine Suchmaschinenoptimierung durchführen im größtmöglichen Umfang. Ich habe zum Beispiel eine Navigationsleiste auf der linken Seite der Seite platziert und einige Schlüsselwörter mit sehr hohen Aufmerksamkeitsraten darauf geschrieben. Daher kann ich den Navigationsbarcode vor dem HTML-Code schreiben, ohne das gesamte Seitenlayout zu beeinflussen. Weil ich CSS verwende, um seine Position anzupassen.
Diese Suchmaschinen können auch häufige Wörter in Ihrem Dokument klarer finden, ohne den Code durchsuchen zu müssen. Suchmaschinen priorisieren Websites mit einem höheren Verhältnis von Inhalt zu Code, sodass Ihre Website durch das Einfügen aller Stilelemente in Ihr externes CSS-Stylesheet verbessert wird Wie bereits erwähnt verringern tabellenlose Layouts die Seitengröße und die Ladezeit – ein weiterer Vorteil für Suchmaschinen.
Suchmaschinen können im gesamten Dokument häufig vorkommende Schlüsselwörter finden, ohne den Code zu filtern. Suchmaschinen suchen nach Seiten, deren Inhalt einen größeren Teil der Seite einnimmt. Daher kann die Platzierung von Stilelementen in einem externen Stylesheet den Inhalt hervorheben. Das oben erwähnte tabellenlose Layout reduziert die Seitengröße und die Downloadzeit erheblich und kann Suchmaschinen besser nutzen.
Präsentationsflexibilität
Umfassende Anpassungsfähigkeit
Änderungen an einem CSS-basierten Tableless-Layout sind einfach. Sie können nur die CSS-Datei ändern und so viele Stile und Grafiken ändern, wie Sie möchten Seiten auf Ihrer Website und machen die manuelle Aktualisierung vieler Seiten überflüssig.
Tabellenloses Layout basierend auf CSS ist eine sehr einfache Methode. Sie können die gewünschten Stile und Bilder ändern, indem Sie die CSS-Dateien transformieren. Die Verwendung von Cascading Style Sheets auf Ihrer gesamten Website kann den Arbeitsaufwand durch tägliche Seitenaktualisierungen reduzieren.
Eines der bekanntesten Beispiele dafür, wie leistungsstark Präsentationen sein können, finden Sie im CSS Zen Garden. Dort können Sie über die Links „Design auswählen“ navigieren, um die Unterschiede zu sehen. Jedes der verschiedenen Designs verwendet genau dieselbe HTML-Datei Das Einzige, was sich ändert, ist die CSS-Datei für jede einzelne.
Sie können die berühmte Website besuchen: CSS Zen Garden, die vom gesamten Seitenlayout her ein Klassiker ist.Vous pouvez afficher différents styles de mise en page en cliquant sur « Sélectionner un design » dans la barre de navigation. Chaque style de conception différent utilise exactement le même contenu HTML. Il modifie uniquement le contenu du HTML en utilisant différents CSS.
Se vendre sur des normes
Se vendre sur des normes différentes
Parfois, savoir coder pour les normes et créer des mises en page flexibles sans table ne suffit pas. Certains concepteurs de sites Web rencontrent le plus souvent des difficultés de la part de leur direction. ces difficultés sont enracinées dans le fait que la direction n'est pas consciente des avantages de l'utilisation du contenu sans table et de la mise en page basée sur CSS
Le point ici est le suivant : utiliser du code standard pour créer des mises en page sans table évolutives n'est pas suffisant. Certains concepteurs de sites Web rencontrent encore de nombreuses difficultés dans la gestion de sites Web. Dans la plupart des cas, cela est dû à l'ignorance du contenu de la mise en page sans table et de la méthode de mise en page CSS.
Si vous souhaitez concevoir selon des normes, mais que vous travaillez pour une entreprise qui n'est pas très avant-gardiste en vous laissant le temps de travailler sur les changements, essayez ceci : faites-leur réfléchir à leur portefeuille. Faites-leur remarquer. les avantages en matière d'économies de coûts.
Si vous souhaitez réaliser une conception standardisée, mais que votre entreprise ne le permet pas car cela peut retarder le temps. Voici ce que vous pouvez faire : notez-les dans un carnet de poche et indiquez où vous pouvez économiser de l'argent.
Par exemple, essayez de récupérer une seule page de code existant. Nettoyez-la selon les normes. Comparez la taille de la page avec celle d'avant (y compris l'optimisation de l'image) et comptez la différence en octets enregistrés. et le nombre de jours par mois. Expliquez-leur ensuite le montant des coûts de bande passante économisés mensuellement si cela était fait sur l'ensemble du site. Si cela ne suffit pas, montrez-leur à quelle vitesse vous pouvez apporter des modifications à un site Web une fois qu'il est CSS. motivé, et poussez l'idée que vous pourrez modifier le site plus rapidement lorsque des mises à jour sont nécessaires, et que vous aurez plus de temps pour vous concentrer sur l'ajout de nouvelles fonctionnalités au site - au lieu de passer votre temps à faire la maintenance Par exemple, récupérez autant de pages de codes existantes que possible et réécrivez le code dans un format de code concis et standard. Ensuite, comparez la différence de taille entre les deux pages avant et après (y compris l'optimisation de l'image) et calculez la différence de taille. Ensuite, expliquez combien de coûts de bande passante peuvent être économisés chaque mois si vous suivez la nouvelle présentation. Si cela ne suffit pas, vous pouvez expliquer en détail dans quelle mesure la vitesse de téléchargement sera améliorée si la mise en page CSS est utilisée et combien de temps de mise à jour peut être économisé lors de la mise à jour de la page ; De cette façon, vous pouvez utiliser votre temps pour améliorer les fonctionnalités de votre site Web, éliminant ainsi la majeure partie du temps de maintenance.
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.