Exemplarische Vorgehensweise: Anpassen einer Website mithilfe von Designs in Visual Studio
Aktualisiert: November 2007
In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie die Seiten und Steuerelemente auf der Website mithilfe von Designs einheitlich dargestellt werden. Ein Design kann Designdateien enthalten, die eine einheitliche Darstellung für einzelne Steuerelemente definieren. Außerdem kann es eines oder mehrere Stylesheets sowie gemeinsame Grafiken zur Verwendung mit Steuerelementen wie das TreeView-Steuerelement enthalten. In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie ASP.NET-Designs für die Websites verwendet werden.
Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:
Anwenden vordefinierter ASP.NET-Designs auf einzelne Seiten und auf die gesamte Site
Erstellen eines eigenen Designs (Theme), das Designs (Skins) enthält, mit denen die Darstellung einzelner Steuerelemente definiert wird
Vorbereitungsmaßnahmen
Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:
Microsoft Visual Web Developer (Visual Studio)
.NET Framework
Erstellen der Website
Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (z. B. indem Sie die Schritte in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer befolgt haben), können Sie diese Website verwenden und zum nächsten Abschnitt übergehen. 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 auf Neue 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 die Seiten der Website gespeichert werden sollen.
Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.
Klicken Sie in der Liste Sprachen auf die Programmiersprache, in der Sie arbeiten möchten.
Klicken Sie auf OK.
Visual Web Developer erstellt den Ordner sowie eine neue Seite mit dem Namen Default.aspx.
Richten Sie zu Beginn Ihrer Arbeit mit Designs in dieser exemplarischen Vorgehensweise die Steuerelemente Button, Calendar und Label ein, sodass Sie überprüfen können, wie sich Designs auf diese Steuerelemente auswirken.
So platzieren Sie Steuerelemente auf der Seite
Wechseln Sie in die Entwurfsansicht.
Ziehen Sie die Steuerelemente Calendar, Button und Label aus der Gruppe Standard der Toolbox auf die Seite. Das genaue Layout der Seite ist nicht wichtig.
.gif "Hinweis")
Hinweis:Wenden Sie keinerlei Formatierung auf die Steuerelemente an. Verwenden Sie den Befehl AutoFormat beispielsweise nicht zum Festlegen der Darstellung des Calendar-Steuerelements.
Wechseln Sie zur Quellansicht.
Stellen Sie sicher, dass das <head>-Element der Seite über das -Attribut verfügt und wie folgt lautet:
<head ></head>Speichern Sie die Seite.
Zum Testen der Seite können Sie die Seite anzeigen, bevor und nachdem ein Design angewendet wurde.
Erstellen und Anwenden eines Designs für die Seite
Mit ASP.NET können vordefinierte Designs auf einfache Weise auf eine Seite angewendet oder ein eindeutiges Design erstellt werden. In diesem Abschnitt der exemplarischen Vorgehensweise wird ein Design (Theme) mit einigen einfachen Designs (Skins) erstellt, die die Darstellung von Steuerelementen definieren.
So erstellen Sie ein neues Design
Klicken Sie in Visual Web Developer mit der rechten Maustaste auf den Namen der Website, klicken Sie auf ASP.NET-Ordner hinzufügen, und klicken Sie dann auf Design.
Der Ordner App_Themes und der Unterordner Theme1 werden erstellt.
Benennen Sie den Ordner Theme1 in sampleTheme um.
Der Name dieses Ordners entspricht dem Namen des von Ihnen erstellten Designs (in diesem Fall sampleTheme). Der genaue Name ist nicht wichtig, aber Sie müssen sich daran erinnern, wenn Sie das benutzerdefinierte Design anwenden.
Klicken Sie mit der rechten Maustaste auf den Ordner sampleTheme, wählen Sie Neues Element hinzufügen aus, fügen Sie eine neue Textdatei hinzu, und nennen Sie sie sampleTheme.skin.
Fügen Sie in der Datei sampleTheme.skin Designdefinitionen hinzu, wie im folgenden Codebeispiel veranschaulicht:
<asp:Label ForeColor="red" Font-Size="14pt" Font-Names="Verdana" /> <asp:button Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>Hinweis:Die genauen von Ihnen definierten Eigenschaften sind nicht wichtig. Die Werte in der vorangehenden Auswahl stellen Vorschläge dar, deren Bedeutung klarer wird, wenn das Design zu einem späteren Zeitpunkt getestet wird.
Abgesehen davon, dass die Definitionen nur Einstellungen enthalten, die sich auf die Darstellung des Steuerelements auswirken, entsprechen die Designdefinitionen der Syntax für die Erstellung eines Steuerelements. Die Designdefinitionen enthalten beispielsweise keine Einstellungen für die ID-Eigenschaft.
Speichern Sie die Designdatei, und schließen Sie sie dann.
Sie können die Seite jetzt testen, bevor ein Design angewendet wird.
| Hinweis: |
|---|
Wenn Sie dem Ordner sampleTheme eine CSS-Datei (Cascading Stylesheet) hinzufügen, wird diese auf alle Seiten angewendet, die das Design verwenden. |
So testen Sie Designs
Drücken Sie STRG+F5, um die Seite auszuführen.
Die Steuerelemente werden in der jeweiligen Standarddarstellung angezeigt.
Schließen Sie den Browser, und kehren Sie dann zu Visual Web Developer zurück.
Fügen Sie in der Quellansicht der @ Page-Direktive folgendes Attribut hinzu:
<%@ Page Theme="sampleTheme" ... %>Hinweis:Sie müssen den Namen eines Designs angeben, das tatsächlich im Attributwert vorhanden ist (in diesem Fall, die zuvor definierte Datei sampleTheme.skin).
Drücken Sie STRG+F5, um die Seite erneut auszuführen.
Dieses Mal werden die Steuerelemente mit dem im Design definierten Farbschema gerendert.
Das Label-Steuerelement und das Button-Steuerelement werden mit den in der Datei sampleTheme.skin festgelegten Einstellungen angezeigt. Da in der Datei sampleTheme.skin für das Calendar-Steuerelement kein Eintrag vorgenommen wurde, wird es in der Standarddarstellung angezeigt.
Legen Sie in Visual Web Developer das Design auf den Namen eines anderen Designs fest, sofern verfügbar.
Drücken Sie STRG+F5, um die Seite erneut auszuführen.
Die Darstellung der Steuerelemente wird erneut geändert.
Stylesheetdesigns im Vergleich mit Anpassungsdesigns
Nach dem Erstellen des Designs können Sie bestimmen, wie es in der Anwendung verwendet wird, indem Sie es der Seite entweder als Anpassungsdesign (wie im vorherigen Abschnitt) oder als Stylesheetdesign zuordnen. Ein Stylesheetdesign verwendet dieselben Designdateien wie ein Anpassungsdesign. Es hat jedoch innerhalb der Steuerelemente und Eigenschaften der Seite entsprechend einer CSS-Datei weniger Vorrang. In ASP.NET gilt folgende Rangfolge:
Designeinstellungen, einschließlich der in der Datei Web.config festgelegten Designs
Lokale Seiteneinstellungen
Stylesheetdesign-Einstellungen
Wenn Sie also z. B. ein Stylesheetdesign verwenden, werden die Eigenschaften des Designs von lokalen Deklarationen auf der Seite überschrieben. Ähnlich werden bei Verwendung eines Anpassungsdesigns alle Deklarationen auf der lokalen Seite sowie alle Deklarationen in verwendeten Stylesheetdesigns durch die Eigenschaften des Anpassungsdesigns überschrieben.
So verwenden Sie ein Stylesheetdesign und zeigen die Rangfolge an
Wechseln Sie zur Quellansicht.
Ändern Sie die Seitendeklaration:
<%@ Page theme="sampleTheme" %>in eine Stylesheetdesign-Deklaration:
<%@ Page StyleSheetTheme="sampleTheme" %>Drücken Sie STRG+F5, um die Seite auszuführen.
Beachten Sie, dass die ForeColor-Eigenschaft des Label1-Steuerelements red ist.
Wechseln Sie in die Entwurfsansicht.
Wählen Sie Label1 aus, und legen Sie ForeColor unter Eigenschaften auf blue fest.
Drücken Sie STRG+F5, um die Seite auszuführen.
Die ForeColor-Eigenschaft von Label1 ist blue.
Wechseln Sie zur Quellansicht.
Ändern Sie die Seitendeklaration, um ein Design anstelle eines Stylesheetdesigns zu deklarieren, indem Sie:
<%@ Page StyleSheetTheme="sampleTheme" %>zurücksetzen auf:
<%@ Page Theme="sampleTheme" %>Drücken Sie STRG+F5, um die Seite auszuführen.
Die ForeColor-Eigenschaft von Label1 ist erneut red.
Zugrunde legen vorhandener Steuerelemente für benutzerdefinierte Designs
Eine einfache Möglichkeit zum Erstellen von Designdefinitionen besteht darin, die Darstellungseigenschaften mithilfe des Designers festzulegen und die Definition des Steuerelements anschließend in eine Designdatei zu kopieren.
So werden vorhandene Steuerelemente für benutzerdefinierte Designs zugrunde gelegt
Legen Sie in der Entwurfsansicht die Eigenschaften des Calendar-Steuerelements so fest, dass das Steuerelement über ein auffälliges Aussehen verfügt. @Folgende Einstellungen sollen als Beispiel dienen:
BackColor Cyan
BorderColor Red
BorderWidth 4
CellSpacing 8
Font-Name Arial
Font-Size Large
SelectedDayStyle-BackColor Red
SelectedDayStyle-ForeColor Yellow
TodayDayStyle-BackColor Pink
Hinweis:Die genauen von Ihnen definierten Eigenschaften sind nicht wichtig. Die Werte in der vorangehenden Auswahl stellen Vorschläge dar, deren Bedeutung klarer wird, wenn das Design zu einem späteren Zeitpunkt getestet wird.
Wechseln Sie zur Quellansicht, und kopieren Sie das <asp:calendar>-Element sowie die dazugehörigen Attribute.
Wechseln Sie zur Datei sampleTheme.skin, oder öffnen Sie sie.
Fügen Sie die Definition des Calendar-Steuerelements in die Datei sampleTheme.skin ein.
Entfernen Sie die ID-Eigenschaft aus der Definition in der Datei sampleTheme.skin.
Speichern Sie die Datei sampleTheme.skin.
Wechseln Sie zur Seite Default.aspx, und ziehen Sie ein zweites Calendar-Steuerelement auf die Seite. Legen Sie keine seiner Eigenschaften fest.
Führen Sie die Seite Default.aspx aus.
Beide Calendar-Steuerelemente werden identisch dargestellt. Das erste Calendar-Steuerelement gibt die von Ihnen vorgenommenen expliziten Eigenschafteneinstellungen wieder. Die Darstellungseigenschaften des Calendar-Steuerelements wurden von der Designdefinition geerbt, die Sie in der Datei sampleTheme.skin erstellt haben.
Anwenden von Designs auf eine Website
Ein Design kann auf eine gesamte Website angewendet werden, d. h., es ist nicht erforderlich, das Design erneut auf einzelne Seiten anzuwenden. (Wenn Sie möchten, können Sie die Designeinstellungen für eine Seite überschreiben.)
So legen Sie ein Design für eine Website fest
Erstellen Sie die Datei Web.config, wenn diese der Website nicht automatisch hinzugefügt wurde, und gehen Sie dabei wie folgt vor:
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie anschließend auf Neues Element hinzufügen.
Wählen Sie unter Vorlagen die Option Webkonfigurationsdatei aus, und klicken Sie dann auf Hinzufügen.
Hinweis Sie müssen keinen Namen eingeben, da der Name der Datei immer Web.config lautet.
Fügen Sie das <pages>-Element hinzu, wenn es nicht bereits vorhanden ist. Das <pages>-Element muss im <system.web>-Element angezeigt werden.
Fügen Sie dem <pages>-Element folgendes Attribut hinzu:
<pages theme="sampleTheme" />Hinweis:Bei Web.config muss die Groß-/Kleinschreibung beachtet werden. Bei den Werten wird die Höckerschreibweise verwendet. (Beispielsweise: Design und styleSheetTheme).
Speichern und schließen Sie die Datei Web.config.
Wechseln Sie zur Seite Default.aspx, und wechseln Sie zur Quellansicht.
Entfernen Sie das theme="themeName"-Attribut aus der Seitendeklaration.
Drücken Sie STRG+F5, um die Seite Default.aspx auszuführen.
Die Seite wird jetzt mit dem in der Datei Web.config angegebenen Design angezeigt.
Wenn in der Seitendeklaration ein Designname angegeben wird, überschreibt dieser alle in der Datei Web.config angegebenen Designs.
Nächste Schritte
Die ASP.NET-Unterstützung für Designs bietet eine Reihe von Optionen zum Bestimmen des Aussehens und Verhaltens vollständiger Anwendungen. In dieser exemplarischen Vorgehensweise wurden einige Grundlagen behandelt. Darüber hinaus stehen noch weitere Informationen zur Verfügung. Sie können beispielsweise mehr über die folgenden Themen erfahren:
Verwenden von Designs im Allgemeinen. Weitere Informationen finden Sie unter Übersicht über ASP.NET-Designs und ASP.NET-Skins.
Verwenden von Designs mit Code. Weitere Informationen finden Sie unter Gewusst wie: Programmgesteuertes Übernehmen von ASP.NET-Designs.