HTML und CSS/responsives Mehrspaltenlayout: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
(l korr)
Markierung: 2017-Quelltext-Bearbeitung
Markierung: 2017-Quelltext-Bearbeitung
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
=== responsives Webdesign ===
== responsives Webdesign ==
Schon längst werden Webseiten nicht nur am Schreibtisch, sondern auch auf mobilen Geräten mit kleinen Viewports angeschaut.
Schon längst werden Webseiten nicht nur am Schreibtisch, sondern auch auf mobilen Geräten mit kleinen Viewports angeschaut.


[[Datei:Brad-Forst-this-is-not-the-web.gif|800px]]
{{clear}}
{{Aufgabe|
# Informiere Dich über [https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign responsives Webdesign]
# Informiere Dich über [https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign responsives Webdesign]
# Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.
# Setze die Breiten so, dass die Inhalte auf allen Bildschirmen gut zu lesen sind.<br>(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.
# 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''' &hellip;
#* auf breiteren Viewports '''neben''' dem Seiteninhalt befinde
}}


=== Media Queries ===
* [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 31. Juli 2020, 08:08 Uhr

responsives Webdesign

Schon längst werden Webseiten nicht nur am Schreibtisch, sondern auch auf mobilen Geräten mit kleinen Viewports angeschaut.

Brad-Forst-this-is-not-the-web.gif

Aufgabe
  1. Informiere Dich über responsives Webdesign
  2. 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
  1. Mit media queries kannst Du verschiedene CSS-Regelsätze für verschiedene Breiten festlegen.
  2. Erstelle eine aside-Box, die sich
    • auf schmalen Geräten unterhalb …
    • auf breiteren Viewports neben dem Seiteninhalt befinde

Grid Layout

Devicon-html5-plain-wordmark.svg

HTML und CSS

  1. HTML als Auszeichnungssprache
  2. meine erste Webseite
  3. unsichtbar, aber nötig: Dokumentstruktur
  4. Jetzt kommt Farbe ins Spiel: CSS
  5. responsives Mehrspaltenlayout
  6. von der Webseite zum Web-Projekt
Abgerufen von „https://unterrichten.zum.de/index.php?title=HTML_und_CSS/responsives_Mehrspaltenlayout&oldid=114380“