Doch wie funktioniert diese Aufzählung und wie kann man sie evtl. auch nach eigenen Vorstellungen verändern?

Die Befehle, die man hierfür benötigt sind <ol> für die Ordered List (sortierte bzw. nummerierte Liste) und <ul> für die Unordered List (ungeordnete Liste – die normale “Bulletpoint-Aufzählung”).

Innerhalb der <ol> bzw. <ul>-Tags wird durch die <li> und </li> der aufzuzählende Bereich markiert. Innerhalb dieses Bereiches kann mit <br /> ein Zeilensprung erzeugt werden – dies beeinflusst den Bereich nicht. Wird er aber hart mit <p> umgebrochen, wird der Bereich komplett verlassen (und dies ist bei sauberem arbeiten unbedingt zu vermeiden – denn abhängig vom Browser kann es hier zu merkwürdigen Darstellungen kommen).

Ich will mich hier mit der Orderd List befassen – und wie man sie nach eigenen Vorstellungen verändern kann.

Ordered List

Beispiele:

<ol>
<li style="list-style-type: decimal">Das ist die normale Nummerierung</li>
<li style="list-style-type: lower-roman">Das ist die Nummerierung mit kleinen römischen Ziffern</li>
<li style="list-style-type: lower-alpha">Das ist die Nummerierung mit kleinen Buchstaben</li>
</ol>


Sehen so aus:

1. Das ist die normale Nummerierung
2. Das ist die Nummerierung mit kleinen römischen Ziffern
3. Das ist die Nummerierung mit kleinen Buchstaben

Werte die man als “list-style-type” eintragen kann:

• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none

Nun lädt man die beiden Grafiken auf einen Webspace hoch (z.B. photobucket) und schon kann die eigentliche Arbeit losgehen.

Als erstes Definieren wir #bloglines:

#bloglines {display:block; background: url(URL ZUR GRAUSTUFENGRAFIK) no-repeat;}


Für den hover-Effekt kommt noch diese Zeile:

#bloglines :hover {background: url(URL ZUR FARBGRAFIK) no-repeat;}


Nun müssen wir noch einen kleinen Trick einbauen. Damit das mit den Grafiken als Hintergrundgrafik funktioniert, muss in den Vordergrund eine 1px*1px grosse durchsichtige Grafik als Inline-Element bei dem eigentlichen Link herhalten. So eine Grafik kann man sich ganz einfach mit Gimpp oder anderen Grafikprogrammen erzeugen. Diese dann auch auf einen Webspace hochladen.

Der HTML-Teil sieht dann so aus:

<a id="bloglines" href="http://bloglines.com"><img src="URL ZUR UNSICHTBAREN GRAFIK" width="BREITE DER BLOGLINES GRAFIK" height="HOEHE DER BLOGLINES GRAFIK" border="0" /></a>


So sieht das Ergebnis aus:

Edit 06.08.2008:
Ich habe festgestellt, das im FireFox die Darstellung anders ist als im Internet Explorer (wie so oft). Ich muss das noch überarbeiten das es im FireFox auch gut aussieht. Ich bleibe dran.

Edit 21.08.2008:
Als Lösung hat sich angeboten, noch ein display:block; bei der ersten Definition mitanzugeben. Dadurch rutscht die Grafik zwar in die nächste Zeile, aber es sieht im FireFox nun auch gut aus.

Edit 13.01.2009:
Nachdem ich ein neues Theme für diesen Blog verwende funktionieren die Grafiken nicht mehr so richtig – bin derzeit zu Faul um das im CSS neu einzustellen.

Doch woran liegt das? Was ist "schuld" daran, das wir die eine Seite auf den ersten Blick lieben und eine andere Seite, die vielleicht sogar das gleiche bietet, nicht?

Die Farben

Für mich müssen die Farben "zum Thema" passen. Eine Seite, die sich mit scharfen Steak-Saucen beschäftigt, sollte auch ruhig im Western-Stil gehalten sein – entsprechend werden braune bzw. erdige Farben domninieren. Eine Seite, die sich mit Foto-Design beschäftigt MUSS auf jeden Fall eine Farbzusammenstellung wählen, die nach "Kunst" aussieht (vermutlich werden auch einige Bilder aus dem eigenen Portfolio gezeigt).

Eine Hilfe, zueinander passende Farben zu finden, ist sicherlich der Colorblender. Mit wenigen Mausklicks findet man heraus, welche Farben zu welcher "Hauptfarbe" passen. Die RGB Farbwerte und die Hex-Codes werden sofort mitgeliefert und die Feinadjustierung geschieht über Schieberegler – also einfacher geht es schon nicht mehr.

(die Farbeinstellung im Colorblender)

Doch die Antwort nach der Frage der passenden Farbgebung ist trotz aller technischen Hilfsmittel nicht immer so einfach. Schon allein die Wahl des Hintergrundes (einfarbig, mehrfarbiger Farbverlauf, mehrfarbig mit Blöcken usw.) haben auf die spätere Wahrnehmung einen entscheidenden Einfluss.

Hier mal ein paar Beispiele:

schwarzer Hintergrund, weisse (oder helle) Schrift

Durch den dunklen Hintergrund wird der Fokus des Betrachters auf die Schrift gelegt. Soetwas kann sinnvoll sein bei kleineren Seiten mit wenig Text oder bei Photoblogs.
Werden hier jetzt noch kräftige "leuchtende" Farben verwendet, vielleicht auch noch mit den allseits beliebten "Web2.0"-Spiegeleffekten, ergibt sich auf der einen Seite ein recht entspannendes Bild, andererseits bekommt man bei längeren Artikeln eine Art "Tunneleffekt" und die Augen müssen sich doch ziemlich anstrengen.

Dennoch gibt es einige Webseiten, die gerade durch den dunklen Hintergrund sehr cool und stylish rüberkommen.

Beispiele:

• reinvigorate
• ScribeFire
• cuil

weisser Hintergrund mit schwarzer (dunkler) Schrift

Diese Variante entspricht eher der Farbgebung des normalen Printmediums (Zeitungen, Zeitschriften, Bücher) und so ist es auch nicht verwunderlich, das Microsoft Word als Standard diese Farbgebung hat. Ausserdem ist es für die Augen wesentlich angenehmer wenn nicht laufend ein Kontrastwechsel stattfindet wenn man von einem Blatt etwas abschreibt und dann wieder auf den Bildschirm schaut um die Eingaben zu kontrollieren.

Da weiss im Prinzip keine Farbe ist, wird sie als Neutral angesehen und kann somit theoretisch mit jeder Farbe harmonieren. Aber selbst "weiss – schwarz" sieht sehr schick aus (im Gegensatz zu "schwarz – weiss").

Gleiche Aufteilung wie im obigen Beispiel – dennoch wirkt die Erscheinung auf den ersten Blick ruhiger, gefälliger.

Beispiele:

• Hicksdesign
• tskdesign
• Flickr

In meinen Augen erscheint die richtige Farbwahl am Anfang so Trivial, entpuppt sich aber als eine DER Designfragen überhaupt – denn mit der Hintergrundfarbe entscheidet sich auch die weitere Farbwahl für die anderen Elemente wie Überschriften, Textfarbe, Grafiken etc.

Eine gute Übersicht über anspruchsvoll designte Webseiten bietet Design Meltdown, das für alle möglichen Farben und Gestaltungen Beispiele liefert. Sollte einem also noch die zündende Idee fehlen kann man sich hier sicherlich einige Anregungen holen.

Benötigt wird lediglich das Pseudo-Element :first-letter. Es gibt auch noch das Element :first-line das man hier verwenden kann.

Hier der Source-Code komplett: (hier gehts zur Livedemo)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Erster_Buchstabe</title>
<style type="text/css">
body {
background: #ffffff none repeat scroll 0% 50%;
font-family: Arial,Helvetica,sans-serif;
font-size: small;
color: black;
}
#post {
width: 500px;
}
.textinnen {
position: relative;
top: 15px;
left: 15px;
display: block;
font-family: Georgia;
font-size:1em;
}
.textinnen:first-letter {
font-weight: bold;
margin-left: 25px;
color: red;
font-size: 200%;
}
.textinnen:first-line {
font-family: Georgia;
font-size: 1.4em;
color: #999999;
}
</style>
</head>
<body>
<div id="post">
<h3>Dies ist ein Beispiel, wie man das Aussehen der ersten
Buchstabens
eines
Absatzes anders darstellen kann.</h3>
<br>
<p class="textinnen">
Das ist jetzt ein Beispiel, das der erste Buchstabe anders Aussieht.
Und nicht nur das, sogar die erste Zeile sieht ganz anders aus. Es
folgt jetzt einfach noch ein wenig Text um den Absatz zu einem Umbruch
zu zwingen damit man sieht, das es nicht immer am Zeilenanfang ist.</p>
<p> Aber nur, wenn auch die entsprechenden Klasse angesprochen
wird erscheint auch der erste Buchstabe anders. Gleichzeitig sieht man
aber auch, das die Einrückung links nun nicht die gleiche ist wie in
dem Text obendrüber. Das liegt daran, das im CSS eine Einrückung für
den Bereich definiert ist der im body fehlt.</p>
<p class="textinnen">Hier ist noch ein weiteres Beispiel
für den anders aussehenden Buchstabden am Anfang</p>
<p class="textinnen">Gleichzeitig kann man durch <br>
einen Zeilenumbruch selbst steuern, ab wann der Rest des Textes wieder
"normal" aussehen soll.</p>
</div>
</body>
</html>

Wie man sieht ist es total einfach – so einfach, das ich beschlossen habe, das hier auch einzusetzen.

Edit 06.08.2008:
Okay okay – ich hatte wohl zuviel vorausgesetzt. Also schön.

Der CSS Teil beginnt ab folgendem Kommando: <style type="text/css"> und endet mit </style>.

Alles was dazwsichen liegt ist also Styling. body sollte mittlerweile bekannt sein, da brauche ich nicht mehr darauf eingehen. Entscheidend ist letztlich folgender CSS Part:

.textinnen {
position: relative;
top: 15px;
left: 15px;
display: block;
font-family: Georgia;
font-size:1em;
}
.textinnen:first-letter {
font-weight: bold;
margin-left: 25px;
color: red;
font-size: 200%;
}
.textinnen:first-line {
font-family: Georgia;
font-size: 1.4em;
color: #999999;
}


.textinnen definiert erstmal generell wie die Klasse “textinnen” auszusehen hat (also Abstände, Schriftart und -größe usw.). Interessant sind aber die Pseudo-Klassen die nun definiert werden:


.textinnen:first-letter {
font-weight: bold;
margin-left: 25px;
color: red;
font-size: 200%;
}
.textinnen:first-line {
font-family: Georgia;
font-size: 1.4em;
color: #999999;
}


Bei .textinnen :first-letter wird definiert, wie der erste Buchstabe des Absatzes aussieht und bei .textinnen :first-line wird definiert, wie die erste Zeile des Absatzes aussieht.

Nachdem diese Arbeit getan ist muss nun bei dem entsprechenden Post nur noch diese Klasse aufgerufen werden – eben z.B. mit folgendem Text:


<p class="textinnen">
Das ist jetzt ein Beispiel, das der erste Buchstabe anders Aussieht.
Und nicht nur das, sogar die erste Zeile sieht ganz anders aus. Es
folgt jetzt einfach noch ein wenig Text um den Absatz zu einem Umbruch
zu zwingen damit man sieht, das es nicht immer am Zeilenanfang ist.</p>


Wichtig: die Klasse .textinnen wird zum Beispiel durch einen Absatz aufgerufen in dem man statt den normalen <p>-Tags noch die Klasse einfügt – also über <p class="textinnen">. Lässt man die Klasse weg, so wird ein ganz normaler Absatz angezeigt.

In dem Code den ich gepostet habe, ist der komplette HTML-Code inkl. Stylesheet angezeigt. In dieser Form kann man ihn nicht 1:1 für den Blog einsetzen. Es ist halt der Code der der Livedemo zugrunde liegt.

So besser Franzi?

Doch wie funktionieren Tabellen eigentlich?

Hier mal ein Beispiel: (Livedemo Tabelle 1)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Tablle 1</title>
</head>
<body>
<table>
<caption>Tabelle X/Y Anzeigen</caption>
<thead><tr>
<th> </th>
<th>Spalte 1</th>
<th>Spalte 2</th>
</tr>
</thead>
<tfoot><tr>
<th>Ergebnis</th>
<td>Erste Spalte</td>
<td>Zweite Spalte</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Zeile 1</th>
<td>Erste Zelle</td>
<td>Zweite Zelle</td>
</tr>
<tr>
<th>Zeile 2</th>
<td>Dritte Zelle</td>
<td>Vierte Zelle</td>
</tr>
</tbody>
</table>
</body>
</html>


Die Befehle im einzelnen:
caption ist die Tabellenbeschriftung – ist nicht zwingend vorgeschrieben.
colgroup, col ist die Spaltengruppe – innerhalb von colgroup kann man mit col die einzelen Spalten definieren, damit die Browser die Tabelle schneller aufbauen können (ist auch nicht zwingend)
th ist der Table Head (Spalten- und Zeilenkopf) – damit richtet man sich Zellen für die Tabellenüberschrift ein
tbody ist der Tabellenkörper – dient zusammen mit thead und tfoot der logischen Unterteilung von Tabellen
thead ist der Tabellenkopf – Kennzeichnet also den oberen Tabllenbereich bzw. den Überschriftsbereich
tfoot ist der Tabellenfuß – Kennzeichnet den unteren Tabllenbereich, z.B. die Ergebniszeile

Grober Aufbau einer Tabelle:

<table>
<caption>Überschrift</caption>
<thead><tr>
<th> </th>
<th>Spalte 1</th>
<th>Spalte 2</th>
</tr>
</thead>
<tfoot><tr>
<th>Ergebnis</th>
<td>Erste Spalte</td>
<td>Zweite Spalte</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Zeile 1</th>
<td>Erste Zelle</td>
<td>Zweite Zelle</td>
</tr>
<tr>
<th>Zeile 2</th>
<td>Dritte Zelle</td>
<td>Vierte Zelle</td>
</tr>
</tbody>
</table>


Der Syntax:
border: LINIENDICKE_IN_PIXEL_(PX) LINIENART LINIENFARBE;

Beispiele:
border:1px solid #000;
Dieser Befehl zieht einen schwarzen Rahmen rund um den definierten Container.

border:3px dotted #f00;
Dieser Befehl zieht einen roten gepunkteten Rahmen in der Dicke von 3 Pixel.

border:2px dashed #369;
Dieser Befehl zieht einen blauen unterbrochenen Rahmen in der Dicke von 2 Pixel.

Es gibt für den Befehl border eine Besonderheit!

Soll nur unten eine Linie gezeichnet werden, so kann man auch diesen Befehl benutzen – mit einer kleinen Variante.

Beispiele:
border-bottom:2px solid #369;
Dieser Befehl zieht am unteren Rand des Containers eine 2 Pixel dicke blauen Linie.

border-bottom:1px dotted #000;
Dieser Befehl zieht am unteren Rand des Containers eine 1 Pixel dicke gepunktete Linie.

Wenn es border-bottom gibt, dann muss es natürlich auch border-top geben – für den oberen Rand des Containers. Und die Seiten dürfen natürlich auch nicht fehlen – also border-right und border-left – die Parameter sind mit den Beispielen identisch.

Im Prinzip ganz einfach – also lege ich mal los.

Wir haben ja schon im background Web2.0 Style gesehen, das man für ein Element (in dem Beispiel das body -Element) einen Hintergrund definieren kann und das dieser Hintergrund auch eine Grafik sein kann. Warum nicht also auch einen Hintergrund für die Überschriften in der Sidebar?

Wir benötigen dafür eigentlich nur den "farbigen Balken". Den können wir entweder mit Gimp oder mit dem Gradiant Image Maker erstellen. Im folgenden Beispiel mache ich es mit dem Gradiant Image Maker.

1. Auf die Seite vom Gradiant Image Maker gehen.
2. Eine Farbe für den oberen Teil und eine für den unteren Teil aussuchen und noch bestimmen, wie gross (also width und height ) und dann noch das Ausgabeformat aussuchen (JPG oder PNG – ich bevorzuge PNG da es noch besser für die Webdarstellung optimiert ist) und dann auf "Get full size image" klicken. Es öffnet sich ein neues Browserfenster und euer definierter Gradient wird angezeigt.
3. Habt ihr euer gewünschtes Ergebnis, mit der rechten Maustaste auf die Grafik klicken und diese abspeichern.
4. Nun die Grafik wie bekannt bei einem Webbildhoster hochladen (photobucket etc.).
5. Im CSS nun folgenden Teil suchen und ergänzen:
   .sidebar h2 {
background: url(http://eureurlzumbild.de/bildname.jpg) repeat-x #91d816;
}
6. Speichern und euren Blog bewundern.

So soll in unserem Beispiel das Endergebnis aussehen. Es folgt nun eine Schritt-für-Schritt Anleitung (wie immer benutze ich die engl. Version von Gimp):

1. Neues Bild erstellen (Ctrl-N) und als Größe 420×100 auswählen
2. Durch drücken der Taste "T" das Textwerkzeug aktivieren – als Schriftart nehme ich "Sans Bold" und stelle es auf Grösse "38". Die Schriftfarbe wähle ich aus mit dem Farbcode "d0ecf4" (bei HTML Notation) aus. Nun Schreibe ich den Text "DESIGNKURSBLOG".
3. Mit der rechten Maustaste auf den Layer mit "DESIGNKURSBLOG" klicken und "Alpha-to selection" auswählen, danach einen neuen Layer erzeugen und die vorgeschlagenen Werte mit OK übernehmen.
4. Auf "Select – Grow" klicken und als Wert "5" eintragen. Danach mit "F" das "Fill" Werkzeug auswählen und mit der Farbe "272e36" den Bereich füllen. Danach den Layer eine Ebene unter den Schriftzug setzen. Mit Ctrl-Shift-A die komplette Markierung aufheben.
5. Wie bei 3. beschrieben nochmal den Layer "DESIGNKURSBLOG" selektieren und dieses mal mit "Select – Grow – 3" den Bereich vergrössern. Nun das "Fill with gradiant"-Werkzeug auswählen (=Farbverlauf) und drücken von "D" und "X" (hintereinander) den schwarz-weissen Farbverlauf auswählen. Nun mit gedrückter Ctrl-Taste eine linine senkrecht von oben nach unten durch die selektierte Schrift ziehen. Danach mit "Ctrl-Shift-A" wieder alles deselektieen und den Layer eine Ebene unter "DESIGNKURSBLOG" setzen.
6. Nun auf den Layer klicken den wir bei Punkt 4. erzeugt haben und dann unter "Script FU – Shadow – Dropshadow…" den Schlagschatten auswählen. Als Werte "0" "0" "10" eingeben und bei "Allow Resizing" den Haken rausnehmen. Mit OK bestätigen – nach kurzer Zeit wird ein weichgezeichneter Schatten im Hintergrund erscheinen.
7. Nun wieder wie in Punkt 3. beschrieben auf den Layer "DESIGNKURSBLOG" mit "Alpha to selection" klicken und nun einen Farbverlauf auswählen der Vordergrund "d0ecf4" als Wert hat und als Hintergrund den Wert "394042". Danach wieder mit gedrückter Ctrl-Taste den Farbverlauf zeichnen.
8. Wenn das Ergebnis zufriedenstellend aussieht mit "Ctrl-M" das Bild auf eine Ebene reduzieren, danach kann es als PNG oder JPG abgespeichert werden. FERTIG!

Sollte jemand die Deutsche Version verwenden, ist der Punkt vermutlich unter “Auswahl – abgerundetes Rechteck” zu finden.