Slik legger du til bilder på nettstedet ditt i Dreamweaver

Å legge til et bilde på nettsiden din kan virke nesten magisk i begynnelsen fordi prosessen er så enkel med Dreamweaver. Utfordringen med nettgrafikk er ikke å legge dem til sidene dine, men å lage flotte bilder som lastes raskt inn i seerens nettleser.

Du trenger et annet program, for eksempel Photoshop, Photoshop Elements eller Fireworks, for å lage, konvertere, redigere og optimalisere bilder. Optimalisering av bilder gjør filstørrelser mindre, slik at bildene lastes ned raskere. Dreamweaver har noen grunnleggende bilderedigeringsverktøy, men stort sett bruker du Dreamweaver til å sette inn og plassere bilder på siden din.

Dreamweaver gjør det enkelt å plassere bilder på nettsidene dine og tilbyr flere måter å gjøre det på:

• Klikk på Bilder-ikonet i Common Insert-panelet og velg deretter et bilde ved hjelp av Insert Image-dialogboksen.

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

• Bruk Sett inn-menyen.

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

Følg disse instruksjonene for å plassere et bilde på en nettside ved å bruke Sett inn-menyen:

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

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

Du kan sette inn bilder øverst til venstre i en ny tom fil, og du kan sette inn bilder i

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

Velg Sett inn → Bilde → Bilde.

Dialogboksen Velg bildekilde vises.

Bla gjennom for å finne bildet du vil sette inn.

Avhengig av datasystemet ditt 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 du Miniatyrbilder fra rullegardinlisten Vis-menyen til høyre for Søk i-feltet for å vise miniatyrbildeversjoner av alle bildene i en åpen mappe. Du kan også se en enkelt forhåndsvisning av et valgt bilde helt til høyre i dialogboksen.

• På en PC med Windows Vista eller Windows 7 velger du et ikonalternativ (Små ikoner, Middels ikoner, Store ikoner eller Ekstra store ikoner) fra rullegardinlisten Vis-menyen til høyre for Søk i-feltet for å vise miniatyrbildeversjoner av alle bildene i en åpen mappe. Du kan også se en enkelt forhåndsvisning av et valgt bilde helt til høyre i dialogboksen.

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

  

  Kreditt: Bilder av Casey Stoll

For å sette inn bildet, dobbeltklikk på bildenavnet eller klikk én gang og klikk deretter OK.

Hvis du setter inn et bilde på en side og bildet ikke er lagret i den lokale nettstedsmappen, ber Dreamweaver deg med en advarselsdialogboks og tilbyr å kopiere bildet til den lokale nettstedsmappen. Mange designere lager en undermappe kalt bilder inne i den lokale nettstedsmappen der de lagrer alle bildene på nettstedet deres, men du kan organisere bilder i flere undermapper hvis du foretrekker det.

Velg bildet på nettsiden din for å vise og redigere bildeegenskaper.

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

Kreditt: Foto av Casey Stoll

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

Både bildereferanser og lenker 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 den viser siden.

For å vise et bilde på nettsiden din, må du laste opp både siden og bildet når du publiserer nettstedet. Hvis bildefilene og sidene som refererer til disse filene ikke er på samme relative plassering på harddisken som de er på webserveren, bryter du referansen til bildene dine, og et stygt Broken Image-ikon vises på siden din. .

Den beste måten å sørge for at bildene og filene dine forblir der de skal i forhold til hverandre, er å la Dreamweaver holde styr på dem for deg. Det er derfor det er så viktig å fullføre oppsettsprosessen for nettstedet og sørge for at du aldri flytter eller gir nytt navn til et bilde, bortsett fra i Filer-panelet.