Diverse Techniken

ier mal ein Beispiel für eine Initiale, welche mittels eines Bildes erstellt wurde. Das Bild mit dem Buchstaben hat das Attribut align="left" bekommen. Dadurch wird der Text rechts am Bild ausgerichtet bzw. das Bild links am Text. Mittels align="right" würde das Bild am rechten Rand erscheinen und der Text würde es links umfließen. Das ist in gleicher Weise mit Tabellen möglich. Damit man sieht, dass der Text auch tatsächlich das Bild umfliesst schreib ich jetzt hier noch ein bisschen, denn die eigentliche Erklärung wäre nämlich schon zu Ende gewesen, den Rest kann man sich ja auch im Quelltext anschauen. Aber in Sachen dummes Zeug schreiben, hatte ich sowieso noch nie Schwierigkeiten. Das kann ich über mehrere Seiten und Tage durchhalten. Damit habe ich keine Probleme.


Trennlinie: Auch der Einsatz des HR Tags für horizontale Linie läßt sich dezenter anlegen, wenn man als Größe size="1" und das Attribut noshade zuweist.

Schriftgröße: Hier habe ich für den oberen Teil eine Schriftgröße definiert, welche von den Einstellungen des Browsers unabhängig ist. Probieren Sie es aus. Netscape: Bearbeiten / Einstellungen / Gesamtbild (links) /Schriftart .... Internet Explorer: Ansicht / Schriftgrad. Das ist nur möglich mit der Style Sheet Größenangabe in Pixeln. Ich habe für das Style Sheet einen selbstgewählten Namen vorgegeben und zwar die Unterklasse .normaltext
.normaltext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; text-decoration: none}
Im Body wird der Text mit normalen Font Tags formatiert, damit auch Browser die keine Style Sheets beherrschen, ein paar Schriftformatierungen darstellen. In den Font Tags erfolgt dann die Zuweisung des Style Sheets mittels class.
<font size="2" face="Verdana, Arial, Helvetica, sans-serif" class="normaltext">

Leider interpretiert Netscape und Internet Explorer die Größenangabe etwas unterschiedlich, das heißt im Internet Explorer sind die Pixel anscheinend etwas größer als im Netscape (man kennt den Schwachsinn). Also wenn man es ganz genau nehmen will, muß man für Internet Explorer und Netscape ein anderes Style Sheet definieren. Das kann man mit einer Browsererkennung mittels Javascript machen. Dabei muß allerdings wiederum gewährleistet sein, dass Javascript aktiviert ist.
Hier ein Style Sheet mit Browserweiche.

Tabellenränder: Unten mal ein paar Beispiele, wie man Tabellenränder auch etwas schöner gestalten kann. Es gibt zwar für den IE die Mögichkeit die Tabellenrahmen farbig zu definieren, aber was nützt das, wenn es für den Netscape nicht funktioniert?
Durch den Einsatz von cellspacing und die Zuweisung einer Hintergrundfarbe in den einzelnen Tabellenzellen, entstehen schöne dezente Linien.
Überhaupt sind geordnete Tabellen mit gleichmäßiger Aufteilung das A und O einer guten übersichtilichen Gestaltung.

Prämien Rabattaufstellung
gesammelt Waren- Gutschein Prozent
ab 500,- EUR 10,- EUR (2%)
ab 1000,- EUR 30,- EUR (3%)
ab 1500,- EUR 60,- EUR (4%)
ab 2500,- EUR 175,- EUR (7%)
ab 5 000,- EUR 500,- EUR (10%)
Hintergrundbild: Am linken Bildrand hat diese Seite einen Schatten, der im Zusammenhang mit dem Frameset ganz schön aussieht. Es ist ein Hintergrundbild mit einer Breite von ca 10 Pixeln und einer Höhe von einem Pixel, welches mittels Style Sheet, nur am link Bildrand vertikal gekachelt wird. Das funktioniert mit folgender Style Sheet Zuweisung:
body { background-image: url(shadow.gif); background-repeat: repeat-y}
Hier findet man noch einige weitere Beisiele für kleine Hintergrundbilder.
Dort gibt es auch das Style Sheet für fixierte Hintergrundbilder erklärt.

Gesperrter Text: Außerdem möchte ich noch ganz unten auf den Link zu on-design hinweisen. Es ist zwar möglich mittels Style Sheet die Buchstabenabstände zu vergrößern, jedoch funktioniert das mal wieder nicht im Netscape. Deshalb wurde einfach zwischen jeden Buchstaben ein Leerzeichen gesetzt. Zwischen jedes Wort kann noch ein zusätzliches geschütztes Leerzeichen eingefügt werden.

zurück

Copyright ©
Ein weiterer Web Design Tip von Pastor Pixel

H T T P : / / W W W . P A S T O R P I X E L . D E