Najbežnejšie formáty obrázkov na webových stránkach. Grafika na webovej stránke v HTML. Umiestnenie grafického obrázka zo súboru

číslovaný zoznam veľmi podobný označenému. Jediný rozdiel je v tom, že v číslovanom zozname sú pred každú položku namiesto grafických značiek automaticky umiestnené poradové čísla alebo písmená.

Číslovaný zoznam je špecifikovaný pomocou značiek. Ako v odrážkový zoznam, každá položka je označená štítkom

kľúčové slovo PÁSKA.

TAPE=1 - Štandardné číslovanie (1,2,3,4,5, ...)

TAPE=A – veľké písmená (A, B, C, D, ...)

TAPE=a – Naliehavé písmená (a, b, c, d, ...)

TAPE=I - rímske číslice (I, II, III, IV, ...)

TAPE=i – malé rímske číslice (i, ii, iii, iv, ...)

Zoznamy definícií vyzerajú trochu inak ako iné typy zoznamov. V tomto prípade sa na popis každej položky zoznamu používajú dve značky a nie jedna značka

1. . Tag
   súpravy samostatný prvok, teda pojem, ktorý sa definuje, a značka
   - zvyšok informácií, ktoré sa zobrazia na nasledujúcom riadku. Druhý riadok informácií je tzv definícia. Zoznam definícií sa špecifikuje rovnakým spôsobom ako ostatné zoznamy. Jediný rozdiel je v tom, že každý prvok vyžaduje dve značky.

   Jednou zo skvelých vecí na zoznamoch je, že môžu byť vnorené do seba. Vkladanie zoznamu do zoznamu sa vykonáva rovnakým spôsobom ako jednoduché vytváranie zoznamu. Neexistujú žiadne špeciálne HTML tagy. Aby ste predišli zmätku prehliadača, uistite sa, že ste každý interný zoznam zatvorili značkou. Môžete dokonca investovať jeden do druhého odlišné typy zoznamy.

   Prehrajte si všetky vyššie uvedené zoznamy

   Zoznamy majú jednu nevýhodu – sú jednorozmerné. To znamená, že informácie môžete umiestniť len na po sebe idúce riadky. Tabuľky na druhej strane umožňujú usporiadať údaje nielen do riadkov, ale aj do stĺpcov.

   Na definovanie tabuliek sa používa množstvo značiek. značky

   a orámovať celú tabuľku a množstvo ďalších značiek určuje, ako budú informácie zobrazené. Tabuľka ukazuje Celý popis tabuľkové značky.

   
   
   

   HTML značky na vytváranie tabuliek:

   Popis tagov

   a Tieto štítky pokrývajú stôl. Tag

   informuje prehliadače, že nasleduje popis tabuľky. Ak chcete, aby bola mriežka oddeľujúca riadky a stĺpce viditeľná, pridajte kľúčové slovo BORDER.

   zobrazené ako hlavička. Na nastavenie názvu môžete použiť aj značky. a.

   Značky zobrazujú text ako nadpisy riadkov alebo stĺpcov trochu väčším tučným písmom.

   a Tagy definujú každý riadok tabuľky. Tag nepovinné, ale váš HTML kód bude úplnejší a zrozumiteľnejší.

   Táto dvojica značiek oddeľuje text každej bunky tabuľky.

   Vytvorte súbor, v ktorom vytvoríte tabuľku s piatimi riadkami a piatimi stĺpcami.

   Existuje množstvo značiek, ktoré umožňujú nastaviť farby pozadia a mriežky tabuľky. V prvom prípade sa do tagu vloží kľúčové slovo BGCOLOR

   a Text označený týmito značkami,

   a
   a

   nasledujúce obrázky:

   Okrem kľúčového slova BGCOLOR existujú aj iné spôsoby ovládania farby:

   BORDERCOLOR Zmena farby mriežky tabuľky

   BORDERCOLORDARK/ Používa sa na zmenu mriežky z

   BORDERCOLORLIGHT pre dodatočný trojrozmerný efekt

   Zmeňte farbu mriežky tabuľky pomocou 3D efektu.

   Lekcia 12-13. Použitie grafiky

   Obrázky a grafika sú pre WWW veľmi dôležité. Toto je jediný internetový nástroj, ktorý vám umožňuje prezerať obrázky a text na obrazovke súčasne.

   Ak chcete umiestniť obrázok na webovú stránku, musíte vedieť, ako použiť značku . Zadajte značku a kľúčové slovo SRC= na určenie, ktorá grafika sa má načítať.

   

   Pri zadávaní tejto značky nezabudnite, že súbor musí byť v rovnakom priečinku ako váš súbor HTML.

   Grafika a premávka

   Požiadavky na krásu a výraznosť dizajnu webových stránok sú v neustálom rozpore s technickými možnosťami moderného webhostingu. Dizajnér stránky sa preto musí stať prostredníkom medzi dizajnérom a používateľom a prísne udržiavať rovnováhu medzi vizuálnou príťažlivosťou a primeranou rýchlosťou poskytovania informácií na webe. Na úspešné vyriešenie tohto problému potrebujete poznať všetky grafické formáty používané na internete, pochopiť rozdiely medzi nimi, oblasti ich použitia a spôsoby použitia.

   Aby ste si poradili s veľkým počtom formátov a protokolov prijatých na internete a vytvorili si vlastnú stránku, musíte si vybrať, čo je pre vaše konkrétne účely najvhodnejšie. Niektoré formáty môžu byť špecifické len pre jeden prehliadač, zatiaľ čo iné budú vyžadovať špeciálny doplnok. Z celej palety formátov sme vybrali len tie, ktoré najčastejšie používajú autori obľúbených stránok a akceptujú ich používatelia.

   GIF a JPEG sú dva z najpopulárnejších obrazových formátov a už dlho sú de facto štandardmi pre použitie na WWW. Oba sú celkom univerzálne, číta ich väčšina prehliadačov a nevyžadujú špeciálne softvér(alebo doplnkové moduly). GIF a JPEG sú rastrové obrazové formáty, ktoré pri zobrazovaní takýchto obrázkov na obrazovke určujú pevný formát (rozlíšenie). Keď sa pokúsite zmeniť mierku (poskytované v niektorých prehliadačoch), bitmapové (pixelové) obrázky výrazne stratia kvalitu. Pri 8-bitovom (256-farebnom) formáte GIF je navyše vážnym problémom výber farebnej palety.

   Formáty vektorovej grafiky sú oveľa atraktívnejšie pre použitie na webe. Na rozdiel od bitmapy je vektorová grafika založená na matematickom (geometrickom) znázornení údajov. Takéto obrázky sú oveľa menšie z hľadiska ukladania / prenosu, sú ľahko škálovateľné a prakticky nestrácajú kvalitu pri akýchkoľvek transformáciách. Bohužiaľ, vektorové formáty sú na internete stále málo používané, ale štandardy už boli vytvorené a mali by byť zaujímavé pre dizajnérov.

   Relatívne nedávno bolo navrhnutých niekoľko vektorových štandardov a formáty PGML a VML v súčasnosti zvažuje World Wide Web Consortium (W3C). Spoločnosť Macromedia, ktorá propaguje VML, však už dávno otvorila svoj vektorový formát. Záblesk rázovej vlnyďalším vývojárom a implementovali ďalšie moduly na prezeranie grafiky v tomto formáte pre populárne prehliadače.

   Nové nástroje však nemusia byť nevyhnutne najlepšie pre všetky aplikácie. Najbežnejšími obrázkami publikovanými na internete sú stále digitálne fotografie, kresby a naskenované obrázky, ktoré sú veľmi prácne a ťažko sa dajú previesť do vektorového formátu.

   Preto výber formátu v konečnom dôsledku závisí od vašich úloh a od toho, ktoré obrázky sú pre vaše potreby vhodnejšie. cieľové publikum, je to na tebe.

   GIF - formát pre dizajn

   CompuServe pôvodne zamýšľal svoj formát GIF pre interaktívne aplikácie v postihnutíštandardná grafika na osobnom počítači. Pôvodne to bol 4-bitový a neskôr 8-bitový farebne mapovaný bitmapový formát, ktorý podporoval maximálne 256 farieb. Jednou z významných výhod formátu je, že obrázky je možné indexovať na konkrétnu paletu (súbor farieb), pričom obrázky JPEG nie je možné „prepojiť“ s paletou a ich „správne“ zobrazenie nie je vždy možné. Táto vlastnosť je dôležitá najmä pre tých vývojárov, ktorí používajú indexovanie palety na optimalizáciu vykresľovania obrazu pre všetky platformy bez výnimky (či už je to PC, Mac, Web-TV alebo iné), bez ohľadu na to, s akou farebnou hĺbkou ten či onen systém pracuje. Túto všestrannosť je možné dosiahnuť s obmedzenou paletou 216 farieb, ktorá zahŕňa všetky bežné farby používané ako vo Windows, tak napríklad aj v MacOS. Návrh stránky v univerzálnej palete zaručuje konzistentné, multiplatformové a hardvérovo nezávislé zobrazenie. Okrem toho formát GIF používa schému bezstratovej kompresie (s jednoduchým algoritmom kódovania opakovania: sekvencia bajtov rovnakej farby je nahradená slovom dvoch bajtov, z ktorých jeden obsahuje vzor výplne a druhý určuje počet opakovaní), takže grafické údaje v tomto formáte nestratia informácie v procese kompresie a obnovy.

   Avšak práve kvôli týmto zabudovaným obmedzeniam farieb je možné formát GIF použiť len pre tie obrázky, ktoré majú obmedzený počet farieb, ako sú čiernobiele schémy alebo tie, ktoré obsahujú veľké plochy jednej farby, ako sú kreslené rámy alebo digitálne kresby s jednofarebnou výplňou. Samozrejme, môžete si ľubovoľný obrázok uložiť vo formáte GIF aplikáciou takzvaného vyhladenia farebných tónov (dithering) a získať tak dostatočne slušnú kvalitu, no v tomto prípade riskujete, že po aplikácii „narazíte“ na výrazné zväčšenie veľkosti súboru. vyššie popísané opakovania kompresie pamäte (v degenerovanom prípade, keď v obraze nie sú žiadne priľahlé opakovania, získate zväčšenie súboru presne dvakrát v porovnaní s nekomprimovaným originálom).

   Hlavnými výhodami formátu GIF sú teda použitie bezstratovej kompresie a ekonomické zachovanie jednoliatych farebných plôch s jasným okrajom a striktnými farebnými prechodmi. Formát JPEG sa od opísaného líši tým, že v závislosti od úrovne kompresie sa tam zničia plné plochy a vyhladia sa alebo vyblednú ostré farebné prechody.

   Hlavné kritérium pre výber formátu GIF: ak ste sami nakreslili obrázok v grafickom balíku, ako je Photoshop alebo Painter, ktorý má veľké plochy rovnakej farby, alebo spracoval existujúci obrázok a chcete zachovať vysoký kontrast (potrebné napr. pri zobrazovaní textu), potom ho v tomto formáte uložte (najmä pri čiernobielych alebo farebne nekvalitných kresbách).

   Pre fotografie, video snímky alebo iné plnofarebné obrázky využívajúce plynulé farebné prechody (prechody) použite formát jpeg.

   Je tiež dôležité mať na pamäti, že ak sa pokúšate uložiť obrázky GIF so súvislými tónmi, pravdepodobne budete musieť zahodiť toľko informácií v procese prípravy obrázka (pri prevode na pevnú paletu) a kompresiu GIF metóda bude natoľko neefektívna, že prídete aj o finančnú stratu (tak z hľadiska nákladov na prácu, ako aj veľkosti súboru).

   Formát GIF okrem iného poskytuje takzvaný prekladaný vzhľad (Interlaced), ktorý pomáha užívateľom s pomalými kanálmi hneď na začiatku príjmu vyhodnotiť obsah obrazu (efekt je podobný postupnému kresleniu neostrého obrázok) a čas potrebný na jeho úplné odoslanie, a v dôsledku toho akceptovať rozhodnutie, či v odbere pokračovať alebo je lepšie ho odmietnuť. Na rozdiel od progresívneho formátu JPEG je však efekt skôr psychologický ako skutočný (pozri obr.).

   Nezabúdajte ani na jednu dôležitú výhodu formátu GIF, od ktorej sa v niektorých prípadoch ani so všetkými jej nedostatkami nedá vyhnúť, a to je podpora priehľadnosti (rozšírenie GIF89a), ktorá umožňuje zobraziť siluetu s neobdĺžnikovými obrysmi. existujúce pozadie. Priehľadnosť vo formáte GIF je implementovaná primitívne - jedna farba (zvyčajne pozadie) je priradená ako transparentná. Táto výhoda sa často využíva pri vytváraní tlačidiel a ikon v dizajne stránky (JPEG neponúka žiadnu podporu priehľadnosti).

   Na záver môžeme povedať nasledovné: GIF - najlepšia voľba na dosiahnutie efektívneho kompromisu medzi existujúcim hardvérom a softvérom a schopnosť indexovať 8-bitový obrázok GIF až do 216 univerzálnych farieb je nevyhnutná, keď sú vaše obrázky určené na zobrazenie vo viacerých prehliadačoch a neznámych platformách.

   JPEG - formát pre fotografie a video snímky

   Formát JPEG dostal svoj názov podľa skratky výboru Joint Photographic Experts Group (Joint Committee of Photographic Experts), ktorý vytvoril tento štandard koncom 80. a začiatkom 90. rokov. Formát JPEG je založený na stratovom kompresnom algoritme (diskrétna kosínusová transformácia), pomocou ktorého je váš obrázok rozdelený na oblasti (zvyčajne štvorce 8x8 pixelov), v rámci ktorých je rozloženie farieb nahradené matematickou funkciou a iba koeficienty Táto funkcia sa uloží, čo vám umožní obnoviť jej vzhľad. Prirodzene, zaznamenáte určitú stratu kvality (v závislosti od zložitosť funkcie slúži na nahradenie obrazu) a po obnovení už nezískate skutočný obraz, ale jeho matematickú „náhradu“. V závislosti od kvality vášho originálu a stupňa kompresie však môže byť strata kvality pre diváka úplne neviditeľná. Ale hlavnou výhodou JPEG oproti GIF je, že zatiaľ čo GIF je len 8-bitový (256 farieb), JPEG je 24-bitový a dokáže zobraziť až 16,7 milióna farieb.

   Z tohto dôvodu plnofarebný JPEG prirodzene reprodukuje oveľa viac video informácií ako GIF. Tento formát je najvhodnejší pre obrázky v reálnom živote – naskenované obrázky alebo digitálne fotografie, ako aj digitalizované video snímky alebo renderované 3D počítačové grafické scény.

   Ďalšou výhodou JPEG je, že na rozdiel od GIF umožňuje nastaviť mieru kompresie aplikovanej na pôvodný obrázok, čo umožňuje zachovať potrebnú rovnováhu medzi veľkosťou a kvalitou.

   Kompresné pomery sa pre JPEG značne líšia v závislosti od použitého programu na úpravu obrázkov, ale webové stránky zvyčajne používajú pomery 10:1 alebo 20:1 (vyjadrené ako pomer objemu k pôvodnému obrázku), ktoré zvyčajne poskytujú prijateľnú kvalitu. Napriek tomu je možné komprimovať obraz až do extrémnych hodnôt 100:1 (samozrejme s výraznou stratou kvality).

   Takže pri práci s fotografiou vo formáte JPEG máte možnosť uložiť 24-bitový obrázok so 16,7 miliónmi farieb a napriek strate kvality pri kompresii sa stále zhoduje s originálom oveľa viac ako 256-farebný GIF. výkon. V tomto prípade nevyhnutná strata kvality veľmi závisí od veľkosti, kvality a typu pôvodného obrazu.

   Okrem toho vám JPEG umožňuje definovať takzvané progresívne zobrazenie, to znamená, keď sa pri načítaní na obrazovke okamžite objaví „hrubé“ zobrazenie obrazu, ktoré sa s pribúdajúcimi informáciami postupne zlepšuje (pri Zároveň môžete získať potrebnú predstavu o podstate podávaného materiálu ešte pred dokončením sťahovania a prerušiť proces v ktorejkoľvek fáze, čo výrazne šetrí čas pri prehliadaní obsahu siete).

   Tieto nástroje môžete použiť ľubovoľne a takýto postupný prejav môže byť dobrou pomocou v boji proti preťaženiu kanálov. Jediným problémom progresívneho JPEG (na rozdiel od prekladaného GIF) je, že staršie prehliadače ho nemusia podporovať.

   PNG - univerzálna rastrová novinka

   Ďalšia generácia rastrových formátov, PNG, prevzala tie najlepšie vlastnosti JPEG aj GIF a pridala svoj vlastný jedinečný prístup k prezentácii obrázkov, ktorý umožňuje vloženie do jedného súboru. rôzne verzie rovnaký obrázok pre nízke, stredné a vysoké rozlíšenie.

   Formát PNG (Portable Network Graphics) je relatívne nový rastrový grafický formát, ktorý ako štandard schválilo konzorcium W3C a postupne by mal nahradiť oba „zastarané“ formáty: GIF aj JPEG. PNG ponúka indexovanie farieb (až 256 farieb), podporu pre 24- a 48-bitové farby (True-Color) a prácu s kanálom priehľadnosti (alfa kanál), okrem toho je oveľa efektívnejšie ako tradičné ukladanie bitmapy. formátov.

   Kompresný algoritmus pre plnofarebný obrázok svojou kvalitou prevyšuje JPEG a s podporou obmedzenej indexovanej palety (až 256 farieb) nový formát vykonáva bezstratovú kompresiu o 10 – 30 % lepšie ako formát implementovaný vo formáte GIF, ktorý robí ho optimálnym pre použitie v každom prípade. Žiaľ, nový formát neumožňuje obetovať kvalitu obrazu výmenou za vyšší kompresný pomer ako vo formáte JPEG.

   Podpora priehľadnosti PNG je na rozdiel od GIF plnohodnotná, to znamená, že môžete vytvárať priesvitné obrázky alebo okraje, takže problém „čistých“ okrajov, ktorý je tak ťažké vyriešiť pri použití priehľadnosti v súbore GIF, je tu ľahko prekonaný. .

   Napriek všetkým vylepšeniam, ktoré ponúka PNG, sa však nový formát spustí až vtedy, keď ho použijú dizajnéri webových stránok a tvorcovia softvéru na vykresľovanie obrázkov v novom formáte a na ich prípravu na publikovanie. Medzitým je dosť ťažké nájsť obrázky PNG kdekoľvek na internete, a to aj napriek nedávnemu zahrnutiu podpory tohto formátu do Netscape Navigator a Microsoft Internet Explorer.

   A hoci oni najnovšie verzie a podporujú PNG, robia to veľmi obmedzeným spôsobom. V súčasnosti je jediným riešením pre používateľov, ktorí chcú vidieť celý súbor PNG, nainštalovať si doplnok (napríklad PNG Live).

   Vývojári zrejme spomaľujú a čakajú na úplný prechod používateľov na nové formáty. Nuž, zdravý konzervativizmus nikdy nezaškodí, no aj tak dôrazne odporúčame postupne prejsť na PNG a nahradiť tak aspoň všetky doterajšie použitia formátu GIF.

   Vektorové znázornenie

   JPEG, GIF aj PNG sú rastrové formáty založené na diskrétnej (pixelovej alebo bodovej) reprezentácii obrázka, zatiaľ čo vektorové formáty sú založené na matematických vzorcoch (geometrické znázornenie tvarov). Vektorová grafika poskytuje značné výhody oproti rastru, najmä pokiaľ ide o diagramy, text a priemyselnú grafiku (a cenová efektívnosť formátov je pre internet veľmi dôležitá).

   Prvou výhodou je teda výrazne menšia veľkosť vektorových obrázkov v porovnaní s bitmapami, pretože nie je popísaný každý jeden pixel obrázka, ale celá postava (napríklad na nastavenie kruhu je potrebné preniesť 3-4 čísla: polomer, súradnice stredu a prípadne typ alebo hrúbka čiary a jej atribúty). Matematické vzorce, ktoré popisujú vektorovú reprezentáciu, zaberajú oveľa menej miesta ako jednotlivé pixely a ich atribúty.

   Ďalšou dôležitou výhodou vektorovej reprezentácie je možnosť prakticky neobmedzeného škálovania obrázka (alebo detailovania jeho častí) bez straty rozlíšenia alebo jasnosti obrázka. Na prispôsobenie vektorovej reprezentácie konkrétnej palete, platforme, hardvéru alebo dizajnu nie je potrebné žiadne úsilie; a schéma kompresie a kvalita zobrazenia sa bez problémov zhodovali.

   Nie každý rastrový obrázok je však možné previesť do vektorovej podoby (napríklad fotografie, naskenované obrázky alebo rastrové kresby je ťažké vektorizovať). Ale špeciálne pripravené vektorové kresby (ako sú perokresby, piktogramy, technické ilustrácie, mapy, informačná grafika a iné, ktoré sú historicky vektorové) je jednoducho hlúpe rastrovať na zverejnenie na internete, ako je to dnes.

   Problémy so zobrazovaním vektorovej grafiky počas World Wide Web vznikla preto, lebo neexistovala žiadna iná metóda zobrazenia ako rastrová a plug-in na zobrazovanie súborov vo formáte PDF, ktorý sa objavil, neposkytoval potrebnú flexibilitu a vyžadoval ukladanie všetkého obsahu do jednej formy – PDF.

   Aby sa zabezpečilo bezproblémové vkladanie vektorovej grafiky do tradičného formátu HTML bez akéhokoľvek dodatočného softvéru, výbor pre štandardy W3C v súčasnosti zvažuje dva nové vektorové štandardy: PGML (jazyk presnej grafiky) a VML (jazyk vektorových značiek). . PGML podporujú Adobe Systems, IBM, Netscape a Sun Microsystems, zatiaľ čo VML podporujú Microsoft, Hewlett-Packard, Autodesk, Macromedia a Visio. Obidva štandardy sú založené na rozšíreniach značkovacieho jazyka XML, ktoré sú propagované na použitie na webe ako nástupca HTML a odporúčané W3C na budúce použitie.

   V súčasnosti však žiadny z prehliadačov nepodporuje žiadne štandardy vektorovej grafiky, hoci sú už dostupné zásuvné moduly. Medzi najpopulárnejšie spôsoby zobrazovania statických vektorových obrázkov na webe dnes patrí formát SWF (Shockwave Flash) od Macromedia a stále podceňovaný formát Xara Flare.

   Flare- dobré rozhodnutie, ktorý umožňuje zahrnutie vektorových obrázkov, ktoré umožňujú takmer neobmedzene zvyšovať úroveň detailov stránky, pričom ich veľkosti sú porovnateľné s Shockwave Flash. Neznamená to, že používanie prídavných modulov na prezeranie obrázkov je také nepohodlné, ale keď takéto nástroje na svojich stránkach používate, nezabudnite na to používateľa upozorniť a dať mu možnosť stiahnuť si príslušný modul skôr, ako prejde na stránku, ktorá bude obsahovať tieto prvky. Z krátkodobého hľadiska to samozrejme spomalí proces prehliadania nových používateľov, no postupne si budete získavať čoraz viac prívržencov, až sa napokon zaradia aj príslušné prostriedky ďalšia verzia Pre začiatočníkov už nebude potrebný prehliadač a doplnkový modul.

   Animácia, interaktivita a interakcia

   Vo všeobecnosti možno obrázky GIF usporiadať ako špeciálny balík do jedného súboru a výsledný „film“ (flipbook) je možné prehrať vytvorením jednoduchej bitmapovej animácie. Netscape aj Microsoft podporujú „animovaný“ formát GIF už od tretích verzií svojich prehliadačov, takže ich prítomnosti na webe je teraz ťažké vyhnúť. Početné animátory GIF, ktoré vám umožňujú vytvárať takéto zásobníky GIF, sú široko používané (komerčné aj verejné). „Oživenie“ formátu GIF však môže viesť k nezvládnuteľnému veľkosti súborov, pretože každá „úroveň“ takéhoto zásobníka je samostatným obrázkom GIF, takže typických 15 snímok za sekundu pre počítačovú animáciu môže „vyrobiť“ nespočetné množstvo kilobajtov.

   V kombinácii s Java alebo JavaScriptom môžete vytvárať aj interaktívne animácie, ktoré budú reagovať na používateľa.

   A teraz sa pozrime na ďalšie riešenia pre webovú animáciu a interaktívnu interakciu používateľa, pričom hlavnú úlohu tu naďalej zohráva Macromedia, ktorá už dávnejšie vstúpila na trh so svojimi programami Shockwave a Flash a svoje produkty neustále zdokonaľuje a zvyšuje ich efektivitu. v súlade s potrebami používateľov a dizajnérov.

   Shockwave, pôvodne vytvorený ako formát pre Macromedia Director, je rodina protokolov primárne zameraných na vytváranie interaktívneho a grafického obsahu vytvoreného špeciálne na použitie na internete. A Shockwave Flash je vo všeobecnosti jedinečný nástroj a jeden z najlepších lepšie spôsoby vytvoriť animáciu a publikovať ju na webovej stránke. Shockwave Flash generuje veľmi malé súbory (pretože používa prevažne vektorový formát reprezentácie) a v porovnaní s inými formátmi je z hľadiska prípravy najpohodlnejší.

   Pri publikovaní takejto animácie na svojich stránkach nezabudnite na to používateľa upozorniť, aby si vopred naskladnil ďalší modul a pripravil sa na únavné čakanie na stiahnutie. Avšak najnovšie verzie Netscape Navigator a internet Explorer mať prehliadače Flash animácií už v základnom balíku. Netscape potvrdil, že budúce verzie Navigatora budú mať túto podporu pre Flash, dokonca aj na úrovni kódu.

   Konečné rozhodnutie je na vás

   Mení sa teda prístup k prezentácii webového obsahu, objavujú sa nové dátové formáty a vývojové nástroje, ktoré ich podporujú. Avšak staré formáty (pre znázornenie grafiky sú GIF a JPEG) sú stále veľmi populárne. Podporujú ich takmer všetky prehliadače a väčšina vývojárov má s nimi bohaté skúsenosti. Je dôležité použiť správny formát pre vašu konkrétnu aplikáciu, aby ste zabezpečili rovnováhu medzi kvalitou obrazu a veľkosťou súboru. Napríklad jeden obrázok GIF môže zaberať viac miesta a prinášať nižšiu kvalitu ako obrázok JPEG, zatiaľ čo iný bude opačný.

   Pri reprezentácii bitmapových obrázkov sa však uprednostňuje PNG, a ak pôjdete ešte ďalej a pokúsite sa použiť vektorový obrázok, potom je vám dnes k službám formát Shockwave Flash od Macromedia.

   Formát SWF (Shockwave Flash) nie je bežne používaný, ale interný vektorový formát programu Macromedia Flash (pozri " Lekcie z Macromedia Flash" na CD-ROM), takže ak chcete získať svoj vlastný obrázok alebo animáciu, budete si musieť zakúpiť príslušný multimediálny balík od spoločnosti Macromedia a používateľ si bude musieť nainštalovať ďalší modul na vizualizáciu výsledku. Ak teda chcete jednoducho umiestniť vektorovú kresbu na svoju webovú stránku, musíte prekonať množstvo nepríjemností.

   Napriek tomu sú na ceste ďalšie vektorové formáty, ktoré sa čoskoro stanú štandardom.

   ComputerPress 5 "1999

   Pridanie obrázka prebieha v dvoch fázach: najprv sa pripraví grafický súbor v požadovanom formáte a veľkosti, potom sa súbor zobrazí na stránke pomocou prvku .

   Formáty súborov

   Pre webovú grafiku sú široko používané dva formáty – PNG a JPEG. Ich všestrannosť, všestrannosť, malé množstvo zdrojových súborov s dostatočnou kvalitou pre stránku im dobre poslúžilo, v podstate ich definovalo ako štandard pre webové obrázky. Okrem nich sa na stránkach používajú formáty GIF a SVG.

   Formát PNG-8

   PNG-8 (Portable Network Graphics, prenosná sieťová grafika) je bezplatný formát vytvorený ako náhrada GIF, v ktorom na dlhú dobu boli použité proprietárne algoritmy.

   Zvláštnosti

   • V obraze využíva 8-bitovú paletu (256 farieb), za čo dostal vo svojom názve číslo osem. V tomto prípade si môžete vybrať, koľko farieb sa uloží do súboru - od 2 do 256.
   • Na rozdiel od GIF nezobrazuje animáciu.

   Oblasť použitia

   Formát PNG-24

   PNG-24 je formát podobný PNG-8, ale používa 24-bitový farebný gamut. Podobne ako JPEG zachováva jas a odtieň farieb na fotografiách. Podobne ako GIF a PNG-8 zachováva detaily obrázka, ako sú čiarové grafiky, logá alebo ilustrácie.

   

   Zvláštnosti

   • Používa približne 16,7 milióna farieb na súbor, a preto sa tento formát používa pre plnofarebné obrázky.
   • Podporuje viacúrovňovú priehľadnosť, čo vám umožňuje vytvoriť plynulý prechod z priehľadnej oblasti obrazu na farbu.
   • Vďaka tomu, že použitý kompresný algoritmus zachováva všetky farby a pixely v obraze nezmenené, má PNG-24 v porovnaní s inými formátmi najväčšiu výslednú veľkosť grafického súboru.

   Oblasť použitia

   Fotografie, kresby obsahujúce priehľadné a priesvitné plochy, kresby s množstvom farieb a ostrými okrajmi obrázkov.

   formát JPEG

   JPEG (Joint Photographic Experts Group) je populárny formát obrazového súboru, ktorý sa bežne používa na vytváranie webových stránok a ukladanie fotografií. JPEG podporuje 24-bitové farby a zachováva jas a odtieň farieb na fotografiách nedotknutý. Tento formát sa nazýva stratová kompresia, pretože algoritmus JPEG selektívne odmieta údaje. Metóda kompresie môže spôsobiť skreslenie obrazu, najmä ak obsahuje text, jemné detaily alebo ostré hrany. Formát JPEG nepodporuje priehľadnosť. Keď uložíte fotografiu v tomto formáte, priehľadné pixely sa vyplnia špecifikovanou farbou.

   

   Zvláštnosti

   • Počet farieb v obraze je približne 16,7 milióna, čo je celkom dosť na zachovanie fotografickej kvality obrazu.
   • Hlavnou charakteristikou formátu je „kvalita“, ktorá vám umožňuje kontrolovať konečnú veľkosť súboru. Kvalita sa meria od 0 do 100, čím vyššia hodnota, tým lepší je obraz, ale zvyšuje sa aj veľkosť súboru.
   • Podporuje technológiu nazývanú progresívny JPEG, pri ktorej sa vo výreze zobrazí verzia obrázka s nízkym rozlíšením ešte pred úplným načítaním samotného obrázka.

   Oblasť použitia

   Používa sa hlavne na fotografie. Nie je veľmi vhodný pre kresby obsahujúce priehľadné oblasti, malé detaily alebo text.

   vo formáte GIF

   GIF (Graphics Interchange Format) je grafický formát súboru široko používaný na vytváranie animovaných obrázkov. GIF používa 8-bitové farby a efektívne komprimuje jednofarebné oblasti pri zachovaní detailov obrazu.

   

   Zvláštnosti

   • Počet farieb na obrázku môže byť od 2 do 256, ale môže to byť akákoľvek farba z 24-bitovej palety. Súbor GIF môže obsahovať priehľadné oblasti. Ak je použité iné pozadie ako biele, bude presvitať cez „diery“ v obraze.
   • Podporuje zmenu obrázkov po jednotlivých snímkach, vďaka čomu je tento formát obľúbený na vytváranie jednoduchých animácií.
   • Používa metódu bezstratovej kompresie

   Oblasť použitia

   Text, logá, ilustrácie s ostrými hranami, animovaná grafika, obrázky s priehľadnými plochami, bannery.

   formát SVG

   SVG (Scalable Vector Graphics, škálovateľná vektorová grafika) je vektorový formát, v ktorom sa obrázok neskladá z pixelov, ale z objektov a kriviek. Z tohto dôvodu nie je vhodný pre rastrové fotografie zložené z bodiek, ale je výborný pre ilustrácie s výraznými obrysmi.

   Zvláštnosti

   • Obrázky vo formáte SVG je možné zmenšiť podľa potreby bez straty kvality obrazu.
   • Veľkosť súboru je zvyčajne malá.
   • Podporuje animáciu a interaktivitu.

   Oblasť použitia

   Text, logá, ilustrácie s ostrými okrajmi.

   Pridanie obrázka

   Element sa používa na pridanie obrázka na webovú stránku. , ktorého atribút src určuje adresu grafického súboru. Všeobecná syntax pridania obrázka je nasledovná.

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

   Povinné sú atribúty src aj alt.

   Atribút src určuje cestu k grafický súbor, na jeho určenie možno použiť absolútnu alebo relatívnu adresu. Ďalej zvážte niekoľko rôzne cesty, ako určiť cestu k obrázku, aby ste ho umiestnili na webovú stránku. Ako príklad si vezmime súbor s názvom target.png , ktorý je uložený v priečinku images v koreňovom adresári lokality.

   http://example.ru/images/target.png
   Ak adresa začína protokolom (http:// alebo https://), ide o absolútnu adresu. Obrázok sa vždy stiahne zo zadanej internetovej adresy, aj keď je webová stránka uložená na lokálnom počítači.

   //example.ru/images/target.png
   Toto je absolútna adresa obrázka bez špecifikácie protokolu. Prehliadač nezávisle nahradí požadovaný protokol, na ktorom stránka beží (http:// alebo https://). Upozorňujeme, že tieto typy adries nefungujú na miestnych webových stránkach, ale iba na internete pod kontrolou webového servera.

   /images/target.png
   Ak je na začiatku adresy lomka (/), znamená to, že priečinok s obrázkami sa nachádza v koreňovom adresári lokality. Jeden priečinok môže byť vnorený do druhého, takže cesta sa môže zväčšiť. Napríklad /assets/images/target.png znamená, že priečinok aktív sa nachádza v koreňovom adresári lokality, obsahuje priečinok s obrázkami, v ktorom sa nachádza súbor target.png.

   ../images/target.png
   Dve lomky (../) označujú, že priečinok s obrázkami je v štruktúre priečinkov o jednu úroveň vyššie ako dokument HTML. Na obr. Obrázok 1 zobrazuje súbor source.html, do ktorého je potrebné vložiť obrázok target.png.

   

   Ryža. 1. Umiestnenie súboru

   images/target.png
   Názov priečinka bez bodiek na začiatku adresy znamená, že HTML dokument a priečinok s obrázkom sú na rovnakej úrovni (obr. 2).

   

   Ryža. 2. Umiestnenie súboru

   target.png
   Jediný názov súboru znamená, že obrázok a webová stránka sú umiestnené na rovnakom mieste (obrázok 3).

   

   Ryža. 3. Umiestnenie súboru

   Príklad 1 ukazuje niekoľko spôsobov, ako pridať obrázok na webovú stránku.

   Príklad 1: Pridávanie obrázkov

   

   

   

   

   Alternatívny text

   Alternatívny text je dôležitou súčasťou obrázkov a je určený pre ľudí so zrakovým postihnutím, ktorí nevidia obrázky a prijímajú informácie zo stránky sluchom. Špeciálne čítačky obrazovky čítajú text z webu a namiesto obrázkov vyslovujú text napísaný v atribúte alt. V bežných prehliadačoch sa alternatívny obsah zobrazuje iba vtedy, keď sa na webovej stránke z nejakého dôvodu nezobrazujú obrázky.

   Atribút alt by mal popisovať obsah obrázka a ak obrázok plní dekoratívnu funkciu a nemá žiadny zmysluplný význam, ponechajte alt prázdny (príklad 2).

   Príklad 2: Použitie alt

   

   

   Ak obrázky vyžadujú viditeľnú nápovedu, mali by ste použiť globálny atribút názvu, ktorý možno pridať do akéhokoľvek prvku, nielen do obrázkov. Keď umiestnite kurzor myši na obrázok, zobrazí sa text obsahujúci hodnotu atribútu title (príklad 3).

   Príklad 3: Použitie názvu

   

   Vzhľad popisku závisí od konkrétneho prehliadača a nemožno ho zmeniť. Na obr. 2 zobrazuje popis v prehliadači Firefox.

   

   Ryža. 2. Typ popisku

   Zmena veľkosti obrázka

   Ak chcete zmeniť veľkosť obrázka prvku sú poskytnuté atribúty šírka (šírka) a výška (výška). Ako hodnota sa používajú pixely alebo percentá. Príklad 4 ukazuje, ako pridať tieto atribúty .

   Príklad 4. Rozmery výkresu

   

   
   

   Atribúty šírka a výška sú voliteľné, po načítaní obrázka prehliadač automaticky nastaví jeho pôvodnú veľkosť. V zásade sa tieto atribúty používajú na nasledujúce účely:

   • rezervovať miesto pre obrázok;
   • zmenšiť veľkosť veľkých fotografií;
   • zlepšiť kvalitu obrazu pre Retina displeje.

   Ak sú rozmery obrázka špecifikované explicitne, prehliadač ich použije na zobrazenie prázdnej oblasti zodpovedajúcej obrázku počas načítavania dokumentu. V opačnom prípade prehliadač počká, kým sa obrázok úplne načíta, a potom zmení šírku a výšku obrázka. V tomto prípade môže dôjsť k preformátovaniu textu, pretože spočiatku nie je známa veľkosť obrázka a automaticky sa nastaví na malú.

   Šírka a výška obrazu sa dá meniť hore aj dole. Prehliadač automaticky odstráni nadbytočné pixely, alebo naopak, doplní chýbajúce, aby získal obrázok vhodnej veľkosti. Kvalita výsledného obrázku do značnej miery závisí od jeho obsahu, v každom prípade musíme pamätať na to, že zväčšiť obrázok bez straty detailov je možné len vo filme.

   Retina displeje sa vyznačujú vysokou hustotou pixelov a detailmi obrazu, takže bežné obrázky na nich vyzerajú trochu rozmazane. Pre zlepšenie kvality sú obrázky zdvojnásobené. Ak napríklad webová stránka vyžaduje fotografiu so šírkou 400 pixelov, potom urobíme fotografiu so šírkou 800 pixelov, ale v hodnote atribútu width ponecháme šírku 400 pixelov.

   Atribúty šírka a výška nemusia ísť spolu. Ak niektorý z týchto atribútov nie je zadaný, prehliadač automaticky nahradí požadovanú hodnotu na základe pomeru strán obrázka.

   

   Vzhľadom na to, že nezávisle nahrádzame šírku a výšku obrazu, môžeme zámerne skresliť jeho proporcie roztiahnutím obrazu vertikálne alebo horizontálne.

   

   Okrem pixelov možno ako veľkosti použiť aj percentá. V tomto prípade je šírka relatívna k rodičovskému prvku.

   

   V takýchto prípadoch sú problémy s výškou, pretože výška obrázka v percentách sa berie do úvahy len vtedy, keď je explicitne definovaná výška jeho rodiča. Ak výška nadradeného prvku nie je žiadnym spôsobom špecifikovaná, potom sa položka typu height="100%" ignoruje.

   Existujú stovky obrazových formátov, no len niektoré z nich podporujú webové prehliadače. V tomto článku popíšeme rôzne formáty grafických súborov, ktoré sú dostupné webovým dizajnérom a v akom prípade by sa mali použiť.

   Grafické formáty súborov, ktoré sú podporované najpopulárnejšími webovými prehliadačmi, sú: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) a vektorová grafika. Niektoré vlastnosti grafických súborov:

   • Priehľadnosť – táto vlastnosť umožňuje, aby bol obrázok v rôznych stupňoch priehľadnosti od pevného stavu až po úplne priehľadný.
   • Kompresia - Táto vlastnosť umožňuje uložiť obrázok do oveľa menšieho súboru pomocou matematických algoritmov na spracovanie skupiny pixelov ako jedného prvku.
   • Weave - umožňuje načítať obrázok najskôr na nepárne a potom na párne riadky. To umožňuje návštevníkovi vidieť obrázok skôr.
   • Animácia – vytvára dojem pohybu prostredníctvom série po sebe idúcich záberov. Animovaný GIF nevyžaduje doplnok prehliadača a môže fungovať takmer na všetkých zariadeniach.
   • Progresívne načítanie je podobné tkaniu v tom, že spočiatku načíta iba časť obrazu, ale nie na základe striedajúcich sa čiar.

   GIF bol založený v roku 1980 a adoptovaný webovými dizajnérmi na začiatku 90. rokov ako hlavný grafický formát pre webové stránky. Súbory GIF používajú kompresný algoritmus, ktorý zachováva malú veľkosť súboru pre rýchle načítanie. GIF je obmedzený na 256 farieb (8 bitov), ​​podporuje priehľadnosť a prekladanú grafiku. Pomocou tohto formátu je tiež možné vytvárať animovanú grafiku. Všetky prehliadače dokážu bez problémov zobraziť súbory GIF.

   Výhody GIF:

   • Najviac podporovaný grafický formát
   • Diagramy vyzerajú lepšie v tomto formáte
   • Podpora transparentnosti

   Súbory sú komprimované, ale podporujú „skutočné farby“ (24 bitov) a sú preferovaným formátom pre fotografie, kde je kvalita veľmi dôležitá. JPEG podporuje progresívny formát, ktorý vám umožňuje takmer okamžite vidieť obrázok, ktorý sa po dokončení sťahovania zlepší v kvalite.

   Na rozdiel od súborov GIF môžu weboví dizajnéri spravovať komprimované súbory JPEG, ktorý umožňuje rôzne úrovne kvality obrazu a veľkosti súborov.

   Výhody JPEG:

   • Vyššia kompresia znamená vyššiu rýchlosť sťahovania.
   • Vytvára vynikajúcu kvalitu fotografií a zložitých kresieb.
   • Podpora pre 24-bitové farby.

   PNG je relatívne nedávny formát, ktorý bol predstavený ako alternatíva pre súbory GIF. PNG podporuje až 24-bitové farby, priehľadnosť, väzbu a môže obsahovať skratku textový popis obrázok používaný vo vyhľadávačoch.

   Výhody PNG:

   • Prekonáva 8-bitové obmedzenia farieb GIF
   • Umožňuje textový popis obrázkov pre vyhľadávače
   • Podporuje transparentnosť
   • Schémy vyzerajú lepšie ako JPEG

   Vektorová grafika

   Väčšina webovej grafiky sú bitmapy alebo kresby, ktoré sa skladajú z mriežky farebných pixelov. Ilustrácie musia byť vytvorené vo vektorovej grafike, ktorá pozostáva z matematického popisu každého prvku, ktorý tvorí tvary čiar a farby obrázka. Vektorová grafika sa vytvára pomocou programov ako napr Adobe Illustrator alebo CorelDRAW. Vektorová grafika musí byť prevedená do akéhokoľvek formátu GIF, JPEG alebo PNG, aby sa dala použiť na webových stránkach.

   Aký formát by sa mal použiť?

   Webový dizajnér si môže vybrať formát GIF alebo JPEG pre väčšinu použití. Ale keďže súbory GIF majú tendenciu byť malé v porovnaní s veľkosťou jpeg súbor, väčšina webových dizajnérov použije formát GIF pre pozadia, rámčeky, rámčeky a akúkoľvek inú grafiku, ktorá vyzerá skvele s 8-bitovými farbami.

   Väčšina dizajnérov si vyberie formát JPEG pre fotografie a ilustrácie, kde kompresia neohrozuje vizuálnu kvalitu obrázka.