CSS Design – DIV-Layout erstellen

HTML (Hypertext Markup Language) ist die Grundlage für das Erstellen von Webseiten. Ein DIV-Element ist ein Container in HTML, der dazu verwendet wird, andere Elemente zu gruppieren und ihnen CSS-Stile zuzuweisen. Lass uns einmal eine ganz einfach Webseite erstellen. Dazu musst du eine Datei erstellen und diese am besten unter dem Namen „index.html“ speichern. Dann sollte diese automatisch mit einem Browser geöffnet werden können. Da sie noch leer ist, füllen wir sie nun mit HTML und CSS Code.

Hier ist eine einfache Anleitung, wie du ein grundlegendes DIV-Layout erstellen kannst:

Inhalt

Schritt 1: Grundgerüst des HTML-Dokuments erstellen

Zuerst brauchst du das Grundgerüst eines HTML-Dokuments. Das sieht so aus:

<!DOCTYPE html>
<html>
<head>
    <title>Mein DIV-Layout</title>
    <style>
        /* Hier kommen später die CSS-Stile rein */
    </style>
</head>
<body>

    <!-- Hier kommt der Inhalt der Webseite -->

</body>
</html>

Schritt 2: DIV-Elemente hinzufügen

Innerhalb des <body>-Tags fügst du deine DIV-Elemente hinzu. Zum Beispiel:

<body>
    <div id="header">Das ist der Kopfbereich</div>
    <div id="navigation">Hier kommt die Navigation hin</div>
    <div id="content">Hier ist der Hauptinhalt</div>
    <div id="footer">Das ist der Fußbereich mit Link zu <a href="https://html-einfach.de/">HTML lernen</a></div>
</body>

Schritt 3: CSS-Stile hinzufügen

Jetzt kannst du im <style>-Bereich im <head> deines Dokuments CSS-Stile hinzufügen, um dein Layout zu gestalten. Das ist der Bereich, den wir oben mit einem Kommentar versehen haben. Du musst nun statt dem Inhalt „/* Hier kommen später die CSS-Stile rein */ “ den folgenden Code eingeben:

<style>
    #header {
        background-color: #ff9999;
        padding: 10px;
        text-align: center;
    }

    #navigation {
        background-color: #99ccff;
        padding: 10px;
    }

    #content {
        background-color: #eeeeee;
        padding: 20px;
    }

    #footer {
        background-color: #cccccc;
        padding: 10px;
        text-align: center;
    }
</style>

Schritt 4: Dein Layout testen

Speichere deine HTML-Datei und öffne sie in einem Webbrowser, um zu sehen, wie dein Layout aussieht. Du kannst die Größe und Farben der DIV-Elemente anpassen, um das Layout nach deinen Wünschen zu gestalten.

Zusätzliche Tipps:

Lerne CSS Flexbox oder Grid: Für komplexere Layouts solltest du dich mit CSS Flexbox oder Grid vertraut machen. Diese Tools ermöglichen es dir, responsive und flexible Layouts zu erstellen. Dazu habe ich dir hier eine Anleitung: Responsive Webdesign mit HTML & CSS
Responsive Design: Denke daran, dein Layout responsive zu gestalten, damit es auf verschiedenen Geräten gut aussieht. Media Queries in CSS können dabei helfen.
Praxis: Experimentiere mit verschiedenen Stilen und Layouts. Je mehr du übst, desto besser wirst du.

Vorteile von DIV-basierten Layouts:

Die Verwendung von DIV-Elementen in Webdesigns bietet eine große Flexibilität. Diese Flexibilität ist einer der Hauptvorteile, da sie es ermöglicht, nahezu jede Art von Layout zu erstellen. DIVs sind in allen modernen Browsern gut unterstützt, was für eine konsistente Darstellung deiner Webseite sorgt. Ein weiterer wichtiger Vorteil ist die Trennung von Inhalt und Design. Durch die Verwendung von DIVs in Kombination mit CSS kannst du das Design deiner Webseite leicht vom Inhalt trennen, was Updates und Wartung vereinfacht. Außerdem sind DIV-Layouts anpassungsfähig und können mit CSS für verschiedene Bildschirmgrößen und Geräte optimiert werden, was für responsives Webdesign entscheidend ist. Schließlich sind gut strukturierte DIV-Layouts SEO-freundlich, da sie von Suchmaschinen leichter verstanden werden können. Ich habe viel mit DIV-Layouts gearbeitet, bevorzuge nun jedoch Frameworks in Kombination mit CMS.

Kurz zusammengefasst:

Flexibilität in der Gestaltung
Gute Browser-Kompatibilität
Trennung von Inhalt und Design
Anpassungsfähigkeit für responsives Design
SEO-Freundlichkeit

Nachteile von DIV-basierten Layouts:

Ein Nachteil von DIV-basierten Layouts ist der potenzielle Übergebrauch von DIV-Elementen, oft bezeichnet als „DIV-Suppe“. Dies kann den Code unübersichtlich und schwer wartbar machen. Für Anfänger kann die Erstellung komplexer Layouts mit DIVs, insbesondere im Hinblick auf responsives Design, eine Herausforderung darstellen. Außerdem können zu viele verschachtelte DIVs die Performance einer Webseite beeinträchtigen, was besonders bei umfangreichen Websites ein Problem darstellen kann.