TracenPoche

Insérer une figure TepWeb

>

Insérer une figure TepWeb
dans un document HTML

Quelques notions de html

Insérer une figure TepWeb

Contenu de l'archive tepweb.zip

Quitter

Créer sa page html pas à pas

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 l'on 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.

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.

<

>

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.

<

>

Qu'est ce qu'une page html ? (fin)

Retour au menu

<

Voici l'exemple d'une structure de document HTML :

<HTML>

<HEAD>

<TITLE>Ma page</TITLE>

</HEAD>

<BODY>

...

... Le document HTML

...

</BODY>

</HTML>

Pour insérer une figure TepWeb dans votre page il suffira de copier le code entre ces 2 balises.

Insérer une figure Tepweb (étape 1)

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 fichier TepWeb : tepweb.swf

Le script de la figure : script1.txt

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.

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.

<

>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"

width="300" height="300" align="middle">

<param name="allowScriptAccess" value="sameDomain" />

<param name="quality" value="high" />

<param name="bgcolor" value="#99cccc" />

<param name="SRC" value="tepweb.swf?script=script1.txt">

<embed src="tepweb.swf?script=script1.txt" width="300" height="300"

align="middle" quality="high" bgcolor="#99cccc" swliveconnect=true

id="script1" allowscriptaccess="sameDomain" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

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).

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.

<

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Ma page</title>

</head>

<body>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"

width="500" height="500" align="middle">

<param name="allowScriptAccess" value="sameDomain" />

<param name="quality" value="high" />

<param name="bgcolor" value="#99cccc" />

<param name="SRC" value="tepweb500500.swf?script=script2.txt">

<embed src="tepweb500500.swf?script=script2.txt" width="500" height="500"

align="middle" quality="high" bgcolor="#99cccc" swliveconnect=true

id="script2" allowscriptaccess="sameDomain" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

</body>

</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.

>

Retour au menu

<

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.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"

width="300" height="300" align="middle">

<param name="allowScriptAccess" value="sameDomain" />

<param name="quality" value="high" />

<param name="bgcolor" value="#99cccc" />

<param name="SRC" value="../flash/tepweb.swf?script=script1.txt">

<embed src="../flash/tepweb.swf?script=script1.txt" width="300" height="300"

align="middle" quality="high" bgcolor="#99cccc" swliveconnect=true

id="script1" allowscriptaccess="sameDomain" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

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

On peut créer alors le dossier hôte et nommer le script de manière explicite

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

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.

<

>

Répertoire

Nom de la page

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), ...

<

>

Aspect de la page

Titre de la page

N'oubliez pas d'enregistrer après chaque modification !

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.

<

>

Une ligne vide a été prévue pour y placer la figure TepWeb

Créer sa page : étape 6

En affichant le code de la page que vous êtes en train de créer vous reconnaitrez votre ligne vierge par ces caractères :

<p>&nbsp; </p>

<

>

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 <p> et </p> à la place de &nbsp;

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.

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.

<

Retour au menu

2005-04-13T10:00:32