Analisando o Layout
Antes de digitar qualquer código, é necessária uma análise do layout. Com essa análise, definiremos as principais áreas de nossas páginas. Um fator muito importante a ser considerado quando fazemos essa análise do layout é o modo como os navegadores interpretam e renderizam o HTML.
O HTML é exibido no navegador de acordo com a ordem de leitura do idioma da página. Na maioria dos casos, a leitura é feita da esquerda para a direita, de cima para baixo, da mesma maneira que lemos essa apostila, por exemplo.
Olhe detalhadamente nosso layout e tente imaginar qual a melhor maneira de estruturar nosso HTML para que possamos codificá-lo.
De acordo com o posicionamento de elementos que foi definido desde a etapa de criação dos wireframes, todas as páginas no nosso projeto obedecem a uma estrutura similar.
Estrutura da página
Note que há um cabeçalho (uma área que potencialmente se repetirá em mais de uma página) que ocupa uma largura fixa; sendo assim, podemos criar uma seção exclusiva para o cabeçalho.
Outra área que tem uma característica semelhante é o rodapé, pois pode se repetir em mais de uma página. Podemos notar que o fundo do elemento vai de uma ponta à outra da página, porém seu conteúdo segue a mesma largura fixa do restante da página.
A área central, que contém informações diferentes em cada página, não tem nenhum elemento ao fundo. Porém, notemos que sua largura é limitada antes de atingir o início e o fim da página. Notemos que, apesar do fundo do rodapé ir de uma ponta à outra, seu conteúdo também é limitado pela mesma largura do conteúdo.
No caso da home page, o miolo da página pode ainda ser visto como dois blocos diferentes. Há o bloco principal inicial com o menu de navegação e o banner de destaque. E há outro bloco no final com dois painéis com listas de produtos.
Poderíamos definir essas áreas da seguinte maneira:
<body> <header> <!-- Conteúdo do cabeçalho --> </header> <section id="main"> <!-- Conteúdo principal --> </section> <section id="destaques"> <!-- Painéis com destaques --> </section> <footer> <!-- Conteúdo do rodapé --> </footer> </body>
Note que utilizamos o atributo
id do HTML para identificar a<section> principal. O atributo id deve ser único em cada página, ou seja, só pode haver um elemento com o atributo id="main". Mesmo se o outro elemento for de outra tag, o id não pode se repetir. De acordo com a estrutura acima, nós separamos as quatro áreas principais.
Nenhum comentário:
Postar um comentário