Användarhandbok Avbryt

Använda Photoshop-filer i Dreamweaver

Sök
Dreamweaver

Dreamweaver

Öppna appen
  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
  19. Felsökning
    1. Korrigerade problem
    2. Kända fel

 

 

Lär dig hur Photoshop är integrerat med Dreamweaver. Arbeta med smarta objekt i arbetsflöden med Photoshop och Dreamweaver.

Om Photoshop-integration

Obs!

Arbetsflödena för Photoshop-integrering finns inte kvar i Dreamweaver 21.0 och senare versioner.

Du kan infoga Photoshop-bildfiler (PSD-format) på webbsidor i Dreamweaver och låta Dreamweaver optimera dem som webbklara bilder (GIF-, JPEG- och PNG-format). När du gör detta infogar Dreamweaver bilderna som smarta objekt och underhåller en aktiv anslutning till den ursprungliga PSD-filen.

Du kan även klistra in hela eller delar av en flerradig eller flersegmenterad Photoshop-bild på en webbsida i Dreamweaver. När du kopierar och klistrar in från Photoshop underhålls emellertid ingen aktiv anslutning till den ursprungliga filen. Om du vill uppdatera bilden gör du ändringarna i Photoshop, och kopierar och klistrar in igen.

Obs!

Om du använder den här integrationsfunktionen ofta kan du spara Photoshop-filerna på Dreamweaver-platsen för att lättare komma åt dem. Om du gör så, måste du se till att svepa in dem så att du inte exponerar de ursprungliga objekten, och undviker onödiga överföringar mellan den lokala platsen och fjärrservern.

Se Integrera Dreamweaver med Photoshop, där det finns en självstudiekurs om Photoshop-integration med Dreamweaver.

Om smarta objekt och Photoshop-Dreamweaver-arbetsflöden

Det finns två huvudarbetsflöden för att arbeta med Photoshop-filer i Dreamweaver: arbetsflödena Kopiera/klistra in och Smarta objekt.

Arbetsflödet Kopiera/klistra in

Med arbetsflödet kopiera/klistra in kan du välja segment eller lager i en Photoshop-fil och sedan använda Dreamweaver för att infoga dem som webbfärdiga bilder. Om du vill uppdatera innehållet vid ett senare tillfälle måste du emellertid först öppna originalfilen i Photoshop, göra dina ändringar där, kopiera segmentet eller lagret igen och sedan klistra in det uppdaterade segmentet eller lagret i Dreamweaver. Det arbetsflödet rekommenderas bara om du vill infoga en del av en Photoshop-fil (till exempel en del av en designkomposition) som bild på en webbsida.

Arbetsflödet Smarta objekt

När du jobbar med hela Photoshop-filer rekommenderas arbetsflödet smarta objekt. Ett smart objekt i Dreamweaver är en bildresurs på en webbsida som har en fungerande koppling till den ursprungliga PSD-filen (Photoshop). I designvyn i Dreamweaver markeras smarta objekt med en ikon i övre vänstra hörnet av bilden.

Smart objekt

Om webbilden (bilden på Dreamweaver-sidan) inte är synkroniserad med den ursprungliga PSD-filen upptäcker Dreamweaver att originalfilen har uppdaterats, och en av pilarna i ikonen för det smarta objektet blir röd. Om du väljer webbilden i designvyn och klickar på knappen Uppdatera från original i egenskapspanelen uppdateras bilden automatiskt och återger alla ändringar som du har gjort i den ursprungliga Photoshop-filen.

Om du använder arbetsflödet smarta objekt behöver du inte öppna Photoshop för att uppdatera en webbild. Dessutom är uppdateringarna som du gör i ett smart objekt i Dreamweaver icke-förstörande. Det innebär att du kan ändra webbversionen av bilden på sidan utan att det påverkar den ursprungliga Photoshop-bilden.

Du kan också uppdatera ett smart objekt utan att välja webbilden i designvyn. Med resurspanelen kan du uppdatera alla smarta objekt, inklusive bilder som inte går att markera i dokumentfönstret (till exempel CSS-bakgrundsbilder).

Inställningar för bildoptimering

För både kopiera/klistra in-arbetsflödet och smarta objekt-arbetsflödet kan du ange optimeringsinställningar i dialogrutan Bildoptimering. I dialogrutan kan du till exempel ange filformat och bildkvalitet. Om du kopierar ett segment eller lager eller infogar en Photoshop-fil som smart objekt för första gången visas den här dialogrutan så att du snabbt och lätt kan skapa webbilden.

Om du kopierar och klistrar in en uppdatering av ett segment eller lager kommer Dreamweaver ihåg de ursprungliga inställningarna och återskapar webbilden baserat på dem. Samma sak gäller om du uppdaterar ett smart objekt med egenskapskontrollen. Då används samma inställningar som när du infogade bilden första gången. Du kan ändra bildinställningarna när du vill genom att markera webbilden i designvyn och klicka på knappen Redigera bildinställningar i egenskapspanelen.

Spara Photoshop-filer

Om du har infogat en webbild och inte har sparat den ursprungliga Photoshop-filen på Dreamweaver-platsen behandlas sökvägen till den ursprungliga filen som absolut lokal sökväg. (Det gäller för både arbetsflödet kopiera/klistra in- och arbetsflödet smarta objekt.) Om till exempel sökvägen till Dreamweaver-platsen är C:\Sites\mySite och Photoshop-filen sparas på C:\Images\Photoshop kommer den ursprungliga resursen inte att ses som en del av platsen mySite. Då uppstår problem om du vill dela Photoshop-filen med någon annan i din grupp, eftersom programmet tror att filen bara är tillgänglig på en lokal hårddisk.

Om du däremot sparar Photoshop-filen på Dreamweaver-platsen skapas en platsrelativ sökväg till filen. Alla användare som har åtkomst till platsen kan då hitta rätt sökväg till filen, förutsatt att du även har gett åtkomst till den ursprungliga filen så att de kan hämta den.

Se Komplett redigering med Photoshop, där det finns en videosjälvstudiekurs om komplett redigering med Photoshop.

Skapa ett smart objekt

När du infogar en Photoshop-bild (PSD-fil) på sidan skapar Dreamweaver ett smart objekt. Ett smart objekt är en webbfärdig bild som underhåller en aktiv anslutning till den ursprungliga Photoshop-bilden. När du uppdaterar den ursprungliga bilden i Photoshop kan du uppdatera bilden i Dreamweaver med bara ett par klick.

  1. I Dreamweaver (design- eller kodvyn) placerar du insättningspunkten på sidan där du vill att bilden ska infogas.

  2. Välj Infoga > Bild.

    Obs!

    Du kan också dra PSD-filen till sidan från filpanelen om du lagrar Photoshop-filerna på webbplatsen. Om du gör så kan du hoppa över nästa steg.

  3. Leta reda på Photoshop PSD-bildfilen i dialogrutan Välj bildkälla genom att klicka på knappen Bläddra och navigera till den.

  4. I dialogrutan Bildoptimering som visas justerar du optimeringsinställningarna efter behov och klickar på OK.

  5. Spara den webbklara bildfilen på en plats i webbplatsens rotmapp.

Dreamweaver skapar smarta objekt baserat på de valda optimeringsinställningarna och placerar en webbfärdig version av bilden på sidan. Det smarta objektet underhåller en aktiv anslutning till den ursprungliga bilden och du meddelas när dessa två inte är synkroniserade.

Obs!

Om du senare bestämmer att du vill ändra optimeringsinställningarna för en bild som har placerats på sidorna, kan du markera bilden, klicka på knappen Redigera bildinställningar i egenskapskontrollen och göra ändringarna i dialogrutan Bildoptimering. De ändringar som görs i dialogrutan Bildoptimering används på ett ickeförstörande sätt. Dreamweaver ändrar aldrig i den ursprungliga Photoshop-filen, och återskapar alltid webbilden baserat på de ursprungliga data.

Se Komplett redigering med Photoshop, där det finns en videosjälvstudiekurs om komplett redigering med Photoshop.

Uppdatera ett smart objekt

Om du ändrar Photoshop-filen som det smarta objektet är länkat till, visas ett meddelande i Dreamweaver om att den webbfärdiga bilden inte är synkroniserad med originalet. I Dreamweaver markeras smarta objekt med en ikon i det övre vänstra hörnet på bilden. När den webbfärdiga bilden i Dreamweaver är synkroniserad med den ursprungliga Photoshop-filen, är båda pilarna i ikonen gröna. När den webbfärdiga bilden inte är synkroniserad med den ursprungliga Photoshop-filen blir en av ikonens pilar röd.

  1. Om du vill uppdatera ett smart objekt med det aktuella innehållet i den ursprungliga Photoshop-filen, markerar du det smarta objektet i dokumentfönstret och klickar sedan på knappen Uppdatera från original i egenskapspanelen.

Obs!

Du behöver inte ha Photoshop installerat för att kunna uppdatera från Dreamweaver.

Uppdatera flera smarta objekt

Du kan uppdatera flera smarta objekt samtidigt genom att använda resurspanelen. Med resurspanelen kan du också visa smarta objekt som kanske inte kan markeras i dokumentfönstret (till exempel CSS-bakgrundsbilder).

  1. Klicka på fliken Resurser på filpanelen om du vill visa platsresurser.

  2. Se till att vyn Bilder är vald. Om så inte är fallet klickar du på knappen Bilder.

  3. Markera varje bildresurs på resurspanelen. När du markerar ett smart objekt visas ikonen för smarta objekt i det övre vänstra hörnet på bilden. Vanliga bilder har inte den här ikonen.
  4. För varje smart objekt som du vill uppdatera ska du högerklicka på filnamnet och välja Uppdatera från original. Du kan också Ctrl-klicka om du vill markera flera filnamn och uppdatera alla samtidigt.
Obs!

Du behöver inte ha Photoshop installerat för att kunna uppdatera från Dreamweaver.

Ändra storlek på ett smart objekt

Du kan ändra storlek på ett smart objekt i dokumentfönstret på samma sätt som med andra bilder.

  1. Markera det smarta objektet i dokumentfönstret och ändra storleken genom att dra i storlekshandtagen. Du upprätthåller bredd- och höjdförhållandena genom att hålla ned Skift medan du drar.

  2. Klicka på Uppdatera från original i egenskapspanelen.

    När du uppdaterar smarta objekt återges webbilden igen till den nya storleken på ett ickeförstörande sätt, baserat på det aktuella innehållet i den ursprungliga filen och de ursprungliga optimeringsinställningarna.

Redigera ett smart objekts ursprungliga Photoshop-fil

När du har skapat ett smart objekt på Dreamweaver-sidan kan du redigera den ursprungliga PSD-filen i Photoshop. När du har gjort ändringarna i Photoshop kan du på ett enkelt sätt uppdatera webbilden i Dreamweaver.

Obs!

Se till att du har ställt in Photoshop som primär extern bildredigerare.

  1. Markera det smarta objektet i dokumentfönstret.

  2. Klicka på knappen Redigera i egenskapspanelen.

  3. Gör ändringarna i Photoshop och spara den nya PSD-filen.

  4. Markera det smarta objektet igen i Dreamweaver och klicka på knappen Uppdatera från original.

Obs!

Om du har ändrat storlek på bilden i Photoshop måste du återställa storleken på webbilden i Dreamweaver. Dreamweaver uppdaterar det smarta objektet baserat enbart på innehållet i den ursprungliga Photoshop-filen, och inte på dess storlek. Om du vill synkronisera storleken på en webbild med storleken på den ursprungliga Photoshop-filen högerklickar du på bilden och väljer Återställ storlek till original.

Lägen för smarta objekt

I tabellen nedan beskrivs de olika lägena för smarta objekt.

Läge för smart objekt

Beskrivning

Rekommenderad åtgärd

Bilderna synkroniserade

Webbilden är synkroniserad med det aktuella innehållet i den ursprungliga Photoshop-filen. Bredd- och höjdattribut i HTML-koden matchar dimensionerna i webbilden.

Ingen

Originalresursen ändrad

Den ursprungliga Photoshop-filen har ändrats efter att webbilden skapades i Dreamweaver.

Synkronisera de två bilderna med hjälp av knappen Uppdatera från original i egenskapspanelen.

Dimensionerna för webbilden är annorlunda jämfört med vald bredd och höjd för HTML

Bredd- och höjdattributen i HTML-koden är inte desamma som bredd- och höjddimensionerna för webbilden som Dreamweaver skapar när bilden infogas. Om webbildens dimensioner är mindre än de valda bredd- och höjdvärdena för HTML kan bilden se pixlad ut.

Återskapa webbilden från den ursprungliga Photoshop-filen med knappen Uppdatera från original i egenskapspanelen. Dreamweaver använder de aktuella bredd- och höjddimensionerna för HTML när bilden återskapas.

Dimensionerna för originalresursen är för små för vald bredd och höjd för HTML

Bredd- och höjdattributen i HTML-koden är större än bredd- och höjddimensionerna för den ursprungliga Photoshop-filen. Webbilden kan se pixlad ut.

Du ska inte skapa webbilder med dimensioner som är större än dimensionerna för den ursprungliga Photoshop-filen.

Det gick inte att hitta originalresursen

Dreamweaver kan inte hitta den ursprungliga Photoshop-filen som anges i textrutan Original i egenskapspanelen.

Korrigera filsökvägen i textrutan Original i egenskapskontrollen, eller flytta Photoshop-filen till den plats som anges.

Kopiera och klistra in en markering från Photoshop

Du kan kopiera hela eller delar av en Photoshop-bild och klistra in markeringen på Dreamweaver-sidan som en webbklar bild. Du kan kopiera ett enskilt lager eller en uppsättning lager för ett markerat område eller så kan du kopiera ett segment av bilden. När du gör detta skapas emellertid inget smart objekt i Dreamweaver.

Obs!

Funktionen Uppdatera från original kan inte användas för inklistrade bilder, men du kan fortfarande öppna och redigera den ursprungliga Photoshop-filen genom att markera den inklistrade bilden och klicka på knappen Redigera i egenskapspanelen.

  1. Gör något av följande i Photoshop:
    • Kopiera hela eller delar av ett enskilt lager genom att använda markeringsramen för att markera den del som du vill kopiera och välj sedan Redigera > Kopiera. På så sätt kopieras endast det aktiva skiktet för det markerade området i Urklipp. Om du har skiktbaserade effekter kopieras de inte.
    • Kopiera och slå samman flera lager genom att använda markeringsramen för att markera den del som du vill kopiera och välj sedan Redigera > Kopiera sammanslagna. Detta slätar ut och kopierar alla markerade områdens aktiva och nedre skikt till Urklipp. Om du har skiktbaserade effekter som är kopplade till några av dessa skikt kopieras de.
    • Kopiera ett segment genom att använda verktyget Markera segment för att markera segmentet och välj sedan Redigera > Kopiera. Detta slätar ut och kopierar alla aktiva och nedre lager i segmentet till Urklipp.
    Obs!

    Du kan välja Markera > Alla för att snabbt markera en hel bild för kopiering.

  2. I Dreamweaver (design- eller kodvyn) placerar du insättningspunkten på sidan där du vill att bilden ska infogas.

  3. Välj Redigera > Klistra in.

  4. I dialogrutan Bildoptimering som visas justerar du optimeringsinställningarna efter behov och klickar på OK.

  5. Spara den webbklara bildfilen på en plats i webbplatsens rotmapp.

Dreamweaver definierar bilden enligt optimeringsinställningarna och placerar en webbklar version av bilden på sidan. Information om bilden, t.ex. platsen för den ursprungliga PSD-källfilen, sparas i en Design Note, oavsett om du har aktiverat Design Notes för webbplatsen eller ej. Med Design Note kan du gå tillbaka till att redigera den ursprungliga Photoshop-filen från Dreamweaver.

Redigera inklistrade bilder

När du har klistrat in Photoshop-bilder på Dreamweaver-sidorna kan du redigera den ursprungliga PSD-filen i Photoshop. När du använder arbetsflödet för kopiera/klistra in bör du alltid redigera den ursprungliga PSD-filen (och inte den webbfärdiga bilden), och sedan klistra in den igen så att du upprätthåller en enda källa.

Obs!

Kontrollera att du har angett Photoshop som primär extern bildredigerare för den filtyp som du vill redigera.

  1. I Dreamweaver väljer du en webbklar bild som ursprungligen skapades i Photoshop och gör något av följande:
    • Klicka på Redigera i bildens egenskapskontroll.
    • Tryck på Ctrl (Windows) eller Kommando (Macintosh) och dubbelklicka på filen.
    • Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på bilden och välj Redigera original med på snabbmenyn och välj sedan Photoshop.
    Obs!

    Detta förutsätter att Photoshop är angivet som primär extern bildredigerare för PSD-bildfiler. Du kan även ange Photoshop som standardredigerare för filtyperna JPEG, GIF och PNG.

  2. Redigera filen i Photoshop.
  3. Gå tillbaka till Dreamweaver och klistra in den uppdaterade bilden eller markeringen på sidan.

Om du någon gång vill optimera om bilden kan du markera den och klicka på knappen Redigera bildinställningar i egenskapskontrollen.

Ange alternativ i dialogrutan Bildoptimering

När du skapar ett smart objekt eller klistrar in en markering från Photoshop visas dialogrutan Bildoptimering i Dreamweaver. (Den här dialogrutan visas i Dreamweaver även för andra typer av bilder om du markerar bilden och sedan klickar på Redigera bildinställningar i egenskapskontrollen.) Med den här dialogrutan kan du definiera och förhandsvisa inställningar för webbfärdiga bilder med hjälp av rätt blandning av färg, komprimering och kvalitet.

En webbklar bild är en bild som kan visas i alla moderna webbläsare och som ser likadan ut oavsett vilket system eller vilken webbläsare som användaren har. I allmänhet är resultatet av inställningarna en kompromiss mellan kvalitet och filstorlek.

Obs!

Vilka inställningar du än väljer påverkas endast den importerade versionen av bildfilen. Den ursprungliga Photoshop PSD- eller Fireworks PNG-filen bevaras alltid orörd.

Förinställning

Välj en förinställning som passar för dina krav. Bildens filstorlek ändras utifrån den förinställning som du väljer. Bilden förhandsvisas omedelbart i bakgrunden med den inställning som används.

Välj till exempel PNG24 för foton (hög detaljskärpa) för bilder som måste visas med stor tydlighet.  Välj GIF för bakgrundsbilder (mönster) om du infogar ett mönster som ska fungera som bakgrund på sidan.


När du väljer en förinställning visas de alternativ som kan ställas in i förinställningen.  Ändra de här värdena om du vill anpassa optimeringsinställningarna vidare.

Få hjälp snabbare och enklare

Ny användare?

Snabblänkar

Visa alla dina planer Hantera dina planer
Visa snabblänkar
Dölj snabblänkar

Juridiska meddelanden    |    Onlinesekretesspolicy