Web pogas izveide, kura reaģē uz peles kursoru

Sākumlapa Forumi Notepad.lv IT ziņas Raksti Web pogas izveide, kura reaģē uz peles kursoru

Tiek skatīts 1 ieraksts (no 10 kopumā)
  • Autors
    Ieraksti
  • #148803
    normis_161
    Participant

    [imgl]https://notepad.lv/userpix/28_ps_1.jpg[/imgl]Š ajā pamācībā es jums parādīšu kā uztaisīt weblapas pogu, kura reaģē uz peles kursoru. Tas nozīmē to, ka ja peles kursors nokļūs noteiktajā vietā, tad, piemēram, jūsu izveidotais teksts iemirdzēsies. Es izmantošu programmas Photoshop un Notepad++. Protams, jūs varat arī izmantot citas programmas, lai varētu sasniegt tādu rezultātu, kāds tiek parādīts šajā darbā. Doma jau tāpēc nemainās. Piemēram, jūs pat ar Paint varētu kaut ko tamlīdzīgu uztaisīt. Sāksim ar to, ka izveidosim Web-pogu.

    P.S. Gadījumā, ja jūs pirmo reizi lietojat Photoshop, tad varu ieteikt izlasīt šīs divas pamācības pirms tam:

    [align=right] 1. Photoshop pamati (1. stunda);

    2. Photoshop pamati (2. stunda).

    [align=justify]1. Punkts.

    Atveram Photoshop un izveidojam jaunu dokumentu. To var darīt izdarīt divos veidos:

    1. Izmantojot ātro taustiņu kombināciju – Ctrl+n;

    2. Izmantojot izvēlnes joslu – File -> New.

    Kad esiet to izdarījis, tad jums paradās šāds logs:

    [img]https://www.bildites.lv/images/asanoeyz4730055ujhx.jpg[/img]

    Kā redzams, pie iespējas “Background Contents”, esmu izvēlējies parametru Transparent. Tas nozīmē to: kad bilde tiks saglabāta *.gif formātā, tad tai nebūs nekāda fona. Protams, tas būs tikai tādā gadījumā, ja mēs nebūsim jau uzlikuši kaut kādu fonu. Š is parametrs ir ļoti noderīgs tad, kad bilde ir vai nu ovāla, vai arī daudzstūraina, jeb īsi sakot, tā neatbilst ierastajām figūrām – taisnstūrim, kvadrātam utml.

    Š oreiz esmu izvēlējies veidot darba virsmu, kuras platums ir 200px*100px. Jūs arī varat likt citus parametrus, ja tie būs jums piemērotāki. Kad esam izveidojuši darba virsmas izmērus, tad spiežam pogu “Ok.”

    2. Punkts

    Kā redzams, tika izveidota darba virsma, kurai nav nekāda fona. Par to liecina rūtainais laukums:

    [img]https://www.bildites.lv/images/difz6vp8jvri0jqhylk2.jpg[/img]

    Kā bildē parādīts, tiek izvēlēts rīks – Rounded Rectangle Tool.

    [img]https://www.bildites.lv/images/9uemie3snkbcgt7o5xqr.jpg[/img]

    Ar šī rīka palīdzību var izveidot taisnastūri, kuram ir noapaļotas malas. Nākošajā bildē ir parādīts, ka es zīmēšu taisnstūri ar noapaļotām malām, kur katrai malai ceturkšņa rādiuss ir 5 px.

    3. Punkts.

    Kad poga uzzīmēta, izveidojam jaunu slāni – Create New Layer. Š o komandu var izpildīt, izvēloties to ikonu, kura atrodas labajā apakšējā stūrī blakus miskastei. Kad tas ir izdarīts, izvēlaties teksta rīku. Jūs varat arī izmantot ātro taustiņu kombināciju – vienkārši nospiežot burtu “t”. Pēc tam ar peles kreiso taustiņu nospiediet tai vietā, kur vēlaties rakstīt tekstu. Es šajā gadījumā uzrakstīju Webpoga.

    [img]https://www.bildites.lv/images/z1hid1pdzoozuc0am18.jpg[/img]

    4. Punkts.

    Tā kā vienkārša webpoga ir uzzīmēta, tad varam ķerties klāt pie saglabāšanas. Caur izvēlņu joslu tas notiek šādi: File=> Save for Web & Devices…, bet caur ātro taustiņu kombināciju: Alt+Shift+Ctrl+s. Pēc tam spiežam “Save” un norādam to, ka gribam darbu saglabāt *.gif formātā, kā arī vajag vēl norādīt to, ka gribam saglabāt tikai bildi (Image only), nevis bildi kopā ar html kodu. Iepriekšējās Photoshop versijās šāda veida saglabāšana bija jāveic caur Image Ready.

    To varēja izdarīt tā, ka sākumā vajag pārslēgties uz Image Ready, bet pēc tam caur izvēļņu joslu jāuzspiež File-> Save Optimize As… (ja pareizi atceros).

    P.S. Sākot no Photoshop CS3 un uz augšu funkcija Image Ready ir iebūvēta pašā Photoshop programmā.

    Tātad kā saglabāšanu notiek Photosgop CS3 mēs varam aplūkot bildē:

    [img]https://www.bildites.lv/images/623l26gwo39v5j6u7sj8.jpg[/img]

    Palaižot programmu “Windows Picture and Fax Viewer”, mēs redzam to, ka bildei nav nekāda fona, kaut arī rāmis ir lielāks nekā pati poga.

    [img]https://www.bildites.lv/images/z94lmyikgd86h0u7v9n.jpg[/img]

    5. Punkts.

    Kad esam saglabājuši un apskatījušies, kāda izskatās mūsu izveidotā poga, tad varam ķerties klāt pie otras pogas izveides. Pēc izmēriem mums vajag identisku pogu tai, kura tika izveidota pirms tam. Un šī iemesla dēļ mēs varam strādāt ar to pašu failu, ar kuru mēs iepriekš darbojāmies. Š ajā gadījumā es uzlikšu tikai to efektu, ka teksts mirgos. Protams, var arī likt citus efektus, piemēram, ka mirgos pati poga, vai arī – ka pogas malu krāsa izmainīsies, kad peles kursors nokļūs uz tās.

    Ja gadījumā atšķirsies pogu izmēri, tad jums pēc tam varētu būt problēmas ar mājas lapas izskatu….

    5.1. Punkts.

    Tātad mums tagad jāuzliek tekstam rāmis. Lai varētu uzlikt rāmi, tad sākumā iezīmējiet pašu tekstu. Lai iezīmētu tekstu, jums ir jāuzspiež ar kreiso peles taustiņu uz attiecīgā slāņa ikonas. Pēc tam izvēlaties iespēju “Stroke”, jeb kā tas parādīts bildē:

    [img]https://www.bildites.lv/images/lax3gxu1igelzt3hmpi.jpg[/img]

    Pēc tam, kad jūs esat to izdarījis, tad jums jāparādās šāds logs:

    [img]https://www.bildites.lv/images/ozk5trsnscj00j6n1tj5.jpg[/img]

    Š ajā bildē ir redzams, kādus parametrus esmu izmantojis, ka līnijas biezums ir 1 px, bet izmantotā krāsa ir šāda #cc5630

    6. Punkts.

    Kad tas ir izdarīts, saglabājiet bildi atkal tāpat, kā jūs to darījāt iepriekš.

    Bildē mēs tagad redzam, kāda izskatās otra poga:

    [img]https://www.bildites.lv/images/trczt0sx25vmip8jwt6c.gif[/img]

    7. Punkts.

    Tagad varam pievienot pašu kodu. Sākumā izveidojiet jaunu mapi, piemēram, ar nosaukumu Webpoga. Pēc tam ielieciet mapē abas izveidotās pogas. Tad šajā pašā mapē izveidojiet dokumentu ar paplašinājumu *.html jeb, īsi sakot, uzspiediet labo peles taustiņu -> New text document. Pēc tam atveram dokumentu un iekopējam šādu kodu:

    [img]https://www.bildites.lv/images/fsx5bmz2uyw4cqh5ftrd.jpg[/img]

    P.S. Kodu ievietoju kā bildi, jo izrādījās tas, ka phpBB neļauj ievietot skriptus.

    Koda skaidrojums:

    1. Vietāk, kur ir rakstīts http://www.notepad.lv liecina par to, ka ja uz tās bildes uzspiedīs, tad atvērsies notepad.lv weblapa jaunā pālūkprogrammas logā. Par atvēršanu jaunā logā atbild atribūts _blank. Par target atribūtiem sīkāk var lasīt http://www.kasis.lv mājas lapā.

    2. – Ja border ir 0, tad tas liecina par to ka bildei nebūs apkārt rāmis, bet scr=””webpoga1.gif” norāda to, ka šī ir pamata bilde.

    3.…onmouseover=”this.src=’webpoga2.gif'”… – Norāda to, ja peles kursors tiks novietots uz bildes “webpoga1.gif”, tad parādīsies bilde “webpoga2.gif”. Š is efekts tiek panākts izmantojot onmouseover komandu.

    4.…onmouseout=”this.src=’webpoga1.gif'” width=”109″ height=”38″ alt=””> – Norāda to, kāda bilde būs tad, kad peles kursors vairs neatradīsies uz bildes “webpoga1.gif” Tas tiek panākts ar komandu “onmouseout”

    5.Par pārējo html kodu daļu var izlasīt http://www.kasis.lv mājas lapā.

    P.S. Š eit ir izvietota vēl viena pamācība darbā ar Photoshop: Photoshop CS3 – abstraktās mākslas izveidošana

    Par populārākajiem bilžu formātiem (JPEG, GIF, PNG), kuri tiek izmantoti web lapu veidošanā var izlasīt šeit.

    #199596
    Jaunzems
    Participant

    labs raksts 🙂

    #199597
    ehex
    Participant

    Š itais noderēs! 🙂

    #199598
    samurajs
    Participant

    Wow… ja vēl man nebūtu jāizlabo ap 100 kļūdām (pamatā stulbas – izlaisti burti, garumzīmes utml.) – normis tiktu e-žurnaļugu pašā topa virsotnē 😀

    Bet nu raksts patiešām noderīgs.

    #199599
    daGrevis
    Participant

    Es darītu tā…

    Code:


    .button {
    background-image: url(’button.png’);
    height: 20px;
    width: 100px;
    }
    .button:hover {
    padding-top: 20px;
    }

    Pogas izmērs ir 40px augstumā. Ja pele ir augšā, tad pabīdās pa 20px uz leju un redz hover pogu, ja nē, tad redz pirmos 20px.

    #199600
    Jaunzems
    Participant

    es jau mazliet arī palīdzēju 🙂

    #199601
    McAnder
    Participant

    daGrevis variants ar css ir praktiskāks 🙂

    #199602
    PsihsKkads
    Participant

    Jay, urā, notepads pārvēršas no augstas raudzes IT ziņu portāla uz fotožopas tutoriaļiem piebāztu tenku lapeli 🙂

    #199603
    Jaunzems
    Participant

    token psihs kaut kāds

    #199604
    Wallaby
    Participant

    1) Nosaukums nav pareizs, nav paskaidrots, kādā vidē tā poga būs – HTMLā, C# vai kur citur.

    2) Š ādu pamācību derēja sadalīt divās daļās – viena Fotošopam, kā taisīt pogas, otra – kā sakodēt divas pogas.

    3) Es taisu atsevišķi CSS failā atribūtu:

    Code:


    #poga a:active { width: 198px; height: 36px; background-image: url(’/images/button1.png’); background-repeat: no-repeat; display: block }
    #poga a:hover { width: 198px; height: 36px; background-image: url(’/images/button2.png’); background-repeat: no-repeat; display: block }


    un HTMLā pēc tam tikai norāde:

    Code:



    nepareizi parādās, jābūt “div id vienāds ar poga”

    4) Labs raksts.

Tiek skatīts 1 ieraksts (no 10 kopumā)
  • Jums ir jāpieslēdzas sistēmai, lai varētu komentēt šo tēmu.
Jaunākais portālā