Ce cours est visible gratuitement en ligne.

J'ai tout compris !
TP : diaporama original en CSS

TP : diaporama original en CSS

Mis à jour le jeudi 5 décembre 2013
  • 1 jour
  • Facile

Sujet
Nous allons apprendre à créer un diaporama original dont toutes les miniatures se trouveront autour de la zone d'agrandissement. Il sera entièrement réalisé en CSS et dans un premier temps il comportera 36 photos.

Voici un exemple de ce que je vous propose d'apprendre à faire afin que vous compreniez bien (exemple volontairement très basique pour agréablement vous surprendre par la suite).

Public concerné
Ce TP a principalement été rédigé à l'intention des Zéros qui viennent de suivre le cours de M@teo21 et qui cherchent une assistance pour travailler un peu plus sur le CSS et être capables de gérer un site de plusieurs pages. Plus tard on simplifiera même le code à l'aide de PHP, grâce auquel on réduira drastiquement le nombre de pages en augmentant considérablement nos possibilités.

Prérequis
Pour la partie I : tous les chapitres requièrent une bonne connaissance du tutoriel XHTML / CSS de M@teo21.
Pour la partie II : il faudra en plus une bonne maîtrise du cours de PHP du même auteur (au moins la partie I dans sa totalité et le début de la partie II : Transmettre des données avec l'URL).

Raison d'être de ce TP
Pour être tout à fait franc, c'est le tutoriel que j'aurais moi-même aimé trouver pour continuer à apprendre rapidement et simplement. Et suivant le principe du Site du Zéro, je partage.

Quoi d'autre ?
On ajoutera progressivement des fonctionnalités à notre diaporama pour lui donner de la gueule ! Et vous allez apprendre à le modifier selon vos souhaits sans plus avoir besoin de moi. C'est-à-dire un nombre de photos variable, des tailles et des formes différentes, de la transparence, des bordures… Un TP, quoi !

Précisions
Il ne sera absolument pas question de JavaScript ou de Flash dans ce TP, on parlera uniquement CSS et XHTML.
Il n'est pas prévu de faire fonctionner ce diaporama sur IE6/7/8. Pas de patch IE au programme, donc.

Voici ce que vous saurez faire à la fin de ce tutoriel !

Image utilisateur
Image utilisateur

Alors, motivés ?

déroulement d'un cours

  • 1

    Dès aujourd'hui, vous avez accès au contenu pédagogique et aux exercices du cours.

  • 2

    Vous progressez dans le cours semaine par semaine. Une partie du cours correspond à une semaine de travail de votre part.

  • !

    Les exercices doivent être réalisés en une semaine. La date limite vous sera annoncée au démarrage de chaque nouvelle partie. Les exercices sont indispensables pour obtenir votre certification.

  • 3

    À l'issue du cours, vous recevrez vos résultats par e-mail. Votre certificat de réussite vous sera également transmis si vous êtes membre Premium et que vous avez au moins 70% de bonnes réponses.

Exemple de certificat de réussite
Exemple de certificat de réussite