10 Hacks sur Dreamweaver – Le meilleur éditeur de code pour les développeurs Web

Le Dreamweaver est la mère de toutes les activités Web sur Internet. Pour la plupart des gens, Dreamweaver n’est qu’un outil pour créer des sites Web, mais seuls les professionnels savent que Dreamweaver est la centrale électrique.

Dreamweaver possède de nombreuses fonctionnalités et options qui en font l’outil préféré des développeurs Web. Sans aucun doute, ce logiciel possède l’IDE (environnement de développement intégré) le plus connu qu’aucun autre logiciel de développement Web ne possède sur le marché actuel. Soit les outils de développement, de collaboration et de codage, Dreamweaver offre une gamme décente aux développeurs Web avec lesquels jouer. C’est pourquoi, pour les développeurs Web débutants, il est important de savoir comment optimiser l’utilisation de Dreamweaver.

Tous les aspects qui différencient les développeurs Web experts et les développeurs Web ordinaires sont cachés sous des couches de menus intuitifs regrettables, c’est pourquoi les nouveaux développeurs Web ont du mal à améliorer leurs compétences. Cependant, dans cet article, je vais vous montrer ces fonctions cachées et puissantes de Dreamweaver qu’il est très important de connaître pour répondre aux exigences du marché actuel. Cet article vous aidera à accéder rapidement à ces fonctions et vous fournira les dix meilleurs hacks utiles qui amélioreront la qualité de votre travail et amélioreront considérablement votre codage.

1 Affichage dynamique et Affichage en direct :

Tout le monde sait que Dreamweaver offre la vue statique ou nos fichiers ouverts. Cependant, la question reste sans réponse sur les vues dynamiques d’une application telle que WordPress. Afin de définir la vue dynamique, nous devons indiquer à Dreamweaver les paramètres à utiliser pour les vues dynamiques. Pour définir cela, accédez aux paramètres de requête HTTP en cliquant sur le menu Affichage > Affichage en direct > Options, puis entrez le GET ou le POST qui est requis pour afficher correctement votre application.

Après cela, basculez la vue en direct dans Dreamweaver qui remplacera le panneau de la vue de conception dans le WebKit rendu en direct et au pixel près de votre page. Complétez-le ensuite avec le Javascript en direct, les manipulations DOM, les requêtes de base de données, le code côté serveur et le CSS rendu, au lieu de l’icône d’espace réservé de l’interface de la vue de conception.

2 Bootstrap pour accélérer la navigation :

La navigation est le composant d’une page du site Web réactif qui devrait avoir la capacité d’adaptation pour répondre aux besoins des écrans plus petits pour lesquels Bootstrap peut beaucoup aider. Le Bootstrap vous permet de configurer facilement votre barre de navigation et de passer de la bande horizontale au panneau vertical. La raison en est que Dreamweaver prend en charge toute la flexibilité de navigation de Bootstrap et qu’il est facile d’utiliser la fonctionnalité lorsqu’il s’agit de développer un site Web efficace et réactif.

Pour vous donner un aperçu rapide, voici la démonstration rapide de la façon d’utiliser Bootstrap dans votre développement.

L’intensification de la navigation avec Bootstrap commence par le nouveau dialogue de document de Dreamweaver. Cliquez simplement sur le bouton Bootstrap Framework dans la nouvelle boîte de dialogue du document et cochez également la case de l’option de mise en page pré-construite pour utiliser les options de navigation complètes telles que;

• Liste de liens standard, non ordonnée et sémantiquement correcte.
• Une zone de placement de logo pour placer l’image de marque.
• Prêt à activer le bouton de soumission et le champ de recherche.
• Préréglages pour les menus déroulants des éléments de sous-navigation et complétez-le avec les séparateurs.
• Sections gauche et droite pouvant être alignées si nécessaire.
• Réactivité intégrée.

Si vous trouvez cela difficile, il existe une autre option. Dreamweaver vous permet de personnaliser la barre de navigation. Si vous préférez la palette sombre, ajoutez simplement la classe .navbar-inverse à votre

étiquette. Vous pouvez même jouer avec. Si vous souhaitez afficher votre navigation toujours au-dessus de la page, tapez .navbar-fixe-top. Si vous voulez l’afficher ci-dessous, tapez .navbar-fixed-bottom. Toutes ces classes Bootstrap sont standard et l’indication de code Dreamweaver prend également en charge ce codage, vous n’avez donc pas à garder à l’esprit l’intégralité du codage. Il vous suffit de taper .navbar dans l’affichage des éléments, et vous obtiendrez la liste contextuelle dans laquelle vous pourrez choisir l’option souhaitée.

3 Geler le JavaScript :

L’Ajax a un caractère très dynamique. C’est pourquoi nous avons souvent besoin d’interagir avec la page avec des éléments indisponibles ou non rendus lors du chargement de la première page. Ces éléments peuvent être injectés dans la page après un certain temps de chargement, c’est pourquoi ils ne s’affichent pas lors du premier chargement. Par exemple, lorsque vous souhaitiez modifier le style de l’info-bulle entièrement implémentée sur JavaScript, vous aviez l’habitude de rechercher méthodiquement votre chemin dans vos scripts pour trouver quel élément a été créé où. Au lieu de chercher dans les scripts, essayez ce qui suit.

Mettez votre Dreamweaver dans la vue en direct et affichez votre page. Appuyez ensuite sur F6 pour geler le JavaScript à tout moment, ce qui vous permettra de disséquer et de cibler n’importe quel code de n’importe quel élément dynamique de la page. Cela vous aidera non seulement à cibler le code exact de l’élément dynamique, mais accélérera également votre développement en réduisant le temps de recherche de tout code sur le site Web dynamique.

4 Surligner le code :

Un script de codage peut être très déroutant si vous n’êtes pas habitué à voir du codage complexe tous les jours et toutes les nuits. C’est là que la mise en surbrillance des codes vous aide à créer des séparations dans l’ensemble du script. Au lieu de bouger les yeux avec le bord saignant, Dreamweaver a une fonctionnalité qui met en évidence le codage qui vous aide à le lire. Pour cela, ouvrez les préférences de Dreamweaver et activez la section des aperçus technologiques. Cliquez ensuite sur l’option d’activation de la mise en surbrillance du code et laissez Dreamweaver faire son travail. Cependant, vous devrez peut-être mettre à jour votre version de Dreamweaver car cette fonctionnalité n’est disponible que dans la dernière version.

Une fois que vous avez activé l’option de mise en surbrillance, double-cliquez simplement sur n’importe quelle balise pour mettre en surbrillance toutes les instances de la balise sur la page actuelle. Cependant, les paramètres doivent être définis. Cet outil est idéal pour identifier et accéder rapidement aux éléments similaires. Une fois que vous avez mis en surbrillance un élément, utilisez les raccourcis clavier f3 sur le PC, CMD-G sur le Mac) pour passer d’un élément en surbrillance à l’élément suivant. De plus, le modificateur de décalage peut revenir en arrière à la section précédente. De plus, la mise en surbrillance du code fonctionne également avec les attributs et les valeurs des balises HTML afin que vous puissiez facilement repérer les classes spécifiques.

5 Achèvement JavaScript automatique :

Dreamweaver est une excellente plate-forme où des codes HTML et CSS intelligents et complets. Cependant, certaines personnes pensent que JavaScript n’est pas complet. Dans le cas de jQuery ou Prototype, dans Dreamweaver, vous devez savoir qu’il existe des extensions d’API qui fournissent des codes de complétion Javascript. Ces codes accélèrent le processus de développement car en utilisant ces codes, il n’est pas nécessaire de taper des scripts entiers et sont très pratiques pour les codeurs rapides.

Dreamweaver est le seul logiciel de développement Web qui vous permet d’utiliser ce type de codes de complétion jQuery et Prototype qui aide chaque développeur Web à accélérer sa tâche et à produire le meilleur produit possible avec un minimum d’efforts.

6 Accédez facilement aux fichiers associés :

CSS et JavaScript sont les noms de fichiers indépendants que vous voyez lorsque vous ouvrez les fichiers HTML et PHP. Lors de l’ouverture du fichier PHP, vous pouvez le voir en haut de la fenêtre. Étant donné que toutes ces options sont placées au premier plan, vous pouvez facilement basculer vers ces fichiers et apporter des modifications qui peuvent être enregistrées sans même les ouvrir. En cliquant sur n’importe quel fichier dans la barre des fichiers associés, cela vous montrera sa source en mode Code et la page parente en mode Conception.

De plus, vous pouvez également utiliser n’importe quel outil de navigation de code pour accéder rapidement au code source CSS qui affectera votre solution actuelle. Cet accès rapide au code source CSS réduit le temps de codage et permet au développeur web de se concentrer sur les différents aspects de son processus de développement.

7 Embellissez les codes à la volée :

Des lignes de codes désorganisées et désordonnées montrent que le développeur de ce codage n’était pas suffisamment professionnel et qualifié pour écrire les codes dans l’ordre. C’est aussi quelque chose qui compte beaucoup lors de l’optimisation du site Web pour les moteurs de recherche. Cependant, organiser vos codes et les embellir n’est pas aussi difficile qu’on le croit. Avec la bonne connaissance des options Dreamweaver et vous pouvez organiser vos codes à la volée. Utilisez simplement l’option "Appliquer le formatage source" et reformez-la exactement selon vos préférences. Pour rendre votre codage propre et bien rangé, cliquez sur "Formater le code source" en bas de la barre d’outils de codage, puis allez dans "édition> barres d’outils> codage" puis sélectionnez les "paramètres de format de code" pour définir votre paramètre préféré.

Une autre façon d’organiser votre script consiste à accéder à l’option de formatage à partir de Commandes > Appliquer le formatage source ou de l’appliquer uniquement sur un bloc de codage en sélectionnant l’option Appliquer le formatage source à la sélection.

8 Codage non pelucheux :

Peu importe à quel point Adobe équipe Dreamweaver d’outils et de fonctionnalités puissants, plus vous travaillez sur les sites Web, plus vous avez de travail à faire du côté du codage. Cette chose peut augmenter vos compétences, mais elle ouvrira également les portes à des erreurs sans fin car trop d’écriture de codage n’est pas une tâche facile à faire. Le Dreamweaver le sait, et c’est pourquoi dans la dernière version de Dreamweaver qui est Creative Cloud (CC) il y a une fonctionnalité appelée support Linting. Linting est un outil de base de vérification de la syntaxe de programmation disponible pour CSS, HTML et JavaScript. Grâce à cela, chaque fois que Dreamweaver identifie un problème ou une erreur, il envoie un certain nombre de fusées éclairantes à la fois générales et spécifiques.

Pour exécuter le test, ouvrez une page pleine de codes dans Dreamweaver et vous verrez une petite coche verte dans un cercle sur le côté droit de la barre d’état. S’il n’y a qu’une petite coche verte encerclée, tout va bien avec votre code. S’il y a une croix rouge entourée de rouge, il y a des problèmes avec votre codage et vous devez le réviser pour faire fonctionner votre site Web correctement. De plus, en cliquant sur la marque de l’erreur, cela peut vous amener à la colonne et à la ligne où vous avez fait l’erreur avec la description de l’erreur. La meilleure chose à ce sujet est qu’il n’y a pas de limite à cette fonctionnalité et que vous pouvez l’utiliser jusqu’à ce que vous n’obteniez pas la marque verte.

9 Vérification de la compatibilité des navigateurs :

La capacité de navigation est l’une des choses les plus fondamentales de tout processus de développement Web. C’est pourquoi Dreamweaver vous a facilité la tâche afin que vous ne puissiez jamais manquer ces éléments de base avant de commencer votre développement Web. Ouvrez le document dans Dreamweaver pour lequel vous souhaitez vérifier la compatibilité. Dans la barre de menus dans laquelle sont placées les icônes des options de vues de code, de fractionnement et de conception, il existe une autre option appelée bouton "Vérifier la page".

En cliquant, il ouvrira un menu déroulant, sélectionnera Vérifier la compatibilité du navigateur et verra le résultat de votre compatibilité dans une fenêtre séparée.

10 Minimisation des codes :

Lors du codage pour le grand site Web, il arrive souvent qu’un morceau de code commence à vous irriter à l’écran. Très peu de gens savent qu’ils peuvent minimiser ce morceau de codage en appuyant simplement sur un bouton du clavier. Lorsque vous êtes certain qu’il n’est pas nécessaire de modifier le bloc de codage, sélectionnez simplement ce bloc et cliquez sur "-" à côté du numéro de ligne de code. Ce morceau sera minimisé et ne vous dérangera pas tant que vous ne l’aurez pas développé.