Crear un diseño de todo el sitio mediante páginas maestras (VB)

por Scott Mitchell

Descargar PDF

En este tutorial se mostrarán los conceptos básicos de la página maestra. Es decir, qué son las páginas maestras, cómo se crea una página maestra, qué son los titulares de posición de contenido, cómo crea una página ASP.NET que usa una página maestra, cómo se refleja automáticamente la modificación de la página maestra en sus páginas de contenido asociadas, etc.

Introducción

Un atributo de un sitio web bien diseñado es un diseño de página coherente para todo el sitio. Tome el sitio web de www.asp.net, por ejemplo. En el momento de redactar este documento, cada página tiene el mismo contenido en la parte superior e inferior de la página. Como se muestra en la ilustración 1, la parte superior de cada página muestra una barra gris con una lista de comunidades de Microsoft. Debajo de ese es el logotipo del sitio, la lista de idiomas en los que se ha traducido el sitio y las secciones principales: Inicio, Introducción, Learn, Descargas, etc. Del mismo modo, la parte inferior de la página incluye información sobre la publicidad en www.asp.net, una declaración de copyright y un vínculo a la declaración de privacidad.

Ilustración 01: el sitio web de www.asp.net emplea una apariencia coherente en todas las páginas (haga clic para ver la imagen a tamaño completo)

Otro atributo de un sitio bien diseñado es la facilidad con la que se puede cambiar la apariencia del sitio. En la ilustración 1 se muestra la página principal de www.asp.net a partir de marzo de 2008, pero entre ahora y la publicación de este tutorial, es posible que la apariencia haya cambiado. Quizás los elementos de menú de la parte superior se extiendan para incluir una nueva sección para el marco de MVC. O tal vez se revele un diseño radicalmente nuevo con diferentes colores, fuentes y diseño. Aplicar estos cambios a todo el sitio debe ser un proceso rápido y sencillo que no requiere modificar los miles de páginas web que componen el sitio.

La creación de una plantilla de página para todo el sitio en ASP.NET es posible con el uso de páginas maestras. En pocas palabras, una página maestra es un tipo especial de página de ASP.NET que define el marcado que es común entre todas las páginas de contenido, así como las regiones que se pueden personalizar en una página de contenido por página de contenido. (Una página de contenido es una página de ASP.NET enlazada a la página maestra). Cada vez que se cambia el diseño o el formato de una página maestra, la salida de todas sus páginas de contenido se actualiza inmediatamente, lo que hace que la aplicación de cambios de apariencia en todo el sitio sea tan fácil como actualizar e implementar un único archivo (es decir, la página maestra).

Este es el primer tutorial de una serie de tutoriales que exploran el uso de páginas maestras. En el transcurso de esta serie de tutoriales:

• Examinaremos la creación de páginas maestras y sus páginas de contenido asociadas.
• Discutiremos una variedad de sugerencias, trucos y trampas.
• Identificaremos los problemas comunes de una página maestra y exploraremos soluciones alternativas.
• Veremos cómo acceder a la página maestra desde una página de contenido y viceversa.
• Obtendremos información sobre cómo especificar la página maestra de una página de contenido en runtime.
• Obtendremos información sobre otros temas avanzados sobre páginas maestras.

Estos tutoriales están orientados a ser concisos y proporcionan instrucciones paso a paso con una gran cantidad de capturas de pantalla para guiarle visualmente por el proceso. Cada tutorial está disponible en las versiones de C# y Visual Basic e incluye una descarga del código completo usado.

Este tutorial introductorio comienza con un vistazo a los conceptos básicos de la página maestra. Se explica cómo funcionan las páginas maestras, se examina la creación de una página maestra y las páginas de contenido asociadas mediante Visual Web Developer y se ve cómo los cambios en una página maestra se reflejan inmediatamente en sus páginas de contenido. Comencemos.

Descripción del funcionamiento de las páginas maestras

La creación de un sitio web con un diseño de página coherente para todo el sitio requiere que cada página web emita un marcado de formato común además de su contenido personalizado. Por ejemplo, mientras que cada entrada de tutorial o foro en www.asp.net tiene su propio contenido único, cada una de estas páginas también representa una serie de elementos comunes <div> que muestran los vínculos de sección de nivel superior: Inicio, Introducción, Learn, etc.

Hay una variedad de técnicas para crear páginas web con una apariencia coherente. Un enfoque sencillo es simplemente copiar y pegar el marcado de diseño común en todas las páginas web, pero este enfoque tiene una serie de desventajas. Para empezar, cada vez que se crea una nueva página, debe recordar copiar y pegar el contenido compartido en la página. Estas operaciones de copiar y pegar pueden dar lugar a errores, ya que es posible que accidentalmente solo se copie un subconjunto de las marcas compartidas en una nueva página. Por si fuera poco, este enfoque hace que reemplazar la apariencia existente de todo el sitio por una nueva sea una verdadera pesadilla, ya que todas y cada una de las páginas del sitio deben editarse para utilizar la nueva apariencia.

Antes de ASP.NET versión 2.0, los desarrolladores de páginas solían colocar el marcado común en controles de usuario y, a continuación, agregaban estos controles de usuario a todas u cada una de las páginas. Este enfoque requería que el desarrollador de páginas recordara agregar manualmente los controles de usuario a cada página nueva, pero permitía realizar modificaciones más sencillas en todo el sitio porque, al actualizar el marcado común, solo era necesario modificar los controles de usuario. Lamentablemente, Visual Studio .NET 2002 y 2003 (las versiones de Visual Studio usadas para crear aplicaciones ASP.NET 1.x) mostraban los controles de usuario en la vista Diseño como cuadros grises. En consecuencia, los desarrolladores de páginas que utilizaban este enfoque no disfrutaban de un entorno WYSIWYG en tiempo de diseño.

Las deficiencias de uso de controles de usuario se abordaron en ASP.NET versión 2.0 y Visual Studio 2005 con la introducción de páginas maestras. Una página maestra es un tipo especial de página de ASP.NET que define tanto el marcado de todo el sitio como las regiones donde las páginas de contenido asociadas definen su marcado personalizado. Como veremos en el paso 1, estas regiones se definen mediante controles ContentPlaceHolder. El control ContentPlaceHolder simplemente denota una posición en la jerarquía de controles de la página maestra donde un contenido personalizado se puede insertar mediante una página de contenido.

Nota:

Los conceptos básicos y la funcionalidad de las páginas maestras no han cambiado desde ASP.NET versión 2.0. Sin embargo, Visual Studio 2008 ofrece compatibilidad en tiempo de diseño con páginas maestras anidadas, una característica que faltaba en Visual Studio 2005. Veremos el uso de páginas maestras anidadas en un tutorial más adelante.

En la ilustración 2 se muestra el aspecto de la página maestra de www.asp.net. Tenga en cuenta que la página maestra define el diseño común de todo el sitio (el marcado en la parte superior, inferior y derecha de cada página), así como un ContentPlaceHolder en el centro-izquierda, donde se encuentra el contenido único para cada página web individual.

Ilustración 02: una página maestra define el diseño de todo el sitio y las regiones editables en una página de contenido por página de contenido

Una vez definida una página maestra, se puede enlazar a nuevas páginas de ASP.NET a través del tic de una casilla. Estas páginas ASP.NET, denominadas páginas de contenido, incluyen un control Content para cada uno de los controles ContentPlaceHolder de la página maestra. Cuando la página de contenido se visita a través de un explorador, el motor de ASP.NET crea la jerarquía de control de la página maestra e inserta la jerarquía de controles de la página de contenido en los lugares adecuados. Esta jerarquía de controles combinada se representa y el código HTML resultante se devuelve al explorador del usuario final. Por lo tanto, la página de contenido emite el marcado común definido en su página maestra fuera de los controles ContentPlaceHolder y el marcado específico de la página definido dentro de sus propios controles Content. En la ilustración 3 se muestra este concepto.

Ilustración 03: el marcado de la página solicitada se fusiona en la página maestra (haga clic para ver la imagen a tamaño completo)

Ahora que hemos analizado cómo funcionan las páginas maestras, echemos un vistazo a la creación de una página maestra y páginas de contenido asociadas mediante Visual Web Developer.

Nota:

Para llegar a un público lo más amplio posible, el sitio web de ASP.NET que creamos en esta serie de tutoriales se creará con ASP.NET 3.5 con la versión gratuita de Microsoft de Visual Studio 2008: Visual Web Developer 2008. Si aún no ha actualizado a ASP.NET 3.5, no se preocupe: los conceptos descritos en estos tutoriales funcionan igual de bien con ASP.NET 2.0 y Visual Studio 2005. Sin embargo, algunas aplicaciones de demostración pueden utilizar funciones nuevas de la versión 3.5 de .NET Framework; cuando se utilizan funciones específicas de la versión 3.5, se incluye una nota en la que se explica cómo implementar funciones similares en la versión 2.0. Tenga en cuenta que las aplicaciones de demostración disponibles para su descarga desde cada tutorial tienen como destino .NET Framework versión 3.5, lo que da como resultado un archivo Web.config que incluye elementos de configuración específicos de 3.5. En resumen, si aún no ha instalado .NET 3.5 en su equipo, la aplicación web descargable no funcionará sin eliminar primero el marcado específico de 3.5 de Web.config. Consulte Web.config Archivo para obtener más información sobre este tema.

Paso 1: creación de una página maestra

Para poder explorar la creación y el uso de páginas maestras y de contenido, primero necesitamos un sitio web de ASP.NET. Empiece por crear un nuevo sitio web de ASP.NET basado en el sistema de archivos. Para ello, inicie Visual Web Developer y, a continuación, vaya al menú Archivo y elija Nuevo sitio web, mostrando el cuadro de diálogo Nuevo sitio web (vea la ilustración 4). Elija la plantilla sitio web de ASP.NET, establezca la lista desplegable Ubicación en Sistema de archivos, elija una carpeta para colocar el sitio web y establezca el idioma en Visual Basic. Esto creará un sitio web con una página de ASP.NET Default.aspx, una carpeta App_Data y un archivo Web.config.

Nota:

Visual Studio admite dos modos de administración de proyectos: proyectos de sitio web y proyectos de aplicaciones web. Los proyectos de sitio web carecen de un archivo de proyecto, mientras que los proyectos de aplicación web imitan la arquitectura del proyecto en Visual Studio .NET 2002/2003: incluyen un archivo de proyecto y compilan el código fuente del proyecto en un único ensamblado, que se coloca en la carpeta /bin. Visual Studio 2005 solo admitía inicialmente proyectos de sitio web, aunque el modelo de proyecto de aplicación web se volvió a introducir con Service Pack 1; Visual Studio 2008 ofrece ambos modelos de proyecto. Sin embargo, las ediciones Visual Web Developer 2005 y 2008 solo admiten proyectos de sitio web. Yo he usado el modelo de proyecto de sitio web para mis demostraciones en esta serie de tutoriales. Si usa una edición que no es Express y quiere usar el modelo de proyecto de aplicación web en su lugar, no dude en hacerlo, pero tenga en cuenta que puede haber algunas discrepancias entre lo que ve en la pantalla y los pasos que debe realizar frente a las capturas de pantalla que se muestran y las instrucciones proporcionadas en estos tutoriales.

Ilustración 04: creación de un nuevo sitio web basado en el sistema de archivos (haga clic para ver la imagen a tamaño completo)

A continuación, agregue una página maestra al sitio en el directorio raíz haciendo clic con el botón derecho en el nombre del proyecto, seleccionando Agregar nuevo elemento y seleccionando la plantilla Página maestra. Tenga en cuenta que las páginas maestras terminan con la extensión .master. Asigne un nombre a esta nueva página maestra Site.master y haga clic en Agregar.

Ilustración 05: adición de una página maestra denominada Site.master al sitio web (haga clic para ver la imagen a tamaño completo)

Al agregar un nuevo archivo de página maestra a través de Visual Web Developer, se crea una página maestra con el siguiente marcado declarativo:

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

La primera línea del marcado declarativo es la directiva @Master. La directiva @Master es similar a la directiva @Page que aparece en páginas ASP.NET. Define el lenguaje del lado servidor (VB) e información sobre la ubicación y herencia de la clase de código subyacente de la página maestra.

El DOCTYPE y el marcado declarativo de la página aparecen debajo de la directiva @Master. La página incluye HTML estático junto con cuatro controles del lado servidor:

• Un formulario web (el <form runat="server">): dado que todas las páginas ASP.NET suelen tener un formulario web y, dado que la página maestra puede incluir controles web que deben aparecer dentro de un formulario web, asegúrese de agregar el formulario web a la página maestra (en lugar de agregar un formulario web a cada página de contenido).
• Un control ContentPlaceHolder denominado ContentPlaceHolder1: este control ContentPlaceHolder aparece dentro del formulario web y actúa como región para la interfaz de usuario de la página de contenido.
• Un elemento del lado servidor <head>: el elemento <head> tiene el atributo runat="server", lo que hace que sea accesible a través del código del lado servidor. El elemento <head> se implementa de esta manera para que el título de la página y otro marcado <head> relacionado se puedan agregar o ajustar mediante programación. Por ejemplo, establecer una propiedad Title de una página ASP.NET ASP.NET cambia el elemento <title> representado por el control de servidor <head>.
• Un control ContentPlaceHolder denominado head: este control ContentPlaceHolder aparece dentro del control de servidor <head> y se puede usar para agregar contenido declarativamente al elemento <head>.

Este marcado declarativo de página maestra predeterminado sirve como punto de partida para diseñar sus propias páginas maestras. No dude en editar el HTML o agregar controles web adicionales o ContentPlaceHolders a la página maestra.

Nota:

Al diseñar una página maestra, asegúrese de que contiene un formulario web y que al menos un control ContentPlaceHolder aparece dentro de este formulario web.

Creación de un diseño de sitio simple

Expandamos el marcado declarativo por defecto de Site.master para crear un diseño de sitio en el que todas las páginas compartan: un encabezado común; una columna izquierda con navegación, noticias y otros contenidos de todo el sitio; y un pie de página que muestre el icono "Con tecnología de Microsoft ASP.NET". En la ilustración 6 se muestra el resultado final de la página maestra cuando una de sus páginas de contenido se ve a través de un explorador. La región marcada con un círculo rojo de la ilustración 6 es específica de la página que se visita (Default.aspx); el otro contenido se define en la página maestra y, por tanto, es coherente en todas las páginas de contenido.

Ilustración 06: la página maestra define el marcado de las partes superior, izquierda e inferior (haga clic para ver la imagen a tamaño completo)

Para lograr el diseño de sitio que se muestra en la ilustración 6, empiece por actualizar la página maestra Site.master para que contenga el siguiente marcado declarativo:

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
  </body>
</html>

El diseño de la página maestra se define mediante una serie de elementos HTML <div>. El topContent<div> contiene el marcado que aparece en la parte superior de cada página, mientras que los mainContent, leftContent y footerContent<div> se usan para mostrar el contenido de la página, la columna izquierda y el icono "Con tecnología de Microsoft ASP.NET", respectivamente. Además de agregar estos elementos <div>, también he cambiado el nombre de la propiedad ID del control ContentPlaceHolder principal de ContentPlaceHolder1 a MainContent.

Las reglas de formato y diseño de estos elementos ordenados <div> se detallan en el archivo Styles.cssHoja de estilos en cascada (CSS), que se especifica a través de un elemento <link> en el elemento <head> de la página maestra. Estas reglas definen la apariencia de cada elemento <div> indicado anteriormente. Por ejemplo, el elemento topContent<div>, que muestra el texto y el vínculo "Tutoriales de páginas maestras", tiene sus reglas de formato especificadas en Styles.css de la siguiente manera:

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

Si va a seguir en el equipo, deberá descargar el código adjunto de este tutorial y agregar el archivo Styles.css al proyecto. Del mismo modo, también tendrá que crear una carpeta denominada Images y copiar el icono "Con tecnología de Microsoft ASP.NET" desde el sitio web de demostración descargado al proyecto.

Nota:

Una explicación del formato CSS y página web está fuera del ámbito de este artículo. Para obtener más información sobre CSS, consulte los Tutoriales de CSS en W3Schools.com. También le animamos a descargar el código que acompaña a este tutorial y jugar con la configuración de CSS en Styles.css para ver los efectos de las diferentes reglas de formato.

Creación de una página maestra mediante una plantilla de diseño existente

A lo largo de los años he creado una serie de aplicaciones web de ASP.NET para pequeñas y medianas empresas. Algunos de mis clientes tenían un diseño de sitio existente que querían usar; otros contrataron a un diseñador gráfico competente. Algunos confiaron en mí para diseñar su sitio web. Como puede ver en la ilustración 6, encargar a un programador el diseño de un sitio web suele ser tan sensato como encargar a su contable una operación a corazón abierto mientras su médico le hace la declaración de la renta.

Afortunadamente, hay innumerables sitios web que ofrecen plantillas de diseño HTML gratuitas: Google arrojó más de seis millones de resultados para el término de búsqueda "plantillas de sitios web gratuitas". Uno de mis favoritos es OpenDesigns.org. Una vez que encuentre una plantilla de sitio web que le guste, agregue los archivos CSS y las imágenes a su proyecto de sitio web e integre el HTML de la plantilla en su página maestra.

Nota:

Microsoft también ofrece una serie de plantillas gratuitas de ASP.NET Design Start Kit que se integran en el cuadro de diálogo Nuevo sitio web de Visual Studio.

Paso 2: creación de páginas de contenido asociadas

Con la página maestra creada, podemos empezar a crear páginas ASP.NET enlazadas a la página maestra. Estas páginas se conocen como páginas de contenido.

Vamos a agregar una nueva página de ASP.NET al proyecto y enlazarla a la página maestra Site.master. Haga clic con el botón derecho en el nombre del proyecto en el Explorador de soluciones y elija la opción Agregar nuevo elemento. Seleccione la plantilla Formulario web, escriba el nombre About.aspx y, a continuación, active la casilla "Seleccionar página maestra", como se muestra en la ilustración 7. Si lo hace, se mostrará el cuadro de diálogo Seleccionar una página maestra (vea la ilustración 8), donde puede elegir la página maestra que se va a usar.

Nota:

Si creó el sitio web de ASP.NET con el modelo de proyecto de aplicación web en lugar del modelo de proyecto de sitio web, no verá la casilla "Seleccionar página maestra" en el cuadro de diálogo Agregar nuevo elemento que se muestra en la ilustración 7. Para crear una página de contenido al usar el modelo de proyecto de aplicación web, debe elegir la plantilla Formulario de contenido web en lugar de la plantilla de formulario web. Después de seleccionar la plantilla Formulario de contenido web y hacer clic en Agregar, aparecerá el mismo cuadro de diálogo Seleccionar una página maestra que se muestra en la ilustración 8.

Ilustración 07: adición de una nueva página de contenido (Haga clic para ver la imagen de tamaño completo)

Ilustración 08: seleccione la página maestra Site.master (Haga clic para ver la imagen de tamaño completo)

Como se muestra en el siguiente marcado declarativo, una nueva página de contenido contiene una directiva @Page que apunta a su página maestra y un control Content para cada uno de los controles ContentPlaceHolder de la página maestra.

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="About.aspx.vb" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

Nota:

En la sección "Crear un diseño de sitio simple" del paso 1 he cambiado el nombre de ContentPlaceHolder1 a MainContent. Si no cambió el nombre del ID de este control ContentPlaceHolder de la misma manera, el marcado declarativo de la página de contenido diferirá ligeramente del marcado mostrado anteriormente. Es decir, el segundo ContentPlaceHolderID del control Content reflejará el elemento ID del control ContentPlaceHolder correspondiente en la página maestra.

Al representar una página de contenido, el motor de ASP.NET debe fusionar los controles Content de la página con los controles ContentPlaceHolder de su página maestra. El motor de ASP.NET determina la página maestra de la página de contenido del atributo MasterPageFile de la directiva @Page. Como se muestra en el marcado anterior, esta página de contenido está enlazada a ~/Site.master.

Dado que la página maestra tiene dos controles ContentPlaceHolder (head y MainContent), Visual Web Developer generó dos controles Content. Cada control Content hace referencia a un ContentPlaceHolder determinado a través de su propiedad ContentPlaceHolderID.

Las páginas maestras destacan sobre las anteriores técnicas de plantillas para todo el sitio por su compatibilidad con el diseño. En la ilustración 9 se muestra la página de contenido About.aspx cuando se ve a través de la vista Diseño de Visual Web Developer. Tenga en cuenta que mientras el contenido de la página maestra está visible, aparece en gris y no se puede modificar. Sin embargo, los controles Content correspondientes a los ContentPlaceHolders de la página maestra son editables. Y al igual que con cualquier otra página ASP.NET, puede crear la interfaz de la página de contenido agregando controles web a través de las vistas Origen o Diseño.

Ilustración 09: la vista diseño de la página de contenido muestra tanto el contenido específico de la página como el contenido de la página maestra (haga clic para ver la imagen a tamaño completo)

Adición de marcado y controles web a la página de contenido

Dedique un momento a crear contenido para la página About.aspx. Como puede ver en la ilustración 10, he escrito un encabezado "Acerca del autor" y un par de párrafos de texto, pero no dude en agregar controles web también. Después de crear esta interfaz, visite la página About.aspx a través de un explorador.

Ilustración 10: visita a la página About.aspx a través de un explorador (haga clic para ver la imagen a tamaño completo)

Es importante comprender que la página de contenido solicitada y su página maestra asociada se fusionan y se representan en su totalidad en el servidor web. Después, el explorador del usuario final se envía el HTML resultante fusionado. Para comprobarlo, vea el código HTML recibido por el explorador; para ello, vaya al menú Ver y elija Origen. Tenga en cuenta que no hay marcos ni ninguna otra técnica especializada para mostrar dos páginas web diferentes en una sola ventana.

Enlazar una página maestra a una página ASP.NET existente

Como vimos en este paso, agregar una nueva página de contenido a una aplicación web de ASP.NET es tan fácil como marcas la casilla "Seleccionar página maestra" y seleccionar la página maestra. Por desgracia, convertir una página ASP.NET existente en una página maestra no es tan fácil.

Para enlazar una página maestra a una página ASP.NET existente, debe realizar los siguientes pasos:

1. Agregue el atributo MasterPageFile a la directiva @Page de la página ASP.NET y apunte a la página maestra adecuada.
2. Agregue controles Content para cada uno de los ContentPlaceHolders de la página maestra.
3. Corte y pegue de forma selectiva el contenido existente de la página ASP.NET en los controles Content adecuados. Digo "de forma selectiva" porque es probable que la página ASP.NET contenga marcado que ya está expresado por la página maestra, como el DOCTYPE, el elemento <html> y el formulario web.

Para obtener instrucciones paso a paso sobre este proceso junto con capturas de pantalla, consulte el tutorial Uso de páginas maestras y navegación del sitio de Scott Guthrie. La sección "Actualización de Default.aspx y DataSample.aspx para usar la página maestra" detalla estos pasos.

Dado que es mucho más fácil crear nuevas páginas de contenido que convertir las páginas ASP.NET existentes en páginas de contenido, se recomienda que cada vez que cree un nuevo sitio web de ASP.NET agregue una página maestra al sitio. Enlace todas las páginas nuevas ASP.NET a esta página maestra. No se preocupe si la página maestra inicial es muy simple o sencilla; podrá actualizar la página maestra más adelante.

Nota:

Al crear una nueva aplicación de ASP.NET, Visual Web Developer agrega una página Default.aspx que no está enlazada a una página maestra. Si desea practicar la conversión de una página de ASP.NET existente en una página de contenido, continúe y hágalo con Default.aspx. Como alternativa, puede eliminar Default.aspx y volver a agregarlo, pero esta vez marque la casilla "Seleccionar página maestra".

Paso 3: actualización del marcado de la página maestra

Una de las principales ventajas de las páginas maestras es que se puede usar una sola página maestra para definir el diseño general de numerosas páginas del sitio. Por lo tanto, actualizar la apariencia del sitio requiere actualizar un único archivo: la página maestra.

Para ilustrar este comportamiento, vamos a actualizar nuestra página maestra para incluir la fecha actual en la parte superior de la columna izquierda. Agregue una etiqueta denominada DateDisplay a leftContent<div>.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

A continuación, cree un controlador de eventos Page_Load para la página maestra y agregue el siguiente código:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd")
End Sub

El código anterior establece la propiedad Text de la etiqueta con la fecha y hora actuales formateadas como el día de la semana, el nombre del mes y el día de dos dígitos (véase la ilustración 11). Con este cambio, vuelva a visitar una de las páginas de contenido. Como se muestra en la ilustración 11, el marcado resultante se actualiza inmediatamente para incluir el cambio en la página maestra.

Ilustración 11: los cambios en la página maestra se reflejan al ver una página de contenido (haga clic para ver la imagen a tamaño completo)

Nota:

Como se muestra en este ejemplo, las páginas maestras pueden contener controles web del lado servidor, código y controladores de eventos.

Resumen

Las páginas maestras permiten a los desarrolladores de ASP.NET realizar un diseño coherente para todo el sitio que se pueda actualizar fácilmente. La creación de páginas maestras y sus páginas de contenido asociadas es tan simple como crear páginas ASP.NET estándar, ya que Visual Web Developer ofrece compatibilidad con tiempo de diseño enriquecido.

El ejemplo de página maestra que creamos en este tutorial tenía dos controles ContentPlaceHolder: head y MainContent. Sin embargo, solo se especificó el marcado para el control MainContent de ContentPlaceHolder en nuestra página de contenido. En el siguiente tutorial veremos el uso de varios controles Content en la página de contenido. También veremos cómo definir el marcado predeterminado para los controles Content dentro de la página maestra, así como cómo alternar entre usar el marcado predeterminado definido en la página maestra y proporcionar marcado personalizado desde la página de contenido.

¡Feliz programación!

Lecturas adicionales

Para obtener más información sobre los temas tratados en este tutorial, consulte los siguientes recursos:

• ASP.NET para diseñadores: plantillas de diseño gratuitas e instrucciones sobre la creación de sitios web de ASP.NET mediante estándares web
• Introducción a las páginas maestras de ASP.NET
• Tutoriales de hojas de estilos en cascada (CSS)
• Establecimiento dinámico del título de la página
• Páginas maestras en ASP.NET
• Tutoriales de inicio rápido de páginas maestras

Acerca del autor

Scott Mitchell, autor de varios libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, entrenador y escritor. Su último libro es Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Se puede contactar con Scott en mitchell@4GuysFromRolla.com o a través de su blog en http://ScottOnWriting.NET.

Gracias en especial a

¿Le interesa revisar mis próximos artículos de MSDN? Si es así, escríbame a mitchell@4GuysFromRolla.com.

AnteriorSiguiente