Kuinka Upottaa Kuva Verkkosivustolle

Sisällysluettelo:

Kuinka Upottaa Kuva Verkkosivustolle
Kuinka Upottaa Kuva Verkkosivustolle

Video: Kuinka Upottaa Kuva Verkkosivustolle

Video: Kuinka Upottaa Kuva Verkkosivustolle
Video: Miten #Word asiakirjaan lisätään kuva? 2024, Marraskuu
Anonim

Kaikki, mitä kävijä näkee sivuston sivuilla, selain näyttää palvelimen hänelle lähettämien yksityiskohtaisten ohjeiden perusteella. Näitä ohjeita kutsutaan sivun HTML-koodiksi, ja ne koostuvat erillisistä "tunnisteista", jotka kuvaavat kunkin elementin tyypin, ulkonäön ja sijainnin erikseen. Jos haluat lisätä uuden elementin (esimerkiksi kuvan) sivulle, sinun on lisättävä vastaava käsky - tunniste - sen lähdekoodiin. Harkitse helpoin tapa tehdä tämä.

Kuvan lisääminen sivulle
Kuvan lisääminen sivulle

Ohjeet

Vaihe 1

Jos käytät mitä tahansa sisällönhallintajärjestelmää, on erittäin todennäköistä, että se sisältää sivun muokkausohjelman. Ensin sinun on avattava haluamasi sivu tässä editorissa. Muut vaihtoehdot ovat mahdollisia. Parhaassa tapauksessa sivieditorissa on "visuaalinen tila", toisin sanoen "WYSIWYG-tila" (mitä näet - mitä saat - "mitä näet, on mitä saat"). Tässä tilassa sinun ei tarvitse käsitellä alkuperäistä HTML-koodia ollenkaan! Editorin sivu näyttää samalta kuin sivustolla, riittää, että hiiren haluamaasi paikkaan painetaan ja painetaan "lisää kuva" -editorin paneelissa.

Vaihe 2

Tämän seurauksena avautuu valintaikkuna, jossa sinun on valittava haluamasi kuva. Jos et ole vielä ladannut sitä, on myös painike kuvan valitsemiseksi tietokoneellasi ja lataamiseksi palvelimelle. Lisäksi tässä valintaikkunassa voit asettaa kuvan ympärillä olevan kehyksen värin ja leveyden, kehyksen ja kuvan välisen etäisyyden ja värin, työkaluvihjeen tekstin. Mitat eivät ole tarpeen määrittää tässä, mutta sivun lataamisen nopeuttamiseksi ja suunnittelun vääristymisen estämiseksi on silti parempi tehdä se. Kun kaikki vaaditut valintaikkunan kentät on täytetty, napsauta "OK" ja tallenna muokattu sivu.

Lisää kuvan valintaikkuna
Lisää kuvan valintaikkuna

Vaihe 3

Johtuen siitä, että ohjausjärjestelmillä ei ole yhtä standardia, kuvan lisääminen järjestelmän visuaaliseen tilaan saattaa poiketa hieman, mutta periaate on sama. Samasta syystä WYSIWYG-tila ei välttämättä näy sivustosi hallintajärjestelmässä. Sitten sinun on vielä muokattava sivun lähdekoodia HTML-muodossa (HyperText Markup Language - "hypertekstien merkintäkieli"). Sinun on lisättävä tunniste oikeaan kohtaan koodiin, joka käskee selainta näyttämään kuvan täällä. Yksinkertaisimmassa muodossaan sen pitäisi näyttää tältä: Tässä on kuvan "suhteellinen osoite" - tässä osoitteessa selaimen tulisi ottaa yhteyttä palvelimeen saadakseen kuvatiedosto siitä. Jos osoite on suhteellinen, selain olettaa, että tiedosto on samassa palvelinkansiossa kuin itse sivu (tai alikansiossa). Mutta jotta ei erehdy, on parempi määrittää "absoluuttinen osoite" - esimerkiksi näin: Luonnollisesti, jotta palvelin löytää ja lähettää kuvan selaimelle, se on ladattava määritettyyn sijainti. Helpoin tapa tehdä tämä on tiedostohallinnan kautta, joka on jokaisessa sisällönhallintajärjestelmässä, samoin kuin isäntäyrityksesi ohjauspaneelissa. Voit tehdä tämän myös FTP-protokollalla (File Transfer Protocol - "tiedostonsiirtoprotokolla"), erityisohjelmalla - FTP-asiakasohjelmalla. Niitä on monia, sekä maksettuja että ilmaisia - esimerkiksi söpö FTP, FlashFXP, WS FTP jne. Mutta tietenkin ohjelman asentaminen, hallitseminen ja määrittäminen vie aikaa, joten tiedostonhallinta kaiken tarvitsemasi lataamiseen selain on helpompi vaihtoehto.

Vaihe 4

Kuvan html-tagissa olevan osoitteen lisäksi voit määrittää lisätietoja - tunnisteen "attribuutit". Esimerkiksi alt="Kuva" -attribuutti sisältää työkaluvihjeen tekstin, joka ponnahtaa esiin, kun viet hiiren kohdistimen kuvan päälle: Se voidaan korvata - title -attribuudilla: - suorakulmion koko, jossa selaimen tulisi Näytä kuva on asetettu leveys- ja korkeusattribuuttien avulla: - Raja-määritteellä määritetään kuvan ympärillä olevan reunan leveys (pikseleinä): Jos kuvaksi tehdään linkki, selain piirtää sen ympärille sinisen reunuksen. Päästä eroon asettamalla reunusarvo nollaksi: - Kaksi muuta määritettä sisältävät tietoja viereisten elementtien (tekstiriveistä, muista kuvista jne.) Kuvan sisennyksen määrästä - hspace asettaa kuvan koon. sisennys vaakasuunnassa (vasen ja oikea), vspace - pystysuunnassa (ala ja ylä):

Suositeltava: