Kodtips och kodkomplettering

I Dreamweaver används smarta funktioner för kodkomplettering och kodtips för att du ska kunna infoga och redigera kod snabbt genom att minska stavfel och andra vanliga misstag.

Du kan också använda den här funktionen för att se:

• tillgängliga attribut för en tagg
• tillgängliga parametrar för en funktion eller
• tillgängliga metoder för ett objekt.

Dreamweaver stöder kodtips för följande språk och tekniker:

• HTML
• CSS
• JavaScript 
• PHP

Läs vidare om du vill veta hur kodtips och kodkomplettering fungerar för de här språken.

Aktivera kodtips

Klicka på Redigera > Inställningar > Kodtips och välj Aktivera kodtips om du vill använda kodtips. Om du vill inaktivera kodtips avmarkerar du Aktivera kodtips.

Om du vill aktivera automatisk infogning av klammerparenteser och citattecken markerar du Infoga parenteser automatiskt och Infoga citattecken automatiskt.

Om du vill aktivera beskrivningar i kodtips väljer du Aktivera beskrivande verktygstips. Då visas beskrivningar tillsammans med dina kodtips.

HTML-kodtips

Följande typer av kodtips finns för HTML:

• Taggtips
• Tips för attributnamn
• Tips för attributvärden

Taggtips

Tryck på < på tangentbordet för att börja skriva koden. När du skriver visas giltiga HTML-taggar. Om strängen som du skriver visas på menyn, bläddrar du till den och trycker på Retur för att slutföra inmatningen.

Om du till exempel skriver < visas en popup-meny med taggnamn. I stället för att skriva resten av taggnamnet kan du välja taggen från menyn för att lägga in den i texten.

Dessa HTML-taggtips kan också innehålla en kort beskrivning av taggen.

Tips för attributnamn

I Dreamweaver visas lämpliga attribut för taggar när du kodar. Skriv ett taggnamn och tryck på Blanksteg för att visa giltiga attributnamn du kan använda.

Tips för attributvärden

Tipstext för attributvärden kan vara statisk eller dynamisk (kodtipsen visar värden som baseras på vad som finns
i relaterade filer). 

De flesta tips för attributvärden är statiska. Attributvärdet target är till exempel statiskt. Därför är tipsen också statiska. 

Dreamweaver visar dynamiska kodtips för de attributvärden som kräver det – till exempel id, target, parameter, href och class.

Här är några exempel på dynamiskt visade kodtips. 

Dynamiska kodtips för src

När du skriver src i det här exemplet visas giltiga attributvärden, och när du väljer images, visar Dreamweaver giltiga bilder som finns i din bildmapp. Du kan sedan skrolla nedåt och välja den som du vill ha.

Om du har resurser i CC Libraries visas även dessa resurser när du skriver src. CC Libraries-resurserna indikeras med en molnsymbol.

När du väljer en CC Library-resurs visas en popup-meny där du kan sampla om bildstorleken och ändra bildformatet.

Dynamiska kodtips för href

När du skriver href visar Dreamweaver en lista med filer i din mapp. Du kan också bläddra och välja filen som du vill länka till.

Dynamiska kodtips för id och style

Om du har definierat id:n i dina CSS-filer visas alla tillgängliga id:n när du skriver id i dina HTML-filer.

Om du har definierat CSS-format visas på samma sätt alla tillgängliga format när du skriver style i dina HTML-filer.

CSS-kodtips

Kodtips är tillgängliga för följande typer av CSS:

• @regler
• Egenskaper
• Pseudoväljare och pseudoelement
• Kort notation

Förutom kodtips finns det även tips för CSS-egenskaper.

Kodtips för @-regler i CSS

Dreamweaver visar kodtips för alla @-regler tillsammans med en beskrivning av CSS-regeln som visas här.

Tips för CSS-egenskaper

När du skriver kolon i CSS-egenskaper visas kodtips för att hjälpa dig välja ett giltigt värde.

I följande exempelkod visas giltiga teckensnittsuppsättningar när du skriver font-family:.

Du kan välja en av teckensnittsuppsättningarna eller öppna dialogrutan Hantera teckensnitt från tipsen och ange de teckensnitt du vill använda. 

Ett annat exempel på praktiska kodtips är när du arbetar med färger i CSS. När du skriver någon färgrelaterad egenskap (till exempel border-color eller background-color) visas en lista med färger när du trycker på kolon. Du kan välja en färg från listan eller öppna färgväljaren i kodtipsen och välja en färg.

Om du har färgrutor i CC Libraries visas även dessa i kodtipsen.

Tips för pseudoväljare och pseudoelement

Du kan lägga till en CSS-pseudoväljare för att definiera ett särskilt tillstånd för ett element. Om du till exempel använder :hover tillämpas formatet när användaren hovrar över elementet som definierats i väljaren.

När du skriver ”:” visar Dreamweaver en lista över giltiga pseudoväljare om markören är i rätt sammanhang.

När du skriver ”::” visar Dreamweaver en lista över giltiga pseudoelement (används för att ange format för specifika delar av ett element) om markören är i rätt sammanhang.

Tips för kort CSS-notation

Egenskaper med kort notation är CSS-egenskaper som låter dig ange värden för flera andra CSS-egenskaper samtidigt. Exempel på CSS-egenskaper med kort notation är background och font.

Om du skriver en CSS-egenskap med kort notation, till exempel background enligt exemplet nedan, och trycker på Blanksteg visar Dreamweaver:

• Lämpliga egenskapsvärden i relevansordning
• Obligatoriska värden som måste användas (om du till exempel använder font så är font-size och font-family obligatoriska)
• Webbläsareutökning för den egenskapen

När CSS-egenskaper med kort notation fylls i visar kodtipsen även egenskapsvärdena du angett.

CSS-kodtips

För vissa CSS-egenskaper (till exempel box-shadow eller text-shadow) visar Dreamweaver tips som indikerar vilka värden som ska användas, och även vilka värden som är obligatoriska med en asterisk. 

Du kan också se hur webbläsaren tolkar CSS-koden.

JavaScript-kodtips

I JavaScript-filer ger Dreamweaver kodtips för variabler och funktionsparametrar. 

I nedanstående exempel indikerar kodfragmentet typen.

Dreamweaver uppdaterar automatiskt listan med tillgängliga kodtips medan du arbetar i JavaScript-filerna. Anta att du arbetar i en primär HTML-fil och växlar till en JavaScript-fil för att göra ändringar. Den ändring du gör i JavaScript-filen återspeglas i listan med kodtips när du går tillbaka till den primära HTML-filen. 

Direkt objektgranskning

Dreamweaver uppdaterar också automatiskt kodtips om JavaScript-typen.

Om du till exempel har definierat en variabel som numerisk lagrar Dreamweaver den informationen. När du hänvisar till den variabeln i din kod får du en indikation om vilken typ det är.

Om du ändrar variabeltypen (till exempel till en sträng) så visar Dreamweavers kodtips automatiskt att variabeln är en sträng.

Dynamisk dokumentation

När Dreamweaver visar tips om en viss funktion som du har lagt till kommentarer för så visar Dreamweaver även dokumentationen för den funktionen. 

PHP-kodtips

Dreamweaver stöder kodtips för versionerna PHP 5.6 och 7.1. Dessa PHP-kodtips är webbplatsspecifika och täcker alla centrala funktioner, klasser och konstanter.

Mer information om PHP 5.6 och 7.1 finns i PHP-handboken.

Mer information om webbplatsspecifika kodtips finns i Webbplatsspecifika kodtips.

En praktisk funktion för PHP-kodtips är automatisk komplettering av variabler.

När du skriver ett dollartecken ($) visas en lista med alla variabler i det aktuella skriptet. Markera den du vill ha och tryck på Retur. Variabler från relaterade filer visas också, vilket eliminerar risken för att återanvända samma variabel i ett annat syfte.

När PHP 7.1 är angett som standard visas PHP 7.1-specifika kodtips i Dreamweaver.

Redigera fördröjningsinställningar för PHP-kodtips

I Dreamweaver 2017.5 och senare versioner har en fördröjning av PHP-kodtips lagts till för att förbättra inmatningsprestanda i PHP-filer. När du skriver PHP-kod visas tipsen i Dreamweaver med en fördröjning på 400 ms. Om du vill ändra fördröjningsinställningarna för PHP-koden gör du så här: 

Platsspecifika kodtips

Dreamweaver gör att utvecklare som använder Joomla, Drupal, Wordpress och andra ramverksprogram kan visa PHP-kodtips när de skriver i kodvyn. Om du vill visa kodtipsen måste du först skapa en konfigurationsfil med hjälp av dialogrutan Platsspecifika kodtips. Konfigurationsfilen anger var Dreamweaver ska leta efter kodtips som är specifika för din webbplats.

En självstudiekurs om hur du arbetar med platsspecifika kodtips finns på www.adobe.com/go/learn_dw_comm13_se.

Skapa konfigurationsfilen

Skapa konfigurationsfilen som behövs för att visa kodtips i Dreamweaver med hjälp av dialogrutan Platsspecifika kodtips.

Normalt sparas konfigurationsfilen i katalogen Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

Spara platsstruktur

Du kan spara den anpassade platsstrukturen du har skapat i dialogrutan Platsspecifika kodtips.

Byta namn på strukturer

Tänk på att du inte kan använda namnen på någon av de tre standardramverken eller ordet ”custom” när du byter namn på platsstrukturen.

Lägga till filer eller mappar i en platsstruktur

Du kan lägga till filer och mappar som är kopplade till ditt ramverk. När du har lagt till filer eller mappar kan du ange filnamnstillägg för filerna du vill genomsöka. 

Söka på en plats efter filnamnstillägg

Använd dialogrutan Sök tillägg när du vill visa och redigera filnamnstilläggen som ingår i platsstrukturen.