Passo 1 - Escolher e Nomear os Containers do Layout

Um container é uma caixa que geralmente agrupa vários elementos (X)HTML de forma a estruturar o conteúdo da página uniformemente. Por exemplo, na Figura 1, um dos containers é nomeado header e outro menu, ou seja, essas partes da página agrupam, respectivamente, o conteúdo referente ao cabeçalho do site, tal como o nome e slogan, e os itens pelos quais o usuário pode navegar, respectivamente.

Na web, há muitos layouts disponíveis nos quais você pode se inspirar para começar a criar os seus próprios. A Figura 2 ilustra alguns exemplos.

Para definir os containers, você pode se basear em uma figura ou um esboço no papel que divida o conteúdo do site em grandes partes que serão representadas por áreas específicas no documento (X)HTML.

Essa divisão do conteúdo deve levar em conta a arquitetura da informação, mas por enquanto vamos focar apenas a especificação de layouts. Depois disso, ainda nesta aula, você aprenderá sobre arquitetura da informação.

Cada container deve ser nomeado. Os nomes dados aos containers devem ser associados à finalidade deles e não à aparência que eles devem ter. Então, para o exemplo da Figura 1, os nomes escolhidos foram:

• Container
• Header
• Mainnav
• Menu
• Contents
• Footer