Heft-Archiv >> 2003 >> Publisher 6-03 >> Web-Publishing >> Tipps und Tricks

Tipps und Tricks

Webdesign

Bilder beschneiden

(dl) Gibt man für ein Bild in HTML eine bestimmte Grösse an, ist eine Skalierung des Bildinhalts die Folge. Auf diese Weise ist es nicht möglich, bloss einen Bildausschnitt zu zeigen.

Es gibt aber einen Trick, um Bilder dennoch zu beschneiden. Das Zauberwort heisst Hintergrundbild. Ein Hintergrundbild wird nie skaliert, sondern einfach abgeschnitten. Interessant wird dies aber erst dadurch, dass auch Tabellen und Rahmen Hintergrundbilder haben dürfen. Durch die Grössenangabe der Tabelle, Zelle oder des Rahmens wird folglich das Bild auf die gewünschte Pixelzahl beschnitten.

Einer Beschneidung wie im Layoutprogramm kommt dies aber nicht gleich. Von Bildern wird stets der Ausschnitt links oben gezeigt, sie werden also rechts und unten beschnitten. Das kann zwar geändert werden mit der CSS-Angabe "background-position: bottom-right", aber ausser Mozilla zeigt dies kein Browser richtig an, und auch die Vorschau von GoLive reagiert nicht darauf. Ein weiterer Nachteil dieser Art von Bildbeschneidung liegt in der verlangsamten Ladegeschwindigkeit, denn auch die Daten, die nicht sichtbar sind, müssen vom Browser heruntergeladen werden.

CSS

Falsche Grössendarstellung

(dl) Obwohl in CSS Pixel- oder Punktgrössen definiert werden können, werden diese auch heute noch von den Browsern unterschiedlich gross dargestellt. Auf Windows 2000 zeigen die getesteten Browser Mozilla und Internet Explorer die Schrift richtig an. Auf dem Mac hingegen ist die gleiche Schrift unter Mozilla (und die anderen Gecko-Browser Netscape und Camino) kleiner als unter Safari und Internet Explorer - aber Mozillas Anzeige ist die korrekte! Wer also auf dem Mac eine Website gestaltet, muss als Testbrowser unbedingt Mozilla verwenden.

GoLive

Massgeschneiderte Ersetzen-Befehle

(dl) Im Suchen-Dialog bietet GoLive unter dem Reiter Element ein extrem nützliches und leistungsfähiges Feature. Allerdings sind die Befehle schwer verständlich, und Missverständnisse haben fatale Folgen, da das Ersetzen nicht rückgängig gemacht werden kann.

Beim Klick auf Starten wird der Befehl in allen unten ausgewählten Dateien durchgeführt. Wenn Sie den Button nicht betätigen können, haben Sie vermutlich noch keine Datei ausgewählt. Die erste Auswahl erfolgt zwischen Name ist oder Name entspricht. Der Unterschied liegt hier darin, dass bei letzterem Operatoren eingefügt werden können (gerader Strich | für «oder»). Das grosse Textfeld darunter ist für spezifizierende Angaben des Elements reserviert (z. B. size="100"). In der unteren Hälfte des Dialogfelds wird angegeben, was mit den gefundenen Elementen passieren soll. Bei diesen seltsamen Anweisungen ist mit «Inhalt» das gemeint, was zwischen Start- und End-Tag steht. Wird Element löschen gewählt, so wird auch dieser Inhalt gelöscht. Will man also nur z. B. alle Font-Tags entfernen, ohne natürlich den Text auszuradieren, wählt man Element durch Inhalt ersetzen. Insbesondere bei Element behalten ist es sinnvoll, das Element durch Aktionen zu modifizieren. So können z. B. alle Bilder mit Grösse 15 x 15 auf 20 x 20 Pixel vergrössert werden. Diese Suchläufe lassen sich als Aufgabe speichern.

Webdesign

Seiten von Indizierung ausschliessen

(dl) Die Angabe

sagt dem Suchmaschinenrobot, dass diese Seite nicht indiziert werden soll. Dies ist nicht nur dann nützlich, wenn erreicht werden soll, dass bestimmte Seiten nicht von aussen gefunden werden. Auch wer ein Gästebuch unterhält, sollte diese Zeile in den Head der Seite einfügen. Grund: Spammer fügen in Gästebüchern ihre eigene Seite als Link ein, wodurch diese eine Aufwertung im Verlinkungsrating erhält. Natürlich nur, wenn die Seite selbst im Google-Ranking einen Wert hat, was bei nicht indizierten Seiten nicht der Fall ist.

Damit der Spammer auch merkt, dass ihm das Linkeinfügen nichts nützt (und er es unterlässt), sollte ein entsprechender Hinweis im Gästebuch platziert werden. Ein entsprechendes Signet findet sich auf www.keinspam.de.

GoLive / CSS

Rahmen um Bilder erstellen

(Urs Gamper) Es gibt wunderbare Möglichkeiten, mit CSS Effekte zu erzielen. In diesem Beispiel geht es darum, rechts und unterhalb eines Bildes eine Linie zu erstellen.

Als erstes erstellen wir im internen oder auch externen CSS eine neu Klasse z.B. mit dem Namen «.bildwinkel». Im CSS-Inspektor von GoLive unter dem Register Block > Innenabstand wird bei rechts und unten je ein Abstand von 5px zugeteilt. Zusätzlich muss im Register Rand bei rechts und unten ein Rand von einem Pixel, eine Farbe und Durchgezogen zugewiesen werden. Danach kann das CSS gespeichert und bei einem externen CSS der Seite zugewiesen werden.

Nun gehen wir in die Layoutansicht zu den Bildern. Wenn wir diese Klasse nun dem Bild zuweisen, wird das Bild auf der rechten Seite und unten einen Rand von einem Pixel aufweisen. Im Quelltext ersehen wir, dass es uns eine Klasse erstellt hat.

Wenn wir aber nicht dem Bild, sondern dem Text eine Klasse zuweisen, erhalten wir einen interessanten Effekt. Bedingung ist allerdings, dass das Bild in einer Tabellenzelle liegt, welche eine «automatische» (nicht feste) Breite aufweist. Wir markieren also das Bild, bewegen den Cursor nach rechts und fügen einen geschützten Leerschlag (CTRL + Leerschlag) ein. Nun weisen wir diesem Leerschlag die Klasse zu. Wenn das Bild nicht durch eine Tabellenzelle eingeschränkt wird, weitet sich der Rand bzw. die untere Linie bis an das Seitenfenster aus.

 

---

Tipps aus www.hilfdirselbst.ch

Das Forum www.hilfdirselbst.ch ist eine Fundgrube für Tipps und Tricks zu den gängigen Publishing-Programmen. Die Moderatoren tragen für uns jeweils die «Rosinen» zur Veröffentlichung in der Zeitschrift zusammen.

GoLive

Rollover funktioniert nur lokal

Ich habe einen Rollover, der bei mausover das Bild ändert. Wenn ich das bei mir ausprobiere, funktioniert es. Auf dem Server hingegen geht es nicht. Was soll ich tun?

Das sieht nach der berühmten fehlenden Skriptbibliothek und dem Arbeiten ohne Website-Datei aus. Wenn die Seite in der Kopfzeile markiert und dann im Inspektor der Reiter HTML angewählt wird, ist zu sehen, dass JavaScript standardmässig von einer GoLive-Bibliothek importiert wird. Diese ist von Haus aus nur lokal verfügbar. Man muss sie entweder auf den Server laden (wo sie sich befindet, ist im HTML-Quellcode ersichtlich), oder dann die Einstellung Code in HTML-Seite schreiben wählen.

GoLive

Scrollbalken in Tabelle

Kann ich in einer Tabelle - wie bei Frames - einen Scrollbalken einfügen?

Im Kopfteil wird dafür eine CSS-Klasse definiert:

.klasse {width:100px; height:100px; overflow:scroll}

Hier wird festgelegt, wie gross die Zelle sein soll. overflow: scroll bedeutet, dass die Rollbalken in jedem Fall erscheinen, bei overflow: auto erscheinen sie nur, wenn nötig, das heisst, wenn der Inhalt grösser ist als die 100 Pixel. Der entsprechende Teil in der Tabelle lautet:

.

Der