Cover_19-6_gruen_low

Schweizer Fachzeitschrift
für Publishing und Digitaldruck


Heft-Archiv >> 2002 >> Publisher 2-02 >> Web-Publishing >> Tipps und Tricks

Tipps und Tricks

GoLive

Frames auflösen

Wenn die eigene Website in einem Frame einer anderen dargestellt wird, hat man in der Regel kaum Freude. Diesen Effekt kann man verhindern, indem man das hier in den Head-Teil der HTML-Datei schreibt:

<script>
if (self.parent.frames.length != 0) self.parent.location = document.location;
</script>

In GoLive geht das auch, ohne Code zu schreiben. Bei der Objektepalette die Smart-Reihe wählen (zweite von links), das Objekt Head-Aktion in den Kopfteil des Dokuments ziehen, und dann im Inspektor OnLoad die Aktion Frame abstossen aufrufen. GoLive schreibt dann allerdings eine Riesenmenge an Code in den Headteil, die gar nicht nötig wäre.

Webdesign

Initialen

Moderne Browser können mit Hilfe von CSS auch Initialen darstellen. Funktionieren tuts mit Netscape 6, dem Explorer ab Version 5.5 (Mac ab 5.0) und allen Operabrowsern. Ähnlich wie es beim \-Tag die Selektoren «a:active», «a:visited» etc. gibt, existieren für das \-Tag die Selektoren «p:first-letter» und «p:first-line», um den ersten Buchstaben bzw. die erste Zeile eines Absatzes anders darzustellen. Für eine zweizeilige Initiale lautet der CSS-Befehl:

P:first-letter { font-size: 300%;float:left;}

Für drei Zeilen müsste der Wert dementsprechend auf 450% gesetzt werden. Aber Vorsicht: Je nach Schriftart und Schriftgrösse können sich leichte Verschiebungen ergeben, so dass die zweite Zeile nicht mit dem Anfangsbuchstaben bündig ist. Testen ist also angesagt. Wird float:left weggelassen, fliesst der Text nicht um den ersten Buchstaben herum.

Photoshop

Wald

Wir basteln uns einen virtuellen Wald mit Hilfe von selbstdefinierten Werkzeugspitzen. Als erstes müssen Sie nach einer geeigneten Vorlage Ausschau halten: Ein Foto mit einer Gruppe von Bäumen und Gebüsch vor einem hellen Hintergrund. Diese Grafik müssen Sie nun in Photoshop öffnen. Wenn der Hintergrund nicht ganz weiss ist wie bei unserem Beispiel, können Helligkeit und Kontrast soweit erhöht werden, dass der Hintergrund weiss, die Bäume aber noch gut sichbar sind. Jetzt wählen Sie mit dem rechteckigen Auswahlwerkzeug den Ausschnitt aus, der als Werkzeugspitze dienen soll. Am besten begrenzen Sie die Auswahl auf den Seiten dort, wo die Bäume am weitesten herunter vor freiem Himmel stehen. Mit Werkzeugspitze festlegen kreiert Photoshop die Spitze. Erstellen Sie ein neues Dokument und wählen Sie das Werkzeug «Airbrush» mit der neuen Werkzeugspitze. Der Druck sollte nicht zu stark sein, damit man die verschiedenen Helligkeitsabstufungen noch sieht. Jetzt können die Bäume «gepflanzt» werden. Damit die exakte Regelmässigkeit unserer digitalen Bäume nicht zu sehr auffällt, erstellen wir noch eine zweite (je mehr desto besser) Werkzeugspitze mit einem anderen Ausschnitt.

Webdesign

GIF-Transparenzen

Die Transparenz von GIFs kann man nutzen, um Bilder halbtransparent zu machen. Erstellen Sie in Photoshop, ImageReady oder einem anderen Programm ein winziges Bild von 2x2 bis 6x6 Pixel und transparentem Hintergrund. Einige dieser Pixel füllen Sie nun mit einer bestimmten Farbe, andere lassen Sie transparent. Wenn Sie grün verwenden, wird Ihr Bild dadurch grün eingefärbt, weiss hellt es auf, schwarz dunkelt es ab. Nun zum HTML-Teil. Erstellen Sie eine Tabelle mit einem Feld, die als Hintergrund das gewünschte Foto hat und genau so gross ist wie dieses. Innerhalb dieser Tabelle wird nun eine zweite Tabelle eingebettet mit ebenfalls einem Feld und dem Mini-GIF als Hintergrund. Höhe und Breite der eingebetteten Tabelle sind 100%. Dadurch, dass das GIF viel kleiner ist als das Foto, wird es wiederholt, und es entstehen Muster. Man kann in der zweiten Tabelle auch mehrere Felder mit unterschiedlichen GIFs verwenden, um Effekte wie diesen zu erzielen.