Freigeben über


Entwurfsansicht

Die Entwurfsansicht zeigt ASP.NET-Webseiten, Masterseiten, Inhaltsseiten, HTML-Seiten und Benutzersteuerelemente in einer fast-WYSIWYG-Ansicht (what you see is what you get). In der Entwurfsansicht können Sie Text und Elemente hinzufügen, deren Anordnung und Größe sowie andere Eigenschaften Sie mit speziellen Menüs oder dem Eigenschaftenfenster bearbeiten können. Die geteilte Ansicht ermöglicht es Ihnen, ein Dokument in der Entwurfsansicht und in der Quellansicht anzuzeigen und zu bearbeiten. Standardmäßig werden die zwei Fenster horizontal angeordnet.

Wenn Sie der Seite Elemente hinzufügen, erstellt Visual Web Developer das entsprechende Markup, das Sie in der Quellansicht auch bearbeiten können. Ausführliche Informationen finden Sie unter Source View.

Zum Öffnen der Entwurfsansicht klicken Sie unten im Fenster HTML-Designer auf die Registerkarte Entwurf.

Hinweis

In der Entwurfsansicht wird nur der Text eines Dokuments angezeigt, d. h. der Teil, der sich zwischen dem <body>-Tag und dem </body>-Tag befindet.Zwar können Sie einige Eigenschaften des head-Elements, z. B. den Titel des Dokuments, mit dem Fenster Dokumenteigenschaften bearbeiten. Sie müssen aber in die Quellansicht wechseln, um Eigenschaften von Elementen zu bearbeiten, die sich nicht innerhalb des body-Elements befinden.

Unterschiede zwischen der Entwurfsansicht und der Anzeige in einem Webbrowser

Die Entwurfsansicht ermöglicht eine WYSIWYG-nahe Bearbeitungsansicht der Seite, wie sie in einem Browser angezeigt wird. Allerdings ist die Entwurfsansicht keine exakte Wiedergabe der gerenderten Seite. Sie sollten die Seite immer in einem oder mehreren Browsern testen, um sicher zu sein, dass die Anzeige der Seite Ihrem Entwurf entspricht.

Ein in der Entwurfsansicht angezeigtes Dokument unterscheidet sich in folgender Weise von einem im Webbrowser angezeigten:

  • Die Entwurfsoberfläche ist bearbeitbar.

  • Einige Elemente werden in der Entwurfsansicht zum Bearbeiten angezeigt, jedoch nicht im Browser gerendert, z. B. Datenquellensteuerelemente. Die meisten Steuerelemente, die nur während der Bearbeitung angezeigt werden, werden in der Entwurfsansicht als graue Felder dargestellt.

  • Die Zeichen- und Absatzformatierung kann teilweise anders angezeigt werden als in einem bestimmten Browser (wenn der Webbrowser die Formatierung anders implementiert als die Entwurfsansicht).

  • Links sind nicht aktiviert.

  • Clientskripts werden nicht ausgeführt.

  • Servercode wird nicht ausgeführt.

  • In Elementen, die alternativen Text unterstützen (z. B. Bilder), wird dieser Text nicht in einer QuickInfo angezeigt, wenn der Mauszeiger über das Element bewegt wird.

Anzeigen von Nullzeichen

Wenn in der Entwurfsansicht eine Vorlage mit einem Nullzeichen verwendet wird, werden die Zeichen, die auf das Nullzeichen folgen, gekürzt. Dabei gehen zwar keine Daten verloren, aber es werden in der Entwurfsansicht keine Zeichen in einer Vorlage angezeigt, die auf ein Nullzeichen folgen.

Positionieren von Elementen in der Entwurfsansicht

Physikalisch werden die Elemente in der Seite von oben nach unten ausgelegt. Standardmäßig erfolgt das Rendern der Elemente bei der Übergabe der Seite an den Browser in der gleichen Reihenfolge. Sie können Elemente auch zweidimensional anordnen, indem Sie die Elemente mit horizontalen und vertikalen Koordinaten irgendwo auf der Seite positionieren. Diese Layoutoption nutzt die Positionierungsoptionen, die durch die Formate verfügbar sind. Ausführliche Informationen finden Sie unter Positionieren von Elementen in der Entwurfsansicht.

Damit Sie sich zwischen Elementen besser bewegen und sie auswählen können, stellt die Entwurfsansicht diese Optionen bereit:

  • Tag-Navigator. Der Tag-Navigator zeigt das aktuelle Element gemeinsam mit der Hierarchie der zugehörigen übergeordneten Tags an. Sie können mit dem Tag-Navigator feststellen, welches Element den Fokus besitzt, und vom aktuellen Element zu einem in der Hierarchie übergeordneten wechseln. Ausführliche Informationen finden Sie unter HTML Editor Tag Navigator.

  • Dokumentgliederung. Das Fenster Dokumentgliederung erlaubt das Auffinden und Auswählen aller Elemente in einem Dokument, einschließlich aller nicht angezeigten Elemente. Ausführliche Informationen finden Sie unter How to: Navigate in the HTML Editor in Visual Studio.

  • Eigenschaftenfenster. Wenn Sie ein Element oben im Eigenschaftenfenster aus der Dropdownliste auswählen, markiert der Editor dieses Element im Dokument.

Hinzufügen von Elementen

Sie können einer Seite in der Entwurfsansicht Elemente auf verschiedene Arten hinzufügen:

  • Elemente aus der Toolbox ziehen.

  • Durch Doppelklicken auf das Element in der Toolbox wird es im Dokument an der aktuellen Position der Einfügemarke eingefügt.

  • Ziehen Sie sie aus einem anderen in Visual Web Developer geöffneten Dokument.

  • Elemente aus dem Projektmappen-Explorer ziehen. Dies ist in erster Linie zum Hinzufügen von Benutzersteuerelementen und Stylesheetverweisen zur Seite nützlich.

  • Text direkt in die Seite eingeben.

Smarttags in der Entwurfsansicht

Viele ASP.NET-Serversteuerelemente zeigen in der Entwurfsansicht ein Smarttag an, mit dem schnell auf die am häufigsten verwendeten Konfigurationseinstellungen und -aktionen für das Steuerelement zugegriffen werden kann. Standardmäßig wird das Smarttag angezeigt, wenn Sie der Seite ein Steuerelement zum ersten Mal hinzufügen. Sie können das Smarttag jederzeit mit dem Kontextmenü anzeigen oder auch, indem Sie auf das Symbol des Smarttags klicken.

Ausdrücke in der Entwurfsansicht

In der Entwurfsansicht können Ausdruckswerte nicht überdas Eigenschaftenfenster geändert werden. Wenn Sie einen Ausdruck beispielsweise einem Steuerelement in der Quellansicht zuweisen, kann der Wert dieses Ausdrucks nicht in der Entwurfsansicht geändert werden. Da der Ausdruckswert berechnet wird, sollten Sie die Quellansicht verwenden, um den Ausdruck zu ändern.

Aktualisieren des Designers

Beim Wechsel aus der Quellansicht in die Entwurfsansicht kann es erforderlich sein, den Designer zu aktualisieren, damit bestimmte Dateiänderungstypen angezeigt werden. Der Designcode wird beispielsweise analysiert, aber nicht kompiliert; folglich sind Änderungen am Designcode in der Quellansicht erst nach einer Aktualisierung des Designers sichtbar.

Um den Designer zu aktualisieren, führen Sie einen der folgenden Schritte aus:

  • Klicken Sie mit der rechten Maustaste auf das Entwurfsfenster, und klicken Sie dann auf Aktualisieren.

  • Klicken Sie im Menü Ansicht auf Aktualisieren.

Siehe auch

Aufgaben

Walkthrough: Creating a Basic Web Page in Visual Web Developer

How to: Navigate in the HTML Editor in Visual Studio

Referenz

Source View, HTML Designer

Konzepte

Web Designer Copy and Paste Operations

HTML Editor Tag Navigator

Positionieren von Elementen in der Entwurfsansicht