Practico: Taller de programación III

CREAR UNA PÁGINA MAESTRA

Contenido del Práctico

• Crear una página ASP.NET con contenido que desea mostrar en la

página maestra.
• Ejecutar las páginas maestras para mostrar contenido diferente.
• Seleccionar una página maestra en tiempo de ejecución.

Para poder completar este práctico, necesitará:

Crear un sitio Web

Si ya ha creado un sitio web en Visual Web Developer (por ejemplo, según
los pasos indicados en el Práctico: Crear una página Web básica en Visual
Web Developer), puede usar dicho sitio web y pasar a la siguiente sección,
Crear la página maestra. De lo contrario, cree un sitio Web y una página
nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

• Abra Visual Web Developer.

• En el menú Archivo, haga clic en Nuevo Sitio Web.
• Aparece el cuadro de diálogo Nuevo sitio Web.
• En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de
ASP.NET.
• En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea
conservar las páginas de su sitio Web.
• Por ejemplo, escriba el nombre de carpeta C:\WebSites o déjela en la
carpeta por defecto.
• 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 página nueva
denominada Default.aspx.

Crear la página maestra

La página maestra es la plantilla que define la apariencia que tendrán las
páginas. En esta sección, creará primero una página maestra. A
continuación, utilizará una tabla para diseñar la página maestra con un
menú, un logotipo y un pie que aparecerán en todas las páginas del sitio.
También trabajará con un marcador de posición de contenido, que es un
área de la página que se puede reemplazar por información en una página
de contenido.

Para crear la página maestra

Profesor: Héctor Cáceres

 Practico: Taller de programación III

• En el Explorador de soluciones, haga clic con el botón secundario en

el nombre del sitio web y, a continuación, haga clic en Agregar nuevo
elemento.
• En Plantillas instaladas de Visual Studio, haga clic en Página Principal.
• En el cuadro Nombre, escriba Master1.
• Active la casilla Colocar el código en un archivo independiente.

Nota

En este práctico se supone que está utilizando archivos de código

subyacente para todas las páginas. Si utiliza una página ASP.NET de un
único archivo, el código que se muestra en el práctico funcionará, pero
aparecerá en la vista Código fuente, no en un archivo de código
independiente.

• En la lista Lenguaje, haga clic en el lenguaje de programación con el

que prefiera trabajar y, a continuación, haga clic en Agregar.
• La nueva página maestra 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 ContentPlaceHolder, que es el área de la página
maestra donde se combinará el contenido reemplazable de las
páginas en tiempo de ejecución. En el práctico, trabajará después
más con el marcador de posición de contenido.

Diseñar la página maestra

La página maestra define la apariencia de las páginas del sitio. Puede
contener cualquier combinación de texto estático y controles. Una página
maestra 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 práctico, utilizará una tabla como ayuda para colocar los elementos
en la página. Empezará por crear una tabla de diseño para alojar los
elementos de la página maestra. Más adelante en esta sección colocará el
control de marcador de posición de contenido que ya está en la página.

Para crear una tabla de diseño para la página maestra

• Con el archivo Master1.master seleccionado en la vista Código

fuente, utilice la lista desplegable (botón derecho, Formato y
validación…), elija Validación y compruebe que en el destino para
validación este seleccionado XHTML 1.0 Transitional (Netscape 7,
Opera 7, Internet Explorer 6.0).
• Cambie a la vista Diseño.

Profesor: Héctor Cáceres

 Practico: Taller de programación III

• Para seleccionar la página, haga clic en el centro de la misma. En la

ventana Propiedades, establezca la propiedad BgColor en un color
distintivo, como el azul.
• El color que selecciona no es importante. Más adelante en este
práctico creará una segunda página maestra sin color, que
contrastará con lo que seleccione aquí.
• Haga clic en la página donde desea colocar la tabla de diseño.

Nota

No coloque la tabla de diseño en el control ContentPlaceHolder.

• En el menú Tabla, haga clic en Insertar tabla.

• En el cuadro de diálogo Insertar tabla cree una tabla con tres filas y
una columna y, a continuación, haga clic en Aceptar.
• Coloque el cursor dentro de la segunda fila de la tabla.
• En el menú Tabla, en el submenú Modificar, haga clic en Dividir
celdas.
• En el cuadro de diálogo Dividir celdas, seleccione Dividir en columnas
y, a continuación, haga clic en Aceptar.

Configure las opciones siguientes:

• En la fila central, haga clic en la columna situada más a la izquierda y,

a continuación, establezca su Ancho (width) en 48 en la ventana
Propiedades.
• Haga clic en la fila superior y, a continuación, establezca su Alto
(Height) en 48 en la ventana Propiedades.
• Haga clic en la fila inferior y, a continuación, establezca su Alto en 48
en la ventana Propiedades.

Nota

Para establecer el alto y ancho, arrastre los bordes de la celda o seleccione

la celda y establezca los valores en la ventana Propiedades.

• Seleccione todas las celdas en la tabla y establezca BgColor en un

color diferente que el color de fondo.

Después de diseñar la tabla, puede agregar el contenido a la página

maestra que aparecerá en todas las páginas. Agregará un mensaje de
copyright como pie de página y, a continuación, un menú. Si tiene un
gráfico de logotipo disponible, también puede agregarlo.

Para agregar contenido estático a la página maestra

• Haga clic en la celda inferior y, a continuación, escriba el texto del pie

de página, por ejemplo Copyright 2010 Ing. en Informática Inc.
• En el Cuadro de herramientas, arrastre un control Menú desde el
grupo de controles Navegación hasta la celda superior.

Profesor: Héctor Cáceres

 Practico: Taller de programación III

Cree un menú siguiendo estos pasos:

• Establezca la propiedad Orientación del control Menú en Horizontal.

• Haga clic en la etiqueta inteligente en el control Menú y haga clic en
Editar elementos de menú en el cuadro de diálogo Tareas de menú.
Aparecerá el cuadro de diálogo Editor de elementos de menú.
• En el cuadro de diálogo Editor de elementos de menú, en la sección
Elementos, haga dos veces clic en el icono Agregar un nodo raíz para
agregar dos elementos de menú:
• Haga clic en el primer nodo y, a continuación, establezca la propiedad
Text en: Página Principal y establezca la propiedad NavigateUrl en:
Defaul.aspx.
• Haga clic en el segundo nodo y, a continuación, establezca la
propiedad Text en: Acerca de y establezca la propiedad NavigateUrl
en About.aspx.(esta página será creada más adelante, por lo tanto
recuerde este paso).
• Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de
elementos de menú.

Si tiene un archivo gráfico disponible para utilizarlo como logotipo, siga

estos pasos para colocarlo en la página maestra:

• En el Explorador de soluciones, haga clic con el botón secundario en

el nombre del sitio web y, a continuación, seleccione Agregar
elemento existente.
• Navegue a su archivo gráfico, selecciónelo y, a continuación, haga
clic en Agregar.
• En el Cuadro de herramientas, arrastre un control Image desde el
grupo Estándar hasta la columna central izquierda de la tabla.
• Establezca la propiedad ImageUrl del control Image en el nombre del
archivo gráfico.
• Ahora puede colocar el marcador de posición de contenido
(ContentPlaceHolder ), para especificar dónde puede mostrar
contenido la página maestra en tiempo de ejecución.

Para mover el marcador de posición de contenido

• Arrastre el control ContentPlaceHolder a la celda central derecha.

Para mover el control, haga clic en su interior y, a continuación,
arrástrelo por su etiqueta.
• La propiedad ID del control es ContentPlaceholder1. Puede dejar este
nombre o cambiarlo. Si cambia el nombre, anótelo porque necesitará
recordarlo más adelante.
• Guarde la página.

Crear contenido para la página maestra

La página maestra proporciona la plantilla para el contenido. El contenido
de la página maestra se define creando una página ASP.NET que se asocia a

Profesor: Héctor Cáceres

 Practico: Taller de programación III

la página maestra. La página de contenido es un formulario especializado de

una página ASP.NET que incluye sólo el contenido que se va a combinar con
la página maestra. En la página de contenido, agregará el texto y los
controles que desee mostrar cuando los usuarios soliciten la página.

En este práctico, agregará dos páginas con contenido para la página

maestra. La primera es una página de inicio y la segunda es una página
Acerca de.

Para crear la página de inicio

• En el Explorador de soluciones, haga clic con el botón secundario en
el nombre del sitio web y, a continuación, haga clic en Agregar nuevo
elemento.
• En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
• En el cuadro Nombre, escriba Página principal.
• En la lista Lenguaje, haga clic en el lenguaje de programación con el
que prefiera trabajar.
• Active la casilla Seleccionar la página maestra y, a continuación, haga
clic en Agregar.
• Aparece el cuadro de diálogo Seleccionar la página maestra.
• Haga clic en Master1.master y en Aceptar.
• Se crea un nuevo archivo .aspx. La página contiene una directiva @
Page que asocia la página actual a la página maestra seleccionada
con el atributo MasterPageFile, tal como se muestra en el ejemplo de
código siguiente.

<%@ Page Language="VB" MasterPageFile="~/Master1.master" ...%>

La página también contiene un elemento de control Content con el que

trabajará luego.

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 maestra se agrega reemplazando las áreas
de marcador de posición creadas en dicha página.

Para agregar contenido a la página de inicio

• En la vista Código fuente, escriba Página principal de Ing. en
Informática en el elemento Título de la directiva @ Page en la parte
superior de la página.

Puede establecer el título de cada página de contenido de forma

independiente a fin de que se muestre el título correcto en el explorador
cuando el contenido se combine con la página maestra. La información
del título se almacena en la directiva @ Page de la página de contenido.

• Cambie a la vista Diseño.

Profesor: Héctor Cáceres

 Practico: Taller de programación III

• Los controles ContentPlaceHolder de la página maestra se muestran

como controles Content en la nueva página de contenido. Se muestra
el resto del contenido de la página maestra para que pueda ver el
diseño. No obstante, aparece atenuado porque no se puede cambiar
durante la edición de una página de contenido; el cursor pasa a ser
una barra vertical únicamente cuando se puede agregar contenido.
• En el control Content que coincide con ContentPlaceHolder1 en la
página maestra, escriba Bienvenido al sitio web de Informática.
• Seleccione el texto y, a continuación, asígnele el formato de
encabezado seleccionando Encabezado 1 en la lista desplegable
Formato del bloque situada encima del Cuadro de herramientas.
• Presione ENTRAR para crear una nueva línea en blanco en el control
Content y, a continuación, escriba Gracias por visitar nuestro sitio.
• El texto que agrega aquí no es importante; puede escribir cualquier
texto que le ayude a reconocer que es la página de inicio.
• Guarde la página.
• Puede crear la página Acerca de tal como creó la página de inicio.

Para crear la página Acerca de

• Utilice los mismos pasos que al crear la página de inicio para agregar
una nueva página de contenido denominada About.aspx.
• Asegúrese de asociar la nueva página a la página Master1.master
como hizo con la página de inicio.
• Cambie el título de la página a Página Acerca de Ing en Informática.
• En el área de contenido, escriba Acerca de Ing en Informática y, a
continuación, para dar formato al texto como Encabezado 2,
seleccione el texto y seleccione Encabezado 2 en la lista desplegable
Formato del bloque situada encima del Cuadro de herramientas.
• Presione ENTRAR para crear una nueva línea y, a continuación,
escriba Desde 2000, Ing en Informática ha proporcionado alumnos de
gran calidad.
• Guarde la página.

Probar las páginas

Puede probar las páginas ejecutándolas tal como haría con cualquier página
ASP.NET.

Para probar las páginas

• Cambie a la página default.aspx en la propiedad NavigateUrl del

Menu por PaginaPrincipal.aspx, a continuación, presione CTRL+F5.
• Deje en el Explorador de soluciones la PaginaPrincipal.aspx como
página de inicio, para ello seleccione la PaginaPrincipal.aspx botón
derecho y elija la opción Establecer como página de Inicio…
• ASP.NET combina el contenido de la página PaginaPrincipal.aspx con
el diseño de la página Master1.master en una sola página y muestra

Profesor: Héctor Cáceres

 Practico: Taller de programación III

el resultado en el explorador. Observe que la dirección URL de la

página es Default.aspx; no hay ninguna referencia en el explorador a
la página maestra.
• Haga clic en el vínculo About.
• Se muestra la página About.aspx. También se combina con la página
Master1.master.

Profesor: Héctor Cáceres