Hier will ich einige Web Design Tricks mit Html und Style Sheets erklären, die ich als beachtenswert ansehe. Diese Tips werden ständig erweitert. Auch Fragen, aus meinem Forum, für die ich eine passende Lösung gefunden habe, sollen hier erscheinen.
Für Vorschläge bin ich immer offen, schreibt mir.
 

Style Sheet
Quelltext
weiter Grundwissen Style Sheets. Hier habe ich auf einigen Seiten die wichtigsten Regeln aufgeführt. Anhand des Quelltextes kann man die Beispiele nachvollziehen.

Formular weiter Hier werden die Grundfunktionen von Formularen anhand einiger Beispielseiten erlärt. Zum Schluß habe ich noch ein CGI Email Formular für das Strato Powerweb Paket beigefügt.

PNG Bilder
weiter Kaum beachtet und doch so toll. Das PNG Format liefert halbtransparente Pixel.

Runde Rahmen
abgerundete Ecken
Eine Tabelle ist zwangsläufig eckig. Wie kann man es anstellen, dass die Tabelle abgerundete Ecken bekommt?

Iframe
Seite in Seite
weiter Mit Iframe wird ein Bereich fester Größe auf einer Html Seite erzeugt, in die eine andere Html Seite eingefügt wird.

Email
Email Link
weiter Emails mit vordefiniertem Betreff oder Bodytext brauchen Sonderzeichen. Hier ist eine kleine Hilfe zur Formatierung.

Style Sheet
Browserweiche
feste Schriftgröße
Will man eine Schriftgröße in Html definieren, welche von den Einstellungen des Browsers unabhängig ist, so ist das nur mit Style Sheets möglich. Aber auch hier hat man wieder das leidige Problem, dass Netscape und Internet Explorer die Größenangaben verschieden darstellen.
Die Lösung ist eine Browserweiche mittels Javascript. So lassen sich für jeden Browser verschiedene Style Sheet Dateien anlegen, welche man nicht nur für die Schriftgröße benutzen kann.

Hintergrundbilder
Pixelkram
 klitzkleine Hintergrundbilder

Framesets
mittig
ohne Rand
Wie platziert man ein Frameset mittig auf der Seite, egal welche Bildschirmauflösung eingestellt ist? Wie verhindert man sämtliche Seitenränder, so dass man auch Bild Slices über mehrere Frames hinweg einsetzen kann?

sound einbinden Sound Dateien in html einzubinden ist nicht so einfach, da man nie weiß, welches Plugin der User in seinem Browser installiert hat.
     

Metatag Hier wird erklärt, wie ein Html Seite bei Aufruf neu vom Server geladen wird.

FTP per Browser   Hat man einen Provider wie Strato, der folgende Funktion unterstützt, kann man sich vom Browser aus per FTP einloggen und zwar gibt man folgende Zeile ins Adressfeld ein
ftp://www.ihrDomainName.de@www.ihrDomainname.de
es folgt ein Eingabefeld für das Passwort

Hintergrundbild
Tabelle

Dieser Tipp bezieht sich auf Probleme mit Netscape 4, also ein Problem, welches mittlerweile keine wesentliche Bedeutung mehr hat.

Man kann Tabellen Hintergrundbilder zuweisen. Das hat den Vorteil, dass man dann über dem Hintergrundbild Text oder Gifs mit Transparenz einfügen kann.
Allerdings verhalten sich die Hintergrundbilder nicht immer so, wie man es gerne hätte. Wie man solche Problem löst, wird hier erklärt.


Diverse Techniken
Gestaltung
 
weiter

Typografie ist auch mit Html möglich, auch wenn Designer, die von den Print Medien kommen, komplett umdenken müssen. Hier einige kleine Gestaltungstricks:

  • Initial am Anfang des Textes
  • dünne Linien mittels hr
  • Tabellen mit dünnen Ränder
  • vom Browser unabhängige Schriftgrößen mittels Style Sheet

Buttons
als Hintergrundbild
Auch dieser Tipp ist in Zeiten von TDSL und Flatrate nicht mehr so wichtig. Außerdem bieten Style Sheets mehr Möglichkeiten.

Buttons als links können ganz schön sein, aber je mehr links man hat, desto mehr Bilder müssen geladen werden und das dauert. Hier wird erläutert, wie man die Buttons als Hintergrundbild in einer Tabelle einfügt, so daß die Beschriftung in html erfolgen kann und deshalb nur ein Bild geladen werden muß.

 
© Michael Albers / Dortmund / www.pastorpixel.de