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 toisessa tietokoneessa globaali verkosto"Internet".

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

Katsotaanpa muutama esimerkki vaakaviivojen sijoittelun selittämiseksi:

1.

2.

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

3.

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

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

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.

Kuten todettiin, HTML on nykyään perusta minkä tahansa verkkosivun kirjoittamiselle World Wide Web. klo käyttämällä CSS:ää HTML-koodaus 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 riittää, että käytät mitä tahansa saatavilla olevaa tekstieditoria, 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ä.

Grafiikka ja liikenne

Vaatimukset web-sivujen suunnittelun kauneudelle ja ilmeisyydelle ovat jatkuvassa ristiriidassa tekniset valmiudet moderni web hosting. Siksi verkkosivujen suunnittelijan on tultava välittäjäksi suunnittelijan ja käyttäjän välillä ja pidettävä tiukasti tasapainoa visuaalisen houkuttelevuuden ja tiedon kohtuullisen toimitusnopeuden välillä verkossa. Tämän ongelman ratkaisemiseksi onnistuneesti sinun on tunnettava kaikki Internetissä käytetyt grafiikkamuodot, ymmärrettävä niiden väliset erot, niiden käyttöalueet ja käyttöominaisuudet.

Ymmärtääksesi Internetissä hyväksyttyjen muotojen ja protokollien suuren määrän ja luodaksesi oman sivusi, sinun on valittava, mikä sopii parhaiten tiettyihin tarkoituksiin. Jotkut muodot voivat olla vain yhdelle selaimelle ominaisia, kun taas toiset vaativat erityisen laajennuksen.

GIF ja JPEG ovat kaksi suosituinta grafiikkamuotoa, joista on pitkään tullut de facto standardeja käytettäväksi WWW:ssä. Molemmat ovat melko yleismaailmallisia, useimmat selaimet luettavissa eivätkä vaadi erityisiä ohjelmistoja (tai lisämoduuleja). GIF ja JPEG ovat rasterikuvamuotoja, jotka vastaavasti määräävät kiinteän muodon (resoluution), kun tällaisia ​​kuvia näytetään näytöllä. Kun yrität skaalata (joissakin selaimissa), rasterikuvien (pikselikuvien) laatu heikkenee merkittävästi.

8-bittisessä (256 väriä) GIF-muodossa väripaletin valinta on myös suuri ongelma.

Vektorigrafiikkamuodot ovat paljon houkuttelevampia käytettäväksi verkossa. Toisin kuin bittikartat, vektorigrafiikka perustuu datan matemaattiseen (geometriseen) esitykseen. Tällaiset kuvat ovat huomattavasti pienempiä tallennus-/siirtotilavuudeltaan, helposti skaalautuvia eivätkä käytännössä menetä laatua minkään muuntamisen aikana. Valitettavasti vektoriformaatteja käytetään vielä vähän Internetissä, mutta standardit on jo muodostettu ja niiden pitäisi kiinnostaa suunnittelijoita.

Useita vektoristandardeja on ehdotettu suhteellisen hiljattain, ja PGML- ja VML-formaatit ovat parhaillaan World Wide Web Consortiumin (W3C) harkinnassa. VML:ää edistävä Macromedia on kuitenkin pitkään avannut Shockwave Flash -vektorimuotonsa muille kehittäjille ja ottanut käyttöön lisämoduuleja tämän muodon grafiikan katseluun suosittuihin selaimiin.

Uudet tuotteet eivät kuitenkaan välttämättä ole parempia kaikkiin sovelluksiin. Yleisimpiä Internetissä julkaistuja kuvia ovat edelleen digitaaliset valokuvat, piirustukset ja skannatut kuvat, jotka ovat erittäin työvoimavaltaisia ​​ja tuskin suositeltavaa muuntaa vektorimuotoon.

Siksi muodon valinta riippuu viime kädessä tavoitteistasi, ja sinun on päätettävä, mitkä kuvat sopivat parhaiten kohdeyleisöllesi.

CompuServe tarkoitti alun perin GIF-muotonsa interaktiivisille sovelluksille, jotka liittyvät henkilökohtaisen tietokoneen vakiografiikan rajoitettuihin ominaisuuksiin. Se oli alun perin 4-bittinen ja sitten 8-bittinen rasterimuoto määritetyllä väripaletilla, joka tuki enintään 256 väriä. Yksi muodon merkittävistä eduista on, että kuvat voidaan indeksoida tiettyyn palettiin (värisarjaan), kun taas JPEG-kuvia ei voida "lukita" palettiin, eikä niiden "oikea" näyttö ole aina mahdollista.

Tämä ominaisuus on erityisen tärkeä kehittäjille, jotka käyttävät paletin indeksointia optimoidakseen kuvien siirron kaikille alustoille (joko PC, Mac, Web-TV tai muut), riippumatta siitä, minkä värisyvyyden kanssa tietty järjestelmä toimii. Tämä monipuolisuus saavutetaan rajoitetulla 216 värin paletilla, joka sisältää kaikki yleiset värit, joita käytetään sekä Windowsissa että esimerkiksi MacOS:ssa. Sivuston suunnittelu yleispaletilla takaa yhtenäisen, eri alustojen ja laitteistosta riippumattoman näytön. Lisäksi GIF-muoto käyttää häviötöntä pakkausmallia (yksinkertaisella toistokoodausalgoritmilla: samanvärinen tavujen sarja korvataan kahden tavun sanalla, joista toinen sisältää varjostuskuvion ja toinen määrittää numeron toistoa), jotta tässä muodossa olevat graafiset tiedot eivät menetä tietoja pakkaus- ja palautusprosessin aikana. Juuri näiden sisäänrakennettujen värirajoitusten vuoksi GIF-muotoa voidaan kuitenkin käyttää vain kuville, joissa on rajoitettu määrä värejä - kuten mustavalkokaaviot tai ne sisältävät suuria alueita yhtä väriä, kuten esim. sarjakuvakehyksiä tai digitaalisia piirustuksia yhtenäisillä väreillä. Tietysti voit tallentaa minkä tahansa kuvan

Näin ollen GIF-muodon tärkeimmät edut ovat häviöttömän pakkauksen käyttö ja yhtenäisten värialueiden taloudellinen säilyttäminen selkeällä rajalla ja tiukoilla värisiirtymillä. JPEG-muoto eroaa kuvatusta siinä, että pakkaustasosta riippuen kiinteät alueet tuhoutuvat ja terävät värisiirtymät tasoittuvat tai sumentuvat.

Pääkriteeri GIF-muodon valinnassa: jos piirsit itse kuvan grafiikkapaketissa, kuten Photoshopissa tai Painterissä, jossa on suuria samanvärisiä alueita, tai olet käsitellyt olemassa olevaa kuvaa ja haluat tallentaa korkea kontrasti(tarvitaan esim. tekstiä näytettäessä), tallenna sitten tässä muodossa (pääasiassa tämä koskee mustavalkoisia tai huonosti värillisiä piirustuksia).

Käytä JPEG-muotoa valokuville, videoille tai muille täysvärikuville, joissa käytetään tasaisia ​​värisiirtymiä (gradientteja).

On myös tärkeää muistaa, että jos yrität tallentaa jatkuvasävyisiä kuvia GIF-kuvina, joudut todennäköisesti hylkäämään niin paljon tietoja kuvan valmisteluprosessissa (kun muunnat sen kiinteäksi palettiksi) ja GIF-pakkauksen. Menetelmä on niin tehoton, että menetät myös taloudellisesti (sekä työvoimakustannusten että tiedostokoon suhteen).

GIF-muoto tarjoaa muun muassa ns. lomitetun ulkonäön, joka auttaa käyttäjiä, joilla on hitaita kanavia heti vastaanoton alussa, arvioimaan kuvan sisältöä (vaikutus on samanlainen kuin asteittainen piirtäminen pois päältä). tarkennuskuva) ja sen täydelliseen lähettämiseen tarvittava aika, ja sen seurauksena hyväksy päätös, jatkaako sen ottamista vai onko parempi lopettaa sen ottaminen.

Toisin kuin progressiivinen JPEG, vaikutus tässä on kuitenkin enemmän psykologinen kuin todellinen (katso kuva).

Muista myös yksi tärkeä GIF-muodon etu, jota joissain tapauksissa ei voida välttää sen puutteineen, on läpinäkyvyystuki (GIF89a-laajennus), joka mahdollistaa siluetin näyttämisen ei-suorakulmaisilla ääriviivoilla olemassa olevalle taustalle. . Läpinäkyvyys GIF-muodossa on toteutettu primitiivisesti - yksi väri (yleensä tausta) on määritetty läpinäkyväksi. Tätä etua käytetään usein luotaessa painikkeita ja kuvakkeita sivun suunnittelussa (JPEG ei tarjoa tukea läpinäkyvyydelle). Lopuksi voimme sanoa seuraavaa: GIF - tehokkaan kompromissin saavuttamiseksi olemassa olevien laitteistojen ja ohjelmistojen välillä, ja kyky indeksoida 8-bittinen GIF-kuva 216 yleisväriseksi on välttämätöntä, kun kuvat on tarkoitettu näytettäväksi useilla selaimilla ja tuntemattomilla alustoilla.

JPEG - muoto valokuville ja videokehyksille

JPEG-muoto on saanut nimensä lyhenteestä Joint Photographic Experts Group Committee, joka loi tämän standardin 80-luvun lopulla ja 90-luvun alussa. JPEG-muoto perustuu häviölliseen pakkausalgoritmiin (diskreetti kosinimuunnos), joka jakaa kuvan alueiksi (yleensä 8x8 pikselin neliöiksi), joissa värijakauma korvataan matemaattisella funktiolla ja vain tämän funktion kertoimet tallennetaan. voit rekonstruoida sen ulkonäön. Luonnollisesti kohtaat jonkin verran laadun heikkenemistä (riippuen kuvan korvaavan toiminnon monimutkaisuudesta) ja kunnostuksen jälkeen et saa enää todellista kuvaa, vaan sen matemaattista "korviketta". Alkuperäisen laadusta ja pakkausasteesta riippuen laadun heikkeneminen voi kuitenkin olla katsojalle täysin näkymätöntä.

Mutta JPEG-muodon tärkein etu GIFiin verrattuna on, että vaikka GIF on vain 8-bittinen (256 väriä), JPEG on 24-bittinen ja voi näyttää jopa 16,7 miljoonaa väriä. Tästä syystä täysivärinen JPEG toistaa luonnollisesti huomattavasti enemmän videoinformaatiota kuin GIF. Tämä muoto sopii parhaiten tosielämän kuville - skannatuille kuville tai digitaalisia valokuvia

, sekä digitoidut videokehykset tai renderoidut 3D-tietokonegrafiikkakohtaukset.

Toinen JPEG:n etu on, että toisin kuin GIF, sen avulla voit asettaa itsenäisesti lähdekuvan pakkausasteen, mikä mahdollistaa tarvittavan tasapainon koon ja laadun välillä.

Joten kun työskentelet valokuvan kanssa JPEG-muodossa, sinulla on mahdollisuus tallentaa 24-bittinen kuva 16,7 miljoonalla värillä, ja huolimatta laadun heikkenemisestä pakkaamisen aikana, se on silti paljon yhdenmukaisempi alkuperäisen kanssa kuin 256-bittinen kuva. värillinen GIF-suorituskyky. Tässä tapauksessa väistämätön laadun heikkeneminen riippuu voimakkaasti alkuperäisen kuvan koosta, laadusta ja tyypistä.

Lisäksi JPEG mahdollistaa ns. progressiivisen näytön määrittämisen, eli kun latauksen aikana näytölle tulee välittömästi "karkea" esitys kuvasta, joka vastaanotettaessa lisätietoja, paranee vähitellen (samaan aikaan saat tarvittavan ymmärryksen lähetettävän materiaalin olemuksesta jo ennen latauksen valmistumista ja keskeytät prosessin missä tahansa vaiheessa, mikä säästää huomattavasti aikaa verkkosisällön katseluun).

Voit käyttää näitä työkaluja haluamallasi tavalla, ja tällainen vaiheittainen ilmentymä voi olla hyvä apu taistelussa kanavien ruuhkautumista vastaan. Progressiivisen JPEG:n (toisin kuin lomitetun GIF:n) ainoa ongelma on, että vanhemmat selaimet eivät välttämättä tue sitä.

PNG - yleinen rasteriuutuus

Seuraavan sukupolven rasterimuotojen, PNG, edustaja otti parhaat ominaisuudet sekä JPEG:stä että GIF:stä ja lisäsi oman, ainutlaatuisen lähestymistapansa kuvien esittämiseen, mikä mahdollistaa sen upottamisen yhteen tiedostoon. eri versioita sama kuva matalalle, keskisuurelle ja korkealle resoluutiolle.

PNG (Portable Network Graphics) -muoto on suhteellisen uusi rasterigrafiikkamuoto, jonka W3C-konsortio on hyväksynyt standardiksi ja jonka pitäisi vähitellen korvata molemmat "vanhentuneet" tiedostomuodot: sekä GIF että JPEG. PNG tarjoaa väriindeksoinnin (jopa 256 väriä), tuen sekä 24- että 48-bittisille väreille (True-Color) ja toimii läpinäkyvyyskanavalla (alfa-kanava), ja se on paljon tehokkaampi kuin perinteiset tallennusmuodot. rasterikuvia.

Täysvärikuvan pakkausalgoritmi on laadultaan parempi kuin JPEG, ja rajoitetun indeksoidun paletin (jopa 256 väriä) tuella uusi muoto tarjoaa häviöttömän pakkauksen 10-30 % paremman kuin GIF-muodossa toteutettu. mikä tekee siitä optimaalisen käytettäväksi joka tapauksessa. Valitettavasti uusi muoto ei salli sinun uhrata kuvan laatua vastineeksi paremmasta pakkaussuhteesta, kuten on.

JPEG-muodossa Läpinäkyvyystuki sisään toisin kuin GIF, se on täysimittainen, eli voit rakentaa läpikuultavia kuvia tai reunoja, joten "puhtaiden" reunojen ongelma, joka on niin vaikea ratkaista käytettäessä läpinäkyvyyttä GIF-tiedostossa, on helppo voittaa täällä.

Kaikista PNG:n tarjoamista parannuksista huolimatta uusi muoto otetaan käyttöön vasta, kun Web-sivustojen suunnittelijat ja ohjelmistojen valmistajat käyttävät sitä sekä renderöimään kuvia uudessa muodossa että valmistelemaan niitä julkaisua varten. Sillä välin on melko vaikeaa löytää PNG-kuvia mistään Internetistä, vaikka tämän muodon tuki on äskettäin sisällytetty sekä Netscape Navigatoriin että Microsoft Internet Exploreriin.

Ja vaikka he uusimmat versiot ja tukevat PNG:tä, he tekevät niin hyvin rajoitetulla tavalla. Tällä hetkellä ainoa ratkaisu käyttäjille, jotka haluavat nähdä koko PNG-tiedoston, on asentaa ulkoinen moduuli (samanlainen kuin PNG Live) itse.

Ilmeisesti kehittäjät viivyttelevät ja odottavat käyttäjien siirtyvän kokonaan uusiin muotoihin. Terve konservatiivisuus ei ole koskaan haittaa, mutta suosittelemme kuitenkin, että siirryt vähitellen PNG-muotoon ja korvaat ainakin kaikki olemassa olevat GIF-muodon käyttötavat.

Vektoriesitys

Sekä JPEG, GIF ja PNG ovat rasterimuotoja, jotka perustuvat kuvan erilliseen (pikseli- tai pisteesitykseen), kun taas vektorimuodot perustuvat matemaattisiin kaavoihin (muotojen geometrinen esitys). Vektorigrafiikka tarjoaa merkittäviä etuja rasteriin verrattuna, erityisesti mitä tulee kaavioihin, tekstiin ja teolliseen grafiikkaan (ja kustannustehokkaat muodot ovat erittäin tärkeitä Internetissä).

Joten ensimmäinen etu on vektorikuvien huomattavasti pienempi koko verrattuna bittikarttoihin, koska kuvan jokaista yksittäistä pikseliä ei kuvata, vaan koko kuva (esimerkiksi ympyrän määrittämiseksi sinun on välitettävä 3-4 numeroa: säde, keskikoordinaatit ja ehkä viivan tyyppi tai paksuus ja sen attribuutit). Vektoriesitystä kuvaavat matemaattiset kaavat vievät paljon vähemmän tilaa kuin yksittäiset pikselit ja niiden attribuutit.

Toinen tärkeä vektoriesityksen etu on kyky skaalata kuvaa (tai sen osia) lähes rajattomasti ilman, että kuvan resoluutio tai selkeys heikkenee. Vektoriesitystä ei vaadita mukauttamaan tiettyyn palettiin, alustaan, laitteistoon tai suunnitteluominaisuuksiin. ja pakkausjärjestelmän ja näytön laadun koordinointi tapahtuu ilman ongelmia.

Jokaista rasterikuvaa ei kuitenkaan voida muuntaa vektorimuotoon (esim. valokuvia, skannattuja kuvia tai rasteripiirroksia on vaikea vektoroida). Mutta on yksinkertaisesti typerää muuntaa erityisesti valmistetut vektoripiirrokset (kuten viivapiirrokset, piktogrammit, tekniset kuvat, kartat, tietografiikat ja muut, jotka ovat historiallisesti vektoreita) rasterimuotoon julkaistavaksi Internetissä, mitä tapahtuu kaikkialla nykyään.

Näytön ongelmat vektorigrafiikkaa Internetissä syntyi, koska ei ollut muuta näyttötapaa kuin rasteri, ja sisäänrakennettu moduuli, joka ilmestyi tiedostojen näyttämiseen PDF-muodossa, ei tarjonnut riittävää joustavuutta ja vaati kaiken sisällön tallentamista yhteen muotoon - PDF.

Jotta vektorigrafiikka voidaan upottaa saumattomasti perinteiseen HTML-muotoon ilman lisäohjelmistoja, W3C-standardikomitea harkitsee parhaillaan kahta uutta vektoristandardia: PGML (Precision Graphics Mark-up Language) ja VML (Vector Mark-up Language). ). PGML:ää tukevat Adobe Systems, IBM, Netscape ja Sun Microsystems, ja VML:ää tukevat Microsoft, Hewlett-Packard, Autodesk, Macromedia ja Visio. Molemmat standardit perustuvat XML-kuvauskielen laajennuksiin, joita mainostetaan käytettäväksi verkossa HTML:n seuraajana ja joita W3C suosittelee tulevaa käyttöä varten.

Mutta tällä hetkellä mikään selaimista ei tue mitään vektorigrafiikkastandardeja, vaikka lisämoduuleja (laajennuksia) on jo saatavilla. Suosituimpia tapoja näyttää staattisia vektorikuvia verkossa nykyään ovat Macromedian SWF (Shockwave Flash) -muoto ja edelleen aliarvostettu Xara Flare -muoto.

leimahdus- hyvä päätös, joka mahdollistaa vektorikuvien sisällyttämisen, jotka mahdollistavat lähes rajattomasti sivun yksityiskohtien lisäämisen, vaikka niiden koko on verrattavissa Shockwave Flashiin. Tämä ei tarkoita sitä, että lisämoduulien käyttäminen kuvien katseluun olisi niin hankalaa, mutta kun käytät tällaisia ​​työkaluja sivuillasi, muista varoittaa käyttäjää tästä ja antaa hänelle mahdollisuus ladata vastaava moduuli ennen kuin hän siirtyy sivulle. joka sisältää nämä elementit.

Lyhyellä aikavälillä tämä tietysti hidastaa uusien käyttäjien selausprosessia, mutta vähitellen saat yhä enemmän kannattajia, kunnes vastaavat työkalut ovat vihdoin mukana seuraavassa selaimen versiossa eivätkä aloittelijat enää tarvitse lisäosia. moduuli.

Animaatio, interaktiivisuus ja vuorovaikutus Yleisesti ottaen GIF-kuvat voidaan järjestää erikoispinoksi yhdeksi tiedostoksi ja tuloksena oleva "elokuva" (flipbook) voidaan toistaa luomalla yksinkertainen rasterianimaatio. Sekä Netscape että Microsoft ovat tukeneet animoituja GIF-tiedostoja selaimensa kolmannesta versiosta lähtien, joten niiden esiintymistä verkossa on nyt vaikea välttää. Lukuisat GIF-animaattorit, joiden avulla voit luoda tällaisia ​​GIF-pinoja, ovat yleisiä (sekä kaupallisia että julkisia). GIF-muodon "elvyttäminen" voi kuitenkin johtaa hallitsemattomaan

tiedostokoot

, koska tällaisen pinon jokainen "taso" on yksittäinen GIF-kuva, joten tyypillinen 15 kuvaa sekunnissa tietokoneanimaatiolle voi tuottaa lukemattomia kilotavuja.

Yhdessä Javan tai JavaScriptin kanssa voit luoda interaktiivista animaatiota, joka reagoi käyttäjälle. Katsotaan nyt muita ratkaisuja web-animaatioon ja interaktiiviseen käyttäjävuorovaikutukseen, ja päärooli tässä on edelleen Macromedialla, joka on jo pitkään tullut markkinoille Shockwave- ja Flash-ohjelmillaan ja parantaa jatkuvasti tuotteitaan lisäämällä niiden tehokkuutta sen mukaisesti. käyttäjien ja suunnittelijoiden tarpeiden mukaan. luodaksesi animaation ja julkaistaksesi sen Web-sivulla. Shockwave Flash tuottaa erittäin pieniä tiedostoja (koska se käyttää pääasiassa vektoriesitysmuotoa) ja on muihin formaatteihin verrattuna kätevin valmistelun näkökulmasta.

Kun julkaiset tällaista animaatiota sivuillasi, älä unohda ilmoittaa tästä käyttäjälle, jotta hän voi hankkia lisämoduulin etukäteen ja valmistautua ikävään latauksen odottamiseen. Kuitenkin uusimmat versiot sekä Netscape Navigatorista että Internet Explorer sisältää katselumoduulit Flash-animaatioita varten jopa peruspaketissa. Netscape on vahvistanut, että Navigatorin tulevissa versioissa on tämä tuki Flashille, jopa kooditasolla.

Lopullinen päätös on sinun

Suhtautuminen verkkosisällön esittämiseen on siis muuttumassa, uusia tietomuotoja ja niitä tukevia kehitystyökaluja ilmaantuu. Vanhemmat formaatit (GIF ja JPEG grafiikan esittämiseen) ovat kuitenkin edelleen melko suosittuja. Lähes kaikki selaimet tukevat niitä, ja useimmilla kehittäjillä on laaja kokemus niiden kanssa työskentelystä. On tärkeää käyttää oikeaa muotoa tiettyyn tarkoitukseen, jotta voidaan varmistaa tasapaino kuvanlaadun ja tiedostokoon välillä. Esimerkiksi yksi kuva GIF-muodossa voi viedä enemmän tilaa ja tuottaa heikomman tuloksen kuin JPEG-muodossa, kun taas toisessa kuva on päinvastoin.

Bittikarttakuvia esitettäessä PNG on kuitenkin parempi, ja jos mennään vielä pidemmälle ja yrität käyttää vektorikuva, niin tänään Macromedian Shockwave Flash -muoto on palveluksessasi.

SWF (Shockwave Flash) -muoto ei ole yleisesti käytetty, vaan sisäinen vektorimuoto Flash-ohjelmat Macromediasta (katso "Macromedia Flash Lessons" CD-ROM-levyllä), joten saadaksesi oman kuvan tai animaation sinun on ostettava Macromedialta sopiva multimediapaketti ja käyttäjän on asennettava lisämoduuli visualisointia varten. tulos.

Siten, jotta voit yksinkertaisesti sijoittaa vektorikuvan Web-sivullesi, sinun on voitettava useita haittoja.

Muut vektorimuodot ovat kuitenkin tulossa ja niistä tulee pian vakiomuotoja.

ComputerPress 5"1999

Sijoitusmenetelmiä on kaksi graafisia kuvia sivulla:

• 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 ilmaisee tiedoston osoitteen argumenttina SRC-attribuutti:

< 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 >

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

Taulukon värit

Kuinka rakentaa taulukko sivulle

Listat luetteloiden sisällä

Määritelmien luettelo

Numeroitu luettelo

Luettelomerkitty luettelo

Kuinka luoda luettelo sivulle

Luetteloita on kolmea päätyyppiä: luettelomerkityt, numeroidut ja määritelmäluettelot. Suurin ero lueteltujen tyyppien välillä on numerointimenetelmä ja -rakenne.

Yleisimmin käytetty on numeroimaton tai luettelomerkitty luettelo. Luettelomerkityt luettelot määritetään tunnisteilla, ja näiden tunnisteiden välissä olevat luettelokohteet määritetään tunnisteella