Adobe Dreamwea­ver er et pro­fes­sio­nelt we­b­ud­vik­lings­værk­tøj, der gør det muligt at designe hjem­mesi­der visuelt eller i ko­de­di­to­ren. Det un­der­støt­ter HTML, CSS, Ja­va­Script og andre web­tek­no­lo­gi­er og tilbyder funk­tio­ner som live preview og syn­taks­frem­hæv­ning. Det er især populært blandt designere og udviklere, der ønsker at kombinere visuelt design med direkte ko­de­kon­trol.

Hvad er Adobe Dreamwea­ver?

I 1997 udgav Ma­cro­me­dia den første version af Dreamwea­ver eks­klu­sivt til Apples ope­ra­tiv­sy­stem Mac OS 8. Først næsten tre måneder senere – med version 1.2 – blev un­der­støt­tel­se af Microsoft Windows-systemer im­ple­men­te­ret. Ti år senere overtog softwa­re­virk­som­he­den Adobe we­b­ud­vik­lings­softwa­ren og tilføjede den til sin Creative Suite (som siden er blevet erstattet af Creative Cloud) som er­stat­ning for den tidligere in­klu­de­re­de GoLive-editor. Alle, der ønsker at bruge det om­fat­ten­de program til at oprette og designe re­spon­si­ve we­bap­pli­ka­tio­ner, skal enten købe det selv­stæn­di­ge abon­ne­ment eller leje det komplette Creative Cloud-pakke, hvilket er grunden til, at softwaren primært bruges af pro­fes­sio­nel­le brugere.

Hvad gør Adobe Dreamwea­ver så speciel?

Med sin typiske Adobe-græn­se­fla­de, som er velkendt for brugere af Photoshop, InDesign og Il­lu­stra­tor, gør Dreamwea­ver straks indtryk. HTML-editoren, der betragtes som en førende WYSIWYG-løsning, har udviklet sig be­ty­de­ligt siden Creative Cloud-ud­gi­vel­sen, hvilket har gjort kodning meget nemmere.

For eksempel er det muligt at gennemgå alle ændringer i realtid uden at skulle ge­nind­læ­se siden eller redigere CSS-kode direkte i HTML-filen ved hjælp af en indbygget editor. Desuden hjælper den in­te­gre­re­de kod­nings­mo­tor med at skrive ren kode ved au­to­ma­tisk at udfylde ko­destyk­ker med Emmet-un­der­støt­tel­se, generere au­to­ma­ti­ske in­dryk­nin­ger og fremhæve matchende elementer med farve. Derudover tilbyder Dreamwea­ver følgende funk­tio­ner:

  • Ko­de­va­li­de­ring
  • Un­der­støt­tel­se af CSS-for­pro­ces­so­rer (SASS, Less)
  • Un­der­støt­tel­se af PHP (version 5.6 og 7.1)
  • Flere markører til samtidig skrivning og re­di­ge­ring af for­skel­li­ge ko­de­linjer
  • In­te­gre­ret CSS-framework Bootstrap til re­spon­sivt webdesign
  • Adgang til roy­altyfrie billeder og vek­tor­gra­fik fra Adobe Stock
  • Nem adgang til dine egne grafikker, designs og andre aktiver via Creative Cloud

Hvilke gratis al­ter­na­ti­ver til Dreamwea­ver findes der?

Erfarne Dreamwea­ver-brugere med adgang til Creative Cloud-produkter vil finde Adobes software som et på­li­de­ligt valg. Alligevel kan udviklere, der arbejder med be­græn­se­de budgetter, vælge mellem flere gratis Dreamwea­ver-al­ter­na­ti­ver. Nedenfor præ­sen­te­rer vi fem mu­lig­he­der med en de­tal­je­ret be­skri­vel­se af deres vigtigste funk­tio­ner, unikke egen­ska­ber og hvordan de sam­men­lig­nes med Adobes software med hensyn til bru­ger­ven­lig­hed og funk­tio­na­li­tet.

Visual Studio Code

Visual Studio Code, ofte kaldet VS Code for kort, er en open source-ko­de­e­di­tor fra Microsoft, der hurtigt er blevet det mest populære ud­vik­lings­mil­jø på ver­dens­plan siden dets udgivelse i 2015. Som et gratis og plat­formsu­af­hæn­gigt al­ter­na­tiv til Dreamwea­ver udmærker editoren sig ved sin høje flek­si­bi­li­tet, modulære struktur og aktive community. VS Code kører på Windows, macOS og Linux, og den grund­læg­gen­de version in­de­hol­der allerede mange funk­tio­ner, der imø­de­kom­mer moderne we­b­ud­vik­le­res behov. Disse omfatter in­te­gre­ret Git-support, syn­taks­frem­hæv­ning, in­tel­li­gent ko­de­kom­plet­te­ring (baseret på In­tel­li­Sen­se), en in­te­gre­ret terminal og en live preview via passende ud­vi­del­ser.

Selvom Visual Studio Code fokuserer på ren kodning i stedet for visuelle de­sig­n­e­le­men­ter som Dreamwea­ver, kan det udvides til et kraft­fuldt WYSIWYG-lignende miljø med et par plugins. Ud­vi­del­ser som Live Server giver en ar­bejds­gang, der gør HTML-, CSS- og Ja­va­Script-udvikling lige så kom­forta­bel som med Dreamwea­ver. De, der bruger ser­ver­si­de­sprog som PHP eller fra­mewor­ks som React, Angular eller Vue, vil i VS Code finde et pro­blem­frit ud­vik­lings­mil­jø med fejl­find­ing, linting og build-værktøjer, der enten er direkte in­te­gre­ret eller let kan tilføjes med et klik.

Billede: Screenshot of the VS Code website
Visual Studio Code is one of the most popular de­ve­l­op­ment en­viron­ments, also offering extensive support for web de­ve­l­op­ment.

Takket være det store udvalg af til­gæn­ge­li­ge temaer, ta­sta­tur­gen­ve­je, snippet-bi­bli­o­te­ker og UI-til­pas­nin­ger er editoren meget fleksibel. Udviklere, der startede med Dreamwea­vers grafiske interface og nu ønsker at gå over til kodning, vil i VS Code finde et moderne, frem­tids­sik­ret al­ter­na­tiv, der vokser med stigende krav uden behov for en kom­merci­el licens.

Fordele Ulemper
Fleksibel takket være et stort udvalg af ud­vi­del­ser og temaer Ingen WYSIWYG-un­der­støt­tel­se uden en udvidelse
Un­der­støt­ter alle moderne web­tek­no­lo­gi­er Læ­rings­kur­ve for begyndere
In­te­gre­ret terminal, Git og debugger Hukom­mel­ses­kræ­ven­de med mange ud­vi­del­ser

KompoZer

We­b­ud­vik­lings­softwa­ren KompoZer stammer fra Mozillas Nvu-projekt og er også baseret på Gecko-motoren. Op­rin­de­ligt indebar KompoZer mindre op­ti­me­rin­ger af Nvu-softwaren, indtil pro­gram­met til sidst blev udgivet som en uafhængig webeditor under de gratis licenser GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License) og MPL (Mozilla Public License). Teamet fra Mozilla-miljøet stoppede ud­vik­lin­gen i 2010, men softwaren kan stadig bruges på de fleste al­min­de­li­ge Windows- og macOS-systemer samt Ubuntu. Da KompoZer er et 32-bit program, er det ikke længere kom­pa­ti­belt med nyere macOS-versioner. Der findes over 20 for­skel­li­ge sprog­pak­ker til KompoZer – herunder engelsk, tysk, fransk, italiensk og spansk.

Selvom KompoZer ikke er blandt de Dreamwea­ver-al­ter­na­ti­ver, der kan måle sig med Adobes program med hensyn til funk­tio­na­li­tet og kom­plek­si­tet, tilbyder open source -ap­pli­ka­tio­nen stadig sine brugere nogle funk­tio­ner, der hjælper med at designe pro­fes­sio­nelt udformede websteder:

  • Kraftfuld WYSIWYG-editor, der gør det nemt at skifte mellem kode og for­hånds­vis­ning
  • In­te­gre­ret CSS-editor med im­port­funk­tion til ek­si­ste­ren­de sty­les­he­ets
  • Til­pas­nings­ba­re me­nulinjer
  • Sta­ve­kon­trol og syn­taks­frem­hæv­ning
  • Faner til samtidig re­di­ge­ring af flere sider
  • For­mu­la­ras­si­stent
  • In­te­gre­ret markup-renser, der kon­trol­le­rer dine projekter for W3C-over­ens­stem­mel­se
  • FTP-web­s­teds­ad­mi­ni­stra­tor med træk-og-slip-funk­tio­na­li­tet til me­di­e­fi­ler som billeder
Billede: Screenshot of the KompoZer website
KompoZer is no longer of­fi­ci­al­ly developed, but it remains popular.

Derudover tilbyder pro­gram­met en række nyttige ud­vi­del­ser, såsom en link­check­er til at kon­trol­le­re gyl­dig­he­den af ind­lej­re­de links. Som et po­ten­ti­elt al­ter­na­tiv til Adobe Dreamwea­ver mangler KompoZer stadig un­der­støt­tel­se af PHP og nyere web­s­tan­dar­der såsom CSS3 og HTML5. Du kan finde alle down­lo­ad­ver­sio­ner til for­skel­li­ge platforme samt de­tal­je­ret do­ku­men­ta­tion på KompoZers hjem­mesi­de. Der har du også mulighed for at rap­por­te­re fundne fejl eller indsende forslag til nye funk­tio­ner.

Fordele Ulemper
Hurtig WYSIWYG-editor med preview-funktion Manglende un­der­støt­tel­se af PHP
Til­gæn­ge­lig på over 20 sprog Ud­vik­lin­gen er standset
Pro­gram­fi­ler­ne er kun få MB Un­der­støt­ter ikke moderne stan­dar­der som HTML5 eller CSS3

Føniks

Phoenix er en moderne, community-drevet ko­de­e­di­tor, der kan ses som en direkte ef­ter­føl­ger til det nu udgåede Dreamwea­ver-al­ter­na­tiv Brackets. Efter at Adobe officielt udgik Brackets i 2021, blev Phoenix skabt af de­di­ke­re­de udviklere for at bevare po­ten­ti­a­let i den populære editor, samtidig med at den bevidst blev forbedret. Softwaren er under MIT-licens og udvikles aktivt. Den er til­gæn­ge­lig på tværs af platforme til Windows, macOS og Linux og bruger moderne web­tek­no­lo­gi­er som HTML, CSS eller Ja­va­Script, ligesom sin forgænger. Phoenix har en moderne bru­ger­græn­se­fla­de, der tydeligt er in­spi­re­ret af ori­gi­na­len, men med en fornyet ar­ki­tek­tur, yde­ev­ne­op­ti­me­rin­ger og op­da­te­re­de bi­bli­o­te­ker.

Editoren er specifikt rettet mod frontend-udviklere, men dens åbne ar­ki­tek­tur og ud­vi­del­ses­mu­lig­he­der gør det også muligt at bruge den inden for andre områder. Et af høj­de­punk­ter­ne er den ind­byg­ge­de live-preview, der au­to­ma­tisk viser ændringer i HTML- og CSS-kode i realtid i browseren (f.eks. Google Chrome) uden manuel ge­nind­læs­ning. Denne funktion un­der­støt­tes af en pro­blem­fri in­te­gra­tion med Node.js, der muliggør hurtig kom­mu­ni­ka­tion mellem editoren og browseren.

Billede: Screenshot of the Phoenix website
Phoenix is an evolution of the popular Dreamwea­ver al­ter­na­ti­ve Brackets.

Derudover kan Phoenix score med yder­li­ge­re funk­tio­ner:

  • Inline-re­dak­tø­rer: CSS- og Ja­va­Script-regler kan redigeres direkte i HTML-do­ku­men­tet uden at skifte fil.
  • Moderne ud­vi­del­ses­sty­ring: Yder­li­ge­re funk­tio­ner og temaer kan nemt in­stal­le­res via en in­te­gre­ret plugin-græn­se­fla­de. Fæl­les­ska­bet arbejder aktivt på nye ud­vi­del­ser, herunder syn­taks­frem­hæv­ning, for­ma­te­rings­værk­tø­jer eller linters til HTML, CSS og Ja­va­Script.
  • Plat­for­mu­af­hæn­gig pro­jekt­sty­ring: Projekter kan or­ga­ni­se­res via faner, og en in­te­gre­ret fil­hånd­te­ring gør det muligt hurtigt at gennemse og redigere mapper.

Takket være sin kon­se­kven­te udvikling, velkendte bru­gero­p­le­vel­se og fokus på moderne frontend-workflows er Phoenix i øje­blik­ket et af de mest at­trak­ti­ve open source-al­ter­na­ti­ver til Adobe Dreamwea­ver. Det er et vær­di­fuldt valg, især for udviklere, der værds­æt­ter bru­ger­ven­lig­hed, live preview og et aktivt community.

Fordele Ulemper
Kon­ti­nu­er­lig udvikling af fæl­les­ska­bet Do­ku­men­ta­tio­nen er stadig ufuld­stæn­dig på nogle områder
Fokus på moderne stan­dar­der og ydeevne Begrænset support til ser­ver­sprog som PHP
Inline-re­di­ge­rings­pro­gram­mer til CSS og Ja­va­Script

Aptana Studio

Aptana Studio er et gratis, in­te­gre­ret ud­vik­lings­mil­jø fra firmaet Axway. Selvom den of­fi­ci­el­le support nu er ophørt, kan editoren stadig down­lo­a­des fra det of­fi­ci­el­le Aptana GitHub-arkiv. Plat­for­men er baseret på Java-værktøjet Eclipse og un­der­støt­ter for­skel­li­ge pro­gram­me­rings­sprog ud over Ja­va­Script, HTML5 og CSS3, såsom PHP, Python og Ruby. Desuden kan Ajax-bi­bli­o­te­ker som jQuery, Prototype eller script.aculo.us in­te­gre­res direkte i ap­pli­ka­tio­nen og bruges i ud­vik­lings­pro­ces­sen.

Ud over bred un­der­støt­tel­se af pro­gram­me­rings­sprog og platforme udmærker we­bre­di­ge­rings­pro­gram­met sig ved følgende ker­ne­funk­tio­ner:

  • Ko­deas­si­stent: Ko­deas­si­sten­ten giver forslag til mulige ar­gu­men­ter, egen­ska­ber eller metoder og viser også un­der­støt­tel­sen af alle HTML-, CSS- og Ja­va­Script-elementer i dit webpro­jekt i al­min­de­li­ge web­brow­se­re.
  • In­te­gre­re­de fejl­find­ings­værk­tø­jer: Ja­va­Script- og Ruby on Rails-fejl­find­ings­værk­tø­jer er allerede im­ple­men­te­ret og hjælper med at iden­ti­fi­ce­re og rette fejl i din we­bap­pli­ka­tion.
  • Im­ple­men­te­rings­as­si­stent: Aptana Studio tilbyder et im­ple­men­te­rings­as­si­stent­værk­tøj, der hjælper dig med at uploade, downloade og syn­kro­ni­se­re dine webpro­jekt­fi­ler via FTP, SFTP og FTPS.
  • Ver­sions­kon­trol: Du kan nemt linke dit webpro­jekt til Git for at sikre sikkert, sam­ar­bejds­ba­se­ret arbejde med kil­de­ko­den, som det er muligt online med GitHub.
  • In­te­gre­ret kom­man­do­linje­værk­tøj: Med den ind­byg­ge­de terminal kan du udføre sy­stem­kom­man­do­er direkte i Aptana Studio.
  • Flek­si­belt ud­vik­lings­mil­jø: Du kan kon­fi­gu­re­re Aptana Studio efter dine præ­fe­ren­cer og forbedre de grund­læg­gen­de funk­tio­ner med scripts til stan­dard­kom­man­do­er og tilføje genveje for at opnå optimal bru­ger­ven­lig­hed.
Billede: Screenshot of the Aptana website
Aptana Studio is also no longer being developed but can still be down­lo­a­ded from GitHub.

Takket være sin tætte in­te­gra­tion med Eclipse tilbyder dette gratis al­ter­na­tiv til Dreamwea­ver også grund­læg­gen­de funk­tio­ner såsom visuel syn­taks­frem­hæv­ning, smart ko­de­kom­plet­te­ring eller au­to­ma­tisk lukning af åbne tags. Derudover un­der­støt­ter Aptana Studio de nyeste web­s­tan­dar­der som HTML5.

Fordele Ulemper
Un­der­støt­tel­se af for­skel­li­ge pro­gram­me­rings­sprog som Perl, Python, PHP og Ruby Talrige af­hæn­gig­he­der, herunder Java, Git og Eclipse (i plugin-versionen)
Ver­sions­kon­trol ved hjælp af Git Bru­ger­græn­se­fla­den er meget kompleks
Un­der­støt­tel­se af de nyeste web­tek­no­lo­gi­er In­stal­la­tion fungerer kun med Node.js in­stal­le­ret, hvilket Aptana ikke nævner

Pulsar

Pulsar er en community-udviklet fork af editoren Atom, der op­rin­de­ligt blev udviklet af GitHub, hvis of­fi­ci­el­le support ophørte i december 2022. Pulsar har til formål at bevare de velkendte elementer fra Atom, samtidig med at forældede af­hæn­gig­he­der mo­der­ni­se­res og sik­ker­heds­op­da­te­rin­ger og nye funk­tio­ner tilføjes. Projektet ved­li­ge­hol­des aktivt og er til­gæn­ge­ligt under MIT-licensen ligesom sin forgænger. Desuden vi­de­re­ud­vik­les apm, Atom Package Manager, under navnet ppm (Pulsar Packet Manager) for at muliggøre pro­blem­fri ad­mi­ni­stra­tion af pakker. Pulsar er til­gæn­ge­lig til Windows, macOS og Linux og un­der­støt­ter ad­skil­li­ge pro­gram­me­rings­sprog som HTML, CSS, Ja­va­Script, PHP, Python og flere, i tråd med Atoms op­rin­de­li­ge filosofi.

Billede: Screenshot of the Pulsar website
As a successor to GitHub’s Atom editor, this Dreamwea­ver al­ter­na­ti­ve benefits from a large community.

Pulsars største styrke ligger i den kon­se­kven­te vi­dere­fø­rel­se af dens modulære ar­ki­tek­tur: Ek­si­ste­ren­de Atom-pakker fungerer for det meste fortsat, og com­mu­ni­ty­et arbejder konstant på at migrere vigtige ud­vi­del­ser. Kendte funk­tio­ner omfatter blandt andet:

  • In­tel­li­gent au­to­fuld­fø­rel­se: Editoren foreslår passende ko­destyk­ker og funk­tio­ner under ind­tast­nin­gen, som nemt kan indsættes.
  • Pak­ke­hånd­te­ring med ppm: Ligesom apm giver ppm mulighed for at in­stal­le­re, fjerne og opdatere ud­vi­del­ser direkte i editoren eller via ter­mi­na­len.
  • Git-in­te­gra­tion: Pulsar tilbyder visuel Git-support til sporing og styring af ændringer i kil­de­ko­den.
  • Temaer og UI-til­pas­nin­ger: Editoren kan tilpasses i vid ud­stræk­ning både visuelt og funk­tio­nelt, så den passer til in­di­vi­du­el­le behov, og un­der­støt­ter for­skel­li­ge far­ve­ske­ma­er og ta­sta­tur­gen­ve­je.

Takket være den aktive del­ta­gel­se af tidligere Atom-brugere fort­sæt­ter projektet med at vokse støt. Der findes også om­fat­ten­de do­ku­men­ta­tion på hjem­mesi­den.

Fordele Ulemper
Meget udvidelig Ufor­e­ne­lig­hed med ældre Atom-pakker
In­te­gre­re­de løsninger til pak­ke­hånd­te­ring og ver­sions­kon­trol
Frem­ra­gen­de un­der­støt­tel­se af pro­gram­me­rings­sprog

Oversigt over de bedste open source-al­ter­na­ti­ver til Dreamwea­ver

Adobe Dreamwea­ver tilbyder pro­gram­me­rings­be­gyn­de­re en om­fat­ten­de pakke til udvikling af hjem­mesi­der med ad­skil­li­ge værktøjer og direkte for­bin­del­ser til Creative Cloud, der giver alt, hvad der er nød­ven­digt for at skabe en vellykket og kunst­ne­risk designet til­ste­de­væ­rel­se på in­ter­net­tet. Dette medfører dog stor kom­plek­si­tet og løbende om­kost­nin­ger. Derudover er Adobe-software ikke kendt for at være en res­sour­ce­ef­fek­tiv løsning. Erfarne udviklere benytter typisk re­di­ge­rings­pro­gram­mer, der tilbyder større flek­si­bi­li­tet.

De open source-al­ter­na­ti­ver til Dreamwea­ver, der præ­sen­te­res i denne guide, udgør en mellemvej mellem den modulære tilgang i Adobes program og grund­læg­gen­de kodning ved hjælp af en stan­dard­tek­ste­di­tor. Dette skyldes ho­ved­sa­ge­ligt den frit til­gæn­ge­li­ge kildekode, som giver open source-we­be­di­to­rer deres store flek­si­bi­li­tet. Du kan bruge et program som Pulsar enten som en mini­ma­li­stisk editor med syn­taks­frem­hæv­ning og ko­de­kom­plet­te­ring eller som et om­fat­ten­de ud­vik­lings­mil­jø, der kun på få områder halter bagefter det kom­merci­el­le Dreamwea­ver.

På den anden side kan du ikke forvente samme sta­bi­li­tet med gratis løsninger som med Adobe-produkter. Pro­fes­sio­nel software som Dreamwea­ver udvikles løbende, så den over­hol­der de nyeste web­s­tan­dar­der og ofte tilbyder – som med Dreamwea­ver – en om­fat­ten­de pakke, der er blevet forfinet gennem årtier. Hvis du støder på softwa­re­pro­ble­mer eller har brug for hjælp til dit projekt, er der kompetent support til rådighed. Med gratis løsninger er du afhængig af hjælp fra bru­ger­fæl­les­ska­bet – uanset om det drejer sig om tekniske problemer med pro­gram­met eller generel udvikling.

HTML5 og CSS3 PHP Funk­tio­ner
VS Code om­fat­ten­de ud­vik­lings­mil­jø
Aptana Studio Ja­va­Script- og Ruby-on-Rails-debugger baseret på Eclipse
Pulsar Mange ekstra pakker
Phoenix Inline-re­di­ge­rings­pro­gram­mer til CSS og Ja­va­Script
KompoZer lille fil­stør­rel­se
Gå til ho­ved­me­nu­en