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 inte är 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 med hjälp av 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 titta i de grundläggande självstudiekurserna för HTML och CSS och lära dig hur du arbetar med bilder med hjälp av kod. Du kan också ta hjälp av självstudiekursen för att arbeta med bilder i Dreamweaver.
Om du vill veta hur du infogar och använder bilder med hjälp av Dreamweaver-programmet kan du läsa mer i följande avsnitt.
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:
- På panelen Infoga väljer du HTML i listrutan. Klicka på Bild. Dubbelklicka på ikonen eller dra den till dokumentfönstret (eller till kodvyfönstret om du arbetar med kod).
- Dra en bild från panelen Resurser (Fönster > Resurser) till den önskade platsen i dokumentfönstret och gå sedan vidare till steg 3.
- Dra en bild från panelen Filer 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 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.
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.
-
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.
Obs!
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 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 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.
- _new 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 standardmålet. Du behöver inte ange det här värdet.
- _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 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.
Obs!
Du kan också redigera bildattribut i Live-vyn med hjälp av snabbegenskapskontrollen.
-
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.
- Redigera bildattribut i Live-vyn med hjälp av snabbegenskapskontrollen.
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 bilden 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.
-
-
- Vill du bevara elementets proportioner (dess höjdbreddförhållande) när du ändrar dess storlek ska du hålla ned skifttangenten medan du drar i markeringshandtaget i hörnet.
- Vill du ändra ett elements bredd och storlek till ett särskilt värde (till exempel en gånger en pixel) använder du egenskapskontrollen. Ange ett numeriskt värde i fälten B och H. Du kan förminska element till åtta gånger åtta pixlars storlek visuellt.
Anpassa ett elements bredd och höjd med hjälp av egenskapskontrollen
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.
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.
Obs!
Du behöver inte ha Photoshop eller något bildredigeringsprogram installerat på datorn för att kunna använda bildredigeringsfunktionerna 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.
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. Vi rekommenderar att du behåller en kopia av bildfilen ifall du behöver återställa den ursprungliga bilden.
-
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.
Obs!
Du kan ångra beskärningen och återställa den ursprungliga bildfilen ända tills du stänger Dreamweaver eller redigerar filen i ett externt bildredigeringsprogram.
i bildens egenskapskontroll.
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 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.
-
I dialogrutan Infoga överrullningsbild markerar du bilderna och anger egenskaper för överrullningen. Du kan ange följande egenskaper:
Ange egenskaper för 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 kopplat till. Om du tar bort den tomma länken fungerar inte överrullningsbilden.
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.
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:
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 med hjälp av beteenden, AP-element eller JavaScript, till webbläsarens cacheminne. 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.
Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.