Criando mais capas
Mais capas, mais capas...
Já temos nossa primeira capa chamada cabeceira. No final destas lições da parte 1, esta capa vai conter o que veremos acima do site quando entrarmos nele, que seguramente conste do seu logotipo e de um espaço para, por exemplo, colocar algo de publicidade para ajudar a pagar um possível domínio próprio e quem sabe, um hosting de pago...isso é assim que funciona e nada de outro mundo.
Porém com essa capa não dá nem pro cheiro, rsrsrsrsrs... Vamos agora criar uma segunda capa que terá uma barra de navegação. A chamaremos de navegaçao (tudo em minúscula e sem o til).
O que é uma barra de navegação?
Uma das coisas mais importantes em um site é dar facilidades ao visitante para que possa navegar pelas páginas sem perder-se e que tenha tudo sempre a mão. Não é bom ter páginas escondidas, quer dizer, páginas que para chegar nelas tenhamos que ir à seção “fulano”, depois na subseção “sicrano”, logo entrar em outro lado e finalmente conseguir aceder a uma página em concreto. Todas as páginas devem ser acessíveis, sem que estejam ocultas e de preferência colocando vínculos no index ou página principal.
A barra de navegação nos ajudará e muito a dar acessibilidade às páginas do site, colocaremos links nas seções que criemos. Assim o visitante não se perde e poderá ir de um lado a outro dentro site.
Alguns exemplos de barra de navegação:
Como você vê, dão acesso a várias seções e podem ser bem simples ou um pouco mais elaboradas ou mais chamativas. Agora que você já sabe o que são, vamos criar a capa da nossa barra de navegação.
Criando a capa navegaçao
A chamaremos "navegaçao" e vai existir apenas uma por página por tanto é um estilo único e vai ser definido na Folha de Estilos assim:
#navegaçao {background-color: gray }
Escrever essa nova capa na Folha de Estilos, o div “navegaçao” tem a propriedade de cor cinza (gray). Em seguida abrir a plantilha.html e escrever a continuação do div cabeceira, esta outra linha:
<div id="navegaçao">Barra de Navegação</div>
Mais adiante acrescentaremos mais coisas entretanto de momento seguiremos criando o resto de capas.
Criando as capas: conteudo e pe
Vamos seguir criando duas capas mais, a primeira chamará “conteudo” e nela colocaremos um menu lateral e os textos do nosso site e a segunda chamará “pe” na qual mais tarde teremos alguns enlaces, uma mensagem de copyright e pode ser que outro espaço para publicidade, já veremos:
#conteudo {background-color: orange}
#pe {background-color: brown}
Salvar a Folha de Estilos. Abrir a planilha.html e escrever estas outras duas linhas mais, abaixo da capa “navegaçao”:
<div id="conteudo">Esta será a zona principal do site</div>
<div id="pe">Este é o pé da página</div>
E em resumo temos...
A Folha de Estilos fica assim:
#cabeceira {background-color: pink }
#navegaçao {background-color: gray }
#conteudo {background-color: orange }
#pe {background-color: brown }
E a planilla.html fica assim:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabeceira">Bem-vindos ao meu site</div>
<div id="navegaçao">Barra de Navegação</div>
<div id="conteudo">Esta será a zona principal do site</div>
<div id="pe">Este é o pé da página</div>
</body>
</html>
Com tudo salvado faça uma vista prévia. Sei que não parece um site ainda mas não diga que não está começando a ter alguma forma, verdade??? Verá como em breve isso mudará...
Relax
Ganhador da Copa do Mundo de 1938 (França)
Menu
