Início » ASP.NET » Usando MASTER PAGE

Usando MASTER PAGE

Neste artigo vamos aprender como criar uma master page para armazenar o layout das páginas. Abra o Visual Studio, e vamos criar um novo projeto web; na barra de menus, clique em FILE / NEW / PROJECT.

A seguinte tela aparecerá:

Em Installed Templates selecione Visual C# / Web / ASP.NET Empty Web Application. Nomeie como projetoCliente, selecione onde quer salvar seu projeto em Location e clique em OK. No momento que você pressionar OK, seu projetoCliente será criado.

Agora, vamos adicionar um novo item ao nosso projeto. Começaremos criando uma MASTER PAGE.

Uma MASTER PAGE é um arquivo ASP.NET com extensão .master que possui um layout pré-definido e pode incluir texto estático, elementos de HTML e server controls, e pode ser usada em várias páginas .aspx.

Clique com o botão direito no seu projetoCliente, em Solution Explorer; logo ADD / NEW ITEM.

A seguinte janela aparecerá:

Selecione a opção MASTER PAGE e dê o nome de LAYOUT.MASTER. Confirme clicando em ADD.

Criado o layout.master, vamos criar agora uma Style Sheet, que é uma folha de estilo onde podemos trabalhar com CSS. No nosso LAYOUT.MASTER vamos criar div’s, referenciados através de ID da folha de estilo.

Clique, na Solution Explorer, no projetoCliente com botão direito e ADD / NEW ITEM. Escolha a opção Style Sheet e renomeie para estilo.css. Confirme clicando em ADD.

Na sua folha de estilos, entre com os códigos a seguir para definir as div’s.

#container
{
    width: 673px;
    border-width: 1px;
    border-color:Black;
    border-style: solid;
    margin: 0px auto;
}

#header
{
    color: #FFFFFF;
    width: 221px;
    height: 100px;
    background-color: #8B8970;
}

#sidePanel
{
    width: 213px;
    height: 372px;
    margin-top: 5px;
    background-color: #8B8970;
    color: #FFFFFF;
    padding: 4px;
}

#content
{
    width: 446px;
    float: right;
    height: 380px;
    margin-top: 5px;
    background-color: #CDC9A5;
}

#footer
{
    background-color: #EEE9BF;
    padding: 12px;
    width: 649px;
    color: #000000;
    font-size: 90%;
    text-align: center;
    clear: both;
    border-top: 5px;
    border-style: solid;
    border-color: #FFFFFF;
}

Na Solution Explorer, observe os arquivos que temos:

Abra o SOURCE da página LAYOUT.MASTER. Clique no ESTILO.CSS dentro da Solution Explorer e arraste entre as tags. Veja o código:

<head runat="server">
    <link href="estilo.css" rel="stylesheet" type="text/css" />
    <title>Aprendendo a trabalhar com MASTER PAGE</title>
</head>

Ao arrastar, é criado automaticamente o link para a sua folha de estilo, onde estão definidas o estilo das div’s.

Ainda no LAYOUT.MASTER vamos chamar as div’s entre as tags. Observe o código:

<body>
    <form id="form1" runat="server">
        <div id="container">
            <div id="header">
                <h5>Nome da Aplicação Web</h5>
            </div>
            <div id="content">
                <asp:ContentPlaceHolder ID="cphContent" runat="server" />
            </div>        
            <div id="sidePanel">
                <asp:ContentPlaceHolder ID="cphLeftNavigation" runat="server" />
            </div>
            <div id="footer">
                <p>Conteúdo do Rodapé</p>
                <asp:ContentPlaceHolder ID="cphFooter" runat="server" />
            </div>
        </div>
    </form>
</body>

Agora, vamos criar uma página aspx utilizando a master page. Na Solution Explorer, clique em ADD / NEW ITEM. Selecione Web Form using Master Page e renomeie para DEFAULT.ASPX. Confirme clicando em ADD.

Esta Web Form criada usa a Master Page existente em nosso projeto. Portanto, quaisquer mudanças deverão ser feitas na master page. Execute o projeto para visualizar a estrutura do seu projeto web.

Para concluir, segue tabela de cores para trabalhar com estilos.

Fonte de referência: http://macoratti.net

Bons estudos!

Andrielle Azevedo de Paula
MTAC – Microsoft Technical Audience Contributor


7 Comentários

  1. Luciano disse:

    Ola adrielle, primeiro gostaria de parabenizar pelo Blog e tabmém convida-la para conhecer meu Blog (http://lucianocps.blogspot.com), e por ultimo gostaria que se possivel me ajudasse com uma duvida que fiquei sobre Master Page.

    Minha duvida éa seguinte, eu tenho um projeto ja todo criado, e gostaria de adicionar uma masterpage, como farei para adicionar essa pagina que ja esta no meu projeto na master page que criei depois das paginas?

    Obrigado

    • Dri Azevedo disse:

      Obrigado pelo feedback sobre o blog e vou visitar o seu também🙂
      Para você entender, “com uma Master Page você consegue desenvolver uma página padrão que será utilizada em todo o site, ou seja, é como se fosse uma página default contendo menus, cabeçalhos e rodapés”. Qualquer página que você criar pode herdar uma Master Page, mas, uma Master Page não pode herdar de uma página. Então, quando criar um projeto, uma das primeiras coisas a criar é a Master Page.
      Espero ter solucionado sua dúvida.
      Obrigado.

  2. Olá, meu VS é 2012 e nao tenho a opção “web form using master page” gostaria de saber se a opção web user control seria a mesma coisa.

Deixe uma resposta

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: