Kthehu në faqen e mëparshme joomla 3. Si të krijoni një buton prapa në një faqe interneti

Në këtë video tutorial do të shikojmë 3 opsione se si të krijoni një buton BACK për të lëvizur nëpër faqe në faqet e mëparshme në rend të kundërt. Butoni BACK është gjithashtu i nevojshëm kur lidhjet nga disa faqe të sajtit (A1, A2...An) të çojnë në të njëjtën faqe (B), dhe nga kjo faqe (B) duhet të ktheheni në faqen e mëparshme (An) e faqes nga e cila keni arritur në faqen (B).

Shikoni video-tutorialin e ri:

Në këtë video tutorial do të krijojmë një buton për t'u kthyer në faqet e mëparshme të faqes Programi Adobe Muza. Ky buton do të kthehet në të njëjtën rrugë që kemi ndjekur në sajt.

Për të bërë këtë mësim, përgatita një projekt të vogël, ose më saktë nuk mund të quhet i vogël, këtu përbëhet nga faqe të nivelit të lartë, faqe të nivelit të parë, dhe gjithashtu për faqen "faqe-2" ka disa fëmijë të tjerë. faqet. Dhe për shumëllojshmëri, kam krijuar dy shabllone. Kam aplikuar shabllonin e parë në tre faqet e para. Dhe unë aplikova shabllonin e dytë për të gjithë të tjerët.

Le të fillojmë. Ne do të krijojmë një buton "Kthehu" në "Model C" në mënyrë që të shfaqet menjëherë në ato faqe në të cilat aplikohet ky shabllon. Unë shkoj për të redaktuar këtë shabllon dhe këtu do të fusim butonin tonë prapa.

Mund të fusim një buton "Kthehu" në tre mënyra. kam dosje speciale, të cilën e kisha përgatitur tashmë në një bllok shënimesh. Dhe ka tre mënyra, tre kode, duke përdorur të cilat ne mund të fusim një buton të tillë në faqe.

Opsioni i parë është vetëm tekst. Butoni do të jetë në formën e tekstit. Unë kopjoj këtë kod:

Dhe e ngjis në shabllon. Duket kështu. Ne kemi vetëm tekst dhe ai është i theksuar me të bardhë. Unë do ta postoj këtu. Për të kuptuar se si funksionon e gjithë kjo, ne shtypim tastet ctrl+alt+E për të parë të gjithë faqen me të gjitha faqet e saj në shfletues. Kështu duket faqja kryesore e faqes. Mund të shfletojmë menunë, të zgjedhim faqe. Këtu kemi menutë rënëse. Dhe, për shembull, nga faqja kryesore shkuam menjëherë në faqen "faqe-3". Dhe këtu kemi një buton prapa.

Ky buton është aktiv, por kur kaloni miun mbi të, një dorë me gisht nuk shfaqet. Ne mund të klikojmë me siguri në këtë buton dhe do të ridrejtohemi përsëri në faqen kryesore. Në të njëjtën mënyrë, ne mund të klikojmë në faqen “faqe-3”, pastaj të shkojmë në faqen “faqe-4” dhe të klikojmë në butonin “Kthehu”, do të na çojë në faqen “faqe-3” dhe nëse klikojmë në butonin "Kthehu" përsëri ", më pas na çon në faqen kryesore. Kështu funksionon butoni prapa.

Por ky buton vështirë se mund të quhet buton, pasi është pikërisht ky mbishkrim, i theksuar me të bardhë. Nëse duam ta modifikojmë në Muse, mund të ndryshojmë vetëm madhësinë e tekstit, për shembull, do të vendos "36" këtu që ta shihni më mirë. Për mendimin tim, ne nuk mund të ndryshojmë ngjyrën e tekstit. Tani do të përpiqem të vendos të kuqe. Zgjodha të kuqen, por kjo nuk ndikoi aspak në shkronjat tona, kështu që nuk mund ta ndryshojmë ngjyrën. Ne mund të ndryshojmë madhësinë. Le të përpiqemi ta bëjmë atë të guximshme dhe ta përqendrojmë atë. Gjithçka që mund të bëjmë është të modifikojmë si kjo. Nëse duam ta mbushim këtë bllok, për shembull, ta bëjmë atë portokalli, atëherë teksti ynë do të theksohet akoma me të bardhë dhe, në parim, nuk duket shumë bukur.

Tani do ta kopjojmë. Shtyp ctrl+C dhe shkoj te programi dhe shtyp ctrl+V për ta ngjitur në sajt. Duket si kjo lidhje. Lidhja jonë është blu. Tani ajo nuk është shumë e dukshme. Le të bëjmë gjithashtu një font të 36-të për ta zmadhuar dhe për ta parë më afër. Këtu kemi vetëm një lidhje blu. Nëse tani shtypim ctrl+alt+E, do të shohim se kur shikohet, duket si kjo lidhje e rregullt blu. Le ta kalojmë edhe nja dy herë për të parë, klikoni një herë, dy herë, kthehuni. Kjo lidhje ka të njëjtën pamje si një lidhje e zakonshme.

Ne mund të aplikojmë stilet e lidhjeve në të në Adobe Muse. Gjeni stilet e lidhjeve në seksionin "Hyperlinks", zgjidhni "Modifiko stilet e lidhjeve". Unë tashmë kam një version të përgatitur. Tani unë tashmë kam një version të përgatitur. Ju mund të shihni se ajo ka një stil të aplikuar për të. Në gjendjen standarde dhe kur rri pezull kursorin e miut, ngjyra është blu dhe në gjendje aktive - e kuqe. E patë duke parë. Stili i dytë që krijova ishte thjesht të gjitha gjendjet e zeza. Ne mund ta aplikojmë këtë stil në këtë buton. Për shembull, unë do të zgjedh dhe zbatoj këtë stil të personalizuar në këtë buton. Dhe do të shihni që mbishkrimi ynë është bërë i zi.

Këtu mund të bëjmë edhe një mbushje, për shembull, do ta bëj me të njëjtën ngjyrë portokalli. Këtu tashmë mund të redaktoni tekstin. Le ta vendosim në mes dhe ta bëjmë të guximshme. Dhe, në parim, ky opsion është tashmë më i ngjashëm me një buton. Nuk ka më një theks të tillë të bardhë, dhe, në parim, ky opsion është tashmë mjaft i përshtatshëm. Gjatë shfletimit (ctrl+alt+E), le të shkojmë në faqen "page-3", në faqen "page-4" dhe të klikojmë përsëri. Ky buton funksionon saktësisht njësoj si i pari, vetëm se ka më shumë opsione për modifikimin e dizajnit.

Dhe opsioni i tretë se si mund të vendosim një buton është që butoni të jetë një foto. Unë kopjoj këtë kod:

Shkoj te Muse dhe klikoj "Fut". Dhe ky opsion i tretë që kemi është një foto. Në mënyrë që ne të kemi një lloj fotografie këtu, duhet të shkarkojmë një skedar fotografie nga Interneti ose ta krijojmë vetë. Ne e shtojmë figurën përmes funksionit "File" të programit, zgjidhni "Shto skedarë për transferim". Unë kam shkarkuar tashmë disa fotografi nga Interneti. Ne mund të zgjedhim një. Le ta zgjedhim këtë me butonin prapa. Tani nëse shikojmë në seksionin "Burimet", kemi shtuar një buton "back2.png" - "Transmet". Ne e kemi këtë skedar për transferim.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Mbrapa" / > < / a >

Kjo është ajo, klikoni "OK". Ne nuk do të shohim asnjë ndryshim në vetë Muse. Ne do t'i shohim të gjitha ndryshimet vetëm kur shikojmë faqen në një shfletues. Le të shtypim përsëri ctrl+alt+E për të parë faqen në shfletues dhe të përpiqemi të shfletojmë faqet tona.

Le të shkojmë në faqen, për shembull, "faqe 2-1", tani le të shkojmë në faqen "faqe-2", tani le të shkojmë në faqen "faqe 3", pastaj në faqen "faqe-4". Dhe tani, nëse shtypim butonin e pasme, do të kthehemi në mënyrë sekuenciale në mënyrë të kundërt faqja kryesore faqe. Klikoni "Kthehu", kaloni në faqen "faqe-3", në faqen "faqe-2". Dhe këtu nuk kemi më një buton. Nëse e vendosim atë në një shabllon që është aplikuar në faqen "faqe-2", atëherë do të kishim gjithashtu një buton "Kthehu" këtu. Meqenëse nuk kemi një të tillë, duhet të lundrojmë në faqen kryesore vetëm duke klikuar në butonin "Home" në meny. Le të shkojmë, për shembull, te faqja “faqe 2-2-2”, pastaj te faqja “faqe 2-2-1”, pastaj te faqet “faqe-3” dhe “faqe-4”. Dhe tani në rend të kundërt: faqja "faqe-3", faqja "faqe 2-2-1", faqja "faqe 2-2-2" dhe në faqen kryesore.

Sigurisht, nuk duhet ta vendosni këtë buton në faqen tuaj të internetit, por përdorni shigjeta të rregullta në shfletuesin tuaj. Por nëse dëshironi që një buton i tillë të jetë në faqen tuaj, atëherë mund ta bëni në këto mënyra... Dhe lidhja e artikullit do të jetë nën këtë video. Kjo është e gjitha. Dmitry Shapovalov ishte me ju. Pëlqejeni këtë video, regjistrohuni në kanal, shkruani komente më poshtë dhe ju them lamtumirë deri në mësimet e ardhshme të videos.

Në këtë artikull ne do të shikojmë se si mund të krijoni një buton "Kthehu prapa" në çdo vend që ju nevojitet. Unë mendoj se nga emri i butonit tashmë është e qartë se çfarë do të ndodhë kur të klikoni mbi të. Një buton i tillë mund të futet si në një kategori ashtu edhe në vetë materialin. Gjithçka bëhet mjaft thjesht.

Ka disa opsione se si mund të shtoni një buton, por unë personalisht përdora vetëm një mënyrë. Domethënë, opsioni i tretë nga tre të propozuara. Pak më tej do t'ju tregoj pse.

Çfarë opsionesh kemi:

Avantazhi i opsionit të tretë është se nëse duhet të redaktoni tekstin në një buton ose të ndryshoni/shtoni një klasë stili, do t'ju duhet vetëm të rregulloni vetë modulin dhe jo ta rregulloni butonin në të gjitha vendet ku ndodhet.

Pra, në një nga faqet e mia përdora opsionin e tretë:

Moduli “HTML code” u krijua dhe kodi i butonit u fut aty duke përdorur shtesën “Sourcerer”, i cili bën të mundur shtimin e çdo kodi në material.

Kodi im i butonit të punës:

Kthehu prapa

Teksti është zbukuruar pak me një shigjetë duke përdorur komponentë nga Bootstrap 3, dhe vetë butoni është stiluar përmes CSS.

Shumë studime të përdorshmërisë tregojnë se përdoruesit (të rinj dhe me përvojë) shpesh përdorin butonin "kthehu" në shfletues. Fatkeqësisht, dizajnerët dhe tregtarët e faqes së përparme rrallë konsiderojnë se çfarë implikimesh mund të ketë kjo për përdorshmërinë, duke pasur parasysh modelet moderne të dizajnit të uebit që përdorin aplikacione, animacion, video dhe më shumë. Shpesh, struktura teknike e këtyre paraqitjeve nuk i përgjigjet saktë funksionit "kthehu prapa", duke thyer modelin mendor të përdoruesit dhe duke degraduar përvojën e tyre.

Pasojat e kësaj mund të jenë të tmerrshme: gjatë eksperimenteve, reagimi joadekuat i faqes ndaj shtypjes së butonit "mbrapa" ishte arsyeja për largimin e shumë përdoruesve, me abuzime dhe komente jo të këndshme. Në shumicën e rasteve, edhe subjektet e nderuar me flokë gri e humbën durimin tmerrësisht.

Nga ky artikull do të mësoni:

• çfarë presin përdoruesit nga butoni "kthehu prapa";
• cilat janë 5 gabimet më të shpeshta;
• një zgjidhje e thjeshtë për këto probleme.

Zgjidhja është vërtet shumë e thjeshtë, por shpesh neglizhohet edhe nga markat më të mëdha. A do ta rregullojmë këtë gabim?

Pritjet e përdoruesve

Shkurtimisht: Përdoruesit presin një buton "kthehu prapa" për t'u treguar atyre atë që ata perceptojnë si faqja e mëparshme. Fjala "perceptoj" është shumë e rëndësishme, sepse ka një ndryshim të madh midis asaj që duket të jetë faqja e mëparshme dhe asaj që është teknikisht.

Shtrohet pyetja: çfarë saktësisht interpretojnë përdoruesit si një faqe e re? Në shumicën e rasteve, nëse një faqe është dukshëm e ndryshme vizualisht, por është konceptualisht e lidhur me sitin, atëherë ajo perceptohet si e re. Prandaj, është shumë e rëndësishme të monitorohet se si faqja përpunon elementë të ndryshëm ndërveprues: kuti ndriçimi, formularë, filtra, etj.

Shumica e vizitorëve nuk i kuptojnë aspektet teknike, por mbështeten vetëm në idetë intuitive se si duhet të funksionojë burimi. Prandaj, kur klikojnë butonin "mbrapa", ata presin një faqe ku tashmë kanë pasur një përvojë të rëndësishme, por marrin një faqe me një ndërfaqe paksa të ndryshuar.

Më poshtë janë elementët më të njohur ndërveprues dhe rekomandimet për përdorimin e tyre për të maksimizuar përvojën dhe përdorshmërinë e përdoruesit.

Qëllimi i zbatimit të mbivendosjeve dhe kutive të lehta është t'i tregojë përdoruesit një element që shfaqet në krye të faqes. Prandaj, përdoruesit i perceptojnë elementë të tillë si faqe të reja dhe shtypin butonin "mbrapa" për t'u kthyer në pozicionin e tyre origjinal - por ata përfundojnë në një vend krejtësisht të ndryshëm nga sa prisnin. Kjo është veçanërisht për të ardhur keq, sepse përdorimi i kutive të lehta vetëm shumëfishon perceptimin negativ të faqes së internetit - shumica e përdoruesve nuk i pëlqejnë këto elemente në faqet e blerjeve në internet.

Përdorimi i filtrave shpesh transformon një faqe dhe i jep një personi një përvojë të re. Prandaj, pas renditjes, faqja perceptohet si e re, edhe nëse asgjë nuk është ngarkuar në të. Kjo ndodh sepse pas çdo ndërveprimi të vizitorit me një faqe dyqani online, gjenerohet një rezultat i ri.

Ky shembull thekson se njerëzit nuk hyjnë në aspektet teknike kur përcaktojnë faqe e re, por përdorni vetëm intuitën dhe perceptimin e formuar.

3. Formulari i regjistrimit/pagesës

Faqet e pagesave perceptohen si faqe të reja, dhe akoma më keq - si një proces me shumë hapa, çdo fazë e të cilit mund të anulohet me një buton "kthehu prapa".

Kjo qasje mund të shkaktojë probleme, një shembull i thjeshtë është që një person dëshiron të kthehet një hap prapa në plotësimin e një formulari për të redaktuar informacionin e futur. Shtypja e butonit "mbrapa" e kthen atë në shportë dhe fshin të gjitha (!) të dhënat e futura. Irritimi dhe largimi nga vendi është një efekt natyral.

Teknologjia AJAX mund të mos përmbushë pritjet e përdoruesve: Çdo faqe AJAX është teknikisht nën të njëjtën URL, por duket se faqe të reja po hapen.

Në kontekstin e e-commerce, përdoruesit kanë një perceptim të qartë se faqja 3 dhe faqja 4 janë të ndara dhe mund të lundrohen nga faqja 4 në faqen 3 duke përdorur butonin prapa.

Përdoruesit nuk janë gati të heqin dorë nga butoni prapa

Duke marrë parasysh sa përdoret gjerësisht kjo veçori e shfletuesit të internetit, çështja e mospërputhjes midis pritshmërive të përdoruesve dhe vizionit të zhvilluesve bëhet kritike dhe nuk duhet të merret lehtë.

Përdoruesit e pëlqyen veçanërisht butonin "kthehu prapa". aplikacionet celulare dhe faqet e internetit. Siç tregoi studimi versionet celulare faqet, shumica e përdoruesve e përdorën këtë funksion në të gjitha burimet e ofruara. Për më tepër, përdorimi i butonit nuk kufizohet në kthimin e një faqeje - disa subjekte e shtypën atë deri në 15 (!) herë radhazi.

Përdoruesit e PC-ve gjithashtu shpesh shtypin butonin - por jo aq sa pronarët e telefonave celularë, sepse përdoruesit kompjuterë desktop Lundrimi i përshtatshëm i faqes është i disponueshëm.

Zgjidhje

Lajmi i mirë është se HTML5 ka një zgjidhje relativisht të thjeshtë për problemin dhe quhet HTML5 History API. Më konkretisht, funksioni history.pushState() ju lejon të ndryshoni URL-në pa ringarkuar faqen. Prandaj, faqja do të sillet në përputhje me pritjet e përdoruesit që klikoi butonin "kthehu prapa".

Mirëdita, kam një pyetje se si ta zhvendos butonin pas dhe ta vendos atë pranë butonit tjetër kur të bësh një porosi, tani më duket kështu https://yadi.sk/i/_ZNvGrvEhqSk3 poshtë, ai ndalon së punuari Kodi është përgjegjës për ..

Ka një zgjidhje

Përshëndetje, a mundet dikush të më thotë se si të bëj një buton prapa, për shembull, në karrocën e blerjeve, në mënyrë që një person të mund të kthehet në faqen e mëparshme?

Fusni një buton kudo që dëshironi në shabllon, për shembull, këtë

+1

Kur shtyp butonin prapa në shfletues, të gjitha stilet duket se zhduken derisa të rifreskoj faqen. Tema e paracaktuar duhet të shfaqet si në pamjen e mëposhtme të ekranit) Më tregoni cili është problemi

Përshëndetje, kam bërë një buton "Kthehu" në karrocë, as një buton, por vetëm një lidhje me kodin Kthehu prapa Tani kur ktheheni në karrocë ...

Ka një zgjidhje

Mirëmëngjes Kam hasur problemin e mëposhtëm: kur shtoni një artikull në shportën tuaj dhe klikoni butonin "mbrapa" në shfletues, informacioni për artikujt në shportë (në bllokun shtesë) nuk ruhet derisa të rifreskoni faqen. ato. shkoni në faqe, shkoni ...

Faqja që treguat përdor një shtojcë për karrocën karrocë.

Mirëdita në çdo hap gjatë arkës, tregohet një buton "Tjetër" Në temën "Suprime", kam gjetur kodin e butonit.