Laboratoire de technique informatique Rapport n° 2

TEKAM KAMDEM ANDRE 2 IRT
DEVOS PIERRE Groupe 2
Laboratoire de technique informatique
Rapport n° 2 :
Site Web, Animation Flash et projet USB
Professeur : D. Pourbaix
Remarque(s):__________________________________
_____________________________________________
_____________________________________________
____________________________________________
Graduat en informatique industrielle
Année 2007-2008
1

Table des matières
Site Web....................................................................................................................................................................3
A. Cahier des charges............................................................................................................................................3
B. Structure............................................................................................................................................................3
C. Code..................................................................................................................................................................4
1. Style.css.........................................................................................................................................................4
2. Modele.html..................................................................................................................................................7
D. Logiciels utilisés...............................................................................................................................................8
E. Conclusion........................................................................................................................................................8
Flash..........................................................................................................................................................................9
A. Cahier des charges............................................................................................................................................9
B. Méthôde............................................................................................................................................................9
1. Interpolation de mouvement..........................................................................................................................9
2. Interpolation de forme.................................................................................................................................10
C. Conclusion......................................................................................................................................................11
D. Les clips..........................................................................................................................................................11
Projet USB...............................................................................................................................................................12
A. Présentation....................................................................................................................................................12
B. Materiel...........................................................................................................................................................12
C. Fonctionnement..............................................................................................................................................12
1. Fonctionnement général..............................................................................................................................12
2. Interface.......................................................................................................................................................13
D. Algorithme du compteur................................................................................................................................14
Explications :...................................................................................................................................................14
E. Code................................................................................................................................................................15
2

Site Web
A. Cahier des charges
Réaliser un site Web HTML avec CSS.
Contenu : menu, Curriculum Vitae, animation flash, lien vers
fichiers, images, javascript, explications sur de la
programmation et présentation du projet USB.
B. Structure
http://home.tele2.be/elwood/
Ce site est structuré grâce à un fichier .CSS (Cascading Style
Sheets: feuilles de style en cascade).
Le fichier CSS établit une «structure de formatage» reflétant
l'arbre logique du document.
Les propriétés sont regroupées par blocs de règles, délimités
par les accolades {}.
Ainsi, dans ce fichier, on définit l'aspect général du site,
du menu par le style de police, de couleur etc..
On peut aussi y incorporer une image récurrente, des arrière-
plans etc...
On doit appeler le fichier CSS sur chaque page en plaçant
cette ligne dans entre les balises <head> et </head>.
<link rel=stylesheet type="text/css" href="style.css">
Le code des pages html et css a été modifié avec Notepad++ qui
rend le code plus lisible grâce à un jeu de couleur pour les
balises.
Les différentes images de fond ont été créées avec Macromedia
Fireworks Mx et sauvegardées au format PNG qui permet une
modification ultérieure plus facile.
3

C. Code
1. Style.css
* { margin: 0;
padding: 0;
}
body { background: #DFDBD3 url(images/bg.gif) top left repeat-x;
color: #4C4C4C;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
p { font-size: .8em;
line-height: 2em;
}
h3 { font-size: .7em;
font-weight: bold;
line-height: 1.3em;
padding-top: 2.5em;
}
a:link,
a:visited {
background: #FFFFFF;
color: #3333FF;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
background: #3333FF;
color: #FFF;
}
#container {
background: transparent url(images/contbg.gif) top left repeat-y;
width: 700px;
}
#intro,
#text { padding: 0 69px 0 86px;
width: 600px;
}
#intro { background: transparent url(images/logo.png) top left no-repeat;
4

padding-top: 230px;
}
#text h3,
#text p {padding-left: 10px;
padding-right: 40px;
}
#contenu
{ border-bottom: 1px solid #E4E1DB;
padding-bottom: 20pt;
}
#contact .p1
{
padding: 40px 40px 0 30px;
}
#contact .p2
{
padding: 60px 40px 0 30px;
}
#contact .p2,
#contact .p1
{background: transparent url(images/contact.png) top left no-repeat;
font-size: .6em;
font-weight: bold;
left: 661px;
display: block;
line-height: 1.4em;
position: absolute;
top: 160px;
width: 141px;
z-index: 20;
}
#contact .p2 a:link,
#contact .p2 a:visited {
background: transparent;
color: #E6E3DE;
text-decoration: none;
}
#contact h3 {
font-size: .9em;
}
#linkList {
background: transparent url(images/navbg.gif) top left repeat-y;
left: 661px;
padding-top: 10em;
position: absolute;
top: 130px;
width: 285px;
z-index: 10;
}
5