Le Zoning

Voir au format PDF
Vous êtes ici : >> HTML-CSS / Le Zoning
Temps d'étude : 1h. Niveau : Facile.
Tags : Le Zoning
Fichier(s) utile(s) pour ce cours : /

Demonstration : Zoning et modele de mise en page

Si l'on souhaite créer un site web, il va falloir apprendre à créer des zones (un zoning).

Avant d'intégrer des images ou encore de saisir du texte, nous avons besoin de définir des emplacements pour un positionnement précis de nos informations.

Pour cela, nous allons créer deux nouveaux fichiers : modele1.html & modele1.css
Pour mieux comprendre, prenons un cas d'étude, imaginons que nous souhaitons viser ce rendu graphique :

explications Html / Css

Voici le code correspondant.

modele1.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Modele</title>
			<link rel="stylesheet" href="modele1.css">
		</head>
		<body>		
			<div id="conteneur">
				<header>
					<p> Zone du Haut</p>
				</header>
				<div class="gauche">
					<p> Zone de Gauche</p>
				</div>
				<div class="milieu">
					<p> Zone du Milieu</p>
				</div>
				<div class="clear"></div> <!-- on arrete l'effet flottant -->
			</div>
		</body>
	</html>
modele1.css
	#conteneur{
	background: #336699; width: 800px;
	}
	header{
	background: #ff5555; width: 800px; height: 70px;
	}
	.gauche{
	background: #5585ff; width: 150px; height: 530px; float: left;
	}
	.milieu{
	background: #55D87C; width: 650px; height: 530px; float: left;
	}
	.clear{
	clear: both;
	}

Exercice : Zoning et modele de mise en page - 2

Maintenant que vous avez pris des forces, nous allons nous entrainer avec plusieurs exercices.
Si vous comprenez le code c'est déjà pas mal mais il ne suffit pas de savoir le lire, il faut également savoir le créer.

Exercice, reproduire cette image :

Conseil : aidez-vous de l'extension firebug

explications Html / Css

Voici la correction :

modele2.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Modele</title>
			<link rel="stylesheet" href="modele2.css">
		</head>
		<body>		
			<div id="conteneur">
				<header>
					<p> Zone du Haut</p>
				</header>
				<div class="gauche">
					<p> Zone de Gauche</p>
				</div>
				<div class="milieu">
					<p> Zone du Milieu</p>
				</div>
				<div class="droite">
					<p> Zone de Droite</p>
				</div>
				<div class="clear"></div>
			</div>
		</body>
	</html>
modele2.css
	#conteneur{
	background: #336699; width: 800px;
	}
	header{
	background: #ff5555; width: 800px; height: 70px;
	}
	.gauche{
	background: #5585ff; width: 150px; height: 530px; float: left;
	}
	.milieu{
	background: #55D87C; width: 500px; height: 530px; float: left;
	}
	.droite{
	background: #9f6f3f; width: 150px; height: 530px; float: left;
	}
	.clear{
	clear: both;
	}

Exercice : Zoning et modele de mise en page - 3

Exercice, reproduire cette image :

explications Html / Css

Voici la correction :

modele3.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Modele</title>
			<link rel="stylesheet" href="modele3.css">
		</head>
		<body>		
			<div id="conteneur">
				<div class="gauche">gauche</div>
				<div class="droite">droite</div>
				<div class="clear"></div>
				<footer>Bas</footer>
			</div>
		</body>
	</html>
modele3.css
	#conteneur{ width: 1000px; margin: 0 auto;}
	.gauche{ background: #40A497; height: 400px; width: 500px; float: left;}
	.droite{ background: #9A40A4; height: 400px;  width: 500px;float: left; }
	footer{ background: #F0C000; height: 80px; width: 1000px; }
	.clear{ clear: both; }

Exercice : Zoning et modele de mise en page - 4

Exercice, reproduire cette image :

explications Html / Css

Voici la correction :

modele4.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Modele</title>
			<link rel="stylesheet" href="modele4.css">
		</head>
		<body>	
			<div id="conteneur">
				<header>Haut</header>
				<nav>Menu</nav>
				<section>Milieu</section>
				<footer>Bas</footer>
			</div>
		</body>
	</html>
modele4.css
	#conteneur{ width: 1000px; margin: 0 auto; border: 2px solid; }
	header{ background: #40A497; height: 80px; }
	nav{ background: #9A40A4; height: 30px;  }
	section{ background: #F0C000; height: 500px; margin: 20px; }
	footer{ background: #40A497; height: 60px;  }
	.clear{ clear: both; }

Exercice : Zoning et modele de mise en page - 5

Exercice, reproduire cette image :

explications Html / Css

Voici la correction :

modele5.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Modele</title>
			<link rel="stylesheet" href="modele5.css">
		</head>
		<body>		
			<div id="conteneur">
				<header>Haut</header>
				<nav>Menu</nav>
				<section>
					<div class="a">A</div>
					<div class="b">B</div>
					<div class="c">C</div>
					<div class="d">D</div>
				</section>
				<footer>Bas</footer>
			</div>
		</body>
	</html>
modele5.css
	#conteneur{ width: 1000px; margin: 0 auto; border: 2px solid; }
	header{ background: #40A497; height: 80px; }
	nav{ background: #9A40A4; height: 30px;  }
	section{ background: #F0C000; height: 500px; margin: 20px; }
	.a{ background: #32a7a0; height: 250px; width: 480px;float: left; }
	.b{ background: #d69f1b; height: 250px; width: 480px; float: left; }
	.c{ background: #b1b2d8; height: 250px; width: 480px; float: left;}
	.d{ background: #1217f2; height: 250px; width: 480px;float: left; }
	footer{ background: #40A497; height: 60px;  }
	.clear{ clear: both; }

Exercice : Zoning et modele de mise en page - 6

Exercice, reproduire cette image :

explications Html / Css

Voici la correction :

modele6.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Modele</title>
			<link rel="stylesheet" href="modele6.css">
		</head>
		<body>		
			<div id="conteneur">
				<header>
					<p>zone du haut</p>
				</header>
				<nav>menu</nav>
				<section>
					<div class="GZ couleur_rouge"> 
						<div class="PZ">PZ1</div>
						<div class="PZ">PZ2</div>
						<div class="PZ">PZ3</div>
						<div class="PZ">PZ4</div>
					</div>
					<div class="GZ couleur_jaune"> 
						<div class="PZ">PZ5</div>
						<div class="PZ">PZ6</div>
						<div class="PZ">PZ7</div>
						<div class="PZ">PZ8</div>
					</div>
					<div class="GZ couleur_verte"> 
						<div class="PZ">PZ9</div>
						<div class="PZ">PZ10</div>
						<div class="PZ">PZ11</div>
						<div class="PZ">PZ12</div>
					</div>
					<div class="GZ couleur_marron"> 
						<div class="PZ">PZ13</div>
						<div class="PZ">PZ14</div>
						<div class="PZ">PZ15</div>
						<div class="PZ">PZ16</div>
					</div>
				</section>
				<footer>
					<p>Zone du bas</p>
				</footer>
			</div>
		</body>
	</html>
modele6.css
	#conteneur{ width: 960px; background: pink;	color: white; margin: 0 auto; }
	header { background: purple; height: 60px; line-height: 60px; text-align: center; }
	nav { background: blue; height: 30px; line-height: 30px; text-align: center; }
	section{ height: 500px; background: gray; margin: 10px; }
	.GZ { border: 1px solid; float: left; height: 248px; width: 468px; }
	.PZ { border: 1px solid; float: left; height: 122px; line-height: 122px; text-align: center; width: 232px; }
	.couleur_rouge{	background: red; }
	.couleur_jaune{	background: orange; }
	.couleur_verte{	background: green; }
	.couleur_marron{background: brown; }
	footer { background: silver;height: 70px;line-height: 70px;	text-align: center;	}

Exercice : Zoning et modele de mise en page - 7

Exercice, reproduire cette image :

explications Html / Css

Voici la correction :

modele7.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Modele</title>
			<link rel="stylesheet" href="modele7.css">
		</head>
		<body>		
			<div id="conteneur">
				<header>
					<p> Zone du Haut</p>
				</header>
				<div class="gauche">
					<p> Zone de Gauche</p>
				</div>
				<div class="milieu">
					<div class="z_milieu">
						Z1
					</div>
					<div class="z_milieu">
						Z2
					</div>
					<div class="z_milieu">
						Z3
					</div>
					<div class="z_milieu">
						Z4
					</div>
					<div class="z_milieu">
						Z5
					</div>
				</div>
				<div class="droite">
					<p> Zone du Droite</p>
				</div>
				<div class="clear"></div>
				<div class="bas">
					<p>Zone du bas</p>
				</div>
				<div class="clear"></div>
			</div>
		</body>
	</html>
modele7.css
	html, body, div, span, applet, object, iframe, h1, h2, h2, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure,figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;	text-align: center;	color: white; }
	#conteneur { background: none repeat scroll 0 0 #336699;    height: 600px;    margin: 0 auto;    width: 800px;}
	header{	background: #ff5555; 	width: 800px; 	height: 70px;	line-height: 70px; }
	.gauche{ background: #5585ff; width: 150px; height: 530px; 	float: left;	line-height: 530px; }
	.droite{	background: #5585ff; 	width: 150px; height: 530px; 	float: left;	line-height: 530px; }
	.milieu {    background: #55d87c;    float: left;    height: 450px;    line-height: 530px;    width: 500px; }
	.z_milieu {    border: 1px solid;    float: left;    height: 448px;    width: 98px; }
	.bas {    background: gold;    bottom: 80px;    height: 80px;    line-height: 80px;    left: 150px;    position: relative;    width: 500px; }
	.clear{	clear: both;}

Allez au chapitre suivant : 12. Les Tableaux

HTML CSS

1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web