TUTORIAL-ARTIKEL

Anfänger

30 Min.

Ein responsives Menü erstellen.

Dieses Menü erleichtert die Navigation auf jedem Gerät, egal ob Smartphone, Tablet oder Desktop-Rechner.

1

Eine Menüstruktur anlegen.

Erfahren Sie, warum der Webdesign-Ansatz „Mobile First“ als gute Idee empfunden wird. Sie erstellen eine Site zur Verwaltung Ihrer Dateien und Elemente und definieren dann per HTML einen Header mit einem Logo und der Grundstruktur Ihrer Navigation.

2

Das Menü für Smartphones formatieren.

Bis jetzt ist Ihr Hauptmenü nur eine Liste mit lilafarbenem Text. Formatieren Sie es jetzt über CSS. Passen Sie das Layout für die Anzeige auf einem Smartphone an.

3

Das Menü für Tablets und Desktops formatieren.

Das Layout soll je nach verwendetem Gerät – Smartphone, Tablet oder Desktop-Rechner – unterschiedlich sein. Mit Media Queries lässt sich die Anzeige an den jeweiligen Screen anpassen. Zum Schluss erfahren Sie, wie Sie Ihr Design schon während der Arbeit in Echtzeit auf einem Zielgerät sehen können.


Beitrag von:

Daniel Walter Scott

3. November 2022

Probiere diese Tutorials mit Dreamweaver aus

Moderne, responsive Web-Seiten gestalten