Definindo o layout padrão do site com MasterPage
Geralmente quando criamos o layout de um site há elementos que se repetem em todas as páginas, como cabeçalho, barra de menu e rodapé.
O ASP.NET nos fornece uma forma muito prática e inteligente de trabalhar com essa 'identidade': a MasterPage. A MasterPage é uma página modelo onde nós definimos todo o layout que não irá mudar em todas as páginas. Então, nos locais em que irá entrar o conteúdo de cada página colocamos um componente chamado ContentPlaceHolder. É possível colocar mais de um ContentPlaceHolder na nossa MasterPage; e também podemos ter mais de uma MasterPage no site.
Abaixo segue o código de uma MasterPage de um layout padrão de cabeçalho, menu no lado esquerdo, conteúdo e rodapé:
Arquivo MasterPage.master<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Exemplo de Master Page</title>
<style type="text/css">
@import url(StyleSheet.css);
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="cabecalho">Cabeçalho</div>
<div id="esquerda">
Menu Principal<br />
<br />
> Item 1<br />
> Item 2<br />
> Item 3<br />
> Item 4</div>
<div id="conteudo">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
<div id="rodape">
</div>
</form>
</body>
</html>
Abaixo segue o arquivo StyleSheet.css que é usado no HTML acima:
Arquivo StyleSheet.cssbody {
width: 700px;
margin: 0 auto;
font: 12px 'Trebuchet MS';
}
div#cabecalho {
height: 70px;
border: solid 1px black;
clear: both;
background: #eaeaea;
}
div#esquerda {
width: 180px;
float: left;
background: #99ccff;
margin: 10px 0;
}
div#conteudo {
margin: 10px 0 10px 190px;
}
div#rodape {
height: 50px;
border: solid 1px black;
background: #eaeaea;
clear: both;
}
Então, com este layout definido, nós iremos sempre criar nossas páginas (WebForms em ASP.NET) derivando deste MasterPage.
Abaixo segue um exemplo de página herdando de um MasterPage:
Arquivo Default.aspx<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
Dentro da tag <asp:Content ...> </asp:Content> nós vamos definir o que irá ficar dentro da seção de conteúdo definida na nossa MasterPage.
Então neste pequeno artigo nós vimos como construir um site padronizado de maneira muito fácil com este recurso tão legal do ASP.NET. Até mais.
Nenhum comentário:
Postar um comentário