ACTIVIDAD DE APRENDIZAJE 04 MasterPage y Aplicando estilos en las pginas (SEMANA 5)

Contenidos:
1. Master Page Controles de Exploracin SiteMapPath y Men Definicin de MasterPage, creacin y modificacin. Agregar pginas de contenido

2. Aplicando estilos en la Paginas Introduccin a la Apariencia en ASP.NET Hojas de estilos,Temas y mscaras Skin. Archivo de Configuracin Web.Config

Pginas Master y Navegacin

introduccin Lo ms habitual cuando se crea una aplicacin o un sitio Web es que las pginas que lo conforman sean todas bastante parecidas o al menos que existan varios grupos de pginas similares que slo varan ciertos contenidos entre ellas. Por ejemplo, puede haber una categora de pginas para mostrar artculos en el que todas son iguales excepto por el contenido del propio artculo n su parte central, mientras que en otra zona de a aplicacin el diseo es completamente diferente pero sus pginas se parecen todas entre s. Por ejemplo, la siguiente figura muestra capturas de dos pginas pertenecientes al portal MSDN: Estas pginas difieren nicamente en el contenido y los mens que muestran en el ateral (los banners del lateral son rotativos), y conservan una esttica y una serie del elementos que permanecen constantes en todas las pginas del sitio. ASP.NET ofrece una nueva caracterstica destinada a definir pginas cuyo aspecto y funcionalidad deriva de unas Pginas especiales comunes llamadas Pginas principales o Master Pages.

pg. 1

PDF created with pdfFactory Pro trial version www.pdffactory.com

DEFINICION
Una Master Page proporciona una forma de definir una estructura e interfaz comunes para un grupo de pginas pertenecientes a un mismo sitio Web. Esta estructura comn se almacen.a en un nico archivo independiente. Ello facilita mucho su mantenimiento puesto que, para actualizar todas las pginas que lo utilizan, basta con editar dicho archivo. Una-MP es en realidad como una pgina ASPX normal que contiene cdigo, elementos HTML y controles Web de sevidor. Sin embargo posee una extensin diferente (.master) y utilizan una directiva <% master %> en lugar de una directiva <% page %>. Por lo dems se pueden considerar prcticamente equivalentes. Esto es importante porque significa que ya sabemos todo lo necesario para crearlas. Una pgina ASPX normal puede derivar su estructura a partir de una MP simplemente aadiendo un atributo MasterPageFile a su directiva de pgina, as:

Creando una pgina Master

pg. 2

PDF created with pdfFactory Pro trial version www.pdffactory.com

Paginas de Contenido o Derivadas

Las paginas de contenido son aquellas paginas aspx cuyo aspecto y funcionalidad derivan de un masterpage .Cuando aadimos una nueva pgina ASPX a nuestro proyecto y existe al menos una Master Page, podemos marcar una opcin para que, antes de crearla, nos permita seleccionar de qu MP derivar:

Aplicando Estilos en las paginas

temas y mascaras skins, archivo de configuracin
Debido a los Master Pages podemos definir un diseo y estructura comn para las pginas de nuestra aplicacin Web, pero no se ha resuelto todas los problemas sobre el mantenimiento de la interfaz que se habamos planteado en hacerlo mas dinmico. Los controles que aadamos dentro de nuestras pginas todava tendrn el aspectopredeterminado inicial. Luego podemos configurar su aspecto estableciendo laspropiedades de apariencia del control (como BackColor, Font, etc...). El problema de este mtodo es que, si deseamos cambiar por completo la apariencia de estos controles, tendramos que tocar una por una todas las pginas. Esta no es una opcin admisible en cuanto la aplicacin dispone de ms de unas pocas pginas. Hojas de estilo Cuando trabajamos con HTML ofrece una interesante opcin para modificr el aspecto de sus elementos del contenido de las paginas a traves del uso de las hojas de estilo en cascada (Cascading Style-Sheets o CSS) Las hojas CSS permiten definir el aspecto de cualquier elemento ITML contenido en una pgina. Aunque se pueden definir dentro de la propia pgina, hacerlo as les hace perder su verdadero sentido que no es otro que el de separar la definicin del aspecto. As, es posible crear archivos con extensin .CSS que se vinculan a las diferentes pginas de un sitio y definen el aspecto de sus elementos.Dentro de una hoja CSS se definen fundamentalmente dos tipos de estilos:

pg. 3

PDF created with pdfFactory Pro trial version www.pdffactory.com

pg. 4

PDF created with pdfFactory Pro trial version www.pdffactory.com

 Clases: Definen aspectos que no estn asociados a una etiqueta HTML concreta sino que se pueden asignar mediante el atributo class a cualquiera de ellas. Por ejemplo: .NuevaClase{ Text-decoration :none; Color:red; Border-style:solid; } Body { Font-family:Verdana } En este caso se define la clase llamada EstiloSimple, y cualquier etiqueta HTML a la que se le asigne mediante su atributo class adquirir el aspecto marcado. Para asignar un archivo CSS a una pgina slo hay que incluir en su cabecera una lnea anloga a esta: La gran ventaja de esta tcnica es que basta con tocar el archiv ? CSS para que todas las pginas que lo utilizar vean su aspecto modificado de manera acorde a los cambios. Da igual que sea slo una o haya miles. Al tener el aspecto centralizado en una ubicacin nica el mantenimiento es muy sencillo. Temas y mscaras (Skins) Ahora si bien las hojas de estilo resuelven en gran parte el problema de independizar el aspecto de la definicin de contenidos de una pgina, realmente no se adaptan por completo a los controles ASP.NET. Incluso dejan fuera algunas funcionalidades, como los valores por defecto de propiedades de controles (por ejemplo el texto inicial de un campo) o el aspecto de controles Web complejos como calendarios o rejillas que no se pueden expresar nicamente con un estilo CSS. En ASP.NET introduce una interesante novedad que se complementa la perfeccin con las Master Pages para solventar el problema del aspecto: los temas y mscaras de controles Web. La funcionalidad ofrecida por los temas de ASP.NET 2.0 se entiende fcilmente si lOS asemejamos con las hojas de estilo. Los temas de ASP.NET son como hojas de estilo que se aplican a controles Web y sus elementos tienen una sintaxis prcticamente idntica a la de los controles cuyo aspecto definen. Enseguida lo entenderemos. Skin(mascara) Un archivo de mascara tiene la extensin del nombre de archivo .slin y contiene los valores de propiedades para controles individuales como button , label, textbox,calendar

pg. 5

PDF created with pdfFactory Pro trial version www.pdffactory.com

Finalmente en esta pagina a los controles que contenga ubicamos en la propiedad SkinId el nombre de la mascara a utilizar

pg. 6

PDF created with pdfFactory Pro trial version www.pdffactory.com