Aller au menu - Aller au contenu

Icône Prêts pour notre mégadiaporama ?

Avatar
Par Avatar Ceriko
Mise à jour : 18/12/2010
Difficulté : Facile Facile Durée d'étude : 2 heures
933 visites depuis 7 jours, dont 140 sur ce chapitre classé 134/786
Voici le dernier chapitre de la partie I.
J'ai estimé le temps d'étude à deux heures, il vous faudra au moins ça pour arriver à un joli résultat.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire
Retour en haut

Synthèse

Nous avons pu voir et revoir énormément de choses sur ce sujet de diaporama, une vraie mine d'or.
Mais à présent, les étapes qu'il reste avant de terminer ce TP vont prendre une tournure différente.

La meilleure méthode pour apprendre et retenir, c'est pratiquer et repratiquer. Je vous propose donc de repratiquer. :)

On doit tout refaire depuis le début, c'est ça ?

Non, ne vous inquiétez pas, je ne vous demanderai jamais quelque chose d'aussi cruel…
Ce que j'attends de vous, c'est juste que vous utilisiez tout ce que nous avons appris dans un seul et même bon gros diaporama.

Par « bon gros diaporama », j'entends plusieurs diaporamas présentant des photos différentes dans une seule et même structure.

Hep, hep, hep ! Toi, là-bas, qui essaies de t'échapper par-dessous la table, reviens ici tout suite ! :pirate:

Consignes


Il y en a parmi vous qui ont peur, je le sens. Mais vous n'avez aucune raison de vous en faire.
Nous ne sortirons pas du cadre de ce que nous avons vu dans les chapitres précédents et avec un peu de méthode et beaucoup de tests, ça devrait aller comme sur des roulettes.

Il y en a beaucoup qui vont réussir tout ça sans aide, mais si vous n'en faites pas partie je serai là de toute façon.

Reprenons ce que nous avons vu :
  • faire tenir des miniatures en lévitation autour d'un espace libre rectangulaire ;
  • faire apparaître des agrandissements au milieu d'un diaporama centré en hauteur et en largeur ;
  • faire apparaître des commentaires en même temps que les agrandissements ;
  • utiliser l'espace central pour le titre du diaporama et les liens vers les autres diaporamas (dans un conteneur avec couleur de fond transparente) ;
  • utiliser une image de fond pour le centre à l'échelle de celui-ci, et sous le texte ;
  • insérer un lien pour ajouter ou enlever une bordure ;
  • ajouter un ou plusieurs liens pour agrandir ou réduire la résolution ;
  • embellir le tout avec une couleur de fond, de la transparence et des arrondissements d'angles.

Au risque de me répéter, je vous demande d'appliquer tout ça dans un gros diaporama.

Précisions :

Nous créerons au moins deux diaporamas qui seront présentés dans au moins deux résolutions, chacune avec ou sans bordures.
Ce qui nous fait : 2 × 2 × 2 = Aïe !

Oui, c'est bien ça, nous aurons un minimum de huit fichiers HTML, et bien sûr un fichier CSS ainsi que plein de photos.

Dans mon cas, ce sera quatre diaporamas, deux résolutions, avec ou sans bordures, soit 16 fichiers HTML + 1 CSS et 144 photos !
Pfiouuu !

Pourquoi tu nous embêtes comme ça, deux ou quatre fichiers HTML ne suffiraient pas ?

Non ! Et il y a au moins trois bonnes raisons à cela :
  • asseoir ses bases est important, et appliquer ces bases en même temps dans un même projet est un bon moyen de pratiquer ;
  • la suite du TP sur le PHP pourrait paraître moins justifiée et plus compliquée si vous ne vous êtes pas arraché les cheveux avec plusieurs fichiers au préalable ;
  • il faut bien au moins un peu se prendre la tête, et aussi, plus on se tape la tête contre les murs maintenant, plus le plaisir sera grand dans la partie II.


Priorités


Une bonne question à se poser serait :

Quel ordre devrais-je suivre dans ma liste de choses à faire pour me compliquer le moins possible ?

En totale contradiction avec ce que l'on fait souvent : commencer par le plus agréable, ce qui se voit, mais surtout ce qui pollue la lecture d'un fichier en chantier.

Vous m'aurez compris, je vous conseille ici de laisser les fioritures de côté jusqu'à ce que tout fonctionne, ensuite seulement il sera temps de peaufiner.
Il faudra donc dans un premier temps faire sans opacity, border-radius et consorts.

J'aurais bien inclus background-color dans la liste des propriété qui peuvent attendre, mais sachez tout de même qu'elle est souvent utile pour repérer et comprendre des problèmes de rendu.
Pensez à utiliser cette astuce en cas de besoin.

Pareil pour le texte, il sera temps une fois que tout fonctionne d'ajouter plein de commentaires et de passer du temps à confectionner un joli menu.

Hypothèses d'organisation


Nous savons que nous aurons autant de fichiers HTML que de diaporamas, fois le nombre de résolutions, fois deux (avec ou sans bordures). Mais comment allons-nous traiter le CSS ? Plusieurs options s'offrent à nous :

  1. La barbare

    Méthode qui consisterait à intégrer l'intégralité du CSS au sein de chaque fichier HTML.

    • Avantages :
      • pas de fichier CSS à créer ni à gérer ;
      • tout notre CSS est modifiable depuis le fichier HTML.

    • Inconvénients :
      • impossibilité de modifier le CSS de sorte qu'il s'applique à tous les fichiers ;
      • utilisation inutile de bande passante puisqu'il y aurait beaucoup de redondance (le poids total de nos fichiers serait inutilement plus lourd qu'il ne devrait).


  2. La futée

    Méthode qui consisterait à créer quatre fichiers CSS différents (petit avec bordures, petit sans bordures, grand avec bordures, grand sans bordures) et d'appeler le fichiers CSS en fonction des besoins.

    • Avantages :
      • il est inutile de mettre du CSS dans nos fichiers HTML ;
      • on limite au maximum les redondances.

    • Inconvénients :
      • le principal problème de cette solution est qu'il ne serait pas possible de modifier le CSS afin qu'il s'applique à toutes les feuilles en même temps, chaque modification concernant tous les fichiers HTML (couleur de fond, taille du texte, etc.) impliquerait la modification des quatre fichiers CSS.


  3. La compliquée

    Méthode qui consisterait à inscrire tout le CSS dans un fichier à part.

    • Avantages :
      • il est inutile de mettre du CSS dans nos fichiers HTML ;
      • on évite les redondances.

    • Inconvénients :
      • cela impliquerait d'attribuer des id différents au div #diaporama des quatre différents types fichier HTML (petit sans bordures, petit avec bordures, grand sans bordure, grand avec bordures) afin de pouvoir les modifier depuis le fichier CSS, unique source de CSS ;
      • il faudrait souvent multiplier le nombre de sélecteurs CSS par quatre pour ajuster certaines valeurs (largeurs, hauteurs, positions…) spécifiques à chaque cas, ce qui serait lourd et rendrait un fichier assez conséquent.


  4. La raisonnable

    Méthode qui consisterait à écrire le CSS commun à tous les fichiers dans une feuille CSS à part et inclure le reste (ce qui change) dans chaque fichier HTML.

    • Avantages :
      • on évite les redondances ;
      • on peut garder le même id #diaporama dans tous les fichiers HTML, ce qui simplifie grandement notre CSS ;
      • on peut modifier ce qui est de commun une fois pour toutes dans un seul endroit ;
      • bref, il n'y a que des avantages…

    • Inconvénients :
      • … et pas ou peu d'inconvénients.


Notre choix


Si vous avez lu ce qui précède, je pense que vous avez compris quelle méthode nous allons utiliser…
Nous choisirons la méthode raisonnable, mais sachez que la méthode compliquée serait aussi très bien adaptée à notre cas.

Mais… que va-t-il se passer si on appelle un fichier CSS et qu'on ajoute du CSS dans le fichier HTML, ça ne va pas faire trop de CSS ? Parce que je ne voudrais pas que ça ne fonctionne pas !

En effet, ça peut être déroutant comme façon de procéder, mais il n'y a aucun problème.
Voici ce qui se passe.
  • Dans le fichier HTML, on dit au navigateur qu'il doit lire une feuille CSS distante, ce qu'il fait. Il appliquera le style en fonction de sa lecture (et de son interprétation, mais ça, c'est une autre histoire).
  • Ensuite, il voit qu'il y a aussi du code CSS directement dans le fichier HTML. Il le lit donc et l'ajoute au CSS précédent.
  • Si le CSS présent dans le HTML entre en conflit avec celui qui a été défini dans la feuille CSS (ce qui ne devrait pas être le cas dans notre exemple), le CSS prendra en compte la dernière modification (le CSS présent dans le HTML) et l'appliquera de son mieux au contenu HTML.
C'est plutôt simple et logique, vous ne trouvez pas ?

Procédure



Première étape


Il faudra commencer par préparer un squelette de diaporama nu de formatage (avec apparition de commentaires) qu'on utilisera pour créer les quatre configurations suivantes :
  • un diaporama faible résolution sans bordures ;
  • un diaporama faible résolution avec bordures ;
  • un diaporama haute résolution sans bordures ;
  • un diaporama haute résolution avec bordures.

En s'aidant bien sûr des chapitres précédents au besoin.

Puis, une fois que tous fonctionneront, il faudra enlever le CSS que les quatre fichiers HTML ont en commun pour le mettre dans un fichier CSS à part.

Deuxième étape


À ce moment-là, nous aurons déjà terminé un de nos diaporamas (une série de photos) et il nous suffira de dupliquer ces quatre fichiers et de les modifier autant de fois que nous avons de diaporamas différents pour obtenir notre mégadiaporama.

Bien sûr, il faudra changer les chemins vers les images, les liens, les titres, etc., mais cette méthode est néanmoins très rapide.

En fait, une fois que vous avez créé un diaporama, en ajouter un autre ou bien trois autres ne fait pas une énorme différence en terme de travail à fournir.
Le plus long sera de sélectionner les plus belles photos.

Dernière étape


Une fois que les fichiers s'appelleront, que les diaporamas grossiront et rapetisseront d'un clic et que les bordures apparaîtront puis disparaîtront de même, il ne nous restera plus qu'à modifier le style commun à appliquer à tous les fichiers dans le fichier CSS.

Et vous aurez de quoi faire !
  • Formater le texte (couleur, épaisseur, taille…).
  • Choisir des images et des couleurs de fond.
  • Écrire des commentaires pertinents.
  • Utiliser la transparence.
  • Arrondir les angles.
  • Et même toute autre idée farfelue qui pourrait traverser votre esprit.
Retour en haut

Le HTML

Puisque c'est probablement la première fois que vous manipulez autant de fichiers, je vais vous aider pas à pas.

Ce qui change


J'ai décidé de créer quatre diaporamas, je vais donc d'abord terminer l'un d'entre eux avant de dupliquer les fichiers et de modifier ce qui doit l'être pour les trois autres diaporamas.

Pour le premier diaporama, nous allons prendre comme base le code que nous avons vu ensemble lorsque nous avons ajouté des commentaires.

Avant de lui ajouter les liens vers les autres diaporamas, vers l'agrandissement ainsi que vers l'ajout de bordures, il faut établir une convention ; par exemple : 1 pour la petite résolution et 2 pour la grande, a pour la version sans les bordures et b avec.

Mes fichiers s'appelleront ainsi :
  • nom_du_premier_diaporama1a : 1er diaporama faible résolution sans bordures ;
  • nom_du_premier_diaporama2a : 1er diaporama haute résolution sans bordures ;
  • nom_du_premier_diaporama1b : 1er diaporama faible résolution avec bordures ;
  • nom_du_premier_diaporama2b : 1er diaporama haute résolution avec bordures.


Code source de mon fichier1a.html sans le CSS


Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title>Uxmal</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="megadiaporama.css" />
        <style type="text/css">
        …
        …
        …
	</style>
    </head>
    <body>
    <div id="diaporama">
        <div class="haut">
            <span class="distop"><img src="chemin/1.jpg" alt="Uxmal" /><img src="chemin/1.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/2.jpg" alt="Uxmal" /><img src="chemin/2.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/3.jpg" alt="Uxmal" /><img src="chemin/3.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/4.jpg" alt="Uxmal" /><img src="chemin/4.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/5.jpg" alt="Uxmal" /><img src="chemin/5.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/6.jpg" alt="Uxmal" /><img src="chemin/6.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/7.jpg" alt="Uxmal" /><img src="chemin/7.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/8.jpg" alt="Uxmal" /><img src="chemin/8.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/9.jpg" alt="Uxmal" /><img src="chemin/9.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/10.jpg" alt="Uxmal" /><img src="chemin/10.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
        </div>
        <div class="gauche">
            <span class="distop"><img src="chemin/36.jpg" alt="Uxmal" /><img src="chemin/36.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/35.jpg" alt="Uxmal" /><img src="chemin/35.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/34.jpg" alt="Uxmal" /><img src="chemin/34.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/33.jpg" alt="Uxmal" /><img src="chemin/33.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/32.jpg" alt="Uxmal" /><img src="chemin/32.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/31.jpg" alt="Uxmal" /><img src="chemin/31.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/30.jpg" alt="Uxmal" /><img src="chemin/30.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/29.jpg" alt="Uxmal" /><img src="chemin/29.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
        </div>
        <div class="centre">
	    <img class="imagefond" src="chemin/1.jpg" alt="background" />
	    <div class="contenu">
		<h1>Uxmal</h1>
		<h2>- Mexique -</h2>
		<p>
		    Photos de cités Mayas

		    <a href="uxmal1a.html">Uxmal</a>
		    <a href="citza1a.html">Chichen Itza</a>
		    <a href="palen1a.html">Palenque</a>
		    <a href="tikal1a.html">Tikal</a>
		</p>
		<div>
		    <a class="lienfloat" href="uxmal1a.html">Agrandir</a><a class="lienfloat" href="uxmal1b.html">Avec bordures</a>
		</div>
	    </div>
        </div>
        <div class="droite">
            <span class="distop"><img src="chemin/11.jpg" alt="Uxmal" /><img src="chemin/11.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/12.jpg" alt="Uxmal" /><img src="chemin/12.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/13.jpg" alt="Uxmal" /><img src="chemin/13.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="distop"><img src="chemin/14.jpg" alt="Uxmal" /><img src="chemin/14.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/15.jpg" alt="Uxmal" /><img src="chemin/15.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/16.jpg" alt="Uxmal" /><img src="chemin/16.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/17.jpg" alt="Uxmal" /><img src="chemin/17.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/18.jpg" alt="Uxmal" /><img src="chemin/18.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
        </div>
        <div class="bas">
            <span class="disbot"><img src="chemin/28.jpg" alt="Uxmal" /><img src="chemin/28.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/27.jpg" alt="Uxmal" /><img src="chemin/27.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/26.jpg" alt="Uxmal" /><img src="chemin/26.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/25.jpg" alt="Uxmal" /><img src="chemin/25.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/24.jpg" alt="Uxmal" /><img src="chemin/24.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/23.jpg" alt="Uxmal" /><img src="chemin/23.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/22.jpg" alt="Uxmal" /><img src="chemin/22.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/21.jpg" alt="Uxmal" /><img src="chemin/21.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/20.jpg" alt="Uxmal" /><img src="chemin/20.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
            <span class="disbot"><img src="chemin/19.jpg" alt="Uxmal" /><img src="chemin/19.jpg" alt="Uxmal" /><span>Commentaire (facultatif)</span></span>
        </div>
    </div>
</body>
</html>

Ce code est semblable à ce que nous avons déjà vu dans la partie sur les commentaires, à l'exception du menu.
  • J'ai donc inséré quatre liens pour mes diaporamas avec les mêmes caractéristiques (_1a.html pour la faible résolution sans bordures) afin que l'utilisateur navigue en gardant ses préférences.
    À la fin, je ferai en sorte que « uxmal1a » ne soit plus cliquable étant donné qu'on se trouve déjà dans ce fichier. Je le garde juste pour dupliquer le tout plus tard afin de créer les autres diaporamas qui auront besoin de ce lien.
    Il y aura pas mal de petites retouches à faire à la fin.
  • J'ai aussi ajouté deux liens vers le même diaporama pour agrandir sa taille ou ajouter des bordures.
    Je leur ai donné une classe parce que je voudrais les faire flotter pour les mettre côte à côte.

Puis, dans mon fichier uxmal2b.html, par exemple, j'aurai une succession de quatre liens se terminant par _2b.html.
Bien entendu, je proposerai aussi le même diaporama en petit (uxmal1b.html) et sans les bordures (uxmal2a.html).

C'est tout ce qu'il y avait à dire sur le HTML car tous nos fichiers ressembleront à ça !
Retour en haut

Le CSS inclus dans le HTML

Nous avons convenu que notre HTML ne contiendra que le code qui n'est pas commun à tous nos diaporamas et que le reste, ce qui est commun, sera placé dans un fichier CSS à part.

Cas sans bordures


On constate que tout ce qui doit être personnalisé dans chaque diaporama concerne la taille des éléments (et l'ajout de bordures dans un diaporama sur deux).

Il serait bien inutile ici que je vous indique mes propres mesures, je vous donne donc plutôt le moyen de trouver les mesures concernant votre diaporama :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#diaporama {
	width:		[ largeur_miniature × ( nbre_photos / 4 + 1 ) ]px;
	margin-left:	[ - ( largeur_miniature × ( nbre_photos / 4 + 1 ) ) / 2 ]px;
	height:		[ hauteur_miniature × ( nbre_photos / 4 + 1 ) ]px;
	margin-top:	[ - ( hauteur_miniature × ( nbre_photos / 4 + 1 ) ) / 2 ]px;
}
#diaporama div img:hover + img {
	width:		[ largeur_miniature × ( nbre_photos / 4 - 1 ) ]px;
	margin-left:	[ - ( largeur_miniature × ( nbre_photos / 4 - 1 ) ) / 2 ]px;
	height:		[ hauteur_miniature × ( nbre_photos / 4 - 1 ) ]px;
	margin-top:	[ - ( hauteur_miniature × ( nbre_photos / 4 - 1 ) ) / 2 ]px;
}
#diaporama div span:hover span{
	width:		[ largeur_miniature × ( nbre_photos / 4 + 1 ) - 10 ]px;
}
#diaporama div .disbot:hover span {
	top:		[ hauteur_miniature × ( nbre_photos / 4 + 1 ) ]px;
}
#diaporama div .distop:hover span {
	bottom:		[ hauteur_miniature × ( nbre_photos / 4 + 1 ) ]px;
}
#diaporama img {
	width:		[ largeur_miniature ]px;
	height:		[ hauteur_miniature ]px;
}
#diaporama .haut,
#diaporama .bas {
	width:		[ largeur_miniature × ( nbre_photos / 4 + 1 ) ]px;
	height:		[ hauteur_miniature ]px;
}
#diaporama .gauche {
	width:		[ largeur_miniature ]px;
	height:		[ hauteur_miniature × ( nbre_photos / 4 - 1 ) ]px;
}
#diaporama .centre,
#diaporama .centre img {
	width:		[ largeur_miniature × ( nbre_photos / 4 - 1 ) ]px;
	height:		[ hauteur_miniature × ( nbre_photos / 4 - 1 ) ]px;
 }

  1. Puisque je procède par formules, il devient inutile de vous donner le code de l'agrandissement sans bordures, ce serait exactement le même que celui ci-dessus.
    C'est à vous de faire les calculs en fonction des dimensions que vous voulez donner à vos miniatures.
  2. .haut et .bas d'une part et .centre et .centre img de l'autre ont été regroupés puisque le style qui leur est appliqué dans le fichier HTML est identique.


Cas avec bordures


On va ajouter des bordures à plusieurs éléments et modifier certaines largeurs et hauteurs pour être absolument certain qu'elles sont correctement appliquées dans tous les cas.

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#diaporama {
	width:[ largeur_miniature × ( nbre_photos / 4 + 1 ) ]px;
	margin-left:	[ - ( largeur_miniature × ( nbre_photos / 4 + 1 ) ) / 2 - bordure ]px;
	height:[ hauteur_miniature × ( nbre_photos / 4 + 1 ) ]px;
	margin-top:	[ - ( hauteur_miniature × ( nbre_photos / 4 + 1 ) ) / 2 - bordure ]px;
	border:		[ bordure ]px solid black;
}
#diaporama div img:hover + img {
	width:		[ largeur_miniature × ( nbre_photos / 4 - 1 ) - 2 × bordure ]px;
	margin-left:[ - ( largeur_miniature × ( nbre_photos / 4 - 1 ) ) / 2 ]px;
	height:		[ hauteur_miniature × ( nbre_photos / 4 - 1 ) - 2 × bordure ]px;
	margin-top:[ - ( hauteur_miniature × ( nbre_photos / 4 - 1 ) ) / 2 ]px;
}
#diaporama div span:hover span{
	width:		[ largeur_miniature × ( nbre_photos / 4 + 1 ) - 10 - 2 × bordure ]px;
	border:		[ bordure ]px solid black;
}
#diaporama div .disbot:hover span {
	top:[ hauteur_miniature × ( nbre_photos / 4 + 1 ) ]px;
}
#diaporama div .distop:hover span {
	bottom:[ hauteur_miniature × ( nbre_photos / 4 + 1 ) ]px;
}
#diaporama img {
	width:		[ largeur_miniature - 2 × bordure ]px;
	height:		[ hauteur_miniature - 2 × bordure ]px;
	border:		[ bordure ]px solid black;
}
#diaporama .haut,
#diaporama .bas {
	width:[ largeur_miniature × ( nbre_photos / 4 + 1 ) ]px;
	height:[ hauteur_miniature ]px;
}
#diaporama .gauche {
	width:[ largeur_miniature ]px;
	height:[ hauteur_miniature × ( nbre_photos / 4 - 1 ) ]px;
}
#diaporama .centre {
	width:[ largeur_miniature × ( nbre_photos / 4 - 1 ) ]px;
	height:[ hauteur_miniature × ( nbre_photos / 4 - 1 ) ]px;
 }
#diaporama .centre img {
	width:		[ largeur_miniature × ( nbre_photos / 4 - 1 ) - 2 × bordure ]px;
	height:		[ hauteur_miniature × ( nbre_photos / 4 - 1 ) - 2 × bordure ]px;
 }

  1. [ bordure ] représente le nombre de pixels que vous donnez à la bordure.
  2. Les formules des entrées qui ont été modifiées ou ajoutées par rapport au code précédent, et elles seules, ont été indentées de sorte qu'il soit plus aisé de les repérer.
  3. Il a fallu dissocier .centre et .centre img> puisque le style qui s'applique à eux n'est plus le même.

Ces formules sont longues, envahissantes et barbantes, c'est un fait, mais elles sont essentielles à la bonne compréhension de ce que nous faisons.
Sans elles, il faudrait souvent se tromper et beaucoup tâtonner pour arriver au même résultat.

Aimer ces formules n'est donc pas une option !

Et elles seront très utiles dans la partie II pour demander à PHP d'effectuer tous les calculs pour nous… :-°
Retour en haut

Le CSS à part

Nous allons maintenant écrire tout le CSS nécessaire à la structure et à l'affichage des agrandissements et des commentaires.
Il faudra que tout fonctionne parfaitement avant de passer à l'étape suivante, sans quoi vous allez mettre une pagaille tellement gigantesque qu'il vous faudra sûrement tout recommencer. :lol:

Première étape, le nécessaire


Voici ce dont nous avons besoin pour compléter le CSS inclus dans les fichiers HTML :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
body #diaporama {
    position:absolute;
    left:50%;
    top:50%;
}
#diaporama div img + img,
#diaporama div span span{
    display:none;
}
#diaporama div img:hover + img {
    position:absolute;
    display:inline;
    z-index:1;
    left:50%;
    top:50%;
}
#diaporama div span:hover span {
    position:absolute;
    display:block;
    padding:0px 5px 0px 5px;
}
#diaporama img {
    float:left;
}
#diaporama .gauche,
#diaporama .centre{
    float:left;
}
#diaporama .centre img {
    position:absolute;
}
#diaporama .centre .contenu {
    position:absolute;
    width:300px;    
    left:50%;
    margin-left:-150px;
    height:300px;
    top:50%;
    margin-top:-150px; 
}

Il n'y a aucune fioriture, juste du fonctionnel.

Je tiens à vous informer que par sécurité, j'ai vérifié tout ce que je vous donne ici et je vous assure que ça fonctionne parfaitement. Je me suis mis à votre place et j'ai appliqué les consignes à la lettre, et je suis bien arrivé à un diaporama (j'ai choisi de le faire en faible résolution) auquel on peut facilement ajouter ou supprimer des bordures (ça m'a quand même permis de déceler et de corriger une petite erreur dans mes formules :-° ).
J'ai neutralisé tous les liens sauf celui des bordures (essayez de le trouver dans cette pagaille !).

Bien entendu, il reste beaucoup à faire pour rendre le tout agréable à l'œil (couleurs, fonds…) mais, au moins, ça marche ! Hourra !

Il faudra bientôt dupliquer ces deux diaporamas pour les convertir en haute résolution, et une fois que tout sera fidèle à vos désirs, vous pourrez copier vos quatre fichiers autant de fois que vous avez de diaporamas.

Changez l'adresse des images, quelques liens et hop, votre mégadiaporama sera terminé ! ^^

Deuxième étape : le futile


Je ne prétends pas que vous avez besoin de moi pour cette étape, mais après tout le temps qu'on a passé ensemble, ça me fendrait le cœur de ne pas terminer le travail…

Voici la liste exhaustive des propriétés que j'ai utilisées :
  • color ;
  • background-color ;
  • text-align ;
  • font-size ;
  • font-weight ;
  • text-decoration ;
  • padding ;
  • margin ;
  • border-radius ;
  • opacity.

Je vous rappelle le HTML auquel la plupart du style s'appliquera :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
…
        <div class="centre">
	    <img class="imagefond" src="chemin/1.jpg" alt="background" />
	    <div class="contenu">
		<h1>Uxmal</h1>
		<h2>- Mexique -</h2>
		<p>
		    Photos de cités Mayas

		    <span class="courant">Uxmal</span>
		    <a href="citza1a.html">Chichen Itza</a>
		    <a href="palen1a.html">Palenque</a>
		    <a href="tikal1a.html">Tikal</a>
		</p>
		<div>
		    <a class="lienfloat" href="uxmal1a.html">Agrandir</a><a class="lienfloat" href="uxmal1b.html">Avec bordures</a>
		</div>
	    </div>
        </div>
…

La transparence est très présente :

Code : CSS
1
2
3
4
#diaporama div img:hover + img { opacity:1; }
#diaporama img { opacity:0.3; }
#diaporama .centre img { opacity:1; }
#diaporama .centre .contenu { opacity:0.7; }

De même pour les angles arrondis :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#diaporama div span:hover span,
#diaporama img,
#diaporama .centre .contenu,
#diaporama a,
#diaporama a:hover,
#diaporama .courant,
#diaporama h1 {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px; }

Je rappelle que malgré tout ce qu'on ajoute docilement pour arrondir des angles dans tous les navigateurs récents, seul Chrome et Chromium, à ma connaissance, savent arrondir les images (et sûrement Safari à en croire ce message, mais je ne peux pas l'installer pour vérifier)…

Le fond de mes commentaires est orange :

Code : CSS
1
#diaporama div span:hover span { background-color:orange; }

Le .contenu (support de notre menu) est arrangé ainsi :

Code : CSS
1
2
3
4
5
#diaporama .centre .contenu {
    text-align:center; 
    font-family: Impact, "Arial Black", sans-serif;
    background-color:white;
    opacity:0.7; }

Les liens sont dorlotés :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#diaporama a {
    display:block;
    margin:10px 60px 0px 60px;
    padding:0px 10px 0px 10px;
    border:1px solid orange;
    font-size:1.3em;
    text-decoration:none;    
    color:white;
    background-color:#666; }

#diaporama a:hover {
    border:1px solid #777;
    color:black;
    font-weight:bold;
    background-color:orange; }

Voici ce que devient le lien de la page courante transformé en span :

Code : CSS
1
2
3
4
5
6
7
#diaporama .courant {
    display:block;
    margin:10px 60px 0px 60px;
    padding:0px 10px 0px 10px;
    font-size:1.3em;
    color:orange;
    background-color:#666; }

Les liens qui servent à agrandir ou rétrécir et ajouter ou enlever des bordures tiennent côte à côte :

Code : CSS
1
2
3
4
5
6
#diaporama .lienfloat {
    float:left;
    width:108px;
    margin:15px 20px 0px 20px;
    padding:0px;
    font-size:0.8em; }

Enfin, voici comment je contrôle certaines boîtes de sorte que les différents navigateurs affichent sensiblement la même chose :

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#diaporama h1 {
    margin:18px 10px 0px 10px;
    font-size:1.6em;
    font-weight:bold;
    color:black;
    background-color:orange; }

#diaporama h2 {
    margin:5px 0px 0px 0px;
    font-size:1.3em; }

#diaporama p { margin:5px 0px 0px 0px; }


Je vous donne maintenant le lien vers mon résultat.

Si le design de ce diaporama vous plaît, alors appropriez-le-vous, il a été fait pour vous.
Et s'il ne vous plaît pas, alors améliorez-le. :) Vous en êtes grandement capables.

J'annonce officiellement que la première partie est terminée !

J'espère que vous avez pris du plaisir à travailler sur ce diaporama.

Si des choses restent incomprises, retravaillez-les.
Si ça ne suffit pas, alors rendez-vous sur le forum !
Retour en haut
La première partie est maintenant terminée !
Merci de laisser un commentaire si vous avez rencontré des difficultés ou si quelque chose ne vous paraît pas clair.

S'il y avait des demandes, je rédigerais volontiers une deuxième partie. Elle concernerait la simplification de toutes nos tâches laborieuses grâce au PHP. J'aurais facilement de quoi produire plusieurs chapitres pour un développement aussi progressif que dans cette première partie, mais à un niveau plus poussé.

Par exemple, au lieu de créer deux diaporamas en deux résolutions différentes avec deux images de fond différentes, chacun avec ou sans bordures, soit seize fichiers .html plus un .css d'environ 10 ko chacun, on aurait plutôt quatre diaporamas, cinq résolutions, dix couleurs de fond, quatre largeurs de bordures différentes, cinq niveaux de transparence, etc., le tout dans un unique fichier de moins de 20 ko !

Ce serait l'équivalent en statique d'environ 4 × 5 × 10 × 4 × 5 + 1 = 4001 fichiers. :-°

Alléchant, n'est-ce pas ?
Chapitre précédent Sommaire
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
TP : diaporama original en CSS
Icône
Customisons notre diaporama… (1/2)
Icône
Quelques notions de CSS
Icône
Customisons notre diaporama… (2/2)
Retour en haut
12 commentaires pour "Prêts pour notre mégadiaporama ?"
Note moyenne : 3.76 / 4 (38 votes)
Pseudo Commentaire
Hors ligne ptitludo21 # Posté le 05/01/2011 à 19:57:00

Avis : Très bon

Bonjour,

Je viens seulement d'apprendre le HTML et le CSS avec le tutoriel de M@teo21, je me suis mis à celui-là...et c'est vraiment super bien expliqué, maintenant je connais vraiment bien mes balises lol.

Merci beaucoup,

P.S : Je n'ai pas trouvé la seconde partie lol, je l'attend avec impatience comme beaucoup je pense.
Hors ligne BOBOR # Posté le 17/01/2011 à 21:20:40
Avatar

 vraiment bien fait ce tutoriel. j'attends la suite avec impatience!
Image utilisateur
Jeu de stratégie amateur, par navigateur, entièrement gratuit et innovant, dans le monde des fourmis.
Image utilisateur
Fourmicosme est actuellement en développement mais est en bêta test accessible pour tout le monde !
 
Hors ligne 9760 # Posté le 03/04/2011 à 20:18:34
Avatar

 Très bon tuto :p ! Merci :) !
Hors ligne Hy3rya # Posté le 12/07/2011 à 09:20:28
Algo Mushroom
Avatar

Avis : Très bon

Plus je regarde des tutos sur le html/CSS, plus je me dis que ce qu'on peut faire avec est vraiment OO
Image utilisateur
Image utilisateur


En mathématiques, on ne comprend pas les choses, on s’y habitue.
 
Hors ligne Annayy # Posté le 17/04/2012 à 23:32:57

Avis : Très bon

excellent

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.