Slik legger du til bilder på nettstedet ditt i Dreamweaver - dummies

Når du legger til et bilde på websiden din, kan det virke nesten magisk først fordi prosessen er så enkel med Dreamweaver. Utfordringen med webgrafik er ikke å legge dem til sidene dine, men å skape flotte bilder som lastes raskt inn i seerens nettleser.

Du trenger et annet program, for eksempel Photoshop, Photoshop Elements eller Fireworks, for å opprette, konvertere, redigere og optimalisere bilder. Optimalisering av bilder gjør filstørrelser mindre, slik bildene dine lastes ned raskere. Dreamweaver gir noen grunnleggende verktøy for bilderedigering, men for det meste bruker du Dreamweaver til å sette inn og plassere bilder på siden din.

Dreamweaver gjør det enkelt å plassere bilder på websidene dine, og gir flere måter å gjøre det på:

• Klikk på ikonet Bilder i fellesinnleggspanelet, og velg et bilde ved hjelp av dialogboksen Sett inn bilde.

• I Filer-panelet klikker du og drar et bildenavn på siden der du vil at bildet skal vises.

• Bruk Sett inn-menyen.

Hvis du ikke har et weboptimalisert JPEG, GIF eller PNG-bilde, kan du laste ned gratis bilder som allerede er optimalisert.

For å plassere et bilde på en nettside ved hjelp av Sett inn-menyen, følg disse instruksjonene:

1. Åpne en eksisterende side, eller opprett og lagre en ny side.

2. Plasser markøren der du vil sette inn bildet på siden.

   Du kan sette inn bilder øverst til venstre i en ny blank fil, og du kan sette inn bilder i merker og elementer på en nettside, men du kan ikke bare plassere et bilde midt på en side uten å bruke ekstra HTML koder eller CSS formatering for å plassere den.

3. Velg Sett inn → Bilde → Bilde.

   Dialogboksen Velg bildekilde vises.

4. Bla gjennom for å finne bildet du vil sette inn.

   Avhengig av datasystemet, kan du forhåndsvise bilder mens du setter dem inn på forskjellige måter. Her er tre vanlige alternativer:

   • På en PC med Windows XP, velger Thumbnails fra rullegardinmenyen Vis-meny til høyre for Look In-feltet for å vise miniatyrversjoner av alle bildene i en hvilken som helst åpen mappe. Du kan også vise en enkelt forhåndsvisning av et hvilket som helst valgt bilde helt til høyre i dialogboksen.

   • På en PC med Windows Vista eller Windows 7 , velg et ikonvalg (Små ikoner, Mellom ikoner, Store ikoner eller Ekstra store ikoner) fra rullegardinmenyen Vis-meny til høyre for Look In feltet for å vise miniatyrversjoner av alle bildene i en hvilken som helst åpen mappe. Du kan også vise en enkelt forhåndsvisning av et hvilket som helst valgt bilde helt til høyre i dialogboksen.

   • På en Mac, velger du Vis som kolonner fra øverst til venstre i dialogboksen. Du kan vise en enkelt forhåndsvisning av et hvilket som helst valgt bilde helt til høyre i dialogboksen.

     

     Kreditt: Bilder av Casey Stoll

5. For å sette inn bildet, dobbeltklikk på bildetavnet eller klikk en gang, og klikk deretter OK.

   Hvis du legger inn et bilde i en side, og bildet ikke er lagret i din lokale nettsamappe, ber Dreamweaver deg med en advarselsdialogboks og tilbyr å kopiere bildet til din lokale nettsidemappe. Mange designere lager en undermappe som heter bilder i lokalmappen der de lagrer alle bildene på deres nettsted, men du kan organisere bilder i flere undermapper hvis du foretrekker det.

6. Velg bildet på websiden din for å vise og redigere bildeegenskaper.

   Bildealternativer vises automatisk i Egenskapsinspektøren nederst på siden når et bilde er valgt.

   

   Kreditt: Bilde av Casey Stoll

Når du legger inn en bildefil på en side, legger du ikke til en kopi av bildet på siden; du lager en referanse til bildet. Den underliggende koden ser mye ut som koden for en lenke fra en side til en annen.

Både bildereferanser og koblinger inkluderer navnet på filen og banen fra siden til den filen. I hovedsak lager du en instruksjon for en nettleser for å finne bildet når det viser siden.

For å vise et bilde på websiden din, må du laste opp både siden og bildet når du publiserer nettstedet ditt. Hvis bildefilene dine og sidene som refererer til disse filene, ikke er i samme relative plassering på harddisken som de er på webserveren din, bryter du referansen til bildene dine, og et styggt knust bildeikon vises på siden din.

Den beste måten å sikre at bildene dine og filene blir der de skal i forhold til hverandre, er å la Dreamweaver holde orden på dem for deg. Derfor er det så viktig å fullføre installasjonsprosessen og sørge for at du aldri flytter eller gir et nytt navn til et bilde, unntatt i Filer-panelet.