Criação de um layout de todo o site usando páginas mestras (C#)

por Scott Mitchell

Baixar PDF

Este tutorial mostrará master noções básicas da página. Ou seja, quais são master páginas, como se cria uma página master, quais são os titulares do local de conteúdo, como se cria uma página ASP.NET que usa uma página master, como modificar a página master é refletida automaticamente em suas páginas de conteúdo associadas e assim por diante.

Introdução

Um atributo de um site bem projetado é um layout de página consistente em todo o site. Veja o site do www.asp.net , por exemplo. No momento desta gravação, 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 disso está o logotipo do site, a lista de idiomas em que o site foi traduzido e as seções principais: Página Inicial, Introdução, Aprender, Downloads e assim por diante. Da mesma forma, a parte inferior da página inclui informações sobre publicidade em www.asp.net, uma declaração de direitos autorais e um link para a política de privacidade.

Figura 01: o site www.asp.net emprega uma aparência consistente em todas as páginas (clique para exibir a imagem em tamanho real)

Outro atributo de um site bem projetado é a facilidade com que a aparência do site pode ser alterada. A Figura 1 mostra o www.asp.net home page a partir de março de 2008, mas entre agora e a publicação deste tutorial, a aparência pode ter mudado. Talvez os itens de menu ao longo da parte superior se expandam para incluir uma nova seção para a estrutura MVC. Ou talvez um design radicalmente novo com cores, fontes e layout diferentes seja revelado. A aplicação dessas alterações a todo o site deve ser um processo rápido e simples que não requer a modificação das milhares de páginas da Web que compõem o site.

A criação de um modelo de página em todo o site em ASP.NET é possível por meio do uso de páginas master. Em poucas palavras, uma página master é um tipo especial de página ASP.NET que define a marcação que é comum entre todas as páginas de conteúdo, bem como regiões personalizáveis em uma página de conteúdo página por conteúdo. (Uma página de conteúdo é uma página ASP.NET associada à página master.) Sempre que um layout ou formatação de uma página de master é alterado, toda a saída de suas páginas de conteúdo é atualizada imediatamente, o que torna a aplicação de alterações de aparência em todo o site tão fácil quanto atualizar e implantar um único arquivo (ou seja, a página master).

Este é o primeiro tutorial de uma série de tutoriais que exploram o uso master páginas. Ao longo desta série de tutoriais, nós:

• Examine a criação master páginas e suas páginas de conteúdo associadas,
• Discutir uma variedade de dicas, truques e armadilhas,
• Identificar armadilhas comuns de página master e explorar soluções alternativas,
• Veja como acessar a página master de uma página de conteúdo e vice-versa,
• Saiba como especificar a página de master de uma página de conteúdo no runtime e
• Outros tópicos avançados da página de master.

Esses tutoriais são voltados para serem concisos e fornecem instruções passo a passo com muitas capturas de tela para orientá-lo visualmente. Cada tutorial está disponível nas versões C# e Visual Basic e inclui um download do código completo usado.

Este tutorial inaugural começa com uma olhada master noções básicas da página. Discutimos como master páginas funcionam, analisamos a criação de uma página master e páginas de conteúdo associadas usando o Desenvolvedor da Web Visual e vemos como as alterações em uma página de master são refletidas imediatamente em suas páginas de conteúdo. Vamos começar!

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

A criação de um site com um layout de página consistente em todo o site requer que cada página da Web emita marcação de formatação comum além de seu conteúdo personalizado. Por exemplo, enquanto cada tutorial ou postagem de fórum sobre www.asp.net tem seu próprio conteúdo exclusivo, cada uma dessas páginas também renderiza uma série de elementos comuns <div> que exibem os links de seção de nível superior: Página Inicial, Introdução, Aprender e assim por diante.

Há uma variedade de técnicas para criar páginas da Web com uma aparência consistente. Uma abordagem ingênua é simplesmente copiar e colar a marcação de layout comum em todas as páginas da Web, mas essa abordagem tem várias desvantagens. Para começar, sempre que uma nova página é criada, você deve se lembrar de copiar e colar o conteúdo compartilhado na página. Essas operações de cópia e colagem estão maduras para erro, pois você pode copiar acidentalmente apenas um subconjunto da marcação compartilhada em uma nova página. E, para completar, essa abordagem torna a substituição da aparência existente em todo o site por uma nova uma verdadeira dor, pois cada página do site deve ser editada para usar a nova aparência.

Antes de ASP.NET versão 2.0, os desenvolvedores de página geralmente colocavam marcação comum em Controles de Usuário e, em seguida, adicionavam esses Controles de Usuário a cada página. Essa abordagem exigia que o desenvolvedor da página se lembrasse de adicionar manualmente os Controles de Usuário a cada nova página, mas permitia modificações mais fáceis em todo o site, pois ao atualizar a marcação comum, apenas os Controles de Usuário precisavam ser modificados. Infelizmente, o Visual Studio .NET 2002 e 2003 – as versões do Visual Studio usadas para criar aplicativos ASP.NET 1.x – renderizaram controles de usuário no modo design como caixas cinza. Consequentemente, os desenvolvedores de página que usam essa abordagem não desfrutaram de um ambiente de tempo de design WYSIWYG.

As deficiências do uso de Controles de Usuário foram abordadas no ASP.NET versão 2.0 e no Visual Studio 2005 com a introdução de páginas master. Uma página master é um tipo especial de página ASP.NET que define a marcação em todo o site e as regiões em que as páginas de conteúdo associadas definem sua marcação personalizada. Como veremos na Etapa 1, essas regiões são definidas pelos controles ContentPlaceHolder. O controle ContentPlaceHolder simplesmente indica uma posição na hierarquia de controle da página master em que o conteúdo personalizado pode ser injetado por uma página de conteúdo.

Observação

Os principais conceitos e funcionalidades de master páginas não foram alterados desde ASP.NET versão 2.0. No entanto, o Visual Studio 2008 oferece suporte em tempo de design para páginas de master aninhadas, um recurso que não estava disponível no Visual Studio 2005. Examinaremos o uso de páginas aninhadas master em um tutorial futuro.

A Figura 2 mostra como pode ser a página master para www.asp.net. Observe que a página master define o layout comum em todo o site - a marcação na parte superior, inferior e direita de cada página - bem como um ContentPlaceHolder no meio-esquerdo, onde o conteúdo exclusivo para cada página da Web individual está localizado.

Figura 02: uma página mestra define o layout de Site-Wide e as regiões editáveis em uma página de conteúdo página por conteúdo

Depois que uma página master tiver sido definida, ela poderá ser associada a novas páginas ASP.NET por meio do tique de uma caixa de seleção. Essas páginas ASP.NET - chamadas de páginas de conteúdo - incluem um controle Conteúdo para cada um dos controles ContentPlaceHolder da página master. Quando a página de conteúdo é visitada por meio de um navegador, o mecanismo de ASP.NET cria a hierarquia de controle da página master e injeta a hierarquia de controle da página de conteúdo nos locais apropriados. Essa hierarquia de controle combinada é renderizada e o HTML resultante é retornado para o navegador do usuário final. Consequentemente, a página de conteúdo emite a marcação comum definida em sua página master fora dos controles ContentPlaceHolder e a marcação específica da página definida em seus próprios controles de Conteúdo. A Figura 3 ilustra esse conceito.

Figura 03: a marcação da página solicitada é fundida na página mestra (clique para exibir a imagem em tamanho real)

Agora que discutimos como master páginas funcionam, vamos dar uma olhada na criação de uma página master e páginas de conteúdo associadas usando o Visual Web Developer.

Observação

Para alcançar o público mais amplo possível, o ASP.NET site que criamos ao longo desta série de tutoriais será criado usando ASP.NET 3.5 com a versão gratuita da Microsoft do Visual Studio 2008, Visual Web Developer 2008. Se você ainda não tiver atualizado para o ASP.NET 3.5, não se preocupe – os conceitos discutidos nesses tutoriais funcionam igualmente bem com o ASP.NET 2.0 e o Visual Studio 2005. No entanto, alguns aplicativos de demonstração podem usar recursos novos no .NET Framework versão 3.5; quando recursos específicos do 3.5 são usados, incluo uma observação que discute como implementar funcionalidades semelhantes na versão 2.0. Lembre-se de que os aplicativos de demonstração disponíveis para download de cada tutorial visam o .NET Framework versão 3.5, o que resulta em um Web.config arquivo que inclui elementos de configuração específicos de 3,5 e referências a namespaces específicos de 3,5 nas using instruções nas classes code-behind de ASP.NET páginas. Resumindo, se você ainda não tiver instalado o .NET 3.5 no computador, o aplicativo Web para download não funcionará sem primeiro remover a marcação específica 3.5 do Web.config. Consulte Web.config Arquivo para obter mais informações sobre este tópico. Você também precisará remover as using instruções que fazem referência a namespaces específicos de 3,5.

Etapa 1: Criando uma página mestra

Antes de explorarmos a criação e o uso de páginas de conteúdo e master, primeiro precisamos de um site ASP.NET. Comece criando um novo site de ASP.NET baseado no sistema de arquivos. Para fazer isso, inicie o Desenvolvedor do Visual Web e vá para o menu Arquivo e escolha Novo Site, exibindo a caixa de diálogo Novo Site (consulte Figura 4). Escolha o modelo ASP.NET Site, defina a lista suspensa Localização como Sistema de Arquivos, escolha uma pasta para colocar o site e defina o idioma como C#. Isso criará um novo site com uma Default.aspx página ASP.NET, uma App_Data pasta e um Web.config arquivo.

Observação

O Visual Studio dá suporte a dois modos de gerenciamento de projetos: Projetos de Site e Projetos de Aplicativo Web. Os Projetos de Site não têm um arquivo de projeto, enquanto os Projetos de Aplicativo Web imitam a arquitetura do projeto no Visual Studio .NET 2002/2003 – eles incluem um arquivo de projeto e compilam o código-fonte do projeto em um único assembly, que é colocado na /bin pasta. Inicialmente, o Visual Studio 2005 só tinha suporte para Projetos de Site, embora o modelo do Projeto de Aplicativo Web tenha sido reintroduzido com o Service Pack 1; O Visual Studio 2008 oferece ambos os modelos de projeto. No entanto, as edições do Visual Web Developer 2005 e 2008 dão suporte apenas a Projetos de Site. Uso o modelo projeto de site para minhas demonstrações nesta série de tutoriais. Se você estiver usando uma edição não Expressa e quiser usar o modelo do Projeto de Aplicativo Web, fique à vontade para fazer isso, mas esteja ciente de que pode haver algumas discrepâncias entre o que você vê em sua tela e as etapas que você deve executar em relação às capturas de tela mostradas e instruções fornecidas nestes tutoriais.

Figura 04: Criar um novo arquivo System-Based site (clique para exibir a imagem em tamanho real)

Em seguida, adicione uma página master ao site no diretório raiz clicando com o botão direito do mouse no nome do projeto, escolhendo Adicionar Novo Item e selecionando o modelo Página Mestra. Observe que master páginas terminam com a extensão .master. Nomeie esta nova página Site.master de master e clique em Adicionar.

Figura 05: Adicionar uma página mestra nomeada Site.master ao site (clique para exibir a imagem em tamanho real)

Adicionar um novo arquivo de página master por meio do Visual Web Developer cria uma página master com a seguinte marcação 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</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>

A primeira linha na marcação declarativa é a @Master diretiva . A @Master diretiva é semelhante à @Page diretiva exibida em páginas ASP.NET. Ele define a linguagem do lado do servidor (C#) e informações sobre o local e a herança da classe code-behind da página master.

A DOCTYPE marcação declarativa da página e aparece abaixo da @Master diretiva . A página inclui HTML estático junto com quatro controles do lado do servidor:

• Um Formulário da Web (o <form runat="server">) - porque todas as páginas ASP.NET normalmente têm um Formulário da Web - e como a página master pode incluir controles da Web que devem aparecer em um Formulário da Web - adicione o Formulário da Web à página master (em vez de adicionar um Formulário da Web a cada página de conteúdo).
• Um controle ContentPlaceHolder chamado ContentPlaceHolder1 – esse controle ContentPlaceHolder aparece no Formulário da Web e serve como a região para a interface do usuário da página de conteúdo.
• Um elemento do lado <head> do servidor – o <head> elemento tem o atributo , tornando-o runat="server" acessível por meio do código do lado do servidor. O <head> elemento é implementado dessa forma para que o título da página e outra <head>marcação relacionada possam ser adicionados ou ajustados programaticamente. Por exemplo, definir uma propriedade de Title página ASP.NET altera o <title> elemento renderizado pelo controle do <head> servidor.
• Um controle ContentPlaceHolder chamado head – esse controle ContentPlaceHolder aparece no controle do <head> servidor e pode ser usado para adicionar conteúdo declarativamente ao <head> elemento .

Essa marcação declarativa de página padrão master serve como ponto de partida para criar suas próprias páginas de master. Fique à vontade para editar o HTML ou adicionar controles Da Web adicionais ou ContentPlaceHolders à página master.

Observação

Ao criar uma página de master, verifique se a página master contém um Formulário da Web e se pelo menos um controle ContentPlaceHolder aparece neste Formulário da Web.

Criando um layout de site simples

Vamos expandir Site.mastera marcação declarativa padrão para criar um layout de site em que todas as páginas compartilham: um cabeçalho comum; uma coluna à esquerda com navegação, notícias e outros conteúdos em todo o site e um rodapé que exibe o ícone "Alimentado pela Microsoft ASP.NET". A Figura 6 mostra o resultado final da página master quando uma de suas páginas de conteúdo é exibida por meio de um navegador. A região em círculo vermelho na Figura 6 é específica para a página que está sendo visitada (Default.aspx); o outro conteúdo é definido na página master e, portanto, consistente em todas as páginas de conteúdo.

Figura 06: a página mestra define a marcação para as partes superior, esquerda e inferior (clique para exibir a imagem em tamanho real)

Para obter o layout do site mostrado na Figura 6, comece atualizando a Site.master página master para que ela contenha a seguinte marcação 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">
<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 master é definido usando uma série de <div> elementos HTML. O topContent<div> contém a marcação que aparece na parte superior de cada página, enquanto , leftContentmainContente footerContent<div> s são usados para exibir o conteúdo da página, a coluna à esquerda e o ícone "Alimentado pela Microsoft ASP.NET", respectivamente. Além de adicionar esses <div> elementos, também renomeei a ID propriedade do controle ContentPlaceHolder primário de ContentPlaceHolder1 para MainContent.

As regras de formatação e layout para esses elementos variados <div> são escritas no arquivo Styles.cssCSS (Folha de Estilos em Cascata), que é especificado por meio de um <elemento de link> no elemento de cabeçalho> da <página master. Essas várias regras definem a aparência de cada <div> elemento observado acima. Por exemplo, o topContent<div> elemento , que exibe o texto e o link "Tutoriais de Páginas Mestras", tem suas regras de formatação especificadas da Styles.css seguinte maneira:

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

Se você estiver acompanhando seu computador, precisará baixar o código que acompanha este tutorial e adicionar o Styles.css arquivo ao seu projeto. Da mesma forma, você também precisará criar uma pasta chamada Imagens e copiar o ícone "Powered by Microsoft ASP.NET" do site de demonstração baixado para seu projeto.

Observação

Uma discussão sobre CSS e formatação de página da Web está além do escopo deste artigo. Para obter mais informações sobre o CSS, marcar os Tutoriais do CSS em W3Schools.com. Também encorajo você a baixar o código que acompanha este tutorial e brincar com as configurações do CSS no Styles.css para ver os efeitos de regras de formatação diferentes.

Criando uma página mestra usando um modelo de design existente

Ao longo dos anos, construí uma série de aplicativos Web ASP.NET para pequenas e médias empresas. Alguns dos meus clientes tinham um layout de site existente que queriam usar; outros contrataram um designer gráfico competente. Alguns me confiaram para projetar o layout do site. Como você pode dizer pela Figura 6, a tarefa de um programador para projetar o layout de um site geralmente é tão sábia quanto fazer com que seu contador realize uma cirurgia de coração aberto enquanto seu médico faz seus impostos.

Felizmente, há inúmeros sites que oferecem modelos de design HTML gratuitos - o Google retornou mais de seis milhões de resultados para o termo de pesquisa "modelos de site gratuitos". Um dos meus favoritos é OpenDesigns.org. Depois de encontrar um modelo de site desejado, adicione os arquivos e imagens CSS ao projeto do site e integre o HTML do modelo à página master.

Observação

A Microsoft também oferece uma série de modelos gratuitos ASP.NET Design Start Kit que se integram à caixa de diálogo Novo Site no Visual Studio.

Etapa 2: Criando páginas de conteúdo associadas

Com a página master criada, estamos prontos para começar a criar ASP.NET páginas associadas à página master. Essas páginas são chamadas de páginas de conteúdo.

Vamos adicionar uma nova página ASP.NET ao projeto e associá-la à Site.master página master. Clique com o botão direito do mouse no nome do projeto em Gerenciador de Soluções e escolha a opção Adicionar Novo Item. Selecione o modelo formulário web, insira o nome About.aspxe, em seguida, marcar caixa de seleção "Selecionar master página", conforme mostrado na Figura 7. Isso exibirá a caixa de diálogo Selecionar uma Página Mestra (consulte a Figura 8) na qual você pode escolher a página master a ser usada.

Observação

Se você criou seu site ASP.NET usando o modelo projeto de aplicativo Web em vez do modelo projeto de site, não verá a caixa de seleção "Selecionar master página" na caixa de diálogo Adicionar Novo Item mostrada na Figura 7. Para criar uma página de conteúdo ao usar o modelo do Projeto de Aplicativo Web, você deve escolher o modelo Formulário de Conteúdo da Web em vez do modelo de Formulário da Web. Depois de selecionar o modelo formulário de conteúdo da Web e clicar em Adicionar, a mesma caixa de diálogo Selecionar uma Página Mestra mostrada na Figura 8 será exibida.

Figura 07: Adicionar uma nova página de conteúdo (clique para exibir imagem em tamanho real)

Figura 08: Selecione a Site.master Página Mestra (Clique para exibir a imagem em tamanho real)

Como mostra a marcação declarativa a seguir, uma nova página de conteúdo contém uma @Page diretiva que aponta de volta para sua página master e um controle conteúdo para cada um dos controles ContentPlaceHolder da página master.

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

Observação

Na seção "Criando um layout de site simples" na Etapa 1, renomeei ContentPlaceHolder1 para MainContent. Se você não renomeou esse controle ContentPlaceHolder da ID mesma maneira, a marcação declarativa da página de conteúdo será ligeiramente diferente da marcação mostrada acima. Ou seja, o segundo Controle de ContentPlaceHolderID conteúdo refletirá o ID do controle ContentPlaceHolder correspondente na página master.

Ao renderizar uma página de conteúdo, o mecanismo de ASP.NET deve fundir os controles de Conteúdo da página com os controles ContentPlaceHolder da página master. O mecanismo de ASP.NET determina a página de master da página de conteúdo do @Page atributo da MasterPageFile diretiva. Como mostra a marcação acima, essa página de conteúdo está associada a ~/Site.master.

Como a página master tem dois controles ContentPlaceHolder – head e MainContent – o Desenvolvedor da Web visual gerou dois controles de conteúdo. Cada controle de conteúdo faz referência a um ContentPlaceHolder específico por meio de sua ContentPlaceHolderID propriedade.

Onde master páginas se destacam sobre as técnicas de modelo anteriores em todo o site é com o suporte em tempo de design. A Figura 9 mostra a página de About.aspx conteúdo quando exibida por meio da exibição Design do Desenvolvedor web visual. Observe que, embora o conteúdo da página master esteja visível, ele está esmaecido e não pode ser modificado. Os controles content correspondentes ao ContentPlaceHolders da página master são, no entanto, editáveis. E assim como acontece com qualquer outra página ASP.NET, você pode criar a interface da página de conteúdo adicionando controles da Web por meio dos modos de exibição De origem ou design.

Figura 09: a exibição design da página de conteúdo exibe o conteúdo da página Page-Specific e da página mestra (clique para exibir a imagem em tamanho real)

Adicionando marcação e controles web à página de conteúdo

Reserve um momento para criar algum conteúdo para a About.aspx página. Como você pode ver na Figura 10, inseri um título "Sobre o Autor" e alguns parágrafos de texto, mas também me sinto à vontade para adicionar controles da Web. Depois de criar essa interface, visite a About.aspx página por meio de um navegador.

Figura 10: visite a About.aspx página por meio de um navegador (clique para exibir a imagem em tamanho real)

É importante entender que a página de conteúdo solicitada e sua página master associada são fundidas e renderizadas como um todo inteiramente no servidor Web. Em seguida, o navegador do usuário final recebe o HTML resultante e fundido. Para verificar isso, exiba o HTML recebido pelo navegador acessando o menu Exibir e escolhendo Origem. Observe que não há quadros ou outras técnicas especializadas para exibir duas páginas da Web diferentes em uma única janela.

Associar uma página mestra a uma página de ASP.NET existente

Como vimos nesta etapa, adicionar uma nova página de conteúdo a um aplicativo Web ASP.NET é tão fácil quanto verificar a caixa de seleção "Selecionar master página" e escolher a página master. Infelizmente, converter uma página de ASP.NET existente em uma página master não é tão fácil.

Para associar uma página master a uma página ASP.NET existente, você precisa executar as seguintes etapas:

1. Adicione o MasterPageFile atributo à diretiva da @Page página ASP.NET, apontando-o para a página de master apropriada.
2. Adicione controles de conteúdo para cada um dos ContentPlaceHolders na página master.
3. Corte e cole seletivamente o conteúdo existente da página ASP.NET nos controles de conteúdo apropriados. Eu digo "seletivamente" aqui porque a página ASP.NET provavelmente contém marcação que já é expressa pela página master, como o DOCTYPE, o <html> elemento e o Web Form.

Para obter instruções passo a passo sobre esse processo, juntamente com capturas de tela, marcar o tutorial Usando Páginas Mestras e Navegação no Site de Scott Guthrie. A seção "Atualizar Default.aspx e DataSample.aspx usar a Página Mestra" detalha essas etapas.

Como é muito mais fácil criar novas páginas de conteúdo do que converter páginas de ASP.NET existentes em páginas de conteúdo, recomendo que sempre que você criar um novo site ASP.NET adicione uma página master ao site. Associe todas as novas páginas ASP.NET a esta página master. Não se preocupe se a página de master inicial for muito simples ou simples; você poderá atualizar a página master mais tarde.

Observação

Ao criar um novo aplicativo ASP.NET, o Visual Web Developer adiciona uma Default.aspx página que não está associada a uma página master. Se você quiser praticar a conversão de uma página de ASP.NET existente em uma página de conteúdo, vá em frente e faça isso com Default.aspx. Como alternativa, você pode excluir Default.aspx e, em seguida, adicioná-lo novamente, mas desta vez verificar a caixa de seleção "Selecionar master página".

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

Um dos principais benefícios de master páginas é que uma única página master pode ser usada para definir o layout geral para várias páginas no site. Portanto, atualizar a aparência do site requer a atualização de um único arquivo – a página master.

Para ilustrar esse comportamento, vamos atualizar nossa página master para incluir a data atual na parte superior da coluna esquerda. Adicione um rótulo chamado DateDisplay ao leftContent<div>.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

Em seguida, crie um Page_Load manipulador de eventos para a página master 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 do Text Rótulo como a data e a hora atuais formatadas como o dia da semana, o nome do mês e o dia de dois dígitos (consulte a Figura 11). Com essa alteração, reveja uma de suas páginas de conteúdo. Como mostra a Figura 11, a marcação resultante é atualizada imediatamente para incluir a alteração na página master.

Figura 11: As alterações na página mestra são refletidas ao exibir uma página de conteúdo (clique para exibir a imagem em tamanho real)

Observação

Como este exemplo ilustra, master páginas podem conter controles web, código e manipuladores de eventos do lado do servidor.

Resumo

As páginas mestras permitem que ASP.NET desenvolvedores criem um layout consistente em todo o site que seja facilmente atualizável. Criar master páginas e suas páginas de conteúdo associadas é tão simples quanto criar páginas de ASP.NET padrão, já que o Desenvolvedor web visual oferece suporte avançado em tempo de design.

O exemplo de página master que criamos neste tutorial tinha dois controles head ContentPlaceHolder e MainContent. No entanto, especificamos apenas a marcação para o MainContent controle ContentPlaceHolder em nossa página de conteúdo. No próximo tutorial, examinaremos o uso de vários controles de conteúdo na página de conteúdo. Também vemos como definir a marcação padrão para controles de conteúdo na página master, bem como alternar entre usar a marcação padrão definida na página master e fornecer marcação personalizada da página de conteúdo.

Programação feliz!

Leitura Adicional

Para obter mais informações sobre os tópicos discutidos neste tutorial, consulte os seguintes recursos:

• ASP.NET para designers: modelos de design gratuitos e diretrizes sobre como criar sites ASP.NET usando padrões da Web
• Visão geral das páginas mestras ASP.NET
• Tutoriais do CSS (Folhas de Estilos em Cascata)
• Configurando dinamicamente o título da página
• Páginas Mestras no ASP.NET
• Tutoriais de Início Rápido de Páginas Mestras

Sobre o autor

Scott Mitchell, autor de vários livros do ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias da Microsoft Web desde 1998. Scott trabalha como consultor independente, treinador e escritor. Seu último livro é Sams Teach Yourself ASP.NET 3.5 em 24 Horas. Scott pode ser contatado em mitchell@4GuysFromRolla.com ou através de seu blog em http://ScottOnWriting.NET.

Agradecimentos Especiais

Interessado em revisar meus próximos artigos do MSDN? Nesse caso, solte-me uma linha em mitchell@4GuysFromRolla.com.

Próximo