Fiche Pratique - AIVM

Fiche Pratique
MAJ le 30/11/2012
Présentation du problème
Il est toujours possible lorsque l'on crée un site de passer par du clé en main. Malheureusement, si cela nous facilite la vie au début de la création de votre site, ceci devient très
vite un handicap pour la suite. En effet, vous n'êtes pas libre de l'arborescence. Autant
cela peut est commode pour un blog, autant cela devient compliqué lorsque l'on veut
créer un site où l'arborescence contient plusieurs paliers.
Il est tout à fait possible de monter un site depuis des pages construites avec Word. Il
existe cependant des restrictions à cette utilisation, en particulier lorsque vous voulez
utiliser des menus en flash. De même il est impossible d'insérer des boutons changeant
de couleur au passage de la souris (boutons cliquables). Les puristes sont évidemment
contre l’utilisation de WORD pour créer des pages html, mais cela n’est pas nécessairement votre problème. Adieu html 5 et autres CSS, mais l’essentiel, c’est de vous faire plaisir et que votre site fonctionne.
Pour ces utilisations, il est nécessaire d'utiliser des logiciels comme Dreamweaver
(payant) ou KompoZer (gratuit). S’il vous est possible de retrouver les tous premiers CD
distribués par la société Orange, vous y retrouverez une version gratuite de DreamWeaver, très ancienne, mais suffisante pour insérer du flash.
Comment bien démarrer ?
Dès l'entrée de votre site, vous ne devez trouver qu’une seule page, la page d'index.
Elle doit se nommée index.htm ou index.html selon les fournisseurs d'accès.
Je vous conseille vivement de ne garder que cette page dans la racine de votre site.
Placez toutes les autres pages dans un répertoire principal que je nommerais ici RP. Libre à
vous de donner le nom que vous souhaitez, mais attention : vous ne devez mettre ni accent ni
espace. Plus ce nom sera court et plus cela sera facile pour l'usage.
Les liens sur les autres pages, se feront depuis la page d'index. D'autres pages pourront servir
d'index, plus loin dans l'arborescence, lors de nouveaux embranchements.
Essayez d'éviter d'utiliser une page Word pour créer votre page d'index, afin de ne pas avoir le
répertoire index_fichiers qui contiendra toutes les images de votre page d’index ainsi qu’un
lien xml, surtout si vous souhaitez créer des frames. Ceci dit, cest possible et cela ne gène que
les puristes.
Vous trouverez sur la page suivante un exemple d'arborescence.
Jean THIOU
http://aivm.free.fr
Page 1
Fiche Pratique
Arborescence
Voici un exemple avec un répertoire principal nommé ici RP, puis de nouveaux liens sur d’autres sous répertoires de RP
Insertion d’un menu en flash
Vous pouvez vous rendre sur le site de flash Vortex ou vous pouvez composer vos menus gratuitement (la
pub pour ce site reste visible ce qui n’est pas gênant, par rapport au service rendu).
Il est bon de prévoir dans le bloc note, les trois choses essentielles pour un menu :
1. Le label (intitulé des boutons
2. Le lien absolu (extra site) ou relatif (intra site) vers les pages html ou PDF
3. La position (même onglet, nouvel onglet, nouvelle page, même frame etc…)
http://www.flashvortex.com/
A titre d’exemple le menu de gauche de l’entrée du site AIVM en mode texte
dans le bloc-notes.
Menu simple, type basic
(Les 3 lignes ci-dessous correspondent à un descriptif personnel)
Menu de la page 7.
Garder Thematic et dans icône, remplacer la balle de tennis par la balle de football
MenuAccueilAIVM.swf Background 229C4B
----------------------------------------------------------------------------
Jean THIOU
http://aivm.free.fr
Page 2
Fiche Pratique
Step1 Button Labels
Accueil
Plan du site
Présentation
Fiches pratiques
Vidéos pratiques
Dico informatique
Sites conseillés
Pré-inscription
Prog. du mois
MAJ Membres
Thèmes Windows 7
Mes freewares
Téléchargements
CD/DVD autorun
JT_Util
Partenaires
Step 2 Buttons should link to
http://aivm.free.fr
http://aivm37.free.fr/PlanDuSite/PlanDuSite.htm
http://aivm37.free.fr/QuiSommesNous.htm
http://aivm37.free.fr/BI/BI.htm
http://aivm37.free.fr/Videos/VideoTec.htm
http://aivm.free.fr/MAJ/Dictionnaire.htm
http://aivm.free.fr/MAJ/AdressesFavoritesDuNet.htm
http://aivm37.free.fr/Diffusion/formulaire.html
http://aivm.free.fr/MAJ/Programme.htm
http://aivm.free.fr/MAJ.htm
http://aivm37.free.fr/Themes/Themes.htm
http://jean.thiou.free.fr
http://aivm.free.fr/MAJ/Telechargement.htm
http://jean.thiou.free.fr/Gratuiciels/CDROM/Cdrom.htm
http://jean.thiou.free.fr/JT_Util/Aide_JTUtil.htm
http://aivm.free.fr/Depannage.htm
Step 3 Target Frames names
_blank
_blank
_blank
_blank
_blank
_blank
_blank
_blank
Jean THIOU
http://aivm.free.fr
Page 3
Fiche Pratique
_blank
_blank
_blank
_blank
_blank
_blank
_blank
_blank
Chacune des rubriques précédentes est copiée/colée dans la page de construction du menu de flashvortex,
puis le fichier swf est téléchargé, puis installé en flash dans la page html correspondante avec par exemple
dreamweaver. Voir le résultat sur le site et comparez avec la description texte ci-dessus.
Menu déroulant à deux niveaux
-Autres
(menu pour les fiches pratiques)
Menu construit avec :
FlashVortex page 11 avec des boutons bleus (le
6ème)
Expandable Flash Menu
Bouton 1 : Clicker
Bouton 2 : Cubic
Fichier FT.swf dans \BI
-------------------------------------Menu avec labels
Bureautique
-Traitement de texte
-Tableur
Multimédia
-Audio
-Photo
-Vidéo
-Multimédia
-Codec
Smartphone
-Généralités
-Galaxy SII
Windows
-Toutes versions
-XP
-XP ou Vista
-Vista ou W7
-Windows 7
Les liens
Système
-Gratuiciels
-Logiciels
-Matériel
JT/G_Windows
JT/ToutesVers.htm
JT/XP.htm
JT/XPouVista.htm
JT/VISTAou7.htm
JT/Windows7.htm
Réseau
-Réseau local
-Groupe résidentiel
-Box
-Partage distant
JT/G_Logiciels
JT/FreeSys.htm
JT/Logiciels.htm
JT/Materiel.htm
JT/G_Reseau
JT/Res1.htm
JT/Res2.htm
JT/Int3.htm
JT/IntParDist.htm
Internet
Lien mort, pour
-Navigateur
chaque menu
-Messagerie
principal
-Matériel-Box
-Sécurité
-Cloud computing
-Partage distant
Jean THIOU
http://aivm.free.fr
Page 4
Fiche Pratique
JT/G_Internet
JT/Int1.htm
JT/Int2.htm
JT/Int3.htm
JT/Int4.htm
JT/Int5.htm
JT/IntParDist.htm
JT/Int6.htm
JT/G_Multimedia
Audio/Son.htm
Photo/Photo.htm
Video/Video.htm
Multimedia/Multimedia.htm
Codec/Codec.htm
Vrai lien pour les
sous menus
JT/G_Smartphone
JT/Smartphone.htm
JT/GalaxySII.htm
JT/G_Bureautique
JT/Bur1.htm
JT/Bur2.htm
Le menu choisi est celui de la page 11
Le descriptif se trouve en deux colonnes dans ce qui
précède.
En gardant ce fichier texte précieusement, il est facile
de modifier un menu, le mettre à jour sans avoir à tout
recréer.
Remarque
Lorsque vous utilisez ces menus avec un navigateur le
lien apparait dans la ligne du haut du navigateur
Le choix des boutons
Choisir ci-dessous la couleur et la forme des boutons de menus et de sous menus. Il vous suffit d’utiliser le
bouton View pour voir les effets recherchés en ayant cliqué sur Button Style.
Jean THIOU
http://aivm.free.fr
Page 5
Fiche Pratique
Les labels et les liens
Recopier dans les zones ci-dessous, vos labels et vos liens
Ici MENU
Ici, 3 sous menus
Placez vos liens pour les sous
menus et un lien mort pour
chaque titre de menu
(Voir ci-dessus dans le texte,
préfixé par G_à
Jean THIOU
http://aivm.free.fr
Page 6