Kodningsmiljön i Dreamweaver

Om du vill arbeta med kod i Dreamweaver kan du välja att använda arbetsytan Utvecklare. Den här arbetsytan visar kodvyn som standard och det är bara panelerna Filer och Fragment som är dockade till vänster på skärmen.

Om du behöver fler funktioner klickar du på Fönster och väljer sedan den panel du behöver.

Du kan arbeta med kod i Dreamweaver på flera olika sätt. Du kan använda:

• Kodvyn: Ren, minimalistisk layout som gör att du kan arbeta enbart med kod, utan extra paneler och fönster. Mer information finns i Visa kod i dokumentfönstret.
• Vyn Dela: I den här vyn visas både kodvyn och Live- eller designvyn så att du kan se ändringarna du gör samtidigt som du kodar. Mer information finns i Koda och redigera sidan samtidigt i dokumentfönstret – delad vy.

Du kan flytta mellan olika vyer genom att klicka på knapparna Kod, Dela och Design/Live högst upp i arbetsytan.

Du kan också använda kodpanelen för att visa din HTML-kod i ett flytande fönster. Med kodpanelen kan du se din webbdesign och koden samtidigt utan att behöva dela vyn. Mer information finns i Visa kod i ett separat fönster med kodpanelen.

Visa kod i dokumentfönstret – kodvyn

Koda och redigera sidan samtidigt i dokumentfönstret - Delad vy

Visa kod i ett separat fönster med kodpanelen

Med kodpanelen kan du arbeta i ett separat kodningsfönster, precis som när du arbetar i kodvyn.

Koda snabbare i Dreamweaver

I kodvyn i Dreamweaver finns det bra kodningsfunktioner som hjälper designer att gå över till utveckling i kodvyn. Erfarna kodare kan utnyttja visuella hjälpmedel som automatiskt indrag, kodfärgning och teckensnitt som kan storleksändras. Det minskar risken för fel och ger bättre läsbarhet.

Här är några av funktionerna som Dreamweaver har att erbjuda.

Kodtips och kodkomplettering

Med funktionen för kodtips (eller kodkomplettering) i Dreamweaver kan du välja taggar, attribut, CSS-format från en popup-meny när du skriver. Den här automatiska kodkompletteringen gör att du kan koda snabbare och med färre fel.

Här är ett exempel som visar hur det fungerar i HTML. 

När du börjar skriva ”<” öppnar Dreamweaver en snabbmeny med alla tillgängliga HTML-taggar. När du fortsätter att skriva din tagg uppdaterar Dreamweaver automatiskt de tillgängliga HTML-alternativen och du kan välja en lämplig tagg. När du trycker på Retur infogar Dreamweaver automatiskt taggen åt dig. Därefter visas ytterligare en popup-meny med alla tillgängliga egenskaper för den taggen.

Det finns även stöd för kodtips för CSS, JavaScript och PHP (PHP-versionerna 5.6 och 7.1). 

Mer information finns i Kodtips och kodkomplettering.

Stöd för PHP-versionerna 5.6 och 7.1

Dreamweaver stöder PHP-versionerna 5.6 och 7.1. 

Du kan välja att kompilera PHP-filerna för din webbplats med PHP-version 5.6 eller 7.1 genom att använda dialogrutan Platskonfiguration (för varje enskild webbplats) eller programinställningar (för alla PHP-filer som sparats utanför Dreamweaver-platser). Dreamweaver ställer sedan in kodtipsen och lintingkontroller för den valda PHP-språkversionen.

För nya Dreamweaver-platser är PHP-kompilatorn som standard den version som angetts i Redigera > Inställningar > PHP.

Mer information om stödet för PHP i Dreamweaver finns i:

• Ange PHP-inställningar
• PHP-kodtips

Allmän information om PHP-versionerna 5.6 och 7.1 finns i följande resurser:

• Migrera från PHP 5.6.x till PHP 7.0.x: http://php.net/manual/en/migration70.php
• Migrera från PHP 7.0.x till PHP 7.1: http://php.net/manual/en/migration71.php
• Mer information om PHP 7.1: http://php.net/releases/7_1_0.php

Kodtips för JavaScript-objekt

Dreamweaver stöder kodtips för objekt i JavaScript. Dreamweaver erbjuder kodtips för grundläggande JavaScript-objekt som vektorer, datum, siffror och strängar. 

Dessutom spårar Dreamweaver de JavaScript-funktioner som du skapar och ger kodtips med dina egna funktionsnamn.

Mer information finns i Kodtips och kodkomplettering.

Omstrukturering av JavaScript-kod

Dreamweaver har stöd för omstrukturering av kod. Omstrukturering av kod är processen där befintlig datorkod omstruktureras utan att dess externa beteende ändras. Koden blir lättare att läsa och förstå. Felsökning av kod går snabbare tack vare komprimerade funktioner och korrekt ersättning. Med omstrukturering av JavaScript kan du byta namn på funktioner och variabler med kontroll över omfånget.

Mer information finns i Skriva och redigera kod.

Kodfärgning för olika filtyper

Dreamweaver stöder kodfärgning för HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML och YAML.

Flera markörer för repetitiva uppgifter

Skriv mer än en kodrad i taget för att snabbt göra saker som att skapa en punktlista, uppdatera en rad strängar och göra flera redigeringar samtidigt.

Den här funktionen höjer produktiviteten enormt eftersom du inte behöver skriva samma kodrad flera gånger. Flera markörer gör det åt dig på en gång.

När du redigerar kod kan du:

• Lägga till flera markörer för att lägga till nytt innehåll på flera ställen
• Markera text på flera ställen om du vill använda samma redigering på olika delar av dokumentet

Mer information finns i Lägga till flera markörer eller flera markeringar.

Snabbredigering av relaterade kodfiler

Om du snabbt vill ändra kod placerar du markören på särskilda kodfragment och använder snabbmenyn eller så trycker du på Ctrl-E (i Windows) eller Cmd-E (på Mac) för att öppna Snabbredigering.

Dreamweaver ger dig sammanhangsberoende kodalternativ och interna verktyg.

Användningsscenario

Tänk dig följande exempel:

Du redigerar en HTML-fil och märker att något ser fel ut i Live-vyn. Du växlar sedan till kodvyn och inser att du måste redigera en annan relaterad fil (t.ex. en CSS-fil) för att åtgärda problemet. 

Högerklicka på den relevanta koden i stället för att byta flikar och klicka sedan på Snabbredigering eller använd ett kortkommando. Dreamweaver öppnar då relevant kodavsnitt i den relaterade CSS-filen i själva HTML-filen.

Sedan kan du redigera CSS-koden utan att behöva navigera därifrån eller växla mellan flikar. Ändringarna uppdateras automatiskt i CSS-filen.

Mer information finns i Snabbredigering.

Sammanhangsberoende CSS-dokumentation

Med Snabbdokument får du dokumentation för CSS-egenskaper direkt i kodvyn.

Du behöver inte navigera till en webbsida utanför Dreamweaver för att få veta mer om CSS-egenskaper. Tryck på Ctrl+K (i Windows) eller Cmd+K (på Mac) så öppnas Snabbdokument.

Mer information finns i Få hjälp med CSS i Dreamweaver via Snabbdokument.

Färdigt stöd för Emmet

Emmet är ett plugin-program som gör att du kan programmera och generera HTML- och CSS-kod snabbt.

Plugin-programmet Emmet ingår i Dreamweaver, vilket gör att du kan använda Emmet-förkortningar utan att behöva lägga tid på att installera plugin-programmet.

Använd Emmet-förkortningar i kodvyn eller kodpanelen i Dreamweaver och tryck på Tabb för att utöka dessa förkortningar till HTML-kod eller CSS.

HTML-förkortningar utökas på HTML- och PHP-sidor.

CSS-förkortningar utökas på CSS-, LESS- Sass- och SCSS-sidor eller i style-taggen på en HTML-sida.

Mer information om hur du använder Emmet finns i Använda Emmet-verktygen med Dreamweaver.

Kodkomprimering

I Dreamweaver kan du komprimera kodavsnitt så att du lättare kan fokusera på de avsnitt som du redigerar. 

Du kan komprimera kod baserat på taggar eller parenteser och du kan komprimera kod baserat på markering. 

Mer information finns i Komprimera och utöka kod.

Kodvalidering

I Dreamweaver finns kraftfulla funktioner för linting som hjälper dig att identifiera fel i koden. 

Vid linting analyseras koden för att flagga potentiella fel eller misstänkt kodanvändning. HTML-syntaxfel, parsningsfel i CSS eller varningar i JavaScript-filer är några exempel på saker som flaggas vid linting i Dreamweaver.

Mer information om linting av kod i Dreamweaver finns i Granska kod.

Om du arbetar med PHP och dokumentet innehåller ogiltig kod visar Dreamweaver den koden i designvyn (om den är öppen) och markerar den i kodvyn (beroende på vilka inställningar du angett).

Om du markerar koden i någon av vyerna visar egenskapskontrollen information om varför koden är ogiltig och hur du åtgärdar den.

Stöd för CSS-preprocessorer

Dreamweaver har nu stöd för vanliga CSS-preprocessorer, som SASS, Less och SCSS, med fullständig kodfärgning, kodtips och kompilering. 

Med hjälp av stödet för CSS-preprocessorer kan du spara tid när du arbetar med stora platser som har komplicerade formatmallar.

Mer information om stöd för CSS-förprocessorer i Dreamweaver finns i Använda CSS-preprocessorer i Dreamweaver.

Spara och återanvända kodfragment

På panelen Kodfragment kan du spara kodblock som används ofta som kodfragment. Du kan sedan infoga de här kodblocken på flera sidor.

Fragment som sparats på fragmentpanelen är inte platsspecifika. Därför kan de återanvändas på olika platser.

Du kan också använda fragment på olika enheter och även på olika versioner av Dreamweaver med hjälp av synkroniseringsinställningar.

Mer information finns i Återanvända kod med fragment.

Förhandsvisa i realtid i webbläsare

Förhandsgranska kodändringarna snabbt i webbläsaren i realtid utan att du behöver uppdatera webbläsaren manuellt. Dreamweaver ansluter nu till webbläsaren så att ändringarna visas direkt i webbläsaren utan att sidan behöver laddas om.

Mer information finns i Förhandsvisning i webbläsare i realtid.

Anpassa kortkommandon

Du kan använda dina favoritkortkommandon i Dreamweaver. Om du är van vid särskilda kortkommandon, t.ex. Skift+Retur för att lägga till en radbrytning eller Ctrl+G för att gå till en viss plats i koden, kan du lägga till dem i Dreamweaver med hjälp av kortkommandoredigeraren.

Instruktioner finns i Anpassa kortkommandon.

Öppna filer i kodvyn som standard

När du öppnar en filtyp som vanligtvis inte innehåller någon HTML-kod (t.ex. en JavaScript-fil) öppnas filen i kodvyn (eller kodpanelen) istället för i designvyn. Du kan ange vilka filtyper som öppnas i kodvyn.