[Parte 3] Capítulo 3: Criando um visual consistente com páginas de layout

Uma abordagem mais estruturada para criar uma aparência consistente em um site é a utilização de páginas de layout. Uma página de layout define a estrutura de uma página web, mas não contém nenhum conteúdo. Você pode criar páginas que possuam conteúdo, e em seguida, ligá-las à página de layout.

Quando as páginas forem exibidas, serão formatadas de acordo com a página de layout. Podemos dizer que a página de layout funciona como uma espécie de modelo para o conteúdo que é definido em outras páginas.

O layout da página é igual a qualquer página HTML, exceto pelo fato de que a página contém uma chamada para o método RenderBody. A posição do método RenderBody no layout determina onde as informações de conteúdo serão incluídas.

O diagrama a seguir mostra como páginas de conteúdo e páginas de layout são mescladas em tempo de execução para produzir a página da web completa. O navegador solicita uma página de conteúdo. A página de conteúdo possui o código que especifica qual layout será utilizado em sua estrutura. Na página de layout, o conteúdo é inserido no ponto onde o método RenderBody é chamado. Blocos de conteúdo também podem ser inseridos, chamando o método RenderPage, como fizemos no post anterior. Quando a página está completa, é enviada ao navegador.

O procedimento a seguir mostra como criar uma página de layour e páginas de conteúdo ligadas a ela.

1 - Na pasta raiz do seu site, crie um arquivo chamado _Layout1.cshtml
2 - Ediste seu conteúdo, para o conteúdo a seguir:

Utilizamos o método RenderPage em uma página de layout para inserir blocos de conteúdo. Uma página de layout pode conter apenas uma chamada para o método RenderBody.

3 - Na pasta Shared, crie um arquivo chamado _cabecalho2.cshtml e substitua o conteúdo pelo seguinte?

4 - Na pasta raiz, crie uma nova pasta com o nome de Styles
5 - Dentro da pasta Styles, crie um arquivo chamado Site.css e adicione as definições de estilo a seguir:

Estas definições de estilo apenas mostram como as folhas de estilo podem ser utilizadas em páginas de layout. Cada um pode definir seus próprios estilos para esses elementos.

6 - Na pasta raiz, crie um arquivo chamado Content1.cshtml e substitua seu conteúdo pelo seguinte:

7 - Execute a página Content1.cshtml em um navegador. A página processada utiliza o formato e as folhas de estilo definidas no arquivo _Layout1.cshtml e o conteúdo definido em Content1.cshtml.