TUTORIAL-ARTIKEL

Experte

30 Min.

Ein Responsive Grid Layout erstellen.

Definieren Sie ein responsives Raster-Layout für Ihre Web-Seite, mit dem die Inhalte auf allen Geräten optimal angezeigt werden.

1

Grafik und Text für den Header definieren.

Mit HTML und CSS ordnen Sie Ihre Inhalte in einem Raster an, das zunächst mit einem Header aus Grafik und Text befüllt wird.

2

Text und Bilder für den Inhalt definieren.

Nachdem Sie die Rasterstruktur angelegt haben, fügen Sie die restlichen Inhalte wie Text, Bilder, Farben und Footer zur Seite hinzu und formatieren sie.

3

Das responsive Design fertigstellen.

Das Layout für Smartphones ist fertig. Nun fügen Sie in der CSS-Datei Media Queries (Medienabfragen) hinzu, damit die Seite auch auf Tablets und Desktops optimal angezeigt wird. Fertig! Sie haben in Dreamweaver Ihre erste Web-Seite mit Responsive Design erstellt. Herzlichen Glückwunsch!



Beitrag von:

Daniel Walter Scott

25. August 2022

Probiere diese Tutorials mit Dreamweaver aus

Moderne, responsive Web-Seiten gestalten