Differences

This shows you the differences between two versions of the page.

--- 2016_2017:s1:webdoc:td3 [2016/11/09 15:29] – [Barre de navigation] logre
+++ 2016_2017:s1:webdoc:td3 [2016/11/09 17:53] (current) – [| TD3 : Layout, au pixel près |] logre
@@ Line 1: / Line 1: @@
-----
 ====== | 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.
 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.
+<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>
@@ Line 39: / Line 41: @@
 </box>
-===== Barre de navigation =====
+===== Le flux d'affichage =====
+==== Positionnement en Flux Normal ====
+Les éléments d'un arbre xHTML sont parcourus par le navigateur et affichés selon leur hiérarchie, de haut en bas et de gauche à droite.
+Toutefois, deux comportements basiques sont à identifier au sein de ce flux: les éléments de type //Block// et ceux de type //Inline//. 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 balises //Block//:
+  * l'élément //div// ;
+  * les titres //h1, h2, h3, h4, h5, h6// ;
+  * le paragraphe //p// ;
+  * Les listes et éléments de liste //ul, ol, li, ...// ;
+  * Le bloc de citation //blockquote//;
+  * L'adresse //address//.
+Quelques éléments //Inline//
+  * l'élément //span// ;
+  * le lien //a// ;
+  * L'image //img// ;
+  * Les citation //q// et //cite// ;
+  * 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 ====
 Votre site contiendra plusieurs pages.
@@ Line 56: / 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_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </code>
-  - [[http://www.w3schools.com/cssref/pr_pos_z-index.asp|La profondeur.]] <code css> z-index: ...; </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)]]