Una Master Page o Página Principal es una estructura base para un conjunto de páginas pertenecientes a un mismo sitio Web. Este esqueleto base se almacena en un archivo independiente y luego es heredado por otras páginas que requieren esa estructura base.
Un ejemplo donde utilizar una página Master Page es la definición de la cabecera y el pie del sitio, luego todas las otras páginas del sitio heredan de dicha página. La ventaja fundamental en este ejemplo es que si hay cambios en la cabecera del sitio solo debemos hacerlos en la página principal y con esto se propaga en todas las páginas que heredan de la misma.
Un ejemplo donde utilizar una página Master Page es la definición de la cabecera y el pie del sitio, luego todas las otras páginas del sitio heredan de dicha página. La ventaja fundamental en este ejemplo es que si hay cambios en la cabecera del sitio solo debemos hacerlos en la página principal y con esto se propaga en todas las páginas que heredan de la misma.
Utilizaremos Plantillas en HTML y CSS para que sea más agradable la presentación.
¿Cómo lo hacemos?
La construcción de las páginas maestras es similar a la creación de web forms con algunas diferencias.
· La extensión del archivo es .master
· Usa la directiva @ Master
· Contiene un objeto ContentPlaceHolder donde lo utilizara para mostrar el contenido de las páginas del sitio.
Ejemplo
Luego abriremos nuestro Visual Studio con un nuevo proyecto Web después crearemos un Master Page.
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!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></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>
Al igual que los Web forms las Master Pages puede tener su código separado CodeFile="Main.master.cs"
Agregaremos la descarga de la plantilla al proyecto y estos son:
Luego copiaremos de body a body del Index hacia el Master Page después remplazaremos lo de head a head del Index y quedara nuestro Master Page como el Index.
Insertaremos un ContentPlaceHolder en el cual podremos insertar lo que queramos más el resto no será malogrado y quedaría asi:
Luego agregaremos un nuevo elemento, una Web Forms y activaremos Seleccionar página maestra:
El código que mostrara será este:
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
Y en Diseño queda así
Y ingresaremos imágenes, textos, videos, etc.
A otro dato podemos programar en Master Page y lo que programemos afectara a todos los que están con el Master Page.
No hay comentarios:
Publicar un comentario