Freigeben über

Gewusst wie: Definieren von ASP.NET-Seitendesigns

  • Artikel

Aktualisiert: November 2007

In Visual Web Developer können Sie Seitendesigns definieren, die Sie dann auf eine oder mehrere Seiten in einer Anwendung anwenden können. Sie können auch Designs auf Computerebene erstellen, die dann in mehreren Anwendungen auf dem Server verwendet werden können.

Designs bestehen aus verschiedenen Unterstützungsdateien, darunter Stylesheets für das Aussehen von Seiten, Steuerelementdesigns zum Definieren der Darstellung von Serversteuerelementen sowie alle anderen Unterstützungsbilder und -dateien, aus denen sich das Design zusammensetzt. Der Inhalt eines Designs ist gleich, unabhängig davon, ob das Design als Seitendesign oder globales Design definiert ist.

Designs können mithilfe des Theme-Attributs oder des StyleSheetTheme-Attributs der @ Page-Direktive oder durch Festlegen des pages-Element (ASP.NET-Einstellungsschema)-Elements in der Anwendungskonfigurationsdatei festgelegt werden. Visual Web Developer stellt visuell nur Designs dar, die mithilfe des StyleSheetTheme-Attributs angewendet wurden.

So erstellen Sie ein Seitendesign

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, für die Sie ein Seitendesign erstellen möchten, und klicken Sie dann auf ASP.NET-Ordner hinzufügen.

  2. Klicken Sie auf Design.

    Wenn der Ordner App_Themes nicht bereits vorhanden ist, wird er von Visual Web Developer erstellt. Visual Web Developer erstellt dann als Unterordner des Ordners App_Themes einen neuen Ordner für das Design.

  3. Geben Sie einen Namen für den neuen Ordner ein.

    Der Name dieses Ordners entspricht dem Namen des Seitendesigns. Wenn Sie z. B. einen Ordner \App_Themes\FirstTheme erstellen, lautet der Name des Designs FirstTheme.

  4. Fügen Sie dem neuen Ordner Steuerelementdesigns, Stylesheets und Bilder hinzu, aus denen sich das Design zusammensetzt.

So fügen Sie einem Seitendesign eine Designdatei und ein Design hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen des Designs, und klicken Sie anschließend auf Neues Element hinzufügen.

  2. Klicken Sie im Dialogfeld Neues Element hinzufügen auf Designdatei.

  3. Geben Sie im Feld Name einen Namen für die SKIN-Datei ein, und klicken Sie auf Hinzufügen.

    Die übliche Konvention besteht darin, für jedes Steuerelement eine SKIN-Datei zu erstellen, z. B. Button.skin oder Calendar.skin. Sie können jedoch so viele SKIN-Dateien erstellen, wie Sie benötigen.

  4. Fügen Sie in der SKIN-Datei mit deklarativer Syntax eine normale Steuerelementdefinition hinzu, schließen Sie jedoch nur die Eigenschaften ein, die Sie für das Design festlegen möchten. Die Steuerelementdefinition muss das -Attribut einschließen und darf das ID=""-Attribut nicht einschließen.

    Das folgende Codebeispiel zeigt ein Standardsteuerelementdesign für ein Button-Steuerelement, das die Farbe und die Schriftart für alle Button-Steuerelemente im Design definiert.

    <asp:Button  
  BackColor="Red" 
  ForeColor="White" 
  Font-Name="Arial" 
  Font-Size="9px" />

    Dieses Button-Steuerelementdesign enthält kein skinID-Attribut. Es wird in der Anwendung mit dem Design auf alle Button-Steuerelemente angewendet, die das skinID-Attribut nicht angeben.

    Hinweis:

    Eine einfache Möglichkeit zum Erstellen eines Designs besteht darin, das Steuerelement auf einer Seite einzufügen und diese Seite so zu konfigurieren, dass sie das gewünschte Aussehen hat. Sie könnten beispielsweise einer Seite ein Calendar-Steuerelement hinzufügen und den Tagesheader, das ausgewählte Datum und andere Eigenschaften festlegen. Anschließend können Sie die Steuerelementdefinition aus der Seite in eine SKIN-Datei kopieren, Sie müssen dabei jedoch das ID-Attribut entfernen.

  5. Wiederholen Sie die Schritte 2 und 3 für jede Steuerelement-Designdatei, die erstellt werden soll.

    Hinweis:

    Sie können nur ein Standarddesign pro Steuerelement definieren. Mit dem SkinID-Attribut in der Steuerelementdeklaration des Designs können Sie benannte Designs für die gleiche Art von Steuerelementen erstellen.

So fügen Sie dem Seitendesign eine Cascading-Stylesheet-Datei hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen des Designs, und klicken Sie anschließend auf Neues Element hinzufügen.

  2. Klicken Sie im Dialogfeld Neues Element hinzufügen auf Stylesheet.

  3. Geben Sie im Feld Name einen Namen für die CSS-Datei ein, und klicken Sie dann auf Hinzufügen.

    Wenn das Design auf eine Seite angewendet wird, fügt ASP.NET dem Anfangselement der Seite einen Verweis auf das Stylesheet hinzu. Weitere Informationen finden Sie unter Gewusst wie: Übernehmen von ASP.NET-Designs.

Erstellen von globalen Designs

Ein globales Design wird auf alle Websites auf einem Server angewendet. Der Speicherort, an dem Sie einen Ordner für globale Designs erstellen, ist abhängig davon, ob Sie die Website mit Internetinformationsdiensten (IIS) ausführen oder mit ASP.NET Development Server testen.

Hinweis:

Wenn Sie mit einer Dateisystem-Website arbeiten, führt Visual Web Developer die Website standardmäßig zum Testen aus, indem ASP.NET Development Server gestartet wird. Für andere Arten von Websites führt Visual Web Developer Seiten zum Testen in IIS aus.

So erstellen Sie ein globales Design

  1. Erstellen Sie mit dem folgenden Pfad einen Ordner Themes.

    %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes
    Hinweis:

    Der Ordnername für globale Designs lautet nicht App_Themes wie für Seitendesigns, sondern Themes.

    Erstellen Sie im Ordner Themes einen Unterordner für die Dateien für das globale Design.

    Der Name dieses Unterordners ist der Name des Designs. Wenn Sie z. B. einen Ordner \Themes\FirstTheme erstellen, lautet der Name des Designs FirstTheme.

  2. Fügen Sie dem neuen Ordner Dateien für die Steuerelementdesigns, Stylesheets und Bilder hinzu, aus denen sich das globale Design zusammensetzt.

    Hinweis:

    Beim Definieren eines globalen Designs können Sie mit Visual Web Devoloper nicht direkt Design- und Stylesheetdateien hinzufügen. Möglicherweise finden Sie es einfacher, das Design als Seitendesign zu definieren und zu testen und es dann in den Order für globale Designs auf dem Webserver zu kopieren.

  3. Wenn es sich bei der Website um eine Dateisystem-Website handelt, die Sie mit ASP.NET Development Server testen, können Sie jetzt mit dem Testen beginnen.

  4. Wenn Sie die Website mit einer lokalen IIS-Website testen, öffnen Sie ein Befehlsfenster, und führen Sie aspnet_regiis -c aus, um das Design und den Server zu installieren, auf dem IIS ausgeführt wird.

  5. Wenn Sie das Design auf einer Remotewebsite oder einer FTP-Website testen, müssen Sie den Ordner Themes mit dem folgenden Pfad manuell erstellen.

    IISRootWeb\aspnet_client\system_web\version\Themes

Siehe auch

Konzepte

Übersicht über ASP.NET-Designs und ASP.NET-Skins