Procédure pas à pas : personnalisation d'un site Web à l'aide de thèmes dans Visual Studio
Mise à jour : novembre 2007
Cette procédure pas à pas illustre comment utiliser des thèmes pour donner une apparence uniforme aux pages et aux contrôles de votre site Web. Un thème peut inclure des fichiers d'apparence qui définissent une apparence commune pour les contrôles, une ou plusieurs feuilles de style et les graphismes courants destinés à être utilisés avec les contrôles, tels que le contrôle TreeView. Cette procédure pas à pas illustre comment utiliser les thèmes ASP.NET dans vos sites Web.
Cette procédure pas à pas illustre les tâches suivantes :
application de thèmes ASP.NET prédéfinis aux pages individuelles et à votre site dans son ensemble ;
création de votre propre thème qui inclut des apparences utilisées pour définir l'apparence des contrôles.
Composants requis
Pour exécuter cette procédure pas à pas, vous avez besoin de :
Microsoft Visual Web Developer (Visual Studio).
.NET Framework
Création du site Web
Si vous avez déjà créé un site Web dans Visual Web Developer (par exemple, en effectuant 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. 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.
Pour votre première utilisation des thèmes dans cette procédure pas à pas, vous définirez un contrôle Button, un contrôle Calendar et un contrôle Label, de façon à afficher comment ces contrôles sont affectés par les thèmes.
Pour placer des contrôles sur la page
Basculez en mode Design.
À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle Calendar, un contrôle Button et un contrôle Label sur la page. La disposition exacte de la page n'est pas importante.
.gif "Remarque")
Remarque :N'appliquez pas n'importe quelle mise en forme à n'importe quel contrôle. Par exemple, n'utilisez pas la commande AutoFormat pour définir l'apparence du contrôle Calendar.
Basculez en mode Source.
Assurez-vous que l'élément <head> de la page a l'attribut afin qu'il soit semblable au code suivant :
<head ></head>Enregistrez la page.
Pour tester la page, vous afficherez la page avant qu'un thème soit appliqué, puis avec différents thèmes.
Création et application d'un thème à une page
ASP.NET facilite l'application d'un thème prédéfini à une page ou la création d'un thème unique. Dans cette partie de la procédure pas à pas, vous créerez un thème en utilisant des apparences simples qui définissent l'apparence des contrôles.
Pour créer un thème
Dans Visual Web Developer, cliquez avec le bouton droit sur votre site Web, puis cliquez sur Ajouter le dossier ASP.NET puis cliquez sur Thème.
Le dossier nommé App_Themes et un sous-dossier nommé Theme1 sont créés.
Renommez le dossier Theme1sampleTheme.
Le nom de ce dossier sera le nom du thème que vous créez (ici, sampleTheme). Le nom exact n'a pas importance, mais vous devez vous en souvenir lorsque vous appliquez votre thème personnalisé.
Cliquez avec le bouton droit sur le dossier sampleTheme, sélectionnez Ajouter un nouvel élément, ajoutez un nouveau fichier texte et nommez-le sampleTheme.skin.
Dans le fichier sampleTheme.skin, ajoutez des définitions d'apparence comme le montre l'exemple de code suivant.
<asp:Label ForeColor="red" Font-Size="14pt" Font-Names="Verdana" /> <asp:button Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>Remarque :Les caractéristiques exactes que vous définissez n'ont pas d'importance. Les valeurs de la sélection précédente sont des suggestions qui seront plus compréhensibles lorsque vous testerez le thème ultérieurement.
Les définitions d'apparence sont semblables à la syntaxe en matière de création de contrôle, mais les définitions incluent uniquement les paramètres qui affectent l'apparence du contrôle. Par exemple, les définitions d'apparence n'incluent pas de paramètre pour la propriété ID.
Enregistrez le fichier d'apparence et fermez-le.
Vous pouvez à présent tester la page avant que tous les thèmes soient appliqués.
| Remarque : |
|---|
Si vous ajoutez un fichier de feuille de style en cascade (CSS) à votre dossier sampleTheme, il sera appliqué à toutes les pages qui utilisent le thème. |
Pour tester des thèmes
Appuyez sur CTRL+F5 pour exécuter la page.
Les contrôles sont affichés avec leur apparence par défaut.
Fermez le navigateur, puis revenez dans Visual Web Developer.
En mode Source, ajoutez l'attribut suivant à la directive @ Page :
<%@ Page Theme="sampleTheme" ... %>Remarque :Vous devez indiquer le nom d'un thème existant dans la valeur d'attribut (dans ce cas, le fichier sampleTheme.skin que vous avez défini précédemment).
Appuyez sur CTRL+F5 pour exécuter la page à nouveau.
Ce temps, les contrôles sont restitués avec le jeu de couleurs défini dans votre thème.
Les contrôles Label et Button apparaîtront avec les paramètres que vous avez définis dans le fichier sampleTheme.skin. Étant donné que vous n'entrez aucune information dans le fichier sampleTheme.skin pour le contrôle Calendar, il est affiché avec son apparence par défaut.
Dans Visual Web Developer, affectez le nom d'un autre thème (s'il existe) au thème.
Appuyez sur CTRL+F5 pour exécuter la page à nouveau.
L'apparence des contrôles change de nouveau.
Thèmes de feuille de style et thèmes de personnalisation
Après avoir créé votre thème, vous pouvez adapter son utilisation dans votre application en l'associant à votre page comme thème de personnalisation (comme celui qui a été créé dans la section précédente) ou comme thème de feuille de style. Un thème de feuille de style utilise les mêmes fichiers de thème qu'un thème de personnalisation, mais sa priorité dans les contrôles de la page est inférieure, elle est équivalente à celle d'un fichier CSS. Dans ASP.NET, l'ordre de priorité est :
paramètres de thème, y compris les thèmes définis dans votre fichier Web.config ;
paramètres de page locale ;
paramètres du thème de feuille de style.
À cet égard, si vous choisissez d'utiliser un thème de feuille de style, les propriétés de votre thème seront substituées par tout ce qui a été déclaré localement dans la page. De la même façon, si vous utilisez un thème de personnalisation, les propriétés de votre thème substitueront tout dans la page locale et dans tout thème de feuille de style utilisé.
Pour utiliser un thème de feuille de style et consulter l'ordre de priorité
Basculez en mode Source.
Transformez la déclaration de page :
<%@ Page theme="sampleTheme" %>en une déclaration du thème de feuille de style :
<%@ Page StyleSheetTheme="sampleTheme" %>Appuyez sur CTRL+F5 pour exécuter la page.
Notez que la propriété ForeColor du contrôle Label1 est rouge.
Basculez en mode Design.
Sélectionnez Label1 et, dans Propriétés, affectez bleu à ForeColor.
Appuyez sur CTRL+F5 pour exécuter la page.
La propriété ForeColor de Label1 est bleue.
Basculez en mode Source.
Modifiez la déclaration de page pour déclarer un thème, plutôt qu'un thème de feuille de style, en remplaçant :
<%@ Page StyleSheetTheme="sampleTheme" %>de nouveau par :
<%@ Page Theme="sampleTheme" %>Appuyez sur CTRL+F5 pour exécuter la page.
La propriété ForeColor de Label1 est encore rouge.
Thème personnalisé basé sur des contrôles existants
Une façon simple de créer des définitions d'apparence consiste à utiliser le concepteur pour définir des propriétés d'apparence, puis à copier la définition du contrôle dans un fichier d'apparence.
Pour baser un thème personnalisé sur des contrôles existants
En mode Design, définissez les propriétés du contrôle Calendar afin que le contrôle ait une apparence différente. Voici des suggestions de paramètres :
BackColor Cyan
BorderColor Rouge
BorderWidth 4
CellSpacing 8
Font-Name Arial
Font-Size Grande
SelectedDayStyle-BackColor Rouge
SelectedDayStyle-ForeColor Jaune
TodayDayStyle-BackColor Rose
Remarque :Les caractéristiques exactes que vous définissez n'ont pas d'importance. Les valeurs de la liste précédente sont des suggestions qui seront plus compréhensibles lorsque vous testerez le thème ultérieurement.
Basculez en mode Source et copiez l'élément <asp:calendar> et ses attributs.
Basculez vers le fichier sampleTheme.skin ou ouvrez-le.
Collez la définition du contrôle Calendar dans le fichier sampleTheme.skin.
Supprimez la propriété ID de la définition dans le fichier sampleTheme.skin.
Enregistrez le fichier sampleTheme.skin.
Basculez vers la page Default.aspx et faites glisser un deuxième contrôle Calendar sur la page. Ne définissez aucune de ses propriétés.
Exécutez la page Default.aspx.
Les deux contrôles Calendar apparaîtront identiques. Le premier contrôle Calendar reflète les paramètres de propriété explicites que vous avez définis. Le deuxième contrôle Calendar a hérité ses propriétés d'apparence de la définition d'apparence que vous avez effectuée dans le fichier sampleTheme.skin.
Application de thèmes à un site Web
Vous pouvez appliquer un thème à un site Web entier, ce qui signifie que vous n'avez pas besoin de réappliquer le thème à chaque page. (Si vous le souhaitez, vous pouvez substituer les paramètres des thèmes sur une page.)
Pour définir un thème à un site Web
Si un fichier Web.config n'a pas été ajouté automatiquement à votre site Web, créez-en un en suivant ces étapes :
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, sélectionnez Fichier de configuration Web, puis cliquez sur Ajouter.
Remarque Il n'est pas nécessaire de taper un nom, car le fichier est toujours nommé Web.config.
Ajoutez l'élément <pages> s'il n'en existe encore aucun. L'élément <pages> doit apparaître à l'intérieur de l'élément <system.web>.
Ajoutez l'attribut suivant à l'élément <pages>.
<pages theme="sampleTheme" />Remarque :Web.config respecte la casse et les valeurs utilisent une casse mixte. (Par exemple: theme et styleSheetTheme).
Enregistrez et fermez le fichier Web.config.
Basculez vers Default.aspx et basculez en mode Source.
Supprimez l'attribut theme="themeName" de votre déclaration de page.
Appuyez sur CTRL+F5 pour exécuter Default.aspx.
La page est à présent affichée avec le thème que vous avez spécifié dans le fichier Web.config.
Si vous choisissez de spécifier un nom de thème dans votre déclaration de page, il substituera tout thème spécifié dans votre fichier Web.config.
Étapes suivantes
La prise en charge d'ASP.NET concernant les thèmes vous offre diverses options permettant d'adapter l'apparence d'une application entière. Cette procédure pas à pas a traité certains points essentiels, mais vous souhaitez peut-être en savoir plus. Vous pouvez, par exemple, en apprendre davantage sur :
utilisation des thèmes en général ; Pour plus d'informations, consultez Vue d'ensemble des thèmes et des apparences ASP.NET.
utilisation des thèmes avec le code. Pour plus d'informations, consultez Comment : appliquer des thèmes ASP.NET par programme.