Vocês devem primeiro fazer os preparativos necessários para configurar o site. Criem a estrutura de diretórios desejada. Poderia ser algo como:
steuerberater
---images
---css
Esta é uma estrutura de diretórios muito típica. Nas principais páginas HTML, são inseridos. Os arquivos CSS vão para o diretório css-, enquanto todas as imagens são salvas no diretório images-. Assim, adicione ao diretório images- todas as imagens que cortaram anteriormente do layout.
Construindo a estrutura básica
Dentro do diretório css-, crie um novo arquivo CSS. Em seguida, insira-o no seu arquivo HTML. (No meu exemplo, o arquivo HTML terá o nome index.html). Este arquivo é a partir de agora o ponto de partida dos próximos tutoriais.
Primeiro, adicione à index.html a estrutura HTML que você já conhece.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Seu consultor fiscal</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Também certifique-se de incluir o arquivo de folha de estilos imediatamente. E agora podemos começar.
O elemento externo é um contêiner div.
<div class="main-container"> </div>
Este contêiner pode ser formatado imediatamente com a sintaxe CSS.
.main-container {
width: 100%;
float: left;
}
O contêiner principal é equipado com uma largura de 100% e flutua para a esquerda. A vantagem da largura de 100% é que você pode, por exemplo, inserir uma imagem de fundo com degradê de cores. Este fundo irá então percorrer toda a largura da tela.
Crio mais dois elementos div dentro do contêiner principal.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Também esses elementos são formatados. A área de conteúdo real tem uma largura de 1000 pixels. Ao especificar margin: 0px auto;, a centralização horizontal do elemento também é obtida.
.container {
width: 1000px;
margin: 0px auto;
}
Continuamos com a formatação do elemento de página.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Este elemento é a área de conteúdo real da página. Aqui, todos os outros elementos são posicionados. Este elemento também recebe uma largura fixa de 1000 pixels. A declaração de padding define os preenchimentos internos. Assim, o preenchimento superior é definido como 40 pixels, e os outros lados como 0 pixels.
Assim, já implementamos a estrutura (bastante) básica do layout.
Agora estamos prontos para preencher esta estrutura com conteúdo. A página é inicialmente dividida em três linhas.
• Cabeçalho
• Conteúdo
• Rodapé
Para isso, são definidas três outras áreas div.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Essas três áreas também são formatadas usando CSS.
.top {
background-color: #f6f7f7;
width: 980px;
float: left;
padding: 0px 10px 10px 10px;
}
.content {
width: 980px;
float: left;
padding-top: 8px;
}
.bottom {
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Agora você pode continuar estilizando as áreas individuais.
Vamos primeiro nos dedicar à área de cabeçalho da página. Este, por sua vez, é composto por vários elementos:
• Logotipo/Título
• menu superior
• imagem grande
Esses três elementos são definidos dentro de **top**.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Seu consultor fiscal</h1> </div> <div class="topmenu"> O menu superior </div> <div class="header-img"> </div> </div>
Esta é a estrutura base da área de cabeçalho da página. Isso também é formatado com CSS, é claro.
.header {
width: 980px;
float: left;
}
.header-top {
width: 980px;
height: 87px;
float: left;
}
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
.header-img {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 980px;
height: 213px;
float: left;
}
A sintaxe contém duas "particularidades". Primeiro, dê uma olhada no conteúdo da classe topmenu. Aqui você verá duas especificações para a imagem de fundo.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
A imagem de um pixel menue.jpg. é incorporada. Esta representa o degradê de cores conhecido em seu menu superior. Com a especificação background-repeat: repeat-x;, a imagem é repetida horizontalmente até que o elemento esteja completamente preenchido.
Dividir a área de conteúdo
A próxima seção é a parte da página onde finalmente os conteúdos são exibidos. Isso ocorre dentro do elemento div chamado content. Esta área é dividida em diferentes elementos. Primeiramente, há uma pequena imagem de teaser e uma saudação de boas-vindas.
A sintaxe HTML correspondente é a seguinte:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Bem-vindo ao nosso site</h1> <p>Aqui segue um texto de boas-vindas</p> </div> </div>
Esta área também é dividida em duas partes. À esquerda está a imagem, ao lado direito está a saudação de boas-vindas. A classe content-image é crucial aqui.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Essa classe envolve a imagem e a saudação. Dentro de content-image, há mais dois componentes.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Bem-vindo</div>
Se você preferir exibir apenas uma grande imagem ou algo semelhante em vez dessa divisão, você pode agrupar esses dois elementos em um elemento div. A sintaxe CSS para a variante de dois elementos seria a seguinte:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}O resultado deve ser visualizado no navegador da seguinte forma:
Agora, seguimos com outros três elementos:
• uma caixa de texto à esquerda,
• uma caixa de texto à direita,
• o menu à direita.
A sintaxe HTML nesta situação seria a seguinte:
<div class="teaser"> <div class="left"> Conteúdo para a caixa de texto à esquerda </div> <div class="right"> Conteúdo para a caixa de texto à direita </div> </div> </div> <div class="content-right"> O menu à direita </div> </div>
E, é claro, aqui está a sintaxe CSS correspondente:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}A estrutura básica do nosso site está concluída neste tutorial.
Agora, é claro, essa estrutura básica ainda precisa ser preenchida com o conteúdo adequado. Isso será abordado no próximo tutorial.
