Creer Sa Page Web

Voir au format PDF
Temps d'étude : 1h. Niveau : Facile.
Tags : Creer Sa Page Web
Fichier(s) utile(s) pour ce cours : /

Une structure Fixe (non responsive)

Nous allons étudier la structure d'un site web fixe.
Exemple Html Fixe :

site-fixe.html
	<!Doctype html>
	<html>
		<head>
			<title>Mon Site Fixe SANS Responsive</title>
			<link rel="stylesheet" href="site-fixe.css" />
		</head>
		<body>
			<div id="conteneur">
				<header>
					<p>Haut</p>
				</header>
				<nav>
					<p>Menu</p>
				</nav>
				<section>
					<div class="a"><p>A</p></div>
					<div class="b"><p>B</p></div>
					<div class="clear"></div>
					<div class="c"><p>C</p></div>
					<div class="d"><p>D</p></div>
					<div class="clear"></div>
				</section>
				<footer>
					<p>Bas</p>
				</footer>
			</div>
		</body>
	</html>

Nous créons une div (div pour division) permettant d'englober les autres éléments du site dans une même zone.

Nous faisons appel à la balise header et footer respectivement pour le haut et bas de site.

La balise nav permet de créer une zone de navigation.

La balise section permettra dans notre cas de prévoir une partie centrale pour le contenu

Pour cet exemple, nous avons déclarer d'autres zones dans la partie section : a, b, c et d.

Exemple Css Fixe :

site-fixe.css
	#conteneur{
	border: 2px solid;
	margin: 0 auto;
	width: 960px;
	}
	header{
	background: #f6523f;
	height: 100px;
	}
	p{ margin: 0; }
	nav{
	background: #665533;
	height: 30px;
	}
	section{
	background: #f23f98;
	margin: 20px;
	}
	footer{
	background: #32f65f;
	height: 50px;
	}
	.a{
	float: left;
	width: 460px;
	height: 250px;
	background: #336699;
	}
	.b{
	float: left;
	width: 460px;
	height: 250px;
	background: #767676;
	}
	.c{
	float: left;
	width: 460px;
	height: 250px;
	background: #fda500;
	}
	.d{
	float: left;
	width: 460px;
	height: 250px;
	background: #aa2355;
	}
	.clear{ clear: both; }

Certaines parties de CSS auraient pu être regroupées mais comme il s'agit d'un entrainement, nous avons choisi de décomposer le code

Décryptons le code CSS Fixe :

Cadre explication (background de fond) :

#conteneur permet de selectionner la zone (div) ayant pour id conteneur (pour contenir toute la page web).

border: 2px solid; permet de dessiner une bordure de 2 pixels tout autour.

margin: 0 auto; permet de centrer la page web horizontalement.

width: 960px; permet de donner une largeur fixe.


header permet de selectionner la zone du haut (balise header).

background: #f6523f; permet d'appliquer une couleur de fond.

height: 100px; permet de donner une hauteur fixe.


p permet de selectionner tous les paragraphes.

margin: 0; permet de "casser" l'heritage de marges.


nav permet de selectionner la zone de navigation (menu).

background: #665533; permet d'appliquer une couleur de fond.

height: 30px; permet de donner une hauteur fixe.


section permet de selectionner la zone ayant pour balise <section>.

background: #f23f98; permet d'appliquer une couleur de fond.

margin: 20px; permet de donner une marge tout autour de la zone.


footer permet de selectionner la zone du bas ayant pour balise <footer>.

background: #32f65f; permet d'appliquer une couleur de fond.

height: 50px; permet de donner une hauteur fixe.


.a, .b, .c, .d permet de selectionner la zone ayant pour classe css "a".

float: left; donne un effet flottant

width: 460px; donne une largeur fixe

height: 250px; donne une hauteur fixe

background: #336699; donne une couleur de fond


.clear permet de selectionner la zone ayant pour classe css "clear".

clear: both; permet de "stopper" l'effet flottant (initié par le float: left;).


Le Résultat (Fixe) explication responsive design


Une structure Adaptative

Vous l'aurez compris, pour obtenir un site responsive Design, il faut s'en préoccuper dès l'origine de la création du projet.

Exemple Html Adaptatif :

site-adaptatif.html
	<!Doctype html>
	<html>
		<head>
			<title>Mon Site Responsive</title>
			<link rel="stylesheet" href="site-adaptatif.css" />
		</head>
		<body>
			<div id="conteneur">
				<header>
					<p>Haut</p>
				</header>
				<nav>
					<p>Menu</p>
				</nav>
				<section>
					<div class="a"><p>A</p></div>
					<div class="b"><p>B</p></div>
					<div class="clear"></div>
					<div class="c"><p>C</p></div>
					<div class="d"><p>D</p></div>
					<div class="clear"></div>
				</section>
				<footer>
					<p>Bas</p>
				</footer>
			</div>
		</body>
	</html>

Nous créons une div (div pour division) permettant d'englober les autres éléments du site dans une même zone.

Nous faisons appel à la balise header et footer respectivement pour le haut et bas de site.

La balise nav permet de créer une zone de navigation.

La balise section permettra dans notre cas de prévoir une partie centrale pour le contenu

Pour cet exemple, nous avons déclarer d'autres zones dans la partie section : a, b, c et d.

Exemple Css adaptatif :

site-adaptatif.css
	#conteneur{
	border: 2px solid;
	margin: 0 auto;
	width: 960px;
	}
	header{
	background: #f6523f;
	height: 100px;
	}
	p{ margin: 0; }
	nav{
	background: #665533;
	height: 30px;
	}
	section{
	background: #f23f98;
	margin: 20px;
	}
	footer{
	background: #32f65f;
	height: 50px;
	}
	.a{
	float: left;
	width: 460px;
	height: 250px;
	background: #336699;
	}
	.b{
	float: left;
	width: 460px;
	height: 250px;
	background: #767676;
	}
	.c{
	float: left;
	width: 460px;
	height: 250px;
	background: #fda500;
	}
	.d{
	float: left;
	width: 460px;
	height: 250px;
	background: #aa2355;
	}
	.clear{ clear: both; }
	/********************************** PARTIE RESPONSIVE ADAPTATIVE ************************************/
	@media screen and (max-width: 1050px){
	#conteneur{ width: 750px; }
	.a, .b, .c, .d{ width: 355px; }
	}

	@media screen and (max-width: 780px){
	#conteneur{ width: 550px; }
	.a, .b, .c, .d{ width: 255px; }
	}

	@media screen and (max-width: 580px){
	#conteneur{ width: 100%; }
	.a, .b, .c, .d{ width: 100%; height: 125px; }
	section{ margin: 0; }
	}
	/********************************** PARTIE RESPONSIVE ADAPTATIVE ************************************/

Certaines parties de CSS auraient pu être regroupées mais comme il s'agit d'un entrainement, nous avons choisi de décomposer le code

Décryptons le code CSS adaptatif :

explications:

#conteneur permet de selectionner la zone (div) ayant pour id conteneur (pour contenir toute la page web).

border: 2px solid; permet de dessiner une bordure de 2 pixels tout autour.

margin: 0 auto; permet de centrer la page web horizontalement.

width: 960px; permet de donner une largeur fixe.


header permet de selectionner la zone du haut (balise header).

background: #f6523f; permet d'appliquer une couleur de fond.

height: 100px; permet de donner une hauteur fixe.


p permet de selectionner tous les paragraphes.

margin: 0; permet de "casser" l'heritage de marges.


nav permet de selectionner la zone de navigation (menu).

background: #665533; permet d'appliquer une couleur de fond.

height: 30px; permet de donner une hauteur fixe.


section permet de selectionner la zone ayant pour balise <section>.

background: #f23f98; permet d'appliquer une couleur de fond.

margin: 20px; permet de donner une marge tout autour de la zone.


footer permet de selectionner la zone du bas ayant pour balise <footer>.

background: #32f65f; permet d'appliquer une couleur de fond.

height: 50px; permet de donner une hauteur fixe.


.a, .b, .c, .d permet de selectionner la zone ayant pour classe css "a".

float: left; donne un effet flottant

width: 460px; donne une largeur fixe

height: 250px; donne une hauteur fixe

background: #336699; donne une couleur de fond


.clear permet de selectionner la zone ayant pour classe css "clear".

clear: both; permet de "stopper" l'effet flottant (initié par le float: left;).


Voici la partie responsive adaptative :
@media permet de prévoir un comportement différent en fonction d'une résolution d'écran.

@media screen and (max-width: 1050px){#conteneur{ width: 750px; } .a, .b, .c, .d{ width: 355px; } } entre 780px et 1050px, le #conteneur fera 750px de large et les zones .a, .b, .c, .d feront 355px. de large


@media permet de prévoir un comportement différent en fonction d'une résolution d'écran.

@media screen and (max-width: 1050px){#conteneur{ width: 750px; } .a, .b, .c, .d{ width: 355px; } } entre 780px et 1050px, le #conteneur fera 750px de large et les zones .a, .b, .c, .d feront 355px. de large


@media permet de prévoir un comportement différent en fonction d'une résolution d'écran.

@media screen and (max-width: 780px){ #conteneur{ width: 550px; } .a, .b, .c, .d{ width: 255px; } } entre 0px et 780px, le #conteneur fera 550px et les zones .a, .b, .c, .d feront 510px.
@media permet de prévoir un comportement différent en fonction d'une résolution d'écran.

@media screen and (max-width: 580px){ #conteneur{ width: 100%; } .a, .b, .c, .d{ width: 100%; height: 125px; }section{ margin: 0; } } entre 0px et 580px, le #conteneur fera 100% (580px ou -) et les zones .a, .b, .c, .d feront 100% (580px ou -)


Le Résultat (adaptatif) explication responsive design


Si vous avez copié/collé le code, n'hésitez pas à redimensionner votre fenêtre pour tester l'elasticité du site

Une structure Fluide

Exemple Html Fluide :

site-fluide.html
	<!Doctype html>
	<html>
		<head>
			<title>Mon Site Responsive</title>
			<link rel="stylesheet" href="site-fluide.css" />
		</head>
		<body>
			<div id="conteneur">
				<header>
					<p>Haut</p>
				</header>
				<nav>
					<p>Menu</p>
				</nav>
				<section>
					<div class="a"><p>A</p></div>
					<div class="b"><p>B</p></div>
					<div class="clear"></div>
					<div class="c"><p>C</p></div>
					<div class="d"><p>D</p></div>
					<div class="clear"></div>
				</section>
				<footer>
					<p>Bas</p>
				</footer>
			</div>
		</body>
	</html>

Nous créons une div (div pour division) permettant d'englober les autres éléments du site dans une même zone.

Nous faisons appel à la balise header et footer respectivement pour le haut et bas de site.

La balise nav permet de créer une zone de navigation.

La balise section permettra dans notre cas de prévoir une partie centrale pour le contenu

Pour cet exemple, nous avons déclarer d'autres zones dans la partie section : a, b, c et d.

Exemple Css fluide :

site-fluide.css
	#conteneur{
	border: 2px solid;
	margin: 0 auto;
	width: 80%;
	max-width: 1200px;
	font-size: 1.2vw;
	}
	header{
	background: #f6523f;
	height: 15vh;
	}
	p{ margin: 0; }
	nav{
	background: #665533;
	height: 5vh;
	}
	section{
	background: #f23f98;
	margin: 2%;
	}
	footer{
	background: #32f65f;
	height: 7.5vh;
	}
	.a{
	float: left;
	width: 50%;
	height: 28vh;
	background: #336699;
	}
	.b{
	float: left;
	width: 50%;
	height: 28vh;
	background: #767676;
	}
	.c{
	float: left;
	width: 50%;
	height: 28vh;
	background: #fda500;
	}
	.d{
	float: left;
	width: 50%;
	height: 28vh;
	background: #aa2355;
	}
	.clear{ clear: both; }

Certaines parties de CSS auraient pu être regroupées mais comme il s'agit d'un entrainement, nous avons choisi de décomposer le code

Décryptons le code CSS fluide :

Cadre explication (background de fond) :

#conteneur permet de selectionner la zone (div) ayant pour id conteneur (pour contenir toute la page web).

border: 2px solid; permet de dessiner une bordure de 2 pixels tout autour.

margin: 0 auto; permet de centrer la page web horizontalement.

width: 80%; permet de donner une largeur de 80% au conteneur (80 % de la taille de l'écran, sauf dans le cas d'une max-width, celui ci sera donc toujours adapté).

max-width: 1200px; La largeur maximum est fixée à 1200px. Par conséquent le conteneur fera 80% de 1200px ou 80% d'une largeur inférieure (selon la taille de l'écran / fenêtre)

font-size: 1.2vw; La taille du texte sera de 1,2 ViewPortWidht


header permet de selectionner la zone du haut (balise header).

background: #f6523f; permet d'appliquer une couleur de fond.

height: 15vh; permet de donner une hauteur de 15 ViewPortHeight (15% en hauteur).


p permet de selectionner tous les paragraphes.

margin: 0; permet de "casser" l'heritage de marges.


nav permet de selectionner la zone de navigation (menu).

background: #665533; permet d'appliquer une couleur de fond.

height: 5vh; permet de donner une hauteur de 5 ViewPortHeight (5% en hauteur)


section permet de selectionner la zone ayant pour balise <section>.

background: #f23f98; permet d'appliquer une couleur de fond.

margin: 2%; permet de donner une marge tout autour de la zone de 2% (les pourcentages permettent d'imposer une marge variable selon la taille de l'écran / fenêtre).


footer permet de selectionner la zone du bas ayant pour balise <footer>.

background: #32f65f; permet d'appliquer une couleur de fond.

height: 7.5vh; permet de donner une hauteur de 7.5 ViewPortHeight (7.5% en hauteur)


.a, .b, .c, .d permet de selectionner la zone ayant pour classe css "a".

float: left; donne un effet flottant

width: 50%; donne une largeur variable : 50% de la taille de l'écran / fenêtre en largeur

height: 28vh; donne une hauteur variable : 50% de la taille de l'écran / fenêtre en hauteur

background: #336699; donne une couleur de fond


.clear permet de selectionner la zone ayant pour classe css "clear".

clear: both; permet de "stopper" l'effet flottant (initié par le float: left;).


Avec les tailles variables (pourcentage et viewport), nous n'avons pas utilisé la partie css adaptative mais les deux techniques pourraient très bien être cumulées pour les besoins d'un projet.

fléche Informations
vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
vh : « Viewport Height » correspond à l’unité relative à la hauteur de votre écran


Le Résultat (fluide) explication responsive design


Si vous avez copier/coller le code, n'hésitez pas à redimensionner votre fenêtre pour tester l'elasticité du site

Les Unités de mesure

Voici les différentes unités de mesures que nous pouvons rencontrer :

  • px - p{ font-size: 15px; } - Taille de texte exprimée en pixels
    PX « pixel » est une unité de mesure absolue qui apparait toujours de la même manière sur les différents écrans / résolutions.


  • em - p{ font-size: 1em; } - Taille de texte exprimée en EM
    EM est une unité de longueur relative à la police héritée. font-size: 0.7 em; correspond a 70% de la taille normale de la police.


  • mm - p{ font-size: 5mm; } - Taille de texte exprimée en milimètres


  • cm - p{ font-size: 5cm; } - Taille de texte exprimée en centimètres


  • % - div{ width: 70%; } - Largeur d'une zone exprimée en pourcentage
    Les pourcentages sont relatifs a la taille de la fenêtre.


  • vh - div{ height: 70vh; } - Hauteur d'une zone exprimée en VH
    VH « Viewport Height », fait référence à l’unité relative de la hauteur d'écran.


  • vw - div{ width: 70vw; } - Largeur d'une zone exprimée en VH
    VW : « Viewport Width », fait référence à l’unité relative de la largeur d'écran.


  • vmin - div{ width: 70vmin; } - Largeur minimum d'une zone exprimée en VMIN (VM pour IE9+)
    VMIN « Viewport Minimum » - fait référence à l'unité relative de la largeur d'écran (ou d'un bloc parent s'il y en a un). Nous utilisons la propriété VM pour IE9 et +.


  • vmax - div{ width: 200vmax; } - Largeur maximum d'une zone exprimée en VMAX (VM pour IE9+)
    VMAX « Viewport Maximum » - fait référence à l'unité relative de la largeur d'écran (ou d'un bloc parent s'il y en a un).


D'autres unités de mesures existent tel que : in, pt, pc, ex, ch, rem.

Allez au chapitre suivant : 4. Site Web Responsive Design

RESPONSIVE DESIGN

1. Le Responsive Design 2. Exemples 3. Creer Sa Page Web 4. Site Web Responsive Design