Användarhandbok Avbryt

Extract i Dreamweaver

Sök

Senast uppdaterad den 30 dec. 2021

Lär dig att snabbt omvandla dina PSD-kompositioner snabbt till HTML-baserade webbdesigner för mobiler och datorer. Extrahera CSS, bilder, måttenheter, teckensnitt, färger, övertoningar och annat från Photoshop direkt till Dreamweaver.

Obs!

Från och med 1 juli 2022 kommer funktionerna på panelen Extract att försvinna från Dreamweaver 21.2 och tidigare versioner. Du kan använda Adobe Photoshop för att extrahera stilinformation, resurser från PSD-komponenter och återanvända dem 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, teckensnitt, 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)

Komma igång med Extract

Extrahera CSS

Ange inställningar för Extract

Kopiera text

Extrahera bilder

Extrahera teckensnitt, färger och övertoningar

Extrahera mått

Komma igång med Extract

Med Extract i Dreamweaver kommer du åt dina PSD-filer direkt från Extract-panelen i Dreamweaver. I följande avsnitt finns mer information om panelen och arbetsytan Extract, och om hur du läser in dina PSD-filer i panelen Extract:

Panelen och arbetsytan Extract

Extract-arbetsytan gör att du kan arbeta effektivt med Extract i Dreamweaver. På den här arbetsytan visas panelen Extract till vänster och webbsidan visas till höger i en delad vy (Live-vyn och kodvyn). Du kan anpassa arbetsytan genom att dra, docka, komprimera och utöka paneler efter behov. Du kan också spara den anpassade arbetsytan för framtida bruk.

Obs!

Om du råkar stänga panelen Extract kan du öppna den igen med kortkommandot Ctrl+K (Windows) respektive Cmd+K (Mac OS) eller välja Fönster > Extract.

När du startar Dreamweaver för första gången visas en interaktiv självstudiekurs på panelen Extract, så att du snabbt kommer igång med arbetsflödena. Du kan växla mellan olika självstudiekurser med hjälp av listrutan högst upp på panelen.

När du är klar med självstudiekursen kan du börja använda Extract i Dreamweaver genom att klicka på Kom igång. På panelen Extract visas en miniatyrbildsvy av mapparna och PSD-filerna på ditt Creative Cloud-konto, det vill säga de filer som har överförts eller synkroniserats från din dator, eller som delas med dig i en samarbetsmapp i Creative Cloud.

Panelen Extract som visar PSD-filer som har sparats i Creative Cloud

Obs!

Om du vill starta självstudiekursen igen klickar du på snabbmenyn i panelens övre högra hörn och väljer Starta självstudiekurs.

Ladda upp PSD-filer till Creative Cloud

Ladda upp en PSD-fil till Creative Cloud genom att välja Fönster > Extract och klicka på Ladda upp PSD. Om PSD-kompositionerna har utvecklats av någon annan person eller grupp kan du dela dem i Creative Cloud. Du kan sedan hämta filerna, och ladda upp dem till ditt konto antingen direkt genom att logga in i Creative Cloud eller gå via panelen Extract i Dreamweaver.

Obs!

Om du använder Dreamweaver 21.2 eller senare versioner i macOS ska du aktivera PSD-filtypen från Finder-fönstret och ladda upp filen.

För macOS

Följ proceduren nedan för att aktivera och ladda upp PSD-filen:

Klicka på Ladda upp PSD på panelen Extrahera.
Klicka på Alternativ i Finder-fönstret och välj *.psd på rullgardinsmenyn.
Välj PSD-filen och klicka på Öppna för att ladda upp filen.

Öppna PSD-filer i panelen Extract

Klicka på miniatyrbilden av PSD-filen på panelen Extract. Om en uppdaterad version av PSD-filen blir tillgänglig i Creative Cloud efter att du har öppnat den, läser du in PSD-filen igen till panelen Extract. Det gör du genom att klicka på PSD-filens namn eller klicka på Läs in PSD igen på snabbmenyn uppe till höger. Klicka på Creative Cloud-ikonen uppe till vänster på panelen om du vill gå tillbaka till miniatyrbildsvyn och välja en annan fil.

Om du vill förstora vyn och ta en närmare titt på designen, ändrar du zoomnivån högst upp på panelen Extract eller använder Alt+/-. Använd fliken Lager eller listrutan Lagerkomposition om du vill visa eller dölja elementen i PSD-filen.

Nu kan du börja överföra PSD-kompositionen till en webbplats.

Ange inställningar för Extract

Med hjälp av inställningarna för Extract kan du ange standardfilformatet som bilderna ska extraheras med, och även vilken standardenhet för teckensnitt som ska visas på panelen Extract.

Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Mac).
Välj Extract i listan Kategori.
(Valfritt) Ändra standardformatet som bilderna ska extraheras med.

Extraherade bildformat
(Valfritt) Välj önskad upplösning i avsnittet Extrahera för enheter. De här inställningarna kommer att användas när du väljer att spara en bild i flera upplösningsversioner.
- Om du vill spara versionerna med suffix ska du klicka på motsvarande rad under kolumnen Suffix och skriva texten.
- Om du vill spara flera upplösningsversioner i separata utdatamappar ska du klicka på motsvarande rad under kolumnen Mapp och ange den relativa sökvägen.
Extrahera för enheter
(Valfritt) Klicka på Rensa cache om du vill radera cachelagrade data som relaterar till användningen av Extract.
Klicka på Använd och stäng sedan dialogrutan Inställningar.
Du visar ändringarna på panelen Extract genom att läsa in PSD-filen på nytt (snabbmenyn > Läs in PSD igen).

Alternativet Läs in PSD igen på panelen Extract

Extrahera CSS från PSD-filer

Du kan kopiera alla eller bara vissa CSS-egenskaper för element i en PSD-komposition och direkt klistra in formaten i CSS Designer, elementvisningen i Live-vyn eller i koden (en CSS-källa eller ett HTML-dokument).

Kodtipsen fylls dessutom automatiskt med CSS-egenskaperna för elementet som du markerar i PSD-kompositionen. Om du föredrar att arbeta med kod kan du använda dessa kodtips för att extrahera CSS-egenskaperna till koden.

Klicka på önskad PSD-fil på panelen Extract (Fönster > Extract). Miniatyrbildsvisningen av PSD-filen utvidgas så att du tydligt ser kompositionen.
Klicka på önskat element eller önskad resurs i PSD-filen. En popup-meny med en lista över elementets CSS-egenskaper visas, så att du kan markera och kopiera dem. Du kan visa bredd och höjd för det markerade elementet i bildpunkter eller procent.

Obs! Om du väljer procent här visas även måtten i procentenheter.

Alternativet Kopiera CSS på panelen Extract

Du kopierar CSS genom att markera de egenskaper du vill kopiera och sedan klicka på Kopiera CSS.
Klistra in CSS i dokumentet med någon av följande metoder:
- Om du vill klistra in CSS i CSS Designer ska du högerklicka på önskad väljare och klicka på Klistra in stilar.
- Om du vill klistra in CSS med hjälp av Elementvisning ska du högerklicka på en väljare och klicka på Klistra in stilar.
- Om du vill klistra in CSS i koden ska du placera insättningspunkten vid önskad plats, högerklicka och välja Klistra in.

Gör så här om du vill använda kodtips för att extrahera CSS:

Öppna en CSS-källa som är kopplad till dokumentet eller växla till kodvyn för ett HTML-dokument.
Klicka på önskad PSD-fil på panelen Extract och klicka därefter på önskat element i kompositionen.
Gå till dokumentet och placera insättningspunkten vid önskad plats i koden.
När du börjar skriva namnet på en CSS-egenskap visas kodtipsen som innehåller CSS-egenskaperna för det element som är markerat i PSD-kompositionen. Klicka på den CSS-egenskap som ska infogas i koden.

Kodtips med CSS-egenskapen för ett element i en PSD-fil
Om du vill extrahera flera CSS-egenskaper markerar du önskade egenskaper på snabbmenyn på panelen Extract. Klicka sedan på Infoga markerad i kodtipsen.

Infoga CSS-egenskaper i grupp

Kopiera text från PSD-filer

Med ett enda klick kan du infoga text eller innehåll i PSD-kompositioner på en webbsida. Du kopierar text från PSD-kompositionen på panelen Extract genom att markera ett textelement och klicka på Kopiera text. Texten kopieras till Urklipp. Sedan kan du klistra in texten på valfri plats.

Alternativet Kopiera text på panelen Extract

Obs!

När du har extraherat texten kan du också extrahera egenskaper för texten, till exempel teckensnitt och färger. Mer information finns i Extrahera teckensnitt, färger och övertoningar från PSD-filer.

Extrahera bilder från PSD-filer

Du kan enkelt dra lager i dina PSD-kompositioner från panelen Extract exakt dit du vill ha det i Live-vyn av webbsidan. Visuella hjälpmedel i Live-vyn som ikonerna Live-stödlinjer och DOM hjälper dig dra och placera element. När du pausar kort innan du släpper elementet visas DOM-ikonen (</>). DOM-strukturen visas när du placerar markören över ikonen </> och du kan släppa elementet inuti strukturen. Om du föredrar att arbeta med kod kan du extrahera bilderna med hjälp av sammanhangsberoende kodtips. Med hjälp av kodtips kan du extrahera färger och övertoningar som bilder.

Obs!

Om din PSD-fil innehåller flera ritytor visas varje rityta som en mapp i rutan Lager. Du kan visa eller dölja mappen om du vill se eller dölja dess innehåll. Om du vill zooma in på en viss rityta Alt+klickar du bara på ritytans namn. Du kan zooma ut genom att klicka var som helst utanför ritytan och på ANPASSA.

Innan du infogar den extraherade bilden visas bildens namn i Dreamweaver, och du kan redigera namnet. Som standard sparas bilden i webbplatsens rotmapp. Om du vill spara bilden på en annan plats ska du ange hela sökvägen och filnamnet.

Obs! Om du extraherar en bild till ett dokument som inte tillhör en angiven webbplats, extraheras bilden till den katalog där dokumentet finns. Om du inte har sparat dokumentet tidigare ombeds du göra det.

Du kan också spara bilden på den lokala hårddisken och anropa den på webbsidan vid en senare tidpunkt. Om du skapar en responsiv webbplats kan du spara flera upplösningsversioner av en bild för enheter med ett enda klick.

Klicka på den PSD-fil du vill hämta bilderna från på panelen Extract.
Klicka på en önskad bild i PSD-filen.

Obs!

Använd fliken Lager och listrutan Lagerkomposition i panelen Extract om du vill visa eller dölja bilderna i PSD-kompositionen. Om en bild består av flera lager kan du välja att extrahera ett enskilt lager i bilden.

Observera att popup-menyn för kodtips finns i kodvyn till höger om arbetsytan.
Om du vill importera flera bilder håller du ned Skift, eller tangenten Kommando, och klickar på bilderna. De markerade bilderna extraheras som en enda bild.
Gör något av följande:
- Klicka på på popup-menyn som visas när du klickar på bilden. Ange sökväg, filnamn, filformat och skalningsfaktor (i förekommande fall). Gör sedan något av följande:
  
  Klicka på Spara om du vill spara bilden med upplösningen 1x. Välj Skala till och ange skalningsfaktor om du vill skalförändra bilden.
  
  Klicka på Spara flera om du vill spara flera upplösningsversioner av bilden. PSD-filen behöver inte innehåller dessa versioner. Dreamweaver kan spara bilden i flera upplösningar under extraheringen.
Du kan ange önskade upplösningsversioner och motsvarande utdatamapp i Inställningar.
Extrahera bilder med hjälp av ikonen Extrahera resurs
- Dra bilden till dokumentets Live-vy. Live-stödlinjerna i Live-vyn gör det enklare att placera bilden.
När du släpper bilden visas namnet på den i Dreamweaver. Du kan inte bara redigera namnet på bilden, utan också filnamnstillägget. Spara bilden genom att klicka på Retur. Som standard sparas bilden i webbplatsens rotmapp. Spara bilden på en annan plats genom att ange hela sökvägen och filnamnet.
Möjlighet att redigera filnamn och filnamnstillägg när du drar en bild från panelen Extract
- När du klickar på bilden visas sammanhangsberoende kodtips i Dreamweaver. Placera markören vid insättningspunkten i HTML-dokumentets kodvy eller i CSS-dokumentet. När du har skrivit bakgrundsbildens egenskapsnamn eller taggen <img> visas namnet på den valda bilden i kodtipsen. Markera bilden, redigera namnet och filnamnstillägget om du vill och klicka på Retur.
Som standard sparas bilden i webbplatsens rotmapp. Ange en egen sökväg tillsammans med filnamnet om du vill spara bilden på en annan plats.
Extrahera bilder med hjälp av kodtips

Extrahera mått från PSD-filer

Med hjälp av panelen Extract kan du på ett enkelt sätt visa och extrahera måttvärdet mellan två element i PSD-kompositionen.

Gå till PSD-filen på panelen Extract och klicka på önskade element genom att hålla ned Skift-tangenten eller Kommando-tangenten.

På panelen Extract visas det vågräta och lodräta avståndet mellan de två elementen.

Mått på panelen Extract

Obs!

Klicka på ett element och klicka sedan på procent för att visa måtten i procentenheter.
Klicka på det värde som du vill kopiera till Urklipp.
Klistra in värdet där du vill ha det, till exempel i CSS-egenskaperna i CSS Designer eller i koden.

Extrahera teckensnitt, färger och övertoningar från PSD-filer

Med hjälp av panelen Extract kan du extrahera CSS-egenskaper för de teckensnitt, färger eller övertoningar som används i PSD-kompositionen.

Klicka på Stilar på panelen Extract.
Utför följande åtgärder i sektionen Typsnitt om du vill extrahera teckensnitt.
1. Expandera önskad teckensnittstyp.
  
  Klicka på ikonen Adobe Fonts () om du vill ha mer information om teckensnittet.
2. Klicka på det format och den storlek som du vill kopiera, och klicka sedan på Kopiera CSS på popup-menyn som visas. Textelementen som använder teckensnittet, formatet och storleken som du klickar på taggas.
  
  Obs!
  
  Du kan ändra enheten för teckensnittet till ”em” eller ”rem” med inställningarna för Extract (Inställningar > Extract). Klicka på Läs in PSD igen på snabbmenyn uppe till höger på panelen Extract om du vill visa ändringarna.
  
  Extrahera teckensnitt
3. Klistra in CSS där du vill ha det, till exempel i koden eller i CSS Designer.
Utför följande åtgärder i sektionen Färger om du vill extrahera färger:
1. Klicka på önskad färgruta. Elementen som använder den valda färgen taggas.
  
  Obs! Du kan också välja en annan färg från PSD-kompositionen med hjälp av färgväljaren.
2. Välj önskad färgmodell (RGB, Hex eller HSL) på snabbmenyn som visas när du klickar på färgrutan och kopiera (Ctrl+C; Cmd+C) sedan färgvärdet.
  
  Extrahera färger
3. Klistra in färgvärdet där du vill ha det, till exempel i koden eller i CSS Designer.
Om du vill extrahera övertoningar klickar du på en övertoningsfärgruta i sektionen Övertoningar. Klicka på Kopiera CSS på popup-menyn. Klistra in CSS på önskad plats, till exempel i koden eller i CSS Designer.

Leverantörsprefix som har valts i inställningarna (Inställningar > CSS-format) klistras också in med övertoningarna. Om du extraherar en radiell övertoning infogas motsvarande CSS utan leverantörsprefix eftersom radiella övertoningar inte stöds.

Extrahera övertoning