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 de 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, passaram a poder ser feitos 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, nas quais 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, podem ser definidos na maste page e, então, visualizados 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 para que sirva de subsídio ao seu trabalho.
No exemplo deste 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 à obra…
Definindo uma
estrutura básica
para sua página web
Na figura acima 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 esse 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, abaixo, uma visão da Master Page em tempo
de
desenho:
<body><br /> <form id="form1" runat="server"><br /><br /><div id="container"><br /> <div id="header"><br /><br /> <h5>Nome da aplicação web</h5><br /> </div><br /><br /><strong><div id="content"></strong><br /><br /><asp:ScriptManager ID="script" runat="server"><br /><br /></asp:ScriptManager><br /> <asp:ContentPlaceHolder <br />ID="cphContent" runat="server"><br /><br /></asp:ContentPlaceHolder><br /> <asp:ValidationSummary <br />ID="valSummary" runat="server" <br /><br />DisplayMode="BulletList" /><br /><strong></div></strong><br /><br /><strong><div id="sidePanel"></strong><br /><br /><asp:ContentPlaceHolder ID="cphLeftNavigation" runat="server"><br /><br /> </asp:ContentPlaceHolder><br /><strong></div></strong><br /><br /><strong> <div id="footer"></strong><br /><br /><p>Conteúdo do rodapé</p><br /><br /><asp:ContentPlaceHolder ID="cphFooter" runat="server"><br /><br /> </asp:ContentPlaceHolder><br /><strong> </div></strong><br /><br /> </div><br /> </form><br /></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 serem selecionados e formatados usando
um selecionador de ID em um arquivo de folhas de estilos.
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. Definindos 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 à 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 à 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ência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.
