Université Abdelmalek Essaâdi ﺟﺎﻣﻌﺔ ﻋﺑد اﻟﻣﺎﻟك اﻟﺳﻌدي
Faculté des Sciences ﻛﻠﯾﺔ اﻟﻌﻠوم
Tétouan – Maroc ﺗطوان
TP
Réalisation d’un site web pas à pas
SMI
Semestre 3
Module Programmation Web
Préparé par
Youssef Zaz
2019/2020
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 1
Création d’un site web avec menus
On prépare un fichier HTML et un fichier CSS
Design fixe ou extensible ?
Un design fixe, c'est un design dont la largeur est de taille fixée (par exemple de 1000 pixels). Il y a en
général une marge à gauche et à droite, et le contenu du site se trouve au milieu. Voici un site au design
fixe :
Un design de taille fixe
Un design extensible, c'est un design qui s'élargit automatiquement en fonction de la résolution du
visiteur. Si le visiteur est en 1024*768, le design fera 1024 pixels de large. Si le visiteur est en
1600*1200, il fera 1600 pixels de large.
Un design de taille extensible
La création d'un design extensible est assez complexe. Nous allons donc réaliser un design de taille fixe.
le HTML
Première étape, on crée le fichier HTML.
Code : HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Bienvenue sur mon site !</title>
5 <meta http-equiv="content-type" content="text:html; charset=UTF-8"/>
6 </head>
7 <body>
8
9 </body>
10 </html>
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 2
La structure générale
On va avoir en général au moins 4 blocks:
1. En haut, l'en-tête (aussi appelé "header"). Il contient en général le titre du site, sous forme de
bannière par exemple.
2. En-dessous, la partie principale de la page avec :
o A gauche ou à droite, le menu.
o De l'autre côté, le corps de la page, c'est-à-dire la partie qui contiendra le texte du site.
3. Enfin, on met en général en bas un "pied de page" ("footer"), dans lequel on indique l'auteur du
site, éventuellement son e-mail et un message de copyright.
Code : HTML
1 <header>
2 <!-- Ici on mettra la bannière -->
3 </header >
4
5 <nav>
6 <!-- Ici on mettra le menu -->
7 </nav >
8
9 <section>
10 <!-- Ici on mettra le contenu principal de la page -->
11 </section >
12
13 <footer>
14 <!-- on mettra en bas de la page le nom de l'auteur, un copyright... -->
15 </footer>
Pour ce qui est du menu et du corps qui se trouvent au même niveau, l'ordre entre eux deux n'importe pas.
On pourra modifier leur position dans le CSS (menu à gauche, ou menu à droite).
L'en-tête
Alors ça, ça va être rapide. En général un en-tête c'est une bannière (une image), un simple titre <h1>
(titre du site).
On met une bannière, par exemple celle-ci :
Revenons à nos moutons. Comment mettre cette image dans le <header>? On a 2 possibilités pour mettre
cette image dans le <header> :
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 3
• Soit on crée une balise <img /> à l'intérieur, afin d'insérer notre bannière. C'est une méthode facile
pour insérer une image.
• Soit on ne met rien à l'intérieur du <header> et on mettra la bannière sous forme d'image de fond
dans le CSS.
En fait, on va créer un bloc "vide" qui va servir uniquement à afficher une image, et cette image sera
affichée par le CSS.
Le résultat sera apparemment le même que si on avait utilisé <img /> mais cette technique sera
importante si on veut changer le design du site facilement.
Code : HTML
1 <header>
2
3 </header>
Menu et sous-menus
Dans le block du menu, on peut créer plusieurs sous-blocks pour séparer les différents éléments du menu.
Notre menu contient 2 sous-blocks qui vont servir de sous-menus.
Code : HTML
1 <nav> <!-- Cadre englobant tous les sous-menus -->
2
3 <div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
4 Texte du premier menu
5 </div>
6
7 <div class="element_menu">
8 Texte du second menu
9 </div>
10
11 </nav>
Il nous suffit d'imbriquer des balises <div>.
On rajoute maintenant le texte à l'intérieur du menu pour faire comme dans le dernier schéma.
On va mettre dans chaque "element_menu" un titre de menu.
On utilise une liste à puces (<ul>) pour avoir un menu bien organisé.
Code : HTML
1 <nav>
2 <div class="element_menu">
3 <h3>Faculté</h3>
4 <ul>
5 <li> Mot du Doyen</li>
6 <li>Plan d'accès</li>
7 <li>Evénements</li>
8 </ul>
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 4
9 </div>
10
11 <div class="element_menu">
12 <h3>Etudes</h3>
13 <ul>
14 <li>Filières</a></li>
15 <li>Espace Enseignants</li>
16 <li>Espace Etudiants</li>
17 </ul>
18 </div>
19 </nav>
En général, on met souvent des listes à puces pour les menus car cela permet de créer une bonne
organisation facilement.
Si on ajoute les lien :
Code : HTML
1 <nav>
2 <div class="element_menu">
3 <h3>Faculté</h3>
4 <ul>
5 <li><a href="page1.html">Mot du Doyen</a></li>
6 <li><a href="page2.html">Plan d'accès</a></li>
7 <li><a href="page3.html">Evénements</a></li>
8 </ul>
9 </div>
10
11 <div class="element_menu">
12 <h3>Etudes</h3>
13 <ul>
14 <li><a href="page4.html">Filières</a></li>
15 <li><a href="page5.html">Espace Enseignants</a></li>
16 <li><a href="page6.html">Espace Etudiants</a></li>
17 </ul>
18 </div>
19 </nav>
Le corps
Le corps, c'est la partie principale de la page. C'est là qu'il y aura tout le contenu de votre page.
Code : HTML
1 <section>
2 <h1>Sciences Mathématiques et Informatique </h1>
3 <h2>Objectifs de la formation :</h2>
4 <p>Répondre à une demande de la part des entreprises et des cabinets de conseil, de cadres formés aux
5 problématiques de l'informatique dans un contexte global de l'entreprise;
6 cette formation permet:</p>
7 <ul>
8 <li>D'acquérir les concepts et connaître les problématiques de l'informatique.</li>
9 <li>De connaître les systèmes d'information liés au pilotage des entreprises.</li>
10 <li>D'assurer l'évolution des besoins liés aux nouvelles technologies de l'information.</li>
11 <li>De gérer une entreprise.</li>
12 </ul>
13 <h2>Débouchés de la formation :</h2>
14 Secteur industriel, Secteur agroalimentaire, Grande distribution, Cabinet de conseil,
15 Administration,...
16 <h2>Conditions d'accès :</h2>
17 <p>Etre titulaire d'un baccalauréat en Sciences Mathématiques ou Physique ou tout autre diplôme reconnu
18 équivalent.</p>
19 <p>
20 Sélection sur dossier dont le règlement sera fixé par l'équipe pédagogique.</p>
21 </section>
Le pied de page
Le pied de page sert à écrire le nom de l'auteur en général, un copyright ,…
Code : HTML
1 <footer>
2 <p> Copyright Faculté des Sciences de Tétouan, tous droits réservés </p>
3 </footer>
Le code HTML final
1 <!DOCTYPE HTML>
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 5
2 <html>
3 <head>
4 <title>FS: sciences mathématiques et informatique</title>
5 <meta name="author" content ="FS"/>
6 <meta http-equiv="content-type" content="text:html; charset=UTF-8"/>
7 <meta http-equiv="content-language" content="fr"/>
8 <meta name="keywords" lang="fr" content="filière SMI, sciences mathématiques et informatique"/>
9 <link rel="stylesheet" type="text/css" href="css/style.css" />
10 </head>
11 <body>
12 <!-- L'en-tête -->
13
14 <header>
15 </header>
16 <!-- Les menus -->
17 <nav>
18 <div class="element_menu">
19 <h3>Faculté</h3>
20 <ul>
21 <li><a href="page1.html">Mot du Doyen</a></li>
22 <li><a href="page2.html">Plan d'accès</a></li>
23 <li><a href="page3.html">Evénements</a></li>
24 </ul>
25 </div>
26
27 <div class="element_menu">
28 <h3>Etudes</h3>
29 <ul>
30 <li><a href="page4.html">Filières</a></li>
31 <li><a href="page5.html">Espace Enseignants</a></li>
32 <li><a href="page6.html">Espace Etudiants</a></li>
33 </ul>
34 </div>
35 </nav>
36
37 <!-- Le corps -->
38 <section>
39
40 <h1>Sciences Mathématiques et Informatique </h1>
41 <h2>Objectifs de la formation :</h2>
42 <p>
43 Répondre à une demande de la part des entreprises et des cabinets de conseil, de cadres formés aux
44 problématiques de l'informatique dans un contexte global de l'entreprise;
45 cette formation permet:</p>
46 <ul>
47 <li>D'acquérir les concepts et connaître les problématiques de l'informatique.</li>
48 <li>De connaître les systèmes d'information liés au pilotage des entreprises.</li>
49 <li>D'assurer l'évolution des besoins liés aux nouvelles technologies de l'information.</li>
50 <li>De gérer une entreprise.</li>
51 </ul>
52 <h2>Débouchés de la formation :</h2>
53 Secteur industriel, Secteur agroalimentaire, Grande distribution, Cabinet de conseil,
54 Administration,...
55 <h2>Conditions d'accès :</h2>
56 <p>Etre titulaire d'un baccalauréat en Sciences Mathématiques ou Physique ou tout autre diplôme reconnu
57 équivalent.</p>
58 <p>
59 Sélection sur dossier dont le règlement sera fixé par l'équipe pédagogique.</p>
60
61 </section>
62
63 <footer>
64 <p> Copyright Faculté des Sciences de Tétouan, tous droits réservés </p>
65 </footer>
66 </body>
67 </html>
68
Voilà le résultat obtenu
Faculté
• Mot du Doyen
• Plan d'accès
• Evénements
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 6
Etudes
• Filières
• Espace Enseignants
• Espace Etudiants
I. Sciences Mathématiques et Informatique
Objectifs de la formation :
Répondre à une demande de la part des entreprises et des cabinets de conseil, de cadres formés aux
problématiques de l'informatique dans un contexte global de l'entreprise; cette formation permet:
• D'acquérir les concepts et connaître les problématiques de l'informatique.
• De connaître les systèmes d'information liés au pilotage des entreprises.
• D'assurer l'évolution des besoins liés aux nouvelles technologies de l'information.
• De gérer une entreprise.
Débouchés de la formation :
Secteur industriel, Secteur agroalimentaire, Grande distribution, Cabinet de conseil, Administration,...
Conditions d'accès :
Etre titulaire d'un baccalauréat en Sciences Mathématiques ou Physique ou tout autre diplôme reconnu
équivalent.
Sélection sur dossier dont le règlement sera fixé par l'équipe pédagogique.
Copyright Faculté des Sciences de Tétouan, tous droits réservés
Ajout du CSS
Centrer le design
On travaille sur la balise <body>.
On veut le centrer (avec margin:auto;)
Pour la taille de la page, on met 1200 pixels. On rajoute une marge en haut (top) et en bas (bottom) de 20
pixels pour éviter que notre page soit trop "collée" avec le haut et le bas du navigateur.
Enfin, on met une petite image de fond (background-image) à la page pour faire un peu moins vide.
Code : CSS
Body
1{
2 width: 1200px;
3 margin: auto; /* Pour centrer notre page */
4 margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur.*/
5
6 margin-bottom: 20px; /* Idem pour le bas du navigateur */
7 background-image: url("../images/fond.png");/* Une petite image de fond pour éviter d'avoir un fond
8 blanc */
}
Essayez d'enlever quelques lignes pour observer le résultat sur la page :
• Si vous enlevez le fond (background-image), vous retrouverez un fond blanc de base.
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 7
• Si vous enlevez le margin-top ou le margin-bottom, vous verrez que votre page sera un peu trop
"collée" avec les bords de la page.
• Si vous enlevez le margin:auto, votre page ne sera plus centrée et se retrouvera à gauche. Notez
que le margin:auto ne marche pas sous IE 5 : ces visiteurs-là auront un design placé à gauche.
L'en-tête
On affiche la bannière du site à l'aide du CSS (avec background-image).
C'est une technique que vous pourrez utiliser pour que votre design soit compris dans le fichier CSS. Ca
sera très pratique pour réaliser un site qui propose plusieurs designs différents.
On affiche la bannière avec uniquement du CSS :
1. La bannière fait 1200x130 pixels, donc
width:1200px ;
height:130px;
2. On indique quelle image de fond on veut mettre à notre grand block qui est pour l'instant vide :
background-image:url("images/fs.png");
3. Normalement notre fond n'a la place d'apparaître qu'une seule fois, mais on s'assure que cette
image ne sera pas répétée en mosaïque avec background-repeat :
background-repeat:no-repeat;
4. Enfin, on va définir une petite marge en-dessous (margin-bottom) de quelques pixels :
margin-bottom:10px;
Code : CSS
1 body
2 {
3 width: 1200px;
4 margin: auto;
5 margin-top: 20px; margin-bottom: 20px;
6 background-image: url("../images/fond.png");
7 }
8 header
9 {
10 height: 129px;
11 background-image: url("../images/fs.png");
12 background-repeat: no-repeat;
13 background-position: center;
14 margin-bottom: 10px;
15 }
Rappel:
• Pour une class, on met un "." (point) devant le nom dans le CSS.
• Pour un id, on met un "#" devant le nom.
Le menu
Il va nous falloir placer le menu "à gauche" du corps, alors que pour l'instant le menu se trouve au-dessus.
Pour faire cela, la technique la plus courante et la plus rapide, c'est d'utiliser la propriété CSS float. C'est
une propriété un peu particulière comme nous l'avons vu, et elle va être très pratique ici pour placer
correctement le menu et le corps.
On va aussi donner une taille de 120 pixels au menu, pour qu'il ne soit pas trop grand.
Ensuite, nous allons travailler sur notre class "element_menu" (qui correspond à une partie de menu). On
va lui mettre une couleur de fond un peu plus gris foncé, une image de fond en repeat-x.
Ensuite, on rajoutera une bordure à chaque élément de menu pour qu'on voie bien ses limites. "2px" solid
black.
Enfin, on mettra un margin-bottom à chaque élément de menu pour éviter qu'ils ne soient trop collés les
uns par rapport aux autres.
Code : CSS
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 8
1
2
3 body
4 {
5 width: 1200px;
6 margin: auto;
7 margin-top: 20px; margin-bottom: 20px;
8 background-image: url("../images/fond.png");
9 }
10 header
11 {
12 height: 129px;
13 background-image: url("../images/fs.png");
14 background-repeat: no-repeat;
15 background-position: center;
16 margin-bottom: 10px;
17 }
18 nav
19 {
20 float: left; /* Le menu flottera à gauche */
21 width: 180px; /* Très important : donner une taille au menu */
22 }
23 .element_menu
24 {
25 background-color: #626262;
26 background-image: url("../images/motif.png");
27 background-repeat: repeat-x;
28 border: 2px solid black;
29 margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
30 }
31
32
On distingue bien nos bouts de menus, par contre le corps se retrouve sous le menu une fois qu'il l'a
dépassé par le bas.
C'est normal car c'est comme ça que fonctionne un float.
Il nous faudra rajouter une marge à gauche sur le corps (margin-left).
On va rajouter quelques effets.
Code : CSS
1 body
2 {
3 width: 1200px;
4 margin: auto;
5 margin-top: 20px;
6 margin-bottom: 20px;
7 background-image: url("../images/fond.png");
8 }
9
10 header
11 {
12 height: 129px;
13 background-image: url("../images/fs.png");
14 background-repeat: no-repeat;
15 background-position: center;
16 margin-bottom: 10px;
17 }
18 nav
19 {
20 float: left;
21 width: 180px;
22 }
23 .element_menu
24 {
25 background-color: #626262;
26 background-image: url("../images/motif.png");
27 background-repeat: repeat-x;
28 border: 2px solid black;
29 margin-bottom: 20px;
30 }
31 .element_menu h3 /* Tous les titres de menus */
32 {
33 color: #B3B3B3;
34 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
35 text-align: center;
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 9
36 }
37 .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
38 {
39 list-style-image: url("../images/puce.png"); /* On change l'apparence des puces */
40 padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
41 padding-left: 20px;
42 margin: 0px;
43 margin-bottom: 5px;
44 }
45 .element_menu a
46 {
47 color: #B3B3B3;
48 }
49 .element_menu a:hover /* Quand on pointe sur un lien du menu */
50 {
51 background-color: #B3B3B3;
52 color: black;
53 }
On utilise un "padding" (qui modifie toutes les marges intérieures) et un "padding-left" (qui modifie
uniquement la marge intérieure gauche).
En fait c'est une technique pour gagner de la place. Il faut lire les lignes dans l'ordre :
1. Premièrement, on modifie toutes les marges et on leur met à toutes la valeur "0px" avec padding
2. Deuxièmement, on modifie la marge de gauche. Elle valait 0px, désormais on change sa valeur et
on lui met 20px avec padding-left (on dit qu'on "écrase" l'ancienne valeur)
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:20px;
Le corps
Pour le corps, il est important de définir de bonnes marges.
Le problème qu'on veut régler en priorité, c'est le texte du corps qui passe "sous" le menu quand il est
long.
Il suffit de modifier la marge "à gauche" du corps : un margin-left.
On lui met une valeur suffisamment grande pour "pousser" le corps sur la droite, afin qu'il ne passe plus
sous le menu (donc une valeur supérieure à la largeur du menu).On met une valeur de 140px.
On va rajouter un margin-bottom afin que le pied de page en-dessous ne soit pas trop "collé" au corps :
margin-bottom:20px;
On met aussi un petit padding (marge intérieure) sur tous les côtés afin que le texte ne colle pas trop avec
les bords du corps :
padding:5px;
On va aussi mettre une couleur de fond, une petite image de fond qui se répète horizontalement, …
Code : CSS
1 Body
2 {
3 width: 1200px;
4 margin: auto;
5 margin-top: 20px;
6 margin-bottom: 20px;
7 background-image: url("../images/fond.png");
8 }
9 header
10 {
11 height: 129px;
12 background-image: url("../images/fs.png");
13 background-repeat: no-repeat;
14 background-position: center;
15 margin-bottom: 10px;
16 }
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 10
17 nav
18 {
19 float: left;
20 width: 180px;
21 }
22 .element_menu
23 {
24 background-color: #626262;
25 background-image: url("../images/motif.png");
26 background-repeat: repeat-x;
27 border: 2px solid black;
28 margin-bottom: 20px;
29 }
30 .element_menu h3
31 {
32 color: #B3B3B3;
33 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
34 text-align: center;
35 }
36 .element_menu ul
37 {
38 list-style-image: url("../images/puce.png");
39 padding: 0px;
40 padding-left: 20px;
41 margin: 0px;
42 margin-bottom: 5px;
43 }
44 .element_menu a
45 {
46 color: #B3B3B3;
47 }
48 .element_menu a:hover
49 {
50 background-color: #B3B3B3;
51 color: black;
52 }
53 section
54 {
55 margin-left: 190px;
56 margin-bottom: 20px;
57 padding: 5px;
58 color: #B3B3B3;
59 background-color: #626262;
60 background-image: url("../images/motif.png");
61 background-repeat: repeat-x;
62 border: 2px solid black;
63 }
Plus de décorations
on va changer la police pour mettre une "Arial" plus jolie sur les titres.
On va aussi rajouter une image de fond sur les titres h2, avec background-repeat:no-repeat; ce qui signifie
que le fond ne se répètera pas.
Pour éviter que le texte du titre ne s'écrive sur l'image de fond, on met un padding-left de quelques pixels.
Code : CSS
1 body
2 {
3 width: 1200px;
4 margin: auto
5 margin-top: 20px;
6 margin-bottom: 20px;
7 background-image: url("../images/fond.png");
8 }
9 header
10 {
11 height: 129px;
12 background-image: url("../images/fs.png");
13 background-repeat: no-repeat;
14 background-position: center;
15 margin-bottom: 10px;
16 }
17 nav
18 {
19 float: left;
20 width: 180px;
21 }
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 11
22 .element_menu
23 {
24 background-color: #626262;
25 background-image: url("../images/motif.png");
26 background-repeat: repeat-x;
27 border: 2px solid black;
28 margin-bottom: 20px;
29 }
30 .element_menu h3
31 {
32 color: #B3B3B3;
33 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
34 text-align: center;
35 }
36 .element_menu ul
37 {
38 list-style-image: url("../images/puce.png");
39 padding: 0px;
40 padding-left: 20px;
41 margin: 0px;
42 margin-bottom: 5px;
43 }
44 .element_menu a
45 {
46 color: #B3B3B3;
47 }
48 .element_menu a:hover
49 {
50 background-color: #B3B3B3;
51 color: black;
52 }
53 section
54 {
55 margin-left: 190px;
56 margin-bottom: 20px;
57 padding: 5px;
58 color: #B3B3B3;
59 background-color: #626262;
60 background-image: url("../images/motif.png");
61 background-repeat: repeat-x;
62 border: 2px solid black
63 }
64 section h1
65 color: #B3B3B3;
66 text-align: center;
67 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
68 }
69 section h2
70 {
71 height: 30px;
72 background-image: url("../images/titre.png");
73 background-repeat: no-repeat;
74 padding-left: 30px;
75 color: #B3B3B3;
76 text-align: left;
77 }
78 }
79
Le pied de page
Pour le pied de page, on met une couleur de fond, on met une bordure, on vérifie si les marges nous
plaisent.
Code : CSS
1 body
2 {
3 width: 1200px;
4 margin: auto
5 margin-top: 20px;
6 margin-bottom: 20px;
7 background-image: url("../images/fond.png");
8 }
9 header
10 {
11 height: 129px;
12 background-image: url("../images/fs.png");
13 background-repeat: no-repeat;
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 12
14 background-position: center;
15 margin-bottom: 10px;
16 }
17 nav
18 {
19 float: left;
20 width: 180px;
21 }
22 .element_menu
23 {
24 background-color: #626262;
25 background-image: url("../images/motif.png");
26 background-repeat: repeat-x;
27 border: 2px solid black;
28 margin-bottom: 20px;
29 }
30
31 .element_menu h3
32 {
33 color: #B3B3B3;
34 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
35 text-align: center;
36 }
37 .element_menu ul
38 {
39 list-style-image: url("../images/puce.png");
40 padding: 0px;
41 padding-left: 20px;
42 margin: 0px;
43 margin-bottom: 5px;
44 }
45 .element_menu a
46 {
47 color: #B3B3B3;
48 }
49 .element_menu a:hover
50 {
51 background-color: #B3B3B3;
52 color: black;
53 }
54
55 section
56 {
57 margin-left: 190px;
58 margin-bottom: 20px;
59 padding: 5px;
60 color: #B3B3B3;
61 background-color: #626262;
62 background-image: url("../images/motif.png");
63 background-repeat: repeat-x;
64 border: 2px solid black
65 }
66
67 section h1
68 {
69 color: #B3B3B3;
70 text-align: center;
71 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
72 }
73 section h2
74 {
75 height: 30px;
76 background-image: url("../images/titre.png");
77 background-repeat: no-repeat;
78 padding-left: 30px;
79 color: #B3B3B3;
80 text-align: left;
81 }
82 footer
83 {
84 padding: 5px;
85 text-align: center;
86 color: #B3B3B3;
87 background-color: #626262;
88 background-image: url("../images/motif.png");
89 background-repeat: repeat-x;
90 border: 2px solid black;
91 }
Et voilà le site est prêt.
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 13
On peut changer le site rien que de changer le fichier CSS :
Code CSS
1 body
2 {
3 width:1200px;
4 margin:auto;
5 margin-top:20px;
6 margin-bottom:20px;
7 background-color:#CFEAFD;
8 }
9 header
10 {
11 width:760px;
12 height:100px;
13 background-image:url("../images/fs2.png");
14 background-repeat:no-repeat;
15 margin-bottom:10px;
16 }
17 nav
18 {
19 float:right;
20 width:160px;
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 14
21 }
22 .element_menu
23 {
24 background-image:url("../images/motif2.png");
25 background-repeat:repeat-x;
26 background-position:bottom;
27 background-color:#FFECFF;
28 border:1px dashed blue;
29 border-bottom:none;
30 padding-bottom:10px;
31 margin-bottom:20px;
32 }
33 .element_menu h3
34 {
35 color:blue;
36 text-align:center;
37 font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
38 }
39 .element_menu ul
40 {
41 list-style-type:none;
42 padding:0px;
43 padding-left:20px;
44 margin:0px;
45 margin-bottom:5px;
46 }
47 .element_menu a
48 {
49 color:#blue;
50 }
51 .element_menu a:hover
52 {
53 background-color:purple;
54 color:white;
55 }
56 section
57 {
58 margin-right:180px;
59 margin-bottom:20px;
60 padding:10px;
61 color:#FC00FF;
62 background-image:url("../images/motif2.png");
63 background-repeat:repeat-x;
64 background-position:bottom;
65 background-color:#FFECFF;
66 border:1px dashed blue;
67 border-bottom:none;
68 }
69 section h2
70 {
71 height:29px;
72 padding-left:30px;
73 background-image:url("../images/titre2.png");
74 background-repeat:no-repeat;
75 color:#FC00FF;
76 text-align:left;
77 }
78 section h1
79 {
80 color:#FC00FF;
81 font-weight:bold;
82 text-align:center;
83 font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
84 }
85 footer
86 {
87 padding:10px;
88 text-align:center;
89 color:#3CC500;
90 background-image:url("../images/motif2.png");
91 background-repeat:repeat-x;
92 background-position:bottom;
93 background-color:#FFECFF;
94 border:1px dashed blue;
95 border-bottom:none;
96 }
Site web pas à pas Y. ZAZ FS – Tétouan SMI-S3 15
