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:

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

Fertiges Bild für den Kopf

Bild aus dem Inhalt

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

Kleiner Pfeil für die linke Steuerung:

Rohdaten zum selber erstellen des Kopfes

Bilder von Tübingen als Impressionen

Benötigte Bilder für den Inhalt des Projektes in einer gepackten ZIP-Datei als Download:
https://www.html-seminar.de/downloads/tuebingen-impressionen.zip