Mode Design
Mise à jour : novembre 2007
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.
Lorsque vous ajoutez des éléments à la page, Visual Web Developer crée le balisage correspondant, que vous pouvez également modifier en mode Source. Pour plus d'informations, consultez Mode Source.
Pour basculer en mode Design, cliquez sur l'onglet Design au bas de la fenêtre Concepteur HTML.
.gif "Remarque") Remarque : |
|---|
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).
Vous pouvez demander à l'éditeur de faire apparaître des zones d'affichage, des symboles et des icônes pour marquer des contrôles serveur. Pour plus d'informations, consultez Affichage, Concepteur HTML, boîte de dialogue Options.
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 d'éléments non visibles
Pour vous aider à modifier les pages, le mode Design affiche certains éléments, tels que les champs masqués, qui ne seraient normalement pas visibles dans le navigateur. Le mode Design affiche également des zones grises ou d'autres représentations de contrôles serveur ASP.NET, comme des contrôles de source de données, qui ne rendent pas de balisage au moment de l'exécution.
En outre, vous pouvez choisir d'afficher des bordures et des symboles qui peuvent vous aider à travailler sur les éléments et les balises de la page. Pour plus d'informations, consultez Comment : afficher des informations masquées en mode Design.
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 les é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 Positionnement d'éléments en mode Design.
Navigation en mode Design
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 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 s'affichent pas. Pour plus d'informations, consultez Comment : utiliser l'éditeur HTML dans Visual Web Developer.
Propriétés, fenêtre 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 depuis un autre document ouvert dans Visual Web Developer.
Faites-les glisser depuis l'Explorateur de solutions. 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 des valeurs d'expression. 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
Tâches
Procédure pas à pas : création d'une page Web de base dans Visual Web Developer
Comment : utiliser l'éditeur HTML dans Visual Web Developer
Concepts
Opérations de collage dans le Concepteur HTML de Visual Web Developer
Navigation de balises dans l'éditeur HTML de Visual Web Developer
Positionnement d'éléments en mode Design