HTML5 e CSS3 – 12a. Aula – Modelo de Pagina – Parte 1

Uma das formas de facilitar a criação de um conjunto de páginas que terão o mesmo Layout é  criar uma página de modelo. Nossa página de modelo, ou template, será baseada no layout apresentado na aula sobre iframe (vide 9a. Aula – iFrame).

No header da página há um menu, construído com base em uma lista ordenada, que será estilizado com fundo preto, texto na cor branca e utilizando a fonte Ubuntu. Utilizando o CSS habilitaremos o efeito hover nos itens/opções do nosso menu.

O código básico da página pode ser observado logo abaixo:

 

Este código possui algumas novidades, uma delas são as metas tags listadas a seguir:

Estas são utilizadas para apresentar algumas notificações  aos navegadores e aos indexadores ou crawlers dos sites de busca como o Google, o Yahoo e o Dig. Sempre que possível devemos utilizar

as tags:

  • description : apresenta uma breve descrição da página
  • keywords : contem uma lista de palavras chaves relacionadas ao site, muitos crawlers utilizam estas informações no processo de indexação dos sites
  • author : identifica o autor da página ou o proprietário do site
  • viewport : esta tag auxilia no processo de construção de uma página responsiva. Ela será apresentada com mais detalhes quando iniciarmos nosso estudo sobre o Framework Bootstrap (v3)

Outra novidade, são os arquivos CSS, a partir deste exemplo, utilizaremos mais de um arquivo. Observe como ficou a seção relacionada ao CSS da nossa página:

No primeiro link, importamos a fonte Ubuntu, do repositório de fontes do Google, o qual oferece uma vasta gama de fontes que podem ser utilizadas na propriedade font-family. O segundo link,  a ponta para o arquivo “estilo-padrao.css“, armazenado na subpasta “css“, este arquivo contem as regras utilizadas para estilizar o elemento boby, o container, o footer, o header da página e vários outros elementos. Já o arquivo “estilo.css” contem as regras de estilo que serão utilizadas para personalizar nossos formulários.

Continuando a análise do nosso código, podemos observar que todo o conteúdo da  página foi inserido dentro de um elemento div, no qual aplicamos a classe “container“, que ajustará o conteúdo da mossa página de forma ele seja centralizado.

Loga abaixo, da tag de abertura do nosso container (<div class="container">), temos a definição do menu usado no nosso site, que foi construído dentro do elemento header e utilizando uma lista ordenada:

Cada item do menu foi construído utilizando-se as tags li e a, as quais serão posteriormente estilizadas de forma serem exibidas em uma única linha. As decorações, normalmente presentes nos hyperlinks,  foram removidas e no seu lugar eles receberam um estilo associado ao evento hover.

Logo abaixo do header, temos o elemento section, que irá conter o nosso formulário, e ao qual atribuímos a classe “frmCadastro“. Esta classe será utilizada para estilizar o container do nosso formulário, definindo a largura máxima e algumas de suas características básicas.

Finalmente temos o footer da nossa página, que conterá dois links, uma para o site do autor e outro para o site do nosso curso. Este será estilizado de forma semelhante ao menu principal

Agora que já conhecemos a estrutura básica, que utilizaremos de como para as próximas aulas, podemos passar para o arquivo “estilo-padrao.html“, que  contem as regras CSS relacionadas à formatação dos principais elementos da página de modelo, ele contem os estilos de todos os elementos excluindo aqueles associados aos formulários. O conteúdo deste arquivo pode ser observado na listagem a seguir:

Agora, que já temos todo o código HTML e CSS, quando carregamos a nossa página em um navegador devemos obter algo semelhante à imagem abaixo:

Modelo de Página - Formulários
HTML5 e CSS3 – 12a. Aula – Modelo de Pagina

No próximo post, desta série, utilizaremos a página que acabamos de construir como base para a uma de  cadastro de um usuário.