Partager via

Comment : définir des thèmes de page ASP.NET

  • Article

Mise à jour : novembre 2007

Dans Visual Web Developer, vous pouvez définir des thèmes de pages que vous pouvez ensuite appliquer à une ou plusieurs pages dans votre application. Vous pouvez également créer des thèmes au niveau de l'ordinateur qui peuvent être utilisés dans plusieurs applications sur le serveur.

Les thèmes sont composés de plusieurs fichiers de prise en charge, et notamment des feuilles de style pour l'apparence de page, des apparences (skins) de contrôle pour définir l'apparence des contrôles serveur ainsi que d'autres images ou fichiers de prise en charge constituant le thème. Le contenu d'un thème est le même si le thème est défini comme thème de page ou comme thème global.

Les thèmes peuvent s'appliquer à l'aide de Theme ou de l'attribut StyleSheetTheme de la directive @ Page, ou en définissant l'élément pages (voir pages, élément (Schéma des paramètres ASP.NET)) dans le fichier de configuration de l'application. Visual Web Developer représentera visuellement uniquement les thèmes appliqués à l'aide de l'attribut StyleSheetTheme.

Pour créer un thème de page

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web pour lequel vous souhaitez créer un thème de page, puis cliquez sur Ajouter le dossier ASP.NET.

  2. Cliquez sur Thème.

    Si le dossier App_Themes n'existe pas déjà, Visual Web Developer en crée un. Visual Web Developer crée ensuite un nouveau dossier pour le thème sous la forme d'un dossier enfant du dossier App_Themes.

  3. Tapez le nom du nouveau dossier.

    Le nom de ce dossier est également le nom du thème de page. Par exemple, si vous créez un dossier nommé \App_Themes\FirstTheme, le nom de votre thème est FirstTheme.

  4. Ajoutez à votre nouveau dossier des fichiers d'apparences de contrôle, de feuilles de style et d'images composant le thème.

Pour ajouter un fichier d'apparence et une apparence à un thème de page

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre thème, puis cliquez sur Ajouter un nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur Fichier d'apparence.

  3. Dans la zone Nom, tapez un nom pour le fichier .skin, puis cliquez sur Ajouter.

    Une convention courante consiste à créer un fichier .skin par contrôle, par exemple Button.skin ou Calendar.skin. Vous pouvez toutefois créer autant de fichiers .skin souhaités.

  4. Dans le fichier .skin, ajoutez une définition de contrôle normale à l'aide de la syntaxe déclarative, mais incluez uniquement les propriétés que vous souhaitez définir pour le thème. La définition du contrôle doit inclure l'attribut mais ne doit pas inclure l'attribut ID="".

    L'exemple de code suivant illustre une apparence de contrôle par défaut pour un contrôle Button, définissant la couleur et la police de tous les contrôles Button dans le thème :

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

    Cette apparence du contrôle Button ne contient pas d'attribut skinID. Elle s'appliquera à tous les contrôles Button de l'application à thème qui ne spécifient pas l'attribut skinID.

    Remarque :

    Pour créer une apparence, une méthode facile consiste à ajouter le contrôle à une page et à le configurer comme il vous convient. Par exemple, vous pouvez ajouter un contrôle Calendar à une page et définir son en-tête des jours, la date sélectionnée et d'autres propriétés. Ensuite, vous pouvez copier la définition du contrôle de la page dans un fichier .skin, mais vous devez supprimer l'attribut ID.

  5. Répétez les étapes 2 et 3 pour chaque fichier d'apparence de contrôle que vous souhaitez créer.

    Remarque :

    Vous ne pouvez définir qu'une seule apparence par défaut par contrôle. Utilisez l'attribut SkinID dans la déclaration de contrôle de l'apparence pour créer des apparences nommées pour le même type de contrôle.

Pour ajouter un fichier de feuille de style en cascade à votre thème de page

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre thème, puis cliquez sur Ajouter un nouvel élément.

  2. Dans la boîte de dialogue Ajouter un nouvel élément, cliquez sur Feuille de style.

  3. Dans la zone Nom, tapez un nom pour le fichier .css, puis cliquez sur Ajouter.

    Lorsque le thème est appliqué à une page, ASP.NET ajoute une référence à la feuille de style à l'élément head de la page. Pour plus d'informations, consultez Comment : appliquer des thèmes ASP.NET

Création de thèmes globaux

Un thème global s'applique à tous les sites Web sur un serveur. L'emplacement dans lequel vous créez un dossier pour les thèmes globaux dépend de si vous exécutez votre site Web à l'aide des services IIS (Internet Information Services) ou si vous le testez à l'aide du serveur de développement ASP.NET.

Remarque :

Si vous utilisez un site Web de système de fichiers, par défaut, Visual Web Developer exécute votre site Web pour le tester en lançant le serveur de développement ASP.NET. Pour d'autres types de sites Web, Visual Web Developer exécute des pages dans IIS pour les tester.

Pour créer un thème global

  1. Créez un dossier Themes en utilisant le chemin suivant :

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

    Le nom du dossier des thèmes globaux est Themes et non App_Themes, comme c'est le cas pour les thèmes de pages.

    Créez un sous-dossier dans le dossier Themes pour y stocker vos fichiers de thème global.

    Le nom du sous-dossier est le nom du thème. Par exemple, si vous créez un dossier nommé \Themes\FirstTheme, le nom de votre thème est FirstTheme.

  2. Ajoutez à votre nouveau dossier des fichiers d'apparences de contrôle, de feuilles de style et d'images composant le thème global.

    Remarque :

    Lorsque vous définissez un thème global, vous ne pouvez pas y ajouter directement des fichiers d'apparence et de feuille de style à l'aide de Visual Web Developer. Vous pouvez trouver facile de définir et de tester le thème en tant que thème de page, puis de le copier dans le dossier utilisé pour les thèmes globaux sur votre serveur Web.

  3. Si votre site Web est un site Web de système de fichiers que vous testez avec le serveur de développement ASP.NET, votre thème est prêt à être testé.

  4. Si vous testez votre site Web à l'aide d'un site Web IIS local, ouvrez une fenêtre Commande, puis exécutez aspnet_regiis -c pour installer le thème sur le serveur qui exécute IIS.

  5. Si vous testez votre thème sur un site Web distant ou un site Web FTP, vous devez créer manuellement un dossier Themes en utilisant le chemin suivant :

    IISRootWeb\aspnet_client\system_web\version\Themes

Voir aussi

Concepts

Vue d'ensemble des thèmes et des apparences ASP.NET