Exemplarische Vorgehensweise: Erweiterte HTML-Bearbeitung in Visual Studio für Web Forms-Seiten

Artikel
11/15/2012

Microsoft Visual Studio bietet umfassende HTML-Bearbeitungsmöglichkeiten für das Erstellen von Webseiten. In dieser exemplarischen Vorgehensweise werden einige der Visual Studio-Funktionen für die erweiterte HTML-Bearbeitung vorgestellt. Eine Einführung in die HTML-Bearbeitung finden Sie unter Exemplarische Vorgehensweise: Grundlegende HTML-Bearbeitung in Visual Studio für Web Forms-Seiten.

Hinweis

Die Beispiele in diesem Thema sind für ASP.NET-Web Forms-Seiten spezifisch.Sie können jedoch die HTML-Formatierungsoptionen für das Markup in Web Forms-Seiten, ASP.NET MVC (Model View Controller)-Ansichten, ASP.NET Web Pages-Seiten und HTML-Seiten verwenden.

In dieser exemplarischen Vorgehensweise werden u. a. die folgenden Aufgaben beschrieben:

Angeben von Optionen dazu, wie der HTML-Editor Markup in der Ansicht Quelle anzeigt.
Auswählen von Optionen, die die Kompatibilität des von Ihnen erstellten HTML-Editors mit einem bestimmten Schema (Markupstandards) wie HTML5 garantieren.
Gliedern der Seite, d. h. Erstellen von reduzierbaren Bereichen im Editor zur übersichtlicheren Gestaltung der Seite

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

Grundlegende Kenntnisse über das Arbeiten in Visual Studio.

Eine Einführung in Visual Studio finden Sie unter Exemplarische Vorgehensweise: Grundlegende HTML-Bearbeitung in Visual Studio für Web Forms-Seiten.

Erstellen der Website und der Webseite

Wenn Sie bereits ein Web Forms-Projekt in Visual Studio erstellt haben (z. B.durch Absolvieren von Exemplarische Vorgehensweise: Grundlegende HTML-Bearbeitung in Visual Studio für Web Forms-Seiten), wechseln Sie zum nächsten Abschnitt. Erstellen Sie andernfalls ein Webprojekt und eine Webseite, indem Sie folgende Schritte ausführen:

So erstellen Sie ein Dateisystem-Websiteprojekt

Öffnen Sie Visual Studio.
Wählen Sie im Menü Datei Neue Website aus.

Das Dialogfeld Neue Website wird angezeigt.

Hinweis

In dieser exemplarischen Vorgehensweise wird ein Websiteprojekt verwendet.Sie könnten stattdessen ein Webanwendungsprojekt verwenden.Informationen zum Unterschied zwischen diesen Webprojekttypen finden Sie unter Vergleich von Webanwendungsprojekten und Websiteprojekten.
Wählen Sie unter Installierte Vorlagen die Programmiersprache aus, mit der Sie arbeiten möchten.
Wählen Sie im Vorlagen-Bereich die Option ASP.NET Web Forms Site aus.
Geben Sie im Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.
Klicken Sie auf OK.
Klicken Sie im Projektmappen-Explorer auf den Namen der Website, und wählen Sie dann Neues Element hinzufügen.
Wählen Sie unter Installiert die Sprache aus, mit der Sie arbeiten möchten.
Wählen Sie im Vorlagen-Bereich Web Form aus.
Wählen Sie Hinzufügen aus.

Formatieren von Markup

Der HTML-Editor bietet eine Vielzahl von Optionen, mit denen Sie das Markup der Seiten Ihren Vorstellungen entsprechend formatieren können. Es sind u. a. Formatierungsoptionen für Folgendes verfügbar:

Schreibung von Tag- und Attributnamen in Groß- oder Kleinbuchstaben Sie können Optionen für HTML-Tags und für ASP.NET-Webserver-Steuerelemente getrennt angeben.
Hinzufügen von Attributen durch Einschließen in Anführungszeichen
Automatisches Schließen von Elementen durch den Editor. Wahlweise können selbstschließende Tags (z. B. <br />) oder Anfangs- und Endtags (<p></p>) erstellt werden, oder es können automatisch schließende Tags eingefügt werden.
Einzug von untergeordneten Elementen eines Tags
Positionieren von Zeilenumbrüchen außerhalb von Tags

Unabhängig davon, welche Formatierungsoptionen Sie festlegen, haben Sie entscheidende Kontrolle über das Layout und das Erscheinungsbild des Markups im Editor. Sie können Elemente manuell formatieren (z. B. durch Einziehen). Die Formatierung bleibt im Editor unverändert, es sei denn, Sie geben explizite Anweisungen zur Umformatierung des Markups.

In diesem Abschnitt der exemplarischen Vorgehensweise ändern Sie einige Einstellungen, die beeinflussen, wie Markup im Editor angezeigt wird. Außerdem erfahren Sie, wie Formatierungen auf eine ganze Seite oder einen Teil der Seite angewendet werden.

So fügen Sie HTML-Elemente hinzu, die über Standardformatierungsoptionen verfügen

Wechseln Sie in die Entwurfsansicht.
Wählen Sie im Menü Tabelle den Befehl Tabelle einfügen. Ändern Sie keine der Standardeinstellungen im Dialogfeld.
Klicken Sie auf OK.

Der Designer erstellt eine HTML-Tabelle mit zwei Spalten und zwei Zeilen.
Klicken Sie unterhalb der Tabelle auf die Seite.
Drücken Sie mehrmals die EINGABETASTE, um einen leeren Bereich zu erstellen. Ziehen Sie aus der Gruppe HTML der Toolbox ein Image-Steuerelement auf die Seite.
Wechseln Sie zur Quellansicht.

Wie Sie sehen, wurden die Elemente <table>und <img> auf der Seite eingefügt. Das Element <img> wird hervorgehoben.

Standardmäßig erstellt der Designer Elemente, in denen die Tag- und Attributnamen in Kleinbuchstaben geschrieben und Attribute in Anführungszeichen eingeschlossen sind.

Sie können nun die Formatierungsoptionen ändern.

So ändern Sie Formatierungs- und Validierungsoptionen

Wählen Sie im Menü Extras den Befehl Optionen aus.
Wählen Sie Text-Editor, erweitern Sie HTML, und wählen Sie dann Validierung.
Wählen Sie in der Liste Ziel den Eintrag HTML5.

Hinweis

Statt ein Standardschema zur Überprüfung neuer Seiten manuell auszuwählen, können Sie Doctype für Validierungsschemaerkennung verwenden aktivieren.Diese Option würde Visual Studio anweisen, anhand der DOCTYPE-Deklaration der Seite das Schema für die Validierung zu bestimmen.In dieser exemplarischen Vorgehensweise lassen Sie dieses Kontrollkästchen deaktiviert, damit Sie sehen können, wie die Auswahl des Zielschemas den Editor beeinflusst.
Wählen Sie Formatierung aus.

Die Dropdownfelder Clienttag und Clientattribute werden aktiviert, weil Sie im vorherigen Schritt HTML5 ausgewählt haben. Falls Sie die Einstellung von Ziel auf XHTML5 nicht geändert haben, werden diese beiden Dropdownfelder auf Kleinbuchstaben gesetzt und deaktiviert angezeigt, da für XHTML5 Kleinbuchstaben erforderlich sind.

Hinweis

Einige Optionen können Sie für bestimmte Servertags (ASP.NET-Serversteuerelemente) und für Clienttags (HTML-Elemente) getrennt festlegen, indem Sie Tagspezifische Optionen auswählen.Sie verwenden diese Funktion später in dieser exemplarischen Vorgehensweise.
Setzen Sie die Option Clienttag auf Großbuchstaben.
Deaktivieren Sie die Kontrollkästchen Anführungszeichen für Attributwerte bei der Eingabe einfügen und Anführungszeichen für Attributwerte bei der Formatierung einfügen.
Wählen Sie OK, um wieder in den Editor zu wechseln.

Beachten Sie, dass sich das auf der Seite vorhandene Markup nicht ändert, obwohl Sie die Formatierungsoptionen geändert haben.

Sie können nun neue Elemente hinzufügen.

So fügen Sie unter Verwendung der neuen Formatierungsoptionen HTML-Elemente hinzu

Führen Sie in der Quellansicht einen Bildlauf zum Ende der Seite durch.
Ziehen Sie aus der Gruppe HTML der Toolbox ein Table-Steuerelement auf die Seite, und positionieren Sie es oberhalb des </form>-Tags.

Dieses Mal sind die Tags im <TABLE>-Element in Großbuchstaben geschrieben.
Positionieren Sie die Einfügemarke unterhalb der soeben erstellten Tabelle, und geben Sie dann eine öffnende spitze Klammer (<) ein, um ein neues Tag zu beginnen.

Eine Liste wird angezeigt, in der alle Tagnamen in Großbuchstaben dargestellt sind, weil das jetzt der Standardwert ist.
Geben Sie img in Kleinbuchstaben ein.

IMG wird in der Liste in Großbuchstaben entsprechend der neuen standardmäßigen Groß-/Kleinschreibung für Tags angezeigt.
Drücken Sie die LEERTASTE.

<IMG wird auf der Seite in Großbuchstaben eingegeben, und eine Liste von Attributen für das Tag wird angezeigt. Die Attribute sind in Kleinbuchstaben geschrieben, da Sie in den Formatierungsoptionen für Clientattribute als Standardeinstellung Kleinbuchstaben festgelegt haben.
Geben Sie src= ein.

In der Regel stellt der Editor doppelte Anführungszeichen nach dem Gleichheitszeichen bereit. Da Sie die Option Anführungszeichen für Attributwerte bei der Eingabe einfügen deaktiviert haben, stellt der Editor sie nicht bereit.

Hinweis

Wenn Sie in das Eigenschaftenfenster einen Attributwert einfügen, der ein Leerzeichen enthält, fügt der Editor unabhängig von den Optionseinstellungen Anführungszeichen ein.
Geben Sie Graphic.gif (ein erfundener Name) ein.

Das Tag sieht nun folgendermaßen aus:
```
<IMG src=Graphic.gif 
```
Geben Sie einen Schrägstrich (/) und eine schließende spitze Klammer (>) ein, um das <img>-Tag zu schließen. Sie können auch ein Leerzeichen und eine schließende spitze Klammer eingeben, und der Editor ergänzt den Schrägstrich automatisch.

Wenn Sie die Formatierungsoptionen ändern, ist vorhandenes Markup auf einer Seite davon nicht betroffen. Sie können jedoch Formatierungseinstellungen manuell zu einer Seite oder einem Teil einer Seite hinzufügen.

So übernehmen Sie Formatierungen für vorhandene Elemente

Wählen Sie in der Ansicht Quelle die erste Tabelle aus, die Sie erstellt haben (die mit dem Markup in Kleinbuchstaben).
Wählen Sie im Menü Bearbeiten den Befehl Auswahl formatieren.

Die Tagnamen werden in Großbuchstaben dargestellt.

Hinweis

Anführungszeichen werden vom Editor nicht entfernt, selbst wenn Sie die Optionseinstellung entsprechend geändert haben.Ebenso wird im Editor auch der Abschluss vorhandener Tags selbst dann nicht geändert, wenn Sie die Option zum Festlegen des Tagabschlusses ändern.

Wenn Sie mithilfe von Bearbeitungstools, z. B. Toolbox oder Eigenschaften, Elemente bearbeiten, generiert der Editor das Markup mithilfe der aktuell gültigen Formatierungsoptionen. Der Editor ändert jedoch kein vorhandenes Markup. Um bestehendem Markup neue Formatierungsoptionen hinzuzufügen, verwenden Sie die Befehle Dokument formatieren und Auswahl formatieren im Menü Bearbeiten.

Festlegen von Tagformatierungsoptionen

Die bereits von Ihnen verwendeten Formatierungsoptionen gelten für alle Elemente auf der Seite. Sie können Formatierungsoptionen auch für einzelne Tags angeben. Dieses Vorgehen ist hilfreich, wenn Sie bestimmte Tags oft verwenden und für diese Tags keine Standardformatierung verwenden möchten. Beim Formatieren einzelner Tags können Sie folgende Optionen festlegen:

Art des Tagabschlusses, d. h. nicht geschlossen, selbstschließend oder mit separatem Endtag
Verwendung von Zeilenumbrüchen außerhalb und innerhalb von Tags
Einzug von untergeordneten Elementen eines Tags

Hinweis

Der HTML-Editor ignoriert alle Tags für die Anzeigeeinstellung, die die Art und Weise ändern würden, wie Taginhalt im Browser gerendert wird.

In diesem Teil der exemplarischen Vorgehensweise legen Sie einige Formatierungsoptionen für Tags fest. Bis jetzt haben Sie HTML-Elemente verwendet, z. B. das <table>-Element. Im Folgenden verwenden Sie einige ASP.NET-Webserversteuerelemente, wodurch veranschaulicht wird, dass Formatierungsoptionen für Steuerelemente und HTML-Elemente gleichermaßen gelten.

Legen Sie zu Anfang einige Optionen fest, die für alle Tags eines bestimmten Typs gelten. Sie können Optionen für die folgenden Typen von Elementen festlegen:

HTML-Elemente, die keinen Inhalt aufweisen, z. B. br und input
HTML-Elemente, die Inhalt aufweisen können, z. B. table und span
Serverelemente (asp:), die keinen Inhalt aufweisen können, z. B. asp:image
Serverelemente, die Inhalt aufweisen können, z. B. asp:textbox

Sicherheitshinweis
Ein TextBox-Steuerelement akzeptiert Benutzereingaben; dies stellt ein potenzielles Sicherheitsrisiko dar.Standardmäßig stellen ASP.NET-Webseiten sicher, dass Benutzereingaben keine Skript- oder HTML-Elemente enthalten.Weitere Informationen finden Sie unter Übersicht über Skriptangriffe.

Im ersten Teil dieses Abschnitts fügen Sie eine HTML-Tabelle hinzu. Sie ändern dann die Tagformatierungsregeln für Tabellenelemente und formatieren das Dokument neu, um zu sehen, wie sich Änderungen der Formatierungsregeln auswirken.

So legen Sie Tagformatierungsregeln für eine HTML-Tabelle fest

Klicken Sie in der Quellansicht mit der rechten Maustaste in einen leeren Bereich des Fensters, und wählen Sie dann Formatierung und Validierung.

Hinweis

Der Befehl Formatierung und Validierung ist nur in der Quellansicht verfügbar.

Das Dialogfeld Optionen wird mit den Optionen für die Formatierungen angezeigt, die Sie im vorangehenden Abschnitt festgelegt haben.
Wählen Sie in der Liste Clienttag die Option Kleinbuchstaben, um die Formatierung für Clienttags zurückzusetzen.
Wählen Sie OK, um das Dialogfeld Optionen zu schließen.
Ziehen Sie aus der Gruppe HTML der Toolbox ein Table-Steuerelement auf die Seite in der Quellansicht.

Der Editor erstellt ein <table>-Element, das drei Zeilen (<tr>-Elemente) und in jeder Zeile drei Zellen (<td>-Elemente) enthält. Jedes Tag befindet sich in einer separaten Zeile:
```
<table>
    <tr>
        <td>
            &nbsp;
       </td>
    </tr>
```
Klicken Sie mit der rechten Maustaste in einen leeren Bereich des Fensters, und wählen Sie dann Formatierung und Validierung.
Wählen Sie Tagspezifische Optionen.
Erweitern Sie Standardeinstellungen.

Es wird eine Liste von Tagtypen angezeigt, die mit Clienttag unterstützt keinen Inhalt beginnt. Unter Standardeinstellungen können Sie für Client- und Serverelemente, für Elemente mit Inhalt (z. B. ein table-Element) und für Elemente ohne Inhalt (z. B. ein img-Element) verschiedene Optionen festlegen.
Wählen Sie Clienttag unterstützt Inhalt aus.

Beachten Sie, dass Tags in der Standardeinstellung ein separates Endtag verwenden und dass die Tags Zeilenumbrüche vor, innerhalb und nach dem Tag aufweisen.
Erweitern Sie Client-HTML-Tags.
Wählen Sie td aus.

Legen Sie Optionen zum Ändern der Formatierung von td-Tags fest.
Wählen Sie in der Liste Zeilenumbrüche den Eintrag Keine aus.
Wählen Sie OK, um das Dialogfeld Tagspezifische Optionen zu schließen, und wählen Sie dann OK, um das Dialogfeld Optionen zu schließen.
Wählen Sie im Menü Bearbeiten den Befehl Dokument formatieren.

Das Dokument wird neu formatiert. Die der Tabelle hinzugefügten <td>-Tags werden in einer einzelnen Zeile platziert:

Freigeben über