Direktnavigation

Weitere Infos

Sie lesen gerade:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuelle Version:
Einstieg in CSS

Einstieg in CSS (Cover)

Infos bei:

Inhaltsbereich

20.3 Praktische Add-ons für den Firefox

Im Folgenden finden Sie ein paar sehr nützliche Erweiterungen für den Firefox.

View Source Chart – die Kästchen im Quelltext sichtbar machen

Webseiten bestehen aus rechteckigen Kästchen, die im Browserfensterübereinander-, nebeneinander- und ineinandergestapelt werden, und es gibt eine kleine, aber feine Firefox-Erweiterung namens View Source Chart, die den Quelltext als grafische Übersicht darstellt.

Um die nur 21 KByte große Erweiterung zu installieren, surfen Sie mit dem Mozilla Firefox zur folgenden Adresse:

Im Kontextmenü (rechte Maustaste) finden Sie nach einem Neustart des Firefox den Befehl SEITENQUELLTEXT FORMATIERT ANZEIGEN. Wenn Sie auf diesen Befehl klicken, wird Ihnen der Quelltext ungefähr so angezeigt:

Abbildung 20.1: Eine Webseite besteht aus rechteckigen Kästchen …
Abbildung 20.1: Eine Webseite besteht aus rechteckigen Kästchen …

Web Developer – das Schweizer Offiziersmesser

Web Developer ist eine Sammlung von wichtigen Werkzeugen und für viele Webentwickler eine der wichtigsten Firefox-Erweiterungen. Beim Programmierer Chris Pederick wird automatisch eine deutschsprachige Version installiert, sofern in Ihrem Firefox deutsch als bevorzugte Sprache eingestellt ist :

Mit der Web Developer Toolbar können Sie unzählige Dinge tun: Webseiten analysieren, Barrierefreiheit prüfen, CSS von beliebigen Webseiten anzeigen und editieren, Grafiken ausblenden, Objekte pixelgenau abmessen und vieles mehr.

Zum Beispiel lässt sich von jeder Webseite, die Sie im Firefox betrachten, das aktuell verwendete CSS links in der Sidebar anzeigen und bearbeiten:

Abbildung 20.2: CSS live bearbeiten mit der Web Developer Toolbar
Abbildung 20.2: CSS live bearbeiten mit der Web Developer Toolbar

Der Browser zeigt Ihre Änderungen live im Browserfenster an, sodass man auf diese Weise spielend die Auswirkungen von CSS-Befehlen lernen kann.

Zur Prüfung und Analyse ist Web Developer ein wirklich unverzichtbares Werkzeug. Nehmen Sie sich ein bisschen Zeit zum Kennenlernen, und schon nach kurzer Zeit werden Sie sich fragen, wie Sie jemals ohne dieses Werkzeug arbeiten konnten.

ColorZilla – die Farbenwahl

Haben Sie auf einer Webseite schon mal eine Farbe gesehen, deren genauen Farbwert Sie gerne gewusst hätten? Dann ist ColorZilla das Tool der Wahl, denn es liefert Ihnen mit zwei Klicks den Farbwert einer beliebigen Farbe.

Eine deutsche Version finden Sie auf der ColorZilla-Homepage:

Nach der Installation sitzt das Tool links unten im Firefox-Fenster. Zur Aktivierung einfach mit der linken Maustaste einmal draufklicken und dann mit dem zum Fadenkreuz gewordenen Mauszeiger
auf die gewünschte Farbe im Browserfenster zeigen und klicken.

Nach einem Rechtsklick bekommen Sie ein Menü mit weiteren Befehlen:

Die Qual der Wahl: Farbschema erstellen

Eine Schwalbe macht noch keinen Sommer und eine Farbe noch kein Design. ColorSchemer Studio ist ein tolles Programm zum Mischen und Zusammenstellen von Farben. Online gibt es auf der Website auch einige kostenlose Bonbons:

Ebenfalls einen Besuch wert sind die folgenden Sites: