Differences

This shows you the differences between two versions of the page.

--- 2013_2014:s1:docweb:placements [2013/12/08 18:05]
blay
+++ 2013_2014:s1:docweb:placements [2013/12/11 09:15]
blay [Structure]
@@ Line 6: / Line 6: @@
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
    - Commencez par créer une page html5 contenant une zone ''header'', une zone ''nav'', une zone ''aside'', 5 zones ''section'' et une zone ''footer''.
-  - A l'aide d'un fichier CCS, définisser les propriétés suivantes pour les zones :
+  - A l'aide d'un fichier CCS, définissez les propriétés suivantes pour les zones :
-    * hearder : prend toute la largeur de la page
+    * 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 (on y reviendra à la fin)
+    * nav sera une zone horizontale sous le header de 600px de large (on y reviendra à la fin)
-    * aside : est une colonne alignée à droite
+    * aside : est une colonne alignée à droite de 200px de large (voir plus bas pour le contenu)
-    * section : un ensemble de zones centrées
+    * 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
 </box>
-<note tip>En fonction de vos avancées sur votre propre page web cette nouvelle page peut correspondre à une nouvelle mise en page de votre page principale ou une page référencée depuis votre propre page.</note>
+<note tip>De manière à réviser, il est conseiller de partir sur une toute nouvelle page html.</note>
+<note tip>Seulement les sections pourront avoir un attribut de type id (sauf indication contraire dans le TP). L'attribut class ne sera pas plus autorisé.</note>
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
@@ Line 22: / Line 23: @@
 <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>
 </code>
+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
 <note tip>Ces références doivent apparaître sur toutes vos pages au sein de l'IUT. Nous les utiliserons pour vérifier la validité de vos pages.</note>
@@ Line 39: / Line 42: @@
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-Maintenant que le positionnement n'a plus de secret pour vous, ajoutez 3 paragraphes de texte (par exemple ceux-ci http://www.faux-texte.com/lorem-ipsum-3.htm dans votre zone aside. Celle-ci doit s'afficher à droite de la page.
+Maintenant que le positionnement n'a plus de secret pour vous, ajoutez 3 paragraphes de texte (par exemple ceux-ci http://www.faux-texte.com/lorem-ipsum-3.htm dans votre zone aside. Celle-ci doit s'afficher à droite de la page. Chacun des paragraphes sera contenu dans une balise <p></p> (balise de paragraphe).
 </box>
@@ Line 51: / Line 54: @@
 ===== Les transformations en css =====
-Ajoutez le code suivant (ou celui de votre propre tableau fait dans le TP précédent) dans votre première zone section
+Ajoutez le code suivant dans votre première zone section, à laquelle vous donnez l'identifiant "tableau" (à la section pas au tableau)
 <code>
 <table><tbody>
@@ Line 77: / Line 80: @@
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
 Ajoutez les couleurs via css et appliquez les transformations suivantes :
-  * les cases impaires sont **inclinées** de 15deg (''skewX'') et ont des bords arrondis  (''border-radius'') de 10px
+  * les cases/cellules impaires sont **inclinées** de 15deg (''skewX'') et ont des bords arrondis  (''border-radius'') de 10px
-  * les cases paires sont **tournées** de 5deg (''rotate'') et ont des bords arrondis de 20px
+  * 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
 </box>
-  * Si vous avez besoin d'aide pour les selecteurs css, reportez vous sur cette page : http://debray-jerome.developpez.com/articles/les-selecteurs-en-css3/. Pour le moment nous n'utiliserons que la pseudo-classe **:nth-last-child(expression)**
+<note tip>Attention, pour les "transform", vous devez les spécifier 5 fois. 1 fois normalement et une fois avec chacun des préfixes des navigateurs. SI vous ne faites pas cela, il y a de fortes chances que ça me fonctionne pas sur votre navigateur ou celui de votre encadrant lors de la correction de votre TP. Vous trouverez les différents préfixes sur la page "transformations-2d" (cf lien ci-dessous) dans la section "Tableau des compatibilités".</note>
+  * Si vous avez besoin d'aide pour les selecteurs css, reportez vous sur cette page : http://debray-jerome.developpez.com/articles/les-selecteurs-en-css3/. Pour le moment nous n'utiliserons que la pseudo-classe **:nth-child(expression)**
   * Pour les transformations, vous aurez toute l'aide nécessaire sur la page http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html
   * On veut parvenir à un résultat proche du tableau suivant (on verra le reste plus tard):
@@ Line 87: / Line 93: @@
 ===== Transitions css =====
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-Continuons notre page de démonstration en ajoutant 5 images dans la deuxième zone section. Chaque image aura une largeur de 190px et une hauteur de 108px.
+Continuons notre page de démonstration en ajoutant 5 images dans la deuxième zone section. Chaque image aura une largeur de 150px et une hauteur de 108px.
   * 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.
@@ Line 103: / Line 109: @@
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  >
-Maintenant, vous devez créer dans votre 3e zone ''section'', une zone ''div'' contenant 4 zones ''section''. Chacune de ces nouvelles zones section contiendra une zone ''header'', ''article'' et ''footer''. L'image ci-dessus vous donne une idée du résultat.
+Maintenant, vous devez créer dans votre 3e zone ''section'', une zone ''div'' contenant 4 zones ''section''. Chacune de ces nouvelles zones section contiendra une zone ''header'', ''article'' et ''footer''. L'image ci-dessus vous donne une idée du résultat. Ces nouvelles sections auront une largeur de 160px.
   * le header contiendra un mot de titre
   * l'article un texte explicatif
@@ Line 118: / Line 124: @@
   * 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 :
@@ Line 185: / Line 192: @@
       * 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
+      * 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
-</note>
+      * Pour dans les infobulles, ne pas aller à la ligne, ''white-space:nowrap;''
+      * Pour gérer les débordements par des ...,  ''text-overflow:ellipsis;''
+}
 {{ :2013_2014:s1:docweb:demo5.png?nolink |}}
+</box>
 ===== Je sais répondre à =====

Cours au département INFO - IUT - UNS

User Tools

Site Tools

Differences

Page Tools