Användarhandbok Avbryt

Kodningsmiljön i Dreamweaver

 

 

Lär dig hur du kan använda kodningsmiljön i Dreamweaver för att skriva kod mycket snabbare.

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.

Obs!

Om de fördefinierade arbetsytorna inte innehåller exakt det du behöver, kan du anpassa en egen arbetsytelayout. Öppna och docka paneler där du vill ha dem och spara sedan arbetsytan som en egen arbetsyta. Mer information finns i Skapa anpassade arbetsytor.

Arbeta med kod i Dreamweaver

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

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

Välj Visa > Kod.

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

  1. Välj Visa > Kod och design.

    Koden visas i den översta rutan och sidan visas i den nedersta rutan.

  2. Om du vill visa sidan högst upp väljer du Design överst från menyn Visa alternativ i dokumentets verktygsfält.
  3. Om du vill justera storleken på rutorna i dokumentfönstret drar du det delade fältet till önskad position. Det delade fältet ligger mellan två rutor.

    Kodvyn uppdateras automatiskt när du gör ändringar i designvyn. När du har gjort ändringar i kodvyn uppdaterar du dokumentet i designvyn manuellt genom att klicka i designvyn eller trycka på F5.

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.

  1. Välj Fönster > Kodpanelen. Verktygsfältet innehåller följande alternativ:

    Filhantering

    Skickar eller hämtar filen.

    Förhandsgranska/felsöka i webbläsare

    Förhandsvisar eller felsöker dokumentet i en webbläsare.

    Uppdatera design

    Uppdaterar dokumentet i designvyn så att det speglar ändringar som du har gjort i koden. Ändringar som du gör i koden visas inte automatiskt i designvyn förrän du utför vissa åtgärder, som att t.ex. spara filen eller klicka på den här knappen.

    Kodnavigering

    Gör att du kan förflytta dig snabbt i koden. Mer information finns i Gå till en JavaScript- eller VBScript-funktion.

    Visningsalternativ

    Anger hur du vill att koden visas. Mer information finns i Ställa in kodens utseende.

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:

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

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.

Obs!

Alternativet att markera felaktig kod i kodvyn är avstängd som standard. Sätt igång det genom att byta till kodvyn (Visa > Kod) och därefter välja Visa > Visningsalternativ för kod > Markera felaktig kod.

Du kan ange inställningar för att automatiskt skriva om flera olika typer av ogiltig kod när du öppnar ett dokument.

Mer information om hur du anger kodningsinställningar finns i Ange kodningsinställningar.

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.

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Macintosh).
  2. Välj Filtyper/redigerare i kategorilistan till vänster.
  3. I rutan Öppna i kodvyn lägger du till filnamnstillägget för filtypen som du vill öppna automatiskt i kodvyn.

    Skriv in ett mellanslag mellan filnamnstilläggen. Du kan lägga till hur många tillägg du vill.

Få hjälp snabbare och enklare

Ny användare?