5 Dream­wea­ver-Al­ter­na­ti­ven, die Sie kennen sollten

Adobe Dream­wea­ver ist ein pro­fes­sio­nel­les Web-Ent­wick­lungs­tool, mit dem sich Websites visuell oder im Code-Editor gestalten lassen. Es un­ter­stützt HTML, CSS, Ja­va­Script und weitere Web­tech­no­lo­gien und bietet Funk­tio­nen wie Live-Vorschau und Syn­tax­her­vor­he­bung. Besonders beliebt ist es bei De­si­gne­rin­nen und Designern sowie Ent­wi­ckeln­den, die visuelles Design mit direkter Code­kon­trol­le verbinden möchten.

Was ist Adobe Dream­wea­ver?

1997 ver­öf­fent­lich­te Macro­me­dia die erste Version von Dream­wea­ver zunächst noch aus­schließ­lich für das Apple-Be­triebs­sys­tem Mac OS 8. Erst knapp 3 Monate später – mit Version 1.2 – im­ple­men­tier­te man die Un­ter­stüt­zung für Microsoft-Windows-Systeme. 10 Jahre später übernahm die Soft­ware­schmie­de Adobe die Web­ent­wick­lungs­soft­ware und fügte sie seiner Creative Suite (die mitt­ler­wei­le von der Creative Cloud abgelöst worden ist) als Ersatz für den bis dahin ent­hal­te­nen Editor GoLive hinzu. Wer die sehr um­fang­rei­che Ap­pli­ka­ti­on zur Er­stel­lung und Ge­stal­tung von re­spon­si­ven Web­an­wen­dun­gen nutzen möchte, muss also entweder das an­ge­bo­te­ne Ein­zel­pro­dukt-Abon­ne­ment ab­schlie­ßen oder das Creative-Cloud-Kom­plett­pa­ket mieten, weshalb in erster Linie pro­fes­sio­nel­le An­wen­de­rin­nen und Anwender mit der Software arbeiten.

Das macht Adobe Dream­wea­ver aus

Dream­wea­ver punktet mit seiner für Adobe typischen Ober­flä­che, die Usern von Photoshop, InDesign, Il­lus­tra­tor und Co. bestens bekannt ist. Der Funk­ti­ons­um­fang des HTML-Editors, der sich in Sachen WYSIWYG als das Maß aller Dinge prä­sen­tiert, ist ins­be­son­de­re seit der Ver­öf­fent­li­chung der Creative Cloud erheblich gewachsen, was das Code-Schreiben zum Kin­der­spiel macht.

So ist es bei­spiels­wei­se möglich, sämtliche Än­de­run­gen in Echtzeit zu be­gut­ach­ten, ohne die Seite neu laden zu müssen, oder CSS-Code dank eines Inline-Editors direkt innerhalb der HTML-Datei zu be­ar­bei­ten. Ferner hilft die im­ple­men­tier­te Coding-Engine dabei, sauberen Code zu schreiben, indem Snippets per Emmet-Un­ter­stüt­zung au­to­ma­tisch ver­voll­stän­digt, au­to­ma­ti­sche Einzüge erzeugt und zu­sam­men­ge­hö­ren­de Elemente farblich ge­kenn­zeich­net werden. Darüber hinaus bietet Dream­wea­ver folgende Features:

• Code-Va­li­die­rung
• Un­ter­stüt­zung von CSS-Prä­pro­zes­so­ren (SASS, Less)
• Un­ter­stüt­zung von PHP (Version 5.6 und 7.1)
• Mehrere Cursors zum gleich­zei­ti­gen Schreiben und Be­ar­bei­ten ver­schie­de­ner Code­zei­len
• In­te­grier­tes CSS-Framework Bootstrap für Re­spon­si­ve Webdesign
• Zugriff auf li­zenz­freie Bilder und Vek­tor­gra­fi­ken von Adobe Stock
• Einfacher Zugriff auf eigene Grafiken, Designs und andere Assets über die Creative Cloud

Welche kos­ten­lo­sen Dream­wea­ver-Al­ter­na­ti­ven gibt es?

Wer Zugriff auf alle Produkte der Creative Cloud hat und im Umgang mit Dream­wea­ver erprobt ist, macht mit der Software von Adobe nicht viel falsch. Für Ent­wick­le­rin­nen und Ent­wick­ler mit be­grenz­tem Budget gibt es jedoch gute Dream­wea­ver-Al­ter­na­ti­ven, die kostenlos nutzbar sind. 5 in­ter­es­san­te Vertreter stellen wir Ihnen in den folgenden Ab­schnit­ten vor. Dabei geht es ei­ner­seits darum, deren Features und Be­son­der­hei­ten zu prä­sen­tie­ren. An­de­rer­seits sollen auch die Un­ter­schie­de und Ge­mein­sam­kei­ten zu Adobes Software be­leuch­tet und die Nutz­bar­keit der ver­schie­de­nen Tools unter die Lupe genommen werden.

Visual Studio Code

Visual Studio Code, häufig kurz VS Code genannt, ist ein quell­of­fe­ner Code-Editor von Microsoft, der sich seit seiner Ver­öf­fent­li­chung im Jahr 2015 rasant zur be­lieb­tes­ten Ent­wick­lungs­um­ge­bung weltweit ent­wi­ckelt hat. Als kos­ten­lo­se und platt­form­über­grei­fen­de Dream­wea­ver-Al­ter­na­ti­ve überzeugt der Editor durch seine hohe Fle­xi­bi­li­tät, seinen modularen Aufbau und eine aktive Community. VS Code läuft auf Windows, macOS und Linux und bringt in der Grund­ver­si­on bereits viele Features mit, die den An­sprü­chen moderner Web­ent­wick­le­rin­nen und -ent­wick­ler gerecht werden. Hierzu zählen bei­spiels­wei­se in­te­grier­te Git-Un­ter­stüt­zung, Syn­tax­her­vor­he­bung, in­tel­li­gen­te Code­ver­voll­stän­di­gung (basierend auf In­tel­li­Sen­se), ein in­te­grier­tes Terminal sowie eine Live-Vorschau über ent­spre­chen­de Er­wei­te­run­gen.

Trotz des Fokus auf reines Coding anstelle visueller Ge­stal­tungs­ele­men­te wie in Dream­wea­ver lässt sich Visual Studio Code mit wenigen Plugins zu einer leis­tungs­fä­hi­gen WYSIWYG-ähnlichen Umgebung ausbauen. So er­mög­li­chen Er­wei­te­run­gen wie bei­spiels­wei­se Live Server einen Workflow, der HTML-, CSS- und Ja­va­Script-Ent­wick­lung ebenso kom­for­ta­bel macht wie bei Dream­wea­ver. Wer ser­ver­sei­ti­ge Sprachen wie PHP oder Frame­works wie React, Angular oder Vue verwendet, findet in VS Code eine nahtlose Ent­wick­lungs­um­ge­bung mit Debugging-, Linting- und Build-Tools direkt in­te­griert oder per Klick nach­rüst­bar.

Dank der Vielzahl ver­füg­ba­rer Themes, Tas­ten­kür­zel, Snippet-Bi­blio­the­ken und UI-An­pas­sun­gen ist der Editor extrem anpassbar. Gerade Ent­wick­le­rin­nen und Ent­wick­ler, die mit Dream­wea­ver in gra­fi­scher Ober­flä­che begonnen haben und nun in den Code­be­reich wechseln wollen, finden in VS Code eine moderne, zu­kunfts­si­che­re Al­ter­na­ti­ve, die mit stei­gen­den An­for­de­run­gen mitwächst, ohne auf eine kom­mer­zi­el­le Lizenz zu­rück­grei­fen zu müssen.

KompoZer

Die Web­ent­wick­lungs­soft­ware KompoZer ist aus dem Mozilla-Projekt Nvu her­vor­ge­gan­gen und basiert daher ebenfalls auf der Gecko-Engine. Zunächst handelte es sich bei KompoZer um kleine Op­ti­mie­run­gen der Nvu-Software, bis das Programm schließ­lich als ei­gen­stän­di­ger 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­öf­fent­licht wurde. Das Team aus dem Mozilla-Umfeld hat die Wei­ter­ent­wick­lung 2010 gestoppt, dennoch ist die Software auf den meisten gängigen Windows- und macOS-Systemen sowie Ubuntu nutzbar. Da es sich bei KompoZer um ein 32-Bit-Programm handelt, ist es mit neueren macOS-Versionen nicht mehr kom­pa­ti­bel. Für KompoZer exis­tie­ren über 20 ver­schie­de­ne Sprach­pa­ke­te – unter anderem Deutsch, Englisch, Fran­zö­sisch, Ita­lie­nisch und Spanisch.

Auch wenn KompoZer nicht zu den Dream­wea­ver-Al­ter­na­ti­ven zählt, die hin­sicht­lich Funk­ti­ons­um­fang und Kom­ple­xi­tät mit dem Adobe-Programm mithalten können, bietet die Open-Source-Anwendung seinen Nut­ze­rin­nen und Nutzern dennoch einige Features, mit deren Hilfe sich pro­fes­sio­nell designte Webseiten gestalten lassen:

• Leis­tungs­star­ker WYSWYG-Editor, der einen einfachen Wechsel zwischen Code und Vorschau er­mög­licht
• In­te­grier­ter CSS-Editor inklusive Im­port­funk­ti­on für bereits exis­tie­ren­de Style­sheets
• An­pass­ba­re Me­nü­leis­ten
• Recht­schreib­über­prü­fung und Syn­tax­her­vor­he­bung
• Tabs für das gleich­zei­ti­ge Be­ar­bei­ten mehrerer Seiten
• Formular-Assistent
• In­te­grier­ter Markup-Cleaner, der Ihre Projekte auf W3C-Kon­for­mi­tät prüft
• FTP-Sei­ten­ma­na­ger inklusive Drag-and-Drop-Funktion für Me­di­en­da­tei­en wie Bilder

Zu­sätz­lich gibt es für das Programm eine Handvoll nütz­li­cher Er­wei­te­run­gen – wie zum Beispiel einen Link-Checker, mit dessen Hilfe Sie die Gül­tig­keit ein­ge­bun­de­ner Ver­lin­kun­gen über­prü­fen können. Als mögliche Adobe-Dream­wea­ver-Al­ter­na­ti­ve lässt KompoZer jedoch bis heute sowohl die Un­ter­stüt­zung von PHP als auch den Support neuerer Web­stan­dards wie CSS3 und HTML5 vermissen. Alle Download-Versionen für die ver­schie­de­nen Platt­for­men sowie eine aus­führ­li­che Do­ku­men­ta­ti­on finden Sie auf der KompoZer-Website. Dort haben Sie außerdem die Mög­lich­keit, entdeckte Pro­gramm­feh­ler zu melden oder Vor­schlä­ge für neue Funk­tio­nen ein­zu­rei­chen.

Phoenix

Phoenix ist ein moderner, community-ge­trie­be­ner Code-Editor, der als direkter Nach­fol­ger der in­zwi­schen ein­ge­stell­ten Dream­wea­ver-Al­ter­na­ti­ve Brackets be­trach­tet werden kann. Nach der of­fi­zi­el­len Ab­kün­di­gung von Brackets durch Adobe im Jahr 2021 wurde Phoenix von en­ga­gier­ten Ent­wick­le­rin­nen und Ent­wick­lern ins Leben gerufen, um das Potenzial des beliebten Editors zu bewahren und gleich­zei­tig gezielt zu ver­bes­sern. Die Software steht unter der MIT-Lizenz und wird aktiv wei­ter­ent­wi­ckelt. Sie ist platt­form­über­grei­fend für Windows, macOS und Linux verfügbar und nutzt wie ihr Vorgänger moderne Web­tech­no­lo­gien wie HTML, CSS oder Ja­va­Script. Dabei setzt Phoenix auf eine moderne UI, die sich klar am Original ori­en­tiert, jedoch mit einer über­ar­bei­te­ten Ar­chi­tek­tur, Per­for­mance-Op­ti­mie­run­gen und ak­tua­li­sier­ten Bi­blio­the­ken punktet.

Der Editor richtet sich gezielt an Frontend-Ent­wi­ckeln­de, bietet aber durch seine offene Ar­chi­tek­tur und Er­wei­ter­bar­keit auch Mög­lich­kei­ten für den Einsatz in anderen Bereichen. Besonders her­vor­zu­he­ben ist die ein­ge­bau­te Live-Vorschau, die Än­de­run­gen am HTML- und CSS-Code in Echtzeit und ohne manuelles Neuladen au­to­ma­tisch im Browser (z. B. Google Chrome) anzeigt. Un­ter­stützt wird diese Funktion durch die nahtlose In­te­gra­ti­on von Node.js, die eine schnelle Kom­mu­ni­ka­ti­on zwischen Editor und Browser er­mög­licht.

Darüber hinaus kann Phoenix mit weiteren Features punkten:

• Inline-Editoren: CSS- und Ja­va­Script-Regeln können ohne Da­tei­wech­sel direkt im HTML-Dokument editiert werden.
• Moderne Er­wei­te­rungs­ver­wal­tung: Über eine in­te­grier­te Plugin-Schnitt­stel­le lassen sich Zu­satz­funk­tio­nen und Themes bequem in­stal­lie­ren. Die Community arbeitet aktiv an neuen Er­wei­te­run­gen, darunter Syn­tax­her­vor­he­bung, For­ma­tie­rungs-Tools oder Linter für HTML, CSS und Ja­va­Script.
• Platt­form­über­grei­fen­de Pro­jekt­ver­wal­tung: Projekte lassen sich über Tabs or­ga­ni­sie­ren, und ein in­te­grier­ter Da­tei­ma­na­ger er­mög­licht das schnelle Durch­su­chen und Be­ar­bei­ten von Ver­zeich­nis­sen.

Durch seine kon­se­quen­te Wei­ter­ent­wick­lung, das vertraute Nut­zer­er­leb­nis und die Kon­zen­tra­ti­on auf moderne Frontend-Workflows stellt Phoenix eine der aktuell at­trak­tivs­ten Open-Source-Al­ter­na­ti­ven zu Adobe Dream­wea­ver dar. Vor allem für Ent­wick­le­rin­nen und Ent­wick­ler, die Wert auf einfache Bedienung, Live-Vorschau und eine aktive Community legen, ist das Programm eine lohnende Option.

Aptana Studio

Aptana Studio ist eine freie, in­te­grier­te Ent­wick­lungs­um­ge­bung der Firma Axway. Mitt­ler­wei­le ist der of­fi­zi­el­le Support ein­ge­stellt, der Editor kann aber nach wie vor im of­fi­zi­el­len Aptana-GitHub-Ver­zeich­nis her­un­ter­ge­la­den­wer­den. Die Plattform basiert auf dem Java-Tool Eclipse und un­ter­stützt neben Ja­va­Script, HTML5 und CSS3 auch diverse Pro­gram­mier­spra­chen wie PHP, Python und Ruby. Ferner können Ajax-Bi­blio­the­ken wie jQuery, Prototype oder script.aculo.us direkt in die Anwendung ein­ge­bun­den und auf diese Weise für den Ent­wick­lungs­pro­zess genutzt werden.

Neben der breiten Un­ter­stüt­zung von Pro­gram­mier­spra­chen und Platt­for­men zeichnen den Webeditor folgende Kern­fea­tures aus:

• Code-Assistent: Der Code-Assistent gibt Vor­schlä­ge für mögliche Argumente, Ei­gen­schaf­ten oder Methoden und zeigt zudem die Un­ter­stüt­zung jeglicher HTML-, CSS- und Ja­va­Script-Elemente Ihres Web­pro­jek­tes in den gängigen In­ter­net­brow­sern an.
• In­te­grier­te Debugger: Ja­va­Script- und Ruby-on-Rails-Debugger sind bereits im­ple­men­tiert und helfen dabei, Fehler in Ihrer Web­an­wen­dung auf­zu­spü­ren und zu beheben.
• Be­reit­stel­lungs-Assistent: Aptana Studio bietet mit dem Be­reit­stel­lungs-As­sis­ten­ten ein Tool, das Sie beim Upload, Download und bei der Syn­chro­ni­sa­ti­on Ihrer Web­pro­jekt-Dateien via FTP, SFTP und FTPS un­ter­stützt.
• Ver­si­ons­kon­trol­le: Sie können Ihr Web­pro­jekt un­kom­pli­ziert mit Git ver­knüp­fen und so ein sicheres, ge­mein­sa­mes Arbeiten am Quellcode si­cher­stel­len, wie es etwa online bei GitHub möglich ist.
• In­te­grier­tes Kom­man­do­zei­len-Tool: Dank ein­ge­bau­tem Terminal führen Sie Sys­tem­be­feh­le direkt in Aptana Studio aus.
• Flexible Ent­wick­lungs­um­ge­bung: Sie können Aptana Studio frei nach Ihren Wünschen kon­fi­gu­rie­ren und die Ba­sis­mög­lich­kei­ten durch Skripts für Stan­dard­be­feh­le erweitern und mit Shortcuts versehen, um die optimale Usability zu erzielen.

Dank der engen Ver­knüp­fung mit Eclipse bietet die kos­ten­lo­se Al­ter­na­ti­ve zu Dream­wea­ver auch dessen grund­sätz­li­che Funk­tio­nen. Unter anderem handelt es sich dabei um visuelle Syn­tax­her­vor­he­bung, in­tel­li­gen­te Code-Ver­voll­stän­di­gung oder das au­to­ma­ti­sche Schließen ge­öff­ne­ter Tags. Darüber hinaus un­ter­stützt Aptana Studio die neuesten Web­stan­dards wie HTML5.

Pulsar

Pulsar ist ein von der Community ent­wi­ckel­ter Fork des ur­sprüng­lich von GitHub ent­wi­ckel­ten Editors Atom, dessen of­fi­zi­el­ler Support im Dezember 2022 ein­ge­stellt wurde. Das Ziel von Pulsar ist es, die ver­trau­ten Elemente von Atom bei­zu­be­hal­ten, gleich­zei­tig jedoch veraltete Ab­hän­gig­kei­ten zu mo­der­ni­sie­ren und Si­cher­heits­up­dates sowie neue Features be­reit­zu­stel­len. Das Projekt wird aktiv gepflegt und steht wie sein Vorgänger unter der MIT-Lizenz zur Verfügung. Auch apm, der Atom Package Manager, wird unter dem Namen ppm (Pulsar Packet Manager) wei­ter­ent­wi­ckelt, um die nahtlose Ver­wal­tung von Paketen zu er­mög­li­chen. Pulsar ist für Windows, macOS und Linux verfügbar und un­ter­stützt zahl­rei­che Pro­gram­mier­spra­chen wie HTML, CSS, Ja­va­Script, PHP, Python und weitere, ganz im Sinne der ur­sprüng­li­chen Atom-Phi­lo­so­phie.

Die größte Stärke von Pulsar liegt in der kon­se­quen­ten Wei­ter­füh­rung der modularen Ar­chi­tek­tur: Be­stehen­de Atom-Packages funk­tio­nie­ren über­wie­gend weiterhin und die Community arbeitet stetig an der Migration wichtiger Er­wei­te­run­gen. Zu den bekannten Features zählen unter anderem:

• In­tel­li­gen­te Au­to­ver­voll­stän­di­gung: Der Editor schlägt während der Eingabe passende Code-Snippets und Funk­tio­nen vor, die sich bequem über­neh­men lassen.
• Pa­ket­ver­wal­tung mit ppm: Ähnlich wie apm erlaubt ppm das In­stal­lie­ren, Entfernen und Ak­tua­li­sie­ren von Er­wei­te­run­gen direkt im Editor oder über das Terminal.
• Git-In­te­gra­ti­on: Pulsar bietet visuelle Git-Un­ter­stüt­zung zum Nach­ver­fol­gen und Verwalten von Quell­code­än­de­run­gen.
• Themes und UI-An­pas­sun­gen: Der Editor lässt sich optisch und funk­tio­nal um­fang­reich an die eigenen Be­dürf­nis­se anpassen und un­ter­stützt diverse Farb­sche­ma­ta und Tas­ten­kür­zel.

Dank aktiver Mit­wir­kung von ehe­ma­li­gen Atom-Nut­ze­rin­nen und -Nutzern wächst das Projekt kon­ti­nu­ier­lich weiter. Eine aus­führ­li­che Do­ku­men­ta­ti­on ist ebenfalls auf der Website zu finden.

Die besten Dream­wea­ver-Al­ter­na­ti­ven aus dem Open-Source-Bereich: Fazit

Adobe Dream­wea­ver bietet Pro­gram­mier­neu­lin­gen ein um­fang­rei­ches Kom­plett­pa­ket zur Ent­wick­lung von Websites, das dank der zahl­rei­chen Features und der direkten Anbindung an die Creative Cloud ohne Zweifel alles bietet, was man zur Er­stel­lung eines er­folg­rei­chen und kunstvoll designten Web­auf­tritts benötigt. Das ist jedoch auch mit einer hohen Kom­ple­xi­tät und kon­ti­nu­ier­li­chen Kosten verbunden. Zudem gilt die Adobe-Software nicht gerade als res­sour­cen­spa­ren­de Lösung. Erfahrene Ent­wick­le­rin­nen und Ent­wick­ler setzen indes für ge­wöhn­lich auf Editoren, die ihnen größere Frei­hei­ten bieten.

Die in diesem Ratgeber vor­ge­stell­ten Open-Source-Al­ter­na­ti­ven zu Dream­wea­ver stellen in gewisser Hinsicht einen Mittelweg zwischen dem Baukasten-Prinzip des Adobe-Programms und der blanken Pro­gram­mie­rung mithilfe eines ge­wöhn­li­chen Text­edi­tors dar. Die Ursache hierfür liegt haupt­säch­lich im frei ver­füg­ba­ren Pro­gramm­code, der den Open-Source-We­be­di­to­ren ihre hohe Fle­xi­bi­li­tät verleiht. So können Sie ein Programm wie Pulsar entweder als mi­ni­ma­lis­ti­schen Editor mit Syn­tax­her­vor­he­bung und Code­ver­voll­stän­di­gung nutzen oder aber als voll­wer­ti­ge Ent­wick­lungs­um­ge­bung, die dem kom­mer­zi­el­len Dream­wea­ver nur in wenigen Punkten nachsteht.

Auf der anderen Seite können Sie bei den kos­ten­frei­en Lösungen aber auch nicht von einer ähnlichen Sta­bi­li­tät ausgehen, wie sie das Adobe-Produkt ver­spricht. Pro­fes­sio­nel­le Software wie Dream­wea­ver wird stetig wei­ter­ent­wi­ckelt, hat in der Kon­se­quenz auch die neuesten Web­stan­dards parat und stellt oftmals – wie auch im Fall von Dream­wea­ver – ein über Jahr­zehn­te gereiftes Rundum-Sorglos-Paket dar. Treten Probleme mit der Software auf oder benötigen Sie Hilfe bei Ihrem Projekt, steht ein kom­pe­ten­ter Support zur Verfügung Bei den kos­ten­frei­en Lösungen sind Sie auf die Hilfe der Community an­ge­wie­sen – egal, ob es um tech­ni­sche Schwie­rig­kei­ten mit dem Programm oder um die all­ge­mei­ne Wei­ter­ent­wick­lung geht.