Cette page s'adresse en particulier à ceux qui crée leur site avec un éditeur pur code en HTML , mais aussi à tout ceux qui ont un index .html à passer à la racine de leur site. Avec la permission de Nicolas qui avait créé l'index et les rubriques de son site en HTML transitional sans aucun apport de CSS.
Dans votre répertoire Document vous faites un dossier avec tous vos fichiers
A l'intérieur du dossier ( nommé ci-dessus wubi_fichiers) le fichier indispensable sera le fichier texte que vous nommerez index.html et qui sera la page d'accueil de votre site . D'autres fichiers texte qui se termineront aussi en (.html) en seront les différentes rubriques . Dans ce dossier principal vous rassemblerez tous vos fichiers au grand complet c-a-dire aussi les fichiers images , les fichiers audio , les fichiers vidéo et tous les autres fichiers swf ou .js qui serviront de support au son ou à la vidéo un fois uploadés sur la toile et d'autres que vous découvrirez plus tard (CSS, PHP etcétéra).
Mais certains sites contiennent des centaines de fichiers
Alors il faut les ranger . Cette illustration est vraiment minimaliste c'est pour un très petit site , il y a juste un dossier "images" et un dossier "liens" censé rassembler toutes les rubriques . Mais elle montre bien que le fichier index.html doit rester à la racine du site (pas renfermé dans un dossier quelconque) Le favico.ico pourrait trés bien se trouver dans le dossier "images" mais il vaut mieux le laisser à la racine et dans le dossier "liens" peuvent se retrouver d'autres sous-dossiers : Un dossier rassemblant les fichiers "sons" et un autre rassemblant les fichiers "vidéo" par exemple sont mieux aussi à la racine du site
Nicolas a fait ce classement
Il aurait pu rassembler toutes ses pages .html (sauf index.html) dans un dossier nommé "liens" ou "rubriques" par exemple avec à l'intérieur un sous-dossier "sons" et un sous-dossier "vidéo" . Mais il a fait ainsi pour la clarté de son tuto , les liens hypertextes sont moins difficiles à faire . Et puis cela fonctionne alors?
Donc tous les fichiers et dossiers que vous voyez dans cette fenêtre sont prêts à être placés à la racine du site Vous y voyez notamment l'image "favicon.icon" qui aura un lien placé dans la page "index.html", entre les balises HEAD, de cette façon: <link rel="SHORTCUT ICON" href="adresse de votre site/favicon.ico">
Les autres images qui sont enfermés dans le dossier "images" entreront dans les pages.html (exemple pour anim.gif) avec le lien suivant: <img src="images/anim.gif"/>
L'arrangement ci-dessus donne ceci dans le répertoire local de FileZilla
Et on fait Fichier -> Gestionnaire de Sites (voir ci-dessous)
Pour contacter votre serveur utilisez d'abord le Gestionnaire de Sites
Ici à l'onglet "Général"
à "Sélectionnez une entrée" donner un nom . J'ai nommé "wubi" Entrez toutes les coordonnées (FTP) nécessaires pour joindre votre serveur que l'hébergeur vous a fournies
Ici à l'onglet "Paramètres de transfert"
Il faut absulument aller à cet autre onglet choisir le Mode de transfert "passif" .
Après , c'est une histoire de patience
Et de la bonne disponibilité du serveur . Votre site ne commencera à fonctionner que lorsque index.html aura été transféré avec succès . Parfois lorsque une vidéo est un peu longue il faut s'y reprendre è plusieurs fois pour la transférer en entier elle peut couper sans prévenir .
; popup.document.open();popup.document.write( '<html><head><link rel=\'stylesheet\' href=\'../_frame/site.css\' type=\'text/css\'></head><body style=\'background-color:#CCCCCC;background-image:url(../_frame/blank.gif);\' bgcolor=#CCCCCC><center><img src=\'bv000002.jpg\' alt=\'\'><br><br><table class=\'wg-paragraph\' style=\'border:none\'><tr><td><a href=\'javascript:close();\'>close window</a></td></tr></table></center></body></html>' );popup.document.close(); "Click to zoom the image")
; popup.document.open();popup.document.write( '<html><head><link rel=\'stylesheet\' href=\'../_frame/site.css\' type=\'text/css\'></head><body style=\'background-color:#CCCCCC;background-image:url(../_frame/blank.gif);\' bgcolor=#CCCCCC><center><img src=\'bv000001.jpg\' alt=\'\'><br><br><table class=\'wg-paragraph\' style=\'border:none\'><tr><td><a href=\'javascript:close();\'>close window</a></td></tr></table></center></body></html>' );popup.document.close(); "Click to zoom the image")
; popup.document.open();popup.document.write( '<html><head><link rel=\'stylesheet\' href=\'../_frame/site.css\' type=\'text/css\'></head><body style=\'background-color:#CCCCCC;background-image:url(../_frame/blank.gif);\' bgcolor=#CCCCCC><center><img src=\'bv000003.jpg\' alt=\'\'><br><br><table class=\'wg-paragraph\' style=\'border:none\'><tr><td><a href=\'javascript:close();\'>close window</a></td></tr></table></center></body></html>' );popup.document.close(); "Click to zoom the image")
; popup.document.open();popup.document.write( '<html><head><link rel=\'stylesheet\' href=\'../_frame/site.css\' type=\'text/css\'></head><body style=\'background-color:#CCCCCC;background-image:url(../_frame/blank.gif);\' bgcolor=#CCCCCC><center><img src=\'bv000004.jpg\' alt=\'\'><br><br><table class=\'wg-paragraph\' style=\'border:none\'><tr><td><a href=\'javascript:close();\'>close window</a></td></tr></table></center></body></html>' );popup.document.close(); "Click to zoom the image")
