Placera insättningspunkten där du vill att bilden ska visas i dokumentfönstret och gör något av följande:
Lär dig infoga, redigera, ersätta och ändra storlek på bilder i Dreamweaver.
Bilder utgör en viktig del av en webbplats eftersom de ger mer kontext till platsens besökare. Även om det finns många filformat för grafik, är det formaten GIF, JPEG och PNG som används mest på webbsidor. GIF- och JPEG-filformaten är kompatibla med webbsidorna och kan visas i de flesta webbläsare. Följande text innehåller mer information om dessa filformat:
GIF (Graphic Interchange Format) – GIF-filer innehåller högst 256 färger och passar bäst för bilder utan halvtoner. GIF-filer är bra för bilder med stora områden med enhetliga färger, till exempel navigeringsfält, knappar, ikoner, logotyper och andra bilder med enhetliga färger och toner.
JPEG (Joint Photographic Experts Group) – Filformatet JPEG är det mest lämpade för foton och bilder med halvtoner, eftersom JPEG-filer kan innehålla miljontals färger. Om en JPEG-fils kvalitet minskas blir den mindre och går fortare att hämta. Det är många gånger möjligt att göra en god avvägning mellan bildens kvalitet och filstorlek genom att komprimera JPEG-filen.
PNG (Portable Network Group) – Filformatet PNG är ett patentfritt alternativ till GIF-filer. Formatet har stöd för indexerade färger, gråskalor, miljontals färger samt stöd för alfakanaler, vilket gör att delar kan vara genomskinliga. I PNG-filer behålls information om lager, vektorer, färg och effekter, till exempel skuggor. Dessutom går det alltid att redigera alla element. Filerna måste ha filnamnstillägget .png om Dreamweaver ska förstå att de är PNG-filer.
Dreamweaver är inte en WYSIWYG-redigerare (what you see is what you get/du får det du ser). Det innebär att du kan lägga till och infoga bilder med hjälp av Dreamweaver, men du kan inte flytta eller placera bilderna från gränssnittet.
Om du vill flytta bilder i en layout måste du använda CSS som visar HTML-innehållet på det sätt du vill. Du kan studera grundkurserna om HTML och CSS och lära dig arbeta med bilder med hjälp av kod. Du kan också ta hjälp av självstudiekursen om att arbeta med bilder i Dreamweaver.
Läs mer i följande avsnitt om du vill veta hur du infogar och använder bilder med hjälp av Dreamweaver.
När du infogar en bild i ett Dreamweaver-dokument skapas en hänvisning till bildfilen i HTML-källkoden. Om hänvisningen ska vara korrekt måste bildfilen finnas på den aktuella webbplatsen. Om bilden inte finns på den aktuella webbplatsen frågar Dreamweaver om du vill kopiera filen dit.
I Dreamweaver kan du även infoga bilder dynamiskt. Dynamiska bilder är sådana som ändras ofta. Det kan till exempel vara annonsrotationssystem som slumpvis väljer ut en av flera möjliga annonser. Systemet visar sedan motsvarande bild när en sida hämtas.
Du kan också dra och släppa lager från panelen Extract till en plats i Dreamweaver Live-vyn med hjälp av Live-stödlinjer och Elementsnabbvyn. Du kan överföra PSD-filer till panelen Extract och sedan dra och släppa lager från PSD-filen direkt till ditt Dreamweaver-dokument.
När du har infogat en bild kan du ange bildtaggen och tillgänglighetsattribut. De identifieras av skärmläsare för användare med nedsatt syn. Du kan redigera dessa attribut i HTML-koden.
Mer information om hur du extraherar bilder från PSD-kompositioner finns i Extrahera bilder från PSD-filer.
Placera insättningspunkten där du vill att bilden ska visas i dokumentfönstret och gör något av följande:
Bläddra till och välj bilden eller innehållskällan som du vill infoga.
Om dokumentet du arbetar med inte har sparats genererar Dreamweaver en file://-hänvisning till bildfilen. När du sparar dokument någonstans på webbplatsen omvandlas hänvisningen till en dokumentrelativ sökväg.
När du infogar bilder kan du använda en absolut sökväg till en bild som finns på en fjärrserver. Det vill säga en bild som inte finns på den lokala hårddisken. Om du får prestandaproblem under arbetet kan du emellertid inaktivera visningen av bilden i vyn Design genom att avmarkera Kommandon > Visa externa filer.
Klicka på OK.
I egenskapskontrollen för bilder kan du ange en bilds egenskaper. Om du inte ser alla bildegenskaper kan du klicka på pilen i det nedre högra hörnet.
Klicka på bilden och välj Fönster > Egenskaper om du vill visa egenskapskontrollen för en vald bild.
Ange ett namn i textrutan under miniatyrbilden. Du kan referera till bilden i Dreamweaver-beteenden med det här namnet, till exempel Växla bild, eller om du använder skriptspråk som JavaScript eller VBScript.
B och H
Bildens bredd och höjd i pixlar. Dreamweaver uppdaterar automatiskt dessa textrutor med bildens ursprungsmått när du infogar en bild på en sida.
Om du anger bredd- och höjdvärden som inte stämmer med bildens verkliga bredd och höjd, visas inte bilden som den ska i en webbläsare. Du kan återställa ursprungsvärdena genom att klicka på etiketterna till textrutorna B och H eller genom att klicka på knappen Återställ bildstorlek till höger om textrutorna B och H.
Du kan ändra de här värdena om du vill välja hur stor den här bildinstansen ska vara när den visas. Ändringen gör dock inte att hämtningstiden minskas eftersom webbläsaren hämtar alla bilddata innan bilden storleksändras. Vill du att bilden ska gå att hämta snabbare och se till att den alltid visas i samma storlek, ska du ändra storlek på den i ett bildredigeringsprogram.
Källa
Anger bildens källfil. Klicka på mappikonen och bläddra dig fram till källfilen eller skriv sökvägen.
Länk
Anger en hyperlänk för bilden. Dra ikonen Peka på fil till en fil på panelen Filer. Klicka på mappikonen för att bläddra till ett dokument på webbplatsen eller skriv webbadressen själv.
Alt
Anger alternativ text som visas i stället för bilden i webbläsare som inte visar bilder eller i webbläsare där bilder hämtas manuellt. Användare med nedsatt syn som använder röstgeneratorer i webbläsare som bara visar text får texten uppläst. I vissa webbläsare visas den här texten när pekaren befinner sig över bilden.
Kartnamn och Aktiv-verktyg
Gör att du kan etikettera och skapa ett klientbildschema.
Mål Anger i vilken ram eller i vilket fönster den länkade sidan ska visas. Det här alternativet går inte att välja om bilden inte är länkad till en annan fil. Namnet på alla ramar i den aktuella ramuppsättningen visas i listan Mål. Du kan även välja mellan följande reserverade målnamn:
Redigera
Startar bildredigeraren som du har angett i inställningen Externa redigerare. Den markerade bilden öppnas.
Redigera bildinställningar
Öppnar dialogrutan Bildoptimering så att du kan optimera bilden.
Arbetsflödet för bildoptimering finns inte kvar i Dreamweaver 21.0 och senare versioner.
Uppdatera från original
Om bilden på Dreamweaver-sidan inte är synkroniserad med den ursprungliga Photoshop-filen, upptäcker Dreamweaver att originalfilen har uppdaterats. Programmet visar en av pilarna i ikonen för smarta objekt i rött. När du väljer webbilden i designvyn och klickar på knappen Uppdatera från original i egenskapskontrollen, uppdateras bilden automatiskt. Den uppdaterade bilden återspeglar de ändringar du gjort i den ursprungliga Photoshop-filen.
Beskär
Beskär bildens storlek och tar bort områden som du inte vill ha kvar från den markerade bilden.
Ändra
Samplar om en bild som du har ändrat storlek på. Det förbättrar bildkvaliteten i den nya storleken och formatet.
Intensitet och kontrast
Ändrar en bilds inställningar av intensitet och kontrast.
Skärpa
Justerar en bilds skärpa.
Du kan också redigera bildattribut i Live-vyn med hjälp av snabbegenskapskontrollen.
Om du infogar tillgänglighetsattribut för en bild går de att redigera i HTML-koden.
Klicka på en bild i dokumentfönstret eller välj image-taggen i koden.
Gör något av följande om du vill ange ett namn eller en kort beskrivning av bilden med mindre än 50 tecken i rutan Alternativ text. Skärmläsaren läser upp informationen som du skriver här.
Du kan ändra storlek på element som bilder, plugin-program, Shockwave- och SWF-filer, miniprogram och ActiveX-kontroller i Dreamweaver.
Genom att ändra storlek på en bild visuellt ser du hur bilden påverkar layouten i olika storlekar, men det innebär inte att bilden ändras till den storlek som du anger. Om du ändrar storlek på en bild visuellt i Dreamweaver utan att använda ett bildredigeringsprogam, ändrar användarens webbläsare storlek på bilden när sidan hämtas. Det kan göra att sidan tar längre tid att hämta och att bilden inte visas korrekt i webbläsaren.
Vill du att bilden ska gå att hämta snabbare och se till att den alltid visas i samma storlek ska du ändra storlek på den i ett bildredigeringsprogram. Läs följande text om du vill veta hur du ändrar storlek på ett element visuellt.
Storlekshandtag visas längst ned, till höger om och i det undre högra hörnet av elementet. Om det inte visas några storlekshandtag klickar du utanför elementet och väljer det sedan igen. Du kan också klicka på motsvarande tagg i taggväljaren för att välja elementet.
Om du vill återställa ett ändrat element till ursprungsstorleken, tar du bort värdena i fälten B och H i egenskapskontrollen. Du kan också klicka på knappen Återställ storlek i bildens egenskapskontroll.
Klicka på knappen Återställ storlek i bildens egenskapskontroll.
När du ändrar storlek på en bild i Dreamweaver kan du också sampla om bilden med hänsyn till de nya måtten. Omsampling gör att pixlar i en storleksändrad JPEG- eller GIF-fil läggs till eller tas bort. Den ursprungliga filens utseende bibehålls i så hög utsträckning som möjligt. En omsamplad bild är mindre och tar kortare tid att hämta.
Ändra bildens storlek enligt beskrivningen i avsnittet Ändra storlek på en bild.
Klicka på Sampla om i bildens egenskapskontroll.
Det går inte att sampla om bildplatshållare eller andra element än bitmappbilder.
Dreamweaver innehåller enkla bildredigeringsfunktioner. Du kan ändra bilder utan att behöva använda ett externt bildredigeringsprogram som Photoshop. Bildredigeringsverktygen i Dreamweaver är utformade på så sätt att du lätt kan samarbeta med de formgivare som har till uppgift att skapa bildfiler till webbplatsen.
Du kan sampla om, beskära, optimera och skärpa bilder i Dreamweaver. Du kan också justera intensiteten och kontrasten i bilder.
Du behöver inte ha Photoshop eller något bildredigeringsprogram installerat på datorn för att kunna använda bildredigeringsfunktionerna i Dreamweaver.
Välj Redigera > Bild. Du kan ange följande bildredigeringsfunktioner i Dreamweaver:
Optimera
Välj en förinställning, ange ett filformat och ange kvalitetsnivån. När du flyttar skjutreglaget över kvalitetsnivåerna kan du se bildens filstorlek i dialogrutan. Klicka på OK när du är klar.
Ändra
Gör att pixlar i en storleksändrad JPEG- eller GIF-fil läggs till eller tas bort. Den ursprungliga filens utseende bibehålls i så hög utsträckning som möjligt. En omsamplad bild är mindre och tar kortare tid att hämta.
När du ändrar storlek på en bild i Dreamweaver kan du sampla om den med hänsyn till de nya måtten. När ett bitmappobjekt samplas om läggs pixlar till eller tas bort från bilden, så att den blir större respektive mindre. Att sampla om en bild till högre upplösning brukar inte leda till någon större kvalitetsförlust. Dataförluster uppkommer emellertid alltid vid omsampling till lägre upplösning, och kvaliteten blir vanligtvis sämre.
Beskär
Gör att du kan redigera bilder genom att minska en bilds storlek. Du kan använda beskärning för att framhäva bildmotivet bättre och ta bort oväsentligheter runt blickfånget i bilden.
Intensitet och kontrast
Ändrar bildpixlarnas kontrast eller intensitet. Intensitet och kontrast påverkar bildens högdagrar, skuggor och mellantoner. Intensitet/kontrast används normalt för att korrigera för mörka eller för ljusa bilder.
Skärpa
Ändrar bildens fokus genom att kontrasten ökas för alla kanter som hittas i bilden. Om du skannar en bild eller tar ett digitalfoto brukar de flesta bildinhämtningsprogram mjuka upp kanterna kring motiven i bilden. Skanningen gör så att fina detaljer inte försvinner i pixlarna som de digitala bilderna består av. Men vill du få fram detaljerna i digitala bilder behöver ofta skärpan ökas. Med alternativet Skärpa kan du öka kantkontrasten så att bilden ser skarpare ut.
Dreamweavers bildredigeringsfunktioner kan bara tillämpas på bildfilsformaten JPEG, GIF och PNG. Andra bitmappformat går inte att redigera med dessa bildredigeringsfunktioner.
Du kan beskära bitmappbilder i Dreamweaver.
När du beskär en bild ändras källfilen på hårddisken. Vi rekommenderar att du behåller en kopia av bildfilen ifall du behöver återställa den ursprungliga bilden.
Öppna sidan med bilden som du vill beskära, markera bilden och gör något av följande:
Du får ett meddelande om att bildfilen som du beskär ändras på disken. Klicka på OK.
Varje pixel i den valda bitmappen utanför beskärningsrutan tas bort, men de övriga objekten i bilden blir kvar.
Förhandsvisa bilden och kontrollera att den ser ut som du förväntar dig. Välj i annat fall Redigera > Ångra beskärning så återställs den ursprungliga bilden.
Du kan ångra beskärningen och återställa den ursprungliga bildfilen ända tills du stänger Dreamweaver eller redigerar filen i ett externt bildredigeringsprogram.
Du kan optimera bilder på webbsidor inifrån Dreamweaver.
Öppna sidan med bilden som du vill optimera. Markera bilden och gör något av följande:
Gör dina redigeringar i dialogrutan Bildoptimering och klicka på OK.
Skärpa ökar pixelkontrasten runt kanterna på föremål. Bilden blir därmed mer definierad eller skarp.
Du kan ange hur mycket skärpa som Dreamweaver ska lägga till i bilden genom att dra i skjutreglaget. Du kan också ange ett värde mellan 0 och 10 i textrutan. Bilden förhandsvisas medan du ändrar dess skärpa i dialogrutan Skärpa.
Spara ändringarna genom att välja Arkiv > Spara eller återställ den ursprungliga bilden genom att välja Redigera > Ångra skärpa.
Du kan bara ångra effekten av kommandot Skärpa och återställa den ursprungliga bildfilen innan du sparar sidan där bilden finns. När du har sparat sidan har ändringarna i bilden blivit permanenta.
Alternativet Intensitet och kontrast ändrar bildpixlarnas kontrast eller intensitet. Det här alternativet påverkar bildens högdagrar, skuggor och mellantoner. Intensitet och kontrast används vanligtvis för att korrigera för mörka eller för ljusa bilder.
En överrullningsbild är en bild som ändras när pekaren befinner sig över den i en webbläsare. Du måste ha två bilder för att skapa överrullningen. En huvudbild, eller den bild som visas när sidan läses in, och en sekundär bild, eller den bild som visas när pekaren befinner sig över huvudbilden. Båda bilderna i en överrullning måste ha samma storlek. Om de inte är lika stora ändrar Dreamweaver storlek på den andra bilden så att den har samma egenskaper som den första.
Överrullningsbilder ställs in automatiskt så att de reagerar på händelsen onMouseOver. Du kan låta en bild reagera på en annan händelse, till exempel ett musklick, eller ändra en överrullningsbild.
Markera bilderna i dialogrutan Infoga överrullningsbild och ange egenskaper för överrullningen. Du kan ange följande egenskaper:
Bildnamn
Överrullningsbildens namn.
Ursprunglig bild
Bilden som du vill visa då sidan läses in. Ange sökvägen i textrutan eller klicka på Bläddra och välj bilden.
Överrullningsbild
Bilden som du vill visa när pekaren kommer in över ursprungsbilden. Ange sökvägen eller klicka på Bläddra och välj bilden.
Förhandshämta överrullningsbild
Bilderna förhandshämtas till webbläsarens cacheminne så att det inte blir någon fördröjning när pekaren hamnar över bilden.
Alternativ text
(Valfritt) En text som beskriver bilden för användare i webbläsare som inte visar bilder.
Vid klickning, gå till URL-adress
Filen som du vill öppna när användaren klickar på överrullningsbilden. Ange sökvägen eller klicka på Bläddra och välj filen.
Om du inte kopplar en länk till bilden infogar Dreamweaver en tom länk (#) i HTML-källkoden som överrullningsbeteendet är kopplat till. Om du tar bort den tomma länken fungerar inte överrullningsbilden.
Välj Arkiv > Förhandsvisning i realtid eller tryck på F12 om du vill förhandsvisa överrullningsbilden.
Det går inte att se effekten av en överrullningsbild i designvy.
I Dreamweaver kan du öppna en markerad bild i en extern bildredigerare. När du återgår till Dreamweaver efter att ha sparat den redigerade bildfilen är de ändringar som du har gjort i bilden synliga i dokumentfönstret.
Du kan ställa in en primär extern redigerare och även ange vilka filtyper en redigerare öppnar. Du kan välja flera bildredigerare. Du kan till exempel välja att starta Photoshop då du vill redigera en JPEG-fil och att starta en annan bildredigerare när du vill redigera en animerad GIF-fil.
Öppna en extern redigerare genom att göra något av följande:
Om bilden inte har uppdaterats efter att du har återgått till Dreamweaver ska du markera bilden och sedan klicka på knappen Uppdatera i egenskapskontrollen.
Du kan välja en bildredigerare som du vill öppna och redigera grafikfiler med. Gör följande om du vill välja en extern bildredigerare:
Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (macOS) och välj Filtyper/redigerare i listan Kategori till vänster.
Välj det filtillägg som du vill ange en extern redigerare för i listan Tillägg.
Bläddra dig fram till programmet som du vill ha som redigerare för den här filtypen i dialogrutan Välj extern redigerare.
Klicka på Gör primär i dialogrutan Inställningar om du vill att den här redigeraren ska vara den primära för filtypen.
Dreamweaver använder automatiskt den primära redigeraren när du redigerar den här bildtypen. Du kan välja de andra redigerarna i listan på bildens snabbmeny i dokumentfönstret.
Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (macOS) och välj Filtyper/redigerare i listan Kategori till vänster.
Klicka på Lägg till (+) ovanför listan Tillägg i dialogrutan Inställningar för Filtyper/redigerare.
En textruta dyker upp i listan Tillägg.
Välj tillägget för den filtyp som du vill ange en redigerare för.
Välj en extern redigerare för filtypen genom att klicka på knappen Lägg till (+) ovanför listan Redigerare.
Välj det program som du vill redigera bildtypen med i dialogrutan som visas.
Klicka på Gör primär om du vill att redigeraren ska vara den primära redigeraren för bildtypen.
Välj Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (macOS) och välj Filtyper/redigerare i listan Kategori till vänster.
Välj den filtyp som du ändrar i listan Tillägg i dialogrutan Filtyper/redigerare. Då visas de befintliga redigerarna.
Välj den redigerare som du vill ändra inställningar för i listan Redigerare och gör sedan något av följande:
Du kan tillämpa vilket tillgängligt beteende som helst på en bild eller en aktiveringspunkt i en bild. När du tillämpar ett beteende på en aktiveringspunkt infogar Dreamweaver HTML-källkoden i area-taggen. Tre beteenden gäller särskilt bilder: Förhandsladda bilder, Växla bild och Växla bildåterställning.
Förhandsladda bilder
Gör att bilder som inte visas på sidan direkt hämtas, till exempel bilder som växlas in i webbläsarens cacheminne med hjälp av beteenden, AP-element eller JavaScript. Förhandsladdning av bilder gör att det inte tar någon tid att hämta bilderna när det är dags för dem att visas.
Växla bild
Byter ut en bild mot en annan genom att attributet src för img-taggen ändras. Använd den här åtgärden om du vill skapa överrullningseffekter för knappar eller andra bildeffekter (och även om du vill byta mer än en bild åt gången).
Växla bildåterställning
Återställer den senaste uppsättningen växlade bilder till deras ursprungliga källfiler. Den här åtgärden läggs till automatiskt om du kopplar åtgärden Växla bild till ett objekt som standard. I så fall behöver du inte markera alternativet Växla manuellt.
Du kan även skapa mer raffinerade navigeringssystem med hjälp av beteenden, till exempel hoppmenyer.
Logga in på ditt konto