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 12:20] 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. | ||
==== Placements relatifs ==== | ==== Placements relatifs ==== | ||
- | Nous utiliserons le positionnement flottant | + | Nous utiliserons le positionnement flottant. |
- | <code css> | + | 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. |
- | list-style: none; | + | |
- | </code> | + | |
- | Pour en savoir plus sur les possibilités de positionnement : | + | Quelques éléments sur les flux et le positionnement relatif : |
- | - http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html | + | * http://openweb.eu.org/articles/initiation_flux/ |
- | - http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html | + | |
- | - http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html | + | |
- | - http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html | + | |
+ | 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. | ||
- | Vous pouvez utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu. | + | <code css> |
+ | float:left; /*Positionnement d'un élément à gauche de la page*/ | ||
+ | float:right; /*Positionnement d'un élément à droite de la page*/ | ||
+ | </code> | ||
- | <note warning>Pour en faire un peu plus, | + | Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible. |
- | http://www.alsacreations.com/astuce/lire/56-styler-la-balise-lthr-gt.html</note> | + | Comprendre les float : |
+ | * http://openweb.eu.org/articles/initiation_float/ | ||
- | * [[http://www.w3schools.com/css/css_float.asp| Affichage relatif des éléments (bien regarder tous les exemples...]] | + | Pour restreindre sa largeur il est possible de donner une taille à l'élément: |
- | * [[http://www.w3schools.com/cssref/pr_class_clear.asp|Placer en dessous (clear)]] | + | |
- | ==== Affichage à l'horizontal ou à la vertical : CSS Display ==== | + | <code css> |
+ | width:500px; /*taille fixe en pixels*/ | ||
+ | width:50%; /*taille adaptable en pourcentage, 50% de l'espace disponible*/ | ||
+ | </code> | ||
+ | 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. | ||
- | //[[http://www.alsacreations.com/actu/lire/111-display-vous-connaissez.html|Extrait]] | + | 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. |
- | les blocs se placent toujours l'un en-dessous de l'autre (saut de ligne, affichage à la verticale). | + | |
- | Si on ne veut pas un tel comportement, on utilise "inline". Dans une suite de paragraphes ou une liste | + | <code css> |
- | les inline se placent toujours l'un à côté de l'autre (ils restent dans le texte courant). // | + | clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/ |
+ | </code> | ||
- | http://www.w3schools.com/cssref/pr_class_display.asp | + | Elements supplémentaires sur les positions fixes et absolues : |
- | + | * http://openweb.eu.org/articles/initiation_absolue/ | |
- | * A utiliser en particulier pour //nav, section, footer// ... | + | |
+ | Pour en savoir plus sur les possibilités de positionnement vous pourrez voir : | ||
+ | * http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html | ||
+ | * http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html | ||
+ | * http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html | ||
+ | * http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html | ||
+ | * [[http://www.w3schools.com/css/css_float.asp| Affichage relatif des éléments (bien regarder tous les exemples...]] | ||
+ | * [[http://www.w3schools.com/cssref/pr_class_clear.asp|Placer en dessous (clear)]] | ||
==== Introduire une marge ==== | ==== Introduire une marge ==== | ||
- | [[http://css.mammouthland.net/margin-padding-css.php|En savoir plus]] | + | Il est possible de définir des marges en css: |
- | * En particulier autour des éléments qui constituent la barre de navigation. | + | - les marges autour de l'élément : margin |
+ | - les marges à l'intérieur de l'élément : padding | ||
- | ==== Largeurs ==== | + | <code css> |
- | http://www.w3schools.com/cssref/pr_dim_width.asp | + | margin:10px; /* marge de 10 pixels tout autour de l'élément*/ |
+ | margin:1%; /*marge de 1% tout autour de l'élément*/ | ||
+ | margin: 5px 6px 7px 8px; /*dans l'ordre : top right bottom left*/ | ||
+ | margin-left:10px; | ||
+ | padding: 10px; | ||
+ | padding: 5px 6px 7px 8px; | ||
+ | </code> | ||
==== 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 84: | Line 120: | ||
http://www.w3schools.com/cssref/pr_text_text-align.asp | http://www.w3schools.com/cssref/pr_text_text-align.asp | ||
+ | ==== Création des articles du 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 ===== | ||
Line 120: | 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 207: | 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]] |