Den nya 2014-utgåvan av Dreamweaver CC innehåller flera förbättringar av Live-vyn och CSS Designer som gör det lätt att skapa och uppdatera webb- och mobilinnehåll. I den nya elementsnabbvyn kan du snabbt visa, navigera och redigera HTML-koden.

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.

Elementsnabbvy

Granska koden i ditt dokument med hjälp av den nya elementsnabbvyn som renderar ett interaktivt HTML-träd för både statiskt och dynamiskt innehåll. Du kan ändra den statiska innehållsstrukturen direkt i HTML-trädet. 

Elementsnabbvy
Elementsnabbvy

Avsikten med elementsnabbvyn (Visa > Elementsnabbvy) är att snabba upp utvecklingsprocessen. I tidigare versioner av Dreamweaver markerade du HTML-element i Live-vyn, växlade till kodvyn och redigerade elementen. Efter redigeringen växlade du tillbaka till Live-vyn igen för att förhandsgranska ändringarna. Elementsnabbvyn gör det nu möjligt att se alla elementen på din sida i en enkel och lättöverskådlig vy samt redigera statiskt innehåll.

Mer information finns i Elementsnabbvyn.

Nya redigeringsfunktioner i Live-vyn

Inspektera och ändra samtliga egenskaper för alla HTML-element direkt i Live-vyn och kontrollera hur de ser ut utan att göra några uppdateringar.  

Snabbegenskapskontroll

I Live-vyn visas nu snabbegenskapskontrollen för HTML-element på dina sidor. Med snabbegenskapskontrollen kan du redigera attribut och text direkt i Live-vyn baserat på det HTML-element du väljer.

Snabbegenskapskontroll för redigering av bildattribut
Snabbegenskapskontroll för redigering av bildattribut

Live-vy-egenskapskontroll för formatering av text
Snabbegenskapskontroll för formatering av text


Mer information finns i Snabbegenskapskontroll.

Elementvisning

Med den nya elementvisningen kan du associera HTML-element med klasser och id:n direkt i Live-vyn. Du får förslag på tillgängliga klasser och id:n så att du snabbt kan hitta och välja önskat alternativ.

Elementvisning för redigering av klasser och id:n
Elementvisning för redigering av klasser och id:n

Redigera text live

Nu kan du redigera text direkt i Live-vyn och förhandsgranska ändringarna utan att behöva växla mellan olika vyer.

Dubbelklicka på textelementet i Live-vyn så öppnas redigeringsläget. Mer information finns i Redigera text direkt i Live-vyn.

Redigera text direkt i Live-vyn. Redigera text live.
Redigera text direkt i Live-vyn

Egenskapskontroll för Live-vyn

Egenskapskontrollen är nu tillgänglig i Live-vyn så att du snabbt kan göra ändringar på sidan utan att du behöver växla till design- eller kodvyn.

Mer information finns i Egenskapskontroll för Live-vyn.

Egenskapskontroll för Live-vyn
Egenskapskontroll för Live-vyn

Live-infogning

I den här utgåvan kan du infoga HTML-element direkt i Live-vyn från panelen Infoga. Elementen infogas i realtid utan att du behöver byta läge. Du kan också förhandsgranska ändringarna direkt. 

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

Dra och släpp till Live-vyn från panelen Infoga
Dra och släpp till Live-vyn från panelen Infoga

Förbättringar i CSS Designer

Förbättrat användargränssnitt ger bättre kantkontroll

En flikkontroll ger dig möjlighet att ange samtliga fyra kantegenskaper på ett enkelt och intuitivt sätt.

  • Flikkontrollen förenklar arbetet genom att endast visa ett värde åt gången.
  • Intuitiva och användarvänliga koner som även en nybörjare förstår.
  • Två uppsättningar ikoner för att ange borttagna/raderade och inaktiverade lägen.
  • En enda Alla sidor-flik ger dig möjlighet att ange alla kantegenskaper samtidigt.
  • En beräknad rad som dirigerar dig till den mest lämpliga fliken under kontrollerna. 
Kantegenskaper före 2014-utgåvan av Dreamweaver CC
Kantegenskaper före 2014-utgåvan av Dreamweaver CC

Kantegenskaper i 2014-utgåvan av Dreamweaver CC
Kantegenskaper i 2014-utgåvan av Dreamweaver CC


Mer information finns i Ange kantegenskaper.

Kopiera och klistra in stilar

Nu kan du kopiera stilar från en väljare och klistra in dem i en annan. Du kan kopiera alla stilar eller bara en särskild kategori med stilar, t.ex. Layout, Text och Kant.

Högerklicka på en väljare och välj något av de tillgängliga alternativen:  

Kopiera format med hjälp av CSS Designer
Kopiera format med hjälp av CSS Designer

  • Om det inte finns några stilar för en väljare är alternativen Kopiera och Kopiera alla stilar inaktiverade.
  • Klistra in stilar är inaktiverat för fjärrplatser som inte kan redigeras. Men Kopiera och Kopiera alla stilar är tillgängliga.
  • Det går att klistra in stilar som delvis finns i en väljare (överlappande). Unionen för alla väljare klistras in.
  • Det går också att kopiera och klistra in stilar för olika CSS-filkopplingar, t.ex. import, länk och infogade stilar.

Textrutor för snabbredigering

Dreamweaver innehåller nu textrutor för snabbredigering där du kan ange kort notation för egenskaper som margin, padding, border och border-radius. Denna ändring har gjorts för att förenkla arbetet för de användare som föredrar att ange egenskaper med hjälp av kod i stället för att använda musen och tangentbordet. 

Textrutor för snabbredigering
Textrutor för snabbredigering

Ange egenskaper
Ange egenskaper


Förbättringar i arbetsflödet för anpassade egenskaper

I tidigare versioner klickade du på + i rutan Egenskaper i CSS Designer för att lägga till övriga (eller anpassade) egenskaper. Nu finns en uppsättning textrutor – egenskapsnamn och värde – enkelt tillgängliga i slutet av listan Egenskaper. Dessa textrutor ger dig möjlighet att direkt ange namnet och värdet för egenskapen utan att först behöva klicka på +.

Du kan även lägga till ytterligare rader med anpassade egenskaper genom att trycka på Tabb-tangenten.

Namnet på egenskapsgruppen Övrigt har ändrats till Egen.

Textrutor för att lägga till egenskapsnamn och värde
Textrutor för att lägga till egenskapsnamn och värde

Tangentbordsgenvägar

Du kan nu använda kortkommandon för att lägga till eller ta bort CSS-väljare och egenskaper. Du kan även navigera mellan de olika egenskapsgrupperna i rutan Egenskaper.  

Kortkommando Arbetsflöde
CTRL+Alt+[Skift =] Lägger till en väljare (om kontrollen är i väljarsektionen)
CTRL+Alt+S Lägger till en väljare (om kontrollen är var som helst i programmet)
CTRL+Alt+[Skift =] Lägger till en egenskap (om kontrollen är i egenskapssektionen)
CTRL+Alt+P Lägger till en egenskap (om kontrollen är var som helst i programmet)
Markera + Delete Tar bort väljaren om den är markerad
CTRL+Alt+(PgUp/PgDn) Hoppa mellan sektioner – när du arbetar i underpanelen Egenskaper 

Väljare för mer specifik/mindre specifik

I den här utgåvan av Dreamweaver kan du få upp till tre regeltips när du lägger till en väljare. Du kan använda upp-/nedpilarna för att göra väljaren mer eller mindre specifik.

Väljare för mer specifik/mindre specifik
Väljare för mer specifik/mindre specifik

Skrolla till kategori

När du i tidigare utgåvor klickade på Bakgrund eller kategorin Övrigt längst upp på panelen Egenskaper i CSS Designer blev dessa kategorier ”synliga” på panelen. Kategorierna visades dock inte längst upp på panelen.

Nu visas kategorierna Bakgrund och Övrigt (som nu har bytt namn till Egen) längst upp på panelen när du klickar på dem.

Skrolla till kategori
Skrolla till kategori

Stöd för SFTP-anslutningar med hjälp av identitetsfiler

Med 2014-utgåvan av Dreamweaver CC kan du ansluta till dina publiceringsservrar via SFTP med nyckelpar (privat och offentlig nyckel) och identitetsnycklar (med eller utan lösenfras). Den här förbättringen i Dreamweaver innebär att du får fler webbhotelleverantörer att välja bland. Du kan prenumerera på alla tjänstleverantörer som kräver att du använder autentisering med nyckelpar (privat och offentlig nyckel).

Obs!

Dreamweaver har endast stöd för OpenSSH-nyckelfiler.

Mer information finns i SFTP-anslutningar.

Förbättringar av Ångra/gör om

Om du har velat ångra eller göra om en åtgärd som har utförts på CSS Designer-panelen har du tidigare behövt klicka på CSS-filen (i relaterade filer) och sedan ångra eller göra om operationen. 

De nya förbättringarna av funktionen Ångra/gör om gör det möjligt att ångra eller göra om en funktion direkt i Live-vyn för ett dokument eller formulär på CSS Designer-panelen. Dessa ändringar återspeglas sedan automatiskt i den associerade CSS-filen. Fliken för den fil som påverkas markeras automatiskt under en kort tid (cirka åtta sekunder) för att visa att den relaterade filen har ändrats.

  • När du ångrar eller gör om en åtgärd på CSS Designer-panelen uppdateras Live-vyn automatiskt.
  • När du redigerar dokumentet med hjälp av källkoden och ångrar ändringarna i Live-vyn ändras visningen till delad vy och visningen av den relaterade källkoden hamnar i fokus.

Alla ångra/gör om-åtgärder lagras på HTML-filnivå. Detta innebär att samtliga manuella ändringar av en CSS-fil kan ångras från SAMTLIGA relaterade filer. Anta till exempel att style1.css och style2.css är relaterade till index.html. Om du lägger till format för .h1 i style1.css och sedan ångrar detta i style2.css tas formatet .h1 bort från style1.css.  

Obs!

Om du vill ångra/göra om ändringar i JavaScript-filer växlar du till respektive JavaScript-fil och utför sedan åtgärden ångra/gör om. 

Ändringar i arbetsflödena för Business Catalyst och PhoneGap Build

Nu är Business Catalyst och PhoneGap Build tillgängliga som tillägg till Dreamweaver. Nu installerar du Business Catalyst och PhoneGap Build som tillägg och använder sedan tjänsterna som förut.

Om du vill installera Business Catalyst och PhoneGap Build går du till Hantera > Bläddra efter tillägg, letar upp tilläggen och installerar dem.

Ändringar i åtkomsten till tillägg för Dreamweaver

Nu kan du visa och installera Dreamweaver-tillägg med hjälp av Adobe Creative Cloud. Tilläggsprogrammen kallas gemensamt för ”tillägg”.

Om du vill leta efter tillägg i Adobe Creative Cloud klickar du på Fönster > Bläddra efter tillägg i Dreamweaver. Sidan Adobe Creative Cloud-tillägg visas. 

Fönster > Tillägg i Dreamweaver CC 13.0
Fönster > Tillägg i Dreamweaver CC 13.0

Fönster > Bläddra efter tillägg i Dreamweaver CC 2014
Fönster > Bläddra efter tillägg i 2014-utgåvan av Dreamweaver CC


Mer information om hur du installerar tilläggen finns i avsnittet Tillägg.

Ändringar i synkroniseringsinställningarna

Med synkroniseringsfunktionen i Dreamweaver kan du synkronisera inställningarna på datorer med Dreamweaver med Creative Cloud. 2014-utgåvan av Dreamweaver CC kontrollerar automatiskt om synkroniseringsinställningarna var aktiverade i den tidigare versionen av Dreamweaver, och hjälper dig importera de inställningarna från Creative Cloud.

Första gången du startar 2014-utgåvan av Dreamweaver CC efter installationen visas följande dialogruta: 

Importera synkroniserade inställningar
Importera synkroniserade inställningar

  • Du kan importera inställningar som lagras i Creative Cloud genom att klicka på Importera synkroniserade inställningar

Obs! Det här alternativet är inte tillgängligt senare. 

  • Om du vill synkronisera inställningarna i den aktuella Dreamweaver-instansen med Creative Cloud klickar du på Synka lokala.
  • Om du vill att inställningarna ska synkroniseras automatiskt väljer du Synkronisera alltid inställningar automatiskt.
  • Om du vill visa alternativ för avancerade synkroniseringsinställningar klickar du på Avancerat.

Rapportera fel eller föreslå en funktion direkt från Dreamweaver

Nu kan du komma åt önskelistan och felrapporteringsformuläret direkt från Dreamweaver via Hjälp > Rapportera fel/Föreslå funktion.

Rapportera fel/Föreslå funktion på menyn Hjälp
Rapportera fel/Föreslå funktion på menyn Hjälp

Help Center

Använd vårt nya Help Center för att lära dig hur du använder de nya funktionerna och hur du hanterar vanliga uppgifter i Dreamweaver. 

Du kan nu, till skillnad från i de tidigare utgåvorna, enkelt upptäcka nya funktioner och effektiva arbetsflöden redan den första gången du startar Dreamweaver. Du kan när som helst hoppa över genomgången av de nya funktionerna eller inaktivera hjälpmeddelandena i programmet. Du kan vid behov även enkelt aktivera dem vid ett senare tillfälle.

Genomgång av nya funktioner

Dreamweaver innehåller nu en snabbgenomgång av de nya funktioner som finns i den senaste utgåvan.
Genomgången introducerar de nya funktionerna och tar dig även till ett videogalleri
som visar de nya funktionerna i aktion.

Genomgången av de nya funktionerna och snabbgenomgången visas direkt efter att
du har startat Dreamweaver. Du kan även välja att hoppa över snabbgenomgången och gå vidare till
välkomstskärmen för att fortsätta med ditt arbete.

Obs! Genomgången av nya funktioner visas när du har installerat eller uppdaterat
Dreamweaver samt om du har raderat alla inställningar och sedan startar om Dreamweaver.

Genomgång av nya funktioner
Genomgång av nya funktioner

Här följer en sammanfattning av innehållet i genomgången av nya funktioner:

  • Välkomstmeddelande. Du får även frågan om du tidigare har använt Dreamweaver CC så att upplevelsen kan anpassas med hänsyn till detta.
  • Introduktion och en kort beskrivning av funktionerna (med ett alternativ för att hoppa över genomgången).
  • Ett videogalleri med videor som beskriver de nya funktionerna.

Videogalleri

I slutet av genomgången av de nya funktionerna visas videogalleriet med videor som
demonstrerar de nya funktionerna. Om du placerar markören ovanför en miniatyr visas
en kort beskrivning av videon.

Videogalleri
Videogalleri

Obs!

Du kan när som helst under användningen av Dreamweaver visa genomgången
av nya funktioner samt videogalleriet. Gå bara till hjälpmenyn eller välkomstskärmen och klicka på relevant alternativ.

Meddelanden i programmet

Dreamweaver ger dig nu produktivitetshöjande tips under arbetet med dina
projekt. Dessa tips är avsedda att hjälpa dig att slutföra den aktuella uppgift du
arbetar med på ett mer effektivt sätt.

De tips som visas utlöses av särskilda händelser. Om du till exempel klickar på taggväljarna
i en valfri vy eller högerklickar på ett element för att inspektera det visas ett tips om
Elementsnabbvyn. Elementsnabbvyn är en helt ny funktion som hjälper dig att visa
och redigera HTML-kod på ett mer effektivt sätt än de andra metoderna du har testat (utlösare).

När du en gång har följt förslaget i det visade tipset visas detta inte igen för samma
utlösare. Tipset kan dock visas igen för andra identifierade utlösare.

Du kan inaktivera visningen av meddelanden i programmet under Inställningar. Mer
information finns i Inaktivera eller återställa meddelanden i programmet och produkten

Exempel på meddelanden i programmet: 

Elementsnabbvy

Utlösare:

  • Användaren klickar på taggväljare (alla vyer)
  • Live + Inspektera eller högerklicka + Inspektera på ett element

Meddelande:

Meddelande i elementsnabbvyn
Meddelande i elementsnabbvyn

Live-vy-egenskapskontrollen för klasser och id:n 

Utlösare:

  • Redigera id:n med hjälp av PI i designvyn

Meddelande:

Meddelande i Live-vyn
Meddelande i Live-vyn

Meddelanden i produkten

Dreamweaver integreras omärkligt med andra program i Creative Cloud och dessa
arbetsflöden för integration introduceras med hjälp av meddelanden i produkten. Genom att använda dessa arbetsflöden kan du få en ökad nytta av Adobe Creative Cloud och dess erbjudanden på ett bättre sätt.

De meddelanden som visas i produkter utlöses av särskilda händelser. Om du till exempel
försöker använda CSS-övergångar visas ett meddelande som föreslår att du använder arbetsflödet Edge Animate.

En meddelande i produkten innehåller en kort beskrivning av det alternativa (eller bättre)
arbetsflöde du kan använda i ett specifikt scenario. Meddelandet innehåller dessutom en videominiatyr som du kan klicka på för att visa en video som beskriver arbetsflödet.
Länkarna för knappen Mer information tar dig till en artikel/blogg som innehåller mer information.


Meddelanden som visas i produkter visas endast en gång när den identifierade utlösaren inträffar.

Obs!

Du kan välja att visa meddelandena igen genom att återställa inställningen för hjälp i programmet under Inställningar.
Mer information finns i Inaktivera eller återställa meddelanden i programmet och produkten

Exempel på meddelanden i produkten: 

Edge Animate

Utlösare:

  • Klicka på en CSS-övergång och klicka sedan på +

Meddelande:

Edge Animate-meddelande
Edge Animate-meddelande

Parfait

Utlösare:

  • Infoga bild > Redigera bildinställningar

Meddelande:

Redigera bildinställningar
Redigera bildinställningar

Inaktivera eller återställ meddelanden i programmet och produkten

Gå till Inställningar > dialogrutan Tillgänglighet och gör följande:

  • Du inaktiverar meddelandena genom att avmarkera kryssrutan Visa hjälp i appen.

Om du aktiverar visningen av meddelandena igen visas inte de
meddelanden som redan har visats. Endast de meddelanden som inte
har visats tidigare visas för användaren.

  • Klicka på Återställ om du vill visa alla de tidigare visade meddelandena igen.
Inaktivera tips. Inaktivera meddelanden i programmet.
Inställningar för att inaktivera eller återställa hjälpen i programmet

Ändringar på hjälpmenyn

Hjälpmenyn har uppdaterats för att ge snabb åtkomst till genomgången av nya funktioner, videogalleriet, hjälp- och utbildningsresurser samt formuläret för att rapportera fel eller föreslå funktioner.

Hjälpmenyn före Dreamweaver CC 2014
Hjälpmenyn före 2014-utgåvan av Dreamweaver CC

Hjälpmenyn i Dreamweaver CC 2014
Hjälpmenyn i 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