Visizplatītākie attēlu formāti tīmekļa lapās. Grafika tīmekļa lapā HTML valodā. Grafiskā attēla ievietošana no faila

Numurēts sarakstsļoti atgādina atzīmēto. Vienīgā atšķirība ir tā, ka numurētā sarakstā pirms katra vienuma automātiski tiek ievietoti cipari vai burti grafisko marķieru vietā.

Numurēts saraksts tiek norādīts, izmantojot tagus. Kā iekšā saraksts ar aizzīmēm, katrs vienums ir norādīts ar atzīmi

atslēgvārds LENTE.

TAPE=1 — standarta numerācija (1,2,3,4,5, …)

TAPE=A — lielie burti (A, B, C, D, …)

TAPE=a — steidzami burti (a, b, c, d, …)

TAPE=I – romiešu cipari (I, II, III, IV, …)

TAPE=i — mazie romiešu cipari (i, ii, iii, iv, …)

Definīciju saraksti izskatās nedaudz savādāki nekā cita veida saraksti. Šajā gadījumā, lai aprakstītu katru saraksta vienumu, tiek izmantoti divi tagi, nevis viens tags

1. . Tag
   komplekti atsevišķs elements, tas ir, termins, kas tiek definēts, un tags
   - pārējā informācija, kas tiek parādīta nākamajā rindā, ar atkāpi. Otrā informācijas rinda tiek saukta definīcija. Definīcijas saraksts tiek norādīts tāpat kā citi saraksti. Vienīgā atšķirība ir tā, ka katram elementam ir nepieciešami divi tagi.

   Viena no lieliskajām sarakstu īpašībām ir tā, ka tos var ievietot vienu otrā. Saraksta ievietošana sarakstā ir tas pats, kas vienkārši izveidot sarakstu. Šim nolūkam nav īpašu HTML tagi. Lai nesajauktu pārlūkprogrammu, noteikti aizveriet katru iekšējo sarakstu ar atzīmi. Jūs pat varat ieguldīt viens otrā dažādi veidi sarakstus.

   Atskaņojiet visus iepriekš minētos sarakstus

   Sarakstiem ir viens trūkums – tie ir viendimensionāli. Tas nozīmē, ka informāciju var ievietot tikai secīgās rindās. Tabulas ļauj sakārtot datus ne tikai rindās, bet arī kolonnās.

   Tabulu definēšanai tiek izmantoti vairāki tagi. Tagi

   Un ierāmē visu tabulu, un vairāki citi tagi nosaka, kā informācija tiks parādīta. Tabula parāda pilns apraksts tabulas birkas.

   
   
   

   HTML tagi tabulu veidošanai:

   Tagi Apraksts

   un Šīs atzīmes aptver tabulu. Tag

   norāda pārlūkprogrammām, ka tālāk ir tabulas apraksts. Ja vēlaties, lai būtu redzams režģis, kas atdala rindas un kolonnas, pievienojiet atslēgvārdu BORDER.

   parādās kā galvene. Varat arī izmantot tagus, lai iestatītu nosaukumu Un.

   Tagi parāda tekstu ar rindu vai kolonnu virsrakstiem nedaudz lielākā, treknrakstā.

   Un Tagi nosaka katru tabulas rindu. Tag nav obligāta, taču tas padara jūsu HTML kodu pilnīgāku un saprotamāku.

   Šis tagu pāris atdala katras tabulas šūnas tekstu.

   Izveidojiet failu, kurā izveidojat piecu rindu un piecu kolonnu tabulu.

   Ir vairāki tagi, kas ļauj iestatīt fona krāsas un tabulu režģus. Pirmajā gadījumā tagā tiek ievietots atslēgvārds BGCOLOR

   un Teksts, kas atzīmēts ar šiem tagiem, ir

   Un
   Un

   sekojoši attēli:

   Papildus atslēgvārdam BGCOLOR ir arī citi veidi, kā kontrolēt krāsu:

   BORDERCOLOR Mainiet tabulas režģa krāsu

   BORDERCOLORDARK/ Izmanto, lai mainītu režģi ar

   BORDERCOLORLIGHT ar papildus trīsdimensiju efektu

   Mainiet galda režģa krāsu ar 3D efektu.

   Nodarbība 12-13. Izmantojot grafiku

   Attēli un grafikas ir ļoti svarīgi WWW. Šis ir vienīgais interneta rīks, kas ļauj ekrānā vienlaikus skatīt attēlus un tekstu.

   Lai ievietotu attēlu tīmekļa lapā, jums jāzina, kā lietot atzīmi . Ievadiet tagu un SRC= atslēgvārds, lai norādītu, kura grafika jāielādē.

   

   Ievadot šo tagu, lūdzu, ņemiet vērā, ka failam ir jāatrodas tajā pašā mapē, kurā atrodas jūsu HTML fails.

   Grafika un satiksme

   Prasības Web lapu dizaina skaistumam un izteiksmīgumam ir pastāvīgā pretrunā ar mūsdienu Web hostinga tehniskajām iespējām. Tāpēc mājas lapas dizainerim ir jākļūst par starpnieku starp dizaineru un lietotāju un stingri jāsaglabā līdzsvars starp vizuālo pievilcību un saprātīgu informācijas piegādes ātrumu tīmeklī. Lai veiksmīgi atrisinātu šo problēmu, ir jāzina visi internetā izmantotie grafiskie formāti, jāsaprot to atšķirības, to pielietojuma jomas un lietošanas īpatnības.

   Lai saprastu lielo skaitu internetā pieņemto formātu un protokolu un izveidotu savu lapu, jums ir jāizvēlas jūsu konkrētajiem mērķiem vispiemērotākais. Daži formāti var būt raksturīgi tikai vienai pārlūkprogrammai, savukārt citiem būs nepieciešams īpašs spraudnis.

   No visdažādākajiem formātiem esam atlasījuši tikai tos, kurus visbiežāk izmanto populāru vietņu autori un kurus lietotāji pieņem. GIF un JPEG ir divi no populārākajiem grafikas formātiem, kas jau sen ir kļuvuši par de facto standartiem lietošanai WWW. Abi ir diezgan universāli, lasāmi lielākajā daļā pārlūkprogrammu, un tiem nav nepieciešama īpaša programmatūra

   (vai papildu moduļi). GIF un JPEG ir rastra attēlu formāti, kas attiecīgi nosaka fiksētu formātu (izšķirtspēju), parādot šādus attēlus ekrānā. Mēģinot mērogot (paredzēts dažās pārlūkprogrammās), rastra (pikseļu) attēli ievērojami zaudē kvalitāti.

   8 bitu (256 krāsu) GIF formātā liela problēma ir arī krāsu paletes izvēle. Vektorgrafikas formāti ir daudz pievilcīgāki lietošanai tīmeklī. Atšķirībā no bitkartēm, vektorgrafikas pamatā ir datu matemātisks (ģeometrisks) attēlojums. Šādi attēli ir ievērojami mazāki uzglabāšanas/pārsūtīšanas apjoma ziņā, viegli mērogojami un praktiski nezaudē kvalitāti nevienas konvertēšanas laikā. Diemžēl vektoru formāti joprojām ir maz izmantoti internetā, taču standarti jau ir izveidoti, un tiem vajadzētu interesēt dizaineri. citi izstrādātāji un ieviesuši papildu moduļus grafikas skatīšanai šajā formātā populārām pārlūkprogrammām.

   Tomēr jauni produkti ne vienmēr ir labāki visiem lietojumiem. Visbiežāk internetā publicētie attēli joprojām ir digitālās fotogrāfijas, zīmējumi un skenēti attēli, kas ir ļoti darbietilpīgi un kurus nav ieteicams pārvērst vektoru formātā.

   Tāpēc formāta izvēle galu galā ir atkarīga no jūsu mērķiem un no tā, kuri attēli vislabāk atbilst jūsu vajadzībām. mērķauditorija, tas ir jūsu ziņā.

   GIF - formāts dizainam

   CompuServe sākotnēji bija iecerējis savu GIF formātu interaktīvām lietojumprogrammām invaliditāti standarta grafika personālajā datorā. Sākotnēji tas bija 4 bitu un pēc tam 8 bitu rastra formāts ar noteiktu krāsu paleti, kas atbalstīja ne vairāk kā 256 krāsas. Viena no būtiskām formāta priekšrocībām ir tā, ka attēlus var indeksēt uz noteiktu paleti (krāsu kopu), savukārt JPEG attēlus nevar “bloķēt” paletē un to “pareiza” attēlošana ne vienmēr ir iespējama.

   Šis īpašums ir īpaši svarīgs tiem izstrādātājiem, kuri izmanto paletes indeksēšanu, lai optimizētu attēlu pārsūtīšanu jebkurai un visām platformām (neatkarīgi no tā, vai PC, Mac, Web-TV vai citas), neatkarīgi no tā, ar kādu krāsu dziļumu darbojas konkrētā sistēma. Šī daudzpusība tiek panākta, izmantojot ierobežotu 216 krāsu paleti, kas ietver visas izplatītākās krāsas, ko izmanto gan Windows, gan, piemēram, MacOS. Vietnes dizains universālā paletē garantē konsekventu, vairāku platformu un no aparatūras neatkarīgu displeju. Turklāt GIF formātā tiek izmantota bezzudumu saspiešanas shēma (ar vienkāršu atkārtojuma kodēšanas algoritmu: vienas krāsas baitu secība tiek aizstāta ar divu baitu vārdu, no kuriem viens satur ēnojuma modeli, bet otrais nosaka skaitli atkārtojumu), lai grafiskie dati šajā formātā nezaudētu informāciju saspiešanas un atkopšanas procesa laikā. Tomēr tieši šo iebūvēto krāsu ierobežojumu dēļ GIF formātu var izmantot tikai tiem attēliem, kuriem ir ierobežots krāsu skaits, piemēram, melnbaltām shēmām vai attēliem, kas satur viena krāsa, piemēram, multfilmu rāmji vai digitāli zīmējumi ar vienas krāsas aizpildījumu.

   Protams, jūs varat saglabāt jebkuru attēlu GIF formātā, izmantojot tā saukto dithering, un tādējādi iegūt diezgan pienācīgu kvalitāti, taču šajā gadījumā jūs riskējat ievērojami palielināt faila lielumu pēc iepriekš aprakstītās atmiņas saspiešanas piemērošanas (deģenerētā gadījumā, ja attēlā nav neviena blakus esošā atkārtojuma, jūs iegūsit tieši divreiz lielāku faila izmēru, salīdzinot ar nesaspiestu oriģinālu).

   Tādējādi galvenās GIF formāta priekšrocības ir bezzudumu saspiešanas izmantošana un ekonomiska viengabalainu krāsu apgabalu saglabāšana ar skaidru robežu un stingrām krāsu pārejām. JPEG formāts atšķiras no aprakstītā ar to, ka atkarībā no saspiešanas līmeņa tajās tiek iznīcinātas cietās zonas un tiek izlīdzinātas vai izplūdušas asas krāsu pārejas.

   Galvenais GIF formāta izvēles kritērijs: ja pats zīmējāt attēlu grafikas pakotnē, piemēram, Photoshop vai Painter, kurā ir lieli vienas krāsas laukumi, vai apstrādājāt esošu attēlu un vēlaties saglabāt augstu kontrastu (nepieciešams, piemēram, kad parādot tekstu), pēc tam saglabājiet to šajā formātā (galvenokārt tas attiecas uz melnbaltiem vai sliktas krāsas zīmējumiem).

   Fotoattēliem, videoklipiem vai citiem pilnkrāsu attēliem, kuros izmantotas vienmērīgas krāsu pārejas (gradienti), izmantojiet JPEG formātu.

   Ir arī svarīgi atcerēties, ka, mēģinot saglabāt nepārtrauktu toņu attēlus kā GIF, attēla sagatavošanas procesā (pārvēršot to fiksētā paletē) un GIF saspiešanas laikā, visticamāk, būs jāatmet tik daudz informācijas. metode būs tik neefektīva, ka zaudēsiet arī finansiāli (gan darbaspēka izmaksu, gan faila lieluma ziņā).

   Jāatceras arī viena svarīga GIF formāta priekšrocība, no kuras dažos gadījumos nevar izvairīties pat ar visiem tā trūkumiem, ir caurspīdīguma atbalsts (paplašinājums GIF89a), kas ļauj uz esošā fona attēlot siluetu ar netaisnstūrveida kontūrām. . Caurspīdīgums GIF formātā tiek īstenots primitīvi - viena krāsa (parasti fons) tiek piešķirta kā caurspīdīga. Šo priekšrocību bieži izmanto, veidojot pogas un ikonas lapas dizainā (JPEG nepiedāvā nekādu caurspīdīguma atbalstu).

   Noslēgumā mēs varam teikt sekojošo: GIF - labākā izvēle lai panāktu efektīvu kompromisu starp esošo aparatūru un programmatūru, un iespēja indeksēt 8 bitu GIF attēlu 216 universālās krāsās ir būtiska, ja attēlus paredzēts rādīt dažādās pārlūkprogrammās un nezināmās platformās.

   JPEG - formāts fotogrāfijām un video kadriem

   JPEG formāts savu nosaukumu ieguvis no akronīma Apvienotās fotogrāfiju ekspertu grupas komiteja, kas izveidoja šo standartu 80. gadu beigās un 90. gadu sākumā. JPEG formāts ir balstīts uz zudumiem bagātu saspiešanas algoritmu (diskrētā kosinusa transformācija), kas sadala attēlu apgabalos (parasti 8x8 pikseļu kvadrātos), kuros krāsu sadalījums tiek aizstāts ar matemātiskā funkcija un tiek saglabāti tikai šīs funkcijas koeficienti, kas ļauj atjaunot tās formu. Protams, jūs pieredzēsit nelielu kvalitātes zudumu (atkarībā no funkcijas sarežģītība, ko izmanto attēla aizvietošanai) un pēc atjaunošanas jūs vairs nesaņemsiet īstu attēlu, bet gan tā matemātisko “surogātu”. Tomēr atkarībā no oriģināla kvalitātes un saspiešanas pakāpes kvalitātes zudums skatītājam var būt pilnīgi neredzams. Bet galvenais JPEG priekšrocības

   -formāts salīdzinājumā ar GIF ir tāds, ka, lai gan GIF ir tikai 8 bitu (256 krāsas), JPEG ir 24 bitu un var attēlot līdz 16,7 miljoniem krāsu. Šī iemesla dēļ pilnkrāsu JPEG, protams, reproducē ievērojami vairāk video informācijas nekā GIF. Šis formāts ir vislabāk piemērots reāliem attēliem - skenētiem attēliem vai digitālās fotogrāfijas

   Vēl viena JPEG priekšrocība ir tā, ka atšķirībā no GIF tas ļauj neatkarīgi iestatīt avota attēlam piemēroto saspiešanas pakāpi, kas ļauj saglabāt nepieciešamo izmēru un kvalitātes līdzsvaru.

   JPEG saspiešanas pakāpes ļoti atšķiras atkarībā no izmantotās attēlu rediģēšanas programmas, taču tīmekļa lapās parasti tiek izmantots koeficients 10:1 vai 20:1 (izteikts kā tilpuma proporcija attiecībā pret oriģinālo attēlu), kas parasti nodrošina pieņemamu kvalitāti.

   Tomēr jūs varat saspiest attēlu līdz galējām vērtībām 100:1 (protams, ar ievērojamu kvalitātes zudumu).

   Tātad, strādājot ar fotoattēlu JPEG formātā, jums ir iespēja saglabāt 24 bitu attēlu ar 16,7 miljoniem krāsu, un, neskatoties uz kvalitātes zudumu saspiešanas laikā, tas joprojām ir daudz atbilstošāks oriģinālam nekā 256 bitu attēls. krāsu GIF veiktspēja. Šajā gadījumā neizbēgams kvalitātes zudums ir ļoti atkarīgs no oriģinālā attēla izmēra, kvalitātes un veida.

   Turklāt JPEG ļauj definēt tā saukto progresīvo displeju, tas ir, kad ielādes laikā ekrānā uzreiz parādās “aptuvena” attēla attēlojums, kas, saņemot papildu informāciju, pakāpeniski uzlabojas (pie tajā pašā laikā jūs varat iegūt nepieciešamo priekšstatu par iesniedzamā materiāla būtību pat pirms lejupielādes pabeigšanas un jebkurā posmā pārtraukt procesu, kas ievērojami ietaupa laiku, skatoties tiešsaistes saturu).

   Šos rīkus varat izmantot pēc vēlēšanās, un šāda pakāpeniska izpausme var būt labs palīgs cīņā pret kanālu pārslodzi. Vienīgā problēma ar progresīvo JPEG (atšķirībā no rindpārlēces GIF) ir tā, ka vecākas pārlūkprogrammas to var neatbalstīt.

   PNG – universāls rastra jaunums Nākamās paaudzes rastra formātu PNG pārstāvis ieguva labākās īpašības gan no JPEG, gan no GIF un pievienoja savu unikālo pieeju attēla prezentācijai, kas ļauj to iegult vienā failā. dažādas versijas

   PNG (Portable Network Graphics) formāts ir salīdzinoši jauns rastra grafikas formāts, ko W3C konsorcijs ir apstiprinājis kā standartu, un tam vajadzētu pakāpeniski aizstāt abus “novecojušos” formātus: gan GIF, gan JPEG. PNG piedāvā krāsu indeksēšanu (līdz 256 krāsām), atbalstu gan 24, gan 48 bitu krāsām (True-Color) un darbu ar caurspīdīguma kanālu (alfa kanālu), un tas ir daudz efektīvāks nekā tradicionālie rastra attēlu uzglabāšanas formāti. .

   Pilnkrāsu attēlu saspiešanas algoritms pārspēj JPEG kvalitāti un atbalsta ierobežotu indeksētu paleti (līdz 256 krāsām). jauns formāts veic bezzudumu saspiešanu par 10-30% labāk nekā tas, kas ieviests GIF formātā, padarot to par optimālu lietošanai visos gadījumos.

   Diemžēl jaunais formāts neļauj upurēt attēla kvalitāti apmaiņā pret augstāku saspiešanas līmeni, kā tas ir JPEG formātā.

   Pārredzamības atbalsts PNG formātā, atšķirībā no GIF, ir pilnvērtīgs, tas ir, jūs varat izveidot caurspīdīgus attēlus vai apmales, tāpēc “tīro” robežu problēma, kuru ir tik grūti atrisināt, izmantojot caurspīdīgumu GIF failā, ir viegli pārvarama. šeit.

   Tomēr, neskatoties uz visiem PNG piedāvātajiem uzlabojumiem, jaunais formāts sāks darboties tikai tad, kad to izmantos vietņu dizaineri un programmatūras veidotāji, lai gan atveidotu attēlus jaunajā formātā, gan sagatavotu tos publicēšanai. Tikmēr ir diezgan grūti atrast PNG attēlus jebkur internetā, lai gan nesen tika iekļauts šī formāta atbalsts gan Netscape Navigator, gan Microsoft Internet Explorer. Un, lai gan viņi jaunākās versijas

   un atbalsta PNG, viņi to dara ļoti ierobežotā veidā. Pašlaik vienīgais risinājums lietotājiem, kuri vēlas redzēt pilnu PNG failu, ir pašiem instalēt ārējo moduli (līdzīgi kā PNG Live).

   Acīmredzot izstrādātāji kavējas, gaidot, kad lietotāji pilnībā pārslēgsies uz jaunajiem formātiem. Veselīgs konservatīvisms nekad nenāk par ļaunu, taču mēs tomēr stingri iesakām pakāpeniski pāriet uz PNG, aizstājot vismaz visus esošos GIF formāta lietojumus.

   Vektoru attēlojums Gan JPEG, gan GIF, gan PNG ir rastra formāti, kuru pamatā ir diskrēts (pikseļu vai punktu) attēla attēlojums, savukārt vektoru formāti ir balstīti uz matemātiskām formulām (formu ģeometriskais attēlojums). nodrošina ievērojamas priekšrocības salīdzinājumā ar rastru, it īpaši, ja runa ir par diagrammām, tekstu un industriālo grafiku (un formātu rentabilitāte ir ļoti svarīga internetam).

   Tātad, pirmā priekšrocība ir ievērojami mazāks vektora attēlu izmērs, salīdzinot ar bitkartēm, jo ​​nav aprakstīts katrs atsevišķs attēla pikselis, bet gan visa figūra (piemēram, lai norādītu apli, jānodod 3-4 skaitļi: rādiuss, centra koordinātas un, iespējams, ir līnijas veids vai biezums un tās atribūti). Matemātiskās formulas, kas apraksta vektora attēlojumu, aizņem daudz mazāk vietas nekā atsevišķi pikseļi un to atribūti.

   Vēl viena svarīga vektora attēlojuma priekšrocība ir iespēja gandrīz neierobežoti mērogot attēlu (vai tā detaļas), nezaudējot attēla izšķirtspēju vai skaidrību. Nav jāpieliek pūles, lai pielāgotu vektora attēlojumu noteiktai paletei, platformai, aparatūrai vai dizaina iezīmēm; un saspiešanas shēmas un displeja kvalitātes saskaņošana notiek bez problēmām.

   Tomēr ne katru rastra attēlu var pārvērst vektora formā (piemēram, fotogrāfijas, skenētus attēlus vai rastra zīmējumus ir grūti vektorizēt). Bet ir vienkārši stulbi pārveidot speciāli sagatavotus vektoru zīmējumus (piemēram, līniju mākslu, piktogrammas, tehniskās ilustrācijas, kartes, informācijas grafiku un citus, kas vēsturiski ir vektori) rastra formā publicēšanai internetā, kas mūsdienās notiek visur.

   Problēmas ar vektorgrafikas attēlošanu Pasaules tīmeklis radās tāpēc, ka nebija citas attēlošanas metodes, izņemot rastra, un iebūvētais modulis, kas parādījās failu attēlošanai PDF formātā, nenodrošināja pietiekamu elastību un prasīja visu saturu uzglabāt vienā formā - PDF.

   Lai nodrošinātu iespēju nemanāmi iegult vektorgrafiku tradicionālajā HTML formātā bez papildu programmatūras, W3C standartu komiteja pašlaik izskata divus jaunus vektoru standartus: PGML (Precision Graphics Mark-up Language) un VML (Vector Mark-up Language). ). PGML atbalsta Adobe Systems, IBM, Netscape un Sun Microsystems, un VML atbalsta Microsoft, Hewlett-Packard, Autodesk, Macromedia un Visio. Abi standarti ir balstīti uz XML iezīmēšanas valodas paplašinājumiem, kas tiek reklamēti lietošanai tīmeklī kā HTML pēctece un kurus W3C iesaka turpmākai lietošanai.

   Taču pašlaik neviena no pārlūkprogrammām neatbalsta nekādus vektorgrafikas standartus, lai gan jau ir pieejami papildu moduļi (spraudņi). Viens no populārākajiem veidiem, kā mūsdienās tīmeklī attēlot statiskus vektora attēlus, ir Macromedia SWF (Shockwave Flash) formāts un joprojām nepietiekami novērtētais Xara Flare formāts.

   Uzliesmojums- labs lēmums, kas ļauj iekļaut vektorattēlus, kas ļauj gandrīz neierobežoti palielināt lapas detalizācijas līmeni, savukārt to izmēri ir salīdzināmi ar Shockwave Flash. Tas nenozīmē, ka papildu moduļu izmantošana attēlu skatīšanai ir tik neērta, taču, izmantojot šādus rīkus savās lapās, noteikti brīdiniet lietotāju par to un dodiet viņam iespēju lejupielādēt atbilstošo moduli, pirms viņš dodas uz lapu. kas ietvers šos elementus. Īstermiņā tas, protams, palēninās pārlūkošanas procesu jauni lietotāji , bet pamazām iegūsi arvien vairāk piekritēju, līdz beidzot tiks iekļauti atbilstošie līdzekļi nākamā versija

   Iesācējiem vairs nebūs nepieciešama pārlūkprogramma vai papildu modulis.

   Animācija, interaktivitāte un mijiedarbība Vispārīgi runājot, GIF attēlus var sakārtot kā īpašu kaudzi vienā failā, un iegūto “filmu” (flipbook) var reproducēt, izveidojot vienkāršu rastra animāciju. Gan Netscape, gan Microsoft ir nodrošinājuši atbalstu animētiem GIF attēliem kopš pārlūkprogrammu trešās versijas, tāpēc tagad ir grūti izvairīties no to klātbūtnes tīmeklī. Neskaitāmi GIF animatori, kas ļauj izveidot šādus GIF skursteņus, ir plaši izplatīti (gan komerciāli, gan publiski pieejami)., jo katrs šādas kaudzes “līmenis” ir atsevišķs GIF attēls, tāpēc datoranimācijai tipiski 15 kadri sekundē var radīt neskaitāmus kilobaitus.

   Kombinācijā ar Java vai JavaScript jūs varat izveidot interaktīvu animāciju, kas reaģēs uz lietotāju.

   Tagad apskatīsim citus Web animācijas un interaktīvas lietotāju mijiedarbības risinājumus, un galvenā loma šeit joprojām ir Macromedia, kas jau sen ir ienākusi tirgū ar savām Shockwave un Flash programmām un pastāvīgi pilnveido savus produktus, palielinot to efektivitāti saskaņā ar ar lietotāju un dizaineru vajadzībām.

   Sākotnēji izveidots kā Macromedia Director formāts, Shockwave ir protokolu saime, kuras galvenais mērķis ir radīt interaktīvu un grafisku saturu, kas īpaši izveidots lietošanai internetā. Un Shockwave Flash parasti ir unikāls instruments un viens no visvairāk labākie veidi lai izveidotu animāciju un publicētu to tīmekļa lapā. Shockwave Flash rada ļoti mazus failus (jo tas galvenokārt izmanto vektora attēlojuma formātu), un, salīdzinot ar citiem formātiem, tas ir visērtākais no sagatavošanas viedokļa.

   Publicējot šādu animāciju savās lapās, neaizmirstiet par to informēt lietotāju, lai viņš iepriekš varētu uzkrāt papildu moduli un sagatavoties nogurdinošajai lejupielādes gaidīšanai. Tomēr jaunākās versijas gan Netscape Navigator, gan Internet Explorer pat pamata pakotnē ir Flash animāciju skatīšanās moduļi. Netscape ir apstiprinājis, ka turpmākajās Navigator versijās būs šis Flash atbalsts pat koda līmenī.

   Galīgais lēmums ir jūsu

   Tātad mainās attieksme pret Web satura prezentāciju, parādās jauni datu formāti un tos atbalstoši izstrādes rīki. Tomēr vecāki formāti (GIF un JPEG grafikas attēlošanai) joprojām ir diezgan populāri. Tos atbalsta gandrīz visas pārlūkprogrammas, un lielākajai daļai izstrādātāju ir liela pieredze darbā ar tiem. Ir svarīgi izmantot konkrētajam mērķim pareizo formātu, lai nodrošinātu līdzsvaru starp attēla kvalitāti un faila izmēriem. Piemēram, viens attēls GIF formātā var aizņemt vairāk vietas un iegūt zemākas kvalitātes rezultātu nekā JPEG formātā, savukārt citam tas būs pretējs.

   Tomēr, attēlojot rastra attēlus, par vēlamo formātu kļūst PNG, un, ja jūs ejat vēl tālāk un mēģināt izmantot vektora attēlu, tad Macromedia Shockwave Flash formāts šodien ir jūsu rīcībā.

   SWF (Shockwave Flash) formāts nav plaši izmantots, bet gan Macromedia Flash programmas iekšējais vektora formāts (sk. Makromediju nodarbības Flash" CD-ROM), tāpēc, lai iegūtu savu attēlu vai animāciju, jums būs jāiegādājas atbilstoša multivides pakotne no Macromedia, un lietotājam būs jāinstalē papildu modulis, lai vizualizētu rezultātu.

   Tādējādi, lai vienkārši ievietotu vektora attēlu savā tīmekļa lapā, jums būs jāpārvar vairākas neērtības.

   Tomēr citi vektoru formāti ir ceļā un drīz kļūs par standartu.

   ComputerPress 5"1999 Attēla pievienošana notiek divos posmos: vispirms tiek sagatavots grafiskais fails vajadzīgajā formātā .

   un vēlamo izmēru, tad fails tiek parādīts lapā, izmantojot elementu

   Failu formāti

   Tīmekļa grafikā plaši tiek izmantoti divi formāti: PNG un JPEG. Viņu daudzfunkcionalitāte, daudzpusība, mazs avota failu apjoms ar pietiekamu kvalitāti vietnei, tiem labi kalpoja, faktiski definējot tos kā tīmekļa attēlu standartu. Papildus tiem vietnes izmanto GIF un SVG formātus.

   PNG-8 formātā PNG-8 (Portable Network Graphics, Portable Network Graphics) ir bezmaksas formāts, kas izveidots, lai aizstātu GIF, kurā uz ilgu laiku

   tika izmantoti patentēti algoritmi.

   • Īpatnības
   • Attēlā tiek izmantota 8 bitu palete (256 krāsas), tāpēc tā nosaukumā ieguva astoņu numuru. Šajā gadījumā jūs varat izvēlēties, cik krāsas tiks saglabātas failā - no 2 līdz 256.

   Atšķirībā no GIF, tas nerāda animāciju.

   Piemērošanas joma

   PNG-24 formātā

   

   tika izmantoti patentēti algoritmi.

   • PNG-24 ir formāts, kas līdzīgs PNG-8, bet izmanto 24 bitu krāsu paleti, tāpat kā JPEG formātā, tas saglabā fotogrāfiju spilgtumu un krāsu toņus. Tāpat kā GIF un PNG-8 formāts, saglabā attēla detaļas, piemēram, līniju zīmējumus, logotipus vai ilustrācijas.
   • Vienam failam tiek izmantoti aptuveni 16,7 miljoni krāsu, tāpēc šis formāts tiek izmantots pilnkrāsu attēliem.
   • Sakarā ar to, ka izmantotais saspiešanas algoritms saglabā visas attēla krāsas un pikseļus nemainīgus, salīdzinot ar citiem formātiem, PNG-24 ir lielākais grafiskā faila gala apjoms.

   Atšķirībā no GIF, tas nerāda animāciju.

   Fotogrāfijas, zīmējumi ar caurspīdīgiem un caurspīdīgiem laukumiem, zīmējumi ar daudzām krāsām un skaidrām attēlu malām.

   JPEG formātā

   JPEG (Joint Photography Experts Group, apvienota ekspertu fotogrāfu grupa) ir populārs grafisko failu formāts, ko plaši izmanto vietņu izveidē un fotogrāfiju glabāšanā. JPEG atbalsta 24 bitu krāsas un saglabā fotoattēlu spilgtumu un krāsu toņus nemainīgus. Šo formātu sauc par zudumu saspiešanu, jo JPEG algoritms selektīvi noraida datus. Saspiešanas metode var izkropļot attēlus, īpaši tos, kuros ir teksts, sīkas detaļas vai cietas malas. JPEG formāts neatbalsta caurspīdīgumu. Saglabājot fotoattēlu šajā formātā, caurspīdīgie pikseļi tiek aizpildīti ar norādīto krāsu.

   

   tika izmantoti patentēti algoritmi.

   • Krāsu skaits attēlā ir aptuveni 16,7 miljoni, kas ir pilnīgi pietiekami, lai saglabātu fotogrāfiskā attēla kvalitāti.
   • Galvenā formāta īpašība ir “kvalitāte”, kas ļauj kontrolēt gala faila lielumu. Kvalitāte tiek mērīta no 0 līdz 100, jo lielāka vērtība, jo labāks attēls, taču palielinās arī faila izmērs.
   • Tā atbalsta tā saukto progresīvo JPEG tehnoloģiju, kurā zemas izšķirtspējas attēla versija parādās skatīšanās logā, pirms pats attēls ir pilnībā ielādēts.

   Atšķirībā no GIF, tas nerāda animāciju.

   Izmanto galvenokārt fotogrāfijām. Nav īpaši piemērots zīmējumiem, kuros ir caurspīdīgi laukumi, sīkas detaļas vai teksts.

   GIF formātā

   GIF (Graphics Interchange Format, attēlu apmaiņas formāts) ir grafiskā faila formāts, ko plaši izmanto animētu attēlu veidošanā. GIF izmanto 8 bitu krāsas un efektīvi saspiež vienkrāsu apgabalus, vienlaikus saglabājot attēla detaļas.

   

   tika izmantoti patentēti algoritmi.

   • Krāsu skaits attēlā var būt no 2 līdz 256, taču tās var būt jebkuras krāsas no 24 bitu paletes. GIF failā var būt caurspīdīgi apgabali. Ja tiek izmantota cita fona krāsa, nevis balta, tā tiks rādīta caur caurumiem attēlā.
   • Atbalsta attēlu maiņu pa kadram, kas padara formātu populāru vienkāršu animāciju veidošanā.
   • Izmanto bezzudumu saspiešanas metodi

   Atšķirībā no GIF, tas nerāda animāciju.

   Teksts, logotipi, ilustrācijas ar cietām malām, animētas grafikas, attēli ar caurspīdīgiem laukumiem, baneri.

   SVG formāts

   SVG (Scalable Vector Graphics, scalable vector graphics) ir vektoru formāts, kurā attēls sastāv nevis no pikseļiem, bet gan no objektiem un līknēm. Šī iemesla dēļ tas nav piemērots rastra fotogrāfijām, kas sastāv no punktiem, bet ir lieliski piemērotas ilustrācijām ar atšķirīgām kontūrām.

   tika izmantoti patentēti algoritmi.

   • Attēlus SVG formātā var mērogot, cik vien vēlaties, nezaudējot attēla kvalitāti.
   • Faila lielums parasti ir mazs.
   • Atbalsta animāciju un interaktivitāti.

   Atšķirībā no GIF, tas nerāda animāciju.

   Teksts, logotipi, ilustrācijas ar skaidrām malām.

   Attēla pievienošana

   Lai tīmekļa lapai pievienotu attēlu, izmantojiet elementu , kura atribūts src norāda grafiskā faila adresi. Vispārējā attēla pievienošanas sintakse ir šāda.

   " alt="<альтернативный текст>!}">

   Ir nepieciešami gan src, gan alt atribūti.

   Atribūts src norāda ceļu uz grafiskais fails, varat izmantot absolūtu vai relatīvu adresi, lai to norādītu. Tālāk apskatīsim dažus dažādos veidos, kā noteikt ceļu uz attēlu, lai to ievietotu tīmekļa lapā. Kā piemēru ņemsim failu ar nosaukumu target.png, kas tiek saglabāts vietnes saknes attēlu mapē.

   http://example.ru/images/target.png
   Ja adrese sākas ar protokolu (http:// vai https://), tad mēs runājam par absolūtu adresi. Attēls vienmēr tiks lejupielādēts no norādītās interneta adreses, pat saglabājot tīmekļa lapu lokālajā datorā.

   //example.ru/images/target.png
   Šī ir attēla absolūtā adrese, nenorādot protokolu. Pārlūkprogramma automātiski atlasīs vajadzīgo protokolu, kurā vietne darbojas (http:// vai https://). Lūdzu, ņemiet vērā, ka šāda veida adreses nedarbojas vietējās tīmekļa lapās, bet tikai internetā, ko kontrolē tīmekļa serveris.

   /images/target.png
   Ja adreses sākumā ir slīpsvītra (/), tas nozīmē, ka attēlu mape atrodas vietnes saknē. Viena mape var būt ligzdota citā, tāpēc ceļš var kļūt lielāks. Piemēram, /assets/images/target.png nozīmē, ka aktīvu mape atrodas vietnes saknē, tajā ir attēlu mape, kurā atrodas fails target.png.

   ../images/target.png
   Divi punkti ar slīpsvītru adreses sākumā (../) norāda, ka mape ar attēlu atrodas vienu līmeni augstāk mapes struktūrā attiecībā pret HTML dokumentu. Attēlā 1. attēlā ir parādīts fails source.html, kurā vēlaties ievietot target.png attēlu.

   

   Rīsi. 1. Failu izvietošana

   images/target.png
   Mapes nosaukums bez punktiem adreses sākumā norāda, ka HTML dokuments un mape ar attēlu atrodas vienā līmenī (2. att.).

   

   Rīsi. 2. Failu izvietošana

   target.png
   Viens faila nosaukums norāda, ka attēls un tīmekļa lapa atrodas vienā vietā (3. attēls).

   

   Rīsi. 3. Failu izvietošana

   1. piemērā parādīti vairāki veidi, kā tīmekļa lapai pievienot attēlu.

   1. piemērs: attēlu pievienošana

   

   

   

   

   Alternatīvs teksts

   Alternatīvais teksts ir svarīga attēlu daļa, un tas ir paredzēts cilvēkiem ar vāju redzi, kuri nevar redzēt attēlus un saņemt informāciju no vietnes ar dzirdes palīdzību. Īpaši ekrāna lasītāji nolasa tekstu no vietnes, un attēlu vietā tie izrunā tekstu, kas rakstīts ar alt atribūtu. Parastās pārlūkprogrammās alternatīvais saturs tiek rādīts tikai tad, ja tīmekļa lapā kāda iemesla dēļ netiek rādīti attēli.

   Atribūtam alt ir jāapraksta attēla saturs, un, ja attēls pilda dekoratīvu funkciju un tam nav jēgpilnas nozīmes, atstājiet alt tukšu (2. piemērs).

   2. piemērs: Alt

   

   

   Ja attēliem ir nepieciešams redzams rīka padoms, izmantojiet globālā nosaukuma atribūtu, ko var pievienot jebkuram elementam, ne tikai attēliem. Novietojot kursoru virs attēla, tiks parādīts teksts, kas satur nosaukuma atribūta vērtību (3. piemērs).

   3. piemērs: nosaukuma izmantošana

   

   Rīka padoma veids ir atkarīgs no konkrētās pārlūkprogrammas, un to nevar mainīt. Attēlā 2. attēlā parādīts rīka padoms pārlūkprogrammā Firefox.

   

   Rīsi. 2. Rīka padoma veids

   Attēla izmēra maiņa

   Lai mainītu elementa attēla izmēru Tiek nodrošināti atribūti platums (platums) un augstums (augstums). Vērtība ir pikseļi vai procenti. 4. piemērā parādīta šo atribūtu pievienošana .

   Piemērs 4. Zīmējuma izmēri

   

   
   

   Platuma un augstuma atribūti nav obligāti pēc attēla ielādes, pārlūkprogramma automātiski iestatīs tā sākotnējo izmēru. Šie atribūti galvenokārt tiek izmantoti šādiem mērķiem:

   • rezervēt vietu attēlam;
   • samazināt lielu fotoattēlu izmēru;
   • Uzlabojiet attēla kvalitāti Retina displejiem.

   Ja attēla izmēri ir skaidri norādīti, pārlūkprogramma tos izmanto, lai dokumenta ielādes laikā parādītu tukšu laukumu, kas atbilst attēlam. Pretējā gadījumā pārlūkprogramma gaida attēla pilnīgu ielādi, pēc tam maina attēla platumu un augstumu. Šajā gadījumā tekstu var pārformatēt, jo attēla sākotnējais izmērs nav zināms un tas automātiski tiek iestatīts mazs.

   Attēla platumu un augstumu var mainīt gan mazāku, gan lielāku. Pārlūks neatkarīgi noņems papildu pikseļus vai, gluži pretēji, pievienos trūkstošos, lai iegūtu atbilstoša izmēra attēlu. Iegūtā attēla kvalitāte lielā mērā ir atkarīga no tā satura jebkurā gadījumā, jāatceras, ka bezgalīgi palielināt attēlu, nezaudējot detaļas, ir iespējams tikai kino.

   Tīklenes displejiem ir augsts pikseļu blīvums un attēla detaļas, tāpēc parastie attēli izskatās nedaudz izplūduši. Lai uzlabotu to kvalitāti, attēli tiek dubultoti. Piemēram, ja tīmekļa lapai ir nepieciešams fotoattēls ar 400 pikseļu platumu, tad mēs uzņemam fotoattēlu ar 800 pikseļu platumu, bet platuma atribūta vērtību atstājam uz 400 pikseļiem.

   Platuma un augstuma atribūtiem nav jābūt kopā. Ja kāds no šiem atribūtiem nav norādīts, pārlūkprogramma automātiski aizstās nepieciešamo vērtību, pamatojoties uz attēla proporcijām.

   

   Sakarā ar to, ka mēs neatkarīgi iestatām attēla platumu un augstumu, mēs varam apzināti izkropļot tā proporcijas, izstiepjot attēlu vertikāli vai horizontāli.

   

   Papildus pikseļiem kā izmērus ir atļauts izmantot procentuālo apzīmējumu. Šajā gadījumā platums tiek iestatīts attiecībā pret vecāku elementu.

   

   Šādos gadījumos ir grūtības ar augstumu, jo attēla augstums procentos tiek skaitīts tikai tad, ja ir skaidri noteikts tā vecāka augstums. Ja vecākelementa augstums nekādā veidā nav norādīts, ieraksts, piemēram, height="100%", tiek ignorēts.

   Ir simtiem grafisko formātu, taču tikai dažus no tiem atbalsta tīmekļa pārlūkprogrammas. Šajā rakstā mēs aprakstīsim dažādus grafisko failu formātus, kas ir pieejami tīmekļa dizaineriem, un to lietošanas laiku.

   Grafikas failu formāti, ko atbalsta populārākās tīmekļa pārlūkprogrammas, ir: Graphic Interchange Format (GIF), Apvienotā fotogrāfiju ekspertu grupa (JPEG), Portable Network Graphics (PNG) un vektorgrafika. Dažas grafisko failu īpašības:

   • Caurspīdīgums — šis īpašums ļauj attēlam būt dažādās caurspīdīguma pakāpēs no cieta stāvokļa līdz pilnīgi caurspīdīgam.
   • Saspiešana — šis īpašums ļauj attēlu saglabāt daudz mazākā failā, izmantojot matemātiskos algoritmus, lai pikseļu grupu uzskatītu par vienu elementu.
   • Interlace — ļauj vispirms ielādēt attēlu nepāra rindās un pēc tam pāra līnijās. Tas ļauj apmeklētājam ātrāk redzēt attēlu.
   • Animācija – rada kustības izskatu, izmantojot secīgu kadru sēriju. Animētam GIF nav nepieciešams pārlūkprogrammas spraudnis, un tas var darboties gandrīz visās ierīcēs.
   • Progresīvā ielāde — līdzīgi kā aušanai, jo sākotnēji tiek ielādēta tikai daļa attēla, bet ne pamīšus.

   GIF tika dibināts 1980. gadā, un tīmekļa dizaineri to pieņēma 90. gadu sākumā kā galveno elementu. grafiskais formāts tīmekļa lapām. GIF failos tiek izmantots saspiešanas algoritms, kas samazina faila lielumu ātrai ielādei. GIF ir ierobežots līdz 256 krāsām (8 bitu), caurspīdīguma un pīšanas atbalsts. Izmantojot šo formātu, ir iespējams izveidot arī animētu grafiku. Visas pārlūkprogrammas var bez problēmām parādīt GIF failus.

   GIF priekšrocības:

   • Visplašāk atbalstītais grafikas formāts
   • Šādā formātā shēmas izskatās labāk
   • Pārredzamības atbalsts

   Faili ir saspiesti, bet atbalsta īstās krāsas (24 bitu) un ir vēlamais formāts fotogrāfijām, kuru kvalitāte ir galvenā problēma. JPEG atbalsta progresīvo formātu, kas ļauj gandrīz uzreiz redzēt attēlu, kura kvalitāte uzlabosies, kad lejupielāde būs pabeigta.

   Atšķirībā no GIF failiem, tīmekļa dizaineri var kontrolēt saspiesti faili JPEG, kas nodrošina dažādu līmeņu attēla kvalitāti un failu izmērus.

   JPEG priekšrocības:

   • Lielāka saspiešana nozīmē ātrāku ielādes ātrumu.
   • Izgatavo izcilu kvalitāti fotogrāfijām un sarežģītiem zīmējumiem.
   • 24 bitu krāsu atbalsts.

   PNG ir salīdzinoši nesens formāts, kas tika ieviests kā alternatīva GIF failiem. PNG atbalsta līdz pat 24 bitu krāsas, caurspīdīgumu, pīšanos un var saturēt īsas teksta apraksts attēlu, kas tiek izmantots meklētājprogrammās.

   PNG priekšrocības:

   • Pārvar 8 bitu krāsu ierobežojumus GIF formātā
   • Ļauj meklētājprogrammām sniegt attēlu teksta aprakstu
   • Atbalsta caurspīdīgumu
   • Shēmas izskatās labāk nekā JPEG formātā

   Vektorgrafika

   Lielākā daļa tīmekļa grafiku ir rastra attēli vai zīmējumi, kas sastāv no krāsainu pikseļu režģa. Ilustrācijas jāveido vektorgrafikā, kas sastāv no katra elementa matemātiska apraksta, kas veido attēla līniju formas un krāsas. Vektorgrafika tiek veidota, izmantojot tādas programmas kā Adobe Illustrator vai CorelDRAW. Vektorgrafika ir jāpārveido jebkurā GIF, JPEG vai PNG formātā, lai to izmantotu tīmekļa lapās.

   Kuru formātu vajadzētu izmantot?

   Tīmekļa dizainers lielākajai daļai lietojumprogrammu var izvēlēties GIF vai JPEG formātu. Bet tā kā GIF failu izmērs parasti ir mazs salīdzinājumā ar izmēru JPEG fails, lielākā daļa tīmekļa dizaineru izmantos GIF formātu foniem, kastēm, rāmjiem un citiem grafiskiem elementiem, kas lieliski izskatās ar 8 bitu krāsām.

   Lielākā daļa dizaineru fotogrāfijām un ilustrācijām izvēlēsies JPEG formātu, kur saspiešana neapdraud attēla vizuālo kvalitāti.