Introduction to Technologies for Interaction Design. Stylesheets

Transkript

1 Introduction to Technologies for Interaction Design Stylesheets

2 Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen <div id="beschreibung"></div> Klassen-Selektoren beschreiben in einer Seite mehrfach verwendete Elemente <div class="beschreibung"></div>

3 Syntax Eigenschaften stehen in geschweiften Klammern.beschreibung {color: red;} /* bei Klassen-Selektoren #beschreibung{color: red;} /* bei ID-Selektoren Eigenschaft-Wert-Paare müssen von Semikolon abgeschlossen werden

4 Schriftgebung font: Zusammenfassung aller font-bezogenen Tags (shorthand) font-family: Bestimmt die Schriftart font-size: Bestimmt die Schriftgröße font-style: Bestimmt den Schriftstil (kursiv...) font-weight: Bestimmt die Schriftdicke letter-spacing: Verändert den Abstand der Buchstaben zueinander line-height: Bestimmt die Höhe der Zeile text-align: Bestimmmt die Ausrichtung des Textes text-decoration: Unterstreicht den Text text-indent: Rückt die erste Zeile eines Abschnitts ein

5 Farben/Hintergrund color: Bestimmt die Vordergrundfarbe background: Fasst alle Hintergrund-Deklarationen zusammen (shorthand) background-color: Weist dem Hintergrund eine Farbe zu background-image: Weist dem Hintergrund ein Bild zu background-attachment: Legt fest ob das Hintergrundbild mitscrollt oder nicht background-repeat: Legt fest ob und wie das Hintergrundbild wiederholt wird background-position: Positioniert das Hintergrundbild

6 Ausrichtung/Layout/Darstellung clear: verhindert float display: Verändert die Darstellungsart eines Elements (nicht anzeigen, inline oder block...) float: Lässt Elemente aneinander vorbeifließen height: Definiert die Höhe eines Elements width: Definiert die Breite eines Elements margin: Verändert den Abstand des Elements zur Umgebung (shorthand) margin-bottom: Verändert den Abstand des Elements nach unten margin-left: Verändert den Abstand des Elements nach links

7 Ausrichtung/Layout/Darstellung margin-right: Verändert den Abstand des Elements nach rechts margin-top: Veränderte den Abstand des Elements nach oben padding: Abstand des Inhalts zum Rand (shorthand) padding-bottom: Abstand des Inhalts zum unteren Rand padding-right: Abstand des Inhalts zum rechten Rand padding-top: Abstand des Inhalts zum oberen Rand padding-left: Abstand des Inhalts zum linken Rand

8 Links/Auflistungen a:link: Bestimmt die Formatierung eines normalen Links a:visited: Bestimmt die Formatierung eines besuchten Links a:active: Bestimmt die Formatierung eines aktiven Links a:hover: Bestimmt die Formatierung eines gehoverten Links (Maus ist grade drüber) list-style-image: Weist den Listenpunkten ein Bild zu list-style-type: Bestimmt das Aussehen der Listenpunkte

9 Rahmen border: Fasst alle Rahmen-Tags zusammen (shorthand) border-bottom: Bestimmt Aussehen, Dicke und Farbe des unteren Rands border-bottom-width: Bestimmt die Breite des unteren Rands border-color: Farbe des Rahmens border-left: Bestimmt Aussehen, Dicke und Farbe des linken Rands border-left-width: Bestimmt die Breite des linken Rands

10 Rahmen border-right: Bestimmt Aussehen, Dicke und Farbe des rechten Rands border-right-width: Bestimmt die Breite des rechten Rands border-style: Bestimmt die Darstellungsweise des Rahmens border-top: Bestimmt Aussehen, Dicke und Farbe des oberen Rands border-top-width: Bestimmt die Breite des oberen Rands border-width: Bestimmt die Rahmenbreite für alle Rahmen

11 Stylesheets enthalten alle Layout-Informationen mit Inhalts-Entwickler müssen alle Bestandteile der Seiten abgesprochen sein Namen für alle Teile vergeben beim Entwickeln des Inhalts: alle Bestandteile korrekt benennen beim Entwickeln des Layouts: für alle abgesprochenen Bestandteile das Layout beschreiben

12 Stylesheets für spezielle Medien Print-Stylesheet <link rel="stylesheet" type="text/css" href="print.css" media="print" /> Screen-Stylesheet <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

13 Print-Stylesheets Bereiche sind benennen <div id="navigation">(navigations-links hier)</div> ausgewählte Bereiche nicht anzeigen #navigation, #suche,.werbung { display: none; } Serifen-Schriften für den Druck verwenden body { margin: 0; padding: 0; font: 12pt Garamond, Palatino, "Times New Roman", Times, serif; color: black; background: transparent;}

14 Print-Stylesheets spezielle Hervorhebung von Links a, a:visited, a:hover, a:visited:hover { color: #04667e; background: transparent; text-decoration: none;} Einfügen der Verweisadressen a:link:after, a:link:visited:after { content: " (Link auf <" attr(href) ">) "; font-size: 76%; color: #999; background: transparent;}

15 Navigation Liste aller gewünschten Links <ul> <li><a href="#">home</a></li> <li><a href="#">seite 1</a></li> <li><a href="#">seite 2</a></li> <li><a href="#">kontakt</a></li> </ul> braucht für Beschreibung mit Stylesheet eindeutigen Namen also eine id <ul id="navigation">

16 Navigation im Stylesheet wird das Layout für diese id beschrieben ul#navigation li { /* Selektor für einen Listenpunkt in unserer Navigationsliste */ display: inline; /* Listenpunkt als normalen Inhalt darstellen lassen */ margin: 0 5px; /* Ein wenig horizontaler Abstand */ padding: 2px; /* Platz um die Links */ background: #5c9734; /* Eine Hintergrundfarbe */

17 Stylesheets in Dreamweaver Trennung von Inhalt und Form also verschiedene Dateien für Inhalt und Form HTML-Datei nur für Inhalt CSS-Datei für Layout (Form) müssen verknüpft werden zum Üben: HTMl-Datei vorgegeben für Vortrag: beide Dateien selber erstellen

18 Stylesheets in Dreamweaver vorgefertigte Stylesheets verfügbar, da ist aber das Design schon gemacht selber das Design entwickeln heißt, selber das Stylesheet erstellen Stylesheets in Dreamweaver sind für Leute, die keine Designer sind Welche Layout-Elemente entält die Seite? Welche davon müssen im Stylesheet beschrieben werden?

19 Layout-Objekte erzeugen einfache HTML-Datei erstellen alle Seitenelemente als Layout-Objekte einbinden (Einfügen Layoutobjekte div-tag) in die Bereiche wird der Inhalt eingetragen, das können wieder Layoutobjekte sein oder andere HTML-Objekte beim Einfügen entscheiden, ob Klassen- oder ID-Selektor, Namen vergeben

20 Layout-Objekte erzeugen Ebenen einfügen, erzeugen automatisch div-objekte aber: alle Formatierungsangaben stehen dann lokal nur in dieser einen HTML-Datei statt in CSS-Datei Designer muss in HTML-Dokument arbeiten Seite kann als Vorlage verwendet werden, also für neue Seiten Formatierungsangaben können nicht bestehenden Seiten zugewiesen werden Handhabung von Änderungen!

21 HTML-Objekten Namen zuweisen entsprechendes Tag auswählen Tag-Inspektor am rechten Bildschirmrand aufklappen dort kann ID- oder Klassenselektor benannt werden Im Beispiel: zwei Layout-Objekte (kopf und beschreibung) und ein HTMl-Objekt (Liste mit id navigation)

22 HTML-Datei alles, was benannt wurde, kann nun in CSS-Datei beschrieben werden jederzeit weitere Namensvergabe möglich, Unterschied Klasse und ID beachten! kann in Code- oder Entwurfsansicht bearbeitet werden

23 Vorlagen wenn mehrere HTML-Dateien gleichbleibende Elemente besitzen sollen (Bilder, Tabellen, Schriftformatierungen) eine Seite erstellen, als Vorlage speichern weitere Seiten auf Grundlage dieser Vorlage erstellen diese enthalten dann Bereiche, die nicht bearbeitet werden können

24 Vorlagen nicht geeignet, um Inhalt und Layout zu trennen beides steht in einer Datei Ändern des Layouts erfordert Änderung an Vorlagendatei für Vortrag: Änderung des Layouts soll durch Zuweisen einer anderen Stylesheet- Datei erfolgen (sozusagen im Handumdrehen ) also CSS-Datei verwenden

25 CSS-Datei erstellen mit Datei Neu einfache Seite CSS alle anderen Angebote im Menü sind bereits vorgefertigte Stylesheets! Text CCS-Stile Neu Bezeichner aus HTMl-Datei verwenden Menü für Einstellungen

26 CSS-Datei einbinden Fenster CSS-Stile rechte Maustaste Stylesheet anfügen CSS-Datei auswählen Änderungen werden sofort übernommen

27 Aufgabe Der Klempnermeister in Ihrer Nachbarschaft möchte seinen Betrieb im Internet vorstellen. Dazu gibt er Ihnen eine Inhaltsdatei und bittet Sie, ein Layout dafür zu entwerfen. Wenn es ihm gefällt, bekommen Sie den Auftrag.

28 Aufgabe Auf der Seite befinden sich folgende Elemente: eine Kopfzeile namens Kopf, die ein Bild namens Logo enthält eine Liste zum Navigieren mit der Bezeichnung navigation zwei Textbereiche mit Namen beschreibung

29 Aufgabe Ordnen Sie diese Elemente auf der Seite an, indem Sie ein CSS- Stylesheet definieren. Verwenden Sie auch Positionsangaben, Hintergrundfarben bzw. bilder und Rahmen