Om bilder

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.

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

  1. Placera insättningspunkten där du vill att bilden ska visas i dokumentfönstret och gör något av följande:

    • Klicka på ikonen Bilder  i kategorin Allmänt på panelen Infoga.
    • 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).
    • 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.
  2. Gör något av följande i dialogrutan som visas:
    • Välj Filsystem om du vill välja en bildfil.
    • Välj Datakälla om du vill välja en dynamisk bildkälla.
    • Klicka på knappen Platser och servrar om du vill välja en bildfil i en fjärrmapp på någon av Dreamweaver-platserna.
  3. 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 ä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.

  4. Klicka på OK. Dialogrutan Hjälpattribut för bildtagg visas om du har aktiverat den i inställningarna (Redigera > Inställningar).

  5. Ange värden i textrutorna Alternativ text och Lång beskrivning och klicka på OK.
    • 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.

  6. Ange bildegenskaperna i egenskapspanelen (Fönster > Egenskaper):

Ange bildegenskaper

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.

Bildegenskaper i egenskapspanelen.
  1. Välj Fönster > Egenskaper så att egenskapspanelen för den valda bilden visas.

  2. Skriv ett namn i textrutan nedanför miniatyrbilden så att du kan referera till bilden i Dreamweaver-beteenden (till exempel Växla bild) eller om du använder skriptspråk som JavaScript eller VBScript.
  3. 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 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.

    Kartnamn och Aktiv-verktyg

    Gör att du kan etikettera och skapa en 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.

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

    Redigera bildinställningar

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

    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.

Redigera bilders tillgänglighetsattribut i koden

Om du infogar tillgänglighetsattribut för en bild går de att redigera i HTML-koden.

  1. Markera bilden i dokumentfönstret.
  2. Gör något av följande:
    • Redigera de aktuella bildattributen i koden.
    • Högerklicka (Windows) eller kontroll-klicka (Macintosh) och välj sedan Ändra tagg.
    • Ändra Alt-värdet i egenskapspanelen.

Ändra storlek på en bild visuellt

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.

Ändra storlek på ett element visuellt

  1. 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 storlekshandtagen inte dyker upp kan du klicka någon annanstans än på elementet som du vill ändra storlek på. Markera sedan elementet igen eller klicka på motsvarande tagg i taggväljaren.

  2. Ä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) kan du ange ett numeriskt värde i egenskapspanelen. Elementen går att förminska till åtta gånger åtta pixlars storlek visuellt.
  3. Om du vill återställa ett ändrat element till ursprungsstorleken ska du ta bort värdena i rutorna B och H i egenskapspanelen eller klicka på knappen Återställ storlek i bildens egenskapspanel.

Återställa en bild till den ursprungliga storleken

  1. Klicka på Återställ storlek  i bildens egenskapskontroll.

Sampla om en bild med ändrad storlek

  1. Ändra storleken på bilden enligt beskrivningen här ovan.
  2. Klicka på Sampla om  i bildens egenskapskontroll.

    Obs!

    Det går inte att sampla om bildplatshållare eller andra element än bitmappbilder.

Infoga en bildplatshållare

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.

  1. Placera insättningspunkten där du vill infoga bildplatshållaren i dokumentfönstret.
  2. Välj Infoga > Bildobjekt > Bildplatshållare.

  3. Ange den text som du vill använda som etikett för bildplatshållaren i Namn (Valfritt). Lämna textrutan tom om du inte vill att en etikett ska visas. Namnet måste börja med en bokstav och får bara innehålla bokstäver och siffror. Mellanslag och ASCII-tecken med höga nummer är inte tillåtna.
  4. Ange bildstorleken i pixlar i Bredd och Höjd (Obligatoriskt).
  5. Välj en färg i Färg (Valfritt) på något av följande sätt:
    • Välj en färg i färgväljaren.
    • Ange färgens hexadecimala värde (till exempel #FF0000).
    • Välj en webbsäker färgs namn (till exempel ”red”).
  6. Skriv en text som beskriver bilden för användare med webbläsare som inte visar bilder i Alternativ text (Valfritt).

    Obs!

    En bildtagg infogas automatiskt i HTML-koden som innhåller ett tomt src-attribut.

  7. Klicka på OK.

    Platshållarens färg, storlek och etikett visas som följer:

    Bildplatshållare med attribut.

    I webbläsaren visas varken etiketten eller storlekstexten.

Ersätta en bildplatshållare

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.

  1. Gör något av följande i dokumentfönstret:
    • Dubbelklicka på bildplatshållaren.
    • Markera bildplatshållaren genom att klicka på den och klicka sedan på mappikonen bredvid textrutan Källa i egenskapspanelen (Fönster > Egenskaper).
  2. Gå till bilden som du vill ersätta bildplatshållaren med i dialogrutan Bildkälla och klicka på OK.

Ange bildplatshållarens egenskaper

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.

Bildplatshållarens egenskapskontroll.

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.

  1. Ange något av följande alternativ:

    B och H

    Anger bildplatshållarens bredd och höjd i pixlar.

    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.

    Färg

    Anger en färg för bildplatshållaren.

Redigera bilder i Dreamweaver

Du kan sampla om, beskära, optimera och skärpa bilder i Dreamweaver. Du kan också justera ljusstyrka och kontrast.

Bildredigeringsfunktioner

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.

  1. Välj Ändra > Bild. Använd någon av dessa bildredigeringsfunktioner 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.

Beskära en bild

Du kan beskära bitmappbilder i Dreamweaver.

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.

  1. Öppna sidan med bilden som du vill beskära, markera bilden och gör något av följande:
    • Klicka på ikonen Beskär
    • Välj Ändra > Bild > Beskär.
    • Beskärningshandtag visas runt den valda bilden.
  2. Dra i beskärningshandtagen tills rutan omger den del av bilden som du vill behålla.
  3. Dubbelklicka inuti beskärningsrutan eller tryck på Enter. Då beskärs bilden.
  4. 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.
  5. 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.

Optimera en bild

Du kan optimera bilder på webbsidor inifrån Dreamweaver.

  1. Ö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 egenskapspanelen för bilden.
    • Välj Ändra > Bild > Optimera.
  2. 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.

  1. Ö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 egenskapspanelen för bilden.
    • Välj Ändra > Bild > Skärpa.
  2. Du kan ange hur mycket skärpa som Dreamweaver lägger till i bilden genom att dra i skjutreglaget eller genom att ange ett värde mellan 0 och 10 i textrutan. Bilden förhandsvisas medan du ändrar dess skärpa i dialogrutan.
  3. Klicka på OK när du är nöjd med bilden.
  4. 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.

Ändra en bilds intensitet och kontrast

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.

  1. Öppna sidan med bilden som du vill anpassa, markera bilden och gör något av följande:
    • Klicka på Intensitet/Kontrast  i bildens egenskapskontroll.
    • Välj Ändra > Bild > Intensitet/Kontrast.
  2. Ändra inställningarna genom att dra i skjutreglagen. Värdena varierar mellan -100 och 100.
  3. Klicka på OK.

Skapa en överrullningsbild

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.

  1. Placera insättningspunkten där du vill infoga överrullningen i dokumentfönstret.
  2. Infoga överrullningen på ett av följande sätt:
    • Gå till kategorin Allmänt på panelen Infoga, klicka på knappen Bilder och välj ikonen Överrullningsbild. När ikonen Överrullningsbild visas på panelen Infoga kan du dra den till dokumentfönstret.
    • Välj Infoga > Bildobjekt > Överrullningsbild.
  3. Ställ in alternativen och klicka på OK.

    Bildnamn

    Överdragningsbildens 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.

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

  4. Välj Arkiv > Förhandsvisning i webbläsaren eller tryck på F12.

  5. Flytta pekaren till ursprungsbilden i webbläsaren. Då visas överrullningsbilden.

    Obs!

    Det går inte att se effekten av en överrrullningsbild i designläge.

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

Starta den externa bildredigeraren

  1. Gör något av följande:
    • Dubbelklicka på bilden som du vill redigera.
    • Högerklicka (Windows) eller kontrollklicka (Macintosh) på bilden som du vill redigera, välj sedan Redigera > Bläddra och välj en redigerare.
    • Välj bilden som du vill redigera och klicka på Redigera i egenskapspanelen.
    • 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.

    Om bilden inte har uppdaterats efter att du har återgått till Dreamweaver ska du markera bilden och sedan klicka på Uppdatera i egenskapspanelen.

Välja en extern bildredigerare för en befintlig filtyp

Du kan välja en bildredigerare som du vill öppna och redigera grafikfiler med.

  1. Öppna dialogrutan Inställningar för Filtyper/redigerare på något av följande sätt:
    • Välj Redigera > Inställningar (Windows) eller > Dreamweaver > Inställningar (Macintosh) och välj Filtyper/redigerare i listan Kategori till vänster.
    • Välj Redigera > Redigera i extern redigerare och välj Filtyper/redigerare.
  2. Välj det filtillägg som du vill ange en extern redigerare för i listan Tillägg.
  3. Klicka på Lägg till (+) ovanför listan Redigerare.
  4. Bläddra dig fram till programmet som du vill ha som redigerare för den här filtypen i dialogrutan Välj extern redigerare.

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

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

  1. Öppna dialogrutan Inställningar för Filtyper/redigerare på något av följande sätt:

    • Välj Redigera > Inställningar (Windows) eller > Dreamweaver > Inställningar (Macintosh) och välj Filtyper/redigerare i listan Kategori till vänster.
    • Välj Redigera > Redigera i extern redigerare och välj Filtyper/redigerare.
  2. 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.

  3. Skriv filtillägget för filtypen som du vill starta en redigerare för.
  4. Välj en extern redigerare för filtypen genom att klicka på Lägg till (+) ovanför listan Redigerare.
  5. Välj det program som du vill redigera bildtypen med i dialogrutan som visas.
  6. 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

  1. Öppna dialogrutan Inställningar för Filtyper/redigerare på något av följande sätt:

    • Välj Redigera > Inställningar (Windows) eller > Dreamweaver > Inställningar (Macintosh) och välj Filtyper/redigerare i listan Kategori till vänster.
    • Välj Redigera > Redigera i extern redigerare och välj Filtyper/redigerare.
  2. Välj den filtyp som du ändrar i listan Tillägg i dialogrutan Filtyper/redigerare. Då visas de befintliga redigerarna.

  3. 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å Lägg till (+) eller Ta bort (-) ovanför listan Redigerare om du vill lägga till eller ta bort en redigerare.
    • Ange vilken redigerare som är standardredigerare genom att klicka på knappen Gör primär.

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

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy