TracenPoche Insérer une figure TepWeb

TracenPoche Insérer une figure TepWeb >

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

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. Retour au menu

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) Pour insérer une figure TepWeb dans votre page il suffira de copier le code entre ces 2 balises. Voici l'exemple d'une structure de document HTML : <HTML> <HEAD> <TITLE>Ma page</TITLE> </HEAD> <BODY> ... ... Le document HTML ... </BODY> </HTML> < Retour au menu

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

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

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> < Retour au menu

Créer sa page : étape 1 On peut créer alors le dossier hôte et nommer le script de manière explicite 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 < >

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 Répertoire Nom de la page 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. < >

Créer sa page : étape 4 Titre de la page Aspect de la page 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), ... < > N'oubliez pas d'enregistrer après chaque modification !

Créer sa page : étape 5 Une ligne vide a été prévue pour y placer la figure TepWeb 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. < >

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 : <p> </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 < >

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

TracenPoche Insérer une figure TepWeb