O menu do site
O menu do nosso site
Preste bastante atenção nesta lição, tentarei fazer o mais ameno possível, pode ser que seja um pouco chata entretanto merece a pena para criar o menu lateral e começar a entender como se usam estas capas ou divs.
Vou dar uma de cliente, quero a criação de um menu lateral com as seguintes características:
- Posicionado verticalmente.
- Dentro da zona de textos.
- Para um observador sentado diante do computador, colocar a sua esquerda.
Então vamos lá...Um menu é mais ou menos uma zona retangular portanto de cara, temos que criar uma capa para colocar nela este menu. Temos que fazer como proposto que saía posicionado verticalmente, no lado esquerdo e dentro da zona de textos. Criar a capa e a chamaremos: “menu” dentro do div “conteudo”. Parece lógico, não??? Assim ficará dentro da zona de textos, a isto muitos webmasters chamam conjugar capas que nada mais é que criar uma dentro de outra.
Começar criando a capa. Abrir no Html-kit a plantilha.html e escrever a linha seguinte justo depois da etiqueta de início da capa “conteudo” e antes do texto que se encontra dentro da mesma (Esta será a zona principal do site), de forma que, fique o código 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=”global”>
<div id=”cabeceira”>Bem-vindos ao meu site</div>
<div id=”navegaçao”>Barra de Navegação</div>
<div id=”conteudo”>
<div id=”menu”>menu</div>
Esta será a zona principal do site
</div>
<div id=”pe”>Este é o pé da página</div>
</div>
</body>
Como você pode conferir, depois do código html da capa do menu, vai a frase da capa “conteudo” (Esta será a...) e depois na seguinte linha vemos a etiqueta de fechamento do div “conteudo”.
Agora definir o estilo da capa menu, na Folha de Estilos. Abrir estilo-geral.css e escrever esta linha para essa capa:
#menu {background-color: yellow; width: 150px ; float:left }
Como somente existirá um menu por página é um estilo único e por isso começa com o jogo da velha: #, colocamos uma cor diferente do resto para diferenciar onde começa e onde termina a capa: background-color: yellow e demos uma largura fixa de width:150px. Talvez seja pouco mas de momento fica assim, até que vejamos, se realmente faltará largura nesta capa. E existe uma propriedade nova: Float.
Para que serve a propriedade Float?
A propriedade Float faz com que o elemento flutue sobre o resto do site. Isso é válido para mudá-lo facilmente sua posição. Essa propriedade vai sempre junto com algum desses dois valores: left (para flutuar do lado esquerdo) ou right (para flutuar do lado direito). Como foi pedido para ser colocado à esquerda então: float:left e assim flutuará no lado esquerdo da capa em que está, isto é, à esquerda da capa “conteudo”.
E o resultado final...por enquanto...
A Folha de Estilos fica assim: (perceba como estão ordenados os estilos pela ordem em que aparecem na página; de cima para baixo)
body {text-align: center}
#global {width:800px ; margin:4x auto }
#cabeceira {background-color: pink }
#navegaçao {background-color: gray }
#conteudo {background-color: orange }
#menu {background-color: yellow ; width: 150px ; float:left }
#pe {background-color: brown }
Bem..o de sempre...salvar a Folha de Estilos e dar uma olhadinha como está ficando, em vista prévia ou “Preview”, já estão todas as capas criadas, pode ser que mais adiante talvez meteremos alguma que outra, assim que, agora daremos uma melhor aparência a elas.
Relax
Final da Copa do Mundo de 1954
Menu
