03 - Estilos, temas y pieles

NOTA: Ante todo explicar que este manual es un ejercicio completo, por lo que recomiendo que si desena estudiarlo partan desde el principio

Dentro de una aplicación web se pueden definir diversos tipos de estilos que serán utilizados en una página web, así como también el tema de pieles que se utilizarán en la aplicación.

En este punto trataremos la definición de estilos y definición de pieles sobre una página maestra y luego definiremos la forma de cambiar las pieles que serán utilizadas en esta.

Creación de una página de estilos

Para crear una página de estilos, se debe definir lo siguiente:

1. En el proyecto de solución agregar la un nuevo elemento, dentro del cuadro de dialogo de nuevo, seleccionando la plantilla Hoja de estilos, nombrándolo “Estilos.css”.

2. En el body de la hoja de estilos agregaremos las siguientes líneas de código:

body

{

margin: 0 0 0 0;

font-family: Tahoma;

font-size: 10pt;

}

3. Agregaremos dos clase de estilos más que utilizaremos las cuales serán Menú y Área, definiendo las siguientes líneas de código:

.Menu

{

height: 100px;

vertical-align: top;

background-color: #B5C7DE;

}

.Area

{

height: 400px;

vertical-align: top;

background-color: #ffffff;

}

4. En la página maestra que hemos creado, agregaremos las siguientes líneas de código:

En el head de la página maestra agregaremos la llamada a la página ccs

<link href="Estilos.css" type="text/css" rel="stylesheet" />

En la columna en donde se encuentra en primer contentplaceholder agregar la llamada a la clase Menú y en el segundo llamaremos a la clase Área, de la siguiente forma:

<tr>

<td colspan="3" style="height: 21px" class="Menu">

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

</asp:contentplaceholder>

</td>

</tr>

<tr>

<td colspan="3" class="Area">

<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">

</asp:ContentPlaceHolder>

</td>

</tr>

Con esto, todas las páginas que se asocien a esta plantilla tendrán el mismo estilo.

Temas.

También es factible definir temas y pieles dentro de una página web, como veremos en las siguientes líneas de código. Para ello aremos lo siguiente.

1. En el proyecto de solución, seleccionaremos agregaremos una carpeta de asp.nEt.

2. Dentro de este submenú, seleccionaremos la asociada al nombre Tema, nombrando esta con el nombre Azul. Si observan se habrá creado una carpeta App_Themes y dentro de esta la carpeta Azul

3. Dentro de la carpeta Azul agregaremos un nuevo elemento, el cual estará asociado al de archivo de estilos, nombrando este como Estilo.css

Dentro de esta página de estilos agregaremos las siguientes líneas de código:

body

{

margin: 0 0 0 0;

font-family: Verdana;

font-size: 10pt;

}

.Menu

{

height: 100px;

vertical-align: top;

text-align: right;

FILTER: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#98b2e6', gradienttype='0');

}

.Area

{

height: 400px;

vertical-align: top;

FILTER: progid:dximagetransform.microsoft.gradient(startcolorstr='#98b2e6', endcolorstr='#ffffff', gradienttype='0');

}

4. Dentro del archivo web.config. quitaremos la llamada al archivo xml que se encuentra definido en la directiva configuration.

5. Dentro del archivo web.config agregaremos la siguiente llamada a la directiva page, dentro del espacio de nombre system.web:

<pages theme="Azul"/>

Si ejecutamos la aplicación la página se observará de la siguiente forma:

Pieles.

Si queremos agregar skin (pieles) a la aplicación para cada uno de los objetos que se administrarán se debe:

1. Agregar un nuevo elemento a la aplicación dentro de la carpeta de nombre azul que hemos definido, el tipo de archivo que debe agregarse es del tipo “Archivo de Máscara”, al cual llamaremos, pieles.skin.

2. Agregar la siguiente línea de código al archivo pieles.skin que se ha creado:

<asp:GridView runat="server">

<HeaderStyle BackColor="#98B2E6" ForeColor="White" />

<RowStyle BackColor="White" />

<AlternatingRowStyle BackColor="#CBD8EF" />

</asp:GridView>

Esto hará que todos los gridview que se desplieguen se verán con el formato definido.

3. También se pueden administrar los cambios de imágenes desde este archivo, definiendo el nombre de la imagen que se desea cambiar y la imagen que remplazará a la imagen definida, un ejemplo de cómo esto se hace se observa a continuación:

<asp:Image runat="server" SkinID="Logo" ImageUrl="img.jpg" />

Esta directiva realizará la siguiente acción, cuando un archivo de imagen sea cargado en el Server con el nombre logo, esta se cambiará con la imagen definida en la dirección y nombre escrito en el ImageUrl.