Diapositive 1

1
TracenPoche Insérer une figure TepWeb
gt
2
Insérer une figure TepWeb dans un document HTML

• Contenu de l'archive tepweb.zip

• Quelques notions de html

• Insérer une figure TepWeb

• Créer sa page html pas à pas

Quitter
3
Le fichier tepweb.zip
Le fichier tepweb.zip contient

• une page html (exemple.htm) qui contient 2
  figures TepWeb

• deux fichiers scripts qui correspondent aux 2
  figures que lon trouve sur la page exemple.htm

• Six fichiers tepweb.swf à placer avec le ou
  les scripts dans le répertoire de la page web que
  vous allez créer.
• Du fichier TepWeb que vous choisirez dépendra la
  taille de la figure dans votre page html.

Retour au menu
4
Qu'est ce qu'une page html ?
Le langage html est un code lu par votre
navigateur (IE, Firefox, ...) quand vous ouvrez
une page web. Vous pouvez, si vous le voulez,
lire ce code en cliquant sur Affichage puis
Source de la page.
gt
lt
5
Qu'est ce qu'une page html ? (suite)
Pour créer une page html nul n'est besoin de
connaître ce langage. Des logiciels appelés
éditeurs html permettent de les créer facilement
à la manière d'un document texte. Certains de ces
logiciels sont très connus comme Dreamweaver ou
FrontPage mais ils sont payants, d'autres moins
connus sont gratuits mais aussi performants comme
Nvu.
gt
lt
6
Qu'est ce qu'une page html ? (fin)
Voici l'exemple d'une structure de document HTML
ltHTMLgt ltHEADgt ltTITLEgtMa pagelt/TITLEgt
lt/HEADgt ltBODYgt ... ... Le document
HTML ... lt/BODYgt lt/HTMLgt
lt
Retour au menu
7
Insérer une figure Tepweb
Pour créer une page html qui contient une figure
tepweb il faut dans un premier temps créer un
répertoire qui contiendra

• Votre page html mapage.htm

• Le script de la figure script1.txt

• Le fichier TepWeb tepweb.swf

Par défaut TepWeb est en 300 pixels par 300
pixels mais d'autres résolutions sont disponibles
tepweb200200, tepweb400300, ... Il faut donc
placer à l'intérieur du répertoire le tepweb que
vous souhaitez utiliser.
lt
gt
8
Insérer une figure Tepweb (étape 2)
En affichant le code source de la page
exemple.htm livrée avec tepweb.zip vous
obtiendrez le code qui permet d'insérer une
figure tepweb dans votre page html.
ltobject classid"clsidd27cdb6e-ae6d-11cf-96b8-444
553540000 codebase"http//fpdownload.macrome
dia.com/pub/shockwave/cabs/flash/swflash.cabversi
on7,0,0,0" width"300" height"300"
align"middle"gt ltparam name"allowScriptAc
cess" value"sameDomain" /gt ltparam
name"quality" value"high" /gt ltparam
name"bgcolor" value"99cccc" /gt ltparam
name"SRC" value"tepweb.swf?scriptscript1.txt"gt
ltembed src"tepweb.swf?scriptscript1.txt"
width"300" height"300"
align"middle" quality"high" bgcolor"99cccc"
swliveconnecttrue id"script1"
allowscriptaccess"sameDomain" type"application/x
-shockwave-flash" pluginspage"http/
/www.macromedia.com/go/getflashplayer" /gt
lt/objectgt
Vous pouvez adapter ce code si vous changez de
script (valeurs en vert), ou si vous changez de
tepweb, c'est à dire de taille de figure (valeurs
en rouge).
lt
gt
9
Insérer une figure Tepweb (étape 3)
Il ne vous reste plus qu'à copier puis à coller
ce code dans le code de votre page html en
utilisant votre éditeur html.
La page dont vous voyez le code contient une
figure TepWeb nommée script2 qui apparaît dans
une fenêtre de 500 sur 500.
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loos
e.dtd"gt lthtmlgt ltheadgt ltmeta http-equiv"Content-Ty
pe" content"text/html charsetiso-8859-1"gt lttitl
egtMa pagelt/titlegt lt/headgt ltbodygt ltobject
classid"clsidd27cdb6e-ae6d-11cf-96b8-44455354000
0" codebase"http//fpdownload.macromedia.com/pub
/shockwave/cabs/flash/swflash.cabversion7,0,0,0"
width"500" height"500" align"middle"gt
ltparam name"allowScriptAccess"
value"sameDomain" /gt ltparam
name"quality" value"high" /gt ltparam
name"bgcolor" value"99cccc" /gt ltparam
name"SRC" value"tepweb500500.swf?scriptscript2.
txt"gt ltembed src"tepweb500500.swf?script
script2.txt" width"500" height"500" align"midd
le" quality"high" bgcolor"99cccc"
swliveconnecttrue id"script2"
allowscriptaccess"sameDomain" type"application/x
-shockwave-flash" pluginspage"http//www.macrome
dia.com/go/getflashplayer" /gt
lt/objectgt lt/bodygt lt/htmlgt
lt
gt
10
Insérer une figure Tepweb (fin)
Le ou les fichiers tepweb.swf et donc les scripts
ne doivent pas nécessairement se trouver dans le
même répertoire que les pages contenant les
figures TepWeb. On peut tous les centraliser dans
un même répertoire et il suffit alors de modifier
le code source pour indiquer le nouveau chemin.
ltobject classid"clsidd27cdb6e-ae6d-11cf-96b8-444
553540000" codebase"http//fpdownload.macromedia.
com/pub/shockwave/cabs/flash/swflash.cabversion7
,0,0,0" width"300" height"300"
align"middle"gt ltparam name"allowScriptAc
cess" value"sameDomain" /gt ltparam
name"quality" value"high" /gt ltparam
name"bgcolor" value"99cccc" /gt ltparam
name"SRC" value"../flash/tepweb.swf?scriptscrip
t1.txt"gt ltembed src"../flash/tepweb.swf?s
criptscript1.txt" width"300" height"300" align
"middle" quality"high" bgcolor"99cccc"
swliveconnecttrue id"script1"
allowscriptaccess"sameDomain" type"application/x
-shockwave-flash" pluginspage"http//www.macrome
dia.com/go/getflashplayer" /gt
lt/objectgt
lt
Retour au menu
11
Créer sa page étape 1
Il faut commencer par créer le script de la
figure que l'on veut insérer dans sa page
html. On peut pour cela utiliser la version en
ligne de TeP.
On enregistre le script de sa figure
lt
gt
12
Créer sa page étape 2
A l'intérieur du dossier où l'on a placé le
script on colle le fichier swf que l'on utilisera
et que l'on peut trouver dans l'archive
tepweb.zip.
Copier puis Coller
lt
gt
13
Créer sa page étape 3
A l'aide de son éditeur html  préféré  on crée
une nouvelle page html que l'on nomme et que l'on
enregistre tout de suite dans le répertoire créé
précédemment.
lt
gt
14
Créer sa page étape 4
Avant de vous occuper du contenu, il est
préférable de s'occuper des  Propriétés de la
page  que sont la couleur du fond, la police
par défaut ainsi que sa taille et sa couleur, le
titre de la page (affiché par le navigateur), ...
lt
gt
N'oubliez pas d'enregistrer après chaque
modification !
15
Créer sa page étape 5
Votre page est maintenant prête à recevoir votre
contenu. Vous pouvez, par exemple, commencer par
un texte de présentation de la figure TepWeb que
vous allez insérer.
lt
gt
16
Créer sa page étape 6
En affichant le code de la page que vous êtes en
train de créer vous reconnaîtrez votre ligne
vierge par ces caractères ltpgtnbsp lt/pgt
Il vous suffit alors de venir coller le code
source de la figure TepWeb (obtenu grâce au
fichier exemple.htm) entre le 2 balises ltpgt et
lt/pgt à la place de nbsp
lt
gt
17
Créer sa page étape 7
Attention ! N'oubliez pas d'adapter le code de la
figure en fonction du fichier tepweb.swf et du
script.
Si vous quittez l'affichage du code pour revenir
au mode création vous voyez apparaître un objet
Flash là ou il y avait votre ligne vide.
lt
gt
18
Créer sa page étape 8
Une fois le fichier enregistré vous pouvez ouvrir
votre page pour visualiser le résultat dans votre
navigateur Internet.
lt
Retour au menu