Compléments

1. Commencez par créer une page html5 contenant une zone header, une zone nav, une zone aside, 5 zones section et une zone footer.
2. A l'aide d'un fichier CCS, définissez les propriétés suivantes pour les zones :
   • header : prend toute la largeur de la page, contiendra un texte de 40px de haut et en petites capitales
   • nav sera une zone horizontale sous le header de 600px de large (on y reviendra à la fin)
   • aside : est une colonne alignée à droite de 200px de large (voir plus bas pour le contenu)
   • section : un ensemble de zones centrées de 800px de large
   • footer : un zone en fin de page qui contiendra 2 liens-images alignés à droite

<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.fourquarters.biz/images/w3cvalidhtml5.jpg" alt="Valid XHTML 5" height="31" width="88" /></a> <br/>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://url_de_votre_fichier.css&amp;profile=css3"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS Valide !" /></a> 

Attention, le 1er lien-image (html5) ne fonctionne pas sur l'intranet (mais ne le modifiez pas), le 2eme lien-image (css) doit être modifier pour fonctionner depuis l'exterieur

Vous pouvez aussi ajouter : http://validator.w3.org/checklink

• les cases/cellules impaires sont inclinées de 15deg (skewX) et ont des bords arrondis (border-radius) de 10px
• les cases/cellules paires sont tournées de 5deg (rotate) et ont des bords arrondis de 20px
• Il faudra également mettre le tableau en forme comme dans l'image ci-dessous

• la première image devra subir une inclinaison de 15deg en y (skewY) lors du survol du pointeur souris. On utilisera le selecteur first-of-type pour sélectionner cette image.
• la deuxième image devra subir une inclinaison de 20deg en x (skewX) lors du survol du pointeur souris. On utilisera le selecteur nth-last-of-type pour sélectionner cette image.
• la troisième image devra subir une mise à l'échelle de 1.2 (scale) lors du survol du pointeur souris. On utilisera le selecteur nth-child pour sélectionner cette image.
• la quatrième image devra subir une rotation de 25deg (en changeant l'origine en 0,0) (rotate) lors du survol du pointeur souris. On utilisera le selecteur nth-of-type pour sélectionner cette image.
• la cinquième image devra subir une mise à l'échelle de 1.5 et une translation (120px, 50px) lors du survol du pointeur souris. On utilisera le selecteur last-of-type pour sélectionner cette image.

• Puisqu'ici nous travaillons sur les transitions, vos transformations devront se faire en en douceur (1 à 2 secondes).

• le header contiendra un mot de titre
• l'article un texte explicatif
• le footer ce que vous souhaitez
• Le header et l'article seront séparés d'une barre (border-bottom) composée de points qui n'occupera pas toute la largeur.
• Lorsque vous survolez une section avec la souris, les angles s'arrondissent de 40px et 10px, et l'échelle s'agrandit de 1.1;

• Dans la 4e zone section de la page (et non celles créées précédemment), ajoutez 2 images et une balise vidéo.
• Quand vous survolez une des deux images, une transformation (au choix mais différente en fonction de chaque image) sera appliqué à la vidéo … testez cela lors de la lecture de la vidéo
• Les vidéos sont disponible dans SupportCours/M115

On devrait avoir un résultat dans le style de ceux ci dessous :

• Ajoutez le code suivant das votre dernière zone section :

<p>
	 <a href="#">Survole moi!
		  <span>Je suis une infobulle...</span>
	 </a>
</p>

• Nous allons maintenant modifier notre css pour transformer le span en infobulle.
  • centrez le texte contenu dans la balise p
  • donnez une couleur à votre lien
  • modifiez votre span en
    • le positionnant de manière absolue ¹⁾
    • en lui ajoutant une marge supérieure de -50px et une marge inférieure de -25px, afin de décaller son affichage,
    • en modifiant la couleur de son texte,
    • en rendant son arrière plan noir (et un petit peu transparent, notation RGBa ).
  • On pourra également ajouter
    • des bords arrondis,
    • une boîte un peu plus grande ²⁾
    • une ombre de boite ³⁾
    • ainsi qu'une légère transformation scale(0) rotate(-12deg) pour un effet d'apparition plus sympa.
  • Il faut également, maintenant que vous avez bien défini le span
    • rendre l'élément span complètement invisible en le rendant transparent (opacity:0)
    • activer les transitions disons toutes pour une durée de 0.25s et
  • Enfin, il nous faut le faire apparaître quand on survole l'élement a.
    • rendre visible(opacity:1) notre élement span quand on survole l'élement a.
  • Si vous avez utilisé une transformation, pensez également à remettre votre span en état lors de ce survole (scale(1) rotate(0)). Une petite amélioration consiste à faire ces mêmes modifications lors du gain du focus de l'élément a.

• Ajoutez le code suivant dans votre zone nav

<a href="#tableau">
	<div class="icone">T</div>
	ableau
</a>
<a href="#images">
	<div class="icone">I</div>
	mages
</a>
<a href="#colonnes">
	<div class="icone">C</div>
	olonnes
</a>
<a href="#videos">
	<div class="icone">V</div>
	ideos
</a>
<a href="#infobulle">
	<div class="icone">I</div>
	nfobulle
</a>

• Sans modifier le code HTML de la zone nav
  • Faites en sorte que les liens fonctionnent (qu'ils vous déplacent dans la page)
  • Modifiez l'apparence du menu pour qu'il ressemble à l'image ci-dessous
  • Ouvrez le menu lors du survol de la lettre de manière à rendre le lien accessible (pour masquer, vous pouvez utiliser overflow:hidden;)
  • Ajoutez une rotation (un tour complet) de la lettre lors du survol
  • Pour dans les infobulles, ne pas aller à la ligne, white-space:nowrap;
  • Pour gérer les débordements par des …, text-overflow:ellipsis;

}

• Pouvez-vous citer des éléments de type block ?
• Pouvez-vous citer des éléments de type inline ?
• Comment “incliner” un élément?
• Comment “retourner” un élément?
• Comment sélectionner les cases paires d'un tableau?
• Quelles sont les expressions équivalentes parmi : scale(1.1), scale(1.1,1.1), scale-x(1.1), scale-y(1.1), scale(1,1)