Struktur, Stile und Verhalten von Webdesign-Ebenen

click fraud protection

Menschen, die in der arbeiten Web-Design branchenübliche Front-End-Website-Entwicklung zu einem dreibeinigen Hocker. Diese drei Beine – die drei Schichten der Webentwicklung – umfassen die Struktur, den Stil und das Verhalten einer Site.

Drei Schichten Webdesign-Grafik

Warum sollten Sie die Ebenen trennen?

Wenn Sie eine Webseite erstellen, sollte deren Struktur an Ihren HTML-Code angepasst werden. visuelle Stile für das CSS, und Verhalten zu Skripten. Einige der Vorteile der Trennung der Schichten sind:

  • Gemeinsame Ressourcen:Wenn Sie eine externe CSS- oder JavaScript-Datei schreiben, kann jede Seite der Site diese Datei verwenden. Wenn Sie eine Änderung an dieser Datei vornehmen müssen, z einige typografische Stile aktualisieren auf der Website erhält jede Seite, die dieses Stylesheet verwendet, die Änderung. Es ist nicht notwendig, jede Seite der Website einzeln zu bearbeiten, was für eine große Website ein mühsames Unterfangen sein könnte.
  • Schnellere Downloads:Nachdem das Skript oder Stylesheet zum ersten Mal von Ihrem Kunden heruntergeladen wurde, wird es vom Webbrowser zwischengespeichert. Da diese gemeinsam genutzten Ressourcen jetzt in der
    instagram viewer
    Browser-Cache, andere Seiten, die im Browser angefordert werden, werden schneller geladen, was die Seitengeschwindigkeit und -leistung insgesamt verbessert.
  • Mehrpersonenteams:Wenn mehrere Personen gleichzeitig an einer Website arbeiten, verwenden Sie Versionskontrollsysteme, die das Ein- und Auschecken von Dateien ermöglichen, um sicherzustellen, dass alle mit der Website arbeiten letzte Version. Dieser Vorgang ist viel schwieriger, wenn Stile und Verhaltensweisen mit Strukturdokumenten verflochten sind.
  • SEO:Eine Website, die eine klare Trennung von Stil und Struktur aufweist, wird für Suchmaschinen wahrscheinlich besser abschneiden, weil sie können diese Inhalte effektiver crawlen und die Seite verstehen, ohne sich in visuellem Stil und Verhalten zu verzetteln Information.
  • Barrierefreiheit:Externe Stylesheets und Skriptdateien sind für Benutzer und Browser leichter zugänglich. Software wie z Bildschirmlesegeräte können Inhalte aus der Strukturebene leichter verarbeiten, ohne sich mit Stilen auseinanderzusetzen, die sie sowieso nicht verwenden können.
  • Rückwärtskompatibilität:Eine Site, die mit separaten Entwicklungsebenen entworfen wurde, ist eher abwärtskompatibel, weil Browser und Geräte, die bestimmte CSS-Stile nicht verwenden können oder auf denen JavaScript deaktiviert ist, können die HTML-Code. Anschließend können Sie Ihre Website schrittweise mit Funktionen für die Browser erweitern, die sie unterstützen.

HTML: Die Strukturebene

Die Struktur- oder Inhaltsschicht einer Webseite ist die zugrunde liegende HTML Code dieser Seite. So wie der Rahmen eines Hauses ein starkes Fundament bildet, auf dem der Rest des Hauses aufgebaut ist, schafft ein solides Fundament von HTML eine Plattform, auf der eine Website erstellt werden kann.

Auf der Strukturebene speichern Sie alle Inhalte, die Ihre Kunden lesen oder ansehen möchten. Die HTML-Struktur kann aus Text und Bildern bestehen und enthält die Hyperlinks die Besucher verwenden, um auf der Website zu navigieren. Diese Informationen sind standardkonform kodiert HTML5 und kann Text, Bilder und Multimedia (Video, Audio usw.) enthalten.

Jeder Aspekt des Inhalts einer Site sollte in der Strukturschicht dargestellt werden. Diese Trennung ermöglicht Kunden, die JavaScript deaktiviert haben oder die CSS nicht anzeigen können, auf die gesamte Website zuzugreifen, wenn nicht auf alle Funktionen.

CSS: Die Stilebene

Diese Schicht bestimmt, wie ein strukturiertes HTML-Dokument für die Besucher einer Site aussieht und wird definiert durch CSS (Cascading Style Sheets). Diese Dateien enthalten stilistische Anweisungen, wie das Dokument in einem Webbrowser angezeigt werden soll. Die Stilebene enthält normalerweise Medien-Anfragen die die Anzeige einer Website ändern, basierend auf Bildschirmgröße und Gerät.

Alle visuellen Stile für eine Website sollten sich in einem externen Stylesheet befinden. Sie können mehrere Stylesheets verwenden, aber jede CSS-Datei erfordert eine HTTP-Anfrage, um sie abzurufen. Auswirkungen auf die Website-Performance.

JavaScript: Die Verhaltensebene

Die Verhaltensebene macht eine Website interaktiv und ermöglicht es der Seite, auf Benutzeraktionen zu reagieren oder sich basierend auf einer Reihe von Bedingungen zu ändern. JavaScript ist die am häufigsten verwendete Sprache für die Verhaltensebene, aber CGI und PHP werden auch sehr häufig verwendet.

Wenn Entwickler von der Verhaltensebene sprechen, meinen die meisten von ihnen die Ebene, die direkt im Webbrowser aktiviert wird. Verwenden Sie diese Ebene, um direkt mit dem Document Object Model zu interagieren. Gültiges HTML schreiben in der Inhaltsschicht ist wichtig für DOM-Interaktionen in der Verhaltensschicht. Wenn Sie die Verhaltensebene einbauen, sollten Sie wie bei CSS externe Skriptdateien verwenden, um Geschwindigkeit und Leistung zu optimieren.

instagram story viewer