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

Att lägga till en bild på din webbsida kan tyckas nästan magisk först eftersom processen är så enkel med Dreamweaver. Utmaningen med webbgrafik lägger inte till dem på dina sidor men skapar snygga bilder som snabbt laddas i din tittarens webbläsare.

Du behöver ett annat program, till exempel Photoshop, Photoshop Elements eller Fireworks, för att skapa, konvertera, redigera och optimera bilder. Optimera bilder gör filstorlekar mindre så dina bilder hämtas snabbare. Dreamweaver ger några grundläggande verktyg för bildredigering, 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 ger flera sätt att göra det:

• Klicka på ikonen Bilder i panelen Vanlig inlägg och välj sedan en bild med dialogrutan Infoga bild.

• I fönstret Filer klickar du på och drar ett bildnamn på den sida där du vill att bilden ska visas.

• Använd menyn Infoga.

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

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

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

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

   Du kan infoga bilder längst upp till vänster om en ny blank 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.

3. Välj Infoga → Bild → Bild.

   Dialogrutan Välj bildkälla visas.

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

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

   • På en dator med Windows XP, välj miniatyrer i listrutan Visa-menyn till höger om fönstret Look In för att visa miniatyrversioner av alla bilder i en öppen mapp. Du kan också visa en enda förhandsgranskning av vald bild längst till höger i dialogrutan.

   • På en dator med Windows Vista eller Windows 7 , välj ett ikonalternativ (Små ikoner, Mellansymboler, Större ikoner eller Extra stora ikoner) på rullgardinsmenyn Visa meny till höger om Look In fält för att visa miniatyrversioner av alla bilder i en öppen mapp. Du kan också visa en enda förhandsgranskning av vald bild längst till höger i dialogrutan.

   • På en Mac, välj alternativet Visa som kolumner längst upp till vänster i dialogrutan. Du kan visa en enda förhandsgranskning av vald bild längst till höger i dialogrutan.

     

     Kredit: Bilder från Casey Stoll

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

   Om du lägger in en bild i en sida och bilden inte sparas i din lokala sappsmapp, frågar Dreamweaver dig med en varningsdialogruta och erbjuder att kopiera bilden till din lokala webbplatsmapp. Många designers skapar en undermapp som heter bilder inuti den lokala webbplatsmappen där de lagrar alla bilder på deras webbplats, men du kan organisera bilder i flera undermappar om du föredrar det.

6. Välj bild 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 lägger in en bildfil på en sida lägger du inte till en kopia av bilden till sidan. du skapar en hänvisning 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 innehåller namnet på filen och sökvägen från sidan till den filen. I huvudsak skapar du en instruktion för en webbläsare för 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 refererar till dessa filer inte befinner sig i samma relativa plats på hårddisken som de är på din webbserver, bryter du upp referensen till dina bilder och en grym Broken Image-ikon visas på din sida.

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