Webdesign Berlin – WebMatter.de

Ein nützliches Plugin, um z.B. CSS Anpassungen an einer Webseite vorzunehmen, ist das Firefox Add-on Web Developer von Chris Pederick.

Das Add-on bietet zahlreiche Anwendungsmöglichkeiten. Hier einige, die ich am nützlichsten finde:

1. Styleinformationen anzeigen:

Nach einem Klick auf den Button “CSS” -> “Styleinformationen anzeigen” markiert man den Bereich der Webseite, von dem man wissen möchte, welche CSS Befehle sich hier auswirken. In diesem Fall die Überschrift auf der Titelseite.

Nachdem man den gewünschten Bereich angeklickt hat, wird oben im Browser unter der Adresszeile, der Pfad des markierten Elementes innerhalb der Template Hierarchie angezeigt. Gleichzeitig öffnet sich unten ein zusätzliches Fenster, das alle CSS Befehle anzeigt, die sich auf dieses Element auswirken.

2. CSS bearbeiten

Möchte man sehen, wie sich eine Änderung im CSS auswirkt, so kann man auf “CSS bearbeiten” gehen und kann dann in den sich unten öffnenden Stylesheetinformationen eine Änderung eingeben und prüfen, ob dies der gewünschte Effekt ist. Diese Änderung ist nur temporär und hat keinerlei Auswirkungen auf das gespeicherte Stylesheet.

In diesem Beispiel ändere ich die Ansicht des Titelbildes von float:left auf float:right und erhalte daraufhin eine Voransicht, wie das Titelbild rechtsbündig ausgerichtet aussehen würde.

Wenn man komplexere Änderungen austesten will, so kann man auch ein Benutzer-Stylesheet hinzufügen, das gleich mehrere CSS-Änderungen enthält. Nach Klick auf den Button “Benutzer-Stylesheet hinzufügen” kann man eine vorbereitete CSS Datei einbinden, die dann ebenfalls (temporär) eine Vorschau der geplanten Änderungen zeigt. Auf diese Weise kann man in Ruhe austesten, wie sich geplante Änderungen auf das Aussehen der Website auswirken würden und ob diese wirklich den gewünschten Effekt bringen.

3. HTML Elemente hervorheben

Einige weitere nützliche Funktionen findet man unter dem Button “Hervorheben”. Hier kann man z.B. Blockelemente, positionierte Elemente, Überschriften und anderes markieren und so sehen, wo diese platziert sind.

4. Verschiedenes

Unter dem Button “Verschiedenes” findet man weitere Hilfswerkzeuge, die einem die Arbeit erleichtern können. Z.B. der Button “Maßwerkzeuge”, wenn man die Maße eines bestimmten Bereichs im Template benötigt.

Dies ist nur eine kleine Auswahl der Möglichkeiten, die die Webdeveloper Toolbar bietet. Auch die anderen Funktionen sind einen Blick wert und können die Bearbeitung eines Templates enorm vereinfachen.