HTML-Text mit Flash ersetzen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen Ihren HTML-Text durch zusätzliche typografische Auswahlmöglichkeiten austauschen, allerdings ohne hierfür statische Grafiken aktualisieren zu müssen (wie im Rezept HTML-Text durch ein Bild ersetzen besprochen).

Lösung

Verwenden Sie die Scalable Inman Flash Replacement-(sIFR-)Technik.

Die JavaScript-Datei und die übrigen benötigten Komponenten können Sie unter Mike Davidson - sIFR herunterladen.

Öffnen Sie die Datei sifr.fla mit Flash. Klicken Sie auf die weiße Zeichenfläche ("canvas"), um die Eigenschaftspalette anzuzeigen (die Zeichenfläche erscheint im Moment noch leer; siehe folgende Abbildung).

Eigenschaftspalette in Flash anzeigen

Abbildung: Die Eigenschaftspalette in Flash anzeigen.

Wählen Sie nun eine Schriftart, die Sie für die Gestaltung Ihrer Webseite verwenden möchten (siehe nächste Abbildung).

Wählen Sie eine Schrift aus der Eigenschaftspalette aus

Abbildung: Wählen Sie eine Schrift aus der Eigenschaftspalette aus.

Exportieren Sie dann die Datei, und benennen Sie sie nach der verwendeten Schriftart. Für die Schrift Britanic Bold wäre der Dateiname also jetzt britanicbold.swf.

Zu den sFIR-Dateien gehört auch eine Reihe von CSS-Regeln, die Sie den CSS-Dateien für Ihre Site durch Kopieren und Einfügen hinzufügen müssen. Stellen Sie sicher, dass diese Dateien für Ihre Site zur Verfügung stehen. Um die Überschrift in der richtigen Schrift darzustellen, können Sie beispielsweise die folgende Regel verwenden:

h1 {
 font-family: "Britanic Bold", Arial, Verdana, sans-serif;
 margin: 0 0 .3em 0;
 padding: 0 0 .3em 0;
 border-bottom: 2px solid #666;
 text-align: left;
 font-size: 2em;
}

Um die Ergebnisse zu sehen, müssen Sie die Datei nur noch auf Ihren Server hochladen und mit einem Browser öffnen, wie in folgender Abbildung zu sehen ist.

Überschrift wird in Britanic Bold dargestellt

Abbildung: Die Überschrift wird in Britanic Bold dargestellt.

Diskussion

Im Jahr 2004 erfand der Webentwickler Shaun Inman die Inman Flash Replacement-Methode. Mit geringen Dateigrößen und einem sehr direkten Ansatz lässt sich HTML-Text durch Flash-basierten Text ersetzen.

Ein weiterer Webentwickler, Mike Davidson, verwendete Inmans Methode als Basis für ein robusteres System, mit dem auch Größenänderungen im Text, auch über mehrere Spalten hinweg, möglich sind.

Die sFIR-Technik wird hauptsächlich zum Ersetzen von Text in Überschriften und nicht textbasierten Links verwendet. Zwar ist es auch möglich, die Methode mit textbasierten Links zu benutzen, allerdings können Benutzer Links in diesem Fall nicht mehr per Rechts- oder Mittelklick in einem neuen Browserfenster öffnen.

Da diese Technik sehr stark auf JavaScript und Flash zurückgreift, kann es sein, dass Benutzer den Eindruck bekommen, die Darstellung von sFIR-Text brauche gegenüber normalem HTML-Text länger.

Zwar unterstützen moderne Browser wie Internet Explorer für Windows, Opera 8+, Safari und Firefox Flash-Transparenz. Allerdings ist die Darstellung von transparenten Hintergrundbildern sehr rechenintensiv. Besonders Benutzer mit langsamen Rechnern werden die längere Wartezeit bemerken.

Siehe auch

Weitere Informationen zur sFIR-Technik von Shaun Inman finden Sie unter IFR: REVISITED AND REVISED.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln