Det finns många olika filformat för grafik, men tre används särskilt ofta på webbsidor: GIF, JPEG och PNG. GIF- och JPEG-filformaten har det mest utbredda stödet och går att se i de flesta webbläsare.
GIF-filer (Graphic Interchange Format)
kan maximalt innehålla 256 färger och lämpar sig bäst för bilder utan halvtoner och 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-filformatet (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-filformatet (Portable Network Group)
Filformatet PNG är ett patentfritt alternativ till GIF-filer. Formatet har stöd för indexerade färger, gråskalor och miljontals färger samt stöd för alfakanaler, vilket gör att delar kan vara genomskinliga. PNG är standardfilformatet i Adobe® Fireworks®. PNG-filer bibehåller information om lager, vektorer, färg och effekter (till exempel skuggor) och alla element går alltid att redigera. Filerna måste ha ändelsen .png om Dreamweaver ska förstå att de är PNG-filer.
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 den inte finns på den aktuella webbplatsen frågar Dreamweaver om du vill kopiera filen dit.
Du kan även infoga bilder dynamiskt. Dynamiska bilder är sådana som ändras ofta. Annonsrotationssystem, till exempel, behöver kunna välja en av flera möjliga annonser slumpmässigt och sedan visa motsvarande bild när en sida hämtas.
Efter att ha infogat en bild kan du ange bildtaggens tillgänglighetsattribut. De kan läsas upp av skärmläsare för användare med nedsatt syn. Attributen går att redigera i HTML-koden.
En självstudiekurs om att infoga bilder finns i Lägga till bilder.
-
Placera insättningspunkten där du vill att bilden ska visas i dokumentfönstret och gör något av följande:
- Gå till kategorin Allmänt på panelen Infoga, klicka på knappen Bilder och välj ikonen Bild. När ikonen Bild visas på panelen Infoga kan du dra ikonen till dokumentfönstret (eller till kodvyn om du arbetar i koden).
- Dra en bild från panelen Resurser (Fönster > Resurser) till den önskade platsen i dokumentfönstret och gå sedan vidare till steg 3.
-
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.
Obs!
När du infogar bilder är det även möjligt att använda en absolut sökväg till en bild 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 designvyn genom att avmarkera Kommandon > Visa externa filer.
-
- Ange ett namn eller en kort beskrivning av bilden i textrutan Alt. Skärmläsaren läser upp informationen som du skriver här. Du bör inte skriva mer än omkring 50 tecken. Vill du ha en längre beskrivning kan du infoga en länk till en fil med mer information om bilden i textrutan Lång beskrivning.
- Ange adressen till en fil som visas då användaren klickar på bilden eller på mappikonen för att bläddra sig fram till filen i rutan Lång beskrivning. Den här textrutan innehåller en länk till en fil som förknippas med eller ger mer information om bilden.
Obs!
Du kan välja att ange information i den ena rutan eller bägge rutorna. Skärmläsaren läser upp bildens Alt-attribut.
Obs!
Om du trycker på Avbryt visas bilden i dokumentet men Dreamweaver kopplar inga tillgänglighetstaggar eller -attribut till den.
i kategorin Allmänt på panelen Infoga.I egenskapspanelen 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.
-
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 kanske den inte visas som den ska i webbläsaren. (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.)
Obs!
Du kan ändra dessa värden om du vill välja hur stor den här bildinstansen ska vara när den visas, men det tar inte kortare tid att hämta filen, 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 bilden 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 dig fram 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.
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:
_blank läser in den länkade filen i ett nytt, namnlöst webbläsarfönster.
_parent läser in den länkade filen i den överordnade ramuppsättningen eller det överordnade fönstret för den ram som innehåller länken. Om ramen med länken inte är kapslad, läses den länkade filen in i hela webbläsarfönstret.
_self läser in den länkade filen i samma ram eller fönster som länken. Det här målet är standardinställningen, så normalt behöver du inte ange det.
_top läser in den länkade filen i hela webbläsarfönstret och tar därigenom bort alla ramar.
Redigera
Startar bildredigeraren som du har angett i inställningen Externa redigerare. Den markerade bilden öppnas.
Uppdatera från original
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 egenskapskontrollen uppdateras bilden automatiskt och återger alla ändringar som du har 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.
Öppnar dialogrutan 
Samplar om en bild som du har ändrat storlek på. Det förbättrar bildkvaliteten i den nya storleken och formatet. 
Ändrar en bilds inställningar av intensitet och kontrast. 
Justerar en bilds skärpa. 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 (till exempel Adobe Fireworks) för att skala bilden till den önskade storleken, ä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 bilden alltid visas i samma storlek ska du ändra storlek på den i ett bildredigeringsprogram.
När du ändrar storlek på en bild i Dreamweaver kan du sampla om den 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.
En bildplatshållare är en bild som används tills den färdiga bilden är klar att läggas till på webbsidan. Du kan ange platshållarens storlek och färg och även ge den en etikett.
En bildplatshållare visar inte en bild i en webbläsare. Innan du publicerar webbplatsen bör du ersätta de bildplatshållare som du har lagt till med bildfiler i exempelvis GIF- eller JPEG-format.
Om du har Fireworks kan du skapa en ny bild från Dreamweaver-bildplatshållaren. Den nya bilden får samma storlek som platshållarbilden. Du kan redigera bilden och sedan ersätta den i Dreamweaver.
Ange bildplatshållarens egenskaper genom att markera platshållaren i dokumentfönstret och sedan visa egenskapspanelen genom att välja Fönster > Egenskaper. Klicka på pilen i det nedre högra hörnet om du vill se alla egenskaper.
Ange platshållarbildens namn, bredd, höjd, bildkälla, alternativtext, justering och färg i egenskapspanelen.
Den grå textrutan och textrutan Justera är inaktiverade i platshållarens egenskapskontroll. Du kan ange dessa egenskaper i bildens egenskapskontroll då du byter ut platshållaren mot en bild.
-
Källa
Anger bildens källfil. För platshållarbilder är den här textrutan tom. Välj en bild som du vill ersätta platshållarbilden med genom att klicka på Bläddra.
Länk
Anger en hyperlänk för bildplatshållaren. Dra ikonen Peka på fil till en fil på panelen Filer, klicka på mappikonen för att bläddra dig fram 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.
Skapa
Startar Fireworks för att skapa en ersättningsbild. Knappen Skapa är inaktiverad om inte Fireworks är installerat på datorn.
Uppdatera från original
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 egenskapskontrollen uppdateras bilden automatiskt och återger alla ändringar som du har gjort i den ursprungliga Photoshop-filen.
Du kan sampla om, beskära, optimera och skärpa bilder i Dreamweaver. Du kan också justera ljusstyrka och kontrast.
Dreamweaver innehåller enkla bildredigeringsfunktioner. Du kan ändra bilder utan att behöva använda ett externt bildredigeringsprogram som Fireworks eller 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.
Obs!
Du behöver inte ha Fireworks eller något bildredigeringsprogram installerat på datorn för att kunna använda bildredigeringsfunktionerna i Dreamweaver.
-
Ä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. Det normala användningsområdet för beskärning ä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. Det 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 föremålen på bilden. På så sätt försvinner inte fina detaljer i pixlarna som de digitala bilderna består av. Men vill du få fram detaljerna i digitala bilder behöver många gånger skärpan ökas. Det ökar kantkontrasten och får bilderna att se skarpare ut.
Obs!
Dreamweavers bildredigeringsfunktioner kan bara tillämpas på bildfilsformaten JPEG, GIF och PNG. Andra bitmappformat går inte att redigera med dessa bildredigeringsfunktioner.
Obs!
När du beskär en bild ändras källfilen på hårddisken. Därför kanske du vill behålla en kopia av bildfilen om du skulle vilja återställa den ursprungliga bilden.
-
Förhandsgranska 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.
Obs!
Du kan ångra beskärningen (och återställa den ursprungliga bildfilen) tills du avslutar Dreamweaver eller redigerar filen i ett externt bildredigeringsprogram.
Skärpa ökar pixelkontrasten runt kanterna på föremål. Bilden blir därmed mer definierad eller skarp.
-
Spara ändringarna genom att välja Arkiv > Spara eller återställ den ursprungliga bilden genom att välja Redigera > Ångra skärpa.
Obs!
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 permanentats.
Intensitet/kontrast ändrar bildpixlarnas kontrast eller intensitet. Det 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.
Du kan infoga överrullningsbilder på sidan. En överrullningsbild är en bild som ändras när pekaren befinner sig över den i en webbläsare.
Du måste ha två bilder om du vill skapa en överrullning: en huvudbild (som visas när sidan läses in) och en sekundär bild (den bild som visas när pekaren befinner sig över huvudbilden). Både bilderna i en överrullning bör vara lika stora. Om de inte är det, ändrar Dreamweaver storlek på den andra så att den har samma egenskaper som den första.
Överdragningsbilder 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.
-
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.
Överdragningsbild
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örhandsladda ö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 med 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.
Obs!
Om du inte kopplar en länk till bilden infogar Dreamweaver en tom länk (#) i HTML-källkoden som överrullningsbeteendet är kopplad till. Om du tar bort den tomma länken fungerar överrullningsbilden inte längre.
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 välja Fireworks som primär extern redigerare. Du kan även ange vilka filtyper en redigerare öppnar. Dessutom kan du välja flera bildredigerare. Du kan till exempel välja att starta Fireworks då du vill redigera en GIF-fil och att starta en annan bildredigerare när du vill redigera en JPG- eller JPEG-fil.
-
- Högerklicka (Windows) eller kontrollklicka (Macintosh) på bilden som du vill redigera, välj sedan Redigera > Bläddra och välj en redigerare.
- Dubbelklicka på bildfilen på filpanelen. Då startas den primära bildredigeraren. Om du inte har valt en bildredigerare startar Dreamweaver filtypens standardredigerare.
Obs!
När du öppnar en bild från filpanelen gäller inte Fireworks-funktionen. Fireworks öppnar inte den ursprungliga PNG-filen. Vill du använda Fireworks ska du öppna bilder i dokumentfönstret.
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 sådana som växlas in med hjälp av beteenden, AP-element eller JavaScript) till webbläsarens cacheminne. Då tar det ingen 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, om du inte anger något annat. Du bör aldrig behöva välja den själv.
Du kan även skapa mer raffinerade navigeringssystem med hjälp av beteenden, till exempel hoppmenyer.
Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.