2015-utgåvan av Dreamweaver CC fokuserar på responsiv design, förbättringar av kodredigeringsfunktioner, förhandsgranskning av webbsidor på enheter och batchextrahering av webboptimerade bilder med flera upplösningar från Photoshop-kompositioner. Integrering med Bootstrap-ramverket hjälper dig att skapa mobilprioriterade responsiva webbplatser. Visuella mediefrågor kompletterar designupplevelsen för responsiva webbsidor eftersom du kan visualisera och modifiera din design vid olika brytpunkter. 

Den här utgåvan innehåller också flera förbättringar av redigeringsfunktionerna i Live-vyn och CSS Designer. I den här artikeln beskrivs dessa nya funktioner och förbättringar. Artikeln innehåller också länkar till resurser där du kan få mer hjälp.

I Dreamweaver kan du testa dina produktionsklara webbsidor samtidigt i flera enheter. Du kan se hur webbsidan flödas om i olika varianter och testa interaktiva funktioner på sidorna. Du kan göra allt detta utan att behöva installera någon mobilapp eller behöva ansluta enheterna till datorn fysiskt. Skanna bara den autogenererade QR-koden med enheterna och förhandsgranska dina webbsidor på enheterna.

När Live Inspect aktiveras på skrivbordet återspeglas det på alla anslutna enheter och hjälper dig att inspektera olika element och justera designen om det behövs.

Detaljerad information finns i Förhandsgranska och inspektera webbsidor på flera enheter.

Visuella mediefrågor

Fälten för visuell mediefråga är en visuell representation av de mediefrågor som finns på en sida. Med de här fälten blir det lättare för dig att se webbsidan med olika brytpunkter och se hur olika delar av webbsidan formateras på nytt i olika visningsrutor. När du visar sidan i olika visningsrutor kan du göra designändringar för en viss visningsruta utan att siddesignen i andra visningsrutor påverkas.

Visuell mediefråga består av tre fält i form av vågräta rader, där varje rad representerar en kategori mediefrågor:

•  Grön: mediefrågor med max-width-villkor
•  Blå: mediefrågor med både min-width- och max-width-villkor
•  Lila: mediefrågor med min-width-villkor

Mer information finns i 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 kod analyseras för att flagga potentiella fel eller misstänkt kodanvändning. 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.

Förhandsvisning i kodvyn

Om du arbetar i delad vy kan du se ändringar i bilder och färger direkt i Live-vyn eller designvyn. Men om du föredrar att jobba i kodvyn är bilderna bara filnamn och det blir ofta mindre tydligt. Färgerna (om det inte är fördefinierade färger som används) är också bara en uppsättning siffror. I den här versionen av Dreamweaver kan du snabbt förhandsvisa bilder och färger direkt i kodvyn. Med hjälp av den här funktionen kan du tydligare se sambandet mellan bildernas filnamn och färgformaten för de bilder och färger de representerar. Det gör att du kan fatta snabbare beslut om olika designer och utvecklingstiden blir mycket kortare.

Mer information finns i Förhandsvisa bilder och färger i kodvyn.

I kodvyn visas även en förhandsgranskning av fel. Den felaktiga kodens radnummer är markerat i rött. Om du håller muspekaren över numret visas en kort beskrivning av felet.

Obs! Endast det första felet i raden visas. Om raden bara innehåller en varning visas en beskrivning av varningen. Om raden innehåller en varning och ett fel visas en felbeskrivning.

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
• Kodfragment för responsiv design

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

Med funktionen för molnsynkronisering kan du nu även hålla kodfragmenten uppdaterade i alla dina Dreamweaver-installationer. Mer information om synkronisering av kodfragment med Creative Cloud dina Dreamweaver-installationer finns i Synkronisera inställningarna för Dreamweaver med Creative Cloud.

Bootstrap-integrering

Bootstrap är det populäraste kostnadsfria HTML-, CSS- och JavaScript-ramverket för utveckling av responsiva webbplatser för mobila enheter (”mobile-first”). Ramverket innehåller responsiva CSS- och HTML-mallar för knappar, tabeller, navigering, bildspel (carousel) och andra element som du kan använda på dina webbsidor. Det finns också några JavaScript-pluginprogram som gör att även utvecklare med grundläggande programmeringskunskaper kan utveckla fantastiska responsiva webbplatser.

Med Dreamweaver kan du skapa Bootstrap-dokument och redigera befintliga webbsidor som skapats med Bootstrap. Du kan börja designa din Bootstrap-webbplats med en av startmallarna för Bootstrap. Du kan välja mallarna i dialogrutan Nytt dokument (Startmallar > Bootstrap-mallar). 

• Bootstrap-byrå
  
• Bootstrap-eCommerce
• Bootstrap-portfölj
• Bootstrap-produkt
• Bootstrap-fastighet
• Bootstrap-CV
  

Du kan också skapa ett anpassat Bootstrap-dokument i dialogrutan Nytt dokument (nytt dokument > Start). Bygg sedan webbplatsen steg för steg med Bootstrap-komponenter som dragspelspaneler och bildspel på panelen Infoga i Dreamweaver. Om du har Photoshop-kompositioner kan du också använda Extract för att hämta bilder, teckensnitt, format, text med mera i Bootstrap-dokumentet.

Oavsett om du har en Bootstrap-fil med en färdig eller halvfärdig design kan du redigera den i Dreamweaver. Sedan kan du förutom att redigera koden även göra ändringar i designen med visuella redigeringsfunktioner som Live-vyredigering, visuell CSS Designer, visuella mediefrågor och Extract. 

Mer information finns i Arbeta med Bootstrap-filer.

Stöd för att redigera tabeller i Live-vyn

Du kan redigera tabeller i Live-vyn snabbt och lätt med ett eller flera av följande alternativ:

Mer information finns i Ändra storlek på tabeller och Formatera tabeller och celler.

Nya menyer i Live-vyn

Redigeringsfunktionerna i Live-vyn har nu blivit bättre med följande menyer i Live-vyn:

• Ändra
• Format
• Kommandon
• Plats
• Alternativet Klistra in special på Redigera-menyn och snabbmenyn

Stöd för jQuery-gränssnittselement i Live-vyn

Du kan nu infoga jQuery-widgetar direkt i Live-vyn med panelen Infoga. Dra det önskade elementet från panelen Infoga till Live-vyn och håll muspekaren på någon av följande funktioner om du vill infoga:

• Live-stödlinjer: Stödlinjerna visas när du håller muspekaren över elementen i Live-vyn efter att du har dragit elementet du behöver från panelen Infoga. Med Live-stödlinjerna kan du infoga element högst upp eller längst ned, eller till vänster eller höger om ett element i fokus.

• DOM-ikon: DOM-ikonen visas när du pausar en kort stund medan Live-stödlinjerna visas. Klicka på ikonen om du vill visa DOM-strukturen i en ruta och släppa elementet på en exakt plats i dokumentstrukturen.

• Placeringsassistenten: Placeringsassistenten ger dig möjlighet att placera det infogade elementet före, efter eller inkapslat i det element som är i fokus (i Live-vyn).

Mer information finns i Infoga element direkt i Live-vyn.

DOM-panelen

Elementsnabbvyn har ersatts av DOM-panelen (Fönster > DOM). På DOM-panelen finns alla funktioner som fanns i elementsnabbvyn och några till. Panelen är tillgänglig i alla arbetsytor och är beständig, vilket innebär att du kan öppna två dokument och ha tillgång till deras DOM-paneler samtidigt.

Med DOM-panelen kan du:

• Dra element från panelen Infoga för att infoga dem exakt i dokumentstrukturen.
• Kopiera, klistra in, duplicera, flytta eller ta bort strukturelement i dokumentet.
• Visa valfritt element på sidan i samband med dokumentstrukturen – elementet i fokus markeras på DOM-panelen.

Detaljerad information om hur du använder DOM-panelen och redigerar HTML-strukturen med den finns i DOM-panelen.

SVG-kodtips i HTML-dokument

Kodtips för alla SVG-element och attribut stöds nu i HTML-dokument. Med kodtipsen kan du nu lägga till SVG-element i kodvyn i HTML-dokument precis som du lägger till SVG-dokument.

Förhandsvisning av teknik

Från och med den här versionen tillhandahåller teamet bakom Dreamweaver vissa funktioner som samlar in feedback från kunder. Utifrån denna feedback förbättras funktionerna ännu mer och införs så småningom som kärnfunktioner i Dreamweaver. Funktionerna finns under Förhandstitt på teknik i dialogrutan Inställningar.

Förhandsvisningsfunktionen i den här versionen är kodmarkering. Den här funktionen markerar alla förekomster av en markerad text i kodvyn.

Så här använder du funktionen:

Du kan navigera i den markerade texten med följande kortkommandon:

• Markera nästa förekomst: F3 (Windows), Cmd + G (Mac)
• Markera föregående förekomst: Skift + F3 (Windows) Cmd + SKIFT + G (Mac)

Anpassad förhandsgranskning i kodvyn med hjälp av ShowPreview API

Med den här versionen av Dreamweaver kan du skapa en anpassad popup-meny för förhandsgranskning som visas när du placerar markören över koden i kodvyn. Om du vill implementera anpassade förhandsgranskningar du kan använda den nya API:n, showPreview, tillsammans med den befintliga mm:browsercontrol-API:n. Du kan till exempel använda dessa API:er för att visa en förhandsgranskning av alla parametrar för en JavaScript-funktion när du placerar markören över namnet på funktionen.

Mer information finns i Dreamweaver API-referens: kodvisningsfunktioner.

Kodinfällning

I tidigare versioner av Dreamweaver var du tvungen att välja kodblock i kodvyn och sedan komprimera dem. I den här versionen, och senare, kan du komprimera kodblock genom att hålla muspekaren över radnumren och klicka på triangeln som visas.

Kodinfällning (komprimering) kan användas i HTML-, CSS-, LESS-, Sass-, SCSS-, JS-, PHP-, XML- och SVG-filer och baseras på taggblock.

Kodinfällningens tillstånd behålls när du använder kopiera, klipp ut, klistra in samt 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.

Till skillnad från den tidigare kodkomprimeringsfunktionen i HTML-filer, 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 också ökat. Det gör att du kan förhandsvisa initiala attribut (om sådana finns).

Mer information finns i Komprimera kod.

Förbättringar i Extract

• Extract för enheter
• Stöd för procentenheter

Extract för enheter

Enheter är inte bara olika stora, de har olika upplösning också. Din plan för en responsiv webbdesign måste ha olika versioner av bilder med olika upplösning så att de renderas korrekt i olika enheter. Det kan dock vara besvärligt att skapa så många olika versioner av alla bilderna i ditt projekt.

Extract i Dreamweaver förenklar den här uppgiften betydligt. När du extraherar en bild från en Photoshop-komposition i 2015-versionen av Dreamweaver kan du välja att extrahera versioner av bilden med olika upplösning också. Bilden i Photoshop skalas automatiskt till olika fördefinierade upplösningar under extraheringen.

Du kan sedan anropa bilderna i JavaScript eller mediefrågor och visa dem baserat på vilken enhet de visas i. Du kan till exempel använda 2X-versionen av bilden för retina-skärmar med hög täthet. 

Mer information finns i Extrahera bilder från PSD-filer.

Stöd för procentenheter

På Extract-panelen kan du nu visa bredd och höjd för bilder i procent och inte bara i pixlar. Du kan också visa måtten i procent.

När du klickar på en resurs i Extract-panelen visas en ruta där du kan välja att växla mellan pixlar och procent. Den enhet du väljer i rutan gäller även när du visar mått mellan resurser.

Förbättringar av redigering i Live-vyn

Kapslad infogning i Live-vyn

Nu kan du infoga element i andra element i Live-vyn. När du drar element från Infoga-panelen, Resurs-panelen eller inom Live-vyn och håller muspekaren över olika element på sidan, kan du se visuell feedback för kapslade element (tillsammans med före- och efter-guider).

• Före- och efter-guider: När du håller muspekaren över de översta och nedersta 30 % av elementet.
• Kapsla visuell feedback: När du håller muspekaren över elementets mellersta 40 %.

Redigera väljare direkt i elementvisning

Du kan nu klicka på namnet på väljaren i elementvisningen för att redigera den. Du kan tillämpa ändringarna genom att klicka någonstans på sidan.

Ändringar i verktygsfältet Kodning

I verktygsfältet Kodning har följande alternativ som hör till komprimering av kod tagits bort:

• Komprimera hel tagg
• Komprimera markering

Obs! Alternativen har även tagits bort från snabbmenyn och menyn Redigera.   Du kan nu komprimera kod genom att hålla muspekaren ovanför radnumret och klicka på triangeln som visas.   Dessutom är följande alternativ inte längre tillgängliga för HTML-, CSS- och JS-filer.

• Markera felaktig kod
• Syntaxfelsvarningar i informationsfältet

Du kan nu använda linting för att hitta fel i koden och lintingresultaten visas i utdatapanelen.

Förbättringar i CSS Designer

• Lägena Alla och Aktuell
• Tips för egenskapsvärdena
• Färgkodning för mediefrågor
• Övriga förändringar

Lägena Alla och Aktuell

I CSS Designer finns nu två olika lägen för att visa och redigera CSS-egenskaper:

• Alla: alla CSS-formatmallar, mediefrågor och väljare i det aktuella dokumentet visas i det här läget. Det här läget är inte beroende av markeringen i designvyn eller Live-vyn.

Om du vill skapa CSS, mediefrågor eller väljare är det här det bästa läget.

• Aktuell: beräknade format för element som valts i designvyn eller Live-vyn visas i det här läget. Om fokus är på en väljare i en CSS-fil visas väljarens egenskaper i det här läget.

Tips för egenskapsvärdena

I Dreamweaver visas nu kodtips i CSS Designer när du ska ange nya egenskaper, ungefär som i kodvyn.

Färgkodning för mediefrågor

Mediefrågor i CSS Designer-panelen är nu färgkodade för att matcha visuella mediefrågor.

•  Grön: mediefrågor med max-width-villkor
•  Blå: mediefrågor med både min-width- och max-width-villkor
•  Lila: mediefrågor med min-width-villkor

Övriga förändringar

• Alternativet Visa: kryssrutan Visa i området Egenskaper är nu markerad som standard när du startar Dreamweaver första gången. Ändringar som görs för det här alternativet (markera eller avmarkera) gäller sedan för alla efterföljande Dreamweaver-sessioner.

• Panelen rullas ut och Lägg till egenskap visas i mitten: när du klickar på plustecknet (+) i området Egenskaper rullas området ut så att raden Lägg till egenskap visas i mitten av panelen. Om området Egenskaper är för litet visas raden Lägg till egenskap längst ned i panelen.

• Bakgrundsmarkering när ny egenskap läggs till: när textrutan Lägg till ny egenskap är i fokus markeras raden mot en grå bakgrund.

• Placeringen av plus- och minusknapparna (+ resp. –) ändras: plus- och minusknappar som visas i varje ruta i CSS Designer-panelen flyttas från högersidan till vänstersidan för att göra dem mer synliga.

• Kategorin Egen har nytt namn: kategorinamnet för anpassade egenskaper har ändrats till Mer.

Ändringar i arbetsflöde för testserver

Förbättringarna i testserverns arbetsflöde i den här versionen är avsedda att göra det enklare och smidigare att redigera dokument med kod på servern i Live-vyn.

Ändringar i serverkonfigurationen

Till skillnad från tidigare versioner av Dreamweaver kan du nu utse en specifik server som testserver eller fjärrserver, men inte både och. Kryssrutorna i serverkonfigurationens användargränssnitt har ersatts med alternativknappar för serverspecifikationen.

Om du går till en webbplats eller importerar inställningar från en webbplats som skapats i tidigare versioner av Dreamweaver och om webbplatsen har en enda server som angetts som både testserver och fjärrserver skapas en dubblett av servern. En av dem markeras som fjärrserver (med suffixet _remote) och den andra som testserver (med suffixet _testing).

Automatisk överföring av dynamiska filer

Dreamweaver synkroniserar nu automatiskt dynamiska dokument med testservern när du öppnar, skapar eller sparar ändringar i dynamiska dokument. Dreamweaver visar inte längre Uppdatera testservern eller Överför beroende filer för testserverns arbetsflöden.

Mer information finns i Automatisk överföring av dynamiska filer.

Förändringar i Business Catalyst-arbetsflödet

Business Catalyst-tillägget slutar användas och är inte tillgängligt för Dreamweaver CC 2015-utgåvan och senare versioner. Dreamweaver CC 2014.1.1 är den senaste versionen som är kompatibel med Business Catalyst-tillägget.

Använd SFTP-anslutningsalternativet i Dreamweaver för att använda Business Catalyst med Dreamweaver CC 2015 och senare utgåvor. Mer information finns i Business Catalyst-dokumentation.

Här följer det officiella meddelandet för den här ändringen Business Catalyst-webbplatsen. 

Övriga förändringar

• Panelen Infoga är omstrukturerad för att gruppera alla alternativ i kategorierna Allmänt, Layout och Media till den mer logiska kategorin – HTML.

• Videor med snabbgenomgångar och länken för att starta dem från hjälpmenyn har tagits bort. Det här alternativet är inte tillgängligt för andra språk än engelska.

• Alternativen i listrutan för dokumentet längst ned på en sida har rensats bort – endast alternativen Orientering, Verklig storlek och Ändra storlek är nu tillgängliga.