ProgramaciĆ³n, TecnologĆ­a y MĆ”s...

ProgramaciĆ³n, TecnologĆ­a y MĆ”s...

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

Nuevo Proyecto

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

Master Page

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.

Hoja de Estilo

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

form

form

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

DiseƱo

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)

DiseƱo

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

Descargar Proyecto

Publicar un comentario

2 Comentarios