Nachricht für neue Nutzer.
Nachricht für engagierte Nutzer.
HTML und CSS/responsives Mehrspaltenlayout: Unterschied zwischen den Versionen
Aus ZUM-Unterrichten
(akt) Markierung: Quelltext-Bearbeitung 2017 |
Keine Bearbeitungszusammenfassung Markierung: Quelltext-Bearbeitung 2017 |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 5: | Zeile 5: | ||
{{clear}} | {{clear}} | ||
{{Aufgabe| | {{Aufgabe| | ||
# Informiere Dich über [https://wiki.selfhtml.org/wiki/ | # Informiere Dich über [https://wiki.selfhtml.org/wiki/Responsiv(es_Webdesign) responsives Webdesign] | ||
# Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.<br>(Oft bedeutet dies, eben gar keine Breitenangaben zu setzen!) | # Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.<br>(Oft bedeutet dies, eben gar keine Breitenangaben zu setzen!) | ||
}} | }} | ||
| Zeile 18: | Zeile 18: | ||
}} | }} | ||
* | * [https://wiki.selfhtml.org/wiki/CSS/Media_Queries media queries] (Tutorial, selfhtml.org) | ||
=== Grid Layout === | === Grid Layout === | ||
* | * [https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid Einstieg in das Grid Layout] (Mehrteiliges Tutorial, selfhtml.org) | ||
{{HTML und CSS}} | {{HTML und CSS}} | ||
Aktuelle Version vom 12. Mai 2025, 04:04 Uhr
responsives Webdesign
Schon längst werden Webseiten nicht nur am Schreibtisch, sondern auch auf mobilen Geräten mit kleinen Viewports angeschaut.
Aufgabe
- Informiere Dich über responsives Webdesign
- Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.
(Oft bedeutet dies, eben gar keine Breitenangaben zu setzen!)
Media Queries
Aufgabe
- Mit media queries kannst Du verschiedene CSS-Regelsätze für verschiedene Breiten festlegen.
- Erstelle eine aside-Box, die sich
- auf schmalen Geräten unterhalb …
- auf breiteren Viewports neben dem Seiteninhalt befinde
- media queries (Tutorial, selfhtml.org)
Grid Layout
- Einstieg in das Grid Layout (Mehrteiliges Tutorial, selfhtml.org)
- HTML als Auszeichnungssprache
- meine erste Webseite
- unsichtbar, aber nötig: Dokumentstruktur
- Jetzt kommt Farbe ins Spiel: CSS
- responsives Mehrspaltenlayout
- von der Webseite zum Web-Projekt
