Share
Cu o săptămână în urmă, pe site-ul nostru sursă, Webdesigntuts +, v-am arătat cum să creați un "Juicy Tabbed Slider" în Photoshop. Astăzi vă vom arăta cum să codificați acest lucru în câteva etape rapide. Nu este nevoie de cunoștințe grele despre CSS sau Javascript - promite! Vom folosi popularul Slider Nivo pentru a trata animația, așa că să ne grăbim!
Bine, presupunând că ați trecut prin faza de proiectare a acestui tutorial, acum ar trebui să aveți un element de cursor destul de simplu în formatul Photoshop (sau Fireworks). Voi scrie acest tutorial ca un slider "independent" - adică va fi în esență singurul element pe pagina pe care o creăm? dar folosind doar câțiva pași suplimentari după fapt, ar trebui să puteți adăuga acest lucru la propriile desene și să-l poziționați / redimensionați în orice fel doriți!
Ce este mai bine este că acest lucru este complet deranjant și redimensionabil - deci, dacă ați făcut orice personalizare grele în PSD-ul gratuit pe care l-am înmânat, veți putea să vă încorporați și modificările franken aici!
Continuați și descărcați cea mai recentă versiune a Sliderului Nivo din pagina lor. Varianta pe care o vom folosi este versiunea 2.4, dar dacă nu își revizuiesc complet codul, șansele sunt foarte bune că pașii din acest tutorial vor continua să funcționeze în versiunea 2.5, 2.6 și din ce în ce mai mult.
Este important să rețineți asta noi nu inventăm roata aici. Suntem aproape de mult să folosim fișierul "demo.html" ca bază proprie de operațiuni. Nu ne vom abate departe de documentația oficială de utilizare.
În calitate de web designer, am o mulțime de lucruri în care modificăm pur și simplu codul open source al altor persoane - probabil că faceți același lucru. Este o abilitate importantă de a avea excepția cazului în care intenționați să învățați fiecare limbă de codare majoră acolo și sunteți dispus să vă păstrați în permanență cunoștințele. Sincer, cred că este un fel de prostie - imaginându-vă cum să folosiți codul altor persoane este una dintre cele mai importante abilități pe care le puteți avea.
În cele mai multe cazuri (ca în acest), tot ceea ce este cu adevărat necesar este o cunoaștere aspru a HTML și CSS și abilitatea de a citi documentația.
Vom începe următorul pas prin deschiderea dosarului "demo" - deci mergeți înainte și faceți acest lucru înainte de a merge mai departe.
În acest pas, vom încerca pur și simplu să găsim o idee despre cum funcționează Sliderul Nivo. Fiecare cursor de acolo va funcționa puțin diferit, deci merită luați câteva minute pentru a vă familiariza cu scenariul special pe care intenționați să îl utilizați pentru un proiect.
Dacă analizați rapid codul pentru Sliderul Nivo (în interiorul fișierului demo.html), veți observa că toate stilul și structura majoră sunt tratate din fișierul "style.css". De fapt, codul HTML actual este destul de simplu odată ce ați făcut referire la scripturile corespunzătoare din secțiunea HEAD a demo.html.
Haideți să începem uita-te la liniile de cod din antet. Nu va trebui să le schimbăm, dar trebuie să fie prezenți în orice fișier pe care dorim să îl folosim:
Accentsconagua