This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
2016_2017:s1:webdoc:td3 [2016/11/09 18:00] logre [Le flux d'affichage] |
2016_2017:s1:webdoc:td3 [2016/11/09 18:53] (current) logre [| TD3 : Layout, au pixel près |] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | |||
- | ---- | ||
====== | TD3 : Layout, au pixel près | ====== | ====== | TD3 : Layout, au pixel près | ====== | ||
- | ---- | + | |
+ | Ce TD se base énormément sur l'expérimentation. Faite preuve de logique. Tester des choses. Des squelettes de code sont fournis pour vous faire gagner du temps, mais les mécanismes sont à découvrir ! | ||
Line 12: | Line 11: | ||
Le contenu d'une page HTML est souvent amené à évoluer, par exemple la page C.V. de votre site personnel va s'étoffer au fur et à mesure de vos succès scolaires et de vos expériences professionnelles. | Le contenu d'une page HTML est souvent amené à évoluer, par exemple la page C.V. de votre site personnel va s'étoffer au fur et à mesure de vos succès scolaires et de vos expériences professionnelles. | ||
+ | |||
De même, le contenu de la section "News" du site d'une association par exemple est mis-à-jour fréquemment. | De même, le contenu de la section "News" du site d'une association par exemple est mis-à-jour fréquemment. | ||
Ainsi, le layout d'une page HTML dépend de son contenu actuel, mais doit être conçu au delà de celui-ci. | Ainsi, le layout d'une page HTML dépend de son contenu actuel, mais doit être conçu au delà de celui-ci. | ||
+ | |||
+ | <note warning>Avant de commencer à programmer comme des brutes, il est recommandé de sortir une feuille et de mettre à plat ce que vous voulez réaliser. Un simple dessin basse fidélité de la page de vos rêves peut être suffisant.</note> | ||
<html> | <html> | ||
Line 61: | Line 63: | ||
* L'élément //code// ; | * L'élément //code// ; | ||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | * Téléchargez le {{:2016_2017:s1:webdoc:skeleton-v0.zip|squelette}} de document HTML et le script CSS et décompressez l'archive. | ||
+ | * Affichez le code et visualisez la page avec un navigateur. Faites la correspondance entre les balises utilisées et le flux affiché. | ||
+ | * Cherchez si les balises HTML5 utilisées sont //Inline// ou //Block//. | ||
+ | </box> | ||
+ | |||
+ | ==== Positionnement Relatif ==== | ||
+ | |||
+ | Le positionnement relatif permet à un élément d'être placé dans le flux normal, puis d'être décalé horizontalement et/ou verticalement, au risque de chevaucher d'autres éléments. Ce décalage est **relatif** à la position initiale de l'élément. | ||
+ | |||
+ | Un petit exemple : | ||
+ | |||
+ | <code html> | ||
+ | <div> | ||
+ | Lorem | ||
+ | <span class="exemple">boîte en position relative</span> | ||
+ | ipsum dolor. | ||
+ | </div> | ||
+ | </code> | ||
+ | |||
+ | <code css> | ||
+ | .exemple { | ||
+ | position: relative; | ||
+ | bottom: 5px; | ||
+ | background-color: #ffff00; | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | <html> | ||
+ | <img src="http://openweb.eu.org/IMG/article43/ex3.gif"/> | ||
+ | </html> | ||
+ | |||
+ | ==== Positionnement Flottant ==== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | <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> | ||
+ | |||
+ | |||
+ | Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible.[[http://openweb.eu.org/articles/initiation_float/|Comprendre les float]] | ||
+ | |||
+ | Pour restreindre sa largeur il est possible de donner une taille à l'élément: | ||
+ | |||
+ | <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. | ||
+ | |||
+ | La propriété //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 d'un flottant précédent. | ||
+ | [[http://www.w3schools.com/css/css_float.asp|De l'usage de Clear]] | ||
+ | |||
+ | <code css> | ||
+ | clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/ | ||
+ | </code> | ||
+ | |||
+ | ===== Autour des boites ===== | ||
+ | |||
+ | Il est possible de définir des espacements autour des éléments HTML en CSS: | ||
+ | * les marges autour de l'élément : //margin// | ||
+ | * les marges à l'intérieur de l'élément : //padding// | ||
+ | <code css> | ||
+ | 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> | ||
+ | Certains éléments ont des marges et/ou des paddings par défaut. | ||
+ | Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur. | ||
+ | ===== Mise en pratique ===== | ||
- | ===== Barre de navigation ===== | + | ==== Barre de navigation ==== |
Votre site contiendra plusieurs pages. | Votre site contiendra plusieurs pages. | ||
Line 82: | Line 161: | ||
- [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code> | - [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code> | ||
- [[http://www.w3schools.com/cssref/pr_class_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </code> | - [[http://www.w3schools.com/cssref/pr_class_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </code> | ||
- | - [[http://www.w3schools.com/css/css_float.asp|Le flottement (left, right) .]] <code css> float: ...; </code> | + | - [[http://www.w3schools.com/css/css_float.asp|Le flottement (left, right) .]] <code css> float: ...; </code> |
+ | |||
+ | ==== Contenu ==== | ||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | * En utilisant les balises HTML 5 //section//, //article// et //aside// créer une liste de projets démontrant toutes vos compétences pour former un portfolio. | ||
+ | </box> | ||
+ | |||
+ | Un projet doit être caractérisé par : | ||
+ | - un titre | ||
+ | - une date | ||
+ | - un texte | ||
+ | - un visuel éventuel | ||
+ | - un lien vers une vidéo de démonstration ou un repo github | ||
+ | |||
+ | === IFrame === | ||
+ | |||
+ | Si votre projet est disponible sur le web, vous pouvez avoir envie d'avoir une miniature de celui-ci comme illustration de votre projet. C'est une utilisation possible des IFrames. | ||
+ | |||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | * Téléchargez le {{:2016_2017:s1:webdoc:iframe.zip|squelette}} d'utilisation d'une IFrame. | ||
+ | * Etudiez son fonctionnement, puis démontrez-en une utilisation au sein de votre propre page. | ||
+ | </box> | ||
+ | |||
+ | Les IFrames sont également utiles pour ajouter certains widgets fournis par des sites externes, comme un plan google maps, un google calendar, etc... | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Je sais répondre à ===== | ||
+ | |||
+ | <box round rgb(255,204,153) 97%|**Je sais répondre à :** > | ||
+ | * Qu'est-ce que le flux d'affichage ? | ||
+ | * Comment décaler un élément dans ce flux ? | ||
+ | * Comment sortir un élément de ce flux ? | ||
+ | * Quels sont les types de marge sur lesquelles nous pouvons agir ? | ||
+ | * Comment placer les éléments relativement les uns aux autres ? | ||
+ | * A quoi sert l'attribut "float"? "clear" ? | ||
+ | </box> | ||
+ | |||
+ | |||
+ | |||
+ | ===== Aller plus loin ===== | ||
+ | |||
+ | 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)]] | ||