TP : diaporama original en CSS
Last updated on Thursday, December 5, 2013
  • 1 jour
  • Facile

Free online content available in this course.

Got it!

Introduction du cours

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 ?

How courses work

  • 1

    You have now access to the course contents and exercises.

  • 2

    You will advance in the course week by week. Each week, you will work on one part of the course.

  • !

    Exercises must be completed within one week. The completion deadline will be announced at the start of each new part in the course. You must complete the exercises to get your certificate of achievement.

  • 3

    At the end of the course, you will get an email with your results. You will also get a certificate of achievement if you are a <a href="/premium>Premium</a> Member and if you got at least 70% of your answers right.

Example of certificate of achievement
Example of certificate of achievement