ASP .NET - Estruturando uma página web com CSS e Master Page

No início usou-se a linguagem HTML apenas para exibir conteúdo, mas não havia controle sobre o leiaute de exibição dessas informações. Você podia fazer o texto em negrito, itálico ou sublinhado; podia criar links, listas e cabeçalhos; e era só isso.

Então chegaram as tabelas (Tables) e com elas você passou a ter controle sobre como o conteúdo podia ser posicionado na página podendo realizar alinhamentos e estruturar o conteúdo em linhas e colunas. O efeito colateral surgiu com o aninhamento das tabelas em uma estrutura rígida e complexa, difícil de tratar e pesada para renderizar.

As folhas de estilo (Cascade Style Sheet) foram introduzidas para melhorar esse cenário, pois com elas, toda a marcação relacionada com a formatação pode ser facilmente removida da página, o que torna o conteúdo da página fácil de tratar e editar, além permitir uma padronização na formatação. Não posso deixar de mencionar que com as folhas de estilo (CSS) o posicionamento e o leiaute que antes eram feitos usando tabelas pode ser feito de uma forma mais simples e objetiva.

As Master pages foram introduzidas com o objetivo de aumentar a consistência através de uma aplicação web; elas fornecem um modelo que uma página deverá usar e fornece seções de conteúdo onde o conteúdo de páginas individuais deverá ser colocado. Dessa forma todo o código de marcação da estrutura e código comum reside na master page.

O conteúdo que é comum através de diversas páginas pode ser definido uma única vez em uma Master Page,e , itens como cabeçalho, rodapé, barra lateral , barra de menu, etc, pode ser definido na maste page e então ser visualizado em cada página individual usando essa Master Page.

Então qual é a melhor maneira de estrutura as suas páginas ? 

Como você reconhece que a estrutura que você definiu é boa ?

Como melhorar o que já temos feito ?

Neste artigo eu não pretendo ter a resposta final para essas perguntas mas apontar caminhos e soluções que podem ser considerados e levados em conta quando você for tomar a sua decisão.

Vou apresentar um exemplo prático e básico para que sirva de subsídio ao seu trabalho.

No exemplo usado neste artigo eu vou usar o Visual Web Developer(VWD) 2008 Express Edition e criar um novo web site com o nome WebSite;

Abra o VWD 2008 Express e no menu File selecione New Web Site escolhendo o template ASP .NET Web Site  informando o nome WebSite e clicando em OK;

E mãos a obra...

1- Definindo uma estrutura básica para sua página web

Na figura ao lado vemos um leiaute básico para uma página web onde temos:
  • O Cabeçalho
  • O Rodapé
  • A barra lateral (Menu)
  • O Conteúdo

Podemos definir este leiaute em uma Master Page e cada página poderá compartilhar de forma fácil e simples essa estrutura comum.

No menu WebSite selecione Add New Item e a seguir escolha o Template Master Page aceitando o nome padrão e clique em Add;

A seguir temos o código definido na Master Page e ao lado temos uma visão da Master Page em tempo de desenho:

<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="header">
            <h5>Nome da aplicação web</h5>
        </div>
        <div id="content">
          <asp:ScriptManager ID="script" runat="server">
          </asp:ScriptManager>
          <asp:ContentPlaceHolder ID="cphContent" runat="server">
          </asp:ContentPlaceHolder>
          <asp:ValidationSummary ID="valSummary" runat="server"             
            DisplayMode="BulletList" />
        </div>
        <div id="sidePanel">
            <asp:ContentPlaceHolder ID="cphLeftNavigation" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            <p>Conteúdo do rodapé</p>
            <asp:ContentPlaceHolder ID="cphFooter" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>

Note que não usamos tabelas nem diretivas de formatação nem posicionamento, e, que os principais elementos estruturais possuem um atributo ID de identificação único(tag id) podendo assim ser selecionados e formatados usando um selecionador de ID em um arquivo de folhas de estilos (CSS).

Observe que usamos os content place holders(ContentPlaceHolder) para cada seção, permitindo pontos de configuração onde as páginas individuais podem ter o seu conteúdo customizado, sendo que elas possuem controle sobre as áreas de conteúdo e da barra lateral, mas não se preocupam em posicionar ou definir estilos nessas estruturas.

Na Master Page definida também foi incluído o Script Manager que define o controle Validation Summary e assim esses são os elementos que cada página deverá precisar. Definindo esses elementos na Master Page não precisamos nos preocupar com eles nas páginas individuais.

Para definir o leiaute e o posicionamento desses elementos na estrutura apresentada podemos criar um arquivo de folhas de estilo (CSS).

Clique com o botão direito sobre o nome do projeto e selecione Add New Item e a seguir selecione o Template Style Sheet e informe o nome Estilo.css e clique em Add;

A seguir defina o seguinte conteúdo para este arquivo:

Para aplicar o estilo a nossa Master Page (estou usando a maneira mais simples) inclua a seguinte tag no elemento <Head> do arquivo MasterPage:

<link rel="stylesheet" type="text/css" href="Estilo.css" />

A visualização do leiaute definido pode ser visto na figura abaixo:

Eu quero deixar claro que isso é apenas uma sugestão de leiaute , cores e posicionamento (você pode alterar a vontade).

O que quero destacar é que toda a formatação e posicionamento foram isolados no arquivo css tornando o processo de desenho separado do conteúdo das páginas individuais.

Estamos assim simplificando o desenvolvimento e a manutenção, separando as responsabilidades, de forma que ao tratar o conteúdo você não precisa se preocupar com diretivas de apresentação, podendo definir a formatação depois no arquivo responsável por isso: o arquivo de folha de estilos.

Aguarde o próximo artigo onde irei tratar da estrutura dos formulários de entrada de dados.

Pegue o projeto completo aqui:   siteWeb.zip

Eu sei é apenas ASP .NET , mas eu gosto...

Referências:

José Carlos Macoratti