Cette page s'adresse en particulier à ceux qui veulent créer leur site avec un éditeur pur code.
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 .
Page tuto et téléchargement de Filezilla en français: http://filezilla.fr/ Filezilla est multi-plateforme
; 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();\'>fermer la fenêtre</a></td></tr></table></center></body></html>' );popup.document.close(); "Cliquez pour agrandir l'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();\'>fermer la fenêtre</a></td></tr></table></center></body></html>' );popup.document.close(); "Cliquez pour agrandir l'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();\'>fermer la fenêtre</a></td></tr></table></center></body></html>' );popup.document.close(); "Cliquez pour agrandir l'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();\'>fermer la fenêtre</a></td></tr></table></center></body></html>' );popup.document.close(); "Cliquez pour agrandir l'image")
