Étude de cas W3.CSS
Construire un site Web réactif à partir de zéro
Dans ce chapitre, nous allons créer un site Web réactif W3.CSS à partir de zéro.
Tout d'abord, commencez par une simple page HTML, avec une fenêtre d'affichage initiale et un lien vers W3.CSS.
Exemple
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Placer des éléments dans des conteneurs
Pour ajouter des marges et un rembourrage communs, placez les éléments HTML dans des conteneurs (<div class="w3-container">)
Séparez l'en-tête du reste du contenu en utilisant deux éléments <div> distincts :
Exemple
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Classes de couleurs
Les classes de couleur définissent la couleur des éléments.
Cet exemple ajoute une couleur au premier élément <div> :
Exemple
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Classes de taille
Les classes de taille définissent la taille du texte pour les éléments.
Cet exemple ajoute une taille aux deux éléments d'en-tête :
Exemple
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Utiliser des éléments sémantiques
Si vous aimez suivre les recommandations sémantiques HTML5. Je vous en prie!
Peu importe pour W3.CSS si vous utilisez <div> ou <header>.
Exemple
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Mise en page responsive multicolonne
Avec W3.CSS, il est facile de créer une mise en page réactive multicolonne.
Les colonnes se réorganiseront automatiquement lorsqu'elles seront affichées sur différentes tailles d'écran.
Quelques règles de grille :
- Commencez avec une classe de ligne <div class="w3-row-padding">
- Utilisez des classes prédéfinies comme "w3-third" pour créer rapidement des colonnes de grille
- Placez votre contenu textuel dans les colonnes de la grille
Cet exemple montre comment créer trois colonnes de largeur égale :
Exemple
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Cet exemple montre comment créer quatre colonnes de largeur égale :
Exemple
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Colonnes de différentes largeurs
Cet exemple crée une mise en page à trois colonnes où la colonne du milieu est plus large que la première et la dernière colonne :
Exemple
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Barres de navigation
Une barre de navigation est un en-tête de navigation placé en haut de la page.
Exemple
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Navigation dans les pages
Avec la navigation latérale, plusieurs options s'offrent à vous :
- Affichez toujours le volet de navigation à gauche du contenu de la page.
- Utilisez une navigation latérale réactive, "entièrement automatique".
- Ouvrez le volet de navigation sur la partie gauche du contenu de la page.
- Ouvrez le volet de navigation sur tout le contenu de la page.
- Faites glisser le contenu de la page vers la droite lors de l'ouverture du volet de navigation.
- Afficher le volet de navigation sur le côté droit au lieu du côté gauche
Cet exemple ouvre le volet de navigation sur la partie gauche du contenu de la page :
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript utilisé pour ouvrir et masquer le menu :
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}