Visuella mediefrågor

Stöd för linting

I den nya versionen av Dreamweaver kan du identifiera vanliga kodfel med hjälp av linting. Linting innebär att du kör ett program som identifierar potentiella fel i koden. I Dreamweaver kan du kodgranska HTML-, CSS- och JavaScript-filer när de läses in, sparas eller redigeras. Fel och varningar visas sedan på den nya utdatapanelen.

Mer information finns i Granska kod.

Stöd för Emmet

Är du en hängiven utvecklare som skriver många rader kod i Dreamweaver? Då kan du spara tid med Emmet-förkortningar. Förkortningarna är enkla att komma ihåg och att skriva, och de utökas till fullständig kod i kodvyn när du trycker på Tabb.

Mer information finns i Infoga kod med Emmet.

CSS-preprocessorer

Förhandsvisa bilder och färger i kodvyn

Förhandsvisning

Nu kan du förhandsvisa bilder i kodvyn i Dreamweaver genom att hålla muspekaren över bildens URL-adress.

Du kan förhandsvisa bilder för fjärrsökvägar som <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

Om du inte kan förhandsvisa fjärrsökvägen i Dreamweaver visas meddelandet ”Det gick inte att läsa in bilden”.

Du kan förhandsvisa följande bildfiltyper:

JPEG
JPG
PNG
GIF
BMP
SVG

Bilden förhandsvisas när du håller muspekaren över URL-adresserna i följande fall:

• url( );
• data-uri( )
• Src-attributvärdet för img-taggen

Förhandsvisa färg

Resursförhandsvisningen i kodvyn har förbättrats ytterligare. Nu kan du förhandsvisa färger i kodvyn i Dreamweaver genom att hålla muspekaren över färgvärden. Följande format stöds:

3- och 6-siffriga hexadecimala färgvärden: #ff0000;
RGB: rgb(0, 0, 0),
RGBA: rgba(0, 255, 228,0.5),
HSL: hsl(120, 100%, 50%),
HSLA: hsla(120, 60%, 70%, 0.3),
Fördefinierade färgnamn: olivgrön, blågrön, röd, etc.

Nya kodfragment

Kodfragment är delar av kod som du kan återanvända flera gånger i dina projekt. I den här versionen av Dreamweaver finns nya och uppdaterade kodfragment:

• Boostrap_kodfragment
• CSS_animering_och_övergångar
• CSS_effekter
• CSS_kodfragment
• HTML_kodfragment
• JavaScript-kodfragment (uppdaterade)
• PHP_kodfragment
• Preprocessor_kodfragment
• Responsiv_design_kodfragment

Information om hur du använder kodfragment finns i Arbeta med kodfragment.

Bootstrap-integrering

Nu kan du öppna webbplatser som har skapats med Bootstrap framework (version 3 och senare) i Dreamweaver och redigera sidorna med kod eller visuella designfunktioner. Dreamweaver kan identifiera associerade CSS-filer om filnamnen innehåller ordet ”bootstrap”. 

Du kan också lägga till Bootstrap-komponenter i Dreamweaver (Infoga-panelen) och ändra designen för olika visningsrutor genom att snabbt och enkelt redigera stödraster.

Mer information finns i Arbeta med Bootstrap-filer.

Bootstrap-startmallar

Nu finns nya och responsiva startmallar som hjälper dig att snabbt komma igång med en responsiv design i Dreamweaver. Du kommer åt följande Bootstrap-mallar i dialogrutan Nytt dokument:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

Kodinfällning

Nu kan kodinfällning användas i HTML-, CSS-, LESS-, SASS-, SCSS-, JS-, PHP-, XML- och SVG-filer baserat på taggblock. När du håller muspekaren över kolumnen med radnummer visas en liten triangel bredvid radnumret i kodvyn. Du kan klicka på triangeln för att komprimera/utöka kodblocken. Den nya kodinfällningsfunktionen ersätter den befintliga funktionen som är baserad på markeringar.

Kodinfällningsikonerna (inverterade trianglar) visas för alla taggblock som har mer än två rader med kod i kodvyn.

Kodinfällningens tillstånd behålls när du använder kopiera, klipp ut, klistra in och dra och släpp. När du till exempel kopierar ett komprimerat kodblock och väljer Klistra in, klistras den kopierade texten in som ett komprimerat block.

Kodinfällning i HTML-filer

Till skillnad från den tidigare kodkomprimeringsfunktionen ingår nu sluttaggen i det komprimerade innehållet och innehållet återges på ett annat sätt.

Antalet tecken som visas i komprimerade kodblock har ökat. Det gör att du kan förhandsvisa initiala attribut (om sådana finns) i det komprimerade taggblocket. Om den komprimerade Div-taggen har id- och klassattribut ser det komprimerade blocket ut så här:

I Windows kan du förhandsvisa koden i ett komprimerat block genom att hålla muspekaren över den komprimerade koden. Det komprimerade blocket utökas automatiskt när koden i ett komprimerat block får fokus via taggväljaren, sök och ersätt, gå till rad, elementsnabbvyn, Live-vyn eller ångra/gör om. När fokus riktas utanför kodblocket komprimeras blocket automatiskt.

Kodinfällning i CSS-, LESS-, SASS-, SCSS- och JS-filer

Nu kan kodblock som omges av klammerparenteser komprimeras i CSS-, Less-, Sass-, SCSS- och JS-filer.

Håll muspekaren över valfri rad som innehåller den inledande klammerparentesen (”{”).

När du klickar på Komprimera komprimeras innehållet mellan de två matchande klammerparenteserna och ”{…}” visas i förhandsvisningen.

Kodinfällning i PHP-filer

Förutom PHP-kodblock kan även HTML-element och CSS- och JS-kodblock komprimeras i PHP-filer.

Alla PHP-block som inleds med ”<?php” och avslutas med ”?>” kan komprimeras.

Håll muspekaren över valfri rad som innehåller <?php och klicka på komprimeringsikonen om du vill komprimera kodblocket.