Adobe Dreamweaver CC

Website erstellen und gestalten mit Adobe Dreamweaver

(Projekt: 45 Min.)

Website erstellen und gestalten mit Adobe Dreamweaver

45 Min.

Was brauche ich?

Dateien herunterladen Beispieldateien zum Üben (ZIP, 200 KB)

PDF herunterladen Schnellreferenz zu Dreamweaver

Möchten Sie auch eine Website wie diese erstellen? Wir zeigen Ihnen, wie es geht.

In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie eine Website von Grund auf erstellt wird. Laden Sie sich zunächst alle Projekt-Assets herunter. Wir zeigen Ihnen anschließend, wie Sie eine Website in Dreamweaver definieren und alle Grafiken und Seiten korrekt miteinander verlinken. Falls während des Tutorials Fragen aufkommen sollten, finden Sie Hilfe in unserem Forum. Richten Sie zunächst Ihr Projekt in Dreamweaver ein.

Site definieren (1:45) – Inhalte durchsuchen (2:50 – HTML-Datei erstellen (3:08)

Struktur der Website definieren und Text eingeben

Das Dreamweaver-Bedienfeld „Einfügen“ erstellt den HTML-Code automatisch und beschleunigt so die Erstellung von Websites erheblich. Trotz allem behalten Sie die Kontrolle und legen geeignete Elemente und deren Position selbst fest. Nachdem die HTML-Struktur der Website festgelegt ist, fügen wir Text aus einer RTF-Datei ein. Die Funktion „Inhalte einfügen“ sorgt dabei dafür, dass Text vom RTF-Format oder aus Microsoft Word automatisch in HTML umgewandelt wird. Auch das spart Zeit und Mühe.

Bedienfeld „Einfügen“ verwenden (0:55) – Eigenschafteninspektor verwenden (2:14) – Platzhaltertext einfügen (4:53)

Beginnen wir nun damit, die Website mit Bildern interessanter zu gestalten. Das Hauptbild der Website, oft als „Hero Image“ bezeichnet, erstreckt sich über die gesamte Breite der Seite. Das kleinere Bild werden wir mit einer Bildunterschrift versehen, die wir über HTML5-Elemente definieren. Zusätzlich werden wir Links zu einer anderen Seite Ihrer Website und zu einer externen Website anlegen.

 

 

 

Bild einfügen (0:24) – Bilder mit Beschriftung (1:23) – Links erstellen (2:50)

Seite verschönern

Ihre Website funktioniert bereits, aber optisch ließe sich sicher Einiges noch verbessern. Im vierten Schritt fügen wir ein Stylesheet hinzu, das eine Reihe grundlegender, vordefinierter Stildefinitionen enthält. Für die Überschriften setzen wir einen attraktiven Edge Web Font ein und erstellen mit dem CSS Designer, dem Dreamweaver-Tool für die visuelle Gestaltung von Websites, noch ein zweispaltiges Layout.

Stylesheet hinzufügen (0:22) – Stile zuordnen (1:39) – Edge Web Fonts hinzufügen (3:04)

Navigationsleiste anpassen

Früher musste ein separates Grafikprogramm eingesetzt werden, um mehrere Bilder für die Darstellung verschiedener Status eines Buttons auf einer Navigationsleiste zu erstellen. Dreamweaver erledigt dies mit einigen wenigen Regeln in HTML und CSS. In diesem Schritt lassen wir unsere Liste mit Aufzählungszeichen sich wie eine horizontale Navigationsleiste verhalten.

Voilà. Wir haben in fünf einfachen Schritten aus dem Nichts eine ansprechende Website erstellt. Aber das war noch nicht alles: Wir haben einen Bonus für Sie.

Liste formatieren (0:27) – Button-Status hinzufügen (2:52) – Aktive Seite anzeigen (4:44)

Extra-Video: Absolute Positionierung und abgerundete Ecken

In diesem Extra-Tutorial lüften wir das Geheimnis um Textfelder, die sich exakt an gewünschter Position über einem Bild (oder jedem anderen Element) platzieren lassen. Sie lernen außerdem, wie sich binnen Sekunden abgerundete Ecken zu einem Hintergrund hinzufügen lassen.

Text formatieren (1:39) – Text positionieren (2:18) – Abgerundete Ecken hinzufügen (3:57)

Ihre Meinung ist gefragt.

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.

david-powers_83x83

David Powers ist Autor von sieben Bestsellern zum Thema Webdesign, insbesondere PHP, CSS und Dreamweaver, darunter auch das Handbuch „The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP“. Powers ist in den Dreamweaver-Foren und als Moderator der Adobe Community Help aktiv. Er trägt als einer von nur 40 Experten weltweit den Titel „Adobe Community Professional for Dreamweaver“.