CSS-Editor Topstyle

1. Editoren für Web-Entwickler
2. CSS-Editor Topstyle
3. Netbeans IDE
4. Netbeans IDE in der Praxis
5. Zen Coding

Grundsätzlich können Sie jeden Ultraedit-Bereich in einer solchen Leiste verschwinden lassen. Probieren Sie es mit dem Ausgabefenster aus. Klicken Sie auf die kleine Pfeilspitze neben der Beschriftung Ausgabefenster und wählen Sie Automatisch im Hintergrund aus dem Kontextmenü.

Schon versteckt sich dieser Bereich in eine neue Leiste am unteren Fensterrand. Wenn Sie auch das SSH-Fenster dort unterbringen, gewinnen Sie mehr Platz für die Darstellung des Codes. Anschließend speichern Sie die Umgebung über Ansicht/Umgebungen ab.

Projektmanagement

Ultraedit bringt eine Projektverwaltungsfunktion mit, die Sie im gleichnamigen Menü finden. Deren Hauptnutzen ist es, in verschiedenen Ordnern (auch im Netzwerk und auf FTP-Servern) gespeicherte Dateien an einer zentralen Stelle, nämlich im Datei-Explorer, verfügbar zu machen.

Insbesondere Skript-Entwickler profitieren davon, wenn sie beispielsweise den Ordner mit Ihren regelmäßig verwendeten Code-Bibliotheken über die Projektverwaltung in verschiedene Projekte integrieren. Sie können die Bibliotheken dann trotz dezentraler Verwendung an einer zentralen Stelle pflegen und weiterentwicklen.

© Archiv

Aber auch wenn Sie nur HTML und CSS codieren, ist Ultraedits Projektmanagement nützlich. So können Sie zum Beispiel mit Suchen und Ersetzen im Projekt eine Änderung in allen zum Projekt gehörenden Dateien vornehmen.

Außerdem können Sie für jedes Projekt individuelle, externe Tools konfigurieren - vom Zeige in Safari-Knopf bis hin zu Batch-Scripts, die externe Validatoren, Upload-Funktionen und andere. aufrufen. Über die Tools- Funktion können Sie Ultraedit buchstäblich Flügel verleihen. Einen Einstieg finden Sie hier und im Forum.

Code bearbeiten

Wenn es dann an die eigentliche Bearbeitung von HTML- oder Skript-Code geht, fährt Ultraedit das volle Arsenal dessen auf, was einen guten Editor ausmacht. Oben links auf Neue Datei klicken, dann rechts in der Textbaustein-Liste auf HTML Header klicken und schon steht das Grundgerüst für eine HTML-Seite.

Standardmäßig wird der Doctype auf XHTML 1.0 Transitional gesetzt. Unter Extras/Textbausteine anzeigen können Sie aber auch andere HTMLGerüste und weitere beliebige Bausteine definieren.

Sobald Sie die Datei mit der entsprechenden Dateiendung gespeichert oder unter Ansicht/Ansicht als den Dateityp ausgewählt haben, wird das Syntax-Highlighting aktiv. Ultraedit hebt dann erkannte HTML-Tags und -Attribute farblich hervor.

Syntax-Highlighting wird für HTML, CSS und alle wichtigen Skriptsprachen unterstützt und lässt sich zudem individuell konfigurieren. Ebenfalls der Übersichtlichkeit dient das Code-Folding: Ultraedit erkennt Code-Blöcke wie etwa eine HTML-Tabelle oder eine PHP-Funktion. Über die Baumstruktur rechts neben der Zeilennummerierung können Sie solche Blöcke ein- und ausklappen.

Zwei Einstellungen bieten sich noch an: Unter Extras/Optionen/Editor/Zeilenumbruch/Tabulator setzen Sie ein Häkchen bei Leerzeichen anstelle von Tabulatoren verwenden und tragen bei Leerzeichen für Einzug eine 4 ein. Schon verwendet Ultraedit die üblichen vier Leerzeichen, wenn Sie Code per Tab-Taste einrücken. Aktivieren Sie außerdem Umbruch standardmäßig für jede Datei einschalten, damit der ganze Code immer im Fenster sichtbar ist. Diese Option wird aber erst aktiv, wenn Sie bereits geöffnete Dateien neu laden.

Funktionsvielfalt

Ultraedit hält noch unglaublich viele weitere Funktionen bereit, die Ihre Arbeit erleichtern. So gibt es eine Lesezeichenverwaltung, mit der Sie rasch zu beliebigen Stellen im Code zurückfinden. Über die Zwischenablagen-Historie greifen Sie auf die zuletzt in das Clipboard kopierte Code-Fragmente zu. Optional lässt sich auch der HTML-Validator CSE integrieren, der Code offline validiert.

CSS-Editor Topstyle

Wer viel mit CSS arbeitet, der wird einen entsprechend optimierten Editor einsetzen wollen. Unter Windows ist Topstyle seit Jahren der Maßstab, an dem sich CSS-Editoren messen lassen müssen. Das rund 80 USDollar teure, englischsprachige Programm macht sich auch als HTML-Editor nützlich. Topstyle ist in einer Demo-Version hier verfügbar. Im Netz kursiert auch noch die kostenlose Variante der Vorgängerversion, Topstyle Lite 3.5.

Am besten legen Sie nach der Installation und dem ersten Programmstart ein Stylesheet an, das Sie zu Übungszwecken nutzen. Dann tippen Sie einen Selektor ein, zum Beispiel body, gefolgt von einem Leerzeichen und der öffnenden, geschweiften Klammer.