HTML ir CSS pradedantiesiems (dalis 09): Grafikos internetui (01)

Kai išsaugote nuotraukas grafinėje programoje, siūlomi visiškai skirtingi grafiniai formatai. Bet kurį iš jų pasirinkti, kai reikia įterpti paveikslėlį į tinklalapį?



Norint pristatyti paveikslėlį savo tinklalapyje, galima pasirinkti iš trijų formatus.

• GIF

• JPEG

• PNG

Tačiau kuriam tikslui pasirinkti kokį formatą? Ar fotografijoms geriau naudoti GIF arba PNG? Pirmiausia trumpai apžvelgsime kiekvieno formata gebėjimus.

Šis nedidelis apibendrinimas jau rodo skirtingas formatų savybes. Todėl nenuostabu, kad tam tikri formatai geriau tinka tam tikriems tikslams nei kiti. Tiksčiai čia prasideda toliau pateiktas skyrius. Ten bus parodyta, kada geriausiai naudoti kurį formatą.

Fotografijos

Neabejotinai, fotografijoms geriausiai tinka JPEG. Čia nuotraukos gali būti labai gerai suspaudžiamos, o kokybė gali būti pasirinkta kintančia. Šiuo atveju rasite tinkamą balansą tarp kokybės ir suspaudimo greičio.

Straipsnių / Diagramų užrašai

Šiems tikslams geriausiai tinka PNG formatas. PNG toki pat įdomus techniniams piešiniams, mastelinei planavimo schemai ir t.t. PNG taip pat gali būti naudojamas paveikslėliams, kuriuose dirbama su permatomais plotais.

Raštai / Logotipai

Jei jūsų logotipe yra tekstas arba norite rodyti tekstą apskritai, geriau naudoti GIF arba PNG. Nepaisant to, dėl geresnės veiklos dažniausiai pasirenkama PNG. JPEG nėra tinkamas raštų rodymui, nes kraštai bus rodomi nešvariai.

Permatomumas

Kai kalbama apie permatomų sričių rodymą, JPEG iš karto atmetamas. Likę tarp GIF ir PNG. Bet kurį iš šių formatų naudoti, jei svarbu permatomumas? GIF pagrindu galima tvarkyti permatomumą, bet rezultatai dažniausiai nepriimtini. GIF formatu vienas pikselis gali būti arba visiškai matomas, arba visiškai permatomas. PNG šio reiškinio neturi. Šis formatas turi papildomą alfa kanalą, dėl kurio galima pasiekti subtiliausius permatomumo rezultatus.

Paveikslėlių įterpimas

Grafikas gali būti įterptas naudojant img elementą. (Atkreipkite dėmesį, kad paveikslėliai šiuo metu dažnai įdedami naudojant CSS. Išsamūs CSS informacija, žinoma, bus pateikta vėliau. Tačiau pateikiamas HTML būdas yra visiškai standartkonformis ir jį galima naudoti be jokių abejonių HTML5.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Img yra elementas, kuris stovi išskiriamai. Nurodant atitinkamus atributus, galima artimiau aprašyti paveikslėlį. Svarbiausias atributas be abejo yra src. Nes per jį nurodomas paveikslėlis, kurį reikia įterpti. Pasitikėjimo priežastimi pateikiant pavyzdį, priimi, kad grafika logo.png yra toje pačioje katalogo vietoje kaip HTML failas, kuriame yra aprašytas img elementas.


• Absoliutūs keliai

• Absoliutūs kelio nurodymai nuo pagrindinės adresos

• Reliatyvūs kelio nurodymai nuo pagrindinės adresos

Pirmiausia apie absoliučius kelius. Šį variantą dažniausiai naudojame, kai paveikslėlis neatsiduri ant savo serverio. Tarkime, norite į savo tinklalapį įdėti PSD-Tutorials.de žinomą bitėlį. Tuomet teoriškai galėtumėte jį tiesiogiai įkelti iš serverio, kuriame jis yra. Iš pradžių nustatykite paveikslėlio kelią. Tai paprasčiausiai padarysite, paspausdami ant paveikslėlio naršyklėje rodant dešinįjį pelės mygtuką ir tada pasirinkdami Kopijuoti paveikslėlio URL.

Galiausiai, kas kraunama į iškarpą, turėtų atrodyti taip:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Tai yra visiškas paveikslėlio adresas. Ši informacija jau pakanka, kad būtų galima įterpti paveikslėlį.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Atvežiame src atributui pilną kelią iki paveikslėlio.

Tačiau problema su šiais absoliučiais keliais galiausiai yra ta, kad jūs neturite tikros kontrolės įkeltam turiniui. Jei jūsų referuojamas grafikas bus ištrintas iš serverio ar perkeltas į kitą katalogą, bus rodomas klaidos pranešimas.





Todėl šis absoliutus nurodymas turėtų būti išimtis.

Apsolutus keliai reliatyviai nuo bazinio adreso

Ši variacija visada tinka, kai paveikslėlis yra toje pačioje sistemoje/serverioje kaip HTML failas ir pasiekiamas per dabartinį protokolą. Skamba komplikuotai, tačiau taip nėra.

Pavyzdys:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

http://4eck-media.de.

Reliatyvūs keliai reliatyviai nuo bazinio adreso

Ši dabar pristatoma variacija tikriausiai yra labiausiai naudojama. Visada imamas šešėlis kaip orientyras, iš kurio galiausiai bus nukreipta. Čia vėl kelios pavyzdžių. Tarkime, yra failas index.htm, į kurį norite įsikelti paveikslėlį. Be to, toje pačioje lygyje egzistuoja katalogas images, kuriame yra minėtas paveikslėlis.

index.htm
images
--logo.png
src atributas atrodytų taip:

src="images/logo.png"

projekt
--images
-----logo.png
--archiv
-----index.htm

index.htm yra kataloge žemiau įkeliamo paveikslėlio logo.png.

src="../images/logo.png"

images ir rodyk logo.png.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

src="../../images/logo.png"

logo.png šiuo atveju yra dviem lygmenimis aukščiau nei index.htm kataloge images.

Reliatyvaus kelių nurodymo pranašumas yra jų lankstumas. Taip galite, pvz., kurti projektą vietiniame diske ir tada nukopijuoti į "tikrąjį" serverį. Keliai išliks nepakitę.