Droši vien neviena vietne nevar iztikt bezpogas citām jūsu lapām. Ikviens vēlas pievērst uzmanību savai vietnei, un tajā pašā laikā tiek izmantoti dažādi līdzekļi. Tīmekļa dizainā tie ietver pogu noformējumu, kas atšķiras pēc dažādiem parametriem - lieluma, formas un efektiem utt.
Visērtāk ir CSS pogas. Brīžos viņu stilu var pilnībā mainīt. Un tas, protams, sniedz papildu iespējas vietnes projektēšanai kopumā.
Sākumā ir vērts saprast dažus jēdzienus, lai nerastos neskaidrības un pārpratumi.
CSS, kas tulkojumā nozīmē "kaskādes stila lapas", šodien ir viena no galvenajām tehnoloģijām internetā. Vismaz viena vietne, visticamāk, neiztiks bez šīs valodas.
CSS kods ir instrukcijas pārlūkprogrammām, kas satur informāciju par to, kā lapā parādīt elementus un kur to darīt.
Šādas instrukcijas ir ērti uzglabāt atsevišķā failā ar paplašinājumu .css. No otras puses, jūs varat tos ievietot html dokumenta sākumā.
Poga vai grafiskais elements navigācijaivietnes saturam, vajadzētu piesaistīt apmeklētāja uzmanību, lai redzētu, ka aiz tā slēpjas viņam interesējošā informācija, un es vēlētos uz tā noklikšķināt. Kad tas būs pietiekami gaišs un redzams, viņi to noteikti pamanīs. Šāda poga var pamudināt apmeklētājus, piemēram, atstāt jūsu pārskatu vietnē vai nosūtīt pieteikumu, abonēt interesantu biļetenu un, protams, vienkārši pārsūtīt uz vietnes sadaļu, kuru pieprasa lietotājs.
Pogas ir statiskas, animētas, dinamiskas, ar skaņu un bez tās.
Tos var speciāli izveidot, piemēram, Photoshop, un augšupielādēt vietnes attēlā, vai arī jūs varat tos viegli un ātri nākt klajā ar CSS.
Šo pogu izgatavošana ir ļoti vienkārša. Liela priekšrocība to lietošanā ir tā, ka tos var mainīt līdz nepazīšanai jebkurā brīdī, burtiski pāris sekundēs.
Kā jūs zināt, pogām ir trīs pozīcijas:
Pogas tiks pilnībā parādītas tieši tādāstādas pārlūkprogrammas kā Firefox, Safari, Opera, Chrome. Tajā pašā laikā pārlūkprogrammā Internet Explorer 9 pogas nevar parādīt pilnībā. Piemēram, stūru noapaļošana, teksta ēna un takts ap pogu šeit nebūs redzamas tāpēc, ka šis pārlūks neatbalsta šādas īpašības. Tomēr kopumā vietnes CSS pogas šajā pārlūka versijā izskatās pienācīgas. Pārlūkprogrammā Internet Explorer 8 un citās versijās, kas ir zemākas par astoto daļu, poga neredzēs skaļumu, bet tajā pašā laikā saglabāsies slīpumu redzamība.
Ja salīdzina pogu kā attēlu un poguCSS, atšķirība servera telpā būs pilnīgi nenozīmīga. Bet CSS pogas samazinās pieprasījumu skaitu uz serveri, un tā jau būs nepārprotama priekšrocība salīdzinājumā ar pogu attēla formā.
Izrādās, ka pat tad, ja dažu atbalstsTā kā Internet Explorer pārlūkprogrammās nav CSS rekvizītu, šādas pogas joprojām izskatīsies izdevīgākas salīdzinājumā ar vienkāršiem attēliem, jo vienīgais, ko lietotāji zaudē Internet Exporer, ir moderno tīmekļa dizaina tehnoloģiju estētikas redzēšana. Bet tas ir pilnīgi nenozīmīgs trūkums.
Katram stilam ir savs stils. Šie stili ir uzrakstīti speciālā .css failā vai starp galvenes tagiem pašā vietnes lapā.
Starp ķermeņa tagiem kods ir rakstīts:
kur
id = ”poga2” šeit nozīmē pogai piešķirto vārdu,
href = ”HYPERLINK” šeit nodrošina tiešu saiti uz nepieciešamo dokumentu,
TEXT - tiek izdrukāts teksts, kas tiks parādīts uz pogas.
1. CSS pogas stils ir uzrakstīts atsevišķi dokumentā vai pašā lapā:
2. Pirmkārt, CSS pogas tiek rakstītas, kad tās atrodas miera stāvoklī:
3. Pēc tam pogai atbilstošos parametrus uzraksta, kad kursors ir virs tā. Ja šajā gadījumā mainās tikai krāsa un aizpildījums, tad stilā viss paliek nemainīgs, izņemot krāsu un aizpildījumu:
4. Un pēdējais parametrs attiecas uz pogas stāvokli, kad kursors tiek uz tās nospiests. Bieži vien šādos gadījumos, piemēram, šajā gadījumā, mainās tikai minimums, piemēram:
Lai izveidotu pogas, varat izmantot gradientu.Vislabāk vispirms ir novilkt pogu grafiskajā redaktorā, piemēram, Photoshop, lai precīzi zinātu, kas beigās izrādīsies. Ja izmantojat Photoshop, tad sākotnēji tam jau ir daži slīpumi, taču papildus varat lejupielādēt arī citus, piemēram, tos, kurus vēlaties nokļūt vietnē.
Eksperimentējot ar CSS kodu un mainot dažādus parametrus, ir iespējams mainīt CSS skaistas pogas un ar atlasi sasniegt vēlamo rezultātu.
Šie parametri ir:
- pogas teksta krāsa;
- teksta un pogu izmērs;
- pogas gradienta krāsa;
- pogas stūru rādiuss;
- un tā gājiena krāsa.
Patiesībā jūs varat droši, bez bailēm eksperimentēt un izvēlēties labāko variantu. Neskatoties uz nelielu parametru skaitu, jūs varat izveidot ļoti dažādas pogas savā stilā.
