Share via

Mode Source

  • Article

Mise à jour : novembre 2007

Le mode Source affiche le balisage HTML de votre page Web, que vous pouvez modifier. Par défaut, tous les scripts et éléments HTML sont affichés lorsque vous sélectionnez le mode Source pour la première fois. Vous pouvez faire glisser des éléments depuis la Boîte à outils de la même façon que lorsque vous modifiez une page Web en mode Design, puis voir leur balisage inséré dans le document.

Pour sélectionner le mode Source, cliquez sur l'onglet Source au bas de la fenêtre Concepteur HTML.

Le mode Source présente les avantages suivants sur le mode Design :

  • Vous pouvez régler avec précision le balisage de vos éléments et de vos contrôles.

  • Vous pouvez mettre le document en forme à votre convenance.

  • Vous pouvez modifier des éléments qui ne se trouvent pas dans le corps. Le mode Design n'affiche que les éléments situés entre les éléments body. Par exemple, vous pouvez modifier directement l'élément head lorsque vous travaillez en mode Source.

  • Vous pouvez modifier des directives de page.

  • Vous pouvez créer et modifier le script client.

  • Vous pouvez modifier le code serveur de la page lorsque vous utilisez une page à fichier unique (par opposition à une page avec un fichier code-behind).

Lorsque vous basculez en mode Design, toutes les modifications que vous avez apportées en mode Source sont immédiatement répercutées.

Remarque :

Certaines erreurs de balisage peuvent vous empêcher de basculer en mode Design, car elles poseraient des problèmes à l'éditeur, pouvant même entraîner des pertes de données. Par exemple, si une balise n'est pas correctement fermée, l'éditeur affiche une erreur et interrompt le changement d'affichage. Les détails concernant l'erreur s'affichent dans la Liste d'erreurs, fenêtre. Vous pouvez prévisualiser votre page en l'exécutant, même si vous ne pouvez pas basculer en mode Design.

Pour vous aider à vous déplacer dans les éléments et les sélectionner, le mode Source offre les options suivantes :

  • Navigateur des balises   Le navigateur des balises affiche l'élément actuel, avec la hiérarchie d'éléments parents auxquels il appartient. Vous pouvez utiliser le navigateur des balises pour voir sur quel élément est placé le focus et pour vous déplacer de l'élément actuel jusqu'à un élément situé plus haut dans la hiérarchie. Pour plus d'informations, consultez Navigation de balises dans l'éditeur HTML de Visual Web Developer.

  • Structure du document°°°La fenêtre Structure du document vous permet de rechercher et de sélectionner tous les éléments contenus dans un document, y compris ceux qui ne sont pas affichés. Pour plus d'informations, consultez Comment : utiliser l'éditeur HTML dans Visual Web Developer.

Validation

En mode Source, l'éditeur vérifie automatiquement la syntaxe du document et marque les balises, les attributs ou les valeurs qui ne sont pas valides. Vous pouvez sélectionner un schéma de validation à utiliser, soit par navigateur (par exemple, Microsoft Internet Explorer), soit par norme (par exemple, XHTML 1.1 Strict). Pour plus d'informations, consultez Validation du balisage dans Visual Web Developer.

IntelliSense

IntelliSense est la fonctionnalité de Visual Studio qui affiche une liste déroulante de mots clés susceptibles de compléter ce que vous tapez. Par exemple, si vous entrez le début d'un nom de classe, IntelliSense affiche une liste déroulante qui contient tous les noms de classes commençant par les caractères que vous avez entrés jusque-là.

En mode Source, l'éditeur affiche IntelliSense pour la quasi totalité des éléments, notamment les contrôles serveur Web ASP.NET, le balisage, les directives de page et le script client. L'IntelliSense offert par l'éditeur est contrôlé par le schéma de validation en cours, afin que l'éditeur ne vous propose pas IntelliSense pour les balises, les attributs ou les valeurs qui ne seraient pas valides pour le schéma actuel.

Remarque :

Vous pouvez désactiver la saisie semi-automatique des instructions. Pour plus d'informations, consultez Général, HTML, Éditeur de texte, boîte de dialogue Options.

Mise en forme

L'éditeur offre les options suivantes pour mettre le document et les balises en forme :

  • Faire glisser ou coller des éléments   Lorsque vous faites glisser des éléments de la Boîte à outils ou que vous les collez depuis le Presse-papiers, l'éditeur peut soit créer les éléments avec leur mise en forme précédente exacte, soit les remettre en forme, en fonction des options que vous spécifiez. Pour plus d'informations, consultez Divers, HTML, Éditeur de texte, boîte de dialogue Options.

  • Ajouter des guillemets ou des balises de fermeture   Vous pouvez définir des options qui forcent l'éditeur à insérer automatiquement des guillemets autour des valeurs d'attribut et à créer automatiquement une balise de fin lorsque vous terminez une balise de début. Pour plus d'informations, consultez Format, HTML, Éditeur de texte, boîte de dialogue Options.

  • Mise en forme par balise   Vous pouvez spécifier des règles indiquant à l'éditeur la mise en forme à donner aux balises lorsque vous créez des éléments. Ces options indiquent entre autres comment mettre des balises et des attributs en majuscules et à quel endroit placer des sauts de ligne. Pour plus d'informations, consultez Options spécifiques pour les balises.

  • Mise en forme d'éléments ou de documents   Vous pouvez appliquer les règles de mise en forme actuelles à un passage sélectionné ou au document dans son ensemble.

  • Documents en mode Plan   Vous pouvez réduire et développer des éléments pour agrandir l'espace de travail dans l'éditeur. Par exemple, vous pouvez réduire un élément table afin de masquer toutes ses lignes et cellules, puis le développer lorsque vous souhaitez le modifier. Vous pouvez réduire et développer des éléments manuellement et spécifier des règles indiquant la taille à partir de laquelle l'éditeur ajoute automatiquement le mode Plan à un élément. Pour plus d'informations, consultez Comment : réduire et développer des éléments HTML dans Visual Web Developer.

Écriture de script client et de code serveur

En mode Source, vous pouvez créer un script client qui s'exécute dans le navigateur. Si vous utilisez une page Web ASP.NET à fichier unique, vous pouvez également modifier le code serveur de la page en mode Source. Pour plus d'informations sur le script client dans les pages ASP.NET, consultez Script client dans les pages Web ASP.NET. Pour plus d'informations sur les pages ASP.NET à fichier unique, consultez Modèle de code des pages Web ASP.NET.

Script client

Vous pouvez écrire le script client comme dans n'importe quel éditeur, en l'incluant comme partie intégrante d'un élément ou dans son propre bloc de <script>. À l'intérieur d'un bloc de script, l'éditeur offre la fonction IntelliSense, indexée sur le modèle objet du document actuel et sur le langage de script client que vous spécifiez pour le bloc de script. Si vous ne spécifiez pas de langage, l'éditeur suppose qu'il s'agit d'ECMAScript.

Remarque :

L'éditeur ne valide pas le script client.

L'éditeur affiche deux listes déroulantes en haut de la fenêtre. Pour le script client, la liste déroulante de gauche affiche les objets du document pour lesquels vous pouvez écrire des gestionnaires d'événements ; la liste déroulante de droite affiche les événements de l'objet sélectionné. Vous pouvez créer un nouveau gestionnaire en sélectionnant tout d'abord l'objet, puis l'événement. Les événements qui ont déjà des gestionnaires sont affichés en gras.

Pour naviguer plus facilement dans le script client, la liste déroulante de gauche affiche également l'option Script client. Lorsque vous sélectionnez Script client, la liste déroulante de droite affiche les gestionnaires d'événements du script client. Vous pouvez sélectionner un gestionnaire et vous y rendre directement.

Code serveur

Si vous travaillez dans une page Web ASP.NET qui utilise le modèle de code à fichier unique, le mode Source affiche le code serveur de la page dans un bloc de script qui inclut l'attribut .

Remarque :

Le code serveur ne requiert pas d'attribut de langage ; le langage du code serveur de la page est établi dans la directive @ Page.

S'agissant du code serveur, la liste déroulante en haut à gauche de la page affiche les contrôles serveur pour lesquels vous pouvez écrire du code. La liste déroulante de droite affiche les événements du contrôle actuellement sélectionné. Vous pouvez créer un nouveau gestionnaire d'événements en sélectionnant tout d'abord l'objet, puis l'événement. Les événements qui ont déjà des gestionnaires sont affichés en gras.

Voir aussi

Concepts

Mode Design