web:positioncss

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:positioncss [2020/10/02 08:53] – [Introduction] philippeweb:positioncss [2023/06/18 18:45] (Version actuelle) – [WEB - Conception d'un gabarit CSS] phil
Ligne 1: Ligne 1:
 +[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
 +
 +===== WEB - Conception d'un gabarit CSS =====
 +
 +[Mise à jour le 18/6/2023]
 +
 +  * **Ressources**
 +    * MDN web docs : <html><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps" target="_blank">CSS — Mettre en forme le Web</a></html>
 +
 +  * **Liens connexes**
 +    * [[web:baseshtml|WEB - Les bases du HTML]]
 +    * [[web:basescss|WEB - Les bases du CSS]]
 +
 +----
 +
 +  * **Mots-clés** : boîte, contenu, marge interne et externe, bord, positionnement.
 +
 +----
 +
 +==== Introduction ====
 +Un **gabarit css** se compose de la **structure** HTML et de la **présentation** CSS d'un site Web. \\ Il y a 2 choix concernant la structure générale du site : 
 +  * Structure fluide s'étirant sur toute la largeur de l'écran (non traité ici)
 +  * **Structure fixe (largeur fixe, centrée ou non)**
 +
 +{{ :web:17_gabarits.jpg?nolink |}}
 +
 +Pour réaliser le gabarit d'un site, il est nécessaire de connaître le modèle des boîtes CSS et de disposer d'une méthode de conception. Ces deux points sont décrits dans la suite du document.
 +
 +==== 1. Comprendre le modèle de boîte ====
 +
 +=== 1.1 Présentation ===
 +
 +<callout type="info" icon="true">En **HTML**, chaque élément est considéré comme une **boîte**. Aux dimensions induites par son **contenu** s’ajoutent souvent les espaces de **marges externes (__margin__)** ou **internes (__padding__)** et une **bordure (__border__**).</callout>
 +
 +{{ :web:boite.png?nolink&200 |}}
 +<callout type="warning" icon="true">Les propriétés **border**, **margin** et **padding** ne sont pas obligatoires. Non renseignés, elles prendront une valeur par défaut, toujours **nulle** pour les éléments en ligne. En revanche **parmi les éléments de type bloc, seul <div> n’a pas de marge par défaut**.</callout>
 +
 +__Exemple__
 +{{ :web:boiteex1.png?nolink |}}
 +
 +<callout type="info" icon="true">Les **paragraphes** s’affichent les **un en dessous des autres**, l’espace les séparant correspond à leurs marges externes (16px dans l'exemple ci-dessus).</callout>
 +
 +=== 1.2 Reset CSS ===
 +<callout type="tip" icon="true">**Pour supprimer les marges de tous les éléments**, il suffit d’écrire le code suivant dans une feuille de style.</callout>
 +
 +<code css *.css>
 +* {
 +   /* Reset CSS */
 +   margin : 0px ;
 +} 
 +</code>
 +
 +<callout type="tip" icon="true">Lors de la mise en page, la suppression des marges de tous les éléments permet de **ne pas être  gêné par des dimensions non choisies**.</callout>
 +
 +=== 1.3 Calcul de la place occupée ===
 +<callout type="warning" color="red" icon="true">**La __place occupée__ par une boîte est calculée** en ajoutant les marges internes (**padding**), externes (**margin**) et l’épaisseur de la bordure (**border**).</callout>
 +
 +{{ :web:boiteex2.png?nolink&650 |}}
 +
 +==== 2. Méthode proposée pour réaliser un gabarit (dimensionné en pixels) ====
 +"//Un gabarit, souvent nommé template, est un patron de mise en page où l'on place images et textes. Aussi, il est souvent utilisé de manière répétitive pour créer des documents présentant une même structure//." Wikipédia. 
 +
 +<callout type="tip" icon="true">**Conseil** : afficher le code HTML, le code CSS et le résultat dans le navigateur sur le même écran pour faciliter la conception.</callout>
 +=== 2.1 Création de la maquette graphique===
 +{{ :web:maquette1a.png?nolink&300|}}
 +On **dessine** la **maquette graphique** (**Fig1a**) du site à la main et on **dimensionne** les boîtes (**Fig1b**). Les dimensions sont choisies en tenant compte de leur contenu.
 +{{ :web:maquette1b.png?nolink |}}
 +
 +
 +=== 2.2 Mise en page ===
 +  - On **crée** la **structure** de la page (code **HTML**). 
 +  - On présente le contenu de la page avec **une** ou plusieurs feuilles de style (code **CSS**) en procédant par étape.
 + 
 +**Étape 1 - Faire apparaître les conteneurs**
 + 
 +Supprimer les **marges extérieures par défaut** de toutes les balises  (**margin**). Déclarer et dimensionner les **conteneurs** (header, footer, section, div, etc.). Faire apparaitre les conteneurs avec des couleurs (**Fig2**).
 +
 +{{  :web:boiteex4.png?nolink|}}
 +
 +__Exemple partiel__
 +
 +<code css *.css>
 +/* Etape 1 */
 +* {
 +    /* Reset CSS */
 +    margin: 0px;
 +}
 +
 +div#page {  /* Dimensionnement et visualisation 
 +du conteneur page */
 +    /* Etape 1 */
 +    background-color: yellow;
 +    width: 700px;
 +    height: 340px;
 +}
 +
 +div#logo {}
 +
 +div#banner {}
 +
 +div#content {}
 +
 +div#aside {}
 +
 +div#footer {}
 +</code>
 +
 +**Étape 2 - Placer les conteneurs**
 +
 +**Placer** les **conteneurs** conformément à la maquette graphique. (**Fig3**)
 +
 +__Exemple partiel__
 +{{ :web:boiteex6.png?nolink|}}
 +
 +<code css *.css>
 +div#logo {
 +    /* Etape 1 */
 +    background-color: lightblue;
 +    width: 100px;
 +    height: 100px;
 +    /* Etape 2 */
 +    /* On fait flotter la boîte à gauche */
 +    float: left;
 +}
 +
 +div#banner {
 +    /* Etape 1 */
 +    background-color: lightgreen;
 +    width: 600px;
 +    height: 100px;
 +    /* Etape 2 */
 +    /* On fait flotter la boîte à gauche */
 +    float: left;
 +}
 +
 +div#content {
 +    /* Etape 1 */
 +    background-color: lightgray;
 +    width: 400px;
 +    height: 200px;
 +    /* Etape 2 */
 +    /* On fait flotter la boîte à gauche */
 +    float: left;
 +    /* mais  en dessous  de banner */
 +    clear: both;
 +}
 +</code>
 +
 +**Étape 3 - Eloigner les conteneurs (éventuellement)**
 +
 +** Affiner** le positionnement des blocs en plaçant des marges extérieures (**margin**) (**Fig4**)
 +{{ :web:boiteex6b.png?nolink|}}
 +
 +__Exemple__
 +<code css *.css>
 +div#logo {
 +    /* Etape 1 */
 +    background-color: lightblue;
 +    /* width est calculé en fonction de margin : 100-2x5 */
 +    width: 90px;
 +    /* height est calculé en fonction de margin : 100-2x5 */
 +    height: 90px;
 +    /* Etape 2 */
 +    float: left;
 +    /* Etape 3 */
 +    margin: 5px;
 +}
 +
 +div#banner {
 +    /* Etape 1 */
 +    background-color: lightgreen;
 +    /* width est calculé en fonction de margin : 600-2x5 */
 +    width: 590px;
 +    /* height est calculé en fonction de margin : 100-2x5 */
 +    height: 90px;
 +    /* Etape 2 */
 +    float: left;
 +    /* Etape 3 */
 +    margin: 5px;
 +}
 +</code>
 +
 +<callout type="warning" color="red" icon="true">Pour conserver l'occupation initiale des boîtes sur la page, il faut soustraire les marges au contenu.</callout>
 +
 +**Étape 4 - Simuler le contenu textuel**
 +
 +** Simuler** le rendu avec du texte "**//Lorem Ipsum//**" et placer les marges intérieures (**padding**). (**Fig5**)
 +
 +__Exemple__
 +{{ :web:boiteex6c.png?nolink|}}
 +<code css *.css>
 +div#content {
 +    /* Etape 1 */
 +    background-color: lightgray;
 +    /* A l'étape 3, width est calculé en fonction de margin : 
 +    400-2x5 */
 +    width: 390px;
 +    height: 200px;
 +    /* Etape 2 */
 +    clear: both;
 +    float: left;
 +    /* Etape 3 */
 +    margin-left: 5px;
 +    margin-right: 5px;
 +    /* Etape 4 */
 +    padding: 10px;
 +    /* Redimensionnement automatique de la boîte */
 +    /* pour conserver la place occupée initialement */
 +    box-sizing: border-box; 
 +    text-align: justify;
 +    font-size: 16px;
 +}                    
 +</code>
 +
 +** Étape 5 - Faire les finitions**
 +{{ :web:boiteex6d.png?nolink&400|}}
 +
 +**Remplacer** le texte "//Lorem Ipsum//" et faire les **finitions** (bords arrondis, bordures, taille de texte, police de caractère factoriser le code, etc.) (**Fig6**).
 +
 +__Exemple partiel__
 +<code css *.css>
 +
 +body {
 +    /* Etape 4 */
 +    font-family: "Trebuchet MS", Arial, Helvetica, 
 +    sans-serif;
 +    /* Etape 5 */
 +    background-color: rgb(65, 106, 242, 0.2);
 +    font-size: 14px;
 +}
 +
 +div#page {
 +    /* Etape 1 */
 +    width: 700px;
 +    /* Etape 5 */
 +    /* height: 340px; est supprimé à l'étape 5*/
 +    /* margin centre la page */
 +    margin: 0px auto;
 +}
 +</code>
 +
 +<callout type="tip" icon="true">**Astuces** \\
 + - Pour **centrer verticalement** le texte dans une boîte, remplacer height par //**line-height**//. \\ 
 + - Pour **centrer horizontalement** le texte dans une boîte, utiliser : //**text-align:center**//; \\ 
 + - Pour **centrer horizontalement** une boîte sur l'écran (par exemple la page), utiliser :  **margin: 0 auto**; \\ 
 + - Pour **redimensionner automatiquement** une boîte après lui avoir appliqué du padding, \\ utiliser : **box-sizing:border-box**; \\
 + - Pour **centrer une image**, utiliser **margin:auto; display:flex;**
 +</callout>
 +
 +==== 3. Code de la démonstration ====
 +<html><a href="https://webge.fr/doc/tsin/tp/TSIN_WEB2a_Base_HTML_CSS_Code_demo.zip" title="démo"><strong>Télécharger</strong></a></html> le code de la démonstration **//Comprendre le modèle de boîte//** .