n’a pas de marge par défaut**.
__Exemple__
{{ :web:boiteex1.png?nolink |}}
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).
=== 1.2 Reset CSS ===
**Pour supprimer les marges de tous les éléments**, il suffit d’écrire le code suivant dans une feuille de style.
* {
/* Reset CSS */
margin : 0px ;
}
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**.
=== 1.3 Calcul de la place occupée ===
**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**).
{{ :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.
Pour **faciliter la conception du code**, afficher le code HTML, le code CSS et le rendu dans le navigateur côte à côte sur l'écran.
=== 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__
/* 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 {}
**Étape 2 - Placer les conteneurs**
**Placer** les **conteneurs** conformément à la maquette graphique. (**Fig3**)
__Exemple partiel__
{{ :web:boiteex6.png?nolink|}}
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;
}
**É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__
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;
}
Pour conserver l'occupation initiale des boîtes sur la page, il faut soustraire les marges au contenu.
**É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|}}
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;
}
** É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__
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;
}
- 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;**
==== 3. Code de la démonstration ====
Télécharger le code de la démonstration **//Comprendre le modèle de boîte//** .