User Tools
2013_2014:s1:docweb:placements
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
2013_2014:s1:docweb:placements [2013/12/09 14:56] rey [Transitions css] |
2013_2014:s1:docweb:placements [2014/02/04 14:51] (current) blay [Structure] |
||
|---|---|---|---|
| Line 7: | Line 7: | ||
| - Commencez par créer une page html5 contenant une zone ''header'', une zone ''nav'', une zone ''aside'', 5 zones ''section'' et une zone ''footer''. | - 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éfinissez 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, contiendra un texte de 40px de haut et en petites capitales | + | * 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) | * 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) | * aside : est une colonne alignée à droite de 200px de large (voir plus bas pour le contenu) | ||
| Line 14: | Line 14: | ||
| </box> | </box> | ||
| <note tip>De manière à réviser, il est conseiller de partir sur une toute nouvelle page html.</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)</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 : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
| Line 27: | Line 27: | ||
| <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> | <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> | ||
| + | |||
| + | Vous pouvez aussi ajouter : http://validator.w3.org/checklink | ||
| + | |||
| </box> | </box> | ||
| ===== Positionnement en CSS ===== | ===== Positionnement en CSS ===== | ||
| Line 42: | Line 45: | ||
| <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <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> | </box> | ||
| Line 80: | Line 83: | ||
| <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
| Ajoutez les couleurs via css et appliquez les transformations suivantes : | 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> | </box> | ||
| - | <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</notes> | + | <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)** | * 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)** | ||
2013_2014/s1/docweb/placements.1386597404.txt.gz · Last modified: 2013/12/09 14:56 by rey
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
