10 trucs et astuces Dreamweaver simples mais utiles pour les débutants

Adobe Dreamweaver est un outil puissant pour les concepteurs de sites Web. Dreamweaver fournit une surface de conception visuelle et un éditeur de code pour développer des sites Web. Bien qu'il présente à la fois des avantages et des inconvénients, son large éventail de fonctionnalités vous permet de créer des sites Web de manière efficace.

Voici 10 trucs et astuces Dreamweaver simples mais utiles pour les débutants.

1. Supprimez les sauts de ligne :

Lors de la copie de texte d'un document, d'un e-mail ou d'un fichier Word vers Dreamweaver, vous vous retrouvez avec des sauts de ligne à la fin des paragraphes ou des lignes. Le caractère de saut de lien <br> signale la fin des lignes, donc tout texte après s'affichera sur la ligne en dessous. Ces caractères sont invisibles et il est donc difficile de les supprimer. Bien que Dreamweaver ne mette généralement pas en surbrillance ces caractères, vous pouvez modifier les paramètres dans le menu des préférences pour que le programme affiche une petite icône jaune qui indique les sauts de ligne. Une fois les sauts de ligne visibles, vous pouvez facilement les supprimer.

2. Pensez à définir un site :

Les gens confondent souvent travailler sur Dreamweaver et travailler avec un document Word. Cependant, la conception d'un site ne consiste pas à créer un fichier, mais à créer un site avec une collection de fichiers interdépendants tels que des images, des fichiers JavaScript, des pages Web et des fichiers CSS. Les utilisateurs qui ne comprennent pas cela oublient souvent l'importance de la mise en place d'un site. Dreamweaver fournit un processus de site facile à configurer. Il fournit des informations sur l'emplacement des fichiers de votre site et vous permet de sélectionner l'un des nombreux outils de gestion de Dreamweaver. Ces outils transfèrent votre fichier sur votre serveur Web, vérifient les liens rompus et créent un site avec des modèles.

3. Augmentez la taille de la police de votre code :

Avec la fonctionnalité de Dreamweaver pour ajuster la taille de votre police, vous pouvez augmenter la taille du code en quelques étapes simples. Pour augmenter la taille de vos polices, choisissez d'abord Dreamweaver > Préférences, puis cliquez sur la catégorie Polices, puis sélectionnez la nouvelle taille et cliquez sur OK. Cela vous aidera à rendre le code facilement lisible et vous pourrez travailler sur le développement de votre site Web pendant une longue période sans vous fatiguer les yeux.

4. Désactiver l'arrière-plan CSS

L'une des fonctionnalités de CSS est la propriété background. Cette fonctionnalité vous permet d'ajouter de la couleur ou des images à votre arrière-plan. La propriété abrégée d'arrière-plan de Dreamweaver réduit le code de 3 lignes à une seule ligne définissant une image, une couleur et une propriété de répétition. Cela peut certainement faciliter la définition des propriétés d'arrière-plan, mais si vous laissez une propriété dans la version abrégée, le navigateur Web la traitera comme "aucune". Par exemple, lors de la modification des arrière-plans si vous spécifiez uniquement la propriété de l'image, le navigateur Web supprimera la couleur existante de l'arrière-plan précédent. Par conséquent, il est préférable de désactiver le raccourci d'arrière-plan CSS pour éviter ce problème.

5. Copiez les styles avec CSS Designer :

Avec CSS Designer, vous pouvez améliorer visuellement les styles de votre page Web. Si vous souhaitez utiliser plus de fonctionnalités du concepteur CSS, cliquez avec le bouton droit sur n'importe quel sélecteur pour utiliser les opérations de copie ou de duplication. Ces options vous permettent de copier des styles d'un sélecteur à un autre. Ces styles incluent l'arrière-plan, le texte, l'animation ou la bordure. Si vous souhaitez copier un sélecteur entier, utilisez la commande standard Dupliquer ou Dupliquer dans la requête multimédia pour une approche ciblée. Ces raccourcis vous feront gagner beaucoup de temps et conserveront également un style cohérent.

6. Supprimez la barre de navigation :

Adobe Dreamweaver CS5 est livré avec une barre d'outils de navigation du navigateur. Cette barre d'outils est créée pour être utilisée avec l'option d'affichage en direct de Dreamweaver. Vous pouvez trouver ces deux options dans la fenêtre du document. La vue en direct est utilisée pour voir un aperçu de votre page Web. Avec une vue en direct, vous pouvez cliquer sur le lien et passer à une page particulière. La barre d'outils de navigation affiche l'emplacement de la nouvelle page et vous permet de naviguer facilement entre les pages. Vous pouvez masquer cette barre d'outils lorsqu'elle n'est pas utilisée en décochant l'option de navigation du navigateur dans la section Affichage > Barres d'outils.

7. Gérez vos fichiers :

Tous les fichiers sont présents dans le panneau Fichiers lorsque vous configurez un site avec Dreamweaver. Vous pouvez utiliser ce panneau de fichiers pour de nombreuses fonctions telles que renommer, déplacer et mettre en surbrillance le nom du fichier. C'est probablement courant et vous savez peut-être tout cela, mais les pages Web sont différentes des fichiers ordinaires. Les pages Web contiennent des images, des liens vers d'autres pages Web et des styles CSS provenant d'un fichier de feuille de style externe. Renommer une image, une page Web ou un fichier CSS normalement via l'explorateur Windows peut entraîner des liens rompus. Alors que Dreamweaver vous permet de mettre à jour automatiquement les liens si vous déplacez ou renommez un fichier à l'aide du panneau des fichiers. De cette façon, il n'y a pas de liens brisés.

8. Optez pour le sélecteur de balise :

Lors de l'application du style de classe CSS, ajouter ou supprimer la balise avec précision peut être difficile. Pour sélectionner des lignes précises, le sélecteur de balises de Dreamweaver est le meilleur. Le sélecteur de balises est placé en bas à gauche de la fenêtre du document. Ce sélecteur affiche toutes les balises HTML et autres présentes autour du texte. Vous pouvez sélectionner des balises spécifiques en cliquant sur une balise disponible dans la barre de sélection de balises. La balise en surbrillance indique que la balise est sélectionnée.

9. Utilisez des extraits :

Dreamweaver fournit des extraits qui sont des éléments de code de base qui peuvent faire gagner beaucoup de temps. Les extraits sont synchronisés via Creative Cloud, ce qui garantit qu'ils sont disponibles sur tous les systèmes. Vous pouvez attribuer les plus utilisés comme raccourci clavier. Si vous souhaitez modifier les raccourcis, ouvrez la conception des raccourcis clavier et dupliquez l'ensemble standard. Ensuite, sélectionnez la catégorie d'extrait de code sous la section des commandes pour sélectionner vos favoris. Vous trouverez alors une liste de tous les extraits disponibles, y compris ceux que vous créez. La partie la plus difficile est de déterminer quelles combinaisons de clavier sont inutilisées. Mais cela peut être résolu en utilisant un modificateur.

10. Connectez WordPress et Dreamweaver :

Dreamweaver et WordPress forment une excellente équipe. Vous pouvez concevoir et modifier des pages WordPress avec l'ensemble d'outils de fichiers dynamiques de Dreamweaver. Cet ensemble d'outils comprend des filtres personnalisés, des fichiers liés dynamiquement et des indications de code spécifiques au site. La partie difficile est de comprendre comment travailler avec d'autres pages du site avec Dreamweaver. Vous devez d'abord commencer par le fichier index.php présent à la racine du site WordPress et naviguer à partir de là. Vous pouvez ajouter un chemin directement à l'adresse Web ou utiliser la fonction Dreamweaver pour cliquer sur un lien. Une fois la page affichée, le CSS et les autres outils de Dreamweaver sont sous votre contrôle.

Adobe Dreamweaver est idéal pour créer un site Web. En plus des fonctionnalités de base telles que l'achèvement du code, la réduction du code et la mise en évidence de la syntaxe, il s'accompagne de fonctionnalités avancées telles que les introspections de code et la vérification de la syntaxe en temps réel. Ces conseils mentionnés vous aideront à créer votre site Web plus efficacement. Si vous recherchez des outils pour créer un site Web sans beaucoup de codage, consultez ces outils de création de site Web.