Configuration et utilisation du client FTP - Filezilla

Dreamweaver CS5 est un outil puissant pour créer et publier des sites web. Il intègre entre autre un gestionnaire de site qui vous permet de mettre celui-ci en ligne automatiquement ou presque. Nous détaillerons donc ci-dessous la configuration d'un site et sa mise en ligne.

Commençons tout d'abord par l'installation du logiciel Dreamweaver CS5 si ce n'est pas déjà fait. Comme c'est un logiciel payant, vous pouvez l'essayer pour une période d'essaie de 30 jours.




Une fois le programme téléchargé, lancez l'installation en double cliquant sur le fichier exécutable « Setup.exe ». Si vous n'avez pas de clef, utilisez la période d'évaluation de 30 jours. C'est largement suffisant pour se faire une bonne idée du programme.

Une fois le fichier d'installation télécharger sur votre ordinateur : exécutez le en effectuant un double clic sur l'icone. Votre fichiez sera peut-être archivé, il se décompressera alors automatiquement à l'emplacement de votre choix avant l'installation.


Voici les étapes d'installations :


ETAPE 1 : Cliquez sur « Accepter » pour accepter les termes d'utilisation.

Image cache, cliquer pour afficher / cacher l'image
dreamweaver installation 1

ETAPE 2 : Saissiez votre noméro de série si vous en avez un sinon installez la version d'essai et cliquez sur « Suivant ».

Image cache, cliquer pour afficher / cacher l'image
dreamweaver installation 2

ETAPE 3 : Choisissez les composants à installer puis cliquez sur « Installer »

Image cache, cliquer pour afficher / cacher l'image
dreamweaver installation 3

ETAPE 4 : Une barre de progression vous indiquera l'avancement de l'installation

Image cache, cliquer pour afficher / cacher l'image
dreamweaver installation 4

ETAPE 5 : Une fois terminé, vous arriverez à un écran récapitulatif. Cliquez sur « Terminer » pour fermer l'installation. (Vous ne devriez pas avoir un écran similaire à l'image ci-dessous sauf en cas d'échec de l'installation)

Image cache, cliquer pour afficher / cacher l'image
dreamweaver installation 5

L'installation de dreamweaver est maintenant terminée. Vous pouvez maintenant lancer le programme.


Suivez le guide !

Gestionnaire de site Dreamweaver CS5 et mise en ligne de votre site

Lors du premier lancement de dreamweaver, vous devriez obtenir une interface similaire à celle-ci :


Ecran d'accueil dreamweaver

Dès le lancement, vous pouvez directement gérer et créer votre site en cliquant sur « Site Dreamweaver... » au centre de l'écran. Une fenêtre va alors s'ouvrir pour vous permettre de configurer votre site :

Gestionnaire de site dreamweaver

Entrez le nom de votre site et sa racine locale sur votre disque dur. Ne cliquez pas tout de suite sur « Enregistrer ». Il faut encore indiquer dans notre configuration les coordonnées de notre serveur d'hébergement pour que le site puisse être publié.
Pour cela, cliquez sur « Serveurs » dans les onglets à droite :

Gestionnaire de site - serveur

Vous devrez ajouter un nouveau site à votre configuration. Cliquez sur le petit « + » en bas de la fenêtre de dialogue pour ajouter celui-ci.

Gestionnaire de site configuration du FTP

Entrez alors le nom de votre serveur. La connexion se fait au moyen d'un FTP. D'autres modes de connexion sont possibles mais nous y reviendrons.

L'adresse FTP correspond à l'IP qui vous a été fournie lors de l'achat de votre hébergement. Vous pouvez aussi entrer votre nom de domaine comme par exemple « www.mondomaine.com » mais si celui-ci n'est pas référencé par les DNS, votre serveur d'hébergement ne sera pas joignable contrairement à un accès direct par l'IP. Laissez aussi le port sur la valeur « 21 ».

Question Heu... il y a une raison à ce « 21 » ?

En effet, le port « 21 » est le port par défaut pour une connexion FTP.Celle-ci utilise 2 types de flux de données :

  • Un flux de contrôle initialisé par le client, vers le serveur (port 21 en général), pour transmettre les commandes de fichiers (transfert, suppression de fichiers, renommage, liste des fichiers…).
  • Un flux de données initialisé par le client ou le serveur (port 20 en général) pour transférer les données requises (contenu des fichiers, liste de fichiers).

D'ou cette valeur « 21 ».

Entrez ensuite vos logins dans les champs d'utilisateur et de mot de passe. Vous pouvez alors tester la connexion pour vérifier que vos informations sont correctes.

Renseignez ensuite le répertoire racine avec « www ». Il y a de nombreux dossiers sur la racine de votre serveur d'hébergement à cause par exemple du CPanel qui utilise des fichiers pour configurer votre hébergement mais un seul nous intéresse réellement : le dossier « www » ou « public_html » (ils pointent vers le même dossier)

Pour que vos fichiers et donc votre site soient visibles depuis le web, vous DEVEZ mettre vos fichiers dans ce répertoire sous peine que rien ne soit visible depuis le web.

Avec cette configuration, dreamweaver ne transfert pas automatiquement vos fichiers sur votre serveur d'hébergement. Vous serez obligé d'utiliser les petites flèches ou le symbole de synchronisation pour transférer vos fichiers sur le serveur :

Envoyer le fichier sur le serveur dreamweaver


On peut automatiser ceci avec la configuration avancée :

configuration avancée du site

Cochez la case « Télécharger automatiquement les fichiers vers le serveur lors de l'enregistrement » pour activer celui-ci.

Une fois rempli, vous pouvez valider votre configuration en cliquant sur « Enregistrer ». Votre serveur apparaitra alors comme ceci dans la fenêtre de configuration :

Validation de la configuration dreamweaver

Cliquez une dernière fois sur « Enregistrer » pour terminer la configuration de votre site.

Lorsque vous travaillez sur votre site, dreamweaver se chargera de synchroniser celui-ci avec celui situé sur votre serveur d'hébergement. A chaque fois que vous sauvegarderez un fichier ou une modification, dreamweaver se chargera de mettre à jour la version en ligne.


Suivez le guide !

Gestionnaire de fichier du site courant - Dreamweaver CS5

Vous pouvez gérer directement vos fichiers et leur mise en ligne à l'intérieur de Dreamweaver. Utilisez pour cela l'onglet « Fichier » que vous pouvez afficher en appuyant sur « F8 ».

Gestionnaire de fichier dreamweaver

D'ici, vous avez accès à tous les fichiers de votre site depuis sa racine. Par défaut l'affichage est local c'est-à-dire que les fichiers que vous visualisez se trouvent sur votre disque. Vous pouvez à votre convenance afficher les fichiers qui se trouvent directement sur le serveur « Officiel » ou les fichiers qui se trouveraient sur un serveur d'évaluation que vous auriez précédemment configuré de la même manière que plus haut mais en cochant en plus la case « Evaluation ».

Sur l'image ci-dessus, Dreamweaver n'est pas connecté à votre FTP. En effet, l'icone de connexion nous indique que la connexion n'est pas active. Pour l'activer, cliquez comme sur l'image ci-dessous. L'icône devrai alors devenir : icône connecté Dreamweaver CS5

Connecter au FTP Dreamweaver


synchronisation dreamweaverCe n'est qu'alors que dreamweaver pourra mettre votre site en ligne. Vous pouvez aussi forcer la synchronisation de votre site pour être sûr que votre site en ligne possède la dernière version de celui-ci ou lorsque vous le transférez pour la 1ere fois.
De la même manière, vous pouvez vous assurer que vous travaillez sur la dernière version en ligne lorsque vous travaillez en groupe.


Suivez le guide !

Connexion sécurisée par SFTP

Dreamweaver propose de nombreux types de connexions pour accéder à votre serveur d'hébergement. Un, tout particulièrement, va nous intéresser. La connexion en SFTP.

En effet, c'est grâce à l'utilisation de ce protocole que nous pourrons sécuriser notre connexion avec SSH.

Si vous ne savez pas très bien ce que tout cela signifie, lisez l'« Introduction aux connexions et transferts en SFTP - FTPS ».

C'est dans la configuration du site lui-même que nous allons activer cette sécurité. Pour cela, rendez-vous dans le gestionnaire de site par l'icone situé en haut de l'écran : icône gestionnaire de site Dreamweaver

Choisissez le site à modifier et cliquez sur « modifier » à droite. Rendez-vous dans l'onglet « Servers » et cliquez sur le crayon en bas de la zone de texte pour modifier la configuration serveur en cours. Vous devriez approximativement obtenir l'image ci-dessous :

FTPS avec dreamweaver

Choisissez alors une connexion SFTP. Assurez-vous que l'IP soit correcte. Ce sont parfois des IP différentes qui sont utilisées pour ce type de connexion. Le port s'ajustera automatiquement sur la valeur « 22 » qui est le port SSH par défaut. Assurez-vous que vos logins de connexion sont corrects grâce au bouton de test.

Une fois la connexion acceptée, enregistrez vos préférences et la configuration sera terminée. Dreamweaver communiquera désormais de manière sécurisée avec votre serveur d'hébergement.

Félicitations ! Vous êtes arrivé à la fin de ce tutoriel ! Merci d'avoir pris le temps de nous lire !