Frameworks und Templates

IT 11.7 – Webdesign · Einheit 8 · Café-Projekt Schritt 8

Lernziele

Du kannst vorgefertigte Webanwendungen unterscheiden: Framework, Template, Content-Management-System und Baukasten.
Du kannst ein CSS-Framework in eine Seite einbinden und mit sauberem HTML nutzen.
Du kannst ein Template anpassen, ohne die Dateien des Frameworks zu verändern.
Du kannst Lizenzen beachten und Vor- und Nachteile vorgefertigter Lösungen beurteilen.

Rückblick

1. Wofür steht die viewport-Angabe im head?

Sie sorgt dafür, dass das Handy die Seite in seiner echten Breite anzeigt und nicht verkleinert.

2. Gilt @media (min-width: 40rem) auf dem Handy oder auf dem großen Bildschirm?

Auf dem großen Bildschirm: Die Regeln gelten ab einer Breite von 40 rem.

3. Zwei Regeln sind gleich genau. Welche gewinnt?

Die spätere, also die weiter unten bzw. in der später eingebundenen Datei.

Bis Freitag eine Seite?

Die Schülervertretung plant ein Sommerfest und braucht bis Freitag eine Webseite: Programm, Anmeldung für die Stände, Kontakt. Niemand hat Zeit, alles von Grund auf mit CSS zu gestalten, wie ihr es beim Café gemacht habt. Trotzdem soll die Seite ordentlich aussehen, auf dem Handy funktionieren und barrierefrei sein.

Wie machen das Profis, die jede Woche neue Seiten bauen?

Erkunden: Vorgefertigtes nutzen

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Dieselbe Seite, zweimal mittel

Beide Spielplätze enthalten dasselbe HTML und kein eigenes CSS. Im zweiten ist zusätzlich die Datei eines CSS-Frameworks namens Pico eingebunden.

Ohne Framework:

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Mit Framework:

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Eingebunden: Pico CSS 2.1.1 (MIT-Lizenz). Für deine eigene Seite brauchst du die Datei pico.min.css im selben Ordner wie deine HTML-Datei.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Vergleiche die beiden Vorschauen. Nenne mindestens fünf Unterschiede.

b) Stelle beide Vorschauen auf „Handy“. Beschreibe, wie sich die Seite mit Framework verhält.

c) Im HTML steht fast keine Klasse. Vermute, wie das Framework trotzdem weiß, was es gestalten soll.

d) Ein Unterschied steht im HTML. Finde ihn und probiere aus, was passiert, wenn du ihn im zweiten Spielplatz entfernst.

Tipp 1

Zu c): Welche Selektoren kennst du aus Einheit 4, für die man keine Klassen braucht?

Lösung

Erkundung 2: Darf ich das verwenden? mittel

Du findest im Internet drei Vorlagen für eine Vereinsseite. Unter jeder steht ein kurzer Hinweis:

„MIT License. Copyright (c) 2024 Beispiel-Entwickler. Permission is hereby granted, free of charge, to any person obtaining a copy … The above copyright notice and this permission notice shall be included in all copies …“
„Dieses Template steht unter der Lizenz CC BY 4.0. Name: Mia Muster.“
Kein Hinweis. Die Seite sieht professionell aus und lässt sich mit einem Klick herunterladen.

a) Gib für jede Vorlage an, ob du sie für die Seite des Schülercafés verwenden würdest.

b) Begründe, was du jeweils beachten musst.

Lösung

Vorgefertigte Webanwendungen

Vergleicht eure Ergebnisse. Kaum jemand baut eine Seite heute komplett von null. Je nach Ziel und Vorwissen gibt es verschiedene vorgefertigte Lösungen:

Art	Was ist das?	Wer macht was?	Beispiel
CSS-Framework	fertiges CSS mit Regeln für alle üblichen Elemente, oft mit Klassen für Raster und Bausteine	du schreibst HTML (und ggf. etwas CSS), das Framework gestaltet	Pico CSS, Bootstrap
Template (Vorlage)	fertig gestaltete Seite oder Seitenart, die man anpasst	du tauschst Inhalte, Farben, Bilder aus	Vorlage „Vereinsseite“
Content-Management-System (CMS)	Webanwendung auf einem Server, mit der man Inhalte über eine Oberfläche pflegt	Inhalte schreiben ohne HTML; Design über Templates („Themes“)	WordPress, Joomla, TYPO3
Baukasten	Online-Dienst, bei dem man die Seite zusammenklickt; der Anbieter betreibt sie	alles im Browser, wenig Kontrolle über den Code	Angebote vieler Webhoster

Ein Framework (Rahmenwerk) gibt ein Gerüst und Regeln vor, in die man seine eigene Arbeit einfügt. Es gibt Frameworks für CSS, aber auch für JavaScript (zum Beispiel React oder Vue, ergänzend, nicht Teil dieser Einheit).

Ein CSS-Framework einbinden

Du lädst die Datei des Frameworks herunter und legst sie in deinen Projektordner. Dann bindest du sie vor deiner eigenen CSS-Datei ein:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sommerfest</title>
  <link rel="stylesheet" href="pico.min.css">
  <link rel="stylesheet" href="eigenes.css">
</head>

Die Reihenfolge ist wichtig: Bei gleicher Genauigkeit gewinnt die spätere Regel. So kann dein eigenes CSS das Framework überschreiben.

Pico CSS gestaltet vor allem die Elemente selbst. Ein paar Klassen und Attribute kommen hinzu:

Angabe	Wirkung
`class="container"`	begrenzte Breite, zentriert, mit Rand
`class="grid"`	Kinder stehen nebeneinander in gleich breiten Spalten, auf dem Handy untereinander
`<article>`	erscheint als Karte mit Hintergrund und Schatten
`class="secondary"` bzw. `class="outline"` bei Knöpfen	andere Farbe bzw. nur umrandet
`<html data-theme="light">`	immer helles Design, statt sich nach der Einstellung des Geräts zu richten

Du hast es in Erkundung 1 vielleicht gesehen: Pico zeigt ohne data-theme auf Geräten mit dunklem Design automatisch ein dunkles Design.

Die Datei zum Herunterladen: pico.min.css (Pico CSS 2.1.1, MIT-Lizenz). Die vollständige Anleitung steht auf picocss.com (Du verlässt jetzt Maternet, englisch).

Ein Template anpassen

Pico legt seine Farben in CSS-Variablen fest, zum Beispiel --pico-primary für Links und Knöpfe. Du änderst die Farben, indem du die Variablen in deiner eigenen CSS-Datei neu setzt:

:root[data-theme="light"] {
  --pico-primary: #6a3d8f;
  --pico-primary-background: #6a3d8f;
  --pico-primary-border: #6a3d8f;
  --pico-primary-hover: #4f2d6b;
  --pico-primary-hover-background: #4f2d6b;
  --pico-primary-hover-border: #4f2d6b;
}

So gehst du beim Anpassen eines Templates vor:

Lizenz prüfen: Darf ich es nutzen und verändern? Was muss ich angeben?
Aufbau verstehen: Welche Dateien gibt es? Welche Bereiche hat die Seite? Die Entwicklerwerkzeuge helfen.
Inhalte ersetzen: Texte, Bilder mit passenden Alternativtexten, Links, Titel, lang.
Design anpassen: Farben, Schrift, Abstände in der eigenen CSS-Datei.
Aufräumen: Bereiche, die du nicht brauchst, ganz entfernen, nicht nur verstecken.
Prüfen: Kontraste der neuen Farben, Tastatur, Handy-Ansicht, Lizenzhinweis vorhanden?

Vor- und Nachteile

Vorteile	Nachteile
schnell ein ordentliches, einheitliches Ergebnis	viele Seiten sehen sich ähnlich
responsiv und meist gut barrierefrei	man muss die Regeln des Frameworks lernen
getestet in vielen Browsern	oft viel mehr Code als nötig (längere Ladezeit)
wird von anderen weiterentwickelt	eigene Wünsche sind manchmal mühsam umzusetzen
gut für Teams: alle nutzen dieselben Bausteine	Abhängigkeit: Was, wenn es nicht mehr gepflegt wird?

Bei einem CMS kommt hinzu: Es läuft auf einem Server und muss regelmäßig aktualisiert werden. Veraltete Versionen und Erweiterungen sind ein häufiges Einfallstor für Angriffe.

Lokal statt von fremden Servern: Viele Anleitungen binden Frameworks oder Schriften direkt von fremden Servern ein (sogenannte CDNs). Dabei wird beim Aufruf die IP-Adresse der Besucher an diesen Server übertragen. Das ist datenschutzrechtlich problematisch. Lade die Dateien deshalb herunter und lege sie auf deinen eigenen Server. Maternet macht es auch so.

Café-Projekt: Schritt 8

Café-Projekt, Schritt 8: Das Café mit Pico mittel

Baue eine zweite Fassung deiner Startseite mit Pico und vergleiche sie mit deiner eigenen.

Lege einen neuen Ordner cafe-pico an. Kopiere index.html und den Ordner bilder hinein. Lade pico.min.css herunter und lege die Datei ebenfalls hinein.
Ersetze in index.html den Link auf style.css durch Links auf pico.min.css und eine neue, leere Datei cafe-pico.css (in dieser Reihenfolge).
Setze data-theme="light" in das html-Element und class="container" in main.
Mache aus den drei Angebots-Kärtchen article-Elemente in einem Behälter mit class="grid".
Ändere in cafe-pico.css die Hauptfarbe auf die Café-Farbe #874026 (Hover: #6b3220).
Prüfe die Kontraste, die Handy-Ansicht und die Tastaturbedienung.
Nimm in drei Sätzen Stellung: Welche Fassung würdest du dem Café empfehlen und warum?

Tipp 1

Zu 4.: Die Klasse karte und der Behälter angebote aus Schritt 5 werden hier nicht mehr gebraucht. Pico gestaltet article selbst.

Tipp 2

Zu 5.: Siehe „Ein Template anpassen“. Denk an alle Variablen: Farbe, Hintergrund und Rahmen, jeweils auch für Hover.

Stand nach Schritt 8

Aufgaben

Aufgabe 1: Was passt? leicht

Ordne jeder Situation die passende vorgefertigte Lösung zu: CSS-Framework, Template, CMS oder Baukasten. Begründe kurz.

a) Im Tierschutzverein sollen fünf Ehrenamtliche ohne HTML-Kenntnisse jede Woche neue Tiere mit Foto und Text einstellen. Der Verein hat einen eigenen Webspace.

b) Ein Schüler schreibt seine Bewerbungsseite selbst in HTML, möchte aber ohne viel Aufwand ein sauberes, responsives Aussehen.

c) Eine Fotografin hat eine fertig gestaltete Portfolio-Seite gekauft und möchte nur ihre Bilder, Texte und Farben einsetzen.

d) Ein Imbiss möchte schnell eine Seite mit Öffnungszeiten, ohne sich um Server, Updates oder Code zu kümmern.

Lösung

Aufgabe 2: Code lesen – welche Farbe? leicht

Im Framework steht h1 { color: #222222; }, in eigenes.css steht h1 { color: #874026; }.

<link rel="stylesheet" href="eigenes.css">
<link rel="stylesheet" href="framework.css">

a) Gib an, in welcher Farbe die Überschrift erscheint. Begründe.

b) Gib zwei Möglichkeiten an, damit die eigene Farbe gewinnt, und beurteile, welche besser ist.

Lösung

Aufgabe 3: Ein Template anpassen mittel

Die Schach-AG hat ein kleines Pico-Template. Passe es an:

Die Hauptfarbe soll das Grün #1d6b3a sein (Hover #14502b).
Die drei Termine sollen als Karten nebeneinander stehen (auf dem Handy untereinander).
Der Knopf „Infos als PDF“ soll als zweitrangiger Knopf erscheinen (Pico-Klasse secondary).

Teste mit den Gerätebreiten und lass dann prüfen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Eingebunden: Pico CSS 2.1.1 (MIT-Lizenz). Für deine eigene Seite brauchst du die Datei pico.min.css im selben Ordner wie deine HTML-Datei.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

Zu 1.: Für die Farben brauchst du eine Angabe im HTML und eine Regel im CSS. Im HTML-Feld des Spielplatzes gibt es kein html-Element. Du kannst data-theme="light" deshalb nicht setzen. Was macht Pico, wenn data-theme fehlt, und welcher Selektor ist dann genauso genau?

Tipp 2

Pico verwendet :root:not([data-theme=dark]). Wenn du genau diesen Selektor in deinem CSS verwendest, ist er gleich genau und gewinnt, weil er später kommt.

Lösung

Aufgabe 4: Eine Vorlage für die Bäckerei mittel

Jonas möchte für die Bäckerei seines Onkels ein Template verwenden. Es steht unter der Lizenz CC BY-NC 4.0.

a) Recherchiere, wofür die Bausteine BY und NC stehen.

b) Beurteile, ob Jonas das Template verwenden darf, und gib eine Alternative an.

Tipp 1

Die Lizenzen erklärt die Organisation Creative Commons auf creativecommons.org (Du verlässt jetzt Maternet).

Lösung

Aufgabe 5: Wie entsteht die Seite der Schülerzeitung? schwer

Die Schülerzeitung „Pausenhof“ soll online erscheinen. Jede Woche kommen drei bis fünf Artikel mit Fotos dazu, geschrieben von wechselnden Schülerinnen und Schülern. Die Schule stellt Webspace bereit.

Zur Wahl stehen:

A: eine selbst geschriebene Seite mit HTML und CSS,
B: eine Seite mit einem CSS-Framework wie Pico,
C: ein Content-Management-System.

Beurteile die drei Möglichkeiten nach mindestens vier Kriterien und gib eine begründete Empfehlung.

Tipp 1

Mögliche Kriterien: Wer pflegt die Inhalte? Wie viel Zeit kostet ein neuer Artikel? Wie aufwendig ist die Einrichtung? Wer kümmert sich um Updates und Sicherheit? Was lernt man dabei? Wie einheitlich sieht die Seite aus?

Lösung (Beispiel)

Zusatzaufgabe: Weitere Pico-Bausteine schwer Zusatz

Pico bringt weitere Bausteine mit, die ohne JavaScript funktionieren.

a) Ergänze die Pico-Fassung des Cafés um einen Bereich „Häufige Fragen“ mit mindestens drei aufklappbaren Fragen (<details> und <summary>).

b) Ergänze im Bestellformular einen Schalter „Mit Becher zum Mitnehmen“ (Pico: <input type="checkbox" role="switch">).

c) Pico gibt es auch als „classless“-Fassung (pico.classless.min.css). Probiere sie aus und erläutere den Unterschied.

Lösung (Beispiel)

Zusammenfassung

Vorgefertigte Webanwendungen sparen Zeit: CSS-Frameworks liefern fertiges CSS, Templates fertige Seiten zum Anpassen, ein CMS eine Oberfläche zum Pflegen der Inhalte, ein Baukasten alles beim Anbieter.
Ein CSS-Framework bindest du vor deinem eigenen CSS ein. Die Dateien des Frameworks änderst du nie selbst.
Pico CSS gestaltet semantisches HTML fast ohne Klassen; dazu kommen container, grid, article als Karte und Varianten für Knöpfe.
Anpassen über eigenes CSS und CSS-Variablen. Der Selektor muss mindestens so genau sein wie der des Frameworks.
Lizenz prüfen: MIT und CC BY erlauben die Nutzung mit Namens- bzw. Lizenzhinweis; NC verbietet kommerzielle Nutzung; ohne Lizenz ist nichts erlaubt.
Dateien lokal ablegen statt von fremden Servern einbinden (Datenschutz). Ein CMS muss regelmäßig aktualisiert werden.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du Framework, Template, CMS und Baukasten unterscheiden? → Vorgefertigte Webanwendungen, Aufgabe 1, Aufgabe 5
Kannst du ein CSS-Framework einbinden und mit sauberem HTML nutzen? → Erkundung 1, Ein CSS-Framework einbinden, Aufgabe 2
Kannst du ein Template anpassen, ohne das Framework zu ändern? → Ein Template anpassen, Aufgabe 3, Café-Projekt
Kannst du Lizenzen beachten und Vor- und Nachteile beurteilen? → Erkundung 2, Vor- und Nachteile, Aufgabe 4

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Framework	Gerüst mit fertigen Regeln und Bausteinen, in das man seine eigene Arbeit einfügt
CSS-Framework	fertige CSS-Datei, die übliche Elemente ordentlich gestaltet, z. B. Pico CSS
Template (Vorlage)	fertig gestaltete Seite, die man an eigene Inhalte anpasst
CMS (Content-Management-System)	Webanwendung, mit der man Inhalte über eine Oberfläche pflegt, ohne HTML zu schreiben
Baukasten	Online-Dienst, mit dem man eine Seite zusammenklickt; der Anbieter betreibt sie
CSS-Variable	Name für einen Wert (z. B. eine Farbe), der an einer Stelle geändert werden kann
Lizenz	Erlaubnis des Urhebers, was man mit einem Werk tun darf
MIT-Lizenz / CC BY	freie Lizenzen: Nutzung erlaubt, Hinweis auf Urheber und Lizenz nötig
CDN	fremder Server, von dem Seiten Dateien nachladen; dabei wird die IP-Adresse übertragen

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 11.7 Webdesign, „Nutzung vorgefertigter Webanwendungen: Nutzung von Frameworks, Anpassen von Templates“ (Stand November 2022).
Pico CSS 2.1.1, © 2019–2024 Pico (laut Lizenzdatei), MIT-Lizenz. Die Datei liegt unverändert auf Maternet. Dokumentation: picocss.com (Du verlässt jetzt Maternet, englisch).
Creative-Commons-Lizenzen: creativecommons.org (Du verlässt jetzt Maternet).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt.