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
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. 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. 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
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. 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. 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. Eine HTML, viele CSS
30.11.2009 Web-Engineering Workshop '09 12 von 103
13. Das gleiche HTML, anderes CSS
30.11.2009 Web-Engineering Workshop '09 13 von 103
14. Das gleiche HTML, anderes CSS
30.11.2009 Web-Engineering Workshop '09 14 von 103
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
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. 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. 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. 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. Benannte Zeichenreferenzen
• verwendet statt der Codeposition eine
Zeichenkombination
< Kleiner-als < < <
> Größer-als > > >
" Anführungszeichen " " "
& Ampersand & & &
30.11.2009 Web-Engineering Workshop '09 28 von 103
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. 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. 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. 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. 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. 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. 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
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. 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
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. 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. Ü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. 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. 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. 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. Ü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. 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. 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. 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. 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. 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. 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. 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. Ü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. 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. 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. Ü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
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. Ü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
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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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
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. 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. 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. 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
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
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. 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. Ü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. 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
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. 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. 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. 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. Ü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. 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. 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. Übung 9
Boxen der Demo-Seite mit Floats ausrichten.
Zeit: 20 Minuten
30.11.2009 Web-Engineering Workshop '09 95 von 103
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. 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. Übung 10
Realisierung des Seitenlayouts der Demo-Seite.
Zeit: wieviel noch bleibt…
30.11.2009 Web-Engineering Workshop '09 98 von 103
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. 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