Användarhandbok Avbryt

Kodtips och kodkomplettering

 

 

Använd Dreamweavers kodtips och kodkompletteringsfunktioner för att minimera kodningstiden.

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.

Språk och tekniker som stöds

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

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.

Inställningar för kodtips
Inställningar för 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.

Grundläggande HTML-kodtips
Grundläggande HTML-kodtips

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.

Kodtips för attributnamn
Kodtips för attributnamn

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. 

Exempel på tips för statiska attributvärden
Exempel på tips för statiska attributvärden

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.

Dynamiska kodtips för src
Dynamiska kodtips för src

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.

Inkludera en CC Library-resurs i koden
Inkludera en CC Library-resurs i koden

Obs!

Högst 50 CC Library-resurser kan visas i kodtipsen. Tipsen visas i bokstavsordning.

Obs!

CC Library-resurser på fjärrservrar kan inte användas i Dreamweaver-kod.

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 href
Dynamiska kodtips för href

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.

Dynamiska kodtips för id
Dynamiska kodtips för id

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

Dynamiska kodtips för style
Dynamiska kodtips för style

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.

Kodtips för CSS @rule
Kodtips för CSS @rule

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. 

Kodtips och hjälp för CSS-egenskaper
Kodtips och hjälp för CSS-egenskaper

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.

Färgrelaterade kodtips för CSS
Färgrelaterade kodtips för CSS

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

Färgrutor från CC Libraries indikeras av molnikonen
Färgrutor från CC Libraries indikeras av molnikonen

Obs!

Högst 50 CC Library-resurser kan visas i kodtipsen. Tipsen visas i bokstavsordning.

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.

Kodtips för pseudoväljare
Kodtips för pseudoväljare

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.

Kodtips för pseudoelement
Kodtips för pseudoelement

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
Kodtips för CSS-egenskapen background
Kodtips för CSS-egenskapen background

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.

Tips som visas för CSS-egenskaper
Tips som visas för CSS-egenskaper

JavaScript-kodtips

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

I nedanstående exempel indikerar kodfragmentet typen.

JavaScript-kodtips
JavaScript-kodtips

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. 

Obs!

Den automatiska uppdateringen fungerar emellertid bara om du redigerar JavaScript-filerna i Dreamweaver.

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.

Kodtips som indikerar variabeltypen
Kodtips som indikerar variabeltypen

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.

PHP 7-kodtips
PHP 7-kodtips

Ett exempel på kodtips för PHP-objekt
Ett exempel på kodtips för PHP-objekt

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: 

  1. Avsluta Dreamweaver.

  2. Öppna brackets.json från följande plats via en textredigerare:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. Klicka på knappen Spara struktur överst till höger i dialogrutan.

    I JSON-filen lägger du till ett komma efter paret last name/value.

    Lägg till följande rad med den önskade fördröjningstiden i millisekunder: ”delayInPHPHint”: <tid i millisekunder>. Exempel ”delayInPHPHint”: 200.

  4. Spara filen och starta Dreamweaver.

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.

Obs!

Kodtipsen du skapar är specifika för webbplatsen som har valts på filpanelen i Dreamweaver. Sidan du arbetar med måste finnas på den valda webbplatsen för att kodtipsen ska kunna visas.

  1. Välj Plats > Platsalternativ > Platsspecifika kodtips.

    Platsen genomsöks standardmässigt med kodtipsfunktionen för att kunna avgöra vilket CMS-ramverk (Content Management System) du använder. Det går normalt att använda tre ramverksprogram med Dreamweaver: Drupal, Joomla och Wordpress.

    Via de fyra knapparna till höger om popup-menyn Struktur kan du importera, spara, byta namn på och ta bort ramverksstrukturer.

    Obs!

    Det går inte att ta bort eller byta namn på befintliga standardramverk.

  2. Ange underrotmappen där du vill spara ramverkets filer i textrutan. Du kan klicka på mappikonen bredvid textrutan om du vill bläddra till platsen för ramverksfilen.

    I Dreamweaver visas en filträdsstruktur med mappar som innehåller ramverksfilerna. Om mapparna och filerna du vill genomsöka visas startar du sökningen genom att klicka på OK. Om du vill anpassa sökningen fortsätter du till nästa steg.

  3. Klicka på plustecknet ovanför fönstret Filer när du vill välja en fil eller mapp som ska läggas till i sökningen. I dialogrutan Lägg till filer/mappar kan du ange vilka filnamnstillägg du vill ta med i sökningen.

    Obs!

    Om du anger ett filnamnstillägg går sökningen snabbare.

  4. Ta bort filer från sökningen genom att markera filerna du inte vill söka igenom och klicka sedan på minusknappen (-) ovanför fönstret Filer.

    Obs!

    Om du har valt Drupal eller Joomla som ramverk visas ytterligare en sökväg till en fil i konfigurationsmappen i Dreamweaver i dialogrutan Platsspecifika kodtips.

    Ta inte bort den – den behövs när du använder ramverken.

  5. Ange hur en viss fil eller mapp ska hanteras i kodtipsfunktionen genom att markera filen eller mappen i listan och sedan göra ett av följande:

    • Markera Genomsök den här mappen när du vill ta med den markerade filen i sökningen.
    • Markera Rekursiv när du vill ta med alla filer och mappar i den markerade katalogen.
    • Klicka på knappen Tillägg när du vill öppna dialogrutan Sök tillägg och ange filnamnstillägg som ska ingå i sökningen efter en viss fil eller mapp.

Spara platsstruktur

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

  1. Avsluta Dreamweaver.

  2. Text för steg
  3. Skapa fil- och mappstrukturen genom att lägga till och ta bort filer och mappar.

  4. Ange ett namn på platsstrukturen och klicka på Spara.

Obs!

Om namnet du anger redan används visas ett meddelande om att du ska ange ett annat namn eller bekräfta att du vill ersätta strukturen med samma namn. Det går inte att ersätta befintliga standardramverk.

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.

  1. Visa strukturen du vill byta namn på.

  2. Klicka på knappen Byt namn på struktur överst till höger i dialogrutan.

  3. Ange ett nytt namn på strukturen och klicka på Byt namn.

Obs!

Om namnet redan används visas ett meddelande om att du ska ange ett annat namn eller bekräfta att du vill ersätta strukturen med samma namn. Det går inte att ersätta befintliga standardramverk.

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. 

  1. Klicka på plusknappen (+) ovanför fönstret Filer när du vill öppna dialogrutan Lägg till fil/mapp.

  2. Ange sökvägen till filen eller mappen du vill lägga till i textrutan Lägg till fil/mapp. Du kan också klicka på mappikonen bredvid textrutan om du vill bläddra till platsen för en fil eller mapp.

  3. Klicka på plusknappen (+) ovanför fönstret Tillägg om du vill ange filnamnstilläggen för filerna du vill genomsöka.

    Obs!

    Om du anger ett filnamnstillägg går sökningen snabbare.

  4. Klicka på Lägg till.

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.

  1. Klicka på knappen Tillägg i dialogrutan Platsspecifika kodtips.

    I dialogrutan Sök tillägg visas de sökbara tilläggen.

  2. Lägg till ytterligare ett tillägg i listan genom att klicka på plustecknet (+) ovanför fönstret Tillägg.

  3. Ta bort ett tillägg från listan genom att klicka på minusknappen (-).

Få hjälp snabbare och enklare

Ny användare?