Vamos agora adicionar um novo arquivo no nosso Projeto chamada MasterPage.

(fig.10)

Vá ao Solution Explorer Botão direito > Add New Item > MasterPage. (fig.10)

Vá para o Solution Explorer e abra sua MasterPage.

Abra HTML da sua MasterPage clicando em Source em baixo no canto esquerdo

Com o HTML da MasterPage aberto iremos adicionar as formatações  CSS que fizemos.

O primeiro passo é adicionar a formatação do topo, para isso faça uma <div> em cima do ContentPlaceHolder1, para fazer a <div> basta adicionar o seguinte HTML em cima do ContentPlaceHolder1, <div id="topo"></div>, como o nome da formatação CSS, a minha é topo ali no id a ficou id ="topo", se você deu outro nome para seu topo deve mudar.

O próximo passo é adicionar dois ContentPlaceHolders (1 já vem por padrão)  para que possamos adicionar as três formatações restantes.

Para adicionar os ContentPlaceHolders abra o ToolBox  apertando as teclas  CTRL+W,X.

(fig.11)

Já com a ToolBox aberta, adicione 2 ContentPlaceHolders em baixo da já existente.(fig.11)

Com as 3 ContentPlaceHolders no HTML devemos colocar as formatações feitas no CSS.

O ContentPlaceHolders1 vai ficar com a formatação esquerdo.

Para adicionar a formatação esquerdo no ContentPlaceHolder1 devemos adicionar o seguinte HTML:


<div id="esquerdo"> </div>
 

O HTML do ContentPlaceHolder1 vai ficar assim:
 

<div id="esquerdo">

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

Para adicionar a formatação centro no ContentPlaceHolder2 devemos adicionar o seguinte HTML. <div id="centro"> </div>.

O HTML do ContentPlaceHolder2 vai ficar assim:


<div id="centro">

<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">

</asp:ContentPlaceHolder>

Agora iremos adicionar a formatação esquerdo no ContentPlaceHolde3.

Para adicionar a formatação esquerdo no ContentPlaceHolde3 devemos adicionar o seguinte HTML:

<div id="esquerdo"> </div>

<div id="direito">

<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">

</asp:ContentPlaceHolder>

</div>

Depois de adicionada todas as formatações o HTML da MasterPage ficará assim.

Agora iremos adicionar um Web Form, que ira herda todas as formatações da nossa MasterPage.

(fig.12)

Vá ao Solution Explorer  Botão direito > Add New Item  > Web Form, deixe o nome de Default mesmo, repare que tem uma opção no canto inferior da Janela perguntando se você quer selecionar alguma MasterPage. (select master page), marque essa opção e adicione o Web Form. (fig.12)

(fig.13)

Depois disso vai aparecer uma outra janela perguntando de qual MasterPage, o Web Form deve herdar, como nosso projeto só tem um MasterPage selecione sua MasterPage. (fig.13).

Vá ao Web Form e selecione o Modo design.

Repare que tem três ContentPlaceHolders é nesses ContentPlaceHolders que a gente coloca o conteúdo do site.

Volte para sua MasterPage, no código HTML da sua MasterPage dentro da formatação topo coloque qualquer nome.

Agora é só salvar e depois apertar F5 para ver como vai ficar a nossa formatação.

Eis aqui o resultado.

O Uso da MasterPage é bom porque só é preciso fazer a formatação do site uma vez, depois disso todas as páginas podem herdar dela e com isso a gente poupa muito tempo, no projeto podemos colocar quantas MasterPage forem necessárias.