Dans la huitième et dernière partie de ce tutoriel, vous apprendrez à configurer un serveur distant pour publier un site web.
5496-create-first-website_1408x792


Remarque :
les fichiers d’exemple incluent l'ensemble des Bibliothèques Creative Cloud et des fichiers de projet pour ce tutoriel. Vous pouvez poursuivre avec le fichier de démarrage de la première partie ou accéder au dossier approprié et utiliser le fichier correspondant à chaque section.

Introduction

Bienvenue dans la huitième et dernière partie de ce tutoriel sur la création de votre premier site web. Vous allez découvrir ici comment configurer un site distant dans Dreamweaver. Un site distant est généralement un serveur web résidant sur un ordinateur distant qui contient des copies de vos fichiers locaux. Les utilisateurs accèdent au site distant lorsqu'ils affichent vos pages dans un navigateur.

Ce tutoriel couvre la connexion à un serveur distant au sens large. Il fournit des conseils de dépannage, mais leur pertinence dépend de la configuration de votre serveur distant. En cas de doute, contactez le service d'assistance de votre hébergeur ou votre administrateur système.

Présentation des sites distants

Une fois votre site web créé, vous devez le publier en chargeant les fichiers sur un serveur distant. C'est sur ce dernier que vos fichiers sont stockés à des fins de test, de production, de collaboration et de publication (tout dépend de votre environnement).

Avant toute chose, vous devez avoir accès à un serveur web distant, par exemple le serveur d'un hébergeur, le serveur de votre client ou le serveur intranet de votre entreprise. En outre, certains fournisseurs d'accès à Internet (FAI) vous donnent accès à un espace web gratuit dans le cadre de votre contrat de connexion. Si vous n'avez pas accès à ce type de serveur, contactez votre FAI, votre client, votre administrateur système ou l'un des nombreux hébergeurs qui proposent des solutions d'hébergement web. Certaines d'entre elles sont gratuites, mais elles insèrent généralement des publicités sur votre site. Une solution sans publicité ne vous coûtera que quelques euros par mois.

Avant de poursuivre, vous devez également définir un site local. Pour en savoir plus, consultez la première partie de ce tutoriel, Présentation du projet et configuration du site.

Remarque : pour en savoir plus sur les sites Dreamweaver, consultez la rubrique d'aide Configurer une version locale de votre site.

Définition d'un serveur distant

En matière de gestion, Dreamweaver part du principe que vos fichiers locaux sont la réplique parfaite de votre site web en ligne. Ainsi, le fichier index.html contenu dans votre dossier bayside devient la page d'accueil de votre site distant. Si vous possédez déjà un site web en ligne que vous ne voulez pas écraser, utilisez le panneau de contrôle de votre site pour créer un dossier nommé « bayside » dans lequel vous pourrez charger les fichiers Bayside Beat.

  1. Dans Dreamweaver, sélectionnez Site > Gérer les sites.

  2. Dans la boîte de dialogue qui s'affiche, sélectionnez le site Bayside Responsive.

    Si vous n'avez pas défini le site Bayside Responsive, créez un dossier local pour le site avant de poursuivre. Pour en savoir plus, consultez la première partie du tutoriel, Présentation du projet et configuration du site.

  3. Cliquez sur l'icône de modification située dans la partie inférieure gauche de la boîte de dialogue Gérer les sites (voir Figure 1).
fig01
Figure 1. Cliquez sur l'icône de modification pour changer les paramètres du site.
  1. Dans la boîte de dialogue de configuration du site, cliquez sur Serveurs pour ouvrir le panneau dans lequel vous ajouterez les définitions de votre serveur (voir Figure 2).
fig02
Figure 2. Panneau Serveurs de la boîte de dialogue de configuration du site.

Dreamweaver CC vous permet de configurer plusieurs définitions pour les serveurs distants et les serveurs de test. En revanche, il ne peut y avoir qu'une seule définition active par type de serveur à la fois.

  1. Cliquez sur le signe plus (+) en bas à gauche du panneau pour ajouter la définition du serveur distant. Un nouveau panneau s'ouvre alors, dans lequel vous pouvez entrer les paramètres du serveur (voir Figure 3).
fig03
Figure 3. Panneau à utiliser pour spécifier les paramètres du serveur.
  1. Dans la zone de texte Nom du serveur, saisissez le nom du serveur. Ce nom étant utilisé en interne par Dreamweaver pour identifier le serveur, vous pouvez le définir à votre convenance. Par exemple, vous pouvez créer une définition pour un serveur sur lequel vous chargez des fichiers à valider par le client et une autre pour un serveur dédié à la mise en ligne du site. Si vous n'avez qu'un seul serveur, nommez-le Remote Server.

  2. Dans le menu déroulant Se connecter au moyen de, sélectionnez la méthode de connexion au serveur.

    Les méthodes les plus courantes sont FTP, SFTP et FTP sur SSL/TLS (ou FTPS). Il est facile de les confondre, car leurs acronymes sont très proches. En cas de doute sur la méthode à sélectionner, demandez conseil à votre hébergeur ou à l'administrateur système du serveur. Votre choix sera limité aux méthodes prises en charge par votre serveur distant.

    Une fois votre choix effectué, suivez les instructions dans la section correspondante.

Connexion via FTP

FTP est l'acronyme de File Transfer Protocol (protocole de transfert de fichiers). Il s'agit de la méthode la plus rudimentaire de connexion à un serveur distant . Comme elle est moins sûre que les autres, ne l'utilisez que si votre serveur distant ne prend pas en charge SFTP ou FTPS.

  1. Saisissez l'adresse FTP du serveur (par exemple, ftp.yourdomain.com) dans le champ approprié.

  2. Le port FTP par défaut est le port 21. Changez la valeur du champ Port uniquement si l'administrateur de votre serveur distant vous le demande.

  3. Saisissez votre nom d'utilisateur et votre mot de passe dans les champs appropriés.

  4. Cliquez sur Tester pour tester votre connexion.

    En cas d'échec de la connexion, vérifiez que votre nom d'utilisateur et votre mot de passe sont corrects. Les mots de passe étant généralement sensibles à la casse, assurez-vous que la fonction Verr. Maj. n'est pas activée. Si le problème persiste, consultez la section de dépannage au bas de cette page.

  5. Dreamweaver active automatiquement la case à cocher Enregistrer en regard du mot de passe. Si vous la désactivez, votre mot de passe vous sera demandé à chaque connexion de Dreamweaver au serveur.

  6. Renseignez les champs Répertoire racine et URL Web comme indiqué plus bas sur cette page.

Connexion via SFTP

SFTP est l'acronyme de Secure File Transfer Protocol (protocole de transfert de fichiers sécurisé). Les protocoles SFTP et FTP fonctionnent sur le même principe, mais le premier est plus sûr, car il utilise une connexion chiffrée. Dans Dreamweaver, l'option SFTP donne la possibilité de se connecter au serveur distant en utilisant un nom d'utilisateur et un mot de passe ou un fichier de clé privée.

  1. Sélectionnez SFTP dans le menu déroulant Se connecter au moyen de.

  2. Saisissez l'adresse FTP du serveur (par exemple, ftp.yourdomain.com) dans le champ approprié.

  3. Le port SFTP par défaut est le port 22. Changez la valeur du champ Port uniquement si l'administrateur de votre serveur distant vous le demande.

  4. La méthode d'authentification par défaut utilise un nom d'utilisateur et un mot de passe. Saisissez les valeurs dans les champs appropriés (voir Figure 4).
fig04
Figure 4. La méthode classique de connexion via SFTP utilise un nom d'utilisateur et un mot de passe.
  1. Si vous sélectionnez le bouton radio Fichier de clé privée, les options changent, comme illustré en Figure 5.
fig05
Figure 5. Il existe différentes options de connexion avec un fichier de clé privée.

Si votre serveur prend en charge la connexion à l'aide d'un fichier de clé privée, saisissez votre nom d'utilisateur dans le champ Utilisateur, puis cliquez sur l'icône de dossier à droite du champ Fichier ID pour rechercher la version locale de votre fichier de clé privée.

Certains serveurs requièrent également une phrase secrète. Si nécessaire, saisissez-la dans le champ approprié. Dreamweaver active automatiquement la case à cocher Enreg. phrase sec. Si vous la désactivez, votre phrase secrète vous sera demandée à chaque connexion de Dreamweaver au serveur.

  1. Cliquez sur Tester pour vérifier que vous pouvez vous connecter au serveur distant.

    Si la connexion échoue, assurez-vous que tout est correctement orthographié. Les mots de passe et les phrases secrètes sont généralement sensibles à la casse. Assurez-vous que la fonction Verr. Maj. n'est pas activée.

  2. Renseignez les champs Répertoire racine et URL Web comme indiqué plus bas sur cette page.

Connexion via FTPS (FTP sur SSL/TLS)

FTPS est un standard plus récent et plus sûr que SFTP. Il utilise le protocole SSL (Secure Sockets Layer) ou TLS (Transport Layer Security) pour se connecter au serveur distant. Côté sécurité, il présente l'avantage d'authentifier les informations d'identification du serveur. En d'autres termes, il s'assure que vous vous connectez à un serveur connu en vérifiant le certificat de sécurité de ce dernier.

  1. Dans le menu déroulant Se connecter au moyen de, sélectionnez FTP sur SSL/TLS. Deux options s'offrent à vous :

    • Chiffrement implicite : le serveur coupe la connexion s'il ne reçoit pas de demande de sécurité.
    • Chiffrement explicite : si le serveur ne reçoit pas de demande de sécurité, il peut continuer avec une transaction non sécurisée ou couper/limiter la connexion . La connexion est assurée via le port 21.

La sélection de l'une ou l'autre option affiche le formulaire illustré en Figure 6.

fig06
Figure 6. FTPS authentifie également le certificat de sécurité du serveur.
  1. Saisissez l'adresse FTP du serveur (par exemple, ftp.yourdomain.com) dans le champ approprié.

  2. Le chiffrement implicite se connecte au port 990, tandis que le chiffrement explicite utilise le port 21. Changez la valeur du champ Port uniquement si l'administrateur de votre serveur distant vous le demande.

  3. Saisissez votre nom d'utilisateur et votre mot de passe dans les champs appropriés.

  4. Choisissez la méthode de vérification du certificat de sécurité du serveur dans le menu déroulant Authentification. Deux options s'offrent à vous :

    • Serveur approuvé : choisissez cette option si le certificat du serveur est émis par une autorité de certification accréditée.
    • Aucun : choisissez cette option si le serveur possède un certificat auto-signé. Le certificat vous est présenté à la première connexion. Si vous acceptez ses informations d'identification, le certificat est ajouté au magasin de certificats des sites de confiance de Dreamweaver.
  5. Cliquez sur Tester pour tester votre connexion.

En cas d'échec de la connexion, vérifiez que votre nom d'utilisateur et votre mot de passe sont corrects. Les mots de passe étant généralement sensibles à la casse, assurez-vous que la fonction Verr. Maj. n'est pas activée. Si le problème persiste, consultez la section de dépannage au bas de cette page.

  1. Dreamweaver active automatiquement la case à cocher Enregistrer en regard du mot de passe. Si vous la désactivez, votre mot de passe vous sera demandé à chaque connexion de Dreamweaver au serveur.

  2. Renseignez les champs Répertoire racine et URL Web comme indiqué dans la section suivante.

Définition du répertoire racine et de l'URL web

Les utilisateurs saisissent souvent une valeur erronée pour le répertoire racine. Il est difficile de donner des instructions précises sachant que les hébergeurs et administrateurs serveur n'appliquent pas les mêmes politiques. La valeur du répertoire racine doit correspondre au chemin à entrer après la connexion à votre serveur pour accéder au dossier dans lequel vous voulez installer index.html.

Si vous voulez que la page d'accueil Bayside Beat soit la page frontale de votre site web, vous devez spécifier le chemin vers la racine du site du serveur distant. Sur certains serveurs, il s'agit de public_html. D'autres peuvent utiliser www, wwwroot, voire rien du tout. Sur mon serveur distant, cela doit être /home/username/public_html. En cas de doute, contactez votre hébergeur ou votre administrateur serveur.

Si vous voulez que la page d'accueil Bayside Beat soit dans un sous-dossier nommé bayside, saisissez le chemin vers ce dossier. Par exemple, sur mon serveur, ce serait /home/username/public_html/bayside_beat.

Le champ URL Web doit contenir l'URL du dossier que vous avez défini comme répertoire racine (http://www.example.com/ ou http://www.example.com/bayside/, par exemple). Dreamweaver peut tenter de deviner la valeur correcte, mais ce n'est qu'une supposition. N'acceptez pas la valeur par défaut sans la vérifier.

Si vous vous connectez via SFTP, vos paramètres devraient être similaires à ceux présentés en Figure 7.

fig07
Figure 7. Paramètres de connexion à un serveur distant via SFTP.

Définition d'options avancées

En règle générale, il n'est pas nécessaire de modifier les options avancées d'un serveur. Passons-les rapidement en revue avant d'enregistrer la définition du serveur.

  1. Cliquez sur le bouton Avancé dans la partie supérieure du panneau pour afficher les options avancées (voir Figure 8).
fig08
Figure 8. Options avancées du serveur.
  1. La case à cocher Conserver les informations de synchronisation est activée par défaut. Cette option vous permet d'opérer le suivi les dernières mises à jour des fichiers stockés sur votre serveur distant et d'utiliser la fonction de synchronisation (voir la rubrique d'aide Synchronisation de fichiers).

  2. La case à cocher Télécharger automatiquement les fichiers vers le serveur lors de l'enregistrement doit rarement, voire jamais, être sélectionnée, car elle écrase vos fichiers en ligne. Tout erreur est alors immédiatement visible sur votre site distant.

  3. La case à cocher Activer l'extraction de fichiers doit être sélectionnée dans un environnement collaboratif. Elle ne permet qu'à une seule personne à la fois de modifier une page (voir la rubrique d'aide Archivage et extraction de fichiers).

  4. Serveur d'évaluation : les options de cette section s'appliquent uniquement lors de la définition d'un serveur de test pour un site web qui utilise une technologie côté serveur comme PHP, ASP.NET ou encore ColdFusion.

  5. Cliquez sur Enregistrer pour enregistrer votre définition de serveur. Cela vous renvoie au panneau Serveurs de la boîte de dialogue de configuration du site, dans laquelle votre définition du serveur est maintenant répertoriée (voir Figure 9).
fig09
Figure 9. Le serveur distant est maintenant enregistré dans la boîte de dialogue de configuration du site.

Dreamweaver sélectionne automatiquement le bouton radio Distant.

Les icônes situées dans la partie inférieure du panneau Serveurs vous permettent d'ajouter un autre serveur, de supprimer ou modifier la définition du serveur sélectionné, ou d'en effectuer une copie. Cette copie est utile si vous ne devez changer que quelques détails pour vous connecter à un autre serveur.

Vous pouvez définir plusieurs serveurs distants pour un site, mais vous ne pouvez vous connecter qu'à un seul serveur à la fois en sélectionnant son bouton radio dans la colonne Distant.

  1. Cliquez sur Enregistrer pour fermer la boîte de dialogue de configuration du site, puis sur Terminé pour fermer la boîte de dialogue Gérer les sites.

Chargement de vos fichiers locaux

Vous pouvez maintenant charger les fichiers de votre dossier local vers le serveur web distant pour rendre vos pages accessibles à tous.

  1. La méthode la plus rapide consiste à sélectionner le dossier racine local du site dans la partie supérieure du panneau Fichiers. Toutefois, le site Bayside Responsive contient du texte au format Microsoft Word et RTF, ainsi que des dossiers montrant le site à chaque étape du développement.

    Maintenez la touche Ctrl (Windows) ou Cmd (Mac OS) enfoncée et sélectionnez les dossiers et fichiers suivants :

    • images
    • js
    • styles
    • index.html
    • sights.html

  2. Cliquez sur l'icône Placer les fichiers sur "Serveur distant (Remote Server)" (flèche Haut) dans la barre d'outils du panneau Fichiers (voir Figure 10).
fig10
Figure 10. Placez les fichiers sur le serveur.
  1. Lorsque Dreamweaver se connecte au serveur, une boîte de dialogue s'affiche et vous demande si vous voulez inclure les fichiers dépendants dans le transfert (voir Figure 11).
fig11

Le bouton Non est sélectionné par défaut. Si vous ne faites rien, la boîte de dialogue se fermera, et seuls les fichiers sélectionnés dans le panneau Fichiers seront chargés.

Certains utilisateurs trouvent pratique d'inclure les fichiers dépendants, car tous les fichiers liés à ceux sélectionnés seront automatiquement chargés. Réfléchissez bien avant de cliquer sur Oui. Il se peut que vous travailliez sur votre feuille de style et que vous ne soyez pas encore prêt à la charger. En cliquant sur Oui, vous écraserez la feuille de style de votre site web en ligne si elle est liée à l'un des fichiers que vous chargez.

Si vous activez la case à cocher Ne plus afficher ce message, seuls les fichiers sélectionnés dans le panneau Fichiers seront chargés. Si vous changez d'avis par la suite, vous pouvez modifier les options dans la catégorie Site des préférences de Dreamweaver.

  1. Ouvrez votre site distant dans un navigateur pour vérifier que tous les fichiers ont été correctement chargés. Félicitations ! Votre site est en ligne.

    Si le site Bayside Responsive ne s'affiche pas, il est très probable que la valeur du répertoire racine dans la définition de votre serveur distant ne pointe pas vers le bon dossier sur le serveur.

(Facultatif) Résolution des problèmes de configuration du serveur distant

Si vous devez modifier les paramètres du serveur distant, choisissez Site > Gérer les sites, sélectionnez le site dans la liste, puis cliquez sur le crayon pour ouvrir la boîte de dialogue de configuration du site. Sélectionnez Serveurs dans le volet de gauche, puis le serveur à modifier, et cliquez sur l’icône Modifier un serveur existant (voir Figure 12).

fig12
Figure 12. Modification de la définition d'un serveur existant.

Il existe plusieurs façons de configurer un serveur web. La liste suivante contient des informations sur certains problèmes courants que vous pouvez rencontrer lors de la configuration d'un serveur distant et sur la façon de les résoudre :

  • Il se peut que la mise en œuvre FTP de Dreamweaver ne fonctionne pas correctement avec certains serveurs proxy, pare-feu multiniveaux et d'autres formes d'accès indirect à un serveur.

  • Pour la mise en œuvre FTP de Dreamweaver, vous devez vous connecter au dossier racine du système distant (dans nombre d'applications, vous pouvez vous connecter à un répertoire distant, puis parcourir le système de fichiers distant pour trouver le répertoire voulu). Assurez-vous de spécifier le dossier racine du système distant (ou le sous-dossier bayside) comme répertoire racine. Si vous ne parvenez pas à vous connecter, et que vous avez spécifié le répertoire hôte avec une seule barre oblique (/), vous aurez peut-être besoin de spécifier un chemin relatif entre le répertoire auquel vous vous connectez et le dossier racine distant. Si, par exemple, le dossier racine distant est un répertoire de niveau supérieur, vous pouvez avoir besoin d'utiliser ../../ pour spécifier le répertoire hôte.

  • Les noms de fichier et de dossier qui contiennent des espaces et des caractères spéciaux provoquent souvent des problèmes lors du transfert vers un site distant. Utilisez des traits de soulignement à la place des espaces, et évitez les caractères spéciaux. Les deux points (:), les barres obliques (/), les points (.) et les apostrophes (') ne sont pas autorisés dans les noms de fichier ou de dossier.

  • De nombreux serveurs utilisent des liens symboliques (Unix), des raccourcis (Windows) ou des alias (Macintosh) pour connecter un dossier situé en un point du disque du serveur à un autre dossier situé ailleurs. Par exemple, le sous-répertoire public_html de votre répertoire d'origine sur le serveur peut être un lien vers une autre partie du serveur. Dans la plupart des cas, ces alias n'influent pas sur votre capacité à vous connecter au dossier ou au répertoire approprié, mais si vous ne pouvez vous connecter qu'à une partie du serveur, il s'agit peut-être d'un problème d'alias.

  • Si un message d'erreur de type « Impossible de placer le fichier » s'affiche, il est possible que votre dossier distant soit saturé. Pour plus d'informations, consultez le journal FTP.

Lorsque vous rencontrez un problème lors d'un transfert FTP, pensez à examiner le journal FTP en sélectionnant Site > Avancé > Journal FTP. Pour en savoir plus, consultez la note technique détaillée sur la résolution des problèmes FTP sur le site d'Adobe.

04/13/2018

Contributeurs : David PowersTom Alex Buch

Cette page vous a-t-elle été utile ?