kurz & gut:
Zum Erstellen von Websites helfen Programme - sogenannte HTML-Editoren. Hier wird der HTML Editor Scriptly von Webocton vorgestellt. Eine Freeware mit vielen pfiffigen Hilfen, wie z. B. vervollständigen von HTML-TAGs, Vorschaufunktion und zusätzlich integriertem FTP-Client.

Sehr gut für Einsteiger geeignet. Fortgeschrittene werden das integrierte MDI, Fenstersplitting und Unterstützung für PHP, Java und weitere Programmiersprachen schätzen.

Editor Scriptly von Webocton

Mein Favorit unter den Editoren ist seit Neuestem Scriptly von Webocton. Warum? Dafür gibt es einige Gründe, und glauben Sie mir, nach zahllosen Stunden von Programmierung und Website-Entwicklung wird man anspruchsvoll.

Gründe für Scriptly

  • Code-Completion - Ergänzung der Befehle und deren Attribute (beugt Tippfehlern und schlechtem Gedächtnis vor)
  • MDI - bedeutet, mehrere Fenster können nebeneinander geöffnet werden
  • Fenstersplittung - dieselbe Datei gleichzeitig an 2 unterschiedlichen Stellen anzeigen
  • Projektverwaltung - Websites können bequem in Projekten verwaltet werden
  • FTP-Client mit integriert
  • Sehr leistungsstark und verlässt einen nicht, wenn man von der Erstellung von HTML-Seiten in die Programmierung z. B. mit PHP übergeht
  • Mehrsprachig (zur Zeit deutsch und englisch, ist aber problemlos auf beliebig viele Sprachen erweiterbar)
  • Freeware
  • ... und noch einige Gründe mehr

Scriptly Schritt für Schritt

Nach dem Starten erscheint der "Start-Assistent" von Scriptly. Hier kann man eine zuvor bearbeitet Datei schnell öffnen oder eine neue Datei erstellen. Klickt man auf den Pfeil nach unten, kann man auswählen, welche Art von Datei man erstellen möchte.

Start-Assistent von Scriptly

Wenn beim Start-Assistent nur auf "Programm starten" geklickt wurde, kann man nun im nächsten Schritt über das "Quick-Menü" die gewünschte Aktion ausführen. Entweder eine bestehende Datei öffenen oder über neue "Neue Datei" sich die gewünschte Art von Datei samt Grundgerüst erstellen lassen.

Quick-Menü von Scriptly

Eine andere Art um eine um nun eine neue HTML-Seite zu erstellen: einfach auf das Icon mit dem leeren Blatt klicken (weiter unten mehr zu dem Pfeil für die Auswahl neben diesem Icon)

neue Datei erstellen

Um die TAGs farbig hervorgehoben zu erhalten, den entsprechenden Syntax auswählen:

Highlighting von HTML, PHP, CSS, Javascript, Java und weiteren Sprachen

Jetzt können wir anfangen zu tippen. Und sobald wir einen HTML-TAG anfangen, erhalten wir Vorschläge, wie der TAG ergänzt werden kann, bzw. den END-TAG.

automatische Code-Completion

Wenn die Code-Completion erwünscht ist, einfach die Leertaste drücken und sie wird übernommen.

Die Vorschau starten Sie über das folgende Icon oder über F9.

Vorschau im Browser

Clever an der Vorschau ist, dass die Ausgabegröße des Fensters bequem verändert werden kann - das ist später bei Ihren durchdesignten Seiten wichtiger als bei unserem Beispiel hier.

Vorschau mit verschiedenen Auflösungen

Und nun noch abspeichern:

speichern der Datei

HTML-Grundgerüst automatisch

Scriptly kann beim Erstellen einer neuen Datei Ihnen sofort das Grundgerüst für die HTML-Datei erstellen.

neue Datei erstellen mit Grundgerüst Klicken Sie mit der Maus neben dem Icon mit dem weißen Blatt auf den kleinen Pfeil nach unten. Sie erhalten dann folgende Auswahl mit den verschiedenen Dateitypen.

Wählen Sie dann HTML aus.



Wahl der Dateiart

Sie werden nun gefragt, was alles im Grundgerüst verankert sein soll.

Grundgerüst wird erstellt und Vorgaben können eingetragen werden

Das Grundgerüst steht und Sie können gleich ans Eingemachte.

HTML Grundgerüst

Weitere Anleitungen mit Feinheiten des Editors folgen.

Mögliche HTML-Attribute vorschlagen lassen

HTML-Attribute vorschlagen lassen funktioniert, wenn der Cursor sich innerhalb eines TAGs befindet und dann die Tastenkombination STRG und die Leertaste gedrückt wird. Alle möglichen Attribute werden vorgeschlagen.

Code-Completion bei Attributen

WYSIWYG auch möglich

Nicht verschwiegen werden soll die WYSIWYG-Variante. Dahin kann jederzeit vom HTML-Code in diese Bearbeitungsmöglichkeit gewechselt werden. Dazu einfach im Fußbereich WYSIWYG auswählen.

In der Natur der Sache liegt es, das der über die WYSIWYG-Variante erzeugte HTML-Code nicht so schön ist - zum Lernen aber eine geschickte Variante. Einfach mal damit spielen.

Automatische Ersetzungen

Als Hilfe (teilweise auch für Einsteiger verwirrend) sind die automatischen Ersetzungen bzw. Ergänzungen. Wird ein Umlaut (öäüß) eingegeben, wird automatisch der entsprechende HMTL-Code eingefügt.

Wird eine öffnende Klammer eingegeben, erscheint automatisch zusätzlich die schließende Klammer. Auch bei einem Anführungszeichen – das ist für das Programmieren sehr hilfreich, da man meistens genau das benötigt.

Sollte das stören, können Sie jederzeit über Optionen diese Ersetzungen deaktivieren. Zu finden unter dem Menü Optionen -> Allgemein und dort der Reiter "Ersetzungsfunktionen" (oder über den Shortcut Umschalt + STRG + o).

automatische Ersetzungen und Erweiterungen konfigurieren

zusätzlich Informationen, Features und Explorer einblenden

Die Bereiche können bequem per Funktionstasten aus- und wieder eingeblendet werden (natürlich auch über das Menü).

zusätzlich Informationen, Features und Explorer einblenden

Der rechte Bereich mit Features wird mit F6 aus- und eingeblendet, der Explorer mit F7 und das Informationsfenster mit F8.

Je nach dem, was man braucht kann man die zusätzlichen Fenster einblenden - öfters braucht man auch nur viel Platz zum Arbeiten und keine weiteren Fenster.

Präsentation von Scriptly als Flash-Film

Von einer älteren Version von Scriptly gibt es zum Ansehen der verschiedenen Highlights eine Präsentation von Scriptly als Flash-Film

Download von Scriptly

Den Editor erhalten Sie unter http://www.scriptly.de

Dort gibt es vom engagierten Autor auch ein Forum rund um den Editor.

vorheriges Kapitel: html Editor
nächstes Kapitel: SuperHTML Web Studio
html EditorSeitenanfangSuperHTML Web Studio
eBook HTML-Seminar.de
del.icio.usMister Wong         html EditorSeitenanfangSuperHTML Web Studio
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de