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 :
Voici le code correspondant.
<!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>
#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; }
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
Voici la correction :
<!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>
#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, reproduire cette image :
Voici la correction :
<!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>
#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, reproduire cette image :
Voici la correction :
<!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>
#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, reproduire cette image :
Voici la correction :
<!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>
#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, reproduire cette image :
Voici la correction :
<!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>
#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, reproduire cette image :
Voici la correction :
<!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>
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;}
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