DOM und Desktop-Layouts / 2022-11-17 / Matthias Edler-Golla, CC BY-SA 4.0

Gipfel erreicht

Reach summits von Jrm Llvr

Heute erreicht Ihr den „Gipfel“ des Webdesign-Kurses – danach wird es leichter!

… das bedeutet aber auch, dass die Themen, die ich heute vorstelle, anspruchsvoll sind!

Ihr schafft das!

Themen

  1. Zwischenpräsentation am 15.12.
  2. Abfrage des bisherigen Wissen
  3. DOM
  4. Flexbox
  5. Grid-Layout

Was erwarte ich zur Zwischenpräsentation am 15.12.?

Umso mehr Ihr bis dahin festgelegt habt, desto konkreter könnt Ihr danach bei der Umsetzung in HTML/CSS sein!

Mindestanforderungen

  1. Visualisierung: Wie sollen typische Seiten (Startseite, Projektseite, Kontaktseite…) Eures Online-Portfolios aussehen?
  2. Informationsarchitektur: Welche Information befindet sich wo innerhalb Eurer Website? Wie schaut die Navigation aus?
  3. Responsive Design: Wie werden die verschiedenen Elemente auf Smartphone und Desktop-Monitor positioniert? Schaut die Navigation gleich aus?

Wünschenswert

  1. Welche Farben & Typo verwendet Ihr?
  2. Gibt es unterschiedliche Schriftgrößen?
  3. Gibt es ein durchgängiges Gestaltungs-Raster?

Abfrage des bisherigen Wissen

Welche der folgenden Zeilen würde der Validator als Fehler markieren – und warum?

HTML

<h2 id="main_2">Hallo Welt!</h2>
<p class="demo">Diese Zeile <span class="betont rot unterstrichen">ist</span> wichtig</p>
<div class="übung"><p>Lorem ipsum …</p></div>

Abfrage des bisherigen Wissen 2

Für was braucht man in CSS „auto“

  1. gar nicht – in CSS muss jeder Wert exakt angegeben werden!
  2. zum automatischen Berechnen des Padding von Block-Elementen
  3. zum horizontalen Zentrieren von HTML-Elementen innerhalb des Browser-Fensters

DOM = Document Object Model

Russian-matryoshka-dolls von Creative Tools

Alle HTML-Tags sind Kinder bzw. Nachfahren des jeweiligen HTML-Dokumentes

DOM (2)

  • Alle HTML-Tags sind Kinder des jeweiligen HTML-Dokumentes
  • Alle sichtbaren Elemente sind Kinder des jeweiligen <body>-Tags…
  • <li>-Elemente sind Kinder des jeweiligen <ul>-Elements

DOM Beispiele

  • <body> und <head> sind Kinder von <html>
  • <p> ist ein Kind vom <body>
  • <strong> ist ein Kind von <p> und ein Nachfahre von <body>

DOM-Hierarchie in CSS (1)

Hat man die DOM-Hierarchie verstanden, kann man sich das Vergeben von vielen Klassen und IDs ersparen – und schreibt somit effektiveren, „eleganteren“ CSS-Code.

Aufgabe: Alle Spans, die sich innerhalb eines Divs befinden, sollen rot werden – die anderen Spans jedoch nicht!

HTML

<p>No usu nihil <span>explicari dignissim</span>, eos quod alterum adversarium ea
<div>lorem <span>ipsum</span> dolores mio sunt</div>

CSS

/* Leerzeichen zwischen div und span = span ist innerhalb eines div! */
div span {color:red}

No usu nihil explicari dignissim, eos quod alterum adversarium ea

lorem ipsum dolores mio sunt

DOM-Hierarchie in CSS (2)

Aufgabe: Nur die Spans sollen rot werden, die sich in einem Link in einem Div befinden!

HTML

<div>lorem <a href="test.html"><span>ipsum</span></a> dolores mio sunt</div>

CSS

div a span {color:red}

DOM-Hierarchie in CSS (3)

Aufgabe: Nur die Spans sollen rot werden, die sich innerhalb des Divs "demo" befinden

HTML

<div class="demo">lorem <span>ipsum</span> dolores mio sunt</div>

CSS

.demo span {color:red}

Syntax-Check (1)

Wie schaut die CSS-Anweisung aus, damit nur das gezeigte Span-Element rot wird?

HTML

<html>
…
    <body>
        …
        <ul>
            <li>
                <!-- dieses Span via CSS ansprechen! -->
                <span>prompta fastidii</span>
            </li>
        </ul>
        …
    </body>
</html>

Syntax-Check (1) Lösung

Wie schaut die CSS-Anweisung aus, damit nur das gezeigte Span-Element rot wird?

CSS

ul li span {color:red}

/* oder */
ul span {color:red;}

/* oder */
li span {color:red;}

HTML

<html>
…
    <body>
        …
        <ul>
            <li>
                <!-- dieses Span via CSS ansprechen! -->
                <span>prompta fastidii</span>
            </li>
        </ul>
        …
    </body>
</html>

Syntax-Check (2)

Wie schaut die CSS-Anweisung aus, damit nur die gezeigten Li-Elemente rot werden?

HTML

<html>
…
    <body>

    <ul>
        <li>Hunde</li>
        <li>
            Katzen
            <ul>
                <li>Perser</li>
                <li>Siam</li>
                <li>Burma</li>
            </ul>
        </li>
        <li>Hamster</li>
    </ul>

    </body>
</html>

Syntax-Check (2) Lösung

Wie schaut die CSS-Anweisung aus, damit nur die gezeigten Li-Elemente rot werden?

CSS

ul li ul li {color:red;}

/* oder */
ul li li {color:red;}

/* oder */
li li {color:red;}

HTML

<html>
…
    <body>

    <ul>
        <li>Hunde</li>
        <li>
            Katzen
            <ul>
                <li>Perser</li>
                <li>Siam</li>
                <li>Burma</li>
            </ul>
        </li>
        <li>Hamster</li>
    </ul>

    </body>
</html>

Syntax-Check (3)

Wie schaut die CSS-Anweisung aus, dass nur der Text „In meinen Arbeiten …“ rot wird?

HTML

<body>

    <header>
        <h1>Meine Website</h1>
        <p>Ich bin Gestalter und will berühmt werden</p>
    </header>

    <div class="content">
        <h2>Portfolio</h2>
        <p>In meinen Arbeiten beschäftige ich mich hauptsächlich mit Typografie.</p>
    </div>

</body>

Syntax-Check (3) Lösung

Wie schaut die CSS-Anweisung aus, dass nur der Text „In meinen Arbeiten …“ rot wird?

CSS

.content p {
    color: red;
}

HTML

<body>

    <header>
        <h1>Meine Website</h1>
        <p>Ich bin Gestalter und will berühmt werden</p>
    </header>

    <div class="content">
        <h2>Portfolio</h2>
        <p>In meinen Arbeiten beschäftige ich mich hauptsächlich mit Typografie.</p>
    </div>

</body>

Syntax-Check (4)

Wie schaut die CSS-Anweisung aus, dass auf der Startseite (index.html) der Hintergrund weiss und auf der 2. Seite (seite_2.html) der Hintergrund schwarz ist?

HTML (index.html)

<…>
<body>
    <h1>Startseite meiner Website</h1>
    <p>Hier etwas Text</p>
</body>

HTML (seite_2.html)

<…>
<body class="dunkel">
    <h1>Seite 2 meiner Website</h1>
    <p>Auch hier etwas Text</p>
</body>

Syntax-Check (4) Lösung

Wie schaut die CSS-Anweisung aus, dass auf der Startseite (index.html) der Hintergrund weiss und auf der 2. Seite (seite_2.html) der Hintergrund schwarz ist?

CSS

/* Seite(n) ohne Klasse "dunkel" */
body {
  background-color: white;
  color: black;
}

/* "body." müsste nicht dabei stehen, macht es hier verständlicher */
body.dunkel {
  background-color: black;
  color: white;
}

HTML (index.html)

<…>
<body>
    <h1>Startseite meiner Website</h1>
    <p>Hier etwas Text</p>
</body>

HTML (seite_2.html)

<…>
<body class="dunkel">
    <h1>Seite 2 meiner Website</h1>
    <p>Auch hier etwas Text</p>
</body>

Demo

Schaut Euch die Demo an – oder ladet diese zum Experimentieren herunter!

Pause

Flexbox: Perfekt für Navigationsmenüs

damit lassen sich mit wenigen Zeilen CSS Navigationsmenüs (und andere Sachen) waagrecht darstellen!

Waagrechte Navigationsmenüs

Verwendet für Navigations-Menüs immer ungeordnete Listen – diese lassen sich via CSS einfach sowohl senkrecht wie waagrecht darstellen!

HTML

<nav>
    <ul>
        <li class="current"><a href="index.html">Startseite</a></li>
        <li><a href="produkte.html">Produkte</a></li>
        <li><a href="service.html">Service</a></li>
        <li><a href="faq.html">FAQs</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impressum.html">Impressum</a></li>
    </ul>
</nav>

CSS

nav ul {
    list-style-type: none;
    /* hier das entscheidende! */
    display: flex;
    /* 1. Wert: vert. Abstand, 2. Wert horiz. Abstand */
    gap: 5px 20px;
    /* nicht unbedingt nötig! */
    flex-wrap: wrap;
}

/* 
Markierung, auf welcher Seite man sich gerade befindet;
dafür habe ich bei "index.html" die Klasse "current" hinzugefügt
*/
.current {
    border-bottom: 5px solid;
}

Demo

Demo eines waagrechten Menüs – schaut Euch den Source-Code an!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Waagrechte Navigationsmenü: Varianten

Die Varianten wurden gemacht, in dem ich eine Zeile CSS-Code hinzugefügt habe!

Der HTML-Code ist unverändert:

HTML

<nav>
    <ul>
        <li><a href="index.html">Startseite</a></li>
        <li><a href="produkte.html">Produkte</a></li>
        […]
    </ul>
</nav>

CSS

nav ul {
    list-style-type: none;
    /* hier das entscheidende! */
    display: flex;
    /* 1. Wert: vert. Abstand, 2. Wert horiz. Abstand */
    gap: 5px 20px;
    /* nicht unbedingt nötig! */
    flex-wrap: wrap;
}

/* ==================== spezielle Einstellungen ==================== */

/* die bei "nav ul" gemachten Einstellungen für die Nav-Menüs bleiben erhalten! */

/* Menü zentriert */
.zentriert nav ul {
    justify-content: center;
}

/* Menü rechtsbündig */
.rechtsbuendig nav ul {
    justify-content: flex-end;
}

/* Menü verteilt */
.verteilt nav ul {
    justify-content: space-between;
}

Demo

Demo – schaut Euch den Source-Code an!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Waagrechtes Menü: geteilte Darstellung

Vielleicht habt Ihr Menüpunkte, die Ihr visuell von den anderen absetzten möchtet…

Der HTML-Code ist unverändert:

HTML

<nav>
    <ul>
        <li><a href="index.html">Startseite</a></li>
        <li><a href="produkte.html">Produkte</a></li>
        […]
    </ul>
</nav>

CSS

nav ul {
    list-style-type: none;
    /* hier das entscheidende! */
    display: flex;
    /* 1. Wert: vert. Abstand, 2. Wert horiz. Abstand */
    gap: 5px 20px;
    /* nicht unbedingt nötig! */
    flex-wrap: wrap;
}

/* ==================== spezielle Einstellungen ==================== */

/* die bei "nav ul" gemachten Einstellungen für die Nav-Menüs bleiben erhalten! */

/* das 5. li-Element wird gesondert behandelt */
/* siehe https: //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container */
nav li:nth-child(5) {
  /* nicht unbedingt intuitiv… */
  margin-left: auto;
}

Demo

Demo – schaut Euch den Source-Code an!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Elemente horizontal ausrichten

Selbstverständlich könnt Ihr Flexbox nicht nur für die Darstellung von Navigationselementen verwenden!

Bei Flexbox gibt es unterschiedliche Möglichkeiten, die (Kinder-)Elemente horizontal auszurichten:

HTML

<div>
    <figure><img src="p/spatz_1.jpg" alt="Spatz 1"></figure>
    <figure><img src="p/spatz_2.jpg" alt="Spatz 2"></figure>
    <figure><img src="p/spatz_3.jpg" alt="Spatz 3"></figure>
    <figure><img src="p/spatz_4.jpg" alt="Spatz 4"></figure>
</div>

CSS

div {
    display: flex;
    gap: 10px
}

/* Ausrichtung an der oberen Kante */
div.flex-start {
    /* Default-Settings, müsste nicht extra eingestellt werden */
    align-items: flex-start;
}

/* Ausrichtung an der Mittellinie */
div.center {
    align-items: center;
}

/* Ausrichtung an der unteren Kante */
div.flex-end {
    align-items: flex-end;
}

Demo

Demo – schaut Euch den Source-Code an!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Learn flexbox the easy way

gut gemachtes Tutorial!

FLEX: A simple visual cheatsheet for CSS Flex

https://flexbox.malven.co/

Mehrspaltige Layouts

Mobile & Desktop Layouts

http://www.hicksdesign.co.uk/

Mobile Layouts sind – mehr oder weniger – einspaltig. Desktop-Layouts sind meist mehrspaltig …

Wie schaffe ich es, Elemente nebeneinander darzustellen?

mit Eurem bisherigen CSS-Wissen könnt Ihr Elemente nur untereinander darstellen!

… das ist auf Dauer natürlich unbefriedigend!

Grid-Layout

Grid-Layout wird seit ca. 2017 von (aktuellen) Browsern unterstützt. Es ist ein sehr mächtiges und umfangreiches Tool, um mehrspaltige Layouts zu erstellen.

Wir schauen uns in dem Kurs nur die wichtigsten Funktionen an – Grid kann noch viel mehr!

Bildergalerie im Grid-Layout

Dreispaltige Bildergalerie, die sich automatisch der Breite des Browserfensters anpasst

HTML

<div class="galerie">
    <img src="p/unicode_0152.svg" alt="">
    <img src="p/unicode_00BE.svg" alt="">
    <img src="p/unicode_fb03.svg" alt="">
    <img src="p/unicode_00BC.svg" alt="">
    <img src="p/unicode_0040.svg" alt="">
    <img src="p/unicode_fb00.svg" alt="">
    <img src="p/unicode_221E.svg" alt="">
</div>

CSS

.galerie {
    /* das entscheidende */
    display: grid;

    /* Dreispaltiges Layout, jeweils ein Drittel */
    grid-template-columns: 1fr 1fr 1fr;

    /* horizontaler und vertikaler Abstand zwischen den Raster-Elementen */
    gap: 15px;
}

/* die Bilder sollen 100% der Rasterzelle einnehmen */
.galerie img {
    width: 100%;
    height: auto;
}

Demo

Bildergalerie-Demo – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

CodePen

See the Pen Bildergalerie_einfach by Matthias Edler-Golla (@megolla) on CodePen.

Bildergalerie mit unterschiedlichen Breiten

Dreispaltige Bildergalerie, die sich automatisch der Breite des Browserfensters anpasst

HTML

<div class="galerie">
    <img src="p/unicode_0152.svg" alt="">
    <img src="p/unicode_00BE.svg" alt="">
    <img src="p/unicode_fb03.svg" alt="">
    <img src="p/unicode_00BC.svg" alt="">
    <img src="p/unicode_0040.svg" alt="">
    <img src="p/unicode_fb00.svg" alt="">
</div>

CSS

.galerie {
    /* das entscheidende */
    display: grid;

    /* Dreispaltiges Layout, unterschiedliche Breiten und Maßeinheiten */
    /* nur die mittlere Spalte ändert ihre Breite  */
    grid-template-columns: 200px 1fr 400px;

    /* Abstand zwischen den Raster-Elementen */
    gap: 15px;
}

/* die Bilder sollen 100% der Rasterzelle einnehmen */
.galerie img {
    width: 100%;
    height: auto;
}

Demo

Bildergalerie-Demo – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

CodePen

See the Pen Bildergalerie_unterschiedliche_Breiten by Matthias Edler-Golla (@megolla) on CodePen.

Raster sichtbar machen

Inspector

Um den Inspector zu öffnen, mit der rechten Mouse-Taste innerhalb des Browserfensters klicken und „Untersuchen/Inspect Element“ auswählen…

Artikel eindrittel / zweidrittel

eine klassische Aufteilung…

<section class="content"> wird über CSS angesprochen und damit über zwei Raster-Elemente „gestreckt“

HTML

<article class="raster">

    <section class="intro">
        <h2>Überschrift</h2>
        <p>intro-Text…</p>
    </section>

    <section class="content">
        <h2>Überschrift</h2>
        <p>content-Text…</p>
    </section>

</article>

CSS

.raster {

    /* Blocksatz */
    text-align: justify;

    /* Silbentrennung */
    hyphens: auto;

    display: grid;

    /* 3spaltiges Raster */
    grid-template-columns: repeat(3, 1fr);

    gap: 1.5em;
}

/* hier wird zum 1. Mal ein „Kinder-Element“ explizit angesprochen */
.content {
    /* fängt bei Raster-Linie 2 an und überspannt 2 Rasterzellen */
    grid-column: 2 / span 2;
}

Demo

Artikel mit Eindrittel/Zweidrittel-Aufteilung – Ändert die Größe des Browser-Fensters und seht, was geschieht!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Bildergalerie mit Highlight

Das erste Bild soll visuell hervorgehoben werden und wird deshalb doppelt so groß dargestellt…

Dafür „überspannt“ es zwei Raster-Säulen („grid-column“) und zwei Raster-Reihen („grid-row“).

Beachtet, dass dieses Bild vom Source-Code her als letztes dargestellt werden sollte – die CSS-Anweisungen für dieses Element positionieren es aber am Anfang der Bildergalerie!

HTML

<div class="galerie">
    <img src="p/unicode_00BE.svg" alt="">
    <img src="p/unicode_fb03.svg" alt="">
    <img src="p/unicode_00BC.svg" alt="">
    <img src="p/unicode_0040.svg" alt="">
    <img src="p/unicode_fb00.svg" alt="">
    <img src="p/unicode_221E.svg" alt="">
    <img class="betont" src="p/unicode_0152.svg" alt="">
</div>

CSS

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.galerie img {
    width: 100%;
    height: auto;
}
.betont {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

Demo

Demo – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Bildergalerie mit explizit plaziertem Element

Das im HTML-Code erste Bild wird explizit in der Mitte der 2. Reihe positioniert.

HTML

<div class="galerie">
    <img class="plaziert" src="p/unicode_0152.svg" alt="" />
    <img src="p/unicode_00BE.svg" alt="" />
    <img src="p/unicode_221E.svg" alt="" />
    <img src="p/unicode_0152.svg" alt="" />
    <img src="p/unicode_00BE.svg" alt="" />
    <img src="p/unicode_fb03.svg" alt="" />
</div>

CSS

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.galerie img {
    width: 100%;
    height: auto;
}
/* das explizit plazierte Bild */
.plaziert {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

Demo

Demo – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Bildergalerie mit Text in der Mitte

Der im HTML-Code an erster Stelle angegebener Text wird explizit in der Mitte der 2. Reihe positioniert.

HTML

<div class="galerie">
    <p class="plaziert">Meine Galerie mit fantastischen Unicode-Zeichen</p>
    <img src="p/unicode_00BE.svg" alt="" />
    <img src="p/unicode_221E.svg" alt="" />
    <img src="p/unicode_0152.svg" alt="" />
    <img src="p/unicode_00BE.svg" alt="" />
    <img src="p/unicode_fb03.svg" alt="" />
</div>

CSS

.galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
}
.galerie img {
    width: 100%;
    height: auto;
}
.plaziert {
    grid-column: 2 / span 2; /* geht über 2 Grid-Columns */
    grid-row: 2 / 3;
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 4.5vw;
    line-height: 1.2;
    align-self: center; /* vertikal in der Mitte */
}

Demo

Demo – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Bildergalerie mit automatischer Reihung

Der Platz im Browserfenster soll optimal ausgenutzt werden; solange die Bilder in der gewünschten Größe gezeigt werden, füllen diese den zur Verfügung stehenden Platz.

HTML

<div class="galerie">
    <img src="p/unicode_0152.svg" alt="">
    <img src="p/unicode_00BE.svg" alt="">
    <img src="p/unicode_fb03.svg" alt="">
    <img src="p/unicode_00BC.svg" alt="">
    <img src="p/unicode_0040.svg" alt="">
    <img src="p/unicode_fb00.svg" alt="">
    <img src="p/unicode_221E.svg" alt="">
    …
</div>

CSS

.galerie {
    display: grid;
    gap: 15px;

    /*
        auto-fill: zur Verfügung stehender Platz soll automatisch aufgefüllt werden,
        dazu kann der Browser auch weitere "grid-columns" erzeugen

        minmax(200px, 1fr): mindestens 200px; maximal 1fr Breite
     */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Demo

Demo – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Breaking out of the Box

Dreispaltiges Layout, das dazu genutzt wird, ein wichtiges Zitat über die volle Breite darzustellen

HTML

<main>
  <h2>Breaking out of the Box</h2>

  <div class="einleitung">
    <h3>Einleitung</h3>
    <p>Lorem ipsum…</p>
  </div>

  <blockquote class="vollebreite">
    What a computer is…
  </blockquote>

  <div class="schluss">
    <h3>Schluss</h3>
    <p>Lorem ipsum…</p>
  </div>
</main>

CSS

main {
  display: grid;
  gap: 10px;

  /* links und rechts schmale grid-columns, in der Mitte flexibel zwischen 300px und 40em */
  grid-template-columns: minmax(1em, 1fr) minmax(300px, 40em) minmax(1em, 1fr);
}

/* h2, divs fangen in der 2. Raster-Spalte an */
main h2,
main div {
  grid-column: 2;
  padding: 1em;
}

.vollebreite {
  /*
    damit geht das Element immer über die komplette Breite des Rasters
    egal, wieviele grid-columns es gibt
  */
  grid-column: 1 / -1;
  padding: 1em;
}

Demo

Demo – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit experimentieren…

Alle Grid-Beispiele als ein Download

Ihr könnt auch alle hier gezeigten Grid-Beispiele als ein Paket herunterladen…

…und Euch somit die Sachen in Ruhe ansehen – oder für die eigenen Bedürfnisse anpassen…

Tutorials usw. zu Grid-Layout

Learn CSS Grid the easy way

Sehr anschaulich gemachtes Tutorial!

CSS Grid Playground

https://mozilladevelopers.github.io/playground/css-grid

Bitte schaut Euch das genauer an – wichtige Begriffe wie „grid-lines, grid-cells“ usw. werden dort anschaulich erklärt!

Außerdem gibt es dort viele, anschaulich gemachte Erklärungen zum Erstellen von Grid-Layouts!

Grid by Example

https://gridbyexample.com/

Website von Rachel Andrews – viele gute (Video-)Tutorials und Beispiele…

Grid Garden – A game for learning CSS grid

Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.

Interaktives Browser-Spiel: http://cssgridgarden.com/

GRID: A simple visual cheatsheet for CSS Grid Layout

http://grid.malven.co/

Übung 5: Dreispaltiges Layout

Macht diese Übung unbedingt vor der Venedig-Website (übernächste Übung)

Briefing

  1. Lades das Übungspaket runter
  2. Das Layout soll am Ende so wie auf der Vorlage aussehen
  3. Behaltet Datei-Struktur und HTML bei – Ihr sollt diesmal nur die CSS-Datei machen!
  4. Verwendet für das Raster die Anweisungen „grid-template-columns"
  5. Erzeugt ein Dreispaltiges Raster

Behaltet die Dateistruktur bei!

Übung 6: Symbol Kreuz

Macht diese Übung unbedingt vor der Venedig-Website (übernächste Übung)

Briefing

  1. Lades das Übungspaket runter
  2. Das Layout soll am Ende so wie auf der Vorlage aussehen
  3. Behaltet Datei-Struktur und HTML bei – macht nur die CSS-Datei!
  4. Verwendet für das Raster die Anweisungen „grid-template-colums"
  5. Erzeugt ein Dreispaltiges Raster, bei dem sich die Bilder automatisch an die Bildschirmbreite anpassen, aber nicht kleiner als 160px werden (Hinweis: Nutzt die Grid-Anweisung: minmax(??, ??))
  6. Plaziert die Bilder mit dem grauen Hintergrund sowie das Wort „Symbole“ explizit an den auf dem Screenshot gezeigten Stellen

Behaltet die Dateistruktur bei!

Übung 7: FlowerPower

Macht diese Übung unbedingt vor der Venedig-Website (nächste Übung)

Briefing

  1. Lades das Übungspaket runter
  2. Das Layout soll am Ende so wie auf der Vorlage aussehen
  3. Behaltet Datei-Struktur und HTML bei – Ihr sollt diesmal nur die CSS-Datei machen!
  4. In der CSS-Datei „style.css“ sind schon ein paar Angaben enthalten – diese nicht löschen, sondern ergänzen!
  5. Verwendet Flexbox – Tip: Ihr braucht dieses dreimal für das Layout
  6. Gestaltet den Header (incl. der Navigation) entsprechend der Vorlage

Übung 8: Venedig

Das ist die umfangreichste Übung dieses Kurses!

Achtung: Diese Übung ist noch nicht für Smartphone-Größen! Bitte macht Eurer Browserfenster deswegen deutlich breiter – die Optimierung für kleinere Screens machen wir nächste Woche!

Diesmal besteht die Übung aus drei HTML-Seiten über Venedig, die alle das gleiche Stylesheet verwenden sollen!

Aufgabenbeschreibung

  1. Ladet das Übungspaket runter
  2. Schaut Euch die Screenshots an, wie die Galerie/Startseite, Strukturseite & Geschichteseite aussehen sollen – dort ist das Raster sichtbar geschaltet
  3. Der HTML-Code der drei Seiten ist bis auf die Verlinkungen untereinander fertig – bitte nichts anderes ändern!
  4. Verlinkt die drei Seiten so miteinander, dass man beliebig zwischen Startseite, Geschichte- und Strukturseite wechseln kann
  5. Für das waagrechte Menü könnt Ihr viel Code verwenden, den ich bei Waagrechte Navigationsmenüs (Flexbox) gezeigt habe!
  6. Die Startseite ist die „index.html“ und zeigt die Galerie der Venedig-Fotos
  7. fügt das dazugehörige CSS in der Datei style.css ein – Achtung: Ihr dürft nur diese eine gemeinsame CSS-Datei für alle drei Seiten verwenden!
  8. In der CSS-Datei style.css befindet sich schon Code, diesen nicht löschen sondern ergänzen!
  9. Baut bei struktur.html und geschichte.html zuerst ein vierspaltiges Raster auf – und plaziert dann in einem weiteren Schritt nur die Elemente, die eine besondere Position bzw. Breite haben.
  10. Nutzt bei index.html die Anweisung, die bei Bildergalerie mit automatischer Reihung vorgestellt wurde – dann passt sich die Bildergalerie automatisch an die Breite des Browserfensters an.

Dateistruktur

Ich habe Euch die nötige Dateistruktur schon vorbereitet – bitte verwendet diese!

Konzept-Ideen und Scribbles Eures Portfolios

Wie schauen Eure Ideen aus? Wir können diese gleich im Anschluss an den Vortrag durchsprechen…

Bitte stellt dabei auch dar, wie Eure Site auf einem Smartphone und auf einem Desktop-PC aussehen soll.

Templates

Ich habe entsprechende Templates als PDF erstellt, die Ihr gerne verwenden (ausdrucken & darauf scribbeln) könnt:

scribble_templates.pdf

Danke!

Alle Scripte durchsuchen

Weitere Vorträge: