I Dreamweaver (Design- eller kodvyn) placerar du infogningspunkten på din sida där du vill att bilden ska infogas.
Senast uppdaterad den
27 apr. 2021
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 har upphört 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 bilden som ett Smart Object och upprätthåller en aktiv anslutning till den ursprungliga PSD- filen.
Du kan också klistra in hela eller delar av en Photoshop-bild med flera lager eller segment på en webbsida i Dreamweaver. När du kopierar och klistrar in från Photoshop upprätthålls dock ingen aktiv anslutning till den ursprungliga filen. För att uppdatera bilden gör du dina ändringar i Photoshop och kopierar och klistrar in igen.
Obs!
Om du använder den här integrationsfunktionen ofta kanske du vill lagra dina Photoshop-filer på din Dreamweaver-webbplats för enklare åtkomst.Om du gör det ska du se till att dölja dem för att undvika exponering av de ursprungliga resurserna, samt onödiga överföringar mellan den lokala webbplatsen 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å huvudsakliga arbetsflöden för att arbeta med Photoshop-filer i Dreamweaver: kopiera/klistra in-arbetsflödet och Smart Objects-arbetsflödet.
Arbetsflödet kopiera/klistra in
Kopiera/klistra in-arbetsflödet låter dig välja segment eller lager i en Photoshop-fil och sedan använda Dreamweaver för att infoga dem som webbklara bilder. Om du vill uppdatera innehållet senare måste du dock öppna den ursprungliga Photoshop- filen, göra dina ändringar, kopiera ditt segment eller lager till urklippet igen och sedan klistra in det uppdaterade segmentet eller lagret i Dreamweaver. Det här arbetsflödet rekommenderas endast när du vill infoga en del av en Photoshop-fil (till exempel en del av en designkomposition) som en bild på en webbsida.
Arbetsflödet smarta objekt
När du arbetar med kompletta Photoshop-filer rekommenderar Adobe Smart Objects-arbetsflödet. Ett Smart Object i Dreamweaver är en bildresurs placerad på en webbsida som har en aktiv anslutning till en ursprunglig Photoshop-fil (PSD). I Dreamweavers designvy markeras ett Smart Object med en ikon i det övre vänstra hörnet av bilden.
När webbbilden (det vill säga bilden på Dreamweaver-sidan) inte är synkroniserad med den ursprungliga Photoshop-filen upptäcker Dreamweaver att den ursprungliga filen har uppdaterats och visar en av Smart Object-ikonens pilar i rött. När du väljer webbbilden i designvyn och klickar på knappen Uppdatera från original i egenskapsgranskaren uppdateras bilden automatiskt och återspeglar alla ändringar som du gjort i den ursprungliga Photoshop-filen.
När du använder Smart Objects-arbetsflödet behöver du inte öppna Photoshop för att uppdatera en webbbild. Dessutom är alla uppdateringar du gör av ett Smart Object i Dreamweaver icke-destruktiva. Det betyder att du kan ändra webbversionen av bilden på din sida medan du behåller den ursprungliga Photoshop-bilden intakt.
Du kan också uppdatera ett Smart Object utan att välja webbbilden i designvyn.Panelen Resurser låter dig uppdatera alla Smart Objects, inklusive bilder som kanske inte går att välja 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 egenskapskontrollen.
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å din sida skapar Dreamweaver ett Smart Object. Ett Smart Object är en webbklar bild som upprätthåller en aktiv anslutning till den ursprungliga Photoshop-bilden. När du uppdaterar den ursprungliga bilden i Photoshop ger Dreamweaver dig möjligheten att uppdatera bilden i Dreamweaver med ett klick på en knapp.
Välj Infoga > Bild.
Obs!
Du kan också dra PSD-filen till sidan från Files-panelen om du lagrar dina Photoshop-filer på din webbsida.Om du gör så kan du hoppa över nästa steg.
Leta reda på Photoshop PSD-bildfilen i dialogrutan Välj bildkälla genom att klicka på knappen Bläddra och navigera till den.
I dialogrutan Bildoptimering som visas justerar du optimeringsinställningarna efter behov och klickar på OK.
Spara den webbklara bildfilen på en plats inom din webbsidas rotmapp.
Dreamweaver skapar Smart Object baserat på de valda optimeringsinställningarna och placerar en webbklar version av bilden på din sida.Smart Object behåller en aktiv anslutning till originalbilden och låter dig veta när de 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 ditt Smart Object är länkat till, meddelar Dreamweaver dig att den webbklara bilden inte är synkroniserad med originalet.I Dreamweaver betecknas Smart Objects med en ikon i det övre vänstra hörnet av bilden.När den webbklara bilden i Dreamweaver är synkroniserad med den ursprungliga Photoshop-filen är båda pilarna i ikonen gröna.När den webbklara bilden inte är synkroniserad med den ursprungliga Photoshop-filen blir en av ikonens pilar röd.
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 göra uppdateringen från Dreamweaver.
Uppdatera flera smarta objekt
Du kan uppdatera flera Smart Objects samtidigt med Assets-panelen.Assets-panelen låter dig också se Smart Objects som kanske inte kan väljas i dokumentfönstret (till exempel CSS-bakgrundsbilder).
I Files-panelen klickar du på fliken Assets för att visa webbplatsresurser.
Se till att vyn Bilder är vald. Om så inte är fallet klickar du på knappen Bilder.
Markera varje bildresurs på resurspanelen. När du väljer ett Smart Object ser du Smart Object-ikonen i det övre vänstra hörnet av bilden.Vanliga bilder har inte den här ikonen.
För varje Smart Object som du vill uppdatera högerklickar du på filnamnet och väljer Uppdatera från original.Du kan också Ctrl-klicka för att välja flera filnamn och uppdatera dem alla samtidigt.
Obs!
Du behöver inte ha Photoshop installerat för att göra uppdateringen från Dreamweaver.
Ändra storlek på ett smart objekt
Du kan ändra storleken på ett Smart Object i dokumentfönstret precis som du skulle göra med vilken annan bild som helst.
Välj Smart Object i dokumentfönstret och dra storlekshandtagen för att ändra storleken på bilden.Du kan behålla proportionerna mellan bredd och höjd genom att hålla ned Skift-tangenten medan du drar.
Klicka på Uppdatera från original i egenskapskontrollen.
När du uppdaterar Smart Object återrenderas webbbilden icke-destruktivt i den nya storleken, baserat på det aktuella innehållet i originalfilen och de ursprungliga optimeringsinställningarna.
Redigera ett smartobjekts ursprungliga Photoshop-fil
Efter att du skapat ett Smart Object på din Dreamweaver-sida kan du redigera den ursprungliga PSD-filen i Photoshop.Efter att du gjort dina ändringar i Photoshop kan du enkelt uppdatera webbbilden i Dreamweaver.
Obs!
Se till att du har Photoshop inställt som din primära externa bildredigerare.
Markera det smarta objektet i dokumentfönstret.
Klicka på knappen Redigera i egenskapspanelen.
Gör ändringarna i Photoshop och spara den nya PSD-filen.
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 följande tabell visas de olika tillstånden 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 egenskapspanelen eller flytta Photoshop-filen till den plats som anges. |
Kopiera och klistra in ett urval från Photoshop
Du kan kopiera hela eller delar av en Photoshop-bild och klistra in urvalet på din Dreamweaver-sida som en webbklar bild. Du kan kopiera ett enskilt lager eller en uppsättning lager för ett valt område av bilden eller så kan du kopiera ett segment av bilden. När du gör detta skapar dock Dreamweaver inte ett smart objekt.
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.
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.
I Dreamweaver (Design- eller kodvyn) placerar du insättningspunkten
på din sida där du vill att bilden ska infogas.
Välj Redigera > Klistra in.
I dialogrutan Bildoptimering som visas justerar du optimeringsinställningarna efter behov och klickar på OK.
Spara den webbklara bildfilen på en plats inom din
webbsidas 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
Efter att du klistrat in Photoshop-bilder i dina Dreamweaver-sidor kan du redigera den ursprungliga PSD-filen i Photoshop.När du använder arbetsflödet kopiera/klistra in rekommenderar Adobe att du alltid gör dina redigeringar i den originala PSD-filen (snarare än den webbklara bilden själv) och sedan klistrar in igen för att behålla en enda källa.
Obs!
Se till att du har Photoshop inställt som din primära externa bildredigerare för den filtyp du vill redigera.
I Dreamweaver väljer du
en webbklar bild som ursprungligen skapades i Photoshop och gör
ett av följande:
- Klicka på Redigera i bildens egenskapskontroll.
- Tryck på Ctrl (Windows) eller Cmd (Macintosh) medan du dubbelklickar på filen.
- Högerklicka (Windows) eller Ctrl-klicka (Macintosh) på en bild, välj Redigera original med från snabbmenyn och välj sedan Photoshop.
Obs!
Detta förutsätter att Photoshop är inställt som den primära externa bildredigeraren för PSD-bildfiler. Du kanske också vill ställa in Photoshop som standardredigerare för JPEG-, GIF- och PNG- filtyper.
Redigera filen i Photoshop.
Återgå till Dreamweaver och klistra in den uppdaterade bilden eller
urvalet på din sida.
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. En omedelbar förhandsgranskning av bilden med den tillämpade inställningen visas i bakgrunden.
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 för sidan.
När du väljer en förinställning visas de alternativ som kan ställas in i förinställningen. Om du vill anpassa optimeringsinställningarna ytterligare kan du ändra värdena för dessa alternativ.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
