Adobe Dreamweaver CC

Web-Seite erstellen und gestalten mit Dreamweaver

Lernen Sie die Schritte zur Erstellung einer responsiven Web-Seite kennen. (Selbst ausprobieren, 45 Min.)

Web-Seite erstellen und gestalten mit Dreamweaver

45 Min.

Vorbereitung

Dateien herunterladen Beispieldateien zum Üben (ZIP, 12,6 MB)

PDF herunterladen Schnellreferenz zu Dreamweaver

Erstellung einer responsiven Web-Seite

Die folgenden Videos zeigen Ihnen Schritt für Schritt, wie Sie mit den neuen Funktionen des Release 2015 von Dreamweaver CC eine responsive Web-Seite erstellen können. Laden Sie sich zunächst alle Projekt-Assets herunter. Lernen Sie anschließend, wie Sie eine Website in Dreamweaver definieren, sodass das Programm korrekte Verknüpfungen zu Grafiken und anderen Seiten erstellen kann. Dann erstellen Sie eine leere Web-Seite mit responsiven Einstellungen. Falls während des Tutorials Fragen aufkommen sollten, finden Sie Hilfe in unserem Forum. Als Erstes richten Sie Ihr Projekt in Dreamweaver ein.

Seitentitel und Container hinzufügen

In dieser Übung fügen Sie den Titel hinzu, der in der Titelleiste einer Browser-Registerkarte für Ihre Web-Seite angezeigt wird und die Seite in den Ergebnissen von Suchmaschinen eindeutig kennzeichnet. Außerdem erstellen Sie den Container, in den Sie später Ihre Inhalte einfügen werden. Dieser Container passt sich automatisch an die aktuelle Seitenbreite an.

Struktur und Inhalte hinzufügen

Die Struktur der Web-Seite wird durch HTML-Komponenten definiert. Bei dieser Übung fügen Sie Ihrer Seite Platzhalter für die Navigationselemente des Hauptmenüs, eine Dia-Show, den Hauptinhalt, ein Miniaturbild und einen Footer hinzu. Damit ist die Web-Seite nicht formatiert. Aber das grundlegende Design steht fest und kann nun flexibel angepasst werden.

Eigene Inhalte hinzufügen

Jetzt werden die Platzhalter-Inhalte ausgetauscht, die mit den vordefinierten Komponenten aus dem Bedienfeld „Einfügen“ zur Seite hinzugefügt wurden. Unter anderem versehen Sie die Menüelemente mit eigenen Beschriftungen und ändern die Struktur, damit sie dem endgültigen Design entspricht. Anschließend stimmen Sie die Bildunterschriften für die Dia-Show und die Miniatur auf die Bilder ab, die später noch eingesetzt werden. Schließlich fügen Sie Text für die Überschrift und den Absatz im Hauptteil ein und ersetzen den Inhalt des Footers durch einen Copyright-Hinweis.

Sie arbeiten weiter am Erscheinungsbild Ihrer Web-Seite und fügen Bilder für die Dia-Show- und Miniatur-Platzhalter ein. Außerdem fügen Sie den Menüelementen Links zu anderen Seiten und einer externen Website hinzu. In dieser Übung lernen Sie ein paar Methoden kennen, wie Sie auf Bilder verweisen und Links definieren können.

Text formatieren

Legen Sie einige Stil- und Layout-Merkmale für den Text Ihrer Seite fest. In dieser Lektion lernen Sie den CSS Designer kennen, mit dem Sie Text eine Farbe zuweisen und an verschiedene Positionen auf der Web-Seite verschieben können.

Menü formatieren

Das Menü erhält einen moderneren Look und wird an das Gesamtbild der Seite angepasst. In diesem Video lernen Sie, wie Sie die Standardformatierung des Menüs überschreiben und seine Hintergrundfarbe, Ränder und Position nach Ihren Wünschen ändern können.

Der letzte Schliff

Im abschließenden Video nehmen Sie ein paar Feinanpassungen vor und ändern die Standardformatierung der Bilder, damit sie auf jedem Gerät bestmöglich zur Geltung kommen. Mittels CSS-Eigenschaften richten Sie die Bilder der Dia-Show so ein, dass sie die gesamte Breite der Web-Seite ausfüllen. Anschließend ändern Sie die Einstellungen der Miniaturansichten, damit sie die gesamte Breite ihrer Container einnehmen. Zum Schluss folgen ein paar letzte stilistische Änderungen am Container des Hauptinhalts.