XHTML & CSS Workshop

2,617
-1

Published on

XHTML & CSS Workshop für die DHBW Mosbach

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,617
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

XHTML & CSS Workshop

  1. 1. Web-Engineering Einführung in HTML & CSS … ein Workshop von Holger Rüprich 30.11.2009 DHBW Mosbach
  2. 2. Holger Rüprich • Head of Sales Processes Consumer bei der 1&1 Internet AG in Karlsruhe • Dipl. Medieninformatiker (BA) • Web-Entwickler seit 1999 30.11.2009 Web-Engineering Workshop '09 2 von 100
  3. 3. Übersicht (1) Grundlagen (2) Tools (3) XHTML (4) CSS 30.11.2009 Web-Engineering Workshop '09 3 von 103
  4. 4. (1) Grundlagen „Eine Webseite ist kein Gemälde“ Jens Grochtdreis
  5. 5. Webseiten sind keine Gemälde • WWW als Oberfläche für den Austausch wissenschaftlicher Informationen entwickelt – textorientiert, wenige Elemente, content is king • Kommerzialisierung ging schnell und ungeplant • Tabellenlayout: der erste Hack im Web – Analogie zu Altbekanntem 30.11.2009 Web-Engineering Workshop '09 5 von 103
  6. 6. Webseiten sind keine Gemälde • Eine Webseite ist ein Dokument • Es gibt – Absätze, Listen, Überschriften, ... • Es gibt keine – Fussnoten, Anmerkungen, Subheadlines, Werbung, .. • Vom Inhalt, nicht von der Gestaltung her denken! • Webseiten sind Dokumente! 30.11.2009 Web-Engineering Workshop '09 6 von 103
  7. 7. Was wissen wir über den Surfer? • Nur daß er die Seite anschaut. Sonst nicht viel! • Wichtige Fragen für die Entwicklung einer Website – Ist der Browser komplett geöffnet? – Ist der Rechner auf Invertierung geschaltet? – Wie schnell ist die Internetverbindung? – Sind Plugins installiert und JavaScript an? – Wie ist die Grundschriftgröße seines Systems? – Welche Schriften sind installiert? – ... 30.11.2009 Web-Engineering Workshop '09 7 von 103
  8. 8. Standards? 30.11.2009 Web-Engineering Workshop '09 8 von 103
  9. 9. Was sollen Standards? • Alle Browser haben eine gemeinsame Basis, die sie interpretieren • Keine Sonderbehandlung notwendig • Es wird eine Seite entwickelt, nicht verschiedene Varianten • Lebensdauer von Webdokumenten verlängern • Zugänglichkeit der Inhalte für die größtmögliche Anzahl an Nutzern und Endgeräten 30.11.2009 Web-Engineering Workshop '09 9 von 103
  10. 10. Semantik • Die Inhalte einer Webseite werden danach ausgezeichnet was sie sind, nicht wie sie aussehen sollen. • Eine Überschrift wird mit <h1> bis <h6> umfasst • Eine Liste wird mit <ul> oder <ol> und <li> gemacht, nicht einfach Absätze untereinander oder Zeilenumbrüche • HTML ist semantisch schwach 30.11.2009 Web-Engineering Workshop '09 10 von 103
  11. 11. Semantik und Layout • Erst bestimmen, was etwas ist, dann das Aussehen bestimmen • Das Aussehen wird durch CSS definiert • Wenn die Überschrift die gleiche Schriftgröße wie der Absatz hat, sollte man trotzdem nicht auf die Überschrift verzichten 30.11.2009 Web-Engineering Workshop '09 11 von 103
  12. 12. Eine HTML, viele CSS 30.11.2009 Web-Engineering Workshop '09 12 von 103
  13. 13. Das gleiche HTML, anderes CSS 30.11.2009 Web-Engineering Workshop '09 13 von 103
  14. 14. Das gleiche HTML, anderes CSS 30.11.2009 Web-Engineering Workshop '09 14 von 103
  15. 15. Was bringt das? • Quelltext oft kompakter  schnellere Ladezeit • Bessere Position in den SERPs – bessere programmatische Erfassung der Inhalte durch Google & Co • Abdeckung einer größtmöglichen Anzahl von Zugangsgeräten und Browsern • Zugänglichkeit – sichert die Auslieferung der Inhalte einer Website für eine größtmögliche Anzahl von Zugangsgeräten und Browsern 30.11.2009 Web-Engineering Workshop '09 15 von 103
  16. 16. (2) Tools Nützliches für Web-Entwickler
  17. 17. Der Editor – Notepad2 • Leichtgewichtiger Editor • Freeware • Beschränkung auf das Wesentliche • CSS/(X)HTML-Features: – syntax highlighting – Zeilen verschieben, verdoppeln & löschen http://www.flos-freeware.ch/notepad2.html 30.11.2009 Web-Engineering Workshop '09 17 von 103
  18. 18. Der Editor – TextMate • Leichtgewichtiger Editor • Kostenpflichtig • Beschränkung auf das Wesentliche • CSS/(X)HTML-Features: – syntax highlighting – Zeilen verschieben, verdoppeln & löschen – Bundles http://macromates.com/ 30.11.2009 Web-Engineering Workshop '09 18 von 103
  19. 19. Firefox Extensions • Web Developer (Toolbar)‫‏‬ – Edit CSS (Mini „Echtzeit“ CSS-Editor)‫‏‬ – Disable all Styles – https://addons.mozilla.org/de/firefox/addon/60 • Firebug – Echtzeit Editieren – Elemente untersuchen – https://addons.mozilla.org/de/firefox/addon/1843 30.11.2009 Web-Engineering Workshop '09 19 von 103
  20. 20. Firefox Extensions • HTML Validator – Schneller Hinweis auf Fehler – https://addons.mozilla.org/de/firefox/addon/249 • ColorZilla – Farbwerte aufnehmen – ColorPicker – https://addons.mozilla.org/de/firefox/addon/271 30.11.2009 Web-Engineering Workshop '09 20 von 103
  21. 21. (3) XHTML Syntax, Struktur, Attribute, …
  22. 22. Übersicht • Teil 1 (Einführung, Grundlagen)‫‏‬ – Syntax – Struktur eines XHTML Dokuments – Metaangaben – Universalattribute • Teil 2 – Auszeichnung der Inhalte 30.11.2009 Web-Engineering Workshop '09 22 von 103
  23. 23. (3) XHTML Teil 1 Einführung, Grundlagen
  24. 24. Syntax • XHTML besteht aus vielen Elementtypen – Absätze, Überschriften, Tabellen, Listenpunkte … • Elemente – Ein Element ist eine konkrete Ausprägung eines Elementtyps <Elementname>Inhaltsmodell</Elementname> • Elemente ohne Inhalt <Elementname /> 30.11.2009 Web-Engineering Workshop '09 24 von 103
  25. 25. Syntax • Attribute – Zusatz um eine Eigenschaft zu beschreiben – Stehen im Start-Tag eines Elements <a href=“http://www.ba-mosbach.de“>BA Mosbach</a> • Kommentare – Geeignet z.B. für Anmerkungen und Notizen – Sind sichtbar im Quelltext! <!–- das ist ein Kommentar --> 30.11.2009 Web-Engineering Workshop '09 25 von 103
  26. 26. Syntax • Zeichenreferenzen – Bestimmte Zeichen dürfen nicht Teil eines Element- oder Attribut-Inhaltes sein: < ' " – Alternativ können Zeichenreferenzen verwendet werden – Eine Zeichenreferenz beginnt mit einem Ampersand (&) und endet mit einem Semikolon (;) – Es wird unterschieden zwischen: • Nummerische Zeichenreferenzen • Benannte Zeichenreferenzen 30.11.2009 Web-Engineering Workshop '09 26 von 103
  27. 27. Nummerische Zeichenreferenzen • gibt die Codeposition eines Zeichens im gewählten Dokumentzeichensatz an &#N; dezimale Zeichennummer N &#xN; hexadezimale Zeichennummer N 30.11.2009 Web-Engineering Workshop '09 27 von 103
  28. 28. Benannte Zeichenreferenzen • verwendet statt der Codeposition eine Zeichenkombination < Kleiner-als < < &lt; > Größer-als > > &gt; " Anführungszeichen " " &quot; & Ampersand & & &amp; 30.11.2009 Web-Engineering Workshop '09 28 von 103
  29. 29. Struktur eines XHTML Dokuments • Lässt sich in 4 Abschnitte einteilen: – XML-Deklaration • eine Zeile, die unter anderem die XML-Version angibt – Die Dokumenttyp-Deklaration • eine Zeile, die den XHTML-Dokumenttyp angibt. – Einen Dokumenkopf head • Enthält Dokumenttitel und zusätzliche Informationen – Einen Dokumentrumpf body • Enthält den Inhalt des Dokuments, der im Browser dargestellt wird 30.11.2009 Web-Engineering Workshop '09 29 von 103
  30. 30. Struktur eines XHTML Dokuments • Die XML-Deklaration – Erkennungszeichenfolge im Prolog eines XML- Dokuments – Aufbau eines XML-Prologs: <?xml Version Zeichenkodierung Standalone-Deklaration ?> – Beispiel für einen typischen XHTML XML-Prolog: <?xml version="1.0" encoding="utf-8" ?> – Optional 30.11.2009 Web-Engineering Workshop '09 30 von 103
  31. 31. Struktur eines XHTML Dokuments • Die Dokumenttyp-Deklaration – benennt die Dokumenttyp-Definition (DTD) – Aufbau: <!DOCTYPE html PUBLIC "FPI" "SI"> FPI = Formal Public Identifier welche DTD SI = System Identifier URI der DTD • Für XHTML 1.0 existieren drei vom W3C freigegebene Dokumenttyp-Deklarationen 30.11.2009 Web-Engineering Workshop '09 31 von 103
  32. 32. Dokumenttyp-Deklarationen • XHTML 1.0 Transitional – „weiche“ XHTML-Version – Alle Elemente und Attribute aus HTML 4.01 Transitional – wenn Layoutelemente und -attribute verwendet werden <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN„ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • XHTML 1.0 Strict – „strenge“ Version von XHTML – Elemente und Attribute gestrichen, die nur der Darstellung dienten <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN„ http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> • XHTML 1.0 Frameset – für Framesets <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN„ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 30.11.2009 Web-Engineering Workshop '09 32 von 103
  33. 33. Struktur eines XHTML Dokuments • Das Wurzelelement html – Enthält alle Elemente (auch head & body)‫‏‬ • Dokumentkopf head – Enthält Informationen über aktuelles Dokument, z.B. Titel, Schlüsselwörter … – Wird im Allgemeinen nicht als Inhalt dargestellt – Das title-Element muss enthalten sein 30.11.2009 Web-Engineering Workshop '09 33 von 103
  34. 34. Struktur eines XHTML Dokuments • Dokumentrumpf body – Enthält den Inhalt des Dokuments – Block- und Inline-Elemente • Unterscheidung: (1) Blockelemente nehmen Inline- & Block-Elemente auf Inline-Elemente nehmen nur Text & Inline-Elemente auf (2) Blockelemente neue Zeile Inline-Elemente inzeilig (3) Blockelemente umfassen gesamte Breite Inline-Elemente so breit wie erforderlich 30.11.2009 Web-Engineering Workshop '09 34 von 103
  35. 35. Metaangaben: Der Elementtyp meta • Meta-Elemente enthalten Informationen über das Dokument, z.B.: – Liste von Schlüsselwörtern, Infos über den Autor, Verfallsdatum, Verwendete Zeichenkodierung • werden im Dokumentkopf head notiert • Metaangaben sind optional • meta ist ein leeres Element mit in der Regel zwei Attributen – name / http-equiv und content <meta name="description" content="Beschreibung der Webseite" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 30.11.2009 Web-Engineering Workshop '09 35 von 103
  36. 36. Übung 1 XHTML-Dokument anlegen. Infos: DOCTYPE: XHTML 1.0 Strict Zeichensatz: UTF-8 Zeit: 10 Minuten 30.11.2009 Web-Engineering Workshop '09 36 von 103
  37. 37. Universalattribute • Attribute für fast alle Elemente • Element-Identifikatoren: id und class – Um Elemente genauer zu bezeichnen – id eindeutiger Bezeichner für ein Element • Definition eines Zielankers • ID-Selektor in CSS, etc. <div id="navigation"> – class Klassenname oder Satz von Klassennamen • CSS-Klassenselektor • universelle Verarbeitung durch Benutzerprogramme <em class="wichtig"> 30.11.2009 Web-Engineering Workshop '09 37 von 103
  38. 38. Universalattribute • Angabe der Sprache: lang und xml:lang <html xml:lang="de" lang="de"> <span lang="en" xml:lang="en">text in english</span> • Inzeilige Formatierung: style <div style="border:1px solid white;">weißer Rahmen</div> • Kommentierende Informationen: title <input type="text" name="Website" title="Ich bin ein Titel"/> 30.11.2009 Web-Engineering Workshop '09 38 von 103
  39. 39. (3) XHTML Teil 2 Auszeichnung der Inhalte
  40. 40. Auszeichnung der Inhalte • Überschriften: h1, h2, h3, h4, h5 und h6 – nach Wichtigkeit von h1 bis h6 definiert – sollten inhaltlich und logisch richtig eingesetzt werden – Standard-Darstellung der Browser kann per CSS verändert werden – bilden eine Hierarchie ab  keine Überschriften überspringen! 30.11.2009 Web-Engineering Workshop '09 40 von 103
  41. 41. Auszeichnung der Inhalte • Absätze: p – p Textabsatz – darf keine Blockelemente enthalten – dient primär der Strukturierung des Textes • Zeilenumbrüche: br – br umbricht zwingend die aktuelle Textzeile – mehrere Zeilenumbrüche sollten vermieden werden  Leerzeilen erreicht man durch Absätze  Abstand zwischen Elementen per CSS 30.11.2009 Web-Engineering Workshop '09 41 von 103
  42. 42. Übung 2 Inhalt der Demo-Seite mit den Absätzen, Umbrüchen und Überschriften strukturieren. Info: Inhalt/Text aus inhalt.txt nehmen Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 42 von 103
  43. 43. Auszeichnung der Inhalte • Links und Anker – Link Verweis von einem Quell- zu einem Zielanker – Anker a definiert Zielanker und Quellanker • Zielanker: name <a name="bezeichner">Ankertext</a> • Quellanker: href <a href="uri">Ankertext</a> + URI Uniform Resource Identifier 30.11.2009 Web-Engineering Workshop '09 43 von 103
  44. 44. Auszeichnung der Inhalte • Fragmentlinks – In die Mitte von Webseiten verlinken – Sinnvoll bei sehr umfangreichen Dokumenten 1. Zielanker definieren: <h2 id="abschnitt2">Zweiter Abschnitt</h2> 2. Link setzen <a href="foo.html#abschnitt2">zweiter Abschnitt</a> 30.11.2009 Web-Engineering Workshop '09 44 von 103
  45. 45. Auszeichnung der Inhalte • Grafiken einbinden: img – img bettet ein Bild ein – Attribute: • src Ort der Bildquelle über ein URI • width Breite des Bildes (Pixel / Prozent)‫‏‬ • height Höhe des Bildes (Pixel / Prozent)‫‏‬ • alt alternativer Text und ein Muss – Sinnvolle Alt-Texte • Bilder, die textuellen Inhalt beinhalten: enthaltenen Text • Fotos und grafische Darstellungen: beschreibende Funktion • Layoutgrafiken: leer lassen 30.11.2009 Web-Engineering Workshop '09 45 von 103
  46. 46. Übung 3 Demo-Seite um Links und Bilder erweitern. Info: Bilder im Ordner “images” Zeit: 10 Minuten 30.11.2009 Web-Engineering Workshop '09 46 von 103
  47. 47. Auszeichnung der Inhalte • Auszeichnung im Text – Logische Auszeichnung bestimmte Semantik • em betont (kursiv)‫‏‬ • strong stark betont (fett)‫‏‬ • Weitere Auszeichnungen: – code Quelltext – dfn Definition – abbr Abkürzung – acronym Akronym 30.11.2009 Web-Engineering Workshop '09 47 von 103
  48. 48. Auszeichnung der Inhalte • Auszeichnung im Text – Physische Auszeichnung Aussage über Darstellung • Versehen Teile eines Textes mit einer visuellen Formatierung • Treffen keine Aussage über Semantik • Sollten im Sinne der Trennung von Markup und Layout zugunsten von CSS vermieden werden! • Beispiele: – i kursiv – b fett – tt Festbreitenschrift (Schreibmaschinenschrift)‫‏‬ – big in größerer Schrift 30.11.2009 Web-Engineering Workshop '09 48 von 103
  49. 49. Auszeichnung der Inhalte • Listen – Zur Organisation von Informationen – In XHTML gibt es 3 Arten von Listen: • Ungeordnete Listen: ul • Geordnete Listen: ol • Definitionslisten: dl 30.11.2009 Web-Engineering Workshop '09 49 von 103
  50. 50. Ungeordnete Listen • Die Elementtypen: ul, li • ul zeichnet eine ungeordnete Liste aus • li Listenpunkte, die gleichwertig sind <ul> <li>ungeordnete Listen,</li> <li>geordnete Listen und</li> <li>Definitionslisten.</li> </ul> 30.11.2009 Web-Engineering Workshop '09 50 von 103
  51. 51. Geordnete Listen • Die Elementtypen: ol, li • ol zeichnet eine geordnete Liste aus • li Listenpunkte, die einer bestimmten Reihenfolge unterliegen • Z.B. die Top 5 der Alben aller Zeit <ol> <li>Pet Sounds, The Beach Boys</li> <li>Revolver, The Beatles</li> <li>Highway 61 Revisited, Bob Dylan</li> <li>Rubber Soul, The Beatles</li> <li>What's Going On, Marvin Gaye</li> </ol> 30.11.2009 Web-Engineering Workshop '09 51 von 103
  52. 52. Verschachtelung • Die Elemente ul und ol <ul> dürfen nur Elemente vom <li>Ebene eins</li> Typ li als Kindelemente <li>Ebene eins beinhalten! <ol> <li>Ebene zwei</li> </ol> • Untergeordnete Listen </li> müssen daher innerhalb der <li>Ebene eins</li> Listenpunkte (li) eingefügt </ul> werden. 30.11.2009 Web-Engineering Workshop '09 52 von 103
  53. 53. Definitionslisten • Die Elementtypen: dl, dt, dd • dl zeichnet eine Definitionsliste aus • dt Bezeichnung (nur Inline-Elemente)‫‏‬ • dd Beschreibung <dl> <dt>XHTML</dt> <dd> • Klassische Beispiele: Extensible Hypertext Markup Language – Glossar </dd> – Literaturverzeichnis <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> 30.11.2009 Web-Engineering Workshop '09 53 von 103
  54. 54. Übung 4 Demo-Seite um Listen erweitern. Info: Navigation und Speisekarte sollen als ungeordnete Liste umgesetzt werden. (navigation.txt) Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 54 von 103
  55. 55. Auszeichnung der Inhalte • Tabellen: table, tr, th, td • table Container für Auszeichnung von Tabellen • tr Behälter für eine Zeile mit mehreren Zellen • Tabellenzellen (tr) können zwei Informationen enthalten – th Kopfinformationen – td Datenzellen 30.11.2009 Web-Engineering Workshop '09 55 von 103
  56. 56. Auszeichnung der Inhalte • Struktur und Gruppierung: div, span • Zusätzliche Strukturierung • div Blockelement, mit dem Elemente zusammengefasst werden • span Inline-Element, mit dem (textuelle) Elementinhalte besonders gekennzeichnet werden • Keinerlei Semantik • Nur verwenden, wenn kein anderes Element geeignet • Geeignet für spezielle Formatierung 30.11.2009 Web-Engineering Workshop '09 56 von 103
  57. 57. Übung 5 Demo-Seiten mit Hilfe von div und span sinnvoll strukturieren. Info: IDs und Klassen verwenden. Zeit: 15 Minuten 30.11.2009 Web-Engineering Workshop '09 57 von 103
  58. 58. (4) CSS Cascading Style Sheet
  59. 59. Übersicht • Teil 1 – Einführung – Einbindung in ein XHTML Dokument – Syntax und Vokabular – Selektoren – Initialwerte & Vererbung – Die Kaskade 30.11.2009 Web-Engineering Workshop '09 59 von 103
  60. 60. Übersicht • Teil 2 – Werte – Farben und Hintergründe – Schrift – Text – Das Boxmodell – Ausrichtung & Elementenfluss – Positionierung – Breite und Höhe 30.11.2009 Web-Engineering Workshop '09 60 von 103
  61. 61. (4) CSS Teil 1 Einführung in CSS
  62. 62. Cascading Style Sheets (CSS) • Das Mittel der Wahl um Elemente im Web – zu gruppieren, – zu positionieren – und visuell zu gestalten • Separation of Concerns – (X)HTML Daten (Struktur) – CSS Gestaltung 30.11.2009 Web-Engineering Workshop '09 62 von 103
  63. 63. Vorteile durch CSS • Vereinfacht das Schreiben von Webseiten • Hersteller-, Plattform- und Geräteunabhängigkeit • Verbesserung der Wartbarkeit • Einfachheit • Flexibilität • Erhöhung der Zugänglichkeit 30.11.2009 Web-Engineering Workshop '09 63 von 103
  64. 64. Einbindung in XHTML • Drei gebräuchliche Methoden (1) Einbindung per style-Attribut <p style="text-align: center; font-weight: bold;">Absatz</p> (2) Einbindung per style-Element <style type="text/css"> p{ text-align: center; font-weight: bold; } </style> 30.11.2009 Web-Engineering Workshop '09 64 von 103
  65. 65. Einbindung in XHTML • Die klassische und beste Methode (3) Einbindung per link-Element <link rel="stylesheet" media="screen,projection" type="text/css" title="Standardstylesheet" href="/stylesheets/default.css" /> 30.11.2009 Web-Engineering Workshop '09 65 von 103
  66. 66. Einbindung in XHTML • Alternative Stylesheets – Persistente Einbindung • Stylesheet immer aktiv, außer Nutzer schaltet es aus. <link rel="stylesheet" type="text/css" media="screen,projection" href="default.css" /> – Bevorzugte Einbindung • Standardstylesheet: aktiv sobald Webseite geladen <link rel="stylesheet" type="text/css" title="Bevorzugt" media="screen,projection" href="bevorzugt.css" /> 30.11.2009 Web-Engineering Workshop '09 66 von 103
  67. 67. Einbindung in XHTML • Alternative Stylesheets – Alternative Einbindung • Stylesheet beim Laden inaktiv und dient als Alternative <link rel="alternate stylesheet" type="text/css" title="Alternativ" media="screen,projection" href="alternativ.css" /> 30.11.2009 Web-Engineering Workshop '09 67 von 103
  68. 68. Einbindung in XHTML • Die gängigsten Ausgabemedien all Für alle Geräte print Für die Ausgabe am Drucker projection Für Projektoren u. ähnliche Geräte screen Für die Ausgabe am Bildschirm • Sonstige: – aural, braille, embossed, handheld, tty, tv 30.11.2009 Web-Engineering Workshop '09 68 von 103
  69. 69. Syntax und Vokabular • Ein Stylesheet besteht aus Regeln • Regeln bestehen aus mind. einem Selektor und einem Paar geschweifter Klammer {} (Deklarationsblock) • Deklarationsblock enthält eine Liste mit null oder mehr durch Semikola ; getrennte Deklarationen • Deklaration = Eigenschaft: Wert • Teilen sich mehrere Selektoren dieselbe Deklaration, werden sie mit Kommata getrennt 30.11.2009 Web-Engineering Workshop '09 69 von 103
  70. 70. Syntax und Vokabular • Beispiel für Deklarationen: p { margin: 0; } h1, h2, h3, h4, h5, h6 { color: #889399; background-color: transparent; margin: 2em 0 1em 0; } 30.11.2009 Web-Engineering Workshop '09 70 von 103
  71. 71. Syntax und Vokabular • Kommentare /* Einzeiliger Kommentar */ /* Mehrzeiliger Kommentar */ • Stylesheet importieren @import "fonts.css"; @import url("fonts.css"); 30.11.2009 Web-Engineering Workshop '09 71 von 103
  72. 72. Initialwerte • In CSS hat (fast) jede Eigenschaft einen Wert (Initialwert) • Der Initialwert wird vom Browser genommen, wenn nichts anderes angegeben wird. • Mit einer Deklaration wird dieser Wert geändert • Keinen Initialwert besitzt z.B. color 30.11.2009 Web-Engineering Workshop '09 72 von 103
  73. 73. Vererbung • Elemente erben die Eigenschaften ihrer Mutterelemente <body> <h1>Überschrift mit einem <em>betonten</em> Wort</h1> <p>Absatz mit einem <em>betonten</em> Wort</p> </body> • Effiziente Stylesheets – Schriftart, Zeilenhöhe, Vorder- und Hintergrundfarbe kann nur für body gesetzt werden 30.11.2009 Web-Engineering Workshop '09 73 von 103
  74. 74. Die Kaskade • Cascading = kaskadierend • Cascading mehrere Stylesheets können zusammenwirken • D.h. Stylesheets können nacheinander oder parallel verwendet werden • Browserstylesheet das erste Stylesheet, das angewandt wird • Userstylesheet enthält die Vorlieben der Besucher der Website 30.11.2009 Web-Engineering Workshop '09 74 von 103
  75. 75. (4) CSS Teil 2 Eigenschaften und Werte
  76. 76. Werte • Farben – RGB-Farbwert z.B. #FFFFFF rgb(255,255,255) – Schlüsselwörter: black, green, red, blue, … • Zahlen • Absolute Längen – Punkte pt & Pica pc – Zentimeter cm & Milimeter mm (eher für Druck)‫‏‬ – Schlüsselwörter: small, medium, large, … 30.11.2009 Web-Engineering Workshop '09 76 von 103
  77. 77. Werte • Relative Längen – X-Höhe ex – Geviertbreite em – Schlüsselwörter: larger, smaller – Prozent % – Pixel px • verhalten sich relativ zur Auflösung des Anzeigegerätes • Untergeordnete Elemente erben nicht die relativen Werte, sondern die berechneten Werte body { font-size: 30px; text-indent: 200%; } p { font-size: 20px; } 30.11.2009 Web-Engineering Workshop '09 77 von 103
  78. 78. Werte • URI Adressierung einer Ressource • Zeichenkette beliebige Zeichen, Wörter o. Sätze • inherit soll den Wert des Elternelements erben 30.11.2009 Web-Engineering Workshop '09 78 von 103
  79. 79. Farben und Hintergründe • Vordergrundfarbe: color • Hintergrundfarbe: background-color • Hintergrundbild: background-image – none kein Hintergrund – URI Verweis auf ein Bild – background-repeat Wiederholung des Bildes • repeat über die volle Länge • repeat-x nur in x-Richtung • repeat-y nur in y-Richtung • no-repeat keine Wiederholung 30.11.2009 Web-Engineering Workshop '09 79 von 103
  80. 80. Farben und Hintergründe • Zusammenfassender Hintergrund: background – background-color – background-image – background-repeat – background-attachment – backgourn-position 30.11.2009 Web-Engineering Workshop '09 80 von 103
  81. 81. Übung 6 Hintergrundbild und Farben für die Demo-Seite. Info: Bilder im Ordner “images” Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 81 von 103
  82. 82. Schrift • Schriftfamilie: font-family • Schriftstil: font-style • Schriftgewichtung: font-weight • Schriftgröße: font-size • Zusammenfassende Eigenschaft: font – font-family, font-style, font-weight, font-size, line-height 30.11.2009 Web-Engineering Workshop '09 82 von 103
  83. 83. Schrift ody { b font-size: 80%; line-height: 170%; font-family: Verdana, sans-Serif; } h1 { font-family: Georgia, "Times New Roman", serif; font-size: 1.6em; font-variant: small-caps; } Lässt sich wie folgt abkürzen: body { font: 80%/170% Verdana, sans-serif; } h1 { font: small-caps bold 1.6em Georgia, "Times New Roman", serif; } 30.11.2009 Web-Engineering Workshop '09 83 von 103
  84. 84. Text • Texteinzug: text-indent • Horizontale Ausrichtung: text-align • Ausschmückung: text-decoration • Laufweite: letter-spacing • Wortabstände: word-spacing • Groß- und Kleinschreibung: text-transform 30.11.2009 Web-Engineering Workshop '09 84 von 103
  85. 85. Übung 7 Typografische Gestaltung der Demo-Seite Info: siehe schrift.txt Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 85 von 103
  86. 86. Das Boxenmodell • Ein XHTML-Dokument besteht aus vielen rechteckigen, unsichtbaren Boxen • Das Boxenmodell ist eines der wichtigsten Teile von CSS • Dient als Grundlage für die Darstellung und Positionierung aller Elemente • Polsterung, Rahmen und Randabstand – Contentbox, Paddingbox (Polsterung), Borderbox (Rahmen), Marginbox (Randabstand)‫‏‬ 30.11.2009 Web-Engineering Workshop '09 86 von 103
  87. 87. Das Boxenmodell 30.11.2009 Web-Engineering Workshop '09 87 von 103
  88. 88. Das Boxenmodell • Breite der Paddingbox: padding • Randabstand: margin • Rahmenstil: border-style – none und hidden kein Rahmen (none = Initialwert)‫‏‬ – dotted gepunkteter Rahmen – dashed gestrichelter Rahmen – solid durchgezogener Rahmen – double, groove, ridge, inset, outset 30.11.2009 Web-Engineering Workshop '09 88 von 103
  89. 89. Das Boxenmodell • Rahmenbreite: border-width – medium mittlere Dicke – thin dünner Rahmen – thick dicker Rahmen • Rahmenfarbe: border-color • Rahmen: border – border-style, border-width, border-color 30.11.2009 Web-Engineering Workshop '09 89 von 103
  90. 90. Das Boxenmodell • Vertikale Randabstände – werden i.A. nicht addiert, sondern fallen zusammen – der größere Abstand gewinnt – Der Abstand der beiden folgenden Elemente beträgt nicht 50 Pixel, sondern nur 30 Pixel <p style="margin-bottom: 30px;">Absatz</p> <p style="margin-top: 20px;">Absatz</p> 30.11.2009 Web-Engineering Workshop '09 90 von 103
  91. 91. Das Boxenmodell • Boxtyp eines Elements: display – inline als Inline-Element angezeigt – block als Block-Element angezeigt – list-item als Listenpunkt angezeigt – none keine Box, verschwindet aus der Darstellung – marker, run-in, compact, table, … 30.11.2009 Web-Engineering Workshop '09 91 von 103
  92. 92. Übung 8 Innere und äußere Abstände sowie Rahmen der Elemente der Demo-Seite. Info: Abstände siehe groessen.txt Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 92 von 103
  93. 93. Ausrichtung & Elementenfluss • Floatierte Boxen: float – none die Box floatiert nicht – left Blockbox, die nach links ausgerichtet wird – right Blockbox, die nach rechts ausgerichtet wird • Regeln für floatierte Boxen – Inhalte, Padding-, Border- und Marginbereiche werden voll berücksichtigt – Randbereiche fallen nicht zusammen 30.11.2009 Web-Engineering Workshop '09 93 von 103
  94. 94. Ausrichtung & Elementenfluss • Steuerung des Elementflusses: clear – none wird nicht unterbrochen – left wird um nach links floatierte Elemente unterbrochen – right wird um nach rechts floatierte Elemente unterbrochen – both wird um alle floatierte Element unterbrochen 30.11.2009 Web-Engineering Workshop '09 94 von 103
  95. 95. Übung 9 Boxen der Demo-Seite mit Floats ausrichten. Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 95 von 103
  96. 96. Positionierung • position legt fest, auf welche Art und Weise die Position einer Box berechnet wird – static normale Box – relative Box wird relativ zu ihrer Position verschoben – absolute Box wird relativ zu ihrem umfließenden Block verschoben – fixed Box wird absolut positioniert • top, right, bottom und left – Diese Eigenschaften geben an, wie weit die jeweilige Kante einer Box von der Kante des umfließenden Blocks entfernt ist. – auto automatische Berechnung 30.11.2009 Web-Engineering Workshop '09 96 von 103
  97. 97. Breite & Höhe • Contentbreite: width – auto Breite wird abhängig von verschiedenen Faktoren berechnet • Contenthöhe: height – auto Höhe wird abhängig von verschiedenen Faktoren berechnet • Blockelemente horizontal zentrieren: – width sollte kleiner sein als der zur Verfügung stehende Raum – margin-left und margin-right auf auto setzen 30.11.2009 Web-Engineering Workshop '09 97 von 103
  98. 98. Übung 10 Realisierung des Seitenlayouts der Demo-Seite. Zeit: wieviel noch bleibt… 30.11.2009 Web-Engineering Workshop '09 98 von 103
  99. 99. Übung 11 Navigation Zeit: … 30.11.2009 Web-Engineering Workshop '09 99 von 103
  100. 100. Übung 12 Accessibilty Zeit: … 30.11.2009 Web-Engineering Workshop '09 100 von 103
  101. 101. Quellen • Einführung in XHTML, CSS und Webdesign – Michael Jendryschik – http://jendryschik.de/wsdev/einfuehrung/ • Der Grüne Haken – Nico Steiner, Andreas Lehr – http://www.slideshare.net/n.steiner/1-technologietag- webstandards-presentation 30.11.2009 Web-Engineering Workshop '09 101 von 103
  102. 102. Quellen • Webseiten sind keine Gemälde – Jens Grochtdreis – http://www.slideshare.net/Flocke669/webseiten-sind- keine-gemaelde/ • Webstandards Workshop – Max Design / übersetzt von Stefan Walter – http://www.hessendscher.de/workshop/ 30.11.2009 Web-Engineering Workshop '09 102 von 103
  103. 103. Vielen Dank für eure Aufmerksamkeit. Gibt es noch Fragen?

×