Como Crear Una Master Page en Asp.Net

Lo primero como siempre es crear un nuevo proyecto en visual estudio en esta ocasión creamos un nuevo sitio web vació de asp.net y especificamos la ruta de donde queremos guardarlo (también seleccionamos el lenguaje c# para cuando necesitemos programar algo).



Una ves creado nuestro proyecto web agregamos un nuevo elemento y seleccionamos una pagina maestra, le damos el nombre de plantilla y damos aceptar.



Luego de agregar nuestra pagina maestra agregamos un nuevo elemento y en esta ocasión elegimos una hoja de estilos (que nos servirá para darle todo el estilo a nuestra pagina maestra) y le damos el nombre de principal.css.



Ahora que ya agregamos nuestra hoja de estilos empezaremos a escribir nuestro código css para darle el diseño en nuestra web aclaro que aquí le doy estilo lo mas básico de cada quien depende darle un estilo mas profesioanl y propio.

body {text-align:center; background-color:purple;}
#global {width:900px; margin:4px auto;}  /*centrar la pagina web */
#cabezera{ width:900px; height:200px; background-color:blue; } /*cabeza de la pagina web */
#menu{width:900px; height:40px; background-color:black; margin-bottom:20px;} /*menu de la pagina web */
#contenido {width:900px;  background-color:white; }  /*contenido de la pagina web */
#pie{width:900px; height:100px; background-color:blue; margin-top:20px;} /*pie de la pagina web */

Ahora que ya tenemos la estructura de nuestro css nos vamos a nuestra pagina maestra y empezamos a definirle el diseño.
Lo primero es agregarle el código para importar nuestro css. escribimos el siguiente codigo antes de la etiqueta head

Una ves hecho esto empezamos a colocar los div dentro de nuestra pagina maestra, el primero que agregaremos sera el id global que nos servira para centrar toda nuestra web.
Entones agregamos el div luego de la etiqueta y agregamos el cierre antes de la etiqueta body

Luego agregamos el segundo div que seria el de la cabecera y aprovechando de una sola vez agregamos un control image que nos servira para agregar una imagen de cabecera (en este caso busque la imagen en internet)

Luego de este código iría el div del menú (lo de crear el menú lo explicare en otro tutorial)

Luego iria el div de nuestro contenido aquí es muy importante explicar que como dentro de este div ira la parte que queremos modificar por cada pagina pagina web entonces agregaremos el control de asp.net ContentPlaceHolder que permite modificar partes de una pagina maestra (el div que lleve este control sera la parte que podremos modificar de nuestra pagina maestra en las demas paginas web).

Y por ultimo agregamos el div de nuestro pie.

aqui va el pie de pagina

Por si no entendieron como irían todos los div les dejo todo el código de la pagina maestra

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="plantilla.master.cs" Inherits="plantilla" %>





 
 
 






 

 

 
 

 

 


     
  
     



  aqui iria el pie de pagina

 

Con esto hemos terminado nuestra pagina maestra.

Ahora agregaremos un web form que sera nuestra pagina de inicio y aremos que tenga el diseño de nuestra pagina maestra para que vean como funciona la pagina maestra.

Entonces agregamos un nuevo elemento elegimos web forms y le damos el nombre de inicio, es importante que abajo marquen la opción de seleccionar pagina maestra luego les saldrá todas las paginas maestras disponibles en nuestro proyecto que en este caso solo tenemos la de plantilla damos aceptar





Luego de agregar el web forms lo primero sera hacer referencia a la hoja de estilo como lo hicimos con la pagina maestra, lo agregamos luego de la etiqueta conten1 que es la parte del head

Una vez hecho esto si cambiamos a la vista de diseño de visual estudio podemos ver que la única parte donde podemos escribir y modifica es donde dejamos el control ContentPlaceHolder



Si ejecutamos nuestro web forms así se vera en el navegador (como pueden ver ya tenemos un diseño básico de nuestra sitio web)



Les dejo el proyecto completo también para que lo descarguen y lo prueben en visual estudio.

Descargar Proyecto