HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze

Transkript

1 HTML, CSS und Responsive Design Selina Mohtaj und Laura Menze

2 Hilfreiche Links und Bücher (deutsch) bzw. (englisch) 6DnOovY0t3nBg8Zb6aqm_H70mR Krüger, Sandra/Balzert, Helmut: HTML5, XHTML & CSS. Websites systematisch & barrierefrei entwickeln. 2. Auflage. W3L GmbH, Stiegert, Heiko. Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website; aktuell zu CSS3. Galileo Press, 2011.

3 Gliederung 1. HTML 2. CSS 3. Responsive Design

4 HTML textbasierte Auszeichnungssprache zur Strukturierung von Dokumenten Inhalt wird in Klartext geschrieben, nicht programmiert

5 HTML Document Object Model interpretiert jedes HTML-Dokument als Baumstruktur gibt hierarchische Struktur des Dokuments wieder

6 HTML ID und Class Universalattribute mit einer ID kann jedes HTML-Element im Dokument eindeutig identifiziert werden o darf nur einmal pro Dokument vorkommen o z.b. header und footer Class gibt an, welche CSS-Klassen auf das HTML- Element angewendet werden o darf beliebig oft verwendet werden o ist eine Art Zuordnung von Elementen zu einer Gruppe o z.b. Infoboxen

7 HTML Tag - Absatz

8 HTML Tag - Überschrift

9 HTML Tag Liste (ungeordnet)

10 HTML Tag Liste (geordnet)

11 HTML Tag - Tabelle

12 HTML Gruppierung von Inhalten

13 HTML Struktur einer Webseite

14 HTML Bilder Pfad zur Bilddatei Titel des Bildes alternativer Text

15 Verweisziel HTML Links

16 HTML Formulare method (Pflichtattribut): o o get Daten werden an die URI angehängt post - überträgt die Daten im Körper (Body) der Nachricht action (nicht zwingend erforderlich):!!!!!skript!!!! Was passiert wenn nicht angegeben????????? o o Wert: URI gibt an, welche Datei die Daten verarbeitet

17 HTML Formularelemente einzeilige Eingaben mittels <input.. > o Attribute: type (Art des Eingabeelements), name, value, size, maxlength

18 HTML Formularelemente mehrzeilige Eingaben mittels < textarea>..</textarea> Auswahllisten mit Tageinträgen mittels <select>..</select> o <option>.. </option> für Elemente in Auswahlliste

19 Übung zu HTML Erstellt eine kleine HTML-Webseite, die folgendes beinhaltet: ein Formular, in dem man o Nutzername und Passwort eingeben o das Geschlecht auswählen o und einen Abschicken Button betätigen soll optional: Überschriften, Paragraphen, Listen, Tabellen, Bilder,

20 Gliederung 1. HTML 2. CSS 3. Responsive Design

21 CSS (Cascading Style Sheets) Gestaltungssprache für HTML-Dokumente verantwortlich für das Design von Inhalten eines HTML-Dokuments jedem HTML-Element können Gestaltungsangaben zugeordnet werden

22 1. Inline: CSS Einbindung in HTML o unmittelbar bei den HTML-Elementen über das style- Attribut

23 CSS Einbindung in HTML 2. Intern (embedded): o Zusammenfassung der CSS-Stilregeln für HTML- Dokument über <style> im Kopfbereich

24 3. Extern: CSS Einbindung in HTML o Zusammenfassung von CSS-Stilregeln in eigenständiger Datei o Einbindung von <link.../> im head:

25 CSS Deklaration: Syntax jede Stilregel besteht aus: 1. Selektor(en) 2. CSS-Eigenschaft(en) innerhalb geschweifter Klammern, definiert durch Eigenschaftsname (Attribut) mit abschließendem Doppelpunkt Eigenschaftswert mit abschließendem Semikolon Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; }

26 CSS Selektor leitet eine CSS-Stilregel ein, die damit eindeutig identifiziert wird gibt an, auf welches HTML-Element sich die Stilregel bezieht Selektor { Eigenschaft: Wert; } Selektor1, Selektor2 { Eigenschaft: Wert; }

27 CSS Selektion über HTML-Elemente Selektoren für gleichartige HTML-Elemente erhalten als Wert die Bezeichung des HTML-Elements

28 CSS Selektion über ID ID identifiziert Elemente mit eindeutiger Bezeichnung einmaliges Vorkommen

29 CSS Selektion über Class mehreren HTML-Elementen werden gemeinsame Eigenschaften zugewiesen

30 CSS Kombinatoren Nachfahren- Selektor p b { color: red; } <p><b>beispiel</b> für den <b>nachfahren</b>selektor</p> Kind -Selektor p > b { color: red; } <p><b>beispiel</b> für den <b>kind</b>selektor</p> Nachbar -Selektor Geschwister- Selektor h1 + p { fontweight: bold } h1 ~ p { fontweight: bold } <h1>nachbarselektor</h1> <p>erster Absatz.</p> <p>zweiter Absatz.</p> <h1>geschwisterselektor</h1> <p>zweiter Absatz.</p> <hr> <p>dritter Absatz.</p>

31 CSS Block-Elemente Elemente, die jeweils eine neue Zeile erzeugen Blockelemente stehen untereinander Bsp: h1 steht über h2, nicht daneben

32 CSS Inline-Elemente Elemente, die keine neue Zeile erzeugen Stehen nebeneinander Bsp: <a>, <img>, <sub>, <sup>, etc.

33 CSS Inline-Block-Elemente Mischung aus Block-& Inline-Element Mit p {display: inline-block; } wird eine Box erzeugt o Nach innen hin Eigenschaften eines Blockelements o Nach außen hin Eigenschaft eines Inlineelements Ermöglicht Elemente mit Blockeigenschaften nebeneinander anzuordnen

34 CSS Box-Modell CSS-Layout aus rechteckigen Boxen zusammengesetzt Box besteht aus: Inhaltsbereich padding border margin

35 padding CSS Innenabstand Befindet sich innerhalb des Elements Übernimmt Hintergrundfarben &-grafiken

36 border CSS Rahmen Umschließt Inhaltsbereich eines Elements sowie den Innenabstand

37 margin CSS Außenabstand Abstand zu umliegenden Elementen befindet sich außerhalb des Elements

38 CSS Positionierung Ohne individuelle Ausrichtung befindet sich ein Element im Datenfluss Positionierung kann relativ oder absolut erfolgen

39 CSS Relative Positionierung Verschiebung erfolgt durch position: relative; Richtungsangabe mit relativen Maßangaben

40 CSS Absolute Positionierung Element aus Dokumentenfluss entnommen Änderung der Ordnung/Reihenfolge durch position: absolute; Richtungsangaben mit absoluter Maßangabe

41 CSS Fixe Positionierung position: fixed; Gleiche Eigenschaften wie absolute, jedoch kein Mitscrollen

42 CSS Floating Verschiebung eines Elements an die Innenkante seiner Box Element hat weiterhin Einfluss auf das Layout Mit clear wird Floating beendet

43 CSS Vererbung Wenn ein Wert nicht festgelegt wird Standardwert Anstelle des Standardwerts wird Eigenschaft des Elternelements übernommen

44 CSS Cascading Kaskade = besondere Eigenschaft von CSS Zu lösendes Problem: Eigenschaften für ein Element können mehrfach & widersprüchlich festgelegt werden Lösung: Kaskade errechnet Gewichtung für Regeln und Eigenschaften

45 CSS Cascading Reihenfolge ausschlaggebend bei mehrfacher Deklaration Zuletzt deklarierte Eigenschaft wird verwendet!important: o Kennzeichnet einen Wert als wichtig o Verwendung: falls unabsichtlich mehrere Eigenschaften deklariert werden

46 CSS Ablauf der Kaskade Ablauf in mehreren Schritten o Anwendung der einzelnen Kriterien o Aussortierung von Deklarationen 1. Auf Element angewendete Deklarationen suchen 2. Nach Herkunft & Wichtigkeit sortieren 3. Übrige Regelsätze nach Spezifität ordnen 4. ggf. noch widersprüchliche Deklarationen der Reihenfolge entsprechend ausführen

47 CSS Spezifität Regelsätze werden nach Spezifität gewichtet Je allgemeiner, desto geringer die Gewichtung Für jeden Selektor werden 3 Zähler festgelegt: o B wird durch jedes Vorkommen von ID-Selektoren um 1 erhöht o C wird durch jedes Vorkommen eines Attribut-/Klassenselektors um 1 erhöht o D wird durch jedes Vorkommen eines Typselektors um 1 erhöht Universalselektoren werden ignoriert

48 CSS Spezifität des style-attributs Wenn Eigenschaften im style-attribut festgelegt sind, dann sind sie spezifischer als jeder Regelsatz in einem Stylesheet höchste Gewichtung

49 Übung zu CSS Gestaltet nun eure HTML-Webseite mit CSS nach eurem Belieben (Farbe, Schriftgröße, Position, ). Folgende Befehle könnten dafür besonders von Interesse sein: font-family (Schriftart) font-size (Schriftgröße) color (Schriftfarbe) background-color (Hintergrundfarbe) Weitere Befehle findet ihr hier:

50 Gliederung 1. HTML 2. CSS 3. Responsive Design

51 Responsive Design Definition Layout der Seite für das Ausgabemedium angepasst Antwortet durch Medienanalyse & Darstellungsanpassung Layout an bestimmten Breakpoints mittels Media Queries an andere Viewports anzupassen

52 Viewport Für die Darstellung der Inhalte zur Verfügung stehender Bereich des Browserfensters

53 Breakpoints Punkt, an dem das Layout umbricht Orientierung am Layout o Wenn viewport zu schmal wird, dann werden Elemente nicht mehr nebeneinander, sondern untereinander angezeigt Realisierung über Media Queries

54 Media Queries Liste von Kriterien, die ein Ausgabemedium zur Einbindung eines Stylesheets erfüllen muss Bestehen aus o Medientyp o Medienmerkmal o Kombination Verwendung an allen Stellen möglich, wo Stylesheet eingebunden werden

55 Media Queries

56 Desktop First reguläre Webseiten auf mobile Größe verkleinert Probleme: o Schwierig zu sehen o Code funktioniert nicht auf allen mobilen Geräten Lösung: Separate Seiten für mobile Geräte

57 Prozess umdrehen Mobile First Arbeitet mit Progressive Enhancement Relevante & präzise Inhalte Kein Selbstzweck, sondern Ausrichtung an Usability- Grundsätze

58 Bootstrap CSS-Framework zur Erstellung von Responsive Design Auf CSS & HTML basierende Stylesheets Elemente werden vorgefertigten Klassen hinzugefügt

59 Bootstrap Einbindung Download auf eigenen Server & Einbindung in <head> der HTML-Datei Einbindung von Bootstrap CDN getbootstrap.com

60 Bootstrap Grid 12 Spalten, die sich der Displaybreite anpassen Row & column 4 Varianten: xs sm md lg

61 Übung zu Bootstrap & Responsive Design Erstellt eine HTML-Datei, in die ihr Bootstrap CND korrekt einbindet. Eure Seite soll sowohl Header und Footer als auch min. 3 Textbereiche enthalten. Die Webseite muss sich im Sinne vom Responsive Design an mindestens 3 unterschiedliche Displaygrößen anpassen. Die Elemente müssen sich in Größe und Position so anpassen, dass der Inhalt immer gut sichtbar und das Layout ansprechend gestaltet ist (Schriftgestaltung, Farben, etc.). Fügt gegebenenfalls individuelle CSS-Regeln ein.

62 noch Fragen?

63 Vielen Dank für die Aufmerksamkeit!

64 Quellen cuteminions%2f&h=321&w=236&tbnid=p86alk17edjq8m%3a&zoom=1&docid=4zgjptcgfiggpm&ei=kqy9vdanejxtanx5gzgc&tbm=isch&iact=rc&uact=3&dur= 925&page=1&start=0&ndsp=7&ved=0CD8QrQMwAw Ertel, Andrea/Laborenz, Kai: Responsive Webdesign. Anpassungsfähige Websites programmieren und gestalten. 2. aktualisierte und erweiterte Auflage. Bonn: Galileo Press, Krüger, Sandra/Balzert, Helmut: HTML5, XHTML & CSS. Websites systematisch & barrierefrei entwickeln. 2. Auflage. Herdecke: W3L GmbH, Stiegert, Heiko. Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website; aktuell zu CSS3. Galileo Press,