1997 veröffentlichte Macromedia die erste Version von Dreamweaver zunächst noch ausschließlich für das Apple-Betriebssystem Mac OS 8. Erst knapp 3 Monate später – mit Version 1.2 – implementierte man die Unterstützung für Microsoft-Windows-Systeme. 10 Jahre später übernahm die Softwareschmiede Adobe die Webentwicklungssoftware und fügte sie seiner Creative Suite (die mittlerweile von der Creative Cloud abgelöst worden ist) als Ersatz für den bis dahin enthaltenen Editor GoLive hinzu. Wer die sehr umfangreiche Applikation zur Erstellung und Gestaltung von responsiven Webanwendungen nutzen möchte, muss also entweder das angebotene Einzelprodukt-Abonnement abschließen oder das Creative-Cloud-Komplettpaket mieten, weshalb in erster Linie professionelle Anwender mit der Software arbeiten .
Dieser Ratgeber erläutert eingangs kurz die Besonderheiten des Adobe-Programms, bevor er im Anschluss interessante, größtenteils kostenlose Alternativen zu Dreamweaver präsentiert.
Dreamweaver punktet mit seiner für Adobe typischen Oberfläche, die Usern von Photoshop, InDesign, Illustrator und Co. bestens bekannt ist. Der Funktionsumfang des HTML-Editors, der sich in Sachen WYSIWYG als das Maß aller Dinge präsentiert, ist insbesondere seit der Veröffentlichung der Creative Cloud erheblich gewachsen, was das Code-Schreiben zum Kinderspiel macht. So ist es beispielsweise möglich, sämtliche Änderungen in Echtzeitzu begutachten, ohne die Seite neu laden zu müssen, oder CSS-Code dank eines Inline-Editors direkt innerhalb der HTML-Datei zu bearbeiten. Ferner hilft die implementierte Coding-Engine dabei, sauberen Code zu schreiben, indem Snippets per Emmet-Unterstützung automatisch vervollständigt, automatische Einzüge erzeugt, und zusammengehörende Elemente farblich gekennzeichnet werden. Darüber hinaus bietet Dreamweaver folgende Features:
Wer Zugriff auf alle Produkte der Creative Cloud hat und im Umgang mit Dreamweaver erprobt ist, macht mit der Software von Adobe nicht viel falsch. Für Entwickler mit begrenztem Budget gibt es jedoch gute Dreamweaver-Alternativen, die kostenlos nutzbar sind. 5 interessante Vertreter stellen wir Ihnen in den folgenden Abschnitten vor. Dabei geht es einerseits darum, deren Features und Besonderheiten zu präsentieren. Andererseits sollen auch die Unterschiede und Gemeinsamkeiten zu Adobes Software beleuchtet und die Nutzbarkeit der verschiedenen Tools unter die Lupe genommen werden.
Der Composer/Nvu-Nachfolger BlueGriffon von Disruptive Innovations nutzt die Rendering-Engine Gecko, die in C++ geschrieben ist und unter anderem im Webbrowser Firefox zum Einsatz kommt, als Basis für den implementierten WYSIWYG-Editor. Dieser macht es möglich, HTML4-, HTML5- sowie XHTML-Seiten zu erstellen und zu editieren, die Sie bereits während des Schaffensprozesses in einer Vorschauversion begutachten können. Die Nutzeroberfläche ist in 20 Sprachen verfügbar, darunter unter anderem Deutsch, Spanisch, Englisch und Französisch. BlueGriffon läuft unter neueren Windows- (ab 7) und macOS-Systemen (ab 10.8) sowie – im Gegensatz zu Dreamweaver – auch unter der Linux-Distribution Ubuntu (ab 16.04). Ferner zeichnen den Web-Editor folgende Features aus:
Zusätzlich zu diesen Funktionen, die Sie in der Freeware-Variante von BlueGriffon kostenfrei nutzen können, gibt es eine Reihe erstklassiger Zusatzkomponenten, die Sie durch den Erwerb einer einmalig kostenpflichtigen Lizenz erhalten: Unter anderem enthält die Kaufversion einen verbesserten CSS-Editor inklusive visuellem CSS-Selektoren-Editor, einen Toolkit-Manager zum Einfügen mehrerer JavaScript- und CSS-Dateien mit nur einem einzigen Klick sowie Zugriff auf über 2.500 einsatzbereite Templates. Die Open-Source-Komponenten von BlueGriffon finden Sie auf GitHub oder alternativ auf der offiziellen Homepage. Auf letztgenannter können Sie auch die kostenpflichtige Lizenz erwerben, wenn Sie an den zusätzlichen Features interessiert sind.
| Vorteile | Nachteile |
|---|---|
| ✔ Beherrscht HTML5 | ✘ Fehlende Unterstützung von PHP |
| ✔ Eigener SVG-Editor | ✘ Komplexe Nutzeroberfläche |
| ✔ Hohe Kompatibilität | |
| ✔ Viele Erweiterungen verfügbar |
Auch die Webentwicklungssoftware KompoZer ist aus dem Mozilla-Projekt Nvu hervorgegangen und basiert daher ebenfalls auf der Gecko-Engine. Zunächst handelte es sich bei KompoZer um kleine Optimierungen der Nvu-Software, bis das Programm schließlich als eigenständiger Web-Editor unter den freien Lizenzen GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License) und MPL (Mozilla Public License) veröffentlicht wurde. Das Team aus dem Mozilla-Umfeld hat die Weiterentwicklung 2010 gestoppt, dennoch ist die Software auf allen gängigen Windows- und macOS-Systemen sowie Ubuntu (ab Version 14.04) nutzbar. Für KompoZer existieren mittlerweile über 20 verschiedene Sprachpakete – unter anderem Deutsch, Englisch, Französisch, Italienisch und Spanisch.
Auch wenn KompoZer nicht zu den Dreamweaver-Alternativen zählt, die hinsichtlich Funktionsumfang und Komplexität mit dem Adobe-Programm mithalten können, bietet die Open-Source-Anwendung seinen Nutzern dennoch einige Features, mit deren Hilfe sich professionell designte Webseiten gestalten lassen:
Zusätzlich gibt es für das Programm eine Handvoll nützlicher Erweiterungen – wie zum Beispiel einen Link-Checker, mit dessen Hilfe Sie die Gültigkeit eingebundener Verlinkungen überprüfen können. Als mögliche Adobe-Dreamweaver-Alternative lässt KompoZer jedoch bis heute sowohl die Unterstützung von PHP als auch den Support neuerer Webstandards wie CSS3 und HTML5 vermissen. Alle Download-Versionen für die verschiedenen Plattformen sowie eine ausführliche Dokumentation finden Sie auf der offiziellen Projekt-Website. Dort haben Sie außerdem die Möglichkeit, entdeckte Programmfehler zu melden oder Vorschläge für neue Funktionen einzureichen.
| Vorteile | Nachteile |
|---|---|
| ✔ Schnell arbeitender WYSIWYG-Editor mit Vorschaufunktion | ✘ Fehlende Unterstützung von PHP |
| ✔ In über 20 Sprachen verfügbar | ✘ Weiterentwicklung gestoppt |
| ✔ Programmdateien umfassen nur wenige MB | ✘ Supportet moderne Standards wie HTML5 oder CSS3 nicht |
Bei Brackets handelt es sich um eine Open-Source-Alternative zu Dreamweaver, die Adobe im Jahr 2011 selbst als Community-Projekt ins Leben gerufen hat. Im offiziellen GitHub-Repository findet man heute mehr als 5500 Forks der MIT-lizenzierten Software, die auf HTML, CSS und JavaScript aufbaut. Der Webeditor ist sowohl für Windows und Mac als auch für Linux (Ubuntu und Debian) verfügbar, wobei die Linux-Varianten nicht die komplette Funktionspalette bieten. Brackets läuft auf Grundlage der JavaScript-Laufzeitumgebung Node.js und kann durch zahlreiche Erweiterungen ausgebaut werden – unter anderem durch einen WYSIWYG-Editor, der nicht in der Standardausführung enthalten ist.
In der Dreamweaver-Alternative sehen Sie die Vorschau Ihres Codes standardmäßig also nicht direkt im Programm. Sie haben allerdings die Möglichkeit, das vorläufige Ergebnis Ihres Webprojekts jederzeit in Google Chrome zu betrachten. Hierfür müssen Sie jedoch den Internetbrowser zunächst ebenfalls installieren. Drei elementare Features heben die Entwickler von Brackets für den modernen Webeditor hervor:
Brackets profitiert von der bereits angesprochenen Erweiterbarkeit vor allem aufgrund des großen Engagements der Community – nahezu wöchentlich erscheinen neue Plug-ins. Besonders beliebt sind unter anderem der W3C-Validator, das Emmet-Plug-in sowie Beautify, ein Tool zur Optimierung des HTML-, JavaScript- und CSS-Codes. Die einfache und vielseitige Ausbaumöglichkeit der Entwicklungsplattform macht Brackets zweifelsfrei zu einer der besten Dreamweaver-Alternativen.
| Vorteile | Nachteile |
|---|---|
| ✔ Permanente Weiterentwicklung durch die Community | ✘ Fehlende Unterstützung von PHP |
| ✔ Unterstützung von CSS-Präprozessoren | ✘ Eingeschränkte Funktionen in den Linux-Versionen |
| ✔ Inline-Editoren für CSS und JavaScript | ✘ WYSIWYG-Interface nur per Erweiterung verfügbar |
Aptana Studio ist die freie, integrierte Entwicklungsumgebung der Firma Aptana Inc. Die Plattform basiert auf dem Java-Tool Eclipse und unterstützt neben JavaScript, HTML5 und CSS3 auch diverse Programmiersprachen wie PHP, Python und Ruby. Ferner können Ajax-Bibliotheken wie jQuery, Prototype oder script.aculo.us direkt in die Anwendung eingebunden und auf diese Weise für den Entwicklungsprozess genutzt werden. Die Dreamweaver-Alternative gibt es als Stand-alone-Version für Windows (ab XP), Linux (ab Ubuntu 9.04 / Fedora 12) und macOS (ab OS X 10.5) und als Eclipse-Plug-in (mindestens Eclipse 3.6). Das Entwicklerteam verbreitet Aptana Studio unter einem dualen Lizenzmodell: Nutzer können entweder eine Kombination aus GNU-GPL-Lizenz und Aptana-GPL Exception oder alternativ die Aptana Public License (APL) wählen.
Neben der breiten Unterstützung von Programmiersprachen und Plattformen zeichnen den Webeditor folgende Kernfeatures aus:
Dank der engen Verknüpfung mit Eclipse bietet die kostenlose Alternative zu Dreamweaver auch dessen grundsätzliche Funktionen. Unter anderem handelt es sich dabei um visuelle Syntaxhervorhebung, intelligente Code-Vervollständigung oder das automatische Schließen geöffneter Tags. Darüber hinaus unterstützt Aptana Studio die neuesten Webstandards wie HTML5. Installationsdateien für alle Plattformen sowie das Eclipse-Plug-in finden Sie auf der offiziellen Homepage. Auf GitHub stehen der Quellcode der Kernkomponenten sowie diverse Plug-ins für den Webeditor zum Download zur Verfügung.
| Vorteile | Nachteile |
|---|---|
| ✔ Unterstützung diverser Programmiersprachen wie Perl, Python, PHP und Ruby | ✘ Zahlreiche Abhängigkeiten, unter anderem von Java, Git und Eclipse (in der Plug-in-Variante) |
| ✔ Versionskontrolle mithilfe von Git | ✘ Kein eigenes deutsches Sprachpaket |
| ✔ Unterstützung neuester Webtechnologien | ✘ Installation funktioniert nur mit installiertem Node.js, worauf Aptana nicht hinweist |
| ✘ Nutzeroberfläche sehr komplex |
Unter dem Namen Atom hat GitHub, der Hosting-Dienst für Entwicklungsprojekte aller Art, 2014 seine ganz eigene Version eines Webeditors veröffentlicht. Als Grundbasis fungiert das plattformübergreifende Framework Electron (ehemals Atom Core), das den Browser Chromium mit der JavaScript-Laufzeitumgebung Node.js kombiniert und ebenfalls die Handschrift der GitHub-Entwickler trägt. Nachdem zunächst ausschließlich Erweiterungen und Pakete unter einer Open-Source-Lizenz freigegeben wurden, entschied sich GitHub am Ende dafür, auch den Quellcode des gesamten Projekts inklusive aller Standard-„Packages“, wie die Funktionsmodule des Editors genannt werden, unter der MIT-Lizenz freizugeben. Die Funktionen des Webeditors sind über einzelne JavaScript-APIs erreichbar, wobei die Entwickler die Nutzung von CoffeeScript anstelle von JavaScript empfehlen. Für CSS-Inhalte ist in Atom die vereinfachende Stylesheet-Sprache Less als Standard vorgegeben.
Der Webeditor unterstützt dank entsprechender Plug-ins neben den neuesten Standards von HTML, CSS und JavaScript bzw. CoffeeScript auch diverse Programmiersprachen wie zum Beispiel PHP, Ruby, Java, C, C++, Python und Perl. Zu den vielfältigen Features der kostenlosen Alternative zu Dreamweaver zählen unter anderem folgende:
Neben dem hohen Nutzerkomfort, der das Codieren erheblich vereinfacht, ist es aber vor allem die Erweiterbarkeit, die den modular aufgebauten Webeditor zu einer sehr guten Dreamweaver-Alternative macht. Über 90 Packages sowie 13 UI-Themes (Stand: Dezember 2016) verleihen bereits der Standardinstallation eine große Funktionsvielfalt inklusive der erwähnten exzellenten Sprachkompatibilität. Vermissen Sie ein Feature, lohnt sich ein Blick in das Erweiterungs-Verzeichnis auf der Atom-Homepage: Hier haben Sie Zugriff auf Tausende weitere Packages und -Themes, die von der engagierten Community entwickelt und veröffentlicht worden sind. Unter anderem finden Sie dort zum Beispiel auch ein Paket, das den Webeditor um eine Live-Vorschau-Funktion Ihres HTML-Codes ergänzt.
Diskutabel sind die beiden Core-Packages metrics und exception-reporting. Ersteres übermittelt Daten an Google Analytics, letzteres leitet außergewöhnliche Programmvorgänge (Abstürze, Fehler etc.) via bugsnag.com an das Atom-Entwicklerteam weiter. Auch wenn beide Pakete wohl nur der Verbesserung der Atom-Software dienen sollen, ist empfehlenswert, diese in den Einstellungen zu deaktivieren. Bis dato besitzt die Dreamweaver-Alternative leider noch keine deutschsprachige Nutzeroberfläche. Sie können aktuelle und ältere Versionen des GitHub-Programms, das unter Windows, macOS und Linux (64-Bit Ubuntu, Debian, Fedora) läuft, auf der offiziellen Homepage oder im GitHub-Verzeichnis herunterladen.
| Vorteile | Nachteile |
|---|---|
| ✔ Hochgradig erweiterbar | ✘ Kein deutschsprachiges Interface |
| ✔ Integrierte Lösungen zur Paketverwaltung und Versionskontrolle | ✘ Bedenkliche (wenn auch deaktivierbare) Standard-Packages zur Datensammlung |
| ✔ Großartige Sprachunterstützung (unter anderem PHP, HTML, CSS, JavaScript, Java, JSON, SQL) |
Adobe Dreamweaver bietet Programmierneulingen ein umfangreiches Komplettpaket zur Entwicklung von Websites, das dank der zahlreichen Features und der direkten Anbindung an die Creative Cloud ohne Zweifel alles bietet, was man zur Erstellung eines erfolgreichen und kunstvoll designten Webauftritts benötigt. Das ist jedoch auch mit einer hohen Komplexität und kontinuierlichen Kosten verbunden. Zudem gilt die Adobe-Software nicht gerade als ressourcensparende Lösung. Erfahrene Entwickler setzen indes für gewöhnlich auf Editoren, die ihnen größere Freiheiten bieten.
Die in diesem Ratgeber vorgestellten Open-Source-Alternativen zu Dreamweaver stellen in gewisser Hinsicht einen Mittelweg zwischen dem Baukasten-Prinzip des Adobe-Programms und der blanken Programmierung mithilfe eines gewöhnlichen Texteditors dar. Die Ursache hierfür liegt hauptsächlich im frei verfügbaren Programmcode, der den Open-Source-Webeditoren ihre hohe Flexibilität verleiht. So können Sie ein Programm wie Atom entweder als minimalistischen Editor mit Syntaxhervorhebung und Codevervollständigung nutzen oder aber als vollwertige Entwicklungsumgebung, die dem kommerziellen Dreamweaver nur in wenigen Punkten nachsteht.
Auf der anderen Seite können Sie bei den kostenfreien Lösungen aber auch nicht von einer ähnlichen Stabilität ausgehen, wie sie das Adobe-Produkt verspricht. Professionelle Software wie Dreamweaver wird stetig weiterentwickelt, hat in der Konsequenz auch die neuesten Webstandards parat und stellt oftmals – wie auch im Fall von Dreamweaver – ein über Jahrzehnte gereiftes Rundum-Sorglos-Paket dar. Treten Probleme mit der Software auf oder benötigen Sie Hilfe bei Ihrem Projekt, steht ein kompetenter Support zur Verfügung, wobei diesen auch einige Open-Source-Vertreter wie BlueGriffon (kostenpflichtig) anbieten Bei den kostenfreien Lösungen sind Sie auf die Hilfe der Community angewiesen – egal, ob es um technische Schwierigkeiten mit dem Programm oder um die allgemeine Weiterentwicklung geht.
| verfügbar für | Deutsches Sprachpaket | HTML5 und CSS3 | PHP | Besonderheiten | |
|---|---|---|---|---|---|
| Atom | Windows, macOS, Linux | nein | ja | ja | integrierter Paketmanager |
| Aptana Studio | Windows, macOS, Linux | nein | ja | ja | JavaScript- und Ruby-on-Rails-Debugger, basiert auf Eclipse |
| BlueGriffon | Windows, macOS, Ubuntu | ja | ja | nein | SVG-Editor, kommerzielle Zusatzfeatures |
| Brackets | Windows, macOS, Linux (eingeschränkt) | ja | ja | nein | Inline-Editoren für CSS und JavaScript |
| KompoZer | Windows, macOS, Ubuntu | ja | nein | nein | geringe Dateigröße |
Keine Zeit zum selbst coden? Mit dem IONOS Homepage-Baukasten können Sie sich ganz einfach per Drag & Drop Ihre eigene Webseite erstellen!
Während Menschen beim Lesen einer Webseite automatisch Informationen strukturieren, sind Programme wie Webcrawler oder Screenreader auf eine spezielle Auszeichnung angewiesen, um semantische Zusammenhänge verarbeiten zu können. Diese Zusatzinformationen lassen sich durch ein entsprechendes Mark-up für strukturierte Daten im HTML-Code einbetten. Webseitenbetreibern stehen dazu vier Formate zur...
Für Webentwickler steht in der heutigen Zeit vor allem eine Aufgabe auf der Agenda – die Benutzerfreundlichkeit der Onlinepräsenz. Mit Responsive Webdesign und Maßnahmen zur Barrierefreiheit wird auf den weltweit zunehmenden mobilen Traffic reagiert, ohne dabei Layout und Design zu vernachlässigen. Mit den im Februar 2016 veröffentlichten Accelerated Mobile Pages von Google steht nun ein neues...
Von der Idee bis zum Endprodukt ist es oft ein weiter Weg – das gilt auch für die Entwicklung einer neuen Website oder App. Einer der entscheidenden und anspruchsvollsten Schritte, um das geplante Konzept in die Tat umzusetzen, ist die Visualisierung der Ideen von Layout, Design und Funktionalität. Dabei spielen Mock-ups und Wireframes eine wichtige Rolle.
