TP : Zoning HTML / CSS

Transcription

1 RETROUVEZ L INTÉGRALITÉ DES COURS SUR EPROJET.FR EVOGUE.FR LIAM TARDIEU TP : Zoning HTML / CSS Si l'on souhaite créer un site web, cela commence par 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. Conseil : Pour concevoir des structures de sites web, aidez-vous de l'extension firebug. 01 Exercice 1 Création de deux nouveaux fichiers : modele1.html & modele1.css modele1.html <link rel="stylesheet" href="modele1.css">

2 <header> <p> Zone du Haut</p> </header> <div class="gauche"> <p> Zone de Gauche</p> <div class="milieu"> <p> Zone du Milieu</p> <div class="clear"> <!-- on arrete l'effet flottant --> 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; 02 Exercice 2 Création de deux nouveaux fichiers : modele2.html & modele2.css modele2.html

3 <link rel="stylesheet" href="modele2.css"> <header> <p> Zone du Haut</p> </header> <div class="gauche"> <p> Zone de Gauche</p> <div class="milieu"> <p> Zone du Milieu</p> <div class="droite"> <p> Zone de Droite</p> <div class="clear"> 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; 03 Exercice 3 Création de deux nouveaux fichiers : modele3.html & modele3.css

4 modele3.html <link rel="stylesheet" href="modele3.css"> <div class="gauche">gauche <div class="droite">droite <div class="clear"> <footer>bas</footer> 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; 04 Exercice 4 Création de deux nouveaux fichiers : modele4.html & modele4.css modele4.html <link rel="stylesheet" href="modele4.css">

5 <header>haut</header> <nav>menu</nav> <section>milieu</section> <footer>bas</footer> 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; 05 Exercice 5 Création de deux nouveaux fichiers : modele5.html & modele5.css modele5.html <link rel="stylesheet" href="modele5.css"> <header>haut</header> <nav>menu</nav> <section> <div class="a">a <div class="b">b <div class="c">c <div class="d">d </section> <footer>bas</footer>

6 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; 06 Exercice 6 Création de deux nouveaux fichiers : modele6.html & modele6.css modele6.html <link rel="stylesheet" href="modele6.css"> <header> <p>zone du haut</p> </header> <nav>menu</nav> <section> <div class="gz couleur_rouge">

7 <div class="pz">pz1 <div class="pz">pz2 <div class="pz">pz3 <div class="pz">pz4 <div class="gz couleur_jaune"> <div class="pz">pz5 <div class="pz">pz6 <div class="pz">pz7 <div class="pz">pz8 <div class="gz couleur_verte"> <div class="pz">pz9 <div class="pz">pz10 <div class="pz">pz11 <div class="pz">pz12 <div class="gz couleur_marron"> <div class="pz">pz13 <div class="pz">pz14 <div class="pz">pz15 <div class="pz">pz16 </section> <footer> <p>zone du bas</p> </footer> 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; 07 Exercice 7 Création de deux nouveaux fichiers : modele7.html & modele7.css

8 modele7.html <link rel="stylesheet" href="modele7.css"> <header> <p> Zone du Haut</p> </header> <div class="gauche"> <p> Zone de Gauche</p> <div class="milieu"> Z1 Z2 Z3 Z4 Z5 <div class="droite"> <p> Zone du Droite</p> <div class="clear"> <div class="bas"> <p>zone du bas</p> <div class="clear"> modele7.css

9 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; Copyright Aucune reproduction, même partielle (textes, documents, images, etc.), ne peut être faite sans l'accord de son auteur. Liam TARDIEU EVOGUE.fr - EPROJET.fr