Website Editoren: Programme zum Homepage erstellen (Software)
Mit Website-Editoren lassen sich Webseiten in einer grafischen Oberfläche ohne Programmierkenntnisse gestalten. Elemente wie Texte, Bilder und Tabellen können mit der Maus per Drag & Drop platziert und ausgerichtet werden, ähnlich der Arbeit mit einem Bildbearbeitungsprogramm.
KompoZer
Der WYSIWYG-Editor KompoZer hat seine Ursprünge bereits in den Kindertagen des Internets. Damals programmierte das Unternehmen Netscape mit dem Netscape Communicator den zu dieser Zeit bekanntesten Browser im Internet, der ab 1996 kommerziell betrieben wurde. Im Softwarepaket war auch ein einfacher HTML-Editor für das Erstellen einer Homepage enthalten. Ab 1998 wurde der Browser kostenfrei angeboten und die Entwicklung des Editors ausgelagert. Der HTML-Editor wurde fortan unter dem Namen Nvu vertrieben und erfreute sich unter Webdesignern großer Popularität. Es entwickelte sich rasch eine große Nutzergemeinde, die Erweiterungen für die Software programmierte und kostenlos zur Verfügung stellte. Als die Entwicklung von Nvu schließlich eingestellt wurde, nahm sich das Mozilla-Projekt der Software an. Unter dem Namen KompoZer ist der Editor heute kostenfrei für die Betriebssysteme Windows, Mac OS und Linux erhältlich.
Wie erstelle ich eine Webseite mit KompoZer? Als WYSIWYG-Editor bietet KompoZer, die das Erstellen einer eigenen Homepage auch für Einsteiger einfach machen. Theoretisch müssen überhaupt Kenntnisse in HTML und CSS vorhanden werden. Das Layout der Webseite wird einfach per Drag & Drop zusammengeklickt. Texte können wie in einem Textverarbeitungsprogramm frei formatiert werden, ohne die entsprechenden HTML-Tags einfügen zu müssen, darum kümmert sich die Software. Um das Erstellen einer Internetseite noch weiter zu vereinfachen, werden Templates bereit gestellt, die mit KompoZer individuell angepasst werden können. KompoZer legt dabei großen Wert darauf, dass die erstellten Seiten auf allen bekannten Browsern zuverlässig angezeigt werden.
Das Programm verfügt zudem über eine Bibliothek, die alle Elemente enthält, die auf einer Homepage eingesetzt werden können. So lassen sich etwa vorgefertigte Formulare und Tabellen einfach per Drag & Drop aus der Bibliothek auf die fertige Seite setzen. Auch ein FTP-Client ist enthalten, mit dem die fertige Seite bequem auf den Webspace geladen werden kann. KompoZer kümmert sich dabei selbstständig um die richtige Ordnerstruktur. Nutzer, die bereits über Vorkenntnisse in HTML und CSS verfügen, können mit einem Klick zwischen der grafischen Gestaltung und dem Quellcode wechseln. Die Änderungen am Quellcode werden dann sofort für die fertige Seite übernommen. Das Erstellen einer Webpage funktioniert mit KompoZer also in beide Richtungen.
Die Nutzer von KompoZer profitieren nicht nur von der Tatsache, dass das Programm völlig kostenlos angeboten wird, sondern auch von der Aktivität der Nutzergemeinschaft. Ständig wird der Funktionsumfang der Software durch Plugins erweitert, das Programm kann hierdurch noch viel besser an die eigenen Ansprüche angepasst werden. Mit Hilfe dieser Plugins ist es zum Beispiel möglich, den Editor in KompoZer mit einem beliebigen anderen Texteditor zu ersetzen. Der HTML-Quellcode kann also zum Beispiel in Word bearbeitet werden und wird vom Plugin dann nahtlos in KompoZer integriert.
KompoZer ist also ein guter Einstieg in die Welt des Webdesigns. Auf der offiziellen Homepage des Programms steht zudem eine umfangreiche Dokumentation zum Download bereit, die auch die Grundlagen von HTML und CSS vermittelt. Zudem werden Einsteiger im Forum fündig, wenn sie Fragen zum allgemeinen Webdesign oder der Verwendung von KompoZer haben.
CKEditor
Der kostenlose CKEditor ist der meistverwendete Editor für das XHTML-Format, eine Erweiterung des typischen HTML. Vor allem Blogger nutzen den CKEditor, um die Texte auf ihren Blogs zu formatieren. Fast alle Blog- und Content Management Systeme nutzen den CKEditor für die Textverarbeitung. Auf Systemen, die auf einen anderen Editor setzen, kann dieser optional als Erweiterung installiert werden.
In den ersten Jahren nach ihrer Veröffentlichung wurde die Software noch unter dem Namen FCKEditor vertrieben, der Name setzt sich dabei aus den Initialen des Entwicklers Frederico Caldeira Knappen zusammen. Allerdings wird die Buchstabenkombination FCK im Internet häufig als Abkürzung für das englische Schimpfwort „Fuck“ verwendet, was schließlich zur Umbenennung in CKEditor führte.
Im Gegensatz zu vielen anderen WYSIWYG-Editoren erfolgt das Erstellen einer Webseite mit dem CKEditor nicht anhand des HTML-Quellcodes oder grafisch sondern eng am Text. Im Prinzip handelt es sich um einen Texteditor, der speziell für Webtexte entwickelt wurde. Der Nutzer kann den Text über Schaltflächen frei formatieren, verlinken sowie Bilder einfügen und positionieren. Da es bei der Übernahme von Text aus Word in andere Editoren oft zu Darstellungsfehlern kommt, verfügt der CKEditor über eine spezielle Wordschnittstelle. Der Text kann nun einfach von Word in den CKEditor kopiert werden, die Formatierung bleibt dabei erhalten. Der Nutzer hat dabei die Wahl, die Texte entweder im Quellcode zu bearbeiten, wobei sich die HTML-Tags über die Buttons bequem und ohne Vorkenntnisse einfügen lassen, oder die WYSIWYG-Oberfläche zu nutzen. Hierbei wird der Text so angezeigt, wie er später bei einer Veröffentlichung im Netz aussehen wird.
Mit knapp 8 Millionen Downloads ist der CKEditor einer der erfolgreichsten kostenlosen Webeditoren überhaupt. Neben der Open Source Variante wird der Editor auch kommerziell an Unternehmen vertrieben, die den CKEditor in ihren Produkten verwenden. Zu den Kunden gehören dabei unter anderem die Softwareriesen Adobe und Oracle.
Dank seiner hohen Popularität und der Verwendung des Open Source Modells werden die Nutzer in die Weiterentwicklung des CKEditors eingebunden. Das führt dazu, dass sich der Funktionsumfang der Software durch Plugins erheblich erweitern lässt. So werden zum Beispiel Plugins zur Verfügung gestellt, mit denen Webformulare in den Text eingebunden werden können. Auch die Schaltflächen, die im CKEditor für die Formatierung des Textes genutzt werden, lassen sich nach Belieben anpassen.
Auch bei der Gestaltung der Nutzeroberfläche bietet der CKEditor dem Nutzer viele Möglichkeiten, diese an den eigenen Geschmack anzupassen. Dies geschieht mit der Hilfe von Skins, die sowohl auf der offiziellen Internetseite als auch an anderen Stellen im Netz kostenlos zum Download angeboten werden. Darüber hinaus stehen auf der Homepage nicht nur ausführliche Anleitungen zur Bedienung des CKEditor zur Verfügung, sondern auch Tutorials zur Programmierung eigener Plugins und Skins. Zusätzlich hat der Nutzer über den sogenannten CKBuilder die Möglichkeit, sich sein individuelles Paket aus CKEditor, Plugins und Skins vor dem Download zusammenzustellen. Die mühselige Erweiterung der Software nach der Installation entfällt also.
Mit diesen Funktionen ist der CKEditor vor allem für Nutzer, die auf ihrer Webseite hauptsächlich Text und Bilder anbieten wollen, eine gute Alternative. Der CKEditor lässt sich auch gut mit anderen Editoren kombinieren. So kann eine Homepage beispielsweise zunächst in einem anderen Editor erstellt und der CKEditor dann für die Formatierung von Kommentaren in die Webseite eingebunden werden.
Namo WebEditor
Der Namo Web Editor gehört zu den klassischen WYSIWYG-Editoren und wird bereits seit 1997 entwickelt. Die Software wird kommerziell vertrieben, die günstige Preisgestaltung richtet sich jedoch hauptsächlich an Privatanwender, die in ihrem HTML-Editor nicht auf professionelle Features verzichten wollen. Zusätzlich wird eine ältere Version des Namo WebEditor kostenlos angeboten.
Das Herzstück des Namo WebEditor ist seine WYSIWYG-Umgebung. Die Software war eines der ersten Programme, mit dem sich Interseitenseiten nicht nur über den HTML-Quellcode, sondern auch grafisch über Drag & Drop von HTML-Elementen in der Layout-Ansicht erstellen ließen. Per Knopfdruck kann der Nutzer dabei zwischen der HTML- und Layoutansicht wechseln. Bei der Arbeit am Quellcode werden alle HTML-Tags grafisch hervorgehoben, was zu einer übersichtlichen Trennung von HTML-Elementen und Inhalten führt. Die Layoutansicht stellt die eigene Homepage im Namo WebEditor dagegen so dar, wie sie später im Internet durch einen Browser angezeigt wird. Der Nutzer kann die einzelnen Elemente mit der Maus frei verschieben, ausrichten, hinzufügen und entfernen.
Zu den weiteren Features gehört eine Projektübersicht. Nutzer, die den Namo Web Editor für mehrere Internetseiten nutzen, bekommen die verschiedenen Projekte hier übersichtlich dargestellt. Auch die für die einzelnen Projekte verwendeten Bilder werden in einer zentralen Bildergalerie gespeichert und lassen sich so ohne umständliches Kopieren in den verschiedenen Seiten verwenden.
Darüber hinaus war der Namo WebEditor einer der ersten HTML-Editoren, der das einfache Einfügen von div-Tags erlaubte, die zur Definition von Ebenen in einer Webseite genutzt werden. Auch bei der Gestaltung der Seite durch CSS wird der Nutzer von der Software unterstützt. Ältere Projekte können in den Namo WebEditor importiert werden. Das ist selbst dann möglich, wenn diese mit einem anderen Editor erstellt wurden.
Seine attraktive Preisgestaltung macht den Namo Web Editor vor allem bei Nutzern beliebt, die ihre ersten Schritte im Webdesign machen wollen. Für diese Zielgruppe enthält der Editor ein Paket von insgesamt über 200 Homepage Vorlagen, die über den WYSIWYG-Editor individuell verändert und angepasst werden können. Darüber hinaus steht eine umfangreiche Bibliothek bereits vorgefertigter HTML-Elemente zur Verfügung. Hierin finden sich unter anderem Web-Formulare, Java-Skripte und andere häufig im Internet verwendete Elemente. Zusätzlich verfügt der Editor über einen Quiz-Generator, mit dem sich individuelle Quizspiele und Umfragen erstellen lassen. Solche interaktiven Elemente einer Webseite sind in der Regel sehr publikumswirksam und erhöhen die Besucheranzahl auf der Homepage.
Zusätzlich zur bereits erwähnten älteren und kostenfreien Version hat der Nutzer die Möglichkeit, die aktuelle Version des Namo WebEditor unverbindlich und kostenlos als Trial zu testen. Gerade für Anfänger bietet der Namo WebEditor einige sehr nützliche Funktionen und Hilfestellung, auch wenn professionelle Features wie etwa ein integrierter FTP-Client, fehlen. Besonders attraktiv dürfte der Namo WebEditor jedoch für Blogger sein, da einige der bekanntesten Blogsysteme von der Software unterstützt werden. Der Editor kann dann genutzt werden, um die einzelnen Blogbeiträge zu schreiben und zu formatieren. Die Inhalte werden dann mit einem einzigen Klick in die unterstützten Blogging-Plattformen übertragen.
Zum Namo WebEditor-Testbericht »
Microsoft Expression Web
Microsoft Expression Web ist der offizielle Nachfolger der Webdesign-Software Frontpage. Im Gegensatz zu vielen anderen HTML-Editoren handelt es sich um eine kommerzielle Software, die zu einem hohen Preis vertrieben wird, entsprechend hoch ist jedoch auch der Funktionsumfang. Insbesondere werden nicht nur HTML und CSS, sondern auch die Programmiersprachen PHP und Java unterstützt. Microsoft Expression Web richtet sich deshalb in erster Linie an professionelle Webentwickler.
Auch Microsoft Expression Web basiert auf einer WYSIWYG-Engine, deren Benutzeroberfläche sehr funktionsreich aber dennoch übersichtlich gestaltet wurde. Der Nutzer hat die Wahl zwischen einer Ansicht des HTML-Quellcodes sowie einer Layoutansicht. Bei der Arbeit am Quellcode errechnet die Software in Echtzeit das Ergebnis der Seite, wie sie später im Internet dargestellt wird. Umgekehrt wird bei der Nutzung der Layoutansicht automatisch der dazu passende Quellcode berechnet.
Für die Nutzung von CSS stehen in Microsoft Expression Net sehr viele nützliche Funktionen zur Verfügung. So werden etwa die passenden CSS-Dateien aus dem grafisch erstellten Layout der Seite berechnet, zudem können verschiedene CSS-Dateien per Drag & Drop auf eine Internetseite angewendet werden, um alternative Layouts zu testen.
Bei der Entwicklung von Microsoft Expression Web wurde auf die Einhaltung der Standards geachtet, die vom World Wide Web Consortium festgelegt wurden. Hierdurch wird eine Kompatibilität der mit Microsoft Expression Web erstellten Seiten für alle Browser gewährleistet. Über die Engine der Software können die verschiedenen Browser getestet werden. Zusätzlich ermöglicht die Funktion Super Preview ein Übereinanderlegen der Darstellungen in den verschiedenen Browsern. Dadurch lassen sich selbst minimale Unterschiede in der Darstellung schnell ausfindig machen und korrigieren. Weitere Funktionen erlauben das Erstellen von barrierefreien Webseiten, erleichtern also die Programmierung von Internetseiten für behinderte Nutzer.
Darüber hinaus bietet Microsoft Expression Web dem Nutzer eine Reihe von Elementen, mit denen die Interaktivität der Homepage gefördert werden kann. Hierzu gehören vor allem die Formulare, die mit wenigen Klicks in eine Seite eingefügt werden können, und dem Besucher der Homepage die Möglichkeit geben, mit dem Betreiber per E-Mail in Kontakt zu treten. Optional können auch Funktionen in die Seite eingefügt werden, mit denen sich diese Formulare ausdrucken lassen.
Wie bereits erwähnt, geht Microsoft Expression Web in seinem Funktionsumfang weit über das Programm üblicher und kostenloser HTML-Editoren hinaus. Vor allem die Unterstützung der Programmiersprache PHP hebt die Software von den Angeboten für Einsteiger ab. Mit PHP können dynamische Programme für Webseiten erstellt werden, Microsoft Expression Web bietet hierfür eine vollständige Entwicklerumgebung.
Die fertigen Seiten werden dann von Microsoft Expression Web über die integrierte FTP-Schnittstelle auf den Webserver geladen und sind nun im Internet verfügbar. Diese Funktion unterstützt nicht nur mit Microsoft Expression Web erstellte Projekte. Auch Webseiten, die mit den Produkten anderer Hersteller produziert wurden, können in Microsoft Expression Web importiert, bearbeitet und veröffentlicht werden. Diese Funktionen machen Microsoft Expression Web zu einem effektiven Arbeitsmittel für professionelle Webentwickler, die neben einem reinen HTML-Editor auch eine Arbeitsumgebung für die PHP-Programmierung benötigen. Zwar werden sich wohl auch Einsteiger in der übersichtlichen Benutzeroberfläche schnell zurecht finden, diese dürften vom vergleichsweise hohen Preis der Software jedoch eher abgeschreckt werden.
Zum Expression Web-Testbericht »
Nachfolger 1: Microsoft WebMatrix
Nachfolger 2: Microsoft Visual Studio Express / Community Edition
Dreamweaver
Dreamweaver ist einer der bekanntesten WYSIWYG-Editoren. Vor allem seit der Übernahme der Software durch Adobe erfreut sich der Webeditor vor allem bei professionellen Anwendern hoher Popularität. Mit seinem vergleichsweise hohen Preis, dem hohen Funktionsumfang und einer recht komplexen Bedienung, die eine gewisse Einarbeitungszeit erfordert, ist Dreamweaver für Einsteiger im Bereich des Webdesigns jedoch eher nicht geeignet.
Bei der Entwicklung von Dreamweaver wurde großen Wert auf die Erstellung von sauberem HTML-Code gelegt, der von allen gängigen Browsern fehlerlos interpretiert werden kann. Es ist auch möglich, mit anderen Editoren erstellte Projekte in Dreamweaver zu importieren und darin zu bearbeiten. In diesem Fall nimmt Dreamweaver nur die nötigsten Änderungen am Code vor, ohne Kompatibilitätsprobleme zu verursachen.
Wie für WYSIWYG-Editoren üblich, findet die Entwicklung einer Webseite in Dreamweaver auf zwei verschiedene Arten statt. Einerseits verfügt die Software über alle Funktionen eines HTML-Editors, stellt also die HTML-Elemente und Tags farblich hervorgehoben dar, korrigiert Fehler wie versehentlich offen gelassene Tags und bietet eine Funktion zur Auto-Vervollständigung. Zusätzlich kann die Homepage auch intuitiv in der Layoutansicht gestaltet werden. So lassen sich etwa wie in einem Bildbearbeitungsprogramm Textfelder einzeichnen, Bilder und Grafiken können ebenfalls mit der Maus durch Ziehen vergrößert und verkleinert werden, sonstige Elemente werden einfach per Drag & Drop in die Seite eingefügt.
Was Dreamweaver deutlich von der Konkurrenz abhebt, ist die seit der Version CS 5.5 integrierte Funktion PhoneGap, mit der sich Apps für Smartphones und Tablets mit den Betriebssystemen Android und iOS entwickeln lassen. Auch für diese Funktion stehen die Möglichkeiten der WYSIWYG-Entwicklung zur Verfügung. Zusätzlich bietet Adobe mit der Smartphone-App Adobe Proto die Möglichkeit, das Grunddesign von Webseiten intuitiv auf Smartphones und Tablets zu entwickeln. Diese Designs werden dann als Archivdatei exportiert, können anschließend in Dreamweaver importiert und dort bearbeitet und fertig gestellt werden.
Da Dreamweaver als Bestandteil der meisten Adobe Suiten mitgeliefert wird, kommt das Programm auf eine sehr hohe Verbreitung unter Webdesignern und -Entwicklern. Wer also ohnehin über eine Lizenz der Software verfügt, sollte sich die Zeit nehmen, den enormen Funktionsumfang von Dreamweaver kennen zu lernen. Für Anfänger, die zunächst einmal die Grundlagen der Entwicklung von Webseiten verstehen wollen, sind die kostenlosen Angebote wohl empfehlenswerter.
WebSite X5
Die Software WebSite X5 besitzt eine grafische Nutzeroberfläche und funktioniert ebenfalls nach dem „What you see is what you get“-Prinzip, weshalb auch Einsteiger ohne Programmierkenntnisse sie verwenden können.
Das Programm enthält mehrere hundert Design-Vorlagen, aus denen sich der Nutzer das Passende aussuchen kann. Alle Templates sind responsive gestaltet und passen sich daher der Bildschirmgröße des Betrachters an. Mit wenigen Klicks lässt sich die Vorlage auswählen und personalisieren. Fügen Sie eigene Texte, Fotos, Formulare, Videos und andere Mediendateien einfach per Drag-and-Drop-Funktion ein. Jedes Projekt lässt sich online und offline bearbeiten. Ein FTP-Client ist in WebSite X5 integriert, so dass Sie Ihre Website direkt über die Software ins Internet stellen können. Angebote zur Suchmaschinenoptimierung runden das Programm ab.
Die Software ist nur mit Windows kompatibel. Um sie auf MAC OSX-Geräten verwenden zu können, benötigen Sie zunächst eine Anwendung wie CrossOver oder VMWare zur Virtualisierung. Interessierte können zunächst eine Demo-Version von WebSite X5 kostenlos herunterladen. Damit lassen sich jedoch nur Projekte mit bis zu zehn Seiten erstellen. Diese können gespeichert, aber nicht exportiert werden. Die kostenpflichtige Vollversion ist in drei Ausführungen mit unterschiedlichem Funktionsumfang erhältlich: Die mit Abstand günstigste ist die Version „Start“ mit nur 50 Vorlagen und ohne responsive Design. Zudem gibt es „Evolution“ für Freischaffende und „Professional“, die teuerste Version, für Unternehmen und Agenturen.