Yhtä tunnistetta käytetään kuvan lisäämiseen Web-sivun tekstiin. (Taulukko P 1). Tämän tunnisteen attribuutit asettavat kaikki sivulle sijoitetun kuvan parametrit. SRC-attribuutti vaaditaan, ja se määrittää grafiikkatiedoston osoitteen ja nimen. Jos SRC-attribuuttia ei ole asetettu, vain tyhjän kuvan kuvake näytetään.

Tunnisteen rakenne SRC-attribuutilla näyttää tältä:

.

Jos Instituutti-niminen grafiikkatiedosto sijaitsee samassa kansiossa Web-sivun kanssa, sen sijoittamiseksi sinun tulee kirjoittaa:

.

Tiedoston nimi Muoto

Jos haluat sijoittaa grafiikkatiedoston nimeltä MINSK, joka sijaitsee osoitteessa D:\Collection\Cities\MINSK.GIF, sinun tulee kirjoittaa .

Tunnisteen käyttäminen Web-sivu sisältää grafiikkatiedoston, joka sijaitsee toisella Internet-tietokoneella.

Voit luoda web-sivun valokuvalla instituutistamme, joka näkyy kuvassa. 4.1, sinun on syötettävä seuraava HTML-koodi:

Meidän instituuttimme

Riisi. 4.1. Verkkosivu, jossa on valokuva instituutista

Yllä olevassa esimerkissä valokuvan korkeus (HEIGHT) on 200 pikseliä ja leveys (WIDTH) 300 pikseliä. Valokuvan sijoittamiseksi luodaan kappale keskitasauksella.

Vaakasuuntaiset linjat

Vaakaviivat sijoitetaan Web-sivulle yhdellä tunnisteella

---

. SIZE, WIDTH, COLOR ja ALIGN määritteet muuttavat viivojen paksuutta, leveyttä, väriä ja kohdistusta.

Katsotaanpa muutama esimerkki vaakaviivojen sijoittelun selittämiseksi:

1.

---

- vaakasuora viiva koko sivulla, 2 pikseliä paksu.

2.

---

WIDTH = "200" ALIGN="RIGHT"> – vihreän värinen vaakasuora viiva, paksuus 15 pikseliä, 200 pikseliä leveä ja kohdistettu oikealle.

3.

---

– koko sivun peittävä vaakasuuntainen sininen viiva, paksuus 25 pikseliä.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – punaisen värinen vaakasuora viiva, paksuus 20 pikseliä, 300 pikseliä leveä ja kohdistettu vasemmalle.

Neljän tallennetun esimerkin rivinäyttö on esitetty kuvassa. 4.2.

Riisi. 4.2. Rivit Web-sivulla

TAULUKOT

Taulukoiden luominen

Taulukko luodaan parillisen tagin avulla

… . Tämä tunniste luo taulukon sijaintiin, johon se lisätään
HTML-koodissa.

Mikä tahansa taulukko koostuu riveistä ja rivit - soluista. Seuraavia tunnisteita käytetään taulukon rivien ja solujen muodostamiseen:

... – uusi linja;

... – otsikkosolu;

... – tavallinen taulukkosolu.

Nämä tunnisteet on kirjoitettu parillisen tagin sisään

… .

Taulukko muodostetaan rivi riviltä - ensin määritetään yksi rivi ja siinä ilmoitetaan tarvittava määrä soluja, sitten toinen rivi jne.

Saadaksesi kuvassa näkyvän taulukon. 5.1, sinun on kirjoitettava seuraava HTML-koodi:

Riisi. 5.1. Taulukkosivu

Taulukon otsikkosolujen teksti (kuva 5.1) näytetään puolilihavoituna ja tasataan solun keskelle, kun taas tavallisissa soluissa tekstiä ei korosteta, vaan se tasataan vasemmalle.

On huomattava, että yllä olevan sivun HTML-koodissa -tunniste

Autot	Hinta	Ford	5000	Golf	6000

sisältää BORDER-attribuutin, jonka arvo on "1". Tämä tarkoittaa, että kuvan taulukossa. 5.1, ulkoreunan paksuus on
1 pikseli. Jos kirjoitamme

… ,

silloin ulkoreunuksen paksuus on 6 pikseliä. Voit estää taulukon reunusten näyttämisen asettamalla BORDER-attribuutin arvoksi 0 tai yksinkertaisesti jättämään tämän määritteen pois.

Useimmat Web-sivut sisältävät grafiikkaa. Sen avulla voit esittää tiedot värikkäästi ja selkeästi. Monissa tapauksissa on parempi näyttää kuva kuin antaa pitkä tekstikuvaus.

On kaksi tapaa sijoittaa grafiikkaa sivulle:

• yksittäisten kuvien lisääminen;
• taustan täyttäminen kuvalla.

Joka tapauksessa graafinen kuva otetaan tiedostosta.

Grafiikan lisääminen

Graafisen kuvan lisääminen graafisesta tiedostosta sivulle tapahtuu tunnisteen avulla (englanniksi, kuva - kuva), joka ilmoittaa tiedoston osoitteen argumenttina SRC-attribuutille:

< IMG SRC = "адрес_графического_файла" >

Graafisen tiedoston osoite on joko URL-osoite tai tiedoston nimi, mahdollisesti polulla. Jos esimerkiksi haluat näyttää graafisen tiedoston logotip.jpg, sinun tulee kirjoittaa tunniste:

< IMG SRC = "logotip.jpg" >

Voit lisätä tagissa olevan graafisen kuvan siirtonopeutta voit käyttää attribuuttia ( lisäparametri) LOWSRC, joka ottaa grafiikkatiedoston osoitteen argumenttina. Voit luoda kaksi grafiikkatiedostoa: yksi (esimerkiksi logo.jpg) sisältää korkearesoluutioisen kuvan ja toinen (esim. logo.gif) matalaresoluutioisen kuvan. Sitten tagi:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...ohjeistaa selainta lataamaan ensin logo.gif-tiedoston ja korvaamaan sen sitten logo.jpg-tiedostolla, kun se vastaanotetaan.

Toinen tapa nopeuttaa grafiikan lataamista on määrittää sen suorakaiteen muotoisen alueen koko, johon grafiikka sijoitetaan attribuuttien avulla. LEVEYS(leveys) ja KORKEUS(korkeus), mitattuna pikseleinä. Jos määrität nämä attribuutit, selain varaa ensin tilan grafiikalle, valmistelee asiakirjan asettelun, näyttää tekstin ja vasta sitten lataa grafiikan. Huomaa, että selain pakkaa tai venyttää kuvaa niin, että se mahtuu määritettyyn kehyskokoon. Esimerkki kuvan mittojen määrittämisestä:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Grafiikka käytetään yleensä yhdessä tekstin kanssa, joten tekstin ja grafiikan kohdistamisen ongelma syntyy. Tämä ongelma ratkaistaan ​​määritteen avulla TASONTA tag käyttämällä erilaisia ​​argumentteja. Saatamme esimerkiksi haluta tekstin virtaavan kuvan ympärillä oikealle tai vasemmalle. Yleensä kuva on upotettu tiiviisti tekstiin, mikä voi olla rumaa. Tämän välttämiseksi voit asettaa tyhjät marginaalit kuvan ympärille. Kentät luodaan attribuuttien avulla VSPACE ylä- ja alamarginaalille ja Н Space tagin sivumarginaaleja varten . Näiden määritteiden argumentit määritetään numeroina, jotka määrittävät kenttien koon pikseleinä. Jos haluat peruuttaa tekstin rivityksen grafiikan ympärille, käytä tunnistetta
.

Seuraava tagi asettaa logo.jpg-tiedoston grafiikan käärimään oikealle (kuva sijoittuu tekstin vasemmalle puolelle):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Jos haluat sijoittaa kuvan tekstin oikealle puolelle, tarvitset määritteen TASONTA määritä argumentti OIKEIN:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Jos haluat asettaa kuvan ympärille reunukset, sinun on kirjoitettava tagi, kuten:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Tässä numerot 20 ja 10 määrittävät kenttien koon.

Katsotaanpa esimerkkiä jakaminen grafiikkaa ja tekstejä. Avaa Muistio (tekstieditori Muistio) Windows. Kirjoita siihen HTML-koodi käyttämällä yllä mainittuja tageja. Alla on ohjelma, joka tulostaa tekstiä ja grafiikkaa. Voit käyttää mitä tahansa tiedostojasi grafiikkatiedostona. Tässä käytetty tiedosto on logotip.gif.

< HTML >

< HEAD >

< TITLE >Harjoitus 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Teksti kiertyy oikeanpuoleisen grafiikan ympärille< / H1 >

Riisi. 657. Teksti kiertyy oikeanpuoleisen kuvan ympärille

Laajat mahdollisuudet kuvien (ja muiden elementtien) tarkkaan sijoittamiseen sivulla tarjoavat taulukoita Ja tyylejä. Näitä HTML-elementtejä käsitellään myöhemmin. Voit esimerkiksi määrittää taulukon ilman näkyviä kehyksiä ja sijoittaa kuvia, tekstejä ja muita elementtejä tämän taulukon soluihin.

Määritelmä 1

Verkkosivu on tekstitiedosto, luotu HTML-kielellä ja isännöity World Wide Webissä (WWW). Web-sivu voi sisältää tekstin lisäksi hypertekstilinkkejä, joiden kautta voit navigoida muille Web-sivuille ja katsella niitä, sekä lisäyksiä grafiikan, animaation, videoleikkeiden ja musiikin muodossa.

HTML:n avulla voit:

1. Luo ja muokkaa web-sivuja.
2. Muokkaa HTML-dokumentteja Internetistä ottaen huomioon kaikkien dokumenttiin upotettujen objektien (kuvat, animaatiot jne.) toiminta.
3. Käyttämällä hypertekstilinkkejä ja kykyä upottaa piirustuksia, kaavioita, animaatioita, videoleikkeitä, musiikkia ja puheen säestystä, tekstin erikoistehosteita HTML-dokumenttiin, luoda multimediaesityksiä, diaesityksiä, esittelyprojekteja.

Huomautus 1

Graafiset kuvat tallennetaan yleensä erillisiin tiedostoihin. HTML-kielessä on erityiset tunnisteet, joilla linkit kirjoitetaan Web-sivujen koodeihin, jotka ovat näiden tiedostojen todellisia osoitteita Internetissä. Kun Web-selain kohtaa tällaisia ​​tunnisteita, se pyytää Web-palvelimelle vastaavaa tiedostoa, joka sisältää kuvan, äänen tai videon, ja näyttää sen Web-sivulla tämän tunnisteen sijainnissa. Kaikkia Web-sivusta erillään oleviin tiedostoihin tallennettuja tietoja (kuvia, ääntä ja videoita jne.) kutsutaan Web-sivujen upotetuiksi elementeiksi. Katsotaanpa tarkemmin kuvan lisäämisprosessia Web-sivulle.

Kuvien lisääminen Web-sivulle

Web-sivujen houkuttelevuus piilee juuri niissä käytetyissä grafiikoissa ja muissa erilaisissa esineissä. Kuvan lisääminen sivulle ei ole vaikeaa. Ja lisää grafiikkaa, joka voi tehdä ulkonäkö Web-sivut ovat edustavampia ja ammattimaisempia, paljon monimutkaisempia ja vaativat erityisosaamista.

Voit lisätä sivulle kuvan käyttämällä kuvan lähdekoodia, joka näyttää tältä:

missä on itse tagi, ja scr on sen attribuutti. Koska scr-attribuutti vaaditaan, voimme sanoa, että tämä koko merkintä on yksi yhteinen tunniste. Kuvan lähdetunniste ei käytä vastaavaa sulkevaa tunnistetta, koska lähdetunniste on itsenäinen ja vaatii siksi viimeisen kauttaviivan, kun sitä käytetään: .

Vaihtoehtoisten tekstitysten lisääminen

Internetissä voit usein löytää erilaisia ​​merkintöjä, jotka tulevat näkyviin, kun viet hiiren osoittimen minkä tahansa Web-sivun graafisen objektin päälle. Nämä kuvatekstit sisältävät yleensä lisätietoja itse kuvasta tai sivun alueesta, jolla se sijaitsee.

Alla on HTML-koodi, johon on lisätty alt-attribuutti. Tämä attribuutti, joka on samanlainen kuin src-attribuutti, kertoo selaimelle lisätietoja kuvasta, ja sitä voidaan myös aina käyttää tunnisteen kanssa.

alt="Tämä on kuva!" />!}

Alt-attribuutin tehtävänä on määrittää vaihtoehtoinen teksti Web-sivulle lisättävälle graafiselle elementille. Sitä kutsutaan vaihtoehtoiseksi, koska se näytetään näytöllä vaihtoehtona itse kuvalle. Alt-attribuutilla on toinen tärkeä toiminto. Sen avulla web-suunnittelija voi olla varma, että jos sivun vierailija ei näe kuvaa näytöllään, hän näkee ainakin tähän kuvaan lisätyt tekstitiedot.

Kun käytät alt-attribuuttia jokaiselle tunnisteelle, on tärkeää olla varovainen, ettet liitä graafisiin elementteihin sopimattomia tekstiviestejä. Ei esimerkiksi ole mitään järkeä lisätä vaihtoehtoisia tekstitunnisteita sivun suunnitteluelementteihin. Tällaisten virheiden välttämiseksi voit asettaa näiden elementtien alt-attribuutille tyhjän arvon (alt=" "). Jos et aseta muita määritteitä, selain hahmontaa kuvan alkuperäisessä koossa, mutta kohdistaa kuvan yläreunan viereisen tekstijonon yläreunaan. Voit kuitenkin muuttaa näitä molempia asetuksia käyttämällä tyylisivutunnisteita.

Kuvan attribuutit

Tunnisteella on attribuutteja, joiden avulla voit muuttaa kuvien kokoa. Tässä on joitain niistä:

• korkeus – sitä käytetään kuvan korkeuden määrittämiseen pikseleinä tai prosentteina;
• leveys – sitä käytetään kuvan leveyden määrittämiseen pikseleinä tai prosentteina.

Kuvan korkeuden ja leveyden säätö

Web-sivuille sijoitettujen kuvien koot voidaan asettaa käyttämällä yllä olevia määritteitä. Lisäksi niiden arvot asetetaan joko kiinteänä pikselien lukumääränä tai prosentteina sivun koosta. Alla olevassa HTML-koodissa ensimmäinen tagi sisältää alkuperäisen kuvan mitat pikseleinä (60 pikseliä pystysuunnassa ja 60 pikseliä vaakasuunnassa), toinen tagi asettaa saman kuvan leveydeksi 6 % sivun leveydestä ja korkeudeksi 10 % sivun korkeudesta.

alt="Tämä on kuva!" height="60" width="60" />

alt="Tämä on kuva!" height="10%" width="6%" />

Huomautus 2

Kun selain näyttää kuvia omassa ikkunassaan, se käsittelee yhtä hyvin molempia arvotyyppejä. Sinun on kuitenkin muistettava, että Web-sivujen vierailijoilla saattaa olla erilainen näytön tarkkuus kuin sinun tietokoneissasi. Siksi, kun muutat kuvan kokoa, sinun on määritettävä molemmat kuvan arvot (korkeus ja leveys). Jos muutat vain yhtä näistä arvoista, näytöllä oleva kuva saattaa näyttää venytetyltä pysty- tai vaakasuunnassa.

Sitä voidaan käyttää luomaan illuusion kuvien nopeammasta lataamisesta. Tätä varten sinun on aina määritettävä korkeus- ja leveysmääritteiden arvot riippumatta siitä, onko kuvan kokoa muutettu vai ei. Koska ne kertovat selaimelle tärkeitä tietoja tilan määrästä, joka tarvitaan kuvan sijoittamiseen sivulle. Vastauksena selain varaa kuvalle tarvittavan tilan ja jatkaa sivun muiden elementtien rakentamista lopettamatta itse kuvan lataamista. Tämä saa sivun näyttämään latautuvan nopeammin, koska vierailijoiden ei tarvitse odottaa kuvan latautumista kokonaan ennen kuin he näkevät sivulla muita tietoja.

Jotta varmistetaan, että kuva missä tahansa näytössä, sen resoluutiosta riippumatta, vie tarkalleen tietyn määrän tilaa sivun leveydeltä, on käytettävä prosenttiarvoja. Jos haluat itse kuvan resoluution olevan vakio (sen koko pikseleinä), sinun on käytettävä arvoja pikseleinä.

Tekstin ja grafiikan kohdistaminen

Tasaa kuva tekstirivin oikeaan tai vasempaan reunaan käyttämällä tunnisteen align-attribuuttia. Esimerkiksi:

alt="Tämä on kuva!" height="60" width="60" align="right" />

Tasataksesi kuvan pystysuoraan suhteessa tekstimerkkijonoon, voit myös käyttää tätä määritettä, joka voi ottaa arvot ylhäältä, alhaalta ja keskeltä. Arvo top määrittää, että kuvan yläreuna tulee tasata ympäröivän tekstin yläreunan kanssa. Arvo bottom määrittää, että kuvan alareuna on kohdistettava ympäröivän tekstin alareunaan. Keskimmäinen arvo määrittää, että kuvan keskikohdan tulee olla kohdakkain tekstirivin keskustan kanssa.

Kuvien käyttäminen linkkeinä

Kuvia käytetään myös hyperlinkkien luomiseen muihin asiakirjoihin. HTML:ssä kuvasta tulee hyperlinkki samalla tavalla kuin tekstilaatikko. Tätä varten käytetään tunnistetta, joka sisältää sivuelementin (tässä tapauksessa kuvan), josta tulee linkki. Linkkiä seuraa klikkaamalla tätä kuvaa.

Pikkukuvat

Edellä olevan menetelmän lisäksi, jossa kuva toimii hyperlinkkinä, sitä voidaan käyttää myös hyperlinkkinä, joka siirtyy kuvasta toiseen. Tämä on tarpeen tapauksissa, joissa Web-sivulla julkaistavan kuvan koko on melko suuri ja sen lataaminen kestää hyvin kauan, mikä ei ole monien vierailijoiden hyväksymistä. Siksi he luovat tästä kuvasta pienennetyn kopion (pikkukuvan) ja esittävät sen hyperlinkillä. Jos sivun kävijä on kiinnostunut tästä kuvasta, hän voi napsauttaa pikkukuvaa nähdäkseen koko kuvan. Tässä esimerkki koodista:

alt="Klikkaa nähdäksesi normaalin kuvan."

height="60" width="60" />

Kuvien onnistuneen käytön salaisuudet

Kuvat tarjoavat vierailijoille paljon visuaalista tietoa, mikä tekee niistä houkuttelevia, ja niitä on myös melko helppo lisätä Web-sivulle, mutta sivuston luomisessa on tiettyjä sääntöjä, joita on noudatettava, jos haluamme sen olevan suosittu Internetissä.

Sivuja luotaessa kannattaa yrittää sijoittaa niille pieniä kuvia, koska suurten kuvien lataaminen kestää kauan ja jotkut käyttäjät käyttävät edelleen hitaita viestintäkanavia päästäkseen verkkoon. läpijuoksu, ja siksi ladattujen tiedostojen koko on heille erittäin tärkeä.

Huomautus 3

Tärkeää on myös koko HTML-dokumentin tiedostokoko, joka puolestaan ​​ei riipu vain siinä olevien kuvien koosta, vaan myös niiden lukumäärästä. Sinun tulee olla varovainen käytettäessä alt-attribuuttia, jotta tekstiviestin sisältö vastaa aina itse kuvaa. Ja päinvastaisessa tapauksessa: on varmistettava, että kuva vastaa sivulla esitettyä tekstitietoa.

Kun käytät luomallasi sivulla Internetistä lainattuja kuvia, sinun on tarkistettava, ovatko nämä kuvat tekijänoikeussuojattuja.

Kuten mainittiin, HTML on nykyään perusta minkä tahansa World Wide Webin verkkosivun kirjoittamiselle. Kun käytät CSS:ää, HTML-koodin luominen muuttuu dramaattisesti. Voit sanoa hyvästit kömpeleiden HTML-tunnisteiden uudelleenkäytölle vain tiettyjen visuaalisten tehosteiden saavuttamiseksi. Tietoja joistakin HTML-tageista tai -määritteistä, kuten vanhentuneesta tagista...

Kotiin

Tilaa verkkosivusto ja aloita liiketoiminta!

Tämä lause voidaan kuulla ja nähdä monilla sivustoilla, eikä tämä ole turhaa!

Verkkosivusto — nämä ovat yrityksen kasvot. Ja se on nykyaikaisin ja tehokkain viestintäkanava potentiaalisten kuluttajien kanssa. Vain Internet-sivuston ominaisuudet antavat sinun käyttää täysimääräisesti kaikkia menetelmiä välittää tietoviesti käyttäjälle. Teksti-, ääni- ja videotiedot voidaan esittää yhdellä sivustolla, jotta kuluttaja tutustuu niihin.

Käyttämällä ohjelmisto Sivustolla voit ottaa vastaan ​​maksuja, puhua puhelimessa, ylläpitää tietokantoja, lähettää ja vastaanottaa fakseja, vaihtaa tekstiviestejä ja suorittaa monia muita toimintoja. Nykyaikainen Internet-sivusto on tietokeskus paitsi mille tahansa yritykselle, myös kaikille Internetin käyttäjille.

Ja tämä on win-win tapa tehokkaasti ja samalla yksinkertaisesti ja selkeästi välittää ideasi tai kehitystyösi laajimmalle yleisölle. Ja nykyään hypertekstimerkintäkielellä HTML kirjoitetut Web-asiakirjat ovat edelleen pääasiallinen tiedon esitysmuoto verkkoympäristössä.

HTML:n tärkeimmät edut ovat:

• yksinkertaisuus, jonka avulla voit oppia HTML:n mahdollisimman lyhyessä ajassa.
• mahdollisuus luoda omia web-sivuja
• ja HTML toimii täsmälleen samalla tavalla kaikilla nykyisillä alustoilla, lisälaitteita ei tarvitse ostaa. Ja se riittää käyttämään mitä tahansa saatavilla olevaa tekstieditori, esimerkiksi Muistio.

Tällä sivustolla yritin kuvata yksityiskohtaisesti koko oman Web-sivustosi luomisprosessia, nimittäin valmiin projektin julkaisemista Internetissä, jotta kaikki käyttäjät voivat käyttää sitä.

Toivon, että artikkelini ovat erittäin hyödyllisiä monille, koska en itse ole ohjelmoija, mutta olen erittäin inspiroitunut tästä työstä.

Web-sivulle sijoitetut graafiset kuvat eivät ainoastaan ​​paranna tiedon havaitsemista, vaan myös tekevät sivuista elävämpiä ja mieleenpainuvampia. Voit valmistaa graafisia kuvia itse tai käyttää suunnittelijoiden palveluita. Voit myös käyttää grafiikkatiedostokirjastoja ohjelmistotuotteista, kuten Microsoft Office, CorelDraw jne.

Laitetaan graafinen kuva Microsoft Officen ClipArt-kirjastosta luomamme Web-sivuston kotisivulle. Voit tehdä tämän seuraavasti:

1. Avaa luotu Web-sivusto.
2. Avata kotisivu kaksoisnapsauttamalla index.htm-tiedoston nimeä paneelissa Kansioluettelo(Kansioluettelo).
3. valikossa Lisää(Lisää) valitse komento Piirustus Kuvia(ClipArt). Paneeli tulee näkyviin FrontPage-ohjelman ikkunaan Kuvan lisääminen(Lisää ClipArt).
4. Valitse komento tästä paneelista Kokoelma kuvia(Mediagalleria). Näyttöön tulee valintaikkuna, josta voit valita graafisen kuvan (kuva 15.8).

Riisi. 15.8.

Valintaikkunan yläreunassa on painikkeiden lisäksi, jotka ohjaavat ikkunassa näytettävien objektien näyttämistä sekä kopioimista ja poistamista, kohdistamispainikkeet (katso taulukko).

1. Paneeli Luettelo kokoelmista sisältää tietokoneesi kansiot, joissa on multimediatiedostoja, sekä ClipArt-kirjaston kuvatiedostoja. Avaa sinua kiinnostavan kuvaluokan kansio. Tämän luokan kuvat näkyvät ikkunan työalueella. Kun asetat kohdistimen kuvan päälle, näkyviin tulee vihje, joka kertoo kuvan nimen, koon ja sen sisältämän tiedoston sekä graafisen kuvan muodon (kuva 15.9).

1. Napsauta nuolipainiketta valitun kuvan oikealla puolella. Näkyviin tulee kontekstivalikko.
2. Valitse komento pikavalikosta Kopioida(Sora).
3. Siirry Web-sivulle ja liitä kuva leikepöydältä sille millä tahansa kätevällä työkalulla. Paina esimerkiksi näppäinyhdistelmää +.
4. Tallenna graafisen kuvan sisältävä web-sivu napsauttamalla -painiketta Tallentaa(Tallenna) vakiotyökalurivillä. Näyttöön tulee valintaikkuna Tallennetaan upotettuja tiedostoja(Save Embedded Files) (Kuva 15.10), joka tarjoaa sivulle sijoitetun kuvan tallentamisen kansioon kuvia Web-sivusto, jonka nimi on kirjastossa oleva tiedosto. Tämä ikkuna sisältää seuraavat painikkeet:
   • Nimeä uudelleen(Nimeä uudelleen) - voit nimetä tiedoston uudelleen.
   • Vaihda kansiota(Vaihda kansio) - avaa valintaikkunan Vaihda kansiota(Vaihda kansio), joka sisältää nykyisen Web-sivuston kansiot, jolloin voit valita toisen kansion tiedoston tallentamista varten.
   • Toiminta(Aseta toiminto) avaa valintaikkunan Toimintatehtävä, jonka avulla voit muuttaa arvoa Tallentaa Tallenna Toiminto-sarake kohteeseen Älä säästä(Älä tallenna). Tallentaa Piirustus tallennetaan määrittämääsi Web-sivuston kansioon, muuten Web-sivu sisältää linkin ClipArt-kirjastossa olevaan kuvaan.

Alue Piirustus(Kuvan esikatselu) näyttää sijoitettavan kuvan. Asettamalla valintaikkunassa Tallennetaan upotettuja tiedostoja haluamasi parametrit, paina -painiketta OK. Grafiikkatiedosto tallennetaan määrittämääsi Web-sivuston kansioon.

Riisi. 15.10.

Graafisen kuvan sijoittaminen tiedostosta

Tarkastelimme graafisen kuvan sijoittamista Clip Ait -kirjastosta Web-sivulle. Jos haluat sijoittaa graafisen kuvan tiedostosta sivulle, tee jokin seuraavista:

• valikossa Lisää(Lisää) valitse komento Piirustus(Kuva) ja sitten avautuvassa alivalikossa - vaihtoehto Tiedostosta(Tiedostosta)
• Napsauta painiketta Lisää kuva tiedostosta(Lisää kuva tiedostosta) vakiotyökalurivillä
• Napsauta painiketta Lisää kuva tiedostosta(Lisää kuva tiedostosta) työkalurivillä Piirustukset(Kuvat)

Kun teet jonkin näistä toiminnoista, valintaikkuna avautuu Piirustus(Kuva) (Kuva 15.11). Etsi tästä ikkunasta haluamasi grafiikkatiedosto ja napsauta painiketta sen sijoittamiseksi Web-sivulle Lisää(Lisää). Valintaikkuna sulkeutuu ja kuva sijoitetaan sivulle.

Riisi. 15.11.

Kuvan ominaisuuksien asettaminen

Kun olet sijoittanut kuvan Web-sivulle, sinun on määritettävä sen ominaisuudet valintaikkunan avulla Kuvan ominaisuudet(Kuvan ominaisuudet) (Kuva 15.12). Avaa se napsauttamalla kuvaa ja tekemällä jokin seuraavista:

• valikossa Muoto(Format) valitse komento Ominaisuudet(Ominaisuudet)
• Valitse joukkue kontekstivalikko Kuvan ominaisuudet(Kuvan ominaisuudet)
• Paina näppäinyhdistelmää +

Valintaikkuna Kuvan ominaisuudet sisältää kolme välilehteä: Kenraali(Yleinen), Videotallennus(Video) Näytä(Ulkonäkö). Tarkastellaanpa tarkemmin tämän näyttöikkunan mukautusvaihtoehtoja.