This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
2015_2016:s1:webdoc:td4 [2015/11/20 14:04] gjannon |
2015_2016:s1:webdoc:td4 [2015/11/30 15:43] (current) urli [Sprite] |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | |||
====== TD4 Web ====== | ====== TD4 Web ====== | ||
+ | Inspiré du cours de Mr Rey Gaëtan | ||
===== Structure d'une page web html5 ===== | ===== Structure d'une page web html5 ===== | ||
Line 11: | Line 13: | ||
Nous nous proposons à présent de créer une section de type blog sur votre site web en utilisant ces balises. | Nous nous proposons à présent de créer une section de type blog sur votre site web en utilisant ces balises. | ||
Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après. | Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après. | ||
+ | |||
+ | Plus d'infos sur les différentes balises html utilisées : | ||
+ | * http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html | ||
<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 : > | ||
- | * Voici ci-après la visualisation d'un exemple de ce que vous pourriez obtenir {{2015_2016:s1:webdoc:capture.jpg|exemple}} | + | * Voici ci-après la visualisation d'un exemple de ce que vous pourriez obtenir {{2015_2016:s1:webdoc:capture1778.jpg|exemple}} |
* Commencer par créer les sections header, nav, section, aside et footer de votre page. Laissez la partie section vide pour l'instant nous y reviendrons plus tard. | * Commencer par créer les sections header, nav, section, aside et footer de votre page. Laissez la partie section vide pour l'instant nous y reviendrons plus tard. | ||
* Définir la feuille de style pour obtenir une "belle visualisation" qui utilise les éléments de codage donnés ci-après. | * Définir la feuille de style pour obtenir une "belle visualisation" qui utilise les éléments de codage donnés ci-après. | ||
Line 27: | Line 32: | ||
Ce style supprime les puces et est utilisé pour structurer la barre de navigation. | Ce style supprime les puces et est utilisé pour structurer la barre de navigation. | ||
+ | |||
+ | Pour placer les élément de la liste sous la forme d'un menu horizontal : | ||
+ | |||
+ | <code css> | ||
+ | display:inline-block; | ||
+ | </code> | ||
Vous pourrez **par la suite** utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu. | Vous pourrez **par la suite** utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu. | ||
Line 35: | Line 46: | ||
Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage. | Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage. | ||
+ | |||
+ | Quelques éléments sur les flux et le positionnement relatif : | ||
+ | * http://openweb.eu.org/articles/initiation_flux/ | ||
+ | |||
Le positionnement flottant permet de sortir un élément du flux, en cela que l'on peut préciser si l'élément ciblé, par exemple une image ou une colonne de contenu, s'affiche à gauche ou à droite. | Le positionnement flottant permet de sortir un élément du flux, en cela que l'on peut préciser si l'élément ciblé, par exemple une image ou une colonne de contenu, s'affiche à gauche ou à droite. | ||
Line 43: | Line 58: | ||
Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible. | Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible. | ||
+ | |||
+ | Comprendre les float : | ||
+ | * http://openweb.eu.org/articles/initiation_float/ | ||
Pour restreindre sa largeur il est possible de donner une taille à l'élément: | Pour restreindre sa largeur il est possible de donner une taille à l'élément: | ||
Line 52: | Line 70: | ||
Vous noterez que dans un positionnement flottant les éléments se positionnent à l'endroit ou il reste de la place disponible ce qui peut provoquer parfois des agencements hasardeux. | Vous noterez que dans un positionnement flottant les éléments se positionnent à l'endroit ou il reste de la place disponible ce qui peut provoquer parfois des agencements hasardeux. | ||
+ | |||
clear a été conçue pour préciser que cet élément ne sera pas influencé par le comportement d'un flottant. clear permet de libérer l'élément de l'influence du flottant. | clear a été conçue pour préciser que cet élément ne sera pas influencé par le comportement d'un flottant. clear permet de libérer l'élément de l'influence du flottant. | ||
Line 57: | Line 76: | ||
clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/ | clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/ | ||
</code> | </code> | ||
+ | |||
+ | Elements supplémentaires sur les positions fixes et absolues : | ||
+ | * http://openweb.eu.org/articles/initiation_absolue/ | ||
Pour en savoir plus sur les possibilités de positionnement vous pourrez voir : | Pour en savoir plus sur les possibilités de positionnement vous pourrez voir : | ||
Line 70: | Line 92: | ||
Il est possible de définir des marges en css: | Il est possible de définir des marges en css: | ||
- | - les marges autour de l'élément que l'on positionne : margin | + | |
+ | - les marges autour de l'élément : margin | ||
- les marges à l'intérieur de l'élément : padding | - les marges à l'intérieur de l'élément : padding | ||
Line 83: | Line 107: | ||
==== Survol d'un élément ==== | ==== Survol d'un élément ==== | ||
- | * Quand on passe la souris sur un article, le fond change de couleur. | + | |
+ | Quand on passe la souris sur un article, le fond change de couleur : | ||
+ | |||
+ | <code css> | ||
+ | li:hover{ | ||
+ | /* attributs css */ | ||
+ | } | ||
+ | </code> | ||
http://www.w3schools.com/cssref/sel_hover.asp | http://www.w3schools.com/cssref/sel_hover.asp | ||
Line 92: | Line 123: | ||
En utilisant les balises HTML 5 article et aside créer la liste des articles de votre blog. | En utilisant les balises HTML 5 article et aside créer la liste des articles de votre blog. | ||
+ | |||
+ | Un article étant caractérisé par : | ||
+ | - un titre | ||
+ | - une date | ||
+ | - un texte | ||
+ | - un visuel éventuel | ||
+ | |||
===== Iframe ===== | ===== Iframe ===== | ||
[[http://www.w3schools.com/tags/tag_iframe.asp|En savoir plus.]] | [[http://www.w3schools.com/tags/tag_iframe.asp|En savoir plus.]] | ||
Line 126: | Line 164: | ||
</box> | </box> | ||
- | ===== Transformations, Translations, Animations, ... ===== | ||
- | |||
- | |||
- | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
- | * Dans ce qui suit, amusez-vous en animant votre page personnelle en introduisant des animations. | ||
- | </box> | ||
- | ==== Déplacement au survol de l'image ==== | ||
- | |||
- | |||
- | <code css> | ||
- | img:hover { | ||
- | -webkit-transform: translate(0, -20px); | ||
- | /* -moz-transform: translate(0, -20px); | ||
- | -ms-transform: translate(0, -20px); | ||
- | -o-transform: translate(0, -20px); | ||
- | transform: translate(0, -20px); /* déclenchement de la transition au survol */ | ||
- | */ | ||
- | } | ||
- | </code> | ||
- | (source : http://www.alsacreations.com/tuto/lire/1333-osez-html5-et-css3.html) | ||
- | |||
- | |||
- | ==== Changement de couleur d'un lien doucement ==== | ||
- | |||
- | <code css> | ||
- | a { | ||
- | font-size: 3em; | ||
- | font-weight: bold; | ||
- | color: #789; | ||
- | text-decoration: none; | ||
- | -webkit-transition-property: color; | ||
- | -webkit-transition-duration: 3s; | ||
- | |||
- | /* Pour Firefox */ | ||
- | /* -moz-transition-property: color; | ||
- | -moz-transition-duration: 2s; */ | ||
- | |||
- | /* … et lorsque ce sera standardisé | ||
- | transition-property: color; | ||
- | transition-duration: 1s; */ | ||
- | |||
- | } | ||
- | </code> | ||
- | |||
- | (source : http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm) | ||
- | ==== Amusez-vous ==== | ||
- | |||
- | |||
- | |||
- | http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm | ||
- | |||
- | |||
- | |||
- | Regardez et amusez vous à partir du [[ http://animateyourhtml5.appspot.com/pres/index.html#5|site ci-après]]. | ||
- | |||
- | Par exemple : | ||
- | <code css> | ||
- | .move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; } | ||
- | @-webkit-keyframes anim2 | ||
- | { | ||
- | from {left: 0px; -webkit-transform: scale(1.0) rotate(0deg) } | ||
- | 50% {left: 600px; -webkit-transform: scale(0.5) rotate(10deg) } | ||
- | to {left: 1000px; -webkit-transform: scale(1.8) rotate(-20deg) } | ||
- | } | ||
- | </code> | ||
- | |||
- | |||
- | Et un peu plus : http://html5demo.braincracking.org/, caractéristique par caractéristique. | ||
- | |||
- | ==== Sprite: section à venir ==== | ||
- | |||
- | |||
- | L'image est ici : http://www.w3schools.com/css/img_navsprites.gif | ||
- | |||
- | Le tuto est là : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav | ||
- | http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html | + | ===== Après les TDs 3 et 4, je sais répondre à ===== |
- | ===== Je sais répondre à ===== | + | |
<box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à : > | <box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à : > | ||
Line 213: | Line 175: | ||
* Quels sont les types de marge sur lesquelles vous pouvez agir? | * Quels sont les types de marge sur lesquelles vous pouvez agir? | ||
* Comment placer les éléments relativement les uns aux autres? | * Comment placer les éléments relativement les uns aux autres? | ||
- | * Les selecteurs en CSS, que signifie | ||
- | * ol li ? | ||
- | * h1, h2 ? | ||
- | * h1+h2 | ||
- | * ol > li | ||
- | * Comment noter | ||
- | * les descendants de l'identifiant "mainzone"? | ||
- | * le frère adjacent à h1 ? | ||
- | * toutes les balises? | ||
- | * que signifient | ||
- | * a:link {color:green;} | ||
- | * a:visited {color:green;} | ||
- | * a:hover {color:red;} | ||
- | * a:active {color:yellow;} | ||
* Comment forcer l'affichage d'un tableau à respecter les dimensions qu'on lui a donné ? | * Comment forcer l'affichage d'un tableau à respecter les dimensions qu'on lui a donné ? | ||
* Comment centrer un texte? | * Comment centrer un texte? | ||
- | * Comment forcer les cellules d'un tableau à partager des bordures communes? non communes? | ||
* A quoi sert un identifiant? une classe? | * A quoi sert un identifiant? une classe? | ||
* A quoi sert l'attribut "float"? | * A quoi sert l'attribut "float"? | ||
* Que signifie : <code>li:nth-child(even) { color: green; }</code> | * Que signifie : <code>li:nth-child(even) { color: green; }</code> | ||
</box> | </box> | ||
- | ===== Références ===== | ||
- | [[http://cinema-series.orange.fr/evenement/treme/|Un très beau site]] |