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ų.
#blokas { width: 50px; height: 50px; background-color: #000; }
Iš aukščiau pateikto pavyzdžio matome, kad nurodyta savybė background-color. Su šia savybe nustatome elemento fono spalvą (šiuo atveju nurodėme juodą spalvą). Manau, kad width ir height savybės aiškios — nurodome elemento plotį ir aukštį.
#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.
#blokas
{
width: 50px;
height: 50px;
background-image: url(bloko_paveiksliukas.png);
background-repeat: no-repeat;
}
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ų.
#blokas
{
width: 50px;
height: 50px;
background-image: url(bloko_paveiksliukas.png);
background-repeat: no-repeat;
background-position: -50px -30px;
}
Č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.
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.
#blokas
{
width: 50px;
height: 50px;
background-color: #000;
background-image: url(bloko_paveiksliukas.png);
background-repeat: repeat-x;
background-position: -50px -30px;
}
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.
#blokas
{
width: 50px;
height: 50px;
background: #000 url(bloko_paveiksliukas.png) repeat-x -50px -30px;
}
Ž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.
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.
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).
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.
Jūsų rezultatas turėtų būti panašus į pateiktą pavyzdį.
Galiausiai pridėkite meniu punktų pavadinimus, t. y. tekstą. Taip pat galite sukurti skirtukus ar kitaip pagražinti meniu punktų išvaizdą. Apačioje pateikiu galutinį savo variantą.
Taigi su Adobe Photoshop sukūrėme paveikslėlį, kuriame pavaizduoti mūsų meniu punktai. Dabar galime pradėti rašyti reikiamus CSS aprašus ir pritaikyti naujai sukurtą paveikslėlį.
Sukurto paveikslėlio taikymas CSS aprašuose
Meniu punktams HTML dokumente atvaizduoti naudosime sąrašo ir nuorodos žymes: ul, li, a. Pirmiausia pasirašykime HTML kodą.
<ul id="meniu">
<li><a href="#" id="meniu_pagrindinis"></a></li>
<li><a href="#" id="meniu_naujienos"></a></li>
<li><a href="#" id="meniu_straipsniai"></a></li>
<li><a href="#" id="meniu_forumai"></a></li>
</ul>
<div class="clear"></div>
Pateiktas kodas yra tikrai nesudėtingas, sudėtingiau bus su CSS aprašais. Tiesa, į div elementą su klase clear po kol kas nekreipkite dėmesio — vėliau paaiškinsiu, kam šis papildomas elementas yra reikalingas.
CSS faile pirmiausia sukurkime aprašą, kuris panaikins sąrašo punktų žymeklius, kurie atsiranda prie kiekvieno li elemento.
ul#meniu { list-style-type: none; }
Dabar nurodykime, kaip atrodys nuorodos (a) elementai.
ul#meniu li a
{
display: block;
width: 100px;
height: 45px;
background: url(meniu.png) no-repeat;
float: left;
}
CSS savybė display su reikšme block nurodo, kad nuorodos elementai bus atvaizduojami kaip blokiniai elementai. Jeigu šios savybės nenurodytume, negalėtume priskirti tam tikro nuorodos aukščio ar pločio. Kaip jau minėjau anksčiau, kiekvienas meniu punktas turi būti 100px pločio ir 45px aukščio — tai ir nurodėme su width ir height savybėmis. Kadangi straipsnio pradžioje išsiaiškinome, kaip veikia background savybė, plačiau čia apie tai neužsiminsiu. Na, ir paskutinė savybė, kurią nurodome, yra float su reikšme left. Šios savybės paskirtį ir veikimo principą nėra lengva paaiškinti, be to, float savybės aiškinimas užeitų už straipsnio temos ribų, todėl šią savybę apibūdinsiu labai glaustai ir primityviai.
Paprastai visi blokiniai elementai (turintys display: block „nesirikiuoja“ vienas šalia kito horizontaliai, o persikelia į kitą
eilutę, lyg po kiekvienu elementu būtų pridėta <br /> žymė. Pridėdami savybę float nurodome, kad elementai
turi prisišlieti vienas prie kito horizontaliai tiek, kiek įmanoma (atsižvelgiant į padding ir margin), t.y. tiek, kiek yra vietos.
Žinoma, būtų galima naudoti kitą display savybės reikšmę — inline-block, kuri nurodytą elementą
paverstų blokiniu elementu ir leistų jam lygiuotis vienoje eilutėje su kitais elementais (jei tik nėra <br />, <hr />
ar kitų žymių, kurios perkeltų elementą į naują eilutę), tačiau šios reikšmės nepalaiko nei IE6, nei IE7, nei Firefox 2 naršyklė.
Jeigu dabar atsidarytumėte HTML dokumentą savo naršyklėje, pamatytumėte, kad kiekvienas meniu punktas (tiksliau a
elementai) naudoja tą patį paveikslėlį. Tai juk ir yra visa straipsnio idėja, tiesa? Tačiau matysite, kad kiekvieno a
elemento fono paveiksliuko pozicija yra ta pati. Ar atsimenate, ką reikia padaryti, kad pasikeistų paveiksliuko pozicija? Jeigu ne,
nesivarginkite ir neieškokite atsakymo straipsnio viršuje, kur tai aptariau, pavyzdį pateiksiu čia pat.
ul#meniu li a#meniu_pagrindinis { background-position: -10px -5px; }
ul#meniu li a#meniu_naujienos { background-position: -110px -5px; }
ul#meniu li a#meniu_straipsniai { background-position: -210px -5px; }
ul#meniu li a#meniu_forumai { background-position: -310px -5px; }
Matome, kad kiekvienam meniu punktui (nuorodos ID) nurodyta skirtinga paveiksliuko pozicija. Pirmajam meniu punktui priskirtas paveiksliuko patraukimas 10px į kairę ir 5px į viršų. Antrajam — 110px į kairę ir 5px į viršų ir t. t. Iš kur tokios reikšmes kaip -10px, -110px, -210px, -310px? Na, čia paprasta matematika. Kai kūrėme paveiksliuką Adobe Photoshop programoje, buvau nurodęs, kad atitrauksime sukurtus sluoksnius nuo kairiojo ir dešiniojo dokumento kraštų po 10px. Taigi pirmajam meniu punktui reikia nurodyti paveiksliuko poziciją į kairę pusę 10px, kad būtų rodoma reikiama meniu punkto paveiksliuko dalis ir į „kadrą“ nepapultų nepageidaujami elementai. Antrajam meniu punktui atitinkamai surandame horizontaliąją poziciją prie 10px pridėję 100px (meniu punkto plotį). Tiek trečiajam, tiek ketvirtajam elementui galioja ta pati metodika.
Pastebėsite, kad visiems meniu punktams nurodyta ta pati vertikalioji paveiksliuko pozicija, kadangi visų punktų aukštis išlieka pastovus.
Tiesa, nepamirškime sukurti CSS aprašų, kurie nurodytų, kaip turi atrodyti meniu punktas, kai ant jo užvedamas pelės žymeklis.
ul#meniu li a#meniu_pagrindinis:hover { background-position: -10px -60px; }
ul#meniu li a#meniu_naujienos:hover { background-position: -110px -60px; }
ul#meniu li a#meniu_straipsniai:hover { background-position: -210px -60px; }
ul#meniu li a#meniu_forumai:hover { background-position: -310px -60px; }
Horizontalioji pozicija išliko ta pati, tačiau pasikeitė vertikalioji. Jos reikšmę surasti taip pat nesunku: prie anksčiau nurodytų 5px pridėkime 45px (meniu punkto aukštį) bei dar papildomo tarpo aukštį (10px), kuris yra tarp dviejų meniu sričių. Taigi 5 + 45 + 10 = 60px. Tik, žinoma, prie reikšmės pridedame minusą, kadangi norime paveiksliuką pastumti į viršų, o ne į apačią.
Taigi dabar atsivertę HTML dokumentą naršyklėje pamatysite, kad kiekvienas meniu punktas sutampa su jam priklausančia paveikslėlio dalimi.
Mano rezultatą galite pamatyti čia: meniu/index.html.
Pabaigai dar noriu priminti, kad HTML faile buvo nurodytas papildomas div elementas su atributu class="clear". Kadangi mes a elementams nurodėme savybę float, po jos panaudojimo pravartu ją panaikinti. Taip išvengsite anomalijų, kai kartais vieni elementai „pasislepia“ po kitais. Taigi CSS faile dar papildomai pridėkimę papildomą aprašą.
.clear { clear: both; }
Kas naudoja šią CSS techniką?
Apple.com
Amazon.com
YouTube.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.
2009-05-17 19:29:57
Gairės:
), bet reiks neuzmirst ir kada ismegint
dabar viskas aišku, labai dėkingas 
Martyna
