tp construction d'un site en css : exemple 2

• étape1
• étape2
• étape3
• étape4
• étape5
• étape6
• étape7
• étape8
• site sans tableaux

Etape 1 : Ossature de la page

1. Créer un dossier pour votre site et une page « modele.html » dedans

---

2. Créer une feuille de style « principale.css » (dans un dossier CSS)

---

3. Dans la CSS « principale.css » :
   • Ecrivez une définition pour la balise body :
     • marge-haut = 3px ;
     • couleur de fond = gris-clair ;
   • Ecrivez une définition pour l’identifiant #taille_page :
     • largeur=780px ;
     • marge-gauche=auto ;
     • marge-droite=auto ;
     • couleur de fond = blanc ;

---

4. Dans la page « modele.html » :
   • Faites pointer avec une balise « Link » la feuille de style
   • Dans le Body, commencez par mettre une balise <div> se référant à l’identifiant
     « taille_page »
     • A l’intérieur de cette div, insérez 2 tableaux successivement ayant chacun 1 ligne et 2 colonnes, une largeur de 100%, bord=0
     • Pour le premier tableau, mettez une largeur de 175px et une hauteur de 79px pour la cellule de gauche
     • Pour le deuxième tableau, mettez une largeur de 175px et une hauteur de 400px pour la cellule de gauche
     • Enfin, écrivez les textes « Image bandeau gauche, image bandeau droite, cadre login, cadre liens contextuels, cadre corps de page, cadre bas de page ». Utilisez la balise <br> pour positionner le texte aux bons endroits

Etape 2 : Habillage du contour

1. Téléchargez le dossier des images puis décompressez le pour le déposer dans votre dossier de site

---

2. Dans la page « modele.html » :
   • Dans le premier tableau, insérez l’image haut_gauche.gif dans la cellule de gauche
   • insérez l’image haut_droite.gif dans la cellule de droite
   • Dans la cellule de gauche du deuxième tableau, ajoutez une couleur de fond #748CB8 et un alignement vertical = haut
   • Dans la cellule de droite, encadrez chacun des trois textes d’une balise <div>
     • Dans la div qui encadre le texte « Menu haut », ajouter l’identifiant
       « id=corps_haut»
     • Dans la div qui encadre le texte « Cadre corps de page », ajouter l’identifiant
       « id=corps_milieu»
     • Dans la div qui encadre le texte « Bas de page », ajouter l’identifiant « id=corps_bas»

Etape 3 : Préparation et habillage du corps de la page

1. Dans la CSS « principale.css » :
   • Ecrivez une définition pour l’identifiant #corps_haut :
     • BACKGROUND-POSITION : gauche haut ;
     • BACKGROUND-REPEAT: no-repeat ;
     • hauteur: 32px ;
     • image de fond : url(../images/haut_corps.gif) ;
     • marge gauche: 1px ;
   • Ecrivez une définition pour l’identifiant #corps_milieu :
     • Bord gauche: #333333 6px solid;
     • Marge gauche : 1px;
     • hauteur : 400px;
     • padding gauche : 5px;
   • Ajoutez une définition pour la balise h1 de l’identifiant #corps_milieu :
     • Alignement du texte : centre ;
     • Marge : 0px 0px 45px 0px ;
   • Ecrivez une définition pour l’identifiant #corps_bas :
     • BACKGROUND-POSITION: gauche haut ;
     • BACKGROUND-REPEAT: no-repeat;
     • Marge gauche : 1px;
     • image de fond : url(../images/bas_corps.gif);
     • Hauteur : 39px;
     • Marge haut: 0px;

---

2. Dans la page « modele.html » :
   • Mettez temporairement le texte « Menu haut » en blanc
   • Remplacez le texte « Menu gauche » par le texte « Menu gauche » que vous encadrerez de balises <h3>

Etape 4 : PrEparation des cadres de la colonne de gauche

1. Dans la page « modele.html » :
   • Dans la cellule de gauche du deuxième tableau, encadrez le texte « Cadre login » d’une <div> ayant pour identifiant id=Menu_gauche_cadre_login
   • Dans la cellule de gauche du deuxième tableau, encadrez le texte
     « Menu gauche » d’une <div> ayant pour identifiant
     id= Menu_gauche_cadre_liens
   • Mettez le texte « Bas de page » entre des balises <p>

---

2. Dans la CSS « principale.css » :
   • Ecrivez une définition pour l’identifiant # Menu_gauche_cadre_login :
     • Bord bas : white 1px solid;
     • Marge haut : 5px;
   • Ecrivez une définition pour l’identifiant # Menu_gauche_cadre_liens :
     • Marge haut : 10px;
     • Padding bas : 10px;
   • Ecrivez une définition pour l’identifiant #corps_bas p :
     • Alignement du texte : centre;
     • Couleur : #E0E0E0;
     • Padding haut : 20px;
     • Marge haut : 0px;

Etape 5 : Insertion du formulaire de connexion

1. Dans la page « modele.html » :
   • Dans la cellule de gauche du deuxième tableau, à l’intérieur de la boîte
     <div> Menu_gauche_cadre_login, insérez un formulaire.
     • Dans le formulaire, insérez un tableau de 4 lignes, 2 colonnes et de largeur = 165px.
     • Insérez dans ce tableau deux champs de type= « text », les textes « login : »
       et « pass : » et enfin l’image qui fera office de bouton valider (flèche dans un rond)

Etape 6 : Insertion des liens de  menus verticaux et horizontaux

1. Dans la page « modele.html » :
   • Dans la cellule de gauche du deuxième tableau, à l’intérieur de la boîte
     <div> Menu_gauche_cadre_lien, après le titre « Menu gauche »,insérez
     une liste de type <ul> avec 3 éléments de liste à l’intérieur (<li>) « panier »,
     « Mon compte » et « Administration ». Vous encadrerez chacun des mots
     de ces 3 éléments de liste d’une balise <a> avec un « # » en guise de lien.
   • Dans la cellule de droite du deuxième tableau, à l’intérieur de la boîte
     <div> corps_haut, insérez une liste de type <ul> avec 5 éléments de
     liste à l’intérieur (<li>), « ACCUEIL », « PANIER », « VITRINE »,
     « MON COMPTE » et « ADMINISTRATION ». Vous encadrerez chacun
     des mots de ces 5 éléments de liste d’une balise <a> avec un « # »
     en guise de lien.
   • Dans la cellule de droite du deuxième tableau, à l’intérieur de la boîte
     <div> corps_bas, remplacez le texte "Bas de page" par le texte "Copyright © 2006 INFOLABBE". Vous mettrez un lien sur le mot "INFOLABBE" qui pointe sur le site "http://www.infolabbe.com" avec ouverture dans une nouvelle page (target="_blank")

---

2. Dans la CSS « principale.css » :
   • Ecrivez une définition pour l’identifiant #corps_haut ul :
     • Marge : 0px;
     • Padding : 0px;
   • Ecrivez une définition pour l’identifiant #corps_haut li :
     • Display : inline;
     • list-style-type : aucun;
     • padding-droit : 20px;
   • Ecrivez une définition pour l’identifiant #Menu_gauche_cadre_login form
     • Marge-bas : 0px;

Etape 7 : Mise en forme des liens du  menu vertical

1. Dans la CSS « principale.css » :
   • Ecrivez une définition pour l’identifiant #Menu_gauche_cadre_liens H3 :
     • FONT-SIZE : 13pt;
     • MARGIN : 0px;
     • COLOR : black;
     • TEXT-ALIGN : center;
     • margin-bottom : 10px;
     • border-bottom : solid white 1px;
     • padding-bottom : 10px;
   • Ecrivez une définition pour l’identifiant #Menu_gauche_cadre_liens UL :
     • TEXT-ALIGN : center;
     • MARGIN : 3px;
     • PADDING-LEFT : 0px;
   • Ecrivez une définition pour l’identifiant #Menu_gauche_cadre_liens UL LI :
     • LIST-STYLE-TYPE : none;
     • margin-bottom : 10px;
   • Ecrivez une définition pour les liens de la section #Menu_gauche_cadre_liens :
     • #Menu_gauche_cadre_liens A:link {color: black; text-decoration: none}
     • #Menu_gauche_cadre_liens A:visited {color: black; text-decoration: none}
     • #Menu_gauche_cadre_liens A:hover {color: #FF0000; text-decoration: none}

Etape 8 : Mise en forme des liens du  menu horizontal

1. Dans la CSS « principale.css » :
   • Ecrivez une définition pour les liens de la section #corps_haut :
     • #corps_haut A:link {color: #FFFFFF; text-decoration: none}
     • #corps_haut A:visited {color: #FFFFFF; text-decoration: none}
     • #corps_haut A:hover {color: #FF0000; text-decoration: none}
   • Ecrivez une définition pour l’identifiant #Menu_gauche_cadre_liens UL :
     • #corps_bas A:link {color: #E0E0E0; text-decoration: none}
     • #corps_bas A:visited {color: #E0E0E0; text-decoration: none}
     • #corps_bas A:hover {color: #FF6600; text-decoration: none}