Website-Layout-Grundgerüst mit div-Tags und CSS

In diesem CSS-Tutorial werden wir ausgehend von einer Skizze ein Website-Layout-Grundgerüst mit Hilfe von DIVs und etwas CSS erstellen.

Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

1. Website-Layout mit Stift und Papier skizzieren
2. Ein einfaches Website-Layout mit DIVs und CSS erstellen
3. Website-Layout Feinschliff: Farben und so

In diesem kurzen Tutorial werden wir uns damit beschäftigen, wie wir ein klassisches Website-Layout mit Hilfe einiger <div>-Tags und etwas CSS zusammenbauen können.

Der erste Schritt ist dabei im Regelfall die Skizze.

1. Website-Layout mit Stift und Papier skizzieren

Bevor wir das tun, nehmen wir ein Blatt Papier und einen Stift, und überlegen uns mal, wie unsere spätere Website in etwa aussehen könnte.

Wenn du dafür lieber Computer-Programme verwendest, darfst du das natürlich gerne tun.

Aber für die meisten Menschen ist es effizienter, analoge Mittel wie Bleistift und Papier zu verwenden.

Außerdem: Wir programmierer sitzen ja ohnehin oft viel zu lange vor einem Bildschirm 😉

Mal angenommen, das hier entspricht in etwa deiner Skizze:

Einfaches Website-Layout mit CSS und divs

Wir haben also einen 3-teiligen Inhalts-Bereich aus Header, Hauptteil und Footer.

Im Header findet sich das Logo links oben und einige links rechts.

Im Inhaltsbereich findet sich eine Überschrift und etwas Text auf der linken Seite, und rechts ein (abgerundetes) Bild vom Autor sowie einige Zeilen zum Autor.

Im Footer finden sich rechts noch einige zusätzliche Links.

Ok, dann lass uns mal beginnen 🙂

2. Ein einfaches Website-Layout mit DIVs und CSS erstellen

2.1 Ein erstes Grundgerüst des Website-Layouts in Header, Inhalt und Footer

Wir beginnen wie immer mit einer leeren HTML-Seite samt <head>-Tag und <body>-Tag.

In den <body>-Tag fügen wir 3 <div>-Tags ein, denen wir jeweils eine entsprechende ID für „header“, „footer“ und „main“ geben:

<!DOCTYPE html>
<html lang="de">
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
    </head>
    <body>
        <div id="header">
            Header
        </div>
        <div id="main">
            Main
        </div>
        <div id="footer">
            Footer
        </div>
    </body>
</html>

In die <div>-Tags haben wir jeweils einen Text eingefügt, damit wir die DIVs auch sehen können.

Als nächstes kommen wir nun zu unserer style.css – dort geben wir den einzelnen DIVs jetzt mal verschiedene Hintergrund-Farben:

#header {
    background-color: #ddd;
}
#footer {
    background-color: #333;
}
#main {
    background-color: orange;
}

Das Ergebnis:

Damit unser Layout etwas besser aussieht, kümmern wir uns nun im nächsten Schritt darum, dass die Verhältnisse zwischen header, main und footer schöner werden:

#header {
    background-color: #ddd;
    height: 100px;
}
#footer {
    background-color: #333;
    height: 100px;
}
#main {
    background-color: orange;
    min-height: 600px;
}

Sieht doch schonmal besser aus:

Einfaches Website-Layout Schritt 2

2.2 Den Header mit einem Logo links und Links rechts anlegen

Als nächsten Schritt kümmern wir uns um unser Logo.

Dazu fügen wir einen <img>-Tag in das entsprechende <div>-Tag ein, sowie gleich 3 Links, die wir dann rechts anordnen werden:

<!DOCTYPE html>
<html lang="de">
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
    </head>
    <body>
        <div id="header">
            <img src="wal.jpg">
            <a href="index.html">Super-Shop</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="kontakt.html">Kontakt</a>
        </div>
        <div id="main">
            Main
        </div>
        <div id="footer">
            Footer
        </div>
    </body>
</html>

Das Ergebnis sieht noch etwas… unschön aus:

Einfaches Website-Layout Schritt 3

Daher werden wir nun zwei Dinge tun:

Wir werden das Logo links an ordnen und die Links nebeneinander auf der rechten Seite
Wir werden das Logo an die Größe des Headers anpassen

Dazu fügen wir in unsere style.css folgendes hinzu:

#header a {
    float: right;
    margin: 20px;
    margin-top: 40px;
}
#header img {
    float: left;
    height: 80px;
    margin: 10px;
}

Der CSS-Befehl float ordnet das HTML-Element, auf das er angewendet wird, links bzw. rechts am Rand des Eltern-Elements an. Normalerweise würden wir hier eigentlich eine Flexbox verwenden, aber die lernen wir erst noch.

Der CSS-Befehl height sagt dem Browser, dass das Bild diese Höhe haben soll. Bei bildern versucht der Browser, die jeweils andere Dimension (in diesem Fall die Breite des Bildes) anhand des Seitenverhältnisses des ursprünglichen Bildes zu berechnen. Würde man nun auch noch die width (=Breite) des Bildes angeben, kann es sein, dass das Bild verzerrt dargestellt wird. Deswegen bestimmen wir hier einfach nur die height, und lassen den Browser den Rest erledigen.

Der CSS-Befehl margin sorgt für einen Abstand nach außen in alle Richtungen, wohingegen margin-top zusätzlich noch für einen Abstand nach oben sorgt.

Hier das Ergebnis:

Einfaches Website-Layout Schritt 5

Sieht doch schonmal ganz ok aus fürs erste.

Nun auf zum Footer!

2.3 Den Footer im Website-Layout mit 3 Links rechts unten anlegen

Damit wir Links rechts unten anordnen können, müssen wir sie erst in unseren HTML-Code einfügen. Der Einfachheit halber haben wir sie hier einfach kopiert:

<!DOCTYPE html>
<html lang="de">
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
    </head>
    <body>
        <div id="header">
            <img src="wal.jpg">
            <a href="index.html">Super-Shop</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="kontakt.html">Kontakt</a>
        </div>
        <div id="main">
            Main
        </div>
        <div id="footer">
            <a href="index.html">Super-Shop</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="kontakt.html">Kontakt</a>
        </div>
    </body>
</html>

Dann müssen wir noch dafür sorgen, dass unsere Links wieder rechts angeordnet werden.

Wenn wir nun schlau sind, geht das sehr schnell, weil wir ja das selbe Problem schon im Header hatten.

Wir können die Arbeit von vorher daher recyceln, indem wir zum #header a von vorhin einfach mit Beistrich noch #footer a hinzufügen:

#header a,
#footer a {
    float: right;
    margin: 20px;
    margin-top: 40px;
}

Das Ergebnis:

Einfaches Website-Layout Schritt 5

Nun müssen wir uns noch um den Inhalts-Bereich kümmern.

2.4 Den Inhalts-Bereich als Grundgerüst anlegen

Als ersten Schritt fügen wir in unseren HTML-Code im main-DIV noch zwei DIVs ein: content und sidebar.

<!DOCTYPE html>
<html lang="de">
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
    </head>
    <body>
        <div id="header">
            <img src="wal.jpg">
            <a href="index.html">Super-Shop</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="kontakt.html">Kontakt</a>
        </div>
        <div id="main">
            <div id="content">
                text
            </div>
            <div id="sidebar">
                sidebar
            </div>
        </div>
        <div id="footer">
            <a href="index.html">Super-Shop</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="kontakt.html">Kontakt</a>
        </div>
    </body>
</html>

Diese beiden DIVs bearbeiten wir dann entsprechend in unserer .css-Datei:

#content {
    float: left;
    background-color: yellow;
    width: 70%;
}
#sidebar {
    float: right;
    background-color: red;
    width: 30%;
}
#content,
#sidebar {
    height: 100%;
}

Achtung: Damit das auch bei dir aussieht wie im folgenden Bild, musst du in deinem #main mit „height: 600px;“ auch eine fixe height setzen. Das Ergebnis:

Einfaches Website-Layout Schritt 6

Als nächstes fügen wir noch einige HTML-Elemente in unseren #content und unsere #sidebar hinzu. Dazu fügen wir in unsere HTML-Datei noch einige Dinge im #main-Bereich ein:

<!DOCTYPE html>
<html lang="de">
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
    </head>
    <body>
        <div id="header">
            <img src="wal.jpg">
            <a href="index.html">Super-Shop</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="kontakt.html">Kontakt</a>
        </div>
        <div id="main">
            <div id="content">
                <h1>Meine Überschrift</h1>
                <p>Das ist der Text</p>
                <p>Das ist noch mehr Text</p>
                <p>Und noch mehr Text</p>
            </div>
            <div id="sidebar">
                <img src="katze.jpg">
                <p>Das ist der Beschreibungstext zum Autor</p>
            </div>
        </div>
        <div id="footer">
            <a href="index.html">Super-Shop</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="kontakt.html">Kontakt</a>
        </div>
    </body>
</html>

Das Ergebnis könnte in etwa so aussehen:

Einfaches Website-Layout Schritt 7

Jetzt müssen wir nur noch die Inhalte zentrieren, ein wenig nach unten verschieben und vielleicht das Bild vom Autor (der Katze) ein wenig abrunden:

#content,
#sidebar {
    height: 100%;
    text-align: center;
}

#content h1 {
    margin-top: 50px;
}
#sidebar img {
    margin-top: 150px;
    border-radius: 50%;
}

Der CSS-Befehl border-radius rundet ein HTML-Element an den Ecken ab. Eine Abrundung auf 50% ergibt ein rundes Element (wäre das Bild quadratisch, würden wir einen Kreis bekommen).

Der CSS-Befehl text-align: center sorgt dafür, dass Kind-Elemente des HTML-Elements zentriert angeordnet werden.

Und voilá:

Einfaches Website-Layout Schritt 8

Ok, so richtig gut sieht das noch nicht aus.

Die Farben sind ziemlich grottig, und auch das Grund-Design ist noch verbesserungswürdig.

Aber die ursprüngliche Skizze ist durchaus wiederzuerkennen.

3. Website-Layout Feinschliff: Farben und so

Wenn wir die exakt gleiche Website von vorher nehmen, und nur einige der Farben mit color bzw. background-color im CSS abändern (und den Wal mit dem Katzen-Bild austauschen), sieht das Ganze schon erheblich professioneller aus:

Einfaches Website-Layout Schritt 9

Du siehst: Von der ersten Skizze mit Papier und Bleistift ist es gar kein so großer Schritt bis hin zu einer – halbwegs – ansehlichen Website.

Dabei haben wir viele der Techniken, die CSS uns bietet, noch nicht mal ansatzweise verwendet.

Dieses Tutorial ist einfach nur dazu da aufzuzeigen, was man mit ein paar DIVs und etwas CSS schon zusammenbauen kann 🙂

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.