WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner
Werbung
CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011 INHALT DIESES VORTRAGS 1. Kurze Einführung in HTML 2. Was ist CSS? 3. Beispiel eines Web-Designs mit CSS 4. Das Box-Modell 5. Positionierung von Elementen 6. Unterstützung durch unterschiedliche Browser und wichtige Neuerungen der verschiedenen Versionen HYPERTEXT MARKUP LANGUAGE keine Programmiersprache ist eine Seitenbeschreibungssprache oder Auszeichnungssprache wird verwendet, um Inhalten eine Struktur zu geben 1989 wurde HTML im CERN in Genf (Schweiz) als Standard festgelegt HTML ist eine Sprache des Internets Mit HTML wird nur die Struktur einer Seite definiert, das genaue Aussehen wird vom Browser des Betrachters bestimmt! ZUSAMMENFASSUNG DER SYNTAX <li><a href="seite1.html">Seite 1</a></li> HTML-Wörter sind in spitze Klammern eingeschlossen <TAG> Durch Attribute kann die genaue Wirkung verändert werden ATTRIBUT="WERT" Normaler Text erscheint später auf der Seite WELCHE TAGS GIBT ES? Tag Beschreibung <html> <head> (für Benutzer unsichtbare Verwaltungsdaten) <title> Überschrift der Seite <meta> Kann verschiedenste Zusatzinformationen enthalten <link> Verweist entweder auf andere Seiten (z.B. Inhaltsverzeichnis) oder Zusatzinformationen wie CSS <script> Bindet Skripte ein, meistens in der Sprache JavaScript <style> Enthält CSS-Informationen <body> (Inhalte, die im Browser-Fenster angezeigt werden) Im <body> der Seite können fast alle HTML-Tags verwendet werden. EIN KLEINES BEISPIEL MIT HTML CASCADING STYLE SHEETS ist ein Hilfsmittel, um das Aussehen von Webseiten zu verändern es erweitert die HyperText Markup Language entwickelt 1994 von Hakon Wium Lie (heutiger OperaMitarbeiter) Das Aussehen der einzelnen Elemente einer Seite kann genau gesteuert werden (Selektoren). Die Eigenschaften eines Elements werden teilweise an die darin enthaltenen weitergegeben (Vererbung). Beispielseite: http://css-project.teamwiki.net/docs/testseiten/ Beispielseite: http://css-project.teamwiki.net/docs/testseiten/ DAS BOX-MODELL Alle Elemente werden in inline und block-Elemente unterteilt block: erzeugen einen Zeilenumbruch da sie nicht im Text liegen inline: beeinflussen den Text in seinen Eigenschaften Für jedes HTML-Tag ist festgelegt, welcher Typ es ist. Mit der Eigenschaft display kann man den Typ ändern. von hicksdesign.co.uk unter CC-BY DAS AUFBAU EINES ELEMENTS Alle Blockelemente enthalten einen Rahmen, einen Innen und einen Außenabstand Die Breite und Höhe eines Elements berechnet sich aus diesen 3 Werten. POSITIONIERUNG VON ELEMENTEN • absolute: Die Elemente liegen nicht im Textfluss, und werden mit „top“, „left“, „right“ und „bottom“ relativ zum Elternelement positioniert. • relative: Das Element liegt im Textfluss, und wird mit „top“, „left“, „right“ und „bottom“ relativ zur normalen Position verschoben. Nachfolgende Elemente verhalten sich so, als wäre das Element nicht verschoben. • fixed: Das Element wird am Browserfenster ausgerichtet und scrollt deshalb mit. • static: Das Element liegt im Textfluss, es ist keine Positionierung möglich. BUGS In mehreren Versionen der Browser, gibt es verschiedene Bugs. Diese führen zu unerwünschten Ergebnissen, wie falscher Darstellung oder Fehlverhalten. Der bekannteste Fehler ist der Guillotine Bug der Internet Explorers Dieser Fehler führt zu einer falschen Elementhöhe, bei entsprechender Formatierung. http://barrierefrei.e-workers.de/workshops/ie-fun/index1.php http://www.traum-projekt.com/forum/34-html-and-css/93718-bugs-loesungen-fuer-internet-explorer.html VERSIONEN Version CSS1 Neue Features Unterstützung in akt. Browsern Definiert wichtige Eigenschaften wie Schriftart, größe, -farbe Absätze und Tabellen können alle formatiert werden. CSS2 Exakte Positionierung (absolute, fixed); Elemente in den Vorder-/Hintergrund setzen (zindex); Schatten; Unterschiedliche Medien-Typen (z.B. Darstellung für Mobiltelefone) CSS3 Animation; Farbverläufe; benutzerdefinierte Schriftarten; Scripte können Klassen zugewiesen werden noch in Entwicklung, größte Unterstützung durch Opera, Webkit Vielen Dank fürs Zuhören! Unsere Projekthomepage www.css-project.teamwiki.net … mit vielen weiteren Weblinks WEBSEITEN-GESTALTUNG MIT CSS Sören Elvers, Julia Polner, Max Weller, Moritz Willig T-Doku, Werner-von-Siemens-Schule, Wetzlar 2010-2011
