User Tools
2015_2016:s1:webdoc:td6
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
2015_2016:s1:webdoc:td6 [2015/12/06 17:50] urli |
2015_2016:s1:webdoc:td6 [2015/12/07 15:34] urli [Structure] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== TD6 Web - Projet ====== | + | ====== TD6 Web - Menu dynamique ====== |
| ====== Compléments ====== | ====== Compléments ====== | ||
| + | |||
| * Dans ce nouveau TP, nous allons poursuivre notre exploration des normes HTML5 et CSS. Pour cela nous allons construire petit à petit une page web de démonstration nous permettant d'illustrer le positionnement, les transitions css, les selecteurs ccs3 ... | * Dans ce nouveau TP, nous allons poursuivre notre exploration des normes HTML5 et CSS. Pour cela nous allons construire petit à petit une page web de démonstration nous permettant d'illustrer le positionnement, les transitions css, les selecteurs ccs3 ... | ||
| Line 7: | Line 8: | ||
| ===== Structure ===== | ===== Structure ===== | ||
| + | |||
| + | <note important>Ne perdez pas de temps à positionner correctement les zones maintenant : vous y reviendrez plus tard ! Contentez vous de créer globalement la structure </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 19: | Line 22: | ||
| </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). L'attribut class ne sera pas plus autorisé.</note> | ||
| - | |||
| ===== Positionnement en CSS ===== | ===== Positionnement en CSS ===== | ||
| Line 46: | Line 47: | ||
| </note> | </note> | ||
| - | ===== Transitions css ===== | + | ===== Transitions et transformations css ===== |
| <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 : > | ||
| - | 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. | + | Continuons notre page de démonstration en ajoutant 5 images dans la premiere 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. | * 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 60: | Line 61: | ||
| Le résultat devrait ressembler à quelque chose comme cela : | Le résultat devrait ressembler à quelque chose comme cela : | ||
| {{ :2013_2014:s1:docweb:demo2.png?nolink |}} | {{ :2013_2014:s1:docweb:demo2.png?nolink |}} | ||
| + | |||
| + | Voir pour les transformations CSS : | ||
| + | http://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html | ||
| + | |||
| + | Et pour "jouer" avec skewX, skewY : | ||
| + | http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_skewx | ||
| Si vous avez besoin d'aide pour les transitions, n'hésitez pas à vous reporter au tutoriel suivant : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html (consultez aussi les pages 2 à 4 de ce tutoriel). | Si vous avez besoin d'aide pour les transitions, n'hésitez pas à vous reporter au tutoriel suivant : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html (consultez aussi les pages 2 à 4 de ce tutoriel). | ||
| <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, 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. | + | Maintenant, vous devez créer dans votre 2e 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 | * le header contiendra un mot de titre | ||
| * l'article un texte explicatif | * l'article un texte explicatif | ||
| Line 77: | Line 84: | ||
| <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 : > | ||
| - | * Dans la 4e zone section de la page (et non celles créées précédemment), ajoutez 2 images et une balise vidéo. | + | * Dans la 3e 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 | + | * 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 (choix des sélecteurs : http://www.w3schools.com/cssref/css_selectors.asp) |
| - | * Les vidéos sont disponible dans SupportCours/M115 | + | * Utilisez les URLs suivantes pour la vidéo : |
| + | * https://upload.wikimedia.org/wikipedia/commons/d/d0/Caminandes-_Llama_Drama_-_Short_Movie.ogv | ||
| + | * https://upload.wikimedia.org/wikipedia/commons/7/7c/Caminandes_-_Gran_Dillama_-_Blender_Foundation's_new_Open_Movie.webm | ||
| On devrait avoir un résultat dans le style de ceux ci dessous : | On devrait avoir un résultat dans le style de ceux ci dessous : | ||
| Line 154: | Line 163: | ||
| {{ :2013_2014:s1:docweb:demo5.png?nolink |}} | {{ :2013_2014:s1:docweb:demo5.png?nolink |}} | ||
| - | </box> | ||
| - | ===== Je sais répondre à ===== | ||
| - | |||
| - | <box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à : > | ||
| - | * Pouvez-vous citer des éléments de type block ? <html><!-- (h1, p, ul, ol, dl, table, blockquote, etc.) --></html> | ||
| - | * Pouvez-vous citer des éléments de type inline ? <html><!-- (a, img, strong, abbr, etc.)--></html> | ||
| - | * Comment "incliner" un élément? <html><!-- dans le cass skewX(15deg)) --></html> | ||
| - | * Comment "retourner" un élément? <html><!-- dans le cass rotate(15deg)) --></html> | ||
| - | * Comment sélectionner les cases paires d'un tableau? <html><!-- td:nth-child(odd){--></html> | ||
| - | * 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) <html><!-- scale(1.1), scale(1.1,1.1)--></html> | ||
| </box> | </box> | ||
| - | Une version demo de la page que vous avez construite est visible à l'adresse : http://users.polytech.unice.fr/~rey/cours/supports/web/index.html | ||
2015_2016/s1/webdoc/td6.txt · Last modified: 2015/12/07 16:15 by urli
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
