Meniu kūrimas, naudojant vieną paveikslėlį.

[airiux140]

Meniu kūrimas, naudojant vieną paveikslėlį

Paprastai meniu punktus stilizuojame pritaikydami tam tikras pakopinių stilių (angl. Cascading Style Sheets — CSS) savybes: pridedame rėmelį, nustatome atitraukimus (margin ir padding), keičiame teksto, fono spalvą. Kitais atvejais meniu punktų fonui priskiriame paveikslėlį, kuris kartojamas horizontaliai ar vertikaliai, arba kiekvienam meniu punktui naudojame atskirą paveiksliuką, norėdami dar labiau pagražinti tinklalapio dizainą.

Tačiau ar nustebtumėte sužinoję, kad galime į vieną paveikslėlį sudėti visus reikiamus, grafine programa paruoštus, meniu elementus ir pritaikyti reikiamą paveikslėlio dalį atitinkamai pagal meniu punktą? Taip? Tada skaityk toliau šį straipsnį ir sužinosi, kaip tai padaryti. Ne? Na, gerai, tačiau galbūt vis tiek sužinosi kažką naujo? Nesupranti, ką aš čia aukščiau parašiau? Atsakingai perskaityk straipsnį — užtikrinu, viskas paaiškės.

Fono savybės CSS kalboje

Pirmiausia reikia išsiaiškinti, kaip veikia su fonais susijusios CSS savybės. Pradėkime nuo paprasčiausių pavyzdžių.

1.#blokas { width: 50px; height: 150px; background-image: url(bloko_paveiksliukas.png); }

Dabar nurodėme kitą savybę — background-image, su kuria galime elementui priskirti fono paveikslėlį. Kaip matote, nurodome žodį url ir dedame skliaustus, kuriuose nurodome kelią iki paveiksliuko.

1.#blokas

2.{

3.width: 50px;

4.height: 50px;

5.background-image: url(bloko_paveiksliukas.png);

6.background-repeat: no-repeat;

7.}

Aukščiau parodytame CSS kodo pavyzdyje matome, kad atsirado dar viena savybė — background-repeat. Ši savybė nurodo, ar turi būti kartojamas fono paveikslėlis. Nurodę reikšmę no-repeat pažymime, kad paveikslėlis nebus kartojamas nei x (horizontaliai), nei y (vertikaliai) ašyje. Jeigu nurodysimte repeat-x, paveikslėlis bus kartojamas tik horizontaliai per visą elemento plotį, jeigu nurodysime repeat-y — paveikslėlis kartosis tik vertikaliai, jei repeat — tiek horizontaliai, tiek vertikaliai.

Šiek tiek pamankštinę smegenėles, pereikime prie sudėtingesnių pavyzdžių.

1.#blokas

2.{

3.width: 50px;

4.height: 50px;

5.background-image: url(bloko_paveiksliukas.png);

6.background-repeat: no-repeat;

7.background-position: -50px -30px;

8.}

Čia matome, kad pridėta papildoma savybė background-position, kuri mums bus labai svarbi kuriant meniu, panaudojus tik vieną foninį paveikslėlį. Ši savybė nurodo, nuo kokios tikslios vietos pradėti „piešti“ paveikslėlį. Žinau, atrodo gan sudėtingas apibūdinimas, tačiau pabandysiu kuo detaliau išaiškinti, kaip veikia background-position savybė.

Mintyse įsivaizduokite nubrėžą koordinačių plokštumą (grįžtame į matematikos pamokas!), kurioje yra dvi ašys: X ir Y. Ašyse sužymėtos teigiamos ir neigiamos reikšmės. Dabar įsivaizduokite, kad koodinačių plokštumoje nubrėžėte 100x100px kvadratą pagal koordinates: A(0,0), B(100,0) C(0,-100), D(100,-100). Tarkime, kad mūsų vienetinė atkarpa yra 1px (vienas pikselis/taškas). Galiausiai mintyse pastumkime įsivaizduojamąjį kvadratą 30px į viršų ir 50px į kairę. Taigi prilyginę kvadratą paveikslėliui ir pasižiūrėję į CSS savybę background-position, kurią parašėme anksčiau, galėtume daryti išvadą — paveikslėlis paslenkamas į viršų per 30px, o į kairę — per 50px (kadangi pirmoji savybės reikšmė nurodo poziciją horizontaliai, antroji — vertikaliai). Jeigu būtų nurodytos teigiamos, o ne neigiamos savybės, tada paveikslėlis pasislinktų 30px į apačią ir 50px į dešinę. Aiškiau viską suprasti padės žemiau pateikti brėžiniai.

Background-position vizualizacija

Tamsesnės spalvos kvadratas čia — blokinis HTML elementas, kurio plotis ir aukštis yra po 50px. Šiam blokui priskirtas fono paveikslėlis su background-image bei paveiksliuko pozicija su background-position. Šviesiai mėlynos spalvos blokas atitinka paveikslėlį, kuris yra priskirtas kaip blokinio elemento fonas. Paveikslėlio matmenys yra 100x100px. Jis yra didesnis negu pats blokas, tačiau naršyklė vis tiek rodys tik tą paveikslėlio dalį, kuri ribojasi su bloko dimensijomis.

Kaip matote, kai nurodyta paveikslėlio pozicija background-position: -50px -30px, paveikslėlis pasislenka taip, kaip parodyta aukščiau pateiktame pavyzdyje. Pastebėsite, kad pats blokinis elementas savo pozicijos nepakeitė. Taigi dabar naršyklė rodys paveikslėlį ne nuo pat jo pradžios.

Taupykime laiką

Na, gal tiksliau tai būtų ne laiko taupymas, o komfortas.

01.#blokas

02.{

03.width: 50px;

04.height: 50px;

05.background-color: #000;

06.background-image: url(bloko_paveiksliukas.png);

07.background-repeat: repeat-x;

08.background-position: -50px -30px;

09.}

Gan nemažai reikia parašyti kodo, norint nurodyti bloko fono spalvą, paveikslėlį, kartojimą ir poziciją, tiesa? Laimei, galime visas savybes, susijusias su bloko fonu, sudėti į vieną savybę background.

1.#blokas

2.{

3.width: 50px;

4.height: 50px;

5.background: #000 url(bloko_paveiksliukas.png) repeat-x -50px -30px;

6.}

Žinoma, kurį variantą naudosite, priklausys tik nuo jūsų.

Meniu paveikslėlio kūrimas su Adobe Photoshop

Kai detaliai išsinagrinėjome keletą CSS savybių (ha, tik dabar priėjome prie pagrindinės straipsnio temos!), galime pradėti kurti meniu. Pirmiausia susikurkime paveikslėlį, kuriame bus visi meniu punktai.

Sukurkite naują dokumentą Photoshop programoje, nurodydami width: 420px, height: 110px.

Naudodami sukurtą paveikslėlį CSS aprašuose turėsime ypatingai atkreipti dėmesį į skaičius, t. y. nuo kurios paveikslėlio vietos prasideda naujas meniu punktas, tad norėdami tiksliai išdėlioti elementus, įjunkime liniuočių rodymą nuėję Photoshop programoje į View » Rulers arba tiesiog paspaudę klavišų kombinaciją CTRL+R.

Kiekvieno meniu punkto plotis bus 100px, o aukštis 45px. Taigi, mūsų dokumente tilps 4 meniu punktai. Tiesa, nurodysime, kaip atrodys kiekvienas meniu punktas normalioje būsenoje ir užvedus pelės žymeklį. Dar noriu paminėti, kad šiek tiek atitrauksime meniu punktus nuo Photoshop dokumento kraštų.

Adobe Photoshop programoje nuveskite pelės žymeklį ties viena iš liniuočių, paspauskite kairįjį pelės mygtuką ir tempkite žymkeklį link jūsų dokumento. Pamatysite, kad atsiras linija, kuri bus mums kaip gidas, rodantis, kur talpinti meniu punktus. Žemiau pateiktame pavyzdyje matysite, kaip tai atrodo.

Liniuotės - Photoshop

Pradžioje pridėkite dvi horizontalias linijas: dokumento viršuje ir apačioje, atitraukdami jas 5px nuo krašto. Jeigu liniuotė sugraduota pernelyg dideliomis dalimis, galite padidinti dokumento vaizdą, paspausdami klavišų kombinaciją CTRL ir + arba pasirinkdami Zoom Tool (Z), nuvedę pelės žymeklį į dokumentą, paspaudę dešinį pelės mygtuką ir pasirinkę Zoom In. Didinkite vaizdą tol, kol galėsite tiksliai atžymėti linijas 5px nuo viršutinio ir apatinio dokumento kraštų. Toliau nuo sukurtos viršutinės linijos atskaičiuokite 45px ir vėl atidėkite horizontalią liniją; tą patį padarykite ir iš apačios.

Tada atidėkite dvi verikalias linijas atitinkamai nuo kairiojo ir dešiniojo dokumento kraštų, atitraukdami jas 10px. Tai padarę nuo kairiosios verikalios linijos atskaičiuokite 100px ir atidėkite naują verikalią liniją. Šį veiksmą kartokite tol, kol prieisite dokumento kitą kraštinę. Turėtumėte gauti panašų rezultatą, koks parodytas žemiau pateiktame pavyzdyje.

Atitraukimai - Photoshop

Dabar sukurkite naują sluoksnį (angl. Layer), paspaudę klavišų kombinaciją CTRL+Shift+N arba nuėję į Layer » New » Layer, nudažykite jį baltai (kadangi kurdami dokumentą nurodėme Background Contents: Transparent). Tada sukurkite dar vieną sluoksnį, pasirinkite Rounded Rectangle Tool (U), įrankio nustatymuose (programos viršuje) nurodykite Radius: 10px ir nubrėžkite suapvalintą stačiakampį taip, kaip parodyta pavyzdyje (žinoma, sukūrę formos kontūrus spauskite dešinįjį pelės mygtuką, pasirinkite Fill Path ir nudažykite formą pasirinkta spalva).

Menių kūrimas - Photoshop

Duplikuokite anksčiau sukurtą sluoksnį, paspausdami ant sluoksnio dešinį pelės mygtuką ir pasirinkdami Duplicate Layer, ir nukelkite duplikuotą sluoksnį šiek tiek žemiau, į jam priklausančią vietą. Kadangi užvedus pelės žymeklį meniu punktas turi šiek tiek atrodyti kitaip, pakeiskime duplikuoto sluoksnio išvazdą. Paspaukite dešinį pelės mygtuką ant duplikuoto sluoksnio ir pasirinkite Blending Options. Atsidariusiame lange užžymėkite Gradient Overlay ir šiai pasirinkčiai pakeiskime Gradient taip, kaip patrodyta pavyzdyje.

Kas naudoja šią CSS techniką?

- Apple.com

- Amazon.com

- YuoTube.com

- Google.com

Apibendrinimas

Sukurti meniu punktus su atskirais paveiksliukais yra nesunku, tačiau šiame straipsnyje aprašyta CSS technika turi daugiau privalumų. Vienas ryškiausių privalumų — tinklalapiui užsikrovus, užsikrauna ir visi reikiami paveiksliukai (na, mūsų atveju užkraunamas tik vienas meniu punktų fono paveiksliukas), tačiau jeigu naudojame atskirus paveiksliukus, kai užvedamas pelės žymeklis ant meniu punktų, reikiamas paveiksliukas pasirodo ne iš karto, nes naršyklė dar turi užkrauti (parsiųsti į kompiuterį) jį. Naudodami vieną paveikslėlį meniu punktų (ar kitų tinklalapio elementų) fonui būsime užtikrinti, kad, užvedus žymeklį, paveiksliuko fonas pasirodys iš karto, be jokio delsimo.

Taigi, ko išmokote iš šio straipsnio/pamokos? Sužinojote, kaip nurodyti foną HTML elementams, kaip priskirti paveikslėlį fonui, kokias savybes turi pakopiniai stiliai (Cascading Style Sheets — CSS) elementų fono stilizuoti bei, žinoma, kaip sukurti meniu tinklalapiui panaudojus tik vieną paveikslėlį, kurį, šiuo atveju, kūrėme su Adobe Photoshop programa.

Šaltinis: e-grafika.lt