2-Spalten-Layout Tutorial: Schritt für Schritt zum Design mit HTML & CSS

Bevor wir uns an die Umsetzung des Designs für ein 2 spaltiges Layout machen, hier die Vorstellung des Webdesigns dieses Tutorials und seiner Feinheiten. Die am Ende von diesem Kursteil erstellten Webseite, kann dann auf die eigenen Bedürfnisse angepasst werden – mit diesem Wissen kann man seine eigene Website aufbauen.

Folgendes 2-Spalten-Layout erstellen wir über HTML und CSS:

fertige Homepage mit 2-Spalten-Layout

Die notwendige Vorgehensweise wird komplett Schritt für Schritt auf der DVD C unter Beispielprojekt 2-Spalten-Layout gezeigt.

Die Videos gibt es unter https://www.html-seminar.de/videokurs-bestellen.php

Benötigtes Bildmaterial für Beispiel 2-Spalten-Layout

Um das im Kurs und in den Videos gezeigte 2-Spalten-Layout über CSS (und natürlich HTML) nachbauen zu können, werden mehrere Bilder benötigt. Diese können hier heruntergeladen werden (rechte Maustaste und speichern unter).

Hintergrund für Spalte Steuerung

Hintergrund für Spalte Steuerung

Fertiges Bild für den Kopf

fertiges Design für Kopfbereich

Bild aus dem Inhalt

Tübingen Stocherkahnrennen

Hintergrundgrafik für blauen Bereich links und rechts von der Homepage (Farbe: #92C6ED)

Hintergrundgrafik

Kleiner Pfeil für die linke Steuerung:

Rohdaten zum selber erstellen des Kopfes

Panoramafoto Tübingen

Bilder von Tübingen als Impressionen

Bilder von Tübingen (ZIP)