Infoga och redigera bilder i Dreamweaver

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).

• Välj Infoga > Bild.

• 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.

• Dra en bild från skrivbordet till den önskade platsen i dokumentfönstret och gå sedan vidare till steg 3.

• Dra en bild från panelen Extract eller fliken Lager i Live-vyn. Släpp elementet högst upp, längst ned, till höger eller till vänster om ett element utifrån Live-stödlinjerna. Du kan även släppa elementet på en exakt plats i dokumentstrukturen genom att klicka på </> och använda Elementsnabbvy.

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.

Klicka på OK. 

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.

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.

Anger bildens källfil. Klicka på mappikonen och bläddra dig fram till källfilen eller skriv sökvägen.

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.

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.

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:

• _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.

Startar bildredigeraren som du har angett i inställningen Externa redigerare. Den markerade bilden öppnas.

Öppnar dialogrutan Bildoptimering så att du kan optimera bilden.

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 bildens storlek och tar bort områden som du inte vill ha kvar från den markerade bilden.

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.

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.  

• Redigera de aktuella bildattributen i kodvyn.

• Redigera bildattribut i Live-vyn med hjälp av snabbegenskapskontrollen.

• Ändra Alt-värdet i egenskapspanelen.

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.

• Dra i markeringshandtaget på den högra sidan om du vill ändra elementets bredd.

• Dra i det undre markeringshandtaget om du vill ändra elementets höjd.

• Dra i markeringshandtaget i hörnan om du vill anpassa elementets bredd och höjd samtidigt.

• 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.

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.

Ändra bildens storlek enligt beskrivningen i avsnittet Ändra storlek på en bild.

Klicka på Sampla om i bildens egenskapskontroll.

Välj Redigera > Bild. Du kan ange följande bildredigeringsfunktioner i Dreamweaver:

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.

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.

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.

Ä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.

Ä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.

Öppna sidan med bilden som du vill beskära, markera bilden och gör något av följande:

• Klicka på ikonen Beskär  i bildens egenskapskontroll.

• Välj Redigera > Bild > Beskär.

• Beskärningshandtag visas runt den valda bilden.

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.

Öppna sidan med bilden som du vill optimera. Markera bilden och gör något av följande:

• Klicka på knappen Redigera bildinställningar i egenskapskontrollen för bilden.

• Välj Redigera > Bild > Optimera.

Gör dina redigeringar i dialogrutan Bildoptimering och klicka på OK.

• Klicka på knappen Skärpa i egenskapskontrollen för bilden.

• Välj Redigera > Bild > Skärpa.

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.

• Klicka på knappen Intensitet och kontrast i bildens egenskapskontroll.

• Välj Redigera > Bild > Intensitet/Kontrast.

• På panelen Infoga väljer du HTML i listrutan. Välj Överrullningsbild i listan med alternativ.

• Välj Infoga > HTML > Överrullningsbild.

Markera bilderna i dialogrutan Infoga överrullningsbild och ange egenskaper för överrullningen. Du kan ange följande egenskaper:

Överrullningsbildens namn.

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.

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.

Bilderna förhandshämtas till webbläsarens cacheminne så att det inte blir någon fördröjning när pekaren hamnar över bilden.

(Valfritt) En text som beskriver bilden för användare i webbläsare som inte visar bilder.

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.

Välj Arkiv > Förhandsvisning i realtid eller tryck på F12 om du vill förhandsvisa överrullningsbilden.

Öppna en extern redigerare genom att göra något av följande:

• Dubbelklicka på bilden som du vill redigera.

• Högerklicka (Windows) eller Ctrl-klicka (Macintosh) på bilden som du vill redigera. Klicka sedan på Redigera med > Bläddra och välj en redigerare.

• Välj bilden som du vill redigera och klicka på Redigera i egenskapskontrollen.

• Dubbelklicka på bildfilen på panelen Filer. Då startas den primära bildredigeraren. Om du inte har valt en bildredigerare startar Dreamweaver filtypens standardredigerare.

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.

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:

• Klicka på knapparna Lägg till (+) eller Ta bort (-) ovanför listan Redigerare om du vill lägga till eller ta bort en redigerare.

• Klicka på Gör primär om du vill ändra standardredigerare.