Flux de travaux de haut niveau décrivant la conception et le développement de sites web avec Dreamweaver

Cet article vous aide à comprendre comment vous pouvez réaliser diverses étapes ou phases de développement Web à l’aide de Dreamweaver.

Remarque :

Dans cet article, on suppose que vous avez un niveau débutant à intermédiaire de compréhension du domaine Web et des codes HTML, CSS et JavaScript.

  1. La première phase en matière de développement Web est la phase de planification durant laquelle vous analysez les besoins de l’audience ainsi que les exigences techniques et commerciales. De plus, vous réunissez toutes les informations nécessaires pour concevoir et publier votre site Web et vous avez des réponses à des questions telles que :

    • Quel fournisseur de services puis-je choisir pour l’hébergement du site Web ? Ai-je accès au chargement des fichiers sur le serveur de publication ?
    • Quel nom de domaine doit être utilisé pour le site Web ?
    • Au cas où vous migrez des sites Web existants dans Dreamweaver, où les fichiers et les actifs sont-ils actuellement stockés ? Ai-je accès au serveur sur lequel ces informations sont stockées ?
    • Si vous souhaitez créer un site Web dynamique, quel serveur pouvez-vous utiliser pour vérifier si les données s’affichent de façon dynamique ? Est-ce que je possède les détails du serveur de l’application Web que je souhaite utiliser pour charger des données dynamiques ?
    • Quel type d’actifs sont requis pour le site Web ?
    • Seront-ils des actifs créés à partir de zéro ? Si les actifs sont déjà disponibles, y ai-je déjà accès ?
    • Quelles applications je souhaite utiliser pour créer des actifs ?
    • Puis-je planifier la création d’un site Web réactif ? 

    En supposant que vous sachiez précisément quel site Web vous souhaitez développer, comment et où vous souhaitez l’héberger et que vous avez choisi Dreamweaver et Creative Cloud pour le processus de développement Web, passez à l’étape suivante.

  2. Vérifiez si vous disposez de tous les actifs requis pour votre site Web. Rassemblez-les et classez-les dans vos dossiers locaux ou dans les Bibliothèques Adobe Creative Cloud.

  3. Créez un nouveau document dans Dreamweaver en utilisant :

    • Un document vierge ;
    • Des modèles de démarrage fournis avec Dreamweaver, ou ;
    • Des fichiers de modèle (*.dwt) créés par quelqu’un d’autre.

    Remarque :

    Si vous n’êtes pas familier avec Dreamweaver ou si vous apprenez le développement Web, les modèles de démarrage sont d’un grand secours pour vous aider à concevoir des pages Web.

    Même si vous envisagez de commencer depuis le début, il est judicieux de jeter un œil à ces pages pour comprendre quels éléments permettent d’obtenir une bonne conception de page Web.

  4. Consacrez quelques minutes pour vous familiariser avec l’espace de travail de Dreamweaver. Recherchez un espace de travail qui vous convient et définissez un thème de couleur. Réorganisez les différents panneaux comme vous le souhaitez.

  5. Configurez votre site dans Dreamweaver. Procédez à la création une structure de dossiers contenant des fichiers et des actifs. Après avoir organisé vos informations et défini une structure, vous pouvez commencer la création de votre site. (Consultez la section À propos des sites Dreamweaver.)

    À ce stade, il est aussi conseillé de configurer des connexions à des serveurs distants ainsi que des serveurs d’évaluation (si vous avez un contenu dynamique). 

  6. Commencez le codage de vos pages Web en mode Code ou créez-les en mode Création/En direct.

    Si vous prévoyez d’utiliser des compositions Photoshop, vous pouvez les extraire dans Dreamweaver et travailler dessus. Pour en savoir plus sur l’utilisation de compositions Photoshop, voir Extract sous Dreamweaver CC.

    Ajoutez des éléments de conception, par exemple du texte, des images, des images avec effet de survol, des cartes graphiques, des couleurs, des animations, des sons, des liens HTML, des tableaux, etc.

  7. Définissez l’aspect de votre page Web à l’aide de CSS. 

    Vous pouvez travailler avec CSS dans Dreamweaver de différentes façons :

    • Vous pouvez rédiger manuellement le CSS. Pour plus d’informations sur les fonctionnalités de codage de Dreamweaver concernant l’encodage manuel de votre CSS, consultez la section Environnement de codage sous Dreamweaver.
    • Si vous n’êtes pas habitué à créer des pages CSS, vous pouvez faire appel au panneau CSS Designer pour vous aider à créer votre langage CSS. Pour plus d’informations, voir Mise en forme de pages avec CSS Designer.
    • Si vous préférez travailler avec des fichiers Sass et Less, Dreamweaver prend également en charge cette option, vous permettant d’importer des fichiers Sass et Less dans votre site Dreamweaver et de travailler dessus. Dreamweaver compile ensuite ces fichiers (ou vous pouvez décider de les compiler manuellement) et vous voyez les résultats de vos modifications CSS en temps réel. Pour plus d’informations sur l’utilisation de fichiers Sass et Less avec Dreamweaver, consultez la section Préprocesseurs CSS.
  8. Configuration d’une application Web pour créer un contenu dynamique.

    De nombreux sites web contiennent des pages dynamiques qui permettent aux visiteurs d’afficher les informations stockées dans des bases de données, voire d’ajouter ou de modifier des données dans certains cas. Pour créer ce type de pages, vous devez d’abord configurer un serveur web et un serveur d’application, créer ou modifier un site Dreamweaver et vous connecter à une base de données. Pour en savoir plus, voir Sites, pages et formulaires Web dynamiques.

  9. Créez des pages dynamiques.

    Sous Dreamweaver, vous pouvez définir diverses sources de contenu dynamique, y compris des jeux d’enregistrements extraits de bases de données, des paramètres de formulaire et des composants JavaBeans. Pour ajouter le contenu dynamique à une page, il suffit de le faire glisser vers cette dernière.

    Vous pouvez définir une configuration de page qui affiche un ou plusieurs enregistrements à la fois (ou plusieurs pages d’enregistrements), ajoute des liens spéciaux permettant de passer d’une page d’enregistrements à une autre et crée des compteurs d’enregistrements pour faciliter la gestion de ces derniers. Pour en savoir plus, voir Sites, pages et formulaires Web dynamiques.

  10. Testez, prévisualisez et publiez votre site Web. 

    Lorsque vous créez des pages, vous devez les prévisualiser pour vérifier que votre site Web progresse selon votre modèle. Vous pouvez coder en mode fractionné, en conservant les affichages en mode Code et En direct côte à côte.

    Vous pouvez également afficher un aperçu des pages Web en temps réel sur un périphérique (si vous créez des pages Web réactives), ou via un navigateur.

    Si vous ne souhaitez pas voir l’aperçu en direct, vous pouvez utiliser la prévisualisation d’aperçu normale via un navigateur.

    Si vous avez déjà défini des connexions à des serveurs distants, pour publier votre site Web, vous devez placer vos fichiers dans le serveur distant afin de les afficher en direct.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne