Share
For en uke siden, på vår søsterside, Webdesigntuts +, viste vi deg hvordan du designer en "Juicy Tabbed Slider" i Photoshop. I dag skal vi vise deg hvordan du faktisk koder den i noen få trinn. Ingen tung CSS eller Javascript kunnskap kreves - lover! Vi bruker den populære Nivo Slider til å håndtere animasjonen, så la oss grave oss inn!
Ok, så antar du at du har gått gjennom designfasen av denne opplæringen, nå burde du ha et ganske grunnleggende glidebryterelement i Photoshop (eller Fyrverkeri) -format. Jeg skal skrive opp denne opplæringen som en "frittstående" glidebryter - noe som betyr at det i hovedsak vil være det eneste elementet på siden vi lager? men bruk bare noen få ekstra skritt etter det faktum, bør du kunne legge til dette i dine egne motiver og plassere / endre størrelsen på det som du vil!
Hva er bedre er at dette er helt skinnable og resizable - så hvis du har gjort noen tunge tilpasninger i den gratis PSD-en vi har gitt ut, vil du også kunne inkorporere dine franken-modifikasjoner her også!
Gå videre og last ned den nyeste versjonen av Nivo Slider fra deres side. Versjonen vi bruker er versjon 2.4, men med mindre de fullstendig overhaler hele kodebasen, er sjansene veldig gode at trinnene i denne opplæringen fortsatt vil fungere i versjon 2.5, 2.6 og fremover.
Det er viktig å merke seg det Vi oppdager ikke hjulet her. Vi skal ganske enkelt bruke sin "demo.html" -fil som vår egen operasjonsbase. Vi vil heller ikke avvike langt fra den offisielle bruksdokumentasjonen.
Som webdesigner jobber jeg mye arbeid der jeg bare modifiserer og kaprer andres åpen kildekode - det gjør du sannsynligvis. Det er en viktig ferdighet å ha, med mindre du har tenkt på å lære hvert eneste stort kodingsspråk der ute, og du er villig til å holde kunnskapen oppdatert. Oppriktig tror jeg det er litt dumt - så å finne ut hvordan du bruker andres kode er en av de viktigste ferdighetene du kan ha.
I de fleste tilfeller (som i denne) er alt som virkelig kreves en grov kunnskap om HTML og CSS og evnen til å lese dokumentasjon.
Vi starter det neste trinnet ved å åpne mappen "demo" - så fortsett og gjør det før vi går videre.
I dette trinnet skal vi bare forsøke å få en ide for hvordan Nivo Slider fungerer. Hver glidebryter der ute skal jobbe litt annerledes, så det er verdt å ta noen minutter å gjøre seg kjent med det spesielle skriptet du har tenkt å bruke på et prosjekt.
Hvis du tar en rask titt på koden for Nivo Slider (inne i filen demo.html), vil du legge merke til at alle de store stilene og strukturen håndteres fra "style.css" -filen. Faktisk er den faktiske HTML-koden ganske enkel når du har henvist de riktige skriptene i HEAD-delen av demo.html.
La oss starte vår gjennomgang ved å se på linjene med kode fra toppteksten. Vi trenger ikke å endre disse, men de må være til stede i enhver fil som vi vil bruke glidebryteren på:
Accentsconagua