\n Le Dreamweaver est la m\u00e8re de toutes les activit\u00e9s Web sur Internet. Pour la plupart des gens, Dreamweaver n’est qu’un outil pour cr\u00e9er des sites Web, mais seuls les professionnels savent que Dreamweaver est la centrale \u00e9lectrique.\n<\/p>\n
\n Dreamweaver poss\u00e8de de nombreuses fonctionnalit\u00e9s et options qui en font l’outil pr\u00e9f\u00e9r\u00e9 des d\u00e9veloppeurs Web. Sans aucun doute, ce logiciel poss\u00e8de l’IDE (environnement de d\u00e9veloppement int\u00e9gr\u00e9) le plus connu qu’aucun autre logiciel de d\u00e9veloppement Web ne poss\u00e8de sur le march\u00e9 actuel. Soit les outils de d\u00e9veloppement, de collaboration et de codage, Dreamweaver offre une gamme d\u00e9cente aux d\u00e9veloppeurs Web avec lesquels jouer. C’est pourquoi, pour les d\u00e9veloppeurs Web d\u00e9butants, il est important de savoir comment optimiser l’utilisation de Dreamweaver.\n<\/p>\n
\n Tous les aspects qui diff\u00e9rencient les d\u00e9veloppeurs Web experts et les d\u00e9veloppeurs Web ordinaires sont cach\u00e9s sous des couches de menus intuitifs regrettables, c’est pourquoi les nouveaux d\u00e9veloppeurs Web ont du mal \u00e0 am\u00e9liorer leurs comp\u00e9tences. Cependant, dans cet article, je vais vous montrer ces fonctions cach\u00e9es et puissantes de Dreamweaver qu’il est tr\u00e8s important de conna\u00eetre pour r\u00e9pondre aux exigences du march\u00e9 actuel. Cet article vous aidera \u00e0 acc\u00e9der rapidement \u00e0 ces fonctions et vous fournira les dix meilleurs hacks utiles qui am\u00e9lioreront la qualit\u00e9 de votre travail et am\u00e9lioreront consid\u00e9rablement votre codage.\n<\/p>\n
\n Tout le monde sait que Dreamweaver offre la vue statique ou nos fichiers ouverts. Cependant, la question reste sans r\u00e9ponse sur les vues dynamiques d’une application telle que WordPress. Afin de d\u00e9finir la vue dynamique, nous devons indiquer \u00e0 Dreamweaver les param\u00e8tres \u00e0 utiliser pour les vues dynamiques. Pour d\u00e9finir cela, acc\u00e9dez aux param\u00e8tres de requ\u00eate 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.\n<\/p>\n
\n Apr\u00e8s 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\u00e8s de votre page. Compl\u00e9tez-le ensuite avec le Javascript en direct, les manipulations DOM, les requ\u00eates de base de donn\u00e9es, le code c\u00f4t\u00e9 serveur et le CSS rendu, au lieu de l’ic\u00f4ne d’espace r\u00e9serv\u00e9 de l’interface de la vue de conception.\n<\/p>\n
\n La navigation est le composant d’une page du site Web r\u00e9actif qui devrait avoir la capacit\u00e9 d’adaptation pour r\u00e9pondre aux besoins des \u00e9crans 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\u00e9 de navigation de Bootstrap et qu’il est facile d’utiliser la fonctionnalit\u00e9 lorsqu’il s’agit de d\u00e9velopper un site Web efficace et r\u00e9actif.\n<\/p>\n
\n Pour vous donner un aper\u00e7u rapide, voici la d\u00e9monstration rapide de la fa\u00e7on d’utiliser Bootstrap dans votre d\u00e9veloppement.\n<\/p>\n
\n 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\u00eete de dialogue du document et cochez \u00e9galement la case de l’option de mise en page pr\u00e9-construite pour utiliser les options de navigation compl\u00e8tes telles que;\n<\/p>\n
\n Si vous trouvez cela difficile, il existe une autre option. Dreamweaver vous permet de personnaliser la barre de navigation. Si vous pr\u00e9f\u00e9rez la palette sombre, ajoutez simplement la classe .navbar-inverse \u00e0 votre\n<\/p>\n
\n \u00e9tiquette. Vous pouvez m\u00eame 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 \u00e9galement en charge ce codage, vous n’avez donc pas \u00e0 garder \u00e0 l’esprit l’int\u00e9gralit\u00e9 du codage. Il vous suffit de taper .navbar dans l’affichage des \u00e9l\u00e9ments, et vous obtiendrez la liste contextuelle dans laquelle vous pourrez choisir l’option souhait\u00e9e.\n<\/p>\n
\n L’Ajax a un caract\u00e8re tr\u00e8s dynamique. C’est pourquoi nous avons souvent besoin d’interagir avec la page avec des \u00e9l\u00e9ments indisponibles ou non rendus lors du chargement de la premi\u00e8re page. Ces \u00e9l\u00e9ments peuvent \u00eatre inject\u00e9s dans la page apr\u00e8s 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\u00e8rement impl\u00e9ment\u00e9e sur JavaScript, vous aviez l’habitude de rechercher m\u00e9thodiquement votre chemin dans vos scripts pour trouver quel \u00e9l\u00e9ment a \u00e9t\u00e9 cr\u00e9\u00e9 o\u00f9. Au lieu de chercher dans les scripts, essayez ce qui suit.\n<\/p>\n
\n Mettez votre Dreamweaver dans la vue en direct et affichez votre page. Appuyez ensuite sur F6 pour geler le JavaScript \u00e0 tout moment, ce qui vous permettra de diss\u00e9quer et de cibler n’importe quel code de n’importe quel \u00e9l\u00e9ment dynamique de la page. Cela vous aidera non seulement \u00e0 cibler le code exact de l’\u00e9l\u00e9ment dynamique, mais acc\u00e9l\u00e9rera \u00e9galement votre d\u00e9veloppement en r\u00e9duisant le temps de recherche de tout code sur le site Web dynamique.\n<\/p>\n
\n Un script de codage peut \u00eatre tr\u00e8s d\u00e9routant si vous n’\u00eates pas habitu\u00e9 \u00e0 voir du codage complexe tous les jours et toutes les nuits. C’est l\u00e0 que la mise en surbrillance des codes vous aide \u00e0 cr\u00e9er des s\u00e9parations dans l’ensemble du script. Au lieu de bouger les yeux avec le bord saignant, Dreamweaver a une fonctionnalit\u00e9 qui met en \u00e9vidence le codage qui vous aide \u00e0 le lire. Pour cela, ouvrez les pr\u00e9f\u00e9rences de Dreamweaver et activez la section des aper\u00e7us 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-\u00eatre mettre \u00e0 jour votre version de Dreamweaver car cette fonctionnalit\u00e9 n’est disponible que dans la derni\u00e8re version.\n<\/p>\n
\n Une fois que vous avez activ\u00e9 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\u00e8tres doivent \u00eatre d\u00e9finis. Cet outil est id\u00e9al pour identifier et acc\u00e9der rapidement aux \u00e9l\u00e9ments similaires. Une fois que vous avez mis en surbrillance un \u00e9l\u00e9ment, utilisez les raccourcis clavier f3 sur le PC, CMD-G sur le Mac) pour passer d’un \u00e9l\u00e9ment en surbrillance \u00e0 l’\u00e9l\u00e9ment suivant. De plus, le modificateur de d\u00e9calage peut revenir en arri\u00e8re \u00e0 la section pr\u00e9c\u00e9dente. De plus, la mise en surbrillance du code fonctionne \u00e9galement avec les attributs et les valeurs des balises HTML afin que vous puissiez facilement rep\u00e9rer les classes sp\u00e9cifiques.\n<\/p>\n
\n Dreamweaver est une excellente plate-forme o\u00f9 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\u00e9tion Javascript. Ces codes acc\u00e9l\u00e8rent le processus de d\u00e9veloppement car en utilisant ces codes, il n’est pas n\u00e9cessaire de taper des scripts entiers et sont tr\u00e8s pratiques pour les codeurs rapides.\n<\/p>\n
\n Dreamweaver est le seul logiciel de d\u00e9veloppement Web qui vous permet d’utiliser ce type de codes de compl\u00e9tion jQuery et Prototype qui aide chaque d\u00e9veloppeur Web \u00e0 acc\u00e9l\u00e9rer sa t\u00e2che et \u00e0 produire le meilleur produit possible avec un minimum d’efforts.\n<\/p>\n
\n CSS et JavaScript sont les noms de fichiers ind\u00e9pendants 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\u00eatre. \u00c9tant donn\u00e9 que toutes ces options sont plac\u00e9es au premier plan, vous pouvez facilement basculer vers ces fichiers et apporter des modifications qui peuvent \u00eatre enregistr\u00e9es sans m\u00eame les ouvrir. En cliquant sur n’importe quel fichier dans la barre des fichiers associ\u00e9s, cela vous montrera sa source en mode Code et la page parente en mode Conception.\n<\/p>\n
\n De plus, vous pouvez \u00e9galement utiliser n’importe quel outil de navigation de code pour acc\u00e9der rapidement au code source CSS qui affectera votre solution actuelle. Cet acc\u00e8s rapide au code source CSS r\u00e9duit le temps de codage et permet au d\u00e9veloppeur web de se concentrer sur les diff\u00e9rents aspects de son processus de d\u00e9veloppement.\n<\/p>\n
\n Des lignes de codes d\u00e9sorganis\u00e9es et d\u00e9sordonn\u00e9es montrent que le d\u00e9veloppeur de ce codage n’\u00e9tait pas suffisamment professionnel et qualifi\u00e9 pour \u00e9crire 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 \u00e0 la vol\u00e9e. Utilisez simplement l’option \u00ab\u00a0Appliquer le formatage source\u00a0\u00bb et reformez-la exactement selon vos pr\u00e9f\u00e9rences. Pour rendre votre codage propre et bien rang\u00e9, cliquez sur \u00ab\u00a0Formater le code source\u00a0\u00bb en bas de la barre d’outils de codage, puis allez dans \u00ab\u00a0\u00e9dition> barres d’outils> codage\u00a0\u00bb puis s\u00e9lectionnez les \u00ab\u00a0param\u00e8tres de format de code\u00a0\u00bb pour d\u00e9finir votre param\u00e8tre pr\u00e9f\u00e9r\u00e9.\n<\/p>\n
\n Une autre fa\u00e7on d’organiser votre script consiste \u00e0 acc\u00e9der \u00e0 l’option de formatage \u00e0 partir de Commandes > Appliquer le formatage source ou de l’appliquer uniquement sur un bloc de codage en s\u00e9lectionnant l’option Appliquer le formatage source \u00e0 la s\u00e9lection.\n<\/p>\n
\n Peu importe \u00e0 quel point Adobe \u00e9quipe Dreamweaver d’outils et de fonctionnalit\u00e9s puissants, plus vous travaillez sur les sites Web, plus vous avez de travail \u00e0 faire du c\u00f4t\u00e9 du codage. Cette chose peut augmenter vos comp\u00e9tences, mais elle ouvrira \u00e9galement les portes \u00e0 des erreurs sans fin car trop d’\u00e9criture de codage n’est pas une t\u00e2che facile \u00e0 faire. Le Dreamweaver le sait, et c’est pourquoi dans la derni\u00e8re version de Dreamweaver qui est Creative Cloud (CC) il y a une fonctionnalit\u00e9 appel\u00e9e support Linting. Linting est un outil de base de v\u00e9rification de la syntaxe de programmation disponible pour CSS, HTML et JavaScript. Gr\u00e2ce \u00e0 cela, chaque fois que Dreamweaver identifie un probl\u00e8me ou une erreur, il envoie un certain nombre de fus\u00e9es \u00e9clairantes \u00e0 la fois g\u00e9n\u00e9rales et sp\u00e9cifiques.\n<\/p>\n
\n Pour ex\u00e9cuter le test, ouvrez une page pleine de codes dans Dreamweaver et vous verrez une petite coche verte dans un cercle sur le c\u00f4t\u00e9 droit de la barre d’\u00e9tat. S’il n’y a qu’une petite coche verte encercl\u00e9e, tout va bien avec votre code. S’il y a une croix rouge entour\u00e9e de rouge, il y a des probl\u00e8mes avec votre codage et vous devez le r\u00e9viser pour faire fonctionner votre site Web correctement. De plus, en cliquant sur la marque de l’erreur, cela peut vous amener \u00e0 la colonne et \u00e0 la ligne o\u00f9 vous avez fait l’erreur avec la description de l’erreur. La meilleure chose \u00e0 ce sujet est qu’il n’y a pas de limite \u00e0 cette fonctionnalit\u00e9 et que vous pouvez l’utiliser jusqu’\u00e0 ce que vous n’obteniez pas la marque verte.\n<\/p>\n
\n La capacit\u00e9 de navigation est l’une des choses les plus fondamentales de tout processus de d\u00e9veloppement Web. C’est pourquoi Dreamweaver vous a facilit\u00e9 la t\u00e2che afin que vous ne puissiez jamais manquer ces \u00e9l\u00e9ments de base avant de commencer votre d\u00e9veloppement Web. Ouvrez le document dans Dreamweaver pour lequel vous souhaitez v\u00e9rifier la compatibilit\u00e9. Dans la barre de menus dans laquelle sont plac\u00e9es les ic\u00f4nes des options de vues de code, de fractionnement et de conception, il existe une autre option appel\u00e9e bouton \u00ab\u00a0V\u00e9rifier la page\u00a0\u00bb.\n<\/p>\n
\n En cliquant, il ouvrira un menu d\u00e9roulant, s\u00e9lectionnera V\u00e9rifier la compatibilit\u00e9 du navigateur et verra le r\u00e9sultat de votre compatibilit\u00e9 dans une fen\u00eatre s\u00e9par\u00e9e.\n<\/p>\n
\n Lors du codage pour le grand site Web, il arrive souvent qu’un morceau de code commence \u00e0 vous irriter \u00e0 l’\u00e9cran. Tr\u00e8s peu de gens savent qu’ils peuvent minimiser ce morceau de codage en appuyant simplement sur un bouton du clavier. Lorsque vous \u00eates certain qu’il n’est pas n\u00e9cessaire de modifier le bloc de codage, s\u00e9lectionnez simplement ce bloc et cliquez sur \u00ab\u00a0–\u00a0\u00bb \u00e0 c\u00f4t\u00e9 du num\u00e9ro de ligne de code. Ce morceau sera minimis\u00e9 et ne vous d\u00e9rangera pas tant que vous ne l’aurez pas d\u00e9velopp\u00e9.\n<\/p>\n<\/p>\n