visual studio 2019 website erstellen tutorial

Visual Studio 2019 Website erstellen Tutorial

Die Erstellung einer Website kann eine herausfordernde, aber auch äußerst lohnende Aufgabe sein. Mit Visual Studio 2019 steht Ihnen ein leistungsstarkes Tool zur Verfügung, um moderne und dynamische Webseiten zu erstellen. In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie mit Visual Studio 2019 eine Website erstellen können.

Was ist Visual Studio 2019?

Visual Studio 2019 ist eine integrierte Entwicklungsumgebung (IDE) von Microsoft, die es Entwicklern ermöglicht, Anwendungen und Webseiten in verschiedenen Programmiersprachen zu erstellen. Mit seiner benutzerfreundlichen Oberfläche und den zahlreichen Funktionen ist es eine ausgezeichnete Wahl für Anfänger und erfahrene Entwickler.

Voraussetzungen für das Tutorial

<pBevor Sie mit der Erstellung Ihrer Website beginnen, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:

• Installierte Visual Studio 2019-Version
• Grundkenntnisse in HTML, CSS und JavaScript
• Ein funktionierendes Internet

Schritt 1: Neues Projekt erstellen

Um Ihr Projekt zu starten, öffnen Sie Visual Studio 2019 und wählen Sie „Neues Projekt“. Im sich öffnenden Fenster können Sie die gewünschte Projektvorlage auswählen. Für unsere Website erstellen wir ein Projekt mit der Option „ASP.NET Core Webanwendung“.

Das Projekt konfigurieren

Geben Sie Ihrem Projekt einen Namen und wählen Sie den Speicherort aus. Klicken Sie anschließend auf „Erstellen“. Sie werden nun gefragt, welche Art von ASP.NET Core-Projekt Sie erstellen möchten. Wählen Sie „Webanwendung (Model-View-Controller)“ und klicken Sie auf „Erstellen“.

Schritt 2: Projektstruktur verstehen

Nach dem Erstellen des Projekts sehen Sie die Projektstruktur im Lösungsexplorer. Hier sind einige wichtige Ordner:

• Controllers: Enthält die Steuerungsklassen, die die Logik der Anwendung definieren.
• Views: Beinhaltet die Ansichten, die das UI (Benutzeroberfläche) der Anwendung darstellen.
• wwwroot: Stellt öffentliche Ressourcen wie CSS-, JavaScript- und Bilddateien zur Verfügung.

Schritt 3: Grundlegende Seiten erstellen

Um eine einfache Webseite zu erstellen, beginnen wir mit der Erstellung einer neuen Ansicht. Klicken Sie mit der rechten Maustaste auf den Ordner „Views“ und wählen Sie „Neuer Ordner“. Nennen Sie ihn „Home“. Klicken Sie nun mit der rechten Maustaste auf den neuen Ordner und wählen Sie „Neue Ansicht“. Geben Sie der Datei den Namen „Index.cshtml“.

In dieser Datei können Sie nun HTML-Code hinzufügen. Zum Beispiel können Sie einfaches HTML wie folgt eingeben:

<h1>Willkommen auf meiner Website</h1>
<p>Dies ist eine einfache Website, die mit Visual Studio 2019 erstellt wurde.</p>

Schritt 4: Routen konfigurieren

Um Ihre Webseite über die URL erreichbar zu machen, müssen Sie die Routing-Einstellungen konfigurieren. Öffnen Sie die Datei „Startup.cs“ im Hauptprojektordner. In der Methode „Configure“ können Sie Parameter festlegen, die die Routing-Logik betreffen.

Ein Beispiel für Routing könnte so aussehen:

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

Diese Linie bedeutet, dass die „Index“-Aktion im „Home“-Controller die Standardroute für Ihre Anwendung ist.

Schritt 5: CSS und JavaScript hinzufügen

Um Ihrer Webseite Stil und Interaktivität hinzuzufügen, benötigen Sie CSS und JavaScript. Gehen Sie in den Ordner „wwwroot“ und fügen Sie einen neuen Ordner mit dem Namen „css“ für Ihre Stylesheets und einen weiteren mit dem Namen „js“ für Ihre Skripte hinzu.

Ein einfaches CSS-Beispiel könnte folgendermaßen aussehen:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

Verlinken Sie dieses Stylesheet in Ihrer „Index.cshtml“-Datei:

<link rel="stylesheet" type="text/css" href="~/css/style.css">

Schritt 6: Anwendungslogik implementieren

Der nächste Schritt besteht darin, die Logik Ihrer Anwendung zu implementieren. Öffnen Sie den „Controllers“-Ordner und fügen Sie eine neue C#-Datei mit dem Namen „HomeController.cs“ hinzu. In dieser Datei definieren Sie die Aktionen, die Ihre Webseite bedienen soll.

Ein einfaches Beispiel für einen Controller könnte wie folgt aussehen:

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Durch die Definition und die Rückgabe der View „Index“ wird sichergestellt, dass die erstellte Ansicht angezeigt wird, wenn die Website aufgerufen wird.

Schritt 7: Testen Ihrer Website

Nachdem Sie alle oben genannten Schritte ausgeführt haben, ist es an der Zeit, Ihre Website zu testen. Drücken Sie F5 oder klicken Sie auf „Debuggen“. Visual Studio startet den integrierten Webserver und öffnet Ihren Standardbrowser mit der URL Ihrer Anwendung.

Schritt 8: Deployment der Website

Nachdem Sie Ihre Website getestet und für funktionsfähig befunden haben, können Sie sie veröffentlichen. Visual Studio 2019 bietet verschiedene Optionen zur Veröffentlichung, wie z.B. Azure, lokale Ordner, oder FTP-Server. Gehen Sie zum Menü „Build“ und wählen Sie „Veröffentlichen“ aus, um mit dem Veröffentlichen zu beginnen.

Schritt 9: Finalisieren und Optimieren

Nachdem Ihre Website online ist, sollten Sie sicherstellen, dass sie für Suchmaschinen optimiert ist. Zu den wichtgsten Aspekten der SEO-Optimierung gehören:

• Verwendung von aussagekräftigen Meta-Tags
• Optimierung der Ladegeschwindigkeit der Website
• Responsive Design für mobile Endgeräte

Suchmaschinenfreundliche URLs und Sitemaps sind ebenfalls wichtig, um die Sichtbarkeit Ihrer Seite zu erhöhen.

Fazit

Die Erstellung einer Website mit Visual Studio 2019 ist ein spannender Prozess. Sie haben gelernt, wie Sie ein Projekt einrichten, Seiten erstellen, die Logik integrieren und schließlich Ihre Website veröffentlichen können. Achten Sie darauf, Ihre Webseite regelmäßig zu überprüfen und zu aktualisieren, um sowohl die Benutzererfahrung zu verbessern als auch die Sichtbarkeit in Suchmaschinen zu erhöhen.

Veröffentlicht am 12.10.2025