Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Prochaine révisionLes deux révisions suivantes | ||
web:positioncss [2020/10/02 08:52] – philippe | web:positioncss [2024/04/30 09:42] – [2.2 Mise en page] phil | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | [[web: | ||
+ | |||
+ | ===== WEB - Conception d'un gabarit CSS ===== | ||
+ | |||
+ | [Mise à jour le 18/6/2023] | ||
+ | |||
+ | * **Ressources** | ||
+ | * MDN web docs : < | ||
+ | |||
+ | * **Liens connexes** | ||
+ | * [[web: | ||
+ | * [[web: | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * **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' | ||
+ | * **Structure fixe (largeur fixe, centrée ou non)** | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | 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=" | ||
+ | |||
+ | {{ : | ||
+ | <callout type=" | ||
+ | |||
+ | __Exemple__ | ||
+ | {{ : | ||
+ | |||
+ | <callout type=" | ||
+ | |||
+ | === 1.2 Reset CSS === | ||
+ | <callout type=" | ||
+ | |||
+ | <code css *.css> | ||
+ | * { | ||
+ | /* Reset CSS */ | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <callout type=" | ||
+ | |||
+ | === 1.3 Calcul de la place occupée === | ||
+ | <callout type=" | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | ==== 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// | ||
+ | |||
+ | <callout type=" | ||
+ | === 2.1 Création de la maquette graphique=== | ||
+ | {{ : | ||
+ | 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. | ||
+ | {{ : | ||
+ | |||
+ | |||
+ | === 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 | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | __Exemple partiel__ | ||
+ | |||
+ | <code css *.css> | ||
+ | /* Etape 1 */ | ||
+ | * { | ||
+ | /* Reset CSS */ | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | div#page { /* Dimensionnement et visualisation | ||
+ | du conteneur page */ | ||
+ | /* Etape 1 */ | ||
+ | background-color: | ||
+ | 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__ | ||
+ | {{ : | ||
+ | |||
+ | <code css *.css> | ||
+ | div#logo { | ||
+ | /* Etape 1 */ | ||
+ | background-color: | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | /* Etape 2 */ | ||
+ | /* On fait flotter la boîte à gauche */ | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | div#banner { | ||
+ | /* Etape 1 */ | ||
+ | background-color: | ||
+ | width: 600px; | ||
+ | height: 100px; | ||
+ | /* Etape 2 */ | ||
+ | /* On fait flotter la boîte à gauche */ | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | div#content { | ||
+ | /* Etape 1 */ | ||
+ | background-color: | ||
+ | width: 400px; | ||
+ | height: 200px; | ||
+ | /* Etape 2 */ | ||
+ | /* On fait flotter la boîte à gauche */ | ||
+ | float: left; | ||
+ | /* mais en dessous | ||
+ | clear: both; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **Étape 3 - Eloigner les conteneurs (éventuellement)** | ||
+ | |||
+ | ** Affiner** le positionnement des blocs en plaçant des marges extérieures (**margin**) (**Fig4**) | ||
+ | {{ : | ||
+ | |||
+ | __Exemple__ | ||
+ | <code css *.css> | ||
+ | div#logo { | ||
+ | /* Etape 1 */ | ||
+ | background-color: | ||
+ | /* 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: | ||
+ | /* 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; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <callout type=" | ||
+ | |||
+ | **Étape 4 - Simuler le contenu textuel** | ||
+ | |||
+ | ** Simuler** le rendu avec du texte " | ||
+ | |||
+ | __Exemple__ | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | div#content { | ||
+ | /* Etape 1 */ | ||
+ | background-color: | ||
+ | /* A l' | ||
+ | 400-2x5 */ | ||
+ | width: 390px; | ||
+ | height: 200px; | ||
+ | /* Etape 2 */ | ||
+ | clear: both; | ||
+ | float: left; | ||
+ | /* Etape 3 */ | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | /* 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** | ||
+ | {{ : | ||
+ | |||
+ | **Remplacer** le texte "// | ||
+ | |||
+ | __Exemple partiel__ | ||
+ | <code css *.css> | ||
+ | |||
+ | body { | ||
+ | /* Etape 4 */ | ||
+ | font-family: | ||
+ | sans-serif; | ||
+ | /* Etape 5 */ | ||
+ | background-color: | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | div#page { | ||
+ | /* Etape 1 */ | ||
+ | width: 700px; | ||
+ | /* Etape 5 */ | ||
+ | /* height: 340px; est supprimé à l' | ||
+ | /* margin centre la page */ | ||
+ | margin: 0px auto; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <callout type=" | ||
+ | - Pour **centrer verticalement** le texte dans une boîte, remplacer height par // | ||
+ | - Pour **centrer horizontalement** le texte dans une boîte, utiliser : // | ||
+ | - Pour **centrer horizontalement** une boîte sur l' | ||
+ | - Pour **redimensionner automatiquement** une boîte après lui avoir appliqué du padding, \\ utiliser : **box-sizing: | ||
+ | - Pour **centrer une image**, utiliser **margin: | ||
+ | </ | ||
+ | |||
+ | ==== 3. Code de la démonstration ==== | ||
+ | < | ||