Share
Il y a une semaine, sur notre site jumeau, Webdesigntuts +, nous vous avons montré comment concevoir un "curseur glacé juteux" dans Photoshop. Aujourd'hui, nous allons vous montrer comment coder le fichier en quelques étapes rapides. Aucune connaissance CSS ou Javascript lourde requise - promis! Nous allons utiliser le populaire Nivo Slider pour gérer l'animation, alors on va creuser!
Bon, si vous avez terminé la phase de conception de ce didacticiel, vous devez maintenant disposer d’un élément de base très coulissant au format Photoshop (ou Fireworks). Je vais rédiger ce didacticiel en tant que curseur "autonome", ce qui signifie qu'il s'agira essentiellement du seul élément de la page que nous créons. mais en n'utilisant que quelques étapes supplémentaires après le fait, vous devriez pouvoir l'ajouter à vos propres conceptions et le positionner / le redimensionner comme vous le souhaitez.!
Ce qui est mieux, c’est que c’est complètement personnalisable et redimensionnable - donc, si vous avez apporté des modifications importantes au PSD gratuit que nous vous avons remis, vous pourrez également y inclure vos modifications en franken.!
Allez-y et téléchargez la dernière version du Nivo Slider à partir de leur page. La version que nous allons utiliser est la version 2.4, mais à moins de refondre complètement leur base de code, il est très probable que les étapes de ce didacticiel fonctionnent toujours dans les versions 2.5, 2.6 et continue..
Il est important de noter que nous ne réinventons pas la roue ici. Nous allons presque utiliser leur fichier "demo.html" comme notre propre base d'opérations. Nous ne nous écarterons pas non plus de la documentation d'utilisation officielle.
En tant que concepteur web, je fais beaucoup de travail, je modifie et détoure simplement le code source ouvert d'autres personnes - vous faites probablement la même chose. C'est une compétence importante à avoir à moins que vous ne vouliez apprendre chacune des principales langues de codage et que vous souhaitiez constamment mettre vos connaissances à jour. Franchement, je pense que c'est un peu bête - donc savoir comprendre comment utiliser le code d'autres personnes est l'une des compétences les plus importantes que vous puissiez avoir..
Dans la plupart des cas (comme dans celui-ci), tout ce qui est vraiment nécessaire est une connaissance approximative de HTML et de CSS et la capacité de lire la documentation..
Nous allons commencer la prochaine étape en ouvrant le dossier "démo" - alors allez-y et faites-le avant de poursuivre..
Dans cette étape, nous allons simplement essayer de nous faire une idée du fonctionnement du Nivo Slider. Chaque curseur fonctionnant différemment, il est donc utile de prendre quelques minutes pour vous familiariser avec le script que vous souhaitez utiliser dans un projet..
Si vous jetez un coup d'œil au code du curseur Nivo (à l'intérieur du fichier demo.html), vous remarquerez que tous les principaux styles et structures sont gérés à partir du fichier "style.css". En fait, le code HTML réel est assez simple une fois que vous avez référencé les scripts appropriés dans la section HEAD de demo.html..
Commençons notre procédure en examinant les lignes de code de l'en-tête. Nous n’avons pas besoin de les modifier, mais ils doivent figurer dans tout fichier sur lequel nous souhaitons utiliser le curseur:
Accentsconagua