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.

Adobe Dreamweaver CC 2014.1.1 (februari 2015)

Ny välkomstskärm

Ä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.

Välkomstskärm
Välkomstskärm

Obs!

Den nya välkomstskärmen är endast tillgänglig för användare av engelska språkversioner. För användare av andra språkversioner visas välkomstskärmen och genomgången av nya funktioner i Dreamweaver CC 2014.1.

Förbättringar av panelen Extract

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.

Panelen Extract
Panelen Extract

Förbättringar av redigering i Live-vyn

Dra och släpp element

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.

Markeringsram

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.

Obs!

Markeringsramen i Live-vyn har endast stöd för de åtgärder som stöds av webbläsaren.

Förbättringar i elementvisningen

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. 

Nya teman i kodvyn

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.

Förbättringar i CSS Designer

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.

Fjärrfelsökning av Live-vyn

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:

  1. Starta Dreamweaver genom att köra följande kommando:

    • Windows: <installationssökväg> -enableRemoteDebugging
    • Mac: open <installationssökväg> --args -enableRemoteDebugging

    Obs! Skriv två bindestreck före args

  2. Klicka på OK i dialogrutan som indikerar att port 5471 har aktiverats för felsökning.

    Dreamweaver startar.

    Klicka på OK i dialogrutan om du vill starta Dreamweaver
    Klicka på OK i dialogrutan om du vill starta Dreamweaver

  3. Öppna de dokument som du vill felsöka i Live-vyn.

  4. Öppna Google Chrome och gå till localhost:5471 för att börja felsöka. En lista över länkar till alla öppna dokument i Dreamweaver visas. 

    Obs! Eftersom den nya välkomstskärmen och panelen Extract använder Chromium Embedded Framework (CEF) visas även poster som relaterar till de här funktionerna.

    Du kan nu använda Google Chrome DevTools för att felsöka dokument.

  5. Om du vill stoppa felsökningen och öppna Dreamweaver i normalläge avslutar du Dreamweaver och startar det igen.

Övriga förbättringar

Ändringar i återställningen av inställningar för arbetsflöde

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.

Återställ inställningar
Återställ inställningar

Ändringar i visningsläget för dynamiska dokument

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.

Adobe Dreamweaver CC 2014.1 (oktober 2014)

Extract i Dreamweaver

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.

Panelen Extract standardarbetsyta
Panelen Extract

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

64-bitarsarkitektur

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:

Operativsystem Standardinstallationsplats Mapp för programinställningar
Windows (32-bitars) C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows (64-bitars) C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac OS (64-bitars) /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

Frågor och svar

  • 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.

Installera 64-bitarsversionen av Dreamweaver

  1. Kontrollera att ett 64-bitars operativsystem är installerat på din dator:

    Följ de steg som beskrivs i nedanstående artiklar för att kontrollera om din dator har ett 64-bitars operativsystem:

  2. Hämta 64-bitarsversionen av Dreamweaver från Creative Cloud och installera bygget.

Förbättringar i Live-vyn

Live-stödlinjer

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.

Obs!

Live-stödlinjer stöds inte i dokument med flytande stödraster.

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.
Live-stödlinjer ovanför och under hovrade element
Live-stödlinjer ovanför och under hovrade element

  • 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.
Live-stödlinjer till vänster och höger om hovrade element
Live-stödlinjer till vänster och höger om hovrade element

Så här infogar du ett strukturellt element med hög precision

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.

Ikon för elementsnabbvy
Elementsnabbvyikonen hjälper dig att göra precisionsinfogningar

Snabbmenyn i Live-vyn

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.

Obs!

Du kan även använda kortkommandon (till exempel Ctrl+X, Ctrl+C, Ctrl+V, Ctrl+D och Delete i Windows) 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å. 

Ändringar i elementvisningen

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.

Alternativen CSS-källa och Mediefråga i elementvisningen
Alternativen 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).

Alternativen Gå till kod och Klistra in stilar i elementvisningen
Alternativen Gå till kod och Klistra in stilar i elementvisningen

Obs!

För alternativet Gå till kod visas underalternativ om samma väljare läggs till i flera mediefrågor För alternativet Klistra in stilar visas underalternativ om kopierade väljare är pseudo- eller sammansättningsväljare.

Flytta element i Live-vyn

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.

  1. Klicka på det element du vill flytta. När elementvisningen (den blå rutan runt elementet) visas kan du dra elementet. Markörens utseende ändras för att visa att elementet nu kan flyttas.

  2. Referenselementen (de element du vill placera det element du drar i förhållande till) markeras med en blå ram. Live-stödlinjerna (i grönt) visas för att ange de möjliga platser där du kan släppa elementet i förhållande till referenselementet.

Obs!

Du kan endast flytta statiska element i Live-vyn. Du kan inte flytta taggar med dynamiskt innehåll, till exempel PHP.

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. 

Tangentbordsnavigering i Live-vyn

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.

Ändra taggtext 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.

Ändra taggtext i Live-vyn
Ändra taggtext i Live-vyn

Ändringar i arbetsytan i Dreamweaver

Ändringar i verktygsfältet Dokument

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.
Alternativen för designvyn och Live-vyn i Dreamweaver CC (oktober 2014)
Alternativen för designvyn och Live-vyn i den senaste uppdateringen för Dreamweaver CC (oktober 2014)

Knapparna för designvyn och Live-vyn i verktygsfältet Dokument i tidigare versioner
Knapparna för designvyn och Live-vyn i verktygsfältet Dokument i tidigare versioner

  • Fältet Dokumentrubrik har nu flyttats till egenskapskontrollen.
Verktygsfältet Dokument i Dreamweaver CC (oktober 2014)
Verktygsfältet Dokument i den senaste uppdateringen för Dreamweaver CC (oktober 2014)

Fältet Dokumentrubrik har flyttats till egenskapskontrollen i Dreamweaver CC (oktober 2014)
Fältet Dokumentrubrik har flyttats till egenskapskontrollen i den senaste uppdateringen för Dreamweaver CC (oktober 2014)

Rubrikfältet i verktygsfältet Dokument i tidigare versioner
Rubrikfältet i verktygsfältet Dokument i tidigare versioner

  • Knapparna Inspektera och Live-kod har ersatts av ikoner.
Ikonerna Live-kod och Inspektera i Dreamweaver CC (oktober 2014)
Ikonerna Live-kod och Inspektera i den senaste uppdateringen för Dreamweaver CC (oktober 2014)

Knapparna Live-kod och Inspektera i tidigare versioner
Knapparna Live-kod och Inspektera i tidigare versioner

  • Alternativen Bakåt, Framåt och Uppdatera har grupperats tillsammans med adressfältet och placerats i mitten av verktygsfältet Dokument.
Adressfältet med alternativen Bakåt, Framåt och Uppdatera i Dreamweaver CC (oktober 2014)
Adressfältet med alternativen Bakåt, Framåt och Uppdatera i den senaste uppdateringen för Dreamweaver CC (oktober 2014)

Adressfältet med alternativen Bakåt, Framåt och Uppdatera i tidigare versioner
Adressfältet med alternativen Bakåt, Framåt och Uppdatera i tidigare versioner

  • 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.
Ikonerna för förhandsvisning, felsök i webbläsare, Live-visningsalternativ och filhantering i Dreamweaver CC (oktober 2014)
Ikonerna för förhandsvisa, felsök i webbläsaren, Live-visningsalternativ och filhantering i den senaste uppdateringen för Dreamweaver CC (oktober 2014)

Ikonerna för förhandsvisa, felsök i webbläsaren, Live-visningsalternativ och filhantering i tidigare versioner
Ikonerna för förhandsvisa, felsök i webbläsaren, Live-visningsalternativ och filhantering i tidigare versioner

Ändringar i standardarbetsytan

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

  • Kod
  • Design
  • Extract
Arbetsytor
Arbetsytor

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.

Arbetsytan Extract
Arbetsytan 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)
För HTML-dokument visas Live- och kodvyn som standard
För HTML-dokument visas Live- och kodvyn som standard

För dynamiska dokument visas den fullständiga kodvyn som standard
För dynamiska dokument visas den fullständiga kodvyn som standard

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.  

Ändringar i dokument med flytande stödraster

Stöd för redigering i 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:

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.

Alternativ för flytande stödraster i tidigare versioner
Alternativ för flytande stödraster i tidigare versioner

Alternativ för flytande stödraster tillsammans med elementvisningen i Dreamweaver CC (oktober 2014)
Alternativ för flytande stödraster tillsammans med elementvisningen i den senaste uppdateringen för Dreamweaver CC (oktober 2014)


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.

Verktygsfältet Dokument i Dreamweaver CC (oktober 2014)
Verktygsfältet Dokument i den senaste uppdateringen för Dreamweaver CC (oktober 2014)

Verktygsfältet Dokument i ett dokument med flytande stödraster i tidigare versioner
Verktygsfältet Dokument i ett dokument med flytande stödraster i tidigare versioner

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

Ändringar i arbetsflöden för infogningar

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.

Ändringar i alternativet Hantera dolda element

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. 

Alternativet Hantera dolda element på snabbmenyn i Dreamweaver CC (oktober 2014)
Alternativet Hantera dolda element på snabbmenyn i den senaste uppdateringen för Dreamweaver CC (oktober 2014)

Ögonikonen för hantering av dolda element i tidigare versioner
Ögonikonen för hantering av dolda element i tidigare versioner

Färdiga färgteman för kodvyn

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
Färgteman – Classic, Raven, Slate, Blanche och Geneva
Färgteman – Classic, Raven, Slate, Blanche och 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.

Obs!

Du kan synkronisera anpassade teman för kodvyn mellan dina Dreamweaver-instanser med hjälp av alternativet Synk. inställningar i dialogrutan Inställningar. Mer information finns i Synkronisera inställningarna för Dreamweaver med Creative Cloud.

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

Synkronisering av kodvyn och Live-vyn

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.

Obs!

Samtliga ändringar i JavaScript-kod kräver att sidan uppdateras eller läses in igen för att ändringarna ska bli synliga i Live-vyn. 

Resurspanelen i Live-vyn

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.

Obs!

 

  • Kategorierna Skript, Mall och Bibliotek har större relevans i kodvyn och har därför dolts på resurspanelen i Live-vyn.
  • Kategorierna Flash och Filmer har slagits samman till den gemensamma kategorin Media i den här versionen av Dreamweaver CC.
         

Resurspanelen i Live-vyn
Resurspanelen i Live-vyn

Resurspanelen i design- och kodvyn
Resurspanelen i design- och kodvyn


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

Nya startmallar

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
Nya responsiva startmallar
Nya responsiva startmallar

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.

Återställ inställningar vid start

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:

Återställ inställningar
Återställ inställningar

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

Obs!

Tänk dig för innan du använder alternativet för återställning av inställningar. Om du återställer inställningarna försvinner alla dina anpassade inställningar för arbetsyta, kortkommandon, tillägg och program.

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:

  1. Gå till installationsmappen, leta reda på Dreamweaver.exe och klicka på filen.

  2. Håll ned Windows-tangenten + Ctrl + Skift och dubbelklicka på Dreamweaver.exe.

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

Övriga förbättringar

Ändringar i synkroniseringsinställningarna

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.

Importera inställningar från tidigare versioner av Dreamweaver
Importera inställningar från tidigare versioner av 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:

Ändringar i CSS Designer

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.

Ändringar på välkomstskärmen

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

jQuery-versionsuppdateringar

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. 

PhoneGap-uppdatering

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.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy