Sammanfattning av nya funktioner

De senaste uppdateringarna till 2014-utgåvan av Dreamweaver CC innehåller integration med Extract som hjälper dig att bygga mobila webbplatser och datorwebbplatser från en PSD-komposition direkt i Dreamweaver. De nya Live-stödlinjerna gör det enklare att placera och ordna om HTML-element, och redigeringen i Live-vyn har förbättrats med ändringar i realtid.

I den här artikeln beskrivs dessa nya funktioner och flera andra förbättringar. Artikeln innehåller också länkar till resurser där du kan få mer hjälp.

Är det första gången du använder Dreamweaver? Har du använt Dreamweaver tidigare, men vill utöka dina kunskaper? Vill du veta vad som har ändrats i den här versionen från förra versionen? Vare sig du är nybörjare, erfaren användare eller bara utvärderar den nya versionen av Dreamweaver får du nu tillgång till alla viktiga utbildningsresurser direkt på välkomstskärmen.

Den senaste uppdateringen till CC 2014-utgåvan av Dreamweaver ger dig snabb tillgång till videor (inklusive nya funktioner), självstudiekurser, tips och tekniker och mycket annat direkt på välkomstskärmen.

Live-stödlinjer och elementsnabbvyikonen visas nu i Live-vyn när du drar bilder från panelen Extract. Dessa visuella hjälpmedel hjälper dig att snabbt och exakt placera bilden i den önskade positionen.

Du kan nu flytta element i Live-vyn genom att dra det associerade taggnamnet. När du håller musmarkören över ett taggnamn visas handmarkören som indikerar att elementet kan dras. Du kan använda Live-stödlinjerna som en visuell hjälp för att se var elementet kommer att placeras när du släpper det.

Du kan nu markera text, bilder eller andra element i en tagg genom att klicka och dra var som helst inuti taggen (markeringsram). Markeringsramen gör det enkelt att välja flera element i en tagg.

Elementvisningen visar nu tipstexten ”Klass/id” för att tydligt ange att en klass eller ett id kan anges.

De ändringar som har gjorts i elementvisningen sparas dessutom när du klickar på plustecknet (+). Du kan även trycka på Enter- eller Retur-tangenten om du vill spara ändringar på samma sätt som i tidigare versioner av Dreamweaver. 

Tio nya färgteman har lagts till i kodvyn:

• RecognEyes
• Havenjark
• Solariserad mörk
• Solariserad ljus
• Vombat
• Monaki
• Schuss
• Tango
• Kallt ljus
• Roboticket

Mer information om teman för kodvyn finns i Ange färgtemat för kodvyn.

Den här uppdateringen innehåller några ändringar i användargränssnittet för CSS Designer och en ändring i standardinställningen för kryssrutan Visa.

Kryssrutan Visa är markerad som standard vid start och ändringar som görs för det här alternativet utförs genomgående för alla Dreamweaver-sessioner. Om du till exempel avmarkerar det här alternativet behålls inställningen och alternativet visas som avmarkerat i nästa Dreamweaver-session.

Följande ändringar har gjorts i användargränssnittet:

• CSS Designer-panelen rullas ut när du lägger till en egenskap: när du klickar på plustecknet (+) i området Egenskaper rullas panelen ut så att raden Lägg till egenskap hamnar nästan i mitten av panelen Egenskaper. Om området Egenskaper är för litet rullar panelen för att visa raden Lägg till egenskap längst ned i området.
• Bakgrundsmarkering: När textrutan Lägg till ny egenskap är i fokus markeras raden mot en grå bakgrund. 
• Placeringen av plus- och minusknapparna (+ resp. −): placeringen av plus- och minusknapparna som visas i varje område på CSS Designer-panelen (Källa, Väljare, Mediefråga och Egenskaper) har nu flyttas från vänstersidan till en placering längst åt höger för att göra dem mer synliga.
• Kategorin Egen kallas nu Mer.

Du kan nu felsöka dina Dreamweaver-dokument som du har öppna i Live-vyn med hjälp av Google Chrome DevTools. I Google Chrome kan du använda port 5471 som du kan aktivera genom att göra följande:

När du nu använder kortkommandon för att återställa inställningar skapar Dreamweaver en säkerhetskopia av inställningen i mappen ”Adobe Dreamweaver CC 2014.1 Backups”. Den här mappen skapas automatiskt i samma mapp som den ursprungliga inställningsmappen för Dreamweaver i Windows och Mac OS.

Den fullständiga sökvägen till säkerhetskopieringsmappen visas i dialogrutan Återställ inställningar.

Dynamiska dokument, t.ex. PHP, CFM och ASP, öppnas inte längre som standard i kodvyn. De öppnas i samma läge (Kod/Live/Delad) som det senast stängda dokumentet eller det senaste dokumentet som var i fokus.

Med Extract i Dreamweaver kan webbdesigners och utvecklare använda designinformation och extrahera webboptimerade resurser direkt i kodningsmiljön. Extract ger dig en komplett och fristående lösning för att extrahera formatinformation och resurser från PSD-kompositioner, vilket minskar behovet av att växla mellan Photoshop och Dreamweaver.

Med panelen Extract i Dreamweaver kan du extrahera CSS, bilder, typsnitt, färger, övertoningar och mått direkt till webbsidan. Förutom dessa primära funktioner i Extract innehåller Dreamweaver också följande unika funktioner:

• Direkt åtkomst till dina PSD-filer i Creative Cloud och till de PSD-filer som delas med dig i en samarbetsmapp
• Sammanhangsberoende kodtips för att enkelt definiera typsnitt, färger och övertoningar i din CSS
• Möjlighet att skapa bildtaggar från PSD-lager genom att dra och släppa objekt
• Klistra in format direkt i Live-vyn (till exempel CSS Designer och elementvisningen)

På vänster sida av standardarbetsytan i Dreamweaver (Extract) finns panelen Extract som hjälper dig att komma i gång snabbt. När du startar Dreamweaver för första gången visas en enkel självstudiekurs på panelen Extract, så att du snabbt kommer igång med arbetsflödena. Klicka på Kom igång när du vill börja använda Extract.

Mer information om Extract-arbetsflödena i Dreamweaver finns i Dreamweaver-integration med Extract.

64-bitarsversionen av Dreamweaver finns nu tillgänglig och har samma stöd för alla funktioner som 32-bitarsversionen. Det här tillägget ger dig nu möjlighet att hämta följande Dreamweaver-byggen från Adobe Creative Cloud:

• Kan jag köra ett 64-bitarsprogram på en 32-bitarsversion av Windows? – Nej
• Kan jag installera både 32- och 64-bitarsversionen på samma Windows-dator? – Nej
  
• Hur kontrollerar jag om det är 32- eller 64-bitarsversionen av Dreamweaver som finns på min dator?
  • Windows: starta Dreamweaver. Öppna Aktivitetshanteraren och sök efter Dreamweaver-processen. Om det startade Dreamweaver-bygget är en 64-bitarsversion är processens namn ”Dreamweaver.exe”. Om det startade bygget är en 32-bitarsversion är processens namn ”Dreamweaver.exe *32”.
    
  • Mac OS: öppna Activity Monitor och kontrollera View > Columns > Kind. Sök efter Dreamweaver i Activity Monitor och kontrollera kolumnen Kind. Om 64-bitarsversionen av Dreamweaver körs visas ”64 bit” i kolumnen Kind.
    

• Live-stödlinjer
• Infoga strukturella element med hög precision
• Snabbmenyn i Live-vyn
• Ändringar i elementvisningen
• Flytta element i Live-vyn
• Tangentbordsnavigering i Live-vyn
• Ändra taggtext i Live-vyn

Live-stödlinjer är visuell feedback i Live-vyn. De visar de möjliga positioner där du kan infoga ett element i följande scenarier:

• När du drar från panelen Infoga.
• När du drar från resurspanelen.
• När du drar (flyttar) element i Live-vyn.

Live-stödlinjer visas när du placerar markören över olika element på sidan innan du släpper ett element. De kan visas ovanför, under, till vänster eller höger om det element du placerar markören över.

• Ovanför och under – visas när du placerar markören över alla typer av element/taggar, med undantag för infogade taggar. När du placerar markören över de första (övre) 50 % av elementet visas stödlinjer ovanför elementet. När du placerar markören över de sista (undre) 50 % av elementet visas stödlinjerna under elementet.

• Vänster och höger – visas när du placerar markören över infogade taggar, till exempel <a> eller <span>, eller över taggar som har float-egenskap angiven.

Du kan använda elementsnabbvyn tillsammans med live-stödlinjerna för att infoga ett HTML-element med hög precision i dokumentstrukturen.  

När du pausar kort innan du släpper elementet visas elementsnabbvyikonen (</>). När du placerar markören över den här ikonen öppnas elementsnabbvyn och du kan släppa elementet inuti elementsnabbvyn.

Du kan nu högerklicka och använda snabbmenyn för att klippa ut, kopiera, klistra in och ta bort element i Live-vyn. Du kan också duplicera element, eller välja den överordnade eller underordnade taggen via snabbmenyn i Live-vyn.

Välj först ett element i Live-vyn för att visa elementvisningen. Högerklicka sedan inom taggområdet för att visa alternativen i den snabbmeny som beskrivs ovan. Kommandona används på taggnivå. 

Nu kan du inte bara använda väljare för ett element utan också skapa en väljare i önskad CSS-källa och tilldela en mediefråga med hjälp av elementvisningen. När du anger en väljare som inte finns i någon formatmall och trycker på Retur, visas alternativ för att välja en CSS-källa och mediefråga i elementvisningen.

Om du inte vill välja någon CSS-källa eller mediefråga trycker du på Esc för att avvisa alternativen.

Nu kan du även högerklicka på en väljare som används om du vill gå till motsvarande kod (alternativet Gå till kod) eller klistra in kopierade stilar (alternativet Klistra in stilar).

Dreamweaver har nu stöd för flyttning av element (på taggnivå) i Live-vyn. Du kan nu markera ett element i Live-vyn och dra och släppa det på en annan position.

När du pausar kort innan du släpper elementet visas elementsnabbvyikonen (</>). När du placerar markören över den här ikonen öppnas elementsnabbvyn och du kan släppa elementet inuti elementsnabbvyn. 

Dreamweaver har nu stöd för navigering av sidelement med hjälp av tangentbordet för att underlätta arbetet för hängivna tangentbordsanvändare och snabba upp webbdesignprocessen. Du kan använda följande tangenter:

• Använd upp- och nedpilarna för att navigera bland de olika sidelementen. Tangentbordsnavigeringen i Live-vyn förenklar åtkomsten till kapslade och figursatta element.
• Använd Tabb-tangenten för att bläddra mellan väljarna i elementvisningen.

Mer information finns i Tangentbordsnavigering i Live-vyn.

Om du trycker på Ctrl+T (Windows) eller Cmd+T (Mac OS) i Live-vyn visas nu en snabbredigerare (Quick Tag Editor) för det element som är markerat. Quick Tag Editor har tre lägen: Ändra tagg, Radbryt tagg och Infoga HTML. Du kan växla mellan lägena med Ctrl/Cmd + T.

Verktygsfältet Dokument har ändrats och är nu mer lättanvänt.

• Alternativen för designvyn och Live-vyn har slagits samman till en enkel (nedrullningsbar) kontroll.

• Fältet Dokumentrubrik har nu flyttats till egenskapskontrollen.

• Knapparna Inspektera och Live-kod har ersatts av ikoner.

• Alternativen Bakåt, Framåt och Uppdatera har grupperats tillsammans med adressfältet och placerats i mitten av verktygsfältet Dokument.

• Ikonerna för förhandsvisa/felsök i webbläsare, Live-visningsalternativ och filhantering har samlats och placerats till höger om verktygsfältet Dokument.

De färdiga arbetsytorna som ingår i Dreamweaver har ändrats och består av följande:

• Kod
• Design
• Extract

Extract är nu standardarbetsyta. I den här arbetsytan visas panelen Extract till vänster och webbsidan till höger. När du startar Dreamweaver första gången visas en enkel självstudiekurs på panelen Extract som hjälper dig att komma igång med Extract-arbetsflödena. Klicka på Kom igång när du vill börja använda Extract.

Standardvy för HTML-dokument är nu en delad vy (en vågrät delning av Live-vyn och kodvyn). Dynamiska filer, till exempel de som anges nedan, öppnas i den fullständiga kodvyn som standard. När du delar vyn visas dessa dokument i design- och kodvyn.

• PHP
• PHP-mall (Example.dwt.php)
• ASP
• ASP-mall (Example.dwt.asp)
• JSP
• JSP-mall (Example.dwt.jsp)
• CFM
• CFM-mall (Example.dwt.cfm)

Tips! Klicka på listrutan bredvid alternativet Live och sedan på Design om du vill växla till designvyn. Om du vill ändra vågrät delning till lodrät delning väljer du Visa > Dela lodrätt. Då visas Live- eller designvyn till vänster. Om du vill visa Live- eller designvyn till höger igen avmarkerar du Visa > Live-vy till vänster eller Designvy till vänster.

Dreamweaver kommer ihåg vilket Live-vyläge du använder för ett HTML-dokument och använder samma vy för alla HTML-dokument du öppnar. Anta att du först öppnar dokumentet HTML1. Dokumentvyn är delad i två delar och visar kod- och Live-vyn. Nu ändrar du vyn för dokumentet till den fullständiga Live-vyn. När du sedan öppnar nästa dokument, till exempel HTML2, visas det dokumentet i den fullständiga Live-vyn.  

De nya redigeringsmöjligheterna i Live-vyn introducerades i den förra versionen av Dreamweaver CC. I den här utgåvan har dessa redigeringsfunktioner i Live-vyn även gjorts tillgängliga för dokument med flytande stödraster. Möjligheten att redigera i Live-vyn snabbar upp ditt arbete med att skapa en webbsida eftersom du kan redigera och sedan omedelbart förhandsvisa dina ändringar i samma vy.

Följande funktioner hjälper dig att redigera dokument med flytande stödraster i Live-vyn:

• Elementvisning
• Snabbegenskapskontroll
• Egenskapskontroll för Live-vyn
• Infoga element och redigera text direkt i Live-vyn

Du kan nu också visualisera HTML DOM-strukturen för dokument med flytande stödraster med Elementsnabbvy. 

Obs! Om du använder elementsnabbvyn i flytande stödrasterlayouter kan du inte kopiera, klistra in eller ordna om HTML-element.

Användargränssnittet för visning och redigering av dokument med flytande stödraster har ändrats för att anpassas till redigeringsfunktionerna i Live-vyn. När du nu väljer ett element i ett dokument med flytande stödraster, visas elementvisningen tillsammans med andra kontroller som Dölj element och Börja en ny rad.

Dokument med flytande stödraster öppnas nu även direkt i Live-vyn. Du kan inte längre visa eller redigera dokument med flytande stödraster i designvyn.

Mer information om dokument med flytande stödraster finns i Responsiv design med flytande stödrasterlayouter.

Dialogrutan Infoga för dokument med flytande stödraster innehåller nu en placeringsassistent. 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 om hur du infogar flytande stödrasterelement finns i Infoga flytande stödrasterelement.

Alternativet Hantera dolda element (ögonknappen i verktygsfältet Dokument) har flyttats till snabbmenyn i dokument med flytande stödraster.

Du visar och hanterar dolda element genom att högerklicka i dokumentet med flytande stödraster och välja Hantera dolda element. Du döljer dessa element genom att klicka på ögonikonen i HUD:en. 

Du kan nu välja bland följande färdiga färgteman för kodvyn:

• Classic (standard – samma som i tidigare versioner av Dreamweaver)
• Raven
• Slate
• Blanche
• Geneva

Använd inställningarna för kodfärgning för att ange ett tema för kodvyn. Du kan anpassa temat genom att välja olika färgscheman för bakgrunder, förgrunder och dolda tecken.

Du kan anpassa färgerna för olika kategorier av taggar och kodelement för varje listad dokumenttyp, till exempel formulärrelaterade taggar eller JavaScript-identifierare. Om du till exempel använder Raven-temat för alla dokumenttyper kan du välja att använda en blå färg för formulärrelaterade taggar endast i HTML-dokument.

Alla anpassade inställningar i ett tema sparas när du klickar på Använd och det anpassade temat blir tillgängligt för användning i alla Dreamweaver-sessioner.

Mer information finns i Ange färgtemat för kodvyn.

Synkroniseringen av kodvyn och Live-vyn gör det möjligt att omedelbart förhandsvisa de kodändringar du gör i Live-vyn. Du behöver inte, till skillnad från tidigare versioner av Dreamweaver, klicka på Uppdatera för att förhandsvisa ändringarna i Live-vyn.

Du kan se synkroniseringen av kodvyn och Live-vyn i följande arbetsflöden (när kodvyn är i fokus):

• Textåtgärder, till exempel klipp ut, kopiera, klistra in, ta bort eller ångra/gör om.
• När du flyttar element i elementsnabbvyn och kodvyn är i fokus.
• När du skriver i kodvyn.
• När du utför åtgärderna ta bort, duplicera, kopiera, klistra in i elementsnabbvyn (alternativ för högerklick).
• Åtgärder i egenskapskontrollen, till exempel ändring av textformat: fetstil, kursiv stil, ändra klass, id, format, sidegenskaper eller använda typsnitt.
• När du använder kodtips för att lägga till eller ta bort klasser i kodvyn.
• När du infogar element från panelen Infoga, till exempel Div, bild, hyperlänk och strukturella element, i kodvyn.
• När du lägger till/redigerar CSS-format i <style>-taggen. 
• När du redigerar kod i CSS-filer.

Resurspanelen (Fönster > Resurser) är nu tillgänglig i Live-vyn. Du kan utföra följande uppgifter med hjälp av resurspanelen:

• Dra eller infoga resurser (bilder, URL:er, färger eller media) från förhandsgranskningsfönstret eller listvyn på resurspanelen.

Obs! Du kan endast dra resurser från förhandsgranskningsfönstret på Mac.

• Kopiera ett färgvärde och klistra in värdet i ett textfält i Dreamweaver, till exempel egenskaper för CSS Designer, kodvyn, färgväljaren eller till och med i andra program som Anteckningar.
  

Detaljerade instruktioner om hur du använder resurspanelen finns i Arbeta med resurser.

Dreamweaver innehåller nu nya och responsiva startmallar som hjälper dig att komma i gång snabbare med dina responsiva webbplatser. Du kan välja mellan följande mallar i dialogrutan Nytt dokument (Arkiv > Nytt > Startmallar):

• Om-sida
• Blogginlägg
• E-handel
• E-post
• Portfolio

När du väljer en mall och klickar på Skapa i dialogrutan Nytt dokument uppmanar Dreamweaver dig att spara det nya dokumentet. Genom att spara dokumentet skapar du en kopia av mallen. Du kan sedan anpassa denna kopia efter dina behov.

Felsökning av problem i Dreamweaver kräver ibland att du raderar den inställningsmapp som innehåller alla anpassade inställningar. I de tidigare utgåvorna var du tvungen att navigera till inställningsmappen på din dator och ta bort denna mapp. I den här utgåvan kan du ta bort inställningsmappen med ett enda klick i en dialogruta:

Du kan öppna dialogrutan Återställ inställningar genom att hålla ned följande tangenter samtidigt som du startar Dreamweaver:

• (Windows) Windows-tangenten + Ctrl + Skift
• (Mac OS): Cmd + Alternativ + Skift

I Mac OS håller du ned Cmd + Alternativ + Skift medan du startar Dreamweaver (genom att klicka på Dreamweaver-ikonen i Dock).

I Windows gör du på följande sätt:

Tänk på att hålla ned tangenterna som nämns ovan även när dialogrutan User Account Control (UAC) visas. 

Nu kan du importera inställningar från din tidigare version av Dreamweaver som har sparats i Creative Cloud med hjälp av dialogrutan Inställningar. Alla lokala inställningar åsidosätts av de inställningar som importeras från molnet. Dessa inställningar används nästa gång du startar Dreamweaver.

Från och med den här versionen synkroniseras nu även inställningarna nedan med Creative Cloud, förutom de inställningar som synkroniserades i tidigare versioner:

• Nyligen tillagda färgteman för kodvyn
• Programfältet och inställningarna för programramverk (på Mac)

Användarupplevelsen i CSS Designer har förbättrats på flera sätt i den här versionen av Dreamweaver. På CSS Designer-panelen finns även en välkomstfunktion som hjälper dig att snabbt komma igång med arbetsflöden.

Alternativet Webbplatsmallar på välkomstskärmen har ersatts med Startmallar. Du kan komma åt webbplatsmallarna i dialogrutan Nytt dokument (Arkiv > Nytt).

jQuery-biblioteken i Dreamweaver har uppdaterats:

• jQuery – 1.8.3 till jQuery – 1.11.1
• jQuery-gränssnitt – 1.9.2 till jQuery UI – 1.10.4

Startsidorna för jQuery har tagits bort. 

Dreamweaver-integrationen med PhoneGap Build för att packa program stöds inte i den senaste uppdateringen till Dreamweaver CC 2014 (oktober 2014) och senare.

Däremot kan du gå direkt till PhoneGap Build-tjänsten online och packa dina webbprogram som systemspecifika (native) mobilprogram med hjälp av de senaste funktionsuppdateringarna. Mer information finns i Använda PhoneGap Build med den senaste uppdateringen till 2014-utgåvan av Dreamweaver CC.