Kuvien lisääminen verkkosivustollesi Dreamweaverissa

Kuvan lisääminen verkkosivullesi voi aluksi tuntua melkein taianomaiselta, koska prosessi on niin yksinkertainen Dreamweaverilla. Verkkografiikan haasteena ei ole niiden lisääminen sivuillesi, vaan hyvännäköisten kuvien luominen, jotka latautuvat nopeasti katsojan selaimeen.

Tarvitset toisen ohjelman, kuten Photoshopin, Photoshop Elementsin tai Fireworksin, kuvien luomiseen, muuntamiseen, muokkaamiseen ja optimointiin. Kuvien optimointi pienentää tiedostokokoa, joten kuvat latautuvat nopeammin. Dreamweaver tarjoaa joitain peruskuvanmuokkaustyökaluja, mutta enimmäkseen käytät Dreamweaveria kuvien lisäämiseen ja sijoittamiseen sivullesi.

Dreamweaver tekee kuvien sijoittamisesta verkkosivuillesi helppoa ja tarjoaa useita tapoja tehdä se:

• Napsauta Kuvat-kuvaketta Common Insert -paneelissa ja valitse sitten kuva Lisää kuva -valintaikkunasta.

• Napsauta Tiedostot-paneelissa kuvan nimeä ja vedä se sivulle, jolla haluat kuvan näkyvän.

• Käytä Lisää-valikkoa.

Jos sinulla ei ole web-optimoitua JPEG-, GIF- tai PNG-kuvaa käsilläsi, voit ladata ilmaisia ​​kuvia, jotka on jo optimoitu.

Voit sijoittaa kuvan Web-sivulle Lisää-valikon avulla seuraavasti:

Avaa olemassa oleva sivu tai luo ja tallenna uusi sivu.

Aseta kohdistin kohtaan, johon haluat lisätä kuvan sivulla.

Voit lisätä kuvia uuden tyhjän tiedoston vasempaan yläkulmaan ja voit lisätä kuvia siihen

tageja ja elementtejä verkkosivulla, mutta et voi vain sijoittaa kuvaa sivun keskelle ilman ylimääräisiä HTML-tageja tai CSS-muotoilua sen sijoittamiseen.

Valitse Lisää → Kuva → Kuva.

Valitse kuvalähde -valintaikkuna tulee näkyviin.

Selaa löytääksesi kuvan, jonka haluat lisätä.

Tietokonejärjestelmästäsi riippuen voit esikatsella kuvia lisättäessä niitä eri tavoilla. Tässä on kolme yleistä vaihtoehtoa:

• Jos käytät Windows XP -tietokonetta, valitse Näytä-valikon avattavasta luettelosta Pikkukuvat Etsi-kentän oikealla puolella näyttääksesi pikkukuvat kaikista avoimessa kansiossa olevista kuvista. Voit myös tarkastella yksittäistä esikatselua mistä tahansa valitusta kuvasta valintaikkunan oikeassa reunassa.

• Jos tietokoneessa on Windows Vista tai Windows 7 , valitse kuvakevaihtoehto (pienet kuvakkeet, keskikokoiset kuvakkeet, suuret kuvakkeet tai erittäin suuret kuvakkeet) Näytä-valikon avattavasta luettelosta Look In -kentän oikealla puolella näyttääksesi pikkukuvaversiot kaikki kuvat missä tahansa avoimessa kansiossa. Voit myös tarkastella yksittäistä esikatselua mistä tahansa valitusta kuvasta valintaikkunan oikeassa reunassa.

• Valitse Macissa Näytä sarakkeina -vaihtoehto valintaikkunan vasemmasta yläkulmasta. Voit tarkastella yksittäistä esikatselua mistä tahansa valitusta kuvasta valintaikkunan oikeassa reunassa.

  

  Luotto: Kuvat Casey Stoll

Lisää kuva kaksoisnapsauttamalla kuvan nimeä tai napsauttamalla kerran ja napsauttamalla sitten OK.

Jos lisäät kuvan sivulle, mutta kuvaa ei tallenneta paikalliseen sivustokansioosi, Dreamweaver kehottaa sinua näyttämään varoituksen valintaikkunan ja ehdottaa kuvan kopioimista paikalliseen sivustokansioosi. Monet suunnittelijat luovat alikansion nimeltä images paikallisen sivuston kansioon, johon he tallentavat kaikki sivustonsa kuvat, mutta voit halutessasi järjestää kuvat useisiin alikansioihin.

Valitse Web-sivullasi oleva kuva nähdäksesi ja muokataksesi kuvan ominaisuuksia.

Kuvavaihtoehdot näkyvät automaattisesti sivun alareunassa olevassa Property Inspectorissa, kun kuva valitaan.

Luotto: Kuva Casey Stoll

Kun lisäät kuvatiedoston sivulle, et itse lisää kuvan kopiota sivulle. luot viittauksen kuvaan. Taustalla oleva koodi näyttää paljolti sivulta toiselle linkin koodilta.

Sekä kuvaviittaukset että linkit sisältävät tiedoston nimen ja polun sivulta kyseiseen tiedostoon. Pohjimmiltaan luot ohjeet verkkoselaimelle löytääkseen kuvan, kun se näyttää sivun.

Jotta voit näyttää kuvan verkkosivullasi, sinun on ladattava sekä sivu että kuva, kun julkaiset verkkosivustosi. Jos kuvatiedostosi ja niihin viittaavat sivut eivät ole samassa suhteellisessa paikassa kiintolevylläsi kuin verkkopalvelimellasi, rikot viittauksen kuviisi ja sivullesi ilmestyy ruma rikkinäinen kuva -kuvake. .

Paras tapa varmistaa, että kuvasi ja tiedostosi pysyvät siellä missä niiden pitääkin suhteessa toisiinsa, on antaa Dreamweaverin seurata niitä puolestasi. Tästä syystä on erittäin tärkeää suorittaa sivuston asennusprosessi loppuun ja varmistaa, että et koskaan siirrä tai nimeä kuvaa uudelleen, paitsi Tiedostot-paneelissa.