Web-Seiten mit Web Developer effektiv erstellen

Entwicklungshilfe

von Martin Loschwitz

---

Während das Erstellen von Websites heute kein Problem mehr darstellt, ist es um so schwieriger, die Seiten später zu pflegen und dafür zu sorgen, dass sie in allen Browsern ordentlich aussehen. Web Developer hilft bei der Arbeit.

---

Eine Web-Seite zu pflegen, mit neuen Standards konform zu halten oder kleine Unstimmigkeiten zu entfernen, die der Editor eingebaut hat, kann das Arbeiten mit HTML zu einem echten Ärgernis machen: Nicht selten muss man mit einem normalen Text-Editor den HTML-Code ändern, die Seite auf den Server kopieren und diese Schritte mehrfach wiederholen, bis man das erwartete Resultat erreicht hat.

Dass das eine sehr mühsame und zeitaufwendige Angelegenheit ist, hat sich auch Chris Pederick gedacht und mit der Web Developer Extension für Firefox eine Lösung geschaffen. Sie richtet sich an Web-Designer und bietet einige interessante Funktionen, die das Einfügen von Änderungen und das Entwickeln von Seiten für verschiedene Browser erleichtern sollen.

Das funktioniert so: Über das Kontextmenü der rechten Maustaste sind die verschiedenen Tools erreichbar; um von diesen Funktionen Gebrauch zu machen, muss der Entwickler die Seite nur im Browser aufrufen und den entsprechenden Menüpunkt auswählen. Mit Web Developer wird das Entwickeln von Websites deutlich erleichtert.

Installation der Extension

Zunächst binden Sie die Web Developer Extension in Firefox ein. Das funktioniert wie bei anderen Extensions über den Firefox-Extension-Manager.

1. Starten Sie Firefox und geben Sie die Adresse [1] ein. Klicken Sie auf den Link Web Developer for Firefox im Kasten "Localized Version 0.9.3", um die deutschsprachige Version zu erhalten.

2. Klicken Sie im Auswahlfenster zur Software-Installation auf Jetzt installieren. Warten Sie, bis die Extension vom Server geladen und installiert ist.

3. Schließen Sie den Extension Manager und alle offenen Firefox-Fenster. Anschließend starten Sie Firefox neu.

4. Rufen Sie den Menüpunkt Tools / Werkzeuge auf. Wenn Sie in der Liste den Eintrag Web Developer 0.9.3 sehen, war die Installation erfolgreich: Web Developer ist dann aktiviert.

Erste Schritte

Nach Aktivierung der Extension erscheint eine zusätzliche Leiste am oberen Rand des Firefox-Fensters. Die ist nicht nötig -- Sie entfernen sie, indem Sie durch Rechtsklick auf die Leiste das Kontextmenü aufrufen und dort den Eintrag Web Developer Werkzeugleiste auswählen.

Öffnen Sie nun eine Web-Seite und klicken Sie mit der rechten Maustaste in das Browser-Fenster. Das Kontextmenü enthält den neuen Menüpunkt Web Developer, der wiederum diverse Untereinträge enthält (Abbildung 1). Über Optionen / Optionen öffnen Sie den Konfigurationsdialog der Extension und können diese an Ihre Vorstellungen anpassen.

Abb. 1: Über den Kontextmenü-Eintrag "Web Developer" erreichen Sie alle Funktionen der Extension.

Konfiguration der Extension

Im Register Allgemein gibt es nichts einzustellen. Wollen Sie die Standardfarben ändern, die Web Developer für die Anzeige von HTML-Dateien im Editor-Fenster verwendet, erledigen Sie das im Register Farben. Wenn Sie häufig mit JavaScript arbeiten, sollten Sie die JavaScript-Konsole und JavaScript-Warnungen aktivieren: So finden Sie Fehler im Quelltext schneller.

Im Register Tasten legen Sie Tastenkombinationen fest, die bei der Web-Seiten-Erstellung die wichtigsten Funktionen schnell zugänglich machen. Hier sind Ihnen keine Grenzen gesetzt, was die Belegung einzelner Tasten angeht.

Unter Größe stellen Sie ein, welche Auflösung Web Developer als Standardgröße voraussetzen soll. 800x600 Pixel sind die Vorgabe, über Hinzufügen können Sie beispielsweise einen Eintrag für 1024x768 ergänzen.

Das Register Sidebar ist für das Aussehen der Leiste zuständig, die beim Editieren von CSS-Stylesheets am linken Bildschirmrand angezeigt wird; hier ist es oft nützlich, die Option Style Informationen in der Sidebar anzeigen zu aktivieren.

Sind alle Einstellungen gemacht, schließt ein Klick auf OK das Fenster.

Mit Web Developer arbeiten

Alle Features und Funktionen von Web Developer detailliert zu beschreiben, würde diesen Artikel sehr lang machen. Schauen Sie in das Kontextmenü, das Sie über die rechte Maustaste erreichen, und spielen Sie bei einer Web-Seite -- zum Beispiel Google -- mit den verschiedenen Optionen, bis die wichtigsten Funktionen vertraut geworden sind. Das Untermenü Deaktivieren bietet z. B. viele Möglichkeiten, einzelne Firefox-Bestandteile zu deaktivieren, und hilft so bei der Suche nach Fehlern. Im CSS-Menü finden Sie viele Optionen für die Manipulation von CSS-Sheets aus dem Browser heraus. Wenn Sie sich für das Bearbeiten der CSS-Datei entscheiden, öffnet sich ein neues Unterfenster am linken Rand, das den Quelltext anzeigt (Abbildung 2).

Abb. 2: Links sehen Sie den CSS-Editor, der das Stylesheet der EasyLinux-Web-Seite anzeigt.

Die Funktion Hervorheben ist besonders interessant, wenn Sie eine alte Website an aktualisierte Standards anpassen müssen. Um einen Überblick zu erhalten, zeigen Sie über Veraltete (deprecated) Elemente anzeigen alle Elemente an, die nach dem jeweils letzten W3C-Standard nicht mehr benutzt werden sollten.

Apropros W3C: Der Menüpunkt Werkzeuge bietet direkten Zugriff auf das so genannte "HTML Validation Interface" des W3C. Wählen Sie einen Eintrag in diesem Menü aus, wird die aktuell angezeigte Web-Seite auf HTML-Konformität überprüft -- das ist wichtig, wenn die Seite in allen Browsern gleich aussehen soll (Abbildung 3).

Abb. 3: Direkt aus dem Menü heraus rufen Sie den Validator auf, der den HTML-Quelltext auf HTML-Konformität überprüft.

Über Größe ändern Sie die Größe des Anzeigefensters, und unter Verschiedenes finden Sie neben einigen Grundeinstellungen der aktuellen Seite auch die Beschreibung der technischen Standards für HTML, XHTML, CSS und all der anderen Web-Standards.

Fazit

Web Developer ergänzt Firefox um nützliche Tools für Web-Seiten-Entwickler. Da das Programm häufig aktualisiert wird, lohnt ein regelmäßiger Blick auf die Projekt-Homepage. (hge)

Infos

[1] Web Developer, http://www.chrispederick.com/work/firefox/webdeveloper/download/

Dieser Online-Artikel kann Links enthalten, die auf nicht mehr vorhandene Seiten verweisen. Wir ändern solche "broken links" nur in wenigen Ausnahmefällen. Der Online-Artikel soll möglichst unverändert der gedruckten Fassung entsprechen.