Tutorial: Personalizar un sitio Web mediante temas en Visual Studio

Artículo
10/07/2008

Actualización: noviembre 2007

Este tutorial muestra cómo utilizar temas para aplicar un aspecto coherente a las páginas y controles de un sitio Web. Un tema puede contener archivos de máscara que definan un aspecto común para cada uno de los controles, una o varias hojas de estilo, y gráficos comunes para su uso con los controles, por ejemplo el control TreeView. Este tutorial lo muestra cómo trabajar con temas de ASP.NET en los sitios Web.

Las tareas ilustradas en este tutorial incluyen:

Aplicar temas de ASP.NET predefinidos a páginas individuales y a un sitio en conjunto.
Crear un tema propio con máscaras, que se utilizan para definir la apariencia de controles individuales.

Requisitos previos

Para poder completar este tutorial, necesitará:

Microsoft Visual Web Developer (Visual Studio).
El entorno .NET Framework.

Crear el sitio Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, mediante los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a la sección siguiente. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevositio Web.

Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta en la que desea conservar las páginas de su sitio Web.

Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.

Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Para empezar a trabajar con temas en este tutorial, va a configurar un control Button, un control Calendar y un control Label, de manera que pueda ver cómo los temas afectan a dichos controles.

Para colocar los controles en la página

Cambie a la vista Diseño.
Del grupo Estándar del Cuadro de herramientas, arrastre un control Calendar, un control Button y un control Label hacia la página. El diseño exacto de la página no es importante.

Nota:

No aplique ningún formato a ninguno de los controles. Por ejemplo, no utilice el comando AutoFormat para establecer el aspecto del control Calendar.
Cambie a la vista Código fuente.
Asegúrese de que el elemento <head> de la página tiene el atributo de forma que diga lo se indica a continuación:
```
<head ></head>
```
Guarde la página.

Nota:
No aplique ningún formato a ninguno de los controles. Por ejemplo, no utilice el comando AutoFormat para establecer el aspecto del control Calendar.

Para probar la página, puede verla antes de que se aplique un tema, y a continuación con temas diferentes.

Crear y aplicar un tema a una página

Con ASP.NET resulta muy fácil aplicar un tema predefinido a una página o crear un tema único. En esta parte del tutorial, creará un tema con algunas máscaras simples, que definen el aspecto de los controles.

Para crear un tema nuevo

En Visual Web Developer, haga clic con el botón secundario en el nombre del sitio Web, haga clic en Agregar carpeta ASP.NET y, a continuación, haga clic en Tema.

Se crean la carpeta denominada App_Themes y una subcarpeta denominada Theme1.
Cambie el nombre de la carpeta Theme1 a sampleTheme.

El nombre de esta carpeta será el nombre del tema que cree (aquí, sampleTheme). El nombre exacto no tiene importancia, pero debe recordarlo cuando aplique el tema personalizado.
Haga clic con el botón secundario en la carpeta sampleTheme, seleccione Agregar nuevo elemento, agregue un nuevo archivo de texto y denomínelo sampleTheme.skin.
En el archivo sampleTheme.skin, agregue definiciones de máscaras como se muestra en el ejemplo de código siguiente.
```
<asp:Label  ForeColor="red" Font-Size="14pt" Font-Names="Verdana" />
<asp:button  Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>
```
Nota:

Las características exactas que defina no tienen importancia. Los valores de la selección anterior son sugerencias que serán más obvias cuando pruebe el tema más adelante.

Las definiciones de máscaras son parecidas a la sintaxis para crear un control, salvo que las definiciones sólo contienen opciones que afectan al aspecto del control. Por ejemplo, las definiciones de máscaras no incluyen una opción para la propiedad ID.
Guarde el archivo de máscara y ciérrelo.

Nota:
Las características exactas que defina no tienen importancia. Los valores de la selección anterior son sugerencias que serán más obvias cuando pruebe el tema más adelante.

Ya puede probar la página antes de que se aplique ningún tema.

Nota:
Si agrega un archivo de hoja de estilos en cascada (CSS) a la carpeta sampleTheme, se aplicará a todas las páginas que utilicen el tema.

Para probar los temas

Presione CTRL+F5 para ejecutar la página.

Los controles se muestran con su aspecto predeterminado.
Cierre el explorador y, a continuación, vuelva a Visual Web Developer.
En la vista Código fuente, agregue el atributo siguiente a la directiva @ Page:
```
<%@ Page Theme="sampleTheme" ... %> 
```
Nota:

Debe indicar el nombre de un tema real en el valor de atributo (en este caso, el archivo sampleTheme.skin que definió previamente).
Presione CTRL+F5 para ejecutar la página de nuevo.

Esta vez, los controles se representan con la combinación de colores definida en el tema.

Los controles Label y Button aparecerán con la configuración que realizó en el archivo sampleTheme.skin. Puesto que no realizó una entrada en el archivo sampleTheme.skin para el control Calendar, se muestra con su aspecto predeterminado.
En Visual Web Developer, establezca el tema en el nombre de otro tema, si lo hay.
Presione CTRL+F5 para ejecutar la página de nuevo.

Los controles vuelven a cambiar de aspecto.

Nota:
Debe indicar el nombre de un tema real en el valor de atributo (en este caso, el archivo sampleTheme.skin que definió previamente).

Temas de hojas de estilos y temas de personalización

Una vez que haya creado un tema, puede adaptarlo a su uso en una aplicación asociándolo a una página como tema de personalización (como se ha hecho en la sección anterior) o como tema de hoja de estilos. Los temas de hojas de estilos utilizan los mismos archivos de temas que los temas de personalización, pero tienen menos prioridad en los controles y propiedades de las páginas; dicha prioridad equivale a la de un archivo de CSS. En ASP.NET, el orden de prioridad es:

Configuración del tema, incluidos los temas establecidos en el archivo Web.config.
Configuración de la página local.
Configuración de temas de hoja de estilos.

En este sentido, si decide utilizar un tema de hoja de estilos, las propiedades del tema quedarán reemplazadas por lo que se declare localmente en la página. De igual forma, si utiliza un tema de personalización, las propiedades del tema reemplazarán todo lo que haya en la página local y todo lo que contenga un tema de hoja de estilos que se esté utilizando.

Para utilizar un tema de hoja de estilos y ver el orden de prioridad

Cambie a la vista Código fuente.
Cambie la declaración de la página:
```
<%@ Page theme="sampleTheme" %>
```
a una declaración de tema de hoja de estilos:
```
<%@ Page StyleSheetTheme="sampleTheme" %>
```
Presione CTRL+F5 para ejecutar la página.

Observe que la propiedad ForeColor del control Label1 es rojo.
Cambie a la vista Diseño.
Seleccione Label1 y, en Propiedades, establezca ForeColor en azul.
Presione CTRL+F5 para ejecutar la página.

La propiedad ForeColor de Label1 es azul.
Cambie a la vista Código fuente.
Cambie la declaración de la página para declarar un tema, en lugar de un tema de hoja de estilos; para ello, vuelva a cambiar:
```
<%@ Page StyleSheetTheme="sampleTheme" %>
```
a:
```
<%@ Page Theme="sampleTheme" %>
```
Presione CTRL+F5 para ejecutar la página.

La propiedad ForeColor de Label1 vuelve a ser rojo.

Basar un tema personalizado en controles existentes

Una manera sencilla de crear definiciones de máscaras consiste en usar el diseñador para establecer las propiedades de aspecto y, a continuación, copiar la definición de los controles en un archivo de máscara.

Para basar un tema personalizado en controles existentes

En la vista Diseño, establezca las propiedades del control Calendar de manera que el control tenga un aspecto especial. Como sugerencia, puede usar los siguientes valores de configuración:
- BackColor Cián
- BorderColor Rojo
- BorderWidth 4
- CellSpacing 8
- Font-Name Arial
- Font-Size Grande
- SelectedDayStyle-BackColor Rojo
- SelectedDayStyle-ForeColor Amarillo
- TodayDayStyle-BackColor Rosa
Nota:

Las características exactas que defina no tienen importancia. Los valores de la lista anterior son sugerencias que serán más obvias cuando pruebe el tema más adelante.
Cambie a la vista Código fuente y copie el elemento <asp:calendar> y sus atributos.
Cambie al archivo sampleTheme.skin, o ábralo.
Pegue la definición del control Calendar en el archivo sampleTheme.skin.
Quite la propiedad ID de la definición del archivo sampleTheme.skin.
Guarde el archivo sampleTheme.skin.
Cambie a la página Default.aspx y arrastre un segundo control Calendar a la página. No establezca ninguna de sus propiedades.
Ejecute la página Default.aspx.

Los dos controles Calendar tendrán el mismo aspecto. El primer control Calendar refleja los valores de propiedad explícitos que realizó. El segundo control Calendar hereda sus propiedades de aspecto de la definición de máscara que realizó en el archivo sampleTheme.skin.

Nota:
Las características exactas que defina no tienen importancia. Los valores de la lista anterior son sugerencias que serán más obvias cuando pruebe el tema más adelante.

Aplicar temas a un sitio Web

Puede aplicar un tema a todo un sitio Web, lo que significa que no tiene que volver a aplicarlo a cada una de las páginas. Si lo desea, puede reemplazar la configuración de los temas en una página concreta.

Para establecer un tema para un sitio Web

Cree un archivo Web.config si no se agregó uno automáticamente a l sitio Web; para ello, siga estos pasos:
1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio Web y, a continuación, haga clic en Agregar nuevo elemento.
2. En Plantillas, seleccione Archivo de configuración Web y, a continuación, haga clic en Agregar.
  
  Nota No es necesario escribir un nombre, porque el archivo siempre se denomina Web.config.
Agregue el elemento <pages> si todavía no existe. El elemento <pages> debe aparecer dentro del elemento <system.web>.
Agregue el atributo siguiente al elemento <pages>.
```
<pages theme="sampleTheme" /> 
```
Nota:

Web.config distingue entre mayúsculas y minúsculas y los valores utilizan las mayúsculas y minúsculas como en Camel. (Por ejemplo: tema y styleSheetTheme).
Guarde y cierre el archivo Web.config.
Cambie a Default.aspx y cambie a la vista Código fuente.
Quite el atributo theme="themeName" de la declaración de la página.
Presione CTRL+F5 para ejecutar Default.aspx.

La página se muestra con el tema que especificó en el archivo Web.config.

Nota:
Web.config distingue entre mayúsculas y minúsculas y los valores utilizan las mayúsculas y minúsculas como en Camel. (Por ejemplo: tema y styleSheetTheme).

Si decide especificar un nombre de tema en la declaración de la página, reemplazará a cualquier tema especificado en el archivo Web.config.

Pasos siguientes

La compatibilidad de ASP.NET con los temas proporciona varias opciones por adaptar la apariencia y el funcionamiento de toda una aplicación. En este tutorial se han tratado algunos aspectos básicos, pero podría interesarle obtener más información. Por ejemplo, podría desear obtener más información sobre:

Utilizar temas en general. Para obtener más información, vea Información general sobre temas y máscaras de ASP.NET
Utilizar temas con código. Para obtener más información, vea Cómo: Aplicar temas de ASP.NET mediante programación

Vea también

Conceptos

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

Compartir a través de