Användarhandbok Avbryt

Extract i Dreamweaver

  1. Användarhandbok för Dreamweaver
  2. Introduktion
    1. Grunderna i responsiv webbdesign
    2. Nyheter i Dreamweaver
    3. Webbutveckling med Dreamweaver – översikt
    4. Dreamweaver/vanliga frågor
    5. Kortkommandon
    6. Systemkrav för Dreamweaver
    7. Sammanfattning av funktioner
  3. Dreamweaver och Creative Cloud
    1. Synka inställningarna för Dreamweaver med Creative Cloud
    2. Creative Cloud Libraries i Dreamweaver
    3. Använda Photoshop-filer i Dreamweaver
    4. Arbeta med Adobe Animate och Dreamweaver
    5. Extrahera webboptimerade SVG-filer från bibliotek
  4. Arbetsytor och vyer i Dreamweaver
    1. Arbetsytan i Dreamweaver
    2. Optimera Dreamweaver-arbetsytan för visuell utveckling
    3. Söka efter filer baserat på filnamn eller innehåll | Mac OS
  5. Skapa webbplatser
    1. Om Dreamweaver-platser
    2. Skapa en lokal version av din webbplats
    3. Ansluta till en publiceringsserver
    4. Ställa i ordning en testserver
    5. Importera och exportera inställningarna för en Dreamweaver-plats
    6. För över befintliga webbplatser från en fjärrserver till din lokala platsrot
    7. Tillgänglighetsfunktioner i Dreamweaver
    8. Avancerade inställningar
    9. Ange platsinställningar för överföring av filer
    10. Ange proxyserverinställningar i Dreamweaver
    11. Synka inställningarna för Dreamweaver med Creative Cloud
    12. Använda Git i Dreamweaver
  6. Hantera filer
    1. Skapa och öppna filer
    2. Hantera filer och mappar
    3. Hämta och skicka filer till och från servern
    4. Checka in och checka ut filer
    5. Synka filer
    6. Jämför skillnader mellan filer
    7. Dölja filer och mappar på din Dreamweaver-plats
    8. Aktivera Design Notes för Dreamweaver-platser
    9. Sätta stopp för Gatekeeper
  7. Layout och design
    1. Använda visuella hjälpmedel för layout
    2. Layouta sidor med CSS
    3. Designa responsiva webbplatser med Bootstrap
    4. Skapa och använda mediefrågor i Dreamweaver
    5. Visa innehåll med tabeller
    6. Färger
    7. Responsiv design med flytande stödrasterlayouter
    8. Extract i Dreamweaver
  8. CSS
    1. Förstå Cascading Style Sheets (CSS)
    2. Utforma sidor med hjälp av CSS Designer
    3. Använda CSS-förbehandlare i Dreamweaver
    4. Ange CSS-formatinställningar i Dreamweaver
    5. Flytta CSS-regler i Dreamweaver
    6. Konvertera infogad CSS till en CSS-regel i Dreamweaver
    7. Arbeta med div-taggar
    8. Använda övertoningar på bakgrunden
    9. Skapa och redigera CSS3-övergångseffekter i Dreamweaver
    10. Formatera kod
  9. Sidinnehåll och resurser
    1. Ange sidegenskaper
    2. Ange CSS-rubrikegenskaper och CSS-länkegenskaper
    3. Arbeta med text
    4. Sök och ersätt text, taggar och attribut
    5. DOM-panel
    6. Redigera i live-vyn
    7. Koda dokument i Dreamweaver
    8. Markera och visa element i dokumentfönstret
    9. Ange textegenskaper i egenskapskontrollen
    10. Stavningskontrollera en webbsida
    11. Använda vågräta linjer i Dreamweaver
    12. Lägga till och ändra teckensnittskombinationer i Dreamweaver
    13. Arbeta med resurser
    14. Infoga och uppdatera datum i Dreamweaver
    15. Skapa och hantera favoritresurser i Dreamweaver
    16. Infoga och redigera bilder i Dreamweaver
    17. Lägga till medieobjekt
    18. Lägga till videor i Dreamweaver
    19. Infoga HTML5-video
    20. Infoga SWF-filer
    21. Lägga till ljudeffekter
    22. Infoga HTML5-ljud i Dreamweaver
    23. Arbeta med biblioteksobjekt
    24. Använda arabisk och hebreisk text i Dreamweaver
  10. Länkar och navigering
    1. Om länkar och navigering
    2. Länkning
    3. Bildmappningar
    4. Felsöka länkar
  11. jQuery-widgetar och effekter
    1. Använda jQuery-gränssnitt och mobilwidgetar i Dreamweaver
    2. Använd jQuery-effekter i Dreamweaver
  12. Koda webbplatser
    1. Om kodning i Dreamweaver
    2. Kodningsmiljön i Dreamweaver
    3. Ange kodningspreferenser
    4. Anpassa kodfärger
    5. Skriva och redigera kod
    6. Kodtips och kodkomplettering
    7. Komprimera och utöka kod
    8. Återanvända kod med fragment
    9. Granska kod
    10. Optimera kod
    11. Redigera kod i designvyn
    12. Arbeta med head-innehåll för sidor
    13. Infoga SSI i Dreamweaver
    14. Använda taggbibliotek i Dreamweaver
    15. Importera egna taggar i Dreamweaver
    16. Använda JavaScript-beteenden (allmänna instruktioner)
    17. Använda inbyggda JavaScript-beteenden
    18. Om XML och XSLT
    19. Utföra XSL-omvandlingar på servern i Dreamweaver
    20. Utföra XSL-omvandlingar på klienten i Dreamweaver
    21. Lägga till teckenentiteter för XSLT i Dreamweaver
    22. Formatera kod
  13. Arbetsflöden mellan produkter
    1. Installera och använda tillägg i Dreamweaver
    2. Uppdateringar i appen i Dreamweaver
    3. Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
    4. Använda Fireworks och Dreamweaver
    5. Redigera innehåll på Dreamweaver-webbplatser med Contribute
    6. Integrering mellan Dreamweaver och Business Catalyst
    7. Skapa anpassade e-postkampanjer
  14. Mallar
    1. Om Dreamweaver-mallar
    2. Känna igen mallar och mallbaserade dokument
    3. Skapa en Dreamweaver-mall
    4. Skapa ändringsbara regioner i mallar
    5. Skapa upprepande regioner och tabeller i Dreamweaver
    6. Använd valfria regioner i mallar
    7. Definiera redigerbara taggattribut i Dreamweaver
    8. Skapa kapslade mallar i Dreamweaver
    9. Redigera, uppdatera och ta bort mallar
    10. Exportera och importera XML-innehåll i Dreamweaver
    11. Lägga till eller ta bort en mall från ett befintligt dokument
    12. Redigera innehåll i Dreamweaver-mallar
    13. Syntaxregler för malltaggar i Dreamweaver
    14. Ange markeringsinställningar för mallområden
    15. Fördelar med att använda mallar i Dreamweaver
  15. Mobiler och flera skärmar
    1. Skapa mediefrågor
    2. Ändra sidorientering för mobila enheter
    3. Skapa webbappar för mobila enheter med Dreamweaver
  16. Dynamiska webbplatser, sidor och webbformulär
    1. Förstå webbprogram
    2. Konfigurera datorn för programutveckling
    3. Felsöka databasanslutningar
    4. Ta bort anslutningsskript i Dreamweaver
    5. Utforma dynamiska sidor
    6. Översikt över källor med dynamiskt innehåll
    7. Definiera källor med dynamiskt innehåll
    8. Lägga till dynamiskt innehåll på sidor
    9. Ändra dynamiskt innehåll i Dreamweaver
    10. Visa databasposter
    11. Ange och felsöka livedata i Dreamweaver
    12. Lägga till anpassade serverbeteenden i Dreamweaver
    13. Bygga formulär med Dreamweaver
    14. Använda formulär för att samla in information från användarna
    15. Skapa och aktivera ColdFusion-formulär i Dreamweaver
    16. Skapa webbformulär
    17. Förbättrat HTML5-stöd för formulärelement
    18. Använda Dreamweaver för att utveckla ett formulär
  17. Bygga program visuellt
    1. Bygga huvud- och detaljsidor i Dreamweaver
    2. Bygga sök- och resultatsidor
    3. Bygga en postinmatningssida
    4. Bygga en postuppdateringssida i Dreamweaver
    5. Bygga postborttagningssidor i Dreamweaver
    6. Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
    7. Bygga en registreringssida
    8. Bygga en inloggningssida
    9. Bygga en sida som bara behöriga användare har åtkomst till
    10. Skydda mappar i ColdFusion med Dreamweaver
    11. Använda ColdFusion-komponenter i Dreamweaver
  18. Testa, förhandsgranska och publicera webbplatser
    1. Förhandsgranska sidor
    2. Förhandsgranska Dreamweaver-webbsidor på flera enheter
    3. Testa Dreamweaver-platsen

 

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

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
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:
  1. Klicka på Ladda upp PSD på panelen Extrahera.
  2. Klicka på Alternativ i Finder-fönstret och välj *.psd på rullgardinsmenyn.
  3. 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.

  1. Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Mac).

  2. Välj Extract i listan Kategori.

  3. (Valfritt) Ändra standardformatet som bilderna ska extraheras med.

    Extraherade bildformat i Dreamweaver CC
    Extraherade bildformat

  4. (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
    Extrahera för enheter

  5. (Valfritt) Klicka på Rensa cache om du vill radera cachelagrade data som relaterar till användningen av Extract.

  6. Klicka på Använd och stäng sedan dialogrutan Inställningar.

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

  1. Klicka på önskad PSD-fil på panelen Extract (Fönster > Extract). Miniatyrbildsvisningen av PSD-filen utvidgas så att du tydligt ser kompositionen.

  2. 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
    Alternativet Kopiera CSS på panelen Extract

    Du kopierar CSS genom att markera de egenskaper du vill kopiera och sedan klicka på Kopiera CSS. 

  3. 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:

  1. Öppna en CSS-källa som är kopplad till dokumentet eller växla till kodvyn för ett HTML-dokument.

  2. Klicka på önskad PSD-fil på panelen Extract och klicka därefter på önskat element i kompositionen.

  3. Gå till dokumentet och placera insättningspunkten vid önskad plats i koden. 

  4. 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
    Kodtips med CSS-egenskapen för ett element i en PSD-fil

  5. 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 gruppvis i Dreamweaver CC
    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
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.

  1. Klicka på den PSD-fil du vill hämta bilderna från på panelen Extract.

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

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

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

  1. 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
    Mått på panelen Extract

    Obs!

    Klicka på ett element och klicka sedan på procent för att visa måtten i procentenheter.

  2. Klicka på det värde som du vill kopiera till Urklipp.

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

  1. Klicka på Stilar på panelen Extract.

  2. 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
      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
      Extrahera färger

    3. Klistra in färgvärdet där du vill ha det, till exempel i koden eller i CSS Designer.

  3. 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
    Extrahera övertoning

Adobes logotyp

Logga in på ditt konto