Freigeben über


Exemplarische Vorgehensweise: Grundlegende HTML-Bearbeitung in Visual Web Developer

Aktualisiert: November 2007

Das Microsoft Visual Web Developer-Webentwicklungstool stellt umfassende HTML-Bearbeitungsmöglichen bereit, mit denen Sie Webseiten im WYSIWYG-Modus visuell darstellen können. Außerdem können Sie direkt mit HTML-Markup arbeiten, um eine genauere Steuerung zu erzielen. Diese exemplarische Vorgehensweise stellt eine Einführung in die Visual Web Developer-Features zur Bearbeitung von HTML bereit.

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

  • Erstellen und Bearbeiten von HTML in der Entwurfsansicht.

  • Erstellen und Bearbeiten von HTML in der Quellansicht.

  • Verwenden der geteilten Ansicht

  • Schnelles Durchlaufen der HTML-Tags mithilfe von Navigationstools.

Vorbereitungsmaßnahmen

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

  • Grundlegende Kenntnisse in Visual Web Developer.

Eine Einführung zum Erstellen von Webseiten in Visual Web Developer finden Sie unter Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer.

In dieser exemplarischen Vorgehensweise verwenden Sie eine Website und eine einzelne ASP.NET-Webseite, die der in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer erstellten Seite ähnelt. Wenn Sie diese exemplarische Vorgehensweise durchgearbeitet haben, können Sie die dort erstellte Website und Webseite verwenden.

Erstellen der Website und der Webseite

Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (z. B. in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese Website verwenden und zum nächsten Abschnitt übergehen. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

  1. Öffnen Sie Visual Web Developer.

  2. Klicken Sie im Menü Datei auf Neue Website.

    Das Dialogfeld Neue Website wird angezeigt.

  3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

  4. 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.

  5. Klicken Sie in der Liste Sprache auf die Programmiersprache, in der Sie arbeiten möchten.

  6. Klicken Sie auf OK.

    Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Arbeiten in der Entwurfsansicht

In diesem Teil der exemplarischen Vorgehensweise wird das Arbeiten in der Entwurfsansicht veranschaulicht, in der die Seite ähnlich wie in einer WYSIWYG-Ansicht angezeigt wird. Sie können Text wie in einem Textverarbeitungsprogramm durch Eingeben hinzufügen. Sie können Text direkt mithilfe von Formatierungsbefehlen oder durch Erstellen von Inlineformaten formatieren.

In der Entwurfsansicht wird die Seite, abgesehen von einigen Unterschieden, wie in einem Browser angezeigt. Ein Unterschied besteht darin, dass Text und Elemente in der Entwurfsansicht bearbeitet werden können. Ein weiterer Unterschied besteht darin, dass in der Entwurfsansicht einige Elemente und Steuerelemente angezeigt werden, die in einem Browser nicht angezeigt werden. So wird die Bearbeitung vereinfacht. Einige Elemente, z. B. HTML-Tabellen, werden außerdem in der Entwurfsansicht auf eine besondere Weise gerendert, in der zusätzlicher Raum für den Editor hinzugefügt ist. Die Entwurfsansicht ist ein hilfreiches Mittel zum visuellen Darstellen der Seite. Es ist jedoch nicht möglich, die Seite in der Entwurfsansicht genau wie in einem Browser zu rendern.

So fügen Sie in der Entwurfsansicht statischen HTML-Code hinzu und formatieren ihn

  1. Wenn Sie sich nicht in der Entwurfsansicht befinden, klicken Sie unten links im Fenster auf Entwurf.

  2. Geben Sie oben auf der Seite ASP.NET Web Page ein.

  3. Wählen Sie den Text aus, und klicken Sie dann auf der Symbolleiste Stilanwendung auf Überschrift 1.

  4. Positionieren Sie die Einfügemarke unterhalb von ASP.NET Web Page, und geben Sie dann This page is powered by ASP.NET. ein.

  5. Markieren Sie den Text, und klicken Sie dann im Menü Format auf Neuer Stil.

    Das Dialogfeld Neuer Stil wird angezeigt.

  6. Aktivieren Sie das Kontrollkästchen Neuen Stil auf Dokumentauswahl anwenden.

  7. Wählen Sie aus der Dropdownliste font-family eine Schriftart aus, und klicken Sie dann auf Übernehmen.

    Die Schriftartfamilie wird auf den markierten Text angewendet.

  8. Klicken Sie unter Kategorie auf Block, und wählen Sie dann aus der Dropdownliste line-height den Eintrag (Wert) aus. Geben Sie einen Wert für die Zeilenhöhe ein.

  9. Wählen Sie in der Dropdownliste letter-spacing den Eintrag (Wert) aus. Geben Sie einen Wert für den Zeichenabstand ein. Klicken Sie auf Übernehmen, um die Werte auf den ausgewählten Text anzuwenden.

  10. Klicken Sie auf OK.

Anzeigen der Taginformationen

Wenn Sie die Entwurfsansicht verwenden, kann es hilfreich sein, die Entwurfsoberflächentags anzuzeigen, z. B. div, span und andere Tags, die nicht visuell gerendert werden.

So zeigen Sie HTML-Entwurfsoberflächentags in der Entwurfsansicht an

  • Zeigen Sie im Menü Ansicht auf Visuelle Hilfen, und klicken Sie dann auf Nicht sichtbare ASP.NET-Steuerelemente.

    Der Designer zeigt Symbole für Absätze, Zeilenumbrüche und andere Tags an, die keinen Text rendern.

Hinzufügen von Steuerelementen und Elementen

Sie können in der Entwurfsansicht Steuerelemente aus der Toolbox auf die Seite ziehen. Sie können einige Elemente mithilfe eines Dialogfelds hinzufügen, z. B. HTML-Tabellen. In diesem Abschnitt fügen Sie einige Steuerelemente und eine Tabelle hinzu, die Sie später in der exemplarischen Vorgehensweise verwenden werden.

So fügen Sie Steuerelemente und eine Tabelle hinzu

  1. Positionieren Sie die Einfügemarke rechts neben der schließenden Absatzmarke nach This page is powered by ASP.NET., und drücken Sie dann die EINGABETASTE.

  2. Ziehen Sie in der Toolbox aus der Gruppe Standard ein TextBox-Steuerelement auf die Seite.

    Hinweis:

    Sie können ein Steuerelement auch hinzufügen, indem Sie darauf doppelklicken.

  3. Ziehen Sie ein Button-Steuerelement auf die Seite.

    Das TextBox-Steuerelement und das Button-Steuerelement sind ASP.NET-Webserver-Steuerelemente und keine HTML-Elemente.

  4. Klicken Sie im Menü Tabelle auf Tabelle einfügen.

    Das Dialogfeld Tabelle einfügen wird angezeigt.

  5. Klicken Sie auf OK.

    Das Dialogfeld Tabelle einfügen stellt Optionen zum Konfigurieren der Tabelle bereit, die Sie erstellen. In dieser exemplarischen Vorgehensweise können Sie ein Standardlayout für Tabellen verwenden.

Die Entwurfsansicht stellt Generatoren und andere Tools bereit, mit denen Sie HTML-Elemente erstellen können, die Eigenschafteneinstellungen erfordern.

  1. Markieren Sie ASP.NET in dem Text This page is powered by ASP.NET..

  2. Klicken Sie im Menü Format auf In Link konvertieren.

    Das Dialogfeld Link wird geöffnet.

  3. Geben Sie im Feld URL die URL https://www.asp.net ein.

  4. Klicken Sie auf OK.

Festlegen von Eigenschaften im Eigenschaftenfenster

Sie können die Darstellung und das Verhalten von Elementen auf der Seite ändern, indem Sie unter Eigenschaften Werte festlegen.

So legen Sie mithilfe des Eigenschaftenfensters Eigenschaften fest

  1. Klicken Sie auf das Button-Steuerelement, das Sie im Abschnitt "Hinzufügen von Steuerelementen und Elementen" weiter oben in dieser exemplarischen Vorgehensweise hinzugefügt haben.

  2. Legen Sie unter Eigenschaften Text auf Click Here, ForeColor auf eine andere Farbe und Bold auf true fest.

  3. Platzieren Sie die Einfügemarke im ASP.NET-Link, den Sie im vorangehenden Abschnitt erstellt haben.

    Beachten Sie, dass die HRef-Eigenschaft des a-Elements in den Eigenschaften auf die URL festgelegt ist, die Sie für den Link bereitgestellt haben.

Testen der Seite

Sie können die Ergebnisse Ihrer Bearbeitung sehen, indem Sie die Seite im Browser anzeigen.

So starten Sie die Seite im Browser extern

  • Klicken Sie mit der rechten Maustaste auf die Seite, und klicken Sie dann auf In Browser anzeigen.

    • Wenn Sie aufgefordert werden, die Änderungen zu speichern, klicken Sie auf Ja.

    Visual Web Developer startet den Visual Web Developer-Webserver. Dabei handelt es sich um einen lokalen Webserver, mit dem Sie Seiten testen können, ohne IIS zu verwenden.

Ändern der Standardansicht

Visual Web Developer öffnet neue Seiten standardmäßig in der Quellansicht.

So ändern Sie die Standardseitenansicht in die Entwurfsansicht

  1. Klicken Sie im Menü Extras auf Optionen.

  2. Klicken Sie im Dialogfeld Optionen auf Allgemein, und klicken Sie dann unter Seiten starten in auf Entwurfsansicht.

Hinweis:

Sie haben verschiedene Möglichkeiten zum Ausführen von Seiten. Wenn Sie STRG+F5 drücken, führt Visual Web Developer die Startaktion aus, die auf der Eigenschaftenseite für Startoptionen konfiguriert wurde. Die Standardstartoption für STRG+F5 ist das Ausführen der aktuellen Seite, d. h. der Seite, die aktuell in der Quell- oder Entwurfsansicht aktiv ist. Sie können Seiten auch im Debugger ausführen. Weitere Informationen hierzu finden Sie unter Exemplarische Vorgehensweise: Debuggen von Webseiten in Visual Web Developer.

Arbeiten in der Quellansicht

In der Quellansicht können Sie das Markup der Seite direkt bearbeiten. Der Quellansicht-Editor verfügt über viele Features, die beim Erstellen von HTML-Steuerelementen und ASP.NET-Steuerelementen hilfreich sind. Mit der Toolbox können in der Quellansicht wie in der Entwurfsansicht auf der Seite Elemente hinzugefügt werden.

So fügen Sie in der Quellansicht Elemente hinzu

  1. Wechseln Sie zur Quellansicht, indem Sie unten links im Fenster auf Quelle klicken.

    Die hinzugefügten Steuerelemente werden als <asp:>-Elemente erstellt. Das Button-Steuerelement entspricht beispielsweise dem <asp:button>-Element. Die vorgenommenen Eigenschafteneinstellungen werden als Attributeinstellungen im <asp:button>-Tag beibehalten.

  2. Ziehen Sie aus der Gruppe HTML der Toolbox (nicht aus der Gruppe Standard) ein Table-Steuerelement auf die Seite, und platzieren Sie es direkt über dem schließenden </form>-Tag.

Der Editor ist auch hilfreich, wenn Sie Markup manuell eingeben. Der Editor stellt beispielsweise bei der Eingabe kontextabhängige Optionen für schließende HTML-Tags und -Attribute bereit. Der Editor stellt außerdem Informationen zu Fehlern und Warnungen im Markup bereit, indem fragwürdiges Markup mit einer Wellenlinie unterstrichen wird. Die Informationen zu Fehlern oder Warnungen werden verfügbar, wenn der Mauszeiger auf dem Markuptext positioniert wird.

So bearbeiten Sie HTML in der Quellansicht

  1. Positionieren Sie die Einfügemarke über dem schließenden </form>-Tag, und geben Sie dann eine öffnende spitze Klammer (<) ein.

    Beachten Sie, dass der Editor Ihnen eine Liste von Tags anbietet, die im aktuellen Kontext geeignet sind.

  2. Markieren Sie a, und drücken Sie dann die LEERTASTE.

    Der Editor zeigt eine Liste von für ein Anchortag geeigneten Attributen an.

  3. Klicken Sie in der Liste auf href, und geben Sie dann ein Gleichheitszeichen und ein doppeltes Anführungszeichen (=") ein.

    Der Editor stellt eine Liste von aktuell verfügbaren Seiten, zu denen ein Link erstellt werden kann, und eine Option zum Öffnen des Dialogfelds Startseitenauswahl bereit.

  4. Doppelklicken Sie in der Dateiliste auf Default.aspx, drücken Sie die LEERTASTE, und geben Sie dann eine schließende spitze Klammer (>) ein, um das Tag zu schließen.

    Der Editor fügt ein schließendes </a>-Tag ein.

  5. Schließen Sie das anchor-Element ab, sodass es mit der Seite Default.aspx mit dem Linktext Home verknüpft ist und wie folgt lautet:

    <a href="Default.aspx">Home</a>
    
  6. Positionieren Sie die Einfügemarke im a-Tag.

    Beachten Sie, dass in den Eigenschaften die Attribute für das Tag angezeigt werden.

  7. Klicken Sie in den Eigenschaften der HRef-Eigenschaft auf die Schaltfläche mit den Auslassungszeichen (...).

    Das Dialogfeld Projektelement auswählen wird angezeigt.

    Sie können nun eine Seite der aktuellen Website als Zielseite auswählen. Wenn auf der Website keine weiteren Seiten vorhanden sind, aus denen Sie auswählen können, schließen Sie das Dialogfeld Projektelement auswählen, und geben Sie die gewünschte URL im Eigenschaftenfenster im Feld Href ein.

  8. Positionieren Sie die Einfügemarke direkt über dem schließenden </form>-Tag, und geben Sie dann <invalid> ein.

    Der Editor unterstreicht das Tag mit einer Wellenlinie. Hierdurch wird angegeben, dass das Tag kein anerkanntes HTML-Tag ist.

  9. Entfernen Sie das Tag, das Sie im vorangehenden Schritt erstellt haben.

Untersuchen der HTML-Formatierung

Ein wichtiges Feature des Seiten-Designers ist das Beibehalten der HTML-Formatierung, die auf die Seite angewendet wird, wenn Sie nicht explizit angeben, dass der Editor das Dokument neu formatieren soll.

So untersuchen Sie die HTML-Formatierung

  1. Formatieren Sie die Attribute des Button-Steuerelements neu, indem Sie die Attribute so ausrichten, dass die deklarative Syntax die folgende Form aufweist:

    <asp:Button
        id="Button1"        Font-Bold="True"    ForeColor="Blue"    Text="Click Here" />
    

    Wenn Sie im Tag die EINGABETASTE drücken, nachdem das erste Attribut eingezogen wurde, werden auch darauf folgende Zeilen entsprechend eingezogen.

  2. Wechseln Sie zur Entwurfsansicht.

  3. Klicken Sie mit der rechten Maustaste auf das neue Button-Steuerelement, und klicken Sie dann auf Kopieren.

  4. Positionieren Sie die Einfügemarke unterhalb des neuen Button-Steuerelements, klicken Sie mit der rechten Maustaste, und klicken Sie dann auf Einfügen.

    Dadurch wird eine Schaltfläche mit einer ID von Button2 erstellt.

  5. Ziehen Sie aus der Gruppe Standard der Toolbox ein drittes Button-Steuerelement auf die Seite. Dadurch wird <Button3> erstellt.

  6. Wechseln Sie zur Quellansicht.

    Beachten Sie, dass <Button2> genauso formatiert wird, wie Sie <Button1> formatiert haben. <Button3> wird jedoch mit der Standardformatierung für asp:button-Elemente formatiert.

    Hinweis:

    Weitere Informationen zum Anpassen der Formatierung einzelner Elemente finden Sie unter Exemplarische Vorgehensweise: Erweiterte HTML-Bearbeitung in Visual Web Developer.

  7. Bearbeiten Sie das Dokument so, dass sich <Button1> und <Button2> in der gleichen Zeile ohne ein Leerzeichen dazwischen befinden:

    <asp:Button ID="Button1"  Font-Bold="True" 
    ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
     Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
    

    Die Elemente können in aufeinander folgenden Zeilen stehen, aber unmittelbar nach dem Ende von <Button1> (d. h. />) muss der Anfang von <Button2> (d. h. <asp:Button ID=) folgen.

  8. Wechseln Sie zur Entwurfsansicht.

    Beachten Sie, dass sich <Button1> und <Button2> unmittelbar nebeneinander ohne ein Leerzeichen dazwischen befinden.

  9. Wechseln Sie in die Quellansicht.

  10. Klicken Sie im Menü Bearbeiten auf Dokument formatieren.

    Das Dokument wird umformatiert, aber <Button1> und <Button2> befinden sich weiterhin in der gleichen Zeile. Wenn der Editor die Schaltflächen trennen sollte, würde er beim Rendern ein Leerzeichen einfügen. Daher ändert der Editor die von Ihnen erstellte Formatierung nicht.

Arbeiten in der geteilten Ansicht

Mithilfe der geteilten Ansicht können Sie die Entwurfsansicht und die Quellansicht gleichzeitig anzeigen.

So zeigen Sie eine Seite in der geteilten Ansicht an

  • Wechseln Sie zur Geteilten Ansicht, indem Sie unten links im Fenster auf Teilen klicken.

Wenn Seiten größer und komplexer werden, ist es hilfreich, wenn Tags leicht gefunden werden können und so die Seite übersichtlicher wird. Visual Web Developer stellt die folgenden Tools bereit, die Sie bei den folgenden Aufgaben in der Quellansicht unterstützen sollen:

  • Dokumentgliederung, in der eine vollständige Ansicht des Dokuments bereitgestellt wird.

  • Tag-Navigator, in dem Informationen zum aktuell ausgewählten Tag und dessen Position in der Seitenhierarchie bereitgestellt werden.

Fügen Sie der Seite am Anfang weitere Elemente hinzu, damit Sie die Navigationsfeatures testen können.

So fügen Sie Elemente hinzu

  1. Wechseln Sie zur Entwurfsansicht.

  2. Ziehen Sie aus der Gruppe HTML der Toolbox ein Table-Steuerelement in die Tabellenzelle, die Sie im Abschnitt "Verwenden der Quellansicht" weiter oben in dieser exemplarischen Vorgehensweise erstellt haben.

  3. Ziehen Sie aus der Gruppe Standard der Toolbox ein Button-Steuerelement in die mittlere Zelle der geschachtelten Tabelle.

Mit mehreren geschachtelten Elementen auf der Seite wird deutlich, wie die Dokumentgliederung eine schnelle Navigation zu jedem Tag auf der Seite ermöglicht.

So navigieren Sie mit der Dokumentgliederung

  1. Wechseln Sie zur Quellansicht.

  2. Klicken Sie im Menü Ansicht auf die Option Dokumentgliederung.

  3. Klicken Sie in der Dokumentgliederung auf Button4.

    Im Editor wird das von Ihnen im oben beschriebenen Verfahren hinzugefügte <Button4>-Steuerelement ausgewählt.

Der Tag-Navigator stellt Informationen zum aktuell ausgewählten Tag und dessen Position in der Seitenhierarchie bereit.

So navigieren Sie mit dem Tag-Navigator

  1. Positionieren Sie die Einfügemarke im <asp:button>-Tag.

    Beachten Sie den Tag-Navigator im unteren Bereich des Fensters, der das <asp:button>-Tag und seine übergeordneten Tags anzeigt. Der Tag-Navigator enthält die ID des Elements, sofern diese vorhanden ist, damit Sie feststellen können, welches Element angezeigt wird. Der Tag-Navigator zeigt auch das zugewiesene Cascading Stylesheet an, sofern es mit dem Class-Attribut festgelegt wurde.

  2. Klicken Sie im Tag-Navigator auf das <table>-Tag, das dem <asp:button#Button4>-Tag am nächsten ist.

    Der Tag-Navigator wechselt zum inneren <table>-Element und wählt es aus.

  3. Klicken Sie im Tag-Navigator auf das <td>-Tag links von der ausgewählten <table>.

    Es wird die vollständige Zelle ausgewählt, die die geschachtelte Tabelle enthält.

    Hinweis:

    Sie können durch Klicken entweder das Tag oder dessen Inhalt mithilfe der Dropdownliste im Tag des Tag-Navigators auswählen. Durch Klicken auf ein Tag im Tag-Navigator wird standardmäßig das Tag und dessen Inhalt ausgewählt.

Sie können auch mithilfe des Tag-Navigators Elemente verschieben oder kopieren.

So verschieben oder kopieren Sie Elemente mithilfe des Tag-Navigators

  1. Wählen Sie mithilfe des Tag-Navigators das <tr>-Tag aus, das <Button4> enthält.

  2. Drücken Sie STRG+C, um das Tag zu kopieren.

  3. Wechseln Sie mithilfe des Tag-Navigators zur äußeren Tabelle.

  4. Platzieren Sie in der Quellansicht die Einfügemarke zwischen dem <table>-Tag und dem ersten <tr>-Tag.

  5. Drücken Sie STRG+V, um die kopierte Zeile in die Tabelle einzufügen.

  6. Wechseln Sie zur Entwurfsansicht.

    Beachten Sie, dass die neue Zeile einschließlich eines Button-Steuerelements hinzugefügt wurde.

Formatieren von Text

  • Die Symbolleiste Formatierung übernimmt Inlineformate für die meisten Einstellungen. Fette und kursive Formatierung wird mithilfe des b-Tags und des i-Tags angewendet. Für Absatzformatierung wird ein Blocktag angewendet, z. B. p (normal), pre (formatiert) usw. Die Absatzausrichtung wird mithilfe von Inlineformaten angewendet, um XHTML 1.1-Standards zu entsprechen.

  • Mit dem Designer können Sie auch einen style-Block und einen Link zu einem Cascading Stylesheet erstellen. Weitere Informationen hierzu finden Sie unter Exemplarische Vorgehensweise: Erstellen und Ändern einer CSS-Datei.

  • Der Editor erstellt standardmäßig Markup, das dem XHTML 1.1-Standard entspricht, und konvertiert alle Namen von HTML-Tags in Kleinbuchstaben, auch wenn Sie diese in Großbuchstaben eingeben. Der Editor schließt außerdem Attributwerte (Eigenschaftenwerte) in Anführungszeichen ein. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erweiterte HTML-Bearbeitung in Visual Web Developer.

So ändern Sie die Standardmarkupvalidierung

  1. Klicken Sie in der Quellansicht mit der rechten Maustaste auf die Seite, und klicken Sie dann auf Formatierung und Validierung.

  2. Erweitern Sie im Dialogfeld Optionen die Option Text-Editor, HTML, und klicken Sie anschließend auf Validierung.

  3. Geben Sie in der Liste Ziel einen Validierungstyp ein.

Nächste Schritte

In dieser exemplarische Vorgehensweise haben Sie eine Übersicht über die HTML-Funktionen des Webseiten-Editors erhalten. Dies umfasst das Erstellen von HTML in der Entwurfsansicht und der Quellansicht, grundlegende Formatierung und Navigation. Möglicherweise möchten Sie mehr über die Bearbeitungsmöglichkeiten in Visual Web Developer erfahren. Sie können beispielsweise mehr Informationen zu den folgenden Themen erhalten:

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erweiterte HTML-Bearbeitung in Visual Web Developer

Konzepte

Entwurfsansicht

Referenz

Quellansicht