Placera insättningspunkten där du vill att bilden ska visas i dokumentfönstret och gör något av följande:
- Användarhandbok för Dreamweaver
- Introduktion
- Dreamweaver och Creative Cloud
- Arbetsytor och vyer i Dreamweaver
- Skapa webbplatser
- Om Dreamweaver-platser
- Skapa en lokal version av din webbplats
- Ansluta till en publiceringsserver
- Ställa i ordning en testserver
- Importera och exportera inställningarna för en Dreamweaver-plats
- För över befintliga webbplatser från en fjärrserver till din lokala platsrot
- Tillgänglighetsfunktioner i Dreamweaver
- Avancerade inställningar
- Ange platsinställningar för överföring av filer
- Ange proxyserverinställningar i Dreamweaver
- Synka inställningarna för Dreamweaver med Creative Cloud
- Använda Git i Dreamweaver
- Hantera filer
- Layout och design
- CSS
- Förstå Cascading Style Sheets (CSS)
- Utforma sidor med hjälp av CSS Designer
- Använda CSS-förbehandlare i Dreamweaver
- Ange CSS-formatinställningar i Dreamweaver
- Flytta CSS-regler i Dreamweaver
- Konvertera infogad CSS till en CSS-regel i Dreamweaver
- Arbeta med div-taggar
- Använda övertoningar på bakgrunden
- Skapa och redigera CSS3-övergångseffekter i Dreamweaver
- Formatera kod
- Sidinnehåll och resurser
- Ange sidegenskaper
- Ange CSS-rubrikegenskaper och CSS-länkegenskaper
- Arbeta med text
- Sök och ersätt text, taggar och attribut
- DOM-panel
- Redigera i live-vyn
- Koda dokument i Dreamweaver
- Markera och visa element i dokumentfönstret
- Ange textegenskaper i egenskapskontrollen
- Stavningskontrollera en webbsida
- Använda vågräta linjer i Dreamweaver
- Lägga till och ändra teckensnittskombinationer i Dreamweaver
- Arbeta med resurser
- Infoga och uppdatera datum i Dreamweaver
- Skapa och hantera favoritresurser i Dreamweaver
- Infoga och redigera bilder i Dreamweaver
- Lägga till medieobjekt
- Lägga till videor i Dreamweaver
- Infoga HTML5-video
- Infoga SWF-filer
- Lägga till ljudeffekter
- Infoga HTML5-ljud i Dreamweaver
- Arbeta med biblioteksobjekt
- Använda arabisk och hebreisk text i Dreamweaver
- Länkar och navigering
- jQuery-widgetar och effekter
- Koda webbplatser
- Om kodning i Dreamweaver
- Kodningsmiljön i Dreamweaver
- Ange kodningspreferenser
- Anpassa kodfärger
- Skriva och redigera kod
- Kodtips och kodkomplettering
- Komprimera och utöka kod
- Återanvända kod med fragment
- Granska kod
- Optimera kod
- Redigera kod i designvyn
- Arbeta med head-innehåll för sidor
- Infoga SSI i Dreamweaver
- Använda taggbibliotek i Dreamweaver
- Importera egna taggar i Dreamweaver
- Använda JavaScript-beteenden (allmänna instruktioner)
- Använda inbyggda JavaScript-beteenden
- Om XML och XSLT
- Utföra XSL-omvandlingar på servern i Dreamweaver
- Utföra XSL-omvandlingar på klienten i Dreamweaver
- Lägga till teckenentiteter för XSLT i Dreamweaver
- Formatera kod
- Arbetsflöden mellan produkter
- Installera och använda tillägg i Dreamweaver
- Uppdateringar i appen i Dreamweaver
- Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
- Använda Fireworks och Dreamweaver
- Redigera innehåll på Dreamweaver-webbplatser med Contribute
- Integrering mellan Dreamweaver och Business Catalyst
- Skapa anpassade e-postkampanjer
- Mallar
- Om Dreamweaver-mallar
- Känna igen mallar och mallbaserade dokument
- Skapa en Dreamweaver-mall
- Skapa ändringsbara regioner i mallar
- Skapa upprepande regioner och tabeller i Dreamweaver
- Använd valfria regioner i mallar
- Definiera redigerbara taggattribut i Dreamweaver
- Skapa kapslade mallar i Dreamweaver
- Redigera, uppdatera och ta bort mallar
- Exportera och importera XML-innehåll i Dreamweaver
- Lägga till eller ta bort en mall från ett befintligt dokument
- Redigera innehåll i Dreamweaver-mallar
- Syntaxregler för malltaggar i Dreamweaver
- Ange markeringsinställningar för mallområden
- Fördelar med att använda mallar i Dreamweaver
- Mobiler och flera skärmar
- Dynamiska webbplatser, sidor och webbformulär
- Förstå webbprogram
- Konfigurera datorn för programutveckling
- Felsöka databasanslutningar
- Ta bort anslutningsskript i Dreamweaver
- Utforma dynamiska sidor
- Översikt över källor med dynamiskt innehåll
- Definiera källor med dynamiskt innehåll
- Lägga till dynamiskt innehåll på sidor
- Ändra dynamiskt innehåll i Dreamweaver
- Visa databasposter
- Ange och felsöka livedata i Dreamweaver
- Lägga till anpassade serverbeteenden i Dreamweaver
- Bygga formulär med Dreamweaver
- Använda formulär för att samla in information från användarna
- Skapa och aktivera ColdFusion-formulär i Dreamweaver
- Skapa webbformulär
- Förbättrat HTML5-stöd för formulärelement
- Använda Dreamweaver för att utveckla ett formulär
- Bygga program visuellt
- Bygga huvud- och detaljsidor i Dreamweaver
- Bygga sök- och resultatsidor
- Bygga en postinmatningssida
- Bygga en postuppdateringssida i Dreamweaver
- Bygga postborttagningssidor i Dreamweaver
- Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
- Bygga en registreringssida
- Bygga en inloggningssida
- Bygga en sida som bara behöriga användare har åtkomst till
- Skydda mappar i ColdFusion med Dreamweaver
- Använda ColdFusion-komponenter i Dreamweaver
- Testa, förhandsgranska och publicera webbplatser
- Felsökning
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.
Infoga en bild
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.
-
- 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.
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.
-
Klicka på OK.
Ange bildegenskaper
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.
-
Ange de bildalternativ du vill använda.
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 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:
- _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.
Redigera bildinställningar
Öppnar dialogrutan Bildoptimering så att du kan optimera bilden.
Obs!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.
Obs!Du kan också redigera bildattribut i Live-vyn med hjälp av snabbegenskapskontrollen.
Redigera bilders tillgänglighetsattribut i koden
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.
- Redigera de aktuella bildattributen i kodvyn.
- Redigera bildattribut i Live-vyn med hjälp av snabbegenskapskontrollen.
- Ändra Alt-värdet i egenskapspanelen.
Ändra storlek på en bild
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.
Ändra storlek på ett element visuellt
-
Markera elementet (till exempel en bild eller SWF-fil) i dokumentfönstret.
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.
-
Ändra storlek på elementet genom att göra något av följande:
- 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.
Återställa en bild till den ursprungliga storleken
Klicka på knappen Återställ storlek i bildens egenskapskontroll.
Sampla om en bild med ändrad storlek
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.
Obs!Det går inte att sampla om bildplatshållare eller andra element än bitmappbilder.
Redigera bilder i Dreamweaver
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.
Obs!Dreamweavers bildredigeringsfunktioner kan bara tillämpas på bildfilsformaten JPEG, GIF och PNG. Andra bitmappformat går inte att redigera med dessa bildredigeringsfunktioner.
Beskära en bild
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:
- Klicka på ikonen Beskär i bildens egenskapskontroll.
- Välj Redigera > Bild > Beskär.
- Beskärningshandtag visas runt den valda bilden.
-
Dra i beskärningshandtagen tills rutan omger den del av bilden som du vill behålla.
-
Dubbelklicka inuti beskärningsrutan eller tryck på Retur. Då beskärs 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.
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.
Optimera en bild
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:
- 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.
Öka bildskärpan
Skärpa ökar pixelkontrasten runt kanterna på föremål. Bilden blir därmed mer definierad eller skarp.
-
Öppna sidan med bilden som du vill ge mer skärpa, markera bilden och gör något av följande:
- 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.
-
Klicka på OK när du är nöjd med bilden.
-
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.
Ändra en bilds intensitet och kontrast
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.
-
Öppna sidan med bilden som du vill anpassa, markera bilden och gör något av följande:
- Klicka på knappen Intensitet och kontrast i bildens egenskapskontroll.
- Välj Redigera > Bild > Intensitet/Kontrast.
-
Ändra inställningarna genom att dra i skjutreglagen. Värdena varierar mellan -100 och 100.
-
Klicka på OK.
Skapa en överrullningsbild
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.
-
Placera insättningspunkten där du vill infoga överrullningen i dokumentfönstret.
-
Infoga överrullningen på ett av följande sätt:
- 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:
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.
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.
-
Välj Arkiv > Förhandsvisning i realtid eller tryck på F12 om du vill förhandsvisa överrullningsbilden.
-
Flytta pekaren till ursprungsbilden i webbläsaren. Då visas överrullningsbilden.Obs!
Det går inte att se effekten av en överrullningsbild i designvy.
Använda en extern bildredigerare
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.
Starta den externa bildredigeraren
-
Ö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älja en extern bildredigerare för en befintlig filtyp
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.
-
Klicka på Lägg till (+) ovanför listan Redigerare.
-
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.
-
Om du vill ange ytterligare en redigerare för den här filtypen upprepar du steg 3 och 4.
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.
Lägga till en ny filtyp i listan Tillägg
-
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.
Ändra inställningar för en befintlig redigerare
-
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.
Tillämpa beteenden på bilder
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.