Ce cours est visible gratuitement en ligne.

J'ai tout compris !
Personnaliser le skin de son FTP

Personnaliser le skin de son FTP

Mis à jour le mercredi 30 octobre 2013
  • Facile

Si vous aussi vous voulez modifier l'affichage de votre FTP, vous avez trouvé le bon tutoriel :) .

Comment ?

En général, votre FTP ressemble à ceci :

Image utilisateur

Je vais vous expliquer comment le modifier de façon à donner quelque chose de plus "joli", comme ceci par exemple :

Image utilisateur

Pour obtenir ce résultat, nous allons devoir modifier (ou créer) le fichier .htaccess qui se trouve à la racine de votre espace Web. La mise en page se fera en HTML. Et je vous le dis tout de suite, votre code ne sera pas valide, parce que le code HTML que génère Apache pour afficher le squelette de l'arborescence est invalide (il y a des balises dans un élément PRE).

Le fichier .htaccess

A la racine de votre hébergement (dans le dossier de base), créez un fichier .htaccess. Si vous en avez déjà un, nous allons le modifier.

Header et footer

Commencez par écrire ces 2 lignes :

HeaderName /ftp/head.htm
ReadmeName /ftp/foot.htm

head.htm contiendra le code de la page à placer avant l'arborescence, et foot.htm, ce qui vient après.

Je ne comprends pas bien à quoi servent ces deux fichiers... tu peux expliquer ?

Quand vous naviguez dans votre FTP, Apache génère la liste des fichiers du répertoire que vous visitez. Cette liste va alors être ajoutée au code de head.htm. A tout cela, le code de foot.htm sera ajouté, ce qui donnera au final une page complète. Voici ce que ça peut donner :

<!--  code de head.htm -->

<PRE>Code du listing généré par Apache</PRE>

<!-- code de foot.htm -->

Voici un code possible pour head.htm

<!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>FTP Viewer</TITLE>
<SCRIPT TYPE="text/javascript" SRC="/ftp/script.js"></SCRIPT>
<STYLE TYPE="text/css">
    body { padding: 0; margin: 0; background: url("http://nayi.free.fr/ftp/latte.gif") repeat-x top #EEEEEE; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #494949; }
    pre { background: #FFFFFF; margin: 20px; margin-top: 0px; padding-bottom: 5px; padding-left: 10px; border: 1px solid #AAAAAA; padding-bottom: 15px; }
    pre img { margin-top: 10px; margin-bottom: -10px; border: none; }
    img { border: none; }
    hr { display: none; }
    a, a:link, a:active, a:visited { font-weight: bold; color: #494949; }
    a:hover { color: #DAA520; }
    h1 { text-align: center; font-size: 12px; margin: 0; padding: 0; }
</STYLE>
</HEAD>
<BODY>
<H1>.:: FTP Viewer ::.</H1>

Voici un code possible pour foot.htm

</BODY>
</HTML>

Oui, je sais, c'est très long... Le code de l'arborescence sera inséré par Apache entre ces 2 fichiers.

Quelques directives

Maintenant, ajoutez ce code :

IndexIgnore .htaccess Thumbs.db db 
IndexOptions SuppressHTMLPreamble FancyIndexing
IndexOrderDefault Ascending Description
  • IndexIgnore : Cette directive précise quels fichiers ne seront pas affichés dans l'arborescence. Ici, j'ai choisi de cacher mes .htaccess, Thumbs.db ainsi que les fichiers .db.

  • IndexOptions : C'est la directive qui permet d'ajouter des options. Moi j'ai ajouté deux options : SuppressHTMLPreamble et FancyIndexing.

    • SuppressHTMLPreamble : c'est l'option qui va dire à Apache de ne pas générer lui-même le code du header et du footer (puisque c'est nous qui le faisons)

    • FancyIndexing : l'affichage des répertoires est en mode intelligent. C'est en fait le mode complet, celui généralement par défaut.

  • IndexOrderDefault Ascending Description : Cela signifie que le répertoire est classé par description. Le contraire d'ascending est descending. Vous pouvez aussi classer le répertoire par taille (size) ou par nom (name).

  • IndexStyleSheet (à parti d'Apache 2.2.2) : Grâce à cette directive, vous pouvez spécifier une feuille de style .css à charger.

Autres options d'IndexOptions

Je n'ai utilisé que deux options, les plus utiles. Mais il en existe d'autres, les voici :

  • L'option SuppressLastModified sert à enlever la colonne Last Modified.

  • L'option SuppressDescription sert à enlever la colonne Description.

  • L'option SuppressSize sert à enlever la colonne Size.

  • L'option SuppressColumnSorting sert à enlever les liens au dessus des colonnes pour changer l'ordre et le type de classement.

  • L'option IconsAreLinks sert à faire devenir l'icône un lien.

  • L'option IconWidth sert à définir la largeur des icônes en pixel (par défaut de 32).
    Exemple:IconWidth=32.

  • L'option IconHeight sert à définir la hauteur des icônes (elle doit être la même que la largeur).
    Exemple:IconHeight=32.

  • L'option FoldersFirst (v.2.0.23 au moins. Mais il semblerait que ça fonctionne sous Apache 1.3) sert à afficher les répertoires en premier (par défaut dans l'explorateur Windows.

  • L'option NameWidth sert à définir la largeur de la colonne Name. En mettant une étoile (*), la colonne prend la largeur du plus grand nom.
    Exemple:NameWidth=* ou NameWidth=50.

  • L'option DescriptionWidth (v.2.0.23 au moins) sert à définir la largeur de la colonne Description. Idem que pour NameWidth.
    Exemple:DescriptionWidth=* ou DescriptionWidth=50.

  • L'option IgnoreClient sert à ignorer le client: il ne peux plus choisir comment classer le répertoire en cliquant sur le nom des colonnes.

  • L'option SuppressIcon (v.2.0.23 au moins) permet de supprimer les icônes.

  • L'option SuppressRules (v.2.0.23 au moins) permet de supprimer les balises <hr /> du document (Apache en met deux: une sous les noms de colonnes et l'autre sous le contenu du répertoire).

  • L'option SuppressColumnSorting est remplacée par l'option IgnoreClient dans la version 2.0.23. Elles ont le même effet.

  • L'option HTMLTable (v.2.0.23 au moins, option expérimentale) permet d'inscrire le répertoire dans un tableau HTML. Cela peut-être très pratique.

  • L'option ScanHTMLTitles permet de remplacer la description par le nom du fichier/dossier.

  • L'option XHTML (v.2.0.49 au moins) permet de forcer l'utilisation de XHTML

  • L'option IgnoreCase permet d'ignorer la casse : Par défaut, les fichiers sont triés de A à Z puis de a à z, le fichier Zozor.sdz viendra avant ahah.txt. Avec cette option activée, les majuscules sont ignorées, ahah.txt vient avant Zozor.sdz.

  • L'option ShowForbidden permet d'afficher les fichiers normalement cachés.

  • L'option TrackModified (v.2.0.23 au moins) sert à afficher la date de dernière modification.

Ajout d'une icône

Pour ajouter une icône à un type de fichier, il suffit d'utiliser cette directive :

AddIcon (IMG,/ftp/pdf.png) .pdf .PDF

Cette directive définit une icône (/ftp/pdf.png) qui sera attribuée aux fichiers portant l'extension .pdf ainsi qu'à ceux portant l'extension .PDF.

IMG est le texte alternatif affiché si l'image n'est pas chargée.

Ajout d'une description

Dans le listage du contenu d'un répertoire, il y a une colonne Description, qui décrit chaque type de fichier. Voici comment modifier ce texte.

AddDescription "Document Word"       *.doc *.DOC *.docx *.DOCX

Ainsi, tous les fichiers portant l'extension .doc (ou .docx) auront comme description Document Word, au même titre que les fichiers affublés de l'extension, .DOC.

Le cas des dossiers

Et pour un dossier, je fais comment ?

L'icône

Ah, c'est très simple, faites comme ceci :

AddIcon (PAR,/ftp/icons/dir_par.png) ..
AddIcon (DIR,/ftp/icons/dir.png) ^^DIRECTORY^^

La première directive est faite pour les dossiers avec le lien Parent Directory (dont le chemin est ..). La deuxième sert tout simplement pour les dossiers normaux ;)

La description

Voilà pour ajouter une description aux dossiers :

AddDescription "Dossier parent" ..
AddDescription "Répertoire" */

L'icône par défaut

Voici, pour finir, la directive qui permet d'attribuer une icône à un fichier, si il n'en a pas une spécialement définie :

DefaultIcon /ftp/icons/file.png

Le code complet

Comme je suis gentil, je vais vous donner le code de mon fichier .htaccess :) :

HeaderName /ftp/head.htm
ReadmeName /ftp/foot.htm

IndexIgnore .htaccess Thumbs.db db _notes
IndexOptions SuppressHTMLPreamble FancyIndexing FoldersFirst IgnoreCase
IndexOrderDefault Ascending Description

AddIcon (IMG,/ftp/icons/image.gif) .svg .SVG .wmf .WMF 
AddIcon (IMG,/ftp/icons/gif.gif) .gif .GIF
AddIcon (IMG,/ftp/icons/jpg.gif) .jpg .JPG .jpeg .JPEG
AddIcon (IMG,/ftp/icons/png.gif) .png .PNG
AddIcon (IMG,/ftp/icons/psd.gif) .psd .PSD
AddIcon (IMG,/ftp/icons/ico.gif) .ico .ICO
AddIcon (IMG,/ftp/icons/tif.png) .tif .TIF .tiff .TIFF

AddDescription "Image PNG"       *.png *.PNG
AddDescription "Image JPG"       *.jpg *.JPG
AddDescription "Image BMP"       *.bmp *.BMP
AddDescription "Image SVG"       *.svg *.SVG
AddDescription "Image GIF"       *.gif *.GIF
AddDescription "Image WMF"       *.wmf *.WMF
AddDescription "Image PSD"       *.psd *.PSD
AddDescription "Image ICO"       *.ico *.ICO

AddIcon (VIDEO,/ftp/icons/wmp.png)  .mov .MOV .avi .AVI .mpg .MPG .wmv .WMV
AddDescription "Video QuickTime"    *.mov *.MOV
AddDescription "Video AVI"          *.avi *.AVI
AddDescription "Video MPEG"         *.mpg *.MPG
AddDescription "Video WMV"          *.wmv *.WMV

AddIcon (AUDIO,/ftp/icons/wmp.png) .wma .mp3 .mp4 .midi .mid .WMA .MP3 .MP4 .MIDI .MID
AddDescription "Audio MP3"     *.mp3 *.MP3
AddDescription "Audio MP4"     *.mp4 *.MP4
AddDescription "Audio WMA"     *.wma *.WMA
AddDescription "Audio MIDI"    *.mid *.midi

AddIcon (FLA,/ftp/icons/fla.gif)      .fla
AddIcon (AS,/ftp/icons/as.gif)        .as
AddIcon (FLV,/ftp/icons/flv.gif)      .flv
AddDescription "Fichier Flash Video" *.flv
AddDescription "Projet Flash"         *.fla
AddDescription "Fichier ActionScript"          *.as

AddIcon (SWF,/ftp/icons/swf.png)    .swf
AddDescription "Animation Flash"       *.swf

AddIcon (TXT,/ftp/icons/txt.png) .txt
AddDescription "Fichier de texte brut" *.txt

AddIcon (DOC,/ftp/icons/word.png) .doc .rtf .docx
AddDescription "Document Word" *.doc *.rtf *.docx

AddIcon (DOC,/ftp/icons/powerpoint.png) .ppt .pptx
AddDescription "Présentation PowerPoint" *.ppt *.pptx

AddIcon (DOC,/ftp/icons/excel.png) .xls .xlss
AddDescription "Feuille de calcul Excel" *.xls *.xlsx

AddIcon (PHP,/ftp/icons/php.gif) .php .phtml
AddDescription "Page Web PHP" *.php
AddDescription "Page Web PHP" *.phtml

AddIcon (HTM,/ftp/icons/web.gif) .htm .html .HTM .HTML .xhtml .XHTML
AddDescription "Page Web HTML" *.htm *.HTM
AddDescription "Fichier HTML Compilé" *.chm
AddIcon (HTC,/ftp/icons/chm.gif) .chm

AddIcon (HTC,/ftp/icons/ini.png) .htc
AddDescription "Comportement IExplorer" *.htc

AddIcon (CSS,/ftp/icons/css.png) .css
AddDescription "Feuille de style CSS" *.css
AddIcon (CSS,/ftp/icons/js.png) .js
AddDescription "Fichier Javascript" *.js
AddIcon (CSS,/ftp/icons/xml.png) .xml
AddDescription "Fichier XML" *.xml

AddIcon (EXE,/ftp/icons/exe.png) .exe .EXE
AddDescription "Exécutable" *.exe *.EXE

AddIcon (PDF,/ftp/icons/pdf.png) .pdf .PDF
AddDescription "Document Adobe PDF" *.pdf *.PDF

AddIcon (ARCHIVE,/ftp/icons/archive.gif) .jar .zip .rar .arj .arc .tar .targz .gz
AddDescription "Archive ZIP" *.zip *.ZIP
AddDescription "Archive RAR" *.rar *.RAR
AddDescription "Archive ARJ" *.arj *.ARJ
AddDescription "Archive ARC" *.arc *.ARC
AddDescription "Archive TAR" *.tar *.TAR
AddDescription "Archive JAR" *.jar *.JAR
AddDescription "Archive GZ" *.gz *.GZ
AddDescription "Archive TARGZ" *.targz *.TARGZ

AddIcon (C,/ftp/icons/c.gif) .c
AddDescription "Fichier C" *.c
AddIcon (H,/ftp/icons/h.gif) .h
AddDescription "Fichier d'ent-tête" *.h
AddIcon (VCPROJ,/ftp/icons/vcproj.gif) .vcproj
AddDescription "Projet Visual C++" *.vcproj

AddIcon (PAR,/ftp/icons/dir_par.png) ..
AddIcon (DIR,/ftp/icons/dir.png) ^^DIRECTORY^^
AddDescription "Dossier parent" ..
AddDescription "Répertoire" */

DefaultIcon /ftp/icons/txt.png

Vous pouvez aussi réutilisez les icones que j'utilise. Elles se trouvent ici.

Sinon, voici un aperçu de mon FTP. C'est aussi là que se trouvent les fichiers qui le composent.

Voilà, ayez un beau FTP ;)

Merci à biohazard2 qui m'a aidé à rédiger ce tutoriel ;)

déroulement d'un cours

  • 1

    Dès aujourd'hui, vous avez accès au contenu pédagogique et aux exercices du cours.

  • 2

    Vous progressez dans le cours semaine par semaine. Une partie du cours correspond à une semaine de travail de votre part.

  • !

    Les exercices doivent être réalisés en une semaine. La date limite vous sera annoncée au démarrage de chaque nouvelle partie. Les exercices sont indispensables pour obtenir votre certification.

  • 3

    À l'issue du cours, vous recevrez vos résultats par e-mail. Votre certificat de réussite vous sera également transmis si vous êtes membre Premium et que vous avez au moins 70% de bonnes réponses.

Exemple de certificat de réussite
Exemple de certificat de réussite