Compartir a través de

Cómo: Definir temas de páginas ASP.NET

  • Artículo

Actualización: noviembre 2007

En Visual Web Developer, puede definir temas de página y aplicarlos a una o varias páginas de la aplicación. También puede crear temas en el nivel del equipo que se pueden utilizar en varias aplicaciones del servidor.

Los temas se componen de varios archivos de base, por ejemplo, hojas de estilos para el aspecto de las páginas y máscaras de control para definir el aspecto de los controles de servidor, así como de otras imágenes y archivos. El contenido de un tema es el mismo si el tema se define como un tema de página o como un tema global.

Los temas se pueden aplicar mediante el uso de los atributos Theme o StyleSheetTheme de la directiva @ Page, o estableciendo el elemento Elemento pages (Esquema de configuración de ASP.NET) en el archivo de configuración de la aplicación. Visual Web Developer sólo representará visualmente los temas aplicados mediante el atributo StyleSheetTheme.

Para crear un tema de página

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio Web para el que desea crear un tema de página y, a continuación, haga clic en Agregar carpeta ASP.NET.

  2. Haga clic en Tema.

    Si la carpeta App_Themes no existe, Visual Web Developer la crea. A continuación, Visual Web Developer crea una nueva carpeta para el tema como carpeta secundaria de la carpeta App_Themes.

  3. Escriba un nombre para la nueva carpeta.

    El nombre de esta carpeta es también el nombre del tema de la página. Por ejemplo, si crea una carpeta denominada \App_Themes\FirstTheme, el nombre del tema es FirstTheme.

  4. Agregue archivos a la carpeta para incorporar las máscaras de controles, hojas de estilos e imágenes que compondrán el tema.

Para agregar un archivo de máscara y una máscara a un tema de página

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del tema y, a continuación, haga clic en Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, haga clic en Archivo de máscara.

  3. En el cuadro Nombre, escriba un nombre para el archivo .skin y, a continuación, haga clic en Agregar.

    La convención que se suele seguir es crear un archivo .skin por control, como Button.skin o Calendar.skin. No obstante, se pueden crear tantos archivos .skin como se necesiten.

  4. En el archivo .skin, agregue una definición normal de control (con sintaxis declarativa), pero incluyendo únicamente las propiedades que vaya a establecer para el tema. La definición del control debe incluir el atributo y no debe incluir el atributo ID="".

    En el ejemplo de código siguiente se muestra una máscara de control predeterminada para un control Button en la que se define el color y la fuente de todos los controles Button del tema:

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

    Esta máscara de controles Button no contiene un atributo skinID. Se aplicará a todos los controles Button de la aplicación con el tema que no especifiquen el atributo skinID.

    Nota:

    Una forma sencilla de crear una máscara de controles consiste en agregar el control a una página y configurarlo hasta conseguir el aspecto deseado. Por ejemplo, podría agregar un control Calendar a una página y establecer su encabezado de días, de fecha seleccionada y otras propiedades. A continuación, puede copiar la definición del control de la página en un archivo de máscara, pero debe quitar el atributo ID.

  5. Repita los pasos 2 y 3 para cada archivo de máscara de controles que desee crear.

    Nota:

    Sólo podrá definir una máscara predeterminada por control. Podrá utilizar el atributo SkinID de la declaración de control de la máscara para crear máscaras con nombre para el mismo tipo de control.

Para agregar un archivo de hoja de estilos en cascada al tema de la página

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del tema y, a continuación, haga clic en Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, haga clic en Hoja de estilos.

  3. En el cuadro Nombre, escriba un nombre para el archivo .css y, a continuación, haga clic en Agregar.

    Cuando el tema se aplica a una página, ASP.NET agrega al elemento de encabezado de la página una referencia a la hoja de estilos. Para obtener más información, vea Cómo: Aplicar temas de ASP.NET

Crear temas globales

Un tema global se aplica a todos los sitios Web de un servidor. La ubicación en la que se crea una carpeta para los temas globales depende de si se ejecuta el sitio Web con Internet Information Services (IIS) o si se prueba con el servidor de desarrollo de ASP.NET.

Nota:

Si está trabajando con un sitio Web del sistema de archivos, de manera predeterminada Visual Web Developer ejecuta el sitio Web para realizar las pruebas iniciando el servidor de desarrollo de ASP.NET. Para otros tipos de sitios Web, Visual Web Developer ejecuta las páginas en IIS para realizar las pruebas.

Para crear un tema global

  1. Cree una carpeta Themes con la ruta de acceso siguiente.

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

    El nombre de la carpeta para los temas globales es Themes, no App_Themes, como es para los temas de página.

    Cree una subcarpeta de la carpeta Themes para que contenga los archivos de temas globales.

    El nombre de la subcarpeta es el nombre del tema. Por ejemplo, si crea una carpeta denominada \Themes\FirstTheme, el nombre del tema es FirstTheme.

  2. Agregue archivos a la carpeta para incorporar las máscaras de controles, hojas de estilos e imágenes que compondrán el tema global.

    Nota:

    Al definir un tema global, no puede agregarle directamente archivos de máscara y de hoja de estilos utilizando Visual Web Developer. Puede resultarle más fácil definir y probar el tema como tema de página y, después, copiarlo en la carpeta de los temas globales del servidor Web.

  3. Si el sitio Web es un sitio Web de sistema de archivos que está probando con el servidor de desarrollo de ASP.NET, el tema está listo para realizar las pruebas.

  4. Si está probando el sitio Web utilizando un sitio Web local de IIS, abra una ventana de comandos y ejecute aspnet_regiis -c para instalar el tema en el servidor donde e ejecuta IIS.

  5. Si está probando el tema en un sitio Web remoto o en un sitio Web de FTP, debe crear manualmente una carpeta de temas en la siguiente ruta de acceso.

    IISRootWeb\aspnet_client\system_web\version\Themes

Vea también

Conceptos

Información general sobre temas y máscaras de ASP.NET