Schritt 1: Starten von Visual Web Developer 2005 Express Edition

Unsere neue Webseite erstellen wir mit Visual Web Developer 2005 Express Edition (im Folgenden nur noch VWD genannt).

Schritt 2: Anlegen einer neuen Webseite

Für eine neue Homepage müssen Sie nun „ASP.NET Webseite“ auswählen. Je nach dem welche Sprache Sie bevorzugen, wählen Sie „Visual Basic“ oder „Visual C#“ aus. Anschließend drücken Sie „OK“ um fortzufahren.

Tipp: Es ist für diese Anleitung egal, welche Sprache Sie wählen. Wir programmieren hier noch nicht.

Schritt 3: Erstellen einer Masterseite

Im Projektmappen-Explorer wählen Sie bitte das oberste Element Ihres Projekts aus. Mit der rechten Maustaste klicken Sie dieses Element kurz an. Anschließend wählen Sie aus dem sich geöffneten Kontextmenü den Punkt „Neues Element hinzufügen“ aus. Zu diesem Menü gelangen Sie auch über das Datei-Menü und den Menüpunkt „Neue Datei“. Wählen Sie aus dem Neues-Element- Hinzufügen-Dialog das Element Masterseite aus. Sie haben auch die Möglichkeiten, einen neuen Namen für die Masterseite zu definieren und ebenfalls eine Sprache zu wählen. Bitte machen Sie ein Häkchen bei „Code in eigener Datei platzieren“, dadurch wird das Projekt leserlicher.

Schritt 4: Design der Masterseite

Auf einer Masterseite legen Sie das spätere Layout Ihrer Webseite fest. Sie können sich die Masterseite auf zwei Arten ansehen: 1. Entwurfmodus (Grafische Darstellung), 2. Quellmodus (HTML-Darstellung).

Zwischen diesen Ansichten kann man hin- und herwechseln, in dem man im Designer unten die Laschen „Entwurf“ oder „Quelle“ anklickt. Bitte wählen Sie die Entwurfsansicht. Wenn Sie die Entwurfsansicht gewählt haben, dann befindet sich zu Beginn nur ein Content- PlaceHolder-Element im Designer. Dieses Element dient als Platzhalter für den späteren Inhalt.

Schritt 5: Tabelle einfügen

Nun wollen wir um diesen Platzhalter eine Tabelle mit Überschrift erstellen. Ziehen Sie dazu bitte eine Tabelle aus der Toolbox. Die Tabelle befindet sich innerhalb der HTML-Lasche.

Wenn Sie auf die linke untere Ecke der Tabelle klicken, haben Sie die Möglichkeit, die Größe der Tabelle zu verändern. Ziehen Sie die Tabelle bitte größer, damit man Platz für weitere Elemente hat.

Schritt 6: Platzhalter positionieren

Ziehen Sie nun den Platzhalter in die mittlere Zelle in der zweiten Zeile. Wenn Sie sich mit der Maus über der Tabelle bewegen, werden Sie feststellen, dass die Zeilen und Spalten veränderbar sind. Versuchen Sie die Höhen und Breiten der Tabelle ungefähr so zu entwerfen wie auf der folgenden Abbildung.

Schritt 7: Überschrift einfügen

In die obere Zeile der Tabelle möchten wir nun über alle drei Spalten hinweg eine Überschrift setzen. Dazu markieren wir die oberen drei Zellen und drücken anschließend die rechte Maustaste, um das Kontextmenü zu öffnen.

Dort befindet sich der Kontextmenüpunkt „Zellen zusammenführen“. Diesen wählen wir aus. Nun haben wir nur noch eine Zelle in der oberen Zeile. In diese Zelle tippen wir nun den Text „Meine erste Homepage“. Diesen Text markieren wir nun und verändern die Schriftgröße und die Schriftart über die Formatierungsleiste.

Schritt 8: Hintergrundfarbe setzen

Der Hintergrund unserer Webseite soll eine andere Farbe bekommen. Diese Eigenschaft ändern wir an der eigentlichen Webseite, dafür müssen wir diese selektieren. Dies geht am besten, in dem man auf einen leeren Bereich des Designer klickt. Wenn im Eigenschaftenfenster „Document“ in der obersten Zeile steht, dann haben wir die Eigenschaften der gesamten Webseite zur Verfügung.

Um nun die Hintergrundfarbe (engl. BackgroundColor) zu verändern, müssen Sie einfach im Eigenschaftenfenster auf die Eigenschaft „BgColor“ gehen. Dann erscheint dort ein Button, den Sie einfach drücken. Anschließend können Sie mit dem Farbauswahl- Dialog die Hintergrundfarbe auswählen.

Bitte speichern Sie nun alle Dokumente in Ihrem Projekt über das Datei-Menü mit dem Menüpunkt „Alle speichern“.

Schritt 9: Inhalt erstellen

Nach dem Sie nun eine Masterseite erstellt haben, die für Ihre einzelnen Webseiten als Design-Vorlage verwendet werden soll, können Sie nun Ihre eigenen Webseiten hinzufügen.

Über das Datei-Menü können Sie mit Neue Datei ein neues Element zu Ihrer Website hinzufügen. Im Dialog „Neues Element hinzufügen“ wählen Sie bitte als Erstes „Web Form“ aus. Geben Sie Ihrer Webseite anschließend einen aussagekräftigen Namen. In diesem Dialog haben Sie zusätzlich die Möglichkeit, eine Sprache zu wählen.

Zusätzlich müssen Sie ein Häkchen neben „Masterseite auswählen“ setzen, dadurch erhalten Sie einen weiteren Dialog, der es Ihnen erlaubt, die eben erstellte Masterseite für Ihre neue Webseite anzuwenden. Drücken Sie nun den Button Hinzufügen.

Im Dialog „Masterseite auswählen“ werden alle Ihre Masterseiten, die Sie im aktuellen Projekt erstellt haben, zur Auswahl angeboten. Bitte wählen Sie die eine Masterseite, die wir in den vorherigen Schritten erstellt haben aus und drücken Sie OK.

Wenn Sie im Editor die Lasche Entwurf klicken, müsste Ihre erste Webseite ungefähr so aussehen, wie die Abbildung oben. Tippen Sie nun einfach etwas Text in die Fläche über der Content steht, z.B. Herzlich Willkommen.

Schritt 10: Weitere Seiten einfügen

Den 9. Schritt können Sie nun beliebig wiederholen. Wenn sich der Kegelclub nun zu einer Sambatanzgruppe umformiert, brauchen Sie nur noch die Masterseite umzuändern und alle Seiten werden automatisch umgestaltet.

Wie man seine Kegelkumpanen managed, zeigt Manfred in "Benutzerverwaltung", den Überblick behält man mit Manuel in "Die Kunst der Navigation".