Introduction to Technologies for Interaction Design

Stylesheets

Syntax | | |

|

Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen Klassen-Selektoren beschreiben in einer Seite mehrfach verwendete Elemente

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

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

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

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

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

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

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

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

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

Stylesheets für spezielle Medien |

Print-Stylesheet

|

Screen-Stylesheet

|

http://www.style-sheets.de/guide/medien/print

Print-Stylesheets |

Bereiche sind benennen (Navigations-Links hier)

|

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

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 ) "; font-size: 76%; color: #999; background: transparent;}

Navigation |

Liste aller gewünschten Links Kontakt

braucht für Beschreibung mit Stylesheet eindeutigen Namen – also eine id

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 */

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 |

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?

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

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!

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

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 |

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 http://www.ondesign.de/tutor/dreamweaver.htm#vorlage

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 StylesheetDatei erfolgen (sozusagen im „Handumdrehen“) – also CSS-Datei verwenden |

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 |

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

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.

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“

Aufgabe |

Ordnen Sie diese Elemente auf der Seite an, indem Sie ein CSSStylesheet definieren. Verwenden Sie auch Positionsangaben, Hintergrundfarben bzw. –bilder und Rahmen