Programación II Ing.

René Alberto Castro Velásquez

UNIDAD I – COMPONENTES Y CONTROLES PARA EL DISEÑO DE UN SITIO WEB.

1.5. PÁGINAS MAESTRAS (PÁGINAS PRINCIPALES).

INTRODUCCIÓN.
Virtualmente todos los sitios web desarrollados profesionalmente tienen una apariencia muy
consistente entre sus páginas. Esto incluye tanto la estructura de la página (dónde aparecen los
elementos de la interface de usuario y cómo están orientados dentro de la página) y las fuentes de
texto, color y gráficos usados dentro de la página.
Esta idea se implementa con una plantilla que aloja el contenido HTML a ser presentado en cada
página, lo cual es logrado en ASP .NET por medio del uso de una página maestra, la cual es una
página ASP .NET regular en cuanto contiene tanto partes de código HTML como código C#, pero en
lugar de definir HTML para una página específica, aloja el contenido de la estructura común del
sitio web. Cada nueva página ASP .NET puede ser configurada para usar la apariencia de la página
maestra definida, y al actualizar la página maestra se actualizan todas las páginas que están
asociadas con ella.

PANORAMA DE UNA PÁGINA MAESTRA.

Los programas para diseñar sitios web y
crear páginas web han ofrecido
características de plantilla desde hace
algún tiempo. Con estas herramientas un
diseñador puede crear una sola página de
plantilla que contenga tanto el contenido
común como las regiones que pueden ser
personalizadas por cada página que use la
plantilla. Con ASP .NET y Visual Studio un
desarrollador de páginas web produce una
plantilla al crear una página maestra, la
cual contiene dos porciones: contenido
que aparece en cada página de contenido
y regiones cuyas marcaciones pueden ser
personalizadas por la página de contenido.
Una página de contenido es una página ASP .NET que ha sido configurada para usar una página
maestra. El modelo de página maestra en ASP .NET opaca a las simples plantillas basadas en HTML
porque puede contener controles web y código fuente del lado del servidor además de código
HMTL.
Una página maestra en una plantilla que contiene elementos de interface comunes y controles
ContentPlaceHolder que muestran los contenidos de las diferentes páginas del proyecto.

1 de 7
Programación II Ing. René Alberto Castro Velásquez

Uno de los beneficios de usar páginas maestras es que se puede ajustar el aspecto general del sitio
mediante la actualización de la página maestra. Una vez la página maestra ha sido modificada y
guardada, sus páginas de contenido se mostrarían inmediatamente presentando la actualización
aplicada. En resumen, el definir una plantilla de sitio web incluye dos pasos:
1. Construir una página maestra que especifique los elementos comunes de la interface de
usuario en todo el sitio y las regiones que se pueden personalizar por página mostrada.
2. Crear las páginas del sitio ASP .NET, con las páginas configuradas para usar la página
maestra creada en el paso anterior.

CREANDO UNA PÁGINA MAESTRA.

Una página maestra es similar a las páginas ASP .NET que se han creado hasta el momento: están
formadas por controles web, HTML estático y código del lado del servidor. La diferencia es que la
página maestra define una plantilla para el sitio web.
Agregue una página maestra al proyecto siguiendo estos pasos:
1. En el menú del IDE seleccione File, New, Web Site, ASP .NET Empty Web Site (Archivo,
Nuevo, Sitio Web, Sitio web ASP .NET vacío).
2. Use el nombre PaginaMaestra para el proyecto.
3. En la ventana Solution Explorer haga clic derecho sobre el nombre del proyecto.
4. Escoja la opción Add, Add New Item, Master Page. Puede cambiar el nombre si lo desea,
pero tenga cuidado de conservar la extensión .master.

5. Haga clic sobre el botón Add para agregar una página maestra al proyecto.
2 de 7
Programación II Ing. René Alberto Castro Velásquez

El control web ContentPlaceHolder define la región que puede ser editada por las páginas de
contenido, y pueden existir varios controles web ContentPlaceHolder en la página maestra. De
hecho, la página ya contiene dos controles web ContentPlaceHolder: uno dentro del elemento
HTML <head> y uno dentro de Web Form.
Para agregar un nuevo control web ContentPlaceHolder, arrastre ese control desde el Cuadro de
Herramientas hacia la página maestra. Puede encontrar ese control en la sección estándar.

NOTA: El control web ContentPlaceHolder puede ser agregado sólo a páginas maestras pero no a
páginas ASP .NET. Por tanto, este control lo puede encontrar en el Cuadro de Herramientas sólo
cuando visualiza una página maestra.

Si compara el código de marcación por defecto de una página maestra con el código de una página
ASP .NET regular, verá dos diferencias: la primera es que la página maestra inicia con una directiva
<%@ Master %> mientras que las páginas ASP .NET inician con la directiva <%@ Page %>.
Además, la página maestra contiene, por defecto, dos controles web ContentPlaceHolder.

Un proyecto de sitio web puede tener varias páginas maestras, cada una definiendo una plantilla
diferente. Por ejemplo, un sitio web puede estar dividido en tres secciones, con cada sección
conteniendo su apariencia única. En este caso, se crearían tres páginas maestras para el sitio.
Cuando se crea una nueva página ASP .NET, se asociaría con la página maestra adecuada.

Configure la página maestra con una tabla de dos filas y dos columnas, como se muestra en el
código siguiente.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style1 {
width: 100%;
text-align: center;
}
.auto-style2 {
width: 10%;
text-align: center;
vertical-align: top;
}
.auto-style3 {
width: 90%;
text-align: left;
vertical-align: top;
}
3 de 7
Programación II Ing. René Alberto Castro Velásquez

body {
background: linear-gradient(to right, #ADDFFF, #1F45FC);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td colspan="2" class="auto-style1">
<asp:Label ID="lblTitulo" runat="server" Font-Bold="True"
Font-Size="XX-Large" Text="Este es un ejemplo sencillo
sobre el uso de Páginas Maestras"></asp:Label>
<br />
<br />
</td>
</tr>
<tr>
<td class="auto-style2">
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/Default.aspx">Inicio</asp:HyperLink>
<br />
<br />
<asp:HyperLink ID="HyperLink3" runat="server"
NavigateUrl="~/EnVenta.aspx">En Venta</asp:HyperLink>
<br />
<br />
<asp:HyperLink ID="HyperLink5" runat="server"
NavigateUrl="~/Privacidad.aspx">Privacidad</asp:HyperLink>
<br />
<br />
<asp:HyperLink ID="HyperLink4" runat="server"
NavigateUrl="~/Legal.aspx">Legal</asp:HyperLink>
<br />
<br />
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/AcercaDe.aspx">Acerca de</asp:HyperLink>
</td>
<td class="auto-style3">
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">

</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

4 de 7
Programación II Ing. René Alberto Castro Velásquez

CREANDO LAS PÁGINAS DE CONTENIDO.

Con la página maestra creada, el siguiente paso es crear las
páginas de contenido, las cuales son páginas ASP .NET cuya
apariencia está basada en una página principal. Cuando se
crea una página de contenido, se empieza identificando cuál
página principal se usará. Luego, se define el contenido
específico para esta página, el cual es colocado en las regiones
definidas por los controles ContentPlaceHolder de la página
principal. No se puede agregar ningún contenido adicional
fuera de esas regiones.
Para crear una página de contenido haga clic derecho sobre la
página maestra que se encuentra en la ventana Solution
Explorer y seleccione la opción Add Content Page.
Para este ejemplo se crearán cinco páginas ASP .NET:
Default.aspx, EnVenta.aspx, Legal.aspx, Privacidad.aspx y
AcercaDe.aspx.
En cada una de esas páginas agregue un texto breve que proporcione un resumen de la
funcionalidad de la página. Por ejemplo, en la página Default.aspx del directorio raíz se colocó
Bienvenidos a la mejor librería en línea! y en la página EnVenta.aspx se colocó Estos libros se
encuentran en promoción. Agregue un resumen similar para cada página en el sitio.
Código de la página Default.aspx.
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:Label ID="lblTitulo" runat="server" Text="Bienvenidos al curso de
Programación II" Font-Bold="True" Font-Size="X-Large"></asp:Label>
<br /><br />
<asp:Label ID="lblMensaje" runat="server" Text="Este es un ejemplo de Páginas
Maestras."></asp:Label>
</asp:Content>

Código de la página AcercaDe.aspx.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="AcercaDe.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:Label ID="lblTitulo" runat="server" Text="Acerca de" Font-Bold="True"
Font-Size="XX-Large"></asp:Label>

5 de 7
Programación II Ing. René Alberto Castro Velásquez

<br /><br />

<asp:Label ID="lblMensaje" runat="server" Text="Grupo de Programación II de la
Universidad Tecnológica de El Salvador"></asp:Label>
</asp:Content>

Código de la página EnVenta.aspx.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="EnVenta.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:Label ID="lblTitulo" runat="server" Text="Aquí colocaría un título sobre
artículos en venta" Font-Bold="True" Font-Size="X-Large"></asp:Label>
<br /><br />
<ol>
<li>Artículo 1</li>
<li>Artículo 2</li>
<li>Artículo 3</li>
<li>Artículo 4</li>
<li>Artículo 5</li>
<li>Artículo 6</li>
<li>Artículo 7</li>
<li>Artículo 8</li>
<li>Artículo 9</li>
<li>Artículo 10</li>
</ol>
</asp:Content>

Código de la página Legal.aspx.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Legal.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:Label ID="lblTitulo" runat="server" Text="Aspectos Legales a Considerar"
Font-Bold="True" Font-Size="X-Large"></asp:Label>
<br /><br />
<ol>
<li>Estudie</li>
<li>Esfuércese</li>
<li>Aprenda a conciencia</li>
<li>Valore sus estudios</li>
<li>No pierda su tiempo</li>
<li>Optimice su tiempo libre aprendiendo algo de utilidad</li>
<li>Sea un ciudadano honrado y ejemplar</li>
</ol>
</asp:Content>

6 de 7
Programación II Ing. René Alberto Castro Velásquez

Código de la página Privacidad.aspx.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Privacidad.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:Label ID="lblTitulo" runat="server" Text="Políticas de Privacidad"
Font-Bold="True" Font-Size="X-Large"></asp:Label>
<br /><br />
<asp:Label ID="lblMensaje" runat="server" Text="Debido a que es un ejemplo con
fines educativos, puede tomar el código como modelo para estudiarlo y crear
sus propias páginas."></asp:Label>
</asp:Content>

Pruebe la aplicación.

NOTA: Puede obtener más información en las direcciones siguientes:

https://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
https://www.codeproject.com/Articles/333650/Beginner-s-Tutorial-on-Master-Pages-in-ASP-NET
http://www.c-sharpcorner.com/article/how-to-create-master-page-in-asp-net/
https://www.dotnetperls.com/master-page
https://www.tutorialspoint.com/aspnet_online_training/aspnet_master_page.asp
http://w3schools.sinsixx.com/aspnet/aspnet_masterpages.asp.htm

7 de 7