Dreamweaver est un excellent éditeur WYSIWYG, mais si vous n'êtes pas intéressé par l'écriture de pages Web dans un environnement "ce que vous voyez est ce que vous obtenez", vous pouvez toujours utiliser Dreamweaver, car c'est également un excellent éditeur de texte. Toutefois, de nombreuses fonctionnalités ne tombent pas dans l’éditeur de code de Dreamweaver, car l’accent est mis principalement sur la "vue de conception" ou la partie de l'éditeur WYSIWYG du produit.
Comment accéder à Dreamweaver Code View
Si vous n'avez jamais utilisé Dreamweaver comme éditeur HTML, vous n'avez peut-être même jamais remarqué les trois boutons en haut de la page: "Code", "Diviser" et "Conception". Dreamweaver démarre par défaut en mode "Conception" ou en mode WYSIWYG. Mais il est facile de passer à l'affichage et à l'édition du code HTML. Il suffit de cliquer sur le Code bouton. Ou aller au Vue menu et sélectionnez Code.
Si vous venez tout juste d'apprendre à écrire du code HTML ou si vous souhaitez avoir une idée de l'impact de vos modifications sur votre document, vous pouvez ouvrir simultanément les modes Code et Conception. La beauté de cette méthode est que vous pouvez également éditer dans les deux fenêtres. Vous pouvez donc écrire le code de votre balise image au format HTML, puis utiliser le mode Création pour le déplacer vers un autre emplacement de la page par glisser-déposer.
Pour afficher les deux en même temps, soit:
- Clique sur le Divisé bouton (entre Code et Conception).
- dans le Vue menu, sélectionnez Code et design.
Une fois que vous maîtrisez Dreamweaver pour modifier votre code HTML, vous pouvez modifier vos préférences pour ouvrir Dreamweaver en mode code par défaut. Le moyen le plus simple consiste à enregistrer la vue de code en tant qu'espace de travail. Dreamweaver s'ouvrira dans le dernier espace de travail que vous utilisiez. Si ce n'est pas le cas, allez simplement dans le menu Fenêtre et choisissez l'espace de travail souhaité.
Options d'affichage du code
Dreamweaver est très flexible car il offre de nombreuses façons de le personnaliser et de le faire fonctionner comme vous le souhaitez. Dans la fenêtre des options, vous pouvez ajuster les options de coloration du code, de formatage du code, de conseils de code et de réécriture du code. Mais vous pouvez également modifier certaines options spéciales dans la vue de code elle-même.
Une fois que vous êtes en mode code, il y a une Options d'affichage bouton dans la barre d'outils. Vous pouvez également afficher les options en allant dans le Vue menu et choix Options d'affichage du code. Les options sont:
- Word Wrap - enveloppe le code HTML afin que vous puissiez l'afficher sans défilement horizontal. Notez que cette option n'insère pas de retour à la ligne dans votre code, elle affiche simplement le code pour qu'il soit plus facile à lire.
- Numéros de ligne - affiche les numéros de ligne sur le côté du code. Il affiche un symbole de retour à la ligne pour les lignes qui sont plus longues que la fenêtre d'affichage.
- Personnages cachés - affiche des caractères spéciaux au lieu des espaces qui seraient affichés sur une page Web. Par exemple, un point remplace un espace, un double chevron remplace chaque onglet et un pilon ou un marqueur de paragraphe remplace chaque saut de ligne.
- Mettez en surbrillance le code invalide - met en surbrillance le code HTML incorrect en jaune. Si vous sélectionnez la balise jaune, l'inspecteur des propriétés vous indiquera comment y remédier.
- Coloration de la syntaxe - active ou désactive le code couleur de votre code. Vous modifiez les couleurs de votre code couleur dans la section de coloration du code des préférences.
- Retrait automatique - rend votre code indenté automatiquement après un retour à la ligne si le code ci-dessus est indenté. Vous pouvez modifier la taille du retrait en modifiant la taille de la tabulation dans la section de formatage du code des préférences.
Modification du code HTML en mode Code Dreamweaver
Il est facile de modifier le code HTML dans la vue de code de Dreamweaver. Commencez simplement à taper votre code HTML. Mais Dreamweaver vous fournit des extras qui vont bien au-delà d’un éditeur HTML de base. Lorsque vous commencez à écrire une balise HTML, vous tapez <. Si vous vous arrêtez juste après ce caractère, Dreamweaver vous montrera une liste de balises HTML. Celles-ci sont appelées indications de code. Pour affiner la sélection, commencez à taper des lettres - Dreamweaver affinera la liste déroulante au tag qui correspond à ce que vous tapez.
Si vous débutez en HTML, vous pouvez faire défiler la liste des balises HTML et en choisir plusieurs pour voir ce qu'elles font. Dreamweaver continuera à vous demander les attributs une fois que vous avez saisi une balise. Par exemple, si vous tapez <>, Dreamweaver s’abaissera jusqu'au Balise HTML, avec les autres balises commençant par I qui suit. Si vous continuez en tapant la lettre mDreamweaver va le réduire au étiquette.
Mais les indices de code ne se limitent pas aux balises. Vous pouvez utiliser des indicateurs de code pour insérer:
- Attributs HTML
- Noms de classe et d'identifiant
- Propriétés CSS
Si les indicateurs de code n'apparaissent pas, vous pouvez appuyer sur Ctrl-barre d'espace (Windows) ou Cmd-spacebar (Macintosh) pour les afficher. La raison la plus courante pour laquelle une indication de code peut ne pas apparaître est si vous avez basculé vers une autre fenêtre avant de terminer votre tag. Parce que Dreamweaver est en train de taper le caractère <Si vous quittez la fenêtre et revenez, vous devrez relancer les indicateurs de code.
Vous pouvez désactiver le menu des indicateurs de code en appuyant sur la touche Échap.
Une fois que vous avez saisi votre balise HTML d'ouverture, vous devez la fermer. Dreamweaver le fait de manière naturelle. Si vous tapez le Fermer les balises option qui correspond le mieux à vos besoins.
Si vous n'êtes pas tout à fait prêt à modifier vos pages en HTML mais que vous souhaitez regarder le code tel qu'il est écrit, vous devriez essayer l'inspecteur de code. Cela ouvre le code HTML dans une fenêtre séparée. Cela fonctionne comme la vue de code et constitue en fait une fenêtre de vue de code détachable pour le document actuel.Pour ouvrir l’inspecteur de code, allez à la La fenêtre menu et choisir Inspecteur de code ou frapper le F10 touche sur votre clavier.
Dreamweaver formate le code HTML comme vous le souhaitez. Par exemple, si vous utilisez 3 espaces pour mettre en retrait, sans jamais mettre en retrait les balises IMG, vous pouvez spécifier ces informations de formatage dans les options de réécriture du code. Ensuite tu vas au Les commandes menu et choisir Appliquer le formatage source. C'est un excellent moyen d'obtenir du code écrit par quelqu'un d'autre dans un format familier.
Une fonctionnalité que beaucoup de codeurs HTML ne connaissent pas ou n'utilisent pas est la possibilité de réduire le code HTML. Cela ne supprime pas les balises du document, mais les supprime simplement de la vue afin qu'elles ne gênent pas votre travail. Pour réduire votre code:
- Sélectionnez la section de code que vous souhaitez masquer.
- dans le modifier menu, choisissez Réduire la sélection du Effondrement du code sous-menu
Une méthode plus simple consiste à sélectionner le code, puis à cliquer sur les icônes de réduction de code qui apparaissent dans la gouttière. Vous pouvez également cliquer avec le bouton droit sur le code sélectionné et choisir Réduire la sélection.
Si tu veux tout cacher sauf ce qui est en surbrillance, choisissez Réduire en dehors de la sélection dans l'une des méthodes ci-dessus.
Pour développer le code réduit, double-cliquez simplement dessus. Cela ouvre le code et le sélectionne. Ensuite, vous pouvez déplacer cette sélection ou la supprimer ou ajouter des balises supplémentaires autour d'elle.
Vous pouvez utiliser la fonctionnalité de réduction et de développement à tout moment sur les pages pour lesquelles vous ne souhaitez pas modifier le modèle externe. Vous sélectionnez simplement la zone de contenu que vous souhaitez modifier et réduire en dehors. Ensuite, écrivez votre code HTML. Vous pouvez toujours voir la page en Conception afficher ou en afficher un aperçu dans un navigateur. Le code réduit n'est pas supprimé du document, mais simplement masqué. Vous pouvez également l'utiliser lorsque vous travaillez sur une série d'éléments. Lorsque vous en avez terminé un, réduisez-le. Vous savez que vous avez terminé quand aucun code n'est affiché.
