Hur man lägger till bilder på din webbplats i Dreamweaver

Att lägga till en bild på din webbsida kan verka nästan magiskt till en början eftersom processen är så enkel med Dreamweaver. Utmaningen med webbgrafik är inte att lägga till dem på dina sidor utan att skapa snygga bilder som laddas snabbt i din tittares webbläsare.

Du behöver ett annat program, som Photoshop, Photoshop Elements eller Fireworks, för att skapa, konvertera, redigera och optimera bilder. Genom att optimera bilder blir filstorlekarna mindre så att dina bilder laddas ner snabbare. Dreamweaver tillhandahåller några grundläggande bildredigeringsverktyg, men oftast använder du Dreamweaver för att infoga och placera bilder på din sida.

Dreamweaver gör det enkelt att placera bilder på dina webbsidor och erbjuder flera sätt att göra det:

• Klicka på ikonen Bilder i panelen Common Insert och välj sedan en bild med hjälp av dialogrutan Infoga bild.

• I filpanelen klickar du och drar ett bildnamn till sidan där du vill att bilden ska visas.

• Använd menyn Infoga.

Om du inte har en webboptimerad JPEG-, GIF- eller PNG-bild till hands kan du ladda ner gratis bilder som redan är optimerade.

För att placera en bild på en webbsida med hjälp av Infoga-menyn, följ dessa instruktioner:

Öppna en befintlig sida eller skapa och spara en ny sida.

Placera markören där du vill infoga bilden på sidan.

Du kan infoga bilder längst upp till vänster i en ny tom fil, och du kan infoga bilder i

taggar och element på en webbsida, men du kan inte bara placera en bild mitt på en sida utan att använda ytterligare HTML-taggar eller CSS-formatering för att placera den.

Välj Infoga → Bild → Bild.

Dialogrutan Välj bildkälla visas.

Bläddra för att hitta bilden du vill infoga.

Beroende på ditt datorsystem kan du förhandsgranska bilder när du infogar dem på olika sätt. Här är tre vanliga alternativ:

• På en dator med Windows XP väljer du Miniatyrer från rullgardinsmenyn Visa till höger om fältet Sök i för att visa miniatyrbildsversioner av alla bilder i en öppen mapp. Du kan också se en enda förhandsvisning av valfri vald bild längst till höger i dialogrutan.

• På en dator med Windows Vista eller Windows 7 väljer du ett ikonalternativ (små ikoner, medelstora ikoner, stora ikoner eller extra stora ikoner) från rullgardinsmenyn Visa till höger om fältet Sök i för att visa miniatyrversioner av alla bilder i en öppen mapp. Du kan också se en enda förhandsvisning av valfri vald bild längst till höger i dialogrutan.

• På en Mac väljer du alternativet Visa som kolumner längst upp till vänster i dialogrutan. Du kan se en enda förhandsvisning av valfri vald bild längst till höger i dialogrutan.

  

  Kredit: Foton av Casey Stoll

För att infoga bilden, dubbelklicka på bildnamnet eller klicka en gång och klicka sedan på OK.

Om du infogar en bild på en sida och bilden inte sparas i din lokala webbplatsmapp, uppmanar Dreamweaver dig med en varningsdialogruta och erbjuder dig att kopiera bilden till din lokala webbplatsmapp. Många designers skapar en undermapp som kallas bilder i den lokala webbplatsmappen där de lagrar alla bilder på sin webbplats, men du kan organisera bilder i flera undermappar om du föredrar det.

Välj bilden på din webbsida för att visa och redigera bildegenskaper.

Bildalternativ visas automatiskt i egenskapsinspektören längst ner på sidan när en bild väljs.

Kredit: Foto av Casey Stoll

När du infogar en bildfil på en sida lägger du faktiskt inte till en kopia av bilden på sidan; du skapar en referens till bilden. Den underliggande koden ser ungefär ut som koden för en länk från en sida till en annan.

Både bildreferenser och länkar inkluderar namnet på filen och sökvägen från sidan till den filen. I huvudsak skapar du en instruktion för en webbläsare att hitta bilden när den visar sidan.

För att visa en bild på din webbsida måste du ladda upp både sidan och bilden när du publicerar din webbplats. Om dina bildfiler och sidorna som hänvisar till dessa filer inte är på samma relativa plats på din hårddisk som de är på din webbserver, bryter du referensen till dina bilder och en ful Broken Image-ikon visas på din sida .

Det bästa sättet att se till att dina bilder och filer stannar där de ska i förhållande till varandra är att låta Dreamweaver hålla reda på dem åt dig. Det är därför det är så viktigt att slutföra installationsprocessen för webbplatsen och att se till att du aldrig flyttar eller byter namn på en bild, förutom i filpanelen.