Crear Paginas Maestras en Visual Web Developer

Muchas veces nos encontramos con la necesidad de crear un sitio en el cual necesitamos tener la misma estructura a través de sus diferentes paginas, generalmente nos toca escribir el mismo código una y otra vez gastando tiempo y esfuerzo que podríamos haber empleado en otro aspecto del sitio, para esto existen las Master Pages o Paginas Maestras. Veremos que es una Master Page, como crear una master page en asp.net y como enlazar correctamente la master page con las paginas “hijas” para utlizar su estructura de manera facil.

Que es una Master Page o Pagina Maestra?
Una Master Page es en resumen una pagina que será utilizada de Plantilla para otras paginas del sitio, una pagina maestra se crea cuando se decide que la estructura del sitio sera la misma para muchas o todas de sus paginas. Así lo que pongas o definas en una master page será heredado de forma simple (mediante una linea) a todas las paginas “hijas” que asi lo soliciten.

El funcionamiento de una MasterPage es el siguiente:

• El diseñador construye una Master Page y define el código para crear un menú de Navegación del sitio.

• El diseñador Web ahora tiene una pagina “hija” con el mismo menú (código) pero sin tener que escribir de nuevo (o copiar y pegar ) el código ya que perdería tiempo en algo que ya esta creado. (además de otras varias razones).

• El diseñador utilizo una línea de código para importar varias (pueden ser cientas) líneas de código y ahorro valioso tiempo.

Pasos para la creación de Paginas Maestras

• Abra Visual Studio o Visual Web Developer Express.
• En el menú Archivo, haga clic en Nuevo sitio Web.
• Aparece el cuadro de diálogo Nuevo sitio web.
• En Plantillas instaladas, haga clic en Visual Basic y, a continuación, seleccione Sitio web vacío de ASP.NET.
• En el cuadro Ubicaciónweb, seleccione el cuadro Sistema de archivos y escriba el nombre de la carpeta en la que desea guardar las páginas del sitio web.
• Por ejemplo, escriba el nombre de carpeta C:\WebSites.
• Haga clic en Aceptar.
• Visual Studio crea un proyecto de sitio web que incluye un archivo Web.config.

Crear Pagina 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. Trabajará con un marcador de posición de contenido, que es un área de la página que se puede remplazar por información en una página de contenido.

Para crear la página maestra

1. 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.

2. En Plantillas instaladas de Visual Studio, haga clic en Página maestra.

3. En el cuadro Nombre, escriba MasterPage.

4. Active la casilla Colocar el código en un archivo independiente.

5. 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.

6. La nueva página maestra se abre en la vista Código fuente.

7. 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 contro 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 tutorial, trabajará después más con el marcador de posición de contenido.

Diseñar la Pagina 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.
Utilizaremos una tabla como ayuda para colocar los elementos en la página. Empezaremos 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.

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

1. Con el archivo MasterPage.master seleccionado en la vista Código fuente, utilice la lista desplegable Esquema de destino para validación en la barra de herramientas para establecer el esquema de destino en Microsoft Internet Explorer 6.0.

2. Cambie a la vista Diseño.

3. Para seleccionar la página, haga clic en el centro de la misma. En la ventana Propiedades. Haga clic en la página donde desea colocar la tabla de diseño (No coloque la tabla de diseño en el control ContentPlaceHolder)

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

5. 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.

6. Coloque el cursor dentro de la segunda fila de la tabla.

7. En el menú Tabla, en el submenú Modificar, haga clic en Dividir celdas.

8. En el cuadro de diálogo Dividir celdas, seleccione Dividir en columnas y, a continuación, haga clic en     Aceptar.

9. Configure las opciones siguientes:

    1. En la fila central, haga clic en la columna situada más a la izquierda y, a continuación, establezca         su Ancho en 48 en la ventanaPropiedades.

    2. Haga clic en la fila superior y, a continuación, establezca su Alto en 48 en la ventana                           Propiedades.

    3. 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.Después de diseñar la tabla, podemos 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.

Agregar contenido estático a la página maestra

1. Haga clic en la celda inferior y, a continuación, escriba el texto del pie de página, por ejemplo Copyright 2016 webexpertos Inc.

2. En el Cuadro de herramientas, arrastre un control Menu desde el grupo de controles Navegación hasta la celda superior.

3. Cree un menú siguiendo estos pasos:

Establezca la propiedad Menu del control Orientation en Horizontal.

Haga clic en la etiqueta inteligente en el control Menu y haga clic en Editar elementos de menú en  el cuadro de diálogo Tareas de menú. Aparecerá el cuadro de diálogo Editar elementos de menú.

4. En el cuadro de diálogo Editar 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 Text en Principal y establezca  NavigateUrl en Default.aspx.

Haga clic en el segundo nodo y, a continuación, establezca Text en Acerca de y establezca NavigateUrl en About.aspx.

Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de elementos de menú.

5. Insertar 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.

Ahora puede colocar el marcador de posición de contenido 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

1. 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.

2. Guarde la página.

Crear Contenido para Pagina 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 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, agregaremos el texto y los controles que desee mostrar cuando los usuarios soliciten la página.
Agregaremos dos páginas con contenido para la página maestra. La primera es una página predeterminada (principal) y la segunda es una página Acerca de.

Para crear la página predeterminada

1. 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.

2. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.

3. En el cuadro Nombre, mantenga el nombre de archivo que Visual Studio inserta: Default.

4. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

5. 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.

6. Haga clic en MasterPage.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.

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 predeterminada

1. En la vista Código fuente, escriba Página principal 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.

2. Cambie a la vista Diseño.

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.

3. En el control Content que coincide con ContentPlaceHolder1 en la página maestra, escriba Bienvenido al sitio web Webexpertos.

4. 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.

5. 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 predeterminada (principal)

6. Guarde la página.

Puede crear la página Acerca de tal como creó la página predeterminada.

Para probar las páginas

1. Pase a la página Default.aspx y, a continuación, presione CTRL+F5.
ASP.NET combina el contenido de la página Default.aspx con el diseño de la página MasterPage.master en una sola página y muestra el resultado en el explorador.

2. Haga clic en el vínculo About.
Se muestra la página About.aspx. También se combina con la página MasterPage.master.