A B E G

DOM und Desktop-Layouts / 2017-11-23 / 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 14.12.
  2. Abfrage des bisherigen Wissen
  3. DOM
  4. Floating & Clearing
  5. Positionieren
  6. Grid-Layout

Was erwarte ich zur Zwischenpräsentation am 14.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?
  4. Werden Icons verwendet? Wie schauen diese aus?

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>

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!


Floating Elements

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

  • Es kann nach links oder nach rechts gefloatet werden
  • Das im Source-Code oben liegende Element floatet in das untere Element
  • Das gefloatete Element muss eine Breiten-Angabe haben!

HTML

<h2>Floating Headline Text</h2>
<p>Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque [...]</p>

CSS

h2 {
    color:#fff;
    background:red;
    padding:1.5em 0.3em;
    margin:0 10px 10px 0;

    /* floating-relevante Angaben */
    width:8em;
    float:left;
}

Demo

Schaut Euch die Demo und deren Source-Code an! Ändert dabei auch die Breite Eures Browser-Fensters…


Floating & Clearing

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

  • „Clear“ beendet das Floaten eines Elements
  • Es gibt clear:left, clear:right und clear:both

HTML

<h2>Floating Headline Text</h2>
<p>Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque [...]</p>
<p class="stop">Et sumo dolor disputando vix, error erroribus […]</p>

CSS

h2 {float:left; usw.}
.stop {clear:left;}

Grid-Layout

Grid-Layout wird erst seit einem halben Jahr von (aktuellen) Browsern unterstützt, ist aber ein sehr mächtiges und umfangreiches Tool, um mehrspaltige Layouts zu erstellen

Bisher wurde dafür hauptsächlich das Floating verwendet, für das es eigentlich nicht vorgesehen ist – und somit ein Hack war…


CSS Grid Playground

https://mozilladevelopers.github.io/playground/

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


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;

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

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

Demo

Bildergalerie-Demoschaut 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 in Brackets 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 */
    grid-template-columns: 200px 1fr 400px;

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

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

Demo

Bildergalerie-Demoschaut 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 in Brackets 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…

Achtung!

Das geht aktuell nur im Firefox!


Waagrechte Navigationsmenüs

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

CodePen

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

HTML

<nav>
    <ul>
        <li><a href="punkt_1.html">Punkt 1</a></li>

        <!-- auf dieser Seite befindet man sich gerade -->
        <li class="current"><a href="punkt_2.html">Punkt 2</a></li>

        <li><a href="punkt_3.html">Punkt 3</a></li>
        <li><a href="punkt_4.html">Punkt 4</a></li>
        <li><a href="punkt_4.html">Punkt 5</a></li>
        <li><a href="punkt_4.html">Punkt 6</a></li>
    </ul>
</nav>

CSS

nav {
    background-color: #000;
    color: #fff;
}

/* Links im Navi-Menü */
nav a {
    color: #fff;
    text-decoration: none;

    /* ganz wichtig, sonst geht "padding" nicht!*/
    display: block;

    padding: 1em;
    border-left: 1px solid #ddd;
}

/* der ausgewählte Menüpunkt wird hervorgehoben */
nav li.current a {
    background-color: rgba(255,255,255,.4);
}

nav ul {
    list-style-type: none;

    display: grid;

    /* Kurzschreibweise für: grid-template-columns: 1fr 1fr 1fr 1fr 1f 1fr; */
    grid-template-columns: repeat(6, 1fr);
}

Demo

Demo eines waagrechten Menüsschaut Euch den Source-Code an!

Download

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


Waagrechte Navigationsmenü mit Lücke

weil Ihr z.B. einen Menüpunkt visuell absetzen möchtet…

Bei den bisherigen Beispielen haben wir nur das Element verwendet, das das Raster definiert – hier wird ein Element (<li class="abgesetzt">) angesprochen, um gezielt positioniert zu werden:

HTML

<nav>
    <ul>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">News</a></li>
        <li class="current"><a href="#">Über uns</a></li>
        <li><a href="#">Kontakt</a></li>

        <li class="abgesetzt"><a href="#">Impressum</a></li>
    </ul>
</nav>

CSS

/* Rest wie beim vorherigen Beispiel */
nav ul {
    /* … */
    display: grid;
    /* Kurzschreibweise für: grid-template-columns: 1fr 1fr 1fr 1fr 1f 1fr; */
    grid-template-columns: repeat(6, 1fr);
}

.abgesetzt {
    /* das Element fängt somit nicht an Raster-Platz 5 sondern 6 an */
    grid-column: 6;
}

Demo

Demoschaut Euch den Source-Code an!

Download

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


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);

    grid-gap: 1.5em;
}

.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 in Brackets 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“).

HTML

<div class="galerie">
    <img class="betont" 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;
    grid-template-columns: repeat(3, 1fr);
    grid-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 in Brackets 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;
    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
     */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Demo 1

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

Demo 2

Erstes Bild doppelt so groß – 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 in Brackets 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;
  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 in Brackets experimentieren…


Tutorials usw. zu Grid-Layout


Buchempfehlung: The New CSS Layout

https://abookapart.com/products/the-new-css-layout

CSS Grid Layout will transform the way you design and develop for the web—and Rachel Andrew will change the way you grok the spec. Learn to use Grid Layout within a system that includes existing methods to perform the tasks they were designed for—and take advantage of this pivotal moment in the evolution of layout.

Das Buch kostet in seiner digitalen Form $ 11.-


Grid by Example

https://gridbyexample.com/

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


Lynda.com: CSS Grid Grundkurs

Online-Kurs – für HM-Studierende kostenlos!

Lynda.com: CSS Grid Grundkurs


CSS Grid Playground Tutorials

https://mozilladevelopers.github.io/playground/

Dort sind einige Tutorials zum Grid-Layout enthalten…


Konzept-Ideen und Scribbles Eures Portfolios

Bitte zeigt uns im M014 Scribbles Eures Portfolios – analog auf Papier…

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:


Übung 5: Dreispaltiges Layout

Macht diese Übung unbedingt vor der Portfolio-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. Verwendet für das Raster die Anweisungen „grid-template-colums"
  5. Erzeugt ein Dreispaltiges Raster

Behaltet die Dateistruktur bei!


Übung 6: Venedig Fotos

Achtung: Diese Übung ist noch nicht für Smartphone-Größen! Bitte macht Eurer Browserfenster deswegen deutlich breiter …

Diesmal besteht die Übung aus drei Seiten eines fiktiven Fotografen-Webauftritts, die Ihr miteinander verlinken müsst!

Aufgabenbeschreibung

  1. Ladet das Übungspaket runter
  2. Schaut Euch die Screenshots an, wie die Startseite, Venedigseite & Kontakseite aussehen sollen
  3. Aus der Datei Texte_roh/texte.txt könnt Ihr die benötigten Texte herauskopieren – bitte nicht abtippen!
  4. Baut die drei Seiten zuerst in HTML auf und fügt die benötigten Bilder ein, diese befinden sich im Ordner „p“
  5. Für das waagrechte Menü könnt Ihr viel Code verwenden, den ich bei „Waagrechte Navigationsmenüs“ gezeigt habe!
  6. Die Portfolio-Seite ist die „index.html“ …
  7. macht dann erst das dazugehörige CSS – Achtung: Ihr dürft nur eine gemeinsame CSS-Datei für alle drei Seiten verwenden!
  8. Verlinkt die drei Seiten so, dass man mit Hilfe des Navigationsmenüs von einer Seite zur anderen wechseln kann

Dateistruktur

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


Danke!

Weitere Vorträge: