Exemplarische Vorgehensweise: Erstellen einer neuen ASP.NET-Website
Aktualisiert: November 2007
Diese exemplarische Vorgehensweise ist eine Einführung in die Webentwicklungsfeatures von Microsoft Visual Web Developer Express Edition und Microsoft Visual Studio 2008. Es wird das Erstellen einer einfachen Seite erläutert. Darüber hinaus macht diese exemplarische Vorgehensweise Sie mit dem visuellen Designer (WYSIWYG) bekannt.
In dieser exemplarischen Vorgehensweise sind u. a. die folgenden Aufgaben beschrieben:
Erstellen einer Dateisystem-Website
Kennenlernen von Visual Web Developer
Ausführen von Seiten mithilfe von ASP.NET Development ServerWebserver in Visual Web Developer
Vorbereitungsmaßnahmen
Zum Durchführen der exemplarischen Vorgehensweise benötigen Sie Folgendes:
- Microsoft Visual Studio 2008 oder Microsoft Visual Web Developer Express Edition. Informationen zum Herunterladen finden Sie auf der Website Visual Studio Development Center (möglicherweise in englischer Sprache).
Erstellen einer Website und einer Webseite
Im ersten Teil der exemplarischen Vorgehensweise erstellen Sie eine ASP.NET-Website mit einer Standardseite. Bei dieser Website handelt es sich um eine Dateisystem-Website, für die Microsoft Internetinformationsdienste (IIS) nicht erforderlich ist. Auf diese Weise können Sie die Seite über das lokale Dateisystem auf Ihrem Computer erstellen und ausführen.
Bei einer Dateisystem-Website werden Seiten und andere Dateien in einem Ordner gespeichert, der sich auf dem lokalen Computer befindet. Eine andere Websiteoption ist z. B. eine lokale IIS-Website, bei der die Dateien in einem Unterordner des lokalen IIS-Stammverzeichnisses gespeichert werden (meist \Inetpub\wwwroot\). Bei einer FTP-Site werden die Dateien auf einem Remoteserver gespeichert, auf den Sie mithilfe des File Transfer Protocol (FTP) zugreifen. Eine Remotesite speichert Dateien auf einem Remoteserver, auf den Sie über ein lokales Netzwerk zugreifen können. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Bearbeiten von Websites mit FTP in Visual Web Developer.
.gif "Hinweis") Hinweis: |
|---|
Sie können Websites auch mithilfe von Webanwendungsprojekten erstellen. Weitere Informationen finden Sie unter Übersicht über Webanwendungsprojekte. |
So erstellen Sie eine Dateisystem-Website
Öffnen Sie Visual Web Developer.
Klicken Sie im Menü Datei auf Neue Website.
Das Dialogfeld Neue Website wird angezeigt, wie in der folgenden Abbildung dargestellt.
.gif)
Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.
Wählen Sie im Feld Speicherort die Option Dateisystem aus, und geben Sie den Namen des Ordners ein, in dem die Seiten der Website gespeichert werden sollen.
Geben Sie zum Beispiel den Ordnernamen C:\Tasks ein.
Klicken Sie in der Liste Sprachen auf Visual Basic oder Visual C#, um die Programmiersprache auszuwählen, die Sie für das Webprojekt verwenden möchten.
Hinweis:Sie müssen in dieser exemplarischen Vorgehensweise keinen Programmcode schreiben.
Klicken Sie auf OK.
Visual Web Developer erstellt den Ordner und eine neue Seite mit dem Namen Default.aspx. Wenn Sie eine neue Seite erstellen, zeigt Visual Web Developer diese standardmäßig in der Quellansicht an, in der die HTML-Elemente der Seite sichtbar sind. Die folgende Abbildung zeigt eine Standardwebsite in der Quellansicht.
.gif)
Einführung in Visual Web Developer
Bevor Sie fortfahren, ist es ratsam, dass Sie sich mit der Entwicklungsumgebung von Visual Web Developer vertraut machen. Die folgende Abbildung zeigt einige Fenster und Tools von Visual Web Developer.
Diagramm der Visual Web Developer-Umgebung
.gif)
Betrachten Sie die vorherige Abbildung, und vergleichen Sie den Text mit der folgenden Liste, in der die am häufigsten verwendeten Fenster und Tools beschrieben werden. (Es sind nicht alle abgebildeten Fenster und Tools in der Liste enthalten, sondern nur diejenigen, die in der Abbildung dargestellt sind.)
Symbolleisten. Stellen Befehle zum Formatieren von Text, Suchen von Text usw. bereit. Einige Symbolleisten sind nur in der Entwurfsansicht verfügbar.
Projektmappen-Explorer. Zeigt die Dateien und Ordner der Website an.
Dokumentfenster. Zeigt die Dokumente, an denen Sie arbeiten, in Fenstern im Registerkartenformat an. Sie können zwischen Dokumenten wechseln, indem Sie auf die Registerkarten klicken.
Ansichtenregisterkarten. Zeigen verschiedene Ansichten eines Dokuments an. Die Entwurfsansicht bietet eine WYSIWYG-ähnliche Bearbeitungsoberfläche. Die Quellansicht ist der Editor für die Seite, die das Markup anzeigt. In der geteilten Ansicht wird sowohl die Entwurfsansicht als auch die Quellansicht des Dokuments angezeigt. Sie werden mit diesen Ansichten zu einem späteren Zeitpunkt in dieser exemplarischen Vorgehensweise arbeiten. Wenn Sie es vorziehen, Webseiten in der Entwurfsansicht zu öffnen, klicken Sie im Menü Extras auf Optionen, wählen Sie den Knoten HTML-Designer aus, und ändern Sie die Option Seiten starten in.
Eigenschaftenfenster. Ermöglicht das Ändern der Einstellungen für die Seite, HTML-Elemente, Steuerelemente und andere Objekte.
Fenster CSS-Eigenschaften. Zeigt die aktuellen CSS-Stile an, wenn die Entwurfsansicht aktiv ist.
Fenster Stile verwalten und Stile übernehmen. In diesen Fenstern können Sie die CSS-Stile der Website verwalten.
Toolbox. Stellt Steuerelemente und HTML-Elemente bereit, die Sie auf eine Seite ziehen können. Die Elemente in der Toolbox sind nach Funktionen gruppiert.
Datenbank-Explorer. Zeigt Datenbankverbindungen an. Wenn Sie das Fenster Datenbank-Explorer in Visual Web Developer nicht sehen, klicken Sie im Menü Ansicht auf Weitere Fenster und dann auf Datenbank-Explorer.
Hinweis:Das Fenster Datenbank-Explorer in Visual Web Developer hat in der Vollversion von Visual Studio den Namen Server-Explorer.
Sie können die Fenster bei Bedarf neu anordnen, verankern und ihre Größe ändern. Mithilfe des Menüs Ansicht können Sie zusätzliche Fenster anzeigen.
So führen Sie eine Tour durch die Entwicklungsumgebung aus
Klicken Sie im Menü Ansicht auf Symbolleisten.
Ein Untermenü der verfügbaren Symbolleisten wird angezeigt. Für Symbolleisten, die momentan aktiv sind, ist das Kontrollkästchen neben der Symbolleistenauswahl mit einem Häkchen versehen.
Führen Sie einen Bildlauf an das Ende der Liste mit den Symbolleisten aus, und klicken Sie auf Anpassen.
Das Dialogfeld Anpassen wird angezeigt.
Überprüfen Sie, welche der verfügbaren Symbolleisten aktiviert sind. Klicken Sie auf Schließen, wenn Sie diesen Schritt abgeschlossen haben.
Klicken Sie im Menü Ansicht auf Projektmappen-Explorer.
Das Fenster Projektmappen-Explorer wird angezeigt. Standardmäßig wird dieses Fenster auf einer Seite der Visual Web Developer-Umgebung verankert.
Klicken Sie mit der rechten Maustaste auf das oberste Element der Liste im Projektmappen-Explorer.
Ein Kontextmenü mit häufig verwendeten Websitebefehlen wird angezeigt.
Drücken Sie ESC, um das Kontextmenü zu schließen.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei Web.config, und klicken Sie anschließend auf Öffnen, um die Datei im Dokumentfenster zu öffnen.
Doppelklicken Sie auf die Seite Default.aspx, um sie im Dokumentfenster zu öffnen. Das Doppelklicken auf eine Datei ist eine Alternative zur Verwendung des Befehls Öffnen im Kontextmenü.
Beachten Sie, dass der Name einer geöffneten Seite oben im Dokumentfenster jeweils auf einer Registerkarte angezeigt wird.
Klicken Sie unten im Dokumentfenster auf Teilen, um die Quellansicht und die Entwurfsansicht gleichzeitig anzuzeigen.
Klicken Sie im Menü Ansicht auf Eigenschaftenfenster.
Das Eigenschaftenfenster wird angezeigt.
Wenn Sie im Dokumentfenster ein Objekt markieren, werden die Eigenschaften des markierten Objekts im Eigenschaftenfenster angezeigt.
Markieren Sie im Bereich der Quellansicht das form-Element, und prüfen Sie im Eigenschaftenfenster anschließend die verfügbaren Eigenschaften.
Klicken Sie im Menü Ansicht auf Toolbox.
Das Fenster Toolbox wird angezeigt.
Ziehen Sie in der Entwurfsansicht von der Registerkarte Standard der Toolbox ein Button-Steuerelement auf das Dokument, und legen Sie es auf dem div-Element ab.
Beachten Sie, dass die Quellansicht mit dem entsprechenden Markup aktualisiert wird.
Klicken Sie im Menü Ansicht auf Datenbank-Explorer.
Das Fenster Datenbank-Explorer wird angezeigt.
Hinweis:Das Fenster Datenbank-Explorer in Visual Web Developer hat in der Vollversion von Visual Studio den Namen Server-Explorer.
Klicken Sie mit der rechten Maustaste auf Datenverbindungen, um die verfügbaren Datenbankoptionen anzuzeigen.
Erstellen einer ASP.NET-Webseite
Wenn Sie eine neue Website erstellen, fügt Visual Web Developer eine ASP.NET-Webseite (Web Forms-Seite) mit dem Namen Default.aspx hinzu. Sie können die Seite Default.aspx als Startseite für die Website verwenden. In dieser exemplarischen Vorgehensweise erstellen und verwenden Sie jedoch eine neue Seite.
So fügen Sie der Website eine Seite hinzu
Klicken Sie im Dokumentfenster mit der rechten Maustaste auf die Registerkarte für die Seite Default.aspx, und klicken Sie dann auf Schließen.
Wenn Sie gefragt werden, ob die Änderungen gespeichert werden sollen, klicken Sie auf Nein.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website (z. B. C:\Tasks), und klicken Sie dann auf Neues Element hinzufügen.
Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf Web Form.
Geben Sie Home.aspx im Feld Name ein.
Wählen Sie in der Liste Sprache die Programmiersprache aus, in der Sie arbeiten möchten (Visual Basic oder C#).
Deaktivieren Sie das Kontrollkästchen Code in eigener Datei platzieren.
Die folgende Abbildung zeigt das Dialogfeld Neues Element hinzufügen.
.gif)
Klicken Sie auf Hinzufügen.
Visual Web Developer erstellt die neue Seite. Standardmäßig wird die Seite in der Quellansicht angezeigt.
Hinzufügen von HTML zur Seite
In diesem Teil der exemplarischen Vorgehensweise fügen Sie der Seite statischen Text hinzu.
So fügen Sie der Seite Text hinzu
Klicken Sie unten im Dokumentfenster auf die Registerkarte Entwurf, um in die Entwurfsansicht zu wechseln.
Geben Sie auf der Seite Aufgabenliste ein.
Ausführen der Seite
Bevor Sie fortfahren, können Sie die Seite testen. Zum Ausführen der Seite benötigen Sie einen Webserver. Bei einer Produktionswebsite verwenden Sie IIS als Webserver. Sie können jedoch zum Testen einer Seite ASP.NET Development Server verwenden. Dieser wird lokal ausgeführt, und IIS ist nicht erforderlich. Bei Dateisystem-Websites ist der Standardwebserver in Visual Web Developer der ASP.NET Development Server.
So führen Sie die Seite aus
Drücken Sie STRG+F5, um die Seite auszuführen.
Visual Web Developer startet den ASP.NET Development Server. In der Taskleiste von Windows wird ein Symbol angezeigt, um zu verdeutlichen, dass der Visual Web Developer-Webserver ausgeführt wird:
.gif)
Die Seite wird im Browser angezeigt. Obwohl die von Ihnen erstellte Seite die Erweiterung ASPX aufweist, wird sie aktuell wie eine HTML-Seite ausgeführt.
Hinweis:Wenn im Browser der Fehler 502 oder ein anderer Fehler mit dem Inhalt angezeigt wird, dass die Seite nicht angezeigt werden kann, müssen Sie den Browser ggf. so konfigurieren, dass er Proxyserver für lokale Anforderungen umgeht. Ausführliche Informationen finden Sie unter Gewusst wie: Umgehen eines Proxyservers bei lokalen Webanforderungen.
Schließen Sie den Browser.
Nächste Schritte
Anhand dieser exemplarischen Vorgehensweise wurden die grundlegenden Features von Visual Web Developer erläutert.
Um die Dateisteuerung zu verbessern, können Sie die Websitedateien auch in einem Quellcodeverwaltungssystem wie Visual SourceSafe speichern. Weitere Informationen finden Sie unter Einführung in die Quellcodeverwaltung.