Exemplarische Vorgehensweise: Erstellen von auswählbaren Designs
Aktualisiert: November 2007
In dieser exemplarischen Vorgehensweise wird das Erstellen einer ASP.NET-Seite beschrieben, auf der Benutzer ein Design für die Seite auswählen können. Auch wenn in diesem Beispiel nur eine Steuerelementskin und eine einfache CSS-Datei (Cascading Stylesheet) verwendet werden, gelten die dargestellten Grundlagen auch für komplexere Designs, die Grafiken, verschiedene Layouts in der CSS-Datei und komplexere Serversteuerelementskins umfassen.
In dieser exemplarischen Vorgehensweise werden folgende Aufgaben veranschaulicht:
Erstellen eines Designs mit einer CSS-Datei und einer Serversteuerelementskin in Microsoft Visual Web Developer
Erstellen einer ASP.NET-Masterseite, die ein Design verwendet
Erstellen einer ASP.NET-Seite mit Anwendung einer Masterseite, die ein Design verwendet
Erstellen eines Dropdownlisten-Serversteuerelements, über das ein neues Design auf die Seite angewendet wird, wobei auch die Formate der Masterseitenelemente geändert werden
Ausführen einer Seite zum Anzeigen verschiedener auf die Seite angewendeter Designs
Vorbereitungsmaßnahmen
Um die exemplarische Vorgehensweise nachzuvollziehen, benötigen Sie Folgendes:
Visual Web Developer (Visual Studio)
.NET Framework
Erstellen einer Website
Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (z. B. mithilfe des Verfahrens in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese Website verwenden und mit dem nächsten Abschnitt, "Erstellen der Masterseite", fortfahren. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen:
So erstellen Sie eine Dateisystem-Website
Öffnen Sie Visual Web Developer.
Klicken Sie im Menü Datei nacheinander auf Neu und auf Website.
Das Dialogfeld Neue Website wird angezeigt.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.
Geben Sie im Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website aufbewahren möchten.
Geben Sie beispielsweise den Ordnernamen C:\Websites ein.
Klicken Sie in der Liste Sprache auf die Programmiersprache, in der Sie arbeiten möchten.
Klicken Sie auf OK.
Visual Web Developer erstellt den Ordner und eine neue Seite mit dem Namen Default.aspx.
Erstellen eines Designs
Ein Design ist eine Auflistung der Eigenschafteneinstellungen, mit denen Sie die Darstellung der Seiten und Steuerelemente festlegen können. Sie können diese Darstellung auf alle Seiten einer Webanwendung anwenden. Designs bestehen aus mehreren Elementen: Serversteuerelementskins, CSS-Dateien und andere Ressourcen. In diesem Beispiel verwenden Sie eine Skin und ein Stylesheet, um ein Design zu erstellen.
Designs werden im Websiteprojekt in besonderen Verzeichnissen definiert.
So erstellen Sie ein Design
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Website-Projektnamen, klicken Sie auf ASP.NET-Ordner hinzufügen und dann auf Design.
Der Ordner App_Themes wird automatisch erstellt, und es wird ein neuer Designordner mit dem Namen Design1 hinzugefügt.
Klicken Sie mit der rechten Maustaste auf den Ordner Design1, und wählen Sie Umbenennen. Geben Sie Blau ein, und drücken Sie die EINGABETASTE.
Klicken Sie mit der rechten Maustaste auf den Ordner Blau, und wählen Sie Neues Element hinzufügen.
Wählen Sie im Dialogfeld Neues Element hinzufügen die Option Designdatei aus, und nennen Sie die Datei default.skin. Klicken Sie auf Hinzufügen.
Klicken Sie im Projektmappen-Explorer erneut mit der rechten Maustaste auf Blau, und wählen Sie Neues Element hinzufügen aus.
Klicken Sie im Dialogfeld Neues Element hinzufügen auf Stylesheet. Geben Sie für das Stylesheet den Namen default.css ein. Klicken Sie auf Hinzufügen.
Das erste Design wird nun mit einer leeren CSS-Datei und einer Serversteuerelement-Skindatei erstellt. Bevor Sie diese Dateien bearbeiten können, müssen Sie zunächst eine Seite mit einem Steuerelement und HTML-Code erstellen, auf die das Design angewendet werden kann.
Erstellen von Masterseiten
Um zu veranschaulichen, wie einfach ein Design auf eine Masterseite und eine Seite, die diese Masterseite verwendet, angewendet werden kann, erstellen Sie eine einfache Masterseite, die für die Seite Default.aspx im Webprojekt verwendet wird.
So erstellen Sie die Masterseite
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie anschließend auf Neues Element hinzufügen.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf Masterseite.
Geben Sie im Feld Name den Namen Master1.master ein.
Klicken Sie in der Liste Sprachen auf die von Ihnen gewünschte Programmiersprache.
Deaktivieren Sie das Kontrollkästchen Code in eigener Datei platzieren, und klicken Sie dann auf Hinzufügen.
Die neue Masterseite wird in der Quellansicht geöffnet. Im oberen Bereich der Seite befindet sich eine @ Master-Deklaration anstelle der @ Page-Deklaration, die normalerweise im oberen Bereich von ASP.NET-Seiten zu finden ist. Der Textteil der Seite enthält ein asp:contentplaceholder-Steuerelement, das den Bereich der Masterseite definiert, in dem der austauschbare Inhalt aus den Inhaltsseiten zur Laufzeit eingefügt wird. Später arbeiten Sie in dieser exemplarischen Vorgehensweise noch einmal mit dem Platzhalter für Inhalt.
Erstellen des Layouts für die Masterseite
Die Masterseite definiert die Elemente, aus denen die Seite besteht. Sie kann eine beliebige Kombination von statischem Text und Steuerelementen enthalten. Eine Masterseite enthält auch mindestens einen Platzhalter für Inhalt, der angibt, an welchen Stellen beim Anzeigen der Seiten dynamischer Inhalt angezeigt wird.
In dieser exemplarischen Vorgehensweise verwenden Sie eine Tabelle mit Überschrift, mehreren horizontalen Linien und einem Platzhalter für Masterseiteninhalte als Layout für die Seite Home.aspx.
So erstellen Sie eine Tabelle für die Masterseite
Markieren Sie in der Quellansicht die Datei Master1.master, wählen Sie den Text zwischen den beiden <form>-Elementen aus, und fügen Sie den folgenden Inhalt in den ausgewählten Bereich ein. Beachten Sie, dass dieser Code den Inhaltsplatzhalter in eine Tabelle einfügt, und nicht zwischen die div>-Elemente wie im Standardmasterlayout.
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" > </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table><table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" > </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table>Die Masterseite verfügt jetzt über ein Layout, das auf die Inhaltsseite (Home.aspx) angewendet werden kann, die im nächsten Abschnitt erstellt wird.
Erstellen von Inhaltsseiten
Die Masterseite stellt die Vorlage für den Inhalt bereit. Der Inhalt für die Masterseite wird definiert, indem Sie eine ASP.NET-Seite erstellen, die der Masterseite zugeordnet wird. Die Inhaltsseite ist eine spezielle ASP.NET-Seite, die lediglich den in die Masterseite einzufügenden Inhalt enthält. Auf der Inhaltsseite fügen Sie den Text und die Steuerelemente hinzu, die angezeigt werden sollen, wenn Benutzer diese Seite anfordern.
Die Inhaltsseite verwendet die von Ihnen erstellte Masterseite und die Designs, die noch fertig gestellt werden müssen. Die Seite verwendet den Platzhalter der Masterseite und verfügt über einen Titel, einen Untertitel und eine Dropdownliste. Da die Seite eine Masterseite verwendet, muss sie ein MasterPageFile-Attribut in der @ Page-Direktive und den Inhaltsplatzhalter enthalten.
So erstellen Sie die Inhaltsseite
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie auf Neues Element hinzufügen.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf Web Form.
Geben Sie im Feld Name die Zeichenfolge Home ein.
Klicken Sie in der Liste Sprachen auf die von Ihnen gewünschte Programmiersprache.
Aktivieren Sie das Kontrollkästchen Masterseite auswählen, und klicken Sie dann auf Hinzufügen.
Das Dialogfeld Masterseite auswählen wird angezeigt.
Klicken Sie auf Master1.master, und klicken Sie anschließend auf OK.
Es wird eine neue Datei mit dem Namen Home.aspx erstellt. Die Seite enthält eine @ Page-Direktive, die die aktuelle Seite an die ausgewählte Masterseite mit dem MasterPageFile-Attribut anfügt, wie im folgenden Codebeispiel dargestellt.
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %><%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>Die Seite enthält auch ein <asp:Content>-Element, mit dem Sie als Nächstes arbeiten.
Hinzufügen von Inhalten zur Inhaltsseite
Eine Inhaltsseite weist nicht die üblichen Elemente auf, die eine ASP.NET-Seite ausmachen, z. B. die Elemente html, body oder form. Stattdessen fügen Sie lediglich den Inhalt hinzu, der auf der Masterseite angezeigt werden soll, indem Sie die auf der Masterseite erstellten Platzhalterbereiche ersetzen. In diesem Beispiel können Sie folgende Elemente hinzufügen: eine Überschrift 1, eine Überschrift 2 und eine Dropdownliste. Die Dropdownliste dient zum Auswählen des Designs, das auf die Seite angewendet werden soll.
So fügen Sie der Homepage Inhalt hinzu
Fügen Sie den folgenden Code zwischen den asp:Content-Tags ein. Im folgenden Beispiel werden drei HTML-Elemente erstellt: eine Überschrift 1, eine Überschrift 2 und ein Absatz. Außerdem wird ein Dropdownlisten-Steuerelement hinzugefügt. Beachten Sie, dass Sie der Seite das Steuerelement auch in der Entwurfsansicht hinzufügen können.
<h1 id="title1">Switchable Themes on a Page</h1><br /> <h2 id="title2">Note how the master page content and the page content are affected</h2> <p>Select a color from the drop-down list below to change the appearance of this page.</p> <br /><br /> <asp:dropdownlist id="ddlThemes" autopostback="true" > <asp:listitem value="Blue">I'd like the page to be blue!</asp:listitem> <asp:listitem value="Red">I'd like the page to be red!</asp:listitem> <asp:listitem value="Green">I'd like the page to be green!</asp:listitem> </asp:dropdownlist>Fügen Sie einen Skriptbereich zum Ausführen des Codes ein, der das Design lädt, wenn dieses in der Dropdownliste ausgewählt wird. Das folgende Beispiel und die script-Tags sollten auf der Inhaltsseite in die Zeile nach der @ Page-Direktive eingefügt werden.
<script > Public Sub Page_PreInit() ' Sets the Theme for the page. Me.Theme = "Blue" If ((Not (Request.Form) Is Nothing) _ AndAlso (Request.Form.Count > 0)) Then Me.Theme = Me.Request.Form(4).Trim End If End Sub </script><script > public void Page_PreInit() { // Sets the Theme for the page. this.Theme = "Blue"; if (Request.Form != null && Request.Form.Count > 0) this.Theme = this.Request.Form[4].Trim(); } </script>Das Design wird während des PreInit-Ereignisses des Lebenszyklus der Seite geladen. Das Seitenanforderungsformular enthält ein Wertearray, bei dem der Wert zu Index 4 der Auswahl in der Dropdownliste entspricht. Dieser Wert wird dem Design der Seite zugewiesen, und beim Laden der Seite wird das neue Design angewendet.
Im nächsten Schritt der exemplarischen Vorgehensweise erstellen Sie mehrere Designs, mit denen Sie die Anwendung unterschiedlicher Designs veranschaulichen können.
Bearbeiten des Designs Blau
Das Design Blau enthält ein leeres Stylesheet und eine leere Skin. Da Sie bereits wissen, aus welchen Elementen die Standardseite und die von dieser verwendete Masterseite bestehen, können Sie jetzt die Designdateien bearbeiten, um Farben für die Elemente der Seite anzugeben.
So bearbeiten Sie das Design Blau
Öffnen Sie in der Quellansicht die Datei Default.skin im Designordner Blau.
Fügen Sie der Dropdownliste folgenden Code hinzu, um die Farben für die Seite bei Auswahl des Designs Blau anzugeben.
<asp:dropdownlist ForeColor="white" BackColor="Blue" />Öffnen Sie in der Quellansicht die Datei Default.css im Designordner Blau. Fügen Sie zuerst den folgenden Code hinzu, um den Tabellentitel der Masterseite zu formatieren.
td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }Fügen Sie der Tabelle danach eine Hintergrundfarbe hinzu, indem Sie folgenden Code eingeben:
table.header { background-color: Blue; }Formatieren Sie anschließend Überschrift 1 und Überschrift 2 der Inhaltsseite.
h1 { font-size: large; color: Navy; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }Formatieren Sie zum Schluss die horizontale Linie und den Absatz.
p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }
Verknüpfen von Designs mit der Seite
Bevor Sie das auf die Seite Home.aspx angewendete Design sehen können, müssen Sie der @ Page-Direktive ein Attribut hinzufügen, um anzugeben, dass die Seite ein Design verwendet.
So verknüpfen Sie eine Seite mit einem Design
Öffnen Sie die Datei Home.aspx in der Quellansicht.
Fügen Sie der @ Page-Direktive das StylesheetTheme-Attribut hinzu, und legen Sie das Design Blau für das Attribut fest. Die Seitendirektive sollte dem folgenden Beispiel entsprechen:
<%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %><%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
Testen der Seite
Sie können die Seite testen, indem Sie sie wie jede andere ASP.NET-Seite ausführen.
So testen Sie die Seite
Öffnen Sie die Seite Home.aspx, und drücken Sie STRG+F5, um die Seite auszuführen.
ASP.NET führt den Inhalt der Seite Home.aspx mit dem Layout der Seite Master1.master in einer Seite zusammen, wendet anschließend das Design Blau auf die Seite an und zeigt die resultierende Seite im Browser an. Beachten Sie, dass das Design Blau auf die HTML-Elemente und die Dropdownliste ebenso wie auf den in der Masterdatei definierten Titel und Hintergrund angewendet wurde.
Erstellen weiterer Designs
Das Design Blau ist zwar im Prinzip ausreichend, allerdings sollen in dieser exemplarischen Vorgehensweise den Benutzern mehrere Designoptionen zur Auswahl gestellt werden. Sie können die Skin- und Stylesheetdateien in neue Designverzeichnisse kopieren und dann die für das Design verwendeten Farben ändern, um neue Designfarben anzugeben. Mit dem folgenden Verfahren werden die beiden neuen Designs Rot und Grün erstellt.
So erstellen Sie weitere Designs
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner App_Themes, klicken Sie auf ASP.NET-Ordner hinzufügen und dann auf Design. Wählen Sie den Ordner Design1 aus, geben Sie Rot ein, und drücken Sie die EINGABETASTE.
Öffnen Sie den Ordner Blau, und wählen Sie die Dateien Default.skin und Default.css aus. Klicken Sie mit der rechten Maustaste auf die beiden ausgewählten Dateien, und wählen Sie Kopieren.
Klicken Sie mit der rechten Maustaste auf den Ordner Rot, und wählen Sie Einfügen.
Wiederholen Sie Schritt 1, aber geben Sie dem neuen Designordner den Namen Grün. Klicken Sie dann mit der rechten Maustaste auf den Ordner Grün, und klicken Sie auf Einfügen, um die Dateien Default.skin und Default.css in den Ordner Grün zu kopieren.
Bearbeiten Sie das Farbattribut in der Skindatei, um die Designfarbe festzulegen. Die Skindatei im Design Rot sollte dem folgenden Beispiel entsprechen:
<asp:dropdownlist ForeColor="white" BackColor="Red" />Bearbeiten Sie das Stylesheet jedes Designs entsprechend dem Namen des Designs. Beachten Sie, dass Sie verschiedene Grüntöne für die verschiedenen HTML-Elemente und den Text verwenden sollten, damit diese sich vom Hintergrund abheben. Das Stylesheet für das Design Grün sollte dem folgenden Beispiel entsprechen.
p { font-family: Verdana; font-size: small; color: Teal; text-align: left; } hr { border: 0; border-top: 2px solid Teal; height: 2px; } h1 { font-size: large; color: Green; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Green; } table.header { background-color: Lime; } td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Teal; }
Testen der Designauswahl
In der Dropdownliste kann jetzt eine Auswahl aus den drei Designs für die Seite getroffen werden.
So wählen Sie ein anderes Design aus
Wechseln Sie zur Seite Home.aspx, und drücken Sie dann STRG+F5.
Wählen Sie in der Dropdownliste Grün oder Rot aus.
Beachten Sie, dass das Stylesheet auf die HTML-Elemente der Seite angewendet wird, die Skin auf das Dropdownlisten-Steuerelement.
Nächste Schritte
Weitere Informationen zur Verwendung von Masterseiten finden Sie unter Exemplarische Vorgehensweise: Erstellen und Verwenden von ASP.NET-Masterseiten in Visual Web Developer.
Siehe auch
Aufgaben
Gewusst wie: Übernehmen von ASP.NET-Designs