Procédure pas à pas : création de thèmes sélectionnables par l'utilisateur
Mise à jour : novembre 2007
Cette procédure pas à pas illustre la création d'une page ASP.NET qui permet à l'utilisateur de sélectionner un thème pour la page. Bien que cet exemple utilise une apparence de contrôle unique et un fichier de feuille de style en cascade (CSS) de base, les principes indiqués s'appliquent à des thèmes plus complexes qui incluent des graphiques, différents modèles de disposition dans le fichier CSS et des apparences de contrôle serveur plus complexes.
Cette procédure pas à pas illustre les tâches suivantes :
Création d'un thème, y compris un fichier CSS et une apparence de contrôle serveur, dans Microsoft Visual Web Developer.
Création d'une page maître ASP.NET qui utilise un thème.
Création d'une page ASP.NET avec une page maître appliquée qui utilise un thème.
Création d'un contrôle serveur de liste déroulante qui applique un nouveau thème à une page, y compris une modification des styles sur les éléments de page maître.
Exécution d'une page pour afficher les différents thèmes appliqués à la page.
Composants requis
Pour exécuter cette procédure pas à pas, vous devez disposer de la configuration suivante :
Visual Web Developer (Visual Studio).
.NET Framework.
Création d'un site Web
Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en suivant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante, « Création d'une page maître ». Sinon, créez un site et une page Web en suivant ces étapes.
Pour créer un site Web de système de fichiers
Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.
Par exemple, tapez le nom du dossier C:\SitesWeb.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.
Visual Web Developer crée le dossier et une page nommée Default.aspx.
Création d'un thème
Un thème est une collection de paramètres de propriété qui vous permettent de définir l'apparence des pages et contrôles. Vous pouvez appliquer cette apparence de façon cohérente sur les pages dans une application Web. Les thèmes sont composés de plusieurs éléments : apparences de contrôle serveur, fichiers CSS et autres ressources. Dans cet exemple, vous utilisez une apparence et une feuille de style pour créer un thème.
Les thèmes sont définis dans des répertoires spéciaux de votre projet de site Web.
Pour créer un thème
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de projet du site Web, cliquez sur Ajouter le dossier ASP.NET, puis sur Thème.
Le dossier App_Themes est créé automatiquement et un nouveau dossier de thèmes nommé Theme1 est ajouté.
Cliquez avec le bouton droit sur le nouveau dossier Theme1, puis cliquez sur Renommer. Tapez Blue et appuyez sur ENTRÉE.
Cliquez avec le bouton droit sur le nouveau dossier Blue, puis cliquez sur Ajouter un nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Fichier d'apparence et nommez le fichier default.skin. Cliquez sur Ajouter.
Dans l'Explorateur de solutions, cliquez une nouvelle fois avec le bouton droit sur le nouveau dossier Blue, puis cliquez sur Ajouter un nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Feuille de style. Nommez la feuille de style default.css. Cliquez sur Ajouter.
Le premier thème est maintenant créé avec un fichier CSS vide et un fichier d'apparence de contrôle serveur. Vous modifierez ces fichiers dans un moment, mais vous devez d'abord créer une page qui contient un contrôle et du code HTML auxquels le thème peut être appliqué.
Création d'une page maître
Pour montrer qu'un thème peut être appliqué facilement à la fois à une page maître et à une page qui utilise cette page maître, créez une page maître simple à utiliser avec la page Default.aspx de votre projet Web.
Pour créer la page maître
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre site Web, puis cliquez sur AjouterNouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Page maître.
Dans la zone Nom, tapez Master1.master.
Dans la liste Langage, cliquez sur votre langage de programmation préféré.
Désactivez la case à cocher Placer le code dans un fichier distinct, puis cliquez sur Ajouter.
La nouvelle page maître s'ouvre en mode Source. En haut de la page se trouve une déclaration @ Master qui remplace la déclaration @ Page habituellement située en haut des pages ASP.NET. Le corps de la page contient un contrôle asp:contentplaceholder, qui définit la zone de la page maître où le contenu remplaçable sera fusionné à partir des pages de contenu au moment de l'exécution. Vous utiliserez davantage l'espace réservé de contenu lors d'une prochaine étape de cette procédure pas à pas.
Disposition de la page maître
La page maître définit les éléments qui composent la page. Elle peut contenir n'importe quelle combinaison de texte statique et de contrôles. Une page maître contient également un ou plusieurs espaces réservés de contenu qui désignent l'emplacement du contenu dynamique lorsque les pages sont affichées.
Dans cette procédure pas à pas, vous utilisez une table qui contient un titre, plusieurs règles horizontales et un espace réservé de contenu de page maître comme disposition pour votre page Home.aspx.
Pour créer une table pour la page maître
Le fichier Master1.master sélectionné en mode Source, sélectionnez le texte entre les deux éléments <form> et collez le contenu suivant dans la zone sélectionnée. Notez que ce code place l'espace réservé de contenu dans une table et non entre les éléments <div> comme c'est le cas dans la disposition principale par défaut.
<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>La page maître a maintenant une disposition qui peut s'appliquer à la page de contenu (nommée Home.aspx) que vous créerez dans la section suivante.
Création d'une page de contenu
La page maître fournit le modèle pour votre contenu. Définissez le contenu de la page maître en créant une page ASP.NET qui est associée à la page maître. La page de contenu est une page ASP.NET spécialisée qui contient uniquement le contenu à fusionner avec la page maître. Dans la page de contenu, ajoutez le texte et les contrôles que vous souhaitez afficher lorsque les utilisateurs demandent cette page.
La page de contenu utilisera la page maître que vous avez créée et les thèmes que vous devez encore finaliser. La page utilisera l'espace réservé de contenu de la page maître et aura un titre, un sous-titre et une liste déroulante. Parce qu'elle utilisera une page maître, la page doit contenir un attribut MasterPageFile dans la directive @ Page, ainsi que l'espace réservé de contenu.
Pour créer la page de contenu
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre site Web, puis cliquez sur Ajouter un nouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez Home.
Dans la liste Langage, cliquez sur votre langage de programmation préféré.
Activez la case à cocher Sélectionner la page maître, puis cliquez sur Ajouter.
La boîte de dialogue Sélectionner une page maître s'affiche.
Cliquez sur Master1.master, puis sur OK.
Un nouveau fichier appelé Home.aspx est créé. La page contient une directive @ Page qui attache la page actuelle à la page maître sélectionnée avec l'attribut MasterPageFile, comme indiqué dans l'exemple suivant :
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %><%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>La page contient également un élément <asp:Content> que vous utiliserez par la suite.
Ajout de contenu à la page de contenu
Une page de contenu ne possède pas les éléments qui composent habituellement une page ASP.NET, tels que les éléments html, body ou form. À la place, ajoutez uniquement le contenu que vous souhaitez afficher sur la page maître en remplaçant les régions d'espace réservé que vous avez créées dans la page maître. Pour cet exemple, vous pouvez ajouter un élément Titre 1, un élément Titre 2, un élément de paragraphe et une liste déroulante. Vous utiliserez la liste déroulante pour sélectionner un thème à appliquer à la page.
Pour ajouter du contenu à la page d'accueil
Collez le code suivant entre les balises asp:Content de début et de fin. L'exemple suivant crée trois éléments HTML : un titre 1, un titre 2 et un paragraphe. Il ajoute également un contrôle de liste déroulante. Notez que vous pouvez également ajouter le contrôle à la page en mode Design si vous préférez.
<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>Ajoutez une section de script qui exécutera le code qui charge le thème une fois sélectionné dans la liste déroulante. L'exemple suivant et les balises script doivent être ajoutés à la page de contenu au niveau de la ligne située après la directive @ Page.
<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>Le thème est chargé pendant l'événement PreInit du cycle de vie de la page. Le formulaire de demande de page contient un tableau de valeurs et celle au niveau de l'index 4 est la valeur sélectionnée dans la liste déroulante. Cette valeur est assignée au thème de la page et, lorsque la page est chargée, le nouveau thème est appliqué.
L'étape suivante de la procédure pas à pas consiste à créer plusieurs thèmes que vous pouvez utiliser pour montrer qu'un thème différent est appliqué.
Modification du thème Blue
Le thème Blue contient une feuille de style vide et une apparence vide. Dans la mesure où vous connaissez les éléments qui composent la page par défaut et la page maître utilisée, vous pouvez maintenant modifier les fichiers de thème pour ajouter de la couleur aux éléments de la page.
Pour modifier le thème Blue
Ouvrez le fichier Default.skin du dossier de thème Blue en mode Source.
Ajoutez le code suivant à la liste déroulante pour désigner les couleurs de la page lorsque le thème Blue est sélectionné.
<asp:dropdownlist ForeColor="white" BackColor="Blue" />Ouvrez le fichier Default.css du dossier Blue en mode Source. Ajoutez d'abord le code suivant pour mettre en forme le titre de la table à partir de la page maître.
td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }Ajoutez ensuite une couleur d'arrière-plan à la table avec le code suivant.
table.header { background-color: Blue; }Appliquez par la suite les styles des éléments Titre 1 et Titre 2 dans la page de contenu.
h1 { font-size: large; color: Navy; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }Enfin, appliquez le style de règle horizontale et de l'élément de paragraphe.
p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }
Connexion des thèmes à la page
Pour pouvoir afficher le thème appliqué à la page Home.aspx, vous devez ajouter un attribut à la directive @ Page pour indiquer que la page utilise un thème.
Pour connecter une page à un thème
Ouvrez Home.aspx en mode Source.
Ajoutez l'attribut StylesheetTheme à la directive @ Page et affectez-lui la valeur de thème Blue. La directive de la page doit ressembler à l'exemple suivant :
<%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %><%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
Test de la page
Vous pouvez tester la page en l'exécutant comme vous le feriez avec une page ASP.NET quelconque.
Pour tester la page
Tout en consultant la page Home.aspx, appuyez sur CTRL+F5 pour exécuter la page.
ASP.NET fusionne le contenu de la page Home.aspx avec la disposition de la page Master1.master en une seule page, puis applique le thème Blue et affiche la page obtenue dans le navigateur. Notez que le thème Blue a été appliqué aux éléments HTML et à la liste déroulante ainsi qu'aux titre et arrière-plan définis dans le fichier maître.
Création de thèmes supplémentaires
Le thème Blue convient parfaitement, mais le but de cette procédure pas à pas consiste à offrir à l'utilisateur de la page plusieurs options pour un thème. Vous pouvez copier les fichiers d'apparence et de feuille de style dans de nouveaux répertoires de thèmes, puis modifier les couleurs utilisées dans le thème pour refléter les nouvelles couleurs de thème. La procédure suivante crée deux thèmes, Red et Green.
Pour créer des thèmes supplémentaires
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Themes, cliquez sur Ajouter le dossier ASP.NET, puis sur Thème. Le titre de dossier Theme1 étant sélectionné, tapez Red et appuyez sur ENTRÉE.
Ouvrez le dossier Blue et sélectionnez les fichiers Default.skin et Default.css. Cliquez avec le bouton droit sur les deux fichiers sélectionnés, puis cliquez sur Copier.
Cliquez avec le bouton droit sur le dossier Red, puis cliquez sur Coller.
Répétez l'étape 1, mais nommez le nouveau dossier de thème Green. Cliquez ensuite avec le bouton droit sur le dossier Green, puis cliquez sur Coller, en plaçant des copies des fichiers Default.skin et Default.css dans le dossier Green.
Modifiez l'attribut de couleur dans le fichier d'apparence pour refléter la couleur de thème. Par exemple, le fichier d'apparence du thème Red doit ressembler à l'exemple suivant.
<asp:dropdownlist ForeColor="white" BackColor="Red" />Modifiez la feuille de style pour chaque thème pour refléter le nom du thème. Notez que vous voudrez utiliser plusieurs nuances de vert pour les différents éléments HTML et pour que le texte ressorte sur l'arrière-plan. La feuille de style du thème Green peut ressembler à l'exemple suivant.
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; }
Test de la sélection du thème
La liste déroulante peut maintenant être utilisée pour choisir parmi les trois thèmes pour la page.
Pour sélectionner des thèmes différents
Basculez vers la page Home.aspx, puis appuyez sur CTRL+F5.
Dans la liste déroulante, sélectionnez Green ou Red.
Notez que la feuille de style est appliquée aux éléments HTML de la page et l'apparence est appliquée au contrôle de liste déroulante.
Étapes suivantes
Pour plus d'informations sur l'utilisation des pages maîtres, consultez Procédure pas à pas : création et utilisation de pages maîtres ASP.NET dans Visual Web Developer.
Voir aussi
Tâches
Comment : appliquer des thèmes ASP.NET