Netbeans IDE

Topstyle ergänzt diese Eingabe automatisch mit einer schließenden Klammer und positioniert den Cursor so, dass die Formatierungsanweisung optimal formatiert wird. Fahren Sie mit der Eingabe eines beliebigen Attributes fort. Sobald Sie die ersten Zeichen tippen, bietet Topstyle automatisch eine Auswahl dazu passender Attribute an. Diese können Sie mit <Pfeil hoch> beziehungsweise <Pfeil runter> und der Eingabetaste auswählen. Auch den Wert für das Attribut geben Sie auf diese Weise ein.

Aktive Style-Definition

Welche Attribute Topstyle anbietet, hängt davon ab, welche Style-Definition Sie im Style Inspector am rechten Rand des Programmfensters aktiviert haben. Diese Funktion ist eine echte Perle. Sie können so sicherstellen, dass ausschließlich Attribute einer bestimmten Version der CSS-Spezifikation vorgeschlagen werden.

Auch in die umgekehrte Richtung leistet der Style Inspector gute Dienste. Blinkt der Cursor in einer Code-Zeile mit einem Attribut, zeigt der Inspektor am unteren Rand an, zu welcher CSS-Version das Tag gehört und von welchen Browsern es unterstützt wird. Und schließlich können Sie über den Inspektor Attribut-/Wert-Paare per Mausklick hinzufügen beziehungsweise manipulieren, also ohne Tipparbeit.

Selector Wizard und Style Checker

Alle, die sich mit dem Formulieren von CSS-Selektoren schwertun, werden Topstyles Selektor Wizard besonders zu schätzen wissen. Das ist ein Assistent, der Ihnen mit Hilfetexten und per Maus auswählbaren Optionen beim Anlegen neuer Selektoren zur Hand geht. Die Funktion finden Sie im Tools-Menü unter New CSS Selector.

Während Sie an Ihrem CSS arbeiten, zeigt Topstyle am unteren Rand eine Vorschau auf die Formatierungen, die sich daraus ergeben. Es empfiehlt sich, über die Dateiauswahl links oberhalb der Vorschau die HTML-Datei auszuwählen, auf die das CSS später angewendet werden soll.

Diese Vorschau können Sie auch mit den Rendering Engines von Internet Explorer, Firefox und Safari betrachten, die zu diesem Zweck in Topstyle integriert wurden. Natürlich gibt es auch eine externe Vorschaufunktion, für die Topstyle das System automatisch nach installierten Browsern durchforstet.

Wer sein Stylesheet nicht nur für die Vorschau nutzen, sondern tatsächlich verlinken will, der verwendet dafür den Style Sheet Link Wizard aus dem Tools-Menü. Ihm kann man einfach einen Stapel von HTML-Dateien übergeben, in die er dann das neue Stylesheet integriert. Bereits vorhandene Stylesheets werden dabei erhalten, lassen sich aber auch automatisiert entfernen.

Zu den Highlights von Topstyle gehört der Style Checker, mit dem Sie Ihren Code auf darin enthaltene Fehler und Probleme durchleuchten können. Bis hin zur Überprüfung, ob verlinkte Background-Grafiken auch tatsächlich existieren, arbeitet der Style Checker ausgesprochen gründlich.

Netbeans IDE

Der Sprung vom reinen Editor hin zu einer integrierten Entwicklungsumgebung (IDE) wie Netbeans IDE ist überlegenswert, wenn Sie komplexere Javascripts (insbesondere AJAX) entwickeln oder mit PHP beziehungsweise einer vergleichbaren Sprache arbeiten. Wo die Stärken von Netbeans liegen wird schnell klar, wenn man es mit dem (sehr guten) Editor Ultraedit vergleicht.

Beide weisen viele Gemeinsamkeiten auf, was Aspekte wie die Verwaltung unterschiedlicher Projekte und grundlegende Funktionen wie Syntax Highlighting, Code Folding und weitere anbetrifft. Netbeans versteht den Code aber auch. Es kann Code automatisch vervollständigen, sobald Sie die ersten Zeichen eines Tags, Befehls oder Ähnlichem tippen und entdeckt syntaktische Fehler schon während der Eingabe.Es berücksichtigt dabei sogar projektspezifische Besonderheiten wie selbstgeschriebene Funktionen und Klassen beziehungsweise Datenbanktabellen- und -feldnamen. Außerdem bietet Netbeans einen leistungsfähigen Debugger, mit dem Sie Code Schritt für Schritt ausführen können. Dabei lässt sich zu jedem beliebigen Zeitpunkt der aktuelle Wert von Variablen anzeigen.

Netbeans und Xampplite installieren

Netbeans ist mit wenigen Mausklicks installiert. Als Erstes spielen Sie eine aktuelle Version des Java Development Kits ein, die Sie hier finden. Anschließend folgt die PHP-Edition, die auf Netbeans.org erhältlich ist.

Bei der Arbeit mit Netbeans profitieren Sie von einem lokal installierten Webserver mit PHP. Wenn Sie den integrierten Debugger einsetzen möchten, ist der Server sogar Pflicht, denn Netbeans greift hier auf die serverseitige PHP-Erweiterung XDebug zu. Unter Windows gelangen Sie am schnellsten an eine solche Lösung, indem Sie das kostenlose Xampplite installieren.