Design View

  • Article

 

Publication: mars 2016

Le mode Design affiche les pages Web ASP.NET, les pages maîtres, les pages de contenu, les pages HTML et les contrôles utilisateur à l'aide d'un affichage proche du WYSIWYG. Le mode Design vous permet d'ajouter du texte et des éléments, puis de les positionner, de les ajuster et de définir leurs propriétés à l'aide de menus spéciaux ou de la fenêtre Propriétés. Le mode Fractionné vous permet de consulter et modifier un document en mode Design et en mode Source. Par défaut, les deux fenêtres sont réorganisées horizontalement.

Lorsque vous ajoutez des éléments à la page, Visual Web Developer crée un balisage correspondant que vous pouvez également modifier en mode Source. Pour plus d'informations, consultez NIB: Source View.

Pour basculer en mode Design, cliquez sur l'onglet Design au bas de la fenêtre Concepteur HTML.

Notes

Le mode Design n'affiche que le corps d'un document, c'est-à-dire la partie du document comprise entre les balises <body> et </body>.Bien que vous puissiez modifier certaines propriétés de l'élément head, comme le titre du document, dans la fenêtre Propriétés du document, vous devez basculer en mode Source pour modifier les propriétés des éléments situés hors de l'élément body.

Différences entre l'affichage en mode Design et l'affichage dans un navigateur Web

Le mode Design offre une vue proche du WYSIWYG de votre page telle qu'elle apparaîtra dans un navigateur. Toutefois, le mode Design ne donne pas une vision exacte de la façon dont la page sera rendue. Vous devrez toujours la tester dans un navigateur (ou dans plusieurs navigateurs) pour être sûr qu'elle apparaîtra telle que vous l'avez conçue.

Les différences entre l'affichage d'un document en mode Design et l'affichage d'un document dans un navigateur Web sont les suivantes :

  • L'aire de conception est modifiable.

  • Certains éléments s'affichent en mode Design à des fins de modification, mais ne sont pas rendus dans le navigateur. C'est le cas, par exemple, pour les contrôles de source de données. La plupart des contrôles qui n'apparaissent que lorsqu'ils sont modifiés sont rendus sous forme de zones grises en mode Design.

  • La mise en forme de certains caractères ou paragraphes peut parfois apparaître différente de celle obtenue dans un navigateur spécifique (si le navigateur Web n'est pas en mode Design).

  • Les liens hypertexte ne fonctionnent pas.

  • Les scripts clients ne s'exécutent pas.

  • Le code serveur ne s'exécute pas.

  • Les éléments qui prennent en charge du texte de remplacement (comme les images) n'affichent pas ce texte de remplacement dans des info-bulles lorsque le pointeur passe sur ces éléments.

Affichage de caractères Null

En mode Design, lorsqu'un modèle est utilisé et qu'il contient un caractère Null, les caractères qui suivent ce caractère Null sont tronqués. Aucune donnée n'est perdue, mais le mode Design n'affiche pas les caractères qui suivent un caractère Null dans un modèle.

Positionnement d'éléments en mode Design

Les éléments de la page sont physiquement disposés du haut vers le bas. Par défaut, lorsque la page est rendue au navigateur, les éléments sont rendus dans ce même ordre. Vous pouvez également exposer des éléments en deux dimensions, en les positionnant avec des coordonnées horizontales et verticales n'importe où dans la page. Cette option de disposition tire parti des options de positionnement disponibles avec les styles. Pour plus d'informations, consultez Positioning Elements in Design View.

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

  • Navigateur des balises. Le navigateur des balises affiche l'élément actuel, avec la hiérarchie de balises parentes à laquelle 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 NIB: Using the Tag Navigator in 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 s'affichent pas. Pour plus d'informations, consultez NIB: How to: Navigate in the HTML Editor in Visual Web Developer.

  • Fenêtre Propriétés. Lorsque vous sélectionnez un élément dans la liste déroulante en haut de la fenêtre Propriétés, l'éditeur sélectionne cet élément dans le document.

Ajout d'éléments

Vous pouvez ajouter des éléments à une page en mode Design de plusieurs manières :

  • Faites-les glisser depuis la Boîte à outils.

  • Double-cliquez sur l'élément dans la Boîte à outils, ce qui insère l'élément dans le document à l'emplacement actuel du point d'insertion.

  • Faites-les glisser à partir d'un autre document ouvert dans Visual Web Developer.

  • Faites-les glisser depuis l'Explorateur de solution. Cela est surtout utile pour ajouter des contrôles utilisateur et des références de feuille de style à la page.

  • Entrez directement le texte dans la page.

Balises actives en mode Design

En mode Design, de nombreux contrôles serveur ASP.NET affichent une balise active qui offre un accès rapide aux paramètres et aux actions les plus souvent utilisés pour configurer le contrôle. Par défaut, la balise active s'affiche lorsque vous ajoutez pour la première fois un contrôle à la page. Vous pouvez également afficher la balise active à tout moment à l'aide du menu contextuel ou en cliquant sur son symbole.

Expressions en mode Design

En mode Design, vous ne pouvez pas utiliser la fenêtre Propriétés pour modifier les valeurs des expressions. Par exemple, si vous assignez une expression à un contrôle en mode Source, vous ne pouvez pas modifier la valeur de cette expression en mode Design. Dans la mesure où la valeur d'expression est calculée, vous devez utiliser le mode Source pour modifier l'expression.

Actualisation du concepteur

Lorsque vous basculez du mode Source en mode Design, vous pouvez avoir à actualiser le concepteur pour visualiser certains types de modifications apportées à un fichier. Par exemple, le code du thème est analysé, et non compilé ; toutes les modifications qui lui sont apportées en mode Source doivent donc être actualisées avant de pouvoir être visualisées dans le concepteur.

Pour actualiser le concepteur, vous pouvez effectuer l'une des actions suivantes :

  • Cliquez avec le bouton droit sur la fenêtre Design et cliquez sur Actualiser.

  • Dans le menu Affichage, cliquez sur Actualiser.

Voir aussi

Walkthrough: Creating a Basic Web Forms Page in Visual Studio
NIB: Source View
NIB: Paste Operations in the HTML Editor Source and Design Views
NIB: Using the Tag Navigator in Visual Web Developer
Positioning Elements in Design View
NIB: How to: Navigate in the HTML Editor in Visual Web Developer