Tutorial: Crear temas seleccionables por el usuario
Actualización: noviembre 2007
En este tutorial se muestra cómo crear una página ASP.NET que permita al usuario seleccionar un tema para la página. Aunque en este ejemplo se utiliza una sola máscara de control y un archivo de hoja de estilos en cascada (CSS) básico, los principios mostrados se aplican a temas más complejos que incluyan gráficos, esquemas de diseño diferentes en el archivo CSS y máscaras de control de servidor más complejas.
Entre las tareas ilustradas en este tutorial se incluyen las siguientes:
Crear un tema, incluido un archivo CSS y una máscara de control de servidor, en Microsoft Visual Web Developer.
Crear una página principal de ASP.NET que utilice un tema.
Crear una página de ASP.NET con una página principal aplicada que utilice un tema.
Crear un control de servidor de lista desplegable que aplique un nuevo tema a una página, incluido el cambio de estilo de los elementos de la página principal.
Ejecutar una página para mostrar temas diferentes aplicados a la página.
Requisitos previos
Para completar este tutorial, necesitará:
Visual Web Developer (Visual Studio).
.NET Framework.
Crear un sitio Web
Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos que se describen 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, "Crear una página principal". De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.
Para crear un sitio Web de 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 Servicio Web ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta donde desea guardar 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.
Crear un Tema
Un tema es una colección de valores de propiedades que permiten definir la apariencia de páginas y controles. Puede aplicar una apariencia similar a todas las páginas de una aplicación Web. Los temas se componen de varios elementos: máscaras de control de servidor, archivos CSS y otros recursos. En este ejemplo, se utiliza una máscara y una hoja de estilos para crear un tema.
Los temas se definen en directorios especiales del proyecto de sitio Web.
Para crear un tema
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del proyecto del sitio Web, haga clic en Agregar carpeta ASP.NET y, a continuación, haga clic en Tema.
Se crea automáticamente la carpeta App_Themes y se agrega una nueva carpeta de temas denominada Theme1.
Haga clic con el botón secundario del mouse en la nueva carpeta Theme1 y haga clic en Cambiar nombre. Escriba Azul y presione ENTRAR.
Haga clic con el botón secundario del mouse en la nueva carpeta Azul y, a continuación, haga clic en Agregar nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, seleccione Archivo de máscara y asigne el nombre default.skin al archivo. Haga clic en Agregar.
En el Explorador de soluciones, vuelva a hacer clic con el botón secundario del mouse en la nueva carpeta Azul y, a continuación, haga clic en Agregar nuevo elemento.
En el cuadro de diálogo Agregar nuevo elemento, seleccione Hoja de estilos. Asigne el nombre default.css a la hoja de estilos. Haga clic en Agregar.
Se creará el primer tema con un archivo CSS y un archivo de máscara de control de servidor vacíos. En breve modificará estos archivos, pero primero debe crear una página que contenga un control y algún código HTML que se pueda aplicar al tema.
Crear una página principal
Para mostrar lo fácil que puede ser aplicar un tema a una página principal y a una página que utilice dicha página principal, cree una página principal simple para utilizarla con la página Default.aspx del proyecto Web.
Para crear la página principal
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en AgregarNuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Página principal.
En el cuadro Nombre, escriba Master1.master.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Desactive la casilla Colocar el código en un archivo independiente y, a continuación, haga clic en Agregar.
La nueva página principal se abre en la vista Código fuente. En la parte superior de la página hay una declaración @ Master en lugar de la declaración @ Page que normalmente se encuentra en la parte superior de las páginas ASP.NET. El cuerpo de la página contiene un control asp:contentplaceholder, que define el área de la página principal donde se combinará el contenido reemplazable de las páginas de contenido en tiempo de ejecución. En el tutorial, trabajará después más con el marcador de posición de contenido.
Diseñar la página principal
La página principal define los elementos que constituyen la página. Puede contener cualquier combinación de texto estático y controles. Una página principal también contiene uno o más marcadores de posición de contenido que indican dónde aparecerá el contenido dinámico cuando se muestren las páginas.
En este tutorial, se utiliza una tabla que contiene un título, varias reglas horizontales y un marcador de posición de contenido de la página principal como el diseño de la página Home.aspx.
Para crear una tabla para la página principal
Con el archivo Master1.master seleccionado en la vista Código fuente, seleccione el texto situado entre los dos elementos form y pegue el contenido siguiente en el área seleccionada. Tenga en cuenta que este código coloca el marcador de posición de contenido en una tabla en lugar de entre los elementos div, como ocurre en el diseño predeterminado de la página principal.
<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 página principal tiene ahora un diseño que se puede aplicar a la página de contenido (denominada Home.aspx) que creará en la siguiente sección.
Crear una página de contenido
La página principal proporciona la plantilla para el contenido. El contenido de la página principal se define creando una página ASP.NET que se asocia a la página principal. La página de contenido es una página especializada de ASP.NET que incluye sólo el contenido que se va a combinar con la página principal. En la página de contenido, agregará el texto y los controles que desee mostrar cuando los usuarios soliciten la página.
La página de contenido utilizará la página principal que ha creado y los temas que creará a continuación. La página utilizará el marcador de posición de contenido de la página principal y tendrá un título, un subtítulo y una lista desplegable. Como la página va a utilizar una página principal, debe contener un atributo MasterPageFile en la directiva @ Page, así como el marcador de posición de contenido.
Para crear la página de contenido
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, seleccione Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
En el cuadro Nombre, escriba Home.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Active la casilla Seleccionar la página principal y, a continuación, haga clic en Agregar.
Aparece el cuadro de diálogo Seleccionar la página principal.
Haga clic en Master1.master y en Aceptar.
Se crea un nuevo archivo denominado Home.aspx. La página contiene una directiva @ Page que asocia la página actual a la página principal seleccionada con el atributo MasterPageFile, tal como se muestra en el ejemplo de código siguiente.
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %><%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>La página también contiene un elemento <asp:Content> con el que trabajará luego.
Agregar contenido a la página de contenido
Una página de contenido no tiene los elementos usuales que constituyen una página ASP.NET, como html, body o form. En su lugar, el contenido que se desea mostrar en la página principal se agrega reemplazando las áreas de marcador de posición creadas en dicha página. En este ejemplo, puede agregar una elemento de encabezado 1, un elemento de encabezado 2, un elemento de párrafo y una lista desplegable. Utilizará la lista desplegable para seleccionar el tema que se aplica a la página.
Para agregar contenido a la página de inicio
Pegue el código siguiente entre las etiquetas asp:Content de apertura y cierre. En el ejemplo siguiente se crean tres elementos HTML: un encabezado 1, un encabezado 2 y un párrafo. También se agrega un control de lista desplegable. Tenga en cuenta que puede agregar también el control a la página en la vista Diseño, si lo prefiere.
<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>Agregue una sección de script que ejecute el código que carga el tema cuando se selecciona de la lista desplegable. El ejemplo siguiente y las etiquetas script deben agregarse a la página de contenido en la línea situada detrás de la directiva @ 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>El tema se carga durante el evento PreInit del ciclo de vida de la página. El formulario de solicitud de página contiene una matriz de valores, y el valor en el índice 4 es el valor seleccionado de la lista desplegable. Este valor se asigna al tema de la página y, cuando se carga la página, se aplica el nuevo tema.
El paso siguiente del tutorial consiste en crear varios temas que puede utilizar para mostrar cómo se aplica un tema diferente.
Modificar el tema Azul
El tema Azul contiene una hoja de estilos vacía y una máscara vacía. Como sabe qué elementos constituyen la página predeterminada y la página principal que utiliza, ahora puede modificar los archivos de temas para agregar color a los elementos de la página.
Para modificar el tema Azul
Abra el archivo Default.skin de la carpeta de temas Azul en la vista Código fuente.
Agregue el código siguiente a la lista desplegable para designar los colores de la página cuando se seleccione el tema Azul.
<asp:dropdownlist ForeColor="white" BackColor="Blue" />Abra el archivo Default.skin de la carpeta Azul en la vista Código fuente. Primero, agregue el código siguiente para dar formato al título de tabla de la página principal.
td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }A continuación, agregue un color de fondo a la tabla con el código siguiente.
table.header { background-color: Blue; }Después, aplique estilo a los elementos encabezado 1 y encabezado 2 en la página de contenido.
h1 { font-size: large; color: Navy; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }Finalmente, aplique estilo a la regla horizontal y al elemento de párrafo.
p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }
Asociar los temas a la página
Para poder ver el tema aplicado a la página Home.aspx, necesita agregar un atributo a la directiva @ Page que indique que la página utiliza un tema.
Para asociar una página a un tema
Abra Home.aspx en la vista Código fuente.
Agregue el atributo StylesheetTheme a la directiva @ Page y establézcalo en un valor similar al del tema Azul. La directiva de página debe tener un aspecto similar al del ejemplo siguiente.
<%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %><%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
Probar la página
Puede probar la página ejecutándola tal como haría con cualquier página ASP.NET.
Para probar la página
Mientras ve la página Home.aspx, presione CTRL+F5 para ejecutarla.
ASP.NET combina el contenido de la página Home.aspx con el diseño de la página Master1.master en una sola página y, a continuación, aplica el tema Azul y muestra la página resultante en el explorador. Observe que el tema Azul se ha aplicado a los elementos HTML y a la lista desplegable, así como al título y al fondo definidos en el archivo principal.
Crear temas adicionales
El tema Azul está bien, pero el propósito de este tutorial es proporcionar al usuario de la página varias opciones para un tema. Puede copiar los archivos de hoja de estilos y máscara en nuevos directorios de temas y, a continuación, modificar los colores utilizados en el tema para reflejar los nuevos colores del tema. En el procedimiento siguiente se crean dos nuevos temas, Rojo y Verde.
Para crear temas adicionales
En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta App_Themes, haga clic en Agregar carpeta ASP.NET y, a continuación, haga clic en Tema. Con el título de la carpeta Theme1 seleccionado, escriba Rojo y presione ENTRAR.
Abra la carpeta Azul y seleccione los archivos Default.skin y Default.css. Haga clic con el botón secundario del mouse en los dos archivos seleccionados y, a continuación, haga clic en Copiar.
Haga clic con el botón secundario del mouse en la carpeta Rojo y, a continuación, haga clic en Pegar.
Repita el paso 1, pero asigne a la nueva carpeta de temas el nombre Verde. A continuación, haga clic con el botón secundario del mouse en la carpeta Verde y haga clic en Pegar para colocar copias de los archivos Default.skin y Default.css en la carpeta Verde.
Modifique el atributo de color en el archivo de máscara de forma que refleje el color del tema. Por ejemplo, el archivo de máscara del tema Rojo debe tener un aspecto como el del ejemplo siguiente.
<asp:dropdownlist ForeColor="white" BackColor="Red" />Modifique la hoja de estilos para que cada tema refleje el nombre del tema. Tenga en cuenta que deseará utilizar varios tonos de verde para que los distintos elementos HTML y el texto contrasten con el fondo. La hoja de estilos del tema Verde podría tener un aspecto similar al del ejemplo siguiente.
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; }
Probar la selección de temas
La lista desplegable se puede utilizar ahora para seleccionar entre los tres temas de la página.
Para seleccionar diferentes temas
Cambie a la página Home.aspx y, a continuación, presione CTRL+F5.
Seleccione Verde o Rojo en la lista desplegable.
Observe que la hoja de estilos se aplica a los elementos HTML de la página y la máscara se aplica al control de lista desplegable.
Pasos siguientes
Para obtener más información sobre el uso de páginas principales, vea Tutorial: Crear y usar páginas principales ASP.NET en Visual Web Developer.
Vea también
Tareas
Cómo: Aplicar temas de ASP.NET