Introdução:

Uma característica de um site bem projetado é um layout consistente em todas as páginas que o compõe. Veja o site www.asp.net, por exemplo. Até o presente momento, cada página tem o mesmo conteúdo na parte superior e inferior da página. Como mostra a Figura 1, a parte superior de cada página exibe uma barra cinza com uma lista de comunidades da Microsoft. Abaixo é o logotipo do site, a lista de idiomas em que o site foi traduzido e as seções principais: Home, Get Started, Learn, Downloads e assim por diante. Da mesma forma, a parte inferior da página inclui informações sobre publicidade de www.asp.net, uma declaração de direitos autorais e um link para a declaração de privacidade.

Outra característica de um site bem projetado é a facilidade com que a aparência do site pode ser alterada. A Figura 1 mostra a pagina principal de www.asp.net a partir de Março de 2008, mas entre agora e publicação deste tutorial, seu layout pode ter mudado, ou seja, ela poderá ter outra aparência. Talvez os itens de menu na parte superior possam estar mais expandidos para incluir uma nova seção para o framework MVC. Ou talvez uma mudança radical com um novo design com diferentes cores, fontes e layout poderão ser aplicados. Aplicar essas alterações para todo o site deve ser um processo rápido e simples que não demande a modificação de milhares de páginas do site.

A criação de um modelo de página para todo o site em ASP.NET foi possível através da utilização de página mestre. Em suma, uma página mestre é um tipo especial de página ASP.NET que define o HTML comum entre todas as páginas de conteúdo, bem como regiões que são personalizáveis pelas páginas de conteúdo (uma página de conteúdo é uma página ASP.NET que está vinculada à página-mestre). Sempre que o layout ou formatação é alterado em uma página mestre, todas as páginas de conteúdo vinculadas a ela são atualizadas imediatamente, proporcionando alterações da aparência de todo o site de maneira facilmente, apenas alterando um único arquivo: a página mestre.

Noções básicas sobre como as páginas mestres funcionam

A criação de um site com um layout de página consistente requer que cada página possua uma formatação comum e conteúdo personalizado. Por exemplo, enquanto cada página de tutorial ou fórum em www.asp.net possui seu próprio conteúdo exclusivo, cada uma destas páginas também compõe uma série de elementos comuns <div>  que exibem os links da seção de nível superior: Home, introdução, aprenda e assim por diante.

Há uma variedade de técnicas para a criação de páginas da web com uma aparência consistente:

 
COPY-PAST

Talvez a tecnica mais natural e ingênua, é  simplesmente copiar e colar o HTML de layout comuns em todas as páginas da web. Algumas desvantagens desta técnica:

- Cada copy-past pode produzir erros se de algum modo apenas uma parte do HTML compartilhado for copiado.

- A troca de aparência do site existente por uma nova se transforma em uma verdadeira dor de cabeça porque cada página do site deve ser alterado um-a-um para receber o novo layout.

 
USER CONTROLS

Outra tecnica e a utilizacao de User Controls (antes da versão 2.0 do ASP.NET), onde os desenvolvedores de página frequentemente colocavam o HTML comum em User Controls, em seguida, adicionavam esses controles de usuário para cada página. Desvantagens:

- Essa técnica exigia que o desenvolvedor colocasse manualmente o UserControl em cada nova página adicionada, mas já permitia as modificações globais (em todo o site) mais fácil, porque era necessário atualizar apenas os UserControls utilizados como HTML comuns.

- As versões do Visual Studio .NET 2002 e 2003 usados para criar aplicativos para ASP.NET 1.x processava os UserControls e gerava caixas cinzas na visualização em modo Design (tempo de desenvolvimento). Por esse motivo, os desenvolvedores que usavam essa técnica não se beneficiavam do ambiente de tempo de design WYSIWYG.


MASTER PAGES

As deficiências do uso de UserControls foram solucionadas no ASP.NET versão 2.0 e Visual Studio 2005 com a introdução de páginas mestre.

Uma página-mestre é um tipo especial de página ASP.NET que define a ambos a marcação (HTML) comum ao site todo e as regiões onde serão associadas as páginas de conteúdo personalizado. Como veremos no passo 1, estas regiões são definidas por controles denominados ContentPlaceHolder.

O controle ContentPlaceHolder simplesmente indica uma posição na hierarquia de controle da página mestre onde o conteúdo personalizado pode ser inserido por uma página de conteúdo.

Nota: Os principais conceitos e a funcionalidade de páginas mestreS não se alteraram desde o ASP.NET versão 2.0. No entanto, o Visual Studio 2008 oferece suporte em tempo de design para páginas mestras aninhadas, um recurso que não existe no Visual Studio 2005.

A Figura 2 mostra um layout de página mestre semelhante a aparência do site www.asp.net. Observe que a página mestre define o layout comum (HTML) a todo o site na parte superior, inferior e direita de todas as páginas, bem como, um ContentPlaceHolder no centro esquerdo, onde se encontra o conteúdo exclusivo para cada página de conteúdo personalizada (individual).

Figura 02: O layout do site e definido na pagina mestre juntamente com a região de paginas de conteúdo (editáveis)

 Assim que uma página-mestre for definida ela poderá ser ligada às novas páginas ASP.NET através da escolha de uma caixa de seleção.Estas páginas ASP.NET - chamadas de páginas de conteúdo - incluem um controle de conteúdo para cada um dos controles de ContentPlaceHolder da página mestra. Quando a página de conteúdo é visitada por meio de um navegador o mecanismo do ASP.NET cria a hierarquia de controle da página mestra e injeta a hierarquia de controle da página de conteúdo em locais adequados. Essa hierarquia de comando combinado é processada e o HTML resultante é retornado ao navegador do usuário final. Por conseguinte, a página de conteúdo emite a marcação comum definida na sua página mestre fora dos controles ContentPlaceHolder e a marcação de página específicos definidos dentro de seus próprios controles de conteúdo. A Figura 3 ilustra esse conceito.

Figura 03: Marcação (HTML) da página solicitada é fundido na página mestre 

Agora que o funcionamento das paginas mestres foi discutido, já é possvel criarmos uma página mestra e associar páginas de conteúdo usando o Visual Web Developer. 

ETAPA 1: Criando uma Página Mestre:

Antes de explorarmos a criação e utilização de páginas mestre e páginas de conteúdo, primeiro precisamos criar um site ASP.NET. Comece criando um novo aplicativo baseado em Web site ASP.NET. Para conseguir isso, abra o Visual Web Developer e, em seguida, vá ao menu Arquivo e escolha New Web Site, exibindo a caixa de diálogo New Web Site (ver Figura 4). Escolha o template ASP.NET Web Site, defina o drop-down list Location para File System, escolha uma pasta para colocar o site, e defina a linguagem para C #. Isto irá criar um novo web site com uma página ASP.NET Default.aspx uma pasta App_Data e um arquivo Web.config.

Observação: Visual Studio suporta dois tipos de gerenciamento de projetos: Web Site e Web Application.  Nos projetos Web Site falta um arquivo de projeto, porque os projetos Web Application imitam a arquitetura de projeto do Visual Studio. NET 2002/2003 - que inclue um arquivo no projeto para compilação do código-fonte em um único assembly, que é colocado na pasta /bin Visual Studio 2005, inicialmente apenas com suporte a projetos Web Site, embora o modelo dos projetos Web Application tenha sido reintroduzido com o Service Pack 1 do Visual Studio 2008 oferece dois modelos de projeto. As edições 2005 e 2008 do Visual Web Developer, no entanto, deixaram de suportar projetos de site. Será utilizado o modelo de projetos de Web Site este tutorial. Se você estiver usando uma edição comercial do Visual Studio e quiser usar o modelo de Web Application para seu projeto, fique a vontade em fazê-lo, mas esteja ciente de que pode haver algumas discrepâncias entre o que você vê na tela e os passos que você deve tomar em relação as printscreens de telas mostradas e instruções fornecidas neste tutoriais. 

Figura 04: Criar um novo projeto baseado no modelo (template) Web Site

Em seguida, adicione um página mestra para o site clicando no diretório raiz, no Solution Explorer, com o botão direito do mouse sobre o nome do projeto, escolha Add New Item e selecione o modelo de Página Mestra. Note que a extensão de páginas mestre é .master. Defina o nome deste página mestre como Site.master e clique em Adicionar.

Figura 05: Adicionando uma página mestre para o site chamada Site.master

Adicionando uma nova página mestre através do Visual Web Developer é criada uma página principal com a seguinte instrução HTML declarativa:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A primeira linha declarativa no arquivo de marcação (HTML) é o @Master que é semelhante ao @Page diretiva que aparece em páginas ASP.NET normais. Esta diretiva define a linguagem server-side (C#) e informações sobre a localização e a herança do código da página mestre-behind class.

O DOCTYPE é uma marcação declarativa da página que aparece abaixo da directiva @Master.A página inclui HTML estático, juntamente com quatro controles do lado do servidor:

    * Um formulário Web o <form runat="server"> - porque todas as páginas ASP.NET normalmente têm um formulário da Web - e porque a página mestra pode incluir controles Web que devem aparecer dentro de um formulário da Web - não se esqueça de adicionar o Web Formulário para a sua página principal (em vez de adicionar um formulário Web para cada página de conteúdo).
    * Um controle ContentPlaceHolder nomeado como ContentPlaceHolder1 - esse controle ContentPlaceHolder aparece no formulário Web, e serve como a região de interface da página de conteúdo do usuário. É nessa região que a página de conteúdo será inserida.

    * Um elemento <head> do lado do servidor - o elemento (tag) <head> tem o runat="server" tornando-se acessível através do código no servidor. O elemento <head> é aplicado a este caminho para que o título da página e outros marcadores (tags HTML) relacionados ao <head> possam ser adicionados ou adaptados de forma programática. Por exemplo, definir a propriedade de uma página ASP.NET Title muda o elemento <title> prestados pelo controle de servidor <head>.

    * Um controle ContentPlaceHolder nomeado head - este controle ContentPlaceHolder aparece dentro do controle de servidor <head> e pode ser usado declarativamente para adicionar conteúdo ao elemento <head>

 
Este padrão de declaração de página mestre serve como ponto de partida para a concepção de suas próprias páginas mestre.
 
Nota: Ao criar uma página mestre certifique-se que a contém um formulário Web e que pelo menos um controle ContentPlaceHolder apareça dentro deste Web Form. 

Criando um simples layout para o site :

A página mestre  Site.master  será modificada para acomodar um layout de site, onde todas as páginas contenham: um cabeçalho comum, uma coluna esquerda com a navegação, notícias e outros conteúdos do site, e um rodapé que exibe o "Powered by Microsoft ASP. ícone "NET.  A Figura 6 mostra o resultado final da página principal quando uma de suas páginas de conteúdo é visualizado através de um navegador. A região com um círculo vermelho na Figura 6 é a página específica que está sendo visitado em Default.aspx o restante do conteúdo é definido na página mestra e, portanto, consistente em todas as páginas de conteúdo. 

Figura 06: A página mestre define a marcação (HTML) das regiões do topo, esquerda e rodapé

Para o layout do site ficar como mostra a Figura 6, comece atualizando a página mestra Site.master para que contenha o seguinte código: 
 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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>Untitled Page</title>   
    <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>   
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>  
    <form id="form1" runat="server">      
        <div id="topContent">          
            <a href="Default.aspx">Master Pages Tutorials</a>      
        </div>          
        <div id="mainContent">          
            <asp:ContentPlaceHolder id="MainContent" runat="server">          
            </asp:ContentPlaceHolder>      
        </div>              
        <div id="leftContent">          
            <h3>Lessons</h3>              
            <ul>              
                <li>TODO</li>          
            </ul>          
            <h3>News</h3>              
            <ul>              
                <li>TODO</li>          
            </ul>      
        </div>              
        <div id="footerContent">          
            <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />      
        </div>  
    </form>
</body>
</html>
 
 
 
O layout da página mestre é definido utilizando uma série de <div> elementos HTML. O topContent <div> contém a marcação (HTML) que aparece na parte superior de cada página, enquanto o mainContent leftContent e footerContent <div> s são usados para exibir o conteúdo da página, na coluna da esquerda, e os "Powered by Microsoft ASP.NET ícone ", respectivamente. Além de adicionar estes elementos <div> , a propriedade ID do controle ContentPlaceHolder chamado ContentPlaceHolder1 foi renomeado para MainContent.

A formatação e as regras do layout para os elementos <div> associados está escrito no arquivo da folha de estilo em cascata (CSS)  Styles.css que é especificado através de um elemento <link> no elemento <head> da página mestre . Estas regras definem diferentes estilos (aparência) para cada elemento <div>  indicado acima. Por exemplo, o elemento topContent <div> , que exibe o texto "Master Pages Tutorials" e link, tem as suas regras de formatação especificada no Styles.css como segue:
#topContent {   
    text-align: right;   
    background-color: #600;   
    color: White;   
    font-size: x-large;   
    text-decoration: none;   
    font-weight: bold;   
    padding: 10px;   
    height: 50px; }
 
Será necessário baixar o código que acompanha este tutorial e adicionar o arquivo Styles.css para seu projeto. Da mesma forma, que será preciso criar uma pasta chamada imagens e copiar o "Powered by Microsoft ASP.NET" ícone do site para seu projeto na pasta imagens.
 
Nota: A discussão da formatação CSS da página web está além do escopo deste artigo. Para saber mais sobre CSS, confira os tutoriais CSS no W3Schools.com. É aconselhável baixar o código que acompanha este tutorial e testar outras definições para o CSS no Styles.css a fim de verificar os efeitos de diferentes regras de formatação.
 
Criando uma página mestre usando um modelo de design existentes:

Alguns clientes já possuem o layout do site pronto outros contratam designer gráfico competente para o desenvolvimento de uma entidade visual. Observando o layout construído na Figura 6, fica claro que um programador sabe projetar o layout de site geralmente tão bem quanto um contador realiza uma cirurgia de coração, quanto o seu médico se os seus impostos. Felizmente, existem inúmeros sites que oferecem modelos gratuitos de design HTML - Google retornou mais de seis milhões de resultados para o termo de pesquisa "free website templates". Para citar um exemplo temos o OpenDesigns.org. Quando você encontrar o modelo de site que quiser ou precisar, adicione os arquivos CSS e imagens para o seu projeto de website e integre o HTML do modelo em sua página principal (mestre).

Nota: A Microsoft também oferece alguns templates livres chamados Free ASP.NET Design Start Kit Templates que se integram na caixa de diálogo New Web Site no Visual Studio.

ETAPA 2: Criando Página de Contéudo associado a página mestre:
 

Com a página mestra criada, estamos prontos para começar a criar páginas ASP.NET que serão vinculadas, associadas, à página principal (mestre). Essas páginas são definidas como páginas de conteúdo. Vamos adicionar uma nova página ASP.NET para o projeto e vinculá-lo à página mestre Site.master, clique com o botão inverso (direito) do mouse sobre o nome do projeto no Solution Explorer e escolha a opção Add New Item. Selecione o modelo de formulário da Web, digite o nome About.aspx e em seguida, marque a opção "Select master page" como mostra a Figura 7. Seguindo esses passos, irá ser exibida uma caixa de diálogo para seleção da página mestre (ver Figura 8) que você deseja usar.


Nota: Se você criou seu site ASP.NET usando o modelo de projeto de aplicativo da Web em vez do modelo de projeto Web Site, você não verá a caixa de seleção "Select master page" na caixa de diálogo "Add New Item" (Figura 7). Para criar uma página de conteúdo ao utilizar o modelo Web Application você deve escolher o modelo de conteúdo de formulário da Web ao invés do formulário modelo da Web. Depois de selecionar o modelo de  formulário de conteúdo da Web clique em Adicionar, e Selecione uma página mestra na caixa de diálogo que aparecerá como mostrado na Figura 8.  

 Figura 07: Adicionar uma nova página de conteúdo

Figura 08: Selecione o Site.master Master Page

 Adicionando Marcação e Controles da Web para o conteúdo da página

Crie um conteúdo qualquer para a página About.aspx. Como exemplo (ver Figura 10), foi criada designação "Sobre o Autor" e um par de parágrafos de texto, mas modifique da forma que desejar adicionando controles Web também. Depois de criar esta interface, visite a página About.aspx através de um navegador.

Figura 10: Exibição da página About.aspx através de um navegador

É importante entender que o conteúdo da página solicitada e sua página mestra associada são fundidos e processado como um todo inteiramente no servidor web. No navegador do usuário final são carregados os HTML fundidos enviados pelo servidor. Para verificar isso, verifique o HTML recebido pelo navegador, clicando no menu "Exibir" opção "Código Fonte". Note que não há quadros ou quaisquer outras técnicas especializadas para a exibição de duas páginas diferentes em uma única janela.

Etapa 3: Atualizando a marcação da página de Mestrado

 Um dos principais benefícios de páginas-mestre é que uma unica página mestra pode ser utilizada para definir o layout global de várias páginas no site. Portanto, a atualização  da aparência do site exige atualização de um único arquivo - a página mestre.

Para ilustrar esse comportamento, atualize a página mestre de forma a incluir a data atual no no topo da coluna da esquerda. Adicione um Label chamado DateDisplay ao leftContent <div>.

Em seguida, criar um manipulador de eventos Page_Load para a página principal e adicione o seguinte código:

protected void Page_Load(object sender, EventArgs e) {    DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd"); }


O código acima define a propriedade Text do Label para receber a data e hora formatadas como o dia da semana, o nome do mês, e os dois dígitos do dia (ver Figura 11). Depois de implementada esta mudança, visite novamente uma das suas páginas de conteúdo.Como mostra a Figura 11, a marcação (HTML) resultante é imediatamente atualizado incluindo a mudança ocorrida na página mestre.

Figura 11: As alterações na página Mestre são refletidas quando Visualizando uma página de conteúdo

Resumo

As páginas mestras permitem que os desenvolvedores ASP.NET criem um site com um layout consistente facilmente atualizável. A criação de páginas mestres e suas páginas de conteúdo associadas é tão simples como criar páginas ASP.NET padrão, e o Visual Web Developer oferece suporte mesmo em tempo de design.

O exemplo de mestre criado neste tutorial tem dois controles ContentPlaceHolder, head e MainContent. Foi especificado a marcação para o controle ContentPlaceHolder MainContent na nossa página de conteúdo, no entanto, podem existir múltiplos controles de página de conteúdo. Também foi abordado como definir marcação padrão para controles de conteúdo dentro da página mestre, bem como, a forma de alternar entre a marcação padrão definido na página mestre e a marcação personalizada existente na página de conteúdo.

FONTE: http://www.asp.net/learn/master-pages/tutorial-01-cs.aspx