Share
Una settimana fa, sul nostro sito gemello, Webdesigntuts +, vi abbiamo mostrato come progettare un "Juicy Tabbed Slider" in Photoshop. Oggi vi mostreremo come effettivamente codificarlo in pochi rapidi passaggi. Non sono richieste conoscenze approfondite su CSS o Javascript - promessa! Useremo il popolare Slider Nivo per gestire l'animazione, quindi cerchiamo di approfondire!
Bene, supponendo che tu abbia attraversato la fase di progettazione di questo tutorial, ora dovresti avere un elemento di scorrimento piuttosto semplice nel formato Photoshop (o Fireworks). Ho intenzione di scrivere questo tutorial come uno slider "autonomo" - significa che sarà essenzialmente l'unico elemento sulla pagina che creiamo? ma con pochi passaggi extra dopo il fatto, dovresti essere in grado di aggiungerlo ai tuoi disegni e posizionarlo / ridimensionarlo in qualsiasi modo desideri!
La cosa migliore è che questo è completamente personalizzabile e ridimensionabile, quindi se hai apportato delle pesanti personalizzazioni nel PSD gratuito che abbiamo distribuito, sarai in grado di incorporare anche le tue modifiche su franco!
Vai avanti e scarica l'ultima versione di Nivo Slider dalla loro pagina. La versione che useremo è la versione 2.4, ma a meno che non riescano a revisionare completamente l'intera base di codice, è molto probabile che i passaggi di questo tutorial funzionino ancora nella versione 2.5, 2.6 e sempre successivi.
È importante notare questo non stiamo reinventando la ruota qui. Stiamo praticamente usando il loro file "demo.html" come nostra base operativa. Non ci allontaneremo molto dalla Documentazione di utilizzo ufficiale.
Come web designer, faccio un sacco di lavoro dove sto semplicemente modificando e dirottando il codice open source di altre persone - probabilmente fai lo stesso. È un'abilità importante da avere a meno che tu non sia intenzionato ad apprendere tutti i principali linguaggi di programmazione là fuori e sei disposto a mantenere costantemente aggiornate le tue conoscenze. Francamente, penso che sia un po 'sciocco - quindi capire come usare il codice di altre persone è una delle abilità più importanti che puoi avere.
Nella maggior parte dei casi (come in questo caso), tutto ciò che è veramente richiesto è una conoscenza approssimativa di HTML e CSS e la possibilità di leggere la documentazione.
Inizieremo il prossimo passo aprendo la cartella "demo", quindi prosegui e procedi prima di procedere.
In questo passaggio, cercheremo semplicemente di farsi un'idea su come funziona Nivo Slider. Ogni dispositivo di scorrimento là fuori funzionerà in modo un po 'diverso, quindi vale la pena dedicare alcuni minuti per familiarizzare con il particolare script che si intende utilizzare su un progetto.
Se date una rapida occhiata al codice per Nivo Slider (all'interno del file demo.html), noterete che tutti i principali stili e strutture vengono gestiti dal file "style.css". In effetti, il codice HTML effettivo è piuttosto semplice una volta che hai fatto riferimento agli script appropriati nella sezione HEAD di demo.html.
Iniziamo la nostra panoramica esaminando le righe di codice dall'intestazione. Non avremo bisogno di cambiarli, ma devono essere presenti in qualsiasi file su cui vogliamo usare il cursore:
Accentsconagua